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 (
+
+ );
+}
+
+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.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.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 (
+
+ );
+}
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}
+
+
+
+ {factorInfo.transportId ? (
+
+ ) : null}
+ {/* {factorInfo ? : null} */}
+
+ {factorInfo ? : null}
+ {factorInfo ? (
+
+
+ جمع کل
+
+ صورتحساب
+
+
+
+ {factorInfo.payPrice}
+
+
+ تومان
+
+
+
+ ) : null}
+
+ {/*
+
+ روشهای ارسال
+
+
+ با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید
+
+
+ {payMethods.map((item, i) => (
+
+ ))}
+
+
*/}
+
+
+
+
+
+ >
+ ) : (
+
+
+
+ )
+ ) : null}
+ {window.innerWidth < 1000 ? (
+ list.length > 0 ? (
+
+
+ {window.location.search.includes("NOK") ? (
+
پرداخت شما با خطا مواجه شد ، لطفا مجدد تلاش نمایید
+ ) : null}
+
جزئیات صورتحساب
+
+ {factorInfo.transportId ? (
+
+
روشهای ارسال
+
+ با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید
+
+
+
+ {this.props.payMethods.map((item, i) => (
+
+ ))}
+
+
+ ) : null}
+ {/*
*/}
+ {factorInfo ?
: null}
+
+
+
+ جمع کل
+
+ سبد خرید
+
+ {factorInfo ? (
+
+
+ {factorInfo.payPrice}
+ {/* // factorInfo.transportPrice - // factorInfo.offPrice} */}
+
+ تومان
+
+ ) : null}
+
+ {/*
+
روشهای ارسال
+
+ با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید
+
+
+
+ {this.props.payMethods.map((item, i) => (
+
+ ))}
+
+
*/}
+ {/*
*/}
+
this.props.payFactor({ userId: userId })}
+ >
+ پرداخت
+
+
+ ) : (
+
+
+
+ )
+ ) : null}
+ >
+ );
+ }
+}
+
+export default connect(
+ (state) => ({
+ list:
+ state.userFactor.info?.products?.filter((item) => +item.condition < 2) ||
+ [],
+ payPrice: state.userProduct.sum,
+ payMethods: state.transport.list,
+ factorInfo: state.userFactor.info,
+ userId: state.user.status.id,
+ provinceList: state.publicApi.province,
+ cityList: state.publicApi.city,
+ isVerified: state.userFactor.isVerified,
+ }),
+ {
+ // getList: userProduct.list,
+ // getInfo: userProduct.info,
+ getTransportList: transport.list,
+ getFactorInfo: userFactor.info,
+ payFactor: userFactor.payment,
+ getVerify: userFactor.verify,
+ }
+)(Cart);
diff --git a/src/views/Checkout/index.scss b/src/views/Checkout/index.scss
new file mode 100644
index 0000000..5b27f5d
--- /dev/null
+++ b/src/views/Checkout/index.scss
@@ -0,0 +1,459 @@
+.cart {
+ width: 100vw;
+ max-width: 1250px;
+ margin: 0px auto;
+ padding: 0px 10px;
+ font-family: numeralLight;
+ padding-top: 85px;
+ &__totalPrice {
+ padding: 20px 0px;
+ border-bottom: 1px dotted #a5a5a5;
+ padding-bottom: 20px;
+
+ h3 {
+ font-family: numeralLight;
+ color: #00cc69;
+ margin: 0px;
+ }
+ div {
+ margin-right: 20px;
+ strong {
+ font-family: numeralLight;
+ color: #4d4d4f;
+ margin-left: 5px;
+ }
+ span {
+ font-family: numeralLight;
+ color: #848484;
+ }
+ }
+ }
+ &__right {
+ flex: 4;
+ padding: 10px 0px 0px;
+ }
+ &__left {
+ flex: 1.2;
+ box-shadow: 0px 0px 13px #d5d5d5b0;
+ border-radius: 13px;
+ margin-right: 30px;
+
+ &--header {
+ h2 {
+ font-family: numeralLight;
+ color: #2580ec;
+ }
+ p {
+ font-family: numeralLight;
+ color: #a5a5a5;
+ letter-spacing: -1px;
+ }
+ }
+ &--submit {
+ justify-self: flex-end;
+ padding: 12px;
+ width: 100%;
+ font-family: numeralLight;
+ color: white;
+ background-color: #6cbe44;
+ border: 0px;
+ border-radius: 10px;
+ margin-top: 50px;
+ }
+ }
+}
+
+.mobile-cart {
+ width: 100vw;
+ max-width: 650px;
+ margin: 0px auto;
+ padding: 0px 10px 40px;
+ direction: rtl;
+ padding-top: 70px;
+ overflow-x: hidden;
+ font-family: numeralLight;
+ &__submit {
+ justify-self: flex-end;
+ padding: 12px;
+ width: 100%;
+ font-family: numeralLight;
+ color: white;
+ background-color: #6cbe44;
+ border: 0px;
+ border-radius: 10px;
+ margin-top: 30px;
+ }
+ h1 {
+ font-family: numeralMedium;
+ color: #373737;
+ }
+
+ &__payMethods {
+ 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;
+ }
+ }
+}
+
+.checkout {
+ width: 100vw;
+ max-width: 1250px;
+ margin: 0px auto;
+ padding: 0px 10px;
+ direction: rtl;
+ min-height: calc(100vh - 288px);
+ overflow-x: hidden;
+ padding-top: 60px;
+ &__forms {
+ width: 100%;
+ justify-content: space-between;
+ margin-top: 30px;
+ margin-bottom: 80px;
+ &--right {
+ width: 45%;
+ .MuiOutlinedInput-notchedOutline {
+ top: 0px !important;
+ }
+ .MuiOutlinedInput-notchedOutline {
+ border-color: #cecece !important;
+ border-width: 1px !important;
+ color: green !important;
+ border-radius: 10px !important;
+ }
+
+ .MuiOutlinedInput-input {
+ padding: 20px 14px !important;
+ font-size: calc(100vw / 85) !important;
+ }
+ .MuiInputLabel-outlined {
+ font-family: numeralLight !important;
+ display: inline !important;
+ position: absolute;
+ text-align: right !important;
+ right: 10px;
+ top: 12px;
+ padding: 0px !important;
+ transform: translate(0px, 0px) scale(1) !important;
+ }
+ .MuiInputLabel-shrink {
+ text-align: right !important;
+ display: inline;
+ position: absolute;
+ right: -5px;
+ top: -8px;
+ transform: translate(0px, 0px) scale(0.75) !important;
+ padding-right: 15px !important;
+ }
+
+ label {
+ background-color: white;
+ max-width: 120px;
+ text-align: center;
+ color: #797979 !important;
+ letter-spacing: -1px;
+ }
+ .Mui-focused {
+ color: rgba(0, 0, 0, 0.54) !important;
+ border-color: #c4c4c5 !important;
+ }
+ h1 {
+ letter-spacing: -2px;
+ color: #6cbe44;
+ font-family: numeralMedium;
+ font-size: calc(100vw / 40);
+ }
+ p {
+ font-family: numeralLight;
+ font-size: calc(100vw / 95);
+ color: #6f7074;
+ }
+
+ button {
+ align-self: flex-start;
+ margin-top: 30px;
+ font-family: numeralLight;
+ text-decoration: none;
+ color: white;
+ background-color: #6cbe44;
+ border-radius: 6px;
+ padding: 5px 25px;
+ font-size: calc(100vw / 90);
+ max-width: 110px;
+ border: 0px;
+ &:hover {
+ color: white;
+ }
+ }
+
+ .MuiFormControl-root {
+ select {
+ font-family: numeralLight;
+ height: 100%;
+ direction: rtl;
+ border: 1px solid #cecece !important;
+ text-align: center !important;
+ border-radius: 10px !important;
+ color: #76797e !important;
+ &:focus {
+ background-color: white !important;
+ }
+ option {
+ padding: 5px !important;
+ }
+ }
+ .MuiNativeSelect-icon {
+ display: none;
+ }
+ .MuiNativeSelect-select {
+ padding: 8px 10px 8px 100px !important;
+ }
+ }
+ }
+ &--left {
+ width: 45%;
+ .MuiOutlinedInput-notchedOutline {
+ top: 0px !important;
+ }
+ .MuiOutlinedInput-notchedOutline {
+ border-color: #cecece !important;
+ border-width: 1px !important;
+ color: green !important;
+ border-radius: 10px !important;
+ }
+
+ .MuiOutlinedInput-input {
+ padding: 20px 14px !important;
+ font-size: calc(100vw / 85) !important;
+ }
+ .MuiInputLabel-outlined {
+ font-family: numeralLight !important;
+ display: inline !important;
+ position: absolute;
+ text-align: right !important;
+ right: 10px;
+ top: 12px;
+ padding: 0px !important;
+ transform: translate(0px, 0px) scale(1) !important;
+ }
+ .MuiInputLabel-shrink {
+ text-align: right !important;
+ display: inline;
+ position: absolute;
+ right: -5px;
+ top: -8px;
+ transform: translate(0px, 0px) scale(0.75) !important;
+ padding-right: 15px !important;
+ }
+
+ label {
+ background-color: white;
+ max-width: 120px;
+ text-align: center;
+ color: #797979 !important;
+ letter-spacing: -1px;
+ }
+ .Mui-focused {
+ color: rgba(0, 0, 0, 0.54) !important;
+ border-color: #c4c4c5 !important;
+ }
+ h1 {
+ letter-spacing: -2px;
+ color: #6cbe44;
+ font-family: numeralMedium;
+ font-size: calc(100vw / 40);
+ }
+ p {
+ font-family: numeralLight;
+ font-size: calc(100vw / 95);
+ color: #6f7074;
+ }
+
+ button {
+ align-self: flex-start;
+ margin-top: 30px;
+ font-family: numeralLight;
+ text-decoration: none;
+ color: white;
+ background-color: #6cbe44;
+ border-radius: 6px;
+ padding: 5px 25px;
+ font-size: calc(100vw / 90);
+ max-width: 110px;
+ border: 0px;
+ &:hover {
+ color: white;
+ }
+ }
+
+ .MuiFormControl-root {
+ select {
+ font-family: numeralLight;
+ height: 100%;
+ direction: rtl;
+ border: 1px solid #cecece !important;
+ text-align: center !important;
+ border-radius: 10px !important;
+ color: #76797e !important;
+ &:focus {
+ background-color: white !important;
+ }
+ option {
+ padding: 5px !important;
+ }
+ }
+ .MuiNativeSelect-icon {
+ display: none;
+ }
+ .MuiNativeSelect-select {
+ padding: 8px 10px 8px 100px !important;
+ }
+ }
+ }
+ }
+}
+
+.mobile-checkout {
+ // width: 100vw;
+ max-width: 550px;
+ margin: 0px auto;
+ padding: 0px 10px;
+ direction: rtl;
+ overflow-x: hidden;
+ padding-top: 70px;
+ padding-bottom: 50px;
+ &__form {
+ width: 100%;
+ justify-content: space-between;
+ margin-top: 20px;
+ margin-bottom: 20px;
+
+ .MuiOutlinedInput-notchedOutline {
+ top: 0px !important;
+ }
+ .MuiOutlinedInput-notchedOutline {
+ border-color: #cecece !important;
+ border-width: 1px !important;
+ color: green !important;
+ border-radius: 10px !important;
+ }
+
+ .MuiOutlinedInput-input {
+ padding: 20px 14px !important;
+ }
+ .MuiInputLabel-outlined {
+ font-family: numeralLight !important;
+ display: inline !important;
+ position: absolute;
+ text-align: right !important;
+ right: 10px;
+ top: 12px;
+ padding: 0px !important;
+ transform: translate(0px, 0px) scale(1) !important;
+ }
+ .MuiInputLabel-shrink {
+ text-align: right !important;
+ display: inline;
+ position: absolute;
+ right: -5px;
+ top: -8px;
+ transform: translate(0px, 0px) scale(0.75) !important;
+ padding-right: 0px !important;
+ width: fit-content;
+ padding: 0px 6px !important;
+ }
+
+ label {
+ background-color: white;
+ max-width: 120px;
+ text-align: center;
+ color: #797979 !important;
+ letter-spacing: -1px;
+ font-family: numeralLight !important;
+ font-size: 14px;
+ }
+ .Mui-focused {
+ color: rgba(0, 0, 0, 0.54) !important;
+ border-color: #c4c4c5 !important;
+ }
+ h1 {
+ letter-spacing: -2px;
+ color: #6cbe44;
+ font-family: numeralMedium;
+ }
+ p {
+ font-family: numeralLight;
+ color: #6f7074;
+ }
+
+ button {
+ align-self: flex-start;
+ margin-top: 5px;
+ font-family: numeralLight;
+ text-decoration: none;
+ color: white;
+ background-color: #6cbe44;
+ border-radius: 6px;
+ padding: 8px 25px;
+ width: 100%;
+ border: 0px;
+ &:hover {
+ color: white;
+ }
+ }
+
+ .MuiFormControl-root {
+ select {
+ font-family: numeralLight;
+ height: 100%;
+ direction: rtl;
+ border: 1px solid #cecece !important;
+ text-align: center !important;
+ border-radius: 10px !important;
+ color: #76797e !important;
+ &:focus {
+ background-color: white !important;
+ }
+ option {
+ padding: 5px !important;
+ }
+ }
+ .MuiNativeSelect-icon {
+ display: none;
+ }
+ .MuiNativeSelect-select {
+ padding: 8px 10px 8px 100px !important;
+ }
+ }
+ }
+ &__address {
+ width: 100%;
+ p {
+ font-family: numeralLight;
+ margin-bottom: 0px;
+ color: #6f7074;
+ }
+ span {
+ font-family: numeralLight;
+ margin-bottom: 0px;
+ color: #6f7074;
+ margin-right: 5px;
+ }
+ &--map {
+ width: 100%;
+ height: 180px;
+ border-radius: 20px;
+ img {
+ transform: scale(0.4);
+ }
+ }
+ }
+}