working on delivery flow

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;