@blocklet/payment-react 1.18.33 → 1.18.34

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,7 @@ 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"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const waitForCheckoutComplete = async sessionId => {
   let result;
@@ -107,7 +111,8 @@ function PaymentForm({
   isDonation = false
 }) {
   const {
-    t
+    t,
+    locale
   } = (0, _context.useLocaleContext)();
   const {
     isMobile
@@ -131,7 +136,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 +151,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 +235,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 +250,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 +265,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 +284,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 +311,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 +418,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 +458,7 @@ function PaymentForm({
         }
       }
       if (shouldToast) {
-        _Toast.default.error((0, _util.formatError)(err));
+        _Toast.default.error((0, _util2.formatError)(err));
       }
     } finally {
       setState({
@@ -464,6 +535,55 @@ function PaymentForm({
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [state.submitting, state.paying, state.stripePaying, quantityInventoryStatus, payable]);
+  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.jsx)(_material.Typography, {
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_DID.default, {
+              did: state.fastCheckoutInfo.payer || "",
+              compact: true,
+              responsive: false
+            })
+          })]
+        }), /* @__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 +624,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 +634,7 @@ function PaymentForm({
           }),
           title: t("payment.customer.pastDue.alert.title")
         }
-      })]
+      }), FastCheckoutConfirmDialog]
     });
   }
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -661,9 +781,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 +823,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 +833,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.34",
   "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.34",
     "@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": "0ddb7c08956891409919c8027b56b77eba1726d4"
 }

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/locales/en.tsx

@@ -97,6 +97,12 @@ export default flat({
     slashStakeAmount: 'Slash Stake Amount',
     know: 'I know',
     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: {
@@ -169,7 +175,12 @@ 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: {
@@ -215,6 +226,22 @@ export default flat({
       orderSummary: 'Order Summary',
       paymentDetails: 'Payment Details',
       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',
@@ -287,6 +314,7 @@ export default flat({
           '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.',
+        title: 'Payment Method Change',
       },
       invoice: {
         summary: 'Summary',
@@ -308,6 +336,7 @@ export default flat({
         invoiceNumber: 'Invoice Number',
         emptyList: 'No Invoice',
         noPaymentRequired: 'No Payment Required',
+        payBatch: 'Pay Due Invoices',
       },
       payment: {
         empty: 'There are no payments',

package/src/locales/zh.tsx

@@ -97,6 +97,12 @@ export default flat({
     slashStakeAmount: '罚没金额',
     know: '我知道了',
     relatedSubscription: '订阅',
+    connect: {
+      defaultScan: '使用以下方式完成本次操作',
+      scan: '使用以下方式完成本次{action}',
+      confirm: '确认',
+      cancel: '取消',
+    },
   },
   payment: {
     checkout: {
@@ -168,7 +174,11 @@ export default flat({
         donate: '感谢您的支持',
         tip: '向{payee}的付款已完成。您可以在您的账户中查看此付款的详细信息。',
       },
-      confirm: '确认允许{payee}对您的账户进行付款或者罚没您的质押。您随时可以取消您的订阅，或者撤销质押。',
+      confirm: {
+        withStake:
+          '确认订阅，即表示您授权 {payee} 从您的账户扣取未来款项，并在必要时罚没质押。您可随时取消订阅或撤销质押。',
+        withoutStake: '确认订阅，即表示您授权 {payee} 从您的账户扣取未来款项。您可随时取消订阅。',
+      },
       required: '必填项',
       invalid: '无效',
       billing: {
@@ -212,6 +222,21 @@ export default flat({
       orderSummary: '订单概览',
       paymentDetails: '支付信息',
       productListTotal: '包括 {total} 项',
+      connectModal: {
+        title: '{action}',
+        scan: '使用以下方式完成本次支付',
+        confirm: '确认',
+        cancel: '取消',
+      },
+      fastPay: {
+        title: '确认支付',
+        confirmMessage: '您将支付 {amount} {symbol}，从{sourceType}扣除。',
+        autoPaymentReason: '由于授权或余额充足，系统将无需钱包确认自动完成支付。',
+        confirmPrompt: '请确认支付信息无误后继续。',
+        payer: '账户地址',
+        amount: '支付金额',
+        failed: '账户发生变化，无法自动完成支付，请手动支付。',
+      },
     },
     customer: {
       payments: '支付历史',
@@ -280,6 +305,7 @@ export default flat({
         submit: '确认变更',
         confirm: '确认变更方式意味着你允许 {payee} 使用新的支付方式支付你的未来账单。你可以随时再次变更支付方式。',
         completed: '你的支付方式 已经更新成功。你可以在你的账户中查看此支付方式的详细信息。',
+        title: '支付方式变更',
       },
       invoice: {
         summary: '摘要',
@@ -301,6 +327,7 @@ export default flat({
         invoiceNumber: '账单编号',
         emptyList: '没有账单',
         noPaymentRequired: '无需支付',
+        payBatch: '支付欠款',
       },
       payment: {
         empty: '没有支付记录',