working on gift flow

src/pages/cart/components/specialRequest/SpecialRequestCard.tsx

@@ -1,13 +1,13 @@
-import { updateSpecialRequest, selectCart } from "features/order/orderSlice.ts";
-import { message, Input } from "antd";
+import { RightOutlined } from "@ant-design/icons";
+import { Input } from "antd";
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import { selectCart, updateSpecialRequest } from "features/order/orderSlice.ts";
+import useBreakPoint from "hooks/useBreakPoint.ts";
+import { BottomSheet } from "pages/cart/components/specialRequest/BottomSheet.tsx";
+import { Dialog } from "pages/cart/components/specialRequest/Dialog.tsx";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
-import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
-import { RightOutlined } from "@ant-design/icons";
-import { BottomSheet } from "pages/cart/components/specialRequest/BottomSheet.tsx";
-import { useState } from "react";
-import useBreakPoint from "hooks/useBreakPoint.ts";
-import { Dialog } from "pages/cart/components/specialRequest/Dialog.tsx";
 import styles from "./SpecialRequestCard.module.css";
 
 export default function SpecialRequestCard() {
@@ -20,7 +20,6 @@ export default function SpecialRequestCard() {
 
   const handleSpecialRequestSave = (value: string) => {
     dispatch(updateSpecialRequest(value));
-    message.success(t("cart.specialRequest") + " " + t("updatedSuccessfully"));
   };
 
   const handleSpecialRequestClose = () => {

src/pages/checkout/components/AddressSummary.tsx

@@ -19,7 +19,7 @@ export const AddressSummary = () => {
   const dispatch = useAppDispatch();
   const { location } = useAppSelector(selectCart);
   const [isMapBottomSheetOpen, setIsMapBottomSheetOpen] = useState(false);
-  const orderType = useMemo(() => localStorage.getItem("orderType"), []); // Default to delivery for now
+  const { orderType } = useAppSelector(selectCart) // Default to delivery for now
 
   const handleLocationSave = useCallback(
     (locationString: string) => {

src/pages/checkout/components/BriefMenu.tsx

@@ -11,7 +11,7 @@ import styles from "../../address/address.module.css";
 export default function BriefMenu() {
   const { tables, items } = useAppSelector(selectCart);
   const { t } = useTranslation();
-  const orderType = useMemo(() => localStorage.getItem("orderType"), []);
+  const { orderType } = useAppSelector(selectCart)
 
   const menuItems = useMemo(
     () =>

src/pages/checkout/components/CheckoutButton.tsx

@@ -1,13 +1,15 @@
 import { Button, FormInstance } from "antd";
+import { selectCart } from "features/order/orderSlice";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
+import { useAppSelector } from "redux/hooks";
 import styles from "../../address/address.module.css";
 import useOrder from "../hooks/useOrder";
 
 export default function CheckoutButton({ form }: { form: FormInstance }) {
   const { t } = useTranslation();
-  const orderType = useMemo(() => localStorage.getItem("orderType"), []);
+  const { orderType } = useAppSelector(selectCart)
   const navigate = useNavigate();
   const { handleCreateOrder } = useOrder();
   const { id } = useParams();

src/pages/checkout/components/GiftDetails.tsx

@@ -23,8 +23,7 @@ export const GiftDetails = () => {
   const { giftDetails } = useAppSelector(selectCart);
   const [isOfficeBottomSheetOpen, setIsOfficeBottomSheetOpen] = useState(false);
   const [isInfoButtonSheetOpen, setIsInfoButtonSheetOpen] = useState(false);
-
-  const orderType = useMemo(() => localStorage.getItem("orderType"), []);
+  const { orderType } = useAppSelector(selectCart);
 
   const handleGiftDetailsSave = useCallback(
     (giftDetailsData: GiftDetailsType) => {

src/pages/checkout/components/OfficeDetails.tsx

@@ -20,7 +20,7 @@ export const OfficeDetails = () => {
   const { officeDetails } = useAppSelector(selectCart);
   const [isOfficeBottomSheetOpen, setIsOfficeBottomSheetOpen] = useState(false);
 
-  const orderType = useMemo(() => localStorage.getItem("orderType"), []);
+  const { orderType } = useAppSelector(selectCart)
 
   const handleOfficeDetailsSave = useCallback(
     (officeDetailsData: OfficeDetailsType) => {

src/pages/checkout/components/RoomDetails.tsx

@@ -5,9 +5,9 @@ import GoldenHouseIcon from "components/Icons/address/GoldenHouseIcon";
 import RoomServiceIcon from "components/Icons/address/RoomServiceIcon";
 import ProText from "components/ProText";
 import {
-  RoomDetailsType,
-  selectCart,
-  updateRoomDetails,
+    RoomDetailsType,
+    selectCart,
+    updateRoomDetails,
 } from "features/order/orderSlice";
 import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -20,7 +20,7 @@ export const RoomDetails = () => {
   const { roomDetails } = useAppSelector(selectCart);
   const [isRoomBottomSheetOpen, setIsRoomBottomSheetOpen] = useState(false);
 
-  const orderType = useMemo(() => localStorage.getItem("orderType"), []);
+  const { orderType } = useAppSelector(selectCart)
 
   const handleRoomDetailsSave = useCallback(
     (roomDetailsData: RoomDetailsType) => {

src/pages/checkout/components/phoneCard.tsx

@@ -7,21 +7,30 @@ import { useAppDispatch, useAppSelector } from "redux/hooks";
 export default function PhoneCard() {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const { phone } = useAppSelector(selectCart);
+  const { phone, orderType } = useAppSelector(selectCart);
+
   return (
-    <>
-      <ProInputCard title={t("checkout.phoneNumber")}>
-        <Form.Item name="phone" required rules={[{ required: true, message: t("checkout.pleaseEnterPhoneNumber") }]}>
-          <Input
-            placeholder={t("checkout.phoneNumber")}
-            size="large"
-            autoFocus={false}
-            style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
-            value={phone}
-            onChange={(e) => dispatch(updatePhone(e.target.value))}
-          />
-        </Form.Item>
-      </ProInputCard>
-    </>
+    orderType !== "gift" && (
+      <>
+        <ProInputCard title={t("checkout.phoneNumber")}>
+          <Form.Item
+            name="phone"
+            required
+            rules={[
+              { required: true, message: t("checkout.pleaseEnterPhoneNumber") },
+            ]}
+          >
+            <Input
+              placeholder={t("checkout.phoneNumber")}
+              size="large"
+              autoFocus={false}
+              style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
+              value={phone}
+              onChange={(e) => dispatch(updatePhone(e.target.value))}
+            />
+          </Form.Item>
+        </ProInputCard>
+      </>
+    )
   );
 }

src/pages/checkout/hooks/useOrder.ts

@@ -5,11 +5,12 @@ import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 import { useCreateOrderMutation } from "redux/api/others";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { PAYMENT_CONFIRMATION_URL } from "utils/constants";
 import { Customer } from "../../otp/types";
 
 export default function useOrder() {
   const dispatch = useAppDispatch();
-  const router = useNavigate();
+  const navigate = useNavigate();
   const { t } = useTranslation();
   const { id } = useParams();
   const restaurantID = localStorage.getItem("restaurantID");
@@ -25,19 +26,22 @@ export default function useOrder() {
     phone,
     estimateTime,
     officeDetails,
+    orderType,
+    giftDetails,
   } = useAppSelector(selectCart);
 
   const [createOrder] = useCreateOrderMutation();
 
   const handleCreateOrder = useCallback(() => {
     createOrder({
-      phone: mobilenumber || phone,
+      phone: mobilenumber || phone || giftDetails?.senderPhone,
       couponID: coupon,
       discountAmount: 0,
       comment: specialRequest,
       timeslot: "",
       table_id: tables,
-      deliveryType: "table",
+      deliveryType: orderType,
+      dineType: orderType,
       type: "table-pickup",
       user_id: id,
       restorant_id: restaurantID,
@@ -61,13 +65,33 @@ export default function useOrder() {
       ),
       useWallet: 0,
       tip,
+      ...(orderType === "gift"
+        ? {
+            receiverName: giftDetails?.receiverName,
+            receiverPhone: giftDetails?.receiverPhone,
+            specialMessage: giftDetails?.message,
+            keepNameSecret: giftDetails?.isSecret,
+            senderEmail: giftDetails?.senderEmail,
+            senderPhone: giftDetails?.senderPhone,
+            senderName: giftDetails?.senderName,
+          }
+        : {}),
     })
       .then((res: any) => {
         if (res.error)
           message.error(res.error.data.message || t("order.createOrderFailed"));
         else {
+          if (orderType === "gift")
+            // navigate(`/${PAYMENT_CONFIRMATION_URL}/${res.data.result.orderID}`, {
+            //   replace: false,
+            // });
+            window.location.href = `${PAYMENT_CONFIRMATION_URL}/${res.data.result.orderID}`;
+          // window.open(
+          //   `${PAYMENT_CONFIRMATION_URL}/${res.data.result.orderID}`,
+          // );
+          else navigate(`/${id}/order/${res.data.result.orderID}`);
           dispatch(clearCart());
-          router(`/${id}/order/${res.data.result.orderID}`);
+          localStorage.setItem("orderID", res.data.result.orderID);
         }
       })
       .catch((error: any) => {
@@ -77,9 +101,17 @@ export default function useOrder() {
     createOrder,
     mobilenumber,
     phone,
+    giftDetails?.senderPhone,
+    giftDetails?.receiverName,
+    giftDetails?.receiverPhone,
+    giftDetails?.message,
+    giftDetails?.isSecret,
+    giftDetails?.senderEmail,
+    giftDetails?.senderName,
     coupon,
     specialRequest,
     tables,
+    orderType,
     id,
     restaurantID,
     items,
@@ -88,8 +120,8 @@ export default function useOrder() {
     estimateTime,
     tip,
     t,
+    navigate,
     dispatch,
-    router,
   ]);
   return { handleCreateOrder };
 }

src/pages/menu/components/ResponsiveServices.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { Button, Grid } from "antd";
+import { Button } from "antd";
 import DineInIcon from "components/Icons/DineInIcon";
 import DownIcon from "components/Icons/DownIcon";
 import PickupIcon from "components/Icons/PickupIcon";
+import useBreakPoint from "hooks/useBreakPoint";
 import styles from "../menu.module.css";
 
 interface ResponsiveServicesProps {
@@ -17,13 +18,12 @@ interface ResponsiveServicesProps {
   };
 }
 
-const { useBreakpoint } = Grid;
 
 export default function ResponsiveServices({ orderType, translations }: ResponsiveServicesProps) {
-  const { xs } = useBreakpoint();
+  const { isMobile } = useBreakPoint();
   
   // Hide pickup service if screen width is less than 400px (insufficient for 3 services)
-  const shouldHidePickup = xs;
+  const shouldHidePickup = isMobile;
   
   return (
     <div className={styles.services}>

src/pages/order/page.tsx

@@ -33,8 +33,6 @@ export default function OrderPage() {
     },
   );
 
-  console.log(orderDetails);
-
   return (
     <>
       <ProHeader>{t("order.title")}</ProHeader>

src/pages/restaurant/RestaurantServices.tsx

@@ -9,9 +9,10 @@ import SendGiftIcon from "components/Icons/SendGiftIcon";
 import ToOfficeIcon from "components/Icons/ToOfficeIcon";
 import ToRoomIcon from "components/Icons/ToRoomIcon";
 import ProTitle from "components/ProTitle";
+import { updateOrderType } from "features/order/orderSlice";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import { useAppSelector } from "redux/hooks";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
 import styles from "./restaurant.module.css";
 
 interface RestaurantServicesProps {
@@ -37,7 +38,8 @@ export default function RestaurantServices({
   const { t } = useTranslation();
   const { isRTL } = useAppSelector((state) => state.locale);
   const id = localStorage.getItem("restaurantName");
-
+  const dispatch = useAppDispatch();
+  
   const services = [
     ...((dineIn && [
       {
@@ -161,7 +163,7 @@ export default function RestaurantServices({
             to={s?.href}
             key={s?.id}
             onClick={() => {
-              localStorage.setItem("orderType", s?.id);
+              dispatch(updateOrderType(s?.id));
             }}
             style={{
               width: "100%",