@blocklet/payment-react 1.18.56 → 1.19.0

package/es/history/invoice/list.js

@@ -367,9 +367,27 @@ const InvoiceList = React.memo((props) => {
   }
   if (data && data.list.length === 0) {
     if (data.subscription && ["active", "trialing"].includes(data.subscription.status)) {
-      return /* @__PURE__ */ jsx(Typography, { color: "text.secondary", sx: { my: 0.5 }, children: t("payment.customer.invoice.next", { date: formatToDatetime(data.subscription.current_period_end * 1e3) }) });
+      return /* @__PURE__ */ jsx(
+        Typography,
+        {
+          sx: {
+            color: "text.secondary",
+            my: 0.5
+          },
+          children: t("payment.customer.invoice.next", { date: formatToDatetime(data.subscription.current_period_end * 1e3) })
+        }
+      );
     }
-    return /* @__PURE__ */ jsx(Typography, { color: "text.secondary", sx: { my: 0.5 }, children: t("payment.customer.invoice.empty") });
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        sx: {
+          color: "text.secondary",
+          my: 0.5
+        },
+        children: t("payment.customer.invoice.empty")
+      }
+    );
   }
   const hasMore = data && data.list.length < data.count;
   const grouped = groupByDate(data.list);
@@ -386,75 +404,124 @@ const InvoiceList = React.memo((props) => {
           Stack,
           {
             direction: "row",
-            sx: { my: 1 },
-            gap: {
-              xs: 0.5,
-              sm: 1.5,
-              md: 3
+            sx: {
+              gap: {
+                xs: 0.5,
+                sm: 1.5,
+                md: 3
+              },
+              alignItems: "center",
+              flexWrap: "nowrap",
+              my: 1
             },
-            alignItems: "center",
-            flexWrap: "nowrap",
             children: [
-              /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsx(
-                "a",
+              /* @__PURE__ */ jsx(
+                Box,
                 {
-                  href: link.url,
-                  target: link.external ? "_blank" : target,
-                  rel: "noreferrer",
-                  onClick: (e) => handleLinkClick(e, link),
-                  children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-                    /* @__PURE__ */ jsx(Typography, { component: "span", children: invoice.number }),
-                    link.external && /* @__PURE__ */ jsx(
-                      OpenInNewOutlined,
-                      {
-                        fontSize: "small",
-                        sx: {
-                          color: "text.secondary",
-                          display: { xs: "none", md: "inline-flex" }
+                  sx: {
+                    flex: 2
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: link.url,
+                      target: link.external ? "_blank" : target,
+                      rel: "noreferrer",
+                      onClick: (e) => handleLinkClick(e, link),
+                      children: /* @__PURE__ */ jsxs(
+                        Stack,
+                        {
+                          direction: "row",
+                          spacing: 0.5,
+                          sx: {
+                            alignItems: "center"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(Typography, { component: "span", children: invoice.number }),
+                            link.external && /* @__PURE__ */ jsx(
+                              OpenInNewOutlined,
+                              {
+                                fontSize: "small",
+                                sx: {
+                                  color: "text.secondary",
+                                  display: { xs: "none", md: "inline-flex" }
+                                }
+                              }
+                            )
+                          ]
                         }
-                      }
-                    )
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    flex: 1,
+                    textAlign: "right"
+                  },
+                  children: /* @__PURE__ */ jsxs(Typography, { sx: isVoid ? { textDecoration: "line-through" } : {}, children: [
+                    formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
+                    "\xA0",
+                    invoice.paymentCurrency.symbol
                   ] })
                 }
-              ) }),
-              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsxs(Typography, { sx: isVoid ? { textDecoration: "line-through" } : {}, children: [
-                formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
-                "\xA0",
-                invoice.paymentCurrency.symbol
-              ] }) }),
-              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(invoice.created_at, locale, "HH:mm:ss") }) }),
+              ),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    flex: 1,
+                    textAlign: "right"
+                  },
+                  children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(invoice.created_at, locale, "HH:mm:ss") })
+                }
+              ),
               !action && /* @__PURE__ */ jsx(
                 Box,
                 {
-                  flex: 2,
                   className: "invoice-description",
-                  textAlign: "right",
-                  sx: { display: { xs: "none", lg: "inline-flex" } },
+                  sx: {
+                    flex: 2,
+                    textAlign: "right",
+                    display: { xs: "none", lg: "inline-flex" }
+                  },
                   children: /* @__PURE__ */ jsx(Typography, { children: invoice.description || invoice.id })
                 }
               ),
-              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: action ? connect ? /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "contained",
-                  color: "primary",
-                  size: "small",
-                  onClick: () => onPay(invoice.id),
-                  sx: { whiteSpace: "nowrap" },
-                  children: t("payment.customer.invoice.pay")
-                }
-              ) : /* @__PURE__ */ jsx(
-                Button,
+              /* @__PURE__ */ jsx(
+                Box,
                 {
-                  component: "a",
-                  variant: "contained",
-                  size: "small",
-                  onClick: (e) => handleLinkClick(e, link),
-                  sx: { whiteSpace: "nowrap" },
-                  rel: "noreferrer",
-                  children: t("payment.customer.invoice.pay")
+                  sx: {
+                    flex: 1,
+                    textAlign: "right"
+                  },
+                  children: action ? connect ? /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "contained",
+                      color: "primary",
+                      size: "small",
+                      onClick: () => onPay(invoice.id),
+                      sx: { whiteSpace: "nowrap" },
+                      children: t("payment.customer.invoice.pay")
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      component: "a",
+                      variant: "contained",
+                      size: "small",
+                      onClick: (e) => handleLinkClick(e, link),
+                      sx: { whiteSpace: "nowrap" },
+                      rel: "noreferrer",
+                      children: t("payment.customer.invoice.pay")
+                    }
+                  ) : isVoid ? /* @__PURE__ */ jsx(Tooltip, { title: t("payment.customer.invoice.noPaymentRequired"), arrow: true, placement: "top", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) }) }) : /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) })
                 }
-              ) : isVoid ? /* @__PURE__ */ jsx(Tooltip, { title: t("payment.customer.invoice.noPaymentRequired"), arrow: true, placement: "top", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) }) }) : /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) })
+              )
             ]
           },
           invoice.id
@@ -463,11 +530,37 @@ const InvoiceList = React.memo((props) => {
     ] }, 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("payment.customer.invoices") }) }),
-      !hasMore && data.count > size && /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("common.noMore", { resource: t("payment.customer.invoices") }) })
+      !hasMore && data.count > size && /* @__PURE__ */ jsx(
+        Typography,
+        {
+          sx: {
+            color: "text.secondary"
+          },
+          children: t("common.noMore", { resource: t("payment.customer.invoices") })
+        }
+      )
     ] })
   ] });
 });
-export default function CustomerInvoiceList(props) {
+export default function CustomerInvoiceList(rawProps) {
+  const props = Object.assign(
+    {
+      customer_id: "",
+      subscription_id: "",
+      currency_id: "",
+      include_staking: false,
+      include_recovered_from: false,
+      status: "open,paid,uncollectible",
+      pageSize: 10,
+      target: "_self",
+      action: "",
+      type: "list",
+      onTableDataChange: () => {
+      },
+      relatedSubscription: false
+    },
+    rawProps
+  );
   const { action, type } = props;
   const { t, locale } = useLocaleContext();
   const { connect } = usePaymentContext();
@@ -509,21 +602,6 @@ export default function CustomerInvoiceList(props) {
   }
   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: "",
-  type: "list",
-  onTableDataChange: () => {
-  },
-  relatedSubscription: false
-};
 const Root = styled(Stack)`
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
     svg.MuiSvgIcon-root {

package/es/history/payment/list.js

@@ -40,45 +40,122 @@ export default function CustomerPaymentList({ customer_id }) {
     return /* @__PURE__ */ jsx(CircularProgress, {});
   }
   if (data && data.list.length === 0) {
-    return /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("payment.customer.payment.empty") });
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        sx: {
+          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, children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(item.created_at) }) }),
-            /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsxs(Typography, { textAlign: "right", children: [
-              formatBNStr(item.amount_received, 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: 3, children: /* @__PURE__ */ jsx(Typography, { children: item.description || "-" }) }),
-            /* @__PURE__ */ jsx(Box, { flex: 3, sx: { minWidth: "220px" }, children: (item.payment_details?.arcblock?.tx_hash || item.payment_details?.ethereum?.tx_hash || item.payment_details?.base?.tx_hash) && /* @__PURE__ */ jsx(TxLink, { details: item.payment_details, method: item.paymentMethod, mode: "customer" }) })
-          ]
-        },
-        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") }) })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "column",
+      sx: {
+        gap: 1,
+        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: {
+                gap: {
+                  xs: 0.5,
+                  sm: 1.5,
+                  md: 3
+                },
+                flexWrap: "nowrap",
+                my: 1
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      flex: 3
+                    },
+                    children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(item.created_at) })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      flex: 2
+                    },
+                    children: /* @__PURE__ */ jsxs(
+                      Typography,
+                      {
+                        sx: {
+                          textAlign: "right"
+                        },
+                        children: [
+                          formatBNStr(item.amount_received, item.paymentCurrency.decimal),
+                          "\xA0",
+                          item.paymentCurrency.symbol
+                        ]
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      flex: 3
+                    },
+                    children: /* @__PURE__ */ jsx(Status, { label: item.status, color: getPaymentIntentStatusColor(item.status) })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      flex: 3
+                    },
+                    children: /* @__PURE__ */ jsx(Typography, { children: item.description || "-" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      flex: 3,
+                      minWidth: "220px"
+                    },
+                    children: (item.payment_details?.arcblock?.tx_hash || item.payment_details?.ethereum?.tx_hash || item.payment_details?.base?.tx_hash) && /* @__PURE__ */ jsx(TxLink, { details: item.payment_details, method: item.paymentMethod, mode: "customer" })
+                  }
+                )
+              ]
+            },
+            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,
+            {
+              sx: {
+                color: "text.secondary"
+              },
+              children: t("common.noMore", { resource: t("payment.customer.payments") })
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }

package/es/hooks/keyboard.d.ts

@@ -13,7 +13,7 @@ type TabNavigationOptions<T> = {
     /** a selector to find navigable elements */
     selector?: string;
     /** an element container reference, limiting the query DOM range to improve performance */
-    containerRef?: RefObject<HTMLElement>;
+    containerRef?: RefObject<HTMLElement | null>;
     /** the type of the current value, can be 'index' or 'value' */
     valueType?: 'index' | 'value';
 };

package/es/hooks/keyboard.js

@@ -19,8 +19,7 @@ export const useTabNavigation = (items, onSelect, options) => {
   }, [containerRef, selector]);
   const determineCurrentIndex = useCallback(() => {
     const allOptions = includeCustom ? [...items, "custom"] : items;
-    if (allOptions.length === 0)
-      return -1;
+    if (allOptions.length === 0) return -1;
     if (!hasTabbed.current) {
       if (isCustomSelected && includeCustom) {
         return items.length;
@@ -60,8 +59,7 @@ export const useTabNavigation = (items, onSelect, options) => {
   );
   const handleKeyDown = useCallback(
     (e) => {
-      if (!enabled || e.key !== "Tab")
-        return;
+      if (!enabled || e.key !== "Tab") return;
       e.preventDefault();
       e.stopPropagation();
       const currentIndex = determineCurrentIndex();

package/es/libs/cached-request.js

@@ -27,8 +27,7 @@ export class CachedRequest {
   getCachedData() {
     const cache = this.getCache();
     const data = this.options.strategy === "memory" ? cache.get(this.cacheKey) : cache.getItem(this.cacheKey);
-    if (!data)
-      return null;
+    if (!data) return null;
     const parsed = JSON.parse(data);
     if (this.options.ttl && parsed.timestamp) {
       const isExpired = Date.now() - parsed.timestamp > this.options.ttl;
@@ -61,8 +60,7 @@ export class CachedRequest {
   }
   fetch(forceRefresh = false) {
     const cachedData = !forceRefresh && this.getCachedData();
-    if (cachedData)
-      return Promise.resolve(cachedData);
+    if (cachedData) return Promise.resolve(cachedData);
     const globalItem = globalCache.get(this.cacheKey);
     if (globalItem?.promise) {
       return globalItem.promise;

package/es/libs/phone-validator.js

@@ -14,8 +14,7 @@ export const getPhoneUtil = async () => {
   return phoneUtil;
 };
 export const validatePhoneNumber = async (phoneNumber) => {
-  if (!phoneNumber)
-    return true;
+  if (!phoneNumber) return true;
   try {
     let util = null;
     try {

package/es/libs/util.js

@@ -971,14 +971,12 @@ export function getUserProfileLink(userDid, locale = "en") {
   );
 }
 export function parseMarkedText(text) {
-  if (!text)
-    return [];
+  if (!text) return [];
   const parts = text.split(/(#([^#]*)#)/);
   const result = [];
   for (let i = 0; i < parts.length; i++) {
     const part = parts[i];
-    if (!part)
-      continue;
+    if (!part) continue;
     if (i % 3 === 0) {
       result.push({ type: "text", content: part });
     } else if (i % 3 === 1 && part.startsWith("#") && part.endsWith("#")) {

package/es/libs/validator.js

@@ -58,8 +58,7 @@ const POSTAL_CODE_SUPPORTED_COUNTRIES = [
   "ZM"
 ];
 export function validatePostalCode(postalCode, country) {
-  if (!postalCode)
-    return true;
+  if (!postalCode) return true;
   const countryUpper = country?.toUpperCase();
   const isSupported = country && POSTAL_CODE_SUPPORTED_COUNTRIES.includes(countryUpper);
   try {
@@ -70,8 +69,7 @@ export function validatePostalCode(postalCode, country) {
   }
 }
 export function getFieldValidation(fieldName, validations, locale = "en") {
-  if (!validations || !validations[fieldName])
-    return {};
+  if (!validations || !validations[fieldName]) return {};
   const fieldValidation = validations[fieldName];
   const rules = {};
   if (fieldValidation.pattern) {

package/es/payment/amount.d.ts

@@ -2,10 +2,5 @@ import type { TypographyProps } from '@mui/material';
 type Props = {
     amount: string;
 } & TypographyProps;
-declare function PaymentAmount({ amount, sx }: Props): import("react").JSX.Element;
-declare namespace PaymentAmount {
-    var defaultProps: {
-        sx: {};
-    };
-}
-export default PaymentAmount;
+export default function PaymentAmount({ amount, sx }: Props): import("react").JSX.Element;
+export {};

package/es/payment/amount.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Typography } from "@mui/material";
-export default function PaymentAmount({ amount, sx }) {
+export default function PaymentAmount({ amount, sx = {} }) {
   return /* @__PURE__ */ jsx(
     Typography,
     {
@@ -17,7 +17,3 @@ export default function PaymentAmount({ amount, sx }) {
     }
   );
 }
-PaymentAmount.defaultProps = {
-  // eslint-disable-next-line react/default-props-match-prop-types
-  sx: {}
-};

package/es/payment/donation-form.d.ts

@@ -8,17 +8,9 @@ type Props = CheckoutContext & CheckoutCallbacks & {
     formRender?: Record<string, any>;
     id: string;
 };
-declare function DonationForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, onChange, goBack, action, showCheckoutSummary, formRender, id, }: Props): import("react").JSX.Element;
-declare namespace DonationForm {
-    var defaultProps: {
-        completed: boolean;
-        error: null;
-        showCheckoutSummary: boolean;
-        formRender: {};
-    };
-}
-export default DonationForm;
+export default function DonationForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, onChange, goBack, action, showCheckoutSummary, formRender, id, }: Props): import("react").JSX.Element;
 type RootProps = {
     mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
 } & BoxProps;
 export declare const Root: React.FC<RootProps>;
+export {};