parent
0b4bf84052
commit
537c83c357
13 changed files with 1672 additions and 16 deletions
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 966 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 562 B |
@ -0,0 +1,37 @@ |
|||||||
|
import React, {useState} from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
import { userFactor } from "../../../redux/actions"; |
||||||
|
|
||||||
|
function Code({ codeId, setCodeId, userId, factorId }) { |
||||||
|
const [value, setValue] = React.useState(codeId || ""); |
||||||
|
|
||||||
|
const setOff = () => { |
||||||
|
setCodeId({ offCodeValue: value, userId: userId, id: factorId }); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<form className="flex w-full flex-row border border-red52 border-solid rounded-xl my-3 overflow-hidden"> |
||||||
|
<input |
||||||
|
type="text" |
||||||
|
className="border-0 flex-1 text-right pr-3 font-medium text-tiny bg-gray-200 placeholder:text-blue5F dark:text-white" |
||||||
|
placeholder={"کد تخفیف دارید ؟"} |
||||||
|
/> |
||||||
|
<button className={"py-4 px-6 text-tiny bg-red52 text-white border border-red52 border-solid"} onClick={setOff}>ثبت کد</button> |
||||||
|
</form> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({ |
||||||
|
codeId: state.userFactor.info?.codeId, |
||||||
|
userId: state.user.status.id, |
||||||
|
factorId: state.userFactor.info?.id, |
||||||
|
}); |
||||||
|
|
||||||
|
const mapDispatchToProps = { |
||||||
|
setCodeId: userFactor.update, |
||||||
|
} |
||||||
|
|
||||||
|
export default connect( |
||||||
|
mapStateToProps, |
||||||
|
mapDispatchToProps |
||||||
|
)(Code); |
||||||
@ -0,0 +1,171 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
import { userProduct } from "../../../redux/actions"; |
||||||
|
|
||||||
|
// assets
|
||||||
|
// import bookImage from "../../../assets/images/zist-11.svg";
|
||||||
|
import exitIcon from "../../../assets/img/exit.svg"; |
||||||
|
import deleteIcon from "../../../assets/img/delete.svg"; |
||||||
|
|
||||||
|
function Product({ product, grades, pushToCart, isMobile }) { |
||||||
|
// return isMobile ? (
|
||||||
|
// <div className="flex flex-row justify-between py-5 border-b border-solid border-grayDB dark:border-gray45">
|
||||||
|
// <div className="flex flex-row">
|
||||||
|
// {/* <img
|
||||||
|
// src={"https://dnvn.ir/api/v1/file/" + product.product.book.fileIds}
|
||||||
|
// className="rounded-md w-20"
|
||||||
|
// /> */}
|
||||||
|
// <div className="flex flex-col pr-2">
|
||||||
|
// <strong className="text-base text-blue5F mb-2 dark:text-white">
|
||||||
|
// {product.product.book.name}
|
||||||
|
// </strong>
|
||||||
|
// <span className="text-gray70 text-sm mb-2 dark:text-greenBA">
|
||||||
|
// {"پایه" + " " + grades[product.product.book.gradeId]}
|
||||||
|
// </span>
|
||||||
|
// <span className="text-gray70 text-sm dark:text-greenBA">
|
||||||
|
// {product.productType === 2 ? "نسخه فیزیکی" : "نسخه دیجیتال"}
|
||||||
|
// </span>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// <div className={"flex flex-col justify-between items-end"}>
|
||||||
|
// <img
|
||||||
|
// src={exitIcon}
|
||||||
|
// className="w-4"
|
||||||
|
// alt=""
|
||||||
|
// onClick={() =>
|
||||||
|
// pushToCart(
|
||||||
|
// {
|
||||||
|
// productId: product?.productId,
|
||||||
|
// userId: product?.userId,
|
||||||
|
// count: product?.productType === 1 ? -1 : -product?.count,
|
||||||
|
// },
|
||||||
|
// {},
|
||||||
|
// { id: product?.factorId }
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
// />
|
||||||
|
// <div className="flex flex-col items-center">
|
||||||
|
// {product.productType === 2 && (
|
||||||
|
// <div className="flex flex-row items-center mb-3">
|
||||||
|
// <button
|
||||||
|
// className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0"
|
||||||
|
// onClick={() =>
|
||||||
|
// pushToCart({
|
||||||
|
// productId: product?.productId,
|
||||||
|
// userId: product?.userId,
|
||||||
|
// count: 1,
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// >
|
||||||
|
// +
|
||||||
|
// </button>
|
||||||
|
// <span className="mx-2.5 font-semibold text-md text-blueC0">
|
||||||
|
// {product.count}
|
||||||
|
// </span>
|
||||||
|
// <button
|
||||||
|
// className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-grayDB text-grayDB dark:border-blueC0 dark:text-blueC0"
|
||||||
|
// onClick={() =>
|
||||||
|
// pushToCart({
|
||||||
|
// productId: product?.productId,
|
||||||
|
// userId: product?.userId,
|
||||||
|
// count: -1,
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// >
|
||||||
|
// -
|
||||||
|
// </button>
|
||||||
|
// </div>
|
||||||
|
// )}
|
||||||
|
// <strong className="font-bold text-md text-blue5F dark:text-white">
|
||||||
|
// {product.product.price} تومان
|
||||||
|
// </strong>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// ) : (
|
||||||
|
// <div className="flex flex-row w-full gap-10 py-4 border-b border-solid border-gray-200">
|
||||||
|
// <div className="w-1/2 flex flex-row">
|
||||||
|
// <img
|
||||||
|
// src={"https://dnvn.ir/api/v1/file/" + product?.product?.book?.fileIds}
|
||||||
|
// className="rounded-md w-20"
|
||||||
|
// />
|
||||||
|
// <div className="flex flex-col pr-4 pt-1">
|
||||||
|
// <strong className="text-lg text-blue5F mb-1 dark:text-white font-semibold">
|
||||||
|
// {product?.product?.book?.name}
|
||||||
|
// </strong>
|
||||||
|
// <div className="flex flex-row items-center mt-4">
|
||||||
|
// <span className="w-2 h-2 bg-greenBA rounded-md ml-1"></span>
|
||||||
|
// <div className="text-gray70 text-sm dark:text-greenBA">
|
||||||
|
// {"پایه" + " " + grades[product?.product?.book?.gradeId]}
|
||||||
|
// </div>
|
||||||
|
// <span className="w-2 h-2 bg-greenBA rounded-md mr-5 ml-1"></span>
|
||||||
|
// <div className="text-gray70 text-sm dark:text-greenBA">
|
||||||
|
// {product?.productType === 2 ? "نسخه فیزیکی" : "نسخه دیجیتال"}
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// <div className="w-1/4 flex flex-row items-center">
|
||||||
|
// <button
|
||||||
|
// className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0 text-lg"
|
||||||
|
// onClick={() =>
|
||||||
|
// pushToCart({
|
||||||
|
// productId: product?.productId,
|
||||||
|
// userId: product?.userId,
|
||||||
|
// count: 1,
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// >
|
||||||
|
// +
|
||||||
|
// </button>
|
||||||
|
// <span className="mx-2.5 font-semibold text-lg text-blueC0">
|
||||||
|
// {product.count}
|
||||||
|
// </span>
|
||||||
|
// <button
|
||||||
|
// className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-grayDB text-grayDB dark:border-blueC0 dark:text-blueC0 text-lg"
|
||||||
|
// onClick={() =>
|
||||||
|
// pushToCart({
|
||||||
|
// productId: product?.productId,
|
||||||
|
// userId: product?.userId,
|
||||||
|
// count: -1,
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// >
|
||||||
|
// -
|
||||||
|
// </button>
|
||||||
|
// </div>
|
||||||
|
// <div className="w-1/4 flex flex-row items-center justify-end pl-4">
|
||||||
|
// <strong className="font-semibold text-md text-blue5F dark:text-white">
|
||||||
|
// {product?.product?.price} تومان
|
||||||
|
// </strong>
|
||||||
|
// <img
|
||||||
|
// src={deleteIcon}
|
||||||
|
// alt="delete"
|
||||||
|
// className="border border-red-800 border-solid p-1 w-8 bg-red-100 rounded-md mr-4"
|
||||||
|
// />
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
return( |
||||||
|
<div className="flex bg-white justify-between items-center border-2 border-gray-300 p-4 rounded-xl m-2 " style={{width: '90%'}}> |
||||||
|
<div className="flex items-center"> |
||||||
|
<div className="text-sm h-10 flex items-center p-2 border-l-2 border-gray-300 text-gray-400"> {product?.productCat} </div> |
||||||
|
<h1 className="text-lg font-black px-2 text-black40"> {product?.product?.book?.name}</h1> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="text-sm text-black40"> |
||||||
|
{product?.product?.price} تومان |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({ |
||||||
|
grades: state.publicApi.grades, |
||||||
|
isMobile: state.publicApi.isMobile, |
||||||
|
}); |
||||||
|
|
||||||
|
const mapDispatchToProps = { |
||||||
|
pushToCart: userProduct.add, |
||||||
|
}; |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(Product); |
||||||
@ -0,0 +1,278 @@ |
|||||||
|
import React, { useState, useEffect } from "react"; |
||||||
|
import { userProduct, userFactor, publicApi } from "../../redux/actions"; |
||||||
|
|
||||||
|
// import DeliveryForm from "../DeliveryForm";
|
||||||
|
import Product from "./Product"; |
||||||
|
import Code from "./Code"; |
||||||
|
import Button from "../../components/Button"; |
||||||
|
|
||||||
|
//assets
|
||||||
|
import alertIcon from "../../assets/img/alert.svg"; |
||||||
|
|
||||||
|
import { connect } from "react-redux"; |
||||||
|
|
||||||
|
function ShoppingCart({ |
||||||
|
isDark, |
||||||
|
isMobile, |
||||||
|
list, |
||||||
|
payPrice, |
||||||
|
factorInfo, |
||||||
|
userId, |
||||||
|
hasPhysical, |
||||||
|
getList, |
||||||
|
getInfo, |
||||||
|
getFactorInfo, |
||||||
|
payFactor, |
||||||
|
headerOptions, |
||||||
|
setHeaderOptions, |
||||||
|
desktopContentTransform, |
||||||
|
}) { |
||||||
|
const [phase, setPhase] = useState("products"); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
getList(); |
||||||
|
getFactorInfo({ userId }); |
||||||
|
setHeaderOptions(headerOptions); |
||||||
|
}, []); |
||||||
|
|
||||||
|
// const Table = () => {
|
||||||
|
// return (
|
||||||
|
// <div className="w-full flex flex-col">
|
||||||
|
// <header className="w-full flex flex-row gap-10">
|
||||||
|
// <strong className="w-1/2 pb-2 border-b border-solid border-gray-200 text-gray70 text-sm font-normal">
|
||||||
|
// کالاهای انتخابی{" "}
|
||||||
|
// </strong>
|
||||||
|
// <strong className="w-1/4 pb-2 border-b border-solid border-gray-200 text-gray70 text-sm font-normal">
|
||||||
|
// تعداد سفارش
|
||||||
|
// </strong>
|
||||||
|
// <strong className="w-1/4 pb-2 border-b border-solid border-gray-200 text-gray70 text-sm font-normal">
|
||||||
|
// مبلغ
|
||||||
|
// </strong>
|
||||||
|
// </header>
|
||||||
|
// <ul className="w-full mt-2 list-none p-0">
|
||||||
|
// {list.map((product, index) => (
|
||||||
|
// <Product key={index} product={product} />
|
||||||
|
// ))}
|
||||||
|
// </ul>
|
||||||
|
// </div>
|
||||||
|
// );
|
||||||
|
// };
|
||||||
|
|
||||||
|
// const PriceStatus = ({ name, value, type }) => {
|
||||||
|
// return isMobile ? (
|
||||||
|
// <div className="w-full flex flex-row justify-between py-2">
|
||||||
|
// <strong className="font-light text-sm dark:text-white">{name}</strong>
|
||||||
|
// <span
|
||||||
|
// className="font-bold text-lg dark:text-white"
|
||||||
|
// style={{
|
||||||
|
// color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// {value + " " + "تومان"}
|
||||||
|
// </span>
|
||||||
|
// </div>
|
||||||
|
// ) : (
|
||||||
|
// <div className="w-full flex flex-row justify-between py-4">
|
||||||
|
// <strong className="font-light text-tiny dark:text-white text-blue5F">
|
||||||
|
// {name}
|
||||||
|
// </strong>
|
||||||
|
// <span
|
||||||
|
// className="font-medium text-lg dark:text-white"
|
||||||
|
// style={{
|
||||||
|
// color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// {value}
|
||||||
|
// <span
|
||||||
|
// style={{
|
||||||
|
// color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
|
||||||
|
// }}
|
||||||
|
// className="text-sm mr-2"
|
||||||
|
// >
|
||||||
|
// تومان
|
||||||
|
// </span>
|
||||||
|
// </span>
|
||||||
|
// </div>
|
||||||
|
// );
|
||||||
|
// };
|
||||||
|
|
||||||
|
// isMobile ? (
|
||||||
|
// <div className="w-full flex flex-col px-4">
|
||||||
|
// {list.map((product, index) => (
|
||||||
|
// <Product key={index} product={product} />
|
||||||
|
// ))}
|
||||||
|
// <Code />
|
||||||
|
// <div className="flex flex-col w-full border-t py-2 border-gray-300 border-b mt-6">
|
||||||
|
// <PriceStatus
|
||||||
|
// name="مبلغ سبد خرید"
|
||||||
|
// value={factorInfo?.sumPrice}
|
||||||
|
// type="normal"
|
||||||
|
// />
|
||||||
|
// <PriceStatus
|
||||||
|
// name="میزان تخفیف"
|
||||||
|
// value={factorInfo?.offPrice}
|
||||||
|
// type="error"
|
||||||
|
// />
|
||||||
|
// <PriceStatus
|
||||||
|
// name="مالیات بر ارزش افزوده"
|
||||||
|
// value={factorInfo?.sumPrice * 0.009}
|
||||||
|
// type="error"
|
||||||
|
// />
|
||||||
|
// </div>
|
||||||
|
// <div className="flex flex-row justify-between items-center w-full py-3">
|
||||||
|
// <strong className="font-light text-sm dark:text-white">
|
||||||
|
// جمع کل سبد خرید
|
||||||
|
// </strong>
|
||||||
|
// <p className="font-medium text-greenBA text-lg dark:text-white">
|
||||||
|
// {factorInfo?.payPrice + " " + "تومان"}
|
||||||
|
// </p>
|
||||||
|
// </div>
|
||||||
|
|
||||||
|
// <Button
|
||||||
|
// title="ادامه فرایند خرید"
|
||||||
|
// backgroundColor="bg-blueC0"
|
||||||
|
// border={{ color: "#196EC055", width: "1px" }}
|
||||||
|
// width="100%"
|
||||||
|
// color="text-white"
|
||||||
|
// onClick={() => {}}
|
||||||
|
// />
|
||||||
|
// </div>
|
||||||
|
// ) : (
|
||||||
|
// <div
|
||||||
|
// className={`w-full flex flex-row relative gap-10 px-5 mt-10 ${
|
||||||
|
// desktopContentTransform ? "top-24" : ""
|
||||||
|
// }`}
|
||||||
|
// >
|
||||||
|
// <div className="flex flex-col w-3/4">
|
||||||
|
// {/* {phase === "products" && <Table />}
|
||||||
|
// {phase === "delivery-form" && <DeliveryForm />} */}
|
||||||
|
// </div>
|
||||||
|
// <div
|
||||||
|
// className="flex flex-col w-1/4 p-10 bg-grayF9 border border-solid border-grayDB rounded-md px-4 py-4"
|
||||||
|
// style={{ height: "fit-content" }}
|
||||||
|
// >
|
||||||
|
// <div className="flex flex-col w-full border-t py-2 border-gray-300 border-b">
|
||||||
|
// <PriceStatus
|
||||||
|
// name="مبلغ سبد خرید"
|
||||||
|
// value={factorInfo?.sumPrice}
|
||||||
|
// type="normal"
|
||||||
|
// />
|
||||||
|
// <PriceStatus
|
||||||
|
// name="میزان تخفیف"
|
||||||
|
// value={factorInfo?.offPrice}
|
||||||
|
// type="error"
|
||||||
|
// />
|
||||||
|
// <PriceStatus
|
||||||
|
// name="مالیات بر ارزش افزوده"
|
||||||
|
// value={factorInfo?.sumPrice * 0.009}
|
||||||
|
// type="error"
|
||||||
|
// />
|
||||||
|
// </div>
|
||||||
|
// <div className="flex flex-row justify-between items-center w-full py-4 border-t border-b border-grayDB border-solid">
|
||||||
|
// <strong className="font-medium text-tiny text-blue5F dark:text-white">
|
||||||
|
// جمع کل سبد خرید
|
||||||
|
// </strong>
|
||||||
|
// <p className="font-medium text-greenBA text-xl dark:text-white">
|
||||||
|
// {factorInfo?.payPrice}
|
||||||
|
// <span className="font-medium text-greenBA text-sm mr-2">تومان</span>
|
||||||
|
// </p>
|
||||||
|
// </div>
|
||||||
|
|
||||||
|
// {phase === "delivery-form" && (
|
||||||
|
// <div className="flex flex-col mt-10">
|
||||||
|
// <strong className="text-tiny text-blue52 mb-5 font-medium">
|
||||||
|
// انتخاب شیوه پرداخت
|
||||||
|
// </strong>
|
||||||
|
// <Button
|
||||||
|
// title="ادامه فرایند خرید"
|
||||||
|
// backgroundColor="bg-transparent"
|
||||||
|
// border={{ color: "#77777755", width: "1px" }}
|
||||||
|
// width="100%"
|
||||||
|
// color="text-blue52"
|
||||||
|
// onClick={() =>
|
||||||
|
// setPhase(phase === "products" ? "delivery-form" : "")
|
||||||
|
// }
|
||||||
|
// />
|
||||||
|
// <br />
|
||||||
|
// <Button
|
||||||
|
// title="پرداخت در محل"
|
||||||
|
// backgroundColor="bg-transparent"
|
||||||
|
// border={{ color: "#77777755", width: "1px" }}
|
||||||
|
// width="100%"
|
||||||
|
// color="text-blue52"
|
||||||
|
// onClick={() =>
|
||||||
|
// setPhase(phase === "products" ? "delivery-form" : "")
|
||||||
|
// }
|
||||||
|
// />
|
||||||
|
// <br/>
|
||||||
|
// <br/>
|
||||||
|
// </div>
|
||||||
|
// )}
|
||||||
|
|
||||||
|
// <Button
|
||||||
|
// title="ادامه فرایند خرید"
|
||||||
|
// backgroundColor="bg-blueC0"
|
||||||
|
// border={{ color: "#196EC055", width: "1px" }}
|
||||||
|
// width="100%"
|
||||||
|
// color="text-white"
|
||||||
|
// onClick={() => setPhase(phase === "products" ? "delivery-form" : "")}
|
||||||
|
// />
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
return( |
||||||
|
<div className="flex flex-col justify-between items-center bg-gray-200 left-0 pt-24" style={{height: '100vh'}}> |
||||||
|
<div className="w-full flex items-center flex-col"> |
||||||
|
<Product /> |
||||||
|
<Product /> |
||||||
|
{list.map((product, index) => ( |
||||||
|
<Product key={index} product={product} /> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
|
||||||
|
<div style={{width: '80%'}} className="mb-6"> |
||||||
|
<Code /> |
||||||
|
<div className="flex flex-col w-full border-t border-gray-400 my-2 py-2"> |
||||||
|
<div className="flex justify-between w-full py-2 text-blue-700 text-lg "> |
||||||
|
<p>جمع مبالغ خدمات</p> |
||||||
|
<p>۴۲۰۰۰۰ تومان</p> |
||||||
|
</div> |
||||||
|
<div className="flex justify-between w-full py-2 text-red26 text-lg "> |
||||||
|
<p> تخفیف </p> |
||||||
|
<p> -۱۰۰۰۰ تومان</p> |
||||||
|
</div> |
||||||
|
<div className="flex justify-between w-full py-2 text-red26 text-lg "> |
||||||
|
<p>کسر از اعتبار</p> |
||||||
|
<p>-۴۵۰۰۰۰ تومان</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<Button |
||||||
|
title=' پرداخت هزینه : ۴۵/۰۰۰ ' |
||||||
|
borderType='rounded-xl' |
||||||
|
className='h-16 text-xl' |
||||||
|
/> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({ |
||||||
|
isDark: state.publicApi.isDark, |
||||||
|
isMobile: state.publicApi.isMobile, |
||||||
|
list: state.userProduct.list, |
||||||
|
payPrice: state.userProduct.sum, |
||||||
|
factorInfo: state.userFactor.info, |
||||||
|
userId: state.user.status.id, |
||||||
|
hasPhysical: state.userProduct.hasPhysical, |
||||||
|
desktopContentTransform: state.publicApi.desktopContentTransform, |
||||||
|
}); |
||||||
|
|
||||||
|
const mapDispatchToProps = { |
||||||
|
getList: userProduct.list, |
||||||
|
getInfo: userProduct.info, |
||||||
|
getFactorInfo: userFactor.info, |
||||||
|
payFactor: userFactor.payment, |
||||||
|
setHeaderOptions: publicApi.setHeaderOptions, |
||||||
|
}; |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(ShoppingCart); |
||||||
Loading…
Reference in new issue