@blocklet/payment-react 1.13.123 → 1.13.125

package/es/api.js

@@ -7,7 +7,6 @@ api.interceptors.request.use(
   (config) => {
     const prefix = getPrefix();
     config.baseURL = prefix || "";
-    config.timeout = 8e3;
     const livemode = localStorage.getItem("livemode");
     const locale = getLocale(window.blocklet?.languages);
     config.params = { ...config.params || {}, livemode: isNull(livemode) ? true : JSON.parse(livemode), locale };

package/es/components/confirm.d.ts

@@ -0,0 +1,14 @@
+import type { EventHandler } from 'react';
+declare function ConfirmDialog({ onConfirm, onCancel, title, message, loading, }: {
+    onConfirm: EventHandler<any>;
+    onCancel: EventHandler<any>;
+    title: string | React.ReactNode;
+    message: string | React.ReactNode;
+    loading?: boolean;
+}): import("react").JSX.Element;
+declare namespace ConfirmDialog {
+    var defaultProps: {
+        loading: boolean;
+    };
+}
+export default ConfirmDialog;

package/es/components/confirm.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { Confirm } from "@arcblock/ux/lib/Dialog";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Typography } from "@mui/material";
+export default function ConfirmDialog({
+  onConfirm,
+  onCancel,
+  title,
+  message,
+  loading
+}) {
+  const { t } = useLocaleContext();
+  return /* @__PURE__ */ jsx(
+    Confirm,
+    {
+      open: true,
+      title,
+      onConfirm,
+      onCancel,
+      confirmButton: {
+        text: t("common.confirm"),
+        props: { color: "error", size: "small", variant: "contained", disabled: !!loading }
+      },
+      cancelButton: { text: t("common.cancel"), props: { color: "inherit", size: "small" } },
+      children: /* @__PURE__ */ jsx(Typography, { children: message })
+    }
+  );
+}
+ConfirmDialog.defaultProps = {
+  loading: false
+};

package/es/components/pricing-table.js

@@ -16,6 +16,7 @@ import {
   ToggleButtonGroup,
   Typography
 } from "@mui/material";
+import { styled } from "@mui/system";
 import { useSetState } from "ahooks";
 import { useEffect } from "react";
 import Amount from "../payment/amount.js";
@@ -61,7 +62,14 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       Toast.error(formatError(err));
     }
   };
-  return /* @__PURE__ */ jsxs(
+  const Root = styled(Box)`
+    @media (max-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
+      .price-table-item {
+        width: 90% !important;
+      }
+    }
+  `;
+  return /* @__PURE__ */ jsx(Root, { children: /* @__PURE__ */ jsxs(
     Stack,
     {
       direction: "column",
@@ -96,78 +104,80 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
           {
             flexWrap: "wrap",
             direction: "row",
-            gap: { xs: 3, sm: 5, md: mode === "checkout" ? 10 : 5 },
+            gap: "calc(10px + 3%)",
             justifyContent: alignItems === "center" ? "center" : "flex-start",
-            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") {
-                action = x.is_selected ? t("payment.checkout.selected") : t("payment.checkout.select");
-              }
-              return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(
-                Stack,
-                {
-                  padding: 4,
-                  spacing: 2,
-                  direction: "column",
-                  alignItems: "center",
-                  sx: {
-                    width: 320,
-                    cursor: "pointer",
-                    borderWidth: "1px",
-                    borderStyle: "solid",
-                    borderColor: mode === "select" && x.is_selected ? "primary.main" : "#eee",
-                    borderRadius: 1,
-                    transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
-                    boxShadow: "0 4px 8px rgba(0, 0, 0, 20%)",
-                    "&:hover": {
-                      borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
-                      boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
-                    }
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs(Box, { textAlign: "center", children: [
+            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") {
+                  action = x.is_selected ? t("payment.checkout.selected") : t("payment.checkout.select");
+                }
+                return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(
+                  Stack,
+                  {
+                    padding: 4,
+                    spacing: 2,
+                    direction: "column",
+                    alignItems: "center",
+                    className: "price-table-item",
+                    sx: {
+                      width: "30%",
+                      cursor: "pointer",
+                      borderWidth: "1px",
+                      borderStyle: "solid",
+                      borderColor: mode === "select" && x.is_selected ? "primary.main" : "#eee",
+                      borderRadius: 1,
+                      transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
+                      boxShadow: "0 4px 8px rgba(0, 0, 0, 20%)",
+                      "&:hover": {
+                        borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
+                        boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs(Box, { textAlign: "center", children: [
+                        /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
+                          /* @__PURE__ */ jsx(Typography, { variant: "h5", color: "text.primary", fontWeight: 600, children: x.product.name }),
+                          x.is_highlight && /* @__PURE__ */ jsx(Chip, { label: x.highlight_text, color: "default", size: "small" })
+                        ] }),
+                        /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: x.product.description })
+                      ] }),
                       /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
-                        /* @__PURE__ */ jsx(Typography, { variant: "h5", color: "text.primary", fontWeight: 600, children: x.product.name }),
-                        x.is_highlight && /* @__PURE__ */ jsx(Chip, { label: x.highlight_text, color: "default", size: "small" })
+                        /* @__PURE__ */ jsx(Amount, { amount: formatPriceAmount(x.price, table.currency, x.product.unit_label) }),
+                        /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", children: [
+                          /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: "0.8rem", children: t("payment.checkout.per") }),
+                          /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: "0.8rem", children: formatRecurring(x.price.recurring, false, "", locale) })
+                        ] })
                       ] }),
-                      /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: x.product.description })
-                    ] }),
-                    /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
-                      /* @__PURE__ */ jsx(Amount, { amount: formatPriceAmount(x.price, table.currency, x.product.unit_label) }),
-                      /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", children: [
-                        /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: "0.8rem", children: t("payment.checkout.per") }),
-                        /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: "0.8rem", children: formatRecurring(x.price.recurring, false, "", locale) })
+                      /* @__PURE__ */ jsx(
+                        LoadingButton,
+                        {
+                          fullWidth: true,
+                          size: "large",
+                          variant: x.is_highlight || x.is_selected ? "contained" : "outlined",
+                          color: x.is_highlight || x.is_selected ? "primary" : "info",
+                          sx: { fontSize: "1.2rem" },
+                          loading: state.loading === x.price_id,
+                          disabled: x.is_disabled,
+                          onClick: () => handleSelect(x.price_id),
+                          children: action
+                        }
+                      ),
+                      x.product.features.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
+                        /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.include") }),
+                        /* @__PURE__ */ jsx(List, { dense: true, children: x.product.features.map((f) => /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, disablePadding: true, children: [
+                          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 25 }, children: /* @__PURE__ */ jsx(CheckOutlined, { color: "success", fontSize: "small" }) }),
+                          /* @__PURE__ */ jsx(ListItemText, { primary: f.name })
+                        ] }, f.name)) })
                       ] })
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      LoadingButton,
-                      {
-                        fullWidth: true,
-                        size: "large",
-                        loadingPosition: "end",
-                        variant: x.is_highlight || x.is_selected ? "contained" : "outlined",
-                        color: x.is_highlight || x.is_selected ? "primary" : "info",
-                        sx: { fontSize: "1.2rem" },
-                        loading: state.loading === x.price_id,
-                        disabled: x.is_disabled,
-                        onClick: () => handleSelect(x.price_id),
-                        children: action
-                      }
-                    ),
-                    x.product.features.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
-                      /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.include") }),
-                      /* @__PURE__ */ jsx(List, { dense: true, children: x.product.features.map((f) => /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, disablePadding: true, children: [
-                        /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 25 }, children: /* @__PURE__ */ jsx(CheckOutlined, { color: "success", fontSize: "small" }) }),
-                        /* @__PURE__ */ jsx(ListItemText, { primary: f.name })
-                      ] }, f.name)) })
-                    ] })
-                  ]
-                }
-              ) }, x.price_id);
-            })
+                    ]
+                  }
+                ) }, x.price_id);
+              }
+            )
           }
         )
       ]
     }
-  );
+  ) });
 }

package/es/contexts/payment.d.ts

@@ -7,8 +7,10 @@ export interface Settings {
 }
 export type PaymentContextType = {
     livemode: boolean;
-    session: any;
-    connect: any;
+    session: import('@arcblock/did-connect/lib/types').SessionContext['session'] & {
+        user: any;
+    };
+    connect: import('@arcblock/did-connect/lib/types').SessionContext['connectApi'];
     prefix: string;
     settings: Settings;
     refresh: () => void;

package/es/index.d.ts

@@ -1,6 +1,7 @@
 import api from './api';
 import CheckoutForm from './checkout/form';
 import CheckoutTable from './checkout/table';
+import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
 import Livemode from './components/livemode';
 import PricingTable from './components/pricing-table';
@@ -11,7 +12,9 @@ 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, CheckoutForm, CheckoutTable, Payment, PricingTable, ProductSkeleton, Amount, };
+export { api, dayjs, FormInput, PhoneInput, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, Payment, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, };

package/es/index.js

@@ -1,6 +1,7 @@
 import api from "./api.js";
 import CheckoutForm from "./checkout/form.js";
 import CheckoutTable from "./checkout/table.js";
+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";
@@ -11,6 +12,8 @@ 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";
@@ -22,10 +25,13 @@ export {
   Status,
   Livemode,
   Switch,
+  ConfirmDialog,
   CheckoutForm,
   CheckoutTable,
   Payment,
   PricingTable,
   ProductSkeleton,
-  Amount
+  Amount,
+  CustomerInvoiceList,
+  CustomerPaymentList
 };

package/es/locales/en.js

@@ -146,6 +146,7 @@ export default flat({
       }
     },
     customer: {
+      payments: "Payment History",
       invoices: "Invoice History",
       details: "Billing Details",
       update: "Update Information",
@@ -201,7 +202,10 @@ export default flat({
         pay: "Pay this invoice",
         paySuccess: "You have successfully paid the invoice",
         payError: "Failed to paid the invoice",
-        empty: "Seems you do not have any payments here"
+        empty: "Seems you do not have any invoice here"
+      },
+      payment: {
+        empty: "Seems you do not have any payment here"
       },
       subscriptions: {
         title: "Manage subscriptions",

package/es/locales/zh.js

@@ -146,6 +146,7 @@ export default flat({
       }
     },
     customer: {
+      payments: "\u652F\u4ED8\u5386\u53F2",
       invoices: "\u53D1\u7968\u5386\u53F2",
       details: "\u8BA1\u8D39\u8BE6\u60C5",
       update: "\u66F4\u65B0\u5BA2\u6237\u4FE1\u606F",
@@ -201,6 +202,9 @@ export default flat({
         pay: "\u652F\u4ED8\u6B64\u53D1\u7968",
         paySuccess: "\u652F\u4ED8\u6210\u529F",
         payError: "\u652F\u4ED8\u5931\u8D25",
+        empty: "\u4F60\u6CA1\u6709\u4EFB\u4F55\u53D1\u7968"
+      },
+      payment: {
         empty: "\u4F60\u6CA1\u6709\u4EFB\u4F55\u652F\u4ED8"
       },
       subscriptions: {

package/es/payment/form/index.js

@@ -169,9 +169,9 @@ export default function PaymentForm({
           await handleConnected();
         } else {
           connect.open({
+            containerEl: void 0,
             action: checkoutSession.mode,
-            prefix: joinURL(getPrefix(), "/api/did"),
-            timeout: 5 * 60 * 1e3,
+            prefix: joinURL(window.location.origin, getPrefix(), "/api/did"),
             extraParams: { checkoutSessionId: checkoutSession.id },
             onSuccess: async () => {
               connect.close();

package/es/payment/index.js

@@ -305,18 +305,18 @@ export const Root = styled(Box)`
   }
 
   .cko-payment-card-unselect {
-    border: 2px solid #bbb;
+    border: 2px solid #ddd;
     padding: 5px 10px;
     margin: 5px 0;
     cursor: pointer;
   }
 
   .cko-payment-card:nth-child(odd) {
-    margin-right: 5px;
+    margin-right: 16px;
   }
 
   .cko-payment-card-unselect:nth-child(odd) {
-    margin-right: 5px;
+    margin-right: 16px;
   }
 
   .cko-payment-card::after {

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type Props = {
+    customer_id: string;
+};
+export default function CustomerInvoiceList({ customer_id }: Props): import("react").JSX.Element;
+export {};

package/es/portal/invoice/list.js

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Box, Button, CircularProgress, Stack, 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 { formatToDate, getInvoiceStatusColor } from "../../util.js";
+const groupByDate = (items) => {
+  const grouped = {};
+  items.forEach((item) => {
+    const date = new Date(item.created_at).toLocaleDateString();
+    if (!grouped[date]) {
+      grouped[date] = [];
+    }
+    grouped[date]?.push(item);
+  });
+  return grouped;
+};
+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 CustomerInvoiceList({ customer_id }) {
+  const { t } = useLocaleContext();
+  const { data, loadMore, loadingMore, loading } = useInfiniteScroll(
+    (d) => {
+      const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
+      return fetchData({ page, pageSize, status: "open,paid,uncollectible", customer_id });
+    },
+    {
+      reloadDeps: [customer_id]
+    }
+  );
+  if (loading || !data) {
+    return /* @__PURE__ */ jsx(CircularProgress, {});
+  }
+  if (data && data.list.length === 0) {
+    return /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("payment.customer.invoice.empty") });
+  }
+  const hasMore = data && data.list.length < data.count;
+  const grouped = groupByDate(data.list);
+  return /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: 1, sx: { mt: 1 }, children: [
+    Object.entries(grouped).map(([date, invoices]) => /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: "bold", color: "text.secondary", mt: 2, mb: 1 }, children: date }),
+      invoices.map((invoice) => /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: {
+            xs: "column",
+            sm: "row"
+          },
+          sx: { my: 1 },
+          gap: {
+            xs: 0.5,
+            sm: 1.5,
+            md: 3
+          },
+          flexWrap: "nowrap",
+          children: [
+            /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx("a", { href: `/customer/invoice/${invoice.id}`, children: /* @__PURE__ */ jsx(Typography, { component: "span", children: invoice.number }) }) }),
+            /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(invoice.created_at) }) }),
+            /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsxs(Typography, { textAlign: "right", children: [
+              fromUnitToToken(invoice.total, invoice.paymentCurrency.decimal),
+              "\xA0",
+              invoice.paymentCurrency.symbol
+            ] }) }),
+            /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) }),
+            /* @__PURE__ */ jsx(Box, { flex: 4, children: /* @__PURE__ */ jsx(Typography, { children: invoice.description || invoice.id }) })
+          ]
+        },
+        invoice.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 && data.count > pageSize && /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("common.noMore", { resource: t("payment.customer.invoices") }) })
+    ] })
+  ] });
+}

package/es/portal/payment/list.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type Props = {
+    customer_id: string;
+};
+export default function CustomerPaymentList({ customer_id }: Props): import("react").JSX.Element;
+export {};

package/es/portal/payment/list.js

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Box, Button, CircularProgress, Stack, 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 { formatToDate, getPaymentIntentStatusColor } from "../../util.js";
+const groupByDate = (items) => {
+  const grouped = {};
+  items.forEach((item) => {
+    const date = new Date(item.created_at).toLocaleDateString();
+    if (!grouped[date]) {
+      grouped[date] = [];
+    }
+    grouped[date]?.push(item);
+  });
+  return grouped;
+};
+const fetchData = (params = {}) => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    search.set(key, String(params[key]));
+  });
+  return api.get(`/api/payment-intents?${search.toString()}`).then((res) => res.data);
+};
+const pageSize = 10;
+export default function CustomerPaymentList({ customer_id }) {
+  const { t } = useLocaleContext();
+  const { data, loadMore, loadingMore, loading } = useInfiniteScroll(
+    (d) => {
+      const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
+      return fetchData({ page, pageSize, customer_id });
+    },
+    {
+      reloadDeps: [customer_id]
+    }
+  );
+  if (loading || !data) {
+    return /* @__PURE__ */ jsx(CircularProgress, {});
+  }
+  if (data && data.list.length === 0) {
+    return /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("payment.customer.payment.empty") });
+  }
+  const hasMore = data && data.list.length < data.count;
+  const grouped = groupByDate(data.list);
+  return /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: 1, sx: { mt: 1 }, children: [
+    Object.entries(grouped).map(([date, payments]) => /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: "bold", color: "text.secondary", mt: 2, mb: 1 }, children: date }),
+      payments.map((item) => /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: {
+            xs: "column",
+            sm: "row"
+          },
+          sx: { my: 1 },
+          gap: {
+            xs: 0.5,
+            sm: 1.5,
+            md: 3
+          },
+          flexWrap: "nowrap",
+          children: [
+            /* @__PURE__ */ jsx(Box, { flex: 3, sx: { minWidth: "220px" }, children: /* @__PURE__ */ jsx(Typography, { component: "span", children: item.id }) }),
+            /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(item.created_at) }) }),
+            /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsxs(Typography, { textAlign: "right", children: [
+              fromUnitToToken(item.amount, item.paymentCurrency.decimal),
+              "\xA0",
+              item.paymentCurrency.symbol
+            ] }) }),
+            /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx(Status, { label: item.status, color: getPaymentIntentStatusColor(item.status) }) }),
+            /* @__PURE__ */ jsx(Box, { flex: 4, children: /* @__PURE__ */ jsx(Typography, { children: item.description || item.id }) })
+          ]
+        },
+        item.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.payments") }) : t("common.loadMore", { resource: t("payment.customer.payments") }) }),
+      !hasMore && data.count > pageSize && /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("common.noMore", { resource: t("payment.customer.payments") }) })
+    ] })
+  ] });
+}

package/es/util.d.ts

@@ -20,6 +20,10 @@ export declare function formatLineItemPricing(item: TLineItemExpanded, currency:
     secondary?: string;
     quantity: string;
 };
+export declare function getSubscriptionStatusColor(status: string): "success" | "primary" | "warning" | "error" | "default";
+export declare function getPaymentIntentStatusColor(status: string): "success" | "warning" | "default";
+export declare function getInvoiceStatusColor(status: string): "success" | "warning" | "default" | "secondary";
+export declare function getWebhookStatusColor(status: string): "success" | "default";
 export declare function getCheckoutAmount(items: TLineItemExpanded[], currency: TPaymentCurrency, includeFreeTrial?: boolean, upsell?: boolean): {
     subtotal: any;
     total: any;

package/es/util.js

@@ -168,6 +168,62 @@ export function formatLineItemPricing(item, currency, trial, locale = "en") {
     quantity
   };
 }
+export function getSubscriptionStatusColor(status) {
+  switch (status) {
+    case "active":
+      return "success";
+    case "trialing":
+      return "primary";
+    case "incomplete":
+    case "incomplete_expired":
+    case "paused":
+      return "warning";
+    case "past_due":
+    case "unpaid":
+      return "error";
+    case "canceled":
+    default:
+      return "default";
+  }
+}
+export function getPaymentIntentStatusColor(status) {
+  switch (status) {
+    case "succeeded":
+      return "success";
+    case "requires_payment_method":
+    case "requires_confirmation":
+    case "requires_action":
+    case "requires_capture":
+      return "warning";
+    case "canceled":
+    case "processing":
+    default:
+      return "default";
+  }
+}
+export function getInvoiceStatusColor(status) {
+  switch (status) {
+    case "paid":
+      return "success";
+    case "open":
+      return "secondary";
+    case "uncollectible":
+      return "warning";
+    case "draft":
+    case "void":
+    default:
+      return "default";
+  }
+}
+export function getWebhookStatusColor(status) {
+  switch (status) {
+    case "enabled":
+      return "success";
+    case "disabled":
+    default:
+      return "default";
+  }
+}
 export function getCheckoutAmount(items, currency, includeFreeTrial = false, upsell = true) {
   let renew = new BN(0);
   const total = items.reduce((acc, x) => {

package/lib/api.js

@@ -13,7 +13,6 @@ const api = _axios.default.create();
 api.interceptors.request.use(config => {
   const prefix = (0, _util.getPrefix)();
   config.baseURL = prefix || "";
-  config.timeout = 8e3;
   const livemode = localStorage.getItem("livemode");
   const locale = (0, _context.getLocale)(window.blocklet?.languages);
   config.params = {