diff --git a/src/assets/locals/ar.json b/src/assets/locals/ar.json
index 33737a9..b12c3c5 100644
--- a/src/assets/locals/ar.json
+++ b/src/assets/locals/ar.json
@@ -350,5 +350,15 @@
"keepOrder": "الاحتفاظ بالطلب",
"thisActionCannotBeUndone": "هذا الإجراء لا يمكن التراجع عنه.",
"createOrderFailed": "فشل إنشاء الطلب"
+ },
+ "orderTypes": {
+ "dine-in": "في المطعم",
+ "pickup": "استلام",
+ "gift": "هدية",
+ "room": "إلى غرفتك",
+ "delivery": "توصيل",
+ "office": "إلى مكتبك",
+ "scheduled_order": "مجدول",
+ "booking": "حجز مسبق"
}
}
diff --git a/src/assets/locals/en.json b/src/assets/locals/en.json
index 185b494..9131527 100644
--- a/src/assets/locals/en.json
+++ b/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"
}
}
diff --git a/src/pages/menu/menu.module.css b/src/pages/menu/menu.module.css
index bc6b001..701e664 100644
--- a/src/pages/menu/menu.module.css
+++ b/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%;
diff --git a/src/pages/menu/page.tsx b/src/pages/menu/page.tsx
index 42e3bef..614b285 100644
--- a/src/pages/menu/page.tsx
+++ b/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}`}
>
diff --git a/src/utils/helpers/helperFunctions.ts b/src/utils/helpers/helperFunctions.ts
new file mode 100644
index 0000000..88f9915
--- /dev/null
+++ b/src/utils/helpers/helperFunctions.ts
@@ -0,0 +1,30 @@
+/**
+ * Utility functions for the application
+ */
+
+import { TFunction } from "i18next";
+
+export function enumToSelectOptions>(
+ 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}`);
+ */