reza added empty to cart

src/components/Empty/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>
   );
 };

src/views/ShoppingCart/index.js

@@ -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>
   ) : (