From 043cee641d5a9fa65fe6788098b79515acbba176 Mon Sep 17 00:00:00 2001 From: amir hosein gorji Date: Tue, 21 Sep 2021 13:19:30 +0430 Subject: [PATCH] update AppRouter.js, src/views/Cart/Factor/index.js, src/views/Cart/index.js and src/views/Cart/index.scss --- src/AppRouter.js | 12 + src/views/Cart/Factor/index.js | 8 +- src/views/Cart/index.js | 60 ++- src/views/Cart/index.scss | 3 +- src/views/Checkout/DeliveryMethod/index.js | 96 ++++ src/views/Checkout/DeliveryMethod/index.scss | 52 +++ src/views/Checkout/Discount/index.js | 87 ++++ src/views/Checkout/Discount/index.scss | 82 ++++ src/views/Checkout/Factor/index.js | 101 ++++ src/views/Checkout/Factor/index.scss | 53 +++ src/views/Checkout/Input/index.js | 52 +++ src/views/Checkout/Select/index.js | 84 ++++ src/views/Checkout/Table/index.js | 314 +++++++++++++ src/views/Checkout/Table/index.scss | 150 ++++++ src/views/Checkout/TextArea/index.js | 31 ++ src/views/Checkout/index.js | 444 ++++++++++++++++++ src/views/Checkout/index.scss | 459 +++++++++++++++++++ 17 files changed, 2059 insertions(+), 29 deletions(-) create mode 100644 src/views/Checkout/DeliveryMethod/index.js create mode 100644 src/views/Checkout/DeliveryMethod/index.scss create mode 100644 src/views/Checkout/Discount/index.js create mode 100644 src/views/Checkout/Discount/index.scss create mode 100644 src/views/Checkout/Factor/index.js create mode 100644 src/views/Checkout/Factor/index.scss create mode 100644 src/views/Checkout/Input/index.js create mode 100644 src/views/Checkout/Select/index.js create mode 100644 src/views/Checkout/Table/index.js create mode 100644 src/views/Checkout/Table/index.scss create mode 100644 src/views/Checkout/TextArea/index.js create mode 100644 src/views/Checkout/index.js create mode 100644 src/views/Checkout/index.scss diff --git a/src/AppRouter.js b/src/AppRouter.js index c866e3e..346dc7b 100644 --- a/src/AppRouter.js +++ b/src/AppRouter.js @@ -23,6 +23,7 @@ import Activation from "./views/Activation/index"; import ChatList from "./views/ChatList/index"; import Chatroom from "./views/ChatRoom/index"; import Cart from "./views/Cart/index"; +import Checkout from "./views/Checkout/index"; import MyBooks from "./views/MyBooks/index"; import AR from "./views/AR/index"; import Download from "./views/Download/index"; @@ -259,6 +260,17 @@ class AppRouter extends Component { /> )} + + {status ? ( + + ) : ( + + )} + {/* {mobile ? ( status ? ( diff --git a/src/views/Cart/Factor/index.js b/src/views/Cart/Factor/index.js index 0c94ecb..5747c2f 100644 --- a/src/views/Cart/Factor/index.js +++ b/src/views/Cart/Factor/index.js @@ -35,13 +35,13 @@ const Factor = (props) => { مبلغ سبد خرید {factorInfo.sumPrice} تومان -
+ {/*
هزینه ارسال {factorInfo.transportPrice} تومان -
+
*/}
میزان تخفیف {factorInfo.offPrice} تومان @@ -62,7 +62,7 @@ const Factor = (props) => { {factorInfo.sumPrice} تومان
-
+ {/*
هزینه ارسال @@ -70,7 +70,7 @@ const Factor = (props) => { {factorInfo.transportPrice} تومان -
+
*/}
میزان تخفیف diff --git a/src/views/Cart/index.js b/src/views/Cart/index.js index a053c9e..12e497d 100644 --- a/src/views/Cart/index.js +++ b/src/views/Cart/index.js @@ -173,7 +173,7 @@ class Cart extends Component { />
- {factorInfo.transportId ? ( + {false && factorInfo.transportId ? (

روشهای ارسال @@ -203,7 +203,7 @@ class Cart extends Component {

- {factorInfo.payPrice} + {factorInfo.payPrice - factorInfo.transportPrice} تومان @@ -225,12 +225,14 @@ class Cart extends Component { ))}
*/} - + ادامه + @@ -262,23 +264,25 @@ class Cart extends Component { route={"cart"} /> -
-

روشهای ارسال

-

- با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید -

+ {false && factorInfo.transportId ? ( +
+

روشهای ارسال

+

+ با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید +

-
- {this.props.payMethods.map((item, i) => ( - - ))} +
+ {this.props.payMethods.map((item, i) => ( + + ))} +
-
+ ) : null} {factorInfo ? : null} @@ -291,7 +295,7 @@ class Cart extends Component { {factorInfo ? (
- {factorInfo.payPrice} + {factorInfo.payPrice - factorInfo.transportPrice} {/* // factorInfo.transportPrice - // factorInfo.offPrice} */} تومان @@ -310,12 +314,20 @@ class Cart extends Component { ))}
*/} - + */} + this.props.payFactor({ userId: userId })} + > + ادامه + ) : (
maxDesktopSize ? 30 : window.innerWidth / 40, + th: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80, + h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 55, + h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, + strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, + span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95, + }, + mobile: { + h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13, + h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, + h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, + strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, + span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34, + p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, + input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, + }, +}; +class DeliveryMethod extends Component { + render() { + const { data, setTransport, factorInfo, transportId } = this.props; + return ( + <> + {window.innerWidth > 1000 ? ( +
+ setTransport( + { + factorId: factorInfo.id, + transportId: data.id, + }, + {} + ) + } + > + + {data.name} + +
+

{data.price}

+ تومان +
+
+ ) : null} + {window.innerWidth < 1000 ? ( +
+ setTransport( + { + factorId: factorInfo.id, + transportId: data.id, + }, + {} + ) + } + > + + {data.name} + +
+

{data.price}

+ تومان +
+
+ ) : null} + + ); + } +} + +export default connect( + (state) => ({ + factorInfo: state.userFactor.info, + list: state.userProduct.list, + }), + { + setTransport: transport.setTransport, + } +)(DeliveryMethod); diff --git a/src/views/Checkout/DeliveryMethod/index.scss b/src/views/Checkout/DeliveryMethod/index.scss new file mode 100644 index 0000000..78ebf0c --- /dev/null +++ b/src/views/Checkout/DeliveryMethod/index.scss @@ -0,0 +1,52 @@ +.mobile-delivery-methods { + padding: 6px; + border-radius: 10px; + border: 1px solid #88a9ff; + margin-top: 10px; + flex: 1; + margin: 5px; + h3, + strong, + span { + font-family: numeralLight; + font-weight: 100; + margin: 0px; + } + strong { + // width: 50%; + color: #678ef8; + letter-spacing: -1px; + } + h3, + span { + color: #02a255; + font-family: numeralLight; + } +} + +.delivery-methods { + padding: 6px; + border-radius: 10px; + border: 1px solid #88a9ff; + margin-top: 10px; + flex: 1; + max-width: 45%; + cursor: pointer; + h3, + strong, + span { + font-family: numeralLight; + font-weight: 100; + margin: 0px; + } + strong { + width: 50%; + color: #678ef8; + letter-spacing: -1px; + } + h3, + span { + color: #02a255; + font-family: numeralLight; + } +} diff --git a/src/views/Checkout/Discount/index.js b/src/views/Checkout/Discount/index.js new file mode 100644 index 0000000..2a13f79 --- /dev/null +++ b/src/views/Checkout/Discount/index.js @@ -0,0 +1,87 @@ +import React from "react"; +import "./index.scss"; +import { connect } from "react-redux"; +import { userFactor } from "~/Redux/actions"; + +const maxDesktopSize = 1250; +const maxMobileSize = 550; + +const fontSize = { + desktop: { + h2: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 55, + input: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75, + button: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, + p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, + }, + mobile: { + h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, + p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, + input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, + button: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25, + }, +}; + +const DiscoutCode = ({ codeId, setCodeId, userId, factorId }) => { + const [value, setValue] = React.useState(codeId || ""); + function setOff() { + setCodeId({ offCodeValue: value, userId: userId, id: factorId || null }); + } + return ( + <> + {window.innerWidth > 1000 ? ( +
+

کد تخفیف

+

+ اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید +

+
+ setValue(e.target.value)} + /> + +
+
+ ) : null} + {window.innerWidth < 1000 ? ( +
+

کد تخفیف

+

+ اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید{" "} +

+
+ setValue(e.target.value)} + /> + +
+
+ ) : null} + + ); +}; + +export default connect( + (state) => ({ + codeId: state.userFactor.info?.codeId, + userId: state.user.status.id, + factorId: state.userFactor.info?.id, + }), + { + setCodeId: userFactor.update, + } +)(DiscoutCode); diff --git a/src/views/Checkout/Discount/index.scss b/src/views/Checkout/Discount/index.scss new file mode 100644 index 0000000..67d4f1a --- /dev/null +++ b/src/views/Checkout/Discount/index.scss @@ -0,0 +1,82 @@ +.discount-code { + border-bottom: 1px dotted #a5a5a5; + margin-top: 20px; + padding-bottom: 20px; + h2 { + font-family: numeralMedium; + color: #2580ec; + } + p { + font-family: numeralLight; + color: #a5a5a5; + letter-spacing: -1px; + } + &__box { + border: 1px solid #2b95ff; + padding: 5px; + border-radius: 10px; + input { + color: #2b95ff; + font-family: numeralLight; + text-align: center; + padding: 0px; + border-radius: 10px; + border: 0px; + flex: 1; + direction: ltr; + &:focus { + outline: none; + } + } + button { + border-radius: 10px; + background-color: #2b95ff; + font-family: numeralLight; + color: white; + padding: 5px 10px; + border: 0px; + width: 80px; + } + } +} + +.mobile-discount-code { + border-bottom: 1px dotted #a5a5a5; + margin-top: 20px; + padding-bottom: 20px; + h2 { + font-family: numeralMedium; + color: #2580ec; + } + p { + font-family: numeralLight; + color: #a5a5a5; + letter-spacing: -1px; + } + &__box { + border: 1px solid #2b95ff; + padding: 5px; + border-radius: 10px; + input { + color: #2b95ff; + font-family: numeralLight; + text-align: center; + padding: 5px; + border-radius: 10px; + border: 0px; + flex: 1; + direction: ltr; + &:focus { + outline: none; + } + } + button { + border-radius: 10px; + background-color: #2b95ff; + font-family: numeralLight; + color: white; + padding: 10px 20px; + border: 0px; + } + } +} diff --git a/src/views/Checkout/Factor/index.js b/src/views/Checkout/Factor/index.js new file mode 100644 index 0000000..0c94ecb --- /dev/null +++ b/src/views/Checkout/Factor/index.js @@ -0,0 +1,101 @@ +import React from "react"; +import { connect } from "react-redux"; +import "./index.scss"; + +const maxDesktopSize = 1250; +const maxMobileSize = 550; + +const fontSize = { + desktop: { + h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, + th: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80, + h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 55, + h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, + strong: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 90, + span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, + }, + mobile: { + h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13, + h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, + h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, + strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, + span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34, + p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, + input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, + }, +}; + +const Factor = (props) => { + const { factorInfo } = props; + return ( + <> + {window.innerWidth < 1000 ? ( +
+
+ مبلغ سبد خرید + {factorInfo.sumPrice} تومان +
+
+ هزینه ارسال + + {factorInfo.transportPrice} + تومان + +
+
+ میزان تخفیف + {factorInfo.offPrice} تومان +
+
+ مالیات بر ارزش افزوده + {factorInfo.vatPrice} تومان +
+
+ ) : null} + {window.innerWidth > 1000 ? ( +
+
+ + مبلغ سبد خرید + + + {factorInfo.sumPrice} تومان + +
+
+ + هزینه ارسال + + + {factorInfo.transportPrice} + تومان + +
+
+ + میزان تخفیف + + + {factorInfo.offPrice} تومان + +
+
+ + مالیات بر ارزش افزوده + + + {factorInfo.vatPrice} تومان + +
+
+ ) : null} + + ); +}; + +export default connect( + (state) => ({ + factorInfo: state.userFactor.info, + }), + {} +)(Factor); diff --git a/src/views/Checkout/Factor/index.scss b/src/views/Checkout/Factor/index.scss new file mode 100644 index 0000000..e46d786 --- /dev/null +++ b/src/views/Checkout/Factor/index.scss @@ -0,0 +1,53 @@ +.mobile-factor { + border-bottom: 1px dotted #a5a5a5; + margin-top: 20px; + padding-bottom: 20px; + h2 { + font-family: numeralMedium; + color: #2580ec; + } + p { + font-family: numeralLight; + color: #a5a5a5; + letter-spacing: -1px; + } + div { + margin-bottom: 10px; + strong { + font-family: numeralLight; + color: #373737; + font-weight: 300; + } + span { + font-family: numeralLight; + color: #373737; + } + } +} + +.factor { + border-bottom: 1px dotted #a5a5a5; + margin-top: 20px; + padding-bottom: 20px; + h2 { + font-family: numeralMedium; + color: #2580ec; + } + p { + font-family: numeralLight; + color: #a5a5a5; + letter-spacing: -1px; + } + div { + margin-bottom: 10px; + strong { + font-family: numeralLight; + color: #373737; + font-weight: 300; + } + span { + font-family: numeralLight; + color: #373737; + } + } +} diff --git a/src/views/Checkout/Input/index.js b/src/views/Checkout/Input/index.js new file mode 100644 index 0000000..554292b --- /dev/null +++ b/src/views/Checkout/Input/index.js @@ -0,0 +1,52 @@ +import React from "react"; +import TextField from "@material-ui/core/TextField"; +import { makeStyles } from "@material-ui/core/styles"; + +export default function FormPropsTextFields(props) { + const useStyles = makeStyles((theme) => ({ + root: { + "& .MuiTextField-root": { + width: "100%", + position: "relative", + marginRight: 10, + marginTop: 20, + "& input": { + textAlign: props.align, + direction: props.align === "right" ? "rtl" : "ltr", + }, + fontFamily: "numeralLight", + }, + }, + })); + + const classes = useStyles(); + const { parent, defaultValue, maxLength, onInput, variant } = props; + return ( +
+
+ parent.onChange(e.target.name, e.target.value)} + defaultValue={defaultValue[props.name] || ""} + required={props.required} + inputProps={{ maxLength }} + onInput={ + onInput + ? (e) => (e.target.value = onInput(e.target.value)) + : () => {} + } + /> +
+
+ ); +} + +FormPropsTextFields.defaultProps = { + align: "right", + maxLength: "", + inputMode: "numeric", + defaultValue: "", +}; diff --git a/src/views/Checkout/Select/index.js b/src/views/Checkout/Select/index.js new file mode 100644 index 0000000..b013492 --- /dev/null +++ b/src/views/Checkout/Select/index.js @@ -0,0 +1,84 @@ +import React from "react"; +import { makeStyles } from "@material-ui/core/styles"; +import FormControl from "@material-ui/core/FormControl"; +import Select from "@material-ui/core/Select"; +import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown"; +import InputLabel from "@material-ui/core/InputLabel"; + +const useStyles = makeStyles((theme) => ({ + marginLeft: { + // margin: theme.spacing(1), + marginLeft: 8, + }, +})); + +export default function CustomizedSelects(props) { + const classes = useStyles(); + const { parent, selectedOptions } = props; + return ( + <> + {window.innerWidth < 1000 ? ( +
+ + + {props.label} + + + + +
+ ) : null} + {window.innerWidth > 1000 ? ( +
+ + + {props.label} + + + + +
+ ) : null} + + ); +} diff --git a/src/views/Checkout/Table/index.js b/src/views/Checkout/Table/index.js new file mode 100644 index 0000000..53e2287 --- /dev/null +++ b/src/views/Checkout/Table/index.js @@ -0,0 +1,314 @@ +import React from "react"; +import { connect } from "react-redux"; +import { userProduct } from "~/Redux/actions"; + +import { makeStyles } from "@material-ui/core/styles"; +import Table from "@material-ui/core/Table"; +import TableBody from "@material-ui/core/TableBody"; +import TableCell from "@material-ui/core/TableCell"; +import TableContainer from "@material-ui/core/TableContainer"; +import TableHead from "@material-ui/core/TableHead"; +import TableRow from "@material-ui/core/TableRow"; +import Paper from "@material-ui/core/Paper"; +import DeleteOutlineOutlinedIcon from "@material-ui/icons/DeleteOutlineOutlined"; + +import "./index.scss"; +const useStyles = makeStyles({ + table: {}, +}); +const grades = [ + "پیش دبستان", + "اول", + "دوم", + "سوم", + "چهارم", + "پنجم", + "ششم", + "هفتم", + "هشتم", + "نهم", + "دهم", + "یازدهم", + "دوازدهم", +]; +const maxMobileSize = 550; +const maxDesktopSize = 1250; + +const fontSize = { + mobile: { + info: { + strong: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 28, + p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36, + span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 36, + }, + price: { + strong: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 22, + span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 40, + }, + counter: { + button: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 25, + span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 25, + }, + delete: { + span: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 28, + }, + }, + desktop: { + info: { + strong: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, + p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, + span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, + }, + price: { + strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 60, + span: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95, + }, + counter: { + button: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 65, + span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 65, + }, + delete: { + span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, + }, + }, +}; + +function BasicTable(props) { + const classes = useStyles(); + const { list, handleDelete, route, factorInfo } = props; + const sum = () => { + let total = 0; + for (let i = 0; i < list.length; i++) { + total += list[i].count * 1; + } + return total; + }; + + return ( + <> + {window.innerWidth < 1000 ? ( + + + + + محصولات + قیمت + + {route === "callback" ? ( + تعداد + ) : null} + + + + {list.map((row, i) => ( + + ))} + +
+
+ ) : null} + {window.innerWidth > 1000 ? ( + + + + + محصولات + تعداد + قیمت + + + + {list.map((row, i) => ( + + ))} + +
+
+ ) : null} + + ); +} + +const Item = (props) => { + const { data, pushToCart, id, route } = props; + return ( + <> + {window.innerWidth < 1000 ? ( + + +
+ {data.product.book.name} +
+ + {`نسخه ${ + +data.product.productType === 1 ? "الکترونیکی" : "چاپی" + } ${data.product.book.name} `} + +

+ {`پایه ${grades[data.product.book.gradeId]}`} +

+ + همراه با: + {data.product.book.items || "کد فعالسازی محتوای الکترونیک"} + + {route !== "callback" ? ( +
+ + pushToCart({ + productId: data.productId, + userId: id, + count: -data.count, + }) + } + style={{ + fontSize: fontSize.mobile.delete.span, + color: "#FC120A", + cursor: "pointer", + }} + > + حذف + +
+ ) : null} +
+
+
+ +
+
+ + {data.product.price * data.count || "1000"} + + {route !== "callback" ? ( + + {data.product.price || "100"} قیمت هر واحد + + ) : null} +
+ {route === "cart" ? ( +
+ + + {data.count} + + +
+ ) : null} +
+
+ {route === "callback" ? ( + + + {data.count} + + + ) : null} +
+ ) : null} + {window.innerWidth > 1000 ? ( + + +
+ {data.product.book.name} +
+ + {`${data.product.book.name} `} + + + {" "} + {`نسخه ${ + +data.product.productType === 1 ? "الکترونیکی" : "چاپی" + }`} + + +

+ {`پایه ${grades[data.product.book.gradeId]}`} +

+
+
+
+ + {data.count} + + +
+ + {data.product.price * data.count || "1000"} + +
+
+
+ ) : null} + + ); +}; + +export default connect( + (state) => ({ + loading: state.userProduct.loading, + info: state.book.info, + id: state.user.status.id, + factorInfo: state.userFactor.info, + }), + { pushToCart: userProduct.add } +)(BasicTable); diff --git a/src/views/Checkout/Table/index.scss b/src/views/Checkout/Table/index.scss new file mode 100644 index 0000000..0d29f07 --- /dev/null +++ b/src/views/Checkout/Table/index.scss @@ -0,0 +1,150 @@ +.mobile-cart-table-product { + width: 100%; + font-family: numeralLight; + img { + height: 100px; + // width: 70px; + border-radius: 10px; + } + &__info { + width: 100%; + margin-left: 10px; + strong, + p, + span { + margin: 0px; + font-family: numeralLight; + } + p { + color: #00cc69; + } + span { + color: #2580ec; + } + &--delete { + margin-top: 10px; + } + } +} + +.mobile-cart-table-price { + text-align: center; + font-family: numeralLight; + &__price { + strong, + span { + font-family: numeralLight; + } + strong { + color: #4d4d4f; + } + span { + color: #4d4d4f; + letter-spacing: -1px; + } + } + &__info { + strong, + p, + span { + margin: 0px; + font-family: numeralLight; + } + p { + color: #00cc69; + } + span { + color: #2580ec; + } + } + &__counter { + padding: 5px 5px; + border: 1px solid rgb(177, 177, 177); + border-radius: 8px; + margin-top: 10px; + button { + border: 0px; + background-color: white; + color: #4d4d4f; + &:focus { + outline: none; + } + } + span { + margin: 0px 15px; + color: #4d4d4f; + } + } +} + +.MuiTableCell-root { + padding: 10px 0px !important; + font-family: numeralLight !important; +} + +.cart-item { + // justify-content: space-between; + border-top: 1px solid #eee; + padding: 15px 0px; + &__info { + // flex-shrink: 1; + img { + height: 100px; + border-radius: 10px; + margin-left: 10px; + } + div { + strong { + font-family: numeralLight; + color: #373737; + } + p { + font-family: numeralLight; + color: #00cc69; + margin: 0px; + letter-spacing: -1px; + } + span { + font-family: numeralLight; + color: #2580ec; + letter-spacing: -1px; + } + } + } + &__price { + color: #4d4d4f; + strong { + font-family: numeralLight; + } + span { + font-family: numeralLight; + } + } + &__counter { + justify-content: center; + &--box { + padding: 5px 10px; + border: 1px solid rgb(177, 177, 177); + border-radius: 8px; + button { + border: 0px; + background-color: white; + color: #4d4d4f; + &:focus { + outline: none; + } + } + span { + margin: 0px 15px; + color: #4d4d4f; + } + } + } + &__delete { + margin-left: 20px; + span { + font-family: numeralLight; + color: #fc120a; + } + } +} diff --git a/src/views/Checkout/TextArea/index.js b/src/views/Checkout/TextArea/index.js new file mode 100644 index 0000000..7f75b96 --- /dev/null +++ b/src/views/Checkout/TextArea/index.js @@ -0,0 +1,31 @@ +import React from "react"; +import { makeStyles } from "@material-ui/core/styles"; +import TextField from "@material-ui/core/TextField"; + +const useStyles = makeStyles((theme) => ({ + root: { + "& .MuiTextField-root": { + margin: theme.spacing(0), + width: "100%", + }, + }, +})); + +export default function MultilineTextFields(props) { + const classes = useStyles(); + const { parent, defaultValue } = props; + return ( +
+ parent.onChange(e.target.name, e.target.value)} + defaultValue={defaultValue || ""} + name={props.name} + variant="outlined" + /> + + ); +} diff --git a/src/views/Checkout/index.js b/src/views/Checkout/index.js new file mode 100644 index 0000000..2c31be2 --- /dev/null +++ b/src/views/Checkout/index.js @@ -0,0 +1,444 @@ +import React, { Component } from "react"; +import { connect } from "react-redux"; +import { transport, userFactor } from "~/Redux/actions"; + +import Navbar from "../Home/Navbar/index"; +import Footer from "../Home/Footer/index"; +import Table from "./Table/index"; +// import DiscoutCode from "./Discount/index"; +import DeliveryMethod from "./DeliveryMethod/index"; +import Factor from "./Factor/index"; +import Loader from "~/components/Loader/index"; +import { Link } from "react-router-dom"; +import Input from "./Input/index"; +import Select from "./Select/index"; +import TextArea from "./TextArea/index"; +import "./index.scss"; +import onInput from "~/util/onInput"; +const maxDesktopSize = 1250; +const maxMobileSize = 550; + +const fontSize = { + desktop: { + h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, + th: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80, + h2: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 55, + h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, + strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, + span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95, + p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 90, + }, + mobile: { + h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13, + h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, + h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, + strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, + span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34, + p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, + input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, + }, +}; +class Cart extends Component { + state = { + selectedDelivery: { name: "", price: 0 }, + discount: 0, + totalPrice: null, + list: this.props.list, + controlFactorInfoRepeat: true, + }; + + componentDidUpdate(prevProps, prevState) { + if (window.location.search) + if (!window.location.search.includes("NOK") && !window.location.hash) { + let Authority = window.location.search + .slice(1) + .split("&")[0] + .split("=")[1]; + this.props.getVerify({ Authority }); + window.location.hash = "verified"; + } + + // if (this.props.factorInfo === null && !this.controlFactorInfoRepeat) { + // this.props.getFactorInfo({}); + // this.controlFactorInfoRepeat = true; + // } + // if (this.props.list.length > 0) { + // let wantedId; //should be zero + // for (let item of this.props.list) { + // if (item.condition === 2) { + // wantedId = item.id; + // break; + // } + // } + // if (this.props.list.length !== 1) { + // // this.props.getInfo({ id: wantedId }); + // } + // } else { + // // this.props.getFactorInfo({}); + // } + } + + componentDidMount() { + window.scrollTo(0, 0); + this.props.getTransportList(); + this.props.getFactorInfo({}); + } + + handleCounter = (type, id) => { + if (type === "increase") { + this.setState((prevState) => ({ + list: prevState.list.map((item) => + item.id === id ? { ...item, number: item.number + 1 } : item + ), + })); + } else { + this.setState((prevState) => ({ + list: prevState.list.map((item) => + item.id === id ? { ...item, number: item.number - 1 } : item + ), + })); + } + }; + onChange(name, value) {} + handleDelete = (id) => { + let list = this.state.list.filter((item) => item.id !== id); + this.setState({ + list: list, + }); + }; + + totalPrice = () => { + let total = 0; + for (let i = 0; i < this.state.list.length; i++) { + total += this.state.list[i].price * this.state.list[i].number; + } + return total - this.state.discount + this.state.selectedDelivery.price; + }; + + render() { + const { list, payPrice, payMethods, factorInfo, userId } = this.props; + if (!factorInfo || list.length === 0) + return ( +
+ +
+ هیچ محصولی در سبد خرید شما وجود ندارد +
+
+ + فروشگاه + +
+ ); + return ( + <> + {window.innerWidth > 1000 ? ( + list.length > 0 ? ( + <> +
+ + {window.location.search.includes("NOK") || + this.props.isVerified === false ? ( +
پرداخت شما با خطا مواجه شد ، لطفا مجدد تلاش نمایید
+ ) : null} +
+
+
+

+ جزئیات صورتحساب +

+
+
+
+ +
+ {" "} +
+