fix image

components/AppsComponent/CartData/page.jsx

@@ -25,40 +25,7 @@ const CartData = () => {
   );
 
   const handleGoCheckOut = async () => {
-    // Check if the user is authorized based on the presence of a token in local storage
+    CTX.GoCheckOut();
-    const token = localStorage.getItem("token");
-
-    if (token) {
-      // If token exists, proceed to checkout
-      const productsToSend = cart.map((item) => ({
-        productId: item.id,
-        count: parseInt(item.count),
-      }));
-      try {
-        const data = await Chapar.post(
-          `${process.env.NEXT_PUBLIC_API_URL}/order/bag/add`,
-
-          JSON.stringify(productsToSend),
-
-          {
-            headers: {
-              Authorization: localStorage.getItem("token"),
-            },
-          }
-        );
-
-        CTX.setCheckOutData(data);
-      } catch ({ error, status }) {
-        toast.error(`${error?.response?.data?.message}`, {
-          position: "bottom-right",
-          closeOnClick: true,
-        });
-      }
-      router.push("/cart/checkout"); // Redirect to the checkout Page
-    } else {
-      // If token does not exist, redirect to login
-      router.push("/login"); // Redirect to the login Page
-    }
   };
 
   useEffect(() => {

components/AppsComponent/CheckoutData/page.jsx

@@ -362,9 +362,9 @@ const CheckoutData = () => {
             <div className="text-right flex rtl justify-between border-y-[1px] border-gray-100 my-3 px-4 ">
               <p className="mb-0 text-sm font-semibold py-4">حساب نهایی</p>
 
-              <div className="bg-primary-200 w-fit h-fit relative my-3 p-1 rounded-lg">
+              {/* <div className="bg-primary-200 w-fit h-fit relative my-3 p-1 rounded-lg">
                 <p className="mb-0 text-[11px] text-white rtl">مشاهده اقلام</p>
-              </div>
+              </div> */}
             </div>
 
             <div>

components/AppsComponent/RootData/page.jsx

@@ -31,10 +31,12 @@ const RootData = ({ children }) => {
   const [bottomSheetDiscountOpen, setBottomSheetDiscountOpen] = useState(false);
   const [bottomSheetAddressOpen, setBottomSheetAddressOpen] = useState(false);
   const [bottomSheetLogOutOpen, setBottomSheetLogOutOpen] = useState(false);
+  const [bottomSheetSeeOrderOpen, setBottomSheetSeeOrderOpen] = useState(false);
   const [bottomSheetDeleteAddressOpen, setBottomSheetDeleteAddressOpen] =
     useState(false);
   const [checkOutData, setCheckOutData] = useState([]);
   const [addressData, setAddressData] = useState([]);
+  const [orderUser, setOrderUser] = useState([]);
   const [profile, setProfile] = useState([]);
   const [stopProducts, setStopProducts] = useState(false);
   const [pageGetProducts, setPageGetProducts] = useState(0);
@@ -49,6 +51,8 @@ const RootData = ({ children }) => {
 
   const router = useRouter();
 
+  console.log("cart", cart);
+
   const AddItemToCart = (
     id,
     persianName,
@@ -231,6 +235,27 @@ const RootData = ({ children }) => {
     }
   };
 
+  const fetchOrderUser = async () => {
+    try {
+      const data = await Chapar.get(
+        `${process.env.NEXT_PUBLIC_API_URL}/user/order`,
+        {
+          headers: {
+            Authorization: localStorage.getItem("token"),
+          },
+        }
+      );
+
+      setOrderUser(data);
+    } catch ({ error, status }) {
+      toast.error(`${error?.response?.data?.message}`, {
+        position: "bottom-right",
+        closeOnClick: true,
+      });
+      setLoading(false);
+    }
+  };
+
   const fetchUserInfo = async () => {
     try {
       const data = await Chapar.get(
@@ -252,6 +277,92 @@ const RootData = ({ children }) => {
     }
   };
 
+  const fetchOrderBagCheck = async () => {
+    console.log(cart);
+    const productsToSend = cart.map((item) => ({
+      productId: item.id,
+      count: parseInt(item.count),
+    }));
+
+    console.log(productsToSend);
+
+    try {
+      const data = await Chapar.post(
+        `${process.env.NEXT_PUBLIC_API_URL}/order/bag/check`,
+
+        JSON.stringify(productsToSend)
+      );
+
+      const updatedCart = cart
+        .map((item) => {
+          const updatedCartItem = data.find(
+            (updatedItem) => updatedItem.productId === item.id
+          );
+          if (updatedCartItem) {
+            if (updatedCartItem.isRemoved || !updatedCartItem.isEnable) {
+              // Item is removed or not enabled, remove from cart
+              return null;
+            } else {
+              return {
+                ...item,
+                cost: updatedCartItem.cost,
+                costWithDiscount: updatedCartItem.costWithDiscount,
+              };
+            }
+          } else {
+            return item;
+          }
+        })
+        .filter(Boolean); // Filter out null entries (removed items)
+
+      setCart(updatedCart);
+      localStorage.setItem("cart", JSON.stringify(updatedCart)); // Save updatedCart to localStorage
+    } catch ({ error, status }) {
+      toast.error(`${error?.response?.data?.message}`, {
+        position: "bottom-right",
+        closeOnClick: true,
+      });
+    }
+  };
+
+  const GoCheckOut = async () => {
+    // Check if the user is authorized based on the presence of a token in local storage
+    const token = localStorage.getItem("token");
+
+    if (token) {
+      // If token exists, proceed to checkout
+      const productsToSend = cart.map((item) => ({
+        productId: item.id,
+        count: parseInt(item.count),
+      }));
+
+      try {
+        const data = await Chapar.post(
+          `${process.env.NEXT_PUBLIC_API_URL}/order/bag/submit`,
+
+          JSON.stringify(productsToSend),
+
+          {
+            headers: {
+              Authorization: localStorage.getItem("token"),
+            },
+          }
+        );
+
+        setCheckOutData(data);
+      } catch ({ error, status }) {
+        toast.error(`${error?.response?.data?.message}`, {
+          position: "bottom-right",
+          closeOnClick: true,
+        });
+      }
+      router.push("/cart/checkout"); // Redirect to the checkout Page
+    } else {
+      // If token does not exist, redirect to login
+      router.push("/login"); // Redirect to the login Page
+    }
+  };
+
   useEffect(() => {
     const storedCart = localStorage.getItem("cart");
     const token = localStorage.getItem("token");
@@ -289,6 +400,7 @@ const RootData = ({ children }) => {
       mediaQuery.removeEventListener("change", listener);
     };
   }, []);
+
   return (
     <AppContext.Provider
       value={{
@@ -319,6 +431,8 @@ const RootData = ({ children }) => {
           rangePrice,
           selectedBrands,
           isChecked,
+          orderUser,
+          bottomSheetSeeOrderOpen,
         },
         setCart,
         setProducts,
@@ -343,7 +457,9 @@ const RootData = ({ children }) => {
         setIsRangePrice,
         setRangePrice,
         setSelectedBrands,
+        setBottomSheetSeeOrderOpen,
         setIsChecked,
+        setOrderUser,
         AddItemToCart,
         RemoveItemFromCart,
         fetchNavData,
@@ -351,6 +467,9 @@ const RootData = ({ children }) => {
         setCloseNavbar,
         setAddressData,
         fetchAddressUser,
+        fetchOrderBagCheck,
+        fetchOrderUser,
+        GoCheckOut,
       }}
     >
       {children}

components/Cards/CardNormal/page.jsx

@@ -9,7 +9,7 @@ import AppContext from "@ctx/AppContext";
 import AddToCart from "../Components/AddToCart/page";
 import Link from "next/link";
 
-const CardNormal = ({ data }) => {
+const CardNormal = ({ data, priority }) => {
   const CTX = useContext(AppContext);
   const cart = CTX.state.cart;
   console.log(data);
@@ -47,6 +47,7 @@ const CardNormal = ({ data }) => {
                   width={200}
                   height={200}
                   className="xs:!w-[110px] lg:!w-[130px] mx-auto"
+                  priority={!!priority}
                   alt={`${data.persianName} - ${data.englishName}`}
                 />
               ) : (

components/Footer/page.jsx

@@ -201,7 +201,7 @@ const Footer = () => {
         </div>
 
         <p className="mb-0 text-gray-400 text-sm text-center py-5 rtl bg-gray-100">
-          استفاده از مطالب فروشگاه شاواز فقط برای مقاصد غیرتجاری و باذکر منبع
+          استفاده از مطالب فروشگاه وسمه فقط برای مقاصد غیرتجاری و باذکر منبع
           بلامانع است. کلیه حقوق این سایت متعلق به شرکت وسمه می باشد. ورژن
           {process.env.NEXT_PUBLIC_PACKAGE_VERSION}
         </p>

components/LandingPage/BeautySection/page.jsx

@@ -2,7 +2,6 @@ import CardNormal from "@comp/Cards/CardNormal/page";
 import { Swiper, SwiperSlide } from "swiper/react";
 
 const BeautySection = ({ data }) => {
-  console.log("BeautySection", data);
   return (
     <section className="mb-10 pb-10 xs:bg-sky-500 lg:bg-transparent xs:mx-3 lg:mx-0 xs:px-5 lg:px-0 xs:rounded-3xl lg:rounded-[0px] xs:mt-0 lg:mt-20">
       <div className=" relative xs:hidden lg:block  ">
@@ -35,8 +34,8 @@ const BeautySection = ({ data }) => {
           spaceBetween={50}
           slidesPerView={6.2}
           onSlideChange={() => console.log("slide change")}
-          onSwiper={(swiper) => console.log(swiper)}
           className="rtl relative mt-5"
+          // dir="rtl"
           breakpoints={{
             320: {
               slidesPerView: 1.3,
@@ -57,7 +56,7 @@ const BeautySection = ({ data }) => {
         >
           {data?.map((e, index) => (
             <SwiperSlide key={index}>
-              <CardNormal data={e} />
+              <CardNormal data={e} priority />
             </SwiperSlide>
           ))}
         </Swiper>

components/Navbar/CartNavbar/page.jsx

@@ -66,7 +66,10 @@ const CartNavbar = (props) => {
                 </p>
               </div> */}
               <Link href={"/cart"}>
-                <button className="btn btn-primary text-sm w-full py-3 rounded-3xl">
+                <button
+                  className="btn btn-primary text-sm w-full py-3 rounded-3xl"
+                  onClick={() => CTX.fetchOrderBagCheck()}
+                >
                   {" "}
                   ثبت خرید
                 </button>

components/TimerDown/TimerDown.jsx

@@ -46,7 +46,7 @@ const TimerDown = () => {
   }, []);
 
   return (
-    <div className=" justify-center ltr realtive mr-5 px-2  xs:hidden lg:flex ">
+    <div className=" justify-center ltr realtive mr-5 px-2 mt-[-30px] xs:hidden lg:flex ">
       <div className=" rounded-full bg-red-100 w-[50px] h-[50px] mx-1">
         <p className="mb-0 = text-center   text-red-900 font-bold pt-3 ">
           <PersianNumber
@@ -55,7 +55,7 @@ const TimerDown = () => {
           />
         </p>
 
-        <p className="text-[12px] pt-6 text-center ">روز</p>
+        <p className="text-[10px] pt-4 text-center text-gray-600 ">روز</p>
       </div>
 
       <div className=" rounded-full bg-red-100 w-[50px] h-[50px] mx-1">
@@ -65,7 +65,7 @@ const TimerDown = () => {
             style={"text-[27px] text-red-900 "}
           />
         </p>
-        <p className="text-[12px] pt-6 text-center ">ساعت</p>
+        <p className="text-[10px] pt-4 text-center text-gray-600 ">ساعت</p>
       </div>
       <div className=" rounded-full bg-red-100 w-[50px] h-[50px] mx-1">
         <p className="mb-0  text-center   text-red-900 font-bold pt-3 ">
@@ -74,7 +74,7 @@ const TimerDown = () => {
             style={"text-[27px] text-red-900 "}
           />
         </p>
-        <p className="text-[12px] pt-6 text-center ">دقیقه</p>
+        <p className="text-[10px] pt-4 text-center text-gray-600 ">دقیقه</p>
       </div>
       <div className=" rounded-full bg-red-100 w-[50px] h-[50px] mx-1">
         <Link href="/login">
@@ -85,7 +85,7 @@ const TimerDown = () => {
               style={"text-[27px] text-red-900 "}
             />
           </p>
-          <p className="text-[12px] pt-6 text-center ">ثانیه</p>
+          <p className="text-[10px] pt-4 text-center text-gray-600 ">ثانیه</p>
         </Link>
       </div>
     </div>

next.config.js

@@ -3,6 +3,12 @@ const nextConfig = {
   reactStrictMode: false, // React Strict Mode is off
   images: {
     domains: ["storage.vesmook.com"],
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "storage.vesmook.com",
+      },
+    ],
   },
 };
 

plugins/bottomSheet/BottomSheetSeeOrder.jsx

@@ -0,0 +1,152 @@
+"use client";
+
+import CardCart from "@comp/Cards/CardCart/page";
+import AppContext from "@ctx/AppContext";
+import Image from "next/image";
+import Link from "next/link";
+import Chapar from "plugins/Chapar";
+import PersianNumber from "plugins/PersianNumber";
+import { useContext, useState } from "react";
+import { BottomSheet } from "react-spring-bottom-sheet";
+import { toast } from "react-toastify";
+import logo from "@img/logo.png";
+
+const BottomSheetSeeOrder = ({ id }) => {
+  console.log("id", id);
+  const CTX = useContext(AppContext);
+
+  const [bag, setBag] = useState([]);
+
+  const handleOpen = async (e) => {
+    if (e.type == "OPEN") {
+      try {
+        const data = await Chapar.get(
+          `${process.env.NEXT_PUBLIC_API_URL}/order/${id}`,
+          {
+            headers: {
+              Authorization: localStorage.getItem("token"),
+            },
+          }
+        );
+        setBag(data);
+      } catch ({ error, status }) {
+        toast.error(`${error?.response?.data?.message}`, {
+          position: "bottom-right",
+          closeOnClick: true,
+        });
+      }
+    }
+  };
+
+  return (
+    <BottomSheet
+      onSpringStart={(e) => handleOpen(e)}
+      open={CTX.state.bottomSheetSeeOrderOpen}
+      onDismiss={() => CTX.setBottomSheetSeeOrderOpen(false)}
+      className={"z-50 relative"}
+    >
+      {/* {bag && bag.length > 0 && ( */}
+      <div className="h-[900px]">
+        {bag.orderProducts?.map((e) => (
+          <div className="text-center p-3">
+            <p className="mb-0 text-sm  pb-3 rtl">
+              <PersianNumber
+                number={bag.orderProducts?.length}
+                style="text-xl font-bold text-base font-bold mx-2 !text-primary-500"
+              />
+              محصول موجود در سبد
+            </p>
+
+            {/* <div className="w-5/12 mx-auto h-[1px] bg-gray-200 my-3"></div> */}
+            <div>
+              {bag.orderProducts.map((e, index) => (
+                <div className="group border-t-[1px] border-gray-100  w-full hover:bg-white z-40 tr03 flex rtl pt-2">
+                  <Link href={`/products/${e.id}/${e.persianName}`}>
+                    <div className=" h-fit  ">
+                      {!!e.mainImage ? (
+                        <Image
+                          src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${e.mainImage}`}
+                          width={100}
+                          height={100}
+                          className="xs:!w-[110px] lg:!w-[130px] mx-auto !object-cover"
+                          alt={`${e.productName} - ${e.productName}`}
+                        />
+                      ) : (
+                        <div className="xs:!w-[85px] lg:!w-[85px] ">
+                          <Image
+                            src={logo}
+                            className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
+                            alt="وسمه"
+                          />
+                        </div>
+                      )}
+                    </div>
+                  </Link>
+                  <div className="p-3 text-right w-full">
+                    <Link href={`/products/${e.id}/${e.productName}`}>
+                      <p className="mb-0 xs:text-[12px] lg:text-[11px] xl:text-[15px]  max-h-[50px] tr03   ">
+                        {e?.productName}
+                      </p>
+                    </Link>
+
+                    <div className=" rounded-full flex ltr  w-full">
+                      <div className="mt-3">
+                        <p className="mb-0 rtl text-sm">
+                          <PersianNumber
+                            number={e?.count}
+                            style={"text-sm ml-1"}
+                          />
+                          عدد
+                        </p>
+                      </div>
+                      <div className="w-full  text-right rounded-full">
+                        {e?.hasDiscount ? (
+                          <div className="flex justify-end relative">
+                            <p className="mb-0 font-bold text-sm absolute opacity-40 mt-[-7px] ml-[20px] text-red-600">
+                              <del>
+                                <PersianNumber
+                                  number={(
+                                    data?.productFee / 10
+                                  ).toLocaleString()}
+                                  style={"text-[13px]"}
+                                />
+                              </del>
+                            </p>
+                            <div className="flex rtl mt-[8px]">
+                              {" "}
+                              <p className="mb-0 font-bold">
+                                <PersianNumber
+                                  number={(
+                                    e?.productFeeWithDiscount / 10
+                                  ).toLocaleString()}
+                                />
+                              </p>
+                              <small className="mr-1 mt-[3px]">تومان</small>
+                            </div>
+                          </div>
+                        ) : (
+                          <div className="flex rtl mt-[3px]">
+                            {" "}
+                            <p className="mb-0 font-bold text-lg">
+                              <PersianNumber
+                                number={(e?.productFee / 10).toLocaleString()}
+                              />
+                            </p>
+                            <small className="mr-1 mt-[6px]">تومان</small>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+      {/* )} */}
+    </BottomSheet>
+  );
+};
+
+export default BottomSheetSeeOrder;

public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2ab0da</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "vesmeh",
+    "short_name": "vesmeh",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#2ab0da",
+    "background_color": "#2ab0da",
+    "display": "standalone"
+}

public/vercel.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

src/app/layout.jsx

@@ -1,6 +1,19 @@
 import RootData from "@comp/AppsComponent/RootData/page";
+import Head from "next/head";
 
 export const metadata = {
+  icons: {
+    icon: [
+      {
+        url: "/favicon-16x16.png",
+        media: "(prefers-color-scheme: light)",
+      },
+      {
+        url: "/favicon-16x16.png",
+        media: "(prefers-color-scheme: dark)",
+      },
+    ],
+  },
   title: {
     template:
       "%s |  خرید لوازم آرایشی و بهداشتی قیمت مناسب و اصل | فروشگاه اینترنتی وسمه",

src/app/page.jsx

@@ -52,10 +52,14 @@ export default function Page() {
         <Navbar theme={0} />
         <HeroSection />
       </div>
-      <SurpriseSection data={specialOfferData?.products} />
+
+      <BeautySection data={cosmeticData?.products} />
+
       <BetweenSexualSection />
       <BrandsLogoSection />
-      <BeautySection data={cosmeticData?.products} />
+      <SurpriseSection data={specialOfferData?.products} />
+
+      {/* <BeautySection data={cosmeticData?.products} /> */}
       <HomeSection data={HomeCosmeticData?.products} />
       <Footer />
     </>

src/app/product/[slug]/page.jsx

@@ -0,0 +1,7 @@
+import { permanentRedirect } from "next/navigation";
+
+export default async function Page({ params: { slug } }) {
+  console.log("slug", slug);
+  // slug -> id
+  permanentRedirect(`/products/${slug}`, "replace");
+}

src/app/profile/orders/page.jsx

@@ -1,8 +1,58 @@
+"use client";
+
 import Navbar from "@comp/Navbar/page";
 import PersianNumber from "plugins/PersianNumber";
 import SideBarProfile from "../component/SideBarProfile/page";
+import { useContext, useEffect, useState } from "react";
+import AppContext from "@ctx/AppContext";
+import moment from "jalali-moment";
+import BottomSheetSeeOrder from "plugins/bottomSheet/BottomSheetSeeOrder";
 
 const Page = () => {
+  const CTX = useContext(AppContext);
+  const orderUser = CTX.state.orderUser;
+
+  const [idOrder, setIdOrder] = useState(null);
+
+  const [bag, setBag] = useState([]);
+
+  const getStatusDescription = (status) => {
+    console.log(status);
+
+    switch (status) {
+      case 0:
+        return "سبد خرید";
+      case 1:
+        return "ثبت شده";
+      case 2:
+        return "پرداخت شده";
+      case 10:
+        return "درحال پردازش";
+      case 20:
+        return "ارسال شده";
+      case 200:
+        return "انجام شده";
+      case 500:
+        return "کنسل شده";
+      default:
+        return "نامعلوم";
+    }
+  };
+
+  const handleSubmit = (status, id) => {
+    if (status == 0) {
+      CTX.GoCheckOut();
+    } else {
+      setIdOrder(id);
+      setTimeout(() => {
+        CTX.setBottomSheetSeeOrderOpen(true);
+      }, 100);
+    }
+  };
+
+  useEffect(() => {
+    CTX.fetchOrderUser();
+  }, []);
   return (
     <>
       <Navbar theme={1} />
@@ -12,7 +62,7 @@ const Page = () => {
         <div className="lg:col-span-3 xl:col-span-4 ">
           <div className="bg-gray-100 p-5 mt-5 rounded-lg overflow-hidden">
             <p className="mb-0 font-bold">سابقه سفارشات</p>
-
+            {/* 
             <div className="flex rounded-xl bg-gray-300 mt-3 w-fit p-2 ">
               <div className="bg-primary-500 py-2 rounded-xl xs:px-2 lg:px-5">
                 <p className="mb-0 text-white xs:text-sm lg:text-base"> جاری</p>
@@ -26,14 +76,9 @@ const Page = () => {
               <div className=" py-2 rounded-full xs:px-2  lg:px-5 text-gray-600">
                 <p className="mb-0 xs:text-sm lg:text-base">لغو شده</p>
               </div>
-            </div>
+            </div> */}
 
-            <div className="flex justify-center my-[100px]">
+            <div className="overflow-x-auto mt-5">
-              <p className="mb-0  rounded-full w-fit shadow bg-white p-5 ">
-                شما سفارشی ندارید
-              </p>
-            </div>
-            <div className="overflow-x-auto">
               <table
                 className="table-auto w-full bg-white border-collapse rounded-lg"
                 dir="rtl"
@@ -57,29 +102,51 @@ const Page = () => {
                     </th>
                   </tr>
                 </thead>
-                <tbody className="text-gray-600 text-sm">
-                  <tr className="border-b">
-                    <td className="px-4 py-3">
-                      {" "}
-                      <PersianNumber number={3521152} />{" "}
-                    </td>
-                    <td className="px-4 py-3">1402/8/12</td>
-                    <td className="px-4 py-3">1402/8/16</td>
-                    <td className="px-4 py-3 text-green-500 font-semibold">
-                      در حال بسته بندی
-                    </td>
 
-                    <td className="px-4 py-3 text-green-500 font-semibold">
+                <tbody className="text-gray-600 text-sm">
-                      <button className="btn btn-outline-primary !py-1 rounded-xl text-sm">
+                  {orderUser?.map((e) => (
-                        مشاهده سفارش
+                    <>
-                      </button>{" "}
+                      {orderUser.length > 0 ? (
-                    </td>
+                        <tr className="border-b">
-                  </tr>
+                          <td className="px-4 py-3">
-                  <tr className="border-b bg-gray-50">
+                            {" "}
-                    <td className="px-4 py-3">جین دو</td>
+                            <PersianNumber
-                    <td className="px-4 py-3">۲۵</td>
+                              number={e.totalPrice.toLocaleString()}
-                    <td className="px-4 py-3">jane@example.com</td>
+                            />{" "}
-                  </tr>
+                          </td>
+                          <td className="px-4 py-3">
+                            <PersianNumber
+                              number={moment(e.orderAt)
+                                .locale("fa")
+                                .format("jYYYY/jM/jD")}
+                            />
+                          </td>
+                          <td className="px-4 py-3">-</td>
+                          <td className="px-4 py-3 text-green-500 font-medium">
+                            {getStatusDescription(e.orderStatus)}
+                          </td>
+
+                          <td className="px-4 py-3 text-green-500 font-medium">
+                            <button
+                              className="btn btn-outline-primary !py-1 rounded-xl text-sm"
+                              onClick={() => handleSubmit(e.orderStatus, e.id)}
+                            >
+                              {e.orderStatus == 0
+                                ? "ثبت سفارش"
+                                : "  مشاهده سفارش"}
+                            </button>{" "}
+                          </td>
+                        </tr>
+                      ) : (
+                        <div className="flex justify-center my-[100px]">
+                          <p className="mb-0  rounded-full w-fit shadow bg-white p-5 ">
+                            شما سفارشی ندارید
+                          </p>
+                        </div>
+                      )}
+                    </>
+                  ))}
+
                   {/* Add more rows as needed */}
                 </tbody>
               </table>
@@ -87,6 +154,8 @@ const Page = () => {
           </div>
         </div>
       </div>
+
+      <BottomSheetSeeOrder id={idOrder} />
     </>
   );
 };