payment-kit 1.18.19 → 1.18.20

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.18.19",
+  "version": "1.18.20",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -53,7 +53,7 @@
     "@arcblock/validator": "^1.19.15",
     "@blocklet/js-sdk": "^1.16.40",
     "@blocklet/logger": "^1.16.40",
-    "@blocklet/payment-react": "1.18.19",
+    "@blocklet/payment-react": "1.18.20",
     "@blocklet/sdk": "^1.16.40",
     "@blocklet/ui-react": "^2.12.36",
     "@blocklet/uploader": "^0.1.79",
@@ -121,7 +121,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.40",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.18.19",
+    "@blocklet/payment-types": "1.18.20",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -167,5 +167,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "eabd58598ad349a5177dca2e6302c82117d9b687"
+  "gitHead": "f71a0013f704d58e4c04ebfcc5a35480a0942bcc"
 }

package/src/libs/dayjs.ts

@@ -54,8 +54,9 @@ export const formatSmartDuration = (
   { t, separator = ' ' }: FormatDurationOptions
 ): string => {
   // Format single unit
-  const formatUnit = (val: number, unitType: TimeUnit): string =>
-    `${val} ${t(`common.${unitType}${val > 1 ? 's' : ''}`).toLowerCase()}`;
+  const formatUnit = (val: number, unitType: TimeUnit): string => {
+    return `${val || 0} ${t(`common.${unitType}${val > 1 ? 's' : ''}`).toLowerCase()}`;
+  };
 
   // Convert to largest possible unit
   const convertToLargest = (val: number, fromUnit: TimeUnit): [TimeUnit, number][] => {
@@ -129,7 +130,7 @@ export const formatSmartDuration = (
 
   // Get units and filter out zero values
   const units = convertToLargest(value, unit).filter(([, val]) => val > 0);
-
+  if (units.length === 0) return formatUnit(0, unit);
   // Format all units
   return units.map(([u, val]) => formatUnit(val, u)).join(separator);
 };

package/src/pages/customer/index.tsx

@@ -178,7 +178,7 @@ type CardType = 'balance' | 'spent' | 'stake' | 'refund' | 'due';
 
 // 定义一个统一的卡片配置
 const CARD_CONFIG: Record<CardType, { key: keyof typeof summaryKeyMap; alwaysShow?: boolean }> = {
-  balance: { key: 'token', alwaysShow: true },
+  balance: { key: 'token' },
   spent: { key: 'paid', alwaysShow: true },
   stake: { key: 'stake' },
   refund: { key: 'refund' },
@@ -194,16 +194,22 @@ const summaryKeyMap = {
   due: 'due',
 } as const;
 
-// 优化后的计算函数
-const getCardVisibility = (currency: any, data: any) => {
+const isCardVisible = (type: string, config: any, data: any, currency: any, method: any) => {
+  const summaryKey = config.key;
+  const hasSummaryValue =
+    data?.summary?.[summaryKey]?.[currency.id] && data?.summary?.[summaryKey]?.[currency.id] !== '0';
+
+  if (type === 'balance') {
+    return method?.type === 'arcblock' && (config.alwaysShow || hasSummaryValue);
+  }
+
+  return config.alwaysShow || hasSummaryValue;
+};
+
+const getCardVisibility = (currency: any, data: any, method: any) => {
   return Object.entries(CARD_CONFIG).reduce(
     (acc, [type, config]) => {
-      const summaryKey = config.key;
-      const isVisible =
-        config.alwaysShow ||
-        (data?.summary?.[summaryKey]?.[currency.id] && data?.summary?.[summaryKey]?.[currency.id] !== '0');
-
-      if (isVisible) {
+      if (isCardVisible(type, config, data, currency, method)) {
         acc.visibleCards.push(type as CardType);
       }
       return acc;
@@ -213,9 +219,10 @@ const getCardVisibility = (currency: any, data: any) => {
 };
 
 // 计算最大卡片数量
-const calculateMaxCardCount = (currencies: any[], data: any) => {
+const calculateMaxCardCount = (currencies: any[], data: any, settings: any) => {
   return currencies.reduce((maxCount, currency) => {
-    const { visibleCards } = getCardVisibility(currency, data);
+    const method = settings?.paymentMethods?.find((m: any) => m.id === currency.payment_method_id);
+    const { visibleCards } = getCardVisibility(currency, data, method);
     return Math.max(maxCount, visibleCards.length);
   }, 0);
 };
@@ -378,7 +385,7 @@ export default function CustomerHome() {
       </Box>
     );
 
-  const maxCardCount = calculateMaxCardCount(currencies, data);
+  const maxCardCount = calculateMaxCardCount(currencies, data, settings);
 
   const responsiveColumns = {
     xs: Math.min(2, maxCardCount),
@@ -397,6 +404,10 @@ export default function CustomerHome() {
           </Box>
           <Stack gap={2} mt={2}>
             {currencies.map((c) => {
+              const method = settings?.paymentMethods?.find((m) => m.id === c.payment_method_id);
+              if (method?.type !== 'arcblock') {
+                return null;
+              }
               return isSummaryEmpty(data?.summary, c.id) && c.id !== settings.baseCurrency.id ? null : (
                 <Stack
                   key={c.id}
@@ -444,12 +455,9 @@ export default function CustomerHome() {
                     }}>
                     {/* 使用配置渲染卡片 */}
                     {Object.entries(CARD_CONFIG).map(([type, config]) => {
-                      const summaryKey = config.key;
-                      const isVisible =
-                        config.alwaysShow ||
-                        (data?.summary?.[summaryKey]?.[c.id] && data?.summary?.[summaryKey]?.[c.id] !== '0');
-
-                      if (!isVisible) return null;
+                      if (!isCardVisible(type, config, data, c, method)) {
+                        return null;
+                      }
 
                       return (
                         <Box
@@ -467,7 +475,6 @@ export default function CustomerHome() {
                               backgroundColor: 'var(--stroke-border-base, #EFF1F5)',
                               zIndex: 1,
                             },
-
                             '&:has(+ .placeholder)::after': {
                               display: 'none',
                             },
@@ -477,7 +484,7 @@ export default function CustomerHome() {
                           }}>
                           <CurrencyCard
                             label={t(`admin.customer.summary.${type}`)}
-                            data={data?.summary?.[summaryKey] || emptyObject}
+                            data={data?.summary?.[config.key] || emptyObject}
                             currency={c}
                             type={type as CardType}
                             icon={getCardIcon(type as CardType)}

package/src/pages/customer/recharge/account.tsx

@@ -83,6 +83,15 @@ export default function BalanceRechargePage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
   const customInputRef = useRef<HTMLInputElement>(null);
+  const [unitCycle, setUnitCycle] = useState<{
+    amount: string;
+    interval: TimeUnit;
+    cycle: number;
+  }>({
+    amount: '0',
+    interval: 'month',
+    cycle: 1,
+  });
   const [payerValue, setPayerValue] = useState<{
     paymentAddress: string;
     token: string;
@@ -108,9 +117,14 @@ export default function BalanceRechargePage() {
         setCurrency(data.currency);
         setRelatedSubscriptions(data.relatedSubscriptions || []);
 
-        if (data.recommendedRecharge && data.recommendedRecharge.amount) {
+        if (data.recommendedRecharge && data.recommendedRecharge.amount && data.recommendedRecharge.amount !== '0') {
           const baseAmount = data.recommendedRecharge.amount;
           const decimal = data.currency.decimal || 0;
+          setUnitCycle({
+            amount: parseFloat(formatBNStr(baseAmount, decimal, 6, true)).toString(),
+            interval: data.recommendedRecharge.interval as TimeUnit,
+            cycle: data.recommendedRecharge.cycle,
+          });
           setPresetAmounts([
             {
               amount: Math.ceil(parseFloat(formatBNStr(baseAmount, decimal, 6, true))).toString(),
@@ -494,6 +508,19 @@ export default function BalanceRechargePage() {
                   }}
                   inputRef={customInputRef}
                 />
+                {amount && Number(amount) > 0 && Number(unitCycle.amount) > 0 && !amountError && (
+                  <Typography variant="body2" sx={{ color: 'text.lighter', mt: 1 }} fontSize={12}>
+                    {t('common.estimatedDuration', {
+                      duration: formatSmartDuration(
+                        Math.floor(Number(amount) / Number(unitCycle.amount)) < 1
+                          ? parseFloat((Number(amount) / Number(unitCycle.amount)).toFixed(1))
+                          : Math.floor(Number(amount) / Number(unitCycle.amount)),
+                        unitCycle.interval,
+                        { t }
+                      ),
+                    })}
+                  </Typography>
+                )}
               </Box>
             )}
 

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

@@ -479,7 +479,11 @@ export default function RechargePage() {
                 />
                 {amount && Number(amount) > 0 && Number(cycleAmount) > 0 && !amountError && (
                   <Typography variant="body2" sx={{ color: 'text.lighter', mt: '8px !important' }} fontSize={12}>
-                    {formatEstimatedDuration(Math.floor(Number(amount) / Number(cycleAmount)))}
+                    {formatEstimatedDuration(
+                      Math.floor(Number(amount) / Number(cycleAmount)) < 1
+                        ? parseFloat((Number(amount) / Number(cycleAmount)).toFixed(1))
+                        : Math.floor(Number(amount) / Number(cycleAmount))
+                    )}
                   </Typography>
                 )}
               </Box>