@blocklet/payment-react 1.21.13 → 1.21.15

package/es/libs/validator.js

@@ -1,68 +1,179 @@
-import isPostalCode from "validator/lib/isPostalCode";
 import { t } from "../locales/index.js";
-const POSTAL_CODE_SUPPORTED_COUNTRIES = [
-  "AD",
-  "AT",
-  "AU",
-  "BE",
-  "BG",
-  "BR",
-  "CA",
-  "CH",
-  "CN",
-  "CZ",
-  "DE",
-  "DK",
-  "DZ",
-  "EE",
-  "ES",
-  "FI",
-  "FR",
-  "GB",
-  "GR",
-  "HR",
-  "HU",
-  "ID",
-  "IE",
-  "IL",
-  "IN",
-  "IR",
-  "IS",
-  "IT",
-  "JP",
-  "KE",
-  "KR",
-  "LI",
-  "LT",
-  "LU",
-  "LV",
-  "MX",
-  "MT",
-  "NL",
-  "NO",
-  "NZ",
-  "PL",
-  "PR",
-  "PT",
-  "RO",
-  "RU",
-  "SA",
-  "SE",
-  "SI",
-  "SK",
-  "TN",
-  "TW",
-  "UA",
-  "US",
-  "ZA",
-  "ZM"
-];
+const threeDigit = /^\d{3}$/;
+const fourDigit = /^\d{4}$/;
+const fiveDigit = /^\d{5}$/;
+const sixDigit = /^\d{6}$/;
+export const postalCodePatterns = {
+  GB: /^GIR[ ]?0AA|((AB|AL|B|BA|BB|BD|BH|BL|BN|BR|BS|BT|CA|CB|CF|CH|CM|CO|CR|CT|CV|CW|DA|DD|DE|DG|DH|DL|DN|DT|DY|E|EC|EH|EN|EX|FK|FY|G|GL|GY|GU|HA|HD|HG|HP|HR|HS|HU|HX|IG|IM|IP|IV|JE|KA|KT|KW|KY|L|LA|LD|LE|LL|LN|LS|LU|M|ME|MK|ML|N|NE|NG|NN|NP|NR|NW|OL|OX|PA|PE|PH|PL|PO|PR|RG|RH|RM|S|SA|SE|SG|SK|SL|SM|SN|SO|SP|SR|SS|ST|SW|SY|TA|TD|TF|TN|TQ|TR|TS|TW|UB|W|WA|WC|WD|WF|WN|WR|WS|WV|YO|ZE)(\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}))|BFPO[ ]?\d{1,4}$/i,
+  JE: /^JE\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}$/i,
+  GG: /^GY\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}$/i,
+  IM: /^IM\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}$/i,
+  US: /^\d{5}([ -]\d{4})?$/,
+  CA: /^[ABCEGHJKLMNPRSTVXY]\d[ABCEGHJ-NPRSTV-Z][ ]?\d[ABCEGHJ-NPRSTV-Z]\d$/i,
+  DE: /^\d{5}$/,
+  JP: /^\d{3}-?\d{4}$/,
+  FR: /^\d{2}[ ]?\d{3}$/,
+  AU: fourDigit,
+  IT: /^\d{5}$/,
+  CH: fourDigit,
+  AT: fourDigit,
+  ES: /^\d{5}$/,
+  NL: /^\d{4}[ ]?[A-Z]{2}$/i,
+  BE: fourDigit,
+  DK: fourDigit,
+  SE: /^\d{3}[ ]?\d{2}$/,
+  NO: fourDigit,
+  BR: /^\d{5}-?\d{3}$/,
+  PT: /^\d{4}(-\d{3})?$/,
+  FI: fiveDigit,
+  AX: /^22\d{3}$/,
+  KR: /^\d{5}$/,
+  // 2015年起使用5位数字邮编
+  CN: /^\d{6}$/,
+  TW: /^\d{3}(\d{2})?$/,
+  SG: sixDigit,
+  DZ: fiveDigit,
+  AD: /^AD\d{3}$/,
+  AR: /^([A-HJ-NP-Z])?\d{4}([A-Z]{3})?$/i,
+  AM: /^(37)?\d{4}$/,
+  AZ: /^\d{4}$/,
+  BH: /^((1[0-2]|[2-9])\d{2})?$/,
+  BD: fourDigit,
+  BB: /^(BB\d{5})?$/i,
+  BY: sixDigit,
+  BM: /^[A-Z]{2}[ ]?[A-Z0-9]{2}$/i,
+  BA: /^\d{5}$/,
+  IO: /^BBND 1ZZ$/i,
+  BN: /^[A-Z]{2}[ ]?\d{4}$/i,
+  BG: fourDigit,
+  KH: fiveDigit,
+  CV: fourDigit,
+  CL: /^\d{7}$/,
+  CR: /^\d{4,5}|\d{3}-\d{4}$/,
+  HR: /^\d{5}$/,
+  CY: fourDigit,
+  CZ: /^\d{3}[ ]?\d{2}$/,
+  DO: fiveDigit,
+  EC: /^([A-Z]\d{4}[A-Z]|(?:[A-Z]{2})?\d{6})?$/i,
+  EG: fiveDigit,
+  EE: fiveDigit,
+  FO: threeDigit,
+  GE: fourDigit,
+  GR: /^\d{3}[ ]?\d{2}$/,
+  GL: /^39\d{2}$/,
+  GT: fiveDigit,
+  HT: /^\d{4}$/,
+  HN: /^(?:\d{5})?$/,
+  HU: fourDigit,
+  IS: threeDigit,
+  IN: /^[1-9]\d{5}$/,
+  ID: fiveDigit,
+  IL: fiveDigit,
+  JO: fiveDigit,
+  KZ: sixDigit,
+  KE: fiveDigit,
+  KW: fiveDigit,
+  LA: fiveDigit,
+  LV: fourDigit,
+  LB: /^(\d{4}([ ]?\d{4})?)?$/,
+  LI: /^(948[5-9])|(949[0-7])$/,
+  LT: fiveDigit,
+  LU: fourDigit,
+  MK: fourDigit,
+  MY: fiveDigit,
+  MV: fiveDigit,
+  MT: /^[A-Z]{3}[ ]?\d{2,4}$/i,
+  MU: /^(\d{3}[A-Z]{2}\d{3})?$/i,
+  MX: fiveDigit,
+  MD: fourDigit,
+  MC: /^980\d{2}$/,
+  MA: fiveDigit,
+  NP: fiveDigit,
+  NZ: fourDigit,
+  NI: /^((\d{4}-)?\d{3}-\d{3}(-\d{1})?)?$/,
+  NG: /^(\d{6})?$/,
+  OM: /^(PC )?\d{3}$/i,
+  PK: fiveDigit,
+  PY: fourDigit,
+  PH: fourDigit,
+  PL: /^\d{2}-\d{3}$/,
+  PR: /^00[679]\d{2}([ -]\d{4})?$/,
+  RO: sixDigit,
+  RU: sixDigit,
+  SM: /^4789\d$/,
+  SA: fiveDigit,
+  SN: fiveDigit,
+  SK: /^\d{3}[ ]?\d{2}$/,
+  SI: fourDigit,
+  ZA: fourDigit,
+  LK: fiveDigit,
+  TJ: sixDigit,
+  TH: fiveDigit,
+  TN: fourDigit,
+  TR: fiveDigit,
+  TM: sixDigit,
+  UA: fiveDigit,
+  UY: fiveDigit,
+  UZ: sixDigit,
+  VA: /^00120$/,
+  VE: fourDigit,
+  ZM: fiveDigit,
+  // Territories & special regions
+  AS: /^96799$/,
+  CC: /^6799$/,
+  CK: fourDigit,
+  RS: sixDigit,
+  ME: /^8\d{4}$/,
+  CS: /^\d{5}$/,
+  // historical
+  YU: /^\d{5}$/,
+  // historical
+  CX: /^6798$/,
+  ET: fourDigit,
+  FK: /^FIQQ 1ZZ$/i,
+  NF: /^2899$/,
+  FM: /^(9694[1-4])([ -]\d{4})?$/,
+  GF: /^9[78]3\d{2}$/,
+  GN: threeDigit,
+  GP: /^9[78][01]\d{2}$/,
+  GS: /^SIQQ 1ZZ$/i,
+  GU: /^969[123]\d([ -]\d{4})?$/,
+  GW: fourDigit,
+  HM: fourDigit,
+  IQ: fiveDigit,
+  KG: sixDigit,
+  LR: fourDigit,
+  LS: threeDigit,
+  MG: threeDigit,
+  MH: /^969[67]\d([ -]\d{4})?$/,
+  MN: sixDigit,
+  MP: /^9695[012]([ -]\d{4})?$/,
+  MQ: /^9[78]2\d{2}$/,
+  NC: /^988\d{2}$/,
+  NE: fourDigit,
+  VI: /^008(([0-4]\d)|(5[01]))([ -]\d{4})?$/,
+  VN: sixDigit,
+  PF: /^987\d{2}$/,
+  PG: threeDigit,
+  PM: /^9[78]5\d{2}$/,
+  PN: /^PCRN 1ZZ$/i,
+  PW: /^96940$/,
+  RE: /^9[78]4\d{2}$/,
+  SH: /^(ASCN|STHL) 1ZZ$/i,
+  SJ: fourDigit,
+  SO: fiveDigit,
+  SZ: /^[HLMS]\d{3}$/i,
+  TC: /^TKCA 1ZZ$/i,
+  WF: /^986\d{2}$/,
+  XK: fiveDigit,
+  YT: /^976\d{2}$/
+};
 export function validatePostalCode(postalCode, country) {
   if (!postalCode) return true;
-  const countryUpper = country?.toUpperCase();
-  const isSupported = country && POSTAL_CODE_SUPPORTED_COUNTRIES.includes(countryUpper);
   try {
-    return isPostalCode(postalCode, isSupported ? countryUpper : "any");
+    const countryUpper = country?.toUpperCase();
+    if (!countryUpper) return false;
+    return !postalCodePatterns[countryUpper] || postalCodePatterns[countryUpper].test(postalCode);
   } catch (error) {
     console.error(error);
     return false;

package/es/locales/en.js

@@ -221,6 +221,7 @@ export default flat({
         phonePlaceholder: "Phone number",
         phoneTip: "In case we need to contact you about your order"
       },
+      customerInfo: "Customer Information",
       upsell: {
         save: "Save with {recurring} billing",
         revert: "Switch to {recurring} billing",

package/es/locales/zh.js

@@ -221,6 +221,7 @@ export default flat({
         phonePlaceholder: "\u7535\u8BDD\u53F7\u7801",
         phoneTip: "\u4EE5\u9632\u9700\u8981\u4E0E\u60A8\u8054\u7CFB\u6709\u5173\u60A8\u7684\u8BA2\u5355"
       },
+      customerInfo: "\u5BA2\u6237\u4FE1\u606F",
       upsell: {
         save: "\u4F7F\u7528{recurring}\u8BA1\u8D39\u65B9\u5F0F",
         revert: "\u5207\u6362\u5230{recurring}\u8BA1\u8D39\u65B9\u5F0F",

package/es/payment/form/address.d.ts

@@ -1,10 +1,9 @@
 import type { SxProps } from '@mui/material';
 type Props = {
     mode: string;
-    stripe: boolean;
     sx?: SxProps;
     fieldValidation?: Record<string, any>;
     errorPosition?: 'right' | 'bottom';
 };
-export default function AddressForm({ mode, stripe, sx, fieldValidation, errorPosition }: Props): import("react").JSX.Element | null;
+export default function AddressForm({ mode, sx, fieldValidation, errorPosition }: Props): import("react").JSX.Element;
 export {};

package/es/payment/form/address.js

@@ -6,7 +6,7 @@ import FormInput from "../../components/input.js";
 import FormLabel from "../../components/label.js";
 import CountrySelect from "../../components/country-select.js";
 import { getFieldValidation, validatePostalCode } from "../../libs/validator.js";
-export default function AddressForm({ mode, stripe, sx = {}, fieldValidation = {}, errorPosition = "right" }) {
+export default function AddressForm({ mode, sx = {}, fieldValidation = {}, errorPosition = "right" }) {
   const { t, locale } = useLocaleContext();
   const { control } = useFormContext();
   const country = useWatch({ control, name: "billing_address.country" });
@@ -95,48 +95,59 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation = {
       )
     ] }) }) });
   }
-  if (stripe) {
-    return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsx(Stack, { className: "cko-payment-address cko-payment-form", sx, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: [
-      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.postal_code") }),
-      /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 0, children: /* @__PURE__ */ jsx(
-        FormInput,
-        {
-          name: "billing_address.postal_code",
-          rules: {
-            required: t("payment.checkout.required"),
-            validate: (x) => {
-              const isValid = validatePostalCode(x, country);
-              return isValid ? true : t("payment.checkout.invalid");
-            },
-            ...getFieldValidation("billing_address.postal_code", fieldValidation, locale)
+  return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsx(Stack, { className: "cko-payment-address cko-payment-form", sx, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: [
+    /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.state") }),
+    /* @__PURE__ */ jsx(
+      FormInput,
+      {
+        name: "billing_address.state",
+        rules: {
+          required: t("payment.checkout.required"),
+          ...getFieldValidation("billing_address.state", fieldValidation, locale)
+        },
+        errorPosition,
+        variant: "outlined",
+        placeholder: t("payment.checkout.billing.state")
+      }
+    ),
+    /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.postal_code") }),
+    /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 0, children: /* @__PURE__ */ jsx(
+      FormInput,
+      {
+        name: "billing_address.postal_code",
+        rules: {
+          required: t("payment.checkout.required"),
+          validate: (x) => {
+            const isValid = validatePostalCode(x, country);
+            return isValid ? true : t("payment.checkout.invalid");
           },
-          errorPosition,
-          variant: "outlined",
-          placeholder: t("payment.checkout.billing.postal_code"),
-          InputProps: {
-            startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", style: { marginRight: "2px", marginLeft: "-8px" }, children: /* @__PURE__ */ jsx(
-              Controller,
-              {
-                name: "billing_address.country",
-                control,
-                render: ({ field }) => /* @__PURE__ */ jsx(
-                  CountrySelect,
-                  {
-                    ...field,
-                    ref: field.ref,
-                    sx: {
-                      ".MuiOutlinedInput-notchedOutline": {
-                        borderColor: "transparent !important"
-                      }
+          ...getFieldValidation("billing_address.postal_code", fieldValidation, locale)
+        },
+        errorPosition,
+        variant: "outlined",
+        placeholder: t("payment.checkout.billing.postal_code"),
+        InputProps: {
+          startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", style: { marginRight: "2px", marginLeft: "-8px" }, children: /* @__PURE__ */ jsx(
+            Controller,
+            {
+              name: "billing_address.country",
+              control,
+              render: ({ field }) => /* @__PURE__ */ jsx(
+                CountrySelect,
+                {
+                  ...field,
+                  ref: field.ref,
+                  sx: {
+                    ".MuiOutlinedInput-notchedOutline": {
+                      borderColor: "transparent !important"
                     }
                   }
-                )
-              }
-            ) })
-          }
+                }
+              )
+            }
+          ) })
         }
-      ) })
-    ] }) }) });
-  }
-  return null;
+      }
+    ) })
+  ] }) }) });
 }

package/es/payment/form/index.js

@@ -1,6 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "react-international-phone/style.css";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { FlagEmoji } from "react-international-phone";
 import Toast from "@arcblock/ux/lib/Toast";
 import { Box, Button, CircularProgress, Divider, Fade, Stack, Tooltip, Typography } from "@mui/material";
 import { useMemoizedFn, useSetState } from "ahooks";
@@ -40,7 +41,7 @@ import LoadingButton from "../../components/loading-button.js";
 import OverdueInvoicePayment from "../../components/over-due-invoice-payment.js";
 import { saveCurrencyPreference } from "../../libs/currency.js";
 import ConfirmDialog from "../../components/confirm.js";
-import { getFieldValidation } from "../../libs/validator.js";
+import { getFieldValidation, validatePostalCode } from "../../libs/validator.js";
 export const waitForCheckoutComplete = async (sessionId) => {
   let result;
   await pWaitFor(
@@ -136,7 +137,8 @@ export default function PaymentForm({
     customerLimited: false,
     stripePaying: false,
     fastCheckoutInfo: null,
-    creditInsufficientInfo: null
+    creditInsufficientInfo: null,
+    showEditForm: false
   });
   const currencies = flattenPaymentMethods(paymentMethods);
   const searchParams = getQueryParams(window.location.href);
@@ -244,25 +246,97 @@ export default function PaymentForm({
   const paymentCurrency = currencies.find((x) => x.id === paymentCurrencyId);
   const showStake = method.type === "arcblock" && !checkoutSession.subscription_data?.no_stake;
   const isDonationMode = checkoutSession?.submit_type === "donate" && isDonation;
-  const showForm = useMemo(() => {
+  const validateUserInfo = () => {
     if (!session?.user) {
       return false;
     }
-    if (method.type === "stripe") {
-      return true;
+    const { fullName, name, email, phone, address } = session.user;
+    const fieldValidation = checkoutSession.metadata?.page_info?.field_validation;
+    const hasName = !!(fullName || name);
+    if (!hasName) {
+      return false;
     }
-    if (checkoutSession.phone_number_collection?.enabled) {
-      return true;
+    const hasValidEmail = email && isEmail(email);
+    if (!hasValidEmail) {
+      return false;
     }
-    const mode = checkoutSession.billing_address_collection;
-    if (mode === "required") {
-      return true;
+    const nameValidation = getFieldValidation("customer_name", fieldValidation, locale);
+    if (nameValidation.pattern && fullName) {
+      const pattern = nameValidation.pattern.value;
+      if (!pattern.test(fullName)) {
+        return false;
+      }
+    }
+    const emailValidation = getFieldValidation("customer_email", fieldValidation, locale);
+    if (emailValidation.pattern && email) {
+      const pattern = emailValidation.pattern.value;
+      if (!pattern.test(email)) {
+        return false;
+      }
+    }
+    if (!address || !address.postalCode || !validatePostalCode(address.postalCode, address.country)) {
+      return false;
     }
-    if (session?.user?.fullName && session?.user?.email) {
+    const postalCodeValidation = getFieldValidation("billing_address.postal_code", fieldValidation, locale);
+    if (postalCodeValidation.pattern) {
+      const pattern = postalCodeValidation.pattern.value;
+      if (!pattern.test(address.postalCode)) {
+        return false;
+      }
+    }
+    if (!address.province) {
       return false;
     }
+    const stateValidation = getFieldValidation("billing_address.state", fieldValidation, locale);
+    if (stateValidation.pattern) {
+      const pattern = stateValidation.pattern.value;
+      if (!pattern.test(address.province)) {
+        return false;
+      }
+    }
+    if (checkoutSession.phone_number_collection?.enabled) {
+      if (!phone || phone.trim() === "") {
+        return false;
+      }
+      const phoneValidation = getFieldValidation("customer_phone", fieldValidation, locale);
+      if (phoneValidation.pattern) {
+        const pattern = phoneValidation.pattern.value;
+        if (!pattern.test(phone)) {
+          return false;
+        }
+      }
+    }
+    const addressMode = checkoutSession.billing_address_collection;
+    if (addressMode === "required") {
+      if (!address?.country || !address?.province || !address?.line1 || !address?.city || !address?.postalCode) {
+        return false;
+      }
+      const line1Validation = getFieldValidation("billing_address.line1", fieldValidation, locale);
+      if (line1Validation.pattern) {
+        const pattern = line1Validation.pattern.value;
+        if (!pattern.test(address.line1)) {
+          return false;
+        }
+      }
+      const cityValidation = getFieldValidation("billing_address.city", fieldValidation, locale);
+      if (cityValidation.pattern) {
+        const pattern = cityValidation.pattern.value;
+        if (!pattern.test(address.city)) {
+          return false;
+        }
+      }
+    }
     return true;
-  }, [session?.user, method, checkoutSession]);
+  };
+  const showForm = useMemo(() => {
+    if (!session?.user) {
+      return false;
+    }
+    if (state.showEditForm) {
+      return true;
+    }
+    return !validateUserInfo();
+  }, [session?.user, method, state.showEditForm]);
   const handleConnected = async () => {
     if (processingRef.current) {
       return;
@@ -755,6 +829,53 @@ export default function PaymentForm({
           ]
         }
       ) }),
+      !showForm && session?.user && /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          spacing: 1.25,
+          sx: {
+            mt: 2,
+            p: 2,
+            pt: 1,
+            backgroundColor: "background.paper",
+            borderRadius: 1,
+            border: "1px solid",
+            borderColor: "divider"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 0.25 }, children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", sx: { color: "text.primary", fontSize: "0.875rem" }, children: t("payment.checkout.customerInfo") }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  variant: "text",
+                  onClick: () => setState({ showEditForm: true }),
+                  sx: { minWidth: 0 },
+                  children: t("common.edit")
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(Stack, { spacing: 0.5, children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.primary", fontWeight: 600, fontSize: "0.9375rem" }, children: session.user.fullName || session.user.name }),
+              /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary", fontSize: "0.8125rem" }, children: session.user.email }),
+              checkoutSession.phone_number_collection?.enabled && session.user.phone && /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary", fontSize: "0.8125rem" }, children: session.user.phone }),
+              session.user.address && /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.75, children: [
+                session.user.address.country && /* @__PURE__ */ jsx(FlagEmoji, { iso2: session.user.address.country.toLowerCase(), style: { width: 18, height: 14 } }),
+                /* @__PURE__ */ jsxs(Typography, { variant: "body2", sx: { color: "text.secondary", fontSize: "0.8125rem" }, children: [
+                  [
+                    session.user.address.line1,
+                    session.user.address.city,
+                    session.user.address.province,
+                    session.user.address.country?.toUpperCase()
+                  ].filter(Boolean).join(", "),
+                  session.user.address.postalCode && ` [ ${t("payment.checkout.billing.postal_code")}: ${session.user.address.postalCode} ]`
+                ] })
+              ] })
+            ] })
+          ]
+        }
+      ),
       showForm && /* @__PURE__ */ jsxs(
         Stack,
         {
@@ -824,7 +945,6 @@ export default function PaymentForm({
               AddressForm,
               {
                 mode: checkoutSession.billing_address_collection,
-                stripe: method?.type === "stripe",
                 sx: { marginTop: "0 !important" },
                 fieldValidation: checkoutSession.metadata?.page_info?.field_validation,
                 errorPosition: formErrorPosition

package/lib/components/country-select.d.ts

@@ -3,10 +3,14 @@ import type { CountryIso2 } from 'react-international-phone';
 export type CountrySelectProps = {
     value: CountryIso2;
     onChange: (value: CountryIso2) => void;
-    name: string;
+    name?: string;
     sx?: SxProps;
     showDialCode?: boolean;
+    label?: string;
+    allowClear?: boolean;
+    bordered?: boolean;
+    disabled?: boolean;
 };
-export default function CountrySelect({ ref, value, onChange, name, sx, showDialCode, }: CountrySelectProps & {
+export default function CountrySelect({ ref, value, onChange, name, sx, showDialCode, label, bordered, allowClear, disabled, }: CountrySelectProps & {
     ref?: React.RefObject<HTMLDivElement | null>;
 }): import("react").JSX.Element;