update AppRouter.js, src/views/Cart/Factor/index.js, src/views/Cart/index.js and src/views/Cart/index.scss

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 {
               />
             )}
           </Route>
+          <Route exact path={"/checkout"}>
+            {status ? (
+              <Checkout />
+            ) : (
+              <Redirect
+                to={{
+                  pathname: "/",
+                }}
+              />
+            )}
+          </Route>
           {/* <Route exact path={"/mybooks"}>
             {mobile ? (
               status ? (

src/views/Cart/Factor/index.js

@@ -35,13 +35,13 @@ const Factor = (props) => {
             <strong>مبلغ سبد خرید</strong>
             <span>{factorInfo.sumPrice} تومان</span>
           </div>
-          <div className="d-flex justify-content-between">
+          {/* <div className="d-flex justify-content-between">
             <strong>هزینه ارسال</strong>
             <span>
               {factorInfo.transportPrice}
               تومان
             </span>
-          </div>
+          </div> */}
           <div className="d-flex justify-content-between">
             <strong>میزان تخفیف</strong>
             <span>{factorInfo.offPrice} تومان</span>
@@ -62,7 +62,7 @@ const Factor = (props) => {
               {factorInfo.sumPrice} تومان
             </span>
           </div>
-          <div className="d-flex justify-content-between">
+          {/* <div className="d-flex justify-content-between">
             <strong style={{ fontSize: fontSize.desktop.strong }}>
               هزینه ارسال
             </strong>
@@ -70,7 +70,7 @@ const Factor = (props) => {
               {factorInfo.transportPrice}
               تومان
             </span>
-          </div>
+          </div> */}
           <div className="d-flex justify-content-between">
             <strong style={{ fontSize: fontSize.desktop.strong }}>
               میزان تخفیف

src/views/Cart/index.js

@@ -173,7 +173,7 @@ class Cart extends Component {
                     />
                   </section>
                   <section className="cart__left d-flex flex-column p-3">
-                    {factorInfo.transportId ? (
+                    {false && factorInfo.transportId ? (
                       <header className="cart__left--header d-flex flex-column">
                         <h2 style={{ fontSize: fontSize.desktop.h2 }}>
                           روشهای ارسال
@@ -203,7 +203,7 @@ class Cart extends Component {
                         </h3>
                         <div className="d-flex align-items-center">
                           <strong style={{ fontSize: fontSize.mobile.h1 }}>
-                            {factorInfo.payPrice}
+                            {factorInfo.payPrice - factorInfo.transportPrice}
                           </strong>
                           <span style={{ fontSize: fontSize.mobile.h3 }}>
                             تومان
@@ -225,12 +225,14 @@ class Cart extends Component {
                         ))}
                       </div>
                     </div> */}
-                    <button
+                    <Link
+                      to="/checkout"
                       className="cart__left--submit"
-                      onClick={() => this.props.payFactor({ userId: userId })}
+                      style={{ textDecoration: "none", textAlign: "center" }}
+                      //onClick={() => this.props.payFactor({ userId: userId })}
                     >
-                      پرداخت
+                      ادامه
-                    </button>
+                    </Link>
                   </section>
                 </div>
               </div>
@@ -262,23 +264,25 @@ class Cart extends Component {
                   route={"cart"}
                 />
               </div>
-              <div className="mobile-cart__payMethods d-flex flex-column">
+              {false && factorInfo.transportId ? (
-                <h2 style={{ fontSize: fontSize.mobile.h2 }}>روشهای ارسال</h2>
+                <div className="mobile-cart__payMethods d-flex flex-column">
-                <p style={{ fontSize: fontSize.mobile.p }}>
+                  <h2 style={{ fontSize: fontSize.mobile.h2 }}>روشهای ارسال</h2>
-                  با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید
+                  <p style={{ fontSize: fontSize.mobile.p }}>
-                </p>
+                    با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید
+                  </p>
 
-                <div className="d-flex justify-content-between">
+                  <div className="d-flex justify-content-between">
-                  {this.props.payMethods.map((item, i) => (
+                    {this.props.payMethods.map((item, i) => (
-                    <DeliveryMethod
+                      <DeliveryMethod
-                      data={item}
+                        data={item}
-                      key={i}
+                        key={i}
-                      parent={this}
+                        parent={this}
-                      transportId={factorInfo ? factorInfo.transportId : null}
+                        transportId={factorInfo ? factorInfo.transportId : null}
-                    />
+                      />
-                  ))}
+                    ))}
+                  </div>
                 </div>
-              </div>
+              ) : null}
               <DiscoutCode parent={this} />
               {factorInfo ? <Factor parent={this} list={list} /> : null}
 
@@ -291,7 +295,7 @@ class Cart extends Component {
                 {factorInfo ? (
                   <div className="d-flex align-items-center">
                     <strong style={{ fontSize: fontSize.mobile.h1 }}>
-                      {factorInfo.payPrice}
+                      {factorInfo.payPrice - factorInfo.transportPrice}
                       {/* // factorInfo.transportPrice - // factorInfo.offPrice} */}
                     </strong>
                     <span style={{ fontSize: fontSize.mobile.h3 }}>تومان</span>
@@ -310,12 +314,20 @@ class Cart extends Component {
                   ))}
                 </div>
               </div> */}
-              <button
+              {/* <button
                 className="mobile-cart__submit"
                 onClick={() => this.props.payFactor({ userId: userId })}
               >
                 پرداخت
-              </button>
+              </button> */}
+              <Link
+                to="/checkout"
+                className="mobile-cart__submit"
+                style={{ textAlign: "center", textDecoration: "none" }}
+                //  onClick={() => this.props.payFactor({ userId: userId })}
+              >
+                ادامه
+              </Link>
             </div>
           ) : (
             <div

src/views/Cart/index.scss

@@ -49,7 +49,8 @@
         letter-spacing: -1px;
       }
     }
-    &--submit {
+    &--submit,
+    &--submit:hover {
       justify-self: flex-end;
       padding: 12px;
       width: 100%;

src/views/Checkout/DeliveryMethod/index.js

@@ -0,0 +1,96 @@
+import React, { Component } from "react";
+import "./index.scss";
+import { connect } from "react-redux";
+import { transport } from "~/Redux/actions";
+
+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 ? 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 ? (
+          <div
+            className="delivery-methods d-flex justify-content-between align-items-center"
+            style={{
+              background: data.id === transportId ? "#ccffcc" : "white",
+            }}
+            onClick={() =>
+              setTransport(
+                {
+                  factorId: factorInfo.id,
+                  transportId: data.id,
+                },
+                {}
+              )
+            }
+          >
+            <strong style={{ fontSize: fontSize.desktop.strong }}>
+              {data.name}
+            </strong>
+            <div className="d-flex flex-column align-items-center">
+              <h3 style={{ fontSize: fontSize.desktop.h3 }}>{data.price}</h3>
+              <span style={{ fontSize: fontSize.desktop.span }}>تومان</span>
+            </div>
+          </div>
+        ) : null}
+        {window.innerWidth < 1000 ? (
+          <div
+            className="mobile-delivery-methods d-flex justify-content-between align-items-center"
+            style={{
+              background: data.id === transportId ? "#ccffcc" : "white",
+            }}
+            onClick={() =>
+              setTransport(
+                {
+                  factorId: factorInfo.id,
+                  transportId: data.id,
+                },
+                {}
+              )
+            }
+          >
+            <strong style={{ fontSize: fontSize.mobile.strong }}>
+              {data.name}
+            </strong>
+            <div className="d-flex flex-column align-items-center">
+              <h3 style={{ fontSize: fontSize.mobile.h3 }}>{data.price}</h3>
+              <span style={{ fontSize: fontSize.mobile.span }}>تومان</span>
+            </div>
+          </div>
+        ) : null}
+      </>
+    );
+  }
+}
+
+export default connect(
+  (state) => ({
+    factorInfo: state.userFactor.info,
+    list: state.userProduct.list,
+  }),
+  {
+    setTransport: transport.setTransport,
+  }
+)(DeliveryMethod);

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;
+  }
+}

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 ? (
+        <div className="discount-code d-flex flex-column">
+          <h2 style={{ fontSize: fontSize.desktop.h2 }}>کد تخفیف</h2>
+          <p style={{ fontSize: fontSize.desktop.p }}>
+            اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید
+          </p>
+          <div className="discount-code__box d-flex align-items-center">
+            <input
+              style={{ fontSize: fontSize.desktop.input }}
+              type="text"
+              defaultValue={codeId}
+              onChange={(e) => setValue(e.target.value)}
+            />
+            <button
+              style={{ fontSize: fontSize.desktop.button }}
+              onClick={setOff}
+            >
+              ثبت کد
+            </button>
+          </div>
+        </div>
+      ) : null}
+      {window.innerWidth < 1000 ? (
+        <div className="mobile-discount-code d-flex flex-column">
+          <h2 style={{ fontSize: fontSize.mobile.h2 }}>کد تخفیف</h2>
+          <p style={{ fontSize: fontSize.mobile.p }}>
+            اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید{" "}
+          </p>
+          <div className="mobile-discount-code__box d-flex align-items-center">
+            <input
+              style={{ fontSize: fontSize.mobile.input }}
+              type="text"
+              onChange={(e) => setValue(e.target.value)}
+            />
+            <button
+              style={{ fontSize: fontSize.mobile.button }}
+              onClick={setOff}
+            >
+              ثبت کد
+            </button>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+export default connect(
+  (state) => ({
+    codeId: state.userFactor.info?.codeId,
+    userId: state.user.status.id,
+    factorId: state.userFactor.info?.id,
+  }),
+  {
+    setCodeId: userFactor.update,
+  }
+)(DiscoutCode);

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;
+    }
+  }
+}

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 ? (
+        <div className="mobile-factor d-flex flex-column">
+          <div className="d-flex justify-content-between">
+            <strong>مبلغ سبد خرید</strong>
+            <span>{factorInfo.sumPrice} تومان</span>
+          </div>
+          <div className="d-flex justify-content-between">
+            <strong>هزینه ارسال</strong>
+            <span>
+              {factorInfo.transportPrice}
+              تومان
+            </span>
+          </div>
+          <div className="d-flex justify-content-between">
+            <strong>میزان تخفیف</strong>
+            <span>{factorInfo.offPrice} تومان</span>
+          </div>
+          <div className="d-flex justify-content-between">
+            <strong>مالیات بر ارزش افزوده</strong>
+            <span>{factorInfo.vatPrice} تومان</span>
+          </div>
+        </div>
+      ) : null}
+      {window.innerWidth > 1000 ? (
+        <div className="factor d-flex flex-column">
+          <div className="d-flex justify-content-between">
+            <strong style={{ fontSize: fontSize.desktop.strong }}>
+              مبلغ سبد خرید
+            </strong>
+            <span style={{ fontSize: fontSize.desktop.span }}>
+              {factorInfo.sumPrice} تومان
+            </span>
+          </div>
+          <div className="d-flex justify-content-between">
+            <strong style={{ fontSize: fontSize.desktop.strong }}>
+              هزینه ارسال
+            </strong>
+            <span style={{ fontSize: fontSize.desktop.span }}>
+              {factorInfo.transportPrice}
+              تومان
+            </span>
+          </div>
+          <div className="d-flex justify-content-between">
+            <strong style={{ fontSize: fontSize.desktop.strong }}>
+              میزان تخفیف
+            </strong>
+            <span style={{ fontSize: fontSize.desktop.span }}>
+              {factorInfo.offPrice} تومان
+            </span>
+          </div>
+          <div className="d-flex justify-content-between">
+            <strong style={{ fontSize: fontSize.desktop.strong }}>
+              مالیات بر ارزش افزوده
+            </strong>
+            <span style={{ fontSize: fontSize.desktop.span }}>
+              {factorInfo.vatPrice} تومان
+            </span>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+export default connect(
+  (state) => ({
+    factorInfo: state.userFactor.info,
+  }),
+  {}
+)(Factor);

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;
+    }
+  }
+}

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 (
+    <form className={classes.root} noValidate autoComplete="off">
+      <div>
+        <TextField
+          id="outlined-basic"
+          name={props.name}
+          label={props.label}
+          variant={variant || "outlined"}
+          onChange={(e) => 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))
+              : () => {}
+          }
+        />
+      </div>
+    </form>
+  );
+}
+
+FormPropsTextFields.defaultProps = {
+  align: "right",
+  maxLength: "",
+  inputMode: "numeric",
+  defaultValue: "",
+};

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 ? (
+        <div style={{ position: "relative" }}>
+          <FormControl variant="outlined" className={classes.marginLeft}>
+            <InputLabel id="demo-simple-select-outlined-label">
+              {props.label}
+            </InputLabel>
+            <Select
+              labelId="demo-simple-select-outlined-label"
+              id="demo-simple-select-outlined"
+              value={selectedOptions}
+              onChange={(e) => parent.onChange(props.name, e.target.value)}
+            >
+              {/* 09366858119 */}
+              {props.options.map((item, i) => (
+                <option key={i} value={item.id || i}>
+                  {item.name || item}
+                </option>
+              ))}
+            </Select>
+          </FormControl>
+          <KeyboardArrowDownIcon
+            style={{
+              position: "absolute",
+              left: 5,
+              top: 20,
+              fontSize: 30,
+              color: "#a5a5a5",
+            }}
+          />
+        </div>
+      ) : null}
+      {window.innerWidth > 1000 ? (
+        <div style={{ position: "relative" }}>
+          <FormControl variant="outlined" className={classes.marginLeft}>
+            <InputLabel id="demo-simple-select-outlined-label">
+              {props.label}
+            </InputLabel>
+            <Select
+              labelId="demo-simple-select-outlined-label"
+              id="demo-simple-select-outlined"
+              value={selectedOptions}
+              onChange={(e) => parent.onChange(props.name, e.target.value)}
+            >
+              {/* 09366858119 */}
+              {props.options.map((item, i) => (
+                <option key={i} value={item.id || i}>
+                  {item.name || item}
+                </option>
+              ))}
+            </Select>
+          </FormControl>
+          <KeyboardArrowDownIcon
+            style={{
+              position: "absolute",
+              left: 5,
+              top: 25,
+              fontSize: 30,
+              color: "#a5a5a5",
+            }}
+          />
+        </div>
+      ) : null}
+    </>
+  );
+}

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 ? (
+        <TableContainer component={Paper}>
+          <Table className={classes.table} aria-label="simple table">
+            <TableHead>
+              <TableRow>
+                <TableCell align="right">محصولات</TableCell>
+                <TableCell align="center">قیمت</TableCell>
+
+                {route === "callback" ? (
+                  <TableCell align="center">تعداد</TableCell>
+                ) : null}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {list.map((row, i) => (
+                <Item
+                  data={row}
+                  key={i}
+                  // handleCounter={handleCounter}
+                  pushToCart={props.pushToCart}
+                  info={props.info}
+                  id={props.id}
+                  handleDelete={handleDelete}
+                  route={route}
+                  factorInfo={factorInfo}
+                />
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      ) : null}
+      {window.innerWidth > 1000 ? (
+        <TableContainer component={Paper}>
+          <Table className={classes.table} aria-label="simple table">
+            <TableHead>
+              <TableRow>
+                <TableCell align="right">محصولات</TableCell>
+                <TableCell align="center">تعداد</TableCell>
+                <TableCell align="center">قیمت</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {list.map((row, i) => (
+                <Item
+                  data={row}
+                  key={i}
+                  // handleCounter={handleCounter}
+                  pushToCart={props.pushToCart}
+                  info={props.info}
+                  id={props.id}
+                  handleDelete={handleDelete}
+                  route={route}
+                  factorInfo={factorInfo}
+                />
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      ) : null}
+    </>
+  );
+}
+
+const Item = (props) => {
+  const { data, pushToCart, id, route } = props;
+  return (
+    <>
+      {window.innerWidth < 1000 ? (
+        <TableRow key={data.product.book.name}>
+          <TableCell align="right" component="th" scope="row">
+            <div className="mobile-cart-table-product d-flex align-items-center">
+              <img
+                src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`}
+                alt={data.product.book.name}
+              />
+              <div className="mobile-cart-table-product__info d-flex flex-column p-1">
+                <strong style={{ fontSize: fontSize.mobile.info.strong }}>
+                  {`نسخه ${
+                    +data.product.productType === 1 ? "الکترونیکی" : "چاپی"
+                  } ${data.product.book.name} `}
+                </strong>
+                <p style={{ fontSize: 12 }}>
+                  {`پایه ${grades[data.product.book.gradeId]}`}
+                </p>
+                <span style={{ fontSize: 10 }}>
+                  همراه با:
+                  {data.product.book.items || "کد فعالسازی محتوای الکترونیک"}
+                </span>
+                {route !== "callback" ? (
+                  <div className="mobile-cart-table-product__info--delete d-flex align-items-center align-self-end">
+                    <span
+                      onClick={() =>
+                        pushToCart({
+                          productId: data.productId,
+                          userId: id,
+                          count: -data.count,
+                        })
+                      }
+                      style={{
+                        fontSize: fontSize.mobile.delete.span,
+                        color: "#FC120A",
+                        cursor: "pointer",
+                      }}
+                    >
+                      حذف
+                    </span>
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          </TableCell>
+          <TableCell>
+            <div className="mobile-cart-table-price d-flex flex-column align-items-center">
+              <div className="mobile-cart-table-price__price d-flex flex-column justify-content-center align-items-center">
+                <strong style={{ fontSize: fontSize.mobile.price.strong }}>
+                  {data.product.price * data.count || "1000"}
+                </strong>
+                {route !== "callback" ? (
+                  <span style={{ fontSize: fontSize.mobile.price.span }}>
+                    {data.product.price || "100"} قیمت هر واحد
+                  </span>
+                ) : null}
+              </div>
+              {route === "cart" ? (
+                <div className="mobile-cart-table-price__counter d-flex justify-content-around align-items-center">
+                  <button
+                    onClick={() =>
+                      pushToCart(
+                        {
+                          productId: data.productId,
+                          userId: id,
+                          count: 1,
+                        },
+                        {},
+                        { id: data.factorId }
+                      )
+                    }
+                    style={{ fontSize: fontSize.mobile.counter.button }}
+                  >
+                    +
+                  </button>
+                  <span style={{ fontSize: fontSize.mobile.counter.span }}>
+                    {data.count}
+                  </span>
+                  <button
+                    onClick={() =>
+                      data.count > 0
+                        ? pushToCart(
+                            {
+                              productId: data.productId,
+                              userId: id,
+                              count: -1,
+                            },
+                            {},
+                            { id: data.factorId }
+                          )
+                        : null
+                    }
+                    style={{ fontSize: fontSize.mobile.counter.button }}
+                  >
+                    -
+                  </button>
+                </div>
+              ) : null}
+            </div>
+          </TableCell>
+          {route === "callback" ? (
+            <TableCell>
+              <strong className="d-flex justify-content-center align-items-center">
+                {data.count}
+              </strong>
+            </TableCell>
+          ) : null}
+        </TableRow>
+      ) : null}
+      {window.innerWidth > 1000 ? (
+        <TableRow key={data.product.book.name}>
+          <TableCell align="right" component="th" scope="row">
+            <div className="cart-item__info d-flex">
+              <img
+                style={{ height: "60px" }}
+                src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`}
+                alt={data.product.book.name}
+              />
+              <div className="d-flex flex-column justify-content-center">
+                <strong style={{ fontSize: 13 }}>
+                  {`${data.product.book.name} `}
+                </strong>
+                <span style={{ fontSize: 12 }}>
+                  {" "}
+                  {`نسخه ${
+                    +data.product.productType === 1 ? "الکترونیکی" : "چاپی"
+                  }`}
+                </span>
+
+                <p style={{ fontSize: fontSize.desktop.info.p }}>
+                  {`پایه ${grades[data.product.book.gradeId]}`}
+                </p>
+              </div>
+            </div>
+          </TableCell>
+          <TableCell align="center">
+            <span style={{ fontSize: 12 }}>{data.count}</span>
+          </TableCell>
+          <TableCell>
+            <div className="cart-item__price d-flex flex-column justify-content-center align-items-center">
+              <strong style={{ fontSize: 12 }}>
+                {data.product.price * data.count || "1000"}
+              </strong>
+            </div>
+          </TableCell>
+        </TableRow>
+      ) : 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);

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;
+    }
+  }
+}

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 (
+    <form className={classes.root} noValidate autoComplete="off">
+      <TextField
+        id="outlined-multiline-static"
+        label={props.label}
+        multiline
+        rows={4}
+        onChange={(e) => parent.onChange(e.target.name, e.target.value)}
+        defaultValue={defaultValue || ""}
+        name={props.name}
+        variant="outlined"
+      />
+    </form>
+  );
+}

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 (
+        <div
+          align="center"
+          className={
+            window.innerWidth < 1000
+              ? "mobile-cart mobile-checkout"
+              : "cart chekout"
+          }
+        >
+          <Navbar />
+          <div align="center" style={{ marginTop: 50 }}>
+            هیچ محصولی در سبد خرید شما وجود ندارد
+          </div>
+          <br />
+          <Link
+            to="/products"
+            style={{
+              textDecoration: "none",
+              width: "80%",
+              textAlign: "center",
+              backgroundColor: "green",
+              color: "white",
+              borderRadius: "10px",
+              padding: "5px 10px",
+              margin: "10 auto",
+            }}
+          >
+            فروشگاه
+          </Link>
+        </div>
+      );
+    return (
+      <>
+        {window.innerWidth > 1000 ? (
+          list.length > 0 ? (
+            <>
+              <div className="cart d-flex flex-column">
+                <Navbar />
+                {window.location.search.includes("NOK") ||
+                this.props.isVerified === false ? (
+                  <div>پرداخت شما با خطا مواجه شد ، لطفا مجدد تلاش نمایید</div>
+                ) : null}
+                <div
+                  className="d-flex"
+                  style={{ width: "100%", flex: 1, marginBottom: 10 }}
+                >
+                  <section className="cart__right d-flex flex-column">
+                    <header>
+                      <h1 style={{ fontSize: fontSize.desktop.h1 }}>
+                        جزئیات صورتحساب
+                      </h1>
+                    </header>
+                    <div className="d-flex">
+                      <div class="checkout__forms--right">
+                        <Input
+                          name="firstName"
+                          label={"نام ‌و ‌نام خانوادگی"}
+                          parent={this}
+                          // defaultValue={profile}
+                          onInput={onInput.persianOnly}
+                          required
+                        />
+                        <div className="mt-2" style={{ minWidth: "100%" }}>
+                          <Select
+                            parent={this}
+                            options={this.props.provinceList}
+                            name="provinceId"
+                            label={"استان"}
+                            selectedOptions={this.state.provinceId}
+                          />
+                        </div>
+                        <Input
+                          parent={this}
+                          name="postalCode"
+                          label={"کد پستی"}
+                          align="left"
+                          maxLength={10}
+                          inputMode="numeric"
+                          // defaultValue={profile}
+                          onInput={onInput.numberOnly}
+                        />{" "}
+                        <div className="mt-2">
+                          <TextArea
+                            parent={this}
+                            label={"آدرس محل سکونت"}
+                            name="address"
+                            // defaultValue={profile}
+                          />
+                        </div>
+                      </div>
+                      <div class="checkout__forms--left">
+                        <Input
+                          label={"شماره تماس"}
+                          name={"cellphone"}
+                          parent={this}
+                        />
+                        <div className="mt-2">
+                          <Select
+                            parent={this}
+                            options={this.props.cityList}
+                            name="cityId"
+                            label={"شهرستان"}
+                            selectedOptions={this.state.cityId}
+                          />
+                        </div>
+                        <Input
+                          parent={this}
+                          name="postalCode"
+                          label={"کد پستی"}
+                          align="left"
+                          maxLength={10}
+                          inputMode="numeric"
+                          // defaultValue={profile}
+                          onInput={onInput.numberOnly}
+                        />
+
+                        <div className="mt-2">
+                          <TextArea
+                            parent={this}
+                            label={"توضیحات"}
+                            name="description"
+                            // defaultValue={profile}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </section>
+                  <section className="cart__left d-flex flex-column p-3">
+                    {factorInfo.transportId ? (
+                      <header className="cart__left--header d-flex flex-column">
+                        <h2 style={{ fontSize: fontSize.desktop.h2 }}>
+                          روشهای ارسال
+                        </h2>
+                        <div className="d-flex justify-content-between">
+                          {payMethods.map((item, i) => (
+                            <DeliveryMethod
+                              data={item}
+                              key={i}
+                              parent={this}
+                              transportId={
+                                factorInfo ? factorInfo.transportId : null
+                              }
+                            />
+                          ))}
+                        </div>
+                      </header>
+                    ) : null}
+                    {/* {factorInfo ? <DiscoutCode /> : null} */}
+                    <Table
+                      list={list}
+                      handleCounter={this.handleCounter}
+                      handleDelete={this.handleDelete}
+                      payPrice={payPrice}
+                      route={"cart"}
+                    />
+                    {factorInfo ? <Factor parent={this} list={list} /> : null}
+                    {factorInfo ? (
+                      <div className="cart__totalPrice d-flex align-items-center justify-content-center">
+                        <h3 style={{ fontSize: fontSize.mobile.h2 }}>
+                          جمع کل
+                          <br />
+                          صورتحساب
+                        </h3>
+                        <div className="d-flex align-items-center">
+                          <strong style={{ fontSize: fontSize.mobile.h1 }}>
+                            {factorInfo.payPrice}
+                          </strong>
+                          <span style={{ fontSize: fontSize.mobile.h3 }}>
+                            تومان
+                          </span>
+                        </div>
+                      </div>
+                    ) : null}
+
+                    {/* <div className="cart__left--header d-flex flex-column mt-3">
+                      <h2 style={{ fontSize: fontSize.desktop.h2 }}>
+                        روشهای ارسال
+                      </h2>
+                      <p style={{ fontSize: fontSize.desktop.p }}>
+                        با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید
+                      </p>
+                      <div className="d-flex justify-content-between">
+                        {payMethods.map((item, i) => (
+                          <DeliveryMethod data={item} key={i} parent={this} />
+                        ))}
+                      </div>
+                    </div> */}
+                    <button
+                      className="cart__left--submit"
+                      onClick={() => this.props.payFactor({ userId: userId })}
+                    >
+                      پرداخت
+                    </button>
+                  </section>
+                </div>
+              </div>
+              <Footer />
+            </>
+          ) : (
+            <div
+              className="d-flex justify-content-center align-items-center"
+              style={{ height: "100vh", width: "100vw" }}
+            >
+              <Loader />
+            </div>
+          )
+        ) : null}
+        {window.innerWidth < 1000 ? (
+          list.length > 0 ? (
+            <div className="mobile-cart d-flex flex-column">
+              <Navbar />
+              {window.location.search.includes("NOK") ? (
+                <div>پرداخت شما با خطا مواجه شد ، لطفا مجدد تلاش نمایید</div>
+              ) : null}
+              <h1 style={{ fontSize: fontSize.mobile.h1 }}>جزئیات صورتحساب</h1>
+              <div className="d-flex">
+                <Table
+                  list={list}
+                  handleCounter={this.handleCounter}
+                  handleDelete={this.handleDelete}
+                  payPrice={payPrice}
+                  route={"cart"}
+                />
+              </div>
+              {factorInfo.transportId ? (
+                <div className="mobile-cart__payMethods d-flex flex-column">
+                  <h2 style={{ fontSize: fontSize.mobile.h2 }}>روشهای ارسال</h2>
+                  <p style={{ fontSize: fontSize.mobile.p }}>
+                    با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید
+                  </p>
+
+                  <div className="d-flex justify-content-between">
+                    {this.props.payMethods.map((item, i) => (
+                      <DeliveryMethod
+                        data={item}
+                        key={i}
+                        parent={this}
+                        transportId={factorInfo ? factorInfo.transportId : null}
+                      />
+                    ))}
+                  </div>
+                </div>
+              ) : null}
+              {/* <DiscoutCode parent={this} /> */}
+              {factorInfo ? <Factor parent={this} list={list} /> : null}
+
+              <div className="mobile-cart__totalPrice d-flex align-items-center justify-content-center mt-2">
+                <h3 style={{ fontSize: fontSize.mobile.h2 }}>
+                  جمع کل
+                  <br />
+                  سبد خرید
+                </h3>
+                {factorInfo ? (
+                  <div className="d-flex align-items-center">
+                    <strong style={{ fontSize: fontSize.mobile.h1 }}>
+                      {factorInfo.payPrice}
+                      {/* // factorInfo.transportPrice - // factorInfo.offPrice} */}
+                    </strong>
+                    <span style={{ fontSize: fontSize.mobile.h3 }}>تومان</span>
+                  </div>
+                ) : null}
+              </div>
+              {/* <div className="mobile-cart__payMethods d-flex flex-column">
+                <h2 style={{ fontSize: fontSize.mobile.h2 }}>روشهای ارسال</h2>
+                <p style={{ fontSize: fontSize.mobile.p }}>
+                  با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید
+                </p>
+
+                <div className="d-flex justify-content-between">
+                  {this.props.payMethods.map((item, i) => (
+                    <DeliveryMethod data={item} key={i} parent={this} />
+                  ))}
+                </div>
+              </div> */}
+              {/* <button
+                className="mobile-cart__submit"
+                onClick={() => this.props.payFactor({ userId: userId })}
+              >
+                پرداخت
+              </button> */}
+              <Link
+                to="/checkout"
+                className="mobile-cart__submit"
+                //  onClick={() => this.props.payFactor({ userId: userId })}
+              >
+                پرداخت
+              </Link>
+            </div>
+          ) : (
+            <div
+              className="d-flex justify-content-center align-items-center"
+              style={{ height: "100vh", width: "100vw" }}
+            >
+              <Loader />
+            </div>
+          )
+        ) : 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);

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);
+      }
+    }
+  }
+}