Mahyar Khanbolooki
371 lines
13 KiB
TypeScript
371 lines
13 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import SearchBox from "@/components/input/SearchBox";
|
|
import CategoryItemRenderer from "@/components/listview/CategoryItemRenderer";
|
|
import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
|
|
import Image from "next/image";
|
|
import EqualizerIcon from "@/components/icons/EqualizerIcon";
|
|
import TextAlignIcon from "@/components/icons/TextAlignIcon";
|
|
import VerticalScrollView from "@/components/listview/VerticalScrollView";
|
|
import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
|
|
import React from "react";
|
|
import MenuItem from "@/components/listview/MenuItem";
|
|
import Button from "@/components/button/PrimaryButton";
|
|
import AnimatedBottomSheet from "@/components/bottomsheet/AnimatedBottomSheet";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { TicketPercentIcon } from "lucide-react";
|
|
import { MedalStar } from 'iconsax-react'
|
|
import { useQueryState } from 'next-usequerystate'
|
|
import clsx from "clsx";
|
|
import CategorySmallItemRenderer from "@/components/listview/CategorySmallItemRenderer";
|
|
import { motion } from "framer-motion";
|
|
import { useTranslation } from "react-i18next";
|
|
import ComboBox, { ComboboxOption } from "@/components/combobox/Combobox";
|
|
|
|
const categories = new Array(13).fill({ title: "خوراک", icon: "" });
|
|
|
|
const foods = [
|
|
{
|
|
id: 1,
|
|
category: 0,
|
|
price: "69.000",
|
|
name: "کباب چوبی ژیوان )سیخ چوبی(",
|
|
contains: "فیله گوساله / سس سفید / قارچ و سیب زمینی/ پنیر پارمزان"
|
|
},
|
|
{
|
|
id: 2,
|
|
category: 1,
|
|
price: "49.000",
|
|
name: "برگر گوشت گوساله",
|
|
contains: "گوشت گوساله / پنیر چدار / کاهو / گوجه"
|
|
},
|
|
{
|
|
id: 3,
|
|
category: 2,
|
|
price: "29.000",
|
|
name: "ساندویچ مرغ",
|
|
contains: "مرغ / کاهو / گوجه / سس مایونز"
|
|
},
|
|
{
|
|
id: 4,
|
|
category: 0,
|
|
price: "89.000",
|
|
name: "کباب ماهی",
|
|
contains: "ماهی / سس لیمو / قارچ و سیب زمینی"
|
|
},
|
|
{
|
|
id: 5,
|
|
category: 1,
|
|
price: "39.000",
|
|
name: "سالاد فصل",
|
|
contains: "کاهو / گوجه / خیار / پنیر فتا"
|
|
},
|
|
{
|
|
id: 6,
|
|
category: 3,
|
|
price: "59.000",
|
|
name: "پاستا گوشت",
|
|
contains: "گوشت گوساله / پاستا / سس گوجه"
|
|
},
|
|
{
|
|
id: 7,
|
|
category: 2,
|
|
price: "49.000",
|
|
name: "ساندویچ تن ماهی",
|
|
contains: "تن ماهی / کاهو / گوجه / سس مایونز"
|
|
},
|
|
{
|
|
id: 8,
|
|
category: 0,
|
|
price: "79.000",
|
|
name: "کباب گوشت گوسفندی",
|
|
contains: "گوشت گوسفندی / سس سفید / قارچ و سیب زمینی"
|
|
},
|
|
{
|
|
id: 9,
|
|
category: 1,
|
|
price: "29.000",
|
|
name: "برگر مرغ",
|
|
contains: "مرغ / پنیر چدار / کاهو / گوجه"
|
|
},
|
|
{
|
|
id: 10,
|
|
category: 3,
|
|
price: "69.000",
|
|
name: "سالاد میگو",
|
|
contains: "میگو / کاهو / گوجه / خیار"
|
|
},
|
|
{
|
|
id: 11,
|
|
category: 2,
|
|
price: "39.000",
|
|
name: "ساندویچ شاورما",
|
|
contains: "مرغ / کاهو / گوجه / سس تارتار"
|
|
},
|
|
{
|
|
id: 12,
|
|
category: 0,
|
|
price: "99.000",
|
|
name: "کباب گوشت بوقلمون",
|
|
contains: "گوشت بوقلمون / سس سفید / قارچ و سیب زمینی"
|
|
},
|
|
{
|
|
id: 13,
|
|
category: 1,
|
|
price: "59.000",
|
|
name: "برگر ماهی",
|
|
contains: "ماهی / پنیر چدار / کاهو / گوجه"
|
|
},
|
|
{
|
|
id: 14,
|
|
category: 3,
|
|
price: "49.000",
|
|
name: "سالاد مرغ",
|
|
contains: "مرغ / کاهو / گوجه / خیار"
|
|
}
|
|
];
|
|
|
|
const sortings = [
|
|
"PopularityDescending",
|
|
"DateDescending",
|
|
"PriceAscending",
|
|
"RateDescending",
|
|
"PriceDescending"
|
|
]
|
|
|
|
const MenuIndex = () => {
|
|
const { t: tCommon } = useTranslation('common');
|
|
const { t: tMenu } = useTranslation('menu', {
|
|
keyPrefix: "Menu"
|
|
});
|
|
const contents: Array<ComboboxOption> = [
|
|
{ id: '0', title: tMenu('MenuFilterDrawer.SelectContent.Options.Normal'), label: '' },
|
|
{ id: '1', title: tMenu('MenuFilterDrawer.SelectContent.Options.Vegan'), label: '' },
|
|
]
|
|
|
|
const shippings: Array<ComboboxOption> = [
|
|
{ id: '0', title: tMenu('MenuFilterDrawer.SelectDelivery.Options.Courier'), label: '' },
|
|
]
|
|
|
|
const [filterModal, setFilterModal] = useState(false);
|
|
const [sortingModal, setSortingModal] = useState(false);
|
|
const [, setSorting] = useQueryState('sortBy', { defaultValue: '0' });
|
|
const [search, setSearch] = useQueryState("q", { defaultValue: '' });
|
|
const [selectedCategory, setSelectedCategory] = useQueryState('category', { defaultValue: '0' });
|
|
const [selectedIngredients, setSelectedIngredients] = useQueryState('ingredients', { defaultValue: '0' });
|
|
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 onScroll = useCallback(() => {
|
|
if (!wrapperRef?.current?.parentElement?.parentElement?.scrollTop || !smallCategoriesRef.current?.offsetTop) return;
|
|
|
|
if (wrapperRef.current.parentElement?.parentElement.scrollTop >= smallCategoriesRef.current.offsetTop) {
|
|
setSmallCategoriesVisibility(true);
|
|
} else {
|
|
setSmallCategoriesVisibility(false);
|
|
}
|
|
}, [wrapperRef, smallCategoriesRef]);
|
|
|
|
useEffect(() => {
|
|
if (!wrapperRef.current) return;
|
|
|
|
const parent = wrapperRef.current.parentElement?.parentElement;
|
|
if (!parent) return;
|
|
|
|
parent.addEventListener('scroll', onScroll);
|
|
|
|
return () => {
|
|
parent.removeEventListener('scroll', onScroll);
|
|
}
|
|
}, [onScroll]);
|
|
|
|
|
|
const updateSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setSearch(e.target.value);
|
|
}, [setSearch]);
|
|
|
|
const updateCategory = useCallback((id: number) => {
|
|
setSelectedCategory(String(id));
|
|
}, [setSelectedCategory]);
|
|
|
|
const toggleFilterModal = useCallback(() => {
|
|
setFilterModal((state) => !state);
|
|
}, []);
|
|
|
|
const toggleSortingModal = useCallback(() => {
|
|
setSortingModal((state) => !state);
|
|
}, []);
|
|
|
|
const changeSorting = (index: number) => {
|
|
setSorting(() => String(index));
|
|
}
|
|
|
|
const changeSelectedIngredients = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
|
|
setSelectedIngredients(() => contents[index]?.id || contents[0].id);
|
|
}
|
|
|
|
const changeSelectedDelivery = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
|
|
setSelectedDeliveryId(() => contents[index]?.id || contents[0].id);
|
|
}
|
|
|
|
const filteredReceiptItems = useMemo(() => {
|
|
const lowerSearch = search.toLowerCase();
|
|
return foods.filter(
|
|
(item) =>
|
|
item.category === +selectedCategory &&
|
|
item.name.toLowerCase().includes(lowerSearch)
|
|
);
|
|
}, [selectedCategory, search]);
|
|
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 items-center pt-8 mb-8" ref={wrapperRef}>
|
|
<div className="w-full">
|
|
<SearchBox value={search} placeholder={tCommon('SearchPlaceholder')} onChange={updateSearch} />
|
|
<HorizontalScrollView className="w-full noscrollbar mt-4! py-4!">
|
|
{categories.map((item, index) => (
|
|
<CategoryItemRenderer
|
|
key={index}
|
|
className={clsx(
|
|
index === +selectedCategory && "bg-white!",
|
|
)}
|
|
onClick={() => updateCategory(index)}
|
|
>
|
|
<Image
|
|
priority
|
|
src="/assets/images/food-image.png"
|
|
width={32}
|
|
height={32}
|
|
alt="category image"
|
|
/>
|
|
<span className="text-xs text-black">{item.title}</span>
|
|
</CategoryItemRenderer>
|
|
))}
|
|
</HorizontalScrollView>
|
|
</div>
|
|
|
|
<section className="w-full">
|
|
<div className="flex justify-between items-center relative" ref={smallCategoriesRef} >
|
|
<span className="text-base font-medium">
|
|
{categories[+selectedCategory]?.title}
|
|
</span>
|
|
<div className="inline-flex gap-2 justify-around items-center">
|
|
<button onClick={toggleFilterModal} className="rounded-xl h-8 bg-white ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
|
|
<EqualizerIcon />
|
|
<span className="text-xs leading-5 font-medium">{tMenu('MenuFilterDrawer.Label')}</span>
|
|
</button>
|
|
<button onClick={toggleSortingModal} className="rounded-lg h-8 bg-white p-1.5">
|
|
<TextAlignIcon />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<motion.div
|
|
initial={{ y: -5 }}
|
|
animate={{ y: smallCategoriesVisible ? 0 : -50, opacity: smallCategoriesVisible ? 1 : 0 }}
|
|
transition={{ duration: .1 }}
|
|
className={clsx(
|
|
'fixed left-0 z-10 top-0 px-4 pt-16 bg-[#F4F5F9CC] backdrop-blur-[44px] right-0 xl:pr-72 xl:pt-20',
|
|
``
|
|
)}>
|
|
<HorizontalScrollView className="w-full noscrollbar py-4!">
|
|
{categories.map((item, index) => (
|
|
<CategorySmallItemRenderer
|
|
key={index}
|
|
className={clsx(
|
|
index === +selectedCategory && "bg-white!",
|
|
)}
|
|
onClick={() => updateCategory(index)}
|
|
>
|
|
<Image
|
|
priority
|
|
src="/assets/images/food-image.png"
|
|
width={24}
|
|
height={24}
|
|
alt="category image"
|
|
/>
|
|
<span className="text-xs text-black">{item.title}</span>
|
|
</CategorySmallItemRenderer>
|
|
))}
|
|
</HorizontalScrollView>
|
|
</motion.div>
|
|
|
|
<VerticalScrollView className="mt-5! overflow-y-auto h-full">
|
|
{filteredReceiptItems.map((food) => (
|
|
<MenuItemRenderer key={food.id}>
|
|
<MenuItem food={food} />
|
|
</MenuItemRenderer>
|
|
))}
|
|
</VerticalScrollView>
|
|
</section>
|
|
|
|
<AnimatedBottomSheet title={tMenu('MenuFilterDrawer.Heading')} visible={filterModal} outDelay={150} onClick={toggleFilterModal}>
|
|
<div className="ps-8.5 pe-[31px] mt-[89px]">
|
|
<ComboBox
|
|
title={tMenu('MenuFilterDrawer.SelectContent.Label')}
|
|
options={contents}
|
|
selectedId={selectedIngredients}
|
|
onSelectionChange={changeSelectedIngredients} />
|
|
<ComboBox
|
|
className="relative mt-9.5"
|
|
title={tMenu('MenuFilterDrawer.SelectDelivery.Label')}
|
|
options={shippings}
|
|
selectedId={selectedDeliveryId}
|
|
onSelectionChange={changeSelectedDelivery} />
|
|
<div
|
|
className="flex w-full mt-[23px] h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-black"
|
|
>
|
|
<span className="inline-flex items-center gap-2.5 text-sm2">
|
|
<MedalStar size="16" color="#333333" />
|
|
{tMenu('MenuFilterDrawer.PlusPoint')}
|
|
</span>
|
|
<Switch className="w-12 h-6" />
|
|
</div>
|
|
<div
|
|
className="flex w-full mt-[23px] h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-black"
|
|
>
|
|
<span className="inline-flex items-center gap-2.5 text-sm2">
|
|
<TicketPercentIcon size={16} />
|
|
{tMenu('MenuFilterDrawer.DiscountState')}
|
|
</span>
|
|
<Switch />
|
|
</div>
|
|
</div>
|
|
<hr className="text-white/40 mt-12" />
|
|
<div className="px-9 pt-6 flex justify-between gap-[22px]">
|
|
<div className="w-full">
|
|
<Button>
|
|
{tMenu('MenuFilterDrawer.ButtonOk')}
|
|
</Button>
|
|
</div>
|
|
<div className="w-full">
|
|
<Button className="bg-disabled! text-disabled-text!">
|
|
{tMenu('MenuFilterDrawer.ButtonCancel')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</AnimatedBottomSheet>
|
|
|
|
<AnimatedBottomSheet title={tMenu('MenuSortingDrawer.Heading')} visible={sortingModal} inDelay={150} onClick={toggleSortingModal}>
|
|
<div className="px-8.5 py-10 justify-between">
|
|
{sortings.map((v, i) => {
|
|
return (
|
|
<div key={i}>
|
|
<div onClick={() => changeSorting(i)} className="text-sm2 font-medium cursor-pointer">
|
|
{tMenu('MenuSortingDrawer.Options.' + v)}
|
|
</div>
|
|
{i < sortings.length - 1 && <hr className="text-white/40 mb-4 mt-4" />}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</AnimatedBottomSheet>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MenuIndex;
|