You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
316 lines
10 KiB
316 lines
10 KiB
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(isMobile ? |
|
|
|
|
|
<div className="w-full flex flex-col justify-start items-center bg-gray-200 rtl left-0 pt-24" style={{height: '100vh'}}> |
|
<div className={`w-full flex items-center flex-col ${list?.length > 3 && 'overflow-x-hidden overflow-scroll'}`} style={{height: '35%'}}> |
|
|
|
{list.map((product, index) => ( |
|
<Product key={index} product={product} /> |
|
))} |
|
</div> |
|
{/* {console.log(list)} */} |
|
|
|
<div className="w-full px-5 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>{factorInfo?.sumPrice} تومان</p> |
|
</div> |
|
<div className="flex justify-between w-full py-2 text-red26 text-lg "> |
|
<p> تخفیف </p> |
|
<p> {factorInfo?.offPrice} - تومان</p> |
|
</div> |
|
<div className="flex justify-between w-full py-2 text-red26 text-lg "> |
|
<p>کسر از اعتبار</p> |
|
<p>-۰ تومان</p> |
|
</div> |
|
</div> |
|
<Button |
|
title={`پرداخت هزینه : ${factorInfo?.payPrice} تومان`} |
|
borderType='rounded-xl' |
|
className='h-16 w-full mx-none text-xl' |
|
/> |
|
</div> |
|
|
|
</div> |
|
|
|
: |
|
|
|
<div className="flex flex-col justify-between items-center bg-gray-100 left-0 pt-24" style={{height: '100vh'}}> |
|
<div className={`w-full flex items-center flex-col ${list?.length > 3 && 'overflow-x-hidden overflow-scroll'}`} style={{height: '35%'}}> |
|
|
|
{list.map((product, index) => ( |
|
<Product key={index} product={product} /> |
|
))} |
|
</div> |
|
{/* {console.log(list)} */} |
|
|
|
<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>{factorInfo?.sumPrice} تومان</p> |
|
</div> |
|
<div className="flex justify-between w-full py-2 text-red26 text-lg "> |
|
<p> تخفیف </p> |
|
<p> {factorInfo?.offPrice} - تومان</p> |
|
</div> |
|
<div className="flex justify-between w-full py-2 text-red26 text-lg "> |
|
<p>کسر از اعتبار</p> |
|
<p>-۰ تومان</p> |
|
</div> |
|
</div> |
|
<Button |
|
title={`پرداخت هزینه : ${factorInfo?.payPrice} تومان`} |
|
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);
|
|
|