From 2af2c3482648b5d5c0231c9d25e1d6fb4c170b87 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Tue, 2 Dec 2025 01:51:14 +0300
Subject: [PATCH] remove extra bottom sheet in checkout page make all them
 inside the page iteslef

---
 src/components/InputCard.tsx                  |  43 +++++++
 src/components/ProPhoneInput.tsx              |  10 +-
 src/features/order/orderSlice.ts              |  10 ++
 .../checkout/components/CarPlateCard.tsx      |  37 ++++++
 src/pages/checkout/components/GiftCard.tsx    | 114 ++++++++++++++++++
 src/pages/checkout/hooks/useOrder.ts          |  34 +++---
 src/pages/checkout/page.tsx                   |  32 +++--
 src/redux/api/others.ts                       |  29 +++--
 8 files changed, 266 insertions(+), 43 deletions(-)
 create mode 100644 src/components/InputCard.tsx
 create mode 100644 src/pages/checkout/components/CarPlateCard.tsx
 create mode 100644 src/pages/checkout/components/GiftCard.tsx

diff --git a/src/components/InputCard.tsx b/src/components/InputCard.tsx
new file mode 100644
index 0000000..11e1988
--- /dev/null
+++ b/src/components/InputCard.tsx
@@ -0,0 +1,43 @@
+import { Form, Input } from "antd";
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import { updateOrder } from "features/order/orderSlice";
+import { useAppDispatch } from "redux/hooks";
+
+interface InputCardProps {
+  title: string;
+  name: string;
+  placeholder: string;
+  value: string;
+}
+
+export default function InputCard({
+  title,
+  name,
+  placeholder,
+  value,
+}: InputCardProps) {
+  const dispatch = useAppDispatch();
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(updateOrder({ [name]: e.target.value }));
+  };
+  return (
+    <>
+      <ProInputCard title={title} dividerStyle={{ margin: "5px 0 0 0" }}>
+        <Form.Item
+          label={title}
+          name={name}
+          style={{ position: "relative", top: -5 }}
+        >
+          <Input
+            placeholder={placeholder}
+            size="large"
+            autoFocus={false}
+            style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
+            value={value}
+            onChange={handleChange}
+          />
+        </Form.Item>
+      </ProInputCard>
+    </>
+  );
+}
diff --git a/src/components/ProPhoneInput.tsx b/src/components/ProPhoneInput.tsx
index 2b0b4f2..554fc20 100644
--- a/src/components/ProPhoneInput.tsx
+++ b/src/components/ProPhoneInput.tsx
@@ -1,6 +1,5 @@
 import { Form } from "antd";
 import useFormInstance from "antd/es/form/hooks/useFormInstance";
-import { TitleProps } from "antd/es/typography/Title";
 import { PhoneNumberUtil } from "google-libphonenumber";
 import { FunctionComponent, useMemo } from "react";
 import { useTranslation } from "react-i18next";
@@ -8,16 +7,20 @@ import PhoneInput from "react-phone-input-2";
 import { useAppSelector } from "redux/hooks";
 import { ProBlack1 } from "ThemeConstants";
 
-interface ProPhoneInput extends TitleProps {
+interface ProPhoneInput {
   propName?: string;
   label?: string;
   getValueCallback?: (value: string) => void;
+  value?: string;
+  onChange?: (value: string) => void;
 }
 
 const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({
   propName,
   label,
   getValueCallback,
+  value,
+  onChange,
 }) => {
   const form = useFormInstance();
   const { t } = useTranslation();
@@ -51,8 +54,9 @@ const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({
         onChange={(value) => {
           form.setFieldValue(propName, value);
           getValueCallback?.(value);
+          onChange?.(value);
         }}
-        phone={form.getFieldValue(propName)}
+        phone={value || form.getFieldValue(propName)}
         themeName={themeName}
         placeholder={t("login.mobileNumber")}
         propName={propName}
diff --git a/src/features/order/orderSlice.ts b/src/features/order/orderSlice.ts
index 00c54fc..020f327 100644
--- a/src/features/order/orderSlice.ts
+++ b/src/features/order/orderSlice.ts
@@ -68,6 +68,7 @@ interface CartState {
   pickupDate: string;
   pickupTime: string;
   pickupType: string;
+  order: any;
 }
 
 // localStorage keys
@@ -97,6 +98,7 @@ export const CART_STORAGE_KEYS = {
   PICKUP_DATE: "fascano_pickup_date",
   PICKUP_TIME: "fascano_pickup_time",
   PICKUP_TYPE: "fascano_pickup_type",
+  ORDER: "fascano_order",
 } as const;
 
 // Utility functions for localStorage
@@ -182,6 +184,7 @@ const initialState: CartState = {
   pickupDate: getFromLocalStorage(CART_STORAGE_KEYS.PICKUP_DATE, ""),
   pickupTime: getFromLocalStorage(CART_STORAGE_KEYS.PICKUP_TIME, ""),
   pickupType: getFromLocalStorage(CART_STORAGE_KEYS.PICKUP_TYPE, ""),
+  order: getFromLocalStorage(CART_STORAGE_KEYS.ORDER, null),
 };
 
 const orderSlice = createSlice({
@@ -623,6 +626,12 @@ const orderSlice = createSlice({
         );
       }
     },
+    updateOrder(state, action: PayloadAction<any>) {
+      state.order = action.payload;
+      if (typeof window !== "undefined") {
+        localStorage.setItem(CART_STORAGE_KEYS.ORDER, JSON.stringify(state.order));
+      }
+    },
   },
 });
 
@@ -659,6 +668,7 @@ export const {
   updatePickupDate,
   updatePickupTime,
   updatePickUpType,
+  updateOrder,
 } = orderSlice.actions;
 
 // Tax calculation helper functions
diff --git a/src/pages/checkout/components/CarPlateCard.tsx b/src/pages/checkout/components/CarPlateCard.tsx
new file mode 100644
index 0000000..9debadd
--- /dev/null
+++ b/src/pages/checkout/components/CarPlateCard.tsx
@@ -0,0 +1,37 @@
+import { Form, Input } from "antd";
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import { updatePlateCar } from "features/order/orderSlice";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+
+export default function CarPlateCard() {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+
+  const plateCar = useAppSelector((state) => state.order.plateCar);
+  return (
+    <>
+      <ProInputCard
+        title={t("cart.plateNumber")}
+        dividerStyle={{ margin: "5px 0 0 0" }}
+      >
+        <Form.Item
+          label={t("cart.plateNumber")}
+          name="plateNumber"
+          style={{ position: "relative", top: -5 }}
+        >
+          <Input
+            placeholder={t("cart.plateNumber")}
+            size="large"
+            autoFocus={false}
+            style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
+            value={plateCar}
+            onChange={(e) => {
+              dispatch(updatePlateCar(e.target.value));
+            }}
+          />
+        </Form.Item>
+      </ProInputCard>
+    </>
+  );
+}
diff --git a/src/pages/checkout/components/GiftCard.tsx b/src/pages/checkout/components/GiftCard.tsx
new file mode 100644
index 0000000..61c8726
--- /dev/null
+++ b/src/pages/checkout/components/GiftCard.tsx
@@ -0,0 +1,114 @@
+import { Checkbox, Form, Input } from "antd";
+import ProInputCard from "components/ProInputCard/ProInputCard";
+import ProPhoneInput from "components/ProPhoneInput";
+import ProText from "components/ProText";
+import { selectCart, updateOrder } from "features/order/orderSlice";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+
+const { TextArea } = Input;
+
+export function GiftCard() {
+  const { t } = useTranslation();
+  const { order } = useAppSelector(selectCart);
+  const dispatch = useAppDispatch();
+  return (
+    <>
+    <ProInputCard title={t("address.giftDetails")}> 
+      
+
+      <ProPhoneInput
+        propName="receiverPhone"
+        label={t("address.receiverPhone")}
+        value={order?.receiverPhone}
+        onChange={(e) => {
+          dispatch(updateOrder({ ...order, receiverPhone: e }));
+        }}
+      />
+
+      <Form.Item name="message" label={t("address.message")}>
+        <TextArea
+          placeholder={t("address.message")}
+          size="large"
+          style={{
+            fontSize: 14,
+            borderRadius: 10,
+          }}
+          rows={2}
+          autoFocus={false}
+          value={order?.senderName}
+          onChange={(e) => {
+            dispatch(updateOrder({ ...order, senderName: e.target.value }));
+          }}
+        />
+      </Form.Item>
+
+      <Form.Item
+        name="senderName"
+        label={t("address.senderName")}
+        rules={[{ required: true, message: "" }]}
+        colon={false}
+      >
+        <Input
+          placeholder={t("address.senderName")}
+          size="large"
+          style={{
+            fontSize: 14,
+            height: 50,
+          }}
+          autoFocus={false}
+          value={order?.senderPhone}
+          onChange={(e) => {
+            dispatch(updateOrder({ ...order, senderPhone: e.target.value }));
+          }}
+        />
+      </Form.Item>
+
+      <ProPhoneInput
+        propName="senderPhone"
+        label={t("address.receiverPhone")}
+      />
+
+      <Form.Item
+        name="senderEmail"
+        label={t("address.senderEmail")}
+        rules={[{ required: true, message: "" }]}
+        colon={false}
+      >
+        <Input
+          placeholder={t("address.senderEmail")}
+          size="large"
+          style={{
+            fontSize: 14,
+            height: 50,
+          }}
+          autoFocus={false}
+          value={order?.senderEmail}
+          onChange={(e) => {
+            dispatch(updateOrder({ ...order, senderEmail: e.target.value }));
+          }}
+        />
+      </Form.Item>
+
+      <Form.Item
+        name="isSecret"
+        rules={[{ required: true, message: "" }]}
+        colon={false}
+      >
+        <Checkbox
+          style={{
+            fontSize: 14,
+          }}
+          autoFocus={false}
+          checked={order?.isSecret}
+          onChange={(e) => {
+            dispatch(updateOrder({ ...order, isSecret: e.target.checked }));
+          }}
+        >
+          <ProText>{t("address.keepMyNameSecret")}</ProText>
+        </Checkbox>
+      </Form.Item>
+    </ProInputCard>
+    </>
+  );
+}
diff --git a/src/pages/checkout/hooks/useOrder.ts b/src/pages/checkout/hooks/useOrder.ts
index cca6219..23a83a5 100644
--- a/src/pages/checkout/hooks/useOrder.ts
+++ b/src/pages/checkout/hooks/useOrder.ts
@@ -13,6 +13,7 @@ import { useCreateOrderMutation } from "redux/api/others";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
 import { PAYMENT_CONFIRMATION_URL } from "utils/constants";
 import { Customer } from "../../otp/types";
+import { Variant } from "utils/types/appTypes";
 
 export default function useOrder() {
   const dispatch = useAppDispatch();
@@ -31,15 +32,14 @@ export default function useOrder() {
     specialRequest,
     phone,
     estimateTime,
-    officeDetails,
     orderType,
-    giftDetails,
     location,
     discount,
     plateCar,
     pickupTime,
     pickupDate,
     pickupType,
+    order,
   } = useAppSelector(selectCart);
   const highestLoyaltyItem = useAppSelector(selectHighestPricedLoyaltyItem);
   const { useLoyaltyPoints } = useAppSelector(selectCart);
@@ -70,7 +70,7 @@ export default function useOrder() {
     });
 
     createOrder({
-      phone: mobilenumber || phone || giftDetails?.senderPhone,
+      phone: mobilenumber || phone || order?.senderPhone,
       comment: specialRequest,
       delivery_method: getDeliveryMethod(),
       timeslot: "",
@@ -85,9 +85,10 @@ export default function useOrder() {
         extras: i.extras?.map((e) => e.id) || [],
         extrasgroup: i.extrasgroup || [],
         order_item_comment: i.comment || "",
-        variant: i.variant?.id || "",
+        variant: (i.variant as Variant)?.id || "",
       })),
-      office_no: officeDetails?.officeNo || "",
+      office_no: order?.officeNumber || "",
+      room_no: order?.roomNumber || "",
       vatvalue: 0,
       ...(discount.isDiscount ? { couponID: coupon } : {}),
       ...(discount.isGift ? { discountGiftCode: coupon } : {}),
@@ -111,13 +112,13 @@ export default function useOrder() {
       delivery_address: location?.address,
       ...(orderType === OrderType.Gift
         ? {
-            receiverName: giftDetails?.receiverName,
-            receiverPhone: giftDetails?.receiverPhone,
-            specialMessage: giftDetails?.message,
-            keepNameSecret: giftDetails?.isSecret,
-            senderEmail: giftDetails?.senderEmail,
-            senderPhone: giftDetails?.senderPhone,
-            senderName: giftDetails?.senderName,
+            receiverName: order?.receiverName,
+            receiverPhone: order?.receiverPhone,
+            specialMessage: order?.message,
+            keepNameSecret: order?.isSecret,
+            senderEmail: order?.senderEmail,
+            senderPhone: order?.senderPhone,
+            senderName: order?.senderName,
             dineType: orderType,
           }
         : {}),
@@ -166,20 +167,13 @@ export default function useOrder() {
     createOrder,
     mobilenumber,
     phone,
-    giftDetails?.senderPhone,
-    giftDetails?.receiverName,
-    giftDetails?.receiverPhone,
-    giftDetails?.message,
-    giftDetails?.isSecret,
-    giftDetails?.senderEmail,
-    giftDetails?.senderName,
     specialRequest,
     getDeliveryMethod,
     tables,
     orderType,
     restaurantID,
     items,
-    officeDetails?.officeNo,
+    order,
     discount.isDiscount,
     discount.isGift,
     discount.value,
diff --git a/src/pages/checkout/page.tsx b/src/pages/checkout/page.tsx
index da51b7d..4e90c29 100644
--- a/src/pages/checkout/page.tsx
+++ b/src/pages/checkout/page.tsx
@@ -10,14 +10,15 @@ import { AddressSummary } from "./components/AddressSummary";
 import BriefMenu from "./components/BriefMenu";
 import CheckoutButton from "./components/CheckoutButton";
 import { GiftDetails } from "./components/GiftDetails";
-import { OfficeDetails } from "./components/OfficeDetails";
-import { RoomDetails } from "./components/RoomDetails";
 import PhoneCard from "./components/phoneCard";
+import InputCard from "components/InputCard";
+import { OrderType } from "./hooks/types";
+import { GiftCard } from "./components/GiftCard";
 
 export default function CheckoutPage() {
   const { t } = useTranslation();
   const [form] = Form.useForm();
-  const { phone } = useAppSelector(selectCart);
+  const { phone, order, orderType } = useAppSelector(selectCart);
   return (
     <>
       <Form
@@ -31,11 +32,28 @@ export default function CheckoutPage() {
           <ProHeader>{t("checkout.title")}</ProHeader>
           <Layout.Content className={styles.checkoutContainer}>
             <AddressSummary />
-            <RoomDetails />
-            <OfficeDetails />
-            <GiftDetails />
-            <BriefMenu />
             <PhoneCard />
+            {orderType === OrderType.ToRoom && (
+              <InputCard
+                title={t("address.roomNumber")}
+                name="roomNumber"
+                placeholder={t("address.roomNumber")}
+                value={order?.roomNumber}
+              />
+            )}
+            {orderType === OrderType.ToOffice && (
+              <InputCard
+                title={t("address.officeNumber")}
+                name="officeNumber"
+                placeholder={t("address.officeNumber")}
+                value={order?.officeNumber}
+              />
+            )}
+            {orderType === OrderType.Gift && <GiftCard />}
+            {/* <RoomDetails />
+            <OfficeDetails /> */}
+            {/* <GiftDetails /> */}
+            <BriefMenu />
             <PaymentMethods />
             <OrderSummary />
           </Layout.Content>
diff --git a/src/redux/api/others.ts b/src/redux/api/others.ts
index 81acca5..eb1f4d7 100644
--- a/src/redux/api/others.ts
+++ b/src/redux/api/others.ts
@@ -13,7 +13,11 @@ import {
 
 import { OrderDetails } from "pages/checkout/hooks/types";
 import menuParser from "pages/menu/helper";
-import { DiscountResultType, RestaurantDetails, UserType } from "utils/types/appTypes";
+import {
+  DiscountResultType,
+  RestaurantDetails,
+  UserType,
+} from "utils/types/appTypes";
 import { baseApi } from "./apiSlice";
 
 export const branchApi = baseApi.injectEndpoints({
@@ -27,7 +31,9 @@ export const branchApi = baseApi.injectEndpoints({
         },
       }),
       transformResponse: (response: any) => {
-        return response?.result?.restaurants?.[0];
+        return response?.result?.restaurants?.find(
+          (restaurant: RestaurantDetails) => restaurant.distance === 595,
+        );
       },
       providesTags: ["Restaurant"],
     }),
@@ -124,18 +130,15 @@ export const branchApi = baseApi.injectEndpoints({
         return response.result;
       },
     }),
-    getUserDetails: builder.query<
-    UserType,
-    void
-  >({
-    query: () => ({
-      url: `${USER_DETAILS_URL}`,
-      method: "GET",
+    getUserDetails: builder.query<UserType, void>({
+      query: () => ({
+        url: `${USER_DETAILS_URL}`,
+        method: "GET",
+      }),
+      transformResponse: (response: any) => {
+        return response.result;
+      },
     }),
-    transformResponse: (response: any) => {
-      return response.result;
-    },
-  }),
     rateOrder: builder.mutation({
       query: ({
         orderID,