filter

src/app/[name]/(Main)/components/MenuFilterDrawer.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import React from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import Button from "@/components/button/PrimaryButton";
 import AnimatedBottomSheet from "@/components/bottomsheet/AnimatedBottomSheet";
 import ComboBox, { ComboboxOption } from "@/components/combobox/Combobox";
 import { Switch } from "@/components/ui/switch";
-import { MedalStar } from "iconsax-react";
 import { TicketPercentIcon } from "lucide-react";
 
 type MenuFilterDrawerProps = {
@@ -15,6 +14,7 @@ type MenuFilterDrawerProps = {
   selectedDeliveryId: string;
   onIngredientsChange: (value: string) => void;
   onDeliveryChange: (value: string) => void;
+  onApply: () => void;
   tMenu: (key: string) => string;
 };
 
@@ -25,35 +25,43 @@ const MenuFilterDrawer = ({
   selectedDeliveryId,
   onIngredientsChange,
   onDeliveryChange,
+  onApply,
   tMenu,
 }: MenuFilterDrawerProps) => {
-  const contents: Array<ComboboxOption> = [
+  const [tempIngredients, setTempIngredients] = useState(selectedIngredients);
-    {
+  const [tempDeliveryId, setTempDeliveryId] = useState(selectedDeliveryId);
-      id: "0",
-      title: tMenu("MenuFilterDrawer.SelectContent.Options.Normal"),
-      label: "",
-    },
-    {
-      id: "1",
-      title: tMenu("MenuFilterDrawer.SelectContent.Options.Vegan"),
-      label: "",
-    },
-  ];
 
-  const shippings: Array<ComboboxOption> = [
+  useEffect(() => {
-    {
+    if (visible) {
-      id: "0",
+      setTempIngredients(selectedIngredients);
-      title: tMenu("MenuFilterDrawer.SelectDelivery.Options.Courier"),
+      setTempDeliveryId(selectedDeliveryId);
-      label: "",
+    }
-    },
+  }, [visible, selectedIngredients, selectedDeliveryId]);
-  ];
+
+  const serviceOptions: Array<ComboboxOption> = useMemo(() => {
+    return [
+      {
+        id: "0",
+        title: tMenu("MenuFilterDrawer.SelectDelivery.Options.All") || "همه",
+        label: "",
+      },
+      {
+        id: "pickup",
+        title: "بیرون بر",
+        label: "",
+      },
+      {
+        id: "inPlace",
+        title: "سرو در رستوران",
+        label: "",
+      },
+    ];
+  }, [tMenu]);
 
   const handleIngredientsChange = (
-    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    e: React.ChangeEvent<HTMLInputElement>
-    index: number
   ) => {
-    e.stopPropagation();
+    setTempIngredients(e.target.value);
-    onIngredientsChange(contents[index]?.id ?? contents[0].id);
   };
 
   const handleDeliveryChange = (
@@ -61,7 +69,20 @@ const MenuFilterDrawer = ({
     index: number
   ) => {
     e.stopPropagation();
-    onDeliveryChange(shippings[index]?.id ?? shippings[0].id);
+    setTempDeliveryId(serviceOptions[index]?.id ?? serviceOptions[0].id);
+  };
+
+  const handleApply = () => {
+    onIngredientsChange(tempIngredients);
+    onDeliveryChange(tempDeliveryId);
+    onApply();
+    onClose();
+  };
+
+  const handleCancel = () => {
+    setTempIngredients(selectedIngredients);
+    setTempDeliveryId(selectedDeliveryId);
+    onClose();
   };
 
   return (
@@ -72,26 +93,25 @@ const MenuFilterDrawer = ({
       onClick={onClose}
     >
       <div className="ps-8.5 pe-[31px] mt-[89px]">
-        <ComboBox
+        <div className="flex flex-col gap-2">
-          title={tMenu("MenuFilterDrawer.SelectContent.Label")}
+          <label className="text-sm2 text-foreground">
-          options={contents}
+            {tMenu("MenuFilterDrawer.SelectContent.Label")}
-          selectedId={selectedIngredients}
+          </label>
-          onSelectionChange={handleIngredientsChange}
+          <input
-        />
+            type="text"
+            value={tempIngredients}
+            onChange={handleIngredientsChange}
+            placeholder={tMenu("MenuFilterDrawer.SelectContent.Placeholder") || "محتویات را وارد کنید..."}
+            className="w-full h-11 px-3 py-2.5 text-sm2 rounded-normal border border-border bg-container/29 focus:outline-none focus:ring-2 focus:ring-black"
+          />
+        </div>
         <ComboBox
           className="relative mt-9.5"
           title={tMenu("MenuFilterDrawer.SelectDelivery.Label")}
-          options={shippings}
+          options={serviceOptions}
-          selectedId={selectedDeliveryId}
+          selectedId={tempDeliveryId}
           onSelectionChange={handleDeliveryChange}
         />
-        <div className="flex w-full mt-[23px] h-11 items-center justify-between gap-2 px-3 py-4 relative bg-container/29 rounded-xl border border-solid border-border 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" className="stroke-foreground" />
-            {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-container/29 rounded-xl border border-solid border-border 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} />
@@ -103,10 +123,10 @@ const MenuFilterDrawer = ({
       <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>
+          <Button onClick={handleApply}>{tMenu("MenuFilterDrawer.ButtonOk")}</Button>
         </div>
         <div className="w-full">
-          <Button className="bg-disabled! text-disabled-text!">
+          <Button className="bg-disabled! text-disabled-text!" onClick={handleCancel}>
             {tMenu("MenuFilterDrawer.ButtonCancel")}
           </Button>
         </div>

src/app/[name]/(Main)/page.tsx

@@ -31,11 +31,23 @@ const MenuIndex = () => {
   const [sorting, 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 [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 [isInitialMount, setIsInitialMount] = useState(true);
+
+  useEffect(() => {
+    if (isInitialMount) {
+      setSearch(null);
+      setSelectedCategory(null);
+      setSelectedIngredients(null);
+      setSelectedDeliveryId(null);
+      setSorting(null);
+      setIsInitialMount(false);
+    }
+  }, [isInitialMount, setSearch, setSelectedCategory, setSelectedIngredients, setSelectedDeliveryId, setSorting]);
 
   const onScroll = useCallback(() => {
     if (!wrapperRef?.current?.parentElement?.parentElement?.scrollTop || !smallCategoriesRef.current?.offsetTop) return;
@@ -80,7 +92,7 @@ const MenuIndex = () => {
   };
 
   const changeSelectedIngredients = useCallback((value: string) => {
-    setSelectedIngredients(() => value);
+    setSelectedIngredients(value);
   }, [setSelectedIngredients]);
 
   const changeSelectedDelivery = useCallback((value: string) => {
@@ -90,6 +102,7 @@ const MenuIndex = () => {
   const filteredReceiptItems = useMemo(() => {
     if (!foods.length) return [];
     const lowerSearch = search.toLowerCase();
+    const lowerIngredients = selectedIngredients ? selectedIngredients.toLowerCase() : "";
     const selectedCatId =
       selectedCategory === "0" ? null : categories[+selectedCategory - 1]?.id;
 
@@ -99,7 +112,18 @@ const MenuIndex = () => {
       const itemName = item.name || item.title || item.foodName || "";
       const matchesSearch =
         !search || itemName.toLowerCase().includes(lowerSearch);
-      return matchesCategory && matchesSearch;
+
+      const matchesIngredients = !selectedIngredients ||
+        (item.content && Array.isArray(item.content) &&
+          item.content.some((content: string) =>
+            content.toLowerCase().includes(lowerIngredients)
+          ));
+
+      const matchesDelivery = selectedDeliveryId === "0" ||
+        (selectedDeliveryId === "pickup" && item.pickupServe) ||
+        (selectedDeliveryId === "inPlace" && item.inPlaceServe);
+
+      return matchesCategory && matchesSearch && matchesIngredients && matchesDelivery;
     });
 
     const sortingKey = sortings[Number(sorting)] || sortings[0];
@@ -118,7 +142,7 @@ const MenuIndex = () => {
           return 0;
       }
     });
-  }, [selectedCategory, search, foods, categories, sorting]);
+  }, [selectedCategory, search, selectedIngredients, selectedDeliveryId, foods, categories, sorting]);
   return (
     <div className="flex flex-col gap-4 items-center pt-8 mb-8" ref={wrapperRef}>
       <div className="w-full">
@@ -188,6 +212,7 @@ const MenuIndex = () => {
         selectedDeliveryId={selectedDeliveryId}
         onIngredientsChange={changeSelectedIngredients}
         onDeliveryChange={changeSelectedDelivery}
+        onApply={() => { }}
         tMenu={tMenu}
       />
 

src/locales/fa/menu.json

@@ -6,6 +6,7 @@
             "SelectContent": {
                 "Label": "محتویات",
                 "SearchLabel": "جستجو ...",
+                "Placeholder": "محتویات را وارد کنید...",
                 "Options": {
                     "Normal": "معمولی",
                     "Vegan": "گیاهی"
@@ -15,6 +16,7 @@
                 "Label": "روش ارسال",
                 "SearchLabel": "جستجو ...",
                 "Options": {
+                    "All": "همه",
                     "Courier": "ارسال با پیک"
                 }
             },