payment-kit 1.18.39 → 1.18.41

package/src/components/subscription/status.tsx

@@ -1,5 +1,5 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Status, formatToDate, getSubscriptionStatusColor, formatSubscriptionStatus } from '@blocklet/payment-react';
+import { Status, getSubscriptionStatusColor, formatSubscriptionStatus, getLineTimeInfo } from '@blocklet/payment-react';
 import type { TSubscription } from '@blocklet/payment-types';
 import { AccessTimeOutlined } from '@mui/icons-material';
 
@@ -13,10 +13,14 @@ export default function SubscriptionStatus({
   const { t } = useLocaleContext();
   if (subscription.status === 'active' || subscription.status === 'trialing') {
     if (subscription.cancel_at_period_end && subscription.current_period_end > Date.now() / 1000) {
+      const dateInfo = getLineTimeInfo(subscription.current_period_end * 1000);
       return (
         <Status
           icon={<AccessTimeOutlined />}
-          label={t('admin.subscription.cancel.will', { date: formatToDate(subscription.current_period_end * 1000) })}
+          label={t('admin.subscription.cancel.will', {
+            date: dateInfo.time,
+            prefix: dateInfo.isToday ? 'at' : 'on',
+          })}
           color="warning"
           {...rest}
         />
@@ -24,10 +28,14 @@ export default function SubscriptionStatus({
     }
 
     if (subscription.cancel_at && subscription.cancel_at >= Date.now() / 1000) {
+      const dateInfo = getLineTimeInfo(subscription.cancel_at * 1000);
       return (
         <Status
           icon={<AccessTimeOutlined />}
-          label={t('admin.subscription.cancel.will', { date: formatToDate(subscription.cancel_at * 1000) })}
+          label={t('admin.subscription.cancel.will', {
+            date: dateInfo.time,
+            prefix: dateInfo.isToday ? 'at' : 'on',
+          })}
           color="warning"
           {...rest}
         />
@@ -35,10 +43,12 @@ export default function SubscriptionStatus({
     }
 
     if (subscription.trial_end && subscription.trial_end > Date.now() / 1000) {
+      const dateInfo = getLineTimeInfo(subscription.trial_end * 1000);
       return (
         <Status
           label={t('admin.subscription.trialEnd', {
-            date: formatToDate(subscription.trial_end * 1000),
+            date: dateInfo.time,
+            prefix: dateInfo.isToday ? 'at' : 'on',
           })}
           color="info"
           {...rest}
@@ -49,11 +59,13 @@ export default function SubscriptionStatus({
 
   if (subscription.pause_collection && ['active', 'trialing'].includes(subscription.status)) {
     if (subscription.pause_collection.resumes_at && subscription.pause_collection.resumes_at > Date.now() / 1000) {
+      const dateInfo = getLineTimeInfo(subscription.pause_collection.resumes_at * 1000);
       return (
         <Status
           icon={<AccessTimeOutlined />}
           label={t('admin.subscription.pause.until.custom', {
-            date: formatToDate(subscription.pause_collection.resumes_at * 1000),
+            date: dateInfo.time,
+            prefix: dateInfo.isToday ? 'at' : 'on',
           })}
           color="default"
           {...rest}

package/src/locales/en.tsx

@@ -506,7 +506,7 @@ export default flat({
       attention: 'Uncollectible invoices',
       name: 'Invoice',
       from: 'Billed from',
-      empty: 'No invoice',
+      empty: 'No invoices',
       number: 'Invoice Number',
       description: 'Billing Description',
       dueDate: 'Due',
@@ -522,7 +522,7 @@ export default flat({
     subscription: {
       view: 'View subscription',
       name: 'Subscription',
-      empty: 'No subscription',
+      empty: 'No subscriptions',
       viewAll: 'View all subscriptions',
       noActiveEmpty: 'You currently have no active subscriptions. You can choose to view your subscription history.',
       attention: 'Past due subscriptions',
@@ -530,7 +530,10 @@ export default flat({
       collectionMethod: 'Billing',
       currentPeriod: 'Current Period',
       trialingPeriod: 'Trial Period',
-      trialEnd: 'Trial ends {date}',
+      trialEnd: 'Trial ends {prefix} {date}',
+      willEnd: 'Will end {prefix} {date}',
+      ended: 'Ended {prefix} {date}',
+      renew: 'Renew {prefix} {date}',
       discount: 'Discount',
       startedAt: 'Started',
       nextInvoice: 'Next Invoice',
@@ -547,7 +550,7 @@ export default flat({
         schedule: 'Scheduled to cancel',
         title: 'Cancel subscription',
         required: 'Custom cancel time is required',
-        will: 'End on {date}',
+        will: 'End {prefix} {date}',
         done: 'Canceled',
         at: {
           title: 'Cancel',
@@ -813,10 +816,12 @@ export default flat({
   customer: {
     subscription: {
       cancel: 'Cancel Subscription',
+      manage: 'Manage Subscription',
+      title: 'Subscriptions',
     },
     invoiceHistory: 'Invoice History',
     product: {
-      empty: 'No Product',
+      empty: 'No Products',
     },
     recharge: {
       title: 'Add Funds',
@@ -885,12 +890,12 @@ export default flat({
       donation: 'Donation',
     },
     payout: {
-      empty: 'No Payout',
+      empty: 'No Revenues',
       payer: 'Payer',
       receiver: 'Receiver',
       payTxHash: 'Payment TxHash',
       viewReference: 'View Reference',
-      title: 'Revenue',
+      title: 'Revenues',
     },
     pastDue: {
       warning: 'You have due invoices, please pay them to keep your services active',

package/src/locales/zh.tsx

@@ -519,7 +519,10 @@ export default flat({
       collectionMethod: '计费',
       currentPeriod: '当前周期',
       trialingPeriod: '试用期',
-      trialEnd: '试用期结束于{date}',
+      trialEnd: '试用期结束于 {date}',
+      willEnd: '将于 {date} 结束',
+      ended: '结束于 {date}',
+      renew: '下次续费: {date}',
       discount: '折扣',
       startedAt: '开始于',
       nextInvoice: '下次账单时间',
@@ -535,7 +538,7 @@ export default flat({
         schedule: '计划取消',
         title: '取消订阅',
         required: '必须指定自定义取消时间',
-        will: '于{date}取消',
+        will: '于 {date} 取消',
         done: '已取消',
         at: {
           title: '取消',
@@ -789,6 +792,7 @@ export default flat({
   },
   customer: {
     subscription: {
+      manage: '管理订阅',
       cancel: '取消订阅',
     },
     invoiceHistory: '历史账单',

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

@@ -172,11 +172,7 @@ export default function InvoiceDetail(props: { id: string }) {
                 sm: 'column',
                 md: 'row',
               },
-              alignItems: {
-                xs: 'flex-start',
-                sm: 'flex-start',
-                md: 'center',
-              },
+              alignItems: 'flex-start',
               gap: {
                 xs: 1,
                 sm: 1,

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

@@ -143,11 +143,7 @@ export default function SubscriptionDetail(props: { id: string }) {
                 sm: 'column',
                 md: 'row',
               },
-              alignItems: {
-                xs: 'flex-start',
-                sm: 'flex-start',
-                md: 'center',
-              },
+              alignItems: 'flex-start',
               gap: {
                 xs: 1,
                 sm: 1,

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

@@ -232,11 +232,7 @@ export default function CustomerDetail(props: { id: string }) {
                 sm: 'column',
                 md: 'row',
               },
-              alignItems: {
-                xs: 'flex-start',
-                sm: 'flex-start',
-                md: 'center',
-              },
+              alignItems: 'flex-start',
               gap: {
                 xs: 1,
                 sm: 1,

package/src/pages/admin/developers/events/detail.tsx

@@ -85,11 +85,7 @@ export default function EventDetail(props: { id: string }) {
                 sm: 'column',
                 md: 'row',
               },
-              alignItems: {
-                xs: 'flex-start',
-                sm: 'flex-start',
-                md: 'center',
-              },
+              alignItems: 'flex-start',
               gap: {
                 xs: 1,
                 sm: 1,

package/src/pages/admin/developers/index.tsx

@@ -47,7 +47,7 @@ export default function DevelopersIndex() {
 
   return (
     <div>
-      <Typography variant="h5" sx={{ mb: 1, fontWeight: 600 }}>
+      <Typography variant="h5" sx={{ mb: 1 }}>
         {t('admin.developers')}
       </Typography>
       {/* @ts-ignore */}

package/src/pages/admin/developers/webhooks/detail.tsx

@@ -49,9 +49,7 @@ export default function WebhookDetail(props: { id: string }) {
         <Box mt={2}>
           <Stack direction="row" justifyContent="space-between" alignItems="center">
             <Stack direction="column" alignItems="flex-start">
-              <Typography variant="h5" fontWeight={600}>
-                {data.url}
-              </Typography>
+              <Typography variant="h5">{data.url}</Typography>
               <Typography variant="body1" color="text.secondary">
                 {data.description}
               </Typography>

package/src/pages/admin/overview.tsx

@@ -222,19 +222,19 @@ export default function Overview() {
             </Button>
           </Stack>
           <Stack direction="column" gap={1}>
-            <Typography component="h4" variant="h5">
+            <Typography component="h4" variant="subtitle1">
               {t('admin.paymentIntent.list')}
             </Typography>
             <Chart loading={!trend.data} height={320} data={payments} currencies={currencies} />
           </Stack>
           <Stack direction="column" gap={1}>
-            <Typography component="h4" variant="h5">
+            <Typography component="h4" variant="subtitle1">
               {t('admin.payouts')}
             </Typography>
             <Chart loading={!trend.data} height={320} data={payouts} currencies={currencies} />
           </Stack>
           <Stack direction="column" gap={1}>
-            <Typography component="h4" variant="h5">
+            <Typography component="h4" variant="subtitle1">
               {t('admin.refunds')}
             </Typography>
             <Chart loading={!trend.data} height={320} data={refunds} currencies={currencies} />
@@ -298,7 +298,7 @@ export default function Overview() {
                         sx={{ width: 36, height: 36 }}
                       />
                       <Box flex={1}>
-                        <Typography variant="h5" component="div" sx={{ fontSize: '1.75rem' }}>
+                        <Typography variant="body1" component="div" sx={{ fontSize: '1.75rem' }}>
                           {formatBNStr(
                             summary.data?.balances?.[currencyId] as string,
                             currencies[currencyId]?.decimal as number

package/src/pages/admin/payments/intents/detail.tsx

@@ -161,11 +161,7 @@ export default function PaymentIntentDetail(props: { id: string }) {
                 sm: 'column',
                 md: 'row',
               },
-              alignItems: {
-                xs: 'flex-start',
-                sm: 'flex-start',
-                md: 'center',
-              },
+              alignItems: 'flex-start',
               gap: {
                 xs: 1,
                 sm: 1,

package/src/pages/admin/payments/payouts/detail.tsx

@@ -182,11 +182,7 @@ export default function PayoutDetail(props: { id: string }) {
                 sm: 'column',
                 md: 'row',
               },
-              alignItems: {
-                xs: 'flex-start',
-                sm: 'flex-start',
-                md: 'center',
-              },
+              alignItems: 'flex-start',
               gap: {
                 xs: 1,
                 sm: 1,

package/src/pages/admin/payments/refunds/detail.tsx

@@ -156,11 +156,7 @@ export default function RefundDetail(props: { id: string }) {
                 sm: 'column',
                 md: 'row',
               },
-              alignItems: {
-                xs: 'flex-start',
-                sm: 'flex-start',
-                md: 'center',
-              },
+              alignItems: 'flex-start',
               gap: {
                 xs: 1,
                 sm: 1,

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

@@ -171,11 +171,7 @@ export default function PaymentLinkDetail(props: { id: string }) {
                 sm: 'column',
                 md: 'row',
               },
-              alignItems: {
-                xs: 'flex-start',
-                sm: 'flex-start',
-                md: 'center',
-              },
+              alignItems: 'flex-start',
               gap: {
                 xs: 1,
                 sm: 1,

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

@@ -161,11 +161,7 @@ export default function PriceDetail(props: { id: string }) {
                 sm: 'column',
                 md: 'row',
               },
-              alignItems: {
-                xs: 'flex-start',
-                sm: 'flex-start',
-                md: 'center',
-              },
+              alignItems: 'flex-start',
               gap: {
                 xs: 1,
                 sm: 1,

package/src/pages/admin/products/pricing-tables/detail.tsx

@@ -157,11 +157,7 @@ export default function PricingTableDetail(props: { id: string }) {
                 sm: 'column',
                 md: 'row',
               },
-              alignItems: {
-                xs: 'flex-start',
-                sm: 'flex-start',
-                md: 'center',
-              },
+              alignItems: 'flex-start',
               gap: {
                 xs: 1,
                 sm: 1,

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

@@ -197,11 +197,7 @@ export default function ProductDetail(props: { id: string }) {
                 sm: 'column',
                 md: 'row',
               },
-              alignItems: {
-                xs: 'flex-start',
-                sm: 'flex-start',
-                md: 'center',
-              },
+              alignItems: 'flex-start',
               gap: {
                 xs: 1,
                 sm: 1,

package/src/pages/admin/settings/payment-methods/index.tsx

@@ -421,7 +421,7 @@ export default function PaymentMethods() {
       {Object.keys(groups).map((x) => (
         <Box key={x} mt={3}>
           <Stack direction="row" alignItems="center" mb={1} flexWrap="wrap" gap={1}>
-            <Typography variant="h6" sx={{ textTransform: 'uppercase' }}>
+            <Typography variant="subtitle2" sx={{ textTransform: 'uppercase' }}>
               {x}
             </Typography>
           </Stack>