fix empty cart

src/app/[name]/(Main)/cart/CartPage.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import { useGetFoods } from "@/app/[name]/(Main)/hooks/useMenuData";
-import { useGetProfile } from "@/app/[name]/(Profile)/profile/hooks/userProfileData";
 import Button from "@/components/button/PrimaryButton";
 import NotificationBellIcon from "@/components/icons/NotificationBellIcon";
 import MenuItem from "@/components/listview/MenuItem";
@@ -17,49 +15,19 @@ import { useGetAbout } from "../about/hooks/useAboutData";
 import CartSkeleton from "./components/CartSkeleton";
 import CartSummary from "./components/CartSummary";
 import { useCart } from "./hook/useCart";
-import { useGetCartItems } from "./hooks/useCartData";
+import { useCartPageState } from "./hooks/useCartPageState";
-import {
-  cartItemsToFoods,
-  guestCartItemsToFoods,
-  hasCartEntries,
-} from "./lib/cartUtils";
 
 const CartPage = () => {
   const { t } = useTranslation("parallels", { keyPrefix: "Cart" });
   const router = useRouter();
-  const { isSuccess } = useGetProfile();
+  const { clearCart } = useCart();
-  const { clearCart, items } = useCart();
-  const { data: cartData, isPending: cartPending } = useGetCartItems(isSuccess);
-  const { data: foodsResponse } = useGetFoods();
   const { data: aboutData } = useGetAbout();
+  const { isLoading, isCartEmpty, hasItems, cartFoods } = useCartPageState();
   const [showClearConfirm, setShowClearConfirm] = React.useState(false);
   const [showPagerModal, setShowPagerModal] = React.useState(false);
 
   const isPremium = aboutData?.data?.plan === "premium";
 
-  const cartFoods = React.useMemo(() => {
-    const foods = foodsResponse?.data ?? [];
-    if (isSuccess) {
-      const apiItems = cartData?.data?.items ?? [];
-      return cartItemsToFoods(apiItems, foods);
-    }
-    return guestCartItemsToFoods(items, foods);
-  }, [isSuccess, cartData?.data?.items, items, foodsResponse?.data]);
-
-  const hasItems = React.useMemo(() => {
-    if (isSuccess) {
-      return (cartData?.data?.totalItems ?? 0) > 0 || hasCartEntries(items);
-    }
-    return hasCartEntries(items);
-  }, [isSuccess, cartData?.data?.totalItems, items]);
-
-  const guestAwaitingMenu =
-    !isSuccess && hasItems && cartFoods.length === 0 && !foodsResponse?.data;
-
-  const showInitialCartLoad = isSuccess && cartPending && !cartData && hasItems;
-
-  const isCartEmpty = !hasItems;
-
   const handleClearCart = (e: React.MouseEvent) => {
     e?.preventDefault();
     e?.stopPropagation();
@@ -76,7 +44,7 @@ const CartPage = () => {
   return (
     <div className="overflow-y-auto h-full noscrollbar flex flex-col bg-background">
       <div className="grid grid-cols-3 items-center mt-6">
-        {isCartEmpty ? (
+        {isCartEmpty || isLoading ? (
           <span></span>
         ) : (
           <Trash
@@ -98,7 +66,7 @@ const CartPage = () => {
       </div>
 
       <div className="mt-8 flex-1 h-full">
-        {showInitialCartLoad || guestAwaitingMenu ? (
+        {isLoading ? (
           <CartSkeleton />
         ) : isCartEmpty ? (
           <div className="flex flex-col items-center justify-center gap-4 h-full">

src/app/[name]/(Main)/cart/hooks/useCartPageState.ts

@@ -0,0 +1,142 @@
+"use client";
+
+import { useGetFoods } from "@/app/[name]/(Main)/hooks/useMenuData";
+import { useGetProfile } from "@/app/[name]/(Profile)/profile/hooks/userProfileData";
+import { hasAuthToken } from "@/lib/api/func";
+import { useReceiptStore } from "@/zustand/receiptStore";
+import { useEffect, useMemo, useState } from "react";
+import {
+  cartItemsToFoods,
+  guestCartItemsToFoods,
+  hasCartEntries,
+} from "../lib/cartUtils";
+import { useBulkCart, useGetCartItems } from "./useCartData";
+
+function useReceiptHydrated() {
+  const [hydrated, setHydrated] = useState(() =>
+    useReceiptStore.persist.hasHydrated()
+  );
+
+  useEffect(() => {
+    const unsub = useReceiptStore.persist.onFinishHydration(() =>
+      setHydrated(true)
+    );
+    setHydrated(useReceiptStore.persist.hasHydrated());
+    return unsub;
+  }, []);
+
+  return hydrated;
+}
+
+export function useCartPageState() {
+  const {
+    isSuccess,
+    isPending: profilePending,
+    isFetched: profileFetched,
+  } = useGetProfile();
+  const localItems = useReceiptStore((state) => state.items);
+  const clearLocalCart = useReceiptStore((state) => state.clear);
+  const receiptHydrated = useReceiptHydrated();
+  const [offlineSyncState, setOfflineSyncState] = useState<
+    "idle" | "syncing" | "done"
+  >("idle");
+
+  const {
+    data: cartData,
+    isPending: cartPending,
+    isFetching: cartFetching,
+    isFetched: cartFetched,
+  } = useGetCartItems(isSuccess);
+  const { mutate: mutateBulkCart, isPending: bulkSyncPending } = useBulkCart();
+  const { data: foodsResponse, isPending: foodsPending } = useGetFoods();
+
+  const foods = foodsResponse?.data ?? [];
+  const apiItems = cartData?.data?.items ?? [];
+  const apiTotalItems = cartData?.data?.totalItems ?? 0;
+  const apiHasItems =
+    apiTotalItems > 0 || apiItems.some((item) => item.quantity > 0);
+  const localHasItems = hasCartEntries(localItems);
+
+  useEffect(() => {
+    if (
+      !isSuccess ||
+      !cartFetched ||
+      apiHasItems ||
+      !localHasItems ||
+      offlineSyncState !== "idle" ||
+      bulkSyncPending
+    ) {
+      return;
+    }
+
+    const bulkItems = Object.entries(localItems)
+      .filter(([, detail]) => detail?.quantity && detail.quantity > 0)
+      .map(([foodId, detail]) => ({
+        foodId: String(foodId),
+        quantity: detail.quantity,
+      }));
+
+    if (bulkItems.length === 0) {
+      return;
+    }
+
+    setOfflineSyncState("syncing");
+    mutateBulkCart(
+      { items: bulkItems },
+      {
+        onSuccess: () => clearLocalCart(),
+        onSettled: () => setOfflineSyncState("done"),
+      }
+    );
+  }, [
+    isSuccess,
+    cartFetched,
+    apiHasItems,
+    localHasItems,
+    localItems,
+    bulkSyncPending,
+    offlineSyncState,
+    mutateBulkCart,
+    clearLocalCart,
+  ]);
+
+  const cartFoods = useMemo(() => {
+    if (isSuccess) {
+      return cartItemsToFoods(apiItems, foods);
+    }
+    return guestCartItemsToFoods(localItems, foods);
+  }, [isSuccess, apiItems, localItems, foods]);
+
+  const isAuthResolving =
+    hasAuthToken() && (!profileFetched || profilePending);
+  const isCartResolving = isSuccess && (!cartFetched || cartPending);
+  const isCartRefetchingEmpty =
+    isSuccess && cartFetched && cartFetching && !apiHasItems;
+  const needsOfflineSync =
+    isSuccess && cartFetched && localHasItems && !apiHasItems;
+  const isOfflineSyncing = needsOfflineSync && offlineSyncState !== "done";
+  const isGuestHydrating = !hasAuthToken() && !receiptHydrated;
+  const guestAwaitingMenu =
+    !isSuccess &&
+    localHasItems &&
+    cartFoods.length === 0 &&
+    (foodsPending || foods.length === 0);
+
+  const isLoading =
+    isAuthResolving ||
+    isCartResolving ||
+    isCartRefetchingEmpty ||
+    isOfflineSyncing ||
+    isGuestHydrating ||
+    guestAwaitingMenu;
+
+  const hasItems = isSuccess ? apiHasItems : localHasItems;
+  const isCartEmpty = !isLoading && !hasItems;
+
+  return {
+    isLoading,
+    isCartEmpty,
+    hasItems,
+    cartFoods,
+  };
+}

src/app/[name]/(Main)/components/CategoryScroll.tsx

@@ -19,17 +19,7 @@ const SVG_MASK_STYLE = {
   WebkitMaskPosition: "center",
 } as const;
 
-function CategoryImage({
+function CategoryImage({ src, size, alt, tintWithPrimary = true }: { src: string; size: number; alt: string; tintWithPrimary?: boolean }) {
-  src,
-  size,
-  alt,
-  tintWithPrimary = true,
-}: {
-  src: string;
-  size: number;
-  alt: string;
-  tintWithPrimary?: boolean;
-}) {
   const isSvg = src.endsWith(".svg");
   const shouldUseSvgMask = isSvg && tintWithPrimary;
 
@@ -93,29 +83,15 @@ type Props = {
   className?: string;
 };
 
-const CategoryScroll = ({
+const CategoryScroll = ({ categories, selectedCategory, onSelect, variant = "large", className }: Props) => {
-  categories,
-  selectedCategory,
-  onSelect,
-  variant = "large",
-  className,
-}: Props) => {
   const segment = usePathname()?.split("/").filter(Boolean)[0];
-  const usesColoredSvg =
+  const usesColoredSvg = segment != null && COLORED_SVG_RESTAURANT_SLUGS.has(segment.toLowerCase());
-    segment != null &&
-    COLORED_SVG_RESTAURANT_SLUGS.has(segment.toLowerCase());
   const { renderer: Renderer, imageSize } = variantConfig[variant];
 
   const handleSelect = (categoryId: string) => () => onSelect(categoryId);
 
   return (
-    <HorizontalScrollView
+    <HorizontalScrollView className={clsx("w-full noscrollbar py-2!", variant === "large" && "mt-3!", className)}>
-      className={clsx(
-        "w-full noscrollbar py-4!",
-        variant === "large" && "mt-4!",
-        className,
-      )}
-    >
       {/* <Renderer
         key="all"
         className={clsx(selectedCategory === "0" && "bg-container!")}
@@ -134,20 +110,9 @@ const CategoryScroll = ({
         const isSelected = item.id === selectedCategory;
 
         return (
-          <Renderer
+          <Renderer key={item.id} className={clsx(isSelected && "bg-container!")} onClick={handleSelect(item.id)}>
-            key={item.id}
+            <CategoryImage src={item.avatarUrl || "/assets/images/food-image.png"} size={imageSize} alt="category image" tintWithPrimary={!usesColoredSvg} />
-            className={clsx(isSelected && "bg-container!")}
+            <span className="text-xs text-foreground text-center">{item.title}</span>
-            onClick={handleSelect(item.id)}
-          >
-            <CategoryImage
-              src={item.avatarUrl || "/assets/images/food-image.png"}
-              size={imageSize}
-              alt="category image"
-              tintWithPrimary={!usesColoredSvg}
-            />
-            <span className="text-xs text-foreground text-center">
-              {item.title}
-            </span>
           </Renderer>
         );
       })}

src/app/[name]/(Main)/components/MenuIndex.tsx

@@ -18,22 +18,13 @@ import { useTranslation } from "react-i18next";
 import { useGetCategories, useGetFoods } from "../hooks/useMenuData";
 import type { Category, Food } from "../types/Types";
 
-const sortings = [
+const sortings = ["PopularityDescending", "RateDescending", "PriceAscending", "PriceDescending"] as const;
-  "PopularityDescending",
-  "RateDescending",
-  "PriceAscending",
-  "PriceDescending",
-] as const;
 
 const MenuIndex = () => {
   const { data: foodsData, isLoading: foodsLoading } = useGetFoods();
-  const { data: categoriesData, isLoading: categoriesLoading } =
+  const { data: categoriesData, isLoading: categoriesLoading } = useGetCategories();
-    useGetCategories();
   const foods = useMemo<Food[]>(() => foodsData?.data || [], [foodsData?.data]);
-  const categories = useMemo<Category[]>(
+  const categories = useMemo<Category[]>(() => categoriesData?.data || [], [categoriesData?.data]);
-    () => categoriesData?.data || [],
-    [categoriesData?.data],
-  );
 
   const isLoading = foodsLoading || categoriesLoading;
   const { t: tCommon } = useTranslation("common");
@@ -45,19 +36,11 @@ const MenuIndex = () => {
   const [selectedCategory, setSelectedCategory] = useQueryState("category", {
     defaultValue: "0",
   });
-  const [selectedIngredients, setSelectedIngredients] = useQueryState(
+  const [selectedIngredients, setSelectedIngredients] = useQueryState("ingredients", { defaultValue: "" });
-    "ingredients",
+  const [selectedDeliveryId, setSelectedDeliveryId] = useQueryState("delivery", { defaultValue: "0" });
-    { defaultValue: "" },
+  const smallCategoriesRef: React.RefObject<HTMLDivElement | null> = useRef(null);
-  );
-  const [selectedDeliveryId, setSelectedDeliveryId] = useQueryState(
-    "delivery",
-    { defaultValue: "0" },
-  );
-  const smallCategoriesRef: React.RefObject<HTMLDivElement | null> =
-    useRef(null);
   const wrapperRef: React.RefObject<HTMLDivElement | null> = useRef(null);
-  const [smallCategoriesVisible, setSmallCategoriesVisibility] =
+  const [smallCategoriesVisible, setSmallCategoriesVisibility] = useState(false);
-    useState(false);
   const [isInitialMount, setIsInitialMount] = useState(true);
 
   useEffect(() => {
@@ -68,13 +51,7 @@ const MenuIndex = () => {
       setSorting(null);
       setIsInitialMount(false);
     }
-  }, [
+  }, [isInitialMount, setSearch, setSelectedIngredients, setSelectedDeliveryId, setSorting]);
-    isInitialMount,
-    setSearch,
-    setSelectedIngredients,
-    setSelectedDeliveryId,
-    setSorting,
-  ]);
 
   useEffect(() => {
     if (categoriesData?.data && selectedCategory === "0") {
@@ -92,9 +69,7 @@ const MenuIndex = () => {
 
     const handleScroll = () => {
       if (!smallCategoriesRef.current) return;
-      setSmallCategoriesVisibility(
+      setSmallCategoriesVisibility(scrollContainer.scrollTop >= smallCategoriesRef.current.offsetTop);
-        scrollContainer.scrollTop >= smallCategoriesRef.current.offsetTop,
-      );
     };
 
     scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
@@ -122,9 +97,7 @@ const MenuIndex = () => {
   const sortingIndex = Number(sorting);
   const activeSortingIndex = Number.isNaN(sortingIndex) ? 0 : sortingIndex;
   const activeSortingKey = sortings[activeSortingIndex] ?? sortings[0];
-  const activeSortingLabel = tMenu(
+  const activeSortingLabel = tMenu(`MenuSortingDrawer.Options.${activeSortingKey}`);
-    `MenuSortingDrawer.Options.${activeSortingKey}`,
-  );
 
   const changeSorting = (index: number) => {
     setSorting(() => String(index));
@@ -148,43 +121,26 @@ const MenuIndex = () => {
   const filteredReceiptItems = useMemo(() => {
     if (!foods.length) return [];
     const lowerSearch = search.toLowerCase();
-    const lowerIngredients = selectedIngredients
+    const lowerIngredients = selectedIngredients ? selectedIngredients.toLowerCase() : "";
-      ? selectedIngredients.toLowerCase()
-      : "";
     const selectedCatId = selectedCategory === "0" ? null : selectedCategory;
 
     const filtered = foods.filter((item) => {
       const matchesCategory = !selectedCatId || item.category === selectedCatId;
       const itemName = item.title;
-      const matchesSearch =
+      const matchesSearch = !search || itemName.toLowerCase().includes(lowerSearch);
-        !search || itemName.toLowerCase().includes(lowerSearch);
 
       const matchesIngredients =
         !selectedIngredients ||
         (() => {
-          if (
+          if (item.content && Array.isArray(item.content) && item.content.length > 0) {
-            item.content &&
+            return item.content.some((content: string) => content.toLowerCase().includes(lowerIngredients));
-            Array.isArray(item.content) &&
-            item.content.length > 0
-          ) {
-            return item.content.some((content: string) =>
-              content.toLowerCase().includes(lowerIngredients),
-            );
           }
           return item.desc.toLowerCase().includes(lowerIngredients);
         })();
 
-      const matchesDelivery =
+      const matchesDelivery = selectedDeliveryId === "0" || (selectedDeliveryId === "pickup" && item.pickupServe) || (selectedDeliveryId === "inPlace" && item.inPlaceServe);
-        selectedDeliveryId === "0" ||
-        (selectedDeliveryId === "pickup" && item.pickupServe) ||
-        (selectedDeliveryId === "inPlace" && item.inPlaceServe);
 
-      return (
+      return matchesCategory && matchesSearch && matchesIngredients && matchesDelivery;
-        matchesCategory &&
-        matchesSearch &&
-        matchesIngredients &&
-        matchesDelivery
-      );
     });
 
     const sortingKey = sortings[Number(sorting)] || sortings[0];
@@ -202,65 +158,30 @@ const MenuIndex = () => {
           return 0;
       }
     });
-  }, [
+  }, [selectedCategory, search, selectedIngredients, selectedDeliveryId, foods, sorting]);
-    selectedCategory,
-    search,
-    selectedIngredients,
-    selectedDeliveryId,
-    foods,
-    sorting,
-  ]);
 
   if (isLoading) {
     return <MenuSkeleton />;
   }
 
   return (
-    <div
+    <div className="flex flex-col gap-4 items-center pt-5 mb-8" ref={wrapperRef}>
-      className="flex flex-col gap-4 items-center pt-8 mb-8"
-      ref={wrapperRef}
-    >
       <div className="w-full">
-        <SearchBox
+        <SearchBox value={search} placeholder={tCommon("SearchPlaceholder")} onChange={updateSearch} />
-          value={search}
+        <CategoryScroll categories={categories} selectedCategory={selectedCategory} onSelect={updateCategory} />
-          placeholder={tCommon("SearchPlaceholder")}
-          onChange={updateSearch}
-        />
-        <CategoryScroll
-          categories={categories}
-          selectedCategory={selectedCategory}
-          onSelect={updateCategory}
-        />
       </div>
 
       <section className="w-full">
-        <div
+        <div className="flex flex-wrap gap-2 items-center relative" ref={smallCategoriesRef}>
-          className="flex flex-wrap gap-2 items-center relative"
+          <span className="sm:text-base text-sm font-medium max-w-[113px] sm:max-w-auto">{selectedCategory === "0" ? "" : categories.find((c) => c.id === selectedCategory)?.title || ""}</span>
-          ref={smallCategoriesRef}
-        >
-          <span className="sm:text-base text-sm font-medium max-w-[113px] sm:max-w-auto">
-            {selectedCategory === "0"
-              ? ""
-              : categories.find((c) => c.id === selectedCategory)?.title || ""}
-          </span>
           <div className="flex min-w-[247px] flex-1 gap-2 justify-end items-center">
-            <button
+            <button onClick={toggleFilterModal} className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
-              onClick={toggleFilterModal}
-              className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]"
-            >
               <Candle2 className="stroke-foreground" size={16} />
-              <span className="text-xs leading-5 font-medium whitespace-nowrap">
+              <span className="text-xs leading-5 font-medium whitespace-nowrap">{tMenu("MenuFilterDrawer.Label")}</span>
-                {tMenu("MenuFilterDrawer.Label")}
-              </span>
             </button>
-            <button
+            <button onClick={toggleSortingModal} className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center gap-2">
-              onClick={toggleSortingModal}
-              className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center gap-2"
-            >
               <TextAlignIcon className="text-foreground" />
-              <span className="text-xs leading-5 font-medium whitespace-nowrap">
+              <span className="text-xs leading-5 font-medium whitespace-nowrap">{activeSortingLabel}</span>
-                {activeSortingLabel}
-              </span>
             </button>
           </div>
         </div>
@@ -275,24 +196,14 @@ const MenuIndex = () => {
             opacity: smallCategoriesVisible ? 1 : 0,
           }}
           transition={{ duration: 0.1 }}
-          className={clsx(
+          className={clsx("fixed left-0 z-10 top-0 px-4 pt-16 bg-[#F4F5F9CC] dark:bg-background/70 backdrop-blur-[44px] right-0 xl:pr-72 xl:pt-20", !smallCategoriesVisible && "pointer-events-none")}
-            "fixed left-0 z-10 top-0 px-4 pt-16 bg-[#F4F5F9CC] dark:bg-background/70 backdrop-blur-[44px] right-0 xl:pr-72 xl:pt-20",
-            !smallCategoriesVisible && "pointer-events-none",
-          )}
         >
-          <CategoryScroll
+          <CategoryScroll categories={categories} selectedCategory={selectedCategory} onSelect={updateCategory} variant="small" />
-            categories={categories}
-            selectedCategory={selectedCategory}
-            onSelect={updateCategory}
-            variant="small"
-          />
         </motion.div>
 
         <VerticalScrollView className="mt-5! overflow-y-auto h-full">
           {filteredReceiptItems.length === 0 ? (
-            <div className="text-center text-foreground/60 py-8">
+            <div className="text-center text-foreground/60 py-8">{foodsData ? "غذایی یافت نشد" : "در حال بارگذاری..."}</div>
-              {foodsData ? "غذایی یافت نشد" : "در حال بارگذاری..."}
-            </div>
           ) : (
             filteredReceiptItems.map((food) => (
               <MenuItemRenderer key={food.id}>
@@ -314,14 +225,7 @@ const MenuIndex = () => {
         tMenu={tMenu}
       />
 
-      <MenuSortingDrawer
+      <MenuSortingDrawer visible={sortingModal} onClose={toggleSortingModal} sortings={sortings} activeIndex={activeSortingIndex} onSelect={changeSorting} tMenu={tMenu} />
-        visible={sortingModal}
-        onClose={toggleSortingModal}
-        sortings={sortings}
-        activeIndex={activeSortingIndex}
-        onSelect={changeSorting}
-        tMenu={tMenu}
-      />
     </div>
   );
 };

src/app/[name]/(Main)/components/MenuSkeleton.tsx

@@ -1,12 +1,12 @@
-'use client';
+"use client";
 
-import { Skeleton } from "@/components/ui/skeleton";
-import VerticalScrollView from "@/components/listview/VerticalScrollView";
 import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
+import VerticalScrollView from "@/components/listview/VerticalScrollView";
+import { Skeleton } from "@/components/ui/skeleton";
 
 const MenuSkeleton = () => {
   return (
-    <div className="flex flex-col gap-4 items-center pt-8 mb-8">
+    <div className="flex flex-col gap-4 items-center pt-5 mb-8">
       <div className="w-full">
         <Skeleton className="h-12 w-full rounded-xl mb-4" />
         <div className="flex gap-3 overflow-x-hidden py-4">