payment-kit 1.16.19 → 1.17.1

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.16.19",
+  "version": "1.17.1",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -53,7 +53,7 @@
     "@arcblock/validator": "^1.18.165",
     "@blocklet/js-sdk": "^1.16.36",
     "@blocklet/logger": "^1.16.36",
-    "@blocklet/payment-react": "1.16.19",
+    "@blocklet/payment-react": "1.17.1",
     "@blocklet/sdk": "^1.16.36",
     "@blocklet/ui-react": "^2.11.15",
     "@blocklet/uploader": "^0.1.60",
@@ -120,7 +120,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.36",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.16.19",
+    "@blocklet/payment-types": "1.17.1",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -166,5 +166,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "a033985b46d5c80b56f2ed9dc86d808fb60d9db1"
+  "gitHead": "fe7302197bbf98d5490f8bc0d6738d9c51c53646"
 }

package/src/components/customer/overdraft-protection.tsx

@@ -19,9 +19,9 @@ import {
 } from '@mui/material';
 import Dialog from '@arcblock/ux/lib/Dialog';
 import { EventHandler, useState } from 'react';
-import { api, Switch, useMobile } from '@blocklet/payment-react';
+import { api, formatAmountPrecisionLimit, Switch, useMobile } from '@blocklet/payment-react';
 import { useRequest } from 'ahooks';
-import { BN, fromUnitToToken } from '@ocap/util';
+import { BN, fromTokenToUnit, fromUnitToToken } from '@ocap/util';
 import type { TPaymentCurrency, TSubscriptionExpanded } from '@blocklet/payment-types';
 import Currency from '../currency';
 
@@ -32,6 +32,21 @@ const fetchCycleAmount = (
   return api.get(`/api/subscriptions/${subscriptionId}/cycle-amount`, { params }).then((res) => res.data);
 };
 
+function safeAdd(currency: { decimal: number }, ...numbers: string[]) {
+  if (!numbers.length) return '0';
+  if (!numbers.every((n) => /^-?\d*\.?\d*$/.test(n))) {
+    throw new Error('Invalid number format');
+  }
+
+  const decimal = currency?.decimal || 18;
+  const sum = numbers.reduce((total, num) => {
+    const unitAmount = fromTokenToUnit(num, decimal);
+    return new BN(total).add(new BN(unitAmount));
+  }, new BN(0));
+
+  return fromUnitToToken(sum.toString(), decimal);
+}
+
 type OverdraftProtectionDialogProps = {
   value: {
     enabled: boolean;
@@ -48,6 +63,7 @@ type OverdraftProtectionDialogProps = {
     symbol: string;
     logo: string;
     decimal: number;
+    maximum_precision?: number;
   };
   subscription: TSubscriptionExpanded;
 };
@@ -66,7 +82,7 @@ export default function OverdraftProtectionDialog({
   currency,
   subscription,
 }: OverdraftProtectionDialogProps) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { isMobile } = useMobile();
   const [customAmount, setCustomAmount] = useState(false);
   const [presetAmounts, setPresetAmounts] = useState<{ amount: string; cycles: number }[]>([]);
@@ -298,6 +314,14 @@ export default function OverdraftProtectionDialog({
                             symbol: currency.symbol,
                           });
                         }
+                        const validPrecision = formatAmountPrecisionLimit(
+                          val.toString(),
+                          locale,
+                          currency?.maximum_precision || 6
+                        );
+                        if (validPrecision) {
+                          return validPrecision;
+                        }
                         return true;
                       },
                     })}
@@ -325,11 +349,11 @@ export default function OverdraftProtectionDialog({
             {amount && Number(amount) > 0 && !methods.formState.errors.amount && (
               <Typography variant="body2" sx={{ color: 'text.lighter', mt: '8px !important' }} fontSize={12}>
                 {t('customer.overdraftProtection.total', {
-                  total: Number(amount) + Number(availableAmount),
+                  total: safeAdd(currency, amount, availableAmount),
                   symbol: currency.symbol,
                 })}
                 {formatEstimatedDuration(
-                  Math.floor((Number(amount) + Number(availableAmount)) / Number(estimateAmount))
+                  Math.floor(Number(safeAdd(currency, amount, availableAmount)) / Number(estimateAmount))
                 )}
               </Typography>
             )}

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

@@ -1,5 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import DidAddress from '@arcblock/ux/lib/DID';
 import {
   Status,
   api,
@@ -10,6 +11,7 @@ import {
   formatTime,
   formatToDate,
   formatToDatetime,
+  getCustomerAvatar,
   getDidConnectQueryParams,
   getInvoiceDescriptionAndReason,
   getInvoiceStatusColor,
@@ -37,6 +39,8 @@ import { useRequest } from 'ahooks';
 import { useMemo } from 'react';
 import { joinURL, withQuery } from 'ufo';
 import prettyMs from 'pretty-ms-i18n';
+import InfoRow from '../../../components/info-row';
+import InfoCard from '../../../components/info-card';
 
 const fetchInvoiceData = (params: Record<string, any> = {}): Promise<Paginated<TInvoiceExpanded>> => {
   const search = new URLSearchParams();
@@ -110,7 +114,7 @@ export default function SubscriptionEmbed() {
 
   const invoices = data?.list || [];
 
-  const infoList = [
+  const infoList: { name: string; value: React.ReactNode }[] = [
     {
       name: t('payment.customer.subscriptions.plan'),
       value: (
@@ -167,11 +171,25 @@ export default function SubscriptionEmbed() {
         </Typography>
       ),
     });
+
+    infoList.push({
+      name: t('payment.customer.subscriptions.owner'),
+      value: (
+        <InfoCard
+          logo={getCustomerAvatar(
+            subscription.customer.did,
+            subscription.customer.updated_at ? new Date(subscription.customer.updated_at).toISOString() : '',
+            48
+          )}
+          name={subscription.customer.email}
+          description={<DidAddress did={subscription.customer.did} responsive />}
+        />
+      ),
+    });
   }
 
   return (
     <Position>
-      <Typography title={t('payment.checkout.subscription')} />
       <Box
         className="mini-invoice-wrap"
         sx={{
@@ -179,27 +197,21 @@ export default function SubscriptionEmbed() {
           flexDirection: 'column',
           alignItem: 'center',
           justifyContent: 'flex-start',
-          padding: '16px',
+          padding: '8px',
+          gap: '12px',
           width: '100%',
           height: '100%',
         }}>
-        <Typography component="h3" sx={{ textAlign: 'center', fontWeight: 500 }} variant="h5" gutterBottom>
+        <Typography component="h2" sx={{ textAlign: 'center' }} variant="h3" gutterBottom>
           {t('payment.customer.subscriptions.current')}
         </Typography>
-        <Box sx={{ marginTop: '12px' }}>
-          <List>
-            {infoList.map(({ name, value }) => {
-              return (
-                <ListItem key={name} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
-                  <Typography component="span">{name}</Typography>
-                  <Typography component="span">{value}</Typography>
-                </ListItem>
-              );
-            })}
-          </List>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          {infoList.map(({ name, value }) => {
+            return <InfoRow label={name} value={value} direction="column" alignItems="flex-start" sx={{ mb: 0 }} />;
+          })}
         </Box>
         <Divider />
-        <Box sx={{ marginTop: '12px', flex: 1, overflow: 'hidden' }}>
+        <Box sx={{ flex: 1, overflow: 'hidden' }}>
           <List sx={{ height: '100%', display: 'flex', flexDirection: 'column' }} className="mini-invoice-list">
             <ListSubheader disableGutters sx={{ padding: 0 }}>
               <Typography component="h2" variant="h6" fontSize="16px">
@@ -273,7 +285,7 @@ function Position({ children }: any) {
         maxWidth: '500px',
         background: '#fff',
         margin: '0 auto',
-        height: '100%',
+        height: '100vh',
       }}>
       {children}
     </Box>