@blocklet/payment-react 1.18.56 → 1.19.1

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();
@@ -135,7 +131,8 @@ export default function PaymentForm({
     customer,
     customerLimited: false,
     stripePaying: false,
-    fastCheckoutInfo: null
+    fastCheckoutInfo: null,
+    creditInsufficientInfo: null
   });
   const currencies = flattenPaymentMethods(paymentMethods);
   const onCheckoutComplete = useMemoizedFn(async ({ response }) => {
@@ -270,8 +267,7 @@ export default function PaymentForm({
     }
   };
   const handleFastCheckoutConfirm = async () => {
-    if (!state.fastCheckoutInfo)
-      return;
+    if (!state.fastCheckoutInfo) return;
     setState({
       fastCheckoutInfo: {
         ...state.fastCheckoutInfo,
@@ -305,6 +301,9 @@ export default function PaymentForm({
   const handleFastCheckoutCancel = () => {
     setState({ fastCheckoutInfo: null });
   };
+  const handleCreditInsufficientClose = () => {
+    setState({ creditInsufficientInfo: null });
+  };
   const openConnect = () => {
     try {
       if (!["arcblock", "ethereum", "base"].includes(method.type)) {
@@ -360,7 +359,27 @@ export default function PaymentForm({
         customerLimited: false
       });
       if (["arcblock", "ethereum", "base"].includes(method.type)) {
-        if ((result.data.balance?.sufficient || result.data.delegation?.sufficient) && !isDonationMode && result.data.fastPayInfo) {
+        if (paymentCurrency?.type === "credit") {
+          if (result.data.creditSufficient === true) {
+            setState({
+              fastCheckoutInfo: {
+                open: true,
+                loading: false,
+                sourceType: "credit",
+                amount: result.data.fastPayInfo?.amount || "0",
+                payer: result.data.fastPayInfo?.payer,
+                availableCredit: result.data.fastPayInfo?.amount || "0",
+                balance: result.data.fastPayInfo?.token?.balance || "0"
+              }
+            });
+          } else {
+            setState({
+              creditInsufficientInfo: {
+                open: true
+              }
+            });
+          }
+        } else if ((result.data.balance?.sufficient || result.data.delegation?.sufficient) && !isDonationMode && result.data.fastPayInfo) {
           setState({
             fastCheckoutInfo: {
               open: true,
@@ -450,45 +469,94 @@ export default function PaymentForm({
     {
       onConfirm: handleFastCheckoutConfirm,
       onCancel: handleFastCheckoutCancel,
-      title: t("payment.checkout.fastPay.title"),
-      message: /* @__PURE__ */ jsxs(Stack, { children: [
+      title: state.fastCheckoutInfo.sourceType === "credit" ? t("payment.checkout.fastPay.credit.title") : t("payment.checkout.fastPay.title"),
+      message: state.fastCheckoutInfo.sourceType === "credit" ? /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.fastPay.credit.meteringSubscriptionMessage", {
+        available: `${fromUnitToToken(state.fastCheckoutInfo?.balance || "0", paymentCurrency?.decimal || 18).toString()} ${paymentCurrency?.symbol}`
+      }) }) : /* @__PURE__ */ jsxs(Stack, { children: [
         /* @__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,
       color: "primary"
     }
   );
+  const CreditInsufficientDialog = state.creditInsufficientInfo && /* @__PURE__ */ jsx(
+    ConfirmDialog,
+    {
+      onConfirm: handleCreditInsufficientClose,
+      onCancel: handleCreditInsufficientClose,
+      title: t("payment.checkout.fastPay.credit.insufficientTitle"),
+      message: /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.fastPay.credit.insufficientMessage") }),
+      confirm: t("common.confirm")
+    }
+  );
   if (onlyShowBtn) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Box, { className: "cko-payment-submit-btn", children: /* @__PURE__ */ jsxs(
@@ -541,7 +609,8 @@ export default function PaymentForm({
           }
         }
       ),
-      FastCheckoutConfirmDialog
+      FastCheckoutConfirmDialog,
+      CreditInsufficientDialog
     ] });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -563,40 +632,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,
         {
@@ -726,6 +805,7 @@ export default function PaymentForm({
         }
       }
     ),
-    FastCheckoutConfirmDialog
+    FastCheckoutConfirmDialog,
+    CreditInsufficientDialog
   ] });
 }

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

@@ -18,7 +18,8 @@ import {
   getQueryParams,
   getStatementDescriptor,
   isMobileSafari,
-  isValidCountry
+  isValidCountry,
+  showStaking
 } from "../libs/util.js";
 import PaymentError from "./error.js";
 import CheckoutFooter from "./footer.js";
@@ -30,17 +31,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,
@@ -170,6 +167,18 @@ function PaymentInner({
       Toast.error(formatError(err));
     }
   };
+  const onQuantityChange = async (itemId, quantity) => {
+    try {
+      const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/adjust-quantity`, {
+        itemId,
+        quantity
+      });
+      setState({ checkoutSession: data });
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
   const onCancelCrossSell = async () => {
     try {
       const { data } = await api.delete(`/api/checkout-sessions/${state.checkoutSession.id}/cross-sell`);
@@ -215,17 +224,19 @@ function PaymentInner({
             // @ts-ignore
             state.checkoutSession.subscription_data?.min_stake_amount || 0
           ),
-          showStaking: method.type === "arcblock" && !state.checkoutSession.subscription_data?.no_stake,
+          showStaking: showStaking(method, currency, !!state.checkoutSession.subscription_data?.no_stake),
           currency,
           onUpsell,
           onDownsell,
+          onQuantityChange,
           onApplyCrossSell,
           onCancelCrossSell,
           onChangeAmount,
           checkoutSessionId: state.checkoutSession.id,
           crossSellBehavior: state.checkoutSession.cross_sell_behavior,
           donationSettings: paymentLink?.donation_settings,
-          action
+          action,
+          completed
         }
       ),
       mode === "standalone" && !isMobile && /* @__PURE__ */ jsx(CheckoutFooter, { className: "cko-footer", sx: { color: "text.lighter" } })
@@ -275,19 +286,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 +372,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 {};