payment-kit 1.16.17 → 1.16.18

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

@@ -1,16 +1,27 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { ConfirmDialog, api, formatError, formatToDate, getSubscriptionAction } from '@blocklet/payment-react';
+import {
+  ConfirmDialog,
+  api,
+  formatError,
+  formatToDate,
+  getPrefix,
+  getSubscriptionAction,
+  usePaymentContext,
+} from '@blocklet/payment-react';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
-import { Button, Link, Stack } from '@mui/material';
+import { Button, Link, Stack, Tooltip } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 import isEmpty from 'lodash/isEmpty';
 import { useState } from 'react';
 import { FormProvider, useForm, useFormContext } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
-
+import { joinURL } from 'ufo';
 import CustomerCancelForm from './cancel';
+import OverdraftProtectionDialog from '../../customer/overdraft-protection';
+import Actions from '../../actions';
+import { useUnpaidInvoicesCheckForSubscription } from '../../../hooks/subscription';
 
 type ActionProps = {
   [key: string]: {
@@ -27,17 +38,27 @@ type Props = {
   subscription: TSubscriptionExpanded;
   showExtra?: boolean;
   showRecharge?: boolean;
+  showOverdraftProtection?:
+    | boolean
+    | {
+        show: boolean;
+        onChange: () => any | Promise<any>;
+      };
+  showDelegation?: boolean;
   onChange?: (action?: string) => any | Promise<any>;
   actionProps?: ActionProps;
+  mode?: 'menu' | 'btn';
 };
 
 SubscriptionActions.defaultProps = {
   showExtra: false,
   showRecharge: false,
+  showOverdraftProtection: false,
+  showDelegation: false,
   onChange: null,
   actionProps: {},
+  mode: 'btn',
 };
-
 const fetchExtraActions = async ({
   id,
   showExtra,
@@ -60,7 +81,6 @@ const fetchExtraActions = async ({
         if (!isEmpty(res.data) && Object.keys(res.data).length === 1) {
           return Object.keys(res.data)[0] as string;
         }
-
         return '';
       })
       .catch(() => ''),
@@ -76,11 +96,22 @@ const supportRecharge = (subscription: TSubscriptionExpanded) => {
   );
 };
 
-export function SubscriptionActionsInner({ subscription, showExtra, showRecharge, onChange, actionProps }: Props) {
+export function SubscriptionActionsInner({
+  subscription,
+  showExtra,
+  showRecharge,
+  showOverdraftProtection,
+  showDelegation,
+  onChange,
+  actionProps,
+  mode,
+}: Props) {
   const { t, locale } = useLocaleContext();
   const { reset, getValues } = useFormContext();
   const navigate = useNavigate();
+  const { connect } = usePaymentContext();
   const [subs, setSubscription] = useState(subscription);
+  const { checkUnpaidInvoices } = useUnpaidInvoicesCheckForSubscription(subscription.id, true);
   const action = getSubscriptionAction(subs, actionProps ?? {});
 
   const { data: extraActions } = useRequest(() => fetchExtraActions({ id: subscription.id, showExtra: !!showExtra }));
@@ -89,10 +120,39 @@ export function SubscriptionActionsInner({ subscription, showExtra, showRecharge
     action: '',
     subscription: '',
     loading: false,
+    openProtection: false,
+    protectionLoading: false,
   });
 
+  const shouldFetchDelegation = showDelegation && ['active', 'trialing', 'past_due'].includes(subscription?.status);
+  const shouldFetchOverdraftProtection =
+    ((typeof showOverdraftProtection === 'boolean' && showOverdraftProtection) ||
+      (typeof showOverdraftProtection === 'object' && showOverdraftProtection.show)) &&
+    subscription?.paymentMethod?.type === 'arcblock' &&
+    ['active', 'trialing', 'past_due'].includes(subscription?.status);
+
+  const { data: delegation = { sufficient: true }, refresh: refreshDelegation } = useRequest(
+    () => api.get(`/api/subscriptions/${subscription.id}/delegation`).then((res) => res.data),
+    {
+      ready: shouldFetchDelegation,
+      refreshDeps: [subscription.id, shouldFetchDelegation],
+    }
+  );
+  const noDelegation = delegation && typeof delegation === 'object' && !delegation.sufficient;
+
+  const { data: overdraftProtection = { enabled: false, remaining: '0' }, refresh: refreshOverdraftProtection } =
+    useRequest(() => api.get(`/api/subscriptions/${subscription.id}/overdraft-protection`).then((res) => res.data), {
+      ready: shouldFetchOverdraftProtection,
+      refreshDeps: [subscription.id, shouldFetchOverdraftProtection],
+    });
+
   const handleCancel = async () => {
     try {
+      const result = await checkUnpaidInvoices();
+      if (result) {
+        setState({ action: '' });
+        return;
+      }
       setState({ loading: true });
       const sub = await api
         .put(`/api/subscriptions/${state.subscription}/cancel`, {
@@ -128,81 +188,252 @@ export function SubscriptionActionsInner({ subscription, showExtra, showRecharge
     }
   };
 
-  return (
-    <Stack direction="row" alignItems="center" gap={1} flexWrap="wrap">
-      {showRecharge && supportRecharge(subscription) && (
-        <Button
-          variant="outlined"
-          color="primary"
-          onClick={(e) => {
-            e.stopPropagation();
-            navigate(`/customer/subscription/${subscription.id}/recharge`);
-          }}>
-          {t('customer.recharge.title')}
-        </Button>
-      )}
-      {!extraActions?.batchPay && action && (
-        <Button
-          variant={action.variant as any}
-          color={action.color as any}
-          size="small"
-          sx={action?.sx as any}
-          onClick={(e) => {
-            e.stopPropagation();
-            if (action.action === 'pastDue') {
-              navigate(`/customer/invoice/past-due?subscription=${subscription.id}`);
-            } else {
-              setState({
-                action: action.action,
-                subscription: subscription.id,
-              });
-            }
-          }}>
-          {action?.text || t(`payment.customer.${action.action}.button`)}
-        </Button>
-      )}
-      {extraActions?.changePlan && (
-        <Button
-          variant="contained"
-          color="primary"
-          size="small"
-          sx={action?.sx as any}
-          onClick={(e) => {
-            e.stopPropagation();
-            navigate(`/customer/subscription/${subscription.id}/change-plan`);
-          }}>
-          {action?.text || t('payment.customer.changePlan.button')}
-        </Button>
-      )}
-      {!!extraActions?.batchPay && (
-        <Button
-          variant="contained"
-          color="info"
-          size="small"
-          sx={action?.sx as any}
-          onClick={(e) => {
-            e.stopPropagation();
-            navigate(`/customer/invoice/past-due?subscription=${subscription.id}&currency=${extraActions.batchPay}`);
-          }}>
-          {action?.text || t('admin.subscription.batchPay.button')}
-        </Button>
-      )}
-      {subscription.service_actions
-        ?.filter((x: any) => x?.type !== 'notification')
-        .map((x) => (
+  const handleDelegate = () => {
+    connect.open({
+      containerEl: undefined as unknown as Element,
+      saveConnect: false,
+      action: 'delegation',
+      prefix: joinURL(getPrefix(), '/api/did'),
+      extraParams: { subscriptionId: subscription.id },
+      onSuccess: () => {
+        connect.close();
+        Toast.success(t('customer.delegation.success'));
+        refreshDelegation();
+      },
+      onClose: () => {
+        connect.close();
+      },
+      onError: (err: any) => {
+        Toast.error(formatError(err));
+      },
+    });
+  };
+
+  const handleOverdraftProtection = async (formData: any) => {
+    try {
+      if (!formData.enabled) {
+        const result = await checkUnpaidInvoices();
+        if (result) {
+          setState({ openProtection: false });
+          return;
+        }
+      }
+      setState({ protectionLoading: true });
+      const result = await api
+        .post(`/api/subscriptions/${subscription.id}/overdraft-protection`, formData)
+        .then((res) => res.data);
+
+      const { open, amount } = result;
+
+      if (formData.return_stake && overdraftProtection.remaining !== '0') {
+        Toast.success(t('customer.overdraftProtection.applyRemainingSuccess'));
+        setState({ openProtection: false });
+        refreshOverdraftProtection();
+        // @ts-ignore
+        showOverdraftProtection?.onChange?.();
+        onChange?.();
+        return;
+      }
+
+      if (open) {
+        connect.open({
+          containerEl: undefined as unknown as Element,
+          saveConnect: false,
+          action: 'overdraft-protection',
+          prefix: joinURL(getPrefix(), '/api/did'),
+          extraParams: { subscriptionId: subscription.id, amount },
+          onSuccess: () => {
+            connect.close();
+            Toast.success(t('customer.overdraftProtection.settingSuccess'));
+            setState({ openProtection: false });
+            refreshOverdraftProtection();
+            // @ts-ignore
+            showOverdraftProtection?.onChange?.();
+            onChange?.();
+          },
+          onClose: () => {
+            connect.close();
+            setState({ protectionLoading: false });
+          },
+        });
+      } else {
+        Toast.success(t('customer.overdraftProtection.settingSuccess'));
+        setState({ openProtection: false });
+        refreshOverdraftProtection();
+        // @ts-ignore
+        showOverdraftProtection?.onChange?.();
+        onChange?.();
+      }
+    } catch (err) {
+      Toast.error(formatError(err) || t('customer.overdraftProtection.settingError'));
+      throw err;
+    } finally {
+      setState({ protectionLoading: false });
+    }
+  };
+
+  const renderActions = () => {
+    if (mode === 'menu') {
+      const actions = [
+        showDelegation &&
+          noDelegation && {
+            label: t('customer.delegation.btn'),
+            handler: handleDelegate,
+            color: 'primary',
+            divider: true,
+          },
+        shouldFetchOverdraftProtection && {
+          label: t('customer.overdraftProtection.title'),
+          handler: () => setState({ openProtection: true }),
+          color: 'primary',
+        },
+        showRecharge &&
+          supportRecharge(subscription) && {
+            label: t('customer.recharge.title'),
+            handler: () => navigate(`/customer/subscription/${subscription.id}/recharge`),
+            color: 'primary',
+            divider: true,
+          },
+        !extraActions?.batchPay &&
+          action && {
+            label: action?.text || t(`payment.customer.${action.action}.button`),
+            handler: () => {
+              if (action.action === 'pastDue') {
+                navigate(`/customer/invoice/past-due?subscription=${subscription.id}`);
+              } else {
+                setState({
+                  action: action.action,
+                  subscription: subscription.id,
+                });
+              }
+            },
+            color: action.color as any,
+          },
+        extraActions?.changePlan && {
+          label: action?.text || t('payment.customer.changePlan.button'),
+          handler: () => navigate(`/customer/subscription/${subscription.id}/change-plan`),
+          color: 'primary',
+        },
+        !!extraActions?.batchPay && {
+          label: action?.text || t('admin.subscription.batchPay.button'),
+          handler: () =>
+            navigate(`/customer/invoice/past-due?subscription=${subscription.id}&currency=${extraActions.batchPay}`),
+          color: 'error',
+        },
+        ...(subscription.service_actions
+          ?.filter((x: any) => x?.type !== 'notification')
+          .map((x) => ({
+            label: x.text[locale] || x.text.en || x.name,
+            handler: () => {
+              window.open(x.link, '_blank');
+            },
+            color: x?.color || 'primary',
+          })) || []),
+      ].filter(Boolean);
+
+      return (
+        <Actions
           // @ts-ignore
+          actions={actions}
+        />
+      );
+    }
+    return (
+      <>
+        {showDelegation && noDelegation && (
+          <Tooltip title={t('customer.delegation.title')}>
+            <Button variant="outlined" color="primary" onClick={handleDelegate}>
+              {t('customer.delegation.btn')}
+            </Button>
+          </Tooltip>
+        )}
+
+        {shouldFetchOverdraftProtection && (
+          <Button variant="outlined" color="primary" onClick={() => setState({ openProtection: true })}>
+            {t('customer.overdraftProtection.title')}
+          </Button>
+        )}
+
+        {showRecharge && supportRecharge(subscription) && (
+          <Button
+            variant="outlined"
+            color="primary"
+            onClick={(e) => {
+              e.stopPropagation();
+              navigate(`/customer/subscription/${subscription.id}/recharge`);
+            }}>
+            {t('customer.recharge.title')}
+          </Button>
+        )}
+        {!extraActions?.batchPay && action && (
+          <Button
+            variant={action.variant as any}
+            color={action.color as any}
+            size="small"
+            sx={action?.sx as any}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (action.action === 'pastDue') {
+                navigate(`/customer/invoice/past-due?subscription=${subscription.id}`);
+              } else {
+                setState({
+                  action: action.action,
+                  subscription: subscription.id,
+                });
+              }
+            }}>
+            {action?.text || t(`payment.customer.${action.action}.button`)}
+          </Button>
+        )}
+        {extraActions?.changePlan && (
+          <Button
+            variant="contained"
+            color="primary"
+            size="small"
+            sx={action?.sx as any}
+            onClick={(e) => {
+              e.stopPropagation();
+              navigate(`/customer/subscription/${subscription.id}/change-plan`);
+            }}>
+            {action?.text || t('payment.customer.changePlan.button')}
+          </Button>
+        )}
+        {!!extraActions?.batchPay && (
           <Button
-            component={Link}
-            key={x.name}
-            variant={x?.variant || 'contained'}
-            color={x?.color || 'primary'}
-            href={x.link}
+            variant="outlined"
+            color="error"
             size="small"
-            target="_blank"
-            sx={{ textDecoration: 'none !important' }}>
-            {x.text[locale] || x.text.en || x.name}
+            sx={action?.sx as any}
+            onClick={(e) => {
+              e.stopPropagation();
+              navigate(`/customer/invoice/past-due?subscription=${subscription.id}&currency=${extraActions.batchPay}`);
+            }}>
+            {action?.text || t('admin.subscription.batchPay.button')}
           </Button>
-        ))}
+        )}
+        {subscription.service_actions
+          ?.filter((x: any) => x?.type !== 'notification')
+          .map((x) => (
+            // @ts-ignore
+            <Button
+              component={Link}
+              key={x.name}
+              variant={x?.variant || 'contained'}
+              color={x?.color || 'primary'}
+              href={x.link}
+              size="small"
+              target="_blank"
+              sx={{ textDecoration: 'none !important' }}>
+              {x.text[locale] || x.text.en || x.name}
+            </Button>
+          ))}
+      </>
+    );
+  };
+
+  return (
+    <Stack direction="row" alignItems="center" gap={1} flexWrap="wrap">
+      {renderActions()}
       {state.action === 'cancel' && state.subscription && (
         <ConfirmDialog
           onConfirm={handleCancel}
@@ -229,6 +460,19 @@ export function SubscriptionActionsInner({ subscription, showExtra, showRecharge
           loading={state.loading}
         />
       )}
+
+      {state.openProtection && (
+        <OverdraftProtectionDialog
+          value={overdraftProtection}
+          onSave={handleOverdraftProtection}
+          open={state.openProtection}
+          paymentAddress={subscription.overdraft_protection?.payment_details?.arcblock?.payer}
+          currency={subscription.paymentCurrency}
+          subscription={subscription}
+          loading={state.protectionLoading}
+          onCancel={() => setState({ openProtection: false })}
+        />
+      )}
     </Stack>
   );
 }
@@ -254,6 +498,9 @@ export default function SubscriptionActions(props: Props) {
 SubscriptionActionsInner.defaultProps = {
   showExtra: false,
   showRecharge: false,
+  showOverdraftProtection: false,
+  showDelegation: false,
   onChange: null,
   actionProps: {},
+  mode: 'btn',
 };

package/src/components/uploader.tsx

@@ -2,6 +2,7 @@ import { Avatar, Box, Button } from '@mui/material';
 import { Stack, styled } from '@mui/system';
 import { lazy, Suspense, useCallback, useEffect, useRef } from 'react';
 import { CloudUpload, Delete, Edit } from '@mui/icons-material';
+import { createPortal } from 'react-dom';
 
 const UploaderComponent = lazy(() =>
   import(/* webpackChunkName: "blocklet-uploader" */ '@blocklet/uploader').then((res) => ({
@@ -37,6 +38,35 @@ export default function Uploader({ onUploaded, preview, maxFileSize, maxNumberOf
     }
   }, [onUploaded]);
 
+  const uploaderPortal = (
+    <Suspense fallback={null}>
+      <UploaderComponent
+        // @ts-ignore
+        ref={uploaderRef}
+        popup
+        onUploadFinish={(result: any) => onUploaded({ url: result.data.url })}
+        uploadedProps={{
+          onSelectedFiles: (files: any[]) => {
+            if (files.length) {
+              onUploaded({ url: files[0].fileUrl });
+            }
+          },
+        }}
+        coreProps={{
+          restrictions: {
+            allowedFileExts,
+            maxFileSize,
+            maxNumberOfFiles,
+          },
+        }}
+        apiPathProps={{
+          uploader: '/api/uploads',
+          companion: '/api/companion',
+        }}
+      />
+    </Suspense>
+  );
+
   return (
     <>
       {!preview && (
@@ -99,32 +129,7 @@ export default function Uploader({ onUploaded, preview, maxFileSize, maxNumberOf
         </Div>
       )}
 
-      <Suspense fallback={null}>
-        <UploaderComponent
-          // @ts-ignore
-          ref={uploaderRef}
-          popup
-          onUploadFinish={(result: any) => onUploaded({ url: result.data.url })}
-          uploadedProps={{
-            onSelectedFiles: (files: any[]) => {
-              if (files.length) {
-                onUploaded({ url: files[0].fileUrl });
-              }
-            },
-          }}
-          coreProps={{
-            restrictions: {
-              allowedFileExts,
-              maxFileSize,
-              maxNumberOfFiles,
-            },
-          }}
-          apiPathProps={{
-            uploader: '/api/uploads',
-            companion: '/api/companion',
-          }}
-        />
-      </Suspense>
+      {createPortal(uploaderPortal, document.body)}
     </>
   );
 }

package/src/env.d.ts

@@ -4,6 +4,7 @@ declare var blocklet: {
   appUrl: string;
   prefix: string;
   languages: { code: string; name: string }[];
+  preferences: { overdraftProtectionMaxCount: number };
 };
 
 declare module '*.svg';

package/src/hooks/subscription.ts

@@ -0,0 +1,30 @@
+import { useCallback } from 'react';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { useRequest } from 'ahooks';
+import { api } from '@blocklet/payment-react';
+
+export function useUnpaidInvoicesCheckForSubscription(subscriptionId: string, manualCheck: boolean = false) {
+  const { t } = useLocaleContext();
+
+  const { data = { count: 0 }, runAsync } = useRequest(
+    () => api.get(`/api/subscriptions/${subscriptionId}/unpaid-invoices`).then((res) => res.data),
+    {
+      manual: manualCheck,
+    }
+  );
+
+  const checkUnpaidInvoices = useCallback(async () => {
+    const { count } = await runAsync();
+    if (count > 0) {
+      Toast.warning(t('customer.unpaidInvoicesWarning'));
+      return true;
+    }
+    return false;
+  }, []);
+
+  return {
+    checkUnpaidInvoices,
+    hasUnpaid: data?.count > 0,
+  };
+}

package/src/libs/env.ts

@@ -0,0 +1,4 @@
+export const preferences = {
+  ...(window.blocklet?.preferences || {}),
+  overdraftProtectionMaxCount: Number(window.blocklet?.preferences?.overdraftProtectionMaxCount || 10),
+};

package/src/locales/en.tsx

@@ -23,6 +23,8 @@ export default flat({
       'At least one letter and cannot include Chinese characters and special characters such as <, >、"、’ or \\',
     loading: 'Loading...',
     rechargeTime: 'Recharge Time',
+    submit: 'Submit',
+    custom: 'Custom',
   },
   admin: {
     balances: 'Balances',
@@ -645,5 +647,44 @@ export default flat({
       success: 'Delegate successful',
       error: 'Delegate failed',
     },
+    overdraftProtection: {
+      title: 'Overdraft Protection',
+      setting: 'Overdraft Protection Setting',
+      tip: 'To avoid service interruption due to unpaid invoices, you can enable overdraft protection by staking. Timely payment will not incur additional fees. Please settle your invoices promptly. If your available stake is insufficient or payment is overdue, we will deduct the amount from your stake and charge a service fee.',
+      enabled: 'Enabled',
+      disabled: 'Disabled',
+      returnRemaining: 'Return Remaining Stake',
+      returnRemainingTip:
+        'Once the remaining stake is returned, the overdraft protection will be automatically disabled. Please confirm the action.',
+      applyRemainingSuccess: 'Stake return application successful',
+      remaining:
+        'Your current remaining stake: {amount} {symbol}, estimated required stake per cycle: {estimateAmount} {symbol}.',
+      noRemaining:
+        'No remaining stake available. Please stake at least {estimateAmount} {symbol} as soon as possible to ensure overdraft protection is enabled.',
+      remainingNotEnough:
+        'You have unpaid invoices totaling {due} {symbol}. If not paid, your remaining stake will be insufficient to cover the next invoice. Available stake: {unused} {symbol}. Please stake at least {min} {symbol}.',
+      due: 'Please pay the outstanding amount first',
+      insufficient: 'Insufficient Stake to cover the next invoice',
+      insufficientTip: 'Insufficient Stake, please stake to ensure overdraft protection is enabled.',
+      intervals: 'cycles',
+      estimatedDuration: '{duration} {unit} est.',
+      rule: 'Rule: N * ( P + Fee )',
+      ruleTip:
+        'N is the number of cycles, P is the subscription bill amount, Fee is the overdraft protection service fee, the single fee is {gas} {symbol}',
+      min: 'The amount must be greater or equal to {min} {symbol}',
+      settingSuccess: 'Overdraft protection setting successful',
+      settingError: 'Overdraft protection setting failed',
+      keepStake: 'Not Return',
+      returnStake: 'Return Remaining Stake',
+      stake: 'Stake',
+      address: 'Staking Address',
+      total: 'Total Stake: {total} {symbol}, ',
+      disableConfirm: 'You currently have unpaid invoices, please settle your invoices first.',
+    },
+    unpaidInvoicesWarning: 'You currently have unpaid invoices, please settle your invoices first.',
+    unpaidInvoicesWarningTip: 'You currently have unpaid invoices, please settle your invoices promptly.',
+    invoice: {
+      relatedInvoice: 'Related Invoice',
+    },
   },
 });