payment-kit 1.13.266 → 1.13.267

package/api/src/libs/auth.ts

@@ -17,6 +17,8 @@ export const handlers = new WalletHandler({
   authenticator,
   tokenStorage: new AuthStorage({
     dbPath: path.join(env.dataDir, 'auth.db'),
+    // @ts-ignore
+    onload: console.warn,
   }),
 });
 

package/api/src/libs/notification/template/subscription-upgraded.ts

@@ -82,9 +82,10 @@ export class SubscriptionUpgradedEmailTemplate implements BaseEmailTemplate<Subs
     const productName = await getMainProductName(subscription.id);
     const at: string = formatTime(subscription.created_at);
 
-    const paymentInfo: string = `${fromUnitToToken(paymentIntent?.amount, paymentCurrency.decimal)} ${
-      paymentCurrency.symbol
-    }`;
+    const paymentInfo: string = `${fromUnitToToken(
+      paymentIntent?.amount || invoice.amount_paid,
+      paymentCurrency.decimal
+    )} ${paymentCurrency.symbol}`;
     const hasNft: boolean = checkoutSession?.nft_mint_status === 'minted';
     const nftMintItem: NftMintItem | undefined = hasNft
       ? checkoutSession?.nft_mint_details?.[checkoutSession?.nft_mint_details?.type as 'arcblock' | 'ethereum']

package/api/src/libs/subscription.ts

@@ -1,6 +1,8 @@
 /* eslint-disable no-await-in-loop */
 import component from '@blocklet/sdk/lib/component';
 import { BN } from '@ocap/util';
+import isEmpty from 'lodash/isEmpty';
+import pick from 'lodash/pick';
 import type { LiteralUnion } from 'type-fest';
 import { withQuery } from 'ufo';
 
@@ -8,11 +10,13 @@ import {
   Customer,
   Invoice,
   InvoiceItem,
+  Lock,
   PaymentCurrency,
   Price,
   PriceRecurring,
   Subscription,
   SubscriptionItem,
+  SubscriptionUpdateItem,
   TLineItemExpanded,
   UsageRecord,
 } from '../store/models';
@@ -427,3 +431,135 @@ export async function getUpcomingInvoiceAmount(subscriptionId: string) {
     currency,
   };
 }
+
+export async function finalizeSubscriptionUpdate({
+  subscription,
+  customer,
+  invoice,
+  paymentCurrency,
+  appliedCredit,
+  newCredit,
+  addedItems,
+  updatedItems,
+  deletedItems,
+  updates,
+}: {
+  subscription: Subscription;
+  customer: Customer;
+  invoice: Invoice;
+  paymentCurrency: PaymentCurrency;
+  appliedCredit: string;
+  newCredit: string;
+  addedItems: SubscriptionUpdateItem[];
+  updatedItems: SubscriptionUpdateItem[];
+  deletedItems: SubscriptionUpdateItem[];
+  updates: any;
+}) {
+  if (isEmpty(updates)) {
+    logger.info('subscription update aborted', { subscription: subscription.id, updates });
+    return;
+  }
+
+  logger.info('subscription update finalized', { subscription: subscription.id, updates });
+  await subscription.update({ ...updates, pending_update: null });
+
+  // update subscription items
+  for (const item of addedItems) {
+    await SubscriptionItem.create({
+      price_id: item.price_id as string,
+      quantity: item.quantity as number,
+      livemode: subscription.livemode,
+      subscription_id: subscription.id,
+      metadata: {},
+    });
+    logger.info('subscription item added on update finalize', { subscription: subscription.id, item: item.id });
+  }
+  for (const item of updatedItems) {
+    await SubscriptionItem.update(pick(item, ['quantity', 'metadata', 'billing_thresholds']), {
+      where: { id: item.id },
+    });
+    logger.info('subscription item updated on update finalize', { subscription: subscription.id, item: item.id });
+  }
+  for (const item of deletedItems) {
+    if (item.clear_usage) {
+      await UsageRecord.destroy({ where: { subscription_item_id: item.id } });
+      logger.info('subscription item usage cleared on update finalize', {
+        subscription: subscription.id,
+        item: item.id,
+      });
+    }
+    await SubscriptionItem.destroy({ where: { id: item.id } });
+    logger.info('subscription item deleted on update finalize', { subscription: subscription.id, item: item.id });
+  }
+
+  // update customer credits
+  if (appliedCredit !== '0') {
+    const creditResult = await customer.decreaseTokenBalance(paymentCurrency.id, appliedCredit);
+    await invoice.update({
+      starting_token_balance: creditResult.starting,
+      ending_token_balance: creditResult.ending,
+    });
+    logger.info('customer credit applied to invoice after proration', {
+      subscription: subscription.id,
+      appliedCredit,
+      creditResult,
+    });
+  }
+  if (newCredit !== '0') {
+    const creditResult = await customer.increaseTokenBalance(paymentCurrency.id, newCredit);
+    await invoice.update({
+      starting_token_balance: creditResult.starting,
+      ending_token_balance: creditResult.ending,
+    });
+    logger.info('subscription proration credit applied to customer', {
+      subscription: subscription.id,
+      newCredit,
+      creditResult,
+    });
+  }
+
+  // lock for next update
+  const releaseAt = subscription.current_period_end;
+  await Lock.acquire(`${subscription.id}-change-plan`, releaseAt);
+  logger.info('subscription plan change lock acquired on finalize', { subscription: subscription.id, releaseAt });
+}
+
+export async function onSubscriptionUpdateConnected(subscriptionId: string) {
+  const subscription = await Subscription.findByPk(subscriptionId);
+  if (!subscription) {
+    return;
+  }
+
+  const now = dayjs().unix();
+  const pending = subscription.pending_update;
+  logger.info('subscription update connected', { subscription: subscription.id, pending });
+  if (pending?.updates && pending?.expires_at && pending.expires_at >= now && pending.updates?.latest_invoice_id) {
+    const paymentCurrency = await PaymentCurrency.findByPk(subscription.currency_id);
+    if (!paymentCurrency) {
+      return;
+    }
+
+    const customer = await Customer.findByPk(subscription.customer_id);
+    if (!customer) {
+      return;
+    }
+
+    const invoice = await Invoice.findByPk(pending.updates.latest_invoice_id);
+    if (!invoice) {
+      return;
+    }
+
+    await finalizeSubscriptionUpdate({
+      subscription,
+      customer,
+      invoice,
+      paymentCurrency,
+      appliedCredit: pending.appliedCredit || '0',
+      newCredit: pending.newCredit || '0',
+      addedItems: pending.addedItems || [],
+      deletedItems: pending.deletedItems || [],
+      updatedItems: pending.updatedItems || [],
+      updates: pending.updates,
+    });
+  }
+}

package/api/src/queues/invoice.ts

@@ -14,6 +14,7 @@ import { paymentQueue } from './payment';
 
 type InvoiceJob = {
   invoiceId: string;
+  justCreate?: boolean;
   retryOnError?: boolean;
   waitForPayment?: boolean;
 };
@@ -159,6 +160,10 @@ export const handleInvoice = async (job: InvoiceJob) => {
     }
   }
   if (paymentIntent) {
+    if (job.justCreate) {
+      return;
+    }
+
     logger.info('Payment job scheduled', { invoice: invoice.id, paymentIntent: paymentIntent.id });
     if (job.waitForPayment) {
       await paymentQueue.pushAndWait({

package/api/src/routes/connect/change-plan.ts

@@ -2,6 +2,7 @@ import { executeEvmTransaction, waitForEvmTxConfirm } from '../../integrations/e
 import type { CallbackArgs } from '../../libs/auth';
 import { isDelegationSufficientForPayment } from '../../libs/payment';
 import { getFastCheckoutAmount } from '../../libs/session';
+import { onSubscriptionUpdateConnected } from '../../libs/subscription';
 import { getTxMetadata } from '../../libs/util';
 import { invoiceQueue } from '../../queues/invoice';
 import { addSubscriptionJob } from '../../queues/subscription';
@@ -132,6 +133,7 @@ export default {
         });
       }
       if (subscription) {
+        await onSubscriptionUpdateConnected(subscriptionId);
         await addSubscriptionJob(subscription, 'cycle', false, subscription.trial_end);
       }
     };

package/api/src/routes/connect/collect.ts

@@ -8,6 +8,7 @@ import type { CallbackArgs } from '../../libs/auth';
 import { ethWallet, wallet } from '../../libs/auth';
 import logger from '../../libs/logger';
 import { getGasPayerExtra } from '../../libs/payment';
+import { onSubscriptionUpdateConnected } from '../../libs/subscription';
 import { getTxMetadata } from '../../libs/util';
 import { invoiceQueue } from '../../queues/invoice';
 import { handlePaymentSucceed, paymentQueue } from '../../queues/payment';
@@ -122,6 +123,17 @@ export default {
       if (exist) {
         await invoiceQueue.delete(invoice.id);
       }
+
+      if (invoice.subscription_id && invoice.billing_reason === 'subscription_update') {
+        const subscription = await Subscription.findByPk(invoice.subscription_id);
+        if (subscription?.pending_update?.updates?.latest_invoice_id === invoice.id) {
+          logger.info('Try to finalize subscription update on invoice paid', {
+            invoice: invoice.id,
+            subscription: subscription.id,
+          });
+          await onSubscriptionUpdateConnected(invoice.subscription_id);
+        }
+      }
     };
 
     if (paymentMethod.type === 'arcblock') {

package/api/src/routes/connect/shared.ts

@@ -5,8 +5,8 @@ import { toDelegateAddress, toStakeAddress } from '@arcblock/did-util';
 import type { Transaction } from '@ocap/client';
 import { BN, fromTokenToUnit, toBase58 } from '@ocap/util';
 import { fromPublicKey } from '@ocap/wallet';
-import isEmpty from 'lodash/isEmpty';
 import type { Request } from 'express';
+import isEmpty from 'lodash/isEmpty';
 
 import { estimateMaxGasForTx, hasStakedForGas } from '../../integrations/arcblock/stake';
 import { encodeApproveItx } from '../../integrations/ethereum/token';
@@ -22,6 +22,7 @@ import {
   getSubscriptionStakeSetup,
 } from '../../libs/subscription';
 import { OCAP_PAYMENT_TX_TYPE } from '../../libs/util';
+import { invoiceQueue } from '../../queues/invoice';
 import type { TLineItemExpanded } from '../../store/models';
 import { CheckoutSession } from '../../store/models/checkout-session';
 import { Customer } from '../../store/models/customer';
@@ -504,6 +505,20 @@ export async function ensureInvoiceAndItems({
   return { invoice, items };
 }
 
+export async function cleanupInvoiceAndItems(invoiceId: string) {
+  const invoice = await Invoice.findByPk(invoiceId);
+  if (!invoice) {
+    return;
+  }
+  if (invoice.isImmutable()) {
+    return;
+  }
+
+  const removedItem = await InvoiceItem.destroy({ where: { invoice_id: invoiceId } });
+  const removedInvoice = await Invoice.destroy({ where: { id: invoiceId } });
+  logger.info('cleanup invoice and items', { invoiceId, removedItem, removedInvoice });
+}
+
 export async function ensureInvoiceForCollect(invoiceId: string) {
   const invoice = await Invoice.findByPk(invoiceId);
   if (!invoice) {
@@ -519,6 +534,14 @@ export async function ensureInvoiceForCollect(invoiceId: string) {
     throw new Error(`Invoice ${invoiceId} is draft`);
   }
 
+  if (!invoice.payment_intent_id) {
+    await invoiceQueue.pushAndWait({
+      id: invoice.id,
+      job: { invoiceId: invoice.id, retryOnError: false, justCreate: true },
+    });
+    await invoice.reload();
+  }
+
   const paymentIntent = await PaymentIntent.findByPk(invoice.payment_intent_id);
   if (!paymentIntent) {
     throw new Error(`Payment intent not found for invoice ${invoiceId}`);
@@ -922,7 +945,7 @@ export async function executeOcapTransactions(
   userPk: string,
   claims: any[],
   paymentMethod: PaymentMethod,
-  request: Request,
+  request: Request
 ) {
   const client = paymentMethod.getOcapClient();
   const delegation = claims.find((x) => x.type === 'signature' && x.meta?.purpose === 'delegation');

package/api/src/routes/subscriptions.ts

@@ -14,6 +14,7 @@ import { authenticate } from '../libs/security';
 import { expandLineItems, getFastCheckoutAmount, isLineItemAligned } from '../libs/session';
 import {
   createProration,
+  finalizeSubscriptionUpdate,
   getSubscriptionCreateSetup,
   getSubscriptionRefundSetup,
   getUpcomingInvoiceAmount,
@@ -38,7 +39,7 @@ import { Subscription, TSubscription } from '../store/models/subscription';
 import { SubscriptionItem } from '../store/models/subscription-item';
 import type { LineItem, ServiceAction, SubscriptionUpdateItem } from '../store/models/types';
 import { UsageRecord } from '../store/models/usage-record';
-import { ensureInvoiceAndItems } from './connect/shared';
+import { cleanupInvoiceAndItems, ensureInvoiceAndItems } from './connect/shared';
 import { createUsageRecordQueryFn } from './usage-records';
 
 const router = Router();
@@ -482,10 +483,10 @@ const validateSubscriptionUpdateRequest = async (subscription: Subscription, ite
   }
 
   // split items into added, deleted
+  const existingItems = await SubscriptionItem.findAll({ where: { subscription_id: subscription.id } });
   const addedItems = items.filter((x: any) => x.price_id && !x.id);
   const deletedItems = items.filter((x: any) => x.deleted && x.id);
-  const updatedItems = items.filter((x: any) => !x.deleted && x.id);
-  const existingItems = await SubscriptionItem.findAll({ where: { subscription_id: subscription.id } });
+  const updatedItems = items.filter((x: any) => !x.deleted && x.id && existingItems.some((i) => i.id === x.id));
 
   // try handle cross-sell with different interval, just replace with new price that have same interval
   let addedExpanded = await Price.expand(addedItems as LineItem[]);
@@ -569,7 +570,6 @@ const validateSubscriptionUpdateRequest = async (subscription: Subscription, ite
   }
 
   return {
-    existingItems,
     addedItems,
     updatedItems,
     deletedItems,
@@ -692,35 +692,10 @@ router.put('/:id', authPortal, async (req, res) => {
       }
 
       // validate the request
-      const { existingItems, addedItems, updatedItems, deletedItems, newItems } =
-        await validateSubscriptionUpdateRequest(subscription, value.items);
-
-      // update subscription items
-      for (const item of addedItems) {
-        await SubscriptionItem.create({
-          price_id: item.price_id as string,
-          quantity: item.quantity as number,
-          livemode: subscription.livemode,
-          subscription_id: subscription.id,
-          metadata: {},
-        });
-        logger.info('subscription item added', { subscription: req.params.id, item: item.id });
-      }
-      for (const item of updatedItems) {
-        const exist = existingItems.find((x) => x.id === item.id);
-        if (exist) {
-          await exist.update(pick(item, ['quantity', 'metadata', 'billing_thresholds']));
-          logger.info('subscription item updated', { subscription: req.params.id, item: item.id });
-        }
-      }
-      for (const item of deletedItems) {
-        if (item.clear_usage) {
-          await UsageRecord.destroy({ where: { subscription_item_id: item.id } });
-          logger.info('subscription item usage cleared', { subscription: req.params.id, item: item.id });
-        }
-        await SubscriptionItem.destroy({ where: { id: item.id } });
-        logger.info('subscription item deleted', { subscription: req.params.id, item: item.id });
-      }
+      const { addedItems, updatedItems, deletedItems, newItems } = await validateSubscriptionUpdateRequest(
+        subscription,
+        value.items
+      );
 
       // update subscription period settings
       // HINT: if we are adding new items, we need to reset the anchor to now
@@ -736,6 +711,13 @@ router.put('/:id', authPortal, async (req, res) => {
       // handle proration
       const prorationBehavior = updates.proration_behavior || subscription.proration_behavior || 'none';
       if (prorationBehavior === 'create_prorations') {
+        // 0. cleanup open invoices
+        if (subscription.pending_update?.updates?.latest_invoice_id) {
+          await cleanupInvoiceAndItems(subscription.pending_update?.updates?.latest_invoice_id);
+          // @ts-ignore
+          await subscription.update({ pending_update: null });
+        }
+
         // 1. create proration
         const { lastInvoice, due, newCredit, appliedCredit, prorations } = await createProration(
           subscription,
@@ -797,86 +779,84 @@ router.put('/:id', authPortal, async (req, res) => {
           items: prorationInvoiceItems.map((x) => x.id),
         });
 
-        // 5. adjust invoice total or update customer credit balance
-        const invoiceUpdates: Partial<Invoice> = {
-          status: 'open',
-          amount_due: due,
-          amount_remaining: due,
-        };
-        if (appliedCredit !== '0') {
-          const creditResult = await customer.decreaseTokenBalance(paymentCurrency.id, appliedCredit);
-          invoiceUpdates.starting_token_balance = creditResult.starting;
-          invoiceUpdates.ending_token_balance = creditResult.ending;
-          logger.info('customer credit applied to invoice after proration', {
-            subscription: req.params.id,
-            appliedCredit,
-            creditResult,
-          });
-        }
-        if (newCredit !== '0') {
-          const creditResult = await customer.increaseTokenBalance(paymentCurrency.id, newCredit);
-          invoiceUpdates.starting_token_balance = creditResult.starting;
-          invoiceUpdates.ending_token_balance = creditResult.ending;
-          logger.info('subscription proration credit applied to customer', {
-            subscription: req.params.id,
-            newCredit,
-            creditResult,
+        // 5. check do we need to connect
+        let hasNext = true;
+        if (due === '0') {
+          hasNext = false;
+        } else {
+          const delegation = await isDelegationSufficientForPayment({
+            paymentMethod,
+            paymentCurrency,
+            userDid: customer.did,
+            amount: setup.amount.setup,
           });
+          if (delegation.sufficient) {
+            hasNext = false;
+          } else if (['NO_DID_WALLET'].includes(delegation.reason as string)) {
+            throw new Error('Subscription update can only be done when you do have connected DID Wallet');
+          } else if (['NO_TOKEN', 'NO_ENOUGH_TOKEN'].includes(delegation.reason as string)) {
+            // FIXME: this is not supported at frontend
+            connectAction = 'collect';
+          } else {
+            connectAction = 'change-plan';
+          }
         }
 
-        await invoice.update(invoiceUpdates);
-        await subscription.update(updates);
-
-        // 6. process the invoice as usual: push into queue
-        await invoiceQueue.pushAndWait({
-          id: invoice.id,
-          job: { invoiceId: invoice.id, retryOnError: false, waitForPayment: true },
+        // 6. adjust invoice total
+        await invoice.update({
+          status: 'open',
+          amount_due: due,
+          amount_remaining: due,
         });
-        logger.info('subscription update invoice processed', { subscription: subscription.id, invoice: invoice.id });
-
-        // check if we have succeeded
-        await Promise.all([invoice.reload(), subscription.reload()]);
 
-        if (invoice.status === 'paid') {
-          await subscriptionQueue.delete(subscription.id);
-          await addSubscriptionJob(subscription, 'cycle', false, subscription.trial_end);
-        } else {
+        // 7. wait for succeed
+        if (hasNext) {
           await subscription.update({
-            status: 'past_due',
-            cancel_at_period_end: true,
-            cancelation_details: {
-              comment: 'subscription_update',
-              feedback: 'other',
-              reason: 'payment_failed',
+            pending_update: {
+              expires_at: dayjs().unix() + 30 * 60, // after 30 minutes
+              updates,
+              appliedCredit,
+              newCredit,
+              addedItems,
+              deletedItems,
+              updatedItems,
             },
           });
-          logger.info('subscription past_due on invoice auto advance failed', {
+          logger.info('subscription update invoice wait for connect', {
             subscription: subscription.id,
             invoice: invoice.id,
           });
+        } else {
+          await invoiceQueue.pushAndWait({
+            id: invoice.id,
+            job: { invoiceId: invoice.id, retryOnError: false, waitForPayment: true },
+          });
+          logger.info('subscription update invoice processed', { subscription: subscription.id, invoice: invoice.id });
 
-          const delegation = await isDelegationSufficientForPayment({
-            paymentMethod,
+          // check if we have succeeded
+          await Promise.all([invoice.reload(), subscription.reload()]);
+
+          if (invoice.status === 'paid') {
+            await subscriptionQueue.delete(subscription.id);
+            await addSubscriptionJob(subscription, 'cycle', false, subscription.trial_end);
+          } else {
+            throw new Error('Subscription update invoice failed to advance');
+          }
+
+          await finalizeSubscriptionUpdate({
+            subscription,
+            customer,
+            invoice,
             paymentCurrency,
-            userDid: customer.did,
-            amount: setup.amount.setup,
+            appliedCredit,
+            newCredit,
+            addedItems,
+            deletedItems,
+            updatedItems,
+            updates,
           });
-          if (delegation.sufficient === false) {
-            if (['NO_DID_WALLET'].includes(delegation.reason as string)) {
-              connectAction = 'bind';
-            } else if (['NO_TOKEN', 'NO_ENOUGH_TOKEN'].includes(delegation.reason as string)) {
-              connectAction = 'collect';
-            } else {
-              connectAction = 'change-plan';
-            }
-          }
         }
       }
-
-      // rate limit for plan change
-      const releaseAt = updates.current_period_end || subscription.current_period_end;
-      await Lock.acquire(`${subscription.id}-change-plan`, releaseAt);
-      logger.info('subscription plan change lock acquired', { subscription: req.params.id, releaseAt });
     } else if (req.body.billing_cycle_anchor === 'now') {
       if (subscription.isActive() === false) {
         throw new Error('Updating billing_cycle_anchor not allowed for inactive subscriptions');

package/api/src/store/models/subscription.ts

@@ -36,6 +36,7 @@ export class Subscription extends Model<InferAttributes<Subscription>, InferCrea
     expires_at?: number;
     subscription_items?: any[];
     trial_end?: number;
+    [key: string]: any;
   };
 
   declare status: LiteralUnion<

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.13.266
+version: 1.13.267
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.266",
+  "version": "1.13.267",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -51,7 +51,7 @@
     "@arcblock/ux": "^2.9.80",
     "@arcblock/validator": "^1.18.120",
     "@blocklet/logger": "1.16.26",
-    "@blocklet/payment-react": "1.13.266",
+    "@blocklet/payment-react": "1.13.267",
     "@blocklet/sdk": "1.16.26",
     "@blocklet/ui-react": "^2.9.80",
     "@blocklet/uploader": "^0.1.6",
@@ -116,7 +116,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.26",
     "@arcblock/eslint-config-ts": "^0.3.0",
-    "@blocklet/payment-types": "1.13.266",
+    "@blocklet/payment-types": "1.13.267",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -155,5 +155,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "f6f7ee807560b4b9d01e6654b03cfaf1f523c167"
+  "gitHead": "5cbea674669735c0e8c8d8106038106938668c4b"
 }

package/src/pages/admin/products/passports/index.tsx

@@ -77,10 +77,7 @@ export default function PassportList() {
         customBodyRenderLite: (_: string, index: number) => {
           const payLink = data[index].extra?.acquire?.pay;
           if (payLink) {
-            if (payLink.startsWith('plink_')) {
-              return <Link to={`/admin/payments/${payLink}`}>{payLink}</Link>;
-            }
-            if (payLink.startsWith('prctbl_')) {
+            if (payLink.startsWith('plink_') || payLink.startsWith('prctbl_')) {
               return <Link to={`/admin/products/${payLink}`}>{payLink}</Link>;
             }
           }

package/src/pages/customer/subscription/change-plan.tsx

@@ -85,10 +85,6 @@ export default function CustomerSubscriptionChangePlan() {
     return <Alert severity="error">{t('payment.customer.changePlan.subscriptionNotFound')}</Alert>;
   }
 
-  if (!data.table) {
-    return <Alert severity="error">{t('payment.customer.changePlan.tableNotFound')}</Alert>;
-  }
-
   const handleSelect = async (priceId: string) => {
     try {
       if (state.priceId === priceId) {
@@ -151,11 +147,7 @@ export default function CustomerSubscriptionChangePlan() {
 
       // FIXME: support more proration_behavior
       const result = await api.put(`/api/subscriptions/${id}`, { proration_behavior: 'create_prorations', items });
-      if (result.data.status === 'active') {
-        Toast.success(t('payment.customer.changePlan.success'));
-        setState({ paid: true });
-        setTimeout(handleBack, 2000);
-      } else {
+      if (result.data.connectAction) {
         setState({ paying: true });
         try {
           setState({ paying: true });
@@ -169,7 +161,10 @@ export default function CustomerSubscriptionChangePlan() {
               error: t('payment.customer.changePlan.error'),
               confirm: '',
             } as any,
-            extraParams: { invoiceId: result.data.latest_invoice_id, subscriptionId: result.data.id },
+            extraParams: {
+              invoiceId: result.data.pending_update?.updates?.latest_invoice_id,
+              subscriptionId: result.data.id,
+            },
             onSuccess: () => {
               setState({ paid: true, paying: false });
               setTimeout(() => {
@@ -191,6 +186,10 @@ export default function CustomerSubscriptionChangePlan() {
         } finally {
           setState({ paying: false });
         }
+      } else {
+        Toast.success(t('payment.customer.changePlan.success'));
+        setState({ paid: true });
+        setTimeout(handleBack, 2000);
       }
     } catch (err) {
       console.error(err);
@@ -236,7 +235,7 @@ export default function CustomerSubscriptionChangePlan() {
         <Stack
           direction="row"
           alignItems="center"
-          sx={{ fontWeight: 'normal', mt: '16px' }}
+          sx={{ fontWeight: 'normal', mt: '16px', cursor: 'pointer' }}
           onClick={() => goBackOrFallback(`/customer/subscription/${data.subscription.id}`)}>
           <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
           <SubscriptionDescription subscription={data.subscription} variant="h5" />
@@ -246,6 +245,7 @@ export default function CustomerSubscriptionChangePlan() {
         <SectionHeader title={t('payment.customer.changePlan.config')} />
         <PricingTable mode="select" alignItems="left" interval={interval} table={table} onSelect={handleSelect} />
       </Stack>
+      {!data.table && <Alert severity="error">{t('payment.customer.changePlan.tableNotFound')}</Alert>}
       {state.priceId && state.total && state.setup && (
         <Stack direction="column" spacing={3} sx={{ maxWidth: 640 }}>
           <SectionHeader title={t('payment.customer.changePlan.confirm')} />