@blocklet/payment-react 1.14.21 → 1.14.22

package/es/history/invoice/list.d.ts

@@ -9,8 +9,9 @@ type Props = {
     pageSize?: number;
     target?: string;
     action?: string;
+    type?: 'list' | 'table';
 };
-declare function CustomerInvoiceList({ customer_id, subscription_id, currency_id, include_staking, include_recovered_from, status, pageSize, target, action, }: Props): import("react").JSX.Element;
+declare function CustomerInvoiceList(props: Props): JSX.Element;
 declare namespace CustomerInvoiceList {
     var defaultProps: {
         customer_id: string;
@@ -22,6 +23,7 @@ declare namespace CustomerInvoiceList {
         pageSize: number;
         target: string;
         action: string;
+        type: string;
     };
 }
 export default CustomerInvoiceList;

package/es/history/invoice/list.js

@@ -4,8 +4,8 @@ import Toast from "@arcblock/ux/lib/Toast";
 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.js";
 import { usePaymentContext } from "../../contexts/payment.js";
@@ -20,6 +20,7 @@ import {
   getPrefix,
   getTxLink
 } from "../../libs/util.js";
+import Table from "../../components/table.js";
 const groupByDate = (items) => {
   const grouped = {};
   items.forEach((item) => {
@@ -57,22 +58,178 @@ const getInvoiceLink = (invoice, action) => {
     url: getTxLink(invoice.paymentMethod, invoice.metadata?.payment_details).link
   };
 };
-export default function CustomerInvoiceList({
-  customer_id,
-  subscription_id,
-  currency_id,
-  include_staking,
-  include_recovered_from,
-  status,
-  pageSize,
-  target,
-  action
-}) {
+const InvoiceTable = React.memo((props) => {
+  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: 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: (_, index) => {
+          const invoice = data?.list[index];
+          const link = getInvoiceLink(invoice, action);
+          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: invoice?.number });
+        }
+      }
+    },
+    {
+      label: t("common.amount"),
+      name: "total",
+      options: {
+        customBodyRenderLite: (_, index) => {
+          const invoice = data?.list[index];
+          const link = getInvoiceLink(invoice, action);
+          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: /* @__PURE__ */ jsxs(Typography, { children: [
+            formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
+            "\xA0",
+            invoice.paymentCurrency.symbol
+          ] }) });
+        }
+      }
+    },
+    {
+      label: t("common.updatedAt"),
+      name: "name",
+      options: {
+        customBodyRenderLite: (val, index) => {
+          const invoice = data?.list[index];
+          const link = getInvoiceLink(invoice, action);
+          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: formatToDate(invoice.created_at, locale, "YYYY-MM-DD HH:mm:ss") });
+        }
+      }
+    },
+    {
+      label: t("common.description"),
+      name: "",
+      options: {
+        sort: false,
+        customBodyRenderLite: (val, index) => {
+          const invoice = data?.list[index];
+          const link = getInvoiceLink(invoice, action);
+          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: invoice.description || invoice.id });
+        }
+      }
+    },
+    {
+      label: t("common.status"),
+      name: "created_at",
+      options: {
+        sort: true,
+        customBodyRenderLite: (val, index) => {
+          const invoice = data?.list[index];
+          const link = getInvoiceLink(invoice, action);
+          if (action) {
+            return link.connect ? /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", onClick: () => onPay(invoice.id), sx: { color: "text.link" }, children: t("payment.customer.invoice.pay") }) : /* @__PURE__ */ jsx(
+              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",
+                children: t("payment.customer.invoice.pay")
+              }
+            );
+          }
+          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) });
+        }
+      }
+    }
+  ];
+  const onTableChange = ({ page, rowsPerPage }) => {
+    if (search.pageSize !== rowsPerPage) {
+      setSearch((x) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
+    } else if (search.page !== page + 1) {
+      setSearch((x) => ({ ...x, page: page + 1 }));
+    }
+  };
+  return /* @__PURE__ */ jsx(InvoiceTableRoot, { children: /* @__PURE__ */ jsx(
+    Table,
+    {
+      hasRowLink: true,
+      durable: `__${listKey}__`,
+      durableKeys: ["page", "rowsPerPage", "searchText"],
+      data: data.list,
+      columns,
+      options: {
+        count: data.count,
+        page: search.page - 1,
+        rowsPerPage: search.pageSize
+      },
+      loading,
+      onChange: onTableChange,
+      toolbar: false,
+      sx: { mt: 2 },
+      showMobile: false,
+      mobileTDFlexDirection: "row",
+      emptyNodeText: t("payment.customer.invoice.emptyList")
+    }
+  ) });
+});
+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) => {
+  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(
     (d) => {
       const page = d ? Math.ceil(d.list.length / size) + 1 : 1;
@@ -101,36 +258,6 @@ export default function CustomerInvoiceList({
       });
     }
   }, [subscription]);
-  const onPay = (invoiceId) => {
-    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: ""
-      },
-      extraParams: { invoiceId, action },
-      onSuccess: () => {
-        connect.close();
-        setState({ paying: "" });
-      },
-      onClose: () => {
-        connect.close();
-        setState({ paying: "" });
-      },
-      onError: (err) => {
-        setState({ paying: "" });
-        Toast.error(formatError(err));
-      }
-    });
-  };
   if (loading || !data) {
     return /* @__PURE__ */ jsx(CircularProgress, {});
   }
@@ -176,7 +303,6 @@ export default function CustomerInvoiceList({
                 {
                   component: "a",
                   variant: "contained",
-                  color: "primary",
                   size: "small",
                   href: link.url,
                   target: link.external ? "_blank" : target,
@@ -195,6 +321,46 @@ export default function CustomerInvoiceList({
       !hasMore && data.count > size && /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("common.noMore", { resource: t("payment.customer.invoices") }) })
     ] })
   ] });
+});
+export default function CustomerInvoiceList(props) {
+  const { action, type } = props;
+  const { t } = useLocaleContext();
+  const { connect } = usePaymentContext();
+  const [state, setState] = useSetState({ paying: "" });
+  const onPay = (invoiceId) => {
+    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: ""
+      },
+      extraParams: { invoiceId, action },
+      onSuccess: () => {
+        connect.close();
+        setState({ paying: "" });
+      },
+      onClose: () => {
+        connect.close();
+        setState({ paying: "" });
+      },
+      onError: (err) => {
+        setState({ paying: "" });
+        Toast.error(formatError(err));
+      }
+    });
+  };
+  if (type === "table") {
+    return /* @__PURE__ */ jsx(InvoiceTable, { ...props, onPay });
+  }
+  return /* @__PURE__ */ jsx(InvoiceList, { ...props, onPay });
 }
 CustomerInvoiceList.defaultProps = {
   customer_id: "",
@@ -205,10 +371,11 @@ CustomerInvoiceList.defaultProps = {
   status: "open,paid,uncollectible",
   pageSize: 10,
   target: "_self",
-  action: ""
+  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/es/hooks/mobile.d.ts

@@ -0,0 +1,4 @@
+export declare function useMobile(mobilePoint?: 'md' | 'sm' | 'lg' | 'xl' | 'xs'): {
+    isMobile: boolean;
+    mobileSize: string;
+};

package/es/hooks/mobile.js

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

package/es/index.d.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,9 +24,12 @@ 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';
-export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, };
+export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, };

package/es/index.js

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

package/es/libs/util.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PaymentDetails, PriceCurrency, PriceRecurring, TLineItemExpanded, TPaymentCurrency, TPaymentCurrencyExpanded, TPaymentMethod, TPaymentMethodExpanded, TPrice, TProductExpanded, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
-import { PricingRenderProps } from '../types';
+import { ActionProps, PricingRenderProps } from '../types';
 export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 export declare const isPaymentKitMounted: () => any;
 export declare const getPrefix: () => string;
@@ -40,11 +40,21 @@ export declare function getCheckoutAmount(items: TLineItemExpanded[], currency:
 };
 export declare function getRecurringPeriod(recurring: PriceRecurring): number;
 export declare function formatUpsellSaving(items: TLineItemExpanded[], currency: TPaymentCurrency): string;
+export declare function formatMeteredThen(subscription: string, recurring: string, hasMetered: boolean, locale?: string): string;
+export declare function formatPriceDisplay({ amount, then, actualAmount, showThen }: {
+    amount: string;
+    then?: string;
+    actualAmount: string;
+    showThen?: boolean;
+}, recurring: string, hasMetered: boolean, locale?: string): string;
 export declare function formatCheckoutHeadlines(items: TLineItemExpanded[], currency: TPaymentCurrency, trialInDays: number, locale?: string): {
     action: string;
     amount: string;
     then?: string;
     secondary?: string;
+    showThen?: boolean;
+    actualAmount: string;
+    priceDisplay: string;
 };
 export declare function formatAmount(amount: string, decimals: number): string;
 export declare function findCurrency(methods: TPaymentMethodExpanded[], currencyId: string): TPaymentCurrencyExpanded | null;
@@ -53,11 +63,13 @@ export declare function stopEvent(e: React.SyntheticEvent<any>): void;
 export declare function sleep(ms: number): Promise<unknown>;
 export declare function formatSubscriptionProduct(items: TSubscriptionItemExpanded[], maxLength?: number): string;
 export declare const getSubscriptionTimeSummary: (subscription: TSubscriptionExpanded) => string;
-export declare const getSubscriptionAction: (subscription: TSubscriptionExpanded) => {
+export declare const getSubscriptionAction: (subscription: TSubscriptionExpanded, actionProps: ActionProps) => {
     action: string;
     variant: string;
     color: string;
     canRenew: boolean;
+    text?: string;
+    sx?: any;
 } | null;
 export declare const mergeExtraParams: (extra?: Record<string, any>) => string;
 export declare const flattenPaymentMethods: (methods?: TPaymentMethodExpanded[]) => import("sequelize").InferAttributes<import("@blocklet/payment-types").PaymentCurrency, {
@@ -77,4 +89,5 @@ export declare function formatTotalPrice({ product, quantity, priceId, locale, }
     locale: string;
 }): PricingRenderProps;
 export declare function formatQuantityInventory(price: TPrice, quantity: string | number, locale?: string): string;
+export declare function formatSubscriptionStatus(status: string): string;
 export declare function formatAmountPrecisionLimit(amount: string, locale?: string, precision?: number): string;

package/es/libs/util.js

@@ -400,24 +400,42 @@ export function formatUpsellSaving(items, currency) {
   const after = new BN(to.total);
   return Number(before.sub(after).mul(new BN(100)).div(before).toString()).toFixed(0);
 }
+export function formatMeteredThen(subscription, recurring, hasMetered, locale = "en") {
+  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 }, recurring, hasMetered, locale = "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, currency, trialInDays, locale = "en") {
   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}`;
   if (items.length === 0) {
     return {
       action: t("payment.checkout.empty", locale),
       amount: "0",
-      then: ""
+      then: "",
+      actualAmount: "0",
+      priceDisplay: "0"
     };
   }
   const { name } = items[0]?.price.product || { name: "" };
   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");
   const recurring = formatRecurring(
@@ -426,8 +444,8 @@ export function formatCheckoutHeadlines(items, currency, trialInDays, locale = "
     "per",
     locale
   );
+  const hasMetered = items.some((x) => x.price.type === "recurring" && x.price.recurring?.usage_type === "metered");
   if (items.every((x) => x.price.type === "recurring")) {
-    const hasMetered = items.some((x) => x.price.type === "recurring" && x.price.recurring?.usage_type === "metered");
     const subscription2 = [
       hasMetered ? t("payment.checkout.least", locale) : "",
       fromUnitToToken(
@@ -443,29 +461,53 @@ export function formatCheckoutHeadlines(items, currency, trialInDays, locale = "
     ].filter(Boolean).join(" ");
     if (items.length > 1) {
       if (trialInDays > 0) {
-        return {
+        const result4 = {
           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: subscription2, recurring })
+          then: formatMeteredThen(subscription2, recurring, hasMetered && Number(subscription2) === 0, locale),
+          showThen: true,
+          actualAmount: "0"
+        };
+        return {
+          ...result4,
+          priceDisplay: formatPriceDisplay(result4, recurring, hasMetered, locale)
         };
       }
-      return {
+      const result3 = {
         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 {
+        ...result3,
+        priceDisplay: formatPriceDisplay(result3, recurring, hasMetered, locale)
       };
     }
     if (trialInDays > 0) {
-      return {
+      const result3 = {
         action: t("payment.checkout.try1", locale, { name }),
         amount: t("payment.checkout.free", locale, { count: trialInDays }),
-        then: t("payment.checkout.then", locale, { subscription: subscription2, recurring })
+        then: formatMeteredThen(subscription2, recurring, hasMetered && Number(subscription2) === 0, locale),
+        showThen: true,
+        actualAmount: "0"
+      };
+      return {
+        ...result3,
+        priceDisplay: formatPriceDisplay(result3, recurring, hasMetered, locale)
       };
     }
-    return {
+    const result2 = {
       action: t("payment.checkout.sub1", locale, { name }),
       amount,
-      then: recurring
+      then: hasMetered ? t("payment.checkout.meteredThen", locale, { recurring }) : recurring,
+      showThen: hasMetered,
+      actualAmount
+    };
+    return {
+      ...result2,
+      priceDisplay: formatPriceDisplay(result2, recurring, hasMetered, locale)
     };
   }
   const subscription = fromUnitToToken(
@@ -477,10 +519,21 @@ export function formatCheckoutHeadlines(items, currency, trialInDays, locale = "
     }, new BN(0)),
     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)
   };
 }
 export function formatAmount(amount, decimals) {
@@ -516,41 +569,46 @@ export function formatSubscriptionProduct(items, maxLength = 2) {
   return names.slice(0, maxLength).join(", ") + (names.length > maxLength ? ` and ${names.length - maxLength} more` : "");
 }
 export const getSubscriptionTimeSummary = (subscription) => {
-  const lines = [`Started on ${formatToDate(subscription.start_date * 1e3)}`];
+  const lines = [`Start on ${formatToDate(subscription.start_date * 1e3, "en", "YYYY-MM-DD")}`];
+  const getLineTimeMessage = (time) => {
+    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 * 1e3)}`);
+      lines.push(`Ended ${getLineTimeMessage(subscription.cancel_at * 1e3)}`);
     } else if (subscription.cancel_at_period_end) {
-      lines.push(`will cancel on ${formatToDate(subscription.current_period_end * 1e3)}`);
+      lines.push(`Ended ${getLineTimeMessage(subscription.current_period_end * 1e3)}`);
     } else {
-      lines.push(`will renew on ${formatToDate(subscription.current_period_end * 1e3)}`);
+      lines.push(`Renew ${getLineTimeMessage(subscription.current_period_end * 1e3)}`);
     }
   } else if (subscription.status === "past_due") {
-    lines.push(`will cancel on ${formatToDate((subscription.cancel_at || subscription.current_period_end) * 1e3)}`);
+    lines.push(`Ended ${getLineTimeMessage((subscription.cancel_at || subscription.current_period_end) * 1e3)}`);
   } else if (subscription.status === "canceled") {
-    lines.push(`canceled on ${formatToDate(subscription.canceled_at * 1e3)}`);
+    lines.push(`Ended ${getLineTimeMessage(subscription.canceled_at * 1e3)}`);
   }
-  return lines.join(", ");
+  return lines.join(",");
 };
-export const getSubscriptionAction = (subscription) => {
+export const getSubscriptionAction = (subscription, actionProps) => {
   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;
 };
@@ -657,8 +715,8 @@ export function formatTotalPrice({
   }
   const unitValue = new BN(price.custom_unit_amount || price.unit_amount);
   const currency = price?.currency ?? {};
-  const total = `${fromUnitToToken(unitValue.mul(new BN(quantity)), currency.decimal)} ${currency.symbol}`;
-  const unit = `${fromUnitToToken(unitValue, 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 appendUnit = (v, alt) => {
     if (product.unit_label) {
       return `${v}/${price.product.unit_label}`;
@@ -690,6 +748,12 @@ export function formatQuantityInventory(price, quantity, locale = "en") {
   }
   return "";
 }
+export function formatSubscriptionStatus(status) {
+  if (status === "canceled") {
+    return "Ended";
+  }
+  return status;
+}
 export function formatAmountPrecisionLimit(amount, locale = "en", precision = 6) {
   if (!amount) {
     return "";