@blocklet/payment-react 1.15.26 → 1.15.27

package/es/components/lazy-loader.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type ComponentType<P = any> = React.ComponentType<P>;
+type LoaderFunction<T extends ComponentType> = () => Promise<{
+    default: T;
+} | T>;
+interface LazyComponentOptions {
+    LoadingComponent?: React.ComponentType;
+    ErrorComponent?: React.ComponentType<{
+        error: Error;
+    }>;
+}
+export declare function createLazyComponent<T extends ComponentType, P extends React.ComponentProps<T>>(loader: LoaderFunction<T>, options?: LazyComponentOptions): (props: P) => JSX.Element;
+export {};

package/es/components/lazy-loader.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import Center from "@arcblock/ux/lib/Center";
+import { CircularProgress } from "@mui/material";
+export function createLazyComponent(loader, options = {}) {
+  let loadPromise = null;
+  const {
+    LoadingComponent = () => /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(CircularProgress, {}) }),
+    ErrorComponent = ({ error }) => /* @__PURE__ */ jsxs("div", { children: [
+      "Error: ",
+      error.message
+    ] })
+  } = options;
+  const loadComponent = async () => {
+    if (loadPromise)
+      return loadPromise;
+    try {
+      loadPromise = loader().then((result) => "default" in result ? result.default : result);
+      return await loadPromise;
+    } catch (error) {
+      loadPromise = null;
+      throw error;
+    }
+  };
+  return function WrappedComponent(props) {
+    const [Component, setComponent] = useState(null);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+      loadComponent().then((comp) => {
+        setComponent(() => comp);
+      }).catch((err) => {
+        setError(err);
+        console.error("Failed to load component:", err);
+      });
+    }, []);
+    if (error) {
+      return /* @__PURE__ */ jsx(ErrorComponent, { error });
+    }
+    if (!Component) {
+      return /* @__PURE__ */ jsx(LoadingComponent, {});
+    }
+    return /* @__PURE__ */ jsx(Component, { ...props });
+  };
+}

package/es/index.d.ts

@@ -27,6 +27,7 @@ import PricingItem from './components/pricing-item';
 import CountrySelect from './components/country-select';
 import TruncatedText from './components/truncated-text';
 import Link from './components/link';
+import { createLazyComponent } from './components/lazy-loader';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
@@ -36,4 +37,4 @@ export * from './hooks/subscription';
 export * from './hooks/mobile';
 export * from './hooks/table';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, };
+export { createLazyComponent, api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, };

package/es/index.js

@@ -19,7 +19,7 @@ import Amount from "./payment/amount.js";
 import AddressForm from "./payment/form/address.js";
 import CurrencySelector from "./payment/form/currency.js";
 import PhoneInput from "./payment/form/phone.js";
-import StripeForm from "./payment/form/stripe.js";
+import StripeForm from "./payment/form/stripe/index.js";
 import Payment from "./payment/index.js";
 import ProductSkeleton from "./payment/product-skeleton.js";
 import PaymentSummary from "./payment/summary.js";
@@ -27,6 +27,7 @@ import PricingItem from "./components/pricing-item.js";
 import CountrySelect from "./components/country-select.js";
 import TruncatedText from "./components/truncated-text.js";
 import Link from "./components/link.js";
+import { createLazyComponent } from "./components/lazy-loader.js";
 export { PaymentThemeProvider } from "./theme/index.js";
 export * from "./libs/util.js";
 export * from "./libs/connect.js";
@@ -37,6 +38,7 @@ export * from "./hooks/mobile.js";
 export * from "./hooks/table.js";
 export { translations, createTranslator } from "./locales/index.js";
 export {
+  createLazyComponent,
   api,
   dayjs,
   FormInput,

package/es/payment/form/index.js

@@ -28,7 +28,7 @@ import {
 import AddressForm from "./address.js";
 import CurrencySelector from "./currency.js";
 import PhoneInput from "./phone.js";
-import StripeCheckout from "./stripe.js";
+import StripeCheckout from "./stripe/index.js";
 import { useMobile } from "../../hooks/mobile.js";
 import { validatePhoneNumber } from "../../libs/phone-validator.js";
 const waitForCheckoutComplete = async (sessionId) => {

package/es/payment/form/{stripe.d.ts → stripe/form.d.ts}

@@ -1,6 +1,14 @@
 /// <reference types="react" />
 import type { TCustomer } from '@blocklet/payment-types';
-type StripeCheckoutProps = {
+export type StripeCheckoutFormProps = {
+    clientSecret: string;
+    intentType: string;
+    customer: TCustomer;
+    mode: string;
+    onConfirm: Function;
+    returnUrl: string;
+};
+export type StripeCheckoutProps = {
     clientSecret: string;
     intentType: string;
     publicKey: string;

package/es/payment/form/{stripe.js → stripe/form.js}

@@ -5,10 +5,9 @@ import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { LoadingButton } from "@mui/lab";
 import { CircularProgress, Typography } from "@mui/material";
 import { styled } from "@mui/system";
-import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
-import { loadStripe } from "@stripe/stripe-js";
 import { useSetState } from "ahooks";
 import { useEffect, useCallback } from "react";
+const { Elements, PaymentElement, useElements, useStripe, loadStripe } = globalThis.__STRIPE_COMPONENTS__;
 function StripeCheckoutForm({
   clientSecret,
   intentType,

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { StripeCheckoutProps } from './form';
+declare global {
+    interface Window {
+        __STRIPE_COMPONENTS__?: {
+            Elements: any;
+            PaymentElement: any;
+            useElements: () => any;
+            useStripe: () => any;
+            loadStripe: (key: string) => Promise<any>;
+        };
+    }
+}
+declare const _default: (props: StripeCheckoutProps) => JSX.Element;
+export default _default;

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

@@ -0,0 +1,13 @@
+import { createLazyComponent } from "../../../components/lazy-loader.js";
+export default createLazyComponent(async () => {
+  const [stripeReact, stripe] = await Promise.all([import("@stripe/react-stripe-js"), import("@stripe/stripe-js")]);
+  window.__STRIPE_COMPONENTS__ = {
+    Elements: stripeReact.Elements,
+    PaymentElement: stripeReact.PaymentElement,
+    useElements: stripeReact.useElements,
+    useStripe: stripeReact.useStripe,
+    loadStripe: stripe.loadStripe
+  };
+  const { default: Component } = await import("./form.js");
+  return Component;
+});

package/lib/components/lazy-loader.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type ComponentType<P = any> = React.ComponentType<P>;
+type LoaderFunction<T extends ComponentType> = () => Promise<{
+    default: T;
+} | T>;
+interface LazyComponentOptions {
+    LoadingComponent?: React.ComponentType;
+    ErrorComponent?: React.ComponentType<{
+        error: Error;
+    }>;
+}
+export declare function createLazyComponent<T extends ComponentType, P extends React.ComponentProps<T>>(loader: LoaderFunction<T>, options?: LazyComponentOptions): (props: P) => JSX.Element;
+export {};

package/lib/components/lazy-loader.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createLazyComponent = createLazyComponent;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _Center = _interopRequireDefault(require("@arcblock/ux/lib/Center"));
+var _material = require("@mui/material");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function createLazyComponent(loader, options = {}) {
+  let loadPromise = null;
+  const {
+    LoadingComponent = () => /* @__PURE__ */(0, _jsxRuntime.jsx)(_Center.default, {
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
+    }),
+    ErrorComponent = ({
+      error
+    }) => /* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
+      children: ["Error: ", error.message]
+    })
+  } = options;
+  const loadComponent = async () => {
+    if (loadPromise) return loadPromise;
+    try {
+      loadPromise = loader().then(result => "default" in result ? result.default : result);
+      return await loadPromise;
+    } catch (error) {
+      loadPromise = null;
+      throw error;
+    }
+  };
+  return function WrappedComponent(props) {
+    const [Component, setComponent] = (0, _react.useState)(null);
+    const [error, setError] = (0, _react.useState)(null);
+    (0, _react.useEffect)(() => {
+      loadComponent().then(comp => {
+        setComponent(() => comp);
+      }).catch(err => {
+        setError(err);
+        console.error("Failed to load component:", err);
+      });
+    }, []);
+    if (error) {
+      return /* @__PURE__ */(0, _jsxRuntime.jsx)(ErrorComponent, {
+        error
+      });
+    }
+    if (!Component) {
+      return /* @__PURE__ */(0, _jsxRuntime.jsx)(LoadingComponent, {});
+    }
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
+      ...props
+    });
+  };
+}

package/lib/index.d.ts

@@ -27,6 +27,7 @@ import PricingItem from './components/pricing-item';
 import CountrySelect from './components/country-select';
 import TruncatedText from './components/truncated-text';
 import Link from './components/link';
+import { createLazyComponent } from './components/lazy-loader';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
@@ -36,4 +37,4 @@ export * from './hooks/subscription';
 export * from './hooks/mobile';
 export * from './hooks/table';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, };
+export { createLazyComponent, api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, };

package/lib/index.js

@@ -33,6 +33,7 @@ var _exportNames = {
   CountrySelect: true,
   TruncatedText: true,
   Link: true,
+  createLazyComponent: true,
   PaymentThemeProvider: true,
   translations: true,
   createTranslator: true
@@ -211,6 +212,12 @@ Object.defineProperty(exports, "api", {
     return _api.default;
   }
 });
+Object.defineProperty(exports, "createLazyComponent", {
+  enumerable: true,
+  get: function () {
+    return _lazyLoader.createLazyComponent;
+  }
+});
 Object.defineProperty(exports, "createTranslator", {
   enumerable: true,
   get: function () {
@@ -258,6 +265,7 @@ var _pricingItem = _interopRequireDefault(require("./components/pricing-item"));
 var _countrySelect = _interopRequireDefault(require("./components/country-select"));
 var _truncatedText = _interopRequireDefault(require("./components/truncated-text"));
 var _link = _interopRequireDefault(require("./components/link"));
+var _lazyLoader = require("./components/lazy-loader");
 var _theme = require("./theme");
 var _util = require("./libs/util");
 Object.keys(_util).forEach(function (key) {

package/lib/payment/form/{stripe.d.ts → stripe/form.d.ts}

@@ -1,6 +1,14 @@
 /// <reference types="react" />
 import type { TCustomer } from '@blocklet/payment-types';
-type StripeCheckoutProps = {
+export type StripeCheckoutFormProps = {
+    clientSecret: string;
+    intentType: string;
+    customer: TCustomer;
+    mode: string;
+    onConfirm: Function;
+    returnUrl: string;
+};
+export type StripeCheckoutProps = {
     clientSecret: string;
     intentType: string;
     publicKey: string;

package/lib/payment/form/{stripe.js → stripe/form.js}

@@ -11,11 +11,16 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _lab = require("@mui/lab");
 var _material = require("@mui/material");
 var _system = require("@mui/system");
-var _reactStripeJs = require("@stripe/react-stripe-js");
-var _stripeJs = require("@stripe/stripe-js");
 var _ahooks = require("ahooks");
 var _react = require("react");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const {
+  Elements,
+  PaymentElement,
+  useElements,
+  useStripe,
+  loadStripe
+} = globalThis.__STRIPE_COMPONENTS__;
 function StripeCheckoutForm({
   clientSecret,
   intentType,
@@ -24,8 +29,8 @@ function StripeCheckoutForm({
   onConfirm,
   returnUrl = ""
 }) {
-  const stripe = (0, _reactStripeJs.useStripe)();
-  const elements = (0, _reactStripeJs.useElements)();
+  const stripe = useStripe();
+  const elements = useElements();
   const {
     t
   } = (0, _context.useLocaleContext)();
@@ -117,7 +122,7 @@ function StripeCheckoutForm({
 
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(Content, {
     onSubmit: handleSubmit,
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactStripeJs.PaymentElement, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(PaymentElement, {
       options: {
         layout: "auto",
         fields: {
@@ -177,7 +182,7 @@ function StripeCheckout({
   onCancel,
   returnUrl = ""
 }) {
-  const stripePromise = (0, _stripeJs.loadStripe)(publicKey);
+  const stripePromise = loadStripe(publicKey);
   const {
     t
   } = (0, _context.useLocaleContext)();
@@ -202,7 +207,7 @@ function StripeCheckout({
     open: state.open,
     onClose: handleClose,
     disableEscapeKeyDown: true,
-    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactStripeJs.Elements, {
+    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(Elements, {
       options: {
         clientSecret
       },

package/lib/payment/form/stripe/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { StripeCheckoutProps } from './form';
+declare global {
+    interface Window {
+        __STRIPE_COMPONENTS__?: {
+            Elements: any;
+            PaymentElement: any;
+            useElements: () => any;
+            useStripe: () => any;
+            loadStripe: (key: string) => Promise<any>;
+        };
+    }
+}
+declare const _default: (props: StripeCheckoutProps) => JSX.Element;
+export default _default;

package/lib/payment/form/stripe/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _lazyLoader = require("../../../components/lazy-loader");
+module.exports = (0, _lazyLoader.createLazyComponent)(async () => {
+  const [stripeReact, stripe] = await Promise.all([Promise.resolve().then(() => require("@stripe/react-stripe-js")), Promise.resolve().then(() => require("@stripe/stripe-js"))]);
+  window.__STRIPE_COMPONENTS__ = {
+    Elements: stripeReact.Elements,
+    PaymentElement: stripeReact.PaymentElement,
+    useElements: stripeReact.useElements,
+    useStripe: stripeReact.useStripe,
+    loadStripe: stripe.loadStripe
+  };
+  const {
+    default: Component
+  } = await Promise.resolve().then(() => require("./form"));
+  return Component;
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.15.26",
+  "version": "1.15.27",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -92,7 +92,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.15.26",
+    "@blocklet/payment-types": "1.15.27",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -122,5 +122,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "c239cdb9e3d4a1275a69515a782b4194c9f33e89"
+  "gitHead": "8946aa1f48babb0f4c9da6d21ebd5025d6c91597"
 }

package/src/components/lazy-loader.tsx

@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from 'react';
+import Center from '@arcblock/ux/lib/Center';
+import { CircularProgress } from '@mui/material';
+
+type ComponentType<P = any> = React.ComponentType<P>;
+type LoaderFunction<T extends ComponentType> = () => Promise<{ default: T } | T>;
+
+interface LazyComponentOptions {
+  LoadingComponent?: React.ComponentType;
+  ErrorComponent?: React.ComponentType<{ error: Error }>;
+}
+
+export function createLazyComponent<T extends ComponentType, P extends React.ComponentProps<T>>(
+  loader: LoaderFunction<T>,
+  options: LazyComponentOptions = {}
+) {
+  let loadPromise: Promise<T> | null = null;
+  const {
+    LoadingComponent = () => (
+      <Center>
+        <CircularProgress />
+      </Center>
+    ),
+    ErrorComponent = ({ error }) => <div>Error: {error.message}</div>,
+  } = options;
+
+  const loadComponent = async () => {
+    if (loadPromise) return loadPromise;
+
+    try {
+      loadPromise = loader().then((result) => ('default' in result ? result.default : result));
+      return await loadPromise;
+    } catch (error) {
+      loadPromise = null;
+      throw error;
+    }
+  };
+
+  return function WrappedComponent(props: P) {
+    const [Component, setComponent] = useState<T | null>(null);
+    const [error, setError] = useState<Error | null>(null);
+
+    useEffect(() => {
+      loadComponent()
+        .then((comp) => {
+          setComponent(() => comp);
+        })
+        .catch((err) => {
+          setError(err);
+          console.error('Failed to load component:', err);
+        });
+    }, []);
+
+    if (error) {
+      return <ErrorComponent error={error} />;
+    }
+
+    if (!Component) {
+      return <LoadingComponent />;
+    }
+
+    return <Component {...props} />;
+  };
+}

package/src/index.ts

@@ -27,6 +27,7 @@ import PricingItem from './components/pricing-item';
 import CountrySelect from './components/country-select';
 import TruncatedText from './components/truncated-text';
 import Link from './components/link';
+import { createLazyComponent } from './components/lazy-loader';
 
 export { PaymentThemeProvider } from './theme';
 
@@ -41,6 +42,7 @@ export * from './hooks/table';
 export { translations, createTranslator } from './locales';
 
 export {
+  createLazyComponent,
   api,
   dayjs,
   FormInput,

package/src/payment/form/{stripe.tsx → stripe/form.tsx}

@@ -5,12 +5,12 @@ import type { TCustomer } from '@blocklet/payment-types';
 import { LoadingButton } from '@mui/lab';
 import { CircularProgress, Typography } from '@mui/material';
 import { styled } from '@mui/system';
-import { Elements, PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js';
-import { loadStripe } from '@stripe/stripe-js';
 import { useSetState } from 'ahooks';
 import { useEffect, useCallback } from 'react';
 
-type StripeCheckoutFormProps = {
+const { Elements, PaymentElement, useElements, useStripe, loadStripe } = (globalThis as any).__STRIPE_COMPONENTS__;
+
+export type StripeCheckoutFormProps = {
   clientSecret: string;
   intentType: string;
   customer: TCustomer;
@@ -150,7 +150,7 @@ const Content = styled('form')`
   min-height: 320px;
 `;
 
-type StripeCheckoutProps = {
+export type StripeCheckoutProps = {
   clientSecret: string;
   intentType: string;
   publicKey: string;
@@ -160,7 +160,6 @@ type StripeCheckoutProps = {
   onCancel: Function;
   returnUrl?: string;
 };
-
 export default function StripeCheckout({
   clientSecret,
   intentType,

package/src/payment/form/stripe/index.tsx

@@ -0,0 +1,29 @@
+import { createLazyComponent } from '../../../components/lazy-loader';
+import type { StripeCheckoutProps } from './form';
+
+declare global {
+  interface Window {
+    __STRIPE_COMPONENTS__?: {
+      Elements: any;
+      PaymentElement: any;
+      useElements: () => any;
+      useStripe: () => any;
+      loadStripe: (key: string) => Promise<any>;
+    };
+  }
+}
+
+export default createLazyComponent<React.ComponentType<StripeCheckoutProps>, StripeCheckoutProps>(async () => {
+  const [stripeReact, stripe] = await Promise.all([import('@stripe/react-stripe-js'), import('@stripe/stripe-js')]);
+
+  window.__STRIPE_COMPONENTS__ = {
+    Elements: stripeReact.Elements,
+    PaymentElement: stripeReact.PaymentElement,
+    useElements: stripeReact.useElements,
+    useStripe: stripeReact.useStripe,
+    loadStripe: stripe.loadStripe,
+  };
+
+  const { default: Component } = await import('./form');
+  return Component;
+});