refactor the use of plain string order types

src/components/PaymentMethods/PaymentMethods.tsx

@@ -13,6 +13,7 @@ import { useAppDispatch, useAppSelector } from "redux/hooks";
 import { colors, ProGray1 } from "../../ThemeConstants";
 import ProInputCard from "../ProInputCard/ProInputCard";
 import styles from "./PaymentMethods.module.css";
+import { OrderType } from "pages/checkout/hooks/types.ts";
 
 const PaymentMethods = () => {
   const { t } = useTranslation();
@@ -28,7 +29,7 @@ const PaymentMethods = () => {
     style?: React.CSSProperties;
     hideCurrency?: boolean;
   }[] = [
-    ...(orderType !== "gift"
+    ...(orderType !== OrderType.Gift
       ? [
           {
             label: t("checkout.cash"),

src/features/order/orderSlice.ts

@@ -53,7 +53,7 @@ interface CartState {
   collectionMethod: string;
   phone: string;
   paymentMethod: string;
-  orderType: string;
+  orderType: OrderType | "";
   useLoyaltyPoints: boolean;
   loyaltyValidationError: string | null;
 }
@@ -127,7 +127,7 @@ const initialState: CartState = {
   ),
   phone: getFromLocalStorage(CART_STORAGE_KEYS.PHONE, ""),
   paymentMethod: getFromLocalStorage(CART_STORAGE_KEYS.PAYMENT_METHOD, ""),
-  orderType: getFromLocalStorage(CART_STORAGE_KEYS.ORDER_TYPE, ""),
+  orderType: getFromLocalStorage(CART_STORAGE_KEYS.ORDER_TYPE, "" as OrderType | ""),
   useLoyaltyPoints: getFromLocalStorage(
     CART_STORAGE_KEYS.USE_LOYALTY_POINTS,
     false,
@@ -435,7 +435,7 @@ const orderSlice = createSlice({
         );
       }
     },
-    updateOrderType(state, action: PayloadAction<string>) {
+    updateOrderType(state, action: PayloadAction<OrderType>) {
       state.orderType = action.payload;
 
       // Sync to localStorage
@@ -604,7 +604,7 @@ export const selectGrandTotal = (state: RootState) => {
   const taxAmount = selectTaxAmount(state);
   const subtotal = selectCartTotal(state);
   const deliveryFee =
-    state.order.orderType != OrderType.DineIn
+    state.order.orderType !== OrderType.DineIn
       ? Number(state.order.restaurant?.delivery_fees) || 0
       : 0;
 

src/pages/address/page.tsx

@@ -11,6 +11,7 @@ import { useAppSelector } from "redux/hooks";
 import { colors, ProBlack2, ProGray1 } from "ThemeConstants";
 import { AddressSummary } from "../checkout/components/AddressSummary";
 import styles from "./address.module.css";
+import { OrderType } from "pages/checkout/hooks/types.ts";
 
 export default function AddressPage() {
   const { t } = useTranslation();
@@ -165,7 +166,7 @@ export default function AddressPage() {
           to={`/${id}/menu?orderType=delivery`}
           style={{ width: "100%" }}
           onClick={() => {
-            localStorage.setItem("orderType", "delivery");
+            localStorage.setItem("orderType", OrderType.Delivery);
           }}
         >
           <Button

src/pages/cart/components/CartDesktopLayout.tsx

@@ -22,6 +22,7 @@ import YouMightAlsoLike from "pages/cart/components/youMayLike/YouMightAlsoLike.
 import { useTranslation } from "react-i18next";
 import { useAppSelector } from "redux/hooks.ts";
 import CartFooter from "./cartFooter/CartFooter";
+import { OrderType } from "pages/checkout/hooks/types.ts";
 
 interface CartDesktopLayoutProps {
   form: FormInstance;
@@ -177,11 +178,10 @@ export default function CartDesktopLayout({ form }: CartDesktopLayoutProps) {
                 <CouponCard />
               </div>
 
-              {orderType === "pickup" && <CarPlateCard />}
+              {orderType === OrderType.Pickup && <CarPlateCard />}
 
-              {(orderType === "delivery" || orderType === "pickup") && (
+              {(orderType === OrderType.Delivery ||
-                <TimeEstimateCard />
+                orderType === OrderType.Pickup) && <TimeEstimateCard />}
-              )}
 
               <div
                 className={styles.desktopSidebarCard}
@@ -191,7 +191,7 @@ export default function CartDesktopLayout({ form }: CartDesktopLayoutProps) {
               </div>
 
               {/* Table Number */}
-              {orderType === "dine-in" && (
+              {orderType === OrderType.DineIn && (
                 <div
                   className={styles.desktopSidebarCard}
                   style={{ "--animation-order": 3 } as React.CSSProperties}

src/pages/cart/components/CartMobileTabletLayout.tsx

@@ -30,6 +30,7 @@ import SpecialRequestCard from "pages/cart/components/specialRequest/SpecialRequ
 import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
 import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard.tsx";
 import { useTranslation } from "react-i18next";
+import { OrderType } from "pages/checkout/hooks/types";
 
 interface CartMobileTabletLayoutProps {
   form: FormInstance;
@@ -224,15 +225,14 @@ export default function CartMobileTabletLayout({
           <CouponCard />
 
           {/* Car Plate*/}
-          {orderType === "pickup" && <CarPlateCard />}
+          {orderType === OrderType.Pickup && <CarPlateCard />}
 
           {/* Estimate Time */}
-          {(orderType === "delivery" || orderType === "pickup") && (
+          {(orderType === OrderType.Delivery ||
-            <TimeEstimateCard />
+            orderType === OrderType.Pickup) && <TimeEstimateCard />}
-          )}
 
           {/* Collection Method */}
-          {orderType === "pickup" && (
+          {orderType === OrderType.Pickup && (
             <ProInputCard title={t("cart.collectionMethod")}>
               <Form.Item
                 name="collectionMethod"
@@ -270,7 +270,7 @@ export default function CartMobileTabletLayout({
           <RewardWaiterCard />
 
           {/* Table Number */}
-          {orderType === "dine-in" && <TableNumberCard />}
+          {orderType === OrderType.DineIn && <TableNumberCard />}
 
           {/* Invoice Summary */}
           <OrderSummary />

src/pages/checkout/components/AddressSummary.tsx

@@ -7,6 +7,7 @@ import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import styles from "../../address/address.module.css";
+import { OrderType } from "pages/checkout/hooks/types.ts";
 
 interface LocationData {
   lat: number;
@@ -19,7 +20,7 @@ export const AddressSummary = () => {
   const dispatch = useAppDispatch();
   const { location } = useAppSelector(selectCart);
   const [isMapBottomSheetOpen, setIsMapBottomSheetOpen] = useState(false);
-  const { orderType } = useAppSelector(selectCart) // Default to delivery for now
+  const { orderType } = useAppSelector(selectCart); // Default to delivery for now
 
   const handleLocationSave = useCallback(
     (locationString: string) => {
@@ -46,7 +47,10 @@ export const AddressSummary = () => {
     [location],
   );
 
-  const shouldRender = useMemo(() => orderType === "delivery", [orderType]);
+  const shouldRender = useMemo(
+    () => orderType === OrderType.Delivery,
+    [orderType],
+  );
 
   if (!shouldRender) {
     return null;

src/pages/checkout/components/BriefMenu.tsx

@@ -7,11 +7,12 @@ import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppSelector } from "redux/hooks";
 import styles from "../../address/address.module.css";
+import { OrderType } from "pages/checkout/hooks/types.ts";
 
 export default function BriefMenu() {
   const { tables, items } = useAppSelector(selectCart);
   const { t } = useTranslation();
-  const { orderType } = useAppSelector(selectCart)
+  const { orderType } = useAppSelector(selectCart);
 
   const menuItems = useMemo(
     () =>
@@ -28,23 +29,20 @@ export default function BriefMenu() {
             <div>
               <ProText className={styles.itemName}>{item.name}</ProText>
               <br />
-              <ArabicPrice 
+              <ArabicPrice price={item.price} type="secondary" />
-                price={item.price} 
-                type="secondary"
-              />
             </div>
           </div>
         </div>
       )),
-    [items]
+    [items],
   );
 
   const cardTitle = useMemo(
     () =>
-      orderType === "dine-in"
+      orderType === OrderType.DineIn
         ? t("checkout.table") + " " + tables
         : t("checkout.items"),
-    [orderType, t, tables]
+    [orderType, t, tables],
   );
 
   return (

src/pages/checkout/components/CheckoutButton.tsx

@@ -6,10 +6,11 @@ import { useNavigate, useParams } from "react-router-dom";
 import { useAppSelector } from "redux/hooks";
 import styles from "../../address/address.module.css";
 import useOrder from "../hooks/useOrder";
+import { OrderType } from "pages/checkout/hooks/types.ts";
 
 export default function CheckoutButton({ form }: { form: FormInstance }) {
   const { t } = useTranslation();
-  const { orderType } = useAppSelector(selectCart)
+  const { orderType } = useAppSelector(selectCart);
   const navigate = useNavigate();
   const { handleCreateOrder } = useOrder();
   const { id } = useParams();
@@ -28,7 +29,7 @@ export default function CheckoutButton({ form }: { form: FormInstance }) {
   }, [handleCreateOrder, form]);
 
   const shouldShowSplitBill = useMemo(
-    () => orderType === "dine-in",
+    () => orderType === OrderType.DineIn,
     [orderType],
   );
 

src/pages/checkout/components/GiftDetails.tsx

@@ -16,6 +16,7 @@ import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import styles from "../../address/address.module.css";
+import { OrderType } from "pages/checkout/hooks/types.ts";
 
 export const GiftDetails = () => {
   const { t } = useTranslation();
@@ -34,7 +35,7 @@ export const GiftDetails = () => {
         console.error("Failed to parse location data:", error);
       }
     },
-    [dispatch]
+    [dispatch],
   );
 
   const handleOfficeBottomSheetOpen = useCallback(() => {
@@ -55,11 +56,11 @@ export const GiftDetails = () => {
 
   const buttonText = useMemo(
     () => (giftDetails ? t("address.changeGift") : t("address.selectGift")),
-    [giftDetails, t]
+    [giftDetails, t],
   );
 
   return (
-    orderType === "gift" && (
+    orderType === OrderType.Gift && (
       <>
         <Card
           title={t("address.giftDetails")}

src/pages/checkout/components/OfficeDetails.tsx

@@ -13,6 +13,7 @@ import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import styles from "../../address/address.module.css";
+import { OrderType } from "pages/checkout/hooks/types.ts";
 
 export const OfficeDetails = () => {
   const { t } = useTranslation();
@@ -20,7 +21,7 @@ export const OfficeDetails = () => {
   const { officeDetails } = useAppSelector(selectCart);
   const [isOfficeBottomSheetOpen, setIsOfficeBottomSheetOpen] = useState(false);
 
-  const { orderType } = useAppSelector(selectCart)
+  const { orderType } = useAppSelector(selectCart);
 
   const handleOfficeDetailsSave = useCallback(
     (officeDetailsData: OfficeDetailsType) => {
@@ -31,7 +32,7 @@ export const OfficeDetails = () => {
         console.error("Failed to parse location data:", error);
       }
     },
-    [dispatch]
+    [dispatch],
   );
 
   const handleOfficeBottomSheetOpen = useCallback(() => {
@@ -45,11 +46,11 @@ export const OfficeDetails = () => {
   const buttonText = useMemo(
     () =>
       officeDetails ? t("address.changeOffice") : t("address.selectOffice"),
-    [officeDetails, t]
+    [officeDetails, t],
   );
 
   return (
-    orderType === "office" && (
+    orderType === OrderType.ToOffice && (
       <>
         <Card
           title={t("address.officeDetails")}

src/pages/checkout/components/RoomDetails.tsx

@@ -13,6 +13,7 @@ import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import styles from "../../address/address.module.css";
+import { OrderType } from "pages/checkout/hooks/types.ts";
 
 export const RoomDetails = () => {
   const { t } = useTranslation();
@@ -20,7 +21,7 @@ export const RoomDetails = () => {
   const { roomDetails } = useAppSelector(selectCart);
   const [isRoomBottomSheetOpen, setIsRoomBottomSheetOpen] = useState(false);
 
-  const { orderType } = useAppSelector(selectCart)
+  const { orderType } = useAppSelector(selectCart);
 
   const handleRoomDetailsSave = useCallback(
     (roomDetailsData: RoomDetailsType) => {
@@ -31,7 +32,7 @@ export const RoomDetails = () => {
         console.error("Failed to parse location data:", error);
       }
     },
-    [dispatch]
+    [dispatch],
   );
 
   const handleRoomBottomSheetOpen = useCallback(() => {
@@ -44,11 +45,11 @@ export const RoomDetails = () => {
 
   const buttonText = useMemo(
     () => (roomDetails ? t("address.changeRoom") : t("address.selectRoom")),
-    [roomDetails, t]
+    [roomDetails, t],
   );
 
   return (
-    orderType === "room" && (
+    orderType === OrderType.ToRoom && (
       <>
         <Card
           title={t("address.roomDetails")}

src/pages/checkout/components/phoneCard.tsx

@@ -3,6 +3,7 @@ import ProPhoneInput from "components/ProPhoneInput";
 import { selectCart, updatePhone } from "features/order/orderSlice";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { OrderType } from "pages/checkout/hooks/types.ts";
 
 export default function PhoneCard() {
   const { t } = useTranslation();
@@ -10,7 +11,7 @@ export default function PhoneCard() {
   const { phone, orderType } = useAppSelector(selectCart);
 
   return (
-    orderType !== "gift" && (
+    orderType !== OrderType.Gift && (
       <>
         <ProInputCard title={t("checkout.phoneNumber")}>
           <ProPhoneInput

src/pages/checkout/hooks/types.ts

@@ -245,4 +245,5 @@ export enum OrderType {
   ScheduledOrder = "scheduled_order",
   ToRoom = "room",
   ToOffice = "office",
+  Booking = "booking",
 }

src/pages/checkout/hooks/useOrder.ts

@@ -3,7 +3,7 @@ import {
   clearCart,
   selectCart,
   selectGrandTotal,
-  selectHighestPricedLoyaltyItem
+  selectHighestPricedLoyaltyItem,
 } from "features/order/orderSlice";
 import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
@@ -12,6 +12,7 @@ import { useCreateOrderMutation } from "redux/api/others";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import { PAYMENT_CONFIRMATION_URL } from "utils/constants";
 import { Customer } from "../../otp/types";
+import { OrderType } from "pages/checkout/hooks/types.ts";
 
 export default function useOrder() {
   const dispatch = useAppDispatch();
@@ -72,7 +73,7 @@ export default function useOrder() {
       use_loylaty: useLoyaltyPoints && highestLoyaltyItem ? 1 : 0,
       useWallet: 0,
       tip,
-      ...(orderType === "gift"
+      ...(orderType === OrderType.Gift
         ? {
             receiverName: giftDetails?.receiverName,
             receiverPhone: giftDetails?.receiverPhone,

src/pages/menu/components/ResponsiveServices.tsx

@@ -6,6 +6,7 @@ import DownIcon from "components/Icons/DownIcon";
 import PickupIcon from "components/Icons/PickupIcon";
 import useBreakPoint from "hooks/useBreakPoint";
 import styles from "../menu.module.css";
+import { OrderType } from "pages/checkout/hooks/types.ts";
 
 interface ResponsiveServicesProps {
   orderType: string;
@@ -18,18 +19,20 @@ interface ResponsiveServicesProps {
   };
 }
 
-
+export default function ResponsiveServices({
-export default function ResponsiveServices({ orderType, translations }: ResponsiveServicesProps) {
+  orderType,
+  translations,
+}: ResponsiveServicesProps) {
   const { isMobile } = useBreakPoint();
-  
+
   // Hide pickup service if screen width is less than 400px (insufficient for 3 services)
   const shouldHidePickup = isMobile;
-  
+
   return (
     <div className={styles.services}>
       <Button
         className={
-          orderType == "dine-in"
+          orderType == OrderType.DineIn
             ? styles.activeServiceButton
             : styles.serviceButton
         }
@@ -41,11 +44,11 @@ export default function ResponsiveServices({ orderType, translations }: Responsi
       >
         {translations.common.dineIn}
       </Button>
-      
+
       {!shouldHidePickup && (
         <Button
           className={
-            orderType == "pickup"
+            orderType == OrderType.Pickup
               ? styles.activeServiceButton
               : styles.serviceButton
           }
@@ -58,7 +61,7 @@ export default function ResponsiveServices({ orderType, translations }: Responsi
           {translations.common.pickup}
         </Button>
       )}
-      
+
       <Button
         className={
           orderType == "more"

src/pages/restaurant/RestaurantServices.tsx

@@ -14,6 +14,7 @@ import { useTranslation } from "react-i18next";
 import { Link, useParams } from "react-router-dom";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import styles from "./restaurant.module.css";
+import { OrderType } from "pages/checkout/hooks/types.ts";
 
 interface RestaurantServicesProps {
   dineIn?: boolean;
@@ -43,7 +44,7 @@ export default function RestaurantServices({
   const services = [
     ...((dineIn && [
       {
-        id: "dine-in",
+        id: OrderType.DineIn,
         title: t("common.dineIn"),
         description: t("home.services.dineIn"),
         icon: (
@@ -58,7 +59,7 @@ export default function RestaurantServices({
       []),
     ...((pickup && [
       {
-        id: "pickup",
+        id: OrderType.Pickup,
         title: t("common.pickup"),
         description: t("home.services.pickup"),
         icon: (
@@ -73,7 +74,7 @@ export default function RestaurantServices({
       []),
     ...((gift && [
       {
-        id: "gift",
+        id: OrderType.Gift,
         title: t("common.sendGift"),
         description: t("home.services.gift"),
         icon: (
@@ -88,7 +89,7 @@ export default function RestaurantServices({
       []),
     ...((toRoom && [
       {
-        id: "room",
+        id: OrderType.ToRoom,
         title: t("common.roomService"),
         description: t("home.services.room"),
         icon: (
@@ -101,7 +102,7 @@ export default function RestaurantServices({
       []),
     ...((toOffice && [
       {
-        id: "office",
+        id: OrderType.ToOffice,
         title: t("common.officeDelivery"),
         description: t("home.services.office"),
         icon: (
@@ -116,7 +117,7 @@ export default function RestaurantServices({
       []),
     ...((is_booking_enabled && [
       {
-        id: "booking",
+        id: OrderType.Booking,
         title: t("common.tableBooking"),
         description: t("home.services.booking"),
         icon: (
@@ -131,7 +132,7 @@ export default function RestaurantServices({
       []),
     ...((delivery && [
       {
-        id: "delivery",
+        id: OrderType.Delivery,
         title: t("common.delivery"),
         description: t("home.services.delivery"),
         icon: (