From b2c00ee27e1c61af4190a380abca529e448882bc Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Sun, 2 Nov 2025 19:54:38 +0300
Subject: [PATCH] working on delivery flow

---
 src/components/ProPhoneInput.tsx     | 125 +++++++++++++++++----------
 src/pages/checkout/hooks/useOrder.ts |  52 ++++++++++-
 2 files changed, 129 insertions(+), 48 deletions(-)

diff --git a/src/components/ProPhoneInput.tsx b/src/components/ProPhoneInput.tsx
index 8333306..4c0ba5d 100644
--- a/src/components/ProPhoneInput.tsx
+++ b/src/components/ProPhoneInput.tsx
@@ -22,56 +22,89 @@ const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({ phone, setPhone }) =>
       label={t("login.phone")}
       rules={[
         { required: true, message: "" },
-        { type: "number", message: "" },
+        {
+          validator: (_, value) => {
+            if (!value || value.length <= 3) {
+              return Promise.reject(new Error(""));
+            }
+            return Promise.resolve();
+          },
+        },
       ]}
+      normalize={(value) => {
+        if (value && setPhone) {
+          setPhone(value);
+        }
+        return value;
+      }}
     >
-      <div className="pro-phone-input">
-        <PhoneInput
-          country={"om"}
-          inputStyle={{
-            borderRadius: 1000,
-            height: 50,
-            width: "100%",
-            color: themeName === "light" ? "#000" : "#FFF",
-            backgroundColor: themeName === "light" ? "#FFF" : ProBlack1,
-            textAlign: isRTL ? "right" : "left",
-            direction: isRTL ? "rtl" : "ltr",
-            paddingLeft: "50px",
-            paddingRight: "50px",
-            borderColor: themeName === "light" ? "#d9d9d9" : "#363636",
-          }}
-          placeholder={t("login.mobileNumber")}
-          value={phone}
-          buttonStyle={{
-            backgroundColor: "transparent",
-            border: 0,
-            borderLeft: "1px solid #363636",
-            borderRadius: 0,
-            position: "relative",
-            ...(isRTL && {
-              top: -25,
-              right: 25,
-            }),
-            ...(!isRTL && {
-              top: -25,
-            }),
-          }}
-          onBlur={(e) => setPhone(e.target.value)}
-          autocompleteSearch
-          inputProps={{
-            id: "phone", // Required for accessibility & autofill
-            name: "phone",
-            required: true,
-            autoFocus: false,
-            autoComplete: "tel",
-            type: "tel",
-            inputMode: "numeric",
-            pattern: "[0-9]*",
-          }}
-        />
-      </div>
+      <PhoneInputWrapper
+        phone={phone}
+        themeName={themeName}
+        isRTL={isRTL}
+        placeholder={t("login.mobileNumber")}
+      />
     </Form.Item>
   );
 };
 
+const PhoneInputWrapper = ({ phone, themeName, isRTL, placeholder, value, onChange }: {
+  phone: string;
+  themeName: string;
+  isRTL: boolean;
+  placeholder: string;
+  value?: string;
+  onChange?: (value: string) => void;
+}) => {
+  return (
+    <div className="pro-phone-input">
+      <PhoneInput
+        country={"om"}
+        inputStyle={{
+          borderRadius: 1000,
+          height: 50,
+          width: "100%",
+          color: themeName === "light" ? "#000" : "#FFF",
+          backgroundColor: themeName === "light" ? "#FFF" : ProBlack1,
+          textAlign: isRTL ? "right" : "left",
+          direction: isRTL ? "rtl" : "ltr",
+          paddingLeft: "50px",
+          paddingRight: "50px",
+          borderColor: themeName === "light" ? "#d9d9d9" : "#363636",
+        }}
+        placeholder={placeholder}
+        value={value || phone}
+        onChange={(value) => {
+          onChange?.(value);
+        }}
+        buttonStyle={{
+          backgroundColor: "transparent",
+          border: 0,
+          borderLeft: "1px solid #363636",
+          borderRadius: 0,
+          position: "relative",
+          ...(isRTL && {
+            top: -25,
+            right: 25,
+          }),
+          ...(!isRTL && {
+            top: -25,
+          }),
+        }}
+        autocompleteSearch
+        inputProps={{
+          id: "phone", // Required for accessibility & autofill
+          name: "phone",
+          required: true,
+          autoFocus: false,
+          autoComplete: "tel",
+          type: "tel",
+          inputMode: "numeric",
+          pattern: "[0-9]*",
+        }}
+      />
+    </div>
+  );
+};
+
 export default ProPhoneInput;
diff --git a/src/pages/checkout/hooks/useOrder.ts b/src/pages/checkout/hooks/useOrder.ts
index 6ac1217..fee743d 100644
--- a/src/pages/checkout/hooks/useOrder.ts
+++ b/src/pages/checkout/hooks/useOrder.ts
@@ -34,6 +34,7 @@ export default function useOrder() {
     officeDetails,
     orderType,
     giftDetails,
+    location,
   } = useAppSelector(selectCart);
   const highestLoyaltyItem = useAppSelector(selectHighestPricedLoyaltyItem);
   const { useLoyaltyPoints } = useAppSelector(selectCart);
@@ -42,13 +43,24 @@ export default function useOrder() {
 
   const [createOrder] = useCreateOrderMutation();
 
+  const getDeliveryMethod = useCallback(() => {
+    if (orderType === OrderType.Delivery) return 1;
+    if (orderType === OrderType.Pickup) return 2;
+    if (orderType === OrderType.DineIn) return 3;
+    if (orderType === OrderType.Gift) return 10;
+    if (orderType === OrderType.ScheduledOrder) return 9;
+    if (orderType === OrderType.ToRoom) return 5;
+    if (orderType === OrderType.ToOffice) return 4;
+    return undefined;
+  }, [orderType]);
+
   const handleCreateOrder = useCallback(() => {
     createOrder({
       phone: mobilenumber || phone || giftDetails?.senderPhone,
       couponID: coupon,
       discountAmount: 0,
       comment: specialRequest,
-      delivery_method: "3",
+      delivery_method: getDeliveryMethod(),
       timeslot: "",
       table_id: tables[0],
       deliveryType: orderType,
@@ -73,6 +85,11 @@ export default function useOrder() {
       use_loylaty: useLoyaltyPoints && highestLoyaltyItem ? 1 : 0,
       useWallet: 0,
       tip,
+      userCoordinates:
+        location?.lat && location?.lng
+          ? `${location?.lat},${location?.lng}`
+          : "",
+      delivery_address: location?.address,
       ...(orderType === OrderType.Gift
         ? {
             receiverName: giftDetails?.receiverName,
@@ -106,6 +123,37 @@ export default function useOrder() {
       .catch((error: any) => {
         console.error("Create Order failed:", error);
       });
-  }, [createOrder, mobilenumber, phone, giftDetails?.senderPhone, giftDetails?.receiverName, giftDetails?.receiverPhone, giftDetails?.message, giftDetails?.isSecret, giftDetails?.senderEmail, giftDetails?.senderName, coupon, specialRequest, tables, orderType, restaurantID, items, officeDetails?.officeNo, user_uuid, estimateTime, orderPrice, useLoyaltyPoints, highestLoyaltyItem, tip, t, navigate, subdomain, dispatch]);
+  }, [
+    createOrder,
+    mobilenumber,
+    phone,
+    giftDetails?.senderPhone,
+    giftDetails?.receiverName,
+    giftDetails?.receiverPhone,
+    giftDetails?.message,
+    giftDetails?.isSecret,
+    giftDetails?.senderEmail,
+    giftDetails?.senderName,
+    coupon,
+    specialRequest,
+    tables,
+    orderType,
+    restaurantID,
+    items,
+    officeDetails?.officeNo,
+    user_uuid,
+    estimateTime,
+    orderPrice,
+    useLoyaltyPoints,
+    highestLoyaltyItem,
+    tip,
+    location?.lat,
+    location?.lng,
+    location?.address,
+    t,
+    navigate,
+    subdomain,
+    dispatch,
+  ]);
   return { handleCreateOrder };
 }