working on delivery flow

src/components/ProPhoneInput.tsx

@@ -22,9 +22,41 @@ 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;
+      }}
     >
+      <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"}
@@ -40,8 +72,11 @@ const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({ phone, setPhone }) =>
           paddingRight: "50px",
           borderColor: themeName === "light" ? "#d9d9d9" : "#363636",
         }}
-          placeholder={t("login.mobileNumber")}
-          value={phone}
+        placeholder={placeholder}
+        value={value || phone}
+        onChange={(value) => {
+          onChange?.(value);
+        }}
         buttonStyle={{
           backgroundColor: "transparent",
           border: 0,
@@ -56,7 +91,6 @@ const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({ phone, setPhone }) =>
             top: -25,
           }),
         }}
-          onBlur={(e) => setPhone(e.target.value)}
         autocompleteSearch
         inputProps={{
           id: "phone", // Required for accessibility & autofill
@@ -70,7 +104,6 @@ const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({ phone, setPhone }) =>
         }}
       />
     </div>
-    </Form.Item>
   );
 };
 

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 };
 }