@blocklet/payment-react 1.13.126 → 1.13.128

package/es/checkout/form.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CheckoutProps } from '../types';
-declare function CheckoutForm({ id, onPaid, onError, mode, extraParams }: CheckoutProps): import("react").JSX.Element;
+declare function CheckoutForm({ id, onPaid, onError, mode, goBack, extraParams }: CheckoutProps): import("react").JSX.Element;
 declare namespace CheckoutForm {
     var defaultProps: {
         onPaid: any;

package/es/checkout/form.js

@@ -14,7 +14,7 @@ const fetchCheckoutSession = async (id) => {
   const { data } = await api.get(`/api/checkout-sessions/retrieve/${id}`);
   return data;
 };
-export default function CheckoutForm({ id, onPaid, onError, mode, extraParams }) {
+export default function CheckoutForm({ id, onPaid, onError, mode, goBack, extraParams }) {
   if (!id.startsWith("plink_") && !id.startsWith("cs_")) {
     throw new Error("Either a checkoutSession or a paymentLink id is required.");
   }
@@ -49,6 +49,7 @@ export default function CheckoutForm({ id, onPaid, onError, mode, extraParams })
       error: apiError || state.appError,
       onPaid: handlePaid,
       onError: handleError,
+      goBack,
       mode
     }
   );

package/es/checkout/table.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
 import { Alert, Stack, Typography } from "@mui/material";
+import { Box } from "@mui/system";
 import { useRequest } from "ahooks";
 import { useState } from "react";
 import api from "../api.js";
@@ -55,6 +56,9 @@ export default function CheckoutTable({ id, onPaid, onError, mode, extraParams }
       Toast.error(err.message);
     });
   };
+  const goBack = () => {
+    setSessionId("");
+  };
   if (!sessionId) {
     if (mode === "standalone") {
       return /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "center", spacing: 4, children: [
@@ -67,5 +71,5 @@ export default function CheckoutTable({ id, onPaid, onError, mode, extraParams }
     }
     return /* @__PURE__ */ jsx(PricingTable, { mode: "select", table: data, onSelect: handleSelect });
   }
-  return /* @__PURE__ */ jsx(CheckoutForm, { id: sessionId, onPaid, onError, mode });
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(CheckoutForm, { id: sessionId, onPaid, onError, mode, goBack }) });
 }

package/es/components/pricing-table.js

@@ -106,6 +106,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
             direction: "row",
             gap: "calc(10px + 3%)",
             justifyContent: alignItems === "center" ? "center" : "flex-start",
+            className: "price-table-wrap",
             children: grouped[state.interval]?.map(
               (x) => {
                 let action = x.subscription_data?.trial_period_days ? t("payment.checkout.try") : t("payment.checkout.subscription");

package/es/{portal → histroy}/invoice/list.js

@@ -77,7 +77,7 @@ export default function CustomerInvoiceList({ customer_id }) {
       ))
     ] }, date)),
     /* @__PURE__ */ jsxs(Box, { children: [
-      hasMore && /* @__PURE__ */ jsx(Button, { variant: "text", type: "button", color: "inherit", onClick: loadMore, disabled: loadingMore, children: loadingMore ? t("common.loadingMore", { resource: t("payment.customer.invoices") }) : t("common.loadMore", { resource: t("payament.customer.invoices") }) }),
+      hasMore && /* @__PURE__ */ jsx(Button, { variant: "text", type: "button", color: "inherit", onClick: loadMore, disabled: loadingMore, children: loadingMore ? t("common.loadingMore", { resource: t("payment.customer.invoices") }) : t("common.loadMore", { resource: t("payment.customer.invoices") }) }),
       !hasMore && data.count > pageSize && /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("common.noMore", { resource: t("payment.customer.invoices") }) })
     ] })
   ] });

package/es/histroy/mini-invoice/list.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { TSubscriptionExpanded } from '@blocklet/payment-types';
+type Props = {
+    subscription: TSubscriptionExpanded;
+};
+export default function MiniInvoiceList({ subscription }: Props): import("react").JSX.Element;
+export {};

package/es/histroy/mini-invoice/list.js

@@ -0,0 +1,125 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Box, Button, CircularProgress, Divider, List, ListItem, ListSubheader, Typography } from "@mui/material";
+import { fromUnitToToken } from "@ocap/util";
+import { useInfiniteScroll } from "ahooks";
+import api from "../../api.js";
+import Status from "../../components/status.js";
+import {
+  formatSubscriptionProduct,
+  formatTime,
+  formatToDate,
+  getInvoiceStatusColor,
+  getSubscriptionStatusColor
+} from "../../util.js";
+const fetchData = (params = {}) => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    search.set(key, String(params[key]));
+  });
+  return api.get(`/api/invoices?${search.toString()}`).then((res) => res.data);
+};
+const pageSize = 10;
+export default function MiniInvoiceList({ subscription }) {
+  const { t } = useLocaleContext();
+  const { data, loading } = useInfiniteScroll(
+    (d) => {
+      const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
+      return fetchData({ page, pageSize, status: "open,paid,uncollectible", subscription_id: subscription.id });
+    },
+    {
+      reloadDeps: [subscription.id]
+    }
+  );
+  if (loading || !data) {
+    return /* @__PURE__ */ jsx(Position, { children: /* @__PURE__ */ jsx(CircularProgress, {}) });
+  }
+  if (data && data.list.length === 0) {
+    return /* @__PURE__ */ jsx(Position, { children: /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("payment.customer.invoice.empty") }) });
+  }
+  const infoList = [
+    {
+      name: t("payment.customer.subscriptions.plan"),
+      value: /* @__PURE__ */ jsx(Typography, { fontWeight: 600, sx: { marginRight: "10px" }, children: formatSubscriptionProduct(subscription.items) })
+    },
+    {
+      name: t("payment.common.status"),
+      value: /* @__PURE__ */ jsx(Status, { label: subscription.status, color: getSubscriptionStatusColor(subscription.status) })
+    },
+    {
+      name: t("payment.customer.subscriptions.nextInvoice"),
+      value: /* @__PURE__ */ jsx(
+        Typography,
+        {
+          sx: {
+            color: "#34BE74",
+            fontWeight: "bold"
+          },
+          children: formatTime(subscription.current_period_end * 1e3)
+        }
+      )
+    }
+  ];
+  return /* @__PURE__ */ jsxs(Position, { children: [
+    /* @__PURE__ */ jsx(Typography, { title: t("payment.checkout.subscription") }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          alignItem: "center",
+          justifyContent: "flex-start",
+          padding: "16px",
+          width: "100%",
+          height: "100%"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Typography, { component: "h3", sx: { textAlign: "center" }, variant: "h5", gutterBottom: true, children: t("payment.customer.subscriptions.current") }),
+          /* @__PURE__ */ jsx(Box, { sx: { marginTop: "12px" }, children: /* @__PURE__ */ jsx(List, { children: infoList.map(({ name, value }) => {
+            return /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, sx: { display: "flex", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ jsx(Typography, { component: "span", children: name }),
+              /* @__PURE__ */ jsx(Typography, { component: "span", children: value })
+            ] }, name);
+          }) }) }),
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsx(Box, { sx: { marginTop: "12px" }, children: /* @__PURE__ */ jsxs(List, { sx: { overflow: "auto", maxHeight: { xs: "240px", md: "360px", padding: 0 } }, children: [
+            /* @__PURE__ */ jsx(ListSubheader, { disableGutters: true, sx: { padding: 0 }, children: /* @__PURE__ */ jsx(Typography, { component: "h2", variant: "h6", fontSize: "16px", children: t("payment.customer.invoices") }) }),
+            (data.list || []).map((item) => {
+              return /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, sx: { display: "flex", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ jsx(Typography, { component: "span", children: formatToDate(item.created_at) }),
+                /* @__PURE__ */ jsxs(Typography, { component: "span", children: [
+                  fromUnitToToken(item.total, item.paymentCurrency.decimal),
+                  "\xA0",
+                  item.paymentCurrency.symbol
+                ] }),
+                /* @__PURE__ */ jsx(Status, { label: item.status, color: getInvoiceStatusColor(item.status) })
+              ] }, item.id);
+            })
+          ] }) }),
+          /* @__PURE__ */ jsx(Button, { target: "_top", variant: "contained", sx: { marginTop: "auto", width: "100%" }, href: "", children: t("payment.customer.subscriptions.title") })
+        ]
+      }
+    )
+  ] });
+}
+function Position({ children }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: "mini-invoice-box",
+      sx: {
+        position: "absolute",
+        right: 0,
+        top: "30px",
+        justifyContent: "center",
+        padding: "8px",
+        minWidth: "400px",
+        background: "#fff",
+        zIndex: 9,
+        boxShadow: "0 4px 8px rgba(0, 0, 0, 20%)"
+      },
+      children
+    }
+  );
+}

package/es/index.d.ts

@@ -8,13 +8,14 @@ import PricingTable from './components/pricing-table';
 import Status from './components/status';
 import Switch from './components/switch-button';
 import dayjs from './dayjs';
+import CustomerInvoiceList from './histroy/invoice/list';
+import MiniInvoiceList from './histroy/mini-invoice/list';
+import CustomerPaymentList from './histroy/payment/list';
 import Amount from './payment/amount';
 import PhoneInput from './payment/form/phone';
 import Payment from './payment/index';
 import ProductSkeleton from './payment/product-skeleton';
-import CustomerInvoiceList from './portal/invoice/list';
-import CustomerPaymentList from './portal/payment/list';
 export * from './util';
 export * from './contexts/payment';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, Payment, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, };
+export { api, dayjs, FormInput, PhoneInput, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, Payment, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, };

package/es/index.js

@@ -8,12 +8,13 @@ import PricingTable from "./components/pricing-table.js";
 import Status from "./components/status.js";
 import Switch from "./components/switch-button.js";
 import dayjs from "./dayjs.js";
+import CustomerInvoiceList from "./histroy/invoice/list.js";
+import MiniInvoiceList from "./histroy/mini-invoice/list.js";
+import CustomerPaymentList from "./histroy/payment/list.js";
 import Amount from "./payment/amount.js";
 import PhoneInput from "./payment/form/phone.js";
 import Payment from "./payment/index.js";
 import ProductSkeleton from "./payment/product-skeleton.js";
-import CustomerInvoiceList from "./portal/invoice/list.js";
-import CustomerPaymentList from "./portal/payment/list.js";
 export * from "./util.js";
 export * from "./contexts/payment.js";
 export { translations, createTranslator } from "./locales/index.js";
@@ -33,5 +34,6 @@ export {
   ProductSkeleton,
   Amount,
   CustomerInvoiceList,
-  CustomerPaymentList
+  CustomerPaymentList,
+  MiniInvoiceList
 };

package/es/locales/en.js

@@ -208,6 +208,8 @@ export default flat({
         empty: "Seems you do not have any payment here"
       },
       subscriptions: {
+        plan: "Plan",
+        nextInvoice: "Next Invoice",
         title: "Manage subscriptions",
         current: "Current subscriptions",
         empty: "Seems you do not have any subscriptions here"

package/es/locales/zh.js

@@ -208,6 +208,8 @@ export default flat({
         empty: "\u4F60\u6CA1\u6709\u4EFB\u4F55\u652F\u4ED8"
       },
       subscriptions: {
+        plan: "\u8BA2\u9605",
+        nextInvoice: "\u4E0B\u4E00\u5F20\u53D1\u7968",
         title: "\u8BA2\u9605\u7BA1\u7406",
         current: "\u5F53\u524D\u8BA2\u9605",
         empty: "\u4F60\u8FD8\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605"

package/es/payment/form/index.js

@@ -209,6 +209,7 @@ export default function PaymentForm({
       handleSubmit(onSubmit)();
     } else {
       session?.login({
+        // @ts-ignored
         onSuccess: onUserLoggedIn,
         extraParams: {}
       });
@@ -306,7 +307,7 @@ export default function PaymentForm({
                     children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", children: [
                       /* @__PURE__ */ jsx(Avatar, { src: x.logo, alt: x.name, sx: { width: 30, height: 30, marginRight: "10px" } }),
                       /* @__PURE__ */ jsxs("div", { children: [
-                        /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "div", children: x.symbol }),
+                        /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "div", sx: { fontSize: "18px" }, children: x.symbol }),
                         /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 14 }, color: "text.secondary", gutterBottom: true, children: x.method.name })
                       ] })
                     ] })

package/es/payment/index.d.ts

@@ -5,7 +5,7 @@ type Props = CheckoutContext & CheckoutCallbacks & {
     completed?: boolean;
     error?: any;
 };
-declare function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, }: Props): import("react").JSX.Element;
+declare function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, goBack, }: Props): import("react").JSX.Element;
 declare namespace Payment {
     var defaultProps: {
         completed: boolean;
@@ -16,7 +16,7 @@ export default Payment;
 type MainProps = CheckoutContext & CheckoutCallbacks & {
     completed?: boolean;
 };
-export declare function PaymentInner({ checkoutSession, paymentMethods, paymentLink, paymentIntent, customer, completed, mode, onPaid, onError, }: MainProps): import("react").JSX.Element;
+export declare function PaymentInner({ checkoutSession, paymentMethods, paymentLink, paymentIntent, customer, completed, mode, onPaid, onError, goBack, }: MainProps): import("react").JSX.Element;
 export declare namespace PaymentInner {
     var defaultProps: {
         completed: boolean;

package/es/payment/index.js

@@ -1,10 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
+import { ArrowBackOutlined } from "@mui/icons-material";
 import { Box, Fade, Stack } from "@mui/material";
 import { styled } from "@mui/system";
 import { useSetState } from "ahooks";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import api from "../api.js";
 import { usePaymentContext } from "../contexts/payment.js";
@@ -31,10 +32,17 @@ export default function Payment({
   error,
   mode,
   onPaid,
-  onError
+  onError,
+  goBack
 }) {
   const { t } = useLocaleContext();
   const { refresh, livemode, setLivemode } = usePaymentContext();
+  const [delay, setDelay] = useState(false);
+  useEffect(() => {
+    setTimeout(() => {
+      setDelay(true);
+    }, 500);
+  }, []);
   useEffect(() => {
     if (checkoutSession) {
       if (livemode !== checkoutSession.livemode) {
@@ -48,7 +56,7 @@ export default function Payment({
   if (error) {
     return /* @__PURE__ */ jsx(PaymentError, { title: "Oops", description: formatError(error) });
   }
-  if (!checkoutSession) {
+  if (!checkoutSession || !delay) {
     return /* @__PURE__ */ jsx(Root, { mode, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-container", children: [
       /* @__PURE__ */ jsx(Stack, { className: "cko-overview", children: /* @__PURE__ */ jsx(OverviewSkeleton, {}) }),
       /* @__PURE__ */ jsx(Stack, { className: "cko-payment", children: /* @__PURE__ */ jsx(PaymentSkeleton, {}) }),
@@ -84,6 +92,7 @@ export default function Payment({
       customer,
       onPaid,
       onError,
+      goBack,
       mode
     }
   );
@@ -100,7 +109,8 @@ export function PaymentInner({
   completed,
   mode,
   onPaid,
-  onError
+  onError,
+  goBack
 }) {
   const { t } = useLocaleContext();
   const { settings, session } = usePaymentContext();
@@ -166,45 +176,55 @@ export function PaymentInner({
       Toast.error(formatError(err));
     }
   };
-  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(Root, { mode, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : 8 } }, children: [
-    /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-overview", direction: "column", children: [
-      mode === "standalone" ? /* @__PURE__ */ jsx(PaymentHeader, { checkoutSession: state.checkoutSession }) : null,
-      /* @__PURE__ */ jsx(
-        PaymentSummary,
-        {
-          checkoutSession: state.checkoutSession,
-          currency,
-          onUpsell,
-          onDownsell,
-          onApplyCrossSell,
-          onCancelCrossSell
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsxs(Stack, { className: "cko-payment", direction: "column", spacing: 4, children: [
-      completed && /* @__PURE__ */ jsx(
-        PaymentSuccess,
-        {
-          payee: getStatementDescriptor(state.checkoutSession.line_items),
-          action: state.checkoutSession.mode,
-          message: paymentLink?.after_completion?.hosted_confirmation?.custom_message || t(`payment.checkout.completed.${state.checkoutSession.mode}`)
-        }
-      ),
-      !completed && /* @__PURE__ */ jsx(
-        PaymentForm,
-        {
-          checkoutSession: state.checkoutSession,
-          paymentMethods,
-          paymentIntent,
-          customer,
-          onPaid,
-          onError,
-          mode
-        }
-      )
-    ] }),
-    mode === "standalone" && /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer" })
-  ] }) }) });
+  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsxs(Root, { mode, children: [
+    mode !== "standalone" ? /* @__PURE__ */ jsx(
+      ArrowBackOutlined,
+      {
+        sx: { mr: 0.5, color: "text.secondary", alignSelf: "flex-start", margin: "16px 0", cursor: "pointer" },
+        onClick: goBack,
+        fontSize: "medium"
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(Stack, { className: "cko-container", sx: { gap: { sm: mode === "standalone" ? 0 : 8 } }, children: [
+      /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-overview", direction: "column", children: [
+        mode === "standalone" ? /* @__PURE__ */ jsx(PaymentHeader, { checkoutSession: state.checkoutSession }) : null,
+        /* @__PURE__ */ jsx(
+          PaymentSummary,
+          {
+            checkoutSession: state.checkoutSession,
+            currency,
+            onUpsell,
+            onDownsell,
+            onApplyCrossSell,
+            onCancelCrossSell
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs(Stack, { className: "cko-payment", direction: "column", spacing: 4, children: [
+        completed && /* @__PURE__ */ jsx(
+          PaymentSuccess,
+          {
+            payee: getStatementDescriptor(state.checkoutSession.line_items),
+            action: state.checkoutSession.mode,
+            message: paymentLink?.after_completion?.hosted_confirmation?.custom_message || t(`payment.checkout.completed.${state.checkoutSession.mode}`)
+          }
+        ),
+        !completed && /* @__PURE__ */ jsx(
+          PaymentForm,
+          {
+            checkoutSession: state.checkoutSession,
+            paymentMethods,
+            paymentIntent,
+            customer,
+            onPaid,
+            onError,
+            mode
+          }
+        )
+      ] }),
+      mode === "standalone" && /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer" })
+    ] })
+  ] }) });
 }
 export const Root = styled(Box)`
   box-sizing: border-box;
@@ -312,11 +332,11 @@ export const Root = styled(Box)`
   }
 
   .cko-payment-card:nth-child(odd) {
-    margin-right: 16px;
+    margin-right: 8px;
   }
 
   .cko-payment-card-unselect:nth-child(odd) {
-    margin-right: 16px;
+    margin-right: 8px;
   }
 
   .cko-payment-card::after {

package/es/types/index.d.ts

@@ -16,4 +16,5 @@ export type CheckoutProps = Partial<CheckoutCallbacks> & {
 export type CheckoutCallbacks = {
     onPaid: (res: CheckoutContext) => void;
     onError: (err: Error) => void;
+    goBack?: () => void;
 };

package/es/util.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { PriceCurrency, PriceRecurring, TCheckoutSessionExpanded, TLineItemExpanded, TPaymentCurrency, TPaymentMethodExpanded, TPrice, TSubscriptionExpanded } from '@blocklet/payment-types';
+import type { PriceCurrency, PriceRecurring, TCheckoutSessionExpanded, TLineItemExpanded, TPaymentCurrency, TPaymentMethodExpanded, TPrice, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
 export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 export declare const getPrefix: () => any;
 export declare function formatToDate(date: Date | string | number, locale?: string): any;
@@ -47,6 +47,7 @@ export declare function findCurrency(methods: TPaymentMethodExpanded[], currency
 export declare function isValidCountry(code: string): boolean;
 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) => {
     action: string;

package/es/util.js

@@ -402,6 +402,10 @@ export function sleep(ms) {
     setTimeout(resolve, ms);
   });
 }
+export function formatSubscriptionProduct(items, maxLength = 2) {
+  const names = items.map((x) => x.price.product?.name).filter(Boolean);
+  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)}`];
   if (subscription.status === "active" || subscription.status === "trialing") {

package/lib/checkout/form.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CheckoutProps } from '../types';
-declare function CheckoutForm({ id, onPaid, onError, mode, extraParams }: CheckoutProps): import("react").JSX.Element;
+declare function CheckoutForm({ id, onPaid, onError, mode, goBack, extraParams }: CheckoutProps): import("react").JSX.Element;
 declare namespace CheckoutForm {
     var defaultProps: {
         onPaid: any;

package/lib/checkout/form.js

@@ -30,6 +30,7 @@ function CheckoutForm({
   onPaid,
   onError,
   mode,
+  goBack,
   extraParams
 }) {
   if (!id.startsWith("plink_") && !id.startsWith("cs_")) {
@@ -72,6 +73,7 @@ function CheckoutForm({
     error: apiError || state.appError,
     onPaid: handlePaid,
     onError: handleError,
+    goBack,
     mode
   });
 }

package/lib/checkout/table.js

@@ -8,6 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _material = require("@mui/material");
+var _system = require("@mui/system");
 var _ahooks = require("ahooks");
 var _react = require("react");
 var _api = _interopRequireDefault(require("../api"));
@@ -85,6 +86,9 @@ function CheckoutTable({
       _Toast.default.error(err.message);
     });
   };
+  const goBack = () => {
+    setSessionId("");
+  };
   if (!sessionId) {
     if (mode === "standalone") {
       return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -108,10 +112,13 @@ function CheckoutTable({
       onSelect: handleSelect
     });
   }
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {
-    id: sessionId,
-    onPaid,
-    onError,
-    mode
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_system.Box, {
+    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_form.default, {
+      id: sessionId,
+      onPaid,
+      onError,
+      mode,
+      goBack
+    })
   });
 }

package/lib/components/pricing-table.js

@@ -125,6 +125,7 @@ function PricingTable({
         direction: "row",
         gap: "calc(10px + 3%)",
         justifyContent: alignItems === "center" ? "center" : "flex-start",
+        className: "price-table-wrap",
         children: grouped[state.interval]?.map(x => {
           let action = x.subscription_data?.trial_period_days ? t("payment.checkout.try") : t("payment.checkout.subscription");
           if (mode === "select") {

package/lib/{portal → histroy}/invoice/list.js

@@ -137,7 +137,7 @@ function CustomerInvoiceList({
         children: loadingMore ? t("common.loadingMore", {
           resource: t("payment.customer.invoices")
         }) : t("common.loadMore", {
-          resource: t("payament.customer.invoices")
+          resource: t("payment.customer.invoices")
         })
       }), !hasMore && data.count > pageSize && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         color: "text.secondary",

package/lib/histroy/mini-invoice/list.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { TSubscriptionExpanded } from '@blocklet/payment-types';
+type Props = {
+    subscription: TSubscriptionExpanded;
+};
+export default function MiniInvoiceList({ subscription }: Props): import("react").JSX.Element;
+export {};