payment-kit 1.14.21 → 1.14.22

package/src/components/subscription/portal/actions.tsx

@@ -12,15 +12,28 @@ import { useNavigate } from 'react-router-dom';
 
 import CustomerCancelForm from './cancel';
 
+type ActionProps = {
+  [key: string]: {
+    color?: string;
+    variant?: string;
+    sx?: {
+      [key: string]: any;
+    };
+    text?: string;
+  };
+};
+
 type Props = {
   subscription: TSubscriptionExpanded;
   showExtra?: boolean;
   onChange?: (action?: string) => any | Promise<any>;
+  actionProps?: ActionProps;
 };
 
 SubscriptionActions.defaultProps = {
   showExtra: false,
   onChange: null,
+  actionProps: {},
 };
 
 const fetchExtraActions = async ({
@@ -54,12 +67,12 @@ const fetchExtraActions = async ({
   return { changePlan, batchPay };
 };
 
-export function SubscriptionActionsInner({ subscription, showExtra, onChange }: Props) {
+export function SubscriptionActionsInner({ subscription, showExtra, onChange, actionProps }: Props) {
   const { t, locale } = useLocaleContext();
   const { reset, getValues } = useFormContext();
   const navigate = useNavigate();
   const [subs, setSubscription] = useState(subscription);
-  const action = getSubscriptionAction(subs);
+  const action = getSubscriptionAction(subs, actionProps ?? {});
 
   const { data: extraActions } = useRequest(() => fetchExtraActions({ id: subscription.id, showExtra: !!showExtra }));
 
@@ -107,13 +120,15 @@ export function SubscriptionActionsInner({ subscription, showExtra, onChange }:
   };
 
   return (
-    <Stack direction="row" alignItems="center" spacing={1}>
+    <Stack direction="row" alignItems="center" gap={1} flexWrap="wrap">
       {!extraActions?.batchPay && action && (
         <Button
           variant={action.variant as any}
           color={action.color as any}
           size="small"
-          onClick={() => {
+          sx={action?.sx as any}
+          onClick={(e) => {
+            e.stopPropagation();
             if (action.action === 'pastDue') {
               navigate(`/customer/invoice/past-due?subscription=${subscription.id}`);
             } else {
@@ -123,7 +138,7 @@ export function SubscriptionActionsInner({ subscription, showExtra, onChange }:
               });
             }
           }}>
-          {t(`payment.customer.${action.action}.button`)}
+          {action?.text || t(`payment.customer.${action.action}.button`)}
         </Button>
       )}
       {extraActions?.changePlan && (
@@ -131,10 +146,12 @@ export function SubscriptionActionsInner({ subscription, showExtra, onChange }:
           variant="contained"
           color="primary"
           size="small"
-          onClick={() => {
+          sx={action?.sx as any}
+          onClick={(e) => {
+            e.stopPropagation();
             navigate(`/customer/subscription/${subscription.id}/change-plan`);
           }}>
-          {t('payment.customer.changePlan.button')}
+          {action?.text || t('payment.customer.changePlan.button')}
         </Button>
       )}
       {!!extraActions?.batchPay && (
@@ -142,10 +159,12 @@ export function SubscriptionActionsInner({ subscription, showExtra, onChange }:
           variant="contained"
           color="info"
           size="small"
-          onClick={() => {
+          sx={action?.sx as any}
+          onClick={(e) => {
+            e.stopPropagation();
             navigate(`/customer/invoice/past-due?subscription=${subscription.id}&currency=${extraActions.batchPay}`);
           }}>
-          {t('admin.subscription.batchPay.button')}
+          {action?.text || t('admin.subscription.batchPay.button')}
         </Button>
       )}
       {subscription.service_actions?.map((x) => (
@@ -165,7 +184,10 @@ export function SubscriptionActionsInner({ subscription, showExtra, onChange }:
       {state.action === 'cancel' && state.subscription && (
         <ConfirmDialog
           onConfirm={handleCancel}
-          onCancel={() => setState({ action: '', subscription: '' })}
+          onCancel={(e) => {
+            e.stopPropagation();
+            setState({ action: '', subscription: '' });
+          }}
           title={t('payment.customer.cancel.title')}
           message={<CustomerCancelForm data={subscription} />}
           loading={state.loading}
@@ -174,7 +196,10 @@ export function SubscriptionActionsInner({ subscription, showExtra, onChange }:
       {state.action === 'recover' && state.subscription && (
         <ConfirmDialog
           onConfirm={handleRecover}
-          onCancel={() => setState({ action: '', subscription: '' })}
+          onCancel={(e) => {
+            e.stopPropagation();
+            setState({ action: '', subscription: '' });
+          }}
           title={t('payment.customer.recover.title')}
           message={t('payment.customer.recover.description', {
             date: formatToDate(subscription.current_period_end * 1000),
@@ -207,4 +232,5 @@ export default function SubscriptionActions(props: Props) {
 SubscriptionActionsInner.defaultProps = {
   showExtra: false,
   onChange: null,
+  actionProps: {},
 };

package/src/components/subscription/portal/list.tsx

@@ -6,6 +6,8 @@ import {
   formatPrice,
   getSubscriptionStatusColor,
   getSubscriptionTimeSummary,
+  useMobile,
+  formatSubscriptionStatus,
 } from '@blocklet/payment-react';
 import type { Paginated, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { Avatar, AvatarGroup, Box, Button, CircularProgress, Stack, StackProps, Typography } from '@mui/material';
@@ -33,6 +35,7 @@ const pageSize = 4;
 
 export default function CurrentSubscriptions({ id, status, onChange, onClickSubscription, ...rest }: Props) {
   const { t } = useLocaleContext();
+  const { isMobile } = useMobile();
 
   const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TSubscriptionExpanded>>(
     (d) => {
@@ -57,80 +60,138 @@ export default function CurrentSubscriptions({ id, status, onChange, onClickSubs
 
   return (
     <Stack direction="column" spacing={2} sx={{ mt: 2 }}>
-      {data.list.map((subscription) => {
-        return (
-          <Stack
-            key={subscription.id}
-            direction="row"
-            justifyContent="space-between"
-            gap={{
-              xs: 1,
-              sm: 2,
-            }}
-            sx={{
-              padding: 1,
-              '&:hover': {
-                backgroundColor: 'grey.50',
-                transition: 'background-color 200ms linear',
-                cursor: 'pointer',
-              },
-            }}
-            flexWrap="wrap">
-            <Stack
-              direction="column"
-              flex={1}
-              spacing={0.5}
-              onClick={() => onClickSubscription(subscription)}
-              {...rest}>
-              <Stack direction="row" spacing={1} alignItems="center">
-                <AvatarGroup max={3}>
-                  {subscription.items.map((item) =>
-                    item.price.product.images.length > 0 ? (
-                      // @ts-ignore
-                      <Avatar
-                        key={item.price.product_id}
-                        src={item.price.product.images[0]}
-                        alt={item.price.product.name}
-                        variant="rounded"
-                        sx={size}
-                      />
-                    ) : (
-                      <Avatar key={item.price.product_id} variant="rounded" sx={size}>
-                        {item.price.product.name.slice(0, 1)}
-                      </Avatar>
-                    )
-                  )}
-                </AvatarGroup>
-                <Stack direction="column" spacing={0.5}>
-                  <Stack direction="row" spacing={2} alignItems="center">
-                    <SubscriptionDescription subscription={subscription} />
-                    <Status
-                      size="small"
-                      sx={{ height: 18 }}
-                      label={subscription.status}
-                      color={getSubscriptionStatusColor(subscription.status)}
+      {data.list?.length > 0 ? (
+        <>
+          {data.list.map((subscription) => {
+            return (
+              <Stack
+                key={subscription.id}
+                direction="row"
+                justifyContent="space-between"
+                gap={{
+                  xs: 1,
+                  sm: 2,
+                }}
+                sx={{
+                  padding: 1.5,
+                  background: 'var(--backgrounds-bg-subtle, #F9FAFB)',
+                  '&:hover': {
+                    backgroundColor: 'grey.50',
+                    transition: 'background-color 200ms linear',
+                    cursor: 'pointer',
+                  },
+                }}
+                flexWrap="wrap">
+                <Stack direction="column" flex={1} spacing={0.5} {...rest}>
+                  <Stack
+                    direction={isMobile ? 'column' : 'row'}
+                    spacing={1}
+                    alignItems={isMobile ? 'flex-start' : 'center'}
+                    flexWrap="wrap"
+                    justifyContent="space-between"
+                    onClick={() => onClickSubscription(subscription)}>
+                    <Stack direction="row" spacing={1.5}>
+                      <AvatarGroup max={3}>
+                        {subscription.items.map((item) =>
+                          item.price.product.images.length > 0 ? (
+                            // @ts-ignore
+                            <Avatar
+                              key={item.price.product_id}
+                              src={item.price.product.images[0]}
+                              alt={item.price.product.name}
+                              variant="rounded"
+                              sx={size}
+                            />
+                          ) : (
+                            <Avatar key={item.price.product_id} variant="rounded" sx={size}>
+                              {item.price.product.name.slice(0, 1)}
+                            </Avatar>
+                          )
+                        )}
+                      </AvatarGroup>
+                      <Stack
+                        direction="column"
+                        spacing={0.5}
+                        sx={{
+                          '.MuiTypography-body1': {
+                            fontSize: '16px',
+                          },
+                        }}>
+                        <SubscriptionDescription subscription={subscription} hideSubscription variant="body1" />
+                        <Status
+                          size="small"
+                          sx={{ height: 18, width: 'fit-content' }}
+                          label={formatSubscriptionStatus(subscription.status)}
+                          color={getSubscriptionStatusColor(subscription.status)}
+                        />
+                      </Stack>
+                    </Stack>
+                    <Stack>
+                      <Typography variant="subtitle1" fontWeight={500} fontSize={16}>
+                        {
+                          // @ts-ignore
+                          formatPrice(subscription.items[0].price, subscription.paymentCurrency)
+                        }
+                      </Typography>
+                    </Stack>
+                  </Stack>
+                  <Stack
+                    gap={1}
+                    justifyContent="space-between"
+                    flexWrap="wrap"
+                    sx={{
+                      flexDirection: {
+                        xs: 'column',
+                        lg: 'row',
+                      },
+                      alignItems: {
+                        xs: 'flex-start',
+                        lg: 'center',
+                      },
+                    }}>
+                    <Box
+                      component="div"
+                      onClick={() => onClickSubscription(subscription)}
+                      sx={{ display: 'flex', gap: 0.5, flexDirection: isMobile ? 'column' : 'row' }}>
+                      {getSubscriptionTimeSummary(subscription)
+                        .split(',')
+                        .map((x) => (
+                          <Typography key={x} variant="body1" color="text.secondary">
+                            {x}
+                          </Typography>
+                        ))}
+                    </Box>
+                    <SubscriptionActions
+                      subscription={subscription}
+                      onChange={onChange}
+                      actionProps={{
+                        cancel: {
+                          variant: 'outlined',
+                          color: 'primary',
+                        },
+                        recover: {
+                          variant: 'outlined',
+                          color: 'info',
+                        },
+                        pastDue: {
+                          variant: 'outlined',
+                          color: 'primary',
+                        },
+                      }}
                     />
                   </Stack>
-                  <Typography variant="subtitle1" fontWeight={500}>
-                    {
-                      // @ts-ignore
-                      formatPrice(subscription.items[0].price, subscription.paymentCurrency)
-                    }
-                  </Typography>
                 </Stack>
               </Stack>
-              <Stack direction="row" spacing={2} alignItems="center">
-                <Typography variant="body1" color="text.secondary">
-                  {getSubscriptionTimeSummary(subscription)}
-                </Typography>
-              </Stack>
-            </Stack>
-            <Stack direction="column" alignItems="flex-end" spacing={1}>
-              <SubscriptionActions subscription={subscription} onChange={onChange} />
-            </Stack>
-          </Stack>
-        );
-      })}
+            );
+          })}
+        </>
+      ) : (
+        <Box sx={{ textAlign: 'center' }}>
+          <Typography>📦</Typography>
+          <Typography>{t('admin.subscription.empty')}</Typography>
+        </Box>
+      )}
+
       <Box>
         {hasMore && (
           <Button variant="text" type="button" color="inherit" onClick={loadMore} disabled={loadingMore}>

package/src/components/subscription/status.tsx

@@ -1,5 +1,5 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Status, formatToDate, getSubscriptionStatusColor } from '@blocklet/payment-react';
+import { Status, formatToDate, getSubscriptionStatusColor, formatSubscriptionStatus } from '@blocklet/payment-react';
 import type { TSubscription } from '@blocklet/payment-types';
 import { AccessTimeOutlined } from '@mui/icons-material';
 
@@ -47,7 +47,7 @@ export default function SubscriptionStatus({
     }
   }
 
-  if (subscription.pause_collection) {
+  if (subscription.pause_collection && ['active', 'trialing'].includes(subscription.status)) {
     if (subscription.pause_collection.resumes_at && subscription.pause_collection.resumes_at > Date.now() / 1000) {
       return (
         <Status
@@ -64,5 +64,11 @@ export default function SubscriptionStatus({
     return <Status label={t('admin.subscription.pause.until.never')} color="default" />;
   }
 
-  return <Status label={subscription.status} color={getSubscriptionStatusColor(subscription.status)} {...rest} />;
+  return (
+    <Status
+      label={formatSubscriptionStatus(subscription.status)}
+      color={getSubscriptionStatusColor(subscription.status)}
+      {...rest}
+    />
+  );
 }

package/src/global.css

@@ -38,7 +38,7 @@ a:has(> div) {
 }
 
 .MuiFormLabel-root {
-  color: rgba(0, 0, 0, 0.8);
+  color: var(--foregrounds-fg-base, #010714);
   display: block;
   margin-bottom: 4px;
   font-weight: 500;

package/src/hooks/mobile.ts

@@ -3,12 +3,12 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 
 const MOBILE_POINT = 'md';
 
-function useMobile() {
+export function useMobile(mobilePoint: 'md' | 'sm' | 'lg' | 'xl' | 'xs' = MOBILE_POINT) {
   const theme = useTheme();
 
   return {
-    isMobile: useMediaQuery(theme.breakpoints.down(MOBILE_POINT)),
-    mobileSize: `${theme.breakpoints.values[MOBILE_POINT]}px`,
+    isMobile: useMediaQuery(theme.breakpoints.down(mobilePoint)),
+    mobileSize: `${theme.breakpoints.values[mobilePoint]}px`,
   };
 }
 

package/src/libs/util.ts

@@ -62,8 +62,12 @@ export function getPriceFromProducts(products: TProductExpanded[], priceId: stri
   return product?.prices.find((x) => x.id === priceId);
 }
 
-export function formatPaymentLinkPricing(link: TPaymentLinkExpanded, currency: TPaymentCurrency) {
-  return formatCheckoutHeadlines(link.line_items, currency, link.subscription_data?.trial_period_days || 0);
+export function formatPaymentLinkPricing(
+  link: TPaymentLinkExpanded,
+  currency: TPaymentCurrency,
+  locale: string = 'en'
+) {
+  return formatCheckoutHeadlines(link.line_items, currency, link.subscription_data?.trial_period_days || 0, locale);
 }
 
 export function getWebhookStatusColor(status: string) {

package/src/locales/en.tsx

@@ -10,7 +10,12 @@ export default flat({
       add: 'Add more metadata',
       edit: 'Edit metadata',
       empty: 'No metadata',
+      emptyTip: 'You haven’t added any metadata you can add it',
     },
+    price: 'Price',
+    add: 'Add',
+    fullscreen: 'Fullscreen',
+    exit: 'Exit',
   },
   admin: {
     balances: 'Balances',
@@ -435,7 +440,7 @@ export default flat({
         schedule: 'Scheduled to cancel',
         title: 'Cancel subscription',
         required: 'Custom cancel time is required',
-        will: 'Cancels on {date}',
+        will: 'End on {date}',
         done: 'Canceled',
         at: {
           title: 'Cancel',
@@ -502,6 +507,13 @@ export default flat({
       phone: 'Phone',
       invoicePrefix: 'Invoice Prefix',
       balance: 'Balance ({currency})',
+      summary: {
+        refund: 'Refunds',
+        spent: 'Spent',
+        due: 'Due',
+        stake: 'Stake',
+        balance: 'Balance',
+      },
       address: {
         label: 'Address',
         country: 'Country',
@@ -560,5 +572,29 @@ export default flat({
   },
   empty: {
     image: 'No Image',
+    refunds: 'No Refunds',
+    invoices: 'No Invoices',
+    subscriptions: 'No Subscriptions',
+    customers: 'No Customers',
+    products: 'No Products',
+    paymentLinks: 'No Payment Links',
+    paymentMethods: 'No Payment Methods',
+    pricingTables: 'No Pricing Tables',
+    paymentCurrencies: 'No Payment Currencies',
+    webhooks: 'No Webhooks',
+    events: 'No Events',
+    records: 'No matching records found',
+    payments: 'No Payments',
+    prices: 'No Prices',
+    pricing: 'You haven’t added any prices you can add it',
+  },
+  customer: {
+    subscription: {
+      cancel: 'Cancel Subscription',
+    },
+    invoiceHistory: 'Invoice History',
+    product: {
+      empty: 'No Product',
+    },
   },
 });

package/src/locales/zh.tsx

@@ -10,7 +10,12 @@ export default flat({
       add: '添加更多元数据',
       edit: '编辑元数据',
       empty: '无元数据',
+      emptyTip: '您还没有添加任何元数据，您可以添加它',
     },
+    price: '价格',
+    add: '添加',
+    fullscreen: '全屏',
+    exit: '退出',
   },
   admin: {
     balances: '余额',
@@ -27,7 +32,7 @@ export default flat({
     products: '产品定价',
     coupons: '优惠券',
     pricing: '定价',
-    pricingTables: '价格表',
+    pricingTables: '定价表',
     billing: '订阅和账单',
     invoices: '账单',
     subscriptions: '订阅',
@@ -493,6 +498,13 @@ export default flat({
       phone: '电话',
       invoicePrefix: '账单前缀',
       balance: '余额 ({currency})',
+      summary: {
+        refund: '退款金额',
+        spent: '花费金额',
+        due: '欠款金额',
+        stake: '质押金额',
+        balance: '余额',
+      },
       address: {
         label: '地址',
         country: '国家',
@@ -550,5 +562,29 @@ export default flat({
   },
   empty: {
     image: '无图片',
+    refunds: '没有退款记录',
+    invoices: '没有账单',
+    subscriptions: '没有订阅记录',
+    customers: '没有客户',
+    products: '没有产品',
+    paymentLinks: '没有支付链接',
+    paymentMethods: '没有支付方式',
+    pricingTables: '没有定价表',
+    paymentCurrencies: '没有货币',
+    webhooks: '没有钩子',
+    events: '没有事件',
+    records: '没有找到匹配的记录',
+    payments: '没有付款记录',
+    prices: '没有价格',
+    pricing: '您还没有设置定价，您可以添加它',
+  },
+  customer: {
+    subscription: {
+      cancel: '取消订阅',
+    },
+    invoiceHistory: '历史账单',
+    product: {
+      empty: '没有订阅产品',
+    },
   },
 });

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

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
-import { Typography } from '@mui/material';
+// import { Typography } from '@mui/material';
 import React, { isValidElement } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
@@ -43,10 +43,30 @@ export default function BillingIndex() {
 
   return (
     <div>
-      <Typography variant="h5" sx={{ mb: 1, fontWeight: 600 }}>
+      {/* <Typography variant="h5" sx={{ mb: 1, fontWeight: 600 }}>
         {t('admin.billing')}
-      </Typography>
-      <Tabs tabs={tabs} current={page} onChange={onTabChange} scrollButtons="auto" />
+      </Typography> */}
+      <Tabs
+        tabs={tabs}
+        current={page}
+        onChange={onTabChange}
+        scrollButtons="auto"
+        sx={{
+          '.MuiTab-root': {
+            color: 'text.lighter',
+          },
+          '.MuiTabs-indicator': {
+            display: 'none',
+          },
+          '.Mui-selected': {
+            fontSize: 24,
+            color: 'text.primary',
+          },
+          '.MuiTabs-hideScrollbar': {
+            border: 'none !important',
+          },
+        }}
+      />
       {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
     </div>
   );