@blocklet/payment-react 1.18.24 → 1.18.26

package/lib/components/country-select.js

@@ -9,6 +9,7 @@ var _react = require("react");
 var _material = require("@mui/material");
 var _reactHookForm = require("react-hook-form");
 var _reactInternationalPhone = require("react-international-phone");
+var _mobile = require("../hooks/mobile");
 const CountrySelect = (0, _react.forwardRef)(({
   value,
   onChange,
@@ -18,6 +19,102 @@ const CountrySelect = (0, _react.forwardRef)(({
   const {
     setValue
   } = (0, _reactHookForm.useFormContext)();
+  const [open, setOpen] = (0, _react.useState)(false);
+  const [searchText, setSearchText] = (0, _react.useState)("");
+  const inputRef = (0, _react.useRef)(null);
+  const menuRef = (0, _react.useRef)(null);
+  const listRef = (0, _react.useRef)(null);
+  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(-1);
+  const itemHeightRef = (0, _react.useRef)(40);
+  const {
+    isMobile
+  } = (0, _mobile.useMobile)();
+  const measuredRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(() => {
+    if (!open) return () => {};
+    const handleResize = () => {
+      measuredRef.current = false;
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [open]);
+  const scrollToTop = () => {
+    if (listRef.current) {
+      listRef.current.scrollTop = 0;
+    }
+  };
+  const measureItemHeight = () => {
+    if (!listRef.current || !open) return;
+    const items = listRef.current.querySelectorAll(".MuiMenuItem-root");
+    if (items.length > 0) {
+      const firstItem = items[0];
+      if (firstItem.offsetHeight > 0) {
+        itemHeightRef.current = firstItem.offsetHeight;
+      }
+    }
+  };
+  const controlScrollPosition = index => {
+    if (!listRef.current) return;
+    if (open && !measuredRef.current) {
+      measureItemHeight();
+      measuredRef.current = true;
+    }
+    const listHeight = listRef.current.clientHeight;
+    const targetPosition = index * itemHeightRef.current;
+    if (index < 2) {
+      listRef.current.scrollTop = 0;
+    } else if (index > filteredCountries.length - 3) {
+      listRef.current.scrollTop = listRef.current.scrollHeight - listHeight;
+    } else {
+      const scrollPosition = targetPosition - listHeight / 2 + itemHeightRef.current / 2;
+      listRef.current.scrollTop = Math.max(0, scrollPosition);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    let timeout = null;
+    if (open) {
+      timeout = setTimeout(() => {
+        scrollToTop();
+        if (!isMobile && inputRef.current) {
+          inputRef.current.focus();
+        }
+      }, 100);
+    } else {
+      setSearchText("");
+      setFocusedIndex(-1);
+    }
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [open, isMobile]);
+  const filteredCountries = (0, _react.useMemo)(() => {
+    if (!searchText) return _reactInternationalPhone.defaultCountries;
+    return _reactInternationalPhone.defaultCountries.filter(c => {
+      const parsed = (0, _reactInternationalPhone.parseCountry)(c);
+      return parsed.name.toLowerCase().includes(searchText.toLowerCase()) || parsed.iso2.toLowerCase().includes(searchText.toLowerCase()) || `+${parsed.dialCode}`.includes(searchText);
+    });
+  }, [searchText]);
+  (0, _react.useEffect)(() => {
+    scrollToTop();
+    setFocusedIndex(-1);
+  }, [searchText]);
+  (0, _react.useEffect)(() => {
+    let timeout = null;
+    if (focusedIndex >= 0) {
+      timeout = setTimeout(() => {
+        controlScrollPosition(focusedIndex);
+      }, 10);
+    }
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [focusedIndex, filteredCountries.length]);
   const countryDetail = (0, _react.useMemo)(() => {
     const item = _reactInternationalPhone.defaultCountries.find(v => v[1] === value);
     return value && item ? (0, _reactInternationalPhone.parseCountry)(item) : {
@@ -28,11 +125,58 @@ const CountrySelect = (0, _react.forwardRef)(({
     onChange(e.target.value);
     setValue(name, e.target.value);
   };
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
+  const handleCountryClick = code => {
+    onChange(code);
+    setValue(name, code);
+    setOpen(false);
+  };
+  const handleSearchChange = e => {
+    e.stopPropagation();
+    setSearchText(e.target.value);
+  };
+  const handleKeyDown = e => {
+    e.stopPropagation();
+    if (e.key === "Escape") {
+      setOpen(false);
+      return;
+    }
+    const handleNavigation = direction => {
+      e.preventDefault();
+      setFocusedIndex(prev => {
+        if (direction === "next") {
+          if (prev === -1) return 0;
+          return prev >= filteredCountries.length - 1 ? 0 : prev + 1;
+        }
+        if (prev === -1) return filteredCountries.length - 1;
+        return prev <= 0 ? filteredCountries.length - 1 : prev - 1;
+      });
+    };
+    if (e.key === "Tab") {
+      handleNavigation(e.shiftKey ? "prev" : "next");
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      handleNavigation("next");
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      handleNavigation("prev");
+      return;
+    }
+    if (e.key === "Enter" && focusedIndex >= 0 && focusedIndex < filteredCountries.length) {
+      e.preventDefault();
+      const country = (0, _reactInternationalPhone.parseCountry)(filteredCountries[focusedIndex]);
+      handleCountryClick(country.iso2);
+    }
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Select, {
     ref,
+    open,
+    onOpen: () => setOpen(true),
+    onClose: () => setOpen(false),
     MenuProps: {
       style: {
-        height: "300px",
+        maxHeight: "300px",
         top: "10px"
       },
       anchorOrigin: {
@@ -42,6 +186,18 @@ const CountrySelect = (0, _react.forwardRef)(({
       transformOrigin: {
         vertical: "top",
         horizontal: "left"
+      },
+      PaperProps: {
+        ref: menuRef,
+        sx: {
+          display: "flex",
+          "& .MuiList-root": {
+            pt: 0,
+            display: "flex",
+            flexDirection: "column",
+            overflowY: "hidden"
+          }
+        }
       }
     },
     sx: {
@@ -68,43 +224,91 @@ const CountrySelect = (0, _react.forwardRef)(({
     },
     value,
     onChange: onCountryChange,
-    renderValue: code => {
-      return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-        display: "flex",
-        alignItems: "center",
-        flexWrap: "nowrap",
-        gap: 0.5,
-        sx: {
-          cursor: "pointer"
-        },
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
-          iso2: code,
-          style: {
-            display: "flex"
-          }
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-          children: countryDetail?.name
-        })]
-      });
-    },
-    children: _reactInternationalPhone.defaultCountries.map(c => {
-      const parsed = (0, _reactInternationalPhone.parseCountry)(c);
-      return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.MenuItem, {
-        value: parsed.iso2,
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
-          iso2: parsed.iso2,
-          style: {
-            marginRight: "8px"
-          }
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-          marginRight: "8px",
-          children: parsed.name
-        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-          color: "gray",
-          children: ["+", parsed.dialCode]
-        })]
-      }, parsed.iso2);
-    })
+    renderValue: code => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      display: "flex",
+      alignItems: "center",
+      flexWrap: "nowrap",
+      gap: 0.5,
+      sx: {
+        cursor: "pointer"
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
+        iso2: code,
+        style: {
+          display: "flex"
+        }
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: countryDetail?.name
+      })]
+    }),
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        position: "sticky",
+        top: 0,
+        zIndex: 1,
+        bgcolor: "background.paper",
+        p: 1
+      },
+      onClick: e => {
+        e.stopPropagation();
+      },
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+        inputRef,
+        autoFocus: !isMobile,
+        fullWidth: true,
+        placeholder: "Search country...",
+        value: searchText,
+        onChange: handleSearchChange,
+        onKeyDown: handleKeyDown,
+        onClick: e => e.stopPropagation(),
+        size: "small",
+        variant: "outlined"
+      })
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      ref: listRef,
+      sx: {
+        flex: 1,
+        overflowY: "auto",
+        overflowX: "hidden",
+        maxHeight: "calc(300px - 65px)",
+        scrollBehavior: "smooth"
+      },
+      children: filteredCountries.length > 0 ? filteredCountries.map((c, index) => {
+        const parsed = (0, _reactInternationalPhone.parseCountry)(c);
+        const isFocused = index === focusedIndex;
+        return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+          value: parsed.iso2,
+          selected: parsed.iso2 === value,
+          onClick: () => handleCountryClick(parsed.iso2),
+          sx: {
+            "&.Mui-selected": {
+              backgroundColor: "rgba(0, 0, 0, 0.04)"
+            },
+            "&:hover": {
+              backgroundColor: "var(--backgrounds-bg-highlight, #eff6ff)"
+            },
+            ...(isFocused ? {
+              backgroundColor: "var(--backgrounds-bg-highlight, #eff6ff)",
+              outline: "none"
+            } : {})
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
+            iso2: parsed.iso2,
+            style: {
+              marginRight: "8px"
+            }
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            children: parsed.name
+          })]
+        }, parsed.iso2);
+      }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.MenuItem, {
+        disabled: true,
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          color: "text.secondary",
+          children: "No countries found"
+        })
+      })
+    })]
   });
 });
 CountrySelect.defaultProps = {

package/lib/components/over-due-invoice-payment.d.ts

@@ -27,13 +27,14 @@ type Props = {
         subscriptionCount?: number;
         detailUrl: string;
     }) => React.ReactNode;
+    authToken?: string;
 };
 type SummaryItem = {
     amount: string;
     currency: PaymentCurrency;
     method: PaymentMethod;
 };
-declare function OverdueInvoicePayment({ subscriptionId, customerId, mode, dialogProps, children, onPaid, detailLinkOptions, successToast, alertMessage, }: Props): import("react").JSX.Element | null;
+declare function OverdueInvoicePayment({ subscriptionId, customerId, mode, dialogProps, children, onPaid, detailLinkOptions, successToast, alertMessage, authToken, }: Props): import("react").JSX.Element | null;
 declare namespace OverdueInvoicePayment {
     var defaultProps: {
         mode: string;
@@ -49,6 +50,7 @@ declare namespace OverdueInvoicePayment {
         customerId: undefined;
         successToast: boolean;
         alertMessage: string;
+        authToken: undefined;
     };
 }
 export default OverdueInvoicePayment;

package/lib/components/over-due-invoice-payment.js

@@ -30,7 +30,7 @@ const fetchOverdueInvoices = async params => {
   } else {
     url = `/api/customers/${params.customerId}/overdue/invoices`;
   }
-  const res = await _api.default.get(url);
+  const res = await _api.default.get(params.authToken ? (0, _ufo.joinURL)(url, `?authToken=${params.authToken}`) : url);
   return res.data;
 };
 function OverdueInvoicePayment({
@@ -44,7 +44,8 @@ function OverdueInvoicePayment({
     enabled: true
   },
   successToast = true,
-  alertMessage = ""
+  alertMessage = "",
+  authToken
 }) {
   const {
     t
@@ -69,7 +70,8 @@ function OverdueInvoicePayment({
     runAsync: refresh
   } = (0, _ahooks.useRequest)(() => fetchOverdueInvoices({
     subscriptionId,
-    customerId
+    customerId,
+    authToken
   }), {
     ready: !!subscriptionId || !!customerId
   });
@@ -450,6 +452,7 @@ OverdueInvoicePayment.defaultProps = {
   subscriptionId: void 0,
   customerId: void 0,
   successToast: true,
-  alertMessage: ""
+  alertMessage: "",
+  authToken: void 0
 };
 module.exports = OverdueInvoicePayment;

package/lib/contexts/payment.d.ts

@@ -25,10 +25,11 @@ export type PaymentContextProps = {
     connect: import('@arcblock/did-connect/lib/types').SessionContext['connectApi'];
     children: any;
     baseUrl?: string;
+    authToken?: string;
 };
 declare const PaymentContext: import("react").Context<PaymentContextType>;
 declare const Consumer: import("react").Consumer<PaymentContextType>;
-declare function PaymentProvider({ session, connect, children, baseUrl }: PaymentContextProps): import("react").JSX.Element | null;
+declare function PaymentProvider({ session, connect, children, baseUrl, authToken }: PaymentContextProps): import("react").JSX.Element | null;
 declare namespace PaymentProvider {
     var defaultProps: {};
 }

package/lib/contexts/payment.js

@@ -57,10 +57,18 @@ function PaymentProvider({
   session,
   connect,
   children,
-  baseUrl
+  baseUrl,
+  authToken
 }) {
   if (baseUrl) {
     window.__PAYMENT_KIT_BASE_URL = baseUrl;
+  } else {
+    window.__PAYMENT_KIT_BASE_URL = "";
+  }
+  if (authToken) {
+    window.__PAYMENT_KIT_AUTH_TOKEN = authToken;
+  } else {
+    window.__PAYMENT_KIT_AUTH_TOKEN = "";
   }
   const [livemode, setLivemode] = (0, _ahooks.useLocalStorageState)("livemode", {
     defaultValue: true

package/lib/hooks/keyboard.js

@@ -44,6 +44,9 @@ const useTabNavigation = (items, onSelect, options) => {
           return i;
         }
       }
+      if (includeCustom && navigableElements.length > 0) {
+        return navigableElements.length - 1;
+      }
     }
     return -1;
   }, [items, includeCustom, isCustomSelected, currentValue, valueType, compareValue, findNavigableElements]);

package/lib/index.d.ts

@@ -43,5 +43,6 @@ export * from './hooks/mobile';
 export * from './hooks/table';
 export * from './hooks/scroll';
 export * from './hooks/keyboard';
+export * from './libs/validator';
 export { translations, createTranslator } from './locales';
 export { createLazyComponent, api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, PaymentBeneficiaries, LoadingButton, DonateDetails, };

package/lib/index.js

@@ -430,6 +430,18 @@ Object.keys(_keyboard).forEach(function (key) {
     }
   });
 });
+var _validator = require("./libs/validator");
+Object.keys(_validator).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _validator[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _validator[key];
+    }
+  });
+});
 var _locales = require("./locales");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }

package/lib/libs/api.js

@@ -19,6 +19,10 @@ api.interceptors.request.use(config => {
     ...(config.params || {}),
     locale
   };
+  const authToken = window.__PAYMENT_KIT_AUTH_TOKEN;
+  if (authToken && typeof config.params.authToken === "undefined" && !query.has("authToken")) {
+    config.params.authToken = authToken;
+  }
   if (typeof config.params.livemode === "undefined" && query.has("livemode") === false) {
     const livemode = localStorage.getItem("livemode");
     config.params.livemode = (0, _isNull.default)(livemode) ? true : JSON.parse(livemode);

package/lib/libs/currency.d.ts

@@ -0,0 +1,3 @@
+export declare const getUserStorageKey: (base: string, did?: string) => string;
+export declare const saveCurrencyPreference: (currencyId: string, did?: string) => void;
+export declare const getCurrencyPreference: (did?: string, availableCurrencyIds?: string[]) => string | null;

package/lib/libs/currency.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.saveCurrencyPreference = exports.getUserStorageKey = exports.getCurrencyPreference = void 0;
+const CURRENCY_PREFERENCE_KEY_BASE = "payment-currency-preference";
+const getUserStorageKey = (base, did) => {
+  return did ? `${base}:${did}` : base;
+};
+exports.getUserStorageKey = getUserStorageKey;
+const saveCurrencyPreference = (currencyId, did) => {
+  try {
+    localStorage.setItem(getUserStorageKey(CURRENCY_PREFERENCE_KEY_BASE, did), currencyId);
+  } catch (e) {
+    console.warn("Failed to save currency preference", e);
+  }
+};
+exports.saveCurrencyPreference = saveCurrencyPreference;
+const getCurrencyPreference = (did, availableCurrencyIds) => {
+  try {
+    const saved = localStorage.getItem(getUserStorageKey(CURRENCY_PREFERENCE_KEY_BASE, did));
+    if (saved && (!availableCurrencyIds || availableCurrencyIds.includes(saved))) {
+      return saved;
+    }
+  } catch (e) {
+    console.warn("Failed to access localStorage", e);
+  }
+  return null;
+};
+exports.getCurrencyPreference = getCurrencyPreference;

package/lib/libs/phone-validator.js

@@ -18,6 +18,7 @@ const getPhoneUtil = async () => {
 };
 exports.getPhoneUtil = getPhoneUtil;
 const validatePhoneNumber = async phoneNumber => {
+  if (!phoneNumber) return true;
   try {
     let util = null;
     try {

package/lib/libs/util.d.ts

@@ -10,8 +10,8 @@ export declare function formatDateTime(date: Date | string | number, locale?: st
 export declare const formatLocale: (locale?: string) => string;
 export declare const formatPrettyMsLocale: (locale: string) => "zh_CN" | "en_US";
 export declare const formatError: (err: any) => any;
-export declare function formatBNStr(str?: string, decimals?: number, precision?: number, trim?: boolean): string;
-export declare function formatNumber(n: number | string, precision?: number, trim?: boolean): string;
+export declare function formatBNStr(str?: string, decimals?: number, precision?: number, trim?: boolean, thousandSeparated?: boolean): string;
+export declare function formatNumber(n: number | string, precision?: number, trim?: boolean, thousandSeparated?: boolean): string;
 export declare const formatPrice: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean, locale?: string) => string;
 export declare const formatPriceAmount: (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity?: number, bn?: boolean) => string;
 export declare function getStatementDescriptor(items: any[]): any;

package/lib/libs/util.js

@@ -156,16 +156,19 @@ const formatError = err => {
   return err.message;
 };
 exports.formatError = formatError;
-function formatBNStr(str = "", decimals = 18, precision = 6, trim = true) {
-  return formatNumber((0, _util.fromUnitToToken)(str, decimals), precision, trim);
+function formatBNStr(str = "", decimals = 18, precision = 6, trim = true, thousandSeparated = true) {
+  if (!str) {
+    return "0";
+  }
+  return formatNumber((0, _util.fromUnitToToken)(str, decimals), precision, trim, thousandSeparated);
 }
-function formatNumber(n, precision = 6, trim = true) {
+function formatNumber(n, precision = 6, trim = true, thousandSeparated = true) {
   if (!n || n === "0") {
     return "0";
   }
   const num = (0, _numbro.default)(n);
   const options = {
-    thousandSeparated: true,
+    thousandSeparated,
     ...((precision || precision === 0) && {
       mantissa: precision
     })

package/lib/libs/validator.d.ts

@@ -0,0 +1 @@
+export declare function validatePostalCode(postalCode: string, country?: string): boolean;

package/lib/libs/validator.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validatePostalCode = validatePostalCode;
+var _isPostalCode = _interopRequireDefault(require("validator/lib/isPostalCode"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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"];
+function validatePostalCode(postalCode, country) {
+  if (!postalCode) return true;
+  const countryUpper = country?.toUpperCase();
+  const isSupported = country && POSTAL_CODE_SUPPORTED_COUNTRIES.includes(countryUpper);
+  try {
+    return (0, _isPostalCode.default)(postalCode, isSupported ? countryUpper : "any");
+  } catch (error) {
+    console.error(error);
+    return false;
+  }
+}

package/lib/payment/form/address.js

@@ -10,6 +10,7 @@ var _material = require("@mui/material");
 var _reactHookForm = require("react-hook-form");
 var _input = _interopRequireDefault(require("../../components/input"));
 var _countrySelect = _interopRequireDefault(require("../../components/country-select"));
+var _validator = require("../../libs/validator");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 AddressForm.defaultProps = {
   sx: {}
@@ -25,6 +26,10 @@ function AddressForm({
   const {
     control
   } = (0, _reactHookForm.useFormContext)();
+  const country = (0, _reactHookForm.useWatch)({
+    control,
+    name: "billing_address.country"
+  });
   if (mode === "required") {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
       in: true,
@@ -74,7 +79,11 @@ function AddressForm({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
             name: "billing_address.postal_code",
             rules: {
-              required: t("payment.checkout.required")
+              required: t("payment.checkout.required"),
+              validate: x => {
+                const isValid = (0, _validator.validatePostalCode)(x, country);
+                return isValid ? true : t("payment.checkout.invalid");
+              }
             },
             errorPosition: "right",
             variant: "outlined",
@@ -126,7 +135,11 @@ function AddressForm({
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
               name: "billing_address.postal_code",
               rules: {
-                required: t("payment.checkout.required")
+                required: t("payment.checkout.required"),
+                validate: x => {
+                  const isValid = (0, _validator.validatePostalCode)(x, country);
+                  return isValid ? true : t("payment.checkout.invalid");
+                }
               },
               errorPosition: "right",
               variant: "outlined",

package/lib/payment/form/index.js

@@ -31,6 +31,7 @@ var _mobile = require("../../hooks/mobile");
 var _phoneValidator = require("../../libs/phone-validator");
 var _loadingButton = _interopRequireDefault(require("../../components/loading-button"));
 var _overDueInvoicePayment = _interopRequireDefault(require("../../components/over-due-invoice-payment"));
+var _currency2 = require("../../libs/currency");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const waitForCheckoutComplete = async sessionId => {
   let result;
@@ -155,6 +156,13 @@ function PaymentForm({
     const index = currencies.findIndex(x => x.id === queryCurrencyId);
     return index >= 0 ? index : 0;
   });
+  const handleCurrencyChange = index => {
+    setPaymentCurrencyIndex(index);
+    const selectedCurrencyId = currencies[index]?.id;
+    if (selectedCurrencyId) {
+      (0, _currency2.saveCurrencyPreference)(selectedCurrencyId, session?.user?.did);
+    }
+  };
   const onCheckoutComplete = (0, _ahooks.useMemoizedFn)(async ({
     response
   }) => {
@@ -277,6 +285,9 @@ function PaymentForm({
   const showForm = !!session?.user;
   const skipBindWallet = method.type === "stripe";
   const handleConnected = async () => {
+    setState({
+      paying: true
+    });
     try {
       const result = await waitForCheckoutComplete(checkoutSession.id);
       if (state.paid === false) {
@@ -561,7 +572,7 @@ function PaymentForm({
                 render: () => /* @__PURE__ */(0, _jsxRuntime.jsx)(_currency.default, {
                   value: paymentCurrencyIndex,
                   currencies,
-                  onChange: setPaymentCurrencyIndex
+                  onChange: handleCurrencyChange
                 })
               })
             }), state.stripePaying && state.stripeContext && /* @__PURE__ */(0, _jsxRuntime.jsx)(_stripe.default, {