payment-kit 1.13.159 → 1.13.161

package/api/src/routes/subscriptions.ts

@@ -6,12 +6,13 @@ import pick from 'lodash/pick';
 import uniq from 'lodash/uniq';
 import type { WhereOptions } from 'sequelize';
 
+import { ensureStripeSubscription } from '../integrations/stripe/resource';
 import { getWhereFromKvQuery, getWhereFromQuery } from '../libs/api';
 import dayjs from '../libs/dayjs';
 import logger from '../libs/logger';
 import { isDelegationSufficientForPayment } from '../libs/payment';
 import { authenticate } from '../libs/security';
-import { expandLineItems, isLineItemAligned } from '../libs/session';
+import { expandLineItems, getFastCheckoutAmount, isLineItemAligned } from '../libs/session';
 import { createProration, getSubscriptionCreateSetup, getSubscriptionRefundSetup } from '../libs/subscription';
 import { MAX_SUBSCRIPTION_ITEM_COUNT, formatMetadata } from '../libs/util';
 import { invoiceQueue } from '../queues/invoice';
@@ -27,6 +28,7 @@ import { Price } from '../store/models/price';
 import { PricingTable } from '../store/models/pricing-table';
 import { Product } from '../store/models/product';
 import { Refund } from '../store/models/refund';
+import { SetupIntent } from '../store/models/setup-intent';
 import { Subscription, TSubscription } from '../store/models/subscription';
 import { SubscriptionItem } from '../store/models/subscription-item';
 import type { LineItem, ServiceAction, SubscriptionUpdateItem } from '../store/models/types';
@@ -379,7 +381,11 @@ router.put('/:id/recover', authPortal, async (req, res) => {
     return res.status(400).json({ error: 'Subscription not recoverable from cancellation' });
   }
 
-  await updateStripeSubscription(doc, { cancel_at_period_end: false, cancel_at: null, canceled_at: null });
+  if (doc.cancel_at_period_end) {
+    await updateStripeSubscription(doc, { cancel_at_period_end: false });
+  } else {
+    await updateStripeSubscription(doc, { cancel_at: null });
+  }
 
   await doc.update({ cancel_at_period_end: false, cancel_at: 0, canceled_at: 0 });
 
@@ -873,7 +879,7 @@ router.put('/:id', authPortal, async (req, res) => {
             } else if (['NO_TOKEN', 'NO_ENOUGH_TOKEN'].includes(delegation.reason as string)) {
               connectAction = 'collect';
             } else {
-              connectAction = 'update';
+              connectAction = 'change-plan';
             }
           }
         }
@@ -944,7 +950,7 @@ const getUpdateTable = async (subscription: Subscription) => {
 };
 
 // Check that the subscription is upgradable
-router.get('/:id/update', authPortal, async (req, res) => {
+router.get('/:id/change-plan', authPortal, async (req, res) => {
   try {
     const subscription = await Subscription.findByPk(req.params.id);
     if (!subscription) {
@@ -970,8 +976,8 @@ router.get('/:id/update', authPortal, async (req, res) => {
   }
 });
 
-// Simulate subscription update
-router.post('/:id/update', authPortal, async (req, res) => {
+// Simulate subscription plan change
+router.post('/:id/change-plan', authPortal, async (req, res) => {
   try {
     const subscription = await Subscription.findByPk(req.params.id);
     if (!subscription) {
@@ -1063,6 +1069,248 @@ router.get('/:id/proration', authPortal, async (req, res) => {
   }
 });
 
+// Check payment change status
+router.get('/:id/change-payment', authPortal, async (req, res) => {
+  const subscription = await Subscription.findByPk(req.params.id);
+  if (!subscription) {
+    return res.status(404).json({ error: 'Subscription not found' });
+  }
+  const context = subscription.metadata.changePayment || {};
+  if (!context.setup_intent_id) {
+    return res.status(404).json({ error: 'Subscription change payment context not found' });
+  }
+
+  const setupIntent = await SetupIntent.findByPk(context.setup_intent_id);
+  return res.json({ subscription, setupIntent });
+});
+
+// Prepare setupIntent for payment change
+router.post('/:id/change-payment', authPortal, async (req, res) => {
+  try {
+    const subscription = await Subscription.findByPk(req.params.id);
+    if (!subscription) {
+      return res.status(404).json({ error: `Subscription ${req.params.id} not found when change payment` });
+    }
+    if (subscription.isActive() === false) {
+      return res.status(400).json({ error: `Subscription ${req.params.id} not active when change payment` });
+    }
+    const paymentCurrency = await PaymentCurrency.findByPk(req.body.payment_currency);
+    if (!paymentCurrency) {
+      return res
+        .status(400)
+        .json({ error: `Payment currency ${req.body.payment_currency} not found when change payment` });
+    }
+    const paymentMethod = await PaymentMethod.findByPk(paymentCurrency.payment_method_id);
+    if (!paymentMethod) {
+      return res
+        .status(400)
+        .json({ error: `Payment method ${paymentCurrency.payment_method_id} not found when change payment` });
+    }
+
+    const customer = await Customer.findByPk(subscription.customer_id);
+    if (paymentMethod.type === 'stripe') {
+      await customer?.update({ address: Object.assign({}, customer.address, req.body.billing_address) });
+    }
+
+    if (subscription.currency_id === paymentCurrency.id) {
+      return res.status(400).json({ error: 'Payment currency not changed when change payment' });
+    }
+
+    const previousPaymentMethod = await PaymentMethod.findByPk(subscription.default_payment_method_id);
+    if (previousPaymentMethod?.type === 'stripe') {
+      if (!subscription.payment_details?.stripe?.subscription_id) {
+        return res.status(400).json({ error: 'Can not change from stripe without stripe subscription id' });
+      }
+    }
+
+    // ensure setupIntent
+    const context = subscription.metadata.changePayment || {};
+    let setupIntent: SetupIntent | null = null;
+    if (context.setup_intent_id) {
+      // should be cleared after success
+      setupIntent = await SetupIntent.findByPk(context.setup_intent_id);
+    }
+    // Reuse existing setupIntent if not succeeded
+    if (setupIntent && setupIntent.status !== 'succeeded') {
+      await setupIntent.update({
+        status: 'requires_capture',
+        customer_id: subscription.customer_id,
+        currency_id: paymentCurrency.id,
+        payment_method_id: paymentMethod.id,
+        last_setup_error: null,
+      });
+      logger.info('setupIntent reset on subscription payment change submit', {
+        subscription: subscription.id,
+        intent: setupIntent.id,
+      });
+    } else {
+      setupIntent = await SetupIntent.create({
+        livemode: !!subscription.livemode,
+        customer_id: subscription.customer_id,
+        description: subscription.description || `payment change setup for ${subscription.id}`,
+        currency_id: paymentCurrency.id,
+        payment_method_id: paymentMethod.id,
+        status: 'requires_payment_method',
+        payment_method_types: [paymentMethod.type],
+        flow_directions: ['inbound', 'outbound'],
+        usage: 'off_session',
+        metadata: {
+          subscription_id: subscription.id,
+          from_currency: subscription.currency_id,
+          to_currency: paymentCurrency.id,
+          from_method: subscription.default_payment_method_id,
+          to_method: paymentMethod.id,
+        },
+      });
+
+      // persist setup intent id
+      await subscription.update({
+        metadata: { ...subscription.metadata, changePayment: { setup_intent_id: setupIntent.id } },
+      });
+
+      logger.info('setupIntent created on subscription payment change submit', {
+        subscription: subscription.id,
+        intent: setupIntent.id,
+      });
+    }
+
+    // if we can complete purchase without any wallet interaction
+    const subscriptionItems = await SubscriptionItem.findAll({ where: { subscription_id: subscription.id } });
+    const lineItems = await Price.expand(
+      subscriptionItems.map((x) => ({ id: x.id, price_id: x.price_id, quantity: x.quantity }))
+    );
+
+    let stripeContext: any = null;
+    let delegation: any = null;
+    if (paymentMethod.type === 'stripe') {
+      const client = paymentMethod.getStripeClient();
+      let exist;
+      if (subscription.payment_details?.stripe?.subscription_id) {
+        exist = await client.subscriptions.retrieve(subscription.payment_details.stripe.subscription_id);
+      }
+      if (exist) {
+        if (exist.status === 'paused') {
+          await client.subscriptions.resume(exist.id, {
+            proration_behavior: 'none',
+          });
+        }
+        const result = await client.subscriptions.update(exist.id, {
+          trial_end: subscription.current_period_end,
+          proration_behavior: 'none',
+          pause_collection: '',
+        });
+        logger.info('stripe subscription updated on subscription payment change', {
+          subscription: subscription.id,
+          intent: setupIntent.id,
+          stripeSubscriptionId: exist.id,
+          result,
+        });
+        await setupIntent.update({
+          status: 'succeeded',
+          last_setup_error: null,
+          payment_method_types: [paymentMethod.type],
+        });
+        await subscription.update({
+          currency_id: paymentCurrency.id,
+          default_payment_method_id: paymentMethod.id,
+          payment_settings: {
+            payment_method_types: [paymentMethod.type],
+            payment_method_options: {},
+          },
+        });
+      } else {
+        const settings = PaymentMethod.decryptSettings(paymentMethod.settings);
+
+        // changing from crypto to stripe: create/resume stripe subscription, pause crypto subscription
+        const stripeSubscription = await ensureStripeSubscription(
+          subscription,
+          paymentMethod,
+          paymentCurrency,
+          lineItems,
+          0,
+          subscription.current_period_end
+        );
+
+        stripeContext = {
+          type: 'subscription',
+          id: stripeSubscription.id,
+          // @ts-ignore
+          client_secret:
+            stripeSubscription.latest_invoice?.payment_intent?.client_secret ||
+            stripeSubscription.pending_setup_intent?.client_secret,
+          intent_type: stripeSubscription.latest_invoice?.payment_intent ? 'payment_intent' : 'setup_intent',
+          publishable_key: settings.stripe?.publishable_key,
+          status: stripeSubscription.status,
+        };
+
+        await setupIntent.update({
+          setup_details: {
+            stripe: {
+              customer_id: stripeSubscription.customer,
+              subscription_id: stripeSubscription.id,
+              setup_intent_id: stripeSubscription.pending_setup_intent.id,
+            },
+          },
+        });
+      }
+    } else {
+      // changing from stripe to crypto: pause stripe subscription
+      if (previousPaymentMethod!.type === 'stripe') {
+        const client = await previousPaymentMethod?.getStripeClient();
+        const stripeSubscriptionId = subscription.payment_details?.stripe?.subscription_id as string;
+        const result = await client?.subscriptions.update(stripeSubscriptionId, {
+          pause_collection: {
+            behavior: 'void',
+          },
+        });
+        logger.info('stripe subscription paused on payment change', {
+          subscription: subscription.id,
+          stripeSubscription: stripeSubscriptionId,
+          result,
+        });
+      }
+
+      // changing from crypto to crypto: just update the subscription
+      delegation = await isDelegationSufficientForPayment({
+        paymentMethod,
+        paymentCurrency,
+        userDid: customer!.did,
+        amount: getFastCheckoutAmount(lineItems, 'subscription', paymentCurrency.id, false),
+      });
+      if (delegation.sufficient) {
+        await setupIntent.update({
+          status: 'succeeded',
+          last_setup_error: null,
+          payment_method_types: [paymentMethod.type],
+        });
+        await subscription.update({
+          currency_id: paymentCurrency.id,
+          default_payment_method_id: paymentMethod.id,
+          payment_settings: {
+            payment_method_types: [paymentMethod.type],
+            payment_method_options: {},
+          },
+        });
+        logger.info('Subscription payment change done on delegation enough', {
+          subscription: subscription.id,
+          intent: setupIntent.id,
+        });
+      }
+    }
+
+    return res.json({
+      setupIntent,
+      stripeContext,
+      subscription,
+      customer,
+      delegation,
+    });
+  } catch (err) {
+    console.error(err);
+    return res.status(500).json({ code: err.code, error: err.message });
+  }
+});
+
 // FIXME: this should be removed in future
 // Clean up subscriptions that have invalid invoices and payments
 router.delete('/cleanup', auth, async (req, res) => {

package/api/src/store/migrate.ts

@@ -8,7 +8,7 @@ import { sequelize } from './sequelize';
 
 const umzug = new Umzug({
   migrations: {
-    glob: ['migrations/*.{ts,js}', { cwd: __dirname }],
+    glob: ['**/migrations/*.{ts,js}', { cwd: __dirname }],
     // @FIXME: @wangshijun  jianchao这边的注释了才能 blocklet dev 成功
     // resolve: ({ name, path, context }) => {
     //   // eslint-disable-next-line import/no-dynamic-require, global-require

package/api/src/store/models/setup-intent.ts

@@ -5,7 +5,7 @@ import type { LiteralUnion } from 'type-fest';
 
 import { createEvent, createStatusEvent } from '../../libs/audit';
 import { createIdGenerator } from '../../libs/util';
-import type { PaymentError, PaymentMethodOptions } from './types';
+import type { PaymentDetails, PaymentError, PaymentMethodOptions } from './types';
 
 const nextId = createIdGenerator('seti', 24);
 
@@ -49,10 +49,7 @@ export class SetupIntent extends Model<InferAttributes<SetupIntent>, InferCreati
   declare payment_method_id: string;
 
   // 3rd party payment tx hash
-  declare setup_details?: {
-    tx_hash?: string;
-    payer?: string;
-  };
+  declare setup_details?: PaymentDetails;
 
   // TODO: following fields not supported yet
   // application

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.159",
+  "version": "1.13.161",
   "scripts": {
     "dev": "cross-env COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev --open",
     "eject": "vite eject",
@@ -13,7 +13,7 @@
     "clean": "node scripts/build-clean.js",
     "bundle": "tsc --noEmit && npm run bundle:client && npm run bundle:api",
     "bundle:client": "vite build",
-    "bundle:api": "npm run clean && tsc -p tsconfig.api.json && blocklet bundle --zip --create-release",
+    "bundle:api": "npm run clean && tsc -p tsconfig.api.json && blocklet bundle --compact --external sqlite3 --create-release",
     "build": "npm run clean && tsc -p tsconfig.api.json && npm run bundle:client",
     "types": "rm -rf types && tsc -p tsconfig.types.json && rm -f ../../packages/types/lib/*.d.ts && cp -f types/store/models/*.d.ts ../../packages/types/lib",
     "deploy": "npm run bundle && blocklet deploy .blocklet/bundle",
@@ -45,20 +45,20 @@
     "@abtnode/cron": "1.16.23",
     "@arcblock/did": "^1.18.110",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.9.29",
+    "@arcblock/did-connect": "^2.9.39",
     "@arcblock/did-util": "^1.18.110",
     "@arcblock/jwt": "^1.18.110",
-    "@arcblock/ux": "^2.9.29",
+    "@arcblock/ux": "^2.9.39",
     "@blocklet/logger": "1.16.23",
-    "@blocklet/payment-react": "1.13.159",
+    "@blocklet/payment-react": "1.13.161",
     "@blocklet/sdk": "1.16.23",
-    "@blocklet/ui-react": "^2.9.29",
-    "@blocklet/uploader": "^0.0.73",
-    "@mui/icons-material": "^5.15.8",
-    "@mui/lab": "^5.0.0-alpha.164",
-    "@mui/material": "^5.15.7",
-    "@mui/styles": "^5.15.8",
-    "@mui/system": "^5.15.8",
+    "@blocklet/ui-react": "^2.9.39",
+    "@blocklet/uploader": "^0.0.74",
+    "@mui/icons-material": "^5.15.11",
+    "@mui/lab": "^5.0.0-alpha.166",
+    "@mui/material": "^5.15.11",
+    "@mui/styles": "^5.15.11",
+    "@mui/system": "^5.15.11",
     "@ocap/asset": "^1.18.110",
     "@ocap/client": "^1.18.110",
     "@ocap/mcrypto": "^1.18.110",
@@ -110,7 +110,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.23",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@blocklet/payment-types": "1.13.159",
+    "@blocklet/payment-types": "1.13.161",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -149,5 +149,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "2663776fb04b0446e2d053eedfb66d1910c507f8"
+  "gitHead": "55cb16d9cd06b91b949a1a1c88b14670b0c1aca8"
 }

package/src/app.tsx

@@ -23,7 +23,8 @@ const CustomerHome = React.lazy(() => import('./pages/customer/index'));
 const CustomerInvoiceDetail = React.lazy(() => import('./pages/customer/invoice/detail'));
 const CustomerInvoicePastDue = React.lazy(() => import('./pages/customer/invoice/past-due'));
 const CustomerSubscriptionDetail = React.lazy(() => import('./pages/customer/subscription/detail'));
-const CustomerSubscriptionUpdate = React.lazy(() => import('./pages/customer/subscription/update'));
+const CustomerSubscriptionChangePlan = React.lazy(() => import('./pages/customer/subscription/change-plan'));
+const CustomerSubscriptionChangePayment = React.lazy(() => import('./pages/customer/subscription/change-payment'));
 
 const theme = createTheme({
   typography: {
@@ -71,11 +72,20 @@ function App() {
                 }
               />
               <Route
-                key="customer-subscription"
-                path="/customer/subscription/:id/update"
+                key="customer-subscription-change-plan"
+                path="/customer/subscription/:id/change-plan"
+                element={
+                  <Layout>
+                    <CustomerSubscriptionChangePlan />
+                  </Layout>
+                }
+              />
+              <Route
+                key="customer-subscription-change-payment"
+                path="/customer/subscription/:id/change-payment"
                 element={
                   <Layout>
-                    <CustomerSubscriptionUpdate />
+                    <CustomerSubscriptionChangePayment />
                   </Layout>
                 }
               />

package/src/components/metadata/list.tsx

@@ -0,0 +1,25 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Typography } from '@mui/material';
+import isEmpty from 'lodash/isEmpty';
+import isObject from 'lodash/isObject';
+
+import InfoRow from '../info-row';
+
+export default function MetadataList({ data }: { data: any }) {
+  const { t } = useLocaleContext();
+
+  if (isEmpty(data)) {
+    return <Typography color="text.secondary">{t('common.metadata.empty')}</Typography>;
+  }
+
+  // skip non-string values
+  return (
+    <>
+      {Object.keys(data || {})
+        .filter((key) => isObject(data[key]) === false)
+        .map((key) => (
+          <InfoRow key={key} label={key} value={data[key]} />
+        ))}
+    </>
+  );
+}

package/src/components/price/currency-select.tsx

@@ -27,7 +27,7 @@ export default function CurrencySelect({ mode: initialMode, hasSelected, onSelec
   if (mode === 'selecting') {
     return (
       <Select value="" sx={{ width: 260 }} size="small" onChange={handleSelect}>
-        {getSupportedPaymentMethods(settings.paymentMethods, hasSelected).map((method) => [
+        {getSupportedPaymentMethods(settings.paymentMethods, (x) => !hasSelected(x)).map((method) => [
           <ListSubheader key={method.id} sx={{ fontSize: '1rem', color: 'text.secondary', lineHeight: '2.5rem' }}>
             {method.name}
           </ListSubheader>,

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

@@ -25,7 +25,7 @@ const fetchUpdateOptions = ({ id, showUpdate }: { id: string; showUpdate: boolea
     return Promise.resolve(false);
   }
 
-  return api.get(`/api/subscriptions/${id}/update`).then((res) => !!res.data);
+  return api.get(`/api/subscriptions/${id}/change-plan`).then((res) => !!res.data);
 };
 
 export function SubscriptionActionsInner({ subscription, showUpdate, onChange }: Props) {
@@ -82,9 +82,7 @@ export function SubscriptionActionsInner({ subscription, showUpdate, onChange }:
           size="small"
           onClick={() => {
             if (action.action === 'pastDue') {
-              navigate(
-                `/customer/invoice/${subscription.latest_invoice_id}?action=${action.canRenew ? 'renew' : 'pay'}`
-              );
+              navigate(`/customer/invoice/past-due?subscription=${subscription.id}`);
             } else {
               setState({
                 action: action.action,
@@ -101,9 +99,9 @@ export function SubscriptionActionsInner({ subscription, showUpdate, onChange }:
           color="primary"
           size="small"
           onClick={() => {
-            navigate(`/customer/subscription/${subscription.id}/update`);
+            navigate(`/customer/subscription/${subscription.id}/change-plan`);
           }}>
-          {t('payment.customer.upgrade.button')}
+          {t('payment.customer.changePlan.button')}
         </Button>
       )}
       {subscription.service_actions?.map((x) => (

package/src/libs/util.ts

@@ -1,11 +1,6 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable @typescript-eslint/indent */
-import {
-  formatCheckoutHeadlines,
-  formatPrice,
-  getCheckoutAmount,
-  getPriceCurrencyOptions,
-} from '@blocklet/payment-react';
+import { formatCheckoutHeadlines, formatPrice, getPriceCurrencyOptions } from '@blocklet/payment-react';
 import type {
   LineItem,
   TLineItemExpanded,
@@ -14,12 +9,12 @@ import type {
   TPaymentMethodExpanded,
   TPrice,
   TProductExpanded,
+  TSubscriptionExpanded,
 } from '@blocklet/payment-types';
 import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
 
 import { t } from '../locales/index';
-import dayjs from './dayjs';
 
 export const formatProductPrice = (
   { prices, unit_label }: { prices: TPrice[]; unit_label: string },
@@ -63,20 +58,7 @@ export function getPriceFromProducts(products: TProductExpanded[], priceId: stri
 }
 
 export function formatPaymentLinkPricing(link: TPaymentLinkExpanded, currency: TPaymentCurrency) {
-  const amount = getCheckoutAmount(link.line_items, currency, !!link.subscription_data?.trial_period_days);
-  return formatCheckoutHeadlines(
-    {
-      mode: 'payment',
-      status: 'open',
-      payment_status: 'unpaid',
-      currency,
-      amount_total: amount.total,
-      amount_subtotal: amount.subtotal,
-      expires_at: dayjs().add(30, 'days').unix(),
-      ...link,
-    } as any,
-    currency
-  );
+  return formatCheckoutHeadlines(link.line_items, currency, link.subscription_data?.trial_period_days || 0);
 }
 
 export function getWebhookStatusColor(status: string) {
@@ -203,3 +185,7 @@ export const debounce = (fun: Function, wait: number) => {
     }, wait);
   };
 };
+
+export function canChangePaymentMethod(subscription: TSubscriptionExpanded) {
+  return subscription.items.every((x) => getPriceCurrencyOptions(x.price).length > 1);
+}

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

@@ -8,7 +8,6 @@ import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/ma
 import { styled } from '@mui/system';
 import { fromUnitToToken } from '@ocap/util';
 import { useRequest, useSetState } from 'ahooks';
-import { isEmpty } from 'lodash';
 import { Link } from 'react-router-dom';
 
 import Copyable from '../../../../components/copyable';
@@ -19,6 +18,7 @@ import InfoRow from '../../../../components/info-row';
 import InvoiceActions from '../../../../components/invoice/action';
 import InvoiceTable from '../../../../components/invoice/table';
 import MetadataEditor from '../../../../components/metadata/editor';
+import MetadataList from '../../../../components/metadata/list';
 import PaymentList from '../../../../components/payment-intent/list';
 import RefundList from '../../../../components/refund/list';
 import SectionHeader from '../../../../components/section/header';
@@ -186,15 +186,7 @@ export default function InvoiceDetail(props: { id: string }) {
           </Button>
         </SectionHeader>
         <Box className="section-body">
-          {!state.editing.metadata &&
-            (isEmpty(data.metadata) ? (
-              <Typography color="text.secondary">{t('common.metadata.empty')}</Typography>
-            ) : (
-              Object.keys(data.metadata || {}).map((key) => (
-                // @ts-ignore
-                <InfoRow key={key} label={key} value={data.metadata[key]} />
-              ))
-            ))}
+          {!state.editing.metadata && <MetadataList data={data.metadata} />}
           {state.editing.metadata && (
             <MetadataEditor
               data={data}

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

@@ -7,7 +7,6 @@ import { ArrowBackOutlined, Edit } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
-import { isEmpty } from 'lodash';
 import { Link } from 'react-router-dom';
 
 import Copyable from '../../../../components/copyable';
@@ -17,6 +16,7 @@ import EventList from '../../../../components/event/list';
 import InfoRow from '../../../../components/info-row';
 import InvoiceList from '../../../../components/invoice/list';
 import MetadataEditor from '../../../../components/metadata/editor';
+import MetadataList from '../../../../components/metadata/list';
 import RefundList from '../../../../components/refund/list';
 import SectionHeader from '../../../../components/section/header';
 import SubscriptionActions from '../../../../components/subscription/actions';
@@ -174,14 +174,7 @@ export default function SubscriptionDetail(props: { id: string }) {
           </Button>
         </SectionHeader>
         <Box className="section-body">
-          {!state.editing.metadata &&
-            (isEmpty(data.metadata) ? (
-              <Typography color="text.secondary">{t('common.metadata.empty')}</Typography>
-            ) : (
-              Object.keys(data.metadata || {}).map((key) => (
-                <InfoRow key={key} label={key} value={data.metadata[key]} />
-              ))
-            ))}
+          {!state.editing.metadata && <MetadataList data={data.metadata} />}
           {state.editing.metadata && (
             <MetadataEditor
               data={data}

package/src/pages/admin/customers/customers/detail.tsx

@@ -29,14 +29,14 @@ import SubscriptionList from '../../../../components/subscription/list';
 const fetchData = async (
   id: string
 ): Promise<{ customer: TCustomerExpanded; summary: { [key: string]: GroupedBN } }> => {
-  const results = await Promise.all([
+  const [customer, summary] = await Promise.all([
     api.get(`/api/customers/${id}`).then((res) => res.data),
     api.get(`/api/customers/${id}/summary`).then((res) => res.data),
   ]);
 
   return {
-    customer: results[0],
-    summary: results[1],
+    customer,
+    summary,
   };
 };