payment-kit 1.20.20 → 1.20.21

package/src/components/invoice-pdf/template.tsx

@@ -120,7 +120,7 @@ export function InvoiceTemplate({ data, t }: InvoicePDFProps) {
               </span>
             </div>
             <div style={composeStyles('w-15 p-4-8 pb-15')}>
-              <span style={composeStyles(`${itemDiscountAmount > 0 ? 'green' : 'dark'} right`)}>
+              <span style={composeStyles('dark right')}>
                 {itemDiscountAmount > 0
                   ? `-${formatAmount(itemDiscountAmount.toString(), data.paymentCurrency.decimal)} ${
                       data.paymentCurrency.symbol
@@ -138,24 +138,56 @@ export function InvoiceTemplate({ data, t }: InvoicePDFProps) {
       })}
 
       {/* Summary */}
-      <div style={composeStyles('flex')}>
-        <div style={composeStyles('w-60 mt-20')} />
-        <div style={composeStyles('w-40 mt-20')}>
-          {summary.map((line) => (
-            <div style={composeStyles('flex')} key={line.key}>
-              <div style={composeStyles('w-60 p-5')}>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'flex-end',
+          float: 'right',
+          paddingRight: '8px',
+          marginTop: '8px',
+          width: '100%',
+          minWidth: '280px',
+        }}>
+        {summary.map((line) => {
+          const isTotal = line.key === 'Total' || line.key === 'common.total' || line.key === 'payment.total';
+          const showDivider = isTotal;
+
+          return (
+            <div key={line.key} style={{ width: '100%' }}>
+              {showDivider && (
+                <div
+                  style={{
+                    borderTop: '1px solid #e3e3e3',
+                    width: '100%',
+                    marginBottom: '8px',
+                    marginTop: '4px',
+                  }}
+                />
+              )}
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'flex-end',
+                  width: '100%',
+                  padding: '4px 0',
+                  paddingRight: '8%',
+                  gap: '20px',
+                }}>
                 <span style={composeStyles('bold')}>
                   {line.key.startsWith('common.') || line.key.startsWith('payment.') ? t(line.key) : line.key}
                 </span>
-              </div>
-              <div style={composeStyles('w-40 p-5')}>
-                <span style={composeStyles('right bold dark')}>
+                <span
+                  style={{
+                    ...composeStyles('bold dark text-right'),
+                    minWidth: '80px',
+                  }}>
                   {line.value} {data.paymentCurrency.symbol}
                 </span>
               </div>
             </div>
-          ))}
-        </div>
+          );
+        })}
       </div>
     </div>
   );

package/src/components/metadata/list.tsx

@@ -22,6 +22,7 @@ export default function MetadataList({
           variant="subtitle1"
           sx={{
             color: 'text.primary',
+            fontWeight: 500,
           }}>
           {t('common.metadata.empty')}
         </Typography>

package/src/components/subscription/metrics.tsx

@@ -13,6 +13,7 @@ import SubscriptionStatus from './status';
 type Props = {
   subscription: TSubscriptionExpanded;
   showBalance?: boolean;
+  mode?: 'portal' | 'admin';
 };
 
 const fetchUpcoming = (id: string): Promise<{ amount: string }> => {
@@ -35,7 +36,7 @@ const fetchCreditBalance = ({
     .then((res) => res.data);
 };
 
-export default function SubscriptionMetrics({ subscription, showBalance = true }: Props) {
+export default function SubscriptionMetrics({ subscription, showBalance = true, mode = 'portal' }: Props) {
   const { t } = useLocaleContext();
   const isCredit = subscription.paymentCurrency?.type === 'credit';
   const { data: upcoming, loading: upcomingLoading } = useRequest(() => fetchUpcoming(subscription.id));
@@ -59,6 +60,7 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
   );
 
   const supportShowBalance = showBalance && ['arcblock', 'ethereum', 'base'].includes(subscription.paymentMethod.type);
+
   // let scheduleToCancelTime = 0;
   // if (['active', 'trialing', 'past_due'].includes(subscription.status) && subscription.cancel_at) {
   //   scheduleToCancelTime = subscription.cancel_at * 1000;
@@ -69,7 +71,7 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
   const isInsufficientBalance = new BN(payerValue?.token || '0').lt(new BN(upcoming?.amount || '0'));
 
   const handleRecharge = () => {
-    if (isCredit) {
+    if (isCredit || mode !== 'portal') {
       return;
     }
     navigate(`/customer/subscription/${subscription.id}/recharge`);
@@ -80,7 +82,9 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
       return <CircularProgress size={16} />;
     }
 
-    if (isInsufficientBalance && !isCredit) {
+    const canRecharge = mode === 'portal';
+
+    if (isInsufficientBalance && !isCredit && canRecharge) {
       return (
         <Button
           component="a"

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.',
@@ -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: '退还质押',
@@ -1496,6 +1502,7 @@ export default flat({
     image: '无图片',
     refunds: '没有退款记录',
     invoices: '没有账单',
+    invoiceItems: '没有账单明细',
     subscriptions: '没有订阅记录',
     customers: '没有客户',
     products: '没有产品',

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

@@ -178,7 +178,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 +273,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={
@@ -316,7 +315,16 @@ export default function SubscriptionDetail(props: { id: string }) {
           <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')} />

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/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
@@ -711,7 +720,7 @@ export default function CustomerSubscriptionDetail() {
           </>
         );
       })()}
-      <Divider />
+      <Box className="divider" />
       {isCredit ? (
         <Box className="section">
           <Typography variant="h3" className="section-header">