reza added empty to cart

temp
Reza_ashrafi 3 years ago
parent 3726ef9f14
commit fcb2390215
  1. 5
      src/components/Empty/index.js
  2. 145
      src/views/ShoppingCart/index.js

@ -5,9 +5,12 @@ export const Empty = ({ text, buttonText, buttonAction }) => {
return ( return (
<div <div
className="flex-1 flex flex-col justify-center items-center" className="flex-1 flex flex-col justify-center items-center"
style={{ minHeight: 'calc(100vh - 120px)' }} style={{ minHeight: "calc(100vh - 120px)" }}
> >
<strong className="text-lg font-bold text-gray1">{text}</strong> <strong className="text-lg font-bold text-gray1">{text}</strong>
{buttonText && (
<button className="transform translate-y-20 py-2 px-6 text-base rounded-md bg-blueC0 text-white" onClick={() => buttonAction()}>{buttonText}</button>
)}
</div> </div>
); );
}; };

@ -5,6 +5,7 @@ import {
publicApi, publicApi,
dialog, dialog,
} from "../../redux/actions"; } from "../../redux/actions";
import { useNavigate } from "react-router-dom";
import separate from "../../utils/separate"; import separate from "../../utils/separate";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import DeliveryForm from "../DeliveryForm"; import DeliveryForm from "../DeliveryForm";
@ -12,6 +13,7 @@ import Product from "./Product";
import Address from "../Address"; import Address from "../Address";
import Code from "./Code"; import Code from "./Code";
import Button from "../../components/Button"; import Button from "../../components/Button";
import Empty from "../../components/Empty";
//assets //assets
import dropdownIcon from "../../assets/icons/dropdown-blue.svg"; import dropdownIcon from "../../assets/icons/dropdown-blue.svg";
@ -36,7 +38,7 @@ function ShoppingCart({
setDialog, setDialog,
}) { }) {
const [phase, setPhase] = useState("products"); const [phase, setPhase] = useState("products");
const navigation = useNavigate();
useEffect(() => { useEffect(() => {
getList(); getList();
getFactorInfo({ userId: user?.id }); getFactorInfo({ userId: user?.id });
@ -165,18 +167,14 @@ function ShoppingCart({
const layouts = { const layouts = {
products: isMobile ? ( products: isMobile ? (
<> <>
{productsLength ? ( {list
list .sort((a, b) => a?.id - b?.id)
.sort((a, b) => a?.id - b?.id) .map(
.map( (product, index) =>
(product, index) => product.condition < 2 && (
product.condition < 2 && ( <Product loading={loading} key={index} product={product} />
<Product loading={loading} key={index} product={product} /> )
) )}
)
) : (
<strong className="text-blueC0">سبد خرید شما خالی است.</strong>
)}
<Code /> <Code />
</> </>
) : productsLength ? ( ) : productsLength ? (
@ -190,65 +188,76 @@ function ShoppingCart({
return isMobile ? ( return isMobile ? (
<div className="w-full flex flex-col px-4 pb-24"> <div className="w-full flex flex-col px-4 pb-24">
<div className="flex flex-col flex-1">{layouts[phase]}</div> {productsLength ? (
{phase !== "address" && (
<> <>
<div className="flex flex-col w-full border-t border-gray-300 border-b"> {" "}
<PriceStatus <div className="flex flex-col flex-1">{layouts[phase]}</div>
name="مبلغ سبد خرید" {phase !== "address" && (
value={factorInfo?.sumPrice} <>
type="normal" <div className="flex flex-col w-full border-t border-gray-300 border-b">
/> <PriceStatus
<PriceStatus name="مبلغ سبد خرید"
name="میزان تخفیف" value={factorInfo?.sumPrice}
value={factorInfo?.offPrice} type="normal"
type="error" />
/> <PriceStatus
<PriceStatus name="میزان تخفیف"
name="مالیات بر ارزش افزوده" value={factorInfo?.offPrice}
value={factorInfo?.sumPrice * 0.009} type="error"
type="error" />
/> <PriceStatus
</div> name="مالیات بر ارزش افزوده"
<div className="flex flex-row justify-between items-center w-full py-3"> value={factorInfo?.sumPrice * 0.009}
<strong className="font-bold text-tiny text-blue5F dark:text-white"> type="error"
جمع کل سبد خرید />
</strong> </div>
<p className="font-medium text-greenBA text-lg dark:text-white"> <div className="flex flex-row justify-between items-center w-full py-3">
{separate(factorInfo?.payPrice) + " " + "تومان"} <strong className="font-bold text-tiny text-blue5F dark:text-white">
</p> جمع کل سبد خرید
</div> </strong>
<div <p className="font-medium text-greenBA text-lg dark:text-white">
className="w-full rounded-md flex flex-row justify-center items-center py-2.5 px-3 mt-5 mb-4" {separate(factorInfo?.payPrice) + " " + "تومان"}
style={{ backgroundColor: isDark ? "#DEFFF111" : "#DEFFF188" }} </p>
> </div>
<img src={alertIcon} className="w-5 ml-2" /> <div
<p className="text-xs text-green71 dark:text-white text-justify font-medium"> className="w-full rounded-md flex flex-row justify-center items-center py-2.5 px-3 mt-5 mb-4"
هزینه ارسال کالا پس از تعیین محل آدرس مشخص میشود style={{ backgroundColor: isDark ? "#DEFFF111" : "#DEFFF188" }}
</p> >
</div> <img src={alertIcon} className="w-5 ml-2" />
<Button <p className="text-xs text-green71 dark:text-white text-justify font-medium">
title="ادامه فرایند خرید" هزینه ارسال کالا پس از تعیین محل آدرس مشخص میشود
backgroundColor="bg-blueC0" </p>
border={{ color: "#196EC055", width: "0px" }} </div>
width="100%" <Button
color="text-white" title="ادامه فرایند خرید"
onClick={next[phase]} backgroundColor="bg-blueC0"
/> border={{ color: "#196EC055", width: "0px" }}
{phase !== "products" && ( width="100%"
<button color="text-white"
className="bg-transparent mt-4 text-base border-2 border-solid border-blueC0 text-green7B dark:text-blueC0 rounded-full py-3 flex flex-row justify-center items-center" onClick={next[phase]}
onClick={() => setPhase("products")}
>
بازگشت
<img
src={dropdownIcon}
alt=""
className="w-4 transform rotate-90"
/> />
</button> {phase !== "products" && (
<button
className="bg-transparent mt-4 text-base border-2 border-solid border-blueC0 text-green7B dark:text-blueC0 rounded-full py-3 flex flex-row justify-center items-center"
onClick={() => setPhase("products")}
>
بازگشت
<img
src={dropdownIcon}
alt=""
className="w-4 transform rotate-90"
/>
</button>
)}
</>
)} )}
</> </>
) : (
<Empty
text="سبد خرید شما خالی است."
buttonText="فروشگاه"
buttonAction={() => navigation('/products')}
/>
)} )}
</div> </div>
) : ( ) : (

Loading…
Cancel
Save