@blocklet/payment-react 1.16.3 → 1.16.5

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

@@ -0,0 +1,306 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Button, Typography, Stack, CircularProgress, Alert } 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 { usePaymentContext } from '../contexts/payment';
+import { formatAmount, formatError, getPrefix } from '../libs/util';
+import { useSubscription } from '../hooks/subscription';
+import api from '../libs/api';
+
+type DialogProps = {
+  open?: boolean;
+  onClose?: () => void;
+  title?: string;
+};
+
+type Props = {
+  subscriptionId: string;
+  mode?: 'default' | 'custom';
+  onPaid?: (subscriptionId: string, currencyId: string) => void;
+  dialogProps?: DialogProps;
+  children?: (
+    handlePay: (item: SummaryItem) => void,
+    data: {
+      subscription: Subscription;
+      summary: { [key: string]: SummaryItem };
+      invoices: Invoice[];
+      subscriptionUrl: string;
+    }
+  ) => React.ReactNode;
+};
+
+type SummaryItem = {
+  amount: string;
+  currency: PaymentCurrency;
+  method: PaymentMethod;
+};
+
+const fetchOverdueInvoices = async (
+  subscriptionId: string
+): Promise<{
+  subscription: Subscription;
+  summary: { [key: string]: SummaryItem };
+  invoices: Invoice[];
+}> => {
+  const res = await api.get(`/api/subscriptions/${subscriptionId}/overdue/invoices`);
+  return res.data;
+};
+
+function OverdueInvoicePayment({
+  subscriptionId,
+  mode = 'default',
+  dialogProps = {},
+  children,
+  onPaid = () => {},
+}: Props) {
+  const { t } = useLocaleContext();
+  const { connect } = usePaymentContext();
+  const [selectCurrencyId, setSelectCurrencyId] = useState('');
+  const [payLoading, setPayLoading] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(dialogProps.open || false);
+  const [processedCurrencies, setProcessedCurrencies] = useState<{ [key: string]: number }>({});
+  const {
+    data = {
+      subscription: {} as Subscription,
+      summary: {},
+      invoices: [],
+    },
+    error,
+    loading,
+    runAsync: refresh,
+  } = useRequest(() => fetchOverdueInvoices(subscriptionId));
+
+  const subscriptionUrl = joinURL(getPrefix(), `/customer/subscription/${subscriptionId}`);
+  const summaryList = useMemo(() => {
+    if (!data?.summary) {
+      return [];
+    }
+    return Object.values(data.summary);
+  }, [data?.summary]);
+
+  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);
+            }
+          });
+        }
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [subscription]);
+
+  const handlePay = (item: SummaryItem) => {
+    const { currency, method } = item;
+    if (method.type === 'stripe') {
+      Toast.error(t('payment.subscription.overdue.notSupport'));
+      return;
+    }
+    if (payLoading) {
+      return;
+    }
+    setSelectCurrencyId(currency.id);
+    setPayLoading(true);
+    if (method.type === 'arcblock' || method.type === 'ethereum') {
+      connect.open({
+        containerEl: undefined as unknown as Element,
+        saveConnect: false,
+        action: 'collect-batch',
+        prefix: joinURL('/api/did'),
+        extraParams: { currencyId: currency.id, subscriptionId },
+        onSuccess: () => {
+          connect.close();
+        },
+        onClose: () => {
+          connect.close();
+          setPayLoading(false);
+        },
+        onError: (err: any) => {
+          Toast.error(formatError(err));
+          setPayLoading(false);
+        },
+      });
+    }
+  };
+
+  if (loading) {
+    return <CircularProgress />;
+  }
+
+  const renderPayButton = (item: SummaryItem, props: any) => {
+    const isPayLoading = payLoading && item.currency.id === selectCurrencyId;
+    if (item.method.type === 'stripe') {
+      return (
+        <Button variant="contained" color="primary" onClick={() => window.open(subscriptionUrl, '_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' }} />}
+        {t('payment.subscription.overdue.payNow')}
+      </Button>
+    );
+  };
+
+  if (mode === 'custom' && children && typeof children === 'function') {
+    return (
+      <Stack>
+        {children(handlePay, {
+          subscription: data?.subscription as Subscription,
+          subscriptionUrl,
+          summary: data?.summary as { [key: string]: SummaryItem },
+          invoices: data?.invoices as Invoice[],
+        })}
+      </Stack>
+    );
+  }
+
+  // Default mode
+  return (
+    <Dialog
+      open={dialogOpen}
+      onClose={() => setDialogOpen(false)}
+      title={dialogProps.title || t('payment.subscription.overdue.pastDue')}
+      PaperProps={{
+        style: { minHeight: 'auto' },
+      }}>
+      {error ? (
+        <Alert severity="error">{error.message}</Alert>
+      ) : (
+        <Stack gap={1}>
+          {summaryList.length === 0 && (
+            <>
+              <Alert severity="success">
+                {t('payment.subscription.overdue.empty', {
+                  // @ts-ignore
+                  name: data?.subscription?.description,
+                })}
+              </Alert>
+              <Stack direction="row" justifyContent="flex-end" mt={2}>
+                <Button
+                  variant="outlined"
+                  color="primary"
+                  onClick={() => setDialogOpen(false)}
+                  sx={{ width: 'fit-content' }}>
+                  {/* @ts-ignore */}
+                  {t('common.know')}
+                </Button>
+              </Stack>
+            </>
+          )}
+          {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"
+                  rel="noreferrer"
+                  style={{ color: 'var(--foregrounds-fg-interactive, 0086FF)' }}>
+                  {t('payment.subscription.overdue.view')}
+                </a>
+              </Typography>
+              <Stack direction="row" justifyContent="flex-end" gap={2} mt={2}>
+                <Button variant="outlined" color="primary" onClick={() => setDialogOpen(false)}>
+                  {/* @ts-ignore */}
+                  {t('common.cancel')}
+                </Button>
+                {/* @ts-ignore */}
+                {renderPayButton(summaryList[0])}
+              </Stack>
+            </>
+          )}
+          {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"
+                  style={{ color: 'var(--foregrounds-fg-interactive, 0086FF)' }}>
+                  {t('payment.subscription.overdue.view')}
+                </a>
+              </Typography>
+              <Typography color="text.secondary" variant="body1">
+                {t('payment.subscription.overdue.list')}
+              </Typography>
+              <Stack>
+                {summaryList.map((item: any) => (
+                  <Stack
+                    key={item?.currency?.id}
+                    direction="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    sx={{
+                      py: 1,
+                      px: 0.5,
+                      borderBottom: '1px solid var(--foregrounds-fg-border, #E0E0E0)',
+                      '&:hover': {
+                        background: 'var(--backgrounds-bg-highlight, #eff6ff)',
+                      },
+                      mt: 0,
+                    }}>
+                    <Typography>
+                      {t('payment.subscription.overdue.total', {
+                        total: formatAmount(item?.amount, item?.currency?.decimal),
+                        currency: item?.currency?.symbol,
+                      })}
+                    </Typography>
+                    {renderPayButton(item, {
+                      variant: 'text',
+                      sx: {
+                        color: 'text.link',
+                      },
+                    })}
+                  </Stack>
+                ))}
+              </Stack>
+            </>
+          )}
+        </Stack>
+      )}
+    </Dialog>
+  );
+}
+
+OverdueInvoicePayment.defaultProps = {
+  mode: 'default',
+  onPaid: () => {},
+  dialogProps: {
+    open: true,
+  },
+  children: null,
+};
+
+export default OverdueInvoicePayment;

package/src/components/pricing-table.tsx

@@ -198,13 +198,13 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       // }
     }
     @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
-      .price-table-wrap:has(> div:nth-child(1)) {
+      .price-table-wrap:has(> div:nth-of-type(1)) {
         max-width: 360px !important;
       }
-      .price-table-wrap:has(> div:nth-child(2)) {
+      .price-table-wrap:has(> div:nth-of-type(2)) {
         max-width: 780px !important;
       }
-      .price-table-wrap:has(> div:nth-child(3)) {
+      .price-table-wrap:has(> div:nth-of-type(3)) {
         max-width: 1200px !important;
       }
     }
@@ -500,9 +500,7 @@ function Subscribe({ x, action, onSelect, currencyId }: any) {
       }}
       loading={state.loading === x.price_id && !state.loaded}
       disabled={x.is_disabled}
-      onClick={() => handleSelect(x.price_id)}
-      loadingPosition="end"
-      endIcon={null}>
+      onClick={() => handleSelect(x.price_id)}>
       {action}
     </LoadingButton>
   );

package/src/components/table.tsx

@@ -120,6 +120,8 @@ const Wrapped = styled(Datatable)`
     border-bottom: none;
     padding-top: 12px;
     padding-bottom: 12px;
+    padding-left: 16px;
+    padding-right: 16px;
     &:first-of-type {
       padding-left: 20px;
     }

package/src/index.ts

@@ -28,6 +28,7 @@ import CountrySelect from './components/country-select';
 import TruncatedText from './components/truncated-text';
 import Link from './components/link';
 import { createLazyComponent } from './components/lazy-loader';
+import OverdueInvoicePayment from './components/over-due-invoice-payment';
 
 export { PaymentThemeProvider } from './theme';
 
@@ -73,4 +74,5 @@ export {
   Table,
   TruncatedText,
   Link,
+  OverdueInvoicePayment,
 };

package/src/locales/en.tsx

@@ -93,6 +93,7 @@ export default flat({
     saveAsDefaultPriceSuccess: 'Set default price successfully',
     stakeAmount: 'Stake Amount',
     slashStakeAmount: 'Slash Stake Amount',
+    know: 'I know',
   },
   payment: {
     checkout: {
@@ -330,6 +331,23 @@ export default flat({
         rechargeForSubscription: 'Add funds for subscription',
       },
     },
+    subscription: {
+      overdue: {
+        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.',
+        payNow: 'Pay Now',
+        notSupport: 'This payment method is not supported',
+        total: 'Total {total} {currency}',
+        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}.',
+      },
+    },
   },
   refund: {
     type: {

package/src/locales/zh.tsx

@@ -93,6 +93,7 @@ export default flat({
     saveAsDefaultPriceSuccess: '设置默认价格成功',
     stakeAmount: '质押金额',
     slashStakeAmount: '罚没金额',
+    know: '我知道了',
   },
   payment: {
     checkout: {
@@ -320,6 +321,23 @@ export default flat({
         rechargeForSubscription: '订阅充值',
       },
     },
+    subscription: {
+      overdue: {
+        title:
+          '您的【{name}】订阅共有 {count} 张欠费账单，总计 {total} {symbol}，您需要支付这些账单以激活您的订阅，或在进行新的购买之前完成支付。',
+        simpleTitle:
+          '您的【{name}】订阅共有 {count} 张欠费账单，您需要支付这些账单以激活您的订阅，或在进行新的购买之前完成支付。',
+        payNow: '立即支付',
+        notSupport: '暂不支持该支付方式',
+        total: '总计 {total} {currency}',
+        view: '查看订阅详情',
+        pastDue: '欠费账单',
+        viewNow: '立即查看',
+        description: '如果您有任何疑问，可以选择 ',
+        list: '欠费账单：',
+        empty: '您的【{name}】订阅当前没有欠费账单',
+      },
+    },
   },
   refund: {
     type: {

package/src/payment/summary.tsx

@@ -252,6 +252,7 @@ export default function PaymentSummary({
                   <LoadingButton
                     size="small"
                     loadingPosition="end"
+                    endIcon={null}
                     color="error"
                     variant="text"
                     loading={state.loading}
@@ -284,6 +285,7 @@ export default function PaymentSummary({
                 <LoadingButton
                   size="small"
                   loadingPosition="end"
+                  endIcon={null}
                   color={crossSellBehavior === 'required' ? 'info' : 'info'}
                   variant={crossSellBehavior === 'required' ? 'text' : 'text'}
                   loading={state.loading}