payment-kit 1.18.11 → 1.18.13

package/src/app.tsx

@@ -13,7 +13,7 @@ import { Navigate, Route, BrowserRouter as Router, Routes } from 'react-router-d
 import { joinURL } from 'ufo';
 
 import ErrorFallback from './components/error-fallback';
-import Layout from './components/layout/admin';
+import UserLayout from './components/layout/user';
 import { TransitionProvider } from './components/progress-bar';
 import { SessionProvider } from './contexts/session';
 import { translations } from './locales';
@@ -68,45 +68,45 @@ function App() {
                   key="customer-home"
                   path="/customer"
                   element={
-                    <Layout padding="0">
+                    <UserLayout>
                       <CustomerHome />
-                    </Layout>
+                    </UserLayout>
                   }
                 />
                 <Route
                   key="customer-subscription"
                   path="/customer/subscription/:id"
                   element={
-                    <Layout>
+                    <UserLayout>
                       <CustomerSubscriptionDetail />
-                    </Layout>
+                    </UserLayout>
                   }
                 />
                 <Route
                   key="customer-subscription-change-plan"
                   path="/customer/subscription/:id/change-plan"
                   element={
-                    <Layout>
+                    <UserLayout>
                       <CustomerSubscriptionChangePlan />
-                    </Layout>
+                    </UserLayout>
                   }
                 />
                 <Route
                   key="customer-subscription-change-payment"
                   path="/customer/subscription/:id/change-payment"
                   element={
-                    <Layout>
+                    <UserLayout>
                       <CustomerSubscriptionChangePayment />
-                    </Layout>
+                    </UserLayout>
                   }
                 />
                 <Route
                   key="customer-recharge"
                   path="/customer/subscription/:id/recharge"
                   element={
-                    <Layout>
+                    <UserLayout>
                       <CustomerRecharge />
-                    </Layout>
+                    </UserLayout>
                   }
                 />
                 <Route
@@ -125,27 +125,27 @@ function App() {
                   key="customer-due"
                   path="/customer/invoice/past-due"
                   element={
-                    <Layout>
+                    <UserLayout>
                       <CustomerInvoicePastDue />
-                    </Layout>
+                    </UserLayout>
                   }
                 />
                 <Route
                   key="customer-invoice"
                   path="/customer/invoice/:id"
                   element={
-                    <Layout>
+                    <UserLayout>
                       <CustomerInvoiceDetail />
-                    </Layout>
+                    </UserLayout>
                   }
                 />
                 <Route
                   key="customer-payout"
                   path="/customer/payout/:id"
                   element={
-                    <Layout>
+                    <UserLayout>
                       <CustomerPayoutDetail />
-                    </Layout>
+                    </UserLayout>
                   }
                 />
                 <Route key="customer-fallback" path="/customer/*" element={<Navigate to="/customer" />} />,

package/src/components/actions.tsx

@@ -16,7 +16,7 @@ type ActionItem = {
 
 export type ActionsProps = {
   actions: ActionItem[];
-  variant?: LiteralUnion<'compact' | 'normal', string>;
+  variant?: LiteralUnion<'compact' | 'normal' | 'outlined', string>;
   sx?: any;
   onOpenCallback?: Function;
 };
@@ -58,17 +58,40 @@ export default function Actions(props: ActionsProps) {
     }
   };
 
-  return (
-    <>
-      {props.variant === 'compact' ? (
+  const renderButton = () => {
+    if (props.variant === 'outlined') {
+      return (
+        <Button
+          aria-label="actions"
+          sx={{
+            minWidth: 0,
+            padding: '5px',
+            ...props.sx,
+          }}
+          variant="outlined"
+          onClick={onOpen}
+          size="small">
+          <MoreHorizOutlined />
+        </Button>
+      );
+    }
+    if (props.variant === 'compact') {
+      return (
         <IconButton aria-label="actions" sx={props.sx} aria-haspopup="true" onClick={onOpen} size="small">
           <MoreHorizOutlined />
         </IconButton>
-      ) : (
-        <Button sx={props.sx} onClick={onOpen} size="small" variant="contained" color="primary">
-          {t('common.actions')} <ExpandMoreOutlined fontSize="small" />
-        </Button>
-      )}
+      );
+    }
+    return (
+      <Button sx={props.sx} onClick={onOpen} size="small" variant="contained" color="primary">
+        {t('common.actions')} <ExpandMoreOutlined fontSize="small" />
+      </Button>
+    );
+  };
+
+  return (
+    <>
+      {renderButton()}
       <Menu
         anchorEl={anchorEl}
         open={open}

package/src/components/copyable.tsx

@@ -1,7 +1,7 @@
 import { CopyButton } from '@arcblock/ux/lib/ClickToCopy';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { getWordBreakStyle } from '@blocklet/payment-react';
-import { Box, Stack, Typography } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
 import type { ReactNode } from 'react';
 
 interface CopyableProps {
@@ -35,7 +35,7 @@ export default function Copyable({ text, children, style }: CopyableProps) {
               {text}
             </Typography>
           )}
-          <Box sx={{ height: '1em', mt: '-0.4em' }}>{copyButton}</Box>
+          <Typography sx={{ display: 'inline-flex', '> span': { display: 'inline-flex' } }}>{copyButton}</Typography>
         </Stack>
       )}
     />

package/src/components/layout/user.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { PaymentProvider } from '@blocklet/payment-react';
+import { UserCenter } from '@blocklet/ui-react';
+import { useEffect } from 'react';
+
+import { useSessionContext } from '../../contexts/session';
+
+export default function UserLayout(props: any) {
+  const { session, connectApi, events } = useSessionContext();
+
+  useEffect(() => {
+    events.once('logout', () => {
+      window.location.href = `${window.location.origin}/.well-known/service/user`;
+    });
+  }, []);
+
+  useEffect(() => {
+    if (session.initialized && !session.user) {
+      // @ts-ignore
+      session.login(() => {}, { openMode: 'redirect', redirect: window.location.href });
+    }
+  }, [session.initialized]);
+
+  if (session.user) {
+    return (
+      <PaymentProvider session={session} connect={connectApi}>
+        <UserCenter
+          currentTab={`${window.blocklet.prefix}customer`}
+          userDid={session.user.did}
+          notLoginContent="undefined">
+          {props.children}
+        </UserCenter>
+      </PaymentProvider>
+    );
+  }
+  return null;
+}

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"
                 />