@blocklet/payment-react 1.13.124 → 1.13.126

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,7 +104,7 @@ 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) => {
@@ -111,8 +119,10 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                     spacing: 2,
                     direction: "column",
                     alignItems: "center",
+                    className: "price-table-item",
+                    justifyContent: "center",
                     sx: {
-                      width: 320,
+                      width: 0.9 / grouped[state.interval].length,
                       cursor: "pointer",
                       borderWidth: "1px",
                       borderStyle: "solid",
@@ -145,7 +155,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                         {
                           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" },
@@ -171,5 +180,5 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
         )
       ]
     }
-  );
+  ) });
 }

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/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 = {

package/lib/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/lib/components/confirm.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = ConfirmDialog;
+var _jsxRuntime = require("react/jsx-runtime");
+var _Dialog = require("@arcblock/ux/lib/Dialog");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _material = require("@mui/material");
+function ConfirmDialog({
+  onConfirm,
+  onCancel,
+  title,
+  message,
+  loading
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_Dialog.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__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      children: message
+    })
+  });
+}
+ConfirmDialog.defaultProps = {
+  loading: false
+};