dix_product_api

src/App.tsx

@@ -19,12 +19,12 @@ const App = () => {
 
     }
   }, [data]);
-
+  const randomtoken = Math.random()
   useEffect(() => {
     const fn_firebase = (async () => {
-    const token = await requestPermission()
+    // const token = await requestPermission()
       if (!Guest) {
-        mutate({ fcm_token: token });
+        mutate({ fcm_token: randomtoken });
       }
     })
     fn_firebase()

src/Components/HOC/CartWithDrawer.tsx

@@ -19,7 +19,7 @@ const CartWithDrawer = () => {
   const { t } = useTranslation();
   const { Cart, calculateTotalPrice, calculateTotalQuantity, removeCart } =
     useCartState();
-  const { user } = useAuthState();
+  const { user ,isAuthenticated} = useAuthState();
   const { mutate, isLoading, isSuccess } = useAddOrder();
   const products = Cart?.map((item: any) => ({
     quantity: item?.quantity,
@@ -27,6 +27,10 @@ const CartWithDrawer = () => {
   }));
 
   const addOrder = () => {
+     if (!isAuthenticated) {
+      toast.error("sorry you need to be authenticated");
+      return;
+    }
     mutate({
       email: user?.email,
       products: products,
@@ -61,7 +65,7 @@ const CartWithDrawer = () => {
         open={open}
         key={placement}
         width={550}
-        style={{maxHeight:"90%"}}
+        style={{maxHeight:"60%", minHeight:"500px"}}
       >
         <div className="cart_first_section">
           <span>{t("Cart")}</span>
@@ -77,6 +81,7 @@ const CartWithDrawer = () => {
             ))}
           </div>
           
+
           {Cart?.length > 0 ? (
             <div className="ViewCart_Button">
               <p>
@@ -97,7 +102,10 @@ const CartWithDrawer = () => {
               </Button>
             </div>
           ) : (
-            <div></div>
+            <div className="EmptyCard">
+              <img src="/Cart/empty_card.gif" alt="" />
+              <p>{t('You have not placed any orders yet')}</p>
+            </div>
           )}
         </div>
       </Drawer>

src/Components/Home/BestSale.tsx

@@ -1,6 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import ProductSwiper from "./ProductSwiper";
+import { useGetBaseProduct } from "../../api/baseProduct";
 
 const Products = () => {
   const {t}  = useTranslation();
@@ -9,6 +10,10 @@ const Products = () => {
   const handelSeeAll = () => {
     navigate(`/categories?type=best_sale`);
   };
+
+  const { data,isLoading } = useGetBaseProduct({
+    mostOrderd: "asc",
+  })
   return (
     <div className="Products">
       <header>
@@ -16,7 +21,7 @@ const Products = () => {
         <h5 className="pointer" onClick={handelSeeAll}> {t("View all")} </h5>
       </header>
       <main className="ProductCards">
-        <ProductSwiper/>
+      <ProductSwiper data={data} isLoading={isLoading} />
       </main>
     </div>
   );

src/Components/Home/ProductCard.tsx

@@ -40,10 +40,10 @@ const ProductCard = ({ item }: { item: Product }) => {
   const queryClient = useQueryClient();
 
   const handelChangeFavorite = (item: Product) => {
-    if (!isAuthenticated) {
-      toast.error("sorry you need to be authenticated");
-      return;
-    }
+    // if (!isAuthenticated) {
+    //   toast.error("sorry you need to be authenticated");
+    //   return;
+    // }
 
     if (item?.favorite) {
       
@@ -55,6 +55,8 @@ const ProductCard = ({ item }: { item: Product }) => {
         id: item?.id,
       });
     }
+    queryClient.invalidateQueries('mainProduct');
+
   };
 
   useEffect(() => {
@@ -71,11 +73,11 @@ const ProductCard = ({ item }: { item: Product }) => {
   }, [Delete]);
 
   const handelAddToCart = (item: Product) => {
-    if (!isAuthenticated) {
+    // if (!isAuthenticated) {
 
-      toast.error("sorry you need to be authenticated");
-      return;
-    }
+    //   toast.error("sorry you need to be authenticated");
+    //   return;
+    // }
     setCart(item);
 
 

src/Components/Home/ProductSwiper.tsx

@@ -11,16 +11,14 @@ import { Spin } from 'antd';
 
 
 
-const ProductSwiper = () => {
+const ProductSwiper = ({data,isLoading}:any) => {
   const language = localStorage.getItem('language') ;
   console.log(language);
   
   const [swiperDirection, setSwiperDirection] = useState(language === "ar" ? "rtl" : "ltr");
   const swiperRef = useRef<any>(null);
 
-  const { data, isLoading } = useGetBaseProduct({
-    mostOrderd: "asc",
-  });
+
   const BaseProducts = (data?.products as Product[]) || ([] as []);
 
   return (

src/Components/Home/Products.tsx

@@ -1,6 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import ProductSwiper from "./ProductSwiper";
+import { useGetBaseProduct } from "../../api/baseProduct";
 
 const Products = () => {
   const {t} = useTranslation();
@@ -10,6 +11,11 @@ const Products = () => {
     navigate(`/categories?type=new_product`);
     };
 
+    const { data,isLoading } = useGetBaseProduct({
+      lastProducts:"asc"
+    });
+
+    
   return (
     <div className="Products">
       <header>
@@ -17,7 +23,7 @@ const Products = () => {
         <h5 className="pointer" onClick={handelSeeAll}> {t("View all")} </h5>
       </header>
       <main className="ProductCards">
-         <ProductSwiper/>
+      <ProductSwiper data={data} isLoading={isLoading} />
       </main>
     </div>
   );

src/Components/Utils/Search/Empty.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+const Empty = () => {
+    const [t] = useTranslation()
+  return (
+    <div className='Empty'>
+        <img src="/icon/notfound_search.png" alt="" />
+        <h1>{t("There are no suitable products")}</h1>
+        <p>
+            {t("Please try using other keywords to find the product name")}
+        </p>
+    </div>
+  )
+}
+
+export default Empty

src/Components/Utils/SearchBar/SearchBar.scss

@@ -105,3 +105,8 @@
             }
             
           }
+
+          .search_comp{
+            display: flex;
+            flex-direction: column;
+          }

src/Pages/Auth/LoginForm.tsx

@@ -18,6 +18,7 @@ const LoginForm = ({ setOpen }: any) => {
   const { mutate, isLoading, isSuccess, data } = useLogin();
   const { login } = useAuthState();
   const FCM = localStorage.getItem(FCM_TOKEN_KEY)
+  const random_token = Math.random()
 
   const handelSubmit = (values: any) => {
     if (!values.email || !values.password) {
@@ -25,7 +26,7 @@ const LoginForm = ({ setOpen }: any) => {
 
       return;
     }
-    mutate({ ...values, fcm_token: FCM });
+    mutate({ ...values, fcm_token: random_token });
   };
 
   useEffect(() => {

src/Pages/Product/Page.tsx

@@ -94,7 +94,7 @@ const Page = () => {
             </div>
           </div>
       </main>
-      <Similar/>
+      <Similar  category_id={product?.category?.id} />
     </div>
   );
 };

src/Pages/Product/Similar.tsx

@@ -1,8 +1,10 @@
 import { useGetBaseProduct } from "../../api/baseProduct";
 import ProductSwiper from "../../Components/Home/ProductSwiper";
 
-const Similar = () => {
-  const { data } = useGetBaseProduct();
+const Similar = ({category_id}:any) => {
+  const { data,isLoading } = useGetBaseProduct({
+    category_id:category_id
+  });
 
   return (
     <div className="Products">
@@ -10,7 +12,7 @@ const Similar = () => {
         <h1>Similar Products</h1>
       </header>
       <main className="ProductCards">
-        <ProductSwiper/>
+        <ProductSwiper data={data} isLoading={isLoading} />
       </main>
     </div>
   );

src/Styles/Layout/NavBar.scss

@@ -42,7 +42,7 @@
       .active{
 
           opacity: 1;
-        //   border-bottom: .1vw solid var(--primary);
+          border-bottom: .1vw solid var(--primary);
           color: var(--primary);
       }
   }

src/Styles/Page/Cart.scss

@@ -114,3 +114,18 @@
       }    
   }
 }
+
+.EmptyCard{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 5%;
+    gap: 20px;
+    img{
+        width: 40%;
+    }
+    p{
+        font-size: max(1.5vw,15px);
+    }
+}