payment-kit 1.21.16 → 1.22.0

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);
@@ -144,7 +145,7 @@ export default function CustomerSubscriptionDetail() {
       );
     const estimateAmount = +fromUnitToToken(cycleAmount.amount, data.paymentCurrency?.decimal);
 
-    const remainingStake = +fromUnitToToken(overdraftProtection?.unused, data.paymentCurrency?.decimal);
+    const remainingStake = +fromUnitToToken(overdraftProtection?.unused || '0', data.paymentCurrency?.decimal);
     const formatEstimatedDuration = (cycles: number) => {
       if (!data?.pending_invoice_item_interval) return '';
       const { interval, interval_count: intervalCount } = data.pending_invoice_item_interval;
@@ -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