payment-kit 1.13.102 → 1.13.103

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.102",
+  "version": "1.13.103",
   "scripts": {
     "dev": "COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev",
     "eject": "vite eject",
@@ -110,7 +110,7 @@
     "@abtnode/types": "1.16.21",
     "@arcblock/eslint-config": "^0.2.4",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@did-pay/types": "1.13.102",
+    "@did-pay/types": "1.13.103",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -149,5 +149,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "8754f63a70fb2580f60176d84248cdd6118abc51"
+  "gitHead": "a86ded7d5fba51f50a987f3b7152185b3d704e8c"
 }

package/src/locales/en.tsx

@@ -615,7 +615,10 @@ export default flat({
       config: 'Switch to another plan or billing cycle',
       confirm: 'Confirm changes to your subscription',
       summary: 'What you will pay for starting {date}',
-      due: 'Amount due today',
+      total: 'Total (metered items excluded)',
+      appliedCredit: 'Credit applied',
+      newCredit: 'Credit issued',
+      remaining: 'Amount due today',
     },
     invoice: {
       summary: 'Summary',

package/src/locales/zh.tsx

@@ -601,7 +601,10 @@ export default flat({
       config: '切换套餐或周期',
       confirm: '确认变更细节',
       summary: '新的付款计划（{date} 开始)',
-      due: '今天还需支付',
+      total: '套餐定价（不含按量部分）',
+      appliedCredit: '信用扣除',
+      newCredit: '信用增加',
+      remaining: '还需支付',
     },
     invoice: {
       summary: '摘要',

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

@@ -55,6 +55,8 @@ export default function CustomerSubscriptionUpdate() {
     priceId: '',
     total: '',
     remaining: '',
+    newCredit: '',
+    appliedCredit: '',
     setup: null,
     prorations: [],
     items: [],
@@ -198,6 +200,20 @@ export default function CustomerSubscriptionUpdate() {
   const { recurring } = data.subscription.items.find((x) => x.price.type === 'recurring')?.price || {};
   const interval = [recurring?.interval, recurring?.interval_count].join('-');
 
+  const getInfoRow = (label: string, value: string, prefix?: string) => {
+    return (
+      <Stack direction="row" justifyContent="space-between">
+        <Typography variant="h6" sx={{ fontWeight: 'normal' }}>
+          {label}
+        </Typography>
+        <Typography component="p" style={{ fontWeight: 'bold' }}>
+          {prefix}
+          {fromUnitToToken(value, data.subscription.paymentCurrency.decimal)} {data.subscription.paymentCurrency.symbol}
+        </Typography>
+      </Stack>
+    );
+  };
+
   return (
     <Root direction="column" spacing={4} sx={{ mb: 4 }}>
       <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
@@ -244,33 +260,32 @@ export default function CustomerSubscriptionUpdate() {
             })}
           </Stack>
           <Divider />
-          <Stack direction="row" justifyContent="space-between">
-            <Typography variant="h6" sx={{ fontWeight: 'normal' }}>
-              {t('customer.upgrade.due')}
-            </Typography>
-            <Typography component="p" style={{ fontWeight: 'bold' }}>
-              {fromUnitToToken(state.remaining, data.subscription.paymentCurrency.decimal)}{' '}
-              {data.subscription.paymentCurrency.symbol}
-            </Typography>
-          </Stack>
-          <Divider />
-          <Stack direction="row" alignItems="center" justifyContent="flex-end" spacing={2}>
-            <LoadingButton
-              disabled={state.loading || state.paying}
-              onClick={() => setState({ priceId: '' })}
-              variant="text"
-              size="large">
-              {t('common.cancel')}
-            </LoadingButton>
-            <LoadingButton
-              onClick={handleConfirm}
-              variant="contained"
-              size="large"
-              sx={{ width: 150 }}
-              loading={state.loading || state.paying}
-              loadingPosition="end">
-              {t('common.confirm')}
-            </LoadingButton>
+          <Stack direction="column" spacing={1}>
+            {getInfoRow(t('customer.upgrade.total'), state.total)}
+            {state.prorations.map((x: any) => getInfoRow(x.description, x.amount))}
+            {state.appliedCredit > '0' && getInfoRow(t('customer.upgrade.appliedCredit'), state.appliedCredit, '-')}
+            {state.newCredit > '0' && getInfoRow(t('customer.upgrade.newCredit'), state.newCredit)}
+            <Divider />
+            {getInfoRow(t('customer.upgrade.remaining'), state.remaining)}
+            <Divider />
+            <Stack direction="row" alignItems="center" justifyContent="flex-end" spacing={2} sx={{ pt: 2 }}>
+              <LoadingButton
+                disabled={state.loading || state.paying}
+                onClick={() => setState({ priceId: '' })}
+                variant="text"
+                size="large">
+                {t('common.cancel')}
+              </LoadingButton>
+              <LoadingButton
+                onClick={handleConfirm}
+                variant="contained"
+                size="large"
+                sx={{ width: 150 }}
+                loading={state.loading || state.paying}
+                loadingPosition="end">
+                {t('common.confirm')}
+              </LoadingButton>
+            </Stack>
           </Stack>
         </Stack>
       )}