@blocklet/payment-react 1.18.56 → 1.19.0

package/es/payment/donation-form.js

@@ -34,24 +34,19 @@ const getBenefits = async (id, url) => {
   const { data } = await api.get(`/api/payment-links/${id}/benefits?${url ? `url=${url}` : ""}`);
   return data;
 };
-PaymentInner.defaultProps = {
-  completed: false,
-  showCheckoutSummary: true,
-  formRender: {}
-};
 function PaymentInner({
   checkoutSession,
   paymentMethods,
   paymentLink,
   paymentIntent,
   customer,
-  completed,
+  completed = false,
   mode,
   onPaid,
   onError,
   onChange,
   action,
-  formRender,
+  formRender = {},
   benefits
 }) {
   const { t } = useLocaleContext();
@@ -193,69 +188,92 @@ function PaymentInner({
           }
         }
       ),
-      /* @__PURE__ */ jsx(Stack, { direction: "row", justifyContent: "flex-end", alignItems: "center", flexWrap: "wrap", gap: 1, children: /* @__PURE__ */ jsx(
-        Button,
+      /* @__PURE__ */ jsx(
+        Stack,
         {
-          variant: "outlined",
-          size: "large",
-          onClick: formRender?.onCancel,
-          sx: { width: "fit-content", minWidth: 120 },
-          children: t("common.close")
+          direction: "row",
+          sx: {
+            justifyContent: "flex-end",
+            alignItems: "center",
+            flexWrap: "wrap",
+            gap: 1
+          },
+          children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outlined",
+              size: "large",
+              onClick: formRender?.onCancel,
+              sx: { width: "fit-content", minWidth: 120 },
+              children: t("common.close")
+            }
+          )
         }
-      ) })
+      )
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       benefitsState.open && /* @__PURE__ */ jsx(PaymentBeneficiaries, { data: benefits, currency, totalAmount: benefitsState.amount }),
       /* @__PURE__ */ jsxs(Stack, { sx: { display: benefitsState.open ? "none" : "block" }, children: [
-        /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 2 }, children: [
-          /* @__PURE__ */ jsx(
-            Typography,
-            {
-              title: t("payment.checkout.orderSummary"),
-              sx: {
-                color: "text.primary",
-                fontSize: "18px",
-                fontWeight: "500",
-                lineHeight: "24px"
-              },
-              children: t("payment.checkout.donation.tipAmount")
-            }
-          ),
-          !isMobile && donationSettings?.amount?.presets && donationSettings.amount.presets.length > 0 && /* @__PURE__ */ jsxs(
-            Typography,
-            {
-              sx: {
-                color: "text.secondary",
-                fontSize: "13px",
-                display: "flex",
-                alignItems: "center",
-                gap: 0.5,
-                opacity: 0.8
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  Box,
-                  {
-                    component: "span",
-                    sx: {
-                      border: "1px solid",
-                      borderColor: "divider",
-                      borderRadius: 0.75,
-                      px: 0.75,
-                      py: 0.25,
-                      fontSize: "12px",
-                      lineHeight: 1,
-                      color: "text.secondary",
-                      fontWeight: "400",
-                      bgcolor: "transparent"
-                    },
-                    children: "Tab"
-                  }
-                ),
-                t("payment.checkout.donation.tabHint")
-              ]
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: "row",
+            sx: {
+              justifyContent: "space-between",
+              alignItems: "center",
+              mb: 2
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  title: t("payment.checkout.orderSummary"),
+                  sx: {
+                    color: "text.primary",
+                    fontSize: "18px",
+                    fontWeight: "500",
+                    lineHeight: "24px"
+                  },
+                  children: t("payment.checkout.donation.tipAmount")
+                }
+              ),
+              !isMobile && donationSettings?.amount?.presets && donationSettings.amount.presets.length > 0 && /* @__PURE__ */ jsxs(
+                Typography,
+                {
+                  sx: {
+                    color: "text.secondary",
+                    fontSize: "13px",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0.5,
+                    opacity: 0.8
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        component: "span",
+                        sx: {
+                          border: "1px solid",
+                          borderColor: "divider",
+                          borderRadius: 0.75,
+                          px: 0.75,
+                          py: 0.25,
+                          fontSize: "12px",
+                          lineHeight: 1,
+                          color: "text.secondary",
+                          fontWeight: "400",
+                          bgcolor: "transparent"
+                        },
+                        children: "Tab"
+                      }
+                    ),
+                    t("payment.checkout.donation.tabHint")
+                  ]
+                }
+              )
+            ]
+          }
+        ),
         items.map((x) => /* @__PURE__ */ jsx(
           ProductDonation,
           {
@@ -282,91 +300,103 @@ function PaymentInner({
           }
         }
       ),
-      /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 1, children: [
-        benefits && benefits.length > 0 && (benefitsState.open ? /* @__PURE__ */ jsxs(
-          Typography,
-          {
-            onClick: () => setBenefitsState({ open: false }),
-            sx: {
-              cursor: "pointer",
-              color: "text.secondary",
-              "&:hover": {
-                color: "text.primary"
-              },
-              display: "flex",
-              alignItems: "center"
-            },
-            children: [
-              /* @__PURE__ */ jsx(ArrowBackOutlined, { className: "benefits-arrow", sx: { fontSize: "18px", mr: 0.5 } }),
-              t("common.back")
-            ]
-          }
-        ) : /* @__PURE__ */ jsxs(
-          Box,
-          {
-            display: "flex",
-            gap: 0.5,
+      /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "row",
+          sx: {
+            justifyContent: "space-between",
             alignItems: "center",
-            onClick: () => setBenefitsState({ open: true }),
-            sx: {
-              color: "text.secondary",
-              cursor: "pointer",
-              "& .benefits-arrow": {
-                opacity: 0,
-                transform: "translateX(-4px)",
-                transition: "all 0.2s"
-              },
-              "&:hover": {
-                color: "text.primary",
-                "& .benefits-arrow": {
-                  opacity: 1,
-                  transform: "translateX(0)"
-                }
+            flexWrap: "wrap",
+            gap: 1
+          },
+          children: [
+            benefits && benefits.length > 0 && (benefitsState.open ? /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                onClick: () => setBenefitsState({ open: false }),
+                sx: {
+                  cursor: "pointer",
+                  color: "text.secondary",
+                  "&:hover": {
+                    color: "text.primary"
+                  },
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(ArrowBackOutlined, { className: "benefits-arrow", sx: { fontSize: "18px", mr: 0.5 } }),
+                  t("common.back")
+                ]
               }
-            },
-            children: [
-              /* @__PURE__ */ jsx(HelpOutlineOutlined, { sx: { fontSize: "18px" } }),
-              /* @__PURE__ */ jsx(Typography, { variant: "body2", children: renderBenefits() }),
-              /* @__PURE__ */ jsx(ArrowForwardOutlined, { className: "benefits-arrow", sx: { fontSize: "18px" } })
-            ]
-          }
-        )),
-        benefitsState.open ? null : /* @__PURE__ */ jsxs(
-          Box,
-          {
-            display: "flex",
-            gap: 2,
-            sx: {
-              flex: {
-                xs: 1,
-                md: "auto"
-              },
-              justifyContent: "flex-end",
-              whiteSpace: "nowrap"
-            },
-            children: [
-              formRender?.cancel,
-              /* @__PURE__ */ jsx(
-                PaymentForm,
-                {
-                  currencyId,
-                  checkoutSession: state.checkoutSession,
-                  paymentMethods,
-                  paymentIntent,
-                  paymentLink,
-                  customer,
-                  onPaid: handlePaid,
-                  onError,
-                  mode,
-                  action,
-                  onlyShowBtn: true,
-                  isDonation: true
-                }
-              )
-            ]
-          }
-        )
-      ] })
+            ) : /* @__PURE__ */ jsxs(
+              Box,
+              {
+                onClick: () => setBenefitsState({ open: true }),
+                sx: {
+                  display: "flex",
+                  gap: 0.5,
+                  alignItems: "center",
+                  color: "text.secondary",
+                  cursor: "pointer",
+                  "& .benefits-arrow": {
+                    opacity: 0,
+                    transform: "translateX(-4px)",
+                    transition: "all 0.2s"
+                  },
+                  "&:hover": {
+                    color: "text.primary",
+                    "& .benefits-arrow": {
+                      opacity: 1,
+                      transform: "translateX(0)"
+                    }
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx(HelpOutlineOutlined, { sx: { fontSize: "18px" } }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "body2", children: renderBenefits() }),
+                  /* @__PURE__ */ jsx(ArrowForwardOutlined, { className: "benefits-arrow", sx: { fontSize: "18px" } })
+                ]
+              }
+            )),
+            benefitsState.open ? null : /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  gap: 2,
+                  flex: {
+                    xs: 1,
+                    md: "auto"
+                  },
+                  justifyContent: "flex-end",
+                  whiteSpace: "nowrap"
+                },
+                children: [
+                  formRender?.cancel,
+                  /* @__PURE__ */ jsx(
+                    PaymentForm,
+                    {
+                      currencyId,
+                      checkoutSession: state.checkoutSession,
+                      paymentMethods,
+                      paymentIntent,
+                      paymentLink,
+                      customer,
+                      onPaid: handlePaid,
+                      onError,
+                      mode,
+                      action,
+                      onlyShowBtn: true,
+                      isDonation: true
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
     ] }),
     state.customerLimited && /* @__PURE__ */ jsx(
       ConfirmDialog,
@@ -384,20 +414,14 @@ function PaymentInner({
     )
   ] }) });
 }
-DonationForm.defaultProps = {
-  completed: false,
-  error: null,
-  showCheckoutSummary: true,
-  formRender: {}
-};
 export default function DonationForm({
   checkoutSession,
   paymentMethods,
   paymentIntent,
   paymentLink,
   customer,
-  completed,
-  error,
+  completed = false,
+  error = null,
   mode,
   onPaid,
   onError,
@@ -405,7 +429,7 @@ export default function DonationForm({
   goBack,
   action,
   showCheckoutSummary = true,
-  formRender,
+  formRender = {},
   id
 }) {
   const { t } = useLocaleContext();
@@ -441,7 +465,19 @@ export default function DonationForm({
   const renderContent = () => {
     const footer = /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Divider, { sx: { mt: { xs: "16px", md: "-24px" }, mb: { xs: "16px", md: "-16px" } } }),
-      /* @__PURE__ */ jsx(Stack, { direction: "row", justifyContent: "flex-end", alignItems: "center", flexWrap: "wrap", gap: 1, children: /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "large", onClick: formRender?.onCancel, children: t("common.cancel") }) })
+      /* @__PURE__ */ jsx(
+        Stack,
+        {
+          direction: "row",
+          sx: {
+            justifyContent: "flex-end",
+            alignItems: "center",
+            flexWrap: "wrap",
+            gap: 1
+          },
+          children: /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "large", onClick: formRender?.onCancel, children: t("common.cancel") })
+        }
+      )
     ] });
     if (error) {
       return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -504,9 +540,9 @@ export default function DonationForm({
   return /* @__PURE__ */ jsxs(
     Stack,
     {
-      display: "flex",
-      flexDirection: "column",
       sx: {
+        display: "flex",
+        flexDirection: "column",
         height: mode === "standalone" ? "100vh" : "auto",
         overflow: isMobileSafariEnv ? "visible" : "hidden"
       },

package/es/payment/error.d.ts

@@ -6,11 +6,5 @@ type Props = {
     button?: string | React.ReactNode;
     mode?: ModeType;
 };
-declare function PaymentError({ title, description, button, mode }: Props): import("react").JSX.Element;
-declare namespace PaymentError {
-    var defaultProps: {
-        button: string;
-        mode: string;
-    };
-}
-export default PaymentError;
+export default function PaymentError({ title, description, button, mode }: Props): import("react").JSX.Element;
+export {};

package/es/payment/error.js

@@ -4,29 +4,49 @@ function getHeightStyle(mode) {
   switch (mode) {
     case "standalone":
       return { height: "100vh", maxHeight: "100%" };
+    // 独立模式下，高度为100vh
     default:
       return { height: "auto", minHeight: 200 };
   }
 }
-export default function PaymentError({ title, description, button, mode }) {
+export default function PaymentError({ title, description, button = "Back", mode = "standalone" }) {
   const heightStyle = getHeightStyle(mode);
-  return /* @__PURE__ */ jsx(Stack, { sx: heightStyle, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs(Stack, { sx: { width: "280px" }, direction: "column", alignItems: "center", justifyContent: "center", children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "h5", sx: { mb: 2 }, children: title }),
-    /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { mb: 2, textAlign: "center" }, children: description }),
-    typeof button === "string" ? /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "text",
-        size: "small",
-        sx: { color: "text.link" },
-        component: Link,
-        href: window.blocklet?.appUrl,
-        children: button
-      }
-    ) : button
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    Stack,
+    {
+      sx: [
+        {
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        ...Array.isArray(heightStyle) ? heightStyle : [heightStyle]
+      ],
+      children: /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "column",
+          sx: {
+            alignItems: "center",
+            justifyContent: "center",
+            width: "280px"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "h5", sx: { mb: 2 }, children: title }),
+            /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { mb: 2, textAlign: "center" }, children: description }),
+            typeof button === "string" ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "text",
+                size: "small",
+                sx: { color: "text.link" },
+                component: Link,
+                href: window.blocklet?.appUrl,
+                children: button
+              }
+            ) : button
+          ]
+        }
+      )
+    }
+  );
 }
-PaymentError.defaultProps = {
-  button: "Back",
-  mode: "standalone"
-};

package/es/payment/footer.d.ts

@@ -1,3 +1,2 @@
-export default function CheckoutFooter({ ...props }: {
-    [x: string]: any;
-}): import("react").JSX.Element;
+import { TypographyProps } from '@mui/material';
+export default function CheckoutFooter(props: TypographyProps): import("react").JSX.Element;

package/es/payment/footer.js

@@ -1,9 +1,22 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Typography } from "@mui/material";
-export default function CheckoutFooter({ ...props }) {
-  return /* @__PURE__ */ jsxs(Typography, { color: "text.lighter", fontSize: 12, ...props, children: [
-    "Powered by",
-    " ",
-    /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontWeight: "bold", fontSize: 12 }, children: "ArcBlock" })
-  ] });
+export default function CheckoutFooter(props) {
+  return /* @__PURE__ */ jsxs(
+    Typography,
+    {
+      ...props,
+      sx: [
+        {
+          color: "text.lighter",
+          fontSize: 12
+        },
+        ...Array.isArray(props.sx) ? props.sx : [props.sx]
+      ],
+      children: [
+        "Powered by",
+        " ",
+        /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontWeight: "bold", fontSize: 12 }, children: "ArcBlock" })
+      ]
+    }
+  );
 }

package/es/payment/form/addon.js

@@ -7,8 +7,18 @@ import { usePaymentContext } from "../../contexts/payment.js";
 export default function UserButtons() {
   const { t } = useLocaleContext();
   const { session } = usePaymentContext();
-  return /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [
-    /* @__PURE__ */ jsx(LocaleSelector, { showText: false }),
-    session?.user ? /* @__PURE__ */ jsx(SessionManager, { session }) : /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.login"), arrow: true, children: /* @__PURE__ */ jsx(SessionManager, { session }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "row",
+      sx: {
+        alignItems: "center",
+        justifyContent: "space-between"
+      },
+      children: [
+        /* @__PURE__ */ jsx(LocaleSelector, { showText: false }),
+        session?.user ? /* @__PURE__ */ jsx(SessionManager, { session }) : /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.login"), arrow: true, children: /* @__PURE__ */ jsx(SessionManager, { session }) })
+      ]
+    }
+  );
 }

package/es/payment/form/address.d.ts

@@ -6,12 +6,5 @@ type Props = {
     fieldValidation?: Record<string, any>;
     errorPosition?: 'right' | 'bottom';
 };
-declare function AddressForm({ mode, stripe, sx, fieldValidation, errorPosition }: Props): import("react").JSX.Element | null;
-declare namespace AddressForm {
-    var defaultProps: {
-        sx: {};
-        fieldValidation: {};
-        errorPosition: string;
-    };
-}
-export default AddressForm;
+export default function AddressForm({ mode, stripe, sx, fieldValidation, errorPosition }: Props): import("react").JSX.Element | null;
+export {};

package/es/payment/form/address.js

@@ -5,12 +5,7 @@ import { Controller, useFormContext, useWatch } from "react-hook-form";
 import FormInput from "../../components/input.js";
 import CountrySelect from "../../components/country-select.js";
 import { getFieldValidation, validatePostalCode } from "../../libs/validator.js";
-AddressForm.defaultProps = {
-  sx: {},
-  fieldValidation: {},
-  errorPosition: "right"
-};
-export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, errorPosition }) {
+export default function AddressForm({ mode, stripe, sx = {}, fieldValidation = {}, errorPosition = "right" }) {
   const { t, locale } = useLocaleContext();
   const { control } = useFormContext();
   const country = useWatch({ control, name: "billing_address.country" });
@@ -84,6 +79,7 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, er
                   CountrySelect,
                   {
                     ...field,
+                    ref: field.ref,
                     sx: {
                       "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
                         borderColor: "transparent"
@@ -126,6 +122,7 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation, er
                   CountrySelect,
                   {
                     ...field,
+                    ref: field.ref,
                     sx: {
                       ".MuiOutlinedInput-notchedOutline": {
                         borderColor: "transparent !important"