@blocklet/payment-react 1.18.56 → 1.19.0

package/lib/payment/error.js

@@ -13,6 +13,7 @@ function getHeightStyle(mode) {
         height: "100vh",
         maxHeight: "100%"
       };
+    // 独立模式下，高度为100vh
     default:
       return {
         height: "auto",
@@ -23,21 +24,22 @@ function getHeightStyle(mode) {
 function PaymentError({
   title,
   description,
-  button,
-  mode
+  button = "Back",
+  mode = "standalone"
 }) {
   const heightStyle = getHeightStyle(mode);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
-    sx: heightStyle,
-    alignItems: "center",
-    justifyContent: "center",
+    sx: [{
+      alignItems: "center",
+      justifyContent: "center"
+    }, ...(Array.isArray(heightStyle) ? heightStyle : [heightStyle])],
     children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "column",
       sx: {
+        alignItems: "center",
+        justifyContent: "center",
         width: "280px"
       },
-      direction: "column",
-      alignItems: "center",
-      justifyContent: "center",
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "h5",
         sx: {
@@ -63,8 +65,4 @@ function PaymentError({
       }) : button]
     })
   });
-}
-PaymentError.defaultProps = {
-  button: "Back",
-  mode: "standalone"
-};
+}

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

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = CheckoutFooter;
 var _jsxRuntime = require("react/jsx-runtime");
 var _material = require("@mui/material");
-function CheckoutFooter({
-  ...props
-}) {
+function CheckoutFooter(props) {
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-    color: "text.lighter",
-    fontSize: 12,
     ...props,
+    sx: [{
+      color: "text.lighter",
+      fontSize: 12
+    }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])],
     children: ["Powered by", " ", /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       component: "span",
       sx: {

package/lib/payment/form/addon.js

@@ -10,7 +10,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _selector = _interopRequireDefault(require("@arcblock/ux/lib/Locale/selector"));
 var _material = require("@mui/material");
 var _payment = require("../../contexts/payment");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function UserButtons() {
   const {
     t
@@ -20,8 +20,10 @@ function UserButtons() {
   } = (0, _payment.usePaymentContext)();
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
     direction: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
+    sx: {
+      alignItems: "center",
+      justifyContent: "space-between"
+    },
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_selector.default, {
       showText: false
     }), session?.user ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_SessionManager.default, {

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

@@ -11,18 +11,13 @@ var _reactHookForm = require("react-hook-form");
 var _input = _interopRequireDefault(require("../../components/input"));
 var _countrySelect = _interopRequireDefault(require("../../components/country-select"));
 var _validator = require("../../libs/validator");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-AddressForm.defaultProps = {
-  sx: {},
-  fieldValidation: {},
-  errorPosition: "right"
-};
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function AddressForm({
   mode,
   stripe,
   sx = {},
-  fieldValidation,
-  errorPosition
+  fieldValidation = {},
+  errorPosition = "right"
 }) {
   const {
     t,
@@ -111,6 +106,7 @@ function AddressForm({
                     field
                   }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
                     ...field,
+                    ref: field.ref,
                     sx: {
                       "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
                         borderColor: "transparent"
@@ -168,6 +164,7 @@ function AddressForm({
                       field
                     }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
                       ...field,
+                      ref: field.ref,
                       sx: {
                         ".MuiOutlinedInput-notchedOutline": {
                           borderColor: "transparent !important"

package/lib/payment/form/currency.js

@@ -29,8 +29,8 @@ function CurrencySelector({
         className: selected ? "cko-payment-card" : "cko-payment-card-unselect",
         children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",
-          alignItems: "center",
           sx: {
+            alignItems: "center",
             position: "relative"
           },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
@@ -52,11 +52,11 @@ function CurrencySelector({
               },
               children: x.symbol
             }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              gutterBottom: true,
               sx: {
+                color: "text.lighter",
                 fontSize: 14
               },
-              color: "text.lighter",
-              gutterBottom: true,
               children: x.method.name
             })]
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Radio, {

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

@@ -37,7 +37,7 @@ var _overDueInvoicePayment = _interopRequireDefault(require("../../components/ov
 var _currency2 = require("../../libs/currency");
 var _confirm = _interopRequireDefault(require("../../components/confirm"));
 var _validator = require("../../libs/validator");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const waitForCheckoutComplete = async sessionId => {
   let result;
   await (0, _pWaitFor.default)(async () => {
@@ -97,10 +97,6 @@ const setUserFormValues = (userInfo, currentValues, setValue, options = {}) => {
     }
   });
 };
-PaymentForm.defaultProps = {
-  onlyShowBtn: false,
-  isDonation: false
-};
 function PaymentForm({
   checkoutSession,
   paymentMethods,
@@ -111,7 +107,7 @@ function PaymentForm({
   onError,
   // mode,
   action,
-  onlyShowBtn,
+  onlyShowBtn = false,
   isDonation = false
 }) {
   const {
@@ -541,12 +537,14 @@ function PaymentForm({
       }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         spacing: 1,
         children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "space-between",
+          sx: {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between"
+          },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            color: "text.primary",
             sx: {
+              color: "text.primary",
               whiteSpace: "nowrap"
             },
             children: t("payment.checkout.fastPay.payer")
@@ -579,11 +577,15 @@ function PaymentForm({
             })]
           })]
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "space-between",
+          sx: {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between"
+          },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            color: "text.primary",
+            sx: {
+              color: "text.primary"
+            },
             children: t("payment.checkout.fastPay.amount")
           }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
             children: [(0, _util.fromUnitToToken)(state.fastCheckoutInfo.amount, paymentCurrency?.decimal || 18).toString(), " ", paymentCurrency?.symbol]
@@ -669,8 +671,10 @@ function PaymentForm({
           in: true,
           children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
             direction: "column",
-            alignItems: "flex-start",
             className: "cko-payment-methods",
+            sx: {
+              alignItems: "flex-start"
+            },
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
               direction: "row",
               sx: {

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,
@@ -320,19 +316,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 +417,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
-};
+}