@blocklet/payment-react 1.18.56 → 1.19.0

package/es/payment/form/currency.js

@@ -21,31 +21,51 @@ export default function CurrencySelector({ value, currencies, onChange }) {
             variant: "outlined",
             onClick: () => onChange(x.id, x.method?.id),
             className: selected ? "cko-payment-card" : "cko-payment-card-unselect",
-            children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", sx: { position: "relative" }, children: [
-              /* @__PURE__ */ jsx(Avatar, { src: x.logo, alt: x.name, sx: { width: 40, height: 40, marginRight: "12px" } }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    variant: "h5",
-                    component: "div",
-                    sx: { fontSize: "16px", color: "text.primary", fontWeight: "500" },
-                    children: x.symbol
-                  }
-                ),
-                /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 14 }, color: "text.lighter", gutterBottom: true, children: x.method.name })
-              ] }),
-              /* @__PURE__ */ jsx(
-                Radio,
-                {
-                  checked: selected,
-                  sx: {
-                    position: "absolute",
-                    right: 0
-                  }
-                }
-              )
-            ] })
+            children: /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                direction: "row",
+                sx: {
+                  alignItems: "center",
+                  position: "relative"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Avatar, { src: x.logo, alt: x.name, sx: { width: 40, height: 40, marginRight: "12px" } }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: "h5",
+                        component: "div",
+                        sx: { fontSize: "16px", color: "text.primary", fontWeight: "500" },
+                        children: x.symbol
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        gutterBottom: true,
+                        sx: {
+                          color: "text.lighter",
+                          fontSize: 14
+                        },
+                        children: x.method.name
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Radio,
+                    {
+                      checked: selected,
+                      sx: {
+                        position: "absolute",
+                        right: 0
+                      }
+                    }
+                  )
+                ]
+              }
+            )
           },
           x.id
         );

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

@@ -6,11 +6,5 @@ type PageData = CheckoutContext & CheckoutCallbacks & {
     onlyShowBtn?: boolean;
     isDonation?: boolean;
 };
-declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, onlyShowBtn, isDonation, }: PageData): import("react").JSX.Element;
-declare namespace PaymentForm {
-    var defaultProps: {
-        onlyShowBtn: boolean;
-        isDonation: boolean;
-    };
-}
-export default PaymentForm;
+export default function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, onlyShowBtn, isDonation, }: PageData): import("react").JSX.Element;
+export {};

package/es/payment/form/index.js

@@ -85,10 +85,6 @@ const setUserFormValues = (userInfo, currentValues, setValue, options = {}) => {
     }
   });
 };
-PaymentForm.defaultProps = {
-  onlyShowBtn: false,
-  isDonation: false
-};
 export default function PaymentForm({
   checkoutSession,
   paymentMethods,
@@ -99,7 +95,7 @@ export default function PaymentForm({
   onError,
   // mode,
   action,
-  onlyShowBtn,
+  onlyShowBtn = false,
   isDonation = false
 }) {
   const { t, locale } = useLocaleContext();
@@ -270,8 +266,7 @@ export default function PaymentForm({
     }
   };
   const handleFastCheckoutConfirm = async () => {
-    if (!state.fastCheckoutInfo)
-      return;
+    if (!state.fastCheckoutInfo) return;
     setState({
       fastCheckoutInfo: {
         ...state.fastCheckoutInfo,
@@ -455,34 +450,71 @@ export default function PaymentForm({
         /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.fastPay.autoPaymentReason") }),
         /* @__PURE__ */ jsx(Divider, { sx: { mt: 1.5, mb: 1.5 } }),
         /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
-          /* @__PURE__ */ jsxs(Stack, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [
-            /* @__PURE__ */ jsx(Typography, { color: "text.primary", sx: { whiteSpace: "nowrap" }, children: t("payment.checkout.fastPay.payer") }),
-            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-              /* @__PURE__ */ jsx(DID, { did: state.fastCheckoutInfo.payer || "", compact: true, responsive: false }),
-              balanceLink && /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.fastPay.balanceLink"), placement: "top", children: /* @__PURE__ */ jsx(
-                OpenInNew,
-                {
-                  sx: {
-                    color: "text.lighter",
-                    fontSize: "0.85rem",
-                    cursor: "pointer",
-                    "&:hover": { color: "text.primary" }
-                  },
-                  onClick: () => {
-                    window.open(balanceLink, "_blank");
+          /* @__PURE__ */ jsxs(
+            Stack,
+            {
+              sx: {
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    sx: {
+                      color: "text.primary",
+                      whiteSpace: "nowrap"
+                    },
+                    children: t("payment.checkout.fastPay.payer")
                   }
-                }
-              ) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs(Stack, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [
-            /* @__PURE__ */ jsx(Typography, { color: "text.primary", children: t("payment.checkout.fastPay.amount") }),
-            /* @__PURE__ */ jsxs(Typography, { children: [
-              fromUnitToToken(state.fastCheckoutInfo.amount, paymentCurrency?.decimal || 18).toString(),
-              " ",
-              paymentCurrency?.symbol
-            ] })
-          ] })
+                ),
+                /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                  /* @__PURE__ */ jsx(DID, { did: state.fastCheckoutInfo.payer || "", compact: true, responsive: false }),
+                  balanceLink && /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.fastPay.balanceLink"), placement: "top", children: /* @__PURE__ */ jsx(
+                    OpenInNew,
+                    {
+                      sx: {
+                        color: "text.lighter",
+                        fontSize: "0.85rem",
+                        cursor: "pointer",
+                        "&:hover": { color: "text.primary" }
+                      },
+                      onClick: () => {
+                        window.open(balanceLink, "_blank");
+                      }
+                    }
+                  ) })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Stack,
+            {
+              sx: {
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    sx: {
+                      color: "text.primary"
+                    },
+                    children: t("payment.checkout.fastPay.amount")
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Typography, { children: [
+                  fromUnitToToken(state.fastCheckoutInfo.amount, paymentCurrency?.decimal || 18).toString(),
+                  " ",
+                  paymentCurrency?.symbol
+                ] })
+              ]
+            }
+          )
         ] })
       ] }),
       loading: state.fastCheckoutInfo.loading,
@@ -563,40 +595,50 @@ export default function PaymentForm({
           children: t("payment.checkout.paymentDetails")
         }
       ),
-      /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", className: "cko-payment-methods", children: [
-        /* @__PURE__ */ jsx(Stack, { direction: "row", sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
-          Controller,
-          {
-            name: "payment_currency",
-            control,
-            render: ({ field }) => /* @__PURE__ */ jsx(
-              CurrencySelector,
+      /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "column",
+          className: "cko-payment-methods",
+          sx: {
+            alignItems: "flex-start"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Stack, { direction: "row", sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
+              Controller,
               {
-                value: field.value,
-                currencies,
-                onChange: (id, methodId) => {
-                  field.onChange(id);
-                  setValue("payment_method", methodId);
-                  saveCurrencyPreference(id, session?.user?.did);
-                }
+                name: "payment_currency",
+                control,
+                render: ({ field }) => /* @__PURE__ */ jsx(
+                  CurrencySelector,
+                  {
+                    value: field.value,
+                    currencies,
+                    onChange: (id, methodId) => {
+                      field.onChange(id);
+                      setValue("payment_method", methodId);
+                      saveCurrencyPreference(id, session?.user?.did);
+                    }
+                  }
+                )
+              }
+            ) }),
+            state.stripePaying && state.stripeContext && /* @__PURE__ */ jsx(
+              StripeCheckout,
+              {
+                clientSecret: state.stripeContext.client_secret,
+                intentType: state.stripeContext.intent_type,
+                publicKey: method.settings.stripe?.publishable_key,
+                customer: state.customer,
+                mode: checkoutSession.mode,
+                onConfirm: onStripeConfirm,
+                onCancel: onStripeCancel,
+                returnUrl: checkoutSession?.success_url
               }
             )
-          }
-        ) }),
-        state.stripePaying && state.stripeContext && /* @__PURE__ */ jsx(
-          StripeCheckout,
-          {
-            clientSecret: state.stripeContext.client_secret,
-            intentType: state.stripeContext.intent_type,
-            publicKey: method.settings.stripe?.publishable_key,
-            customer: state.customer,
-            mode: checkoutSession.mode,
-            onConfirm: onStripeConfirm,
-            onCancel: onStripeCancel,
-            returnUrl: checkoutSession?.success_url
-          }
-        )
-      ] }) }),
+          ]
+        }
+      ) }),
       showForm && /* @__PURE__ */ jsxs(
         Stack,
         {

package/es/payment/form/phone.js

@@ -15,8 +15,7 @@ export default function PhoneInput({ ...props }) {
   const values = getValues();
   const isUpdatingRef = useRef(false);
   const safeUpdate = useCallback((callback) => {
-    if (isUpdatingRef.current)
-      return;
+    if (isUpdatingRef.current) return;
     try {
       isUpdatingRef.current = true;
       callback();
@@ -39,8 +38,7 @@ export default function PhoneInput({ ...props }) {
   });
   const userCountry = useWatch({ control, name: countryFieldName });
   useEffect(() => {
-    if (!userCountry || userCountry === country)
-      return;
+    if (!userCountry || userCountry === country) return;
     safeUpdate(() => {
       setCountry(userCountry);
     });

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

@@ -5,7 +5,7 @@ export type StripeCheckoutFormProps = {
     customer: TCustomer;
     mode: string;
     onConfirm: Function;
-    returnUrl: string;
+    returnUrl?: string;
 };
 export type StripeCheckoutProps = {
     clientSecret: string;
@@ -17,10 +17,4 @@ export type StripeCheckoutProps = {
     onCancel: Function;
     returnUrl?: string;
 };
-declare function StripeCheckout({ clientSecret, intentType, publicKey, mode, customer, onConfirm, onCancel, returnUrl, }: StripeCheckoutProps): import("react").JSX.Element;
-declare namespace StripeCheckout {
-    var defaultProps: {
-        returnUrl: string;
-    };
-}
-export default StripeCheckout;
+export default function StripeCheckout({ clientSecret, intentType, publicKey, mode, customer, onConfirm, onCancel, returnUrl, }: StripeCheckoutProps): import("react").JSX.Element;

package/es/payment/form/stripe/form.js

@@ -79,6 +79,7 @@ function StripeCheckoutForm({
           setState({ message: t("paymentCredit.preparePayMessage.processing") });
           break;
         case "requires_payment_method":
+        // 忽略该状态
         default:
           break;
       }
@@ -304,6 +305,3 @@ export default function StripeCheckout({
     }
   );
 }
-StripeCheckout.defaultProps = {
-  returnUrl: ""
-};

package/es/payment/header.js

@@ -18,20 +18,42 @@ export default function PaymentHeader({ checkoutSession }) {
     }
     return false;
   }, [domSize, theme]);
-  return /* @__PURE__ */ jsxs(Stack, { className: "cko-header", direction: "row", spacing: 1, alignItems: "center", justifyContent: "space-between", children: [
-    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
-      /* @__PURE__ */ jsx(
-        Avatar,
-        {
-          variant: "square",
-          src: window.blocklet.appLogo,
-          sx: { width: 32, height: 32 },
-          alt: window.blocklet?.appName || "Logo"
-        }
-      ),
-      /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary", fontWeight: 600 }, children: brand }),
-      !livemode && /* @__PURE__ */ jsx(Livemode, {})
-    ] }),
-    isColumnLayout ? /* @__PURE__ */ jsx(UserButtons, {}) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      className: "cko-header",
+      direction: "row",
+      spacing: 1,
+      sx: {
+        alignItems: "center",
+        justifyContent: "space-between"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: "row",
+            spacing: 1,
+            sx: {
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Avatar,
+                {
+                  variant: "square",
+                  src: window.blocklet.appLogo,
+                  sx: { width: 32, height: 32 },
+                  alt: window.blocklet?.appName || "Logo"
+                }
+              ),
+              /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary", fontWeight: 600 }, children: brand }),
+              !livemode && /* @__PURE__ */ jsx(Livemode, {})
+            ]
+          }
+        ),
+        isColumnLayout ? /* @__PURE__ */ jsx(UserButtons, {}) : null
+      ]
+    }
+  );
 }

package/es/payment/index.d.ts

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

package/es/payment/index.js

@@ -30,17 +30,13 @@ import PaymentSummary from "./summary.js";
 import { useMobile } from "../hooks/mobile.js";
 import { formatPhone } from "../libs/phone-validator.js";
 import { getCurrencyPreference } from "../libs/currency.js";
-PaymentInner.defaultProps = {
-  completed: false,
-  showCheckoutSummary: true
-};
 function PaymentInner({
   checkoutSession,
   paymentMethods,
   paymentLink,
   paymentIntent,
   customer,
-  completed,
+  completed = false,
   mode,
   onPaid,
   onError,
@@ -275,19 +271,14 @@ function PaymentInner({
     mode === "standalone" && isMobile && /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer", sx: { color: "text.lighter" } })
   ] }) });
 }
-Payment.defaultProps = {
-  completed: false,
-  error: null,
-  showCheckoutSummary: true
-};
 export default function Payment({
   checkoutSession,
   paymentMethods,
   paymentIntent,
   paymentLink,
   customer,
-  completed,
-  error,
+  completed = false,
+  error = null,
   mode,
   onPaid,
   onError,
@@ -366,9 +357,9 @@ export default function Payment({
   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/product-card.d.ts

@@ -7,14 +7,5 @@ type Props = {
     extra?: React.ReactNode;
     variant?: LiteralUnion<'square' | 'rounded' | 'circular', string>;
 };
-declare function ProductCard({ size, variant, name, logo, description, extra }: Props): import("react").JSX.Element;
-declare namespace ProductCard {
-    var defaultProps: {
-        logo: string;
-        size: number;
-        description: string;
-        variant: string;
-        extra: undefined;
-    };
-}
-export default ProductCard;
+export default function ProductCard({ size, variant, name, logo, description, extra, }: Props): import("react").JSX.Element;
+export {};

package/es/payment/product-card.js

@@ -1,54 +1,88 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar, Box, Stack, Typography } from "@mui/material";
-export default function ProductCard({ size, variant, name, logo, description, extra }) {
+export default function ProductCard({
+  size = 48,
+  variant = "rounded",
+  name,
+  logo = "",
+  description = "",
+  extra = void 0
+}) {
   const s = { width: size, height: size };
-  return /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, flex: 2, sx: { width: "100%" }, children: [
-    logo ? (
-      // @ts-ignore
-      /* @__PURE__ */ jsx(Avatar, { src: logo, alt: name, variant, sx: s })
-    ) : (
-      // @ts-ignore
-      /* @__PURE__ */ jsx(Avatar, { variant, sx: s, children: (name || "?").slice(0, 1) })
-    ),
-    /* @__PURE__ */ jsxs(
-      Stack,
-      {
-        direction: "column",
-        alignItems: "flex-start",
-        justifyContent: "space-around",
-        sx: { flexShrink: 1, overflow: "hidden" },
-        children: [
-          /* @__PURE__ */ jsx(
-            Typography,
-            {
-              className: "cko-ellipsis",
-              variant: "body1",
-              title: name,
-              sx: { fontWeight: 500, mb: 0.5, lineHeight: 1.2, fontSize: 16 },
-              color: "text.primary",
-              children: name
-            }
-          ),
-          description && /* @__PURE__ */ jsx(
-            Typography,
-            {
-              variant: "body1",
-              title: description,
-              sx: { fontSize: "0.74375rem", mb: 0.5, lineHeight: 1.2, textAlign: "left" },
-              color: "text.lighter",
-              children: description
-            }
-          ),
-          extra && /* @__PURE__ */ jsx(Box, { sx: { fontSize: "0.74375rem" }, color: "text.lighter", children: extra })
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "row",
+      spacing: 1,
+      sx: {
+        alignItems: "center",
+        flex: 2,
+        width: "100%"
+      },
+      children: [
+        logo ? (
+          // @ts-ignore
+          /* @__PURE__ */ jsx(Avatar, { src: logo, alt: name, variant, sx: s })
+        ) : (
+          // @ts-ignore
+          /* @__PURE__ */ jsx(Avatar, { variant, sx: s, children: (name || "?").slice(0, 1) })
+        ),
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: "column",
+            sx: {
+              alignItems: "flex-start",
+              justifyContent: "space-around",
+              flexShrink: 1,
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  className: "cko-ellipsis",
+                  variant: "body1",
+                  title: name,
+                  sx: {
+                    color: "text.primary",
+                    fontWeight: 500,
+                    mb: 0.5,
+                    lineHeight: 1.2,
+                    fontSize: 16
+                  },
+                  children: name
+                }
+              ),
+              description && /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "body1",
+                  title: description,
+                  sx: {
+                    color: "text.lighter",
+                    fontSize: "0.74375rem",
+                    mb: 0.5,
+                    lineHeight: 1.2,
+                    textAlign: "left"
+                  },
+                  children: description
+                }
+              ),
+              extra && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    color: "text.lighter",
+                    fontSize: "0.74375rem"
+                  },
+                  children: extra
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
-ProductCard.defaultProps = {
-  logo: "",
-  size: 48,
-  description: "",
-  variant: "rounded",
-  extra: void 0
-};