@blocklet/payment-react 1.18.56 → 1.19.1

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, Stack, Typography, Tooltip } from '@mui/material';
+import { Box, Button, CircularProgress, Stack, Typography, Tooltip, Avatar } from '@mui/material';
 import { styled } from '@mui/system';
 import { useInfiniteScroll, useRequest, useSetState } from 'ahooks';
 import React, { useEffect, useRef, useState } from 'react';
@@ -207,6 +207,23 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
         },
       },
     },
+    {
+      label: t('common.paymentMethod'),
+      name: 'paymentMethod',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const invoice = data?.list[index] as TInvoiceExpanded;
+          return (
+            <Typography
+              sx={{ display: 'flex', alignItems: 'center', whiteSpace: 'nowrap' }}
+              onClick={(e) => handleLinkClick(e, invoice)}>
+              <Avatar src={invoice.paymentMethod.logo} sx={{ width: 18, height: 18, mr: 1 }} />
+              {invoice.paymentMethod.name}
+            </Typography>
+          );
+        },
+      },
+    },
     {
       label: t('common.type'),
       name: 'billing_reason',
@@ -469,14 +486,22 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
   if (data && data.list.length === 0) {
     if (data.subscription && ['active', 'trialing'].includes(data.subscription.status)) {
       return (
-        <Typography color="text.secondary" sx={{ my: 0.5 }}>
+        <Typography
+          sx={{
+            color: 'text.secondary',
+            my: 0.5,
+          }}>
           {t('payment.customer.invoice.next', { date: formatToDatetime(data.subscription.current_period_end * 1000) })}
         </Typography>
       );
     }
 
     return (
-      <Typography color="text.secondary" sx={{ my: 0.5 }}>
+      <Typography
+        sx={{
+          color: 'text.secondary',
+          my: 0.5,
+        }}>
         {t('payment.customer.invoice.empty')}
       </Typography>
     );
@@ -502,21 +527,32 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
               <Stack
                 key={invoice.id}
                 direction="row"
-                sx={{ my: 1 }}
-                gap={{
-                  xs: 0.5,
-                  sm: 1.5,
-                  md: 3,
-                }}
-                alignItems="center"
-                flexWrap="nowrap">
-                <Box flex={2}>
+                sx={{
+                  gap: {
+                    xs: 0.5,
+                    sm: 1.5,
+                    md: 3,
+                  },
+
+                  alignItems: 'center',
+                  flexWrap: 'nowrap',
+                  my: 1,
+                }}>
+                <Box
+                  sx={{
+                    flex: 2,
+                  }}>
                   <a
                     href={link.url}
                     target={link.external ? '_blank' : target}
                     rel="noreferrer"
                     onClick={(e) => handleLinkClick(e, link)}>
-                    <Stack direction="row" alignItems="center" spacing={0.5}>
+                    <Stack
+                      direction="row"
+                      spacing={0.5}
+                      sx={{
+                        alignItems: 'center',
+                      }}>
                       <Typography component="span">{invoice.number}</Typography>
                       {link.external && (
                         <OpenInNewOutlined
@@ -530,25 +566,39 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
                     </Stack>
                   </a>
                 </Box>
-                <Box flex={1} textAlign="right">
+                <Box
+                  sx={{
+                    flex: 1,
+                    textAlign: 'right',
+                  }}>
                   <Typography sx={isVoid ? { textDecoration: 'line-through' } : {}}>
                     {formatBNStr(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
                     {invoice.paymentCurrency.symbol}
                   </Typography>
                 </Box>
-                <Box flex={1} textAlign="right">
+                <Box
+                  sx={{
+                    flex: 1,
+                    textAlign: 'right',
+                  }}>
                   <Typography>{formatToDate(invoice.created_at, locale, 'HH:mm:ss')}</Typography>
                 </Box>
                 {!action && (
                   <Box
-                    flex={2}
                     className="invoice-description"
-                    textAlign="right"
-                    sx={{ display: { xs: 'none', lg: 'inline-flex' } }}>
+                    sx={{
+                      flex: 2,
+                      textAlign: 'right',
+                      display: { xs: 'none', lg: 'inline-flex' },
+                    }}>
                     <Typography>{invoice.description || invoice.id}</Typography>
                   </Box>
                 )}
-                <Box flex={1} textAlign="right">
+                <Box
+                  sx={{
+                    flex: 1,
+                    textAlign: 'right',
+                  }}>
                   {action ? (
                     connect ? (
                       <Button
@@ -594,7 +644,10 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
           </Button>
         )}
         {!hasMore && data.count > size && (
-          <Typography color="text.secondary">
+          <Typography
+            sx={{
+              color: 'text.secondary',
+            }}>
             {t('common.noMore', { resource: t('payment.customer.invoices') })}
           </Typography>
         )}
@@ -603,7 +656,25 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
   );
 });
 
-export default function CustomerInvoiceList(props: Props) {
+export default function CustomerInvoiceList(rawProps: Props) {
+  const props = Object.assign(
+    {
+      customer_id: '',
+      subscription_id: '',
+      currency_id: '',
+      include_staking: false,
+      include_recovered_from: false,
+      status: 'open,paid,uncollectible',
+      pageSize: 10,
+      target: '_self',
+      action: '',
+      type: 'list',
+      onTableDataChange: () => {},
+      relatedSubscription: false,
+    },
+    rawProps
+  );
+  // eslint-disable-next-line react/prop-types
   const { action, type } = props;
   const { t, locale } = useLocaleContext();
   const { connect } = usePaymentContext();
@@ -649,21 +720,6 @@ export default function CustomerInvoiceList(props: Props) {
   return <InvoiceList {...props} onPay={onPay} />;
 }
 
-CustomerInvoiceList.defaultProps = {
-  customer_id: '',
-  subscription_id: '',
-  currency_id: '',
-  include_staking: false,
-  include_recovered_from: false,
-  status: 'open,paid,uncollectible',
-  pageSize: 10,
-  target: '_self',
-  action: '',
-  type: 'list',
-  onTableDataChange: () => {},
-  relatedSubscription: false,
-};
-
 const Root = styled(Stack)`
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
     svg.MuiSvgIcon-root {

package/src/history/payment/list.tsx

@@ -53,7 +53,14 @@ export default function CustomerPaymentList({ customer_id }: Props) {
   }
 
   if (data && data.list.length === 0) {
-    return <Typography color="text.secondary">{t('payment.customer.payment.empty')}</Typography>;
+    return (
+      <Typography
+        sx={{
+          color: 'text.secondary',
+        }}>
+        {t('payment.customer.payment.empty')}
+      </Typography>
+    );
   }
 
   const hasMore = data && data.list.length < data.count;
@@ -61,7 +68,12 @@ export default function CustomerPaymentList({ customer_id }: Props) {
   const grouped = groupByDate(data.list);
 
   return (
-    <Stack direction="column" gap={1} sx={{ mt: 1 }}>
+    <Stack
+      direction="column"
+      sx={{
+        gap: 1,
+        mt: 1,
+      }}>
       {Object.entries(grouped).map(([date, payments]) => (
         <Box key={date}>
           <Typography sx={{ fontWeight: 'bold', color: 'text.secondary', mt: 2, mb: 1 }}>{date}</Typography>
@@ -72,29 +84,51 @@ export default function CustomerPaymentList({ customer_id }: Props) {
                 xs: 'column',
                 sm: 'row',
               }}
-              sx={{ my: 1 }}
-              gap={{
-                xs: 0.5,
-                sm: 1.5,
-                md: 3,
-              }}
-              flexWrap="nowrap">
-              <Box flex={3}>
+              sx={{
+                gap: {
+                  xs: 0.5,
+                  sm: 1.5,
+                  md: 3,
+                },
+
+                flexWrap: 'nowrap',
+                my: 1,
+              }}>
+              <Box
+                sx={{
+                  flex: 3,
+                }}>
                 <Typography>{formatToDate(item.created_at)}</Typography>
               </Box>
-              <Box flex={2}>
-                <Typography textAlign="right">
+              <Box
+                sx={{
+                  flex: 2,
+                }}>
+                <Typography
+                  sx={{
+                    textAlign: 'right',
+                  }}>
                   {formatBNStr(item.amount_received, item.paymentCurrency.decimal)}&nbsp;
                   {item.paymentCurrency.symbol}
                 </Typography>
               </Box>
-              <Box flex={3}>
+              <Box
+                sx={{
+                  flex: 3,
+                }}>
                 <Status label={item.status} color={getPaymentIntentStatusColor(item.status)} />
               </Box>
-              <Box flex={3}>
+              <Box
+                sx={{
+                  flex: 3,
+                }}>
                 <Typography>{item.description || '-'}</Typography>
               </Box>
-              <Box flex={3} sx={{ minWidth: '220px' }}>
+              <Box
+                sx={{
+                  flex: 3,
+                  minWidth: '220px',
+                }}>
                 {(item.payment_details?.arcblock?.tx_hash ||
                   item.payment_details?.ethereum?.tx_hash ||
                   item.payment_details?.base?.tx_hash) && (
@@ -114,7 +148,10 @@ export default function CustomerPaymentList({ customer_id }: Props) {
           </Button>
         )}
         {!hasMore && data.count > pageSize && (
-          <Typography color="text.secondary">
+          <Typography
+            sx={{
+              color: 'text.secondary',
+            }}>
             {t('common.noMore', { resource: t('payment.customer.payments') })}
           </Typography>
         )}

package/src/hooks/keyboard.ts

@@ -14,7 +14,7 @@ type TabNavigationOptions<T> = {
   /** a selector to find navigable elements */
   selector?: string;
   /** an element container reference, limiting the query DOM range to improve performance */
-  containerRef?: RefObject<HTMLElement>;
+  containerRef?: RefObject<HTMLElement | null>;
   /** the type of the current value, can be 'index' or 'value' */
   valueType?: 'index' | 'value';
 };

package/src/index.ts

@@ -5,6 +5,7 @@ import TxGas from './components/blockchain/gas';
 import TxLink from './components/blockchain/tx';
 import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
+import FormLabel from './components/label';
 import Livemode from './components/livemode';
 import PricingTable from './components/pricing-table';
 import Table from './components/table';
@@ -13,6 +14,8 @@ import Status from './components/status';
 import Switch from './components/switch-button';
 import CustomerInvoiceList from './history/invoice/list';
 import CustomerPaymentList from './history/payment/list';
+import CreditGrantsList, { StatusChip as CreditStatusChip } from './history/credit/grants-list';
+import CreditTransactionsList from './history/credit/transactions-list';
 import api from './libs/api';
 import dayjs from './libs/dayjs';
 import Amount from './payment/amount';
@@ -32,6 +35,7 @@ import OverdueInvoicePayment from './components/over-due-invoice-payment';
 import PaymentBeneficiaries from './components/payment-beneficiaries';
 import LoadingButton from './components/loading-button';
 import ResumeSubscription from './components/resume-subscription';
+import DateRangePicker from './components/date-range-picker';
 
 export { PaymentThemeProvider } from './theme';
 
@@ -55,6 +59,7 @@ export {
   api,
   dayjs,
   FormInput,
+  FormLabel,
   PhoneInput,
   AddressForm,
   StripeForm,
@@ -86,4 +91,8 @@ export {
   LoadingButton,
   DonateDetails,
   ResumeSubscription,
+  CreditGrantsList,
+  CreditTransactionsList,
+  DateRangePicker,
+  CreditStatusChip,
 };

package/src/libs/util.ts

@@ -1283,3 +1283,17 @@ export function getTokenBalanceLink(method: TPaymentMethod, address: string) {
   }
   return '';
 }
+
+export function isCreditMetered(price: TPrice): boolean {
+  return !!(price.type === 'recurring' && price.recurring?.usage_type === 'metered' && price.recurring?.meter_id);
+}
+
+export function showStaking(method: TPaymentMethod, currency: TPaymentCurrency, noStake: boolean) {
+  if (noStake) {
+    return false;
+  }
+  if (method.type === 'arcblock') {
+    return currency.type !== 'credit';
+  }
+  return true;
+}

package/src/locales/en.tsx

@@ -30,6 +30,10 @@ export default flat({
     remove: 'Remove',
     removed: 'Resource removed',
     confirm: 'Confirm',
+    clear: 'Clear',
+    selectTimeRange: 'Select time range',
+    startDate: 'Start date',
+    endDate: 'End date',
     upload: 'Upload',
     change: 'Change',
     cancel: 'Cancel',
@@ -103,6 +107,7 @@ export default flat({
       confirm: 'Confirm',
       cancel: 'Cancel',
     },
+    paymentMethod: 'Payment Method',
   },
   payment: {
     checkout: {
@@ -209,6 +214,11 @@ export default flat({
         add: 'Add to order',
         remove: 'Remove from order',
       },
+      credit: {
+        oneTimeInfo: 'You will receive {amount} {symbol} credits after payment',
+        recurringInfo: 'You will receive {amount} {symbol} credits {period}',
+        expiresIn: 'credits have a validity period of {duration} {unit}',
+      },
       expired: {
         title: 'Expired Link',
         description:
@@ -241,6 +251,16 @@ export default flat({
         amount: 'Amount',
         failed: 'Account changed, please pay manually.',
         balanceLink: 'View Balance',
+        credit: {
+          title: 'Confirm Credit Payment',
+          availableAmount: 'Available Credit: {amount}',
+          confirmMessage: 'You will use {amount} credits to subscribe to this service.',
+          meteringSubscriptionMessage:
+            'This subscription service will deduct credits in real-time based on actual usage. You currently have {available} credits available. Confirm to continue?',
+          insufficientTitle: 'Insufficient Credit',
+          insufficientMessage:
+            'This subscription service will deduct credits in real-time based on actual usage. You currently have insufficient credits. Please top up your credits first.',
+        },
       },
     },
     customer: {

package/src/locales/zh.tsx

@@ -33,6 +33,10 @@ export default flat({
     change: '更换',
     confirm: '确认',
     cancel: '取消',
+    clear: '清空',
+    selectTimeRange: '选择时间范围',
+    startDate: '开始日期',
+    endDate: '结束日期',
     close: '关闭',
     back: '返回',
     every: '每',
@@ -103,6 +107,7 @@ export default flat({
       confirm: '确认',
       cancel: '取消',
     },
+    paymentMethod: '支付方式',
   },
   payment: {
     checkout: {
@@ -215,6 +220,11 @@ export default flat({
         add: '添加到订单',
         remove: '从订单移除',
       },
+      credit: {
+        oneTimeInfo: '付款完成后您将获得 {amount} {symbol} 额度',
+        recurringInfo: '您将{period}获得 {amount} {symbol} 额度',
+        expiresIn: '额度有效期为 {duration} {unit}',
+      },
       emptyItems: {
         title: '没有任何购买项目',
         description: '可能这个付款链接没有正确配置',
@@ -236,6 +246,15 @@ export default flat({
         amount: '支付金额',
         failed: '账户发生变化，无法自动完成支付，请手动支付。',
         balanceLink: '查看余额',
+        credit: {
+          title: '确认额度支付',
+          availableAmount: '可用额度：{amount}',
+          confirmMessage: '您将使用 {amount} 额度来订阅此服务。',
+          meteringSubscriptionMessage:
+            '此订阅服务将根据实际使用情况实时扣除额度。您当前可用额度为 {available}，确认是否继续？',
+          insufficientTitle: '额度不足',
+          insufficientMessage: '此订阅服务将根据实际使用情况实时扣除额度。您当前可用额度不足，请先充值额度。',
+        },
       },
     },
     customer: {

package/src/payment/amount.tsx

@@ -3,7 +3,7 @@ import type { TypographyProps } from '@mui/material';
 
 type Props = { amount: string } & TypographyProps;
 
-export default function PaymentAmount({ amount, sx }: Props) {
+export default function PaymentAmount({ amount, sx = {} }: Props) {
   return (
     <Typography
       component="div"
@@ -19,8 +19,3 @@ export default function PaymentAmount({ amount, sx }: Props) {
     </Typography>
   );
 }
-
-PaymentAmount.defaultProps = {
-  // eslint-disable-next-line react/default-props-match-prop-types
-  sx: {},
-};

package/src/payment/donation-form.tsx

@@ -52,25 +52,19 @@ type Props = CheckoutContext &
     id: string;
   };
 
-PaymentInner.defaultProps = {
-  completed: false,
-  showCheckoutSummary: true,
-  formRender: {},
-};
-
 function PaymentInner({
   checkoutSession,
   paymentMethods,
   paymentLink,
   paymentIntent,
   customer,
-  completed,
+  completed = false,
   mode,
   onPaid,
   onError,
   onChange,
   action,
-  formRender,
+  formRender = {},
   benefits,
 }: MainProps) {
   const { t } = useLocaleContext();
@@ -227,7 +221,14 @@ function PaymentInner({
                 },
               }}
             />
-            <Stack direction="row" justifyContent="flex-end" alignItems="center" flexWrap="wrap" gap={1}>
+            <Stack
+              direction="row"
+              sx={{
+                justifyContent: 'flex-end',
+                alignItems: 'center',
+                flexWrap: 'wrap',
+                gap: 1,
+              }}>
               <Button
                 variant="outlined"
                 size="large"
@@ -244,7 +245,13 @@ function PaymentInner({
             )}
 
             <Stack sx={{ display: benefitsState.open ? 'none' : 'block' }}>
-              <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 2 }}>
+              <Stack
+                direction="row"
+                sx={{
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  mb: 2,
+                }}>
                 <Typography
                   title={t('payment.checkout.orderSummary')}
                   sx={{
@@ -311,7 +318,14 @@ function PaymentInner({
                 },
               }}
             />
-            <Stack direction="row" justifyContent="space-between" alignItems="center" flexWrap="wrap" gap={1}>
+            <Stack
+              direction="row"
+              sx={{
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                flexWrap: 'wrap',
+                gap: 1,
+              }}>
               {benefits &&
                 benefits.length > 0 &&
                 (benefitsState.open ? (
@@ -331,18 +345,20 @@ function PaymentInner({
                   </Typography>
                 ) : (
                   <Box
-                    display="flex"
-                    gap={0.5}
-                    alignItems="center"
                     onClick={() => setBenefitsState({ open: true })}
                     sx={{
+                      display: 'flex',
+                      gap: 0.5,
+                      alignItems: 'center',
                       color: 'text.secondary',
                       cursor: 'pointer',
+
                       '& .benefits-arrow': {
                         opacity: 0,
                         transform: 'translateX(-4px)',
                         transition: 'all 0.2s',
                       },
+
                       '&:hover': {
                         color: 'text.primary',
                         '& .benefits-arrow': {
@@ -358,13 +374,15 @@ function PaymentInner({
                 ))}
               {benefitsState.open ? null : (
                 <Box
-                  display="flex"
-                  gap={2}
                   sx={{
+                    display: 'flex',
+                    gap: 2,
+
                     flex: {
                       xs: 1,
                       md: 'auto',
                     },
+
                     justifyContent: 'flex-end',
                     whiteSpace: 'nowrap',
                   }}>
@@ -408,21 +426,14 @@ function PaymentInner({
   );
 }
 
-DonationForm.defaultProps = {
-  completed: false,
-  error: null,
-  showCheckoutSummary: true,
-  formRender: {},
-};
-
 export default function DonationForm({
   checkoutSession,
   paymentMethods,
   paymentIntent,
   paymentLink,
   customer,
-  completed,
-  error,
+  completed = false,
+  error = null,
   mode,
   onPaid,
   onError,
@@ -430,7 +441,7 @@ export default function DonationForm({
   goBack,
   action,
   showCheckoutSummary = true,
-  formRender,
+  formRender = {},
   id,
 }: Props) {
   const { t } = useLocaleContext();
@@ -473,7 +484,14 @@ export default function DonationForm({
     const footer = (
       <>
         <Divider sx={{ mt: { xs: '16px', md: '-24px' }, mb: { xs: '16px', md: '-16px' } }} />
-        <Stack direction="row" justifyContent="flex-end" alignItems="center" flexWrap="wrap" gap={1}>
+        <Stack
+          direction="row"
+          sx={{
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            gap: 1,
+          }}>
           <Button variant="outlined" size="large" onClick={formRender?.onCancel}>
             {t('common.cancel')}
           </Button>
@@ -540,9 +558,9 @@ export default function DonationForm({
 
   return (
     <Stack
-      display="flex"
-      flexDirection="column"
       sx={{
+        display: 'flex',
+        flexDirection: 'column',
         height: mode === 'standalone' ? '100vh' : 'auto',
         overflow: isMobileSafariEnv ? 'visible' : 'hidden',
       }}>