@blocklet/payment-react 1.18.33 → 1.18.35

package/lib/payment/form/address.js

@@ -13,12 +13,16 @@ var _countrySelect = _interopRequireDefault(require("../../components/country-se
 var _validator = require("../../libs/validator");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 AddressForm.defaultProps = {
-  sx: {}
+  sx: {},
+  fieldValidation: {},
+  errorPosition: "right"
 };
 function AddressForm({
   mode,
   stripe,
-  sx = {}
+  sx = {},
+  fieldValidation,
+  errorPosition
 }) {
   const {
     t
@@ -46,9 +50,10 @@ function AddressForm({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
             name: "billing_address.line1",
             rules: {
-              required: t("payment.checkout.required")
+              required: t("payment.checkout.required"),
+              ...(0, _validator.getFieldValidation)("billing_address.line1", fieldValidation)
             },
-            errorPosition: "right",
+            errorPosition,
             variant: "outlined",
             placeholder: t("payment.checkout.billing.line1")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
@@ -57,9 +62,10 @@ function AddressForm({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
             name: "billing_address.city",
             rules: {
-              required: t("payment.checkout.required")
+              required: t("payment.checkout.required"),
+              ...(0, _validator.getFieldValidation)("billing_address.city", fieldValidation)
             },
-            errorPosition: "right",
+            errorPosition,
             variant: "outlined",
             placeholder: t("payment.checkout.billing.city")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
@@ -68,9 +74,10 @@ function AddressForm({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
             name: "billing_address.state",
             rules: {
-              required: t("payment.checkout.required")
+              required: t("payment.checkout.required"),
+              ...(0, _validator.getFieldValidation)("billing_address.state", fieldValidation)
             },
-            errorPosition: "right",
+            errorPosition,
             variant: "outlined",
             placeholder: t("payment.checkout.billing.state")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
@@ -83,9 +90,10 @@ function AddressForm({
               validate: x => {
                 const isValid = (0, _validator.validatePostalCode)(x, country);
                 return isValid ? true : t("payment.checkout.invalid");
-              }
+              },
+              ...(0, _validator.getFieldValidation)("billing_address.postal_code", fieldValidation)
             },
-            errorPosition: "right",
+            errorPosition,
             variant: "outlined",
             placeholder: t("payment.checkout.billing.postal_code"),
             InputProps: {
@@ -139,9 +147,10 @@ function AddressForm({
                 validate: x => {
                   const isValid = (0, _validator.validatePostalCode)(x, country);
                   return isValid ? true : t("payment.checkout.invalid");
-                }
+                },
+                ...(0, _validator.getFieldValidation)("billing_address.postal_code", fieldValidation)
               },
-              errorPosition: "right",
+              errorPosition,
               variant: "outlined",
               placeholder: t("payment.checkout.billing.postal_code"),
               wrapperStyle: {

package/lib/payment/form/index.js

@@ -17,12 +17,15 @@ var _reactHookForm = require("react-hook-form");
 var _ufo = require("ufo");
 var _useBus = require("use-bus");
 var _isEmail = _interopRequireDefault(require("validator/es/lib/isEmail"));
+var _util = require("@ocap/util");
+var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _iconsMaterial = require("@mui/icons-material");
 var _input = _interopRequireDefault(require("../../components/input"));
 var _payment = require("../../contexts/payment");
 var _subscription = require("../../hooks/subscription");
 var _api = _interopRequireDefault(require("../../libs/api"));
-var _util = require("../../libs/util");
+var _util2 = require("../../libs/util");
 var _address = _interopRequireDefault(require("./address"));
 var _currency = _interopRequireDefault(require("./currency"));
 var _phone = _interopRequireDefault(require("./phone"));
@@ -32,6 +35,8 @@ 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");
+var _confirm = _interopRequireDefault(require("../../components/confirm"));
+var _validator = require("../../libs/validator");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const waitForCheckoutComplete = async sessionId => {
   let result;
@@ -107,7 +112,8 @@ function PaymentForm({
   isDonation = false
 }) {
   const {
-    t
+    t,
+    locale
   } = (0, _context.useLocaleContext)();
   const {
     isMobile
@@ -118,6 +124,7 @@ function PaymentForm({
     payable
   } = (0, _payment.usePaymentContext)();
   const subscription = (0, _subscription.useSubscription)("events");
+  const formErrorPosition = isMobile ? "bottom" : "right";
   const {
     control,
     getValues,
@@ -131,7 +138,7 @@ function PaymentForm({
   const quantityInventoryStatus = (0, _react.useMemo)(() => {
     let status = true;
     for (const item of checkoutSession.line_items) {
-      if ((0, _util.formatQuantityInventory)(item.price, item.quantity)) {
+      if ((0, _util2.formatQuantityInventory)(item.price, item.quantity)) {
         status = false;
         break;
       }
@@ -146,9 +153,10 @@ function PaymentForm({
     stripeContext: void 0,
     customer,
     customerLimited: false,
-    stripePaying: false
+    stripePaying: false,
+    fastCheckoutInfo: null
   });
-  const currencies = (0, _util.flattenPaymentMethods)(paymentMethods);
+  const currencies = (0, _util2.flattenPaymentMethods)(paymentMethods);
   const onCheckoutComplete = (0, _ahooks.useMemoizedFn)(async ({
     response
   }) => {
@@ -229,6 +237,10 @@ function PaymentForm({
     control,
     name: "payment_method"
   });
+  const paymentCurrencyId = (0, _reactHookForm.useWatch)({
+    control,
+    name: "payment_currency"
+  });
   const afterUserLoggedIn = (0, _ahooks.useMemoizedFn)(() => {
     if (hasDidWallet(session.user) || skipBindWallet) {
       handleSubmit(onFormSubmit, onFormError)();
@@ -240,7 +252,7 @@ function PaymentForm({
       });
     }
   });
-  const payee = (0, _util.getStatementDescriptor)(checkoutSession.line_items);
+  const payee = (0, _util2.getStatementDescriptor)(checkoutSession.line_items);
   let buttonText = "";
   if (paymentLink?.donation_settings) {
     if (action) {
@@ -255,6 +267,8 @@ function PaymentForm({
     action: buttonText
   });
   const method = paymentMethods.find(x => x.id === paymentMethod);
+  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 = !!session?.user;
   const skipBindWallet = method.type === "stripe";
@@ -272,7 +286,7 @@ function PaymentForm({
         onPaid(result);
       }
     } catch (err) {
-      _Toast.default.error((0, _util.formatError)(err));
+      _Toast.default.error((0, _util2.formatError)(err));
     } finally {
       setState({
         paying: false
@@ -299,6 +313,94 @@ function PaymentForm({
       });
     }
   };
+  const handleFastCheckoutConfirm = async () => {
+    if (!state.fastCheckoutInfo) return;
+    setState({
+      fastCheckoutInfo: {
+        ...state.fastCheckoutInfo,
+        loading: true
+      }
+    });
+    try {
+      const result = await _api.default.post(`/api/checkout-sessions/${checkoutSession.id}/fast-checkout-confirm`);
+      if (result.data.fastPaid) {
+        setState({
+          fastCheckoutInfo: null,
+          paying: true
+        });
+        await handleConnected();
+      } else {
+        _Toast.default.error(t("payment.checkout.fastPay.failed"));
+        setState({
+          fastCheckoutInfo: null,
+          paying: true
+        });
+        openConnect();
+      }
+    } catch (err) {
+      console.error(err);
+      _Toast.default.error((0, _util2.formatError)(err));
+      setState({
+        fastCheckoutInfo: null
+      });
+    }
+  };
+  const handleFastCheckoutCancel = () => {
+    setState({
+      fastCheckoutInfo: null
+    });
+  };
+  const openConnect = () => {
+    try {
+      if (!["arcblock", "ethereum", "base"].includes(method.type)) {
+        return;
+      }
+      setState({
+        paying: true
+      });
+      connect.open({
+        locale,
+        containerEl: void 0,
+        action: checkoutSession.mode,
+        prefix: (0, _ufo.joinURL)((0, _util2.getPrefix)(), "/api/did"),
+        saveConnect: false,
+        useSocket: (0, _util2.isCrossOrigin)() === false,
+        extraParams: {
+          checkoutSessionId: checkoutSession.id,
+          sessionUserDid: session?.user?.did
+        },
+        onSuccess: async () => {
+          connect.close();
+          await handleConnected();
+        },
+        onClose: () => {
+          connect.close();
+          setState({
+            submitting: false,
+            paying: false
+          });
+        },
+        onError: err => {
+          console.error(err);
+          setState({
+            submitting: false,
+            paying: false
+          });
+          onError(err);
+        },
+        messages: {
+          title: t("payment.checkout.connectModal.title", {
+            action: buttonText
+          }),
+          scan: t("payment.checkout.connectModal.scan"),
+          confirm: t("payment.checkout.connectModal.confirm"),
+          cancel: t("payment.checkout.connectModal.cancel")
+        }
+      });
+    } catch (err) {
+      _Toast.default.error((0, _util2.formatError)(err));
+    }
+  };
   const onFormSubmit = async data => {
     setState({
       submitting: true
@@ -318,47 +420,18 @@ function PaymentForm({
         customerLimited: false
       });
       if (["arcblock", "ethereum", "base"].includes(method.type)) {
-        setState({
-          paying: true
-        });
-        if ((result.data.balance?.sufficient || result.data.delegation?.sufficient) && !isDonationMode) {
-          await handleConnected();
-        } else {
-          connect.open({
-            containerEl: void 0,
-            action: checkoutSession.mode,
-            prefix: (0, _ufo.joinURL)((0, _util.getPrefix)(), "/api/did"),
-            saveConnect: false,
-            useSocket: (0, _util.isCrossOrigin)() === false,
-            extraParams: {
-              checkoutSessionId: checkoutSession.id,
-              sessionUserDid: session?.user?.did
-            },
-            onSuccess: async () => {
-              connect.close();
-              await handleConnected();
-            },
-            onClose: () => {
-              connect.close();
-              setState({
-                submitting: false,
-                paying: false
-              });
-            },
-            onError: err => {
-              console.error(err);
-              setState({
-                submitting: false,
-                paying: false
-              });
-              onError(err);
-            },
-            messages: {
-              title: "DID Connect",
-              scan: "Use following methods to complete this payment",
-              confirm: "Confirm"
+        if ((result.data.balance?.sufficient || result.data.delegation?.sufficient) && !isDonationMode && result.data.fastPayInfo) {
+          setState({
+            fastCheckoutInfo: {
+              open: true,
+              loading: false,
+              sourceType: result.data.fastPayInfo.type,
+              amount: result.data.fastPayInfo.amount,
+              payer: result.data.fastPayInfo.payer
             }
           });
+        } else {
+          openConnect();
         }
       }
       if (["stripe"].includes(method.type)) {
@@ -387,7 +460,7 @@ function PaymentForm({
         }
       }
       if (shouldToast) {
-        _Toast.default.error((0, _util.formatError)(err));
+        _Toast.default.error((0, _util2.formatError)(err));
       }
     } finally {
       setState({
@@ -464,6 +537,77 @@ function PaymentForm({
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [state.submitting, state.paying, state.stripePaying, quantityInventoryStatus, payable]);
+  const balanceLink = (0, _util2.getTokenBalanceLink)(method, state.fastCheckoutInfo?.payer || "");
+  const FastCheckoutConfirmDialog = state.fastCheckoutInfo && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
+    onConfirm: handleFastCheckoutConfirm,
+    onCancel: handleFastCheckoutCancel,
+    title: t("payment.checkout.fastPay.title"),
+    message: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: t("payment.checkout.fastPay.autoPaymentReason")
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: t("payment.checkout.fastPay.confirmPrompt")
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Divider, {
+        sx: {
+          mt: 1.5,
+          mb: 1.5
+        }
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        spacing: 1,
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            color: "text.primary",
+            sx: {
+              whiteSpace: "nowrap"
+            },
+            children: t("payment.checkout.fastPay.payer")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5
+            },
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_DID.default, {
+              did: state.fastCheckoutInfo.payer || "",
+              compact: true,
+              responsive: false
+            }), balanceLink && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+              title: t("payment.checkout.fastPay.balanceLink"),
+              placement: "top",
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.OpenInNew, {
+                sx: {
+                  color: "text.lighter",
+                  fontSize: "0.85rem",
+                  cursor: "pointer",
+                  "&:hover": {
+                    color: "text.primary"
+                  }
+                },
+                onClick: () => {
+                  window.open(balanceLink, "_blank");
+                }
+              })
+            })]
+          })]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            color: "text.primary",
+            children: t("payment.checkout.fastPay.amount")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            children: [(0, _util.fromUnitToToken)(state.fastCheckoutInfo.amount, paymentCurrency?.decimal || 18).toString(), " ", paymentCurrency?.symbol]
+          })]
+        })]
+      })]
+    }),
+    loading: state.fastCheckoutInfo.loading,
+    color: "primary"
+  });
   if (onlyShowBtn) {
     return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
@@ -504,7 +648,7 @@ function PaymentForm({
             setState({
               customerLimited: false
             });
-            window.open((0, _ufo.joinURL)((0, _util.getPrefix)(), `/customer/invoice/past-due?referer=${encodeURIComponent(window.location.href)}`), "_self");
+            window.open((0, _ufo.joinURL)((0, _util2.getPrefix)(), `/customer/invoice/past-due?referer=${encodeURIComponent(window.location.href)}`), "_self");
           }
         },
         dialogProps: {
@@ -514,7 +658,7 @@ function PaymentForm({
           }),
           title: t("payment.customer.pastDue.alert.title")
         }
-      })]
+      }), FastCheckoutConfirmDialog]
     });
   }
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -589,9 +733,10 @@ function PaymentForm({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
             name: "customer_name",
             variant: "outlined",
-            errorPosition: "right",
+            errorPosition: formErrorPosition,
             rules: {
-              required: t("payment.checkout.required")
+              required: t("payment.checkout.required"),
+              ...(0, _validator.getFieldValidation)("customer_name", checkoutSession.metadata?.page_info?.field_validation, locale)
             }
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
             className: "base-label",
@@ -599,10 +744,11 @@ function PaymentForm({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
             name: "customer_email",
             variant: "outlined",
-            errorPosition: "right",
+            errorPosition: formErrorPosition,
             rules: {
               required: t("payment.checkout.required"),
-              validate: x => (0, _isEmail.default)(x) ? true : t("payment.checkout.invalid")
+              validate: x => (0, _isEmail.default)(x) ? true : t("payment.checkout.invalid"),
+              ...(0, _validator.getFieldValidation)("customer_email", checkoutSession.metadata?.page_info?.field_validation, locale)
             }
           }), checkoutSession.phone_number_collection?.enabled && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
@@ -611,14 +757,15 @@ function PaymentForm({
             }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_phone.default, {
               name: "customer_phone",
               variant: "outlined",
-              errorPosition: "right",
+              errorPosition: formErrorPosition,
               placeholder: "Phone number",
               rules: {
                 required: t("payment.checkout.required"),
                 validate: async x => {
                   const isValid = await (0, _phoneValidator.validatePhoneNumber)(x);
                   return isValid ? true : t("payment.checkout.invalid");
-                }
+                },
+                ...(0, _validator.getFieldValidation)("customer_phone", checkoutSession.metadata?.page_info?.field_validation, locale)
               }
             })]
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_address.default, {
@@ -626,7 +773,9 @@ function PaymentForm({
             stripe: method?.type === "stripe",
             sx: {
               marginTop: "0 !important"
-            }
+            },
+            fieldValidation: checkoutSession.metadata?.page_info?.field_validation,
+            errorPosition: formErrorPosition
           })]
         })]
       })
@@ -661,9 +810,31 @@ function PaymentForm({
             fontSize: "0.7875rem",
             lineHeight: "0.9625rem"
           },
-          children: t("payment.checkout.confirm", {
+          children: showStake ? t("payment.checkout.confirm.withStake", {
+            payee
+          }) : t("payment.checkout.confirm.withoutStake", {
             payee
           })
+        }), checkoutSession.metadata?.page_info?.form_purpose_description && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+          sx: {
+            mt: 1,
+            display: "flex",
+            alignItems: "center",
+            gap: 0.5
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.HelpOutline, {
+            sx: {
+              color: "text.lighter",
+              fontSize: "0.75rem"
+            }
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "body2",
+            sx: {
+              fontSize: "0.75rem",
+              color: "text.lighter"
+            },
+            children: locale === "zh" ? checkoutSession.metadata.page_info.form_purpose_description.zh : checkoutSession.metadata.page_info.form_purpose_description.en
+          })]
         })]
       })
     }), state.customerLimited && /* @__PURE__ */(0, _jsxRuntime.jsx)(_overDueInvoicePayment.default, {
@@ -681,7 +852,7 @@ function PaymentForm({
           setState({
             customerLimited: false
           });
-          window.open((0, _ufo.joinURL)((0, _util.getPrefix)(), `/customer/invoice/past-due?referer=${encodeURIComponent(window.location.href)}`), "_self");
+          window.open((0, _ufo.joinURL)((0, _util2.getPrefix)(), `/customer/invoice/past-due?referer=${encodeURIComponent(window.location.href)}`), "_self");
         }
       },
       dialogProps: {
@@ -691,6 +862,6 @@ function PaymentForm({
         }),
         title: t("payment.customer.pastDue.alert.title")
       }
-    })]
+    }), FastCheckoutConfirmDialog]
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.33",
+  "version": "1.18.35",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,10 +54,10 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.13.9",
-    "@arcblock/ux": "^2.13.9",
+    "@arcblock/did-connect": "^2.13.12",
+    "@arcblock/ux": "^2.13.12",
     "@arcblock/ws": "^1.20.2",
-    "@blocklet/ui-react": "^2.13.9",
+    "@blocklet/ui-react": "^2.13.12",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
@@ -93,7 +93,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.18.33",
+    "@blocklet/payment-types": "1.18.35",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -124,5 +124,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "91ae6c4dda76b8cc7a8ab5f82ae44874d429439b"
+  "gitHead": "802a98b5ca81475f8cd7b9dcbb77fce7240b9788"
 }

package/src/components/over-due-invoice-payment.tsx

@@ -103,7 +103,7 @@ function OverdueInvoicePayment({
   alertMessage = '',
   authToken,
 }: Props) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { connect, session } = usePaymentContext();
   const [selectCurrencyId, setSelectCurrencyId] = useState('');
   const [payLoading, setPayLoading] = useState(false);
@@ -251,12 +251,18 @@ function OverdueInvoicePayment({
       }
 
       connect.open({
+        locale: locale as 'en' | 'zh',
         containerEl: undefined as unknown as Element,
         saveConnect: false,
         action: 'collect-batch',
         prefix: joinURL(getPrefix(), '/api/did'),
         useSocket: !isCrossOriginRequest,
         extraParams,
+        messages: {
+          scan: t('common.connect.defaultScan'),
+          title: t('payment.customer.invoice.payBatch'),
+          confirm: t('common.connect.confirm'),
+        } as any,
         onSuccess: () => {
           connect.close();
           handleConnected();

package/src/history/invoice/list.tsx

@@ -605,7 +605,7 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
 
 export default function CustomerInvoiceList(props: Props) {
   const { action, type } = props;
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { connect } = usePaymentContext();
   const [state, setState] = useSetState({ paying: '' });
 
@@ -618,6 +618,7 @@ export default function CustomerInvoiceList(props: Props) {
     connect.open({
       action: 'collect',
       saveConnect: false,
+      locale: locale as 'en' | 'zh',
       useSocket: isCrossOrigin() === false,
       messages: {
         scan: '',

package/src/libs/util.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable @typescript-eslint/indent */
 import type {
+  ChainType,
   PaymentDetails,
   PriceCurrency,
   PriceRecurring,
@@ -1259,3 +1260,17 @@ export function parseMarkedText(text: string): Array<{
 
   return result.filter((p) => p.content !== '');
 }
+
+export function getTokenBalanceLink(method: TPaymentMethod, address: string) {
+  if (!method || !address) {
+    return '';
+  }
+  const explorerHost = (method?.settings?.[method?.type as ChainType] as any)?.explorer_host || '';
+  if (method.type === 'arcblock' && address) {
+    return joinURL(explorerHost, 'accounts', address, 'tokens');
+  }
+  if (['ethereum', 'base'].includes(method.type) && address) {
+    return joinURL(explorerHost, 'address', address);
+  }
+  return '';
+}

package/src/libs/validator.ts

@@ -1,4 +1,5 @@
 import isPostalCode, { PostalCodeLocale } from 'validator/lib/isPostalCode';
+import { t } from '../locales';
 
 const POSTAL_CODE_SUPPORTED_COUNTRIES: PostalCodeLocale[] = [
   'AD',
@@ -68,3 +69,16 @@ export function validatePostalCode(postalCode: string, country?: string): boolea
     return false;
   }
 }
+
+export function getFieldValidation(fieldName: string, validations?: Record<string, any>, locale: string = 'en') {
+  if (!validations || !validations[fieldName]) return {};
+  const fieldValidation = validations[fieldName];
+  const rules: Record<string, any> = {};
+  if (fieldValidation.pattern) {
+    rules.pattern = {
+      value: new RegExp(fieldValidation.pattern),
+      message: fieldValidation.pattern_message?.[locale] || t('payment.checkout.invalid', locale),
+    };
+  }
+  return rules;
+}