refactor the use of plain string order types

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({ orderType, translations }: ResponsiveServicesProps) {
+export default function ResponsiveServices({
+  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"