fix empty cart

space fit
2026-06-15 15:46:21 +03:30 · 2026-06-15 15:08:55 +03:30
5 changed files with 188 additions and 209 deletions
@@ -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 {
-  cartItemsToFoods,
-  guestCartItemsToFoods,
-  hasCartEntries,
-} from "./lib/cartUtils";
+import { useCartPageState } from "./hooks/useCartPageState";

 const CartPage = () => {
  const { t } = useTranslation("parallels", { keyPrefix: "Cart" });
  const router = useRouter();
-  const { isSuccess } = useGetProfile();
-  const { clearCart, items } = useCart();
-  const { data: cartData, isPending: cartPending } = useGetCartItems(isSuccess);
-  const { data: foodsResponse } = useGetFoods();
+  const { clearCart } = useCart();
  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">
@@ -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,
+  };
+}
@@ -19,17 +19,7 @@ const SVG_MASK_STYLE = {
  WebkitMaskPosition: "center",
 } as const;

-function CategoryImage({
-  src,
-  size,
-  alt,
-  tintWithPrimary = true,
-}: {
-  src: string;
-  size: number;
-  alt: string;
-  tintWithPrimary?: boolean;
-}) {
+function CategoryImage({ 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 = ({
-  categories,
-  selectedCategory,
-  onSelect,
-  variant = "large",
-  className,
-}: Props) => {
+const CategoryScroll = ({ categories, selectedCategory, onSelect, variant = "large", className }: Props) => {
  const segment = usePathname()?.split("/").filter(Boolean)[0];
-  const usesColoredSvg =
-    segment != null &&
-    COLORED_SVG_RESTAURANT_SLUGS.has(segment.toLowerCase());
+  const usesColoredSvg = segment != null && COLORED_SVG_RESTAURANT_SLUGS.has(segment.toLowerCase());
  const { renderer: Renderer, imageSize } = variantConfig[variant];

  const handleSelect = (categoryId: string) => () => onSelect(categoryId);

  return (
-    <HorizontalScrollView
-      className={clsx(
-        "w-full noscrollbar py-4!",
-        variant === "large" && "mt-4!",
-        className,
-      )}
-    >
+    <HorizontalScrollView className={clsx("w-full noscrollbar py-2!", variant === "large" && "mt-3!", className)}>
      {/* <Renderer
        key="all"
        className={clsx(selectedCategory === "0" && "bg-container!")}
@@ -134,20 +110,9 @@ const CategoryScroll = ({
        const isSelected = item.id === selectedCategory;

        return (
-          <Renderer
-            key={item.id}
-            className={clsx(isSelected && "bg-container!")}
-            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 key={item.id} className={clsx(isSelected && "bg-container!")} 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>
        );
      })}
@@ -18,22 +18,13 @@ import { useTranslation } from "react-i18next";
 import { useGetCategories, useGetFoods } from "../hooks/useMenuData";
 import type { Category, Food } from "../types/Types";

-const sortings = [
-  "PopularityDescending",
-  "RateDescending",
-  "PriceAscending",
-  "PriceDescending",
-] as const;
+const sortings = ["PopularityDescending", "RateDescending", "PriceAscending", "PriceDescending"] as const;

 const MenuIndex = () => {
  const { data: foodsData, isLoading: foodsLoading } = useGetFoods();
-  const { data: categoriesData, isLoading: categoriesLoading } =
-    useGetCategories();
+  const { data: categoriesData, isLoading: categoriesLoading } = useGetCategories();
  const foods = useMemo<Food[]>(() => foodsData?.data || [], [foodsData?.data]);
-  const categories = useMemo<Category[]>(
-    () => categoriesData?.data || [],
-    [categoriesData?.data],
-  );
+  const categories = useMemo<Category[]>(() => 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(
-    "ingredients",
-    { defaultValue: "" },
-  );
-  const [selectedDeliveryId, setSelectedDeliveryId] = useQueryState(
-    "delivery",
-    { defaultValue: "0" },
-  );
-  const smallCategoriesRef: React.RefObject<HTMLDivElement | null> =
-    useRef(null);
+  const [selectedIngredients, setSelectedIngredients] = useQueryState("ingredients", { defaultValue: "" });
+  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] =
-    useState(false);
+  const [smallCategoriesVisible, setSmallCategoriesVisibility] = 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(
-        scrollContainer.scrollTop >= smallCategoriesRef.current.offsetTop,
-      );
+      setSmallCategoriesVisibility(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(
-    `MenuSortingDrawer.Options.${activeSortingKey}`,
-  );
+  const activeSortingLabel = tMenu(`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
-      ? selectedIngredients.toLowerCase()
-      : "";
+    const lowerIngredients = selectedIngredients ? 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 =
-        !search || itemName.toLowerCase().includes(lowerSearch);
+      const matchesSearch = !search || itemName.toLowerCase().includes(lowerSearch);

      const matchesIngredients =
        !selectedIngredients ||
        (() => {
-          if (
-            item.content &&
-            Array.isArray(item.content) &&
-            item.content.length > 0
-          ) {
-            return item.content.some((content: string) =>
-              content.toLowerCase().includes(lowerIngredients),
-            );
+          if (item.content && 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 =
-        selectedDeliveryId === "0" ||
-        (selectedDeliveryId === "pickup" && item.pickupServe) ||
-        (selectedDeliveryId === "inPlace" && item.inPlaceServe);
+      const matchesDelivery = selectedDeliveryId === "0" || (selectedDeliveryId === "pickup" && item.pickupServe) || (selectedDeliveryId === "inPlace" && item.inPlaceServe);

-      return (
-        matchesCategory &&
-        matchesSearch &&
-        matchesIngredients &&
-        matchesDelivery
-      );
+      return 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
-      className="flex flex-col gap-4 items-center pt-8 mb-8"
-      ref={wrapperRef}
-    >
+    <div className="flex flex-col gap-4 items-center pt-5 mb-8" ref={wrapperRef}>
      <div className="w-full">
-        <SearchBox
-          value={search}
-          placeholder={tCommon("SearchPlaceholder")}
-          onChange={updateSearch}
-        />
-        <CategoryScroll
-          categories={categories}
-          selectedCategory={selectedCategory}
-          onSelect={updateCategory}
-        />
+        <SearchBox value={search} placeholder={tCommon("SearchPlaceholder")} onChange={updateSearch} />
+        <CategoryScroll categories={categories} selectedCategory={selectedCategory} onSelect={updateCategory} />
      </div>

      <section className="w-full">
-        <div
-          className="flex flex-wrap gap-2 items-center relative"
-          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 flex-wrap gap-2 items-center relative" 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
-              onClick={toggleFilterModal}
-              className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]"
-            >
+            <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]">
              <Candle2 className="stroke-foreground" size={16} />
-              <span className="text-xs leading-5 font-medium whitespace-nowrap">
-                {tMenu("MenuFilterDrawer.Label")}
-              </span>
+              <span className="text-xs leading-5 font-medium whitespace-nowrap">{tMenu("MenuFilterDrawer.Label")}</span>
            </button>
-            <button
-              onClick={toggleSortingModal}
-              className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center gap-2"
-            >
+            <button 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">
-                {activeSortingLabel}
-              </span>
+              <span className="text-xs leading-5 font-medium whitespace-nowrap">{activeSortingLabel}</span>
            </button>
          </div>
        </div>
@@ -275,24 +196,14 @@ const MenuIndex = () => {
            opacity: smallCategoriesVisible ? 1 : 0,
          }}
          transition={{ duration: 0.1 }}
-          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",
-          )}
+          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")}
        >
-          <CategoryScroll
-            categories={categories}
-            selectedCategory={selectedCategory}
-            onSelect={updateCategory}
-            variant="small"
-          />
+          <CategoryScroll 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">
-              {foodsData ? "غذایی یافت نشد" : "در حال بارگذاری..."}
-            </div>
+            <div className="text-center text-foreground/60 py-8">{foodsData ? "غذایی یافت نشد" : "در حال بارگذاری..."}</div>
          ) : (
            filteredReceiptItems.map((food) => (
              <MenuItemRenderer key={food.id}>
@@ -314,14 +225,7 @@ const MenuIndex = () => {
        tMenu={tMenu}
      />

-      <MenuSortingDrawer
-        visible={sortingModal}
-        onClose={toggleSortingModal}
-        sortings={sortings}
-        activeIndex={activeSortingIndex}
-        onSelect={changeSorting}
-        tMenu={tMenu}
-      />
+      <MenuSortingDrawer visible={sortingModal} onClose={toggleSortingModal} sortings={sortings} activeIndex={activeSortingIndex} onSelect={changeSorting} tMenu={tMenu} />
    </div>
  );
 };
@@ -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">
Author	SHA1	Message	Date
hamid zarghami	59e446b66e	fix empty cart Build and Deploy Docker Images / build_and_deploy (push) Has been cancelled Details	2026-06-15 15:46:21 +03:30
hamid zarghami	6f729938c0	space fit	2026-06-15 15:08:55 +03:30