payment-kit 1.15.33 → 1.15.35

package/src/components/invoice/recharge.tsx

@@ -0,0 +1,244 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import {
+  Status,
+  api,
+  formatBNStr,
+  getInvoiceStatusColor,
+  Table,
+  useDefaultPageSize,
+  getInvoiceDescriptionAndReason,
+  getTxLink,
+  formatToDate,
+} from '@blocklet/payment-react';
+import type { TInvoiceExpanded } from '@blocklet/payment-types';
+import { CircularProgress, Typography, Box } from '@mui/material';
+import { useLocalStorageState } from 'ahooks';
+import { useEffect, useState } from 'react';
+import { styled } from '@mui/system';
+
+const fetchData = (
+  subscriptionId: string,
+  params: Record<string, any> = {}
+): Promise<{ list: TInvoiceExpanded[]; count: number }> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    let v = params[key];
+    if (key === 'q') {
+      v = Object.entries(v)
+        .map((x) => x.join(':'))
+        .join(' ');
+    }
+    search.set(key, String(v));
+  });
+
+  return api.get(`/api/subscriptions/${subscriptionId}/recharge?${search.toString()}`).then((res) => res.data);
+};
+
+type SearchProps = {
+  status?: string;
+  pageSize: number;
+  page: number;
+  currency_id?: string;
+  subscription_id?: string;
+  q?: any;
+  o?: string;
+};
+
+type ListProps = {
+  features?: {
+    customer?: boolean;
+    toolbar?: boolean;
+    filter?: boolean;
+    footer?: boolean;
+  };
+  currency_id?: string;
+  subscription_id?: string;
+};
+
+const getListKey = (props: ListProps) => {
+  if (props.subscription_id) {
+    return `subscription-recharge-${props.subscription_id}`;
+  }
+  return 'invoices';
+};
+
+RechargeList.defaultProps = {
+  features: {
+    customer: true,
+    filter: true,
+  },
+  currency_id: '',
+  subscription_id: '',
+};
+
+export default function RechargeList({ currency_id, subscription_id, features }: ListProps) {
+  const listKey = getListKey({ currency_id, subscription_id });
+
+  const { t, locale } = useLocaleContext();
+  const defaultPageSize = useDefaultPageSize(20);
+  const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
+    defaultValue: {
+      currency_id,
+      pageSize: defaultPageSize,
+      page: 1,
+    },
+  });
+
+  const [data, setData] = useState({}) as any;
+
+  const refresh = () =>
+    fetchData(subscription_id!, {
+      ...search,
+    }).then((res: any) => {
+      setData(res);
+    });
+
+  useEffect(() => {
+    refresh();
+  }, [search]);
+
+  if (!data.list) {
+    return <CircularProgress />;
+  }
+
+  const getInvoiceLink = (invoice: TInvoiceExpanded) => {
+    return {
+      external: true,
+      connect: false,
+      url: getTxLink(invoice.paymentMethod, invoice.metadata?.payment_details).link,
+    };
+  };
+
+  const columns = [
+    {
+      label: t('common.amount'),
+      name: 'total',
+      width: 80,
+      align: 'right',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const invoice = data?.list[index] as TInvoiceExpanded;
+          const link = getInvoiceLink(invoice);
+          return (
+            <a href={link.url} target="_blank" rel="noreferrer">
+              <Typography>
+                {formatBNStr(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
+                {invoice.paymentCurrency.symbol}
+              </Typography>
+            </a>
+          );
+        },
+      },
+    },
+    {
+      label: t('payment.customer.invoice.invoiceNumber'),
+      name: 'number',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const invoice = data?.list[index] as TInvoiceExpanded;
+          const link = getInvoiceLink(invoice);
+          return (
+            <a href={link.url} target="_blank" rel="noreferrer">
+              {invoice?.number}
+            </a>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.rechargeTime'),
+      name: 'name',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const invoice = data?.list[index] as TInvoiceExpanded;
+          const link = getInvoiceLink(invoice);
+          return (
+            <a href={link.url} target="_blank" rel="noreferrer">
+              {formatToDate(invoice.created_at, locale, 'YYYY-MM-DD HH:mm:ss')}
+            </a>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.description'),
+      name: '',
+      options: {
+        sort: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const invoice = data?.list[index] as TInvoiceExpanded;
+          const link = getInvoiceLink(invoice);
+          return (
+            <a href={link.url} target="_blank" rel="noreferrer">
+              {getInvoiceDescriptionAndReason(invoice, locale)?.description || invoice.id}
+            </a>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.status'),
+      name: 'status',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const invoice = data?.list[index] as TInvoiceExpanded;
+          const link = getInvoiceLink(invoice);
+          return (
+            <a href={link.url} target="_blank" rel="noreferrer">
+              <Status label={invoice.status} color={getInvoiceStatusColor(invoice.status)} />
+            </a>
+          );
+        },
+      },
+    },
+  ];
+
+  const onTableChange = ({ page, rowsPerPage }: any) => {
+    if (search!.pageSize !== rowsPerPage) {
+      setSearch((x) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
+    } else if (search!.page !== page + 1) {
+      // @ts-ignore
+      setSearch((x) => ({ ...x, page: page + 1 }));
+    }
+  };
+
+  return (
+    <InvoiceTableRoot>
+      <Table
+        hasRowLink
+        data={data.list}
+        durable={`__${listKey}__`}
+        durableKeys={['searchText']}
+        columns={columns}
+        loading={!data.list}
+        onChange={onTableChange}
+        mobileTDFlexDirection="row"
+        options={{
+          count: data.count,
+          page: search!.page - 1,
+          rowsPerPage: search!.pageSize,
+        }}
+        toolbar={false}
+        showMobile={false}
+        footer={features?.footer}
+        emptyNodeText={`${t('empty.invoices')}`}
+      />
+    </InvoiceTableRoot>
+  );
+}
+
+const InvoiceTableRoot = styled(Box)`
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
+      > div {
+        width: fit-content;
+        flex: inherit;
+        font-size: 14px;
+      }
+    }
+    .invoice-summary {
+      padding-right: 20px;
+    }
+  }
+`;

package/src/components/payment-intent/actions.tsx

@@ -187,6 +187,7 @@ export function PaymentIntentActionsInner({ data, variant, onChange }: Props) {
         const amount = formatBNStr(res?.amount, data.paymentCurrency.decimal);
         setRefundMaxAmount(amount);
       },
+      manual: true,
     }
   );
 
@@ -247,7 +248,7 @@ export function PaymentIntentActionsInner({ data, variant, onChange }: Props) {
 
   return (
     <ClickBoundary>
-      <Actions variant={variant} actions={actions} />
+      <Actions variant={variant} actions={actions} onOpenCallback={runRefundAmountAsync} />
       {state.action === 'refund' && (
         <ConfirmDialog
           onConfirm={handleSubmit(onRefund)}

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

@@ -87,12 +87,12 @@ export default function PaymentLinkActions({ data, variant, onChange }: Props) {
             handler: onOpenLink,
             color: 'primary',
           },
-          {
-            label: t('admin.paymentLink.edit'),
-            handler: () => setState({ action: 'edit' }),
-            color: 'primary',
-            disabled: true,
-          },
+          // {
+          //   label: t('admin.paymentLink.edit'),
+          //   handler: () => setState({ action: 'edit' }),
+          //   color: 'primary',
+          //   disabled: true,
+          // },
           {
             label: t('admin.paymentLink.copyLink'),
             handler: onCopyLink,

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

@@ -26,6 +26,10 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
   const { control, setValue } = useFormContext();
   const [state, setState] = useSetState({ editing: false, loading: false });
   const adjustable = useWatch({ control, name: getFieldName('adjustable_quantity.enabled') });
+  const minQuantity = useWatch({ control, name: getFieldName('adjustable_quantity.minimum') });
+  const maxQuantity = useWatch({ control, name: getFieldName('adjustable_quantity.maximum') });
+
+  const adjustableError = Number(minQuantity) >= Number(maxQuantity);
 
   const onSave = async (updates: TProduct) => {
     try {
@@ -110,24 +114,55 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
           )}
         />
         {adjustable && (
-          <Stack direction="row" alignItems="center" mt={1} ml={6}>
-            <Typography sx={{ mr: 0.5 }}>Between</Typography>
-            <Controller
-              name={getFieldName('adjustable_quantity.minimum')}
-              control={control}
-              render={({ field }) => (
-                <TextField sx={{ width: 40 }} inputProps={{ style: { padding: '4px 8px' } }} size="small" {...field} />
-              )}
-            />
-            <Typography sx={{ mx: 0.5 }}>and</Typography>
-            <Controller
-              name={getFieldName('adjustable_quantity.maximum')}
-              control={control}
-              render={({ field }) => (
-                <TextField sx={{ width: 40 }} inputProps={{ style: { padding: '4px 8px' } }} size="small" {...field} />
-              )}
-            />
-          </Stack>
+          <>
+            <Stack direction="row" alignItems="center" mt={1} ml={6}>
+              <Typography sx={{ mr: 0.5 }}>Between</Typography>
+              <Controller
+                name={getFieldName('adjustable_quantity.minimum')}
+                control={control}
+                rules={{
+                  validate: (value) => {
+                    return !maxQuantity || Number(value) < Number(maxQuantity) || 'Minimum must be less than maximum';
+                  },
+                }}
+                render={({ field }) => (
+                  <TextField
+                    sx={{ width: 40 }}
+                    inputProps={{ style: { padding: '4px 8px' } }}
+                    size="small"
+                    error={!!adjustableError}
+                    {...field}
+                  />
+                )}
+              />
+              <Typography sx={{ mx: 0.5 }}>and</Typography>
+              <Controller
+                name={getFieldName('adjustable_quantity.maximum')}
+                control={control}
+                rules={{
+                  validate: (value) => {
+                    return (
+                      !minQuantity || Number(value) > Number(minQuantity) || 'Maximum must be greater than minimum'
+                    );
+                  },
+                }}
+                render={({ field }) => (
+                  <TextField
+                    sx={{ width: 40 }}
+                    inputProps={{ style: { padding: '4px 8px' } }}
+                    size="small"
+                    error={!!adjustableError}
+                    {...field}
+                  />
+                )}
+              />
+            </Stack>
+            {adjustableError && (
+              <Typography sx={{ mt: 0.5, ml: 6 }} color="error">
+                {t('admin.paymentLink.adjustableQuantityError')}
+              </Typography>
+            )}
+          </>
         )}
       </Stack>
       {state.editing && (

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

@@ -73,17 +73,28 @@ export default function PricingTableActions({ data, variant, onChange }: Props)
     Toast.success(t('common.copied'));
   };
 
+  const onOpenLink = () => {
+    window.open(
+      joinURL(window.blocklet.appUrl, window.blocklet.prefix, `/checkout/pricing-table/${data.id}`),
+      '_blank'
+    );
+  };
   return (
     <ClickBoundary>
       <Actions
         variant={variant}
         actions={[
           {
-            label: t('admin.pricingTable.edit'),
-            handler: () => setState({ action: 'edit' }),
+            label: t('admin.pricingTable.openLink'),
+            handler: onOpenLink,
             color: 'primary',
-            disabled: true,
           },
+          // {
+          //   label: t('admin.pricingTable.edit'),
+          //   handler: () => setState({ action: 'edit' }),
+          //   color: 'primary',
+          //   disabled: true,
+          // },
           {
             label: t('admin.pricingTable.copyLink'),
             handler: onCopyLink,

package/src/components/pricing-table/payment-settings.tsx

@@ -22,7 +22,7 @@ export function PricePaymentSettings({ index }: { index: number }) {
     formState: { errors },
   } = useFormContext();
   const type = useWatch({ control, name: getFieldName('after_completion.type') });
-  const nftMintEnabled = useWatch({ control, name: 'nft_mint_settings.enabled' });
+  const nftMintEnabled = useWatch({ control, name: getFieldName('nft_mint_settings.enabled') });
 
   const values = getValues();
 

package/src/components/refund/actions.tsx

@@ -3,21 +3,31 @@ import type { TRefundExpanded } from '@blocklet/payment-types';
 import { useNavigate } from 'react-router-dom';
 import type { LiteralUnion } from 'type-fest';
 
+import { api, ConfirmDialog, formatError } from '@blocklet/payment-react';
+import { useSetState } from 'ahooks';
+import Toast from '@arcblock/ux/lib/Toast';
 import Actions from '../actions';
 import ClickBoundary from '../click-boundary';
 
 type Props = {
   data: TRefundExpanded;
+  onChange?: (action: string) => void;
   variant?: LiteralUnion<'compact' | 'normal', string>;
 };
 
 RefundActions.defaultProps = {
   variant: 'compact',
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onChange: () => {},
 };
 
-export default function RefundActions({ data, variant }: Props) {
+export default function RefundActions({ data, variant, onChange }: Props) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
+  const [state, setState] = useSetState({
+    action: '',
+    loading: false,
+  });
 
   const actions = [
     {
@@ -35,10 +45,42 @@ export default function RefundActions({ data, variant }: Props) {
       disabled: false,
     });
   }
+  if (!['succeeded', 'canceled'].includes(data.status)) {
+    actions.push({
+      label: t('admin.paymentIntent.cancelRefund'),
+      handler: () => setState({ action: 'cancel' }),
+      color: 'error',
+      disabled: false,
+    });
+  }
+
+  const onCancel = async () => {
+    try {
+      setState({ loading: true });
+      await api.post(`/api/refunds/${data?.id}/cancel`);
+      Toast.success(t('admin.paymentIntent.refundCanceled'));
+      // @ts-ignore
+      onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
 
   return (
     <ClickBoundary>
       <Actions variant={variant} actions={actions} />
+      {state.action === 'cancel' && (
+        <ConfirmDialog
+          onConfirm={onCancel}
+          onCancel={() => setState({ action: '' })}
+          title={t('admin.paymentIntent.cancelRefund')}
+          message={t('admin.paymentIntent.refundCanceledTip')}
+          loading={state.loading}
+        />
+      )}
     </ClickBoundary>
   );
 }

package/src/components/refund/list.tsx

@@ -222,7 +222,7 @@ export default function RefundList({
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TRefundExpanded;
-          return <RefundActions data={item} />;
+          return <RefundActions data={item} onChange={() => refresh()} />;
         },
       },
     },

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

@@ -1,12 +1,15 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { api, dayjs, formatAmount, formatTime } from '@blocklet/payment-react';
-import type { TSubscriptionExpanded } from '@blocklet/payment-types';
+import type { TPaymentCurrency, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { Box, Divider, FormControlLabel, Radio, RadioGroup, Stack, TextField, Typography, styled } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { useEffect, useMemo } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
-const fetchData = (id: string, time: string): Promise<{ total: string; unused: string }> => {
+const fetchData = (
+  id: string,
+  time: string
+): Promise<{ total: string; unused: string; paymentCurrency: TPaymentCurrency }> => {
   return api.get(`/api/subscriptions/${id}/proration?time=${encodeURIComponent(time)}`).then((res: any) => res.data);
 };
 
@@ -128,8 +131,8 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
               onClick={() => !(loading || refundDisabled) && setValue('cancel.refund', 'last')}
               control={<Radio checked={refundType === 'last'} />}
               label={t('admin.subscription.cancel.refund.last', {
-                symbol,
-                total: formatAmount(refund?.total || '0', decimal),
+                symbol: refund?.paymentCurrency?.symbol || symbol,
+                total: formatAmount(refund?.total || '0', refund?.paymentCurrency?.decimal || decimal),
               })}
             />
             <FormControlLabel
@@ -138,9 +141,9 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
               onClick={() => !(loading || refundDisabled) && setValue('cancel.refund', 'proration')}
               control={<Radio checked={refundType === 'proration'} />}
               label={t('admin.subscription.cancel.refund.proration', {
-                symbol,
-                total: formatAmount(refund?.total || '0', decimal),
-                unused: formatAmount(refund?.unused || '0', decimal),
+                symbol: refund?.paymentCurrency?.symbol || symbol,
+                total: formatAmount(refund?.total || '0', refund?.paymentCurrency?.decimal || decimal),
+                unused: formatAmount(refund?.unused || '0', refund?.paymentCurrency?.decimal || decimal),
               })}
             />
           </RadioGroup>

package/src/components/subscription/metrics.tsx

@@ -40,7 +40,7 @@ export default function SubscriptionMetrics({ subscription }: Props) {
           divider
         />
       )}
-      {upcoming?.amount && upcoming.amount !== '0' && (
+      {['active', 'trialing'].includes(subscription.status) && upcoming?.amount && upcoming.amount !== '0' && (
         <InfoMetric
           label={t('admin.subscription.nextInvoiceAmount')}
           value={`${formatBNStr(upcoming.amount, subscription.paymentCurrency.decimal)} ${

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

@@ -26,12 +26,14 @@ type ActionProps = {
 type Props = {
   subscription: TSubscriptionExpanded;
   showExtra?: boolean;
+  showRecharge?: boolean;
   onChange?: (action?: string) => any | Promise<any>;
   actionProps?: ActionProps;
 };
 
 SubscriptionActions.defaultProps = {
   showExtra: false,
+  showRecharge: false,
   onChange: null,
   actionProps: {},
 };
@@ -67,7 +69,14 @@ const fetchExtraActions = async ({
   return { changePlan, batchPay };
 };
 
-export function SubscriptionActionsInner({ subscription, showExtra, onChange, actionProps }: Props) {
+const supportRecharge = (subscription: TSubscriptionExpanded) => {
+  return (
+    ['active', 'trialing', 'past_due'].includes(subscription?.status) &&
+    ['arcblock', 'ethereum'].includes(subscription?.paymentMethod?.type)
+  );
+};
+
+export function SubscriptionActionsInner({ subscription, showExtra, showRecharge, onChange, actionProps }: Props) {
   const { t, locale } = useLocaleContext();
   const { reset, getValues } = useFormContext();
   const navigate = useNavigate();
@@ -121,6 +130,17 @@ export function SubscriptionActionsInner({ subscription, showExtra, onChange, ac
 
   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}
@@ -233,6 +253,7 @@ export default function SubscriptionActions(props: Props) {
 
 SubscriptionActionsInner.defaultProps = {
   showExtra: false,
+  showRecharge: false,
   onChange: null,
   actionProps: {},
 };

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

@@ -192,6 +192,7 @@ export default function CurrentSubscriptions({
                             onChange(v);
                           }
                         }}
+                        showRecharge
                         actionProps={{
                           cancel: {
                             variant: 'outlined',