OrderTypesBottomSheet: initial commit

src/assets/locals/ar.json

@@ -108,6 +108,7 @@
     "email_label": "البريد الإلكتروني"
   },
   "menu": {
+    "orderTypes": "طرق الطلب",
     "meal": "الوجبة",
     "title": "القائمة",
     "ourMenu": "قائمتنا",

src/assets/locals/en.json

@@ -124,6 +124,7 @@
     "email_label": "Email"
   },
   "menu": {
+    "orderTypes": "Order Types",
     "meal": "Meal",
     "title": "Menu",
     "ourMenu": "Our Menu",

src/components/CustomBottomSheet/OrderTypesBottomSheet.tsx

@@ -0,0 +1,105 @@
+import { Button } from "antd";
+import { useTranslation } from "react-i18next";
+import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
+import NextIcon from "components/Icons/NextIcon";
+import { useAppSelector } from "redux/hooks";
+
+interface OrderTypesBottomSheetBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function OrderTypesBottomSheet({
+  isOpen,
+  onClose,
+}: OrderTypesBottomSheetBottomSheetProps) {
+  const { t } = useTranslation();
+  const { restaurant } = useAppSelector((state) => state.order);
+
+  const buttonStyle = {
+    height: 48,
+    width: "100%",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  };
+
+  // Count visible services
+  const visibleServicesCount = [
+    restaurant?.dineIn == true,
+    restaurant?.delivery == true,
+    restaurant?.pickup == true,
+    restaurant?.gift == true,
+    restaurant?.toRoom == true,
+    restaurant?.toOffice == true,
+    restaurant?.is_schedule_order_enabled == 1,
+    restaurant?.is_booking_enabled == 1,
+  ].filter(Boolean).length;
+
+  // Calculate height: base 620px, subtract 48px for each hidden service
+  const totalServices = 8;
+  const hiddenServices = totalServices - visibleServicesCount;
+  const calculatedHeight = 620 - hiddenServices * 64;
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={onClose}
+      title={t("menu.orderTypes")}
+      showCloseButton={false}
+      initialSnap={1}
+      height={calculatedHeight}
+      snapPoints={[calculatedHeight.toString()]}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+          margin: "16px 0",
+        }}
+      >
+        {restaurant?.dineIn == true && (
+          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+            {t("orderTypes.dineIn")}
+          </Button>
+        )}
+        {restaurant?.delivery == true && (
+          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+            {t("orderTypes.delivery")}
+          </Button>
+        )}
+        {restaurant?.pickup == true && (
+          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+            {t("orderTypes.pickup")}
+          </Button>
+        )}
+        {restaurant?.gift == true && (
+          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+            {t("orderTypes.gift")}
+          </Button>
+        )}
+        {restaurant?.toRoom == true && (
+          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+            {t("orderTypes.room")}
+          </Button>
+        )}
+        {restaurant?.toOffice == true && (
+          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+            {t("orderTypes.office")}
+          </Button>
+        )}
+        {restaurant?.is_schedule_order_enabled == 1 && (
+          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+            {t("orderTypes.scheduled_order")}
+          </Button>
+        )}
+        {restaurant?.is_booking_enabled == 1 && (
+          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+            {t("orderTypes.booking")}
+          </Button>
+        )}
+      </div>
+    </ProBottomSheet>
+  );
+}

src/pages/menu/components/CategoriesList/CategoriesList.tsx

@@ -189,7 +189,10 @@ export function CategoriesList({ categories }: CategoriesListProps) {
               data-category-id={category.id}
               style={{
                 borderRadius: 8,
-                border: "none",
+                borderTop: "none",
+                borderRight: "none",
+                borderBottom: "none",
+                borderLeft: "none",
                 backgroundColor: isCategoriesSticky ? "transparent" : "var(--background)",
               }}
               styles={{
@@ -232,7 +235,7 @@ export function CategoriesList({ categories }: CategoriesListProps) {
                 )}
 
                 <Space
-                  direction="vertical"
+                  orientation="vertical"
                   size="small"
                   style={{
                     flex: 1,
@@ -274,7 +277,6 @@ export function CategoriesList({ categories }: CategoriesListProps) {
                     width: 104,
                     height: 30,
                     marginBottom: 1,
-                    border: "none",
                   }}
                 >
                   <ProText

src/pages/menu/page.tsx

@@ -11,7 +11,7 @@ import useBreakPoint from "hooks/useBreakPoint";
 import { useRestaurant } from "hooks/useRestaurant";
 import { OrderType } from "pages/checkout/hooks/types.ts";
 import { useTranslation } from "react-i18next";
-import { useParams, useSearchParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import {
   useGetMenuQuery,
   useGetRestaurantDetailsQuery,
@@ -33,11 +33,10 @@ import NextIcon from "components/Icons/NextIcon";
 import { OpeningTimesBottomSheet } from "components/CustomBottomSheet/OpeningTimesBottomSheet";
 import { useState } from "react";
 import BackIcon from "components/Icons/BackIcon";
+import { OrderTypesBottomSheet } from "components/CustomBottomSheet/OrderTypesBottomSheet";
 
 function MenuPage() {
   const { subdomain } = useParams();
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_, setSearchParams] = useSearchParams();
   const { isRTL } = useAppSelector((state) => state.locale);
   const { orderType } = useAppSelector((state) => state.order);
   const { t } = useTranslation();
@@ -55,6 +54,7 @@ function MenuPage() {
   const { isMobile, isTablet, isDesktop } = useBreakPoint();
   const isLoading = isLoadingRestaurant || isLoadingMenu;
   const [isOpeningTimesOpen, setIsOpeningTimesOpen] = useState(false);
+  const [isOrderTypesOpen, setIsOrderTypesOpen] = useState(false);
   const orderTypeOptions = enumToSelectOptions(OrderType, t, "orderTypes");
 
   // Automatically load restaurant taxes when restaurant data is available
@@ -99,16 +99,18 @@ function MenuPage() {
             >
               <Select
                 value={orderType}
-                onChange={(value) => {
-                  setSearchParams({ orderType: value });
-                }}
                 options={orderTypeOptions}
+                open={false}
+                onOpenChange={() => false}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setIsOrderTypesOpen(true);
+                }}
                 variant="borderless"
                 size="small"
                 className={styles.orderTypeSelect}
                 classNames={{ popup: { root: "order-type-select-dropdown" } }}
                 listHeight={150}
-                disabled
               />
             </div>
             <SearchButton />
@@ -139,7 +141,7 @@ function MenuPage() {
                       />
                     )
                   }
-                  iconPosition="end"
+                  iconPlacement="end"
                   onClick={() => setIsOpeningTimesOpen(true)}
                 >
                   {restaurant?.isOpened ? t("menu.open") : t("menu.close")}
@@ -185,6 +187,10 @@ function MenuPage() {
             isOpen={isOpeningTimesOpen}
             onClose={() => setIsOpeningTimesOpen(false)}
           />
+          <OrderTypesBottomSheet
+            isOpen={isOrderTypesOpen}
+            onClose={() => setIsOrderTypesOpen(false)}
+          />
         </div>
       )}
     </>