GiftBottomSheet: update phone number

src/components/CustomBottomSheet/GiftBottomSheet.tsx

@@ -1,4 +1,5 @@
 import { Button, Checkbox, Form, Input } from "antd";
+import ProPhoneInput from "components/ProPhoneInput";
 import { GiftDetailsType } from "features/order/orderSlice";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -70,21 +71,13 @@ export function GiftBottomSheet({
             autoFocus={false}
           />
         </Form.Item>
-        <Form.Item
-          name="receiverPhone"
+
+        <ProPhoneInput
+          phone={giftForm.getFieldValue("receiverPhone")}
+          setPhone={(phone) => giftForm.setFieldValue("receiverPhone", phone)}
+          propName="receiverPhone"
           label={t("address.receiverPhone")}
-          rules={[{ required: true, message: "" }]}
-          colon={false}
-        >
-          <Input
-            placeholder={t("address.receiverPhone")}
-            size="large"
-            style={{
-              fontSize: 14,
-            }}
-            autoFocus={false}
-          />
-        </Form.Item>
+        />
 
         <Form.Item name="message" label={t("address.message")}>
           <TextArea
@@ -115,21 +108,12 @@ export function GiftBottomSheet({
           />
         </Form.Item>
 
-        <Form.Item
-          name="senderPhone"
-          label={t("address.senderPhone")}
-          rules={[{ required: true, message: "" }]}
-          colon={false}
-        >
-          <Input
-            placeholder={t("address.senderPhone")}
-            size="large"
-            style={{
-              fontSize: 14,
-            }}
-            autoFocus={false}
-          />
-        </Form.Item>
+        <ProPhoneInput
+          phone={giftForm.getFieldValue("senderPhone")}
+          setPhone={(phone) => giftForm.setFieldValue("senderPhone", phone)}
+          propName="senderPhone"
+          label={t("address.receiverPhone")}
+        />
 
         <Form.Item
           name="senderEmail"

src/components/ProPhoneInput.tsx

@@ -9,17 +9,19 @@ import { ProBlack1 } from "ThemeConstants";
 interface ProPhoneInput extends TitleProps {
   phone: string;
   setPhone: (phone: string) => void;
+  propName?: string
+  label?: string
 }
 
-const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({ phone, setPhone }) => {
+const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({ phone, setPhone, propName, label }) => {
   const { t } = useTranslation();
   const { themeName } = useAppSelector((state) => state.theme);
   const { isRTL } = useAppSelector((state) => state.locale);
 
   return (
     <Form.Item
-      name="phone"
-      label={t("login.phone")}
+      name={propName}
+      label={label}
       rules={[
         { required: true, message: "" },
         {
@@ -43,18 +45,22 @@ const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({ phone, setPhone }) =>
         themeName={themeName}
         isRTL={isRTL}
         placeholder={t("login.mobileNumber")}
+        propName={propName}
+        label={label}
       />
     </Form.Item>
   );
 };
 
-const PhoneInputWrapper = ({ phone, themeName, isRTL, placeholder, value, onChange }: {
+export const PhoneInputWrapper = ({ phone, themeName, isRTL, placeholder, value, onChange, propName, label }: {
   phone: string;
   themeName: string;
   isRTL: boolean;
   placeholder: string;
   value?: string;
   onChange?: (value: string) => void;
+  propName?: string;
+  label?: string;
 }) => {
   return (
     <div className="pro-phone-input">
@@ -72,7 +78,7 @@ const PhoneInputWrapper = ({ phone, themeName, isRTL, placeholder, value, onChan
           paddingRight: "50px",
           borderColor: themeName === "light" ? "#d9d9d9" : "#363636",
         }}
-        placeholder={placeholder}
+        placeholder={label || placeholder}
         value={value || phone}
         onChange={(value) => {
           onChange?.(value);
@@ -93,8 +99,8 @@ const PhoneInputWrapper = ({ phone, themeName, isRTL, placeholder, value, onChan
         }}
         autocompleteSearch
         inputProps={{
-          id: "phone", // Required for accessibility & autofill
-          name: "phone",
+          id: propName || "phone", // Required for accessibility & autofill
+          name: propName || "phone",
           required: true,
           autoFocus: false,
           autoComplete: "tel",