@blocklet/payment-react 1.18.15 → 1.18.17

package/src/history/invoice/list.tsx

@@ -8,7 +8,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { Paginated, TInvoiceExpanded, TSubscription } from '@blocklet/payment-types';
 import { OpenInNewOutlined } from '@mui/icons-material';
-import { Box, Button, CircularProgress, Hidden, Stack, Typography } from '@mui/material';
+import { Box, Button, CircularProgress, Stack, Typography, Tooltip } from '@mui/material';
 import { styled } from '@mui/system';
 import { useInfiniteScroll, useRequest, useSetState } from 'ahooks';
 import React, { useEffect, useRef, useState } from 'react';
@@ -69,6 +69,7 @@ type Props = {
   action?: string;
   type?: 'list' | 'table';
   onTableDataChange?: Function;
+  relatedSubscription?: boolean;
 };
 
 const getInvoiceLink = (invoice: TInvoiceExpanded, action?: string) => {
@@ -104,6 +105,7 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
     include_return_staking,
     include_recovered_from,
     onTableDataChange,
+    relatedSubscription,
   } = props;
   const listKey = 'invoice-table';
   const { t, locale } = useLocaleContext();
@@ -177,6 +179,12 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
     handleNavigation(e, link, navigate, { target: link.external ? '_blank' : target });
   };
 
+  const handleRelatedSubscriptionClick = (e: React.MouseEvent, invoice: TInvoiceExpanded) => {
+    if (invoice.subscription_id) {
+      handleNavigation(e, createLink(`/customer/subscription/${invoice.subscription_id}`), navigate);
+    }
+  };
+
   const columns = [
     {
       label: t('common.amount'),
@@ -186,9 +194,10 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const invoice = data?.list[index] as TInvoiceExpanded;
+          const isVoid = invoice.status === 'void';
           return (
             <Box onClick={(e) => handleLinkClick(e, invoice)} sx={linkStyle}>
-              <Typography>
+              <Typography sx={isVoid ? { textDecoration: 'line-through' } : {}}>
                 {formatBNStr(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
                 {invoice.paymentCurrency.symbol}
               </Typography>
@@ -225,6 +234,30 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
         },
       },
     },
+    ...(relatedSubscription
+      ? [
+          {
+            label: t('common.relatedSubscription'),
+            name: 'subscription',
+            options: {
+              customBodyRenderLite: (_: string, index: number) => {
+                const invoice = data?.list[index] as TInvoiceExpanded;
+                return invoice.subscription_id ? (
+                  <Box
+                    onClick={(e) => handleRelatedSubscriptionClick(e, invoice)}
+                    sx={{ color: 'text.link', cursor: 'pointer' }}>
+                    {invoice.subscription?.description}
+                  </Box>
+                ) : (
+                  <Box onClick={(e) => handleLinkClick(e, invoice)} sx={{ ...linkStyle, color: 'text.lighter' }}>
+                    {t('common.none')}
+                  </Box>
+                );
+              },
+            },
+          },
+        ]
+      : []),
     {
       label: t('common.updatedAt'),
       name: 'name',
@@ -234,12 +267,17 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
 
           return (
             <Box onClick={(e) => handleLinkClick(e, invoice)} sx={linkStyle}>
-              {formatToDate(invoice.created_at, locale, 'YYYY-MM-DD HH:mm:ss')}
+              {formatToDate(
+                invoice.created_at,
+                locale,
+                relatedSubscription ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD HH:mm:ss'
+              )}
             </Box>
           );
         },
       },
     },
+
     {
       label: t('common.description'),
       name: '',
@@ -264,6 +302,8 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
           const invoice = data?.list[index] as TInvoiceExpanded;
           const hidePay = invoice.billing_reason === 'overdraft-protection';
           const { connect } = getInvoiceLink(invoice, action);
+          const isVoid = invoice.status === 'void';
+
           if (action && !hidePay) {
             return connect ? (
               <Button variant="text" size="small" onClick={() => onPay(invoice.id)} sx={{ color: 'text.link' }}>
@@ -283,7 +323,15 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
           }
           return (
             <Box onClick={(e) => handleLinkClick(e, invoice)} sx={linkStyle}>
-              <Status label={invoice.status} color={getInvoiceStatusColor(invoice.status)} />
+              {isVoid ? (
+                <Tooltip title={t('payment.customer.invoice.noPaymentRequired')} arrow placement="top">
+                  <span>
+                    <Status label={invoice.status} color={getInvoiceStatusColor(invoice.status)} />
+                  </span>
+                </Tooltip>
+              ) : (
+                <Status label={invoice.status} color={getInvoiceStatusColor(invoice.status)} />
+              )}
             </Box>
           );
         },
@@ -448,6 +496,7 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
           <Typography sx={{ fontWeight: 'bold', color: 'text.secondary', mt: 2, mb: 1 }}>{date}</Typography>
           {invoices.map((invoice) => {
             const { link, connect } = getInvoiceLink(invoice, action);
+            const isVoid = invoice.status === 'void';
             return (
               <Stack
                 key={invoice.id}
@@ -469,15 +518,19 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
                     <Stack direction="row" alignItems="center" spacing={0.5}>
                       <Typography component="span">{invoice.number}</Typography>
                       {link.external && (
-                        <Hidden mdDown>
-                          <OpenInNewOutlined fontSize="small" sx={{ color: 'text.secondary' }} />
-                        </Hidden>
+                        <OpenInNewOutlined
+                          fontSize="small"
+                          sx={{
+                            color: 'text.secondary',
+                            display: { xs: 'none', md: 'inline-flex' },
+                          }}
+                        />
                       )}
                     </Stack>
                   </a>
                 </Box>
                 <Box flex={1} textAlign="right">
-                  <Typography>
+                  <Typography sx={isVoid ? { textDecoration: 'line-through' } : {}}>
                     {formatBNStr(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
                     {invoice.paymentCurrency.symbol}
                   </Typography>
@@ -486,11 +539,13 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
                   <Typography>{formatToDate(invoice.created_at, locale, 'HH:mm:ss')}</Typography>
                 </Box>
                 {!action && (
-                  <Hidden mdDown>
-                    <Box flex={2} className="invoice-description" textAlign="right">
-                      <Typography>{invoice.description || invoice.id}</Typography>
-                    </Box>
-                  </Hidden>
+                  <Box
+                    flex={2}
+                    className="invoice-description"
+                    textAlign="right"
+                    sx={{ display: { xs: 'none', lg: 'inline-flex' } }}>
+                    <Typography>{invoice.description || invoice.id}</Typography>
+                  </Box>
                 )}
                 <Box flex={1} textAlign="right">
                   {action ? (
@@ -514,6 +569,12 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
                         {t('payment.customer.invoice.pay')}
                       </Button>
                     )
+                  ) : isVoid ? (
+                    <Tooltip title={t('payment.customer.invoice.noPaymentRequired')} arrow placement="top">
+                      <span>
+                        <Status label={invoice.status} color={getInvoiceStatusColor(invoice.status)} />
+                      </span>
+                    </Tooltip>
                   ) : (
                     <Status label={invoice.status} color={getInvoiceStatusColor(invoice.status)} />
                   )}
@@ -597,13 +658,11 @@ CustomerInvoiceList.defaultProps = {
   action: '',
   type: 'list',
   onTableDataChange: () => {},
+  relatedSubscription: false,
 };
 
 const Root = styled(Stack)`
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
-    .invoice-description {
-      display: none !important;
-    }
     svg.MuiSvgIcon-root {
       display: none !important;
     }

package/src/locales/en.tsx

@@ -96,6 +96,7 @@ export default flat({
     stakeAmount: 'Stake Amount',
     slashStakeAmount: 'Slash Stake Amount',
     know: 'I know',
+    relatedSubscription: 'Subscription',
   },
   payment: {
     checkout: {
@@ -244,14 +245,14 @@ export default flat({
       pastDue: {
         button: 'Pay',
         invoices: 'Past Due Invoices',
-        warning:
-          'Past due invoices need to be paid immediately, otherwise you can not make new purchases anymore. Please pay these invoices one by one.',
+        warning: 'Past due invoices need to be paid immediately, otherwise you can not make new purchases anymore.',
         alert: {
           title: 'You have unpaid invoices',
           description:
             'Seems you have unpaid invoices from previous subscriptions, new purchases are not allowed unless you have paid all past due invoices.',
           confirm: 'Pay Now',
         },
+        view: 'View Due Invoices',
       },
       recover: {
         button: 'Resume Subscription',
@@ -305,6 +306,7 @@ export default flat({
         next: 'No invoices yet, next invoice will be generated on {date}',
         invoiceNumber: 'Invoice Number',
         emptyList: 'No Invoice',
+        noPaymentRequired: 'No Payment Required',
       },
       payment: {
         empty: 'There are no payments',
@@ -326,6 +328,12 @@ export default flat({
         trialLeft: 'Trail Left',
         owner: 'Subscription Owner',
       },
+      overdue: {
+        title:
+          'You have {count} due invoices for {subscriptionCount} subscriptions, totaling {total} {symbol}{method}. Please pay immediately to avoid service disruption.',
+        simpleTitle: 'You have {count} due invoices. Please pay now to ensure uninterrupted service.',
+        empty: 'Great! You have no due invoices.',
+      },
     },
     invoice: {
       reason: {
@@ -357,16 +365,18 @@ export default flat({
         simpleTitle:
           'There are {count} due invoices for your subscription {name}, you need to pay them to activate your subscription or before making new purchases.',
         title:
-          'There are {count} due invoices for your subscription {name}, the total due amount is {total} {symbol}, you need to pay them to activate your subscription or before making new purchases.',
+          'There are {count} due invoices for your subscription {name}, the total due amount is {total} {symbol}{method}, you need to pay them to activate your subscription or before making new purchases.',
         payNow: 'Pay Now',
         notSupport: 'This payment method is not supported',
-        total: 'Total {total} {currency}',
+        total: 'Total {total} {currency}{method}',
         view: 'View Subscription Details',
         viewNow: 'View Now',
         pastDue: 'Past Due Invoices',
         description: 'If you have any questions, you can choose ',
         list: 'Past Due Invoices:',
         empty: 'There are no overdue invoices for your subscription {name}.',
+        retry: 'Retry',
+        paid: 'Paid',
       },
     },
   },

package/src/locales/zh.tsx

@@ -96,6 +96,7 @@ export default flat({
     stakeAmount: '质押金额',
     slashStakeAmount: '罚没金额',
     know: '我知道了',
+    relatedSubscription: '订阅',
   },
   payment: {
     checkout: {
@@ -239,12 +240,13 @@ export default flat({
       pastDue: {
         button: '续费',
         invoices: '欠费帐单',
-        warning: '请尽快支付欠费账单，否则你将无法继续使用服务或购买新服务，请逐个打开账单详情并完成支付',
+        warning: '请尽快支付欠费账单，否则你将无法继续使用服务或购买新服务。',
         alert: {
           title: '你有欠费账单',
           description: '看起来你有欠费的账单，在你支付所有欠费账单之前，新的购买或者订阅将被禁止，请不要调皮。',
           confirm: '去支付',
         },
+        view: '查看欠费明细',
       },
       recover: {
         button: '恢复订阅',
@@ -295,6 +297,7 @@ export default flat({
         next: '还没有账单，下次账单将在 {date} 生成',
         invoiceNumber: '账单编号',
         emptyList: '没有账单',
+        noPaymentRequired: '无需支付',
       },
       payment: {
         empty: '没有支付记录',
@@ -316,6 +319,12 @@ export default flat({
         trialLeft: '剩余试用时长',
         owner: '订阅拥有者',
       },
+      overdue: {
+        title:
+          '您有 {count} 张欠费账单，涉及 {subscriptionCount} 个订阅，总金额 {total} {symbol}{method}。请立即支付，以免影响您的使用。',
+        simpleTitle: '您有 {count} 张欠费账单，请立即支付，以免影响您的使用。',
+        empty: '恭喜！您当前没有欠费账单。',
+      },
     },
     invoice: {
       reason: {
@@ -345,18 +354,20 @@ export default flat({
     subscription: {
       overdue: {
         title:
-          '您的【{name}】订阅共有 {count} 张欠费账单，总计 {total} {symbol}，您需要支付这些账单以激活您的订阅，或在进行新的购买之前完成支付。',
+          '您的【{name}】订阅共有 {count} 张欠费账单，总计 {total} {symbol}{method}，您需要支付这些账单以激活您的订阅，或在进行新的购买之前完成支付。',
         simpleTitle:
           '您的【{name}】订阅共有 {count} 张欠费账单，您需要支付这些账单以激活您的订阅，或在进行新的购买之前完成支付。',
         payNow: '立即支付',
         notSupport: '暂不支持该支付方式',
-        total: '总计 {total} {currency}',
+        total: '总计 {total} {currency}{method}',
         view: '查看订阅详情',
         pastDue: '欠费账单',
         viewNow: '立即查看',
         description: '如果您有任何疑问，可以选择 ',
         list: '欠费账单：',
         empty: '您的【{name}】订阅当前没有欠费账单',
+        retry: '重新支付',
+        paid: '已支付',
       },
     },
   },

package/src/payment/donation-form.tsx

@@ -343,6 +343,7 @@ function PaymentInner({
                     mode={mode}
                     action={action}
                     onlyShowBtn
+                    isDonation
                   />
                 </Box>
               )}

package/src/payment/form/address.tsx

@@ -23,45 +23,7 @@ export default function AddressForm({ mode, stripe, sx = {} }: Props) {
     return (
       <Fade in>
         <Stack className="cko-payment-address cko-payment-form" sx={sx}>
-          <FormLabel className="base-label">{t(`payment.checkout.billing.${mode}`)}</FormLabel>
           <Stack direction="column" className="cko-payment-form" spacing={0}>
-            <Stack direction="row" spacing={0}>
-              <FormInput
-                name="billing_address.postal_code"
-                rules={{ required: t('payment.checkout.required') }}
-                errorPosition="right"
-                variant="outlined"
-                placeholder={t('payment.checkout.billing.postal_code')}
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start" style={{ marginRight: '2px', marginLeft: '-8px' }}>
-                      <Controller
-                        name="billing_address.country"
-                        control={control}
-                        render={({ field }) => (
-                          <CountrySelect
-                            {...field}
-                            sx={{
-                              '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                                borderColor: 'transparent',
-                              },
-                            }}
-                          />
-                        )}
-                      />
-                    </InputAdornment>
-                  ),
-                }}
-              />
-            </Stack>
-            <FormLabel className="base-label">{t('payment.checkout.billing.state')}</FormLabel>
-            <FormInput
-              name="billing_address.state"
-              rules={{ required: t('payment.checkout.required') }}
-              errorPosition="right"
-              variant="outlined"
-              placeholder={t('payment.checkout.billing.state')}
-            />
             <FormLabel className="base-label">{t('payment.checkout.billing.line1')}</FormLabel>
             <FormInput
               name="billing_address.line1"
@@ -78,6 +40,42 @@ export default function AddressForm({ mode, stripe, sx = {} }: Props) {
               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"
+              variant="outlined"
+              placeholder={t('payment.checkout.billing.state')}
+            />
+            <FormLabel className="base-label">{t('payment.checkout.billing.postal_code')}</FormLabel>
+            <FormInput
+              name="billing_address.postal_code"
+              rules={{ required: t('payment.checkout.required') }}
+              errorPosition="right"
+              variant="outlined"
+              placeholder={t('payment.checkout.billing.postal_code')}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start" style={{ marginRight: '2px', marginLeft: '-8px' }}>
+                    <Controller
+                      name="billing_address.country"
+                      control={control}
+                      render={({ field }) => (
+                        <CountrySelect
+                          {...field}
+                          sx={{
+                            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                              borderColor: 'transparent',
+                            },
+                          }}
+                        />
+                      )}
+                    />
+                  </InputAdornment>
+                ),
+              }}
+            />
           </Stack>
         </Stack>
       </Fade>

package/src/payment/form/index.tsx

@@ -80,10 +80,12 @@ export const hasDidWallet = (user: any) => {
 type PageData = CheckoutContext &
   CheckoutCallbacks & {
     onlyShowBtn?: boolean;
+    isDonation?: boolean;
   };
 
 PaymentForm.defaultProps = {
   onlyShowBtn: false,
+  isDonation: false,
 };
 
 // FIXME: https://stripe.com/docs/elements/address-element
@@ -103,6 +105,7 @@ export default function PaymentForm({
   action,
   currencyId,
   onlyShowBtn,
+  isDonation = false,
 }: PageData) {
   // const theme = useTheme();
   const { t } = useLocaleContext();
@@ -241,10 +244,10 @@ export default function PaymentForm({
   } else {
     buttonText = t(`payment.checkout.${checkoutSession.mode}`);
   }
-  buttonText = session?.user ? buttonText : t('payment.checkout.connect', { action: buttonText });
+  buttonText = session?.user || isDonation ? buttonText : t('payment.checkout.connect', { action: buttonText });
 
   const method = paymentMethods.find((x) => x.id === paymentMethod) as TPaymentMethodExpanded;
-
+  const isDonationMode = checkoutSession?.submit_type === 'donate' && isDonation;
   const showForm = session?.user;
   const skipBindWallet = method.type === 'stripe';
 
@@ -305,7 +308,12 @@ export default function PaymentForm({
   const onFormSubmit = async (data: any) => {
     setState({ submitting: true });
     try {
-      const result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, data);
+      let result;
+      if (isDonationMode) {
+        result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/donate-submit`, data);
+      } else {
+        result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, data);
+      }
 
       setState({
         paymentIntent: result.data.paymentIntent,
@@ -317,7 +325,7 @@ export default function PaymentForm({
 
       if (['arcblock', 'ethereum', 'base'].includes(method.type)) {
         setState({ paying: true });
-        if (result.data.balance?.sufficient || result.data.delegation?.sufficient) {
+        if ((result.data.balance?.sufficient || result.data.delegation?.sufficient) && !isDonationMode) {
           await handleConnected();
         } else {
           connect.open({
@@ -396,6 +404,10 @@ export default function PaymentForm({
         });
       }
     } else {
+      if (isDonationMode) {
+        handleSubmit(onFormSubmit, onFormError)();
+        return;
+      }
       session?.login(() => {
         setState({ submitting: true });
         onUserLoggedIn()