payment-kit 1.16.17 → 1.16.18

package/src/locales/zh.tsx

@@ -22,6 +22,8 @@ export default flat({
     latinOnly: '至少包含一个字母，并且不能包含中文字符和特殊字符如 <, >、"、’ 或 \\',
     loading: '加载中...',
     rechargeTime: '充值时间',
+    submit: '提交',
+    custom: '自定义',
   },
   admin: {
     balances: '余额',
@@ -631,5 +633,40 @@ export default flat({
       success: '授权成功',
       error: '授权失败',
     },
+    overdraftProtection: {
+      title: '透支保护',
+      setting: '透支保护设置',
+      tip: '为避免因扣费失败中断服务，您可以通过质押开启透支保护。按时付款不会收取额外费用，请及时付清账单，若可用质押不足或者超期未付，我们将从质押中扣除并收取服务费',
+      enabled: '已启用',
+      disabled: '未启用',
+      returnRemaining: '退还剩余质押',
+      returnRemainingTip: '退还剩余质押后，透支保护将自动关闭，请确认操作。',
+      applyRemainingSuccess: '质押退还申请成功',
+      remaining: '您当前剩余可用质押：{amount} {symbol}, 每周期预计需质押：{estimateAmount} {symbol}。',
+      noRemaining: '当前无质押，为确保透支保护功能的正常使用，请至少质押 {estimateAmount} {symbol}。',
+      remainingNotEnough:
+        '当前存在未支付的账单，总计 {due} {symbol}，如果不支付，您当前剩余质押将无法覆盖下期账单，剩余可用质押：{unused} {symbol}，请质押至少 {min} {symbol}。',
+      due: '请先支付欠款',
+      insufficient: '额度不足，下期账单将无法使用透支保护',
+      insufficientTip: '透支保护额度不足，请尽快质押保证透支保护功能的正常使用。',
+      intervals: '个周期',
+      estimatedDuration: '预计可用 {duration} {unit}',
+      rule: '规则：N * ( P + Fee )',
+      ruleTip: 'N 为周期数, P 为订阅账单费用, Fee 为透支保护服务费用，单次费用为 {gas} {symbol}',
+      min: '质押金额不得小于 {min} {symbol}',
+      settingSuccess: '透支保护设置成功',
+      settingError: '透支保护设置失败',
+      keepStake: '不退还质押',
+      returnStake: '退还剩余质押',
+      stake: '质押',
+      address: '质押账户',
+      total: '总质押：{total} {symbol}，',
+      disableConfirm: '您当前有未支付的账单,请先付清账单。',
+    },
+    unpaidInvoicesWarning: '您当前有未支付的账单,请先付清账单。',
+    unpaidInvoicesWarningTip: '您当前有未支付的账单，请及时付清。',
+    invoice: {
+      relatedInvoice: '关联账单',
+    },
   },
 });

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

@@ -322,21 +322,22 @@ export default function InvoiceDetail(props: { id: string }) {
                   alignItems={InfoAlignItems}
                 />
               )}
-              {data.billing_reason === 'stake' && data?.metadata?.payment_details?.arcblock?.tx_hash && (
-                <InfoRow
-                  label={t('common.stakeTxHash')}
-                  value={
-                    <TxLink
-                      details={{
-                        arcblock: { tx_hash: data.metadata?.payment_details?.arcblock?.tx_hash, payer: '' },
-                      }}
-                      method={data.paymentMethod}
-                    />
-                  }
-                  direction={InfoDirection}
-                  alignItems={InfoAlignItems}
-                />
-              )}
+              {['stake', 'stake_overdraft_protection'].includes(data.billing_reason) &&
+                data?.metadata?.payment_details?.arcblock?.tx_hash && (
+                  <InfoRow
+                    label={t('common.stakeTxHash')}
+                    value={
+                      <TxLink
+                        details={{
+                          arcblock: { tx_hash: data.metadata?.payment_details?.arcblock?.tx_hash, payer: '' },
+                        }}
+                        method={data.paymentMethod}
+                      />
+                    }
+                    direction={InfoDirection}
+                    alignItems={InfoAlignItems}
+                  />
+                )}
               {data.subscription && (
                 <InfoRow
                   label={t('admin.subscription.name')}

package/src/pages/customer/index.tsx

@@ -97,7 +97,12 @@ export default function CustomerHome() {
   const currencies = flatten(settings.paymentMethods.map((method) => method.payment_currencies));
 
   const { livemode, setLivemode } = usePaymentContext();
-  const [state, setState] = useSetState({ editing: false, loading: false, onlyActive: true });
+  const [state, setState] = useSetState({
+    editing: false,
+    loading: false,
+    onlyActive: true,
+    setOverdraftProtection: false,
+  });
   const navigate = useNavigate();
   const { isMobile } = useMobile('lg');
   const { isPending, startTransition } = useTransitionContext();
@@ -207,7 +212,7 @@ export default function CustomerHome() {
             id={data.id}
             onlyActive={state.onlyActive}
             changeActive={(v) => setState({ onlyActive: v })}
-            status={state.onlyActive ? 'active,trialing' : 'active,trialing,paused,past_due,canceled'}
+            status={state.onlyActive ? 'active,trialing,past_due' : 'active,trialing,paused,past_due,canceled'}
             style={{
               cursor: 'pointer',
             }}

package/src/pages/customer/invoice/detail.tsx

@@ -9,7 +9,9 @@ import {
   formatAmount,
   formatError,
   formatTime,
+  getInvoiceDescriptionAndReason,
   getInvoiceStatusColor,
+  getPrefix,
   usePaymentContext,
 } from '@blocklet/payment-react';
 import type { TInvoiceExpanded } from '@blocklet/payment-types';
@@ -20,6 +22,7 @@ import { useRequest, useSetState } from 'ahooks';
 import { useEffect } from 'react';
 import { Link, useParams, useSearchParams } from 'react-router-dom';
 
+import { joinURL } from 'ufo';
 import { useSessionContext } from '../../../contexts/session';
 import Currency from '../../../components/currency';
 import CustomerLink from '../../../components/customer/link';
@@ -30,14 +33,14 @@ import { goBackOrFallback } from '../../../libs/util';
 import CustomerRefundList from '../refund/list';
 import InfoMetric from '../../../components/info-metric';
 
-const fetchData = (id: string): Promise<TInvoiceExpanded> => {
+const fetchData = (id: string): Promise<TInvoiceExpanded & { relatedInvoice?: TInvoiceExpanded }> => {
   return api.get(`/api/invoices/${id}`).then((res) => res.data);
 };
 
 const InfoDirection = 'column';
 const InfoAlignItems = 'flex-start';
 export default function CustomerInvoiceDetail() {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const [searchParams] = useSearchParams();
   const { connect } = usePaymentContext();
   const params = useParams<{ id: string }>();
@@ -108,9 +111,11 @@ export default function CustomerInvoiceDetail() {
     return <CircularProgress />;
   }
 
-  const isStake = data.paymentMethod?.type === 'arcblock' && data.billing_reason === 'stake';
+  const isStake =
+    data.paymentMethod?.type === 'arcblock' && ['stake', 'stake_overdraft_protection'].includes(data.billing_reason);
   const isSlashStake = data.paymentMethod?.type === 'arcblock' && data.billing_reason.includes('slash_stake');
 
+  const hidePayButton = data.billing_reason === 'overdraft_protection';
   const paymentDetails = data.paymentIntent?.payment_details || data.metadata?.payment_details;
   return (
     <InvoiceDetailRoot direction="column" spacing={3} sx={{ my: 2 }}>
@@ -127,7 +132,7 @@ export default function CustomerInvoiceDetail() {
         </Stack>
         <Stack direction="row" spacing={1} justifyContent="flex-end" alignItems="center">
           {['open', 'paid', 'uncollectible'].includes(data.status) && <Download data={data} />}
-          {['open', 'uncollectible'].includes(data.status) && (
+          {['open', 'uncollectible'].includes(data.status) && !hidePayButton && (
             <Button
               variant="outlined"
               color="primary"
@@ -227,7 +232,7 @@ export default function CustomerInvoiceDetail() {
           }}>
           <InfoRow
             label={t('admin.invoice.description')}
-            value={data.description}
+            value={getInvoiceDescriptionAndReason(data, locale)?.description}
             direction={InfoDirection}
             alignItems={InfoAlignItems}
           />
@@ -303,6 +308,25 @@ export default function CustomerInvoiceDetail() {
               alignItems={InfoAlignItems}
             />
           )}
+          {data?.relatedInvoice && (
+            <InfoRow
+              label={t('customer.invoice.relatedInvoice')}
+              value={
+                <Typography
+                  variant="body1"
+                  color="text.link"
+                  sx={{ cursor: 'pointer' }}
+                  component="a"
+                  onClick={() => {
+                    window.open(joinURL(getPrefix(), `/customer/invoice/${data.relatedInvoice?.id}`), '_self');
+                  }}>
+                  {data.relatedInvoice?.number}
+                </Typography>
+              }
+              direction={InfoDirection}
+              alignItems={InfoAlignItems}
+            />
+          )}
         </Stack>
       </Box>
       {!isSlashStake && (

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

@@ -1,6 +1,12 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { CustomerInvoiceList, formatError, getPrefix, usePaymentContext } from '@blocklet/payment-react';
+import {
+  CustomerInvoiceList,
+  formatError,
+  getPrefix,
+  getQueryParams,
+  usePaymentContext,
+} from '@blocklet/payment-react';
 import type { TCustomerExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
@@ -25,7 +31,7 @@ export default function CustomerInvoicePastDue() {
   const { events } = useSessionContext();
   const { connect } = usePaymentContext();
   const [params] = useSearchParams();
-  const [alertVisible, setAlertVisible] = useState(true);
+  const [alertVisible, setAlertVisible] = useState(false);
 
   const { loading, error, data, runAsync } = useRequest(fetchData);
 
@@ -62,7 +68,6 @@ export default function CustomerInvoicePastDue() {
       extraParams: { subscriptionId, currencyId },
       onSuccess: () => {
         connect.close();
-        window.location.reload();
       },
       onClose: () => {
         connect.close();
@@ -73,9 +78,18 @@ export default function CustomerInvoicePastDue() {
     });
   };
 
-  const onTableDataChange = (tableData: any) => {
+  const onTableDataChange = (tableData: any, prevData: any) => {
     if (isEmpty(tableData) || tableData?.count === 0) {
       setAlertVisible(false);
+      if (prevData?.count > 0) {
+        // paid all invoices
+        const referer = getQueryParams(window.location.href)?.referer;
+        if (referer) {
+          window.location.replace(referer);
+        } else {
+          goBackOrFallback('/customer');
+        }
+      }
       return;
     }
     setAlertVisible(true);

package/src/pages/customer/recharge.tsx

@@ -98,7 +98,7 @@ export default function RechargePage() {
       const [subscriptionRes, payerTokenRes, upcomingRes] = await Promise.all([
         api.get(`/api/subscriptions/${subscriptionId}`),
         api.get(`/api/subscriptions/${subscriptionId}/payer-token`),
-        api.get(`/api/subscriptions/${subscriptionId}/upcoming`),
+        api.get(`/api/subscriptions/${subscriptionId}/cycle-amount`),
       ]);
       setSubscription(subscriptionRes.data);
       setPayerValue(payerTokenRes.data);
@@ -106,9 +106,7 @@ export default function RechargePage() {
       // Calculate preset amounts
       const getCycleAmount = (cycles: number) =>
         fromUnitToToken(
-          new BN(upcomingRes.data.amount === '0' ? upcomingRes.data.minExpectedAmount : upcomingRes.data.amount)
-            .mul(new BN(cycles))
-            .toString(),
+          new BN(upcomingRes.data.amount).mul(new BN(cycles)).toString(),
           upcomingRes.data?.currency?.decimal
         );
       setPresetAmounts([

package/src/pages/customer/subscription/change-payment.tsx

@@ -33,6 +33,7 @@ import { joinURL } from 'ufo';
 import SectionHeader from '../../../components/section/header';
 import SubscriptionDescription from '../../../components/subscription/description';
 import { goBackOrFallback } from '../../../libs/util';
+import { useUnpaidInvoicesCheckForSubscription } from '../../../hooks/subscription';
 
 const fetchData = async (id: string): Promise<{ subscription: TSubscriptionExpanded; customer: TCustomer }> => {
   const [subscription, customer] = await Promise.all([
@@ -78,6 +79,7 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const { settings, connect } = usePaymentContext();
+  const { checkUnpaidInvoices } = useUnpaidInvoicesCheckForSubscription(subscription.id);
   const { control, setValue, handleSubmit } = useFormContext();
 
   const [state, setState] = useSetState<{
@@ -195,7 +197,11 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
     }
   };
 
-  const onConfirm = () => {
+  const onConfirm = async () => {
+    const result = await checkUnpaidInvoices();
+    if (result) {
+      return;
+    }
     handleSubmit(onSubmit)();
   };
 

package/src/pages/customer/subscription/detail.tsx

@@ -1,23 +1,13 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import {
-  CustomerInvoiceList,
-  TxLink,
-  api,
-  formatError,
-  formatTime,
-  getPrefix,
-  hasDelegateTxHash,
-  usePaymentContext,
-} from '@blocklet/payment-react';
+import { CustomerInvoiceList, TxLink, api, formatTime, hasDelegateTxHash, useMobile } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
-import { Alert, Box, Button, CircularProgress, Divider, Stack, Tooltip, Typography } from '@mui/material';
+import { Alert, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { Link, useNavigate, useParams } from 'react-router-dom';
-import Toast from '@arcblock/ux/lib/Toast';
 import { styled } from '@mui/system';
-import { joinURL } from 'ufo';
+import { BN } from '@ocap/util';
 import Currency from '../../../components/currency';
 import CustomerLink from '../../../components/customer/link';
 import InfoRow from '../../../components/info-row';
@@ -27,15 +17,18 @@ import SubscriptionMetrics from '../../../components/subscription/metrics';
 import SubscriptionActions from '../../../components/subscription/portal/actions';
 import { canChangePaymentMethod } from '../../../libs/util';
 import { useSessionContext } from '../../../contexts/session';
+import InfoMetric from '../../../components/info-metric';
+import { useUnpaidInvoicesCheckForSubscription } from '../../../hooks/subscription';
 
 const fetchData = (id: string | undefined): Promise<TSubscriptionExpanded> => {
   return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
 };
 
-const fetchSubscriptionDelegation = (id: string): Promise<{ sufficient: boolean }> => {
-  return api.get(`/api/subscriptions/${id}/delegation`).then((res) => res.data);
+const fetchOverdraftProtection = (
+  id: string
+): Promise<{ enabled: boolean; remaining: string; unused: string; upcoming: { amount: string }; gas: string }> => {
+  return api.get(`/api/subscriptions/${id}/overdraft-protection`).then((res) => res.data);
 };
-
 const InfoDirection = 'column';
 const InfoAlignItems = 'flex-start';
 
@@ -43,35 +36,20 @@ export default function CustomerSubscriptionDetail() {
   const { id } = useParams() as { id: string };
   const navigate = useNavigate();
   const { t } = useLocaleContext();
+  const { isMobile } = useMobile();
   const { session } = useSessionContext();
   const { loading, error, data, refresh } = useRequest(() => fetchData(id));
-  const { connect } = usePaymentContext();
+  const { hasUnpaid, checkUnpaidInvoices } = useUnpaidInvoicesCheckForSubscription(id);
+  const {
+    data: overdraftProtection = null,
+    loading: overdraftProtectionLoading,
+    run: refreshOverdraftProtection,
+  } = useRequest(() => fetchOverdraftProtection(id), {
+    ready: ['active', 'trialing', 'past_due'].includes(data?.status || ''),
+  });
 
-  const { data: delegation = { sufficient: true }, runAsync: runDelegation } = useRequest(() =>
-    fetchSubscriptionDelegation(id)
-  );
-  const noDelegation = delegation && typeof delegation === 'object' && !delegation.sufficient;
+  const enableOverdraftProtection = !!overdraftProtection?.enabled;
 
-  const handleDelegate = () => {
-    connect.open({
-      containerEl: undefined as unknown as Element,
-      saveConnect: false,
-      action: 'delegation',
-      prefix: joinURL(getPrefix(), '/api/did'),
-      extraParams: { subscriptionId: id },
-      onSuccess: () => {
-        connect.close();
-        Toast.success(t('customer.delegation.success'));
-        runDelegation();
-      },
-      onClose: () => {
-        connect.close();
-      },
-      onError: (err: any) => {
-        Toast.error(formatError(err));
-      },
-    });
-  };
   if (data?.customer?.did && session?.user?.did && data.customer.did !== session.user.did) {
     return <Alert severity="error">You do not have permission to access other customer data</Alert>;
   }
@@ -83,9 +61,37 @@ export default function CustomerSubscriptionDetail() {
     return <CircularProgress />;
   }
 
+  const showOverdraftProtection =
+    data?.paymentMethod?.type === 'arcblock' &&
+    !overdraftProtectionLoading &&
+    !!overdraftProtection &&
+    ['active', 'trialing', 'past_due'].includes(data.status);
+
+  const renderOverdraftProtectionLabel = () => {
+    const enabled = data?.overdraft_protection?.enabled;
+    const insufficient =
+      !enableOverdraftProtection ||
+      overdraftProtection.unused === '0' ||
+      new BN(overdraftProtection.unused).lt(
+        new BN(overdraftProtection.upcoming?.amount).add(new BN(overdraftProtection.gas))
+      );
+    if (!enabled) {
+      return t('customer.overdraftProtection.disabled');
+    }
+    if (enabled && insufficient) {
+      return <Typography color="error">{t('customer.overdraftProtection.insufficient')}</Typography>;
+    }
+    return t('customer.overdraftProtection.enabled');
+  };
+
   return (
     <Root>
       <Box>
+        {hasUnpaid && (
+          <Alert severity="error" sx={{ mt: 2 }}>
+            {t('customer.unpaidInvoicesWarningTip')}
+          </Alert>
+        )}
         <Stack
           className="page-header"
           direction="row"
@@ -103,18 +109,17 @@ export default function CustomerSubscriptionDetail() {
             </Typography>
           </Stack>
           <Stack direction="row" gap={1}>
-            {noDelegation && ['active', 'trialing', 'past_due'].includes(data?.status) && (
-              <Tooltip title={t('customer.delegation.title')}>
-                <Button variant="outlined" color="primary" onClick={() => handleDelegate()}>
-                  {t('customer.delegation.btn')}
-                </Button>
-              </Tooltip>
-            )}
             <SubscriptionActions
               subscription={data}
               onChange={() => refresh()}
               showExtra
+              showDelegation
+              showOverdraftProtection={{
+                show: showOverdraftProtection,
+                onChange: () => refreshOverdraftProtection(),
+              }}
               showRecharge
+              mode={isMobile ? 'menu' : 'btn'}
               actionProps={{
                 cancel: {
                   variant: 'outlined',
@@ -183,6 +188,9 @@ export default function CustomerSubscriptionDetail() {
               },
             }}>
             <SubscriptionMetrics subscription={data} />
+            {showOverdraftProtection && (
+              <InfoMetric label={t('customer.overdraftProtection.title')} value={renderOverdraftProtectionLabel()} />
+            )}
           </Stack>
         </Box>
       </Box>
@@ -271,8 +279,13 @@ export default function CustomerSubscriptionDetail() {
                     variant="text"
                     sx={{ color: 'text.link' }}
                     size="small"
-                    component={Link}
-                    to={`/customer/subscription/${data.id}/change-payment`}>
+                    onClick={async () => {
+                      const result = await checkUnpaidInvoices();
+                      if (result) {
+                        return;
+                      }
+                      navigate(`/customer/subscription/${data.id}/change-payment`);
+                    }}>
                     {t('payment.customer.subscriptions.changePayment')}
                   </Button>
                 )}
@@ -338,7 +351,12 @@ export default function CustomerSubscriptionDetail() {
           {t('customer.invoiceHistory')}
         </Typography>
         <Box className="section-body">
-          <CustomerInvoiceList subscription_id={data.id} type="table" include_staking />
+          <CustomerInvoiceList
+            subscription_id={data.id}
+            type="table"
+            include_staking
+            status="open,paid,uncollectible,void"
+          />
         </Box>
       </Box>
     </Root>

package/tsconfig.json

@@ -98,10 +98,5 @@
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true, /* Skip type checking all .d.ts files. */
-    // "baseUrl": "./",
-    "paths": {
-      // "@app/*": ["./src/*"],
-      // "@api/*": ["./api/src/*"],
-    }
   }
 }