payment-kit 1.18.46 → 1.18.48

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

@@ -5,12 +5,12 @@ import {
   ConfirmDialog,
   api,
   formatError,
-  formatToDate,
   getPrefix,
   getSubscriptionAction,
   usePaymentContext,
   OverdueInvoicePayment,
   formatBNStr,
+  ResumeSubscription,
 } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { Button, Link, Stack, Tooltip, Typography, Box, Alert } from '@mui/material';
@@ -27,7 +27,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';
+import { isActive, isWillCanceled } from '../../../libs/util';
 
 interface ActionConfig {
   key: string;
@@ -105,34 +105,26 @@ SubscriptionActions.defaultProps = {
   forceShowDetailAction: false,
   buttonSize: 'small',
 };
-const fetchExtraActions = async ({
-  id,
-  showExtra,
-}: {
-  id: string;
-  showExtra: boolean;
-}): Promise<{ changePlan: boolean; batchPay: string }> => {
-  if (!showExtra) {
-    return Promise.resolve({ changePlan: false, batchPay: '' });
-  }
 
-  const [changePlan, batchPay] = await Promise.all([
-    api
-      .get(`/api/subscriptions/${id}/change-plan`)
-      .then((res) => !!res.data)
-      .catch(() => false),
-    api
-      .get(`/api/subscriptions/${id}/summary`)
-      .then((res) => {
-        if (!isEmpty(res.data) && Object.keys(res.data).length === 1) {
-          return Object.keys(res.data)[0] as string;
-        }
-        return '';
-      })
-      .catch(() => ''),
-  ]);
+const fetchChangePlan = async (id: string): Promise<boolean> => {
+  try {
+    const res = await api.get(`/api/subscriptions/${id}/change-plan`);
+    return !!res.data;
+  } catch {
+    return false;
+  }
+};
 
-  return { changePlan, batchPay };
+const fetchBatchPay = async (id: string): Promise<string> => {
+  try {
+    const res = await api.get(`/api/subscriptions/${id}/summary`);
+    if (!isEmpty(res.data) && Object.keys(res.data).length === 1) {
+      return Object.keys(res.data)[0] as string;
+    }
+    return '';
+  } catch {
+    return '';
+  }
 };
 
 const supportRecharge = (subscription: TSubscriptionExpanded) => {
@@ -177,7 +169,13 @@ export function SubscriptionActionsInner({
     return true;
   };
 
-  const { data: extraActions } = useRequest(() => fetchExtraActions({ id: subscription.id, showExtra: !!showExtra }));
+  const { data: changePlanAvailable = false } = useRequest(() => fetchChangePlan(subscription.id), {
+    ready: !!showExtra && isActive(subscription),
+  });
+
+  const { data: batchPayAvailable = '' } = useRequest(() => fetchBatchPay(subscription.id), {
+    ready: !!showExtra,
+  });
 
   const { data: upcoming = {} } = useRequest(
     () => api.get(`/api/subscriptions/${subscription.id}/upcoming`).then((res) => res.data),
@@ -269,21 +267,6 @@ export function SubscriptionActionsInner({
     }
   };
 
-  const handleRecover = async () => {
-    try {
-      setState({ loading: true });
-      const sub = await api.put(`/api/subscriptions/${state.subscription}/recover`).then((res) => res.data);
-      setSubscription(sub);
-      Toast.success(t('common.saved'));
-      if (onChange) onChange(state.action);
-    } catch (err) {
-      console.error(err);
-      Toast.error(formatError(err));
-    } finally {
-      setState({ loading: false, action: '', subscription: '' });
-    }
-  };
-
   const handleDelegate = () => {
     connect.open({
       containerEl: undefined as unknown as Element,
@@ -503,7 +486,7 @@ export function SubscriptionActionsInner({
       },
       {
         key: 'changePlan',
-        show: !!extraActions?.changePlan,
+        show: changePlanAvailable,
         label: action?.text || t('payment.customer.changePlan.button'),
         onClick: (e) => {
           e?.stopPropagation();
@@ -515,7 +498,7 @@ export function SubscriptionActionsInner({
       },
       {
         key: 'batchPay',
-        show: !!extraActions?.batchPay,
+        show: !!batchPayAvailable,
         label: action?.text || t('admin.subscription.batchPay.button'),
         onClick: (e) => {
           e?.stopPropagation();
@@ -530,7 +513,7 @@ export function SubscriptionActionsInner({
       },
       {
         key: 'mainAction',
-        show: !!(!extraActions?.batchPay && supportAction),
+        show: !!(!batchPayAvailable && supportAction),
         label: action?.text || t(`payment.customer.${action?.action}.button`),
         onClick: (e) => {
           e?.stopPropagation();
@@ -660,18 +643,17 @@ export function SubscriptionActionsInner({
         />
       )}
       {state.action === 'recover' && state.subscription && (
-        <ConfirmDialog
-          onConfirm={handleRecover}
-          onCancel={(e) => {
-            e.stopPropagation();
+        <ResumeSubscription
+          subscriptionId={state.subscription}
+          onResumed={(updatedSubscription) => {
             setState({ action: '', subscription: '' });
+            onChange?.(state.action);
+            setSubscription(updatedSubscription as TSubscriptionExpanded);
+          }}
+          dialogProps={{
+            open: true,
+            onClose: () => setState({ action: '', subscription: '' }),
           }}
-          title={t('payment.customer.recover.title')}
-          message={t('payment.customer.recover.description', {
-            date: formatToDate(subscription.current_period_end * 1000),
-          })}
-          loading={state.loading}
-          color="primary"
         />
       )}
 

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

@@ -21,7 +21,7 @@ import SubscriptionDescription from '../description';
 import SubscriptionActions from './actions';
 import SubscriptionStatus from '../status';
 import useDelayedLoading from '../../../hooks/loading';
-import { isWillCanceled } from '../../../libs/util';
+import { formatProxyUrl, isWillCanceled } from '../../../libs/util';
 
 type SubscriptionListResponse = {
   count: number;
@@ -161,31 +161,41 @@ export default function CurrentSubscriptions({
                       justifyContent="space-between"
                       onClick={() => onClickSubscription(subscription)}>
                       <Stack direction="row" spacing={1.5} alignItems="center">
-                        <AvatarGroup
-                          max={2}
-                          sx={{
-                            '& .MuiAvatar-colorDefault': {
-                              ...size,
-                              boxSizing: 'border-box',
-                            },
-                          }}>
-                          {subscription.items.slice(0, 2).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>
+                        {subscription.metadata?.appLogo ? (
+                          <Avatar
+                            src={formatProxyUrl(subscription.metadata?.appLogo)}
+                            alt={subscription.metadata?.appName}
+                            variant="rounded"
+                            sx={size}
+                          />
+                        ) : (
+                          <AvatarGroup
+                            max={2}
+                            sx={{
+                              '& .MuiAvatar-colorDefault': {
+                                ...size,
+                                boxSizing: 'border-box',
+                              },
+                            }}>
+                            {subscription.items.slice(0, 2).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.25}>
                           <SubscriptionDescription
                             subscription={subscription}

package/src/libs/util.ts

@@ -348,6 +348,9 @@ export function getAppInfo(address: string): { name: string; avatar: string; typ
   return null;
 }
 
+export function isActive(subscription: TSubscriptionExpanded) {
+  return ['active', 'trialing'].includes(subscription.status);
+}
 export function isWillCanceled(subscription: TSubscriptionExpanded) {
   const now = Date.now() / 1000;
   if (
@@ -362,3 +365,14 @@ export function isWillCanceled(subscription: TSubscriptionExpanded) {
   }
   return false;
 }
+
+export function formatProxyUrl(url: string) {
+  if (url.startsWith('/')) {
+    return joinURL(window.location.origin, url);
+  }
+  const proxyUrl = new URL(url);
+  if (proxyUrl.host === window.location.host) {
+    return url;
+  }
+  return `${window.location.origin}/.well-known/service/proxy?url=${url}`;
+}

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

@@ -1,15 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import {
-  TxLink,
-  api,
-  formatError,
-  formatSubscriptionProduct,
-  formatTime,
-  useMobile,
-  hasDelegateTxHash,
-} from '@blocklet/payment-react';
+import { TxLink, api, formatError, formatTime, useMobile, hasDelegateTxHash } from '@blocklet/payment-react';
 import type { TProduct, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
@@ -125,7 +117,7 @@ export default function SubscriptionDetail(props: { id: string }) {
           <Stack direction="column" gap={1}>
             <Stack direction="row" alignItems="center">
               <Typography variant="h2" sx={{ fontWeight: 600 }}>
-                {data.customer?.name} On {formatSubscriptionProduct(data.items)}
+                {data.description}
               </Typography>
             </Stack>
             <Copyable text={props.id} />

package/src/pages/customer/invoice/past-due.tsx

@@ -126,6 +126,7 @@ export default function CustomerInvoicePastDue() {
         {showOverduePayment && (
           <OverdueInvoicePayment
             customerId={session.user.did}
+            subscriptionId={subscriptionId}
             onPaid={() => {
               setShowOverduePayment(false);
             }}