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 (
<div
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>
{buttonText && (
<button className="transform translate-y-20 py-2 px-6 text-base rounded-md bg-blueC0 text-white" onClick={() => buttonAction()}>{buttonText}</button>
)}
</div>
);
};

@ -5,6 +5,7 @@ import {
publicApi,
dialog,
} from "../../redux/actions";
import { useNavigate } from "react-router-dom";
import separate from "../../utils/separate";
import { toast } from "react-toastify";
import DeliveryForm from "../DeliveryForm";
@ -12,6 +13,7 @@ import Product from "./Product";
import Address from "../Address";
import Code from "./Code";
import Button from "../../components/Button";
import Empty from "../../components/Empty";
//assets
import dropdownIcon from "../../assets/icons/dropdown-blue.svg";
@ -36,7 +38,7 @@ function ShoppingCart({
setDialog,
}) {
const [phase, setPhase] = useState("products");
const navigation = useNavigate();
useEffect(() => {
getList();
getFactorInfo({ userId: user?.id });
@ -165,18 +167,14 @@ function ShoppingCart({
const layouts = {
products: isMobile ? (
<>
{productsLength ? (
list
.sort((a, b) => a?.id - b?.id)
.map(
(product, index) =>
product.condition < 2 && (
<Product loading={loading} key={index} product={product} />
)
)
) : (
<strong className="text-blueC0">سبد خرید شما خالی است.</strong>
)}
{list
.sort((a, b) => a?.id - b?.id)
.map(
(product, index) =>
product.condition < 2 && (
<Product loading={loading} key={index} product={product} />
)
)}
<Code />
</>
) : productsLength ? (
@ -190,65 +188,76 @@ function ShoppingCart({
return isMobile ? (
<div className="w-full flex flex-col px-4 pb-24">
<div className="flex flex-col flex-1">{layouts[phase]}</div>
{phase !== "address" && (
{productsLength ? (
<>
<div className="flex flex-col w-full border-t 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-3">
<strong className="font-bold text-tiny text-blue5F dark:text-white">
جمع کل سبد خرید
</strong>
<p className="font-medium text-greenBA text-lg dark:text-white">
{separate(factorInfo?.payPrice) + " " + "تومان"}
</p>
</div>
<div
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" }}
>
<img src={alertIcon} className="w-5 ml-2" />
<p className="text-xs text-green71 dark:text-white text-justify font-medium">
هزینه ارسال کالا پس از تعیین محل آدرس مشخص میشود
</p>
</div>
<Button
title="ادامه فرایند خرید"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "0px" }}
width="100%"
color="text-white"
onClick={next[phase]}
/>
{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"
{" "}
<div className="flex flex-col flex-1">{layouts[phase]}</div>
{phase !== "address" && (
<>
<div className="flex flex-col w-full border-t 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-3">
<strong className="font-bold text-tiny text-blue5F dark:text-white">
جمع کل سبد خرید
</strong>
<p className="font-medium text-greenBA text-lg dark:text-white">
{separate(factorInfo?.payPrice) + " " + "تومان"}
</p>
</div>
<div
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" }}
>
<img src={alertIcon} className="w-5 ml-2" />
<p className="text-xs text-green71 dark:text-white text-justify font-medium">
هزینه ارسال کالا پس از تعیین محل آدرس مشخص میشود
</p>
</div>
<Button
title="ادامه فرایند خرید"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "0px" }}
width="100%"
color="text-white"
onClick={next[phase]}
/>
</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>
) : (

Loading…
Cancel
Save