payment-kit 1.18.15 → 1.18.17

package/src/pages/customer/invoice/detail.tsx

@@ -17,7 +17,7 @@ import {
 } from '@blocklet/payment-react';
 import type { TCheckoutSession, TInvoiceExpanded, TPaymentLink } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
-import { Alert, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
+import { Alert, Box, Button, CircularProgress, Divider, Stack, Tooltip, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
 import { useEffect } from 'react';
@@ -204,9 +204,31 @@ export default function CustomerInvoiceDetail() {
           }}>
           <InfoMetric
             label={t('common.status')}
-            value={<Status label={data.status} color={getInvoiceStatusColor(data.status)} />}
+            value={
+              <Tooltip
+                title={data.status === 'void' ? t('payment.customer.invoice.noPaymentRequired') : ''}
+                arrow
+                placement="top">
+                <span>
+                  <Status label={data.status} color={getInvoiceStatusColor(data.status)} />
+                </span>
+              </Tooltip>
+            }
             divider
           />
+          {data.subscription && (
+            <InfoMetric
+              label={t('admin.subscription.name')}
+              value={
+                <Link to={`/customer/subscription/${data.subscription.id}`}>
+                  <Typography variant="body1" color="text.link">
+                    {data.subscription.description || data.subscription.id}
+                  </Typography>
+                </Link>
+              }
+              divider
+            />
+          )}
           <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider />
           {data.period_start > 0 && data.period_end > 0 && (
             <InfoMetric
@@ -301,20 +323,6 @@ export default function CustomerInvoiceDetail() {
               alignItems={InfoAlignItems}
             />
           )}
-          {data.subscription && (
-            <InfoRow
-              label={t('admin.subscription.name')}
-              value={
-                <Link to={`/customer/subscription/${data.subscription.id}`}>
-                  <Typography variant="body1" color="text.link">
-                    {data.subscription.description || data.subscription.id}
-                  </Typography>
-                </Link>
-              }
-              direction={InfoDirection}
-              alignItems={InfoAlignItems}
-            />
-          )}
           {data?.relatedInvoice && (
             <InfoRow
               label={t('customer.invoice.relatedInvoice')}

package/src/pages/customer/invoice/past-due.tsx

@@ -6,6 +6,7 @@ import {
   getPrefix,
   getQueryParams,
   usePaymentContext,
+  OverdueInvoicePayment,
 } from '@blocklet/payment-react';
 import type { TCustomerExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
@@ -29,9 +30,10 @@ const fetchData = (): Promise<TCustomerExpanded> => {
 export default function CustomerInvoicePastDue() {
   const { t } = useLocaleContext();
   const { events } = useSessionContext();
-  const { connect } = usePaymentContext();
+  const { connect, session } = usePaymentContext();
   const [params] = useSearchParams();
-  const [alertVisible, setAlertVisible] = useState(false);
+  const [hasUnpaidInvoices, setHasUnpaidInvoices] = useState(false);
+  const [showOverduePayment, setShowOverduePayment] = useState(false);
 
   const { loading, error, data, runAsync } = useRequest(fetchData);
 
@@ -60,27 +62,31 @@ export default function CustomerInvoicePastDue() {
   const subscriptionId = params.get('subscription') || '';
   const currencyId = params.get('currency') || '';
   const handleBatchPay = () => {
-    connect.open({
-      containerEl: undefined as unknown as Element,
-      saveConnect: false,
-      action: 'collect-batch',
-      prefix: joinURL(getPrefix(), '/api/did'),
-      extraParams: { subscriptionId, currencyId },
-      onSuccess: () => {
-        connect.close();
-      },
-      onClose: () => {
-        connect.close();
-      },
-      onError: (err: any) => {
-        Toast.error(formatError(err));
-      },
-    });
+    if (subscriptionId && currencyId) {
+      connect.open({
+        containerEl: undefined as unknown as Element,
+        saveConnect: false,
+        action: 'collect-batch',
+        prefix: joinURL(getPrefix(), '/api/did'),
+        extraParams: { subscriptionId, currencyId },
+        onSuccess: () => {
+          connect.close();
+        },
+        onClose: () => {
+          connect.close();
+        },
+        onError: (err: any) => {
+          Toast.error(formatError(err));
+        },
+      });
+    } else {
+      setShowOverduePayment(true);
+    }
   };
 
   const onTableDataChange = (tableData: any, prevData: any) => {
     if (isEmpty(tableData) || tableData?.count === 0) {
-      setAlertVisible(false);
+      setHasUnpaidInvoices(false);
       if (prevData?.count > 0) {
         // paid all invoices
         const referer = getQueryParams(window.location.href)?.referer;
@@ -92,7 +98,7 @@ export default function CustomerInvoicePastDue() {
       }
       return;
     }
-    setAlertVisible(true);
+    setHasUnpaidInvoices(true);
   };
 
   return (
@@ -110,12 +116,28 @@ export default function CustomerInvoicePastDue() {
         </Stack>
       </Stack>
       <Root direction="column" spacing={3}>
-        {alertVisible && <Alert severity="error">{t('payment.customer.pastDue.warning')}</Alert>}
+        {hasUnpaidInvoices && <Alert severity="error">{t('payment.customer.pastDue.warning')}</Alert>}
+        {showOverduePayment && (
+          <OverdueInvoicePayment
+            customerId={session.user.did}
+            onPaid={() => {
+              setShowOverduePayment(false);
+            }}
+            successToast={false}
+            dialogProps={{
+              open: showOverduePayment,
+              onClose: () => setShowOverduePayment(false),
+            }}
+            detailLinkOptions={{
+              enabled: false,
+            }}
+          />
+        )}
 
         <Box className="section">
           <SectionHeader title={t('payment.customer.pastDue.invoices')} mb={0}>
-            {subscriptionId && currencyId && (
-              <Button size="small" variant="contained" color="info" onClick={handleBatchPay}>
+            {hasUnpaidInvoices && (
+              <Button size="small" variant="contained" color="primary" onClick={handleBatchPay}>
                 {t('admin.subscription.batchPay.button')}
               </Button>
             )}
@@ -131,6 +153,7 @@ export default function CustomerInvoicePastDue() {
               action="pay"
               type="table"
               onTableDataChange={onTableDataChange}
+              relatedSubscription
             />
           </Box>
         </Box>

package/src/pages/customer/payout/detail.tsx

@@ -59,6 +59,8 @@ export default function PayoutDetail() {
   const currency = data.paymentCurrency;
   const total = [formatBNStr(data?.amount, currency.decimal), currency.symbol].join(' ');
   const { paymentIntent, paymentLink } = data || {};
+
+  const isAnonymousPayer = paymentIntent?.customer?.metadata?.anonymous;
   return (
     <Root direction="column" spacing={2.5} mb={4}>
       <Box>
@@ -160,23 +162,32 @@ export default function PayoutDetail() {
                       : '',
                     48
                   )}
+                  logoName={paymentIntent?.customer?.metadata?.anonymous ? '' : paymentIntent?.customer?.name}
                   name={
                     <Typography
                       variant="subtitle2"
                       sx={{
-                        cursor: 'pointer',
-                        '&:hover': {
-                          color: 'text.link',
-                        },
+                        ...(isAnonymousPayer
+                          ? {}
+                          : {
+                              cursor: 'pointer',
+                              '&:hover': {
+                                color: 'text.link',
+                              },
+                            }),
                       }}
                       onClick={() => {
+                        if (isAnonymousPayer) {
+                          return;
+                        }
                         const url = getCustomerProfileUrl({
                           userDid: paymentIntent?.customer?.did,
                           locale: 'zh',
                         });
                         window.open(url, '_blank');
                       }}>
-                      {paymentIntent?.customer?.name} ({paymentIntent?.customer?.email})
+                      {paymentIntent?.customer?.name}
+                      {paymentIntent?.customer?.email ? ` (${paymentIntent?.customer?.email})` : ''}
                     </Typography>
                   }
                   description={