@blocklet/payment-react 1.18.56 → 1.19.1

package/lib/payment/form/phone.js

@@ -15,7 +15,7 @@ var _input = _interopRequireDefault(require("../../components/input"));
 var _util = require("../../libs/util");
 var _countrySelect = _interopRequireDefault(require("../../components/country-select"));
 var _phoneValidator = require("../../libs/phone-validator");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function PhoneInput({
   ...props
 }) {

package/lib/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/lib/payment/form/stripe/form.js

@@ -14,7 +14,7 @@ var _ahooks = require("ahooks");
 var _react = require("react");
 var _mobile = require("../../../hooks/mobile");
 var _loadingButton = _interopRequireDefault(require("../../../components/loading-button"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const {
   Elements,
   PaymentElement,
@@ -104,6 +104,7 @@ function StripeCheckoutForm({
           });
           break;
         case "requires_payment_method":
+        // 忽略该状态
         default:
           break;
       }
@@ -188,7 +189,6 @@ function StripeCheckoutForm({
   }, [customer, intentType, stripe, state.showBillingForm, returnUrl]
   // eslint-disable-line
   );
-
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(Content, {
     onSubmit: handleSubmit,
     children: [(!state.paymentMethod || ["link", "card"].includes(state.paymentMethod)) && /* @__PURE__ */(0, _jsxRuntime.jsx)(LinkAuthenticationElement, {
@@ -356,7 +356,4 @@ function StripeCheckout({
       })
     })
   });
-}
-StripeCheckout.defaultProps = {
-  returnUrl: ""
-};
+}

package/lib/payment/header.js

@@ -11,7 +11,7 @@ var _ahooks = require("ahooks");
 var _livemode = _interopRequireDefault(require("../components/livemode"));
 var _util = require("../libs/util");
 var _addon = _interopRequireDefault(require("./form/addon"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function PaymentHeader({
   checkoutSession
 }) {
@@ -33,12 +33,16 @@ function PaymentHeader({
     className: "cko-header",
     direction: "row",
     spacing: 1,
-    alignItems: "center",
-    justifyContent: "space-between",
+    sx: {
+      alignItems: "center",
+      justifyContent: "space-between"
+    },
     children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "row",
       spacing: 1,
-      alignItems: "center",
+      sx: {
+        alignItems: "center"
+      },
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
         variant: "square",
         src: window.blocklet.appLogo,

package/lib/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/lib/payment/index.js

@@ -31,19 +31,15 @@ var _mobile = require("../hooks/mobile");
 var _phoneValidator = require("../libs/phone-validator");
 var _currency = require("../libs/currency");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-PaymentInner.defaultProps = {
-  completed: false,
-  showCheckoutSummary: true
-};
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function PaymentInner({
   checkoutSession,
   paymentMethods,
   paymentLink,
   paymentIntent,
   customer,
-  completed,
+  completed = false,
   mode,
   onPaid,
   onError,
@@ -200,6 +196,22 @@ function PaymentInner({
       _Toast.default.error((0, _util2.formatError)(err));
     }
   };
+  const onQuantityChange = async (itemId, quantity) => {
+    try {
+      const {
+        data
+      } = await _api.default.put(`/api/checkout-sessions/${state.checkoutSession.id}/adjust-quantity`, {
+        itemId,
+        quantity
+      });
+      setState({
+        checkoutSession: data
+      });
+    } catch (err) {
+      console.error(err);
+      _Toast.default.error((0, _util2.formatError)(err));
+    }
+  };
   const onCancelCrossSell = async () => {
     try {
       const {
@@ -266,17 +278,19 @@ function PaymentInner({
             billingThreshold: Math.max(state.checkoutSession.subscription_data?.billing_threshold_amount || 0,
             // @ts-ignore
             state.checkoutSession.subscription_data?.min_stake_amount || 0),
-            showStaking: method.type === "arcblock" && !state.checkoutSession.subscription_data?.no_stake,
+            showStaking: (0, _util2.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__ */(0, _jsxRuntime.jsx)(_footer.default, {
             className: "cko-footer",
             sx: {
@@ -320,19 +334,14 @@ function PaymentInner({
     })
   });
 }
-Payment.defaultProps = {
-  completed: false,
-  error: null,
-  showCheckoutSummary: true
-};
 function Payment({
   checkoutSession,
   paymentMethods,
   paymentIntent,
   paymentLink,
   customer,
-  completed,
-  error,
+  completed = false,
+  error = null,
   mode,
   onPaid,
   onError,
@@ -426,9 +435,9 @@ function Payment({
     });
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-    display: "flex",
-    flexDirection: "column",
     sx: {
+      display: "flex",
+      flexDirection: "column",
       height: mode === "standalone" ? "100vh" : "auto",
       overflow: isMobileSafariEnv ? "visible" : "hidden"
     },

package/lib/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/lib/payment/product-card.js

@@ -7,12 +7,12 @@ module.exports = ProductCard;
 var _jsxRuntime = require("react/jsx-runtime");
 var _material = require("@mui/material");
 function ProductCard({
-  size,
-  variant,
+  size = 48,
+  variant = "rounded",
   name,
-  logo,
-  description,
-  extra
+  logo = "",
+  description = "",
+  extra = void 0
 }) {
   const s = {
     width: size,
@@ -20,10 +20,10 @@ function ProductCard({
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
     direction: "row",
-    alignItems: "center",
     spacing: 1,
-    flex: 2,
     sx: {
+      alignItems: "center",
+      flex: 2,
       width: "100%"
     },
     children: [logo ?
@@ -43,9 +43,9 @@ function ProductCard({
       children: (name || "?").slice(0, 1)
     }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "column",
-      alignItems: "flex-start",
-      justifyContent: "space-around",
       sx: {
+        alignItems: "flex-start",
+        justifyContent: "space-around",
         flexShrink: 1,
         overflow: "hidden"
       },
@@ -54,38 +54,31 @@ function ProductCard({
         variant: "body1",
         title: name,
         sx: {
+          color: "text.primary",
           fontWeight: 500,
           mb: 0.5,
           lineHeight: 1.2,
           fontSize: 16
         },
-        color: "text.primary",
         children: name
       }), description && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "body1",
         title: description,
         sx: {
+          color: "text.lighter",
           fontSize: "0.74375rem",
           mb: 0.5,
           lineHeight: 1.2,
           textAlign: "left"
         },
-        color: "text.lighter",
         children: description
       }), extra && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
+          color: "text.lighter",
           fontSize: "0.74375rem"
         },
-        color: "text.lighter",
         children: extra
       })]
     })]
   });
-}
-ProductCard.defaultProps = {
-  logo: "",
-  size: 48,
-  description: "",
-  variant: "rounded",
-  extra: void 0
-};
+}

package/lib/payment/product-donation.js

@@ -14,7 +14,7 @@ var _util = require("../libs/util");
 var _payment = require("../contexts/payment");
 var _scroll = require("../hooks/scroll");
 var _keyboard = require("../hooks/keyboard");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DONATION_PRESET_KEY_BASE = "payment-donation-preset";
 const DONATION_CUSTOM_AMOUNT_KEY_BASE = "payment-donation-custom-amount";
 const formatAmount = amount => {
@@ -259,22 +259,23 @@ function ProductDonation({
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     ref: containerRef,
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start",
-    gap: 1.5,
     onKeyDown: handleKeyDown,
     tabIndex: 0,
     sx: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      gap: 1.5,
       outline: "none"
     },
     children: [supportPreset && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Grid, {
       container: true,
       spacing: 2,
       children: [presets.map(amount => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grid, {
-        item: true,
-        xs: 6,
-        sm: 3,
+        size: {
+          xs: 6,
+          sm: 3
+        },
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Card, {
           variant: "outlined",
           className: "tab-navigable-card",
@@ -302,13 +303,13 @@ function ProductDonation({
             "aria-selected": formatAmount(state.selected) === formatAmount(amount) && !state.custom,
             children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
               direction: "row",
+              spacing: 0.5,
               sx: {
+                alignItems: "center",
+                justifyContent: "center",
                 py: 1.5,
                 px: 1.5
               },
-              spacing: 0.5,
-              alignItems: "center",
-              justifyContent: "center",
               children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
                 src: currency?.logo,
                 sx: {
@@ -319,26 +320,29 @@ function ProductDonation({
                 alt: currency?.symbol
               }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                 component: "strong",
-                lineHeight: 1,
                 variant: "h3",
                 sx: {
+                  lineHeight: 1,
                   fontVariantNumeric: "tabular-nums",
                   fontWeight: 400
                 },
                 children: amount
               }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                lineHeight: 1,
-                fontSize: 14,
-                color: "text.secondary",
+                sx: {
+                  lineHeight: 1,
+                  fontSize: 14,
+                  color: "text.secondary"
+                },
                 children: currency?.symbol
               })]
             })
           })
         })
       }, amount)), supportCustom && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grid, {
-        item: true,
-        xs: 6,
-        sm: 3,
+        size: {
+          xs: 6,
+          sm: 3
+        },
         children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Card, {
           variant: "outlined",
           className: "tab-navigable-card",
@@ -365,17 +369,17 @@ function ProductDonation({
             "aria-selected": state.custom,
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
               direction: "row",
+              spacing: 0.5,
               sx: {
+                alignItems: "center",
+                justifyContent: "center",
                 py: 1.5,
                 px: 1.5
               },
-              spacing: 0.5,
-              alignItems: "center",
-              justifyContent: "center",
               children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                 variant: "h3",
-                lineHeight: 1,
                 sx: {
+                  lineHeight: 1,
                   fontWeight: 400
                 },
                 children: t("common.custom")
@@ -393,49 +397,6 @@ function ProductDonation({
       error: !!state.error,
       helperText: state.error,
       inputRef: customInputRef,
-      InputProps: {
-        endAdornment: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-          direction: "row",
-          spacing: 0.5,
-          alignItems: "center",
-          sx: {
-            ml: 1
-          },
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
-            size: "small",
-            onClick: handleCustomSelect,
-            disabled: state.animating,
-            sx: {
-              mr: 0.5,
-              opacity: state.animating ? 0.5 : 1,
-              transition: "all 0.2s ease",
-              "&:hover": {
-                transform: "scale(1.2)",
-                transition: "transform 0.3s ease"
-              }
-            },
-            "aria-label": t("common.random"),
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_AutoAwesome.default, {
-              fontSize: "small"
-            })
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
-            src: currency?.logo,
-            sx: {
-              width: 16,
-              height: 16
-            },
-            alt: currency?.symbol
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            children: currency?.symbol
-          })]
-        }),
-        autoComplete: "off",
-        sx: {
-          "& input": {
-            transition: "all 0.25s ease"
-          }
-        }
-      },
       sx: {
         mt: defaultPreset !== "0" ? 0 : 1,
         "& .MuiInputBase-root": {
@@ -451,8 +412,52 @@ function ProductDonation({
         "& input[type=number]::-webkit-inner-spin-button": {
           WebkitAppearance: "none",
           margin: 0
+        },
+        "& input": {
+          transition: "all 0.25s ease"
         }
-      }
+      },
+      slotProps: {
+        input: {
+          endAdornment: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            spacing: 0.5,
+            sx: {
+              alignItems: "center",
+              ml: 1
+            },
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+              size: "small",
+              onClick: handleCustomSelect,
+              disabled: state.animating,
+              sx: {
+                mr: 0.5,
+                opacity: state.animating ? 0.5 : 1,
+                transition: "all 0.2s ease",
+                "&:hover": {
+                  transform: "scale(1.2)",
+                  transition: "transform 0.3s ease"
+                }
+              },
+              "aria-label": t("common.random"),
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_AutoAwesome.default, {
+                fontSize: "small"
+              })
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+              src: currency?.logo,
+              sx: {
+                width: 16,
+                height: 16
+              },
+              alt: currency?.symbol
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              children: currency?.symbol
+            })]
+          }),
+          autoComplete: "off"
+        }
+      },
+      autoComplete: "off"
     })]
   });
 }

package/lib/payment/product-item.d.ts

@@ -10,13 +10,13 @@ type Props = {
     onDownsell: Function;
     mode?: 'normal' | 'cross-sell';
     children?: React.ReactNode;
-};
-declare function ProductItem({ item, items, trialInDays, trialEnd, currency, mode, children, onUpsell, onDownsell, }: Props): JSX.Element;
-declare namespace ProductItem {
-    var defaultProps: {
-        mode: string;
-        children: null;
-        trialEnd: number;
+    adjustableQuantity?: {
+        enabled: boolean;
+        minimum?: number;
+        maximum?: number;
     };
-}
-export default ProductItem;
+    onQuantityChange?: (itemId: string, quantity: number) => void;
+    completed?: boolean;
+};
+export default function ProductItem({ item, items, trialInDays, trialEnd, currency, mode, children, onUpsell, onDownsell, completed, adjustableQuantity, onQuantityChange, }: Props): JSX.Element;
+export {};