payment-kit 1.18.12 → 1.18.13

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

@@ -9,6 +9,7 @@ import {
   getPrefix,
   getSubscriptionAction,
   usePaymentContext,
+  OverdueInvoicePayment,
 } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { Button, Link, Stack, Tooltip } from '@mui/material';
@@ -22,6 +23,7 @@ import CustomerCancelForm from './cancel';
 import OverdraftProtectionDialog from '../../customer/overdraft-protection';
 import Actions from '../../actions';
 import { useUnpaidInvoicesCheckForSubscription } from '../../../hooks/subscription';
+import { isWillCanceled } from '../../../libs/util';
 
 interface ActionConfig {
   key: string;
@@ -154,6 +156,7 @@ export function SubscriptionActionsInner({
     openProtection: false,
     protectionLoading: false,
     protectionInitValues: null,
+    batchPay: false,
   });
 
   const shouldFetchDelegation = showDelegation && ['active', 'trialing', 'past_due'].includes(subscription?.status);
@@ -320,7 +323,7 @@ export function SubscriptionActionsInner({
   const renderActions = () => {
     const supportUnsubscribe = action?.action === 'cancel' && showUnsubscribe;
     const supportAction = action && (action?.action !== 'cancel' || supportUnsubscribe);
-
+    const supportResume = isWillCanceled(subscription) && action?.action === 'recover';
     const serviceActions = subscription.service_actions?.filter((x: any) => x?.type !== 'notification') || [];
     const actionConfigs: ActionConfig[] = [
       {
@@ -351,7 +354,7 @@ export function SubscriptionActionsInner({
         },
         variant: 'outlined',
         color: 'primary',
-        primary: true,
+        primary: !isWillCanceled(subscription),
       },
       {
         key: 'changePlan',
@@ -371,7 +374,9 @@ export function SubscriptionActionsInner({
         label: action?.text || t('admin.subscription.batchPay.button'),
         onClick: (e) => {
           e?.stopPropagation();
-          navigate(`/customer/invoice/past-due?subscription=${subscription.id}&currency=${extraActions?.batchPay}`);
+          setState({
+            batchPay: true,
+          });
         },
         variant: 'outlined',
         color: 'error',
@@ -397,6 +402,7 @@ export function SubscriptionActionsInner({
         color: action?.color || 'primary',
         sx: action?.sx,
         divider: serviceActions.length > 0,
+        primary: supportResume,
       },
       // @ts-ignore
       ...serviceActions.map((x) => ({
@@ -445,7 +451,7 @@ export function SubscriptionActionsInner({
       </Button>
     );
     if (mode === 'menu-only') {
-      return <Actions actions={visibleActions.map(toMenuItem)} />;
+      return <Actions actions={visibleActions.map(toMenuItem)} variant="outlined" />;
     }
 
     if (mode === 'primary-buttons') {
@@ -454,7 +460,7 @@ export function SubscriptionActionsInner({
       return (
         <>
           {primaryButtons.map(toButton)}
-          {menuItems.length > 0 && <Actions actions={menuItems.map(toMenuItem)} />}
+          {menuItems.length > 0 && <Actions actions={menuItems.map(toMenuItem)} variant="outlined" />}
         </>
       );
     }
@@ -506,6 +512,21 @@ export function SubscriptionActionsInner({
           initValues={state.protectionInitValues}
         />
       )}
+
+      {state.batchPay && (
+        <OverdueInvoicePayment
+          subscriptionId={subscription.id}
+          onPaid={() => {
+            setState({ batchPay: false });
+            onChange?.('batch-pay');
+          }}
+          inSubscriptionDetail
+          dialogProps={{
+            open: state.batchPay,
+            onClose: () => setState({ batchPay: false }),
+          }}
+        />
+      )}
     </Stack>
   );
 }

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

@@ -2,7 +2,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Empty from '@arcblock/ux/lib/Empty';
 import { api, formatPrice, getSubscriptionTimeSummary, useMobile } from '@blocklet/payment-react';
-import type { Paginated, TSubscriptionExpanded } from '@blocklet/payment-types';
+import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { Avatar, AvatarGroup, Box, Button, CircularProgress, Stack, StackProps, Typography } from '@mui/material';
 import { useInfiniteScroll } from 'ahooks';
 
@@ -11,8 +11,16 @@ import SubscriptionDescription from '../description';
 import SubscriptionActions from './actions';
 import SubscriptionStatus from '../status';
 import useDelayedLoading from '../../../hooks/loading';
+import { isWillCanceled } from '../../../libs/util';
 
-const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TSubscriptionExpanded>> => {
+type SubscriptionListResponse = {
+  count: number;
+  list: TSubscriptionExpanded[];
+  paging: { page: number; pageSize: number };
+  totalCount: number;
+};
+
+const fetchData = (params: Record<string, any> = {}): Promise<SubscriptionListResponse> => {
   const search = new URLSearchParams();
   Object.keys(params).forEach((key) => {
     search.set(key, String(params[key]));
@@ -27,6 +35,7 @@ type Props = {
   onClickSubscription: (subscription: TSubscriptionExpanded) => void | Promise<void>;
   onlyActive?: boolean;
   changeActive?: (active: boolean) => void;
+  setStatusState?: (state: boolean) => void;
 } & Omit<StackProps, 'onChange'>;
 
 const pageSize = 5;
@@ -38,19 +47,25 @@ export default function CurrentSubscriptions({
   onClickSubscription,
   onlyActive,
   changeActive = () => {},
+  setStatusState = () => {},
   ...rest
 }: Props) {
   const { t } = useLocaleContext();
   const { isMobile } = useMobile();
   const listRef = useRef<HTMLDivElement | null>(null);
 
-  const { data, loadMore, loadingMore, loading, reload } = useInfiniteScroll<Paginated<TSubscriptionExpanded>>(
+  const { data, loadMore, loadingMore, loading, reload } = useInfiniteScroll<SubscriptionListResponse>(
     (d) => {
       const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
-      return fetchData({ page, pageSize, status, customer_id: id, activeFirst: true });
+      return fetchData({ page, pageSize, status, customer_id: id, activeFirst: true, showTotalCount: true });
     },
     {
       reloadDeps: [id, status],
+      onSuccess(res) {
+        if (res.totalCount > 0 || res.count > 0) {
+          setStatusState(true);
+        }
+      },
       ...(isMobile
         ? {}
         : {
@@ -68,6 +83,8 @@ export default function CurrentSubscriptions({
     return <CircularProgress />;
   }
 
+  const hasAnySubscriptions = data.totalCount > 0;
+
   const hasMore = data && data.list?.length < data.count;
   const size = { width: 48, height: 48 };
 
@@ -193,7 +210,7 @@ export default function CurrentSubscriptions({
                           }
                         }}
                         showUnsubscribe={false}
-                        showRecharge
+                        showRecharge={!isWillCanceled(subscription)}
                         actionProps={{
                           cancel: {
                             variant: 'outlined',
@@ -239,7 +256,7 @@ export default function CurrentSubscriptions({
         </>
       ) : (
         <Empty>
-          {onlyActive ? (
+          {onlyActive && hasAnySubscriptions ? (
             <Box sx={{ textAlign: 'center' }}>
               <Typography>{t('admin.subscription.noActiveEmpty')}</Typography>
               {changeActive && (
@@ -261,4 +278,5 @@ CurrentSubscriptions.defaultProps = {
   onChange: null,
   onlyActive: false,
   changeActive: null,
+  setStatusState: null,
 };

package/src/components/subscription/status.tsx

@@ -17,7 +17,7 @@ export default function SubscriptionStatus({
         <Status
           icon={<AccessTimeOutlined />}
           label={t('admin.subscription.cancel.will', { date: formatToDate(subscription.current_period_end * 1000) })}
-          color="default"
+          color="warning"
           {...rest}
         />
       );
@@ -28,7 +28,7 @@ export default function SubscriptionStatus({
         <Status
           icon={<AccessTimeOutlined />}
           label={t('admin.subscription.cancel.will', { date: formatToDate(subscription.cancel_at * 1000) })}
-          color="default"
+          color="warning"
           {...rest}
         />
       );

package/src/libs/util.ts

@@ -377,3 +377,18 @@ export function getTokenBalanceLink(method: TPaymentMethod, address: string) {
   }
   return '';
 }
+
+export function isWillCanceled(subscription: TSubscriptionExpanded) {
+  const now = Date.now() / 1000;
+  if (
+    ['active', 'trialing'].includes(subscription.status) &&
+    subscription.cancel_at_period_end &&
+    subscription.current_period_end > now
+  ) {
+    return true;
+  }
+  if (subscription.cancel_at && subscription.cancel_at > now) {
+    return true;
+  }
+  return false;
+}

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

@@ -224,7 +224,12 @@ export default function PayoutDetail(props: { id: string }) {
                       {paymentIntent?.customer?.name} ({paymentIntent?.customer?.email})
                     </Typography>
                   }
-                  description={<DID did={paymentIntent?.customer?.did} />}
+                  description={
+                    <DID
+                      did={paymentIntent?.customer?.did}
+                      {...(isMobile ? { responsive: false, compact: true } : {})}
+                    />
+                  }
                   size={40}
                   variant="rounded"
                 />