@@ -21,6 +21,7 @@ import ComboBox, { DropdownOption } from "@/components/combobox/ComboBox";
import clsx from "clsx" ;
import CategorySmallItemRenderer from "@/components/listview/CategorySmallItemRenderer" ;
import { motion } from "framer-motion" ;
import { useTranslation } from "react-i18next" ;
const categories = new Array ( 13 ) . fill ( { title : "خوراک" , icon : "" } ) ;
@@ -126,31 +127,34 @@ const foods = [
] ;
const sortings = [
'محبوب ترین' ,
'بالاترین امتیاز' ,
'جدید ترین' ,
'ارزان ترین' ,
'گران ترین' ,
"PopularityDescending" ,
"DateDescending" ,
"PriceAscending" ,
"RateDescending" ,
"PriceDescending"
]
const contents : Array < DropdownOption > = [
{ id : '0' , title : 'گیاهی' } ,
{ id : '1' , title : 'حیوانی' }
]
const shippings : Array < DropdownOption > = [
{ id : '0' , title : 'ارسال با پیک' , label : '' } ,
]
const MenuIndex = ( ) = > {
const { t : tCommon } = useTranslation ( 'common' ) ;
const { t : tMenu } = useTranslation ( 'menu' , {
keyPrefix : "Menu"
} ) ;
const contents : Array < DropdownOption > = [
{ id : '0' , title : tMenu ( 'MenuFilterDrawer.SelectContent.Options.Normal' ) , label : '' } ,
{ id : '1' , title : tMenu ( 'MenuFilterDrawer.SelectContent.Options.Vegan' ) , label : '' } ,
]
const shippings : Array < DropdownOption > = [
{ 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 [ selectedContentId , setSelectedContentId ] = useQueryState ( 'contentType ' , { defaultValue : '0' } ) ;
const [ selectedShippingId , setSelectedShippingId ] = useQueryState ( 'shippingType ' , { 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 ) ;
@@ -199,12 +203,12 @@ const MenuIndex = () => {
setSorting ( ( ) = > String ( index ) ) ;
}
const changeSelectedContent = ( e : React.MouseEvent < HTMLDivElement , MouseEvent > , index : number ) = > {
setSelectedContentId ( ( ) = > contents [ index ] ? . id || contents [ 0 ] . id ) ;
const changeSelectedIngredients = ( e : React.MouseEvent < HTMLDivElement , MouseEvent > , index : number ) = > {
setSelectedIngredients ( ( ) = > contents [ index ] ? . id || contents [ 0 ] . id ) ;
}
const changeSelectedShipping = ( e : React.MouseEvent < HTMLDivElement , MouseEvent > , index : number ) = > {
setSelectedShippingId ( ( ) = > 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 ( ( ) = > {
@@ -220,7 +224,7 @@ const MenuIndex = () => {
return (
< div className = "flex flex-col gap-4 items-center pt-8" ref = { wrapperRef } >
< div className = "w-full" >
< SearchBox value = { search } onChange = { updateSearch } / >
< SearchBox value = { search } placeholder = { tCommon ( 'SearchPlaceholder' ) } onChange = { updateSearch } / >
< HorizontalScrollView className = "w-full noscrollbar mt-4! py-4!" >
{ categories . map ( ( item , index ) = > (
< CategoryItemRenderer
@@ -251,7 +255,7 @@ const MenuIndex = () => {
< 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" > ف ی ل ت ر ب ر ا س ا س < / span >
< 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 / >
@@ -298,25 +302,25 @@ const MenuIndex = () => {
< / VerticalScrollView >
< / section >
< AnimatedBottomSheet title = "فیلتر ها" visible = { filterModal } outDelay = { 150 } onClick = { toggleFilterModal } >
< AnimatedBottomSheet title = { tMenu ( 'MenuFilterDrawer.Heading' ) } visible = { filterModal } outDelay = { 150 } onClick = { toggleFilterModal } >
< div className = "ps-8.5 pe-[31px] mt-[89px]" >
< ComboBox
title = "محتویات"
title = { tMenu ( 'MenuFilterDrawer.SelectContent.Label' ) }
options = { contents }
selectedId = { selectedContentId }
onSelectionChange = { changeSelectedContent } / >
selectedId = { selectedIngredients }
onSelectionChange = { changeSelectedIngredients } / >
< ComboBox
className = "relative mt-9.5"
title = "روش ارسال"
title = { tMenu ( 'MenuFilterDrawer.SelectDelivery.Label' ) }
options = { shippings }
selectedId = { selectedShippingId }
onSelectionChange = { changeSelectedShipping } / >
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 >
@@ -325,7 +329,7 @@ const MenuIndex = () => {
>
< span className = "inline-flex items-center gap-2.5 text-sm2" >
< TicketPercentIcon size = { 16 } / >
د ا ر ا ی ک د ت خ ف ی ف
{ tMenu ( 'MenuFilterDrawer.DiscountState' ) }
< / span >
< Switch / >
< / div >
@@ -333,21 +337,25 @@ const MenuIndex = () => {
< hr className = "text-white/40 mt-12" / >
< div className = "px-9 pt-6 flex justify-between gap-[22px]" >
< div className = "w-full" >
< Button > ا ع م ا ل ف ی ل ت ر < / Button >
< Button >
{ tMenu ( 'MenuFilterDrawer.ButtonOk' ) }
< / Button >
< / div >
< div className = "w-full" >
< Button className = "bg-disabled! text-disabled-text!" > ح ذ ف ف ی ل ت ر < / Button >
< Button className = "bg-disabled! text-disabled-text!" >
{ tMenu ( 'MenuFilterDrawer.ButtonCancel' ) }
< / Button >
< / div >
< / div >
< / AnimatedBottomSheet >
< AnimatedBottomSheet title = "مرتب کردن بر اساس" visible = { sortingModal } inDelay = { 150 } onClick = { toggleSortingModal } >
< 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" >
{ v }
{ tMenu ( 'MenuSortingDrawer.Options.' + v ) }
< / div >
{ i < sortings . length - 1 && < hr className = "text-white/40 mb-4 mt-4" / > }
< / div >
Mahyar Khanbolooki