empty data

src/app/[name]/(Dialogs)/cart/page.tsx

@@ -4,22 +4,37 @@ import React from 'react';
 import { useRouter } from 'next/navigation';
 import { useTranslation } from 'react-i18next';
 import { ArrowLeft, Trash } from 'iconsax-react';
+import Image from 'next/image';
 import { useCart } from './hook/useCart';
-import CartItemsList from './components/CartItemsList';
 import CartSummary from './components/CartSummary';
 import Prompt from '@/components/utils/Prompt';
 import { useGetFoods } from '@/app/[name]/(Main)/hooks/useMenuData';
-import { CartSummarySkeleton } from './components/CartSkeleton';
+import VerticalScrollView from '@/components/listview/VerticalScrollView';
+import MenuItem from '@/components/listview/MenuItem';
+import MenuItemRenderer from '@/components/listview/MenuItemRenderer';
+import type { Food } from '@/app/[name]/(Main)/types/Types';
 
 const CartIndex = () => {
   const { t } = useTranslation('parallels', { keyPrefix: 'Cart' });
   const router = useRouter();
-  const { clearCart } = useCart();
+  const { clearCart, items } = useCart();
   const [showClearConfirm, setShowClearConfirm] = React.useState(false);
   const { data: foodsResponse, isFetching } = useGetFoods();
   const foods = React.useMemo(() => foodsResponse?.data ?? [], [foodsResponse?.data]);
   const isLoading = isFetching && !foods.length;
 
+  const cartFoods = React.useMemo(() => {
+    if (!foods.length) return [];
+    return Object.entries(items)
+      .filter(([, detail]) => detail?.quantity && detail.quantity > 0)
+      .map(([id]) =>
+        foods.find((foodItem) => String(foodItem.id) === String(id))
+      )
+      .filter((food): food is Food => Boolean(food));
+  }, [foods, items]);
+
+  const isCartEmpty = cartFoods.length === 0;
+
   const handleClearCart = (e: React.MouseEvent) => {
     e?.preventDefault();
     e?.stopPropagation();
@@ -34,14 +49,18 @@ const CartIndex = () => {
   };
 
   return (
-    <div className='bg-inherit flex flex-col h-full'>
-      <div className='grid grid-cols-3 items-center py-4'>
-        <Trash
-          className='cursor-pointer place-self-start'
-          size='24'
-          color='currentColor'
-          onClick={() => setShowClearConfirm(true)}
-        />
+    <div className='overflow-y-auto h-full noscrollbar flex flex-col'>
+      <div className='grid grid-cols-3 items-center'>
+        {isCartEmpty ? (
+          <span></span>
+        ) : (
+          <Trash
+            className='cursor-pointer place-self-start'
+            size='24'
+            color='currentColor'
+            onClick={() => setShowClearConfirm(true)}
+          />
+        )}
         <h1 className='text-sm2 place-self-center font-medium'>{t('Heading')}</h1>
         <ArrowLeft
           className='cursor-pointer place-self-end'
@@ -51,9 +70,40 @@ const CartIndex = () => {
         />
       </div>
 
-      <div className='flex overflow-y-auto noscrollbar flex-col h-full pt-4 gap-4 pb-24' dir='rtl'>
-        <CartItemsList />
-        {isLoading ? <CartSummarySkeleton /> : <CartSummary />}
+      <div className="mt-8 flex-1 h-full">
+        {isLoading ? (
+          <div className='flex flex-col items-center justify-center gap-2 py-12 text-sm2 text-muted-foreground'>
+            <span className='h-4 w-4 animate-spin rounded-full border border-dashed border-foreground border-t-transparent'></span>
+            <p>در حال دریافت سبد خرید...</p>
+          </div>
+        ) : isCartEmpty ? (
+          <div className='flex flex-col items-center justify-center gap-4 h-full'>
+            <Image
+              src='/assets/images/cart.png'
+              alt='cart'
+              width={120}
+              height={120}
+              className='object-contain'
+            />
+            <div className='flex flex-col items-center gap-2 text-sm2 text-muted-foreground'>
+              <p>{t('EmptyStateTitle', { defaultValue: 'سبد خرید شما خالی است' })}</p>
+              <p className='text-xs'>
+                {t('EmptyStateDescription', {
+                  defaultValue: 'برای افزودن غذا، به منوی رستوران برگردید.',
+                })}
+              </p>
+            </div>
+          </div>
+        ) : (
+          <VerticalScrollView className="overflow-y-auto h-full pb-24">
+            {cartFoods.map((food) => (
+              <MenuItemRenderer key={food.id}>
+                <MenuItem food={food} />
+              </MenuItemRenderer>
+            ))}
+            <CartSummary />
+          </VerticalScrollView>
+        )}
       </div>
 
       <div className={showClearConfirm ? 'fixed inset-0 z-1001' : 'pointer-events-none fixed inset-0 z-1001'}>