working on gift flow

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>
+      </>
+    )
   );
 }