use ProPhoneInput

src/pages/checkout/components/phoneCard.tsx

@@ -1,5 +1,5 @@
-import { Form, Input } from "antd";
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import ProPhoneInput from "components/ProPhoneInput";
 import { selectCart, updatePhone } from "features/order/orderSlice";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks";
@@ -13,22 +13,10 @@ export default function PhoneCard() {
     orderType !== "gift" && (
       <>
         <ProInputCard title={t("checkout.phoneNumber")}>
-          <Form.Item
-            name="phone"
-            required
-            rules={[
-              { required: true, message: t("checkout.pleaseEnterPhoneNumber") },
-            ]}
-          >
-            <Input
-              placeholder={t("checkout.phoneNumber")}
-              size="large"
-              autoFocus={false}
-              style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
-              value={phone}
-              onChange={(e) => dispatch(updatePhone(e.target.value))}
-            />
-          </Form.Item>
+          <ProPhoneInput
+            phone={phone}
+            setPhone={(phone) => dispatch(updatePhone(phone))}
+          />
         </ProInputCard>
       </>
     )