gift: update UI and voucher & items BS

src/pages/restaurant/RestaurantServices.tsx

@@ -1,4 +1,3 @@
-import { ScheduleFilled } from "@ant-design/icons";
 import { Card } from "antd";
 import BackIcon from "components/Icons/BackIcon";
 import DeliveryIcon from "components/Icons/DeliveryIcon";
@@ -11,21 +10,26 @@ import ToRoomIcon from "components/Icons/ToRoomIcon";
 import { updateOrderType } from "features/order/orderSlice";
 import { OrderType } from "pages/checkout/hooks/types.ts";
 import { useTranslation } from "react-i18next";
-import { Link, useParams } from "react-router-dom";
+import { Link, useNavigate, useParams } from "react-router-dom";
 import { useGetRestaurantDetailsQuery } from "redux/api/others";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import styles from "./restaurant.module.css";
 import ScheduleOrderIcon from "components/Icons/ScheduleOrderIcon";
 import ProText from "components/ProText";
+import { GiftTypeBottomSheet } from "components/CustomBottomSheet/GiftTypeBottomSheet";
+import { useState } from "react";
 
 export default function RestaurantServices() {
   const { t } = useTranslation();
   const { isRTL } = useAppSelector((state) => state.locale);
   const { subdomain } = useParams();
+  const navigate = useNavigate();
   const dispatch = useAppDispatch();
   const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain, {
     skip: !subdomain,
   });
+  const [isGiftTypeBottomSheetOpen, setIsGiftTypeBottomSheetOpen] =
+    useState(false);
 
   const {
     dineIn,
@@ -188,12 +192,19 @@ export default function RestaurantServices() {
   return (
     <div className={getGridClass()}>
       {services?.map((s) => {
+        const isGift = s?.id === OrderType.Gift;
         return (
           <Link
-            to={s?.href}
+            to={isGift ? "#" : s?.href}
             key={s?.id}
-            onClick={() => {
-              dispatch(updateOrderType(s?.id));
+            onClick={(e) => {
+              if (isGift) {
+                e.preventDefault();
+                dispatch(updateOrderType(s?.id));
+                setIsGiftTypeBottomSheetOpen(true);
+              } else {
+                dispatch(updateOrderType(s?.id));
+              }
             }}
             style={{
               width: "100%",
@@ -225,7 +236,7 @@ export default function RestaurantServices() {
                       lineHeight: "140%",
                       letterSpacing: "0%",
                       verticalAlign: "middle",
-                      color: "#434E5C"
+                      color: "#434E5C",
                     }}
                   >
                     {s?.title}
@@ -242,6 +253,14 @@ export default function RestaurantServices() {
           </Link>
         );
       })}
+      <GiftTypeBottomSheet
+        isOpen={isGiftTypeBottomSheetOpen}
+        onClose={() => setIsGiftTypeBottomSheetOpen(false)}
+        onSave={() => {
+          setIsGiftTypeBottomSheetOpen(false);
+          navigate(`/${subdomain}/menu?orderType=${OrderType.Gift}`);
+        }}
+      />
     </div>
   );
 }

src/pages/restaurant/restaurant.module.css

@@ -145,7 +145,7 @@
     display: grid;
     gap: 16px;
     padding: 0 1rem;
-    margin: 10px 0;
+    margin: 24px 0 10px 0;
   }
 }