GiftBottomSheet: update phone number

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",