payment-kit 1.13.73 → 1.13.74

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

@@ -68,8 +68,10 @@ export class Invoice extends Model<InferAttributes<Invoice>, InferCreationAttrib
   declare amount_remaining: string;
   declare amount_shipping: string;
 
-  declare ending_balance: string;
   declare starting_balance: string;
+  declare ending_balance: string;
+  declare starting_token_balance?: Record<string, string>; // token balances
+  declare ending_token_balance?: Record<string, string>; // token balances
 
   declare attempt_count: number;
   declare attempted: boolean;
@@ -427,29 +429,42 @@ export class Invoice extends Model<InferAttributes<Invoice>, InferCreationAttrib
   };
 
   public static initialize(sequelize: any) {
-    this.init(Invoice.GENESIS_ATTRIBUTES, {
-      sequelize,
-      modelName: 'Invoice',
-      tableName: 'invoices',
-      createdAt: 'created_at',
-      updatedAt: 'updated_at',
-      hooks: {
-        afterCreate: (model: Invoice, options) =>
-          createEvent('Invoice', 'invoice.created', model, options).catch(console.error),
-        afterUpdate: (model: Invoice, options) => {
-          createEvent('Invoice', 'invoice.updated', model, options).catch(console.error);
-          createStatusEvent(
-            'Invoice',
-            'invoice',
-            { open: 'finalized', void: 'voided', paid: 'paid', uncollectible: 'marked_uncollectible' },
-            model,
-            options
-          ).catch(console.error);
+    this.init(
+      {
+        ...Invoice.GENESIS_ATTRIBUTES,
+        starting_token_balance: {
+          type: DataTypes.JSON,
+          defaultValue: {},
+        },
+        ending_token_balance: {
+          type: DataTypes.JSON,
+          defaultValue: {},
         },
-        afterDestroy: (model: Invoice, options) =>
-          createEvent('Invoice', 'invoice.deleted', model, options).catch(console.error),
       },
-    });
+      {
+        sequelize,
+        modelName: 'Invoice',
+        tableName: 'invoices',
+        createdAt: 'created_at',
+        updatedAt: 'updated_at',
+        hooks: {
+          afterCreate: (model: Invoice, options) =>
+            createEvent('Invoice', 'invoice.created', model, options).catch(console.error),
+          afterUpdate: (model: Invoice, options) => {
+            createEvent('Invoice', 'invoice.updated', model, options).catch(console.error);
+            createStatusEvent(
+              'Invoice',
+              'invoice',
+              { open: 'finalized', void: 'voided', paid: 'paid', uncollectible: 'marked_uncollectible' },
+              model,
+              options
+            ).catch(console.error);
+          },
+          afterDestroy: (model: Invoice, options) =>
+            createEvent('Invoice', 'invoice.deleted', model, options).catch(console.error),
+        },
+      }
+    );
   }
 
   public static associate(models: any) {
@@ -489,6 +504,10 @@ export class Invoice extends Model<InferAttributes<Invoice>, InferCreationAttrib
       as: 'lines',
     });
   }
+
+  public isImmutable() {
+    return ['paid', 'void'].includes(this.status);
+  }
 }
 
 export type TInvoice = InferAttributes<Invoice>;

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

@@ -276,6 +276,10 @@ export class PaymentIntent extends Model<InferAttributes<PaymentIntent>, InferCr
       as: 'customer',
     });
   }
+
+  public isImmutable() {
+    return ['canceled', 'succeeded'].includes(this.status);
+  }
 }
 
 export type TPaymentIntent = InferAttributes<PaymentIntent>;

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

@@ -201,6 +201,10 @@ export class SetupIntent extends Model<InferAttributes<SetupIntent>, InferCreati
       as: 'customer',
     });
   }
+
+  public isImmutable() {
+    return ['canceled', 'succeeded'].includes(this.status);
+  }
 }
 
 export type TSetupIntent = InferAttributes<SetupIntent>;

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

@@ -24,10 +24,6 @@ export class SubscriptionItem extends Model<InferAttributes<SubscriptionItem>, I
     usage_gte: number;
   };
 
-  // Fields exists on creation
-  // declare proration_behavior: LiteralUnion<'always_invoice' | 'create_prorations' | 'none', string>;
-  // declare payment_behavior: LiteralUnion<'allow_incomplete' | 'error_if_incomplete' | 'pending_if_incomplete', string>;
-
   // TODO: following fields not supported
   // tax_rates
 

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

@@ -38,7 +38,7 @@ export class Subscription extends Model<InferAttributes<Subscription>, InferCrea
   };
 
   declare status: LiteralUnion<
-    'active' | 'past_due' | 'unpaid' | 'canceled' | 'incomplete' | 'incomplete_expired' | 'trialing' | 'paused',
+    'active' | 'past_due' | 'paused' | 'canceled' | 'incomplete' | 'incomplete_expired' | 'trialing',
     string
   >;
 
@@ -101,6 +101,9 @@ export class Subscription extends Model<InferAttributes<Subscription>, InferCrea
   // 3rd party payment tx hash
   declare payment_details?: PaymentDetails;
 
+  declare proration_behavior?: LiteralUnion<'always_invoice' | 'create_prorations' | 'none', string>;
+  declare payment_behavior?: LiteralUnion<'allow_incomplete' | 'error_if_incomplete' | 'pending_if_incomplete', string>;
+
   // TODO: following fields not supported
   // application
   // application_fee_percent
@@ -164,7 +167,7 @@ export class Subscription extends Model<InferAttributes<Subscription>, InferCrea
       allowNull: true,
     },
     status: {
-      type: DataTypes.ENUM('active', 'canceled', 'incomplete', 'incomplete_expired', 'past_due', 'trialing', 'unpaid'),
+      type: DataTypes.ENUM('active', 'canceled', 'incomplete', 'incomplete_expired', 'past_due', 'trialing', 'paused'),
       allowNull: false,
     },
     cancel_at: {
@@ -260,52 +263,74 @@ export class Subscription extends Model<InferAttributes<Subscription>, InferCrea
   };
 
   public static initialize(sequelize: any) {
-    this.init(Subscription.GENESIS_ATTRIBUTES, {
-      sequelize,
-      modelName: 'Subscription',
-      tableName: 'subscriptions',
-      createdAt: 'created_at',
-      updatedAt: 'updated_at',
-      hooks: {
-        afterCreate: (model: Subscription, options) => {
-          createEvent('Subscription', 'customer.subscription.created', model, options).catch(console.error);
+    this.init(
+      {
+        ...Subscription.GENESIS_ATTRIBUTES,
+        proration_behavior: {
+          type: DataTypes.ENUM('always_invoice', 'create_prorations', 'none'),
+          defaultValue: 'none',
+        },
+        payment_behavior: {
+          type: DataTypes.ENUM(
+            'default_incomplete',
+            'allow_incomplete',
+            'error_if_incomplete',
+            'pending_if_incomplete'
+          ),
+          defaultValue: 'default_incomplete',
         },
-        afterUpdate: async (model: Subscription, options) => {
-          createEvent('Subscription', 'customer.subscription.updated', model, options).catch(console.error);
-
-          if (model.trail_start) {
-            const previousLatestInvoiceId = model.previous('latest_invoice_id');
-
-            if (!previousLatestInvoiceId && model.latest_invoice_id) {
-              createEvent('Subscription', 'customer.subscription.trial_start', model, options).catch(console.error);
-            } else if (
-              previousLatestInvoiceId &&
-              model.latest_invoice_id &&
-              previousLatestInvoiceId !== model.latest_invoice_id
-            ) {
-              const count: number = await Invoice.count({
-                where: {
-                  subscription_id: model.id,
-                },
-              });
-              if (count === 2) {
-                // 当且仅当 有试用期的订阅更新了 && 恰好有 2 次发票,此时订阅的试用期刚好结束
-                createEvent('Subscription', 'customer.subscription.trial_end', model, options).catch(console.error);
+      },
+      {
+        sequelize,
+        modelName: 'Subscription',
+        tableName: 'subscriptions',
+        createdAt: 'created_at',
+        updatedAt: 'updated_at',
+        hooks: {
+          afterCreate: (model: Subscription, options) => {
+            createEvent('Subscription', 'customer.subscription.created', model, options).catch(console.error);
+          },
+          afterUpdate: async (model: Subscription, options) => {
+            createEvent('Subscription', 'customer.subscription.updated', model, options).catch(console.error);
+
+            if (model.trail_start) {
+              const previousLatestInvoiceId = model.previous('latest_invoice_id');
+
+              if (!previousLatestInvoiceId && model.latest_invoice_id) {
+                createEvent('Subscription', 'customer.subscription.trial_start', model, options).catch(console.error);
+              } else if (
+                previousLatestInvoiceId &&
+                model.latest_invoice_id &&
+                previousLatestInvoiceId !== model.latest_invoice_id
+              ) {
+                const count: number = await Invoice.count({
+                  where: {
+                    subscription_id: model.id,
+                  },
+                });
+                if (count === 2) {
+                  // 当且仅当 有试用期的订阅更新了 && 恰好有 2 次发票,此时订阅的试用期刚好结束
+                  createEvent('Subscription', 'customer.subscription.trial_end', model, options).catch(console.error);
+                }
               }
+            } else if (!model.previous('latest_invoice_id') && model.latest_invoice_id) {
+              createEvent('Subscription', 'customer.subscription.started', model, options).catch(console.error);
             }
-          } else if (!model.previous('latest_invoice_id') && model.latest_invoice_id) {
-            createEvent('Subscription', 'customer.subscription.started', model, options).catch(console.error);
-          }
-
-          createStatusEvent('Subscription', 'customer.subscription', { canceled: 'deleted' }, model, options).catch(
-            console.error
-          );
-          createCustomEvent('Subscription', 'customer.subscription', getSubscriptionEventType, model, options).catch(
-            console.error
-          );
+
+            createStatusEvent(
+              'Subscription',
+              'customer.subscription',
+              { canceled: 'deleted', past_due: 'past_due' },
+              model,
+              options
+            ).catch(console.error);
+            createCustomEvent('Subscription', 'customer.subscription', getSubscriptionEventType, model, options).catch(
+              console.error
+            );
+          },
         },
-      },
-    });
+      }
+    );
   }
 
   public static associate(models: any) {
@@ -329,6 +354,14 @@ export class Subscription extends Model<InferAttributes<Subscription>, InferCrea
       as: 'items',
     });
   }
+
+  public isImmutable() {
+    return ['canceled', 'incomplete_expired'].includes(this.status);
+  }
+
+  public isActive() {
+    return ['active', 'trialing'].includes(this.status);
+  }
 }
 
 export type TSubscription = InferAttributes<Subscription>;

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

@@ -399,6 +399,7 @@ export type EventType = LiteralUnion<
   | 'customer.subscription.created'
   | 'customer.subscription.deleted'
   | 'customer.subscription.paused'
+  | 'customer.subscription.past_due'
   | 'customer.subscription.pending_update_applied'
   | 'customer.subscription.pending_update_expired'
   | 'customer.subscription.resumed'

package/api/src/store/sequelize.ts

@@ -1,12 +1,18 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 // NOTE: add next line to keep sqlite3 in the bundle
 import 'sqlite3';
 
 import { join } from 'path';
 
+import CLS from 'cls-hooked';
 import { Sequelize } from 'sequelize';
 
 import env from '../libs/env';
 
+const namespace = CLS.createNamespace('payment-kit');
+
+Sequelize.useCLS(namespace);
+
 // eslint-disable-next-line import/prefer-default-export
 export const sequelize = new Sequelize({
   dialect: 'sqlite',

package/api/third.d.ts

@@ -10,6 +10,8 @@ declare module 'morgan';
 
 declare module 'flat';
 
+declare module 'cls-hooked';
+
 namespace Express {
   interface Request {
     user?: {

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

package/jest.config.js

@@ -0,0 +1,14 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  verbose: true,
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  collectCoverage: true,
+  coverageDirectory: 'coverage',
+  clearMocks: true,
+  transform: {
+    '^.+\\.ts?$': 'ts-jest',
+  },
+  testMatch: ['**/tests/**/*.spec.ts'],
+  collectCoverageFrom: ['api/src/**/*.ts'],
+};

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "payment-kit",
-  "version": "1.13.73",
+  "version": "1.13.74",
   "scripts": {
     "dev": "COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev",
     "eject": "vite eject",
     "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
     "lint:fix": "npm run lint -- --fix",
     "format": "prettier -w src",
+    "test": "jest",
+    "coverage": "npm run test -- --coverage",
     "start": "cross-env NODE_ENV=development nodemon api/dev.ts -w api",
     "clean": "node scripts/build-clean.js",
     "bundle": "tsc --noEmit && npm run bundle:client && npm run bundle:api",
@@ -40,32 +42,33 @@
     ]
   },
   "dependencies": {
-    "@abtnode/cron": "^1.16.19",
-    "@arcblock/did": "^1.18.103",
+    "@abtnode/cron": "^1.16.20",
+    "@arcblock/did": "^1.18.106",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.8.20",
-    "@arcblock/did-util": "^1.18.103",
-    "@arcblock/jwt": "^1.18.103",
-    "@arcblock/ux": "^2.8.20",
-    "@blocklet/logger": "^1.16.19",
-    "@blocklet/sdk": "^1.16.19",
-    "@blocklet/ui-react": "^2.8.20",
-    "@blocklet/uploader": "^0.0.38",
+    "@arcblock/did-connect": "^2.8.23",
+    "@arcblock/did-util": "^1.18.106",
+    "@arcblock/jwt": "^1.18.106",
+    "@arcblock/ux": "^2.8.23",
+    "@blocklet/logger": "^1.16.20",
+    "@blocklet/sdk": "^1.16.20",
+    "@blocklet/ui-react": "^2.8.23",
+    "@blocklet/uploader": "^0.0.55",
     "@mui/icons-material": "^5.14.19",
     "@mui/lab": "^5.0.0-alpha.155",
     "@mui/material": "^5.14.20",
     "@mui/styles": "^5.14.20",
     "@mui/system": "^5.14.20",
-    "@ocap/asset": "^1.18.103",
-    "@ocap/client": "^1.18.103",
-    "@ocap/mcrypto": "^1.18.103",
-    "@ocap/util": "^1.18.103",
-    "@ocap/wallet": "^1.18.103",
+    "@ocap/asset": "^1.18.106",
+    "@ocap/client": "^1.18.106",
+    "@ocap/mcrypto": "^1.18.106",
+    "@ocap/util": "^1.18.106",
+    "@ocap/wallet": "^1.18.106",
     "@stripe/react-stripe-js": "^2.4.0",
     "@stripe/stripe-js": "^2.2.0",
     "ahooks": "^3.7.8",
     "axios": "^0.27.2",
     "body-parser": "^1.20.2",
+    "cls-hooked": "^4.2.2",
     "cookie-parser": "^1.4.6",
     "copy-to-clipboard": "^3.3.3",
     "cors": "^2.8.5",
@@ -103,10 +106,10 @@
     "validator": "^13.11.0"
   },
   "devDependencies": {
-    "@abtnode/types": "^1.16.19",
+    "@abtnode/types": "^1.16.20",
     "@arcblock/eslint-config": "^0.2.4",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@did-pay/types": "1.13.73",
+    "@did-pay/types": "1.13.74",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -119,11 +122,13 @@
     "cross-env": "^7.0.3",
     "eslint": "^8.55.0",
     "import-sort-style-module": "^6.0.0",
+    "jest": "^29.7.0",
     "lint-staged": "^12.5.0",
     "nodemon": "^2.0.22",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
     "prettier-plugin-import-sort": "^0.0.7",
+    "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "type-fest": "^4.8.3",
     "typescript": "^4.9.5",
@@ -143,5 +148,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "544382d01feaed289ddaf2066b701a6ecf253370"
+  "gitHead": "7b0f74ea85cd7e16334a3dbed6e0bd66f359066e"
 }

package/src/components/blockchain/tx.tsx

@@ -4,19 +4,19 @@ import { Link, Stack, Typography } from '@mui/material';
 import { joinURL } from 'ufo';
 
 const getTxLink = (method: TPaymentMethod, details: PaymentDetails) => {
-  if (method.type === 'arcblock') {
+  if (method.type === 'arcblock' && details.arcblock?.tx_hash) {
     return {
       link: joinURL(method.settings.arcblock?.explorer_host as string, '/txs', details.arcblock?.tx_hash as string),
       text: details.arcblock?.tx_hash as string,
     };
   }
-  if (method.type === 'bitcoin') {
+  if (method.type === 'bitcoin' && details.bitcoin?.tx_hash) {
     return {
       link: joinURL(method.settings.bitcoin?.explorer_host as string, '/tx', details.bitcoin?.tx_hash as string),
       text: details.bitcoin?.tx_hash as string,
     };
   }
-  if (method.type === 'ethereum') {
+  if (method.type === 'ethereum' && details.ethereum?.tx_hash) {
     return {
       link: joinURL(method.settings.ethereum?.explorer_host as string, '/tx', details.ethereum?.tx_hash as string),
       text: details.ethereum?.tx_hash as string,
@@ -55,14 +55,23 @@ export default function TxLink(props: {
   }
 
   const { text, link } = getTxLink(props.method, props.details);
+
+  if (link) {
+    return (
+      <Link href={link} target="_blank" rel="noopener noreferrer">
+        <Stack component="span" direction="row" alignItems="center" spacing={1}>
+          <Typography component="span" color="primary">
+            {text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join('...') : text}
+          </Typography>
+          <OpenInNewOutlined fontSize="small" />
+        </Stack>
+      </Link>
+    );
+  }
+
   return (
-    <Link href={link} target="_blank" rel="noopener noreferrer">
-      <Stack component="span" direction="row" alignItems="center" spacing={1}>
-        <Typography component="span" color="primary">
-          {text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join('...') : text}
-        </Typography>
-        <OpenInNewOutlined fontSize="small" />
-      </Stack>
-    </Link>
+    <Typography component="small" color="text.secondary">
+      None
+    </Typography>
   );
 }

package/src/components/checkout/form/index.tsx

@@ -204,7 +204,7 @@ export default function PaymentForm({
 
       if (['arcblock', 'ethereum'].includes(method.type)) {
         setState({ paying: true });
-        if (result.data.delegation.sufficient) {
+        if (result.data.balance?.sufficient || result.data.delegation?.sufficient) {
           await handleConnected();
         } else {
           connectApi.open({

package/src/components/invoice/table.tsx

@@ -1,6 +1,8 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { TInvoiceExpanded } from '@did-pay/types';
 import { Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material';
 import { styled } from '@mui/system';
+import { toBN } from '@ocap/util';
 
 import { formatAmount, formatToDate, getPriceUintAmountByCurrency } from '../../libs/util';
 import LineItemActions from '../subscription/items/actions';
@@ -14,20 +16,44 @@ InvoiceTable.defaultProps = {
   simple: false,
 };
 
+export function getAppliedBalance(invoice: TInvoiceExpanded) {
+  if (invoice.paymentMethod.type === 'stripe') {
+    const starting = toBN(invoice.starting_balance);
+    const ending = toBN(invoice.ending_balance);
+    return ending.sub(starting).toString();
+  }
+
+  if (
+    invoice.starting_token_balance &&
+    invoice.starting_token_balance[invoice.paymentCurrency.id] &&
+    invoice.ending_token_balance &&
+    invoice.ending_token_balance[invoice.paymentCurrency.id]
+  ) {
+    const starting = toBN(invoice.starting_token_balance[invoice.paymentCurrency.id]);
+    const ending = toBN(invoice.ending_token_balance[invoice.paymentCurrency.id]);
+    return ending.sub(starting).toString();
+  }
+
+  return '0';
+}
+
 export default function InvoiceTable({ invoice, simple }: Props) {
+  const { t } = useLocaleContext();
+  const appliedBalance = getAppliedBalance(invoice);
+
   return (
     <StyledTable>
       <TableHead>
         <TableRow sx={{ borderBottom: '1px solid #eee' }}>
           <TableCell sx={{ textTransform: 'none', fontWeight: 'normal' }}>Description</TableCell>
           <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 80 }} align="right">
-            Quantity
+            {t('common.quantity')}
           </TableCell>
           <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 120 }} align="right">
-            Unit Price
+            {t('customer.invoice.unitPrice')}
           </TableCell>
           <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 100 }} align="right">
-            Amount
+            {t('common.amount')}
           </TableCell>
           {!simple && (
             <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 50 }} align="right">
@@ -54,10 +80,9 @@ export default function InvoiceTable({ invoice, simple }: Props) {
             </TableCell>
             <TableCell align="right">{line.quantity}</TableCell>
             <TableCell align="right">
-              {formatAmount(
-                getPriceUintAmountByCurrency(line.price, invoice.paymentCurrency),
-                invoice.paymentCurrency.decimal
-              )}
+              {!line.proration
+                ? formatAmount(getPriceUintAmountByCurrency(line.price, invoice.paymentCurrency), invoice.paymentCurrency.decimal) // prettier-ignore
+                : ''}
             </TableCell>
             <TableCell align="right">{formatAmount(line.amount, invoice.paymentCurrency.decimal)}</TableCell>
             {!simple && (
@@ -69,7 +94,7 @@ export default function InvoiceTable({ invoice, simple }: Props) {
         ))}
         <TableRow>
           <TableCell colSpan={3} align="right" sx={{ fontWeight: 600 }}>
-            Subtotal
+            {t('common.subtotal')}
           </TableCell>
           <TableCell align="right" sx={{ fontWeight: 600 }}>
             {formatAmount(invoice.subtotal, invoice.paymentCurrency.decimal)}
@@ -78,25 +103,39 @@ export default function InvoiceTable({ invoice, simple }: Props) {
         </TableRow>
         <TableRow sx={{ borderBottom: '1px solid #eee' }}>
           <TableCell colSpan={3} align="right" sx={{ fontWeight: 600 }}>
-            Total
+            {t('common.total')}
           </TableCell>
           <TableCell align="right" sx={{ fontWeight: 600 }}>
             {formatAmount(invoice.total, invoice.paymentCurrency.decimal)}
           </TableCell>
           <TableCell>&nbsp;</TableCell>
         </TableRow>
-        <TableRow>
-          <TableCell colSpan={3} align="right" sx={{ fontWeight: 600, color: 'text.secondary' }}>
-            Amount Paid
-          </TableCell>
-          <TableCell align="right" sx={{ fontWeight: 600 }}>
-            -{formatAmount(invoice.amount_paid, invoice.paymentCurrency.decimal)}
-          </TableCell>
-          <TableCell>&nbsp;</TableCell>
-        </TableRow>
+        {invoice.amount_paid !== '0' && (
+          <TableRow>
+            <TableCell colSpan={3} align="right" sx={{ fontWeight: 600, color: 'text.secondary' }}>
+              {t('customer.invoice.amountPaid')}
+            </TableCell>
+            <TableCell align="right" sx={{ fontWeight: 600 }}>
+              {invoice.amount_paid === '0' ? '' : '-'}
+              {formatAmount(invoice.amount_paid, invoice.paymentCurrency.decimal)}
+            </TableCell>
+            <TableCell>&nbsp;</TableCell>
+          </TableRow>
+        )}
+        {appliedBalance !== '0' && (
+          <TableRow>
+            <TableCell colSpan={3} align="right" sx={{ fontWeight: 600, color: 'text.secondary' }}>
+              {t('customer.invoice.amountApplied')}
+            </TableCell>
+            <TableCell align="right" sx={{ fontWeight: 600 }}>
+              {formatAmount(appliedBalance, invoice.paymentCurrency.decimal)}
+            </TableCell>
+            <TableCell>&nbsp;</TableCell>
+          </TableRow>
+        )}
         <TableRow>
           <TableCell colSpan={3} align="right" sx={{ fontWeight: 600 }}>
-            Amount Due
+            {t('customer.invoice.amountDue')}
           </TableCell>
           <TableCell align="right" sx={{ fontWeight: 600 }}>
             {formatAmount(invoice.amount_remaining, invoice.paymentCurrency.decimal)}