payment-kit 1.18.12 → 1.18.14

package/src/components/passport/assign.tsx

@@ -39,6 +39,7 @@ export default function AssignPassportDialog(props: { id: string; onCancel: any
         message={<Alert severity="error">{error.message}</Alert>}
         onConfirm={onConfirm}
         onCancel={props.onCancel}
+        color="primary"
       />
     );
   }
@@ -50,6 +51,7 @@ export default function AssignPassportDialog(props: { id: string; onCancel: any
         message={<CircularProgress />}
         onConfirm={onConfirm}
         onCancel={props.onCancel}
+        color="primary"
       />
     );
   }
@@ -75,6 +77,7 @@ export default function AssignPassportDialog(props: { id: string; onCancel: any
       }
       onConfirm={onConfirm}
       onCancel={props.onCancel}
+      color="primary"
     />
   );
 }

package/src/components/payment-link/rename.tsx

@@ -39,6 +39,7 @@ export default function RenamePaymentLink({
       disableEscapeKeyDown
       fullWidth
       maxWidth="sm"
+      className="base-dialog"
       onClose={() => onCancel(null)}
       showCloseButton={false}
       title={t('admin.paymentLink.rename')}

package/src/components/pricing-table/rename.tsx

@@ -39,6 +39,7 @@ export default function RenamePricingTable({
       disableEscapeKeyDown
       fullWidth
       maxWidth="sm"
+      className="base-dialog"
       onClose={() => onCancel(null)}
       showCloseButton={false}
       title={t('admin.pricingTable.rename')}

package/src/components/product/add-price.tsx

@@ -48,6 +48,7 @@ export default function AddPrice({
       disableEscapeKeyDown
       fullWidth
       maxWidth="sm"
+      className="base-dialog"
       onClose={() => onCancel(null)}
       showCloseButton={false}
       title={t('admin.price.add')}

package/src/components/product/edit-price.tsx

@@ -75,6 +75,7 @@ export default function EditPrice({
       disableEscapeKeyDown
       fullWidth
       maxWidth="sm"
+      className="base-dialog"
       onClose={() => onCancel(null)}
       showCloseButton={false}
       title={t('admin.price.edit')}

package/src/components/product/edit.tsx

@@ -50,6 +50,7 @@ export default function EditProduct({
       maxWidth="sm"
       onClose={() => onCancel(null)}
       showCloseButton={false}
+      className="base-dialog"
       title={t('admin.product.edit')}
       actions={
         <Stack direction="row">

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

@@ -181,6 +181,7 @@ function SubscriptionActionsInner({ data, variant, onChange }: Props) {
           title={t('admin.subscription.resume')}
           message={t('admin.subscription.resumeTip')}
           loading={state.loading}
+          color="primary"
         />
       )}
       {state.action === 'slashStake' && (

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" />}
         </>
       );
     }
@@ -489,6 +495,7 @@ export function SubscriptionActionsInner({
             date: formatToDate(subscription.current_period_end * 1000),
           })}
           loading={state.loading}
+          color="primary"
         />
       )}
 
@@ -506,6 +513,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/locales/en.tsx

@@ -713,6 +713,48 @@ export default flat({
         note: 'Note: mountLocation must be unique, used to identify the donation instance. After configuration, the instance will appear in the list, and you can make further settings.',
       },
     },
+    vaultConfig: {
+      title: 'Vault',
+      learnMore: 'Learn more about vault configuration',
+      goToConfig: 'Go to system configuration',
+      description:
+        'By enabling the vault wallet, you create a secure offline storage solution that automatically transfers excess funds when your hot wallet balance exceeds the threshold. This separation significantly enhances security by keeping the majority of your assets safely offline, protected from potential online threats.',
+      notConfigured: 'Vault wallet not configured',
+      configureFirst:
+        'Please #go to the dashboard# to configure the vault wallet address before setting up individual currencies.',
+      ownerOnly: 'Only administrators with owner permissions can modify vault wallet settings.',
+      permissionRequired: 'Owner permissions required',
+      enabled: 'Status',
+      enabledYes: 'Enabled',
+      enabledNo: 'Disabled',
+      depositThreshold: 'Deposit Threshold',
+      withdrawThreshold: 'Withdrawal Threshold',
+      edit: 'Configure',
+      enable: 'Enable',
+      editTitle: 'Configure {currency} Vault Settings',
+      enableTitle: 'Enable Vault Wallet for {currency}',
+      enableVault: 'Enable Vault Wallet',
+      enableVaultHelp:
+        'When enabled, excess funds automatically transfer to the vault wallet, and withdrawals exceeding the threshold require admin approval for security and risk control.',
+      depositThresholdHelp:
+        'When the hot wallet balance exceeds this amount, the excess funds will be automatically transferred to the vault wallet.',
+      withdrawThresholdHelp:
+        'For withdrawals exceeding this amount, approval from the vault wallet administrator is required.',
+      notConfig: 'Not configured',
+      noLimit: 'No limit',
+      withdrawThresholdNoLimit: '0 means no withdrawal limit',
+      depositThresholdRequired: 'Deposit threshold must be greater than 0',
+      withdrawThresholdInvalid: 'Withdrawal threshold must be greater or equal to 0',
+      enableSuccess: 'Successfully enabled vault wallet for {currency}',
+      disableSuccess: 'Successfully disabled vault wallet for {currency}',
+      updateSuccess: 'Successfully updated vault wallet settings for {currency}',
+      depositConfirmTitle: 'Deposit to Vault',
+      depositConfirmMessage:
+        '{currency} balance has exceeded the threshold, do you want to deposit to vault immediately?',
+      depositQueued: 'Deposit to vault request queued, please check the result later',
+      depositFailed: 'Deposit to vault request failed',
+      appBalance: 'App Balance',
+    },
   },
   empty: {
     image: 'No Image',

package/src/locales/zh.tsx

@@ -696,6 +696,43 @@ export default flat({
         note: '注意：mountLocation 必须是唯一的，用于标识打赏实例。配置完成后，该实例将出现在列表中，您可以进行进一步的设置。',
       },
     },
+    vaultConfig: {
+      title: '冷钱包配置',
+      description:
+        '启用冷钱包后，系统会在热钱包余额超过阈值时，自动将多余资金转移至安全的离线存储。这种隔离机制将大部分资产与在线环境分离，有效抵御网络攻击，显著提升资金安全性。',
+      learnMore: '了解更多',
+      goToConfig: '前往系统配置',
+      notConfigured: '冷钱包尚未配置',
+      configureFirst: '请先#前往仪表盘#配置冷钱包地址，然后再设置各币种参数。',
+      ownerOnly: '仅拥有所有者权限的管理员可修改冷钱包设置。',
+      permissionRequired: '需要所有者权限',
+      enabled: '状态',
+      enabledYes: '已启用',
+      enabledNo: '未启用',
+      depositThreshold: '存入阈值',
+      withdrawThreshold: '提取阈值',
+      edit: '配置',
+      enable: '启用',
+      editTitle: '配置 {currency} 冷钱包设置',
+      enableTitle: '为 {currency} 启用冷钱包',
+      enableVault: '启用冷钱包',
+      enableVaultHelp: '启用冷钱包后，超额资金将自动转入冷钱包，提款超出阈值需管理员审核，确保资产安全与风控。',
+      depositThresholdHelp: '当热钱包余额超过此金额时，多余资金将自动转入冷钱包。',
+      withdrawThresholdHelp: '当单笔提款超过此金额时，需由冷钱包管理员审核并批准。',
+      notConfig: '未配置',
+      noLimit: '无限制',
+      withdrawThresholdNoLimit: '0 表示无提款限制',
+      depositThresholdRequired: '存入阈值必须大于0',
+      withdrawThresholdInvalid: '提款阈值不能小于0',
+      enableSuccess: '{currency} 冷钱包已启用',
+      disableSuccess: '{currency} 冷钱包已关闭',
+      updateSuccess: '{currency} 冷钱包设置已更新',
+      depositConfirmTitle: '转入冷钱包',
+      depositConfirmMessage: '{currency}余额已超过阈值，是否立即转入冷钱包？',
+      depositQueued: '申请转入冷钱包成功，请稍后查看结果',
+      depositFailed: '申请转入冷钱包失败',
+      appBalance: '热钱包余额',
+    },
   },
   empty: {
     image: '无图片',

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

@@ -194,43 +194,50 @@ export default function PayoutDetail(props: { id: string }) {
               value={<Status label={data.status} color={getPayoutStatusColor(data.status)} />}
               divider
             />
-            <InfoMetric
-              label={t('customer.payout.payer')}
-              value={
-                <InfoCard
-                  logo={getCustomerAvatar(
-                    paymentIntent?.customer?.did,
-                    paymentIntent?.customer?.updated_at
-                      ? new Date(paymentIntent?.customer?.updated_at).toISOString()
-                      : '',
-                    48
-                  )}
-                  name={
-                    <Typography
-                      variant="subtitle2"
-                      sx={{
-                        cursor: 'pointer',
-                        '&:hover': {
-                          color: 'text.link',
-                        },
-                      }}
-                      onClick={() => {
-                        const url = getCustomerProfileUrl({
-                          userDid: paymentIntent?.customer?.did,
-                          locale: 'zh',
-                        });
-                        window.open(url, '_blank');
-                      }}>
-                      {paymentIntent?.customer?.name} ({paymentIntent?.customer?.email})
-                    </Typography>
-                  }
-                  description={<DID did={paymentIntent?.customer?.did} />}
-                  size={40}
-                  variant="rounded"
-                />
-              }
-              divider
-            />
+            {paymentIntent?.id && (
+              <InfoMetric
+                label={t('customer.payout.payer')}
+                value={
+                  <InfoCard
+                    logo={getCustomerAvatar(
+                      paymentIntent?.customer?.did,
+                      paymentIntent?.customer?.updated_at
+                        ? new Date(paymentIntent?.customer?.updated_at).toISOString()
+                        : '',
+                      48
+                    )}
+                    name={
+                      <Typography
+                        variant="subtitle2"
+                        sx={{
+                          cursor: 'pointer',
+                          '&:hover': {
+                            color: 'text.link',
+                          },
+                        }}
+                        onClick={() => {
+                          const url = getCustomerProfileUrl({
+                            userDid: paymentIntent?.customer?.did,
+                            locale: 'zh',
+                          });
+                          window.open(url, '_blank');
+                        }}>
+                        {paymentIntent?.customer?.name} ({paymentIntent?.customer?.email})
+                      </Typography>
+                    }
+                    description={
+                      <DID
+                        did={paymentIntent?.customer?.did}
+                        {...(isMobile ? { responsive: false, compact: true } : {})}
+                      />
+                    }
+                    size={40}
+                    variant="rounded"
+                  />
+                }
+                divider
+              />
+            )}
             {/* <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider /> */}
             {/* <InfoMetric label={t('common.updatedAt')} value={formatTime(data.updated_at)} divider /> */}
           </Stack>
@@ -380,13 +387,15 @@ export default function PayoutDetail(props: { id: string }) {
           <Box className="section">
             <SectionHeader title={t('admin.connections')} />
             <Stack>
-              {data.payment_intent_id && (
+              {data.payment_intent_id ? (
                 <InfoRow
                   label={t('admin.paymentIntent.name')}
                   value={<Link to={`/admin/payments/${data.paymentIntent.id}`}>{data.paymentIntent.id}</Link>}
                   direction={InfoDirection}
                   alignItems={InfoAlignItems}
                 />
+              ) : (
+                t('common.none')
               )}
             </Stack>
           </Box>

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

@@ -9,8 +9,8 @@ import { useTransitionContext } from '../../../components/progress-bar';
 const PaymentMethodCreate = React.lazy(() => import('./payment-methods/create'));
 
 const pages = {
-  paymentMethods: React.lazy(() => import('./payment-methods')),
-  // branding: React.lazy(() => import('./branding')),
+  'payment-methods': React.lazy(() => import('./payment-methods')),
+  'vault-config': React.lazy(() => import('./vault-config')),
   // business: React.lazy(() => import('./business')),
 };
 
@@ -30,7 +30,7 @@ export default function SettingsIndex() {
   const TabComponent = pages[page] || pages.paymentMethods;
   const tabs = [
     { label: t('admin.paymentMethods'), value: 'payment-methods' },
-    // { label: t('admin.branding'), value: 'branding' },
+    { label: t('admin.vaultConfig.title'), value: 'vault-config' },
     // { label: t('admin.business'), value: 'business' },
   ];
 

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

@@ -25,6 +25,7 @@ import {
   ListItem,
   ListItemAvatar,
   ListItemText,
+  Skeleton,
   Stack,
   TextField,
   Tooltip,
@@ -296,6 +297,37 @@ function Balance({
   );
 }
 
+function PaymentMethodSkeleton() {
+  return (
+    <>
+      {[1].map((group) => (
+        <Box key={group} mt={3}>
+          <Stack direction="row" alignItems="center" mb={1} flexWrap="wrap" gap={1}>
+            <Skeleton variant="text" width={120} height={32} />
+          </Stack>
+          <Box
+            sx={{
+              py: 1,
+              borderTop: '1px solid #eee',
+              borderBottom: '1px solid #eee',
+              mb: 1,
+            }}>
+            <Stack direction="row" justifyContent="space-between" alignItems="center">
+              <Stack direction="row" spacing={2} alignItems="center" sx={{ flex: 1 }}>
+                <Skeleton variant="rectangular" width={40} height={40} />
+                <Box sx={{ flex: 1 }}>
+                  <Skeleton variant="text" width="20%" height={24} />
+                  <Skeleton variant="text" width="40%" height={20} />
+                </Box>
+              </Stack>
+            </Stack>
+          </Box>
+        </Box>
+      ))}
+    </>
+  );
+}
+
 export default function PaymentMethods() {
   const { t } = useLocaleContext();
   const [expandedId, setExpandedId] = useSessionStorageState('payment-method-expanded-id', {
@@ -362,7 +394,7 @@ export default function PaymentMethods() {
   }
 
   if (loading || !data || methods?.length === 0) {
-    return <CircularProgress />;
+    return <PaymentMethodSkeleton />;
   }
 
   const groups = groupByType(methods);