OrderTypesBottomSheet: add change order type logic

src/components/CustomBottomSheet/OrderTypesBottomSheet.tsx

@@ -2,7 +2,9 @@ import { Button } from "antd";
 import { useTranslation } from "react-i18next";
 import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
 import NextIcon from "components/Icons/NextIcon";
-import { useAppSelector } from "redux/hooks";
+import { useAppSelector, useAppDispatch } from "redux/hooks";
+import { updateOrderType } from "features/order/orderSlice";
+import { OrderType } from "pages/checkout/hooks/types";
 
 interface OrderTypesBottomSheetBottomSheetProps {
   isOpen: boolean;
@@ -14,7 +16,8 @@ export function OrderTypesBottomSheet({
   onClose,
 }: OrderTypesBottomSheetBottomSheetProps) {
   const { t } = useTranslation();
-  const { restaurant } = useAppSelector((state) => state.order);
+  const dispatch = useAppDispatch();
+  const { restaurant, orderType } = useAppSelector((state) => state.order);
 
   const buttonStyle = {
     height: 48,
@@ -41,6 +44,11 @@ export function OrderTypesBottomSheet({
   const hiddenServices = totalServices - visibleServicesCount;
   const calculatedHeight = 620 - hiddenServices * 64;
 
+  const handleOrderTypeSelect = (selectedOrderType: OrderType) => {
+    dispatch(updateOrderType(selectedOrderType));
+    onClose();
+  };
+
   return (
     <ProBottomSheet
       isOpen={isOpen}
@@ -60,42 +68,92 @@ export function OrderTypesBottomSheet({
         }}
       >
         {restaurant?.dineIn == true && (
-          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
-            {t("orderTypes.dineIn")}
+          <Button
+            icon={<NextIcon />}
+            iconPlacement="end"
+            style={buttonStyle}
+            type={orderType === OrderType.DineIn ? "primary" : "default"}
+            onClick={() => handleOrderTypeSelect(OrderType.DineIn)}
+          >
+            {t("orderTypes.dine-in")}
           </Button>
         )}
         {restaurant?.delivery == true && (
-          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+          <Button
+            icon={<NextIcon />}
+            iconPlacement="end"
+            style={buttonStyle}
+            type={orderType === OrderType.Delivery ? "primary" : "default"}
+            onClick={() => handleOrderTypeSelect(OrderType.Delivery)}
+          >
             {t("orderTypes.delivery")}
           </Button>
         )}
         {restaurant?.pickup == true && (
-          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+          <Button
+            icon={<NextIcon />}
+            iconPlacement="end"
+            style={buttonStyle}
+            type={orderType === OrderType.Pickup ? "primary" : "default"}
+            onClick={() => handleOrderTypeSelect(OrderType.Pickup)}
+          >
             {t("orderTypes.pickup")}
           </Button>
         )}
         {restaurant?.gift == true && (
-          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+          <Button
+            icon={<NextIcon />}
+            iconPlacement="end"
+            style={buttonStyle}
+            type={orderType === OrderType.Gift ? "primary" : "default"}
+            onClick={() => handleOrderTypeSelect(OrderType.Gift)}
+          >
             {t("orderTypes.gift")}
           </Button>
         )}
         {restaurant?.toRoom == true && (
-          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+          <Button
+            icon={<NextIcon />}
+            iconPlacement="end"
+            style={buttonStyle}
+            type={orderType === OrderType.ToRoom ? "primary" : "default"}
+            onClick={() => handleOrderTypeSelect(OrderType.ToRoom)}
+          >
             {t("orderTypes.room")}
           </Button>
         )}
         {restaurant?.toOffice == true && (
-          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+          <Button
+            icon={<NextIcon />}
+            iconPlacement="end"
+            style={buttonStyle}
+            type={orderType === OrderType.ToOffice ? "primary" : "default"}
+            onClick={() => handleOrderTypeSelect(OrderType.ToOffice)}
+          >
             {t("orderTypes.office")}
           </Button>
         )}
         {restaurant?.is_schedule_order_enabled == 1 && (
-          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+          <Button
+            icon={<NextIcon />}
+            iconPlacement="end"
+            style={buttonStyle}
+            type={
+              orderType === OrderType.ScheduledOrder ? "primary" : "default"
+            }
+            onClick={() => handleOrderTypeSelect(OrderType.ScheduledOrder)}
+          >
             {t("orderTypes.scheduled_order")}
           </Button>
         )}
         {restaurant?.is_booking_enabled == 1 && (
-          <Button icon={<NextIcon />} iconPlacement="end" style={buttonStyle}>
+          <Button
+            icon={<NextIcon />}
+            iconPlacement="end"
+            style={buttonStyle}
+            type={orderType === OrderType.Booking ? "primary" : "default"}
+            onClick={() => handleOrderTypeSelect(OrderType.Booking)}
+          >
             {t("orderTypes.booking")}
           </Button>
         )}