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"