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

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