@blocklet/payment-react 1.14.20 → 1.14.22

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

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

package/es/history/invoice/list.js

@@ -4,8 +4,8 @@ import Toast from "@arcblock/ux/lib/Toast";
 import { OpenInNewOutlined } from "@mui/icons-material";
 import { Box, Button, CircularProgress, Hidden, Stack, Typography } from "@mui/material";
 import { styled } from "@mui/system";
-import { useInfiniteScroll, useSetState } from "ahooks";
-import { useEffect } from "react";
+import { useInfiniteScroll, useRequest, useSetState } from "ahooks";
+import React, { useEffect, useState } from "react";
 import { joinURL } from "ufo";
 import Status from "../../components/status.js";
 import { usePaymentContext } from "../../contexts/payment.js";
@@ -20,6 +20,7 @@ import {
   getPrefix,
   getTxLink
 } from "../../libs/util.js";
+import Table from "../../components/table.js";
 const groupByDate = (items) => {
   const grouped = {};
   items.forEach((item) => {
@@ -57,21 +58,178 @@ const getInvoiceLink = (invoice, action) => {
     url: getTxLink(invoice.paymentMethod, invoice.metadata?.payment_details).link
   };
 };
-export default function CustomerInvoiceList({
-  customer_id,
-  subscription_id,
-  currency_id,
-  include_staking,
-  status,
-  pageSize,
-  target,
-  action
-}) {
+const InvoiceTable = React.memo((props) => {
+  const {
+    pageSize,
+    target,
+    action,
+    onPay,
+    status,
+    customer_id,
+    currency_id,
+    subscription_id,
+    include_staking,
+    include_recovered_from
+  } = props;
+  const listKey = "invoice-table";
+  const { t, locale } = useLocaleContext();
+  const [search, setSearch] = useState({
+    pageSize: pageSize || 10,
+    page: 1
+  });
+  const { loading, data = { list: [], count: 0 } } = useRequest(
+    () => fetchData({
+      ...search,
+      status,
+      customer_id,
+      currency_id,
+      subscription_id,
+      include_staking,
+      include_recovered_from,
+      ignore_zero: true
+    }),
+    {
+      refreshDeps: [search]
+    }
+  );
+  const columns = [
+    {
+      label: t("payment.customer.invoice.invoiceNumber"),
+      name: "number",
+      options: {
+        customBodyRenderLite: (_, index) => {
+          const invoice = data?.list[index];
+          const link = getInvoiceLink(invoice, action);
+          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: invoice?.number });
+        }
+      }
+    },
+    {
+      label: t("common.amount"),
+      name: "total",
+      options: {
+        customBodyRenderLite: (_, index) => {
+          const invoice = data?.list[index];
+          const link = getInvoiceLink(invoice, action);
+          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: /* @__PURE__ */ jsxs(Typography, { children: [
+            formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
+            "\xA0",
+            invoice.paymentCurrency.symbol
+          ] }) });
+        }
+      }
+    },
+    {
+      label: t("common.updatedAt"),
+      name: "name",
+      options: {
+        customBodyRenderLite: (val, index) => {
+          const invoice = data?.list[index];
+          const link = getInvoiceLink(invoice, action);
+          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: formatToDate(invoice.created_at, locale, "YYYY-MM-DD HH:mm:ss") });
+        }
+      }
+    },
+    {
+      label: t("common.description"),
+      name: "",
+      options: {
+        sort: false,
+        customBodyRenderLite: (val, index) => {
+          const invoice = data?.list[index];
+          const link = getInvoiceLink(invoice, action);
+          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: invoice.description || invoice.id });
+        }
+      }
+    },
+    {
+      label: t("common.status"),
+      name: "created_at",
+      options: {
+        sort: true,
+        customBodyRenderLite: (val, index) => {
+          const invoice = data?.list[index];
+          const link = getInvoiceLink(invoice, action);
+          if (action) {
+            return link.connect ? /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", onClick: () => onPay(invoice.id), sx: { color: "text.link" }, children: t("payment.customer.invoice.pay") }) : /* @__PURE__ */ jsx(
+              Button,
+              {
+                component: "a",
+                variant: "text",
+                size: "small",
+                href: link.url,
+                target: link.external ? "_blank" : target,
+                sx: { color: "var(--foregrounds-fg-interactive, #0086FF) !important" },
+                rel: "noreferrer",
+                children: t("payment.customer.invoice.pay")
+              }
+            );
+          }
+          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) });
+        }
+      }
+    }
+  ];
+  const onTableChange = ({ page, rowsPerPage }) => {
+    if (search.pageSize !== rowsPerPage) {
+      setSearch((x) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
+    } else if (search.page !== page + 1) {
+      setSearch((x) => ({ ...x, page: page + 1 }));
+    }
+  };
+  return /* @__PURE__ */ jsx(InvoiceTableRoot, { children: /* @__PURE__ */ jsx(
+    Table,
+    {
+      hasRowLink: true,
+      durable: `__${listKey}__`,
+      durableKeys: ["page", "rowsPerPage", "searchText"],
+      data: data.list,
+      columns,
+      options: {
+        count: data.count,
+        page: search.page - 1,
+        rowsPerPage: search.pageSize
+      },
+      loading,
+      onChange: onTableChange,
+      toolbar: false,
+      sx: { mt: 2 },
+      showMobile: false,
+      mobileTDFlexDirection: "row",
+      emptyNodeText: t("payment.customer.invoice.emptyList")
+    }
+  ) });
+});
+const InvoiceTableRoot = styled(Box)`
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
+      > div {
+        width: fit-content;
+        flex: inherit;
+        font-size: 14px;
+      }
+    }
+    .invoice-summary {
+      padding-right: 20px;
+    }
+  }
+`;
+const InvoiceList = React.memo((props) => {
+  const {
+    customer_id,
+    subscription_id,
+    include_recovered_from,
+    currency_id,
+    include_staking,
+    status,
+    pageSize,
+    target,
+    action,
+    onPay
+  } = props;
   const size = pageSize || 10;
   const subscription = useSubscription("events");
   const { t, locale } = useLocaleContext();
-  const { connect } = usePaymentContext();
-  const [state, setState] = useSetState({ paying: "" });
   const { data, loadMore, loadingMore, loading, reloadAsync } = useInfiniteScroll(
     (d) => {
       const page = d ? Math.ceil(d.list.length / size) + 1 : 1;
@@ -83,11 +241,12 @@ export default function CustomerInvoiceList({
         currency_id,
         subscription_id,
         include_staking,
+        include_recovered_from,
         ignore_zero: true
       });
     },
     {
-      reloadDeps: [customer_id, subscription_id, status, include_staking]
+      reloadDeps: [customer_id, subscription_id, status, include_staking, include_recovered_from]
     }
   );
   useEffect(() => {
@@ -99,36 +258,6 @@ export default function CustomerInvoiceList({
       });
     }
   }, [subscription]);
-  const onPay = (invoiceId) => {
-    if (state.paying) {
-      return;
-    }
-    setState({ paying: invoiceId });
-    connect.open({
-      action: "collect",
-      saveConnect: false,
-      messages: {
-        scan: "",
-        title: t(`payment.customer.invoice.${action || "pay"}`),
-        success: t(`payment.customer.invoice.${action || "pay"}Success`),
-        error: t(`payment.customer.invoice.${action || "pay"}Error`),
-        confirm: ""
-      },
-      extraParams: { invoiceId, action },
-      onSuccess: () => {
-        connect.close();
-        setState({ paying: "" });
-      },
-      onClose: () => {
-        connect.close();
-        setState({ paying: "" });
-      },
-      onError: (err) => {
-        setState({ paying: "" });
-        Toast.error(formatError(err));
-      }
-    });
-  };
   if (loading || !data) {
     return /* @__PURE__ */ jsx(CircularProgress, {});
   }
@@ -174,7 +303,6 @@ export default function CustomerInvoiceList({
                 {
                   component: "a",
                   variant: "contained",
-                  color: "primary",
                   size: "small",
                   href: link.url,
                   target: link.external ? "_blank" : target,
@@ -193,19 +321,61 @@ export default function CustomerInvoiceList({
       !hasMore && data.count > size && /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("common.noMore", { resource: t("payment.customer.invoices") }) })
     ] })
   ] });
+});
+export default function CustomerInvoiceList(props) {
+  const { action, type } = props;
+  const { t } = useLocaleContext();
+  const { connect } = usePaymentContext();
+  const [state, setState] = useSetState({ paying: "" });
+  const onPay = (invoiceId) => {
+    if (state.paying) {
+      return;
+    }
+    setState({ paying: invoiceId });
+    connect.open({
+      action: "collect",
+      saveConnect: false,
+      messages: {
+        scan: "",
+        title: t(`payment.customer.invoice.${action || "pay"}`),
+        success: t(`payment.customer.invoice.${action || "pay"}Success`),
+        error: t(`payment.customer.invoice.${action || "pay"}Error`),
+        confirm: ""
+      },
+      extraParams: { invoiceId, action },
+      onSuccess: () => {
+        connect.close();
+        setState({ paying: "" });
+      },
+      onClose: () => {
+        connect.close();
+        setState({ paying: "" });
+      },
+      onError: (err) => {
+        setState({ paying: "" });
+        Toast.error(formatError(err));
+      }
+    });
+  };
+  if (type === "table") {
+    return /* @__PURE__ */ jsx(InvoiceTable, { ...props, onPay });
+  }
+  return /* @__PURE__ */ jsx(InvoiceList, { ...props, onPay });
 }
 CustomerInvoiceList.defaultProps = {
   customer_id: "",
   subscription_id: "",
   currency_id: "",
   include_staking: false,
+  include_recovered_from: false,
   status: "open,paid,uncollectible",
   pageSize: 10,
   target: "_self",
-  action: ""
+  action: "",
+  type: "list"
 };
 const Root = styled(Stack)`
-  @media (max-width: 600px) {
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
     .invoice-description {
       display: none !important;
     }

package/es/hooks/mobile.d.ts

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

package/es/hooks/mobile.js

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

package/es/index.d.ts

@@ -7,6 +7,7 @@ import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
 import Livemode from './components/livemode';
 import PricingTable from './components/pricing-table';
+import Table from './components/table';
 import SafeGuard from './components/safe-guard';
 import Status from './components/status';
 import Switch from './components/switch-button';
@@ -23,9 +24,12 @@ import Payment from './payment/index';
 import ProductSkeleton from './payment/product-skeleton';
 import PaymentSummary from './payment/summary';
 import PricingItem from './components/pricing-item';
+import CountrySelect from './components/country-select';
+export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
 export * from './contexts/payment';
 export * from './hooks/subscription';
+export * from './hooks/mobile';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, };
+export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, };

package/es/index.js

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

package/es/libs/util.d.ts

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