fast navigate + cache

2026-06-03 15:08:09 +03:30
parent b9608cd486
commit 194533ec5f
27 changed files with 218 additions and 194 deletions
@@ -0,0 +1,115 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { useParams, useRouter, usePathname } from 'next/navigation';
+import Button from '@/components/button/PrimaryButton';
+import { useGetFoods } from '@/app/[name]/(Main)/hooks/useMenuData';
+import { useCart } from '../hook/useCart';
+import { useTranslation } from 'react-i18next';
+import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData';
+import { useGetCartItems } from '../hooks/useCartData';
+import { useCartStore } from '../store/Store';
+import { guestCartItemsToFoods } from '../lib/cartUtils';
+
+interface CartSummaryProps {
+  isPremium: boolean;
+  hasItems: boolean;
+}
+
+const CartSummary = ({ isPremium, hasItems }: CartSummaryProps) => {
+  const params = useParams();
+  const router = useRouter();
+  const pathname = usePathname();
+  const name = params.name as string;
+  const { isSuccess } = useGetProfile();
+  const { data: foodsResponse } = useGetFoods();
+  const { items } = useCart();
+  const { data: cartData } = useGetCartItems(isSuccess);
+  const { t } = useTranslation('parallels', { keyPrefix: 'Cart' });
+  const { description, setDescription } = useCartStore();
+
+  const totalPrice = React.useMemo(() => {
+    if (isSuccess && cartData?.data?.total !== undefined) {
+      return cartData.data.total;
+    }
+
+    const foods = foodsResponse?.data ?? [];
+    const cartFoods = guestCartItemsToFoods(items, foods);
+    return cartFoods.reduce((sum, food) => {
+      const qty = items[String(food.id)]?.quantity ?? 0;
+      const basePrice = food.price ?? 0;
+      const discount = food.discount ?? 0;
+      const priceAfterDiscount = basePrice * (1 - discount / 100);
+      return sum + priceAfterDiscount * qty;
+    }, 0);
+  }, [isSuccess, cartData?.data?.total, foodsResponse?.data, items]);
+
+  const formatPrice = React.useCallback(
+    (value: number) => value.toLocaleString('fa-IR'),
+    []
+  );
+
+  if (!hasItems) {
+    return null;
+  }
+
+  return (
+    <>
+      {isPremium && (
+        <div className='mt-2 mb-4'>
+          <div className='relative'>
+            <h3 className='text-sm'>{t('InputDescription.Label')}</h3>
+            <textarea
+              className='w-full px-4 py-2.5 mt-4 text-sm2 leading-6 outline-0 border border-border rounded-normal resize-none focus:ring-0'
+              placeholder={t('InputDescription.Placeholder')}
+              id='description'
+              name='description'
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            ></textarea>
+            <span className='absolute top-4 right-2 px-2 bg-background text-foreground text-xs'></span>
+          </div>
+        </div>
+      )}
+
+      <div className='fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-container border-t border-border p-4 w-full'>
+        <div className='flex justify-between items-center gap-4'>
+          <div className='flex flex-col'>
+            <div className='text-xs text-gray-400 dark:text-disabled-text'>{t('PayableAmountLabel')}</div>
+            {isPremium && (
+              <div className='text-sm mt-2 font-semibold dark:text-foreground'>
+                {formatPrice(totalPrice)} تومان
+              </div>
+            )}
+          </div>
+
+          {isPremium && (
+            <Link
+              href={'order/checkout/0'}
+              onClick={(event) => {
+                if (!isSuccess) {
+                  event.preventDefault();
+                  const redirectUrl = encodeURIComponent(pathname);
+                  router.replace(`/${name}/auth?redirect=${redirectUrl}`);
+                  return;
+                }
+              }}
+            >
+              <Button className='w-fit! px-10 dark:bg-white dark:text-black! dark:hover:bg-gray-100'>
+                {t('ButtonCheckout')}
+              </Button>
+            </Link>
+          )}
+          {!isPremium && (
+            <div className='text-sm mt-2 font-semibold dark:text-foreground'>
+              {formatPrice(totalPrice)} تومان
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default CartSummary;