payment-kit 1.20.11 → 1.20.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.20.11",
+  "version": "1.20.13",
   "scripts": {
     "dev": "blocklet dev --open",
     "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
@@ -45,32 +45,32 @@
   },
   "dependencies": {
     "@abtnode/cron": "^1.16.52-beta-20250912-112002-e3499e9c",
-    "@arcblock/did": "^1.24.9",
-    "@arcblock/did-connect-react": "^3.1.40",
+    "@arcblock/did": "^1.25.1",
+    "@arcblock/did-connect-react": "^3.1.41",
     "@arcblock/did-connect-storage-nedb": "^1.8.0",
-    "@arcblock/did-util": "^1.24.9",
-    "@arcblock/jwt": "^1.24.9",
-    "@arcblock/ux": "^3.1.40",
-    "@arcblock/validator": "^1.24.9",
-    "@blocklet/did-space-js": "^1.1.23",
+    "@arcblock/did-util": "^1.25.1",
+    "@arcblock/jwt": "^1.25.1",
+    "@arcblock/ux": "^3.1.41",
+    "@arcblock/validator": "^1.25.1",
+    "@blocklet/did-space-js": "^1.1.24",
     "@blocklet/error": "^0.2.5",
     "@blocklet/js-sdk": "^1.16.52-beta-20250912-112002-e3499e9c",
     "@blocklet/logger": "^1.16.52-beta-20250912-112002-e3499e9c",
-    "@blocklet/payment-react": "1.20.11",
-    "@blocklet/payment-vendor": "1.20.11",
+    "@blocklet/payment-react": "1.20.13",
+    "@blocklet/payment-vendor": "1.20.13",
     "@blocklet/sdk": "^1.16.52-beta-20250912-112002-e3499e9c",
-    "@blocklet/ui-react": "^3.1.40",
-    "@blocklet/uploader": "^0.2.10",
+    "@blocklet/ui-react": "^3.1.41",
+    "@blocklet/uploader": "^0.2.11",
     "@blocklet/xss": "^0.2.7",
     "@mui/icons-material": "^7.1.2",
     "@mui/lab": "7.0.0-beta.14",
     "@mui/material": "^7.1.2",
     "@mui/system": "^7.1.1",
-    "@ocap/asset": "^1.24.9",
-    "@ocap/client": "^1.24.9",
-    "@ocap/mcrypto": "^1.24.9",
-    "@ocap/util": "^1.24.9",
-    "@ocap/wallet": "^1.24.9",
+    "@ocap/asset": "^1.25.1",
+    "@ocap/client": "^1.25.1",
+    "@ocap/mcrypto": "^1.25.1",
+    "@ocap/util": "^1.25.1",
+    "@ocap/wallet": "^1.25.1",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^2.4.0",
     "ahooks": "^3.8.5",
@@ -126,7 +126,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.52-beta-20250912-112002-e3499e9c",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.20.11",
+    "@blocklet/payment-types": "1.20.13",
     "@types/cookie-parser": "^1.4.9",
     "@types/cors": "^2.8.19",
     "@types/debug": "^4.1.12",
@@ -157,7 +157,7 @@
     "vite": "^7.0.0",
     "vite-node": "^3.2.4",
     "vite-plugin-babel-import": "^2.0.5",
-    "vite-plugin-blocklet": "^0.10.1",
+    "vite-plugin-blocklet": "^0.11.0",
     "vite-plugin-node-polyfills": "^0.23.0",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4",
@@ -173,5 +173,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "b69becabf1721f6238cf24004537bee1e4ade860"
+  "gitHead": "0cbe918549f7d06561b5307fb947bfbbd2250984"
 }

package/src/app.tsx

@@ -58,6 +58,8 @@ function App() {
             <Route key="admin-index" path="/admin" element={<AdminPage />} />,
             <Route key="admin-tabs" path="/admin/:group" element={<AdminPage />} />,
             <Route key="admin-sub" path="/admin/:group/:page" element={<AdminPage />} />,
+            <Route key="admin-detail" path="/admin/:group/:page/:id" element={<AdminPage />} />,
+            <Route key="admin-nested" path="/admin/:group/:page/:subpage/:id" element={<AdminPage />} />,
             <Route key="admin-fallback" path="/admin/*" element={<AdminPage />} />,
             <Route key="integrations-index" path="/integrations" element={<IntegrationsPage />} />
             <Route key="integrations-tabs" path="/integrations/:group" element={<IntegrationsPage />} />

package/src/components/customer/link.tsx

@@ -40,7 +40,7 @@ export default function CustomerLink({
       popupInfoType={InfoType.Minimal}
       showDid={size !== 'small'}
       popupShowDid
-      {...(customer.metadata.anonymous === true
+      {...(customer?.metadata?.anonymous === true
         ? {
             user: {
               fullName: customer.name || customer.email,

package/src/components/discount/discount-info.tsx

@@ -0,0 +1,178 @@
+import { Box, Typography, Stack } from '@mui/material';
+import { LocalOfferOutlined } from '@mui/icons-material';
+import { formatTime, formatAmount, findCurrency, usePaymentContext, useMobile } from '@blocklet/payment-react';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
+type DiscountStats = {
+  subscription_id: string;
+  total_discount_records: number;
+  total_savings: Record<
+    string,
+    {
+      amount: string;
+      currency: any;
+      formattedAmount: string;
+    }
+  >;
+  coupons_used: string[];
+  promotion_codes_used: any[];
+  discount_records: any[];
+};
+
+type DiscountInfoProps = {
+  discountStats?: DiscountStats | null;
+};
+
+export default function DiscountInfo({ discountStats = null }: DiscountInfoProps) {
+  const { t } = useLocaleContext();
+  const { settings } = usePaymentContext();
+  const { isMobile } = useMobile();
+
+  if (!discountStats || discountStats.total_discount_records === 0) {
+    return null;
+  }
+
+  // Get primary coupon info
+  const primaryRecord = discountStats.discount_records?.[0];
+  const coupon = primaryRecord?.coupon;
+
+  if (!coupon) {
+    return null;
+  }
+
+  // Use coupon name instead of promotion code
+  const couponName = coupon.name || t('admin.coupon.discount');
+
+  // Format discount type
+  const getDiscountType = () => {
+    if (coupon.percent_off && coupon.percent_off > 0) {
+      return t('admin.coupon.couponTermsPercentage', { percent: coupon.percent_off });
+    }
+    if (coupon.amount_off && coupon.amount_off !== '0') {
+      const currency = findCurrency(settings.paymentMethods, coupon.currency_id) || settings.baseCurrency;
+      return t('admin.coupon.couponTermsFixedAmount', {
+        amount: formatAmount(coupon.amount_off, currency.decimal),
+        symbol: currency.symbol,
+      });
+    }
+    return t('admin.coupon.noDiscount');
+  };
+
+  // Format duration
+  const getDuration = () => {
+    if (coupon.duration === 'repeating' && coupon.duration_in_months) {
+      return t(`admin.coupon.couponTermsDuration.${coupon.duration}`, { months: coupon.duration_in_months });
+    }
+    return t(`admin.coupon.couponTermsDuration.${coupon.duration}`);
+  };
+
+  // Format total savings
+  const totalSavingsEntries = Object.entries(discountStats.total_savings);
+  const savingsText =
+    totalSavingsEntries.length > 0
+      ? totalSavingsEntries.map(([, savings]) => savings.formattedAmount).join(', ')
+      : '--';
+
+  // Get validity period
+  const getValidityPeriod = () => {
+    if (coupon.duration !== 'repeating') {
+      return '';
+    }
+    if (primaryRecord?.discount_start && primaryRecord?.discount_end) {
+      const startDate = formatTime(primaryRecord.discount_start * 1000);
+      const endDate = formatTime(primaryRecord.discount_end * 1000);
+      return `${startDate} ~ ${endDate}`;
+    }
+    return '';
+  };
+
+  return (
+    <Box
+      sx={{
+        bgcolor: 'grey.50',
+        borderRadius: 1.5,
+        p: 2.5,
+        my: 2,
+        border: '1px solid',
+        borderColor: 'divider',
+      }}>
+      <Stack spacing={1}>
+        <Stack
+          direction={isMobile ? 'column' : 'row'}
+          spacing={2}
+          sx={{
+            alignItems: isMobile ? 'flex-start' : 'center',
+          }}>
+          <Stack
+            direction="row"
+            spacing={1}
+            sx={{
+              alignItems: 'center',
+              flex: 1,
+            }}>
+            <LocalOfferOutlined sx={{ color: 'primary.main', fontSize: 20 }} />
+            <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'text.primary' }}>
+              {couponName}
+            </Typography>
+          </Stack>
+
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <Typography variant="body2" sx={{ fontWeight: 500, color: 'text.secondary' }}>
+              {getDiscountType()}
+            </Typography>
+            {getDuration() && (
+              <>
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: 'text.disabled',
+                  }}>
+                  |
+                </Typography>
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: 'text.secondary',
+                  }}>
+                  {getDuration()}
+                </Typography>
+              </>
+            )}
+          </Box>
+        </Stack>
+
+        <Stack
+          direction={isMobile ? 'column' : 'row'}
+          spacing={2}
+          sx={{
+            alignItems: isMobile ? 'flex-start' : 'center',
+          }}>
+          <Box sx={{ flex: 1 }}>
+            <Typography
+              variant="body2"
+              sx={{
+                color: 'text.secondary',
+              }}>
+              {t('admin.discount.totalSaved')}:{' '}
+              <Typography component="span" sx={{ color: 'success.main', fontWeight: 600, ml: 0.5 }}>
+                {savingsText}
+              </Typography>
+            </Typography>
+          </Box>
+
+          {getValidityPeriod() && (
+            <Box>
+              <Typography
+                variant="body2"
+                sx={{
+                  color: 'text.primary',
+                }}>
+                {t('admin.coupon.discountPeriod')}: {getValidityPeriod()}
+              </Typography>
+            </Box>
+          )}
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}

package/src/components/invoice/table.tsx

@@ -63,7 +63,7 @@ export function getAppliedBalance(invoice: TInvoiceExpanded) {
   return '0';
 }
 
-export function getInvoiceRows(invoice: TInvoiceExpanded) {
+export function getInvoiceRows(invoice: TInvoiceExpanded, t: (key: string) => string) {
   const detail: InvoiceDetailItem[] = invoice.lines.map((line) => {
     const price = line.quantity
       ? toBN(line.amount).div(toBN(line.quantity)).toString()
@@ -99,14 +99,61 @@ export function getInvoiceRows(invoice: TInvoiceExpanded) {
     {
       key: 'common.subtotal',
       value: formatAmount(invoice.subtotal, invoice.paymentCurrency.decimal),
-      color: 'text.primary',
-    },
-    {
-      key: 'common.total',
-      value: formatAmount(invoice.total, invoice.paymentCurrency.decimal),
-      color: 'text.primary',
+      color: 'text.secondary',
     },
   ];
+
+  // Add discount information from discountDetails
+  if ((invoice as any).discountDetails && (invoice as any).discountDetails.length > 0) {
+    (invoice as any).discountDetails.forEach((discount: any) => {
+      if (discount.coupon) {
+        let discountAmount = '0';
+
+        // Calculate discount amount from total_discount_amounts
+        if (invoice.total_discount_amounts && invoice.total_discount_amounts.length > 0) {
+          const matchingDiscount = invoice.total_discount_amounts.find(
+            (tda: any) => tda.discount === discount.id || tda.coupon === discount.coupon_id
+          );
+          if (matchingDiscount) {
+            discountAmount = matchingDiscount.amount.toString();
+          }
+        }
+
+        if (toBN(discountAmount).gt(toBN(0))) {
+          const couponName = discount.coupon.name || t('common.coupon');
+          const formattedDiscountAmount = formatAmount(discountAmount, invoice.paymentCurrency.decimal);
+
+          // Format discount display following Stripe style: coupon_name (discount_type)
+          let discountLabel = couponName;
+          if (discount.coupon.percent_off) {
+            const discountText = (t as any)('admin.coupon.couponTermsPercentage', {
+              percent: discount.coupon.percent_off,
+            });
+            discountLabel = `${couponName} (${discountText})`;
+          } else if (discount.coupon.amount_off) {
+            const fixedAmount = formatAmount(discount.coupon.amount_off, invoice.paymentCurrency.decimal);
+            const discountText = (t as any)('admin.coupon.couponTermsFixedAmount', {
+              amount: fixedAmount,
+              symbol: invoice.paymentCurrency.symbol,
+            });
+            discountLabel = `${couponName} (${discountText})`;
+          }
+
+          summary.push({
+            key: discountLabel,
+            value: `-${formattedDiscountAmount}`,
+            color: 'text.secondary',
+          });
+        }
+      }
+    });
+  }
+
+  summary.push({
+    key: 'common.total',
+    value: formatAmount(invoice.total, invoice.paymentCurrency.decimal),
+    color: 'text.secondary',
+  });
   if (invoice.amount_paid !== '0') {
     summary.push({
       key: 'payment.customer.invoice.amountPaid',
@@ -126,7 +173,7 @@ export function getInvoiceRows(invoice: TInvoiceExpanded) {
   summary.push({
     key: 'payment.customer.invoice.amountDue',
     value: formatAmount(invoice.amount_remaining, invoice.paymentCurrency.decimal),
-    color: 'text.primary',
+    color: invoice.amount_remaining !== '0' ? 'text.primary' : 'text.secondary',
   });
 
   return {
@@ -137,7 +184,7 @@ export function getInvoiceRows(invoice: TInvoiceExpanded) {
 
 export default function InvoiceTable({ invoice, simple = false, emptyNodeText = '' }: Props) {
   const { t, locale } = useLocaleContext();
-  const { detail, summary } = getInvoiceRows(invoice);
+  const { detail, summary } = getInvoiceRows(invoice, t);
   const [state, setState] = useSetState({
     subscriptionId: '',
     subscriptionItemId: '',
@@ -246,6 +293,34 @@ export default function InvoiceTable({ invoice, simple = false, emptyNodeText =
       width: 200,
       align: 'right',
     },
+    {
+      label: t('common.discount'),
+      name: 'discount',
+      width: 200,
+      align: 'right',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = detail[index] as InvoiceDetailItem;
+          // Calculate discount amount for this line item
+          let itemDiscountAmount = toBN(0);
+          if (item.raw.discount_amounts && item.raw.discount_amounts.length > 0) {
+            item.raw.discount_amounts.forEach((discount: any) => {
+              if (discount.amount) {
+                itemDiscountAmount = itemDiscountAmount.add(toBN(discount.amount));
+              }
+            });
+          }
+
+          return (
+            <Typography component="span" sx={{ color: 'text.secondary' }}>
+              {itemDiscountAmount.gt(toBN(0))
+                ? `-${formatAmount(itemDiscountAmount.toString(), invoice.paymentCurrency.decimal)}`
+                : '-'}
+            </Typography>
+          );
+        },
+      },
+    },
     {
       label: t('common.amount'),
       name: 'amount',
@@ -299,49 +374,72 @@ export default function InvoiceTable({ invoice, simple = false, emptyNodeText =
         emptyNodeText={emptyNodeText || t('payment.customer.invoice.emptyList')}
       />
       {!isEmpty(detail) && invoice.status !== 'void' && (
-        <Stack
+        <Box
           className="invoice-summary"
           sx={{
             display: 'flex',
-            flexDirection: {
-              xs: 'column',
-              md: 'row',
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+            float: 'right',
+            pr: 2,
+            mt: {
+              xs: 1,
+              md: 1,
             },
-            justifyContent: 'flex-end',
-            alignItems: {
-              xs: 'flex-end',
-              md: 'center',
+            width: {
+              xs: '100%',
+              md: 'auto',
             },
-            gap: {
-              xs: 1,
-              md: 3,
+            minWidth: {
+              md: '280px',
             },
-            mt: {
-              xs: 1,
-              md: 2,
+            maxWidth: {
+              xs: '100%',
+              md: '400px',
             },
           }}>
-          {summary.map((line) => (
-            <Box key={line.key}>
-              <Typography
-                component="span"
-                variant="body1"
-                sx={{
-                  color: 'text.secondary',
-                }}>
-                {t(line.key)}:&nbsp;
-              </Typography>
-              <Typography
-                component="span"
-                variant="body1"
+          {summary.map((line, index) => {
+            const isTotal = line.key === 'common.total';
+            const showDivider = isTotal && index > 0;
+
+            return (
+              <Stack
+                key={line.key}
+                direction="row"
                 sx={{
-                  color: 'text.primary',
+                  justifyContent: 'flex-end',
+                  width: '100%',
+                  py: 0.5,
+
+                  ...(showDivider && {
+                    borderTop: '1px solid',
+                    borderTopColor: 'divider',
+                    pt: 1,
+                    mt: 0.5,
+                  }),
                 }}>
-                {line.value}
-              </Typography>
-            </Box>
-          ))}
-        </Stack>
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: 'text.primary',
+                    fontWeight: isTotal ? 500 : 400,
+                  }}>
+                  {line.key.startsWith('common.') || line.key.startsWith('payment.') ? t(line.key) : line.key}
+                </Typography>
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: 'text.primary',
+                    fontWeight: isTotal ? 500 : 400,
+                    minWidth: '80px',
+                    textAlign: 'right',
+                  }}>
+                  {line.value}
+                </Typography>
+              </Stack>
+            );
+          })}
+        </Box>
       )}
       {state.subscriptionId && state.subscriptionItemId && (
         <UsageRecordDialog
@@ -359,9 +457,6 @@ export default function InvoiceTable({ invoice, simple = false, emptyNodeText =
 }
 
 const Root = styled(Box)`
-  .invoice-summary {
-    padding-right: 16px;
-  }
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
     .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
       > div {
@@ -370,8 +465,5 @@ const Root = styled(Box)`
         font-size: 14px;
       }
     }
-    .invoice-summary {
-      padding-right: 20px;
-    }
   }
 `;

package/src/components/invoice-pdf/styles.ts

@@ -4,6 +4,7 @@ export const colorDark = '#222';
 export const colorDark2 = '#888';
 export const colorGray = '#e3e3e3';
 export const colorWhite = '#fff';
+export const colorGreen = '#4caf50';
 
 export const pdfStyles: InvoiceStyles = {
   template: {
@@ -29,6 +30,9 @@ export const pdfStyles: InvoiceStyles = {
   gray: {
     color: colorDark2,
   },
+  green: {
+    color: colorGreen,
+  },
   'bg-dark': {
     backgroundColor: colorDark2,
   },
@@ -55,8 +59,10 @@ export const pdfStyles: InvoiceStyles = {
   'w-60': { width: '60%' },
   'w-40': { width: '40%' },
   'w-48': { width: '48%' },
+  'w-38': { width: '38%' },
   'w-17': { width: '17%' },
   'w-18': { width: '18%' },
+  'w-15': { width: '15%' },
   row: {
     borderBottom: `1px solid ${colorGray}`,
     marginBottom: '2px',