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

master
amir hosein gorji 3 years ago
parent f542f68e87
commit 043cee641d
  1. 12
      src/AppRouter.js
  2. 8
      src/views/Cart/Factor/index.js
  3. 60
      src/views/Cart/index.js
  4. 3
      src/views/Cart/index.scss
  5. 96
      src/views/Checkout/DeliveryMethod/index.js
  6. 52
      src/views/Checkout/DeliveryMethod/index.scss
  7. 87
      src/views/Checkout/Discount/index.js
  8. 82
      src/views/Checkout/Discount/index.scss
  9. 101
      src/views/Checkout/Factor/index.js
  10. 53
      src/views/Checkout/Factor/index.scss
  11. 52
      src/views/Checkout/Input/index.js
  12. 84
      src/views/Checkout/Select/index.js
  13. 314
      src/views/Checkout/Table/index.js
  14. 150
      src/views/Checkout/Table/index.scss
  15. 31
      src/views/Checkout/TextArea/index.js
  16. 444
      src/views/Checkout/index.js
  17. 459
      src/views/Checkout/index.scss

@ -23,6 +23,7 @@ import Activation from "./views/Activation/index";
import ChatList from "./views/ChatList/index"; import ChatList from "./views/ChatList/index";
import Chatroom from "./views/ChatRoom/index"; import Chatroom from "./views/ChatRoom/index";
import Cart from "./views/Cart/index"; import Cart from "./views/Cart/index";
import Checkout from "./views/Checkout/index";
import MyBooks from "./views/MyBooks/index"; import MyBooks from "./views/MyBooks/index";
import AR from "./views/AR/index"; import AR from "./views/AR/index";
import Download from "./views/Download/index"; import Download from "./views/Download/index";
@ -259,6 +260,17 @@ class AppRouter extends Component {
/> />
)} )}
</Route> </Route>
<Route exact path={"/checkout"}>
{status ? (
<Checkout />
) : (
<Redirect
to={{
pathname: "/",
}}
/>
)}
</Route>
{/* <Route exact path={"/mybooks"}> {/* <Route exact path={"/mybooks"}>
{mobile ? ( {mobile ? (
status ? ( status ? (

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

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

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

@ -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);

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

@ -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);

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

@ -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);

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

@ -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: "",
};

@ -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}
</>
);
}

@ -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);

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

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

@ -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);

@ -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);
}
}
}
}
Loading…
Cancel
Save