payment-kit 1.18.38 → 1.18.39

package/api/src/integrations/stripe/handlers/invoice.ts

@@ -19,6 +19,7 @@ import {
   TEventExpanded,
   TInvoiceItem,
 } from '../../../store/models';
+import { handleSubscriptionOnPaymentFailure } from './subscription';
 
 export async function handleStripeInvoicePaid(invoice: Invoice, event: TEventExpanded) {
   logger.info('invoice paid on stripe event', { locale: invoice.id });
@@ -91,6 +92,16 @@ export async function syncStripeInvoice(invoice: Invoice) {
       )
     );
     logger.info('stripe invoice synced', { locale: invoice.id, remote: stripeInvoice.id });
+    const failedStatuses = ['uncollectible', 'finalization_failed', 'payment_failed'];
+    if (failedStatuses.includes(stripeInvoice.status || '')) {
+      logger.info('Invoice failed', { invoiceId: invoice.id });
+      if (invoice.subscription_id) {
+        const subscription = await Subscription.findByPk(invoice.subscription_id);
+        if (subscription) {
+          handleSubscriptionOnPaymentFailure(subscription, 'syncStripeInvoice', client);
+        }
+      }
+    }
   }
 }
 
@@ -376,4 +387,15 @@ export async function handleInvoiceEvent(event: TEventExpanded, client: Stripe)
     await invoice.update({ status: 'payment_failed' });
     logger.info('invoice payment failed on stripe event', { locale: invoice.id });
   }
+
+  const failedEvents = ['invoice.marked_uncollectible', 'invoice.finalization_failed', 'invoice.payment_failed'];
+  if (failedEvents.includes(event.type)) {
+    logger.info('Invoice failed', { invoiceId: invoice.id });
+    if (invoice.subscription_id) {
+      const subscription = await Subscription.findByPk(invoice.subscription_id);
+      if (subscription) {
+        handleSubscriptionOnPaymentFailure(subscription, event.type, client);
+      }
+    }
+  }
 }

package/api/src/integrations/stripe/handlers/payment-intent.ts

@@ -7,9 +7,10 @@ import type Stripe from 'stripe';
 import dayjs from '../../../libs/dayjs';
 import logger from '../../../libs/logger';
 import { handlePaymentSucceed } from '../../../queues/payment';
-import { Invoice, PaymentIntent, PaymentMethod, TEventExpanded } from '../../../store/models';
+import { Invoice, PaymentIntent, PaymentMethod, Subscription, TEventExpanded } from '../../../store/models';
 import { handleStripeInvoiceCreated } from './invoice';
 import { events } from '../../../libs/event';
+import { handleSubscriptionOnPaymentFailure } from './subscription';
 
 export async function handleStripePaymentSucceed(paymentIntent: PaymentIntent, event?: TEventExpanded) {
   const triggerRenew = paymentIntent.status !== 'succeeded';
@@ -184,6 +185,13 @@ export async function handlePaymentIntentEvent(event: TEventExpanded, client: St
           attempted: true,
           status_transitions: { ...invoice.status_transitions, marked_uncollectible_at: dayjs().unix() },
         });
+
+        if (invoice.subscription_id) {
+          const subscription = await Subscription.findByPk(invoice.subscription_id);
+          if (subscription) {
+            handleSubscriptionOnPaymentFailure(subscription, event.type, client);
+          }
+        }
       }
     }
   }

package/api/src/integrations/stripe/handlers/subscription.ts

@@ -1,8 +1,15 @@
 import pick from 'lodash/pick';
 import type Stripe from 'stripe';
 
+import dayjs from '../../../libs/dayjs';
 import logger from '../../../libs/logger';
-import { finalizeStripeSubscriptionUpdate } from '../../../libs/subscription';
+import {
+  finalizeStripeSubscriptionUpdate,
+  getDaysUntilCancel,
+  getDaysUntilDue,
+  getDueUnit,
+  shouldCancelSubscription,
+} from '../../../libs/subscription';
 import { CheckoutSession, PaymentMethod, Subscription, TEventExpanded } from '../../../store/models';
 import { getCheckoutSessionSubscriptionIds } from '../../../libs/session';
 import { createEvent } from '../../../libs/audit';
@@ -139,3 +146,132 @@ export async function handleSubscriptionEvent(event: TEventExpanded, _: Stripe)
     }
   }
 }
+
+export async function syncStripeSubscriptionAfterRecovery(subscription: Subscription, paymentIntentId: string) {
+  if (!subscription.payment_details?.stripe?.subscription_id) {
+    return;
+  }
+
+  try {
+    const method = await PaymentMethod.findByPk(subscription.default_payment_method_id);
+    if (method && method.type === 'stripe') {
+      const client = await method.getStripeClient();
+      await client.subscriptions.update(subscription.payment_details.stripe.subscription_id, {
+        cancel_at_period_end: false,
+        cancel_at: null,
+      });
+
+      logger.info('Removed cancellation settings in Stripe after payment success', {
+        subscription: subscription.id,
+        stripeSubscription: subscription.payment_details.stripe.subscription_id,
+        paymentIntent: paymentIntentId,
+      });
+    }
+  } catch (err) {
+    logger.error('Failed to update Stripe subscription after payment success', {
+      error: err,
+      subscription: subscription.id,
+      paymentIntent: paymentIntentId,
+    });
+  }
+}
+
+export async function handleSubscriptionOnPaymentFailure(
+  subscription: Subscription,
+  eventType: string,
+  client: Stripe
+) {
+  if (!subscription || !subscription.isActive()) {
+    logger.warn('Subscription is not active or not found', { subscription: subscription.id });
+    return;
+  }
+
+  const now = dayjs().unix();
+  const { interval } = subscription.pending_invoice_item_interval;
+  const dueUnit = getDueUnit(interval);
+  const cancelUpdates: { [key: string]: any } = {};
+  const daysUntilCancel = getDaysUntilCancel(subscription);
+  const cancelSubscription = shouldCancelSubscription(subscription);
+
+  if (daysUntilCancel > 0) {
+    cancelUpdates.cancel_at = subscription.current_period_start + daysUntilCancel * dueUnit;
+  } else {
+    cancelUpdates.cancel_at_period_end = true;
+  }
+
+  if (cancelSubscription) {
+    await subscription.update({
+      status: 'canceled',
+      canceled_at: now,
+      cancelation_details: {
+        comment: 'exceed_current_period',
+        feedback: 'other',
+        reason: 'payment_failed',
+      },
+    });
+    logger.warn(`[${eventType}] Subscription moved to canceled after payment failed`, {
+      subscription: subscription.id,
+    });
+  } else {
+    // check grace period
+    const daysUntilDue = getDaysUntilDue(subscription);
+    if (typeof daysUntilDue === 'number') {
+      const gracePeriodStart = subscription.current_period_start;
+      const graceDuration = daysUntilDue ? daysUntilDue * dueUnit : 0;
+
+      if (gracePeriodStart + graceDuration <= now) {
+        // past grace period, set to past_due
+        await subscription.update({
+          status: 'past_due',
+          ...cancelUpdates,
+          cancelation_details: {
+            comment: 'past_due',
+            feedback: 'other',
+            reason: 'payment_failed',
+          },
+        });
+        logger.warn(`[${eventType}] Subscription moved to past_due after payment failed`, {
+          subscription: subscription.id,
+        });
+      }
+    }
+  }
+
+  // sync to stripe
+  if (subscription.payment_details?.stripe?.subscription_id && client) {
+    try {
+      const method = await PaymentMethod.findByPk(subscription.default_payment_method_id);
+      if (method && method.type === 'stripe') {
+        const stripeUpdates: any = {
+          cancellation_details: {
+            comment: 'past_due',
+            feedback: 'other',
+            reason: 'payment_failed',
+          },
+        };
+
+        if (cancelUpdates.cancel_at) {
+          stripeUpdates.cancel_at = cancelUpdates.cancel_at;
+        } else if (cancelUpdates.cancel_at_period_end) {
+          stripeUpdates.cancel_at_period_end = true;
+        }
+        if (cancelSubscription) {
+          stripeUpdates.cancel_at = now;
+          stripeUpdates.cancel_at_period_end = false;
+        }
+
+        await client.subscriptions.update(subscription.payment_details.stripe.subscription_id, stripeUpdates);
+        logger.info(`[${eventType}] Updated subscription in Stripe after payment failed`, {
+          subscription: subscription.id,
+          stripeSubscription: subscription.payment_details.stripe.subscription_id,
+          updates: stripeUpdates,
+        });
+      }
+    } catch (err) {
+      logger.error(`[${eventType}] Failed to update subscription in Stripe`, {
+        error: err,
+        subscription: subscription.id,
+      });
+    }
+  }
+}

package/api/src/queues/payment.ts

@@ -41,6 +41,7 @@ import { ensureOverdraftProtectionPrice } from '../libs/overdraft-protection';
 import createQueue from '../libs/queue';
 import { CHARGE_SUPPORTED_CHAIN_TYPES, EVM_CHAIN_TYPES } from '../libs/constants';
 import { getCheckoutSessionSubscriptionIds, getSubscriptionCreateSetup } from '../libs/session';
+import { syncStripeSubscriptionAfterRecovery } from '../integrations/stripe/handlers/subscription';
 
 type PaymentJob = {
   paymentIntentId: string;
@@ -246,6 +247,7 @@ export const handlePaymentSucceed = async (
                 cancelation_details: null,
               });
               logger.info(`Subscription ${subscription.id} recovered on payment done ${paymentIntent.id}: cancel rest`);
+              await syncStripeSubscriptionAfterRecovery(subscription, paymentIntent.id);
               return;
             }
             const subscriptionItems = await SubscriptionItem.findAll({ where: { subscription_id: subscription.id } });
@@ -267,11 +269,13 @@ export const handlePaymentSucceed = async (
             logger.info(
               `Subscription ${subscription.id} recovered on payment done ${paymentIntent.id}: cancel and billing cycle reset`
             );
+            await syncStripeSubscriptionAfterRecovery(subscription, paymentIntent.id);
           } else if (subscription.cancel_at_period_end) {
             // reset cancel_at_period_end if we are recovering from payment failed
             // @ts-ignore
             await subscription.update({ status: 'active', cancel_at_period_end: false, cancelation_details: null });
             logger.info(`Subscription ${subscription.id} recovered on payment done ${paymentIntent.id}: cancel reset`);
+            await syncStripeSubscriptionAfterRecovery(subscription, paymentIntent.id);
           } else {
             await subscription.update({ status: 'active' });
             logger.info(`Subscription ${subscription.id} recovered on payment done ${paymentIntent.id}`);

package/api/src/routes/subscriptions.ts

@@ -1742,30 +1742,37 @@ router.get('/:id/cycle-amount', authPortal, async (req, res) => {
   if (!currency) {
     return res.status(404).json({ error: 'Currency not found' });
   }
-  // get upcoming invoice
-  const result = await getUpcomingInvoiceAmount(subscription.id);
-  // get past invoices
-  const pastMaxAmount = await getPastInvoicesAmount(subscription.id, 'max');
+  try {
+    // get upcoming invoice
+    const result = await getUpcomingInvoiceAmount(subscription.id);
+    // get past invoices
+    const pastMaxAmount = await getPastInvoicesAmount(subscription.id, 'max');
 
-  // return max amount
-  const nextAmount = new BN(result.amount === '0' ? result.minExpectedAmount : result.amount).toString();
+    // return max amount
+    const nextAmount = new BN(result.amount === '0' ? result.minExpectedAmount : result.amount).toString();
 
-  const maxAmount = new BN(pastMaxAmount.amount).lte(new BN(nextAmount)) ? nextAmount : pastMaxAmount.amount;
+    const maxAmount = new BN(pastMaxAmount.amount).lte(new BN(nextAmount)) ? nextAmount : pastMaxAmount.amount;
 
-  if (req.query?.overdraftProtection) {
-    const { price } = await ensureOverdraftProtectionPrice(subscription.livemode);
-    const invoicePrice = (price?.currency_options || []).find((x: any) => x.currency_id === subscription?.currency_id);
-    const gas = invoicePrice?.unit_amount;
+    if (req.query?.overdraftProtection) {
+      const { price } = await ensureOverdraftProtectionPrice(subscription.livemode);
+      const invoicePrice = (price?.currency_options || []).find(
+        (x: any) => x.currency_id === subscription?.currency_id
+      );
+      const gas = invoicePrice?.unit_amount;
+      return res.json({
+        amount: new BN(maxAmount).add(new BN(gas)).toString(),
+        gas,
+        currency,
+      });
+    }
     return res.json({
-      amount: new BN(maxAmount).add(new BN(gas)).toString(),
-      gas,
+      amount: maxAmount,
       currency,
     });
+  } catch (err) {
+    logger.error(err);
+    return res.status(400).json({ error: err.message });
   }
-  return res.json({
-    amount: maxAmount,
-    currency,
-  });
 });
 
 // slash stake

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.18.38
+version: 1.18.39
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.18.38",
+  "version": "1.18.39",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -45,30 +45,30 @@
   },
   "dependencies": {
     "@abtnode/cron": "^1.16.42",
-    "@arcblock/did": "^1.20.4",
+    "@arcblock/did": "^1.20.6",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.13.18",
-    "@arcblock/did-util": "^1.20.4",
-    "@arcblock/jwt": "^1.20.4",
-    "@arcblock/ux": "^2.13.18",
-    "@arcblock/validator": "^1.20.4",
-    "@blocklet/did-space-js": "^1.0.48",
+    "@arcblock/did-connect": "^2.13.23",
+    "@arcblock/did-util": "^1.20.6",
+    "@arcblock/jwt": "^1.20.6",
+    "@arcblock/ux": "^2.13.23",
+    "@arcblock/validator": "^1.20.6",
+    "@blocklet/did-space-js": "^1.0.49",
     "@blocklet/js-sdk": "^1.16.42",
     "@blocklet/logger": "^1.16.42",
-    "@blocklet/payment-react": "1.18.38",
+    "@blocklet/payment-react": "1.18.39",
     "@blocklet/sdk": "^1.16.42",
-    "@blocklet/ui-react": "^2.13.18",
-    "@blocklet/uploader": "^0.1.84",
-    "@blocklet/xss": "^0.1.33",
+    "@blocklet/ui-react": "^2.13.23",
+    "@blocklet/uploader": "^0.1.85",
+    "@blocklet/xss": "^0.1.34",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/asset": "^1.20.4",
-    "@ocap/client": "^1.20.4",
-    "@ocap/mcrypto": "^1.20.4",
-    "@ocap/util": "^1.20.4",
-    "@ocap/wallet": "^1.20.4",
+    "@ocap/asset": "^1.20.6",
+    "@ocap/client": "^1.20.6",
+    "@ocap/mcrypto": "^1.20.6",
+    "@ocap/util": "^1.20.6",
+    "@ocap/wallet": "^1.20.6",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "ahooks": "^3.8.0",
@@ -123,7 +123,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.42",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.18.38",
+    "@blocklet/payment-types": "1.18.39",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -169,5 +169,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "c273fb068cea55d95017c8b9672f30d5d6c60167"
+  "gitHead": "9e9a5c18fc160094505e902e995f5a5a052d544f"
 }

package/src/components/subscription/portal/actions.tsx

@@ -10,15 +10,18 @@ import {
   getSubscriptionAction,
   usePaymentContext,
   OverdueInvoicePayment,
+  formatBNStr,
 } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
-import { Button, Link, Stack, Tooltip } from '@mui/material';
+import { Button, Link, Stack, Tooltip, Typography, Box, Alert } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 import isEmpty from 'lodash/isEmpty';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, ReactNode } from 'react';
 import { FormProvider, useForm, useFormContext } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { joinURL } from 'ufo';
+import { BN } from '@ocap/util';
+import DID from '@arcblock/ux/lib/DID';
 import CustomerCancelForm from './cancel';
 import OverdraftProtectionDialog from '../../customer/overdraft-protection';
 import Actions from '../../actions';
@@ -28,7 +31,7 @@ import { isWillCanceled } from '../../../libs/util';
 interface ActionConfig {
   key: string;
   show: boolean;
-  label: string;
+  label: string | ReactNode | (() => ReactNode);
   tooltip?: string;
   onClick: (e?: React.MouseEvent) => void;
   variant?: 'text' | 'outlined' | 'contained';
@@ -65,6 +68,7 @@ type Props = {
   subscription: TSubscriptionExpanded;
   showExtra?: boolean;
   showRecharge?: boolean;
+  showBalanceInfo?: boolean;
   showOverdraftProtection?:
     | boolean
     | {
@@ -82,6 +86,7 @@ type Props = {
 SubscriptionActions.defaultProps = {
   showExtra: false,
   showRecharge: false,
+  showBalanceInfo: false,
   showOverdraftProtection: false,
   showDelegation: false,
   onChange: null,
@@ -138,6 +143,7 @@ export function SubscriptionActionsInner({
   actionProps,
   mode,
   setUp,
+  showBalanceInfo,
 }: Props) {
   const { t, locale } = useLocaleContext();
   const { reset, getValues } = useFormContext();
@@ -149,6 +155,23 @@ export function SubscriptionActionsInner({
 
   const { data: extraActions } = useRequest(() => fetchExtraActions({ id: subscription.id, showExtra: !!showExtra }));
 
+  const { data: upcoming = {} } = useRequest(
+    () => api.get(`/api/subscriptions/${subscription.id}/upcoming`).then((res) => res.data),
+    {
+      ready: !!(showRecharge && supportRecharge(subscription)) && showBalanceInfo,
+    }
+  );
+
+  const { data: payerValue = {} } = useRequest(
+    () => api.get(`/api/subscriptions/${subscription.id}/payer-token`).then((res) => res.data),
+    {
+      ready: !!(showRecharge && supportRecharge(subscription)) && showBalanceInfo,
+    }
+  );
+
+  const isInsufficientBalance =
+    upcoming?.amount && payerValue?.token && new BN(payerValue.token || '0').lt(new BN(upcoming.amount || '0'));
+
   const [state, setState] = useSetState({
     action: '',
     subscription: '',
@@ -359,7 +382,73 @@ export function SubscriptionActionsInner({
       {
         key: 'recharge',
         show: !!(showRecharge && supportRecharge(subscription)),
-        label: t('customer.recharge.title'),
+        label: () => {
+          const balanceDisplay = (
+            <Stack direction="row" spacing={0.5} alignItems="center">
+              {t('customer.recharge.title')}
+            </Stack>
+          );
+
+          if (showBalanceInfo && subscription.paymentCurrency) {
+            const formattedBalance = formatBNStr(payerValue?.token || '0', subscription.paymentCurrency.decimal);
+            const formattedUpcoming = formatBNStr(upcoming?.amount || '0', subscription.paymentCurrency.decimal);
+
+            return (
+              <Tooltip
+                componentsProps={{
+                  tooltip: {
+                    sx: {
+                      bgcolor: 'background.paper',
+                      color: 'text.primary',
+                      boxShadow: 2,
+                      padding: '10px 16px',
+                      maxWidth: 480,
+                      minWidth: 350,
+                      wordBreak: 'break-word',
+                    },
+                  },
+                }}
+                title={
+                  <Box>
+                    {isInsufficientBalance && (
+                      <Alert severity="error" sx={{ py: 0, mb: 1 }}>
+                        {t('admin.subscription.insufficientBalance')}
+                      </Alert>
+                    )}
+                    <Stack spacing={0.5}>
+                      <Box display="flex" justifyContent="space-between">
+                        <Typography sx={{ color: 'text.secondary' }}>
+                          {t('admin.subscription.currentBalance')}
+                        </Typography>
+                        <Typography>
+                          {formattedBalance} {subscription.paymentCurrency.symbol}
+                        </Typography>
+                      </Box>
+                      <Box display="flex" justifyContent="space-between">
+                        <Typography sx={{ color: 'text.secondary' }}>
+                          {t('admin.subscription.nextInvoiceAmount')}
+                        </Typography>
+                        <Typography>
+                          {formattedUpcoming} {subscription.paymentCurrency.symbol}
+                        </Typography>
+                      </Box>
+                      <Box display="flex" justifyContent="space-between">
+                        <Typography sx={{ color: 'text.secondary' }}>
+                          {t('admin.subscription.paymentAddress')}
+                        </Typography>
+                        <DID did={payerValue?.paymentAddress} responsive={false} compact showAvatar={false} />
+                      </Box>
+                    </Stack>
+                  </Box>
+                }
+                placement="top">
+                {balanceDisplay}
+              </Tooltip>
+            );
+          }
+
+          return balanceDisplay;
+        },
         onClick: (e) => {
           e?.stopPropagation();
           navigate(`/customer/subscription/${subscription.id}/recharge`);
@@ -367,6 +456,22 @@ export function SubscriptionActionsInner({
         variant: 'outlined',
         color: 'primary',
         primary: !isWillCanceled(subscription),
+        sx:
+          isInsufficientBalance || payerValue.token === '0'
+            ? {
+                '&::before': {
+                  content: '""',
+                  backgroundColor: 'error.main',
+                  borderRadius: '50%',
+                  position: 'absolute',
+                  top: '-4px',
+                  right: '-4px',
+                  width: '8px',
+                  height: '8px',
+                  zIndex: 1,
+                },
+              }
+            : {},
       },
       {
         key: 'changePlan',
@@ -442,26 +547,30 @@ export function SubscriptionActionsInner({
       divider: item.divider,
     });
 
-    const toButton = (item: ActionConfig) => (
-      <Button
-        key={item.key}
-        variant={item.variant}
-        color={item.color}
-        onClick={item.onClick}
-        component={item.component}
-        href={item.href}
-        target={item.target}
-        sx={item.sx}
-        size="small">
-        {item.tooltip ? (
-          <Tooltip title={item.tooltip}>
-            <span>{item.label}</span>
-          </Tooltip>
-        ) : (
-          item.label
-        )}
-      </Button>
-    );
+    const toButton = (item: ActionConfig) => {
+      const labelContent = typeof item.label === 'function' ? item.label() : item.label;
+
+      return (
+        <Button
+          key={item.key}
+          variant={item.variant}
+          color={item.color}
+          onClick={item.onClick}
+          component={item.component}
+          href={item.href}
+          target={item.target}
+          sx={item.sx}
+          size="small">
+          {item.tooltip ? (
+            <Tooltip title={item.tooltip}>
+              <span>{labelContent}</span>
+            </Tooltip>
+          ) : (
+            labelContent
+          )}
+        </Button>
+      );
+    };
     if (mode === 'menu-only') {
       return <Actions actions={visibleActions.map(toMenuItem)} variant="outlined" />;
     }
@@ -566,6 +675,7 @@ SubscriptionActionsInner.defaultProps = {
   showExtra: false,
   showRecharge: false,
   showOverdraftProtection: false,
+  showBalanceInfo: false,
   showDelegation: false,
   showUnsubscribe: true,
   onChange: null,

package/src/components/subscription/portal/list.tsx

@@ -120,7 +120,7 @@ export default function CurrentSubscriptions({
                   }}
                   sx={{
                     padding: 1.5,
-                    background: 'grey.50',
+                    backgroundColor: 'grey.50',
                     '&:hover': {
                       backgroundColor: 'grey.100',
                       transition: 'background-color 200ms linear',
@@ -216,6 +216,7 @@ export default function CurrentSubscriptions({
                         }}
                         showUnsubscribe={false}
                         showRecharge={!isWillCanceled(subscription)}
+                        showBalanceInfo
                         actionProps={{
                           cancel: {
                             variant: 'outlined',

package/src/pages/admin/payments/intents/detail.tsx

@@ -140,7 +140,10 @@ export default function PaymentIntentDetail(props: { id: string }) {
                 sx={{ width: '52px', height: '52px', borderRadius: 0.5 }}
               />
               <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
-                <Amount amount={received} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />
+                <Amount
+                  amount={data?.amount_received === '0' ? total : received}
+                  sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }}
+                />
                 <Copyable text={props.id} />
               </Stack>
             </Stack>

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

@@ -74,12 +74,14 @@ export default function CustomerSubscriptionDetail() {
   const { session } = useSessionContext();
   const { loading, error, data, refresh } = useRequest(() => fetchData(id));
   const { hasUnpaid, checkUnpaidInvoices } = useUnpaidInvoicesCheckForSubscription(id);
+  const overdraftProtectionReady =
+    ['active', 'trialing', 'past_due'].includes(data?.status || '') && data?.paymentMethod?.type === 'arcblock';
   const {
     data: overdraftProtection = null,
     loading: overdraftProtectionLoading,
     run: refreshOverdraftProtection,
   } = useRequest(() => fetchOverdraftProtection(id), {
-    ready: ['active', 'trialing', 'past_due'].includes(data?.status || '') && data?.paymentMethod?.type === 'arcblock',
+    ready: overdraftProtectionReady,
   });
 
   const {
@@ -94,6 +96,7 @@ export default function CustomerSubscriptionDetail() {
       }),
     {
       refreshDeps: [id],
+      ready: overdraftProtectionReady,
     }
   );