@blocklet/payment-react 1.18.33 → 1.18.34

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

@@ -40,7 +40,7 @@ function OverdueInvoicePayment({
   alertMessage = "",
   authToken
 }) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { connect, session } = usePaymentContext();
   const [selectCurrencyId, setSelectCurrencyId] = useState("");
   const [payLoading, setPayLoading] = useState(false);
@@ -170,12 +170,18 @@ function OverdueInvoicePayment({
         extraParams.customerId = effectiveCustomerId;
       }
       connect.open({
+        locale,
         containerEl: void 0,
         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")
+        },
         onSuccess: () => {
           connect.close();
           handleConnected();

package/es/history/invoice/list.js

@@ -469,7 +469,7 @@ const InvoiceList = React.memo((props) => {
 });
 export default function CustomerInvoiceList(props) {
   const { action, type } = props;
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { connect } = usePaymentContext();
   const [state, setState] = useSetState({ paying: "" });
   const onPay = (invoiceId) => {
@@ -480,6 +480,7 @@ export default function CustomerInvoiceList(props) {
     connect.open({
       action: "collect",
       saveConnect: false,
+      locale,
       useSocket: isCrossOrigin() === false,
       messages: {
         scan: "",

package/es/locales/en.js

@@ -94,7 +94,13 @@ export default flat({
     stakeAmount: "Stake Amount",
     slashStakeAmount: "Slash Stake Amount",
     know: "I know",
-    relatedSubscription: "Subscription"
+    relatedSubscription: "Subscription",
+    connect: {
+      defaultScan: "Use following methods to complete this action",
+      scan: "Use following methods to complete this {action}",
+      confirm: "Confirm",
+      cancel: "Cancel"
+    }
   },
   payment: {
     checkout: {
@@ -166,7 +172,10 @@ export default flat({
         donate: "Thanks for your tip",
         tip: "A payment to {payee} has been completed. You can view the details of this payment in your account."
       },
-      confirm: "Confirming allows {payee} to charge or reduce your staking. You can cancel or revoke staking anytime.",
+      confirm: {
+        withStake: "By confirming, you allow {payee} to charge your account for future payments and, if necessary, slash your stake. You can cancel your subscription or withdraw your stake at any time.",
+        withoutStake: "By confirming, you allow {payee} to charge your account for future payments. You can cancel your subscription at any time."
+      },
       required: "Required",
       invalid: "Invalid",
       billing: {
@@ -209,7 +218,22 @@ export default flat({
       },
       orderSummary: "Order Summary",
       paymentDetails: "Payment Details",
-      productListTotal: "Includes {total} items"
+      productListTotal: "Includes {total} items",
+      connectModal: {
+        title: "{action}",
+        scan: "Use following methods to complete this payment",
+        confirm: "Confirm",
+        cancel: "Cancel"
+      },
+      fastPay: {
+        title: "Confirm Payment",
+        confirmMessage: "You will pay {amount} {symbol} from {sourceType}.",
+        autoPaymentReason: "This payment will be processed automatically due to prior delegation or sufficient balance.",
+        confirmPrompt: "Please confirm the details before proceeding.",
+        payer: "Account",
+        amount: "Amount",
+        failed: "Account changed, please pay manually."
+      }
     },
     customer: {
       payments: "Payment History",
@@ -275,7 +299,8 @@ export default flat({
         select: "Select payment method",
         submit: "Confirm change",
         confirm: "By confirming this change, you allow {payee} to charge {symbol} from your account for future payments in accordance with their terms. You can always change your payment method.",
-        completed: "Your payment method has been successfully updated, all future payments will use the new payment method unless you change it again."
+        completed: "Your payment method has been successfully updated, all future payments will use the new payment method unless you change it again.",
+        title: "Payment Method Change"
       },
       invoice: {
         summary: "Summary",
@@ -296,7 +321,8 @@ export default flat({
         next: "No invoices yet, next invoice will be generated on {date}",
         invoiceNumber: "Invoice Number",
         emptyList: "No Invoice",
-        noPaymentRequired: "No Payment Required"
+        noPaymentRequired: "No Payment Required",
+        payBatch: "Pay Due Invoices"
       },
       payment: {
         empty: "There are no payments",

package/es/locales/zh.js

@@ -94,7 +94,13 @@ export default flat({
     stakeAmount: "\u8D28\u62BC\u91D1\u989D",
     slashStakeAmount: "\u7F5A\u6CA1\u91D1\u989D",
     know: "\u6211\u77E5\u9053\u4E86",
-    relatedSubscription: "\u8BA2\u9605"
+    relatedSubscription: "\u8BA2\u9605",
+    connect: {
+      defaultScan: "\u4F7F\u7528\u4EE5\u4E0B\u65B9\u5F0F\u5B8C\u6210\u672C\u6B21\u64CD\u4F5C",
+      scan: "\u4F7F\u7528\u4EE5\u4E0B\u65B9\u5F0F\u5B8C\u6210\u672C\u6B21{action}",
+      confirm: "\u786E\u8BA4",
+      cancel: "\u53D6\u6D88"
+    }
   },
   payment: {
     checkout: {
@@ -166,7 +172,10 @@ export default flat({
         donate: "\u611F\u8C22\u60A8\u7684\u652F\u6301",
         tip: "\u5411{payee}\u7684\u4ED8\u6B3E\u5DF2\u5B8C\u6210\u3002\u60A8\u53EF\u4EE5\u5728\u60A8\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u4ED8\u6B3E\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002"
       },
-      confirm: "\u786E\u8BA4\u5141\u8BB8{payee}\u5BF9\u60A8\u7684\u8D26\u6237\u8FDB\u884C\u4ED8\u6B3E\u6216\u8005\u7F5A\u6CA1\u60A8\u7684\u8D28\u62BC\u3002\u60A8\u968F\u65F6\u53EF\u4EE5\u53D6\u6D88\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u8005\u64A4\u9500\u8D28\u62BC\u3002",
+      confirm: {
+        withStake: "\u786E\u8BA4\u8BA2\u9605\uFF0C\u5373\u8868\u793A\u60A8\u6388\u6743 {payee} \u4ECE\u60A8\u7684\u8D26\u6237\u6263\u53D6\u672A\u6765\u6B3E\u9879\uFF0C\u5E76\u5728\u5FC5\u8981\u65F6\u7F5A\u6CA1\u8D28\u62BC\u3002\u60A8\u53EF\u968F\u65F6\u53D6\u6D88\u8BA2\u9605\u6216\u64A4\u9500\u8D28\u62BC\u3002",
+        withoutStake: "\u786E\u8BA4\u8BA2\u9605\uFF0C\u5373\u8868\u793A\u60A8\u6388\u6743 {payee} \u4ECE\u60A8\u7684\u8D26\u6237\u6263\u53D6\u672A\u6765\u6B3E\u9879\u3002\u60A8\u53EF\u968F\u65F6\u53D6\u6D88\u8BA2\u9605\u3002"
+      },
       required: "\u5FC5\u586B\u9879",
       invalid: "\u65E0\u6548",
       billing: {
@@ -209,7 +218,22 @@ export default flat({
       },
       orderSummary: "\u8BA2\u5355\u6982\u89C8",
       paymentDetails: "\u652F\u4ED8\u4FE1\u606F",
-      productListTotal: "\u5305\u62EC {total} \u9879"
+      productListTotal: "\u5305\u62EC {total} \u9879",
+      connectModal: {
+        title: "{action}",
+        scan: "\u4F7F\u7528\u4EE5\u4E0B\u65B9\u5F0F\u5B8C\u6210\u672C\u6B21\u652F\u4ED8",
+        confirm: "\u786E\u8BA4",
+        cancel: "\u53D6\u6D88"
+      },
+      fastPay: {
+        title: "\u786E\u8BA4\u652F\u4ED8",
+        confirmMessage: "\u60A8\u5C06\u652F\u4ED8 {amount} {symbol}\uFF0C\u4ECE{sourceType}\u6263\u9664\u3002",
+        autoPaymentReason: "\u7531\u4E8E\u6388\u6743\u6216\u4F59\u989D\u5145\u8DB3\uFF0C\u7CFB\u7EDF\u5C06\u65E0\u9700\u94B1\u5305\u786E\u8BA4\u81EA\u52A8\u5B8C\u6210\u652F\u4ED8\u3002",
+        confirmPrompt: "\u8BF7\u786E\u8BA4\u652F\u4ED8\u4FE1\u606F\u65E0\u8BEF\u540E\u7EE7\u7EED\u3002",
+        payer: "\u8D26\u6237\u5730\u5740",
+        amount: "\u652F\u4ED8\u91D1\u989D",
+        failed: "\u8D26\u6237\u53D1\u751F\u53D8\u5316\uFF0C\u65E0\u6CD5\u81EA\u52A8\u5B8C\u6210\u652F\u4ED8\uFF0C\u8BF7\u624B\u52A8\u652F\u4ED8\u3002"
+      }
     },
     customer: {
       payments: "\u652F\u4ED8\u5386\u53F2",
@@ -276,7 +300,8 @@ export default flat({
         select: "\u9009\u62E9\u652F\u4ED8\u65B9\u5F0F",
         submit: "\u786E\u8BA4\u53D8\u66F4",
         confirm: "\u786E\u8BA4\u53D8\u66F4\u65B9\u5F0F\u610F\u5473\u7740\u4F60\u5141\u8BB8 {payee} \u4F7F\u7528\u65B0\u7684\u652F\u4ED8\u65B9\u5F0F\u652F\u4ED8\u4F60\u7684\u672A\u6765\u8D26\u5355\u3002\u4F60\u53EF\u4EE5\u968F\u65F6\u518D\u6B21\u53D8\u66F4\u652F\u4ED8\u65B9\u5F0F\u3002",
-        completed: "\u4F60\u7684\u652F\u4ED8\u65B9\u5F0F \u5DF2\u7ECF\u66F4\u65B0\u6210\u529F\u3002\u4F60\u53EF\u4EE5\u5728\u4F60\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u652F\u4ED8\u65B9\u5F0F\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002"
+        completed: "\u4F60\u7684\u652F\u4ED8\u65B9\u5F0F \u5DF2\u7ECF\u66F4\u65B0\u6210\u529F\u3002\u4F60\u53EF\u4EE5\u5728\u4F60\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u652F\u4ED8\u65B9\u5F0F\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002",
+        title: "\u652F\u4ED8\u65B9\u5F0F\u53D8\u66F4"
       },
       invoice: {
         summary: "\u6458\u8981",
@@ -297,7 +322,8 @@ export default flat({
         next: "\u8FD8\u6CA1\u6709\u8D26\u5355\uFF0C\u4E0B\u6B21\u8D26\u5355\u5C06\u5728 {date} \u751F\u6210",
         invoiceNumber: "\u8D26\u5355\u7F16\u53F7",
         emptyList: "\u6CA1\u6709\u8D26\u5355",
-        noPaymentRequired: "\u65E0\u9700\u652F\u4ED8"
+        noPaymentRequired: "\u65E0\u9700\u652F\u4ED8",
+        payBatch: "\u652F\u4ED8\u6B20\u6B3E"
       },
       payment: {
         empty: "\u6CA1\u6709\u652F\u4ED8\u8BB0\u5F55",

package/es/payment/form/index.js

@@ -10,7 +10,10 @@ import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { joinURL } from "ufo";
 import { dispatch } from "use-bus";
 import isEmail from "validator/es/lib/isEmail";
+import { fromUnitToToken } from "@ocap/util";
+import DID from "@arcblock/ux/lib/DID";
 import isEmpty from "lodash/isEmpty";
+import { HelpOutline } from "@mui/icons-material";
 import FormInput from "../../components/input.js";
 import { usePaymentContext } from "../../contexts/payment.js";
 import { useSubscription } from "../../hooks/subscription.js";
@@ -32,6 +35,7 @@ import { formatPhone, validatePhoneNumber } from "../../libs/phone-validator.js"
 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";
 export const waitForCheckoutComplete = async (sessionId) => {
   let result;
   await pWaitFor(
@@ -96,7 +100,7 @@ export default function PaymentForm({
   onlyShowBtn,
   isDonation = false
 }) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { isMobile } = useMobile();
   const { session, connect, payable } = usePaymentContext();
   const subscription = useSubscription("events");
@@ -126,7 +130,8 @@ export default function PaymentForm({
     stripeContext: void 0,
     customer,
     customerLimited: false,
-    stripePaying: false
+    stripePaying: false,
+    fastCheckoutInfo: null
   });
   const currencies = flattenPaymentMethods(paymentMethods);
   const onCheckoutComplete = useMemoizedFn(async ({ response }) => {
@@ -204,6 +209,7 @@ export default function PaymentForm({
     initUserInfo();
   }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
   const paymentMethod = useWatch({ control, name: "payment_method" });
+  const paymentCurrencyId = useWatch({ control, name: "payment_currency" });
   const afterUserLoggedIn = useMemoizedFn(() => {
     if (hasDidWallet(session.user) || skipBindWallet) {
       handleSubmit(onFormSubmit, onFormError)();
@@ -228,6 +234,8 @@ export default function PaymentForm({
   }
   buttonText = session?.user || isDonation ? buttonText : t("payment.checkout.connect", { 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";
@@ -261,6 +269,80 @@ export default function PaymentForm({
       });
     }
   };
+  const handleFastCheckoutConfirm = async () => {
+    if (!state.fastCheckoutInfo)
+      return;
+    setState({
+      fastCheckoutInfo: {
+        ...state.fastCheckoutInfo,
+        loading: true
+      }
+    });
+    try {
+      const result = await api.post(`/api/checkout-sessions/${checkoutSession.id}/fast-checkout-confirm`);
+      if (result.data.fastPaid) {
+        setState({
+          fastCheckoutInfo: null,
+          paying: true
+        });
+        await handleConnected();
+      } else {
+        Toast.error(t("payment.checkout.fastPay.failed"));
+        setState({
+          fastCheckoutInfo: null,
+          paying: true
+        });
+        openConnect();
+      }
+    } catch (err) {
+      console.error(err);
+      Toast.error(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: joinURL(getPrefix(), "/api/did"),
+        saveConnect: false,
+        useSocket: 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.error(formatError(err));
+    }
+  };
   const onFormSubmit = async (data) => {
     setState({ submitting: true });
     try {
@@ -278,36 +360,18 @@ export default 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: joinURL(getPrefix(), "/api/did"),
-            saveConnect: false,
-            useSocket: 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)) {
@@ -392,6 +456,35 @@ export default function PaymentForm({
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [state.submitting, state.paying, state.stripePaying, quantityInventoryStatus, payable]);
+  const FastCheckoutConfirmDialog = state.fastCheckoutInfo && /* @__PURE__ */ jsx(
+    ConfirmDialog,
+    {
+      onConfirm: handleFastCheckoutConfirm,
+      onCancel: handleFastCheckoutCancel,
+      title: t("payment.checkout.fastPay.title"),
+      message: /* @__PURE__ */ jsxs(Stack, { children: [
+        /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.fastPay.autoPaymentReason") }),
+        /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.fastPay.confirmPrompt") }),
+        /* @__PURE__ */ jsx(Divider, { sx: { mt: 1.5, mb: 1.5 } }),
+        /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+          /* @__PURE__ */ jsxs(Stack, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [
+            /* @__PURE__ */ jsx(Typography, { color: "text.primary", sx: { whiteSpace: "nowrap" }, children: t("payment.checkout.fastPay.payer") }),
+            /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(DID, { did: state.fastCheckoutInfo.payer || "", compact: true, responsive: false }) })
+          ] }),
+          /* @__PURE__ */ jsxs(Stack, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [
+            /* @__PURE__ */ jsx(Typography, { color: "text.primary", children: t("payment.checkout.fastPay.amount") }),
+            /* @__PURE__ */ jsxs(Typography, { children: [
+              fromUnitToToken(state.fastCheckoutInfo.amount, paymentCurrency?.decimal || 18).toString(),
+              " ",
+              paymentCurrency?.symbol
+            ] })
+          ] })
+        ] })
+      ] }),
+      loading: state.fastCheckoutInfo.loading,
+      color: "primary"
+    }
+  );
   if (onlyShowBtn) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Box, { className: "cko-payment-submit-btn", children: /* @__PURE__ */ jsxs(
@@ -443,7 +536,8 @@ export default function PaymentForm({
             title: t("payment.customer.pastDue.alert.title")
           }
         }
-      )
+      ),
+      FastCheckoutConfirmDialog
     ] });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -583,7 +677,11 @@ export default function PaymentForm({
           children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
         }
       ) }),
-      ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */ jsx(Typography, { sx: { mt: 2.5, color: "text.lighter", fontSize: "0.7875rem", lineHeight: "0.9625rem" }, children: t("payment.checkout.confirm", { payee }) })
+      ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */ jsx(Typography, { sx: { mt: 2.5, color: "text.lighter", fontSize: "0.7875rem", lineHeight: "0.9625rem" }, children: showStake ? t("payment.checkout.confirm.withStake", { payee }) : t("payment.checkout.confirm.withoutStake", { payee }) }),
+      checkoutSession.metadata?.page_info?.form_purpose_description && /* @__PURE__ */ jsxs(Box, { sx: { mt: 1, display: "flex", alignItems: "center", gap: 0.5 }, children: [
+        /* @__PURE__ */ jsx(HelpOutline, { sx: { color: "text.lighter", fontSize: "0.75rem" } }),
+        /* @__PURE__ */ jsx(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__ */ jsx(
       OverdueInvoicePayment,
@@ -610,6 +708,7 @@ export default function PaymentForm({
           title: t("payment.customer.pastDue.alert.title")
         }
       }
-    )
+    ),
+    FastCheckoutConfirmDialog
   ] });
 }

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

@@ -49,7 +49,8 @@ function OverdueInvoicePayment({
   authToken
 }) {
   const {
-    t
+    t,
+    locale
   } = (0, _context.useLocaleContext)();
   const {
     connect,
@@ -193,12 +194,18 @@ function OverdueInvoicePayment({
         extraParams.customerId = effectiveCustomerId;
       }
       connect.open({
+        locale,
         containerEl: void 0,
         saveConnect: false,
         action: "collect-batch",
         prefix: (0, _ufo.joinURL)((0, _util.getPrefix)(), "/api/did"),
         useSocket: !isCrossOriginRequest,
         extraParams,
+        messages: {
+          scan: t("common.connect.defaultScan"),
+          title: t("payment.customer.invoice.payBatch"),
+          confirm: t("common.connect.confirm")
+        },
         onSuccess: () => {
           connect.close();
           handleConnected();

package/lib/history/invoice/list.js

@@ -609,7 +609,8 @@ function CustomerInvoiceList(props) {
     type
   } = props;
   const {
-    t
+    t,
+    locale
   } = (0, _context.useLocaleContext)();
   const {
     connect
@@ -627,6 +628,7 @@ function CustomerInvoiceList(props) {
     connect.open({
       action: "collect",
       saveConnect: false,
+      locale,
       useSocket: (0, _util.isCrossOrigin)() === false,
       messages: {
         scan: "",

package/lib/locales/en.js

@@ -101,7 +101,13 @@ module.exports = (0, _flat.default)({
     stakeAmount: "Stake Amount",
     slashStakeAmount: "Slash Stake Amount",
     know: "I know",
-    relatedSubscription: "Subscription"
+    relatedSubscription: "Subscription",
+    connect: {
+      defaultScan: "Use following methods to complete this action",
+      scan: "Use following methods to complete this {action}",
+      confirm: "Confirm",
+      cancel: "Cancel"
+    }
   },
   payment: {
     checkout: {
@@ -173,7 +179,10 @@ module.exports = (0, _flat.default)({
         donate: "Thanks for your tip",
         tip: "A payment to {payee} has been completed. You can view the details of this payment in your account."
       },
-      confirm: "Confirming allows {payee} to charge or reduce your staking. You can cancel or revoke staking anytime.",
+      confirm: {
+        withStake: "By confirming, you allow {payee} to charge your account for future payments and, if necessary, slash your stake. You can cancel your subscription or withdraw your stake at any time.",
+        withoutStake: "By confirming, you allow {payee} to charge your account for future payments. You can cancel your subscription at any time."
+      },
       required: "Required",
       invalid: "Invalid",
       billing: {
@@ -216,7 +225,22 @@ module.exports = (0, _flat.default)({
       },
       orderSummary: "Order Summary",
       paymentDetails: "Payment Details",
-      productListTotal: "Includes {total} items"
+      productListTotal: "Includes {total} items",
+      connectModal: {
+        title: "{action}",
+        scan: "Use following methods to complete this payment",
+        confirm: "Confirm",
+        cancel: "Cancel"
+      },
+      fastPay: {
+        title: "Confirm Payment",
+        confirmMessage: "You will pay {amount} {symbol} from {sourceType}.",
+        autoPaymentReason: "This payment will be processed automatically due to prior delegation or sufficient balance.",
+        confirmPrompt: "Please confirm the details before proceeding.",
+        payer: "Account",
+        amount: "Amount",
+        failed: "Account changed, please pay manually."
+      }
     },
     customer: {
       payments: "Payment History",
@@ -282,7 +306,8 @@ module.exports = (0, _flat.default)({
         select: "Select payment method",
         submit: "Confirm change",
         confirm: "By confirming this change, you allow {payee} to charge {symbol} from your account for future payments in accordance with their terms. You can always change your payment method.",
-        completed: "Your payment method has been successfully updated, all future payments will use the new payment method unless you change it again."
+        completed: "Your payment method has been successfully updated, all future payments will use the new payment method unless you change it again.",
+        title: "Payment Method Change"
       },
       invoice: {
         summary: "Summary",
@@ -303,7 +328,8 @@ module.exports = (0, _flat.default)({
         next: "No invoices yet, next invoice will be generated on {date}",
         invoiceNumber: "Invoice Number",
         emptyList: "No Invoice",
-        noPaymentRequired: "No Payment Required"
+        noPaymentRequired: "No Payment Required",
+        payBatch: "Pay Due Invoices"
       },
       payment: {
         empty: "There are no payments",

package/lib/locales/zh.js

@@ -101,7 +101,13 @@ module.exports = (0, _flat.default)({
     stakeAmount: "\u8D28\u62BC\u91D1\u989D",
     slashStakeAmount: "\u7F5A\u6CA1\u91D1\u989D",
     know: "\u6211\u77E5\u9053\u4E86",
-    relatedSubscription: "\u8BA2\u9605"
+    relatedSubscription: "\u8BA2\u9605",
+    connect: {
+      defaultScan: "\u4F7F\u7528\u4EE5\u4E0B\u65B9\u5F0F\u5B8C\u6210\u672C\u6B21\u64CD\u4F5C",
+      scan: "\u4F7F\u7528\u4EE5\u4E0B\u65B9\u5F0F\u5B8C\u6210\u672C\u6B21{action}",
+      confirm: "\u786E\u8BA4",
+      cancel: "\u53D6\u6D88"
+    }
   },
   payment: {
     checkout: {
@@ -173,7 +179,10 @@ module.exports = (0, _flat.default)({
         donate: "\u611F\u8C22\u60A8\u7684\u652F\u6301",
         tip: "\u5411{payee}\u7684\u4ED8\u6B3E\u5DF2\u5B8C\u6210\u3002\u60A8\u53EF\u4EE5\u5728\u60A8\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u4ED8\u6B3E\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002"
       },
-      confirm: "\u786E\u8BA4\u5141\u8BB8{payee}\u5BF9\u60A8\u7684\u8D26\u6237\u8FDB\u884C\u4ED8\u6B3E\u6216\u8005\u7F5A\u6CA1\u60A8\u7684\u8D28\u62BC\u3002\u60A8\u968F\u65F6\u53EF\u4EE5\u53D6\u6D88\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u8005\u64A4\u9500\u8D28\u62BC\u3002",
+      confirm: {
+        withStake: "\u786E\u8BA4\u8BA2\u9605\uFF0C\u5373\u8868\u793A\u60A8\u6388\u6743 {payee} \u4ECE\u60A8\u7684\u8D26\u6237\u6263\u53D6\u672A\u6765\u6B3E\u9879\uFF0C\u5E76\u5728\u5FC5\u8981\u65F6\u7F5A\u6CA1\u8D28\u62BC\u3002\u60A8\u53EF\u968F\u65F6\u53D6\u6D88\u8BA2\u9605\u6216\u64A4\u9500\u8D28\u62BC\u3002",
+        withoutStake: "\u786E\u8BA4\u8BA2\u9605\uFF0C\u5373\u8868\u793A\u60A8\u6388\u6743 {payee} \u4ECE\u60A8\u7684\u8D26\u6237\u6263\u53D6\u672A\u6765\u6B3E\u9879\u3002\u60A8\u53EF\u968F\u65F6\u53D6\u6D88\u8BA2\u9605\u3002"
+      },
       required: "\u5FC5\u586B\u9879",
       invalid: "\u65E0\u6548",
       billing: {
@@ -216,7 +225,22 @@ module.exports = (0, _flat.default)({
       },
       orderSummary: "\u8BA2\u5355\u6982\u89C8",
       paymentDetails: "\u652F\u4ED8\u4FE1\u606F",
-      productListTotal: "\u5305\u62EC {total} \u9879"
+      productListTotal: "\u5305\u62EC {total} \u9879",
+      connectModal: {
+        title: "{action}",
+        scan: "\u4F7F\u7528\u4EE5\u4E0B\u65B9\u5F0F\u5B8C\u6210\u672C\u6B21\u652F\u4ED8",
+        confirm: "\u786E\u8BA4",
+        cancel: "\u53D6\u6D88"
+      },
+      fastPay: {
+        title: "\u786E\u8BA4\u652F\u4ED8",
+        confirmMessage: "\u60A8\u5C06\u652F\u4ED8 {amount} {symbol}\uFF0C\u4ECE{sourceType}\u6263\u9664\u3002",
+        autoPaymentReason: "\u7531\u4E8E\u6388\u6743\u6216\u4F59\u989D\u5145\u8DB3\uFF0C\u7CFB\u7EDF\u5C06\u65E0\u9700\u94B1\u5305\u786E\u8BA4\u81EA\u52A8\u5B8C\u6210\u652F\u4ED8\u3002",
+        confirmPrompt: "\u8BF7\u786E\u8BA4\u652F\u4ED8\u4FE1\u606F\u65E0\u8BEF\u540E\u7EE7\u7EED\u3002",
+        payer: "\u8D26\u6237\u5730\u5740",
+        amount: "\u652F\u4ED8\u91D1\u989D",
+        failed: "\u8D26\u6237\u53D1\u751F\u53D8\u5316\uFF0C\u65E0\u6CD5\u81EA\u52A8\u5B8C\u6210\u652F\u4ED8\uFF0C\u8BF7\u624B\u52A8\u652F\u4ED8\u3002"
+      }
     },
     customer: {
       payments: "\u652F\u4ED8\u5386\u53F2",
@@ -283,7 +307,8 @@ module.exports = (0, _flat.default)({
         select: "\u9009\u62E9\u652F\u4ED8\u65B9\u5F0F",
         submit: "\u786E\u8BA4\u53D8\u66F4",
         confirm: "\u786E\u8BA4\u53D8\u66F4\u65B9\u5F0F\u610F\u5473\u7740\u4F60\u5141\u8BB8 {payee} \u4F7F\u7528\u65B0\u7684\u652F\u4ED8\u65B9\u5F0F\u652F\u4ED8\u4F60\u7684\u672A\u6765\u8D26\u5355\u3002\u4F60\u53EF\u4EE5\u968F\u65F6\u518D\u6B21\u53D8\u66F4\u652F\u4ED8\u65B9\u5F0F\u3002",
-        completed: "\u4F60\u7684\u652F\u4ED8\u65B9\u5F0F \u5DF2\u7ECF\u66F4\u65B0\u6210\u529F\u3002\u4F60\u53EF\u4EE5\u5728\u4F60\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u652F\u4ED8\u65B9\u5F0F\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002"
+        completed: "\u4F60\u7684\u652F\u4ED8\u65B9\u5F0F \u5DF2\u7ECF\u66F4\u65B0\u6210\u529F\u3002\u4F60\u53EF\u4EE5\u5728\u4F60\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u652F\u4ED8\u65B9\u5F0F\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002",
+        title: "\u652F\u4ED8\u65B9\u5F0F\u53D8\u66F4"
       },
       invoice: {
         summary: "\u6458\u8981",
@@ -304,7 +329,8 @@ module.exports = (0, _flat.default)({
         next: "\u8FD8\u6CA1\u6709\u8D26\u5355\uFF0C\u4E0B\u6B21\u8D26\u5355\u5C06\u5728 {date} \u751F\u6210",
         invoiceNumber: "\u8D26\u5355\u7F16\u53F7",
         emptyList: "\u6CA1\u6709\u8D26\u5355",
-        noPaymentRequired: "\u65E0\u9700\u652F\u4ED8"
+        noPaymentRequired: "\u65E0\u9700\u652F\u4ED8",
+        payBatch: "\u652F\u4ED8\u6B20\u6B3E"
       },
       payment: {
         empty: "\u6CA1\u6709\u652F\u4ED8\u8BB0\u5F55",