hamid zarghami
248 lines
11 KiB
TypeScript
248 lines
11 KiB
TypeScript
'use client'
|
||
|
||
import MinusIcon from '@/components/icons/MinusIcon'
|
||
import PlusIcon from '@/components/icons/PlusIcon'
|
||
import { ef } from '@/lib/helpers/utfNumbers'
|
||
import { useCart } from '@/app/[name]/(Dialogs)/cart/hook/useCart'
|
||
import { motion } from 'framer-motion'
|
||
import { ArrowLeft, Clock, Cup, Heart, TruckTick } from 'iconsax-react'
|
||
import Image from 'next/image'
|
||
import { useParams, useRouter } from 'next/navigation'
|
||
import React, { useEffect, useMemo, useState } from 'react'
|
||
import { useGetFood, useToggleFavorite } from './hooks/useFoodData'
|
||
import { useGetAbout } from '../about/hooks/useAboutData'
|
||
import { useGetProfile } from '../../(Profile)/profile/hooks/userProfileData'
|
||
import { toast } from '@/components/Toast'
|
||
import { getToken } from '@/lib/api/func'
|
||
|
||
type Props = object
|
||
|
||
function FoodPage({ }: Props) {
|
||
|
||
const { id } = useParams();
|
||
const router = useRouter();
|
||
const { isSuccess } = useGetProfile();
|
||
const { data: food, isLoading } = useGetFood(id as string);
|
||
const { data: about } = useGetAbout();
|
||
const { items, addToCart, removeFromCart } = useCart();
|
||
const [isFavorite, setIsFavorite] = useState<boolean>(false);
|
||
const { mutate: toggleFavorite } = useToggleFavorite();
|
||
|
||
const foodId = food?.data?.id || id as string;
|
||
const quantity = useMemo(() => {
|
||
const item = items?.[foodId];
|
||
if (item && typeof item === 'object' && 'quantity' in item) {
|
||
return item.quantity || 0;
|
||
}
|
||
return 0;
|
||
}, [items, foodId]);
|
||
|
||
const handleAddToCart = () => {
|
||
if (foodId) {
|
||
addToCart(foodId);
|
||
}
|
||
};
|
||
|
||
const handleRemoveFromCart = () => {
|
||
if (foodId) {
|
||
removeFromCart(foodId);
|
||
}
|
||
};
|
||
|
||
const handleToggleFavorite = async () => {
|
||
if (!foodId) return;
|
||
|
||
const token = await getToken();
|
||
if (!token || !isSuccess) {
|
||
toast('ابتدا لاگین کنید', 'error');
|
||
return;
|
||
}
|
||
|
||
// بهروزرسانی خوشبینانه: تغییر state قبل از ارسال درخواست
|
||
const previousFavorite = isFavorite;
|
||
setIsFavorite(!isFavorite);
|
||
|
||
toggleFavorite(foodId, {
|
||
onSuccess: () => {
|
||
// تایید تغییر در صورت موفقیت
|
||
},
|
||
onError: () => {
|
||
// بازگرداندن به حالت قبلی در صورت خطا
|
||
setIsFavorite(previousFavorite);
|
||
toast('خطا در تغییر وضعیت علاقهمندی', 'error');
|
||
},
|
||
});
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (food?.data?.isFavorite) {
|
||
setIsFavorite(true);
|
||
} else {
|
||
setIsFavorite(false);
|
||
}
|
||
}, [food?.data?.isFavorite]);
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<div className='flex items-center justify-center min-h-[400px]'>
|
||
<p className='text-disabled-text'>در حال بارگذاری...</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!food?.data) {
|
||
return (
|
||
<div className='flex items-center justify-center min-h-[400px]'>
|
||
<p className='text-disabled-text'>غذا یافت نشد</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const foodData = food.data;
|
||
const foodName = foodData.title || foodData.name || foodData.foodName || '';
|
||
const foodImage = typeof foodData.image === 'string'
|
||
? foodData.image
|
||
: Array.isArray(foodData.images) && foodData.images.length > 0
|
||
? typeof foodData.images[0] === 'string'
|
||
? foodData.images[0]
|
||
: typeof foodData.images[0] === 'object' && foodData.images[0] !== null && 'url' in foodData.images[0]
|
||
? (foodData.images[0] as { url: string }).url
|
||
: '/assets/images/food-preview-hq.png'
|
||
: '/assets/images/food-preview-hq.png';
|
||
const categoryName = foodData.category?.title;
|
||
const prepareTime = foodData.prepareTime || 0;
|
||
const price = foodData.price || 0;
|
||
const content = Array.isArray(foodData.content)
|
||
? foodData.content.join('، ')
|
||
: foodData.content || foodData.desc || '';
|
||
|
||
return (
|
||
<div className='lg:absolute lg:top-1/2 not-lg:max-w-lg not-lg:place-self-center lg:-translate-y-1/2 xl:right-[285px] lg:left-5 lg:right-4 lg:bottom-4 not-lg:w-full not-md:-translate-y-2 pt-6 flex flex-col lg:grid grid-cols-2'>
|
||
<div className="relative w-full h-full not-lg:bg-container rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1">
|
||
<Image
|
||
className='w-full object-cover h-full'
|
||
src={foodImage}
|
||
alt={foodName}
|
||
height={100}
|
||
width={100}
|
||
unoptimized
|
||
priority
|
||
/>
|
||
<div className="absolute top-4 left-0 pe-5.5 ps-7 w-full inline-flex justify-between items-center">
|
||
<div className="bg-container whitespace-nowrap rounded-[34px] py-1.5 px-4 w-min text-xs text-disabled2 dark:text-disabled-text font-bold">
|
||
{categoryName || '-'}
|
||
</div>
|
||
<button onClick={() => router.back()} className='p-2 rounded-full bg-container/40'>
|
||
<ArrowLeft size={18} className='stroke-primary dark:stroke-foreground' />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:justify-center bg-container w-full rounded-3xl overflow-hidden not-lg:-translate-y-6 lg:rounded-l-none">
|
||
<div className="w-full inline-flex justify-between items-center">
|
||
<h5 className="text-base font-bold">
|
||
{foodName}
|
||
</h5>
|
||
<button
|
||
onClick={handleToggleFavorite}
|
||
className='p-2 bg-[#EAECF0] dark:bg-neutral-600 rounded-lg'
|
||
>
|
||
<Heart
|
||
variant={isFavorite ? 'Bold' : 'Outline'}
|
||
size={24}
|
||
color='currentColor'
|
||
className={isFavorite ? 'fill-primary dark:fill-foreground' : ''}
|
||
/>
|
||
</button>
|
||
</div>
|
||
|
||
<div className="mt-4 text-xs">
|
||
<div className='flex items-center gap-1'>
|
||
<Clock size={14} className='stroke-disabled-text' />
|
||
<span className='text-disabled-text'>
|
||
زمان پخت و آماده سازی: {prepareTime > 0 ? `${ef(String(prepareTime))} دقیقه` : '-'}
|
||
</span>
|
||
</div>
|
||
<div className='flex items-center gap-2 mt-2'>
|
||
<Cup size={14} className='stroke-disabled-text' />
|
||
<span className='text-disabled-text flex gap-1'>
|
||
{about?.data?.score?.purchaseScore && about?.data?.score?.purchaseAmount ? (
|
||
<>
|
||
<div>
|
||
{ef(
|
||
Math.round(
|
||
foodData?.price *
|
||
(Number(about.data.score.purchaseScore) / Number(about.data.score.purchaseAmount))
|
||
).toLocaleString('en-US')
|
||
)}
|
||
</div>
|
||
<span>امتیاز برای هر بار خرید</span>
|
||
</>
|
||
) : (
|
||
<span>-</span>
|
||
)}
|
||
</span>
|
||
</div>
|
||
<div className='flex items-center gap-2 mt-2'>
|
||
<TruckTick size={14} className='stroke-disabled-text' />
|
||
<span className='text-disabled-text'>
|
||
{foodData.pickupServe ? 'ارسال با پیک' : '-'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-4 text-xs">
|
||
<p>محتویات:</p>
|
||
<p>{content || '-'}</p>
|
||
</div>
|
||
|
||
<div className='mt-12 flex justify-between items-center'>
|
||
<span dir='ltr'>{ef(price.toLocaleString('en-US'))} T</span>
|
||
<motion.div
|
||
whileTap={{ scale: 1.05 }}
|
||
className="bg-background active:drop-shadow-xs max-w-[115px] rounded-md w-full h-8 inline-flex p-1 justify-between items-center gap-2 relative overflow-hidden"
|
||
>
|
||
{quantity <= 0 ? (
|
||
<button
|
||
onClick={handleAddToCart}
|
||
className="inline-flex w-full justify-center items-center gap-2"
|
||
>
|
||
<PlusIcon />
|
||
<div className="text-sm2 pt-0.5 font-normal text-foreground">
|
||
افزودن
|
||
</div>
|
||
</button>
|
||
) : (
|
||
<>
|
||
<button
|
||
onClick={handleAddToCart}
|
||
className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors"
|
||
>
|
||
<PlusIcon className="text-foreground" />
|
||
</button>
|
||
<motion.div
|
||
key={quantity}
|
||
initial={{ scale: 1 }}
|
||
animate={{ scale: [1.2, 0.95, 1] }}
|
||
transition={{ duration: 0.3 }}
|
||
className="text-sm2 pt-0.5 font-semibold"
|
||
>
|
||
{quantity}
|
||
</motion.div>
|
||
<button
|
||
onClick={handleRemoveFromCart}
|
||
className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors"
|
||
>
|
||
<MinusIcon className="text-foreground" />
|
||
</button>
|
||
</>
|
||
)}
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default FoodPage
|