@blocklet/payment-react 1.18.56 → 1.19.1

package/es/checkout/donate.d.ts

@@ -50,18 +50,4 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     children?: (openDialog: () => void, donateTotalAmount: string, supporters: DonateHistory, loading?: boolean, donateSettings?: DonationSettings) => React.ReactNode;
 };
 export declare function DonateDetails({ supporters, currency, method }: DonateHistory): import("react").JSX.Element;
-declare function CheckoutDonate(props: DonateProps): import("react").JSX.Element;
-declare namespace CheckoutDonate {
-    var defaultProps: {
-        theme: string;
-        livemode: undefined;
-        timeout: number;
-        mode: string;
-        inlineOptions: {
-            button: {
-                text: string;
-            };
-        };
-    };
-}
-export default CheckoutDonate;
+export default function CheckoutDonate(rawProps: DonateProps): import("react").JSX.Element;

package/es/checkout/donate.js

@@ -102,9 +102,9 @@ export function DonateDetails({ supporters = [], currency, method }) {
               Stack,
               {
                 direction: "row",
-                alignItems: "center",
                 spacing: 0.5,
                 sx: {
+                  alignItems: "center",
                   flex: 3,
                   overflow: "hidden"
                 },
@@ -154,20 +154,32 @@ export function DonateDetails({ supporters = [], currency, method }) {
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", spacing: 0.5, sx: { flex: 1 }, children: [
-              /* @__PURE__ */ jsx(
-                Avatar,
-                {
-                  src: currency?.logo,
-                  alt: currency?.symbol,
-                  variant: "circular",
-                  sx: { width: 16, height: 16 }
+            /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                direction: "row",
+                spacing: 0.5,
+                sx: {
+                  alignItems: "center",
+                  justifyContent: "flex-end",
+                  flex: 1
                 },
-                x.id
-              ),
-              /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: formatBNStr(x.amount_total, currency.decimal) }),
-              /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: currency.symbol })
-            ] })
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Avatar,
+                    {
+                      src: currency?.logo,
+                      alt: currency?.symbol,
+                      variant: "circular",
+                      sx: { width: 16, height: 16 }
+                    },
+                    x.id
+                  ),
+                  /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: formatBNStr(x.amount_total, currency.decimal) }),
+                  /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: currency.symbol })
+                ]
+              }
+            )
           ]
         },
         x.id
@@ -185,97 +197,116 @@ function SupporterAvatar({
   const [open, setOpen] = useState(false);
   const customers = uniqBy(supporters, "customer_id");
   const customersNum = customers.length;
-  if (customersNum === 0)
-    return null;
-  return /* @__PURE__ */ jsxs(Stack, { flexDirection: "row", justifyContent: "center", alignItems: "center", children: [
-    /* @__PURE__ */ jsx(
-      AvatarGroup,
-      {
-        max: 5,
-        sx: {
-          "& .MuiAvatar-root": {
-            backgroundColor: "background.paper",
-            "&.MuiAvatar-colorDefault": {
-              backgroundColor: "#bdbdbd"
-            }
+  if (customersNum === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      sx: {
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          AvatarGroup,
+          {
+            max: 5,
+            sx: {
+              "& .MuiAvatar-root": {
+                backgroundColor: "background.paper",
+                "&.MuiAvatar-colorDefault": {
+                  backgroundColor: "#bdbdbd"
+                }
+              }
+            },
+            children: customers.slice(0, 5).map((supporter) => /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                src: getCustomerAvatar(
+                  supporter.customer?.did,
+                  supporter?.updated_at ? new Date(supporter.updated_at).toISOString() : "",
+                  24
+                ),
+                alt: supporter.customer?.metadata?.anonymous ? "" : supporter.customer?.name,
+                sx: {
+                  width: "24px",
+                  height: "24px"
+                }
+              },
+              supporter.customer?.id
+            ))
           }
-        },
-        children: customers.slice(0, 5).map((supporter) => /* @__PURE__ */ jsx(
-          Avatar,
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
           {
-            src: getCustomerAvatar(
-              supporter.customer?.did,
-              supporter?.updated_at ? new Date(supporter.updated_at).toISOString() : "",
-              24
-            ),
-            alt: supporter.customer?.metadata?.anonymous ? "" : supporter.customer?.name,
             sx: {
-              width: "24px",
-              height: "24px"
-            }
-          },
-          supporter.customer?.id
-        ))
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        sx: {
-          fontSize: "14px",
-          color: "text.secondary",
-          pl: 1.5,
-          pr: 1,
-          ml: -1,
-          borderRadius: "8px",
-          backgroundColor: "grey.100",
-          height: "24px",
-          ...showDonateDetails ? {
-            cursor: "pointer",
-            "&:hover": {
-              backgroundColor: "grey.200"
-            }
-          } : {}
-        },
-        onClick: () => showDonateDetails && setOpen(true),
-        children: `${customersNum} supporter${customersNum > 1 ? "s" : ""} (${formatAmount(totalAmount || "0", currency?.decimal)} ${currency.symbol})`
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Dialog,
-      {
-        open,
-        onClose: () => setOpen(false),
-        sx: {
-          ".MuiDialogContent-root": {
-            width: {
-              xs: "100%",
-              md: "450px"
+              fontSize: "14px",
+              color: "text.secondary",
+              pl: 1.5,
+              pr: 1,
+              ml: -1,
+              borderRadius: "8px",
+              backgroundColor: "grey.100",
+              height: "24px",
+              ...showDonateDetails ? {
+                cursor: "pointer",
+                "&:hover": {
+                  backgroundColor: "grey.200"
+                }
+              } : {}
             },
-            padding: "8px"
-          },
-          ".cko-donate-details": {
-            maxHeight: {
-              xs: "100%",
-              md: "300px"
-            }
+            onClick: () => showDonateDetails && setOpen(true),
+            children: `${customersNum} supporter${customersNum > 1 ? "s" : ""} (${formatAmount(totalAmount || "0", currency?.decimal)} ${currency.symbol})`
           }
-        },
-        title: `${customersNum} supporter${customersNum > 1 ? "s" : ""}`,
-        children: /* @__PURE__ */ jsx(DonateDetails, { supporters, currency, method, totalAmount })
-      }
-    )
-  ] });
+        ),
+        /* @__PURE__ */ jsx(
+          Dialog,
+          {
+            open,
+            onClose: () => setOpen(false),
+            sx: {
+              ".MuiDialogContent-root": {
+                width: {
+                  xs: "100%",
+                  md: "450px"
+                },
+                padding: "8px"
+              },
+              ".cko-donate-details": {
+                maxHeight: {
+                  xs: "100%",
+                  md: "300px"
+                }
+              }
+            },
+            title: `${customersNum} supporter${customersNum > 1 ? "s" : ""}`,
+            children: /* @__PURE__ */ jsx(DonateDetails, { supporters, currency, method, totalAmount })
+          }
+        )
+      ]
+    }
+  );
 }
 function SupporterTable({ supporters = [], totalAmount = "0", currency, method }) {
   const customers = uniqBy(supporters, "customer_id");
   const customersNum = customers.length;
-  if (customersNum === 0)
-    return null;
-  return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: { xs: 0.5, sm: 1 }, children: [
-    /* @__PURE__ */ jsx(SupporterAvatar, { supporters, totalAmount, currency, method }),
-    /* @__PURE__ */ jsx(DonateDetails, { supporters, totalAmount, currency, method })
-  ] });
+  if (customersNum === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: { xs: 0.5, sm: 1 }
+      },
+      children: [
+        /* @__PURE__ */ jsx(SupporterAvatar, { supporters, totalAmount, currency, method }),
+        /* @__PURE__ */ jsx(DonateDetails, { supporters, totalAmount, currency, method })
+      ]
+    }
+  );
 }
 function SupporterSimple({ supporters = [], totalAmount = "0", currency, method }) {
   const { t } = useLocaleContext();
@@ -284,19 +315,30 @@ function SupporterSimple({ supporters = [], totalAmount = "0", currency, method
   return /* @__PURE__ */ jsxs(
     Box,
     {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      gap: {
-        xs: 0.5,
-        sm: 1
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: {
+          xs: 0.5,
+          sm: 1
+        }
       },
       children: [
-        /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: customersNum === 0 ? /* @__PURE__ */ jsx("span", { style: emojiFont, children: t("payment.checkout.donation.empty") }) : t("payment.checkout.donation.summary", {
-          total: customersNum,
-          symbol: currency.symbol,
-          totalAmount: formatAmount(totalAmount || "0", currency.decimal)
-        }) }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            component: "p",
+            sx: {
+              color: "text.secondary"
+            },
+            children: customersNum === 0 ? /* @__PURE__ */ jsx("span", { style: emojiFont, children: t("payment.checkout.donation.empty") }) : t("payment.checkout.donation.summary", {
+              total: customersNum,
+              symbol: currency.symbol,
+              totalAmount: formatAmount(totalAmount || "0", currency.decimal)
+            })
+          }
+        ),
         /* @__PURE__ */ jsx(
           AvatarGroup,
           {
@@ -371,11 +413,9 @@ function useDonation(settings, livemode, mode = "default") {
   );
   const rootMargin = isMobile ? "50px" : `${Math.min(window.innerHeight / 2, 300)}px`;
   useEffect(() => {
-    if (mode === "inline")
-      return;
+    if (mode === "inline") return;
     const element = containerRef.current;
-    if (!element)
-      return;
+    if (!element) return;
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting && !hasRequestedRef.current) {
@@ -463,10 +503,20 @@ function CheckoutDonateInner({
         variant: donateSettings.appearance?.button?.variant || "contained",
         ...donateSettings.appearance?.button,
         onClick: handlePopoverOpen,
-        children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-          donateSettings.appearance.button.icon,
-          typeof donateSettings.appearance.button.text === "string" ? /* @__PURE__ */ jsx(Typography, { sx: { whiteSpace: "nowrap" }, children: donateSettings.appearance.button.text }) : donateSettings.appearance.button.text
-        ] })
+        children: /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: "row",
+            spacing: 0.5,
+            sx: {
+              alignItems: "center"
+            },
+            children: [
+              donateSettings.appearance.button.icon,
+              typeof donateSettings.appearance.button.text === "string" ? /* @__PURE__ */ jsx(Typography, { sx: { whiteSpace: "nowrap" }, children: donateSettings.appearance.button.text }) : donateSettings.appearance.button.text
+            ]
+          }
+        )
       }
     ),
     /* @__PURE__ */ jsx(
@@ -510,13 +560,34 @@ function CheckoutDonateInner({
                   children: /* @__PURE__ */ jsx(CircularProgress, {})
                 }
               ),
-              /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", flexDirection: "column", gap: 2, children: [
-                /* @__PURE__ */ jsx(Button, { ...inlineOptions.button, onClick: () => startDonate(), children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-                  inlineOptions?.button?.icon,
-                  typeof inlineText === "string" ? /* @__PURE__ */ jsx(Typography, { sx: { whiteSpace: "nowrap" }, children: inlineText }) : inlineText
-                ] }) }),
-                /* @__PURE__ */ jsx(SupporterSimple, { ...supporters.data })
-              ] })
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    flexDirection: "column",
+                    gap: 2
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Button, { ...inlineOptions.button, onClick: () => startDonate(), children: /* @__PURE__ */ jsxs(
+                      Stack,
+                      {
+                        direction: "row",
+                        spacing: 0.5,
+                        sx: {
+                          alignItems: "center"
+                        },
+                        children: [
+                          inlineOptions?.button?.icon,
+                          typeof inlineText === "string" ? /* @__PURE__ */ jsx(Typography, { sx: { whiteSpace: "nowrap" }, children: inlineText }) : inlineText
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(SupporterSimple, { ...supporters.data })
+                  ]
+                }
+              )
             ]
           }
         )
@@ -526,11 +597,15 @@ function CheckoutDonateInner({
   const defaultRender = /* @__PURE__ */ jsxs(
     Box,
     {
-      sx: { width: "100%", minWidth: 300, maxWidth: 720 },
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      gap: { xs: 1, sm: 2 },
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: { xs: 1, sm: 2 },
+        width: "100%",
+        minWidth: 300,
+        maxWidth: 720
+      },
       children: [
         /* @__PURE__ */ jsx(
           Button,
@@ -548,10 +623,20 @@ function CheckoutDonateInner({
             },
             ...donateSettings.appearance?.button,
             onClick: () => startDonate(),
-            children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-              donateSettings.appearance.button.icon && /* @__PURE__ */ jsx(Typography, { sx: { mr: 0.5, display: "inline-flex", alignItems: "center" }, children: donateSettings.appearance.button.icon }),
-              typeof donateSettings.appearance.button.text === "string" ? /* @__PURE__ */ jsx(Typography, { children: donateSettings.appearance.button.text }) : donateSettings.appearance.button.text
-            ] })
+            children: /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                direction: "row",
+                spacing: 0.5,
+                sx: {
+                  alignItems: "center"
+                },
+                children: [
+                  donateSettings.appearance.button.icon && /* @__PURE__ */ jsx(Typography, { sx: { mr: 0.5, display: "inline-flex", alignItems: "center" }, children: donateSettings.appearance.button.icon }),
+                  typeof donateSettings.appearance.button.text === "string" ? /* @__PURE__ */ jsx(Typography, { children: donateSettings.appearance.button.text }) : donateSettings.appearance.button.text
+                ]
+              }
+            )
           }
         ),
         supporters.data && donateSettings.appearance.history.variant === "avatar" && /* @__PURE__ */ jsx(SupporterAvatar, { ...supporters.data, showDonateDetails: true }),
@@ -588,53 +673,74 @@ function CheckoutDonateInner({
       Dialog,
       {
         open: state.open,
-        title: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 0.5, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "h3", sx: { maxWidth: 320, textOverflow: "ellipsis", overflow: "hidden" }, children: donateSettings.title }),
-          supportUpdateSettings && isAdmin && /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.donation.configTip"), placement: "bottom", children: /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "small",
-              onClick: (e) => {
-                e.stopPropagation();
-                openDonationSettings(true);
-              },
-              children: /* @__PURE__ */ jsx(Settings, { fontSize: "small", sx: { ml: -0.5 } })
-            }
-          ) }),
-          !donation.data.livemode && /* @__PURE__ */ jsx(Livemode, { sx: { width: "fit-content", ml: 0.5 } })
-        ] }),
-        maxWidth: "md",
-        toolbar: isMobile ? null : /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 1, sx: { color: "text.secondary" }, children: [
-          /* @__PURE__ */ jsx(
-            AvatarGroup,
-            {
-              total: customers?.length,
-              max: 5,
-              spacing: 4,
-              sx: {
-                "& .MuiAvatar-root": {
-                  width: 18,
-                  height: 18,
-                  fontSize: "0.6rem"
+        title: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5
+            },
+            children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "h3", sx: { maxWidth: 320, textOverflow: "ellipsis", overflow: "hidden" }, children: donateSettings.title }),
+              supportUpdateSettings && isAdmin && /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.donation.configTip"), placement: "bottom", children: /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "small",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    openDonationSettings(true);
+                  },
+                  children: /* @__PURE__ */ jsx(Settings, { fontSize: "small", sx: { ml: -0.5 } })
                 }
-              },
-              children: customers.map((x) => /* @__PURE__ */ jsx(
-                Avatar,
+              ) }),
+              !donation.data.livemode && /* @__PURE__ */ jsx(Livemode, { sx: { width: "fit-content", ml: 0.5 } })
+            ]
+          }
+        ),
+        maxWidth: "md",
+        toolbar: isMobile ? null : /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              color: "text.secondary"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                AvatarGroup,
                 {
-                  title: x.customer?.name,
-                  src: getCustomerAvatar(
-                    x.customer?.did,
-                    x?.updated_at ? new Date(x.updated_at).toISOString() : "",
-                    24
-                  ),
-                  variant: "circular"
-                },
-                x.id
-              ))
-            }
-          ),
-          customers?.length > 0 && /* @__PURE__ */ jsx(Typography, { variant: "body2", children: t("payment.checkout.donation.gaveTips", { count: customers?.length }) })
-        ] }),
+                  total: customers?.length,
+                  max: 5,
+                  spacing: 4,
+                  sx: {
+                    "& .MuiAvatar-root": {
+                      width: 18,
+                      height: 18,
+                      fontSize: "0.6rem"
+                    }
+                  },
+                  children: customers.map((x) => /* @__PURE__ */ jsx(
+                    Avatar,
+                    {
+                      title: x.customer?.name,
+                      src: getCustomerAvatar(
+                        x.customer?.did,
+                        x?.updated_at ? new Date(x.updated_at).toISOString() : "",
+                        24
+                      ),
+                      variant: "circular"
+                    },
+                    x.id
+                  ))
+                }
+              ),
+              customers?.length > 0 && /* @__PURE__ */ jsx(Typography, { variant: "body2", children: t("payment.checkout.donation.gaveTips", { count: customers?.length }) })
+            ]
+          }
+        ),
         showCloseButton: false,
         disableEscapeKeyDown: true,
         sx: {
@@ -689,9 +795,26 @@ function CheckoutDonateInner({
     )
   ] });
 }
-export default function CheckoutDonate(props) {
+export default function CheckoutDonate(rawProps) {
+  const props = Object.assign(
+    {
+      theme: "default",
+      livemode: void 0,
+      inlineOptions: {
+        button: {
+          text: "Tip"
+        }
+      },
+      timeout: 5e3,
+      mode: "default"
+    },
+    rawProps
+  );
   const { livemode } = usePaymentContext();
-  const content = /* @__PURE__ */ jsx(CheckoutDonateInner, { ...props, livemode: props.livemode === void 0 ? livemode : props.livemode });
+  const content = (
+    // eslint-disable-next-line react/prop-types
+    /* @__PURE__ */ jsx(CheckoutDonateInner, { ...props, livemode: props.livemode === void 0 ? livemode : props.livemode })
+  );
   if (props.theme === "inherit") {
     return content;
   }
@@ -700,14 +823,3 @@ export default function CheckoutDonate(props) {
   }
   return /* @__PURE__ */ jsx(PaymentThemeProvider, { children: content });
 }
-CheckoutDonate.defaultProps = {
-  theme: "default",
-  livemode: void 0,
-  timeout: 5e3,
-  mode: "default",
-  inlineOptions: {
-    button: {
-      text: "Tip"
-    }
-  }
-};

package/es/checkout/form.d.ts

@@ -1,16 +1,2 @@
 import type { CheckoutProps } from '../types';
-declare function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams, action, theme, formType, ...restProps }: CheckoutProps): import("react").JSX.Element;
-declare namespace CheckoutForm {
-    var defaultProps: {
-        onPaid: any;
-        onError: {
-            (...data: any[]): void;
-            (message?: any, ...optionalParams: any[]): void;
-        };
-        mode: string;
-        action: string;
-        extraParams: {};
-        formType: string;
-    };
-}
-export default CheckoutForm;
+export default function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams, action, theme, formType, ...restProps }: CheckoutProps): import("react").JSX.Element;

package/es/checkout/form.js

@@ -25,13 +25,13 @@ const fetchCheckoutSession = async (id) => {
 };
 export default function CheckoutForm({
   id,
-  mode,
-  onPaid,
-  onError,
+  mode = "inline",
+  onPaid = noop,
+  onError = console.error,
   onChange,
   goBack,
-  extraParams,
-  action,
+  extraParams = {},
+  action = "",
   theme = "default",
   formType = "payment",
   ...restProps
@@ -108,11 +108,3 @@ export default function CheckoutForm({
   }
   return /* @__PURE__ */ jsx(PaymentThemeProvider, { children: Checkout });
 }
-CheckoutForm.defaultProps = {
-  onPaid: noop,
-  onError: console.error,
-  mode: "inline",
-  action: "",
-  extraParams: {},
-  formType: "payment"
-};