@blocklet/payment-react 1.14.21 → 1.14.22

package/src/history/invoice/list.tsx

@@ -1,3 +1,7 @@
+/* eslint-disable @typescript-eslint/indent */
+/* eslint-disable react/require-default-props */
+/* eslint-disable react/no-unused-prop-types */
+/* eslint-disable @typescript-eslint/naming-convention */
 /* eslint-disable no-nested-ternary */
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
@@ -6,8 +10,8 @@ import type { Paginated, TInvoiceExpanded, TSubscription } from '@blocklet/payme
 import { OpenInNewOutlined } from '@mui/icons-material';
 import { Box, Button, CircularProgress, Hidden, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
-import { useInfiniteScroll, useSetState } from 'ahooks';
-import { useEffect } from 'react';
+import { useInfiniteScroll, useRequest, useSetState } from 'ahooks';
+import React, { useEffect, useState } from 'react';
 import { joinURL } from 'ufo';
 
 import Status from '../../components/status';
@@ -23,6 +27,7 @@ import {
   getPrefix,
   getTxLink,
 } from '../../libs/util';
+import Table from '../../components/table';
 
 type Result = Paginated<TInvoiceExpanded> & { subscription: TSubscription };
 
@@ -58,6 +63,7 @@ type Props = {
   pageSize?: number;
   target?: string;
   action?: string;
+  type?: 'list' | 'table';
 };
 
 const getInvoiceLink = (invoice: TInvoiceExpanded, action?: string) => {
@@ -79,23 +85,210 @@ const getInvoiceLink = (invoice: TInvoiceExpanded, action?: string) => {
   };
 };
 
-export default function CustomerInvoiceList({
-  customer_id,
-  subscription_id,
-  currency_id,
-  include_staking,
-  include_recovered_from,
-  status,
-  pageSize,
-  target,
-  action,
-}: Props) {
+const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) => void }) => {
+  const {
+    pageSize,
+    target,
+    action,
+    onPay,
+    status,
+    customer_id,
+    currency_id,
+    subscription_id,
+    include_staking,
+    include_recovered_from,
+  } = props;
+  const listKey = 'invoice-table';
+  const { t, locale } = useLocaleContext();
+
+  const [search, setSearch] = useState<{ pageSize: number; page: number }>({
+    pageSize: pageSize || 10,
+    page: 1,
+  });
+  const { loading, data = { list: [], count: 0 } } = useRequest(
+    () =>
+      fetchData({
+        ...search,
+        status,
+        customer_id,
+        currency_id,
+        subscription_id,
+        include_staking,
+        include_recovered_from,
+        ignore_zero: true,
+      }),
+    {
+      refreshDeps: [search],
+    }
+  );
+
+  const columns = [
+    {
+      label: t('payment.customer.invoice.invoiceNumber'),
+      name: 'number',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const invoice = data?.list[index] as TInvoiceExpanded;
+          const link = getInvoiceLink(invoice, action);
+          return (
+            <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
+              {invoice?.number}
+            </a>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.amount'),
+      name: 'total',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const invoice = data?.list[index] as TInvoiceExpanded;
+          const link = getInvoiceLink(invoice, action);
+          return (
+            <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
+              <Typography>
+                {formatBNStr(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
+                {invoice.paymentCurrency.symbol}
+              </Typography>
+            </a>
+          );
+        },
+      },
+    },
+
+    {
+      label: t('common.updatedAt'),
+      name: 'name',
+      options: {
+        customBodyRenderLite: (val: string, index: number) => {
+          const invoice = data?.list[index] as TInvoiceExpanded;
+          const link = getInvoiceLink(invoice, action);
+          return (
+            <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
+              {formatToDate(invoice.created_at, locale, 'YYYY-MM-DD HH:mm:ss')}
+            </a>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.description'),
+      name: '',
+      options: {
+        sort: false,
+        customBodyRenderLite: (val: string, index: number) => {
+          const invoice = data?.list[index] as TInvoiceExpanded;
+          const link = getInvoiceLink(invoice, action);
+          return (
+            <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
+              {invoice.description || invoice.id}
+            </a>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.status'),
+      name: 'created_at',
+      options: {
+        sort: true,
+        customBodyRenderLite: (val: string, index: number) => {
+          const invoice = data?.list[index] as TInvoiceExpanded;
+          const link = getInvoiceLink(invoice, action);
+          if (action) {
+            return link.connect ? (
+              <Button variant="text" size="small" onClick={() => onPay(invoice.id)} sx={{ color: 'text.link' }}>
+                {t('payment.customer.invoice.pay')}
+              </Button>
+            ) : (
+              <Button
+                component="a"
+                variant="text"
+                size="small"
+                href={link.url}
+                target={link.external ? '_blank' : target}
+                sx={{ color: 'var(--foregrounds-fg-interactive, #0086FF) !important' }}
+                rel="noreferrer">
+                {t('payment.customer.invoice.pay')}
+              </Button>
+            );
+          }
+          return (
+            <a href={link.url} target={link.external ? '_blank' : target} 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) {
+      setSearch((x) => ({ ...x, page: page + 1 }));
+    }
+  };
+
+  return (
+    <InvoiceTableRoot>
+      <Table
+        hasRowLink
+        durable={`__${listKey}__`}
+        durableKeys={['page', 'rowsPerPage', 'searchText']}
+        data={data.list}
+        columns={columns}
+        options={{
+          count: data.count,
+          page: search.page - 1,
+          rowsPerPage: search.pageSize,
+        }}
+        loading={loading}
+        onChange={onTableChange}
+        toolbar={false}
+        sx={{ mt: 2 }}
+        showMobile={false}
+        mobileTDFlexDirection="row"
+        emptyNodeText={t('payment.customer.invoice.emptyList')}
+      />
+    </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;
+    }
+  }
+`;
+
+const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => void }) => {
+  const {
+    customer_id,
+    subscription_id,
+    include_recovered_from,
+    currency_id,
+    include_staking,
+    status,
+    pageSize,
+    target,
+    action,
+    onPay,
+  } = props;
   const size = pageSize || 10;
 
   const subscription = useSubscription('events');
   const { t, locale } = useLocaleContext();
-  const { connect } = usePaymentContext();
-  const [state, setState] = useSetState({ paying: '' });
 
   const { data, loadMore, loadingMore, loading, reloadAsync } = useInfiniteScroll<Result>(
     (d) => {
@@ -128,38 +321,6 @@ export default function CustomerInvoiceList({
     }
   }, [subscription]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const onPay = (invoiceId: string) => {
-    if (state.paying) {
-      return;
-    }
-
-    setState({ paying: invoiceId });
-    connect.open({
-      action: 'collect',
-      saveConnect: false,
-      messages: {
-        scan: '',
-        title: t(`payment.customer.invoice.${action || 'pay'}`),
-        success: t(`payment.customer.invoice.${action || 'pay'}Success`),
-        error: t(`payment.customer.invoice.${action || 'pay'}Error`),
-        confirm: '',
-      } as any,
-      extraParams: { invoiceId, action },
-      onSuccess: () => {
-        connect.close();
-        setState({ paying: '' });
-      },
-      onClose: () => {
-        connect.close();
-        setState({ paying: '' });
-      },
-      onError: (err: any) => {
-        setState({ paying: '' });
-        Toast.error(formatError(err));
-      },
-    });
-  };
-
   if (loading || !data) {
     return <CircularProgress />;
   }
@@ -241,7 +402,6 @@ export default function CustomerInvoiceList({
                       <Button
                         component="a"
                         variant="contained"
-                        color="primary"
                         size="small"
                         href={link.url}
                         target={link.external ? '_blank' : target}
@@ -274,6 +434,50 @@ export default function CustomerInvoiceList({
       </Box>
     </Root>
   );
+});
+
+export default function CustomerInvoiceList(props: Props) {
+  const { action, type } = props;
+  const { t } = useLocaleContext();
+  const { connect } = usePaymentContext();
+  const [state, setState] = useSetState({ paying: '' });
+
+  const onPay = (invoiceId: string) => {
+    if (state.paying) {
+      return;
+    }
+
+    setState({ paying: invoiceId });
+    connect.open({
+      action: 'collect',
+      saveConnect: false,
+      messages: {
+        scan: '',
+        title: t(`payment.customer.invoice.${action || 'pay'}`),
+        success: t(`payment.customer.invoice.${action || 'pay'}Success`),
+        error: t(`payment.customer.invoice.${action || 'pay'}Error`),
+        confirm: '',
+      } as any,
+      extraParams: { invoiceId, action },
+      onSuccess: () => {
+        connect.close();
+        setState({ paying: '' });
+      },
+      onClose: () => {
+        connect.close();
+        setState({ paying: '' });
+      },
+      onError: (err: any) => {
+        setState({ paying: '' });
+        Toast.error(formatError(err));
+      },
+    });
+  };
+
+  if (type === 'table') {
+    return <InvoiceTable {...props} onPay={onPay} />;
+  }
+  return <InvoiceList {...props} onPay={onPay} />;
 }
 
 CustomerInvoiceList.defaultProps = {
@@ -286,10 +490,11 @@ CustomerInvoiceList.defaultProps = {
   pageSize: 10,
   target: '_self',
   action: '',
+  type: 'list',
 };
 
 const Root = styled(Stack)`
-  @media (max-width: 600px) {
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
     .invoice-description {
       display: none !important;
     }

package/src/hooks/mobile.ts

@@ -0,0 +1,13 @@
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+
+const MOBILE_POINT = 'md';
+
+export function useMobile(mobilePoint: 'md' | 'sm' | 'lg' | 'xl' | 'xs' = MOBILE_POINT) {
+  const theme = useTheme();
+
+  return {
+    isMobile: useMediaQuery(theme.breakpoints.down(mobilePoint)),
+    mobileSize: `${theme.breakpoints.values[mobilePoint]}px`,
+  };
+}

package/src/index.ts

@@ -7,6 +7,7 @@ import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
 import Livemode from './components/livemode';
 import PricingTable from './components/pricing-table';
+import Table from './components/table';
 import SafeGuard from './components/safe-guard';
 import Status from './components/status';
 import Switch from './components/switch-button';
@@ -23,11 +24,15 @@ import Payment from './payment/index';
 import ProductSkeleton from './payment/product-skeleton';
 import PaymentSummary from './payment/summary';
 import PricingItem from './components/pricing-item';
+import CountrySelect from './components/country-select';
+
+export { PaymentThemeProvider } from './theme';
 
 export * from './libs/util';
 export * from './libs/connect';
 export * from './contexts/payment';
 export * from './hooks/subscription';
+export * from './hooks/mobile';
 
 export { translations, createTranslator } from './locales';
 
@@ -57,4 +62,6 @@ export {
   TxGas,
   SafeGuard,
   PricingItem,
+  CountrySelect,
+  Table,
 };

package/src/libs/util.ts

@@ -24,7 +24,7 @@ import { joinURL } from 'ufo';
 
 import { t } from '../locales';
 import dayjs from './dayjs';
-import { PricingRenderProps } from '../types';
+import { ActionProps, PricingRenderProps } from '../types';
 
 export const PAYMENT_KIT_DID = 'z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk';
 
@@ -533,6 +533,32 @@ export function formatUpsellSaving(items: TLineItemExpanded[], currency: TPaymen
   return Number(before.sub(after).mul(new BN(100)).div(before).toString()).toFixed(0);
 }
 
+export function formatMeteredThen(
+  subscription: string,
+  recurring: string,
+  hasMetered: boolean,
+  locale: string = 'en'
+): string {
+  if (hasMetered) {
+    return t('payment.checkout.meteredThen', locale, { subscription, recurring });
+  }
+  return t('payment.checkout.then', locale, { subscription, recurring });
+}
+
+export function formatPriceDisplay(
+  { amount, then, actualAmount, showThen }: { amount: string; then?: string; actualAmount: string; showThen?: boolean },
+  recurring: string,
+  hasMetered: boolean,
+  locale: string = 'en'
+) {
+  if (Number(actualAmount) === 0 && hasMetered) {
+    return t('payment.checkout.metered', locale, { recurring });
+  }
+  if (showThen) {
+    return [amount, then].filter(Boolean).join(', ');
+  }
+  return [amount, then].filter(Boolean).join(' ');
+}
 export function formatCheckoutHeadlines(
   items: TLineItemExpanded[],
   currency: TPaymentCurrency,
@@ -543,9 +569,13 @@ export function formatCheckoutHeadlines(
   amount: string;
   then?: string;
   secondary?: string;
+  showThen?: boolean;
+  actualAmount: string;
+  priceDisplay: string;
 } {
   const brand = getStatementDescriptor(items);
   const { total } = getCheckoutAmount(items, currency, trialInDays > 0);
+  const actualAmount = fromUnitToToken(total, currency.decimal);
   const amount = `${fromUnitToToken(total, currency.decimal)} ${currency.symbol}`;
 
   // empty
@@ -554,6 +584,8 @@ export function formatCheckoutHeadlines(
       action: t('payment.checkout.empty', locale),
       amount: '0',
       then: '',
+      actualAmount: '0',
+      priceDisplay: '0',
     };
   }
 
@@ -563,10 +595,10 @@ export function formatCheckoutHeadlines(
   if (items.every((x) => x.price.type === 'one_time')) {
     const action = t('payment.checkout.pay', locale, { payee: brand });
     if (items.length > 1) {
-      return { action, amount };
+      return { action, amount, actualAmount, priceDisplay: amount };
     }
 
-    return { action, amount, then: '' };
+    return { action, amount, then: '', actualAmount, priceDisplay: amount };
   }
 
   const item = items.find((x) => x.price.type === 'recurring');
@@ -576,10 +608,9 @@ export function formatCheckoutHeadlines(
     'per',
     locale
   );
-
+  const hasMetered = items.some((x) => x.price.type === 'recurring' && x.price.recurring?.usage_type === 'metered');
   // all recurring
   if (items.every((x) => x.price.type === 'recurring')) {
-    const hasMetered = items.some((x) => x.price.type === 'recurring' && x.price.recurring?.usage_type === 'metered');
     const subscription = [
       hasMetered ? t('payment.checkout.least', locale) : '',
       fromUnitToToken(
@@ -597,32 +628,54 @@ export function formatCheckoutHeadlines(
       .join(' ');
     if (items.length > 1) {
       if (trialInDays > 0) {
-        return {
+        const result = {
           action: t('payment.checkout.try2', locale, { name, count: items.length - 1 }),
           amount: t('payment.checkout.free', locale, { count: trialInDays }),
-          then: t('payment.checkout.then', locale, { subscription, recurring }),
+          then: formatMeteredThen(subscription, recurring, hasMetered && Number(subscription) === 0, locale),
+          showThen: true,
+          actualAmount: '0',
+        };
+        return {
+          ...result,
+          priceDisplay: formatPriceDisplay(result, recurring, hasMetered, locale),
         };
       }
-
-      return {
+      const result = {
         action: t('payment.checkout.sub2', locale, { name, count: items.length - 1 }),
         amount,
-        then: recurring,
+        then: hasMetered ? t('payment.checkout.meteredThen', locale, { recurring }) : recurring,
+        showThen: hasMetered,
+        actualAmount,
+      };
+      return {
+        ...result,
+        priceDisplay: formatPriceDisplay(result, recurring, hasMetered, locale),
       };
     }
 
     if (trialInDays > 0) {
-      return {
+      const result = {
         action: t('payment.checkout.try1', locale, { name }),
         amount: t('payment.checkout.free', locale, { count: trialInDays }),
-        then: t('payment.checkout.then', locale, { subscription, recurring }),
+        then: formatMeteredThen(subscription, recurring, hasMetered && Number(subscription) === 0, locale),
+        showThen: true,
+        actualAmount: '0',
+      };
+      return {
+        ...result,
+        priceDisplay: formatPriceDisplay(result, recurring, hasMetered, locale),
       };
     }
-
-    return {
+    const result = {
       action: t('payment.checkout.sub1', locale, { name }),
       amount,
-      then: recurring,
+      then: hasMetered ? t('payment.checkout.meteredThen', locale, { recurring }) : recurring,
+      showThen: hasMetered,
+      actualAmount,
+    };
+    return {
+      ...result,
+      priceDisplay: formatPriceDisplay(result, recurring, hasMetered, locale),
     };
   }
 
@@ -639,10 +692,22 @@ export function formatCheckoutHeadlines(
     currency.decimal
   );
 
-  return {
+  const result = {
     action: t('payment.checkout.pay', locale, { payee: brand }),
     amount,
-    then: t('payment.checkout.then', locale, { subscription: `${subscription} ${currency.symbol}`, recurring }),
+    then: formatMeteredThen(
+      `${subscription} ${currency.symbol}`,
+      recurring,
+      hasMetered && Number(subscription) === 0,
+      locale
+    ),
+    showThen: true,
+    actualAmount,
+  };
+
+  return {
+    ...result,
+    priceDisplay: formatPriceDisplay(result, recurring, hasMetered, locale),
   };
 }
 
@@ -690,48 +755,65 @@ export function formatSubscriptionProduct(items: TSubscriptionItemExpanded[], ma
 }
 
 export const getSubscriptionTimeSummary = (subscription: TSubscriptionExpanded) => {
-  const lines = [`Started on ${formatToDate(subscription.start_date * 1000)}`];
+  const lines = [`Start on ${formatToDate(subscription.start_date * 1000, 'en', 'YYYY-MM-DD')}`];
+
+  const getLineTimeMessage = (time: number) => {
+    const curDay = dayjs().isSame(dayjs(time), 'day');
+    const timeFormat = curDay ? 'HH:mm:ss' : 'YYYY-MM-DD';
+    return `${curDay ? 'in' : 'on'} ${formatToDate(time, 'en', timeFormat)}`;
+  };
+
   if (subscription.status === 'active' || subscription.status === 'trialing') {
     if (subscription.cancel_at) {
-      lines.push(`will cancel on ${formatToDate(subscription.cancel_at * 1000)}`);
+      lines.push(`Ended ${getLineTimeMessage(subscription.cancel_at * 1000)}`);
     } else if (subscription.cancel_at_period_end) {
-      lines.push(`will cancel on ${formatToDate(subscription.current_period_end * 1000)}`);
+      lines.push(`Ended ${getLineTimeMessage(subscription.current_period_end * 1000)}`);
     } else {
-      lines.push(`will renew on ${formatToDate(subscription.current_period_end * 1000)}`);
+      lines.push(`Renew ${getLineTimeMessage(subscription.current_period_end * 1000)}`);
     }
   } else if (subscription.status === 'past_due') {
-    lines.push(`will cancel on ${formatToDate((subscription.cancel_at || subscription.current_period_end) * 1000)}`);
+    lines.push(`Ended ${getLineTimeMessage((subscription.cancel_at || subscription.current_period_end) * 1000)}`);
   } else if (subscription.status === 'canceled') {
-    lines.push(`canceled on ${formatToDate(subscription.canceled_at * 1000)}`);
+    lines.push(`Ended ${getLineTimeMessage(subscription.canceled_at * 1000)}`);
   }
 
-  return lines.join(', ');
+  return lines.join(',');
 };
 
-export const getSubscriptionAction = (subscription: TSubscriptionExpanded) => {
+export const getSubscriptionAction = (
+  subscription: TSubscriptionExpanded,
+  actionProps: ActionProps
+): {
+  action: string;
+  variant: string;
+  color: string;
+  canRenew: boolean;
+  text?: string;
+  sx?: any;
+} | null => {
   if (subscription.status === 'active' || subscription.status === 'trialing') {
     if (subscription.cancel_at_period_end) {
       if (subscription.cancelation_details?.reason === 'payment_failed') {
         return null;
       }
 
-      return { action: 'recover', variant: 'contained', color: 'primary', canRenew: false };
+      return { action: 'recover', variant: 'contained', color: 'primary', canRenew: false, ...actionProps?.recover };
     }
 
     if (subscription.cancel_at && subscription.cancel_at !== subscription.current_period_end) {
       return null;
     }
 
-    return { action: 'cancel', variant: 'outlined', color: 'inherit', canRenew: false };
+    return { action: 'cancel', variant: 'outlined', color: 'inherit', canRenew: false, ...actionProps?.cancel };
   }
 
   if (subscription.status === 'past_due') {
     const canRenew = subscription.cancel_at && subscription.cancel_at !== subscription.current_period_end;
-    return { action: 'pastDue', variant: 'contained', color: 'primary', canRenew };
+    return { action: 'pastDue', variant: 'contained', color: 'primary', canRenew, ...actionProps?.pastDue };
   }
 
   if (subscription.status !== 'canceled' && subscription.cancel_at_period_end) {
-    return { action: 'recover', variant: 'contained', color: 'primary', canRenew: false };
+    return { action: 'recover', variant: 'contained', color: 'primary', canRenew: false, ...actionProps?.recover };
   }
 
   return null;
@@ -855,9 +937,9 @@ export function formatTotalPrice({
   const unitValue = new BN(price.custom_unit_amount || price.unit_amount);
   const currency: TPaymentCurrency = price?.currency ?? {};
 
-  const total = `${fromUnitToToken(unitValue.mul(new BN(quantity)), currency.decimal)} ${currency.symbol}`;
+  const total = `${fromUnitToToken(unitValue.mul(new BN(quantity)), currency.decimal)} ${currency.symbol} `;
 
-  const unit = `${fromUnitToToken(unitValue, currency.decimal)} ${currency.symbol}`;
+  const unit = `${fromUnitToToken(unitValue, currency.decimal)} ${currency.symbol} `;
 
   const appendUnit = (v: string, alt: string) => {
     if (product.unit_label) {
@@ -893,6 +975,13 @@ export function formatQuantityInventory(price: TPrice, quantity: string | number
   return '';
 }
 
+export function formatSubscriptionStatus(status: string) {
+  if (status === 'canceled') {
+    return 'Ended';
+  }
+  return status;
+}
+
 export function formatAmountPrecisionLimit(amount: string, locale = 'en', precision: number = 6) {
   if (!amount) {
     return '';