@blocklet/payment-react 1.18.15 → 1.18.16

package/src/components/over-due-invoice-payment.tsx

@@ -1,15 +1,19 @@
+/* eslint-disable @typescript-eslint/indent */
 import { useEffect, useMemo, useState } from 'react';
-import { Button, Typography, Stack, CircularProgress, Alert } from '@mui/material';
+import { Button, Typography, Stack, Alert, SxProps } from '@mui/material';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import { joinURL } from 'ufo';
 import type { Invoice, PaymentCurrency, PaymentMethod, Subscription, TInvoiceExpanded } from '@blocklet/payment-types';
 import { useRequest } from 'ahooks';
 import { Dialog } from '@arcblock/ux';
+import { CheckCircle as CheckCircleIcon } from '@mui/icons-material';
+import debounce from 'lodash/debounce';
 import { usePaymentContext } from '../contexts/payment';
 import { formatAmount, formatError, getPrefix } from '../libs/util';
 import { useSubscription } from '../hooks/subscription';
 import api from '../libs/api';
+import LoadingButton from './loading-button';
 
 type DialogProps = {
   open?: boolean;
@@ -17,19 +21,28 @@ type DialogProps = {
   title?: string;
 };
 
+type DetailLinkOptions = {
+  enabled?: boolean;
+  onClick?: (e: React.MouseEvent) => void;
+  title?: string;
+};
+
 type Props = {
-  subscriptionId: string;
+  subscriptionId?: string;
+  customerId?: string;
   mode?: 'default' | 'custom';
-  onPaid?: (subscriptionId: string, currencyId: string) => void;
+  onPaid?: (id: string, currencyId: string, type: 'subscription' | 'customer') => void;
   dialogProps?: DialogProps;
-  inSubscriptionDetail?: boolean;
+  detailLinkOptions?: DetailLinkOptions;
+  successToast?: boolean;
   children?: (
     handlePay: (item: SummaryItem) => void,
     data: {
-      subscription: Subscription;
+      subscription?: Subscription;
       summary: { [key: string]: SummaryItem };
       invoices: Invoice[];
-      subscriptionUrl: string;
+      subscriptionCount?: number;
+      detailUrl: string;
     }
   ) => React.ReactNode;
 };
@@ -40,24 +53,41 @@ type SummaryItem = {
   method: PaymentMethod;
 };
 
-const fetchOverdueInvoices = async (
-  subscriptionId: string
-): Promise<{
-  subscription: Subscription;
+type OverdueInvoicesResult = {
+  subscription?: Subscription;
   summary: { [key: string]: SummaryItem };
   invoices: Invoice[];
-}> => {
-  const res = await api.get(`/api/subscriptions/${subscriptionId}/overdue/invoices`);
+  subscriptionCount?: number;
+};
+
+const fetchOverdueInvoices = async (params: {
+  subscriptionId?: string;
+  customerId?: string;
+}): Promise<OverdueInvoicesResult> => {
+  if (!params.subscriptionId && !params.customerId) {
+    throw new Error('Either subscriptionId or customerId must be provided');
+  }
+
+  let url;
+  if (params.subscriptionId) {
+    url = `/api/subscriptions/${params.subscriptionId}/overdue/invoices`;
+  } else {
+    url = `/api/customers/${params.customerId}/overdue/invoices`;
+  }
+
+  const res = await api.get(url);
   return res.data;
 };
 
 function OverdueInvoicePayment({
   subscriptionId,
+  customerId,
   mode = 'default',
   dialogProps = {},
   children,
   onPaid = () => {},
-  inSubscriptionDetail = false,
+  detailLinkOptions = { enabled: true },
+  successToast = true,
 }: Props) {
   const { t } = useLocaleContext();
   const { connect } = usePaymentContext();
@@ -65,18 +95,33 @@ function OverdueInvoicePayment({
   const [payLoading, setPayLoading] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(dialogProps.open || false);
   const [processedCurrencies, setProcessedCurrencies] = useState<{ [key: string]: number }>({});
+  const [paymentStatus, setPaymentStatus] = useState<{ [key: string]: 'success' | 'error' | 'idle' }>({});
+
+  const sourceType = subscriptionId ? 'subscription' : 'customer';
+  const sourceId = subscriptionId || customerId;
+
   const {
     data = {
-      subscription: {} as Subscription,
       summary: {},
       invoices: [],
-    },
+    } as OverdueInvoicesResult,
     error,
     loading,
     runAsync: refresh,
-  } = useRequest(() => fetchOverdueInvoices(subscriptionId));
+  } = useRequest(() => fetchOverdueInvoices({ subscriptionId, customerId }), {
+    ready: !!subscriptionId || !!customerId,
+  });
+
+  const detailUrl = useMemo(() => {
+    if (subscriptionId) {
+      return joinURL(getPrefix(), `/customer/subscription/${subscriptionId}`);
+    }
+    if (customerId) {
+      return joinURL(getPrefix(), '/customer/invoice/past-due');
+    }
+    return '';
+  }, [subscriptionId, customerId]);
 
-  const subscriptionUrl = joinURL(getPrefix(), `/customer/subscription/${subscriptionId}`);
   const summaryList = useMemo(() => {
     if (!data?.summary) {
       return [];
@@ -84,26 +129,47 @@ function OverdueInvoicePayment({
     return Object.values(data.summary);
   }, [data?.summary]);
 
+  const debouncedHandleInvoicePaid = debounce(
+    async (currencyId: string) => {
+      if (successToast) {
+        Toast.close();
+        Toast.success(t('payment.customer.invoice.paySuccess'));
+      }
+      setPayLoading(false);
+      const res = await refresh();
+      if (res.invoices?.length === 0) {
+        setDialogOpen(false);
+        onPaid(sourceId as string, currencyId, sourceType as 'subscription' | 'customer');
+      }
+    },
+    1000,
+    {
+      leading: false,
+      trailing: true,
+      maxWait: 5000,
+    }
+  );
+
   const subscription = useSubscription('events');
   useEffect(() => {
     if (subscription) {
       subscription.on('invoice.paid', ({ response }: { response: TInvoiceExpanded }) => {
-        const uniqueKey = `${response.subscription_id}-${response.currency_id}`;
-        if (response.subscription_id === subscriptionId && !processedCurrencies[uniqueKey]) {
-          Toast.success(t('payment.customer.invoice.paySuccess'));
-          setPayLoading(false);
-          setProcessedCurrencies({ ...processedCurrencies, [uniqueKey]: 1 });
-          refresh().then((res) => {
-            if (res.invoices?.length === 0) {
-              setDialogOpen(false);
-              onPaid(subscriptionId, response.currency_id);
-            }
-          });
+        const relevantId = subscriptionId || response.customer_id;
+        const uniqueKey = `${relevantId}-${response.currency_id}`;
+
+        if (
+          (subscriptionId && response.subscription_id === subscriptionId) ||
+          (customerId && response.customer_id === customerId)
+        ) {
+          if (!processedCurrencies[uniqueKey]) {
+            setProcessedCurrencies((prev) => ({ ...prev, [uniqueKey]: 1 }));
+            debouncedHandleInvoicePaid(response.currency_id);
+          }
         }
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [subscription]);
+  }, [subscription, subscriptionId, customerId]);
 
   const handlePay = (item: SummaryItem) => {
     const { currency, method } = item;
@@ -116,15 +182,33 @@ function OverdueInvoicePayment({
     }
     setSelectCurrencyId(currency.id);
     setPayLoading(true);
+    setPaymentStatus((prev) => ({
+      ...prev,
+      [currency.id]: 'idle',
+    }));
+
     if (['arcblock', 'ethereum', 'base'].includes(method.type)) {
+      const extraParams: any = { currencyId: currency.id };
+
+      if (subscriptionId) {
+        extraParams.subscriptionId = subscriptionId;
+      } else if (customerId) {
+        extraParams.customerId = customerId;
+      }
+
       connect.open({
         containerEl: undefined as unknown as Element,
         saveConnect: false,
         action: 'collect-batch',
         prefix: joinURL(getPrefix(), '/api/did'),
-        extraParams: { currencyId: currency.id, subscriptionId },
+        extraParams,
         onSuccess: () => {
           connect.close();
+          setPayLoading(false);
+          setPaymentStatus((prev) => ({
+            ...prev,
+            [currency.id]: 'success',
+          }));
         },
         onClose: () => {
           connect.close();
@@ -132,6 +216,10 @@ function OverdueInvoicePayment({
         },
         onError: (err: any) => {
           Toast.error(formatError(err));
+          setPaymentStatus((prev) => ({
+            ...prev,
+            [currency.id]: 'error',
+          }));
           setPayLoading(false);
         },
       });
@@ -144,7 +232,10 @@ function OverdueInvoicePayment({
   };
 
   const handleViewDetailClick = (e: React.MouseEvent) => {
-    if (inSubscriptionDetail) {
+    if (detailLinkOptions.onClick) {
+      e.preventDefault();
+      detailLinkOptions.onClick(e);
+    } else if (!detailLinkOptions.enabled) {
       e.preventDefault();
       handleClose();
     }
@@ -154,37 +245,137 @@ function OverdueInvoicePayment({
     return null;
   }
 
-  const renderPayButton = (item: SummaryItem, props: any) => {
-    const isPayLoading = payLoading && item.currency.id === selectCurrencyId;
+  const getDetailLinkText = () => {
+    if (detailLinkOptions.title) {
+      return detailLinkOptions.title;
+    }
+
+    if (subscriptionId) {
+      return t('payment.subscription.overdue.view');
+    }
+
+    return t('payment.customer.pastDue.view');
+  };
+
+  const renderPayButton = (
+    item: SummaryItem,
+    primaryButton = true,
+    props: {
+      variant?: 'contained' | 'text';
+      sx?: SxProps;
+    } = {
+      variant: 'contained',
+    }
+  ) => {
+    const { currency } = item;
+    const inProcess = payLoading && selectCurrencyId === currency.id;
+    const status = paymentStatus[currency.id] || 'idle';
+
+    if (status === 'success') {
+      return (
+        <Button
+          // eslint-disable-next-line react/prop-types
+          variant={props?.variant || 'contained'}
+          size="small"
+          {...(primaryButton
+            ? {}
+            : {
+                color: 'success',
+                startIcon: <CheckCircleIcon />,
+              })}>
+          {t('payment.subscription.overdue.paid')}
+        </Button>
+      );
+    }
+
+    if (status === 'error') {
+      return (
+        <Button variant="contained" size="small" onClick={() => handlePay(item)} {...props}>
+          {t('payment.subscription.overdue.retry')}
+        </Button>
+      );
+    }
+
     if (item.method.type === 'stripe') {
       return (
-        <Button variant="contained" color="primary" onClick={() => window.open(subscriptionUrl, '_blank')} {...props}>
+        <Button variant="contained" color="primary" onClick={() => window.open(detailUrl, '_blank')} {...props}>
           {t('payment.subscription.overdue.viewNow')}
         </Button>
       );
     }
     return (
-      <Button variant="contained" color="primary" onClick={() => handlePay(item)} {...props} disabled={isPayLoading}>
-        {isPayLoading && <CircularProgress size={14} sx={{ mr: 1, color: 'text.lighter' }} />}
+      <LoadingButton
+        variant="contained"
+        size="small"
+        disabled={inProcess}
+        loading={inProcess}
+        onClick={() => handlePay(item)}
+        {...props}>
         {t('payment.subscription.overdue.payNow')}
-      </Button>
+      </LoadingButton>
     );
   };
 
+  const getOverdueTitle = () => {
+    if (subscriptionId && data.subscription) {
+      if (summaryList.length === 1) {
+        return t('payment.subscription.overdue.title', {
+          name: data.subscription?.description,
+          count: data.invoices?.length,
+          total: formatAmount(summaryList[0]?.amount, summaryList[0]?.currency?.decimal),
+          symbol: summaryList[0]?.currency?.symbol,
+        });
+      }
+      return t('payment.subscription.overdue.simpleTitle', {
+        name: data.subscription?.description,
+        count: data.invoices?.length,
+      });
+    }
+    if (customerId) {
+      if (summaryList.length === 1) {
+        return t('payment.customer.overdue.title', {
+          subscriptionCount: data.subscriptionCount || 0,
+          count: data.invoices?.length,
+          total: formatAmount(summaryList[0]?.amount, summaryList[0]?.currency?.decimal),
+          symbol: summaryList[0]?.currency?.symbol,
+        });
+      }
+      return t('payment.customer.overdue.simpleTitle', {
+        subscriptionCount: data.subscriptionCount || 0,
+        count: data.invoices?.length,
+      });
+    }
+
+    return '';
+  };
+
+  const getEmptyStateMessage = () => {
+    if (subscriptionId && data.subscription) {
+      return t('payment.subscription.overdue.empty', {
+        name: data.subscription?.description,
+      });
+    }
+    if (customerId) {
+      return t('payment.customer.overdue.empty');
+    }
+
+    return '';
+  };
+
   if (mode === 'custom' && children && typeof children === 'function') {
     return (
       <Stack>
         {children(handlePay, {
-          subscription: data?.subscription as Subscription,
-          subscriptionUrl,
+          subscription: data?.subscription,
           summary: data?.summary as { [key: string]: SummaryItem },
           invoices: data?.invoices as Invoice[],
+          subscriptionCount: data?.subscriptionCount,
+          detailUrl,
         })}
       </Stack>
     );
   }
 
-  // Default mode
   return (
     <Dialog
       PaperProps={{
@@ -201,12 +392,7 @@ function OverdueInvoicePayment({
         <Stack gap={1}>
           {summaryList.length === 0 && (
             <>
-              <Alert severity="success">
-                {t('payment.subscription.overdue.empty', {
-                  // @ts-ignore
-                  name: data?.subscription?.description,
-                })}
-              </Alert>
+              <Alert severity="success">{getEmptyStateMessage()}</Alert>
               <Stack direction="row" justifyContent="flex-end" mt={2}>
                 <Button variant="outlined" color="primary" onClick={handleClose} sx={{ width: 'fit-content' }}>
                   {/* @ts-ignore */}
@@ -218,23 +404,21 @@ function OverdueInvoicePayment({
           {summaryList.length === 1 && (
             <>
               <Typography color="text.secondary" variant="body1">
-                {t('payment.subscription.overdue.title', {
-                  // @ts-ignore
-                  name: data?.subscription?.description,
-                  count: data?.invoices?.length,
-                  total: formatAmount(summaryList[0]?.amount, summaryList[0]?.currency?.decimal),
-                  symbol: summaryList[0]?.currency?.symbol,
-                })}
-                <br />
-                {t('payment.subscription.overdue.description')}
-                <a
-                  href={subscriptionUrl}
-                  target="_blank"
-                  onClick={handleViewDetailClick}
-                  rel="noreferrer"
-                  style={{ color: 'var(--foregrounds-fg-interactive, 0086FF)' }}>
-                  {t('payment.subscription.overdue.view')}
-                </a>
+                {getOverdueTitle()}
+                {detailLinkOptions.enabled && (
+                  <>
+                    <br />
+                    {t('payment.subscription.overdue.description')}
+                    <a
+                      href={detailUrl}
+                      target="_blank"
+                      onClick={handleViewDetailClick}
+                      rel="noreferrer"
+                      style={{ color: 'var(--foregrounds-fg-interactive, 0086FF)' }}>
+                      {getDetailLinkText()}
+                    </a>
+                  </>
+                )}
               </Typography>
               <Stack direction="row" justifyContent="flex-end" gap={2} mt={2}>
                 <Button variant="outlined" color="primary" onClick={handleClose}>
@@ -249,22 +433,21 @@ function OverdueInvoicePayment({
           {summaryList.length > 1 && (
             <>
               <Typography color="text.secondary" variant="body1">
-                {/* @ts-ignore */}
-                {t('payment.subscription.overdue.simpleTitle', {
-                  // @ts-ignore
-                  name: data?.subscription?.description,
-                  count: data?.invoices?.length,
-                })}
-                <br />
-                {t('payment.subscription.overdue.description')}
-                <a
-                  href={subscriptionUrl}
-                  target="_blank"
-                  rel="noreferrer"
-                  onClick={handleViewDetailClick}
-                  style={{ color: 'var(--foregrounds-fg-interactive, 0086FF)' }}>
-                  {t('payment.subscription.overdue.view')}
-                </a>
+                {getOverdueTitle()}
+                {detailLinkOptions.enabled && (
+                  <>
+                    <br />
+                    {t('payment.subscription.overdue.description')}
+                    <a
+                      href={detailUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      onClick={handleViewDetailClick}
+                      style={{ color: 'var(--foregrounds-fg-interactive, 0086FF)' }}>
+                      {getDetailLinkText()}
+                    </a>
+                  </>
+                )}
               </Typography>
               <Typography color="text.secondary" variant="body1">
                 {t('payment.subscription.overdue.list')}
@@ -291,7 +474,7 @@ function OverdueInvoicePayment({
                         currency: item?.currency?.symbol,
                       })}
                     </Typography>
-                    {renderPayButton(item, {
+                    {renderPayButton(item, false, {
                       variant: 'text',
                       sx: {
                         color: 'text.link',
@@ -315,7 +498,10 @@ OverdueInvoicePayment.defaultProps = {
     open: true,
   },
   children: null,
-  inSubscriptionDetail: false,
+  detailLinkOptions: { enabled: true },
+  subscriptionId: undefined,
+  customerId: undefined,
+  successToast: true,
 };
 
 export default OverdueInvoicePayment;

package/src/contexts/payment.tsx

@@ -36,6 +36,20 @@ export type PaymentContextProps = {
   baseUrl?: string;
 };
 
+const formatData = (data: any) => {
+  if (!data) {
+    return {
+      paymentMethods: [],
+      baseCurrency: {},
+    };
+  }
+  return {
+    ...data,
+    paymentMethods: data.paymentMethods || [],
+    baseCurrency: data.baseCurrency || {},
+  };
+};
+
 // @ts-ignore
 const PaymentContext = createContext<PaymentContextType>({ api });
 const { Provider, Consumer } = PaymentContext;
@@ -95,7 +109,7 @@ function PaymentProvider({ session, connect, children, baseUrl }: PaymentContext
         connect,
         prefix,
         livemode: !!livemode,
-        settings: data as Settings,
+        settings: formatData(data) as Settings,
         getCurrency: (currencyId: string) => getCurrency(currencyId, (data as Settings)?.paymentMethods || []),
         getMethod: (methodId: string) => getMethod(methodId, (data as Settings)?.paymentMethods || []),
         refresh: run,

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';
@@ -186,9 +186,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>
@@ -264,6 +265,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 +286,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 +459,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 +481,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 +502,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 +532,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)} />
                   )}
@@ -601,9 +625,6 @@ CustomerInvoiceList.defaultProps = {
 
 const Root = styled(Stack)`
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
-    .invoice-description {
-      display: none !important;
-    }
     svg.MuiSvgIcon-root {
       display: none !important;
     }