payment-kit 1.13.249 → 1.13.251

package/api/src/integrations/ethereum/token.ts

@@ -1,11 +1,8 @@
 import { JsonRpcProvider, TransactionReceipt, ethers } from 'ethers';
 
 import { ethWallet } from '../../libs/auth';
-import logger from '../../libs/logger';
-import type { PaymentMethod } from '../../store/models/payment-method';
 import { getApproveFunction } from './contract';
 import erc20Abi from './erc20-abi.json';
-import { waitForEvmTxReceipt } from './tx';
 
 export async function fetchErc20Meta(provider: JsonRpcProvider, contractAddress: string) {
   const contract = new ethers.Contract(contractAddress, erc20Abi, provider);
@@ -125,27 +122,3 @@ export async function sendErc20ToUser(
   const receipt = await res.wait();
   return receipt;
 }
-
-export async function executeEvmTransaction(
-  type: string,
-  userDid: string,
-  claims: any[],
-  paymentMethod: PaymentMethod
-) {
-  const client = paymentMethod.getEvmClient();
-  const claim = claims.find((x) => x.type === 'signature');
-  logger.info('executeEvmTransaction', { type, userDid, claim });
-  const receipt = await waitForEvmTxReceipt(client, claim.hash);
-  if (!receipt.status) {
-    throw new Error(`EVM Transaction failed: ${claim.hash}`);
-  }
-
-  return {
-    type,
-    tx_hash: claim.hash,
-    payer: userDid,
-    block_height: receipt.blockNumber.toString(),
-    gas_used: receipt.gasUsed.toString(),
-    gas_price: receipt.gasPrice.toString(),
-  };
-}

package/api/src/integrations/ethereum/tx.ts

@@ -2,6 +2,8 @@ import type { JsonRpcProvider, TransactionReceipt, TransactionResponse } from 'e
 import waitFor from 'p-wait-for';
 
 import logger from '../../libs/logger';
+import { broadcast } from '../../libs/ws';
+import type { PaymentMethod } from '../../store/models/payment-method';
 
 export async function waitForEvmTxReceipt(provider: JsonRpcProvider, txHash: string) {
   let mined: TransactionResponse;
@@ -41,3 +43,38 @@ export async function waitForEvmTxConfirm(provider: JsonRpcProvider, height: num
     { interval: 3000, timeout: 30 * 60 * 1000 }
   );
 }
+
+export async function executeEvmTransaction(
+  type: string,
+  userDid: string,
+  claims: any[],
+  paymentMethod: PaymentMethod
+) {
+  const client = paymentMethod.getEvmClient();
+  const claim = claims.find((x) => x.type === 'signature');
+  logger.info('executeEvmTransaction', { type, userDid, claim });
+  const receipt = await waitForEvmTxReceipt(client, claim.hash);
+  if (!receipt.status) {
+    throw new Error(`EVM Transaction failed: ${claim.hash}`);
+  }
+
+  return {
+    type,
+    tx_hash: claim.hash,
+    payer: userDid,
+    block_height: receipt.blockNumber.toString(),
+    gas_used: receipt.gasUsed.toString(),
+    gas_price: receipt.gasPrice.toString(),
+  };
+}
+
+export function broadcastEvmTransaction(checkoutSessionId: string, status: string, claims: any[]) {
+  const claim = claims.find((x) => x.type === 'signature');
+  if (claim?.hash) {
+    broadcast('checkout.session.evm_transaction', {
+      id: checkoutSessionId,
+      txHash: claim.hash,
+      status,
+    });
+  }
+}

package/api/src/libs/notification/template/subscription-will-renew.ts

@@ -4,10 +4,11 @@ import { fromUnitToToken } from '@ocap/util';
 import type { ManipulateType } from 'dayjs';
 import dayjs from 'dayjs';
 import prettyMsI18n from 'pretty-ms-i18n';
+import type { LiteralUnion } from 'type-fest';
 
 import { getUserLocale } from '../../../integrations/blocklet/notification';
 import { translate } from '../../../locales';
-import { Customer, Invoice, PaymentMethod, Subscription } from '../../../store/models';
+import { Customer, Invoice, PaymentMethod, Price, Subscription, SubscriptionItem } from '../../../store/models';
 import { PaymentCurrency } from '../../../store/models/payment-currency';
 import { PaymentDetail, getPaymentDetail } from '../../payment';
 import { getMainProductName } from '../../product';
@@ -29,6 +30,7 @@ interface SubscriptionWillRenewEmailTemplateContext {
   at: string;
   willRenewDuration: string;
   paymentDetail: PaymentDetail;
+  paidType: string;
 
   userDid: string;
   paymentInfo: string;
@@ -37,7 +39,7 @@ interface SubscriptionWillRenewEmailTemplateContext {
   duration: string;
 
   viewSubscriptionLink: string;
-  immediateRechargeLink: string;
+  addFundsLink: string;
 }
 
 export class SubscriptionWillRenewEmailTemplate
@@ -83,14 +85,23 @@ export class SubscriptionWillRenewEmailTemplate
     const willRenewDuration: string =
       locale === 'en' ? this.getWillRenewDuration(locale) : this.getWillRenewDuration(locale).split(' ').join('');
 
-    const paymentDetail: PaymentDetail = await getPaymentDetail(userDid, invoice);
     const upcomingInvoiceAmount = await getUpcomingInvoiceAmount(subscription.id);
-    const paymentInfo: string = `${fromUnitToToken(
-      +upcomingInvoiceAmount.amount,
-      upcomingInvoiceAmount.currency?.decimal
-    )} ${paymentCurrency.symbol}`;
-    const currentPeriodStart: string = formatTime(invoice.period_start * 1000);
-    const currentPeriodEnd: string = formatTime(invoice.period_end * 1000);
+    const paymentDetail: PaymentDetail = await getPaymentDetail(userDid, invoice);
+    paymentDetail.price = +fromUnitToToken(+upcomingInvoiceAmount.amount, upcomingInvoiceAmount.currency?.decimal);
+
+    const { isPrePaid, interval } = await this.getPaymentCategory({
+      subscriptionId: subscription.id,
+    });
+    const paidType: string = isPrePaid
+      ? translate('notification.common.prepaid', locale)
+      : translate('notification.common.postpaid', locale);
+    const paymentInfo: string = `${paymentDetail.price} ${paymentCurrency.symbol}`;
+    const currentPeriodStart: string = isPrePaid
+      ? formatTime(invoice.period_end * 1000)
+      : formatTime(invoice.period_start * 1000);
+    const currentPeriodEnd: string = isPrePaid
+      ? formatTime(dayjs(invoice.period_end * 1000).add(1, interval as ManipulateType))
+      : formatTime(invoice.period_end * 1000);
     const duration: string = prettyMsI18n(
       new Date(currentPeriodEnd).getTime() - new Date(currentPeriodStart).getTime(),
       {
@@ -106,7 +117,7 @@ export class SubscriptionWillRenewEmailTemplate
     const paymentMethod: PaymentMethod | null = await PaymentMethod.findByPk(paymentCurrency.payment_method_id);
     // @ts-ignore
     const chainHost: string | undefined = paymentMethod?.settings?.[paymentMethod.type]?.api_host;
-    const immediateRechargeLink: string = getExplorerLink({
+    const addFundsLink: string = getExplorerLink({
       type: 'account',
       did: userDid,
       chainHost,
@@ -121,6 +132,7 @@ export class SubscriptionWillRenewEmailTemplate
       at,
       willRenewDuration,
       paymentDetail,
+      paidType,
 
       userDid,
       paymentInfo,
@@ -129,7 +141,28 @@ export class SubscriptionWillRenewEmailTemplate
       duration,
 
       viewSubscriptionLink,
-      immediateRechargeLink,
+      addFundsLink,
+    };
+  }
+  async getPaymentCategory({ subscriptionId }: { subscriptionId: string }): Promise<{
+    isPrePaid: boolean;
+    interval: LiteralUnion<'hour' | 'day' | 'week' | 'month' | 'year', string> | undefined;
+  }> {
+    const subscriptionItems = await SubscriptionItem.findAll({
+      where: {
+        subscription_id: subscriptionId,
+      },
+    });
+
+    const lineItemExpanded = await Price.expand(subscriptionItems);
+    const metered = lineItemExpanded.find((lineItem) => lineItem.price.recurring?.usage_type === 'metered');
+
+    const isPrePaid = !metered;
+    const interval = metered?.price.recurring?.interval;
+
+    return {
+      isPrePaid,
+      interval,
     };
   }
 
@@ -184,12 +217,16 @@ export class SubscriptionWillRenewEmailTemplate
       at,
       willRenewDuration,
       paymentDetail,
+      paidType,
 
       userDid,
       paymentInfo,
+      currentPeriodStart,
+      currentPeriodEnd,
+      duration,
 
       viewSubscriptionLink,
-      immediateRechargeLink,
+      addFundsLink,
     } = await this.getContext();
 
     const canPay: boolean = paymentDetail.balance >= paymentDetail.price;
@@ -197,6 +234,10 @@ export class SubscriptionWillRenewEmailTemplate
       // 当余额足够支付并且本封邮件不是必须发送时,可以不发送邮件
       return null;
     }
+    if (!paymentDetail.price && paymentDetail.symbol !== 'USD') {
+      // 如果预估的价格是 0 并且货币不是 USD，那么直接不发送
+      return null;
+    }
 
     const template: BaseEmailTemplateType = {
       title: `${translate('notification.subscriptionWillRenew.title', locale, {
@@ -214,8 +255,14 @@ export class SubscriptionWillRenewEmailTemplate
             at,
             productName,
             willRenewDuration,
-            balance: `${paymentDetail.balance} ${paymentDetail.symbol}`,
-            price: `${paymentDetail.price} ${paymentDetail.symbol}`,
+            reason: `<span style="color: red;">${translate(
+              'notification.subscriptionWillRenew.unableToPayReason',
+              locale,
+              {
+                balance: `${paymentDetail.balance} ${paymentDetail.symbol}`,
+                price: `${paymentDetail.price} ${paymentDetail.symbol}`,
+              }
+            )}</span>`,
           })}`,
       // @ts-expect-error
       attachments: [
@@ -252,6 +299,21 @@ export class SubscriptionWillRenewEmailTemplate
                 text: productName,
               },
             },
+            {
+              type: 'text',
+              data: {
+                type: 'plain',
+                color: '#9397A1',
+                text: translate('notification.subscriptionWillRenew.renewAmount', locale),
+              },
+            },
+            {
+              type: 'text',
+              data: {
+                type: 'plain',
+                text: paymentInfo,
+              },
+            },
             {
               type: 'text',
               data: {
@@ -264,6 +326,9 @@ export class SubscriptionWillRenewEmailTemplate
               type: 'text',
               data: {
                 type: 'plain',
+                ...(!canPay && {
+                  color: 'red',
+                }),
                 text: `${paymentDetail.balance} ${paymentDetail.symbol}`,
               },
             },
@@ -272,14 +337,29 @@ export class SubscriptionWillRenewEmailTemplate
               data: {
                 type: 'plain',
                 color: '#9397A1',
-                text: translate('notification.subscriptionWillRenew.renewAmount', locale),
+                text: translate('notification.common.paidType', locale),
               },
             },
             {
               type: 'text',
               data: {
                 type: 'plain',
-                text: paymentInfo,
+                text: `${paidType}`,
+              },
+            },
+            {
+              type: 'text',
+              data: {
+                type: 'plain',
+                color: '#9397A1',
+                text: translate('notification.common.paymentPeriod', locale),
+              },
+            },
+            {
+              type: 'text',
+              data: {
+                type: 'plain',
+                text: `${currentPeriodStart} ~ ${currentPeriodEnd}(${duration})`,
               },
             },
           ].filter(Boolean),
@@ -288,9 +368,9 @@ export class SubscriptionWillRenewEmailTemplate
       // @ts-ignore
       actions: [
         !canPay && {
-          name: translate('notification.common.immediateRecharge', locale),
-          title: translate('notification.common.immediateRecharge', locale),
-          link: immediateRechargeLink,
+          name: translate('notification.common.addFunds', locale),
+          title: translate('notification.common.addFunds', locale),
+          link: addFundsLink,
         },
         {
           name: translate('notification.common.viewSubscription', locale),

package/api/src/libs/payment.ts

@@ -172,7 +172,7 @@ export function getGasPayerExtra(txBuffer: Buffer, headers?: { [key: string]: st
 export interface PaymentDetail {
   balance: number;
   price: number;
-  symbol: string;
+  symbol: LiteralUnion<'ABT' | 'USD', string>;
 }
 export async function getPaymentDetail(userDid: string, invoice: Invoice): Promise<PaymentDetail> {
   const defaultResult = {

package/api/src/libs/ws.ts

@@ -3,23 +3,23 @@ import { sendToRelay } from '@blocklet/sdk/service/notification';
 import type { CheckoutSession, Invoice, PaymentIntent } from '../store/models';
 import { events } from './event';
 
-export function broadcast(channel: string, eventName: string, data: any) {
-  sendToRelay(channel, eventName, data).catch((err: any) => {
-    console.error(`Failed to broadcast info: ${channel}.${eventName}`, err);
+export function broadcast(eventName: string, data: any) {
+  sendToRelay('events', eventName, data).catch((err: any) => {
+    console.error(`Failed to broadcast event: ${eventName}`, err);
   });
 }
 
 export function initEventBroadcast() {
   events.on('payment_intent.succeeded', (data: PaymentIntent) => {
-    broadcast('events', 'payment_intent.succeeded', data);
+    broadcast('payment_intent.succeeded', data);
   });
   events.on('checkout.session.completed', (data: CheckoutSession) => {
-    broadcast('events', 'checkout.session.completed', data);
+    broadcast('checkout.session.completed', data);
   });
   events.on('checkout.session.nft_minted', (data: CheckoutSession) => {
-    broadcast('events', 'checkout.session.nft_minted', data);
+    broadcast('checkout.session.nft_minted', data);
   });
   events.on('invoice.paid', (data: Invoice) => {
-    broadcast('events', 'invoice.paid', data);
+    broadcast('invoice.paid', data);
   });
 }

package/api/src/locales/en.ts

@@ -9,6 +9,7 @@ export default flat({
       refundAmount: 'Refund amount',
       refundPeriod: 'Refund period',
       validityPeriod: 'Service period',
+      paymentPeriod: 'Payment period',
       trialPeriod: 'Trial period',
       viewSubscription: 'View subscription',
       viewInvoice: 'View invoice',
@@ -25,11 +26,14 @@ export default flat({
       minutes: 'minutes',
       cancellationReason: 'Cancellation reason',
       renewNow: 'Pay now',
-      immediateRecharge: 'Immediate recharge',
+      addFunds: 'Add funds',
       amount: 'Amount',
       rewardAmount: 'Reward amount',
       rewardDetail: 'Reward detail',
       currentBalance: 'Current balance',
+      prepaid: 'Prepaid',
+      postpaid: 'Postpaid',
+      paidType: 'Paid type',
     },
 
     sendTo: 'Sent to',
@@ -69,8 +73,10 @@ export default flat({
       title: '{productName} automatic payment reminder',
       body: 'Your subscription to {productName} is scheduled for automatic payment on {at}({willRenewDuration} later). If you have any questions or need assistance, please feel free to contact us.',
       unableToPayBody:
-        'Your subscription to {productName} is scheduled for automatic payment on {at}({willRenewDuration} later). <span style="color: red;">Your current balance is {balance}, which is less than {price}, please ensure that your account has enough balance to avoid payment failure.</span> If you have any questions or need assistance, please feel free to contact us.',
-      renewAmount: 'Payment Amount',
+        'Your subscription to {productName} is scheduled for automatic payment on {at}({willRenewDuration} later). If you have any questions or need assistance, please feel free to contact us.\r\n{reason}',
+      unableToPayReason:
+        'The estimated payment amount is {price}, but the current balance is insufficient ({balance}), please ensure that your account has enough balance to avoid payment failure.',
+      renewAmount: 'Payment amount',
     },
 
     subscriptionRenewed: {

package/api/src/locales/zh.ts

@@ -9,6 +9,7 @@ export default flat({
       refundAmount: '退款金额',
       refundPeriod: '退款周期',
       validityPeriod: '服务周期',
+      paymentPeriod: '扣款周期',
       trialPeriod: '试用期',
       viewSubscription: '查看订阅',
       viewInvoice: '查看账单',
@@ -25,11 +26,14 @@ export default flat({
       minutes: '分钟',
       cancellationReason: '取消原因',
       renewNow: '立即付款',
-      immediateRecharge: '立即充值',
+      addFunds: '立即充值',
       amount: '金额',
       rewardAmount: '打赏金额',
       rewardDetail: '打赏详情',
       currentBalance: '当前余额',
+      prepaid: '预付费',
+      postpaid: '后付费',
+      paidType: '付费类型',
     },
 
     sendTo: '发送给',
@@ -69,7 +73,9 @@ export default flat({
       title: '{productName} 自动扣费提醒',
       body: '您订阅的 {productName} 将在 {at}({willRenewDuration}后) 发起自动扣费。若有任何疑问或需要帮助，请随时与我们联系。',
       unableToPayBody:
-        '您订阅的 {productName} 将在 {at}({willRenewDuration}后) 发起自动扣费。<span style="color: red;">您的当前余额为 {balance}，不足 {price}</span>，请确保您的账户余额充足，避免扣费失败。若有任何疑问或需要帮助，请随时与我们联系。',
+        '您订阅的 {productName} 将在 {at}({willRenewDuration}后) 发起自动扣费，若有任何疑问或者需要帮助，请随时与我们联系。\r\n{reason}',
+      unableToPayReason:
+        '预计扣款金额为 {price}，但当前余额不足(余额为 {balance})，请确保您的账户余额充足，避免扣费失败。',
       renewAmount: '扣费金额',
     },
 

package/api/src/routes/checkout-sessions.ts

@@ -1107,6 +1107,7 @@ const schema = Joi.object<{
   customer_id?: string;
   customer_did?: string;
   payment_intent_id?: string;
+  payment_link_id?: string;
   subscription_id?: string;
   livemode?: boolean;
 }>({
@@ -1118,6 +1119,7 @@ const schema = Joi.object<{
   customer_id: Joi.string().empty(''),
   customer_did: Joi.string().empty(''),
   payment_intent_id: Joi.string().empty(''),
+  payment_link_id: Joi.string().empty(''),
   subscription_id: Joi.string().empty(''),
   livemode: Joi.boolean().empty(''),
 });
@@ -1141,6 +1143,9 @@ router.get('/', auth, async (req, res) => {
   if (query.payment_intent_id) {
     where.payment_intent_id = query.payment_intent_id;
   }
+  if (query.payment_link_id) {
+    where.payment_link_id = query.payment_link_id;
+  }
   if (query.subscription_id) {
     where.subscription_id = query.subscription_id;
   }
@@ -1191,4 +1196,20 @@ router.get('/', auth, async (req, res) => {
   }
 });
 
+router.put('/:id', auth, async (req, res) => {
+  const doc = await CheckoutSession.findByPk(req.params.id);
+
+  if (!doc) {
+    return res.status(404).json({ error: 'CheckoutSession not found' });
+  }
+
+  const raw = pick(req.body, ['metadata']);
+  if (raw.metadata) {
+    raw.metadata = formatMetadata(raw.metadata);
+  }
+
+  await doc.update(raw);
+  res.json(doc);
+});
+
 export default router;

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

@@ -1,5 +1,4 @@
-import { executeEvmTransaction } from '../../integrations/ethereum/token';
-import { waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
+import { executeEvmTransaction, waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
 import type { CallbackArgs } from '../../libs/auth';
 import { isDelegationSufficientForPayment } from '../../libs/payment';
 import { getFastCheckoutAmount } from '../../libs/session';

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

@@ -1,5 +1,4 @@
-import { executeEvmTransaction } from '../../integrations/ethereum/token';
-import { waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
+import { executeEvmTransaction, waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
 import type { CallbackArgs } from '../../libs/auth';
 import { isDelegationSufficientForPayment } from '../../libs/payment';
 import { getFastCheckoutAmount } from '../../libs/session';

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

@@ -2,8 +2,8 @@ import type { Transaction, TransferV3Tx } from '@ocap/client';
 import { toBase58 } from '@ocap/util';
 import { fromAddress } from '@ocap/wallet';
 
-import { encodeTransferItx, executeEvmTransaction } from '../../integrations/ethereum/token';
-import { waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
+import { encodeTransferItx } from '../../integrations/ethereum/token';
+import { executeEvmTransaction, waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
 import { CallbackArgs, ethWallet } from '../../libs/auth';
 import logger from '../../libs/logger';
 import { getGasPayerExtra } from '../../libs/payment';

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

@@ -1,5 +1,4 @@
-import { executeEvmTransaction } from '../../integrations/ethereum/token';
-import { waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
+import { broadcastEvmTransaction, executeEvmTransaction, waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
 import type { CallbackArgs } from '../../libs/auth';
 import dayjs from '../../libs/dayjs';
 import logger from '../../libs/logger';
@@ -182,10 +181,12 @@ export default {
 
     if (paymentMethod.type === 'ethereum') {
       await prepareTxExecution();
+      broadcastEvmTransaction(checkoutSessionId, 'pending', claims);
       const paymentDetails = await executeEvmTransaction('approve', userDid, claims, paymentMethod);
       waitForEvmTxConfirm(paymentMethod.getEvmClient(), +paymentDetails.block_height, paymentMethod.confirmation.block)
         .then(async () => {
           await afterTxExecution(paymentDetails);
+          broadcastEvmTransaction(checkoutSessionId, 'confirmed', claims);
         })
         .catch(console.error);
 

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

@@ -1,5 +1,4 @@
-import { executeEvmTransaction } from '../../integrations/ethereum/token';
-import { waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
+import { broadcastEvmTransaction, executeEvmTransaction, waitForEvmTxConfirm } from '../../integrations/ethereum/tx';
 import type { CallbackArgs } from '../../libs/auth';
 import dayjs from '../../libs/dayjs';
 import logger from '../../libs/logger';
@@ -165,6 +164,7 @@ export default {
     if (paymentMethod.type === 'ethereum') {
       await prepareTxExecution();
       const { invoice } = await ensureInvoiceForCheckout({ checkoutSession, customer, subscription });
+      broadcastEvmTransaction(checkoutSessionId, 'pending', claims);
 
       const paymentDetails = await executeEvmTransaction('approve', userDid, claims, paymentMethod);
       waitForEvmTxConfirm(
@@ -174,6 +174,7 @@ export default {
       )
         .then(async () => {
           await afterTxExecution(invoice!, paymentDetails);
+          broadcastEvmTransaction(checkoutSessionId, 'confirmed', claims);
         })
         .catch(console.error);
 

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.249",
+  "version": "1.13.251",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -51,7 +51,7 @@
     "@arcblock/ux": "^2.9.77",
     "@arcblock/validator": "^1.18.116",
     "@blocklet/logger": "1.16.26",
-    "@blocklet/payment-react": "1.13.249",
+    "@blocklet/payment-react": "1.13.251",
     "@blocklet/sdk": "1.16.26",
     "@blocklet/ui-react": "^2.9.77",
     "@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.249",
+    "@blocklet/payment-types": "1.13.251",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -155,5 +155,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "8d7617c2a9cb318f4e161163f44de29abf99c150"
+  "gitHead": "46caad7baca15f2ba3876018589f78ba11179f59"
 }

package/src/components/product/form.tsx

@@ -25,8 +25,13 @@ export default function ProductForm(props: Props) {
   const images = useWatch({ control, name: 'images' });
 
   const onUploaded = (result: any) => {
-    const tmp = new URL(result.url);
-    setValue('images', [tmp.pathname]);
+    console.warn('onUploaded', result);
+    if (result.url) {
+      const tmp = new URL(result.url);
+      setValue('images', [tmp.pathname]);
+    } else {
+      setValue('images', []);
+    }
   };
 
   return (

package/src/components/subscription/metrics.tsx

@@ -38,7 +38,7 @@ export default function SubscriptionMetrics({ subscription }: Props) {
           divider
         />
       )}
-      {upcoming && upcoming.amount !== '0' && (
+      {upcoming?.amount && upcoming.amount !== '0' && (
         <InfoMetric
           label={t('admin.subscription.nextInvoiceAmount')}
           value={`${formatBNStr(upcoming.amount, subscription.paymentCurrency.decimal)} ${

package/src/components/uploader.tsx

@@ -1,4 +1,4 @@
-import { UploadFileOutlined } from '@mui/icons-material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Box, Button, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { lazy, useCallback, useEffect, useRef } from 'react';
@@ -14,12 +14,17 @@ type Props = {
 };
 
 export default function Uploader({ onUploaded, preview, maxFileSize, maxNumberOfFiles, allowedFileExts }: Props) {
+  const { t } = useLocaleContext();
   const uploaderRef = useRef<any>(null);
   const handleOpen = useCallback(() => {
     if (!uploaderRef.current) return;
     uploaderRef.current.open();
   }, []);
 
+  const handleRemove = () => {
+    onUploaded({ url: '' });
+  };
+
   useEffect(() => {
     if (uploaderRef.current) {
       const uploader = uploaderRef.current.getUploader();
@@ -33,17 +38,20 @@ export default function Uploader({ onUploaded, preview, maxFileSize, maxNumberOf
         display="flex"
         alignItems={preview ? 'flex-end' : 'center'}
         justifyContent="center"
-        onClick={handleOpen}
         style={{
           backgroundImage: preview ? `url(${preview})` : 'none',
           backgroundRepeat: 'no-repeat',
           backgroundSize: 'contain',
           backgroundPosition: 'center',
         }}>
-        <Button fullWidth variant={preview ? 'contained' : 'text'} color="inherit" size="small">
-          <UploadFileOutlined sx={{ mr: 1 }} fontSize="small" />
-          <Typography>{preview ? 'Change' : 'Upload'}</Typography>
+        <Button variant={preview ? 'contained' : 'text'} color="inherit" size="small" onClick={handleOpen}>
+          <Typography>{t(`common.${preview ? 'change' : 'upload'}`)}</Typography>
         </Button>
+        {preview && (
+          <Button variant="contained" color="error" size="small" onClick={handleRemove}>
+            <Typography>{t('common.remove')}</Typography>
+          </Button>
+        )}
       </Div>
       <UploaderComponent
         // @ts-ignore

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

@@ -1,7 +1,16 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { Status, TxGas, TxLink, api, formatError, formatTime, getInvoiceStatusColor } from '@blocklet/payment-react';
+import {
+  Status,
+  TxGas,
+  TxLink,
+  api,
+  formatError,
+  formatTime,
+  getInvoiceStatusColor,
+  usePaymentContext,
+} from '@blocklet/payment-react';
 import type { TInvoiceExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
@@ -16,7 +25,6 @@ import InfoRow from '../../../components/info-row';
 import { Download } from '../../../components/invoice-pdf/pdf';
 import InvoiceTable from '../../../components/invoice/table';
 import SectionHeader from '../../../components/section/header';
-import { useSessionContext } from '../../../contexts/session';
 import { goBackOrFallback } from '../../../libs/util';
 import CustomerRefundList from '../refund/list';
 
@@ -27,7 +35,7 @@ const fetchData = (id: string): Promise<TInvoiceExpanded> => {
 export default function CustomerInvoiceDetail() {
   const { t } = useLocaleContext();
   const [searchParams] = useSearchParams();
-  const { connectApi } = useSessionContext();
+  const { connect } = usePaymentContext();
   const params = useParams<{ id: string }>();
   const [state, setState] = useSetState({
     downloading: false,
@@ -39,8 +47,9 @@ export default function CustomerInvoiceDetail() {
 
   const onPay = () => {
     setState({ paying: true });
-    connectApi.open({
+    connect.open({
       action: 'collect',
+      saveConnect: false,
       messages: {
         scan: '',
         title: t(`payment.customer.invoice.${action || 'pay'}`),
@@ -50,11 +59,11 @@ export default function CustomerInvoiceDetail() {
       } as any,
       extraParams: { invoiceId: params.id, action },
       onSuccess: async () => {
-        connectApi.close();
+        connect.close();
         await runAsync();
       },
       onClose: () => {
-        connectApi.close();
+        connect.close();
         setState({ paying: false });
       },
       onError: (err: any) => {
@@ -66,7 +75,7 @@ export default function CustomerInvoiceDetail() {
 
   const closePay = () => {
     setState({ paying: true });
-    connectApi.close();
+    connect.close();
   };
 
   useEffect(() => {

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

@@ -1,7 +1,15 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { PricingTable, api, formatBNStr, formatError, formatPrice, formatTime } from '@blocklet/payment-react';
+import {
+  PricingTable,
+  api,
+  formatBNStr,
+  formatError,
+  formatPrice,
+  formatTime,
+  usePaymentContext,
+} from '@blocklet/payment-react';
 import type { TLineItemExpanded, TPricingTableExpanded, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { LoadingButton } from '@mui/lab';
@@ -12,7 +20,6 @@ import { useNavigate, useParams } from 'react-router-dom';
 import InfoCard from '../../../components/info-card';
 import SectionHeader from '../../../components/section/header';
 import SubscriptionDescription from '../../../components/subscription/description';
-import { useSessionContext } from '../../../contexts/session';
 import { goBackOrFallback } from '../../../libs/util';
 
 const fetchData = async (
@@ -45,7 +52,7 @@ export default function CustomerSubscriptionChangePlan() {
   const navigate = useNavigate();
   const { id } = useParams() as { id: string };
   const { t, locale } = useLocaleContext();
-  const { connectApi } = useSessionContext();
+  const { connect } = usePaymentContext();
 
   const { loading, error, data } = useRequest(() => fetchData(id));
   const [state, setState] = useSetState({
@@ -142,7 +149,7 @@ export default function CustomerSubscriptionChangePlan() {
         setState({ paying: true });
         try {
           setState({ paying: true });
-          connectApi.open({
+          connect.open({
             action: result.data.connectAction,
             saveConnect: false,
             messages: {
@@ -156,12 +163,12 @@ export default function CustomerSubscriptionChangePlan() {
             onSuccess: () => {
               setState({ paid: true, paying: false });
               setTimeout(() => {
-                connectApi.close();
+                connect.close();
                 handleBack();
               }, 2000);
             },
             onClose: () => {
-              connectApi.close();
+              connect.close();
               setState({ paying: false });
             },
             onError: (err: any) => {