payment-kit 1.21.16 → 1.21.17

package/src/global.css

@@ -79,3 +79,7 @@ th.MuiTableCell-head {
 .MuiTooltip-tooltip {
   max-width: 500px;
 }
+
+.date-range-picker .MuiListItem-root {
+  cursor: pointer;
+}

package/src/locales/en.tsx

@@ -1421,6 +1421,19 @@ export default flat({
       batchPay: {
         button: 'Pay due invoices',
       },
+      payerAddress: 'Payment Address',
+      changePayer: {
+        btn: 'Change',
+        stripe: {
+          linkType: 'Stripe Link',
+          bankAccount: 'Bank Account',
+        },
+        connect: {
+          title: 'Change Payment Address',
+          success: 'Payment Address changed successfully',
+          error: 'Failed to change payment Address',
+        },
+      },
     },
     customer: {
       view: 'View customer',

package/src/locales/zh.tsx

@@ -1387,6 +1387,19 @@ export default flat({
       batchPay: {
         button: '批量付款',
       },
+      payerAddress: '扣费地址',
+      changePayer: {
+        btn: '变更',
+        stripe: {
+          linkType: 'Stripe Link',
+          bankAccount: '银行账户',
+        },
+        connect: {
+          title: '变更扣费地址',
+          success: '扣费地址变更成功',
+          error: '扣费地址变更失败',
+        },
+      },
     },
     customer: {
       view: '查看客户',

package/src/pages/admin/billing/invoices/detail.tsx

@@ -55,7 +55,7 @@ const fetchData = (
     relatedCreditGrants?: TCreditGrantExpanded[];
   }
 > => {
-  return api.get(`/api/invoices/${id}`).then((res) => res.data);
+  return api.get(`/api/invoices/${id}?sync=true`).then((res: any) => res.data);
 };
 
 const InfoDirection = 'column';
@@ -92,7 +92,7 @@ export default function InvoiceDetail(props: { id: string }) {
   const createUpdater = (key: string) => async (updates: TInvoice) => {
     try {
       setState((prev) => ({ loading: { ...prev.loading, [key]: true } }));
-      await api.put(`/api/invoices/${props.id}`, updates).then((res) => res.data);
+      await api.put(`/api/invoices/${props.id}`, updates).then((res: any) => res.data);
       Toast.success(t('common.saved'));
       runAsync();
     } catch (err) {
@@ -120,6 +120,8 @@ export default function InvoiceDetail(props: { id: string }) {
   };
   // @ts-ignore
   const isDonation = data?.checkoutSession?.submit_type === 'donate';
+  const showDownloadButton =
+    ['open', 'paid', 'uncollectible'].includes(data.status) && !isDonation && !isEmpty(data.lines);
   return (
     <Root direction="column" spacing={2.5} sx={{ mb: 4 }}>
       <Box>
@@ -144,7 +146,7 @@ export default function InvoiceDetail(props: { id: string }) {
             </Typography>
           </Stack>
           <Box style={{ display: 'flex', gap: '10px' }}>
-            <Download data={data} />
+            {showDownloadButton && <Download data={data} />}
             <InvoiceActions data={data} onChange={runAsync} variant="normal" />
           </Box>
         </Stack>

package/src/pages/admin/billing/subscriptions/detail.tsx

@@ -35,6 +35,7 @@ import { goBackOrFallback } from '../../../../libs/util';
 import InfoRowGroup from '../../../../components/info-row-group';
 import VendorServiceList from '../../../../components/subscription/vendor-service-list';
 import { useSessionContext } from '../../../../contexts/session';
+import PaymentMethodInfo from '../../../../components/subscription/payment-method-info';
 
 const fetchData = (id: string): Promise<TSubscriptionExpanded> => {
   return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
@@ -285,6 +286,21 @@ export default function SubscriptionDetail(props: { id: string }) {
                   />
                 }
               />
+
+              {(data as any).paymentMethodDetails && (
+                <InfoRow
+                  label={t('admin.subscription.payerAddress')}
+                  value={
+                    <PaymentMethodInfo
+                      subscriptionId={data.id}
+                      customer={data.customer}
+                      paymentMethodDetails={(data as any).paymentMethodDetails}
+                      editable={false}
+                      paymentMethodType={data.paymentMethod?.type}
+                    />
+                  }
+                />
+              )}
               {data.payment_details && hasDelegateTxHash(data.payment_details, data.paymentMethod) && (
                 <InfoRow
                   label={t('common.delegateTxHash')}

package/src/pages/admin/overview.tsx

@@ -3,7 +3,7 @@ import DID from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { api, formatBNStr, formatToDate, usePaymentContext } from '@blocklet/payment-react';
 import { BN } from '@ocap/util';
-import type { GroupedBN, TPaymentMethod, TPaymentStat } from '@blocklet/payment-types';
+import type { GroupedBN, TPaymentCurrency, TPaymentMethod, TPaymentStat } from '@blocklet/payment-types';
 import {
   Avatar,
   Box,
@@ -175,8 +175,8 @@ export default function Overview() {
 
   const currencies: TCurrencyMap = useMemo(() => {
     const map: TCurrencyMap = {};
-    (settings.paymentMethods || []).forEach((method) => {
-      (method.payment_currencies || []).forEach((currency) => {
+    (settings.paymentMethods || []).forEach((method: { payment_currencies: TPaymentCurrency[] }) => {
+      (method.payment_currencies || []).forEach((currency: TPaymentCurrency) => {
         if (!map[currency.id]) {
           map[currency.id] = {
             ...currency,
@@ -1105,10 +1105,12 @@ export default function Overview() {
                     sx={{
                       p: 1.5,
                       flex: '1 1 calc(50% - 8px)',
+                      minWidth: 0,
                       borderRadius: 1,
                       backgroundColor: theme.mode === 'dark' ? 'grey.100' : 'grey.50',
                       border: 'none',
                       boxShadow: 'none',
+                      containerType: 'inline-size',
                     }}>
                     <Box>
                       <Typography
@@ -1124,13 +1126,11 @@ export default function Overview() {
                         sx={{
                           gap: 1.5,
                           flexWrap: 'wrap',
-                          flexDirection: {
-                            xs: 'column',
-                            md: 'row',
-                          },
-                          alignItems: {
-                            xs: 'flex-start',
-                            md: 'baseline',
+                          flexDirection: 'row',
+                          alignItems: 'baseline',
+                          '@container (max-width: 220px)': {
+                            flexDirection: 'column',
+                            alignItems: 'flex-start',
                           },
                         }}>
                         <Typography
@@ -1239,14 +1239,14 @@ export default function Overview() {
 
       <Grid
         container
+        spacing={{ xs: 3, lg: 6 }}
         sx={{
-          gap: { xs: 3, md: 6 },
           mb: 4,
         }}>
         <Grid
           size={{
             xs: 12,
-            md: 8,
+            lg: 8,
           }}>
           {renderFinancialSection()}
         </Grid>
@@ -1254,7 +1254,7 @@ export default function Overview() {
         <Grid
           size={{
             xs: 12,
-            md: 3,
+            lg: 4,
           }}>
           {renderBusinessMonitoringSection()}
         </Grid>
@@ -1265,7 +1265,7 @@ export default function Overview() {
         open={open}
         anchorEl={state.anchorEl}
         onClose={() => setState({ anchorEl: null })}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}>
         <DateRangePicker
           open
           toggle={onTogglePicker as any}

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

@@ -15,13 +15,14 @@ import {
   usePaymentContext,
   PaymentBeneficiaries,
   useMobile,
+  StripePaymentAction,
 } from '@blocklet/payment-react';
 import type { TCheckoutSession, TCreditGrantExpanded, TInvoiceExpanded, TPaymentLink } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Divider, Stack, Tooltip, Typography, useTheme } from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { Link, useParams, useSearchParams } from 'react-router-dom';
 
 import { joinURL } from 'ufo';
@@ -48,7 +49,7 @@ const fetchData = (
     relatedCreditGrants?: TCreditGrantExpanded[];
   }
 > => {
-  return api.get(`/api/invoices/${id}`).then((res) => res.data);
+  return api.get(`/api/invoices/${id}`).then((res: any) => res.data);
 };
 
 export default function CustomerInvoiceDetail() {
@@ -64,16 +65,19 @@ export default function CustomerInvoiceDetail() {
   });
 
   const { loading, error, data, runAsync } = useRequest(() => fetchData(params.id as string));
+
   const action = searchParams.get('action');
   const { session } = useSessionContext();
   const isDonation = data?.checkoutSession?.submit_type === 'donate';
+  const payHandlerRef = useRef<(() => void) | null>(null);
 
-  const onPay = () => {
+  const handleExternalPayment = () => {
     setState({ paying: true });
     connect.open({
       action: 'collect',
       saveConnect: false,
       locale: locale as 'en' | 'zh',
+      extraParams: { invoiceId: params.id, action },
       messages: {
         scan: '',
         title: t(`payment.customer.invoice.${action || 'pay'}`),
@@ -81,9 +85,9 @@ export default function CustomerInvoiceDetail() {
         error: t(`payment.customer.invoice.${action || 'pay'}Error`),
         confirm: '',
       } as any,
-      extraParams: { invoiceId: params.id, action },
       onSuccess: async () => {
         connect.close();
+        setState({ paying: false });
         await runAsync();
       },
       onClose: () => {
@@ -110,7 +114,7 @@ export default function CustomerInvoiceDetail() {
       ['pay', 'renew'].includes(action as string) &&
       ['open', 'uncollectible'].includes(data?.status as string)
     ) {
-      onPay();
+      handleExternalPayment();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [error]);
@@ -133,6 +137,9 @@ export default function CustomerInvoiceDetail() {
 
   const hidePayButton = data.billing_reason === 'overdraft_protection';
   const paymentDetails = data.paymentIntent?.payment_details || data.metadata?.payment_details;
+
+  const showDownloadButton =
+    ['open', 'paid', 'uncollectible'].includes(data.status) && !isDonation && !isEmpty(data.lines);
   return (
     <InvoiceDetailRoot direction="column" spacing={3}>
       <Stack
@@ -161,7 +168,7 @@ export default function CustomerInvoiceDetail() {
             justifyContent: 'flex-end',
             alignItems: 'center',
           }}>
-          {['open', 'paid', 'uncollectible'].includes(data.status) && !isDonation && <Download data={data} />}
+          {showDownloadButton && <Download data={data} />}
           {data?.paymentLink?.donation_settings?.reference && (
             <Button
               variant="outlined"
@@ -171,17 +178,52 @@ export default function CustomerInvoiceDetail() {
               {t('customer.payout.viewReference')}
             </Button>
           )}
-          {['open', 'uncollectible'].includes(data.status) && !hidePayButton && (
-            <Button
-              variant="outlined"
-              color="primary"
-              size="small"
-              sx={{ borderColor: 'divider' }}
-              disabled={state.paying}
-              onClick={onPay}>
-              {t('payment.customer.invoice.pay')}
-            </Button>
-          )}
+          {['open', 'uncollectible'].includes(data.status) &&
+            !hidePayButton &&
+            (data.paymentMethod?.type === 'stripe' ? (
+              <StripePaymentAction
+                invoice={data}
+                paymentMethod={data.paymentMethod}
+                onSuccess={async () => {
+                  Toast.close();
+                  setState({ paying: false });
+                  await runAsync();
+                }}
+                onError={() => {
+                  setState({ paying: false });
+                }}
+                onClose={() => {
+                  setState({ paying: false });
+                }}>
+                {(onPay: () => void, paying: boolean) => {
+                  payHandlerRef.current = onPay;
+                  return (
+                    <Button
+                      variant="outlined"
+                      color="primary"
+                      size="small"
+                      sx={{ borderColor: 'divider' }}
+                      disabled={state.paying || paying}
+                      onClick={() => {
+                        setState({ paying: true });
+                        onPay();
+                      }}>
+                      {t('payment.customer.invoice.pay')}
+                    </Button>
+                  );
+                }}
+              </StripePaymentAction>
+            ) : (
+              <Button
+                variant="outlined"
+                color="primary"
+                size="small"
+                sx={{ borderColor: 'divider' }}
+                disabled={state.paying}
+                onClick={handleExternalPayment}>
+                {t('payment.customer.invoice.pay')}
+              </Button>
+            ))}
         </Stack>
       </Stack>
       <Box

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

@@ -52,6 +52,7 @@ import { useSessionContext } from '../../../contexts/session';
 import { usePendingAmountForSubscription, useUnpaidInvoicesCheckForSubscription } from '../../../hooks/subscription';
 import { formatSmartDuration, TimeUnit } from '../../../libs/dayjs';
 import { canChangePaymentMethod } from '../../../libs/util';
+import PaymentMethodInfo from '../../../components/subscription/payment-method-info';
 
 const fetchData = (id: string | undefined): Promise<TSubscriptionExpanded> => {
   return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
@@ -622,7 +623,7 @@ export default function CustomerSubscriptionDetail() {
                 {canChangePaymentMethod(data) && (
                   <Button
                     variant="text"
-                    sx={{ color: 'text.link', fontSize: 14 }}
+                    sx={{ color: 'text.link' }}
                     size="small"
                     onClick={async () => {
                       // only check unpaid invoices when overdraft protection is enabled
@@ -640,6 +641,24 @@ export default function CustomerSubscriptionDetail() {
               </Stack>
             }
           />
+          {(data as any).paymentMethodDetails && (
+            <InfoRow
+              label={t('admin.subscription.payerAddress')}
+              value={
+                <PaymentMethodInfo
+                  subscriptionId={id}
+                  customer={data.customer}
+                  paymentMethodDetails={(data as any).paymentMethodDetails}
+                  editable={['active', 'trialing', 'past_due'].includes(data.status)}
+                  onUpdate={() => {
+                    refresh();
+                    checkUnpaidInvoices();
+                  }}
+                  paymentMethodType={data.paymentMethod?.type}
+                />
+              }
+            />
+          )}
 
           {data.payment_details && hasDelegateTxHash(data.payment_details, data.paymentMethod) && (
             <InfoRow