@blocklet/payment-react 1.19.0 → 1.19.2

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',

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/form/address.tsx

@@ -1,8 +1,9 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Fade, FormLabel, InputAdornment, Stack } from '@mui/material';
+import { Fade, InputAdornment, Stack } from '@mui/material';
 import type { SxProps } from '@mui/material';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import FormInput from '../../components/input';
+import FormLabel from '../../components/label';
 import CountrySelect from '../../components/country-select';
 import { getFieldValidation, validatePostalCode } from '../../libs/validator';
 
@@ -79,7 +80,7 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation = {
                       render={({ field }) => (
                         <CountrySelect
                           {...field}
-                          ref={field.ref as unknown as React.RefObject<HTMLDivElement>}
+                          ref={field.ref as unknown as React.RefObject<HTMLDivElement | null>}
                           sx={{
                             '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                               borderColor: 'transparent',
@@ -127,7 +128,7 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation = {
                         render={({ field }) => (
                           <CountrySelect
                             {...field}
-                            ref={field.ref as unknown as React.RefObject<HTMLDivElement>}
+                            ref={field.ref as unknown as React.RefObject<HTMLDivElement | null>}
                             sx={{
                               '.MuiOutlinedInput-notchedOutline': {
                                 borderColor: 'transparent !important',

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, Tooltip, Typography } from '@mui/material';
+import { Box, Button, CircularProgress, Divider, Fade, Stack, Tooltip, Typography } from '@mui/material';
 import { useMemoizedFn, useSetState } from 'ahooks';
 import pWaitFor from 'p-wait-for';
 import { useEffect, useMemo, useRef } from 'react';
@@ -19,6 +19,7 @@ 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 FormLabel from '../../components/label';
 import { usePaymentContext } from '../../contexts/payment';
 import { useSubscription } from '../../hooks/subscription';
 import api from '../../libs/api';
@@ -110,9 +111,11 @@ type UserInfo = {
 type FastCheckoutInfo = {
   open: boolean;
   loading: boolean;
-  sourceType: 'balance' | 'delegation';
+  sourceType: 'balance' | 'delegation' | 'credit';
   amount: string;
   payer?: string;
+  availableCredit?: string;
+  balance?: string;
 };
 
 const setUserFormValues = (
@@ -206,6 +209,9 @@ export default function PaymentForm({
     customerLimited?: boolean;
     stripePaying: boolean;
     fastCheckoutInfo: FastCheckoutInfo | null;
+    creditInsufficientInfo: {
+      open: boolean;
+    } | null;
   }>({
     submitting: false,
     paying: false,
@@ -216,6 +222,7 @@ export default function PaymentForm({
     customerLimited: false,
     stripePaying: false,
     fastCheckoutInfo: null,
+    creditInsufficientInfo: null,
   });
 
   const currencies = flattenPaymentMethods(paymentMethods);
@@ -418,6 +425,10 @@ export default function PaymentForm({
     setState({ fastCheckoutInfo: null });
   };
 
+  const handleCreditInsufficientClose = () => {
+    setState({ creditInsufficientInfo: null });
+  };
+
   const openConnect = () => {
     try {
       if (!['arcblock', 'ethereum', 'base'].includes(method.type)) {
@@ -476,7 +487,30 @@ export default function PaymentForm({
       });
 
       if (['arcblock', 'ethereum', 'base'].includes(method.type)) {
-        if (
+        // 优先判断 credit 支付
+        if (paymentCurrency?.type === 'credit') {
+          if (result.data.creditSufficient === true) {
+            // 如果是 credit 支付且有足够额度，显示 credit 确认弹窗
+            setState({
+              fastCheckoutInfo: {
+                open: true,
+                loading: false,
+                sourceType: 'credit',
+                amount: result.data.fastPayInfo?.amount || '0',
+                payer: result.data.fastPayInfo?.payer,
+                availableCredit: result.data.fastPayInfo?.amount || '0',
+                balance: result.data.fastPayInfo?.token?.balance || '0',
+              },
+            });
+          } else {
+            // 如果是 credit 支付但额度不足，显示额度不足弹窗
+            setState({
+              creditInsufficientInfo: {
+                open: true,
+              },
+            });
+          }
+        } else if (
           (result.data.balance?.sufficient || result.data.delegation?.sufficient) &&
           !isDonationMode &&
           result.data.fastPayInfo
@@ -581,73 +615,96 @@ 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')}
+      title={
+        state.fastCheckoutInfo.sourceType === 'credit'
+          ? t('payment.checkout.fastPay.credit.title')
+          : t('payment.checkout.fastPay.title')
+      }
       message={
-        <Stack>
-          <Typography>{t('payment.checkout.fastPay.autoPaymentReason')}</Typography>
-          <Divider sx={{ mt: 1.5, mb: 1.5 }} />
-          <Stack spacing={1}>
-            <Stack
-              sx={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-              }}>
-              <Typography
+        state.fastCheckoutInfo.sourceType === 'credit' ? (
+          <Typography>
+            {t('payment.checkout.fastPay.credit.meteringSubscriptionMessage', {
+              available: `${fromUnitToToken(state.fastCheckoutInfo?.balance || '0', paymentCurrency?.decimal || 18).toString()} ${paymentCurrency?.symbol}`,
+            })}
+          </Typography>
+        ) : (
+          <Stack>
+            <Typography>{t('payment.checkout.fastPay.autoPaymentReason')}</Typography>
+            <Divider sx={{ mt: 1.5, mb: 1.5 }} />
+            <Stack spacing={1}>
+              <Stack
                 sx={{
-                  color: 'text.primary',
-                  whiteSpace: 'nowrap',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
                 }}>
-                {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
-              sx={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-              }}>
-              <Typography
+                <Typography
+                  sx={{
+                    color: 'text.primary',
+                    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
                 sx={{
-                  color: 'text.primary',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
                 }}>
-                {t('payment.checkout.fastPay.amount')}
-              </Typography>
-              <Typography>
-                {fromUnitToToken(state.fastCheckoutInfo.amount, paymentCurrency?.decimal || 18).toString()}{' '}
-                {paymentCurrency?.symbol}
-              </Typography>
+                <Typography
+                  sx={{
+                    color: 'text.primary',
+                  }}>
+                  {t('payment.checkout.fastPay.amount')}
+                </Typography>
+                <Typography>
+                  {fromUnitToToken(state.fastCheckoutInfo.amount, paymentCurrency?.decimal || 18).toString()}{' '}
+                  {paymentCurrency?.symbol}
+                </Typography>
+              </Stack>
             </Stack>
           </Stack>
-        </Stack>
+        )
       }
       loading={state.fastCheckoutInfo.loading}
       color="primary"
     />
   );
 
+  const CreditInsufficientDialog = state.creditInsufficientInfo && (
+    <ConfirmDialog
+      onConfirm={handleCreditInsufficientClose}
+      onCancel={handleCreditInsufficientClose}
+      title={t('payment.checkout.fastPay.credit.insufficientTitle')}
+      message={<Typography>{t('payment.checkout.fastPay.credit.insufficientMessage')}</Typography>}
+      confirm={t('common.confirm')}
+    />
+  );
+
   if (onlyShowBtn) {
     return (
       <>
@@ -700,6 +757,7 @@ export default function PaymentForm({
           />
         )}
         {FastCheckoutConfirmDialog}
+        {CreditInsufficientDialog}
       </>
     );
   }
@@ -890,6 +948,7 @@ export default function PaymentForm({
         />
       )}
       {FastCheckoutConfirmDialog}
+      {CreditInsufficientDialog}
     </>
   );
 }

package/src/payment/index.tsx

@@ -30,6 +30,7 @@ import {
   getStatementDescriptor,
   isMobileSafari,
   isValidCountry,
+  showStaking,
 } from '../libs/util';
 import type { CheckoutCallbacks, CheckoutContext, CheckoutFormData } from '../types';
 import PaymentError from './error';
@@ -208,6 +209,19 @@ function PaymentInner({
     }
   };
 
+  const onQuantityChange = async (itemId: string, quantity: number) => {
+    try {
+      const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/adjust-quantity`, {
+        itemId,
+        quantity,
+      });
+      setState({ checkoutSession: data });
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
+
   const onCancelCrossSell = async () => {
     try {
       const { data } = await api.delete(`/api/checkout-sessions/${state.checkoutSession.id}/cross-sell`);
@@ -263,10 +277,11 @@ function PaymentInner({
                   // @ts-ignore
                   state.checkoutSession.subscription_data?.min_stake_amount || 0
                 )}
-                showStaking={method.type === 'arcblock' && !state.checkoutSession.subscription_data?.no_stake}
+                showStaking={showStaking(method, currency, !!state.checkoutSession.subscription_data?.no_stake)}
                 currency={currency}
                 onUpsell={onUpsell}
                 onDownsell={onDownsell}
+                onQuantityChange={onQuantityChange}
                 onApplyCrossSell={onApplyCrossSell}
                 onCancelCrossSell={onCancelCrossSell}
                 onChangeAmount={onChangeAmount}
@@ -274,6 +289,7 @@ function PaymentInner({
                 crossSellBehavior={state.checkoutSession.cross_sell_behavior}
                 donationSettings={paymentLink?.donation_settings}
                 action={action}
+                completed={completed}
               />
               {mode === 'standalone' && !isMobile && (
                 <CheckoutFooter className="cko-footer" sx={{ color: 'text.lighter' }} />