@blocklet/payment-react 1.14.21 → 1.14.23

package/lib/history/invoice/list.js

@@ -11,13 +11,16 @@ var _iconsMaterial = require("@mui/icons-material");
 var _material = require("@mui/material");
 var _system = require("@mui/system");
 var _ahooks = require("ahooks");
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _ufo = require("ufo");
 var _status = _interopRequireDefault(require("../../components/status"));
 var _payment = require("../../contexts/payment");
 var _subscription = require("../../hooks/subscription");
 var _api = _interopRequireDefault(require("../../libs/api"));
 var _util = require("../../libs/util");
+var _table = _interopRequireDefault(require("../../components/table"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const groupByDate = items => {
   const grouped = {};
@@ -53,29 +56,227 @@ const getInvoiceLink = (invoice, action) => {
     url: (0, _util.getTxLink)(invoice.paymentMethod, invoice.metadata?.payment_details).link
   };
 };
-function CustomerInvoiceList({
-  customer_id,
-  subscription_id,
-  currency_id,
-  include_staking,
-  include_recovered_from,
-  status,
-  pageSize,
-  target,
-  action
-}) {
-  const size = pageSize || 10;
-  const subscription = (0, _subscription.useSubscription)("events");
+const InvoiceTable = _react.default.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
   } = (0, _context.useLocaleContext)();
+  const [search, setSearch] = (0, _react.useState)({
+    pageSize: pageSize || 10,
+    page: 1
+  });
   const {
-    connect
-  } = (0, _payment.usePaymentContext)();
-  const [state, setState] = (0, _ahooks.useSetState)({
-    paying: ""
+    loading,
+    data = {
+      list: [],
+      count: 0
+    }
+  } = (0, _ahooks.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__ */(0, _jsxRuntime.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__ */(0, _jsxRuntime.jsx)("a", {
+          href: link.url,
+          target: link.external ? "_blank" : target,
+          rel: "noreferrer",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            children: [(0, _util.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__ */(0, _jsxRuntime.jsx)("a", {
+          href: link.url,
+          target: link.external ? "_blank" : target,
+          rel: "noreferrer",
+          children: (0, _util.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__ */(0, _jsxRuntime.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__ */(0, _jsxRuntime.jsx)(_material.Button, {
+            variant: "text",
+            size: "small",
+            onClick: () => onPay(invoice.id),
+            sx: {
+              color: "text.link"
+            },
+            children: t("payment.customer.invoice.pay")
+          }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)("a", {
+          href: link.url,
+          target: link.external ? "_blank" : target,
+          rel: "noreferrer",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+            label: invoice.status,
+            color: (0, _util.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__ */(0, _jsxRuntime.jsx)(InvoiceTableRoot, {
+    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_table.default, {
+      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 = (0, _system.styled)(_material.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.default.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 = (0, _subscription.useSubscription)("events");
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
   const {
     data,
     loadMore,
@@ -109,47 +310,6 @@ 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.default.error((0, _util.formatError)(err));
-      }
-    });
-  };
   if (loading || !data) {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {});
   }
@@ -262,7 +422,6 @@ function CustomerInvoiceList({
             }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
               component: "a",
               variant: "contained",
-              color: "primary",
               size: "small",
               href: link.url,
               target: link.external ? "_blank" : target,
@@ -295,6 +454,72 @@ function CustomerInvoiceList({
       })]
     })]
   });
+});
+function CustomerInvoiceList(props) {
+  const {
+    action,
+    type
+  } = props;
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    connect
+  } = (0, _payment.usePaymentContext)();
+  const [state, setState] = (0, _ahooks.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.default.error((0, _util.formatError)(err));
+      }
+    });
+  };
+  if (type === "table") {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(InvoiceTable, {
+      ...props,
+      onPay
+    });
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(InvoiceList, {
+    ...props,
+    onPay
+  });
 }
 CustomerInvoiceList.defaultProps = {
   customer_id: "",
@@ -305,10 +530,13 @@ CustomerInvoiceList.defaultProps = {
   status: "open,paid,uncollectible",
   pageSize: 10,
   target: "_self",
-  action: ""
+  action: "",
+  type: "list"
 };
 const Root = (0, _system.styled)(_material.Stack)`
-  @media (max-width: 600px) {
+  @media (max-width: ${({
+  theme
+}) => theme.breakpoints.values.md}px) {
     .invoice-description {
       display: none !important;
     }

package/lib/hooks/mobile.d.ts

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

package/lib/hooks/mobile.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMobile = useMobile;
+var _styles = require("@mui/material/styles");
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const MOBILE_POINT = "md";
+function useMobile(mobilePoint = MOBILE_POINT) {
+  const theme = (0, _styles.useTheme)();
+  return {
+    isMobile: (0, _useMediaQuery.default)(theme.breakpoints.down(mobilePoint)),
+    mobileSize: `${theme.breakpoints.values[mobilePoint]}px`
+  };
+}

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

@@ -13,6 +13,7 @@ var _exportNames = {
   FormInput: true,
   Livemode: true,
   PricingTable: true,
+  Table: true,
   SafeGuard: true,
   Status: true,
   Switch: true,
@@ -29,6 +30,8 @@ var _exportNames = {
   ProductSkeleton: true,
   PaymentSummary: true,
   PricingItem: true,
+  CountrySelect: true,
+  PaymentThemeProvider: true,
   translations: true,
   createTranslator: true
 };
@@ -68,6 +71,12 @@ Object.defineProperty(exports, "ConfirmDialog", {
     return _confirm.default;
   }
 });
+Object.defineProperty(exports, "CountrySelect", {
+  enumerable: true,
+  get: function () {
+    return _countrySelect.default;
+  }
+});
 Object.defineProperty(exports, "CurrencySelector", {
   enumerable: true,
   get: function () {
@@ -110,6 +119,12 @@ Object.defineProperty(exports, "PaymentSummary", {
     return _summary.default;
   }
 });
+Object.defineProperty(exports, "PaymentThemeProvider", {
+  enumerable: true,
+  get: function () {
+    return _theme.PaymentThemeProvider;
+  }
+});
 Object.defineProperty(exports, "PhoneInput", {
   enumerable: true,
   get: function () {
@@ -158,6 +173,12 @@ Object.defineProperty(exports, "Switch", {
     return _switchButton.default;
   }
 });
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function () {
+    return _table2.default;
+  }
+});
 Object.defineProperty(exports, "TxGas", {
   enumerable: true,
   get: function () {
@@ -203,6 +224,7 @@ var _confirm = _interopRequireDefault(require("./components/confirm"));
 var _input = _interopRequireDefault(require("./components/input"));
 var _livemode = _interopRequireDefault(require("./components/livemode"));
 var _pricingTable = _interopRequireDefault(require("./components/pricing-table"));
+var _table2 = _interopRequireDefault(require("./components/table"));
 var _safeGuard = _interopRequireDefault(require("./components/safe-guard"));
 var _status = _interopRequireDefault(require("./components/status"));
 var _switchButton = _interopRequireDefault(require("./components/switch-button"));
@@ -219,6 +241,8 @@ var _index = _interopRequireDefault(require("./payment/index"));
 var _productSkeleton = _interopRequireDefault(require("./payment/product-skeleton"));
 var _summary = _interopRequireDefault(require("./payment/summary"));
 var _pricingItem = _interopRequireDefault(require("./components/pricing-item"));
+var _countrySelect = _interopRequireDefault(require("./components/country-select"));
+var _theme = require("./theme");
 var _util = require("./libs/util");
 Object.keys(_util).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -267,5 +291,17 @@ Object.keys(_subscription).forEach(function (key) {
     }
   });
 });
+var _mobile = require("./hooks/mobile");
+Object.keys(_mobile).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _mobile[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _mobile[key];
+    }
+  });
+});
 var _locales = require("./locales");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/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;
@@ -24,12 +24,12 @@ 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 getRefundStatusColor(status: string): "success" | "warning" | "default";
-export declare function getPayoutStatusColor(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 getSubscriptionStatusColor(status: string): "default" | "success" | "primary" | "warning" | "error";
+export declare function getPaymentIntentStatusColor(status: string): "default" | "success" | "warning";
+export declare function getRefundStatusColor(status: string): "default" | "success" | "warning";
+export declare function getPayoutStatusColor(status: string): "default" | "success" | "warning";
+export declare function getInvoiceStatusColor(status: string): "default" | "success" | "warning" | "secondary";
+export declare function getWebhookStatusColor(status: string): "default" | "success";
 export declare function getCheckoutAmount(items: TLineItemExpanded[], currency: TPaymentCurrency, trialing?: boolean, upsell?: boolean): {
     subtotal: any;
     total: any;
@@ -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;