payment-kit 1.20.20 → 1.20.22

package/src/components/subscription/vendor-service-list.tsx

@@ -13,9 +13,16 @@ interface VendorConfig {
 interface VendorServiceListProps {
   vendorServices: VendorConfig[];
   subscriptionId: string;
+  isOwner?: boolean;
+  isCanceled: boolean;
 }
 
-export default function VendorServiceList({ vendorServices, subscriptionId }: VendorServiceListProps) {
+export default function VendorServiceList({
+  vendorServices,
+  subscriptionId,
+  isOwner = true,
+  isCanceled,
+}: VendorServiceListProps) {
   const { t } = useLocaleContext();
 
   if (!vendorServices || vendorServices.length === 0) {
@@ -31,7 +38,6 @@ export default function VendorServiceList({ vendorServices, subscriptionId }: Ve
       </Typography>
       <Box className="section-body">
         <Stack
-          spacing={2}
           sx={{
             display: 'grid',
             gridTemplateColumns: { xs: '1fr', md: '1fr 1fr', lg: '1fr 1fr 1fr' },
@@ -39,12 +45,14 @@ export default function VendorServiceList({ vendorServices, subscriptionId }: Ve
           }}>
           {vendorServices.map((vendor, index) => {
             const isLauncher = vendor.vendor_type === 'launcher';
-
             return (
               <Box
                 key={vendor.vendor_key || index}
+                className="vendor-service-item"
                 sx={{
                   p: 2,
+                  display: 'flex',
+                  alignItems: 'center',
                   border: '1px solid',
                   borderColor: 'divider',
                   borderRadius: 2,
@@ -54,40 +62,28 @@ export default function VendorServiceList({ vendorServices, subscriptionId }: Ve
                   },
                   transition: 'background-color 0.2s ease',
                 }}>
-                <Stack
-                  direction="row"
-                  sx={{
-                    justifyContent: 'space-between',
-                    alignItems: 'flex-start',
-                  }}>
-                  <Stack
-                    direction="row"
-                    spacing={1}
+                <Stack direction="row" spacing={1} sx={{ alignItems: 'center', flex: 1 }}>
+                  <Box
+                    sx={{
+                      width: 8,
+                      height: 8,
+                      borderRadius: '50%',
+                      bgcolor: isCanceled ? 'error.main' : 'success.main',
+                      flexShrink: 0,
+                    }}
+                  />
+                  <Typography
+                    variant="body1"
                     sx={{
-                      alignItems: 'center',
-                      flex: 1,
+                      fontWeight: 600,
+                      fontSize: '1rem',
+                      color: 'text.primary',
                     }}>
-                    <Box
-                      sx={{
-                        width: 8,
-                        height: 8,
-                        borderRadius: '50%',
-                        bgcolor: 'success.main',
-                        flexShrink: 0,
-                      }}
-                    />
-                    <Typography
-                      variant="body1"
-                      sx={{
-                        fontWeight: 600,
-                        fontSize: '1rem',
-                        color: 'text.primary',
-                      }}>
-                      {vendor.name || vendor.vendor_key}
-                    </Typography>
-                  </Stack>
-                  {/* Launcher 类型的链接 */}
-                  {isLauncher && (
+                    {vendor.name || vendor.vendor_key}
+                  </Typography>
+                </Stack>
+                {isLauncher && (
+                  <Box>
                     <Stack direction="row" spacing={0.5}>
                       <Tooltip title={t('admin.subscription.serviceHome')} placement="top">
                         <IconButton
@@ -105,30 +101,32 @@ export default function VendorServiceList({ vendorServices, subscriptionId }: Ve
                           <Home fontSize="small" />
                         </IconButton>
                       </Tooltip>
-                      <Tooltip title={t('admin.subscription.serviceDashboard')} placement="top">
-                        <IconButton
-                          size="small"
-                          component="a"
-                          href={joinURL(
-                            prefix,
-                            '/api/vendors/open/',
-                            subscriptionId,
-                            `?vendorId=${vendor.vendor_id}&target=dashboard`
-                          )}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          sx={{
-                            color: 'primary.main',
-                            '&:hover': {
-                              backgroundColor: 'primary.lighter',
-                            },
-                          }}>
-                          <Dashboard fontSize="small" />
-                        </IconButton>
-                      </Tooltip>
+                      {isOwner && (
+                        <Tooltip title={t('admin.subscription.serviceDashboard')} placement="top">
+                          <IconButton
+                            size="small"
+                            component="a"
+                            href={joinURL(
+                              prefix,
+                              '/api/vendors/open/',
+                              subscriptionId,
+                              `?vendorId=${vendor.vendor_id}&target=dashboard`
+                            )}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            sx={{
+                              color: 'primary.main',
+                              '&:hover': {
+                                backgroundColor: 'primary.lighter',
+                              },
+                            }}>
+                            <Dashboard fontSize="small" />
+                          </IconButton>
+                        </Tooltip>
+                      )}
                     </Stack>
-                  )}
-                </Stack>
+                  </Box>
+                )}
               </Box>
             );
           })}

package/src/locales/en.tsx

@@ -132,6 +132,7 @@ export default flat({
     paymentMethods: 'Payment methods',
     customers: 'Customers',
     products: 'Products',
+    invoiceItems: 'Invoice Items',
     pricing: 'Pricing',
     coupons: 'Coupons',
     pricingTables: 'Pricing tables',
@@ -1086,6 +1087,11 @@ export default flat({
       download: 'Download PDF',
       edit: 'Edit Invoice',
       duplicate: 'Duplicate Invoice',
+      retryUncollectible: {
+        title: 'Retry collection',
+        tip: 'Are you sure you want to retry collecting this invoice? This will attempt to charge the customer again.',
+        success: 'Retry request submitted',
+      },
       returnStake: {
         title: 'Return Stake',
         tip: 'Are you sure you want to return the stake? This action will return the stake to the customer immediately.',
@@ -1164,8 +1170,8 @@ export default flat({
       apiConfig: 'API Configuration',
       commissionConfig: 'Commission Configuration',
       status: 'Status',
-      servicePublicKey: 'Service Public Key',
-      servicePublicKeyDescription: 'Used for vendor communication authentication',
+      brokerDID: 'Broker DID',
+      brokerPublicKey: 'Broker Public Key',
     },
     subscription: {
       view: 'View subscription',
@@ -1546,6 +1552,7 @@ export default flat({
     subscriptions: 'No Subscriptions',
     customers: 'No Customers',
     products: 'No Products',
+    invoiceItems: 'No Invoice Items',
     payouts: 'No Payouts',
     paymentLinks: 'No Payment Links',
     paymentMethods: 'No Payment Methods',

package/src/locales/zh.tsx

@@ -131,6 +131,7 @@ export default flat({
     paymentMethods: '支付方式',
     customers: '客户管理',
     products: '产品定价',
+    invoiceItems: '账单明细',
     coupons: '优惠券',
     pricing: '定价',
     pricingTables: '定价表',
@@ -1057,6 +1058,11 @@ export default flat({
       download: '下载PDF',
       edit: '编辑账单',
       duplicate: '复制账单',
+      retryUncollectible: {
+        title: '重新收款',
+        tip: '确定要重新尝试收取该笔账单吗？系统将再次尝试向客户发起扣款。',
+        success: '重新收款请求已提交',
+      },
       attention: '未完成的账单',
       returnStake: {
         title: '退还质押',
@@ -1136,8 +1142,8 @@ export default flat({
       apiConfig: 'API配置',
       commissionConfig: '分成配置',
       status: '状态',
-      servicePublicKey: '服务公钥',
-      servicePublicKeyDescription: '用于供应商通信认证',
+      brokerDID: '平台 DID',
+      brokerPublicKey: '平台公钥',
     },
     subscription: {
       view: '查看订阅',
@@ -1496,6 +1502,7 @@ export default flat({
     image: '无图片',
     refunds: '没有退款记录',
     invoices: '没有账单',
+    invoiceItems: '没有账单明细',
     subscriptions: '没有订阅记录',
     customers: '没有客户',
     products: '没有产品',

package/src/pages/admin/billing/subscriptions/detail.tsx

@@ -33,6 +33,8 @@ import SubscriptionMetrics from '../../../../components/subscription/metrics';
 import DiscountInfo from '../../../../components/discount/discount-info';
 import { goBackOrFallback } from '../../../../libs/util';
 import InfoRowGroup from '../../../../components/info-row-group';
+import VendorServiceList from '../../../../components/subscription/vendor-service-list';
+import { useSessionContext } from '../../../../contexts/session';
 
 const fetchData = (id: string): Promise<TSubscriptionExpanded> => {
   return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
@@ -40,6 +42,7 @@ const fetchData = (id: string): Promise<TSubscriptionExpanded> => {
 
 export default function SubscriptionDetail(props: { id: string }) {
   const { t } = useLocaleContext();
+  const { session } = useSessionContext();
   const { isMobile } = useMobile();
   const [state, setState] = useSetState({
     adding: {
@@ -178,7 +181,7 @@ export default function SubscriptionDetail(props: { id: string }) {
                 md: 3,
               },
             }}>
-            <SubscriptionMetrics subscription={data} showBalance={false} />
+            <SubscriptionMetrics subscription={data} mode="admin" />
           </Stack>
         </Box>
         <Divider />
@@ -273,7 +276,6 @@ export default function SubscriptionDetail(props: { id: string }) {
                 <InfoRow label={t('common.resumesAt')} value={formatTime(data.pause_collection.resumes_at * 1000)} />
               )}
               <InfoRow label={t('admin.subscription.collectionMethod')} value={data.collection_method} />
-              <InfoRow label={t('admin.subscription.discount')} value={data.discount_id ? data.discount_id : ''} />
               <InfoRow
                 label={t('admin.paymentCurrency.name')}
                 value={
@@ -314,9 +316,17 @@ export default function SubscriptionDetail(props: { id: string }) {
             </InfoRowGroup>
           </Box>
           <Divider />
-
           {/* Discount Information */}
-          {(data as any).discountStats && <DiscountInfo discountStats={(data as any).discountStats} />}
+          {(data as any).discountStats && (
+            <Box className="section">
+              <Typography variant="h3" className="section-header" sx={{ mb: 1.5 }}>
+                {t('admin.subscription.discount')}
+              </Typography>
+              <Box className="section-body">
+                <DiscountInfo discountStats={(data as any).discountStats} />
+              </Box>
+            </Box>
+          )}
 
           <Box className="section">
             <SectionHeader title={t('admin.product.pricing')} />
@@ -324,6 +334,35 @@ export default function SubscriptionDetail(props: { id: string }) {
               <SubscriptionItemList data={data.items} currency={data.paymentCurrency} mode="admin" />
             </Box>
           </Box>
+          {(() => {
+            const vendorServices = data.items?.map((item) => item.price?.product?.vendor_config || []).flat();
+            if (!vendorServices || vendorServices.length === 0) return null;
+            return (
+              <>
+                <Divider />
+                <Box
+                  className="section"
+                  sx={{
+                    '.section-header': {
+                      fontSize: {
+                        xs: '18px',
+                        md: '1.09375rem',
+                      },
+                    },
+                    '.vendor-service-item': {
+                      maxWidth: '400px',
+                    },
+                  }}>
+                  <VendorServiceList
+                    vendorServices={vendorServices}
+                    subscriptionId={data.id}
+                    isOwner={session?.user?.did === data.customer?.did}
+                    isCanceled={data.status === 'canceled'}
+                  />
+                </Box>
+              </>
+            );
+          })()}
           <Divider />
           {isCredit ? (
             <Box className="section">

package/src/pages/admin/products/coupons/applicable-products.tsx

@@ -11,7 +11,6 @@ import {
 } from '@blocklet/payment-react';
 import type { TProductExpanded } from '@blocklet/payment-types';
 import { Avatar, Stack, Typography, Box } from '@mui/material';
-import { styled } from '@mui/system';
 import { Link } from 'react-router-dom';
 
 interface Props {
@@ -126,41 +125,25 @@ export default function ApplicableProductsList({ products }: Props) {
   ].filter(Boolean);
 
   return (
-    <ApplicableProductsTableRoot>
-      <Table
-        data={products}
-        columns={columns}
-        loading={false}
-        footer={false}
-        toolbar={false}
-        components={{
-          TableToolbar: () => null,
-          TableFooter: () => null,
-        }}
-        mobileTDFlexDirection="row"
-        options={{
-          count: products.length,
-          page: 0,
-          rowsPerPage: 100,
-          selectableRows: 'none',
-          pagination: false,
-        }}
-        emptyNodeText={t('admin.coupon.noApplicableProducts')}
-      />
-    </ApplicableProductsTableRoot>
+    <Table
+      data={products}
+      columns={columns}
+      loading={false}
+      footer={false}
+      toolbar={false}
+      components={{
+        TableToolbar: () => null,
+        TableFooter: () => null,
+      }}
+      mobileTDFlexDirection="row"
+      options={{
+        count: products.length,
+        page: 0,
+        rowsPerPage: 100,
+        selectableRows: 'none',
+        pagination: false,
+      }}
+      emptyNodeText={t('admin.coupon.noApplicableProducts')}
+    />
   );
 }
-
-const ApplicableProductsTableRoot = styled(Box)`
-  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
-    .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
-      align-items: center;
-      padding: 4px 0;
-      > div {
-        width: fit-content;
-        flex: inherit;
-        font-size: 14px;
-      }
-    }
-  }
-`;

package/src/pages/admin/products/products/detail.tsx

@@ -389,7 +389,6 @@ export default function ProductDetail(props: { id: string }) {
             </Box>
           </Box>
           <Divider />
-          {/* 供应商配置展示 */}
           {data.type === 'service' && (
             <>
               <Box className="section">
@@ -429,13 +428,9 @@ export default function ProductDetail(props: { id: string }) {
                             borderColor: 'divider',
                             borderRadius: 1,
                             backgroundColor: 'background.paper',
+                            maxWidth: '600px',
                           }}>
-                          <Stack
-                            direction="row"
-                            sx={{
-                              justifyContent: 'space-between',
-                              alignItems: 'center',
-                            }}>
+                          <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
                             <Box>
                               <Typography variant="body1" sx={{ color: 'text.primary', fontWeight: 500 }}>
                                 {vendor.name || vendor.vendor_key || vendor.vendor_id}
@@ -446,15 +441,10 @@ export default function ProductDetail(props: { id: string }) {
                                 </Typography>
                               )}
                             </Box>
-                            <Stack
-                              direction="row"
-                              spacing={3}
-                              sx={{
-                                alignItems: 'center',
-                              }}>
+                            <Stack direction="row" spacing={3} sx={{ alignItems: 'center' }}>
                               <Typography variant="body2" sx={{ color: 'text.secondary' }}>
                                 {vendor.commission_type === 'percentage'
-                                  ? t('admin.vendor.percentage')
+                                  ? t('admin.vendor.commission')
                                   : t('admin.vendor.fixedAmount')}
                               </Typography>
                               <Typography variant="body1" sx={{ color: 'text.primary', fontWeight: 600 }}>

package/src/pages/admin/products/vendors/index.tsx

@@ -185,69 +185,78 @@ export default function VendorsList() {
     setDetailOpen(true);
   };
 
-  const handleCopyPublicKey = async () => {
+  const handleCopyValue = async (value: string) => {
     try {
-      await navigator.clipboard.writeText(window.blocklet.appPk);
+      await navigator.clipboard.writeText(value);
       setCopySuccess(true);
       setTimeout(() => setCopySuccess(false), 2000);
     } catch (err) {
-      console.error('Failed to copy public key:', err);
+      console.error('Failed to copy value:', err);
     }
   };
 
+  const brokerInfo = [
+    ...(window.blocklet.appId ? [{ label: t('admin.vendor.brokerDID'), value: window.blocklet.appId }] : []),
+    ...(window.blocklet.appPk ? [{ label: t('admin.vendor.brokerPublicKey'), value: window.blocklet.appPk }] : []),
+  ];
+
   return (
     <>
-      {/* 供应商服务公钥展示 */}
-      {window.blocklet.appPk && (
+      {/* Broker Information */}
+      {brokerInfo.length > 0 && (
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: { xs: 'column', md: 'row' },
-            alignItems: { xs: 'flex-start', md: 'center' },
-            gap: { xs: 1, md: 0 },
-            p: { xs: 1.5, md: 2 },
-            mt: { xs: 1.5, md: 1 },
+            px: 2,
+            py: 1.5,
+            my: 2,
             borderRadius: 1,
             border: '1px solid',
             borderColor: 'divider',
+            backgroundColor: 'transparent',
+            display: 'grid',
+            gridTemplateColumns: 'max-content 1fr',
+            gap: 1,
+            alignItems: 'center',
           }}>
-          <Typography
-            variant="body2"
-            sx={{
-              color: 'text.secondary',
-              minWidth: 'fit-content',
-            }}>
-            {t('admin.vendor.servicePublicKey')}:
-            <Tooltip title={copySuccess ? t('common.copied') : t('common.copy')}>
-              <IconButton
-                size="small"
-                onClick={handleCopyPublicKey}
-                sx={{
-                  color: copySuccess ? 'success.main' : 'text.secondary',
-                  minWidth: { xs: '24px', md: '32px' },
-                  width: { xs: '24px', md: '32px' },
-                  height: { xs: '24px', md: '32px' },
-                  '&:hover': { backgroundColor: 'grey.100' },
-                }}>
-                <ContentCopy sx={{ fontSize: { xs: 16, md: 18 } }} />
-              </IconButton>
-            </Tooltip>
-          </Typography>
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 1,
-              width: { xs: '100%', md: 'auto' },
-              flex: { xs: 'none', md: 1 },
-            }}>
-            <Chip
-              sx={{ backgroundColor: 'grey.200', color: 'text.secondary' }}
-              label={window.blocklet.appPk}
-              variant="outlined"
-              size="small"
-            />
-          </Box>
+          {brokerInfo.map((info) => (
+            <>
+              <Typography
+                key={`${info.label}-label`}
+                variant="body2"
+                color="text.secondary"
+                sx={{ justifySelf: 'start' }}>
+                {info.label}:
+              </Typography>
+              <Box sx={{ display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
+                <Chip
+                  key={`${info.label}-chip`}
+                  label={info.value}
+                  size="small"
+                  sx={{
+                    flexShrink: 1,
+                    overflow: 'hidden',
+                    '& .MuiChip-label': {
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    },
+                  }}
+                />
+                <Tooltip key={`${info.label}-tooltip`} title={copySuccess ? t('common.copied') : t('common.copy')}>
+                  <IconButton
+                    size="small"
+                    onClick={() => handleCopyValue(info.value)}
+                    sx={{
+                      color: copySuccess ? 'success.main' : 'text.secondary',
+                      '&:hover': {
+                        color: 'primary.main',
+                      },
+                    }}>
+                    <ContentCopy sx={{ fontSize: 16 }} />
+                  </IconButton>
+                </Tooltip>
+              </Box>
+            </>
+          ))}
         </Box>
       )}
       <Table

package/src/pages/customer/invoice/detail.tsx

@@ -447,7 +447,7 @@ export default function CustomerInvoiceDetail() {
                   sx={{
                     mb: 1.5,
                   }}>
-                  {t('payment.customer.products')}
+                  {t('admin.invoiceItems')}
                 </Typography>
                 <InvoiceTable invoice={data} simple />
               </Box>

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

@@ -609,7 +609,6 @@ export default function CustomerSubscriptionDetail() {
           )}
 
           <InfoRow label={t('admin.subscription.collectionMethod')} value={data.collection_method} />
-          <InfoRow label={t('admin.subscription.discount')} value={data.discount_id ? data.discount_id : ''} />
 
           <InfoRow
             label={t('admin.paymentMethod._name')}
@@ -682,7 +681,17 @@ export default function CustomerSubscriptionDetail() {
       <Divider />
 
       {/* Discount Information */}
-      {(data as any).discountStats && <DiscountInfo discountStats={(data as any).discountStats} />}
+      {(data as any).discountStats && (
+        <Box className="section">
+          <Typography variant="h3" className="section-header" sx={{ mb: 1.5 }}>
+            {t('admin.subscription.discount')}
+          </Typography>
+          <Box className="section-body">
+            <DiscountInfo discountStats={(data as any).discountStats} />
+          </Box>
+        </Box>
+      )}
+      <Box className="divider" />
 
       <Box className="section">
         <Typography
@@ -706,12 +715,16 @@ export default function CustomerSubscriptionDetail() {
           <>
             <Divider />
             <Box className="section">
-              <VendorServiceList vendorServices={vendorServices} subscriptionId={id} />
+              <VendorServiceList
+                vendorServices={vendorServices}
+                subscriptionId={id}
+                isCanceled={data.status === 'canceled'}
+              />
             </Box>
           </>
         );
       })()}
-      <Divider />
+      <Box className="divider" />
       {isCredit ? (
         <Box className="section">
           <Typography variant="h3" className="section-header">