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