@blocklet/payment-react 1.19.0 → 1.19.1

package/lib/history/credit/grants-list.js

@@ -0,0 +1,277 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StatusChip = StatusChip;
+module.exports = CreditGrantsList;
+var _jsxRuntime = require("react/jsx-runtime");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _material = require("@mui/material");
+var _ahooks = require("ahooks");
+var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _system = require("@mui/system");
+var _util = require("../../libs/util");
+var _payment = require("../../contexts/payment");
+var _api = _interopRequireDefault(require("../../libs/api"));
+var _table = _interopRequireDefault(require("../../components/table"));
+var _navigation = require("../../libs/navigation");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 && {}.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; }
+const fetchData = (params = {}) => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach(key => {
+    if (params[key]) {
+      search.set(key, String(params[key]));
+    }
+  });
+  return _api.default.get(`/api/credit-grants?${search.toString()}`).then(res => res.data);
+};
+function StatusChip({
+  status,
+  label
+}) {
+  const getStatusColor = statusValue => {
+    switch (statusValue) {
+      case "granted":
+        return "success";
+      case "pending":
+        return "warning";
+      case "expired":
+        return "default";
+      case "depleted":
+        return "default";
+      case "voided":
+        return "default";
+      default:
+        return "default";
+    }
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
+    label: label || status,
+    size: "small",
+    color: getStatusColor(status)
+  });
+}
+const getLink = (grant, inDashboard) => {
+  let path = `/customer/credit-grant/${grant.id}`;
+  if (inDashboard) {
+    path = `/admin/customers/${grant.id}`;
+  }
+  return {
+    link: (0, _navigation.createLink)(path),
+    connect: false
+  };
+};
+const GrantsTable = _react.default.memo(props => {
+  const {
+    pageSize,
+    status = "",
+    customer_id,
+    subscription_id,
+    onTableDataChange
+  } = props;
+  const listKey = "credit-grants-table";
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const {
+    session
+  } = (0, _payment.usePaymentContext)();
+  const navigate = (0, _reactRouterDom.useNavigate)();
+  const isAdmin = ["owner", "admin"].includes(session?.user?.role || "");
+  const inDashboard = props.mode === "dashboard" && isAdmin;
+  const effectiveCustomerId = customer_id || session?.user?.did;
+  const [search, setSearch] = (0, _react.useState)({
+    pageSize: pageSize || 10,
+    page: 1
+  });
+  const {
+    loading,
+    data = {
+      list: [],
+      count: 0
+    }
+  } = (0, _ahooks.useRequest)(() => fetchData({
+    ...search,
+    status,
+    customer_id: effectiveCustomerId,
+    subscription_id
+  }), {
+    refreshDeps: [search, status, effectiveCustomerId, subscription_id]
+  });
+  const prevData = (0, _react.useRef)(data);
+  const handleLinkClick = (e, grant) => {
+    const {
+      link
+    } = getLink(grant, inDashboard);
+    (0, _navigation.handleNavigation)(e, link, navigate, {
+      target: link.external ? "_blank" : "_self"
+    });
+  };
+  (0, _react.useEffect)(() => {
+    if (onTableDataChange) {
+      onTableDataChange(data, prevData.current);
+      prevData.current = data;
+    }
+  }, [data]);
+  const columns = [{
+    label: t("common.name"),
+    name: "name",
+    options: {
+      customBodyRenderLite: (_, index) => {
+        const grant = data?.list[index];
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          onClick: e => handleLinkClick(e, grant),
+          children: grant.name || grant.id
+        });
+      }
+    }
+  }, {
+    label: t("common.status"),
+    name: "status",
+    options: {
+      customBodyRenderLite: (_, index) => {
+        const grant = data?.list[index];
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          onClick: e => handleLinkClick(e, grant),
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(StatusChip, {
+            status: grant.status,
+            label: t(`admin.customer.creditGrants.status.${grant.status}`)
+          })
+        });
+      }
+    }
+  }, {
+    label: t("common.remainingCredit"),
+    name: "remaining_amount",
+    align: "right",
+    options: {
+      customBodyRenderLite: (_, index) => {
+        const grant = data?.list[index];
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          onClick: e => handleLinkClick(e, grant),
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            variant: "body2",
+            children: [(0, _util.formatBNStr)(grant.remaining_amount, grant.paymentCurrency.decimal), " ", grant.paymentCurrency.symbol]
+          })
+        });
+      }
+    }
+  }, {
+    label: t("common.scope"),
+    name: "scope",
+    options: {
+      customBodyRenderLite: (_, index) => {
+        const grant = data?.list[index];
+        let scope = "general";
+        if (grant.applicability_config?.scope?.prices) {
+          scope = "specific";
+        }
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          onClick: e => handleLinkClick(e, grant),
+          children: scope === "specific" ? t("common.specific") : t("common.general")
+        });
+      }
+    }
+  }, {
+    label: t("common.effectiveDate"),
+    name: "effective_at",
+    options: {
+      customBodyRenderLite: (_, index) => {
+        const grant = data?.list[index];
+        const effectiveAt = grant.effective_at ? grant.effective_at * 1e3 : grant.created_at;
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          onClick: e => handleLinkClick(e, grant),
+          children: (0, _util.formatToDate)(effectiveAt, locale, "YYYY-MM-DD HH:mm")
+        });
+      }
+    }
+  }, {
+    label: t("common.expirationDate"),
+    name: "expires_at",
+    options: {
+      customBodyRenderLite: (_, index) => {
+        const grant = data?.list[index];
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          onClick: e => handleLinkClick(e, grant),
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "body2",
+            children: grant.expires_at ? (0, _util.formatToDate)(grant.expires_at * 1e3, locale, "YYYY-MM-DD HH:mm") : "-"
+          })
+        });
+      }
+    }
+  }];
+  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)(TableRoot, {
+    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("admin.creditGrants.noGrants")
+    })
+  });
+});
+const TableRoot = (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;
+    }
+  }
+`;
+function CreditGrantsList(rawProps) {
+  const props = Object.assign({
+    customer_id: "",
+    subscription_id: "",
+    status: "granted,pending,depleted,expired",
+    pageSize: 10,
+    onTableDataChange: () => {}
+  }, rawProps);
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(GrantsTable, {
+    ...props
+  });
+}

package/lib/history/credit/transactions-list.d.ts

@@ -0,0 +1,13 @@
+type Props = {
+    customer_id?: string;
+    subscription_id?: string;
+    credit_grant_id?: string;
+    pageSize?: number;
+    onTableDataChange?: Function;
+    showAdminColumns?: boolean;
+    showTimeFilter?: boolean;
+    source?: string;
+    mode?: 'dashboard' | 'portal';
+};
+export default function CreditTransactionsList(rawProps: Props): JSX.Element;
+export {};

package/lib/history/credit/transactions-list.js

@@ -0,0 +1,301 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = CreditTransactionsList;
+var _jsxRuntime = require("react/jsx-runtime");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _material = require("@mui/material");
+var _ahooks = require("ahooks");
+var _reactRouterDom = require("react-router-dom");
+var _react = _interopRequireWildcard(require("react"));
+var _ufo = require("ufo");
+var _system = require("@mui/system");
+var _dateRangePicker = _interopRequireDefault(require("../../components/date-range-picker"));
+var _util = require("../../libs/util");
+var _payment = require("../../contexts/payment");
+var _api = _interopRequireDefault(require("../../libs/api"));
+var _table = _interopRequireDefault(require("../../components/table"));
+var _navigation = require("../../libs/navigation");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 && {}.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; }
+const fetchData = (params = {}) => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach(key => {
+    if (params[key]) {
+      search.set(key, String(params[key]));
+    }
+  });
+  return _api.default.get(`/api/credit-transactions?${search.toString()}`).then(res => res.data);
+};
+const getGrantDetailLink = (grantId, inDashboard) => {
+  let path = `/customer/credit-grant/${grantId}`;
+  if (inDashboard) {
+    path = `/admin/customers/${grantId}`;
+  }
+  return {
+    link: (0, _navigation.createLink)(path),
+    connect: false
+  };
+};
+const TransactionsTable = _react.default.memo(props => {
+  const {
+    pageSize,
+    customer_id,
+    subscription_id,
+    credit_grant_id,
+    onTableDataChange,
+    showAdminColumns = false,
+    showTimeFilter = false,
+    source,
+    mode = "portal"
+  } = props;
+  const listKey = "credit-transactions-table";
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const {
+    session
+  } = (0, _payment.usePaymentContext)();
+  const isAdmin = ["owner", "admin"].includes(session?.user?.role || "");
+  const navigate = (0, _reactRouterDom.useNavigate)();
+  const effectiveCustomerId = customer_id || session?.user?.did;
+  const [search, setSearch] = (0, _react.useState)({
+    pageSize: pageSize || 10,
+    page: 1
+  });
+  const [filters, setFilters] = (0, _react.useState)({
+    start: void 0,
+    end: void 0
+  });
+  const handleDateRangeChange = (0, _react.useCallback)(newValue => {
+    setFilters(newValue);
+    setSearch(prev => ({
+      ...prev,
+      page: 1,
+      start: newValue.start || void 0,
+      end: newValue.end || void 0
+    }));
+  }, []);
+  const {
+    loading,
+    data = {
+      list: [],
+      count: 0
+    }
+  } = (0, _ahooks.useRequest)(() => fetchData({
+    ...search,
+    customer_id: effectiveCustomerId,
+    subscription_id,
+    credit_grant_id,
+    source
+  }), {
+    refreshDeps: [search, effectiveCustomerId, subscription_id, credit_grant_id, source]
+  });
+  (0, _react.useEffect)(() => {
+    if (showTimeFilter && !search.start && !search.end) {
+      handleDateRangeChange(filters);
+    }
+  }, [showTimeFilter, handleDateRangeChange, search.start, search.end, filters]);
+  const prevData = (0, _react.useRef)(data);
+  (0, _react.useEffect)(() => {
+    if (onTableDataChange) {
+      onTableDataChange(data, prevData.current);
+      prevData.current = data;
+    }
+  }, [data]);
+  const columns = [{
+    label: t("common.creditAmount"),
+    name: "credit_amount",
+    align: "right",
+    width: 120,
+    options: {
+      customBodyRenderLite: (_, index) => {
+        const transaction = data?.list[index];
+        const unit = transaction.meter?.unit || transaction.paymentCurrency.symbol;
+        return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+          children: [(0, _util.formatBNStr)(transaction.credit_amount, transaction.paymentCurrency.decimal), " ", unit]
+        });
+      }
+    }
+  }, !credit_grant_id && {
+    label: t("common.creditGrant"),
+    name: "credit_grant",
+    options: {
+      customBodyRenderLite: (_, index) => {
+        const transaction = data?.list[index];
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+          direction: "row",
+          spacing: 1,
+          onClick: e => {
+            const link = getGrantDetailLink(transaction.credit_grant_id, isAdmin && mode === "dashboard");
+            (0, _navigation.handleNavigation)(e, link.link, navigate);
+          },
+          sx: {
+            alignItems: "center"
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "body2",
+            sx: {
+              color: "text.link",
+              cursor: "pointer"
+            },
+            children: transaction.creditGrant.name || `Grant ${transaction.credit_grant_id.slice(-6)}`
+          })
+        });
+      }
+    }
+  }, {
+    label: t("common.description"),
+    name: "subscription",
+    options: {
+      customBodyRenderLite: (_, index) => {
+        const transaction = data?.list[index];
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body2",
+          children: transaction.subscription?.description || transaction.description
+        });
+      }
+    }
+  }, ...(showAdminColumns && isAdmin ? [{
+    label: t("common.meterEvent"),
+    name: "meter_event",
+    options: {
+      customBodyRenderLite: (_, index) => {
+        const transaction = data?.list[index];
+        if (!transaction.meter) {
+          return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "body2",
+            children: "-"
+          });
+        }
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
+          href: (0, _ufo.joinURL)((0, _util.getPrefix)(), `/admin/billing/${transaction.meter.id}`),
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "body2",
+            sx: {
+              color: "text.link"
+            },
+            children: transaction.meter.event_name
+          })
+        });
+      }
+    }
+  }] : []), {
+    label: t("admin.creditTransactions.transactionDate"),
+    name: "created_at",
+    options: {
+      customBodyRenderLite: (_, index) => {
+        const transaction = data?.list[index];
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body2",
+          children: (0, _util.formatToDate)(transaction.created_at, locale, "YYYY-MM-DD HH:mm:ss")
+        });
+      }
+    }
+  }].filter(Boolean);
+  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.jsxs)(TableRoot, {
+    children: [showTimeFilter && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        my: 2
+      },
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          mt: 2
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grid, {
+          container: true,
+          spacing: 2,
+          sx: {
+            alignItems: "center"
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grid, {
+            size: {
+              xs: 12,
+              sm: 6,
+              md: 4
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_dateRangePicker.default, {
+              value: filters,
+              onChange: handleDateRangeChange,
+              size: "small",
+              fullWidth: true
+            })
+          })
+        })
+      })
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_table.default, {
+      hasRowLink: true,
+      durable: `__${listKey}__`,
+      durableKeys: ["page", "rowsPerPage"],
+      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("admin.creditTransactions.noTransactions")
+    })]
+  });
+});
+const TableRoot = (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;
+    }
+  }
+`;
+function CreditTransactionsList(rawProps) {
+  const props = Object.assign({
+    customer_id: "",
+    subscription_id: "",
+    credit_grant_id: "",
+    source: "",
+    pageSize: 10,
+    onTableDataChange: () => {},
+    showAdminColumns: false,
+    showTimeFilter: false,
+    mode: "portal"
+  }, rawProps);
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(TransactionsTable, {
+    ...props
+  });
+}

package/lib/history/invoice/list.js

@@ -168,6 +168,30 @@ const InvoiceTable = _react.default.memo(props => {
         });
       }
     }
+  }, {
+    label: t("common.paymentMethod"),
+    name: "paymentMethod",
+    options: {
+      customBodyRenderLite: (_, index) => {
+        const invoice = data?.list[index];
+        return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            whiteSpace: "nowrap"
+          },
+          onClick: e => handleLinkClick(e, invoice),
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+            src: invoice.paymentMethod.logo,
+            sx: {
+              width: 18,
+              height: 18,
+              mr: 1
+            }
+          }), invoice.paymentMethod.name]
+        });
+      }
+    }
   }, {
     label: t("common.type"),
     name: "billing_reason",

package/lib/index.d.ts

@@ -5,6 +5,7 @@ import TxGas from './components/blockchain/gas';
 import TxLink from './components/blockchain/tx';
 import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
+import FormLabel from './components/label';
 import Livemode from './components/livemode';
 import PricingTable from './components/pricing-table';
 import Table from './components/table';
@@ -13,6 +14,8 @@ import Status from './components/status';
 import Switch from './components/switch-button';
 import CustomerInvoiceList from './history/invoice/list';
 import CustomerPaymentList from './history/payment/list';
+import CreditGrantsList, { StatusChip as CreditStatusChip } from './history/credit/grants-list';
+import CreditTransactionsList from './history/credit/transactions-list';
 import api from './libs/api';
 import dayjs from './libs/dayjs';
 import Amount from './payment/amount';
@@ -32,6 +35,7 @@ import OverdueInvoicePayment from './components/over-due-invoice-payment';
 import PaymentBeneficiaries from './components/payment-beneficiaries';
 import LoadingButton from './components/loading-button';
 import ResumeSubscription from './components/resume-subscription';
+import DateRangePicker from './components/date-range-picker';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
@@ -46,4 +50,4 @@ export * from './hooks/scroll';
 export * from './hooks/keyboard';
 export * from './libs/validator';
 export { translations, createTranslator } from './locales';
-export { createLazyComponent, 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, TruncatedText, Link, OverdueInvoicePayment, PaymentBeneficiaries, LoadingButton, DonateDetails, ResumeSubscription, };
+export { createLazyComponent, api, dayjs, FormInput, FormLabel, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, PaymentBeneficiaries, LoadingButton, DonateDetails, ResumeSubscription, CreditGrantsList, CreditTransactionsList, DateRangePicker, CreditStatusChip, };