work on order type "select" in menu header

src/assets/locals/ar.json

@@ -350,5 +350,15 @@
     "keepOrder": "الاحتفاظ بالطلب",
     "thisActionCannotBeUndone": "هذا الإجراء لا يمكن التراجع عنه.",
     "createOrderFailed": "فشل إنشاء الطلب"
+  },
+  "orderTypes": {
+    "dine-in": "في المطعم",
+    "pickup": "استلام",
+    "gift": "هدية",
+    "room": "إلى غرفتك",
+    "delivery": "توصيل",
+    "office": "إلى مكتبك",
+    "scheduled_order": "مجدول",
+    "booking": "حجز مسبق"
   }
 }

src/assets/locals/en.json

@@ -361,5 +361,15 @@
     "keepOrder": "Keep Order",
     "thisActionCannotBeUndone": "This action cannot be undone.",
     "createOrderFailed": "Create Order Failed"
+  },
+  "orderTypes": {
+    "dine-in": "Dine In",
+    "pickup": "Pickup",
+    "gift": "Gift",
+    "room": "To Room",
+    "delivery": "Delivery",
+    "office": "To Office",
+    "scheduled_order": "Scheduled",
+    "booking": "Booking"
   }
 }

src/pages/menu/menu.module.css

@@ -432,17 +432,32 @@
   border-radius: 50%;
 }
 .orderTypeSelectContainer {
-  width: 20%;
+  width: 28%;
   height: 32px;
-  left: 40%;
+  left: 36%;
   border-radius: 40%;
 }
 .orderTypeSelect {
-  width: 90%;
+  width: 95%;
   margin-left: 5%;
   margin-right: 5%;
 }
 
+/* Style for the select component and its dropdown */
+:global(.ant-select .ant-select-selection-item) {
+  font-size: 12px !important;
+  font-weight: 700 !important;
+  text-align: center;
+}
+:global(.ant-select .ant-select-arrow) {
+  font-weight: 600 !important;
+  color:black;
+}
+:global(.ant-select-dropdown .ant-select-item) {
+  font-size: 12px !important;
+  font-weight: 600 !important;
+}
+
 .searchButtonContainer {
   right: 20px;
   border-radius: 50%;

src/pages/menu/page.tsx

@@ -26,6 +26,8 @@ import MenuSkeleton from "./components/MenuSkeleton/MenuSkeleton";
 import ScrollEventHandler from "./components/ScrollEventHandler";
 import SearchButton from "./components/SearchButton";
 import styles from "./menu.module.css";
+import { enumToSelectOptions } from "utils/helpers/helperFunctions.ts";
+import { OrderType } from "pages/checkout/hooks/types.ts";
 
 function MenuPage() {
   const { id } = useParams();
@@ -45,6 +47,8 @@ function MenuPage() {
   const { isMobile, isTablet, isDesktop } = useBreakPoint();
   const isLoading = isLoadingRestaurant || isLoadingMenu;
 
+  const orderTypeOptions = enumToSelectOptions(OrderType, t, "orderTypes");
+
   // Automatically load restaurant taxes when restaurant data is available
   useRestaurant(restaurant);
 
@@ -97,10 +101,11 @@ function MenuPage() {
               className={`${styles.headerFloatingBtn} ${styles.orderTypeSelectContainer}`}
             >
               <Select
-                options={[]}
+                options={orderTypeOptions}
                 variant="borderless"
                 size="small"
                 className={styles.orderTypeSelect}
+                listHeight={150}
               />
             </div>
             <SearchButton />

src/utils/helpers/helperFunctions.ts

@@ -0,0 +1,30 @@
+/**
+ * Utility functions for the application
+ */
+
+import { TFunction } from "i18next";
+
+export function enumToSelectOptions<T extends Record<string, string | number>>(
+  enumObj: T,
+  t: TFunction,
+  translationKey?: string,
+): { label: string; value: string | number }[] {
+  return Object.entries(enumObj).map(([key, value]) => {
+    return {
+      label: t(translationKey ? `${translationKey}.${value}` : value),
+      value: value,
+    };
+  });
+}
+
+/**
+ * Example usage:
+ *
+ * import { OrderType } from "pages/checkout/hooks/types";
+ *
+ * // Basic usage
+ * const orderTypeOptions = enumToSelectOptions(OrderType);
+ *
+ * // With custom label formatter
+ * const customOptions = enumToSelectOptions(OrderType, (label) => `Order: ${label}`);
+ */