payment-kit 1.16.7 → 1.16.9

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

@@ -20,7 +20,7 @@ import {
 } from '../../../store/models';
 import { getPaymentAmountForCycleSubscription, type PaymentDetail } from '../../payment';
 import { getMainProductName } from '../../product';
-import { getCustomerSubscriptionPageUrl } from '../../subscription';
+import { getCustomerSubscriptionPageUrl, getSubscriptionPaymentAddress } from '../../subscription';
 import { formatTime, getPrettyMsI18nLocale, getSimplifyDuration } from '../../time';
 import { getCustomerRechargeLink, getSubscriptionNotificationCustomActions } from '../../util';
 import type { BaseEmailTemplate, BaseEmailTemplateType } from './base';
@@ -101,8 +101,8 @@ export class SubscriptionWillRenewEmailTemplate
     if (!paymentMethod) {
       throw new Error(`Payment method not found: ${paymentCurrency.payment_method_id}`);
     }
-    // @ts-ignore
-    const paymentAddress = subscription.payment_details?.[paymentMethod.type]?.payer ?? undefined;
+
+    const paymentAddress = getSubscriptionPaymentAddress(subscription, paymentMethod.type);
     const balance = await getTokenByAddress(paymentAddress, paymentMethod, paymentCurrency);
     paymentDetail.balanceFormatted = fromUnitToToken(balance, paymentCurrency.decimal);
     paymentDetail.balance = +paymentDetail.balanceFormatted;

package/api/src/libs/subscription.ts

@@ -1024,3 +1024,12 @@ export async function checkUsageReportEmpty(
   );
   return usageReportEmpty.every(Boolean);
 }
+
+export function getSubscriptionPaymentAddress(subscription: Subscription, paymentMethodType: string) {
+  return (
+    // @ts-ignore
+    subscription.payment_details?.[paymentMethodType]?.payer ||
+    // @ts-ignore
+    subscription.payment_settings?.payment_method_options?.[paymentMethodType]?.payer
+  );
+}

package/api/src/queues/subscription.ts

@@ -16,6 +16,7 @@ import {
   checkUsageReportEmpty,
   getSubscriptionCycleAmount,
   getSubscriptionCycleSetup,
+  getSubscriptionPaymentAddress,
   getSubscriptionRefundSetup,
   getSubscriptionStakeAddress,
   getSubscriptionStakeReturnSetup,
@@ -456,7 +457,7 @@ const handleStakeSlashAfterCancel = async (subscription: Subscription) => {
     payment_details: {
       arcblock: {
         tx_hash: txHash,
-        payer: subscription.payment_details?.arcblock?.payer as string,
+        payer: getSubscriptionPaymentAddress(subscription, 'arcblock'),
         type: 'slash',
       },
     },

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

@@ -19,6 +19,7 @@ import {
   expandSubscriptionItems,
   getSubscriptionCreateSetup,
   getSubscriptionItemPrice,
+  getSubscriptionPaymentAddress,
   getSubscriptionStakeSetup,
 } from '../../libs/subscription';
 import { getCustomerStakeAddress, OCAP_PAYMENT_TX_TYPE } from '../../libs/util';
@@ -620,7 +621,7 @@ export async function ensureSubscriptionRecharge(subscriptionId: string) {
     throw new Error(`Payment method ${paymentCurrency.payment_method_id} not found`);
   }
   // @ts-ignore
-  const receiverAddress = subscription?.payment_details?.[paymentMethod.type]?.payer;
+  const receiverAddress = getSubscriptionPaymentAddress(subscription, paymentMethod.type);
   if (!receiverAddress) {
     throw new Error(`Receiver address not found for subscription ${subscriptionId}`);
   }

package/api/src/routes/customers.ts

@@ -86,24 +86,25 @@ router.get('/me', sessionMiddleware(), async (req, res) => {
 
   try {
     const doc = await Customer.findByPkOrDid(req.user.did as string);
+    const livemode = req.query.livemode ? !!req?.livemode : !!doc?.livemode;
     if (!doc) {
       if (req.query.fallback) {
         const result = await blocklet.getUser(req.user.did);
-        res.json({ ...result.user, address: {} });
+        res.json({ ...result.user, address: {}, livemode });
       } else {
         res.json({ error: 'Customer not found' });
       }
     } else {
       const [summary, stake, token] = await Promise.all([
         doc.getSummary(),
-        getStakeSummaryByDid(doc.did, req?.livemode || doc.livemode),
-        getTokenSummaryByDid(doc.did, req?.livemode || doc.livemode),
+        getStakeSummaryByDid(doc.did, livemode),
+        getTokenSummaryByDid(doc.did, livemode),
       ]);
-      res.json({ ...doc.toJSON(), summary: { ...summary, stake, token } });
+      res.json({ ...doc.toJSON(), summary: { ...summary, stake, token }, livemode });
     }
   } catch (err) {
-    console.error(err);
-    res.json(null);
+    console.error('get customer failed', err);
+    res.status(500).json({ error: `Failed to get customer: ${err.message}` });
   }
 });
 

package/api/src/routes/subscriptions.ts

@@ -25,6 +25,7 @@ import {
   createProration,
   finalizeSubscriptionUpdate,
   getSubscriptionCreateSetup,
+  getSubscriptionPaymentAddress,
   getSubscriptionRefundSetup,
   getSubscriptionStakeReturnSetup,
   getSubscriptionStakeSlashSetup,
@@ -1809,7 +1810,7 @@ router.get('/:id/payer-token', authMine, async (req, res) => {
   }
 
   // @ts-ignore
-  const paymentAddress = subscription.payment_details?.[paymentMethod.type]?.payer ?? undefined;
+  const paymentAddress = getSubscriptionPaymentAddress(subscription, paymentMethod.type);
   if (!paymentAddress && ['ethereum', 'arcblock'].includes(paymentMethod.type)) {
     return res.status(400).json({ error: `Payer not found on subscription payment detail: ${subscription.id}` });
   }

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.16.7",
+  "version": "1.16.9",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -53,7 +53,7 @@
     "@arcblock/validator": "^1.18.150",
     "@blocklet/js-sdk": "1.16.33-beta-20241031-073543-49b1ff9b",
     "@blocklet/logger": "1.16.33-beta-20241031-073543-49b1ff9b",
-    "@blocklet/payment-react": "1.16.7",
+    "@blocklet/payment-react": "1.16.9",
     "@blocklet/sdk": "1.16.33-beta-20241031-073543-49b1ff9b",
     "@blocklet/ui-react": "^2.10.74",
     "@blocklet/uploader": "^0.1.53",
@@ -120,7 +120,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.33-beta-20241031-073543-49b1ff9b",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.16.7",
+    "@blocklet/payment-types": "1.16.9",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -166,5 +166,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "ebd2f35810953ca0a6c0c008a4c95f2296cccb38"
+  "gitHead": "4860066cb778dec9d1a28c47434e638218d4ac9d"
 }

package/src/pages/customer/index.tsx

@@ -28,7 +28,7 @@ import {
 } from '@mui/material';
 import type { SelectChangeEvent } from '@mui/material/Select';
 import { styled, SxProps } from '@mui/system';
-import { useSetState } from 'ahooks';
+import { useRequest, useSetState } from 'ahooks';
 import { flatten, isEmpty } from 'lodash';
 import { memo, useEffect, useMemo, useState } from 'react';
 import { FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
@@ -101,19 +101,14 @@ export default function CustomerHome() {
   const navigate = useNavigate();
   const { isMobile } = useMobile('lg');
   const { isPending, startTransition } = useTransitionContext();
-
-  const [data, setData] = useState<Result>();
+  const { data, error, loading, runAsync } = useRequest(fetchData, {
+    manual: true,
+  });
   const countryDetail = useMemo(() => {
     const item = defaultCountries.find((v) => v[1] === data?.address?.country);
     return item ? parseCountry(item) : { name: '' };
   }, [data]);
 
-  const runAsync = () => {
-    fetchData().then((res) => {
-      setData(res);
-    });
-  };
-
   useEffect(() => {
     runAsync();
     events.on('switch-did', () => {
@@ -127,6 +122,18 @@ export default function CustomerHome() {
     }
   }, [data]);
 
+  if (loading) {
+    return <ProgressBar pending />;
+  }
+
+  if (error) {
+    return (
+      <Alert sx={{ mt: 3 }} severity="error">
+        {formatError(error)}
+      </Alert>
+    );
+  }
+
   if (!data) {
     return null;
   }

package/src/pages/customer/recharge.tsx

@@ -77,16 +77,21 @@ export default function RechargePage() {
   const {
     paymentCurrency,
     payment_details: paymentDetails,
+    payment_settings: paymentSettings,
     paymentMethod,
   } = subscription || {
     customer: null,
     paymentCurrency: null,
     payment_details: null,
     paymentMethod: null,
+    payment_settings: null,
   };
 
-  // @ts-ignore
-  const receiveAddress = paymentDetails?.[paymentMethod?.type]?.payer;
+  const receiveAddress =
+    // @ts-ignore
+    paymentDetails?.[paymentMethod?.type]?.payer ||
+    // @ts-ignore
+    paymentSettings?.payment_method_options?.[paymentMethod?.type]?.payer;
   const fetchData = async () => {
     try {
       setLoading(true);
@@ -114,7 +119,7 @@ export default function RechargePage() {
         { amount: getCycleAmount(10), cycles: 10 },
       ]);
     } catch (err) {
-      setError(err instanceof Error ? err.message : t('common.fetchError'));
+      setError(formatError(err) || t('common.fetchError'));
       console.error(err);
     } finally {
       setLoading(false);

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

@@ -16,6 +16,7 @@ import {
   getPrefix,
   getSubscriptionStatusColor,
   useDefaultPageSize,
+  useMobile,
 } from '@blocklet/payment-react';
 import type { Paginated, TInvoiceExpanded, TSubscriptionExpanded } from '@blocklet/payment-types';
 import {
@@ -60,6 +61,7 @@ export default function SubscriptionEmbed() {
   const subscriptionId = params.get('id') || '';
   const authToken = params.get('authToken') || '';
   const defaultPageSize = useDefaultPageSize(20);
+  const { isMobile } = useMobile();
   const { data: subscription, error, loading } = useRequest(() => fetchSubscriptionData(subscriptionId, authToken));
   const { data } = useRequest(
     () =>
@@ -181,7 +183,7 @@ export default function SubscriptionEmbed() {
           width: '100%',
           height: '100%',
         }}>
-        <Typography component="h3" sx={{ textAlign: 'center' }} variant="h5" gutterBottom>
+        <Typography component="h3" sx={{ textAlign: 'center', fontWeight: 500 }} variant="h5" gutterBottom>
           {t('payment.customer.subscriptions.current')}
         </Typography>
         <Box sx={{ marginTop: '12px' }}>
@@ -212,8 +214,10 @@ export default function SubscriptionEmbed() {
                   return (
                     <ListItem key={item.id} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
                       <Typography component="div" sx={{ flex: 3, gap: 1, display: 'flex', alignItems: 'center' }}>
-                        {formatToDate(item.created_at, locale, 'YYYY-MM-DD')}
-                        <Status label={getInvoiceDescriptionAndReason(item, locale)?.type} />
+                        <Typography component="span" sx={{ whiteSpace: 'nowrap' }}>
+                          {formatToDate(item.created_at, locale, 'YYYY-MM-DD')}
+                        </Typography>
+                        {!isMobile && <Status label={getInvoiceDescriptionAndReason(item, locale)?.type} />}
                       </Typography>
                       <Typography component="span" sx={{ flex: 1, textAlign: 'right' }}>
                         {formatBNStr(item.total, item.paymentCurrency.decimal)}&nbsp;