@blocklet/payment-react 1.18.33 → 1.18.35

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,23 @@ 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.',
+        balanceLink: 'View Balance',
+      },
     },
     customer: {
       payments: 'Payment History',
@@ -287,6 +315,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 +337,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,22 @@ export default flat({
       orderSummary: '订单概览',
       paymentDetails: '支付信息',
       productListTotal: '包括 {total} 项',
+      connectModal: {
+        title: '{action}',
+        scan: '使用以下方式完成本次支付',
+        confirm: '确认',
+        cancel: '取消',
+      },
+      fastPay: {
+        title: '确认支付',
+        confirmMessage: '您将支付 {amount} {symbol}，从{sourceType}扣除。',
+        autoPaymentReason: '由于授权或余额充足，系统将无需钱包确认自动完成支付。',
+        confirmPrompt: '请确认支付信息无误后继续。',
+        payer: '账户地址',
+        amount: '支付金额',
+        failed: '账户发生变化，无法自动完成支付，请手动支付。',
+        balanceLink: '查看余额',
+      },
     },
     customer: {
       payments: '支付历史',
@@ -280,6 +306,7 @@ export default flat({
         submit: '确认变更',
         confirm: '确认变更方式意味着你允许 {payee} 使用新的支付方式支付你的未来账单。你可以随时再次变更支付方式。',
         completed: '你的支付方式 已经更新成功。你可以在你的账户中查看此支付方式的详细信息。',
+        title: '支付方式变更',
       },
       invoice: {
         summary: '摘要',
@@ -301,6 +328,7 @@ export default flat({
         invoiceNumber: '账单编号',
         emptyList: '没有账单',
         noPaymentRequired: '无需支付',
+        payBatch: '支付欠款',
       },
       payment: {
         empty: '没有支付记录',

package/src/payment/form/address.tsx

@@ -4,19 +4,23 @@ import type { SxProps } from '@mui/material';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import FormInput from '../../components/input';
 import CountrySelect from '../../components/country-select';
-import { validatePostalCode } from '../../libs/validator';
+import { getFieldValidation, validatePostalCode } from '../../libs/validator';
 
 type Props = {
   mode: string;
   stripe: boolean;
   sx?: SxProps;
+  fieldValidation?: Record<string, any>;
+  errorPosition?: 'right' | 'bottom';
 };
 
 AddressForm.defaultProps = {
   sx: {},
+  fieldValidation: {},
+  errorPosition: 'right',
 };
 
-export default function AddressForm({ mode, stripe, sx = {} }: Props) {
+export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, errorPosition }: Props) {
   const { t } = useLocaleContext();
   const { control } = useFormContext();
   const country = useWatch({ control, name: 'billing_address.country' });
@@ -28,24 +32,33 @@ export default function AddressForm({ mode, stripe, sx = {} }: Props) {
             <FormLabel className="base-label">{t('payment.checkout.billing.line1')}</FormLabel>
             <FormInput
               name="billing_address.line1"
-              rules={{ required: t('payment.checkout.required') }}
-              errorPosition="right"
+              rules={{
+                required: t('payment.checkout.required'),
+                ...getFieldValidation('billing_address.line1', fieldValidation),
+              }}
+              errorPosition={errorPosition}
               variant="outlined"
               placeholder={t('payment.checkout.billing.line1')}
             />
             <FormLabel className="base-label">{t('payment.checkout.billing.city')}</FormLabel>
             <FormInput
               name="billing_address.city"
-              rules={{ required: t('payment.checkout.required') }}
-              errorPosition="right"
+              rules={{
+                required: t('payment.checkout.required'),
+                ...getFieldValidation('billing_address.city', fieldValidation),
+              }}
+              errorPosition={errorPosition}
               variant="outlined"
               placeholder={t('payment.checkout.billing.city')}
             />
             <FormLabel className="base-label">{t('payment.checkout.billing.state')}</FormLabel>
             <FormInput
               name="billing_address.state"
-              rules={{ required: t('payment.checkout.required') }}
-              errorPosition="right"
+              rules={{
+                required: t('payment.checkout.required'),
+                ...getFieldValidation('billing_address.state', fieldValidation),
+              }}
+              errorPosition={errorPosition}
               variant="outlined"
               placeholder={t('payment.checkout.billing.state')}
             />
@@ -58,8 +71,9 @@ export default function AddressForm({ mode, stripe, sx = {} }: Props) {
                   const isValid = validatePostalCode(x, country);
                   return isValid ? true : t('payment.checkout.invalid');
                 },
+                ...getFieldValidation('billing_address.postal_code', fieldValidation),
               }}
-              errorPosition="right"
+              errorPosition={errorPosition}
               variant="outlined"
               placeholder={t('payment.checkout.billing.postal_code')}
               InputProps={{
@@ -104,8 +118,9 @@ export default function AddressForm({ mode, stripe, sx = {} }: Props) {
                     const isValid = validatePostalCode(x, country);
                     return isValid ? true : t('payment.checkout.invalid');
                   },
+                  ...getFieldValidation('billing_address.postal_code', fieldValidation),
                 }}
-                errorPosition="right"
+                errorPosition={errorPosition}
                 variant="outlined"
                 placeholder={t('payment.checkout.billing.postal_code')}
                 wrapperStyle={{ height: '40px' }}

package/src/payment/form/index.tsx

@@ -5,7 +5,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 // import { useTheme } from '@arcblock/ux/lib/Theme';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { TCheckoutSession, TCustomer, TPaymentIntent, TPaymentMethodExpanded } from '@blocklet/payment-types';
-import { Box, Button, CircularProgress, Divider, Fade, FormLabel, Stack, Typography } from '@mui/material';
+import { Box, Button, CircularProgress, Divider, Fade, FormLabel, Stack, Tooltip, Typography } from '@mui/material';
 import { useMemoizedFn, useSetState } from 'ahooks';
 import pWaitFor from 'p-wait-for';
 import { useEffect, useMemo, useRef } from 'react';
@@ -13,8 +13,11 @@ 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, OpenInNew } from '@mui/icons-material';
 import FormInput from '../../components/input';
 import { usePaymentContext } from '../../contexts/payment';
 import { useSubscription } from '../../hooks/subscription';
@@ -25,6 +28,7 @@ import {
   formatQuantityInventory,
   getPrefix,
   getStatementDescriptor,
+  getTokenBalanceLink,
   isCrossOrigin,
 } from '../../libs/util';
 import type { CheckoutCallbacks, CheckoutContext } from '../../types';
@@ -37,6 +41,8 @@ import { formatPhone, validatePhoneNumber } from '../../libs/phone-validator';
 import LoadingButton from '../../components/loading-button';
 import OverdueInvoicePayment from '../../components/over-due-invoice-payment';
 import { saveCurrencyPreference } from '../../libs/currency';
+import ConfirmDialog from '../../components/confirm';
+import { getFieldValidation } from '../../libs/validator';
 
 export const waitForCheckoutComplete = async (sessionId: string) => {
   let result: CheckoutContext;
@@ -101,6 +107,14 @@ type UserInfo = {
   };
 };
 
+type FastCheckoutInfo = {
+  open: boolean;
+  loading: boolean;
+  sourceType: 'balance' | 'delegation';
+  amount: string;
+  payer?: string;
+};
+
 const setUserFormValues = (
   userInfo: UserInfo,
   currentValues: any,
@@ -159,10 +173,11 @@ export default function PaymentForm({
   isDonation = false,
 }: PageData) {
   // const theme = useTheme();
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { isMobile } = useMobile();
   const { session, connect, payable } = usePaymentContext();
   const subscription = useSubscription('events');
+  const formErrorPosition = isMobile ? 'bottom' : 'right';
   const {
     control,
     getValues,
@@ -194,6 +209,7 @@ export default function PaymentForm({
     customer?: TCustomer;
     customerLimited?: boolean;
     stripePaying: boolean;
+    fastCheckoutInfo: FastCheckoutInfo | null;
   }>({
     submitting: false,
     paying: false,
@@ -203,6 +219,7 @@ export default function PaymentForm({
     customer,
     customerLimited: false,
     stripePaying: false,
+    fastCheckoutInfo: null,
   });
 
   const currencies = flattenPaymentMethods(paymentMethods);
@@ -288,6 +305,7 @@ export default function PaymentForm({
   }, [session?.user, checkoutSession.phone_number_collection?.enabled]);
 
   const paymentMethod = useWatch({ control, name: 'payment_method' });
+  const paymentCurrencyId = useWatch({ control, name: 'payment_currency' });
 
   // const domSize = useSize(document.body);
 
@@ -327,6 +345,9 @@ export default function PaymentForm({
   buttonText = session?.user || isDonation ? buttonText : t('payment.checkout.connect', { action: buttonText });
 
   const method = paymentMethods.find((x) => x.id === paymentMethod) as TPaymentMethodExpanded;
+  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';
@@ -364,6 +385,84 @@ 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: undefined as unknown as Element,
+        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: any) => {
+          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'),
+        },
+      } as any);
+    } catch (err) {
+      Toast.error(formatError(err));
+    }
+  };
+
   const onFormSubmit = async (data: any) => {
     setState({ submitting: true });
     try {
@@ -383,36 +482,22 @@ export default function PaymentForm({
       });
 
       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: undefined as unknown as Element,
-            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: any) => {
-              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,
             },
-          } as any);
+          });
+        } else {
+          openConnect();
         }
       }
       if (['stripe'].includes(method.type)) {
@@ -514,6 +599,56 @@ export default function PaymentForm({
     };
   }, [state.submitting, state.paying, state.stripePaying, quantityInventoryStatus, payable]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const balanceLink = getTokenBalanceLink(method, state.fastCheckoutInfo?.payer || '');
+  const FastCheckoutConfirmDialog = state.fastCheckoutInfo && (
+    <ConfirmDialog
+      onConfirm={handleFastCheckoutConfirm}
+      onCancel={handleFastCheckoutCancel}
+      title={t('payment.checkout.fastPay.title')}
+      message={
+        <Stack>
+          <Typography>{t('payment.checkout.fastPay.autoPaymentReason')}</Typography>
+          <Typography>{t('payment.checkout.fastPay.confirmPrompt')}</Typography>
+          <Divider sx={{ mt: 1.5, mb: 1.5 }} />
+          <Stack spacing={1}>
+            <Stack flexDirection="row" alignItems="center" justifyContent="space-between">
+              <Typography color="text.primary" sx={{ whiteSpace: 'nowrap' }}>
+                {t('payment.checkout.fastPay.payer')}
+              </Typography>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                <DID did={state.fastCheckoutInfo.payer || ''} compact responsive={false} />
+                {balanceLink && (
+                  <Tooltip title={t('payment.checkout.fastPay.balanceLink')} placement="top">
+                    <OpenInNew
+                      sx={{
+                        color: 'text.lighter',
+                        fontSize: '0.85rem',
+                        cursor: 'pointer',
+                        '&:hover': { color: 'text.primary' },
+                      }}
+                      onClick={() => {
+                        window.open(balanceLink, '_blank');
+                      }}
+                    />
+                  </Tooltip>
+                )}
+              </Box>
+            </Stack>
+            <Stack flexDirection="row" alignItems="center" justifyContent="space-between">
+              <Typography color="text.primary">{t('payment.checkout.fastPay.amount')}</Typography>
+              <Typography>
+                {fromUnitToToken(state.fastCheckoutInfo.amount, paymentCurrency?.decimal || 18).toString()}{' '}
+                {paymentCurrency?.symbol}
+              </Typography>
+            </Stack>
+          </Stack>
+        </Stack>
+      }
+      loading={state.fastCheckoutInfo.loading}
+      color="primary"
+    />
+  );
+
   if (onlyShowBtn) {
     return (
       <>
@@ -565,6 +700,7 @@ export default function PaymentForm({
             }}
           />
         )}
+        {FastCheckoutConfirmDialog}
       </>
     );
   }
@@ -631,19 +767,25 @@ export default function PaymentForm({
               <FormInput
                 name="customer_name"
                 variant="outlined"
-                errorPosition="right"
+                errorPosition={formErrorPosition}
                 rules={{
                   required: t('payment.checkout.required'),
+                  ...getFieldValidation('customer_name', checkoutSession.metadata?.page_info?.field_validation, locale),
                 }}
               />
               <FormLabel className="base-label">{t('payment.checkout.customer.email')}</FormLabel>
               <FormInput
                 name="customer_email"
                 variant="outlined"
-                errorPosition="right"
+                errorPosition={formErrorPosition}
                 rules={{
                   required: t('payment.checkout.required'),
                   validate: (x) => (isEmail(x) ? true : t('payment.checkout.invalid')),
+                  ...getFieldValidation(
+                    'customer_email',
+                    checkoutSession.metadata?.page_info?.field_validation,
+                    locale
+                  ),
                 }}
               />
               {checkoutSession.phone_number_collection?.enabled && (
@@ -652,7 +794,7 @@ export default function PaymentForm({
                   <PhoneInput
                     name="customer_phone"
                     variant="outlined"
-                    errorPosition="right"
+                    errorPosition={formErrorPosition}
                     placeholder="Phone number"
                     rules={{
                       required: t('payment.checkout.required'),
@@ -660,6 +802,11 @@ export default function PaymentForm({
                         const isValid = await validatePhoneNumber(x);
                         return isValid ? true : t('payment.checkout.invalid');
                       },
+                      ...getFieldValidation(
+                        'customer_phone',
+                        checkoutSession.metadata?.page_info?.field_validation,
+                        locale
+                      ),
                     }}
                   />
                 </>
@@ -668,6 +815,8 @@ export default function PaymentForm({
                 mode={checkoutSession.billing_address_collection as string}
                 stripe={method?.type === 'stripe'}
                 sx={{ marginTop: '0 !important' }}
+                fieldValidation={checkoutSession.metadata?.page_info?.field_validation}
+                errorPosition={formErrorPosition}
               />
             </Stack>
           )}
@@ -695,9 +844,21 @@ export default function PaymentForm({
 
           {['subscription', 'setup'].includes(checkoutSession.mode) && (
             <Typography sx={{ mt: 2.5, color: 'text.lighter', fontSize: '0.7875rem', lineHeight: '0.9625rem' }}>
-              {t('payment.checkout.confirm', { payee })}
+              {showStake
+                ? t('payment.checkout.confirm.withStake', { payee })
+                : t('payment.checkout.confirm.withoutStake', { payee })}
             </Typography>
           )}
+          {checkoutSession.metadata?.page_info?.form_purpose_description && (
+            <Box sx={{ mt: 1, display: 'flex', alignItems: 'center', gap: 0.5 }}>
+              <HelpOutline sx={{ color: 'text.lighter', fontSize: '0.75rem' }} />
+              <Typography variant="body2" sx={{ fontSize: '0.75rem', color: 'text.lighter' }}>
+                {locale === 'zh'
+                  ? checkoutSession.metadata.page_info.form_purpose_description.zh
+                  : checkoutSession.metadata.page_info.form_purpose_description.en}
+              </Typography>
+            </Box>
+          )}
         </Stack>
       </Fade>
       {state.customerLimited && (
@@ -725,6 +886,7 @@ export default function PaymentForm({
           }}
         />
       )}
+      {FastCheckoutConfirmDialog}
     </>
   );
 }