@blocklet/payment-react 1.13.124 → 1.13.126

package/lib/components/pricing-table.js

@@ -10,6 +10,7 @@ var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _iconsMaterial = require("@mui/icons-material");
 var _lab = require("@mui/lab");
 var _material = require("@mui/material");
+var _system = require("@mui/system");
 var _ahooks = require("ahooks");
 var _react = require("react");
 var _amount = _interopRequireDefault(require("../payment/amount"));
@@ -78,151 +79,159 @@ function PricingTable({
       _Toast.default.error((0, _util.formatError)(err));
     }
   };
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-    direction: "column",
-    alignItems: alignItems === "center" ? "center" : "flex-start",
-    sx: {
-      pt: {
-        xs: 4,
-        sm: 2
-      },
-      gap: {
-        xs: 3,
-        sm: mode === "select" ? 3 : 5
+  const Root = (0, _system.styled)(_material.Box)`
+    @media (max-width: ${({
+    theme
+  }) => theme.breakpoints.values.sm}px) {
+      .price-table-item {
+        width: 90% !important;
       }
-    },
-    children: [Object.keys(recurring).length > 1 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButtonGroup, {
-      color: "primary",
-      value: state.interval,
-      onChange: (_, value) => {
-        if (value !== null) {
-          setState({
-            interval: value
-          });
+    }
+  `;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Root, {
+    children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "column",
+      alignItems: alignItems === "center" ? "center" : "flex-start",
+      sx: {
+        pt: {
+          xs: 4,
+          sm: 2
+        },
+        gap: {
+          xs: 3,
+          sm: mode === "select" ? 3 : 5
         }
       },
-      exclusive: true,
-      children: Object.keys(recurring).map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButton, {
-        value: x,
-        sx: {
-          textTransform: "capitalize"
+      children: [Object.keys(recurring).length > 1 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButtonGroup, {
+        color: "primary",
+        value: state.interval,
+        onChange: (_, value) => {
+          if (value !== null) {
+            setState({
+              interval: value
+            });
+          }
         },
-        children: (0, _util.formatRecurring)(recurring[x], true, "", locale)
-      }, x))
-    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
-      flexWrap: "wrap",
-      direction: "row",
-      gap: {
-        xs: 3,
-        sm: 5,
-        md: mode === "checkout" ? 10 : 5
-      },
-      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__ */(0, _jsxRuntime.jsx)(_material.Fade, {
-          in: true,
-          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.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__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-              textAlign: "center",
-              children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        exclusive: true,
+        children: Object.keys(recurring).map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButton, {
+          value: x,
+          sx: {
+            textTransform: "capitalize"
+          },
+          children: (0, _util.formatRecurring)(recurring[x], true, "", locale)
+        }, x))
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+        flexWrap: "wrap",
+        direction: "row",
+        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__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+            in: true,
+            children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+              padding: 4,
+              spacing: 2,
+              direction: "column",
+              alignItems: "center",
+              className: "price-table-item",
+              justifyContent: "center",
+              sx: {
+                width: 0.9 / grouped[state.interval].length,
+                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__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+                textAlign: "center",
+                children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+                  direction: "row",
+                  alignItems: "center",
+                  spacing: 1,
+                  children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                    variant: "h5",
+                    color: "text.primary",
+                    fontWeight: 600,
+                    children: x.product.name
+                  }), x.is_highlight && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
+                    label: x.highlight_text,
+                    color: "default",
+                    size: "small"
+                  })]
+                }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                  color: "text.secondary",
+                  children: x.product.description
+                })]
+              }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
                 direction: "row",
                 alignItems: "center",
                 spacing: 1,
-                children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                  variant: "h5",
-                  color: "text.primary",
-                  fontWeight: 600,
-                  children: x.product.name
-                }), x.is_highlight && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
-                  label: x.highlight_text,
-                  color: "default",
-                  size: "small"
+                children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
+                  amount: (0, _util.formatPriceAmount)(x.price, table.currency, x.product.unit_label)
+                }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+                  direction: "column",
+                  alignItems: "flex-start",
+                  children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                    component: "span",
+                    color: "text.secondary",
+                    fontSize: "0.8rem",
+                    children: t("payment.checkout.per")
+                  }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                    component: "span",
+                    color: "text.secondary",
+                    fontSize: "0.8rem",
+                    children: (0, _util.formatRecurring)(x.price.recurring, false, "", locale)
+                  })]
                 })]
-              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                color: "text.secondary",
-                children: x.product.description
-              })]
-            }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-              direction: "row",
-              alignItems: "center",
-              spacing: 1,
-              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
-                amount: (0, _util.formatPriceAmount)(x.price, table.currency, x.product.unit_label)
-              }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-                direction: "column",
-                alignItems: "flex-start",
+              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.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__ */(0, _jsxRuntime.jsxs)(_material.Box, {
                 children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                  component: "span",
-                  color: "text.secondary",
-                  fontSize: "0.8rem",
-                  children: t("payment.checkout.per")
-                }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                  component: "span",
-                  color: "text.secondary",
-                  fontSize: "0.8rem",
-                  children: (0, _util.formatRecurring)(x.price.recurring, false, "", locale)
+                  children: t("payment.checkout.include")
+                }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.List, {
+                  dense: true,
+                  children: x.product.features.map(f => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.ListItem, {
+                    disableGutters: true,
+                    disablePadding: true,
+                    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
+                      sx: {
+                        minWidth: 25
+                      },
+                      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.CheckOutlined, {
+                        color: "success",
+                        fontSize: "small"
+                      })
+                    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ListItemText, {
+                      primary: f.name
+                    })]
+                  }, f.name))
                 })]
               })]
-            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.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__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                children: t("payment.checkout.include")
-              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.List, {
-                dense: true,
-                children: x.product.features.map(f => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.ListItem, {
-                  disableGutters: true,
-                  disablePadding: true,
-                  children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
-                    sx: {
-                      minWidth: 25
-                    },
-                    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.CheckOutlined, {
-                      color: "success",
-                      fontSize: "small"
-                    })
-                  }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ListItemText, {
-                    primary: f.name
-                  })]
-                }, f.name))
-              })]
-            })]
-          })
-        }, x.price_id);
-      })
-    })]
+            })
+          }, x.price_id);
+        })
+      })]
+    })
   });
 }

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

@@ -7,6 +7,7 @@ var _exportNames = {
   api: true,
   CheckoutForm: true,
   CheckoutTable: true,
+  ConfirmDialog: true,
   FormInput: true,
   Livemode: true,
   PricingTable: true,
@@ -17,6 +18,8 @@ var _exportNames = {
   PhoneInput: true,
   Payment: true,
   ProductSkeleton: true,
+  CustomerInvoiceList: true,
+  CustomerPaymentList: true,
   translations: true,
   createTranslator: true
 };
@@ -38,6 +41,24 @@ Object.defineProperty(exports, "CheckoutTable", {
     return _table.default;
   }
 });
+Object.defineProperty(exports, "ConfirmDialog", {
+  enumerable: true,
+  get: function () {
+    return _confirm.default;
+  }
+});
+Object.defineProperty(exports, "CustomerInvoiceList", {
+  enumerable: true,
+  get: function () {
+    return _list.default;
+  }
+});
+Object.defineProperty(exports, "CustomerPaymentList", {
+  enumerable: true,
+  get: function () {
+    return _list2.default;
+  }
+});
 Object.defineProperty(exports, "FormInput", {
   enumerable: true,
   get: function () {
@@ -113,6 +134,7 @@ Object.defineProperty(exports, "translations", {
 var _api = _interopRequireDefault(require("./api"));
 var _form = _interopRequireDefault(require("./checkout/form"));
 var _table = _interopRequireDefault(require("./checkout/table"));
+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"));
@@ -123,6 +145,8 @@ var _amount = _interopRequireDefault(require("./payment/amount"));
 var _phone = _interopRequireDefault(require("./payment/form/phone"));
 var _index = _interopRequireDefault(require("./payment/index"));
 var _productSkeleton = _interopRequireDefault(require("./payment/product-skeleton"));
+var _list = _interopRequireDefault(require("./portal/invoice/list"));
+var _list2 = _interopRequireDefault(require("./portal/payment/list"));
 var _util = require("./util");
 Object.keys(_util).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/locales/en.js

@@ -153,6 +153,7 @@ module.exports = (0, _flat.default)({
       }
     },
     customer: {
+      payments: "Payment History",
       invoices: "Invoice History",
       details: "Billing Details",
       update: "Update Information",
@@ -208,7 +209,10 @@ module.exports = (0, _flat.default)({
         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/lib/locales/zh.js

@@ -153,6 +153,7 @@ module.exports = (0, _flat.default)({
       }
     },
     customer: {
+      payments: "\u652F\u4ED8\u5386\u53F2",
       invoices: "\u53D1\u7968\u5386\u53F2",
       details: "\u8BA1\u8D39\u8BE6\u60C5",
       update: "\u66F4\u65B0\u5BA2\u6237\u4FE1\u606F",
@@ -208,6 +209,9 @@ module.exports = (0, _flat.default)({
         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/lib/payment/index.js

@@ -363,18 +363,18 @@ const Root = exports.Root = (0, _system.styled)(_material.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/lib/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/lib/portal/invoice/list.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = CustomerInvoiceList;
+var _jsxRuntime = require("react/jsx-runtime");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _material = require("@mui/material");
+var _util = require("@ocap/util");
+var _ahooks = require("ahooks");
+var _api = _interopRequireDefault(require("../../api"));
+var _status = _interopRequireDefault(require("../../components/status"));
+var _util2 = require("../../util");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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.default.get(`/api/invoices?${search.toString()}`).then(res => res.data);
+};
+const pageSize = 10;
+function CustomerInvoiceList({
+  customer_id
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    data,
+    loadMore,
+    loadingMore,
+    loading
+  } = (0, _ahooks.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__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {});
+  }
+  if (data && data.list.length === 0) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+    direction: "column",
+    gap: 1,
+    sx: {
+      mt: 1
+    },
+    children: [Object.entries(grouped).map(([date, invoices]) => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          fontWeight: "bold",
+          color: "text.secondary",
+          mt: 2,
+          mb: 1
+        },
+        children: date
+      }), invoices.map(invoice => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: {
+          xs: "column",
+          sm: "row"
+        },
+        sx: {
+          my: 1
+        },
+        gap: {
+          xs: 0.5,
+          sm: 1.5,
+          md: 3
+        },
+        flexWrap: "nowrap",
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          flex: 3,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
+            href: `/customer/invoice/${invoice.id}`,
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              component: "span",
+              children: invoice.number
+            })
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          flex: 3,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            children: (0, _util2.formatToDate)(invoice.created_at)
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          flex: 2,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            textAlign: "right",
+            children: [(0, _util.fromUnitToToken)(invoice.total, invoice.paymentCurrency.decimal), "\xA0", invoice.paymentCurrency.symbol]
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          flex: 2,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+            label: invoice.status,
+            color: (0, _util2.getInvoiceStatusColor)(invoice.status)
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          flex: 4,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            children: invoice.description || invoice.id
+          })
+        })]
+      }, invoice.id))]
+    }, date)), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      children: [hasMore && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        color: "text.secondary",
+        children: t("common.noMore", {
+          resource: t("payment.customer.invoices")
+        })
+      })]
+    })]
+  });
+}

package/lib/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 {};