refactor the use of plain string order types

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 
-                price={item.price} 
-                type="secondary"
-              />
+              <ArabicPrice 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,