@blocklet/payment-react 1.25.10 → 1.26.1

package/es/components/phone-field.js

@@ -0,0 +1,96 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useCallback } from "react";
+import { Box, InputBase, InputAdornment, Typography } from "@mui/material";
+import { defaultCountries, usePhoneInput } from "react-international-phone";
+import { useMount } from "ahooks";
+import CountrySelect from "./country-select.js";
+import { isValidCountry } from "../libs/util.js";
+import { getPhoneUtil } from "../libs/phone-validator.js";
+export default function PhoneField({
+  value,
+  country: externalCountry,
+  onChange,
+  onCountryChange,
+  label,
+  error = void 0,
+  onBlur = void 0
+}) {
+  const isUpdatingRef = useRef(false);
+  const safeUpdate = useCallback((callback) => {
+    if (isUpdatingRef.current) return;
+    try {
+      isUpdatingRef.current = true;
+      callback();
+    } finally {
+      requestAnimationFrame(() => {
+        isUpdatingRef.current = false;
+      });
+    }
+  }, []);
+  const { phone, handlePhoneValueChange, inputRef, country, setCountry } = usePhoneInput({
+    defaultCountry: isValidCountry(externalCountry) ? externalCountry : "us",
+    value: value || "",
+    countries: defaultCountries,
+    onChange: (data) => {
+      safeUpdate(() => {
+        onChange(data.phone);
+        onCountryChange(data.country);
+      });
+    }
+  });
+  useMount(() => {
+    getPhoneUtil().catch((err) => {
+      console.error("Failed to preload phone validator:", err);
+    });
+  });
+  useEffect(() => {
+    if (!externalCountry || externalCountry === country) return;
+    safeUpdate(() => {
+      setCountry(externalCountry);
+    });
+  }, [externalCountry, country, setCountry, safeUpdate]);
+  const handleCountryChange = useCallback(
+    (v) => {
+      safeUpdate(() => {
+        setCountry(v);
+        onCountryChange(v);
+      });
+    },
+    [setCountry, safeUpdate, onCountryChange]
+  );
+  return /* @__PURE__ */ jsxs(Box, { sx: { mb: 1.5 }, children: [
+    /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 13, fontWeight: 600, color: "text.primary", mb: 0.5 }, children: label }),
+    /* @__PURE__ */ jsx(
+      InputBase,
+      {
+        fullWidth: true,
+        value: phone,
+        onChange: handlePhoneValueChange,
+        onBlur,
+        type: "tel",
+        inputRef,
+        startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", sx: { mr: 0.25, ml: -0.5 }, children: /* @__PURE__ */ jsx(
+          CountrySelect,
+          {
+            value: country,
+            onChange: handleCountryChange,
+            sx: {
+              ".MuiOutlinedInput-notchedOutline": { borderColor: "transparent !important" },
+              "& .MuiSelect-select": { py: 0, pr: "20px !important" }
+            },
+            showDialCode: true
+          }
+        ) }),
+        sx: {
+          bgcolor: (theme) => theme.palette.mode === "dark" ? "rgba(255,255,255,0.06)" : "grey.50",
+          borderRadius: "8px",
+          px: 1.5,
+          py: 0.75,
+          fontSize: 14,
+          "& .MuiInputBase-input": { p: 0 }
+        }
+      }
+    ),
+    error && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 12, color: "error.main", mt: 0.25 }, children: error })
+  ] });
+}

package/es/index.d.ts

@@ -46,6 +46,7 @@ import PromotionCode from './components/promotion-code';
 import SourceDataViewer from './components/source-data-viewer';
 import SlippageConfig from './components/slippage-config';
 import DynamicPricingUnavailable from './components/dynamic-pricing-unavailable';
+import { CheckoutV2 } from './checkout-v2';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
@@ -60,7 +61,8 @@ export * from './hooks/scroll';
 export * from './hooks/keyboard';
 export * from './libs/validator';
 export { translations, createTranslator } from './locales';
-export { createLazyComponent, api, dayjs, FormInput, FormLabel, 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, OverdueInvoicePayment, StripePaymentAction, PaymentBeneficiaries, LoadingButton, DonateDetails, ResumeSubscription, CreditGrantsList, CreditTransactionsList, DateRangePicker, CreditStatusChip, AutoTopupModal, AutoTopup, Collapse, PromotionCode, SourceDataViewer, SlippageConfig, DynamicPricingUnavailable, PromotionSection, TotalSection, };
+export { createLazyComponent, api, dayjs, FormInput, FormLabel, 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, OverdueInvoicePayment, StripePaymentAction, PaymentBeneficiaries, LoadingButton, DonateDetails, ResumeSubscription, CreditGrantsList, CreditTransactionsList, DateRangePicker, CreditStatusChip, AutoTopupModal, AutoTopup, Collapse, PromotionCode, SourceDataViewer, SlippageConfig, DynamicPricingUnavailable, PromotionSection, TotalSection, CheckoutV2, };
 export type { CountrySelectProps } from './components/country-select';
 export type { StripePaymentActionProps } from './components/stripe-payment-action';
 export type { SlippageConfigValue, SlippageConfigProps } from './components/slippage-config';
+export type { CheckoutV2Props } from './checkout-v2';

package/es/index.js

@@ -46,6 +46,7 @@ import PromotionCode from "./components/promotion-code.js";
 import SourceDataViewer from "./components/source-data-viewer.js";
 import SlippageConfig from "./components/slippage-config.js";
 import DynamicPricingUnavailable from "./components/dynamic-pricing-unavailable.js";
+import { CheckoutV2 } from "./checkout-v2/index.js";
 export { PaymentThemeProvider } from "./theme/index.js";
 export * from "./libs/util.js";
 export * from "./libs/connect.js";
@@ -110,5 +111,6 @@ export {
   SlippageConfig,
   DynamicPricingUnavailable,
   PromotionSection,
-  TotalSection
+  TotalSection,
+  CheckoutV2
 };

package/es/locales/en.js

@@ -19,6 +19,7 @@ export default flat({
     setup: "Setup",
     amount: "Amount",
     total: "Total",
+    totalDue: "Total Due",
     subtotal: "Subtotal",
     status: "Status",
     livemode: "Test mode",
@@ -85,6 +86,7 @@ export default flat({
     viewConsumptionDetail: "Consumption Detail",
     customer: "Customer",
     currency: "Currency",
+    network: "Network",
     custom: "Custom",
     description: "Description",
     statementDescriptor: "Statement descriptor",
@@ -276,11 +278,14 @@ export default flat({
       free: "{count} {interval}{count > 1 ? 's' : ''} free",
       least: "continue with at least",
       completed: {
-        payment: "Thanks for your purchase",
-        subscription: "Thanks for subscribing",
-        setup: "Thanks for subscribing",
-        donate: "Thanks for your tip",
-        tip: "A payment to {payee} has been completed. You can view the details of this payment in your account."
+        payment: "Purchase successful",
+        subscription: "Subscription successful",
+        setup: "Subscription successful",
+        donate: "Donation successful",
+        tip: "A payment to {payee} has been completed. You can view the details of this payment in your account.",
+        summary: {
+          paid: "You've paid {amount}"
+        }
       },
       vendor: {
         accountRequired: "This action requires a unified account. Please switch accounts and try again.",
@@ -360,7 +365,8 @@ export default flat({
         schedule: {
           periodic: "Grant {amount} every {interval}.",
           withRefresh: "Grant {amount} every {interval}; unused credits expire with the next grant."
-        }
+        },
+        topupDescription: "Purchase {creditName} at {unitPrice} per credit."
       },
       expired: {
         title: "Expired Link",
@@ -374,9 +380,42 @@ export default flat({
         title: "Nothing to show here",
         description: "It seems this checkout session is not configured properly"
       },
+      error: {
+        title: "Something went wrong"
+      },
       orderSummary: "Order Summary",
+      orderSummarySubtitle: "Items included in this purchase",
       paymentDetails: "Payment Details",
       productListTotal: "Includes {total} items",
+      headerTitle: {
+        subscribe: "Subscribe to {name}",
+        purchase: "Purchase {name}"
+      },
+      planFeatures: "Plan Features",
+      typeBadge: {
+        subscription: "SUBSCRIPTION",
+        topup: "TOP-UP",
+        oneTime: "ONE-TIME"
+      },
+      subtitle: {
+        subscriptionInterval: "{interval} subscription",
+        creditsTopup: "Credits top-up",
+        addonFor: "Add-on for {product}",
+        oneTime: "One-time purchase"
+      },
+      creditTopup: {
+        title: "Get {name}",
+        question: "How many {symbol} do you want?",
+        credits: "Credits",
+        increment: "Increments of {step} {symbol}",
+        validFor: "Credits are valid for {duration} {unit} after purchase.",
+        willReceive: "You'll receive",
+        packInfo: "Includes {packs} credit packs ({perPack} per pack)",
+        autoMatch: "We'll automatically match the closest credit pack.",
+        autoMatchTooltip: "{symbol} are sold in packs of {step}",
+        pendingWarning: "You have a usage overage of {pendingAmount}. You need at least {minCredits} to restore access.",
+        pendingEnough: "You have a usage overage of {pendingAmount}. After covering the overage, your available balance will be {availableAmount}."
+      },
       promotion: {
         add_code: "Add promotion code",
         enter_code: "Enter promotion code",

package/es/locales/zh.js

@@ -19,6 +19,7 @@ export default flat({
     accessDenied: "\u60A8\u65E0\u6743\u8BBF\u95EE\u5176\u4ED6\u5BA2\u6237\u7684\u6570\u636E",
     amount: "\u91D1\u989D",
     total: "\u603B\u8BA1",
+    totalDue: "\u5E94\u4ED8\u603B\u989D",
     subtotal: "\u5C0F\u8BA1",
     status: "\u72B6\u6001",
     livemode: "\u6D4B\u8BD5\u6A21\u5F0F",
@@ -85,6 +86,7 @@ export default flat({
     viewConsumptionDetail: "\u6D88\u8D39\u8BE6\u60C5",
     customer: "\u5BA2\u6237",
     currency: "\u5E01\u79CD",
+    network: "\u7F51\u7EDC",
     custom: "\u81EA\u5B9A\u4E49",
     description: "\u63CF\u8FF0",
     statementDescriptor: "\u58F0\u660E\u63CF\u8FF0",
@@ -276,11 +278,14 @@ export default flat({
       free: "\u514D\u8D39\u8BD5\u7528 {count} {interval}",
       least: "\u81F3\u5C11",
       completed: {
-        payment: "\u611F\u8C22\u60A8\u7684\u8D2D\u4E70",
-        subscription: "\u611F\u8C22\u60A8\u7684\u8BA2\u9605",
-        setup: "\u611F\u8C22\u60A8\u7684\u8BA2\u9605",
-        donate: "\u611F\u8C22\u60A8\u7684\u652F\u6301",
-        tip: "\u5411 {payee} \u7684\u4ED8\u6B3E\u5DF2\u5B8C\u6210\u3002\u60A8\u53EF\u4EE5\u5728\u60A8\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u4ED8\u6B3E\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002"
+        payment: "\u8D2D\u4E70\u6210\u529F",
+        subscription: "\u8BA2\u9605\u6210\u529F",
+        setup: "\u8BA2\u9605\u6210\u529F",
+        donate: "\u6350\u8D60\u6210\u529F",
+        tip: "\u5411 {payee} \u7684\u4ED8\u6B3E\u5DF2\u5B8C\u6210\u3002\u60A8\u53EF\u4EE5\u5728\u60A8\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u4ED8\u6B3E\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002",
+        summary: {
+          paid: "\u672C\u6B21\u652F\u4ED8 {amount}"
+        }
       },
       vendor: {
         accountRequired: "\u60A8\u5F53\u524D\u4F7F\u7528\u7684\u662F\u975E\u7EDF\u4E00\u8D26\u6237\u767B\u5F55\uFF0C\u6B64\u670D\u52A1\u9700\u8981\u60A8\u4F7F\u7528\u7EDF\u4E00\u8D26\u6237\u3002\u8BF7\u5207\u6362\u5230\u7EDF\u4E00\u8D26\u6237\u767B\u5F55\u540E\u91CD\u8BD5\u3002",
@@ -397,15 +402,49 @@ export default flat({
         schedule: {
           periodic: "\u6BCF{interval}\u53D1\u653E {amount}\u3002",
           withRefresh: "\u6BCF{interval}\u53D1\u653E {amount}\uFF0C\u672A\u4F7F\u7528\u989D\u5EA6\u5C06\u5728\u4E0B\u6B21\u53D1\u653E\u65F6\u8FC7\u671F\u3002"
-        }
+        },
+        topupDescription: "\u8D2D\u4E70 {creditName}\uFF0C\u5355\u4EF7 {unitPrice}/\u989D\u5EA6\u3002"
       },
       emptyItems: {
         title: "\u6CA1\u6709\u4EFB\u4F55\u8D2D\u4E70\u9879\u76EE",
         description: "\u53EF\u80FD\u8FD9\u4E2A\u4ED8\u6B3E\u94FE\u63A5\u6CA1\u6709\u6B63\u786E\u914D\u7F6E"
       },
+      error: {
+        title: "\u51FA\u4E86\u70B9\u95EE\u9898"
+      },
       orderSummary: "\u8BA2\u5355\u6982\u89C8",
+      orderSummarySubtitle: "\u672C\u6B21\u4EA4\u6613\u5305\u542B\u4EE5\u4E0B\u9879\u76EE",
       paymentDetails: "\u652F\u4ED8\u4FE1\u606F",
       productListTotal: "\u5305\u62EC {total} \u9879",
+      headerTitle: {
+        subscribe: "\u8BA2\u9605 {name}",
+        purchase: "\u8D2D\u4E70 {name}"
+      },
+      planFeatures: "\u529F\u80FD\u7279\u6027",
+      typeBadge: {
+        subscription: "\u8BA2\u9605",
+        topup: "\u5145\u503C",
+        oneTime: "\u4E00\u6B21\u6027\u8D2D\u4E70"
+      },
+      subtitle: {
+        subscriptionInterval: "{interval}\u8BA2\u9605",
+        creditsTopup: "\u4F59\u989D\u5145\u503C",
+        addonFor: "{product} \u7684\u9644\u52A0\u9879",
+        oneTime: "\u4E00\u6B21\u6027\u8D2D\u4E70"
+      },
+      creditTopup: {
+        title: "\u8D2D\u4E70 {name}",
+        question: "\u4F60\u9700\u8981\u591A\u5C11 {symbol}\uFF1F",
+        credits: "\u989D\u5EA6",
+        increment: "\u6BCF\u6B21\u589E\u51CF {step} {symbol}",
+        validFor: "\u989D\u5EA6\u5728\u8D2D\u4E70\u540E {duration} {unit}\u5185\u6709\u6548\u3002",
+        willReceive: "\u4F60\u5C06\u83B7\u5F97",
+        packInfo: "\u5305\u542B {packs} \u4E2A\u989D\u5EA6\u5305\uFF08\u6BCF\u5305 {perPack}\uFF09",
+        autoMatch: "\u6211\u4EEC\u5C06\u81EA\u52A8\u5339\u914D\u6700\u63A5\u8FD1\u7684\u989D\u5EA6\u5305\u3002",
+        autoMatchTooltip: "{symbol} \u6309\u6BCF\u5305 {step} \u4E2A\u51FA\u552E",
+        pendingWarning: "\u60A8\u6709 {pendingAmount} \u7684\u4F7F\u7528\u8D85\u989D\uFF0C\u81F3\u5C11\u9700\u8981\u8D2D\u4E70 {minCredits} \u624D\u80FD\u6062\u590D\u8BBF\u95EE\u3002",
+        pendingEnough: "\u60A8\u6709 {pendingAmount} \u7684\u4F7F\u7528\u8D85\u989D\uFF0C\u6263\u9664\u540E\u60A8\u7684\u53EF\u7528\u4F59\u989D\u5C06\u4E3A {availableAmount}\u3002"
+      },
       connectModal: {
         title: "{action}",
         scan: "\u4F7F\u7528\u4EE5\u4E0B\u65B9\u5F0F\u5B8C\u6210\u672C\u6B21\u652F\u4ED8",

package/es/payment/form/index.js

@@ -144,6 +144,8 @@ export default function PaymentForm({
   } = useFormContext();
   const errorRef = useRef(null);
   const processingRef = useRef(false);
+  const idempotencyKeyRef = useRef("");
+  const sessionFingerprintRef = useRef("");
   const quantityInventoryStatus = useMemo(() => {
     let status = true;
     for (const item of checkoutSession.line_items) {
@@ -741,10 +743,17 @@ export default function PaymentForm({
     try {
       let result;
       const previewRate = checkoutSession.line_items?.find((item) => item?.exchange_rate)?.exchange_rate || void 0;
+      const items = checkoutSession.line_items || [];
+      const itemsSig = items.map((i) => `${i.upsell_price_id || i.price_id}:${i.quantity}`).join("|");
+      const fingerprint = `${checkoutSession.id}-${paymentCurrency?.id}-${itemsSig}`;
+      if (fingerprint !== sessionFingerprintRef.current || !idempotencyKeyRef.current) {
+        sessionFingerprintRef.current = fingerprint;
+        idempotencyKeyRef.current = generateIdempotencyKey(checkoutSession.id, paymentCurrency?.id || "");
+      }
       const payload = {
         ...data,
         // Final Freeze: Include these for new quote creation at submit
-        idempotency_key: generateIdempotencyKey(checkoutSession.id, paymentCurrency?.id || ""),
+        idempotency_key: idempotencyKeyRef.current,
         preview_rate: previewRate || void 0,
         price_confirmed: state.priceChangeConfirm?.formData ? true : void 0
       };

package/lib/checkout-v2/checkout-v2.d.ts

@@ -0,0 +1,2 @@
+import type { CheckoutV2Props } from './types';
+export default function CheckoutV2({ id, onPaid, onError, theme, mode, extraParams, }: CheckoutV2Props): import("react").JSX.Element;

package/lib/checkout-v2/checkout-v2.js

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = CheckoutV2;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _ahooks = require("ahooks");
+var _ufo = require("ufo");
+var _material = require("@mui/material");
+var _paymentReactHeadless = require("@blocklet/payment-react-headless");
+var _api = _interopRequireDefault(require("../libs/api"));
+var _util = require("../libs/util");
+var _theme = require("../theme");
+var _mobile = require("../hooks/mobile");
+var _checkoutLayout = _interopRequireDefault(require("./layouts/checkout-layout"));
+var _scenarioRouter = _interopRequireDefault(require("./panels/left/scenario-router"));
+var _paymentPanel = _interopRequireDefault(require("./panels/right/payment-panel"));
+var _checkoutDialogs = _interopRequireDefault(require("./components/dialogs/checkout-dialogs"));
+var _loadingView = _interopRequireDefault(require("./views/loading-view"));
+var _errorView = _interopRequireDefault(require("./views/error-view"));
+var _successView = _interopRequireDefault(require("./views/success-view"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const plinkPromises = {};
+function startFromPaymentLink(id, params) {
+  if (!plinkPromises[id]) {
+    plinkPromises[id] = _api.default.post(`/api/checkout-sessions/start/${id}?${(0, _util.mergeExtraParams)(params)}`).then(res => res?.data).finally(() => {
+      setTimeout(() => {
+        delete plinkPromises[id];
+      }, 3e3);
+    });
+  }
+  return plinkPromises[id];
+}
+function CheckoutRouter({
+  onPaid = void 0,
+  onError = void 0,
+  mode = "inline"
+}) {
+  const {
+    isLoading,
+    error,
+    errorCode,
+    session
+  } = (0, _paymentReactHeadless.useSessionContext)();
+  const submit = (0, _paymentReactHeadless.useSubmitFeature)();
+  const {
+    isMobile
+  } = (0, _mobile.useMobile)();
+  (0, _react.useEffect)(() => {
+    if (error && onError) {
+      onError(new Error(error));
+    }
+  }, [error, onError]);
+  (0, _react.useEffect)(() => {
+    if (submit.status === "completed" && submit.result && onPaid) {
+      onPaid(submit.result);
+    }
+  }, [submit.status, submit.result, onPaid]);
+  if (isLoading) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_loadingView.default, {
+      mode
+    });
+  }
+  if (error) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_errorView.default, {
+      error,
+      errorCode,
+      mode
+    });
+  }
+  const isCompleted = submit.status === "completed";
+  const mobileCompleted = isCompleted && isMobile;
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_checkoutLayout.default, {
+      left: mobileCompleted ? null : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          ...(isCompleted ? {
+            opacity: 0.45,
+            pointerEvents: "none",
+            filter: "grayscale(0.3)",
+            transition: "all 0.5s ease"
+          } : {})
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_scenarioRouter.default, {})
+      }),
+      right: isCompleted ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_successView.default, {
+        submit,
+        session
+      }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_paymentPanel.default, {}),
+      mode
+    }), !isCompleted && /* @__PURE__ */(0, _jsxRuntime.jsx)(_checkoutDialogs.default, {})]
+  });
+}
+function CheckoutV2({
+  id,
+  onPaid,
+  onError,
+  theme = "default",
+  mode = "inline",
+  extraParams = {}
+}) {
+  if (!id.startsWith("plink_") && !id.startsWith("cs_")) {
+    throw new Error("Either a checkoutSession or a paymentLink id is required.");
+  }
+  const isPaymentLink = id.startsWith("plink_");
+  const [resolvedSessionId, setResolvedSessionId] = (0, _react.useState)(isPaymentLink ? null : id);
+  (0, _ahooks.useRequest)(async () => {
+    if (!isPaymentLink) return null;
+    const data = await startFromPaymentLink(id, extraParams);
+    const csId = data?.checkoutSession?.id;
+    if (csId) {
+      setResolvedSessionId(csId);
+      if (mode === "standalone") {
+        window.history.replaceState(null, "", (0, _ufo.joinURL)((0, _util.getPrefix)(), `/checkout/pay/${csId}?${(0, _util.mergeExtraParams)(extraParams)}`));
+      }
+    }
+    return data;
+  }, {
+    ready: isPaymentLink
+  });
+  if (!resolvedSessionId) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_loadingView.default, {
+      mode
+    });
+  }
+  const content = /* @__PURE__ */(0, _jsxRuntime.jsx)(_paymentReactHeadless.CheckoutProvider, {
+    sessionId: resolvedSessionId,
+    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(CheckoutRouter, {
+      onPaid,
+      onError,
+      mode
+    })
+  });
+  if (theme === "inherit") {
+    return content;
+  }
+  if (theme && typeof theme === "object") {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_theme.PaymentThemeProvider, {
+      theme,
+      children: content
+    });
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_theme.PaymentThemeProvider, {
+    children: content
+  });
+}

package/lib/checkout-v2/components/dialogs/checkout-dialogs.d.ts

@@ -0,0 +1 @@
+export default function CheckoutDialogs(): import("react").JSX.Element;

package/lib/checkout-v2/components/dialogs/checkout-dialogs.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = CheckoutDialogs;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _paymentReactHeadless = require("@blocklet/payment-react-headless");
+var _stripe = _interopRequireDefault(require("../../../payment/form/stripe"));
+var _confirm = _interopRequireDefault(require("../../../components/confirm"));
+var _priceChangeConfirm = _interopRequireDefault(require("../../../components/price-change-confirm"));
+var _format = require("../../utils/format");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function getRedirectUrl(session) {
+  try {
+    const params = new URLSearchParams(window.location.search);
+    const redirect = params.get("redirect");
+    if (redirect) return decodeURIComponent(redirect);
+  } catch {}
+  if (session?.success_url) return session.success_url;
+  if (session?.payment_link?.after_completion?.redirect?.url) {
+    return session.payment_link.after_completion.redirect.url;
+  }
+  return void 0;
+}
+function CheckoutDialogs() {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    session
+  } = (0, _paymentReactHeadless.useSessionContext)();
+  const {
+    currency,
+    stripe
+  } = (0, _paymentReactHeadless.usePaymentMethodContext)();
+  const submit = (0, _paymentReactHeadless.useSubmitFeature)();
+  const form = (0, _paymentReactHeadless.useCustomerFormFeature)();
+  const mode = session?.mode || "payment";
+  const stripeContext = submit.context?.type === "stripe" ? submit.context : null;
+  const showStripeDialog = submit.status === "waiting_stripe" && stripeContext?.clientSecret;
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [showStripeDialog && /* @__PURE__ */(0, _jsxRuntime.jsx)(_stripe.default, {
+      clientSecret: stripeContext.clientSecret,
+      intentType: stripeContext.intentType || "payment_intent",
+      publicKey: stripe?.publishableKey || "",
+      mode,
+      customer: {
+        name: form.values.customer_name,
+        email: form.values.customer_email,
+        phone: form.values.customer_phone,
+        address: form.values.billing_address
+      },
+      returnUrl: getRedirectUrl(session),
+      onConfirm: submit.stripeConfirm,
+      onCancel: submit.stripeCancel
+    }), submit.status === "confirming_price" && submit.context?.type === "price_change" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_priceChangeConfirm.default, {
+      open: true,
+      changePercent: submit.context.changePercent,
+      onConfirm: submit.confirm,
+      onCancel: submit.cancel,
+      loading: false
+    }), submit.status === "confirming_fast_pay" && submit.context?.type === "fast_pay" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
+      onConfirm: submit.confirm,
+      onCancel: submit.cancel,
+      title: submit.context.payType === "credit" ? t("payment.checkout.fastPay.credit.title") : t("payment.checkout.fastPay.title"),
+      message: submit.context.payType === "credit" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: t("payment.checkout.fastPay.credit.meteringSubscriptionMessage", {
+          available: `${(0, _format.formatTokenAmount)(submit.context.amount || "0", currency)} ${currency?.symbol || ""}`
+        })
+      }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          children: t("payment.checkout.fastPay.autoPaymentReason")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Divider, {
+          sx: {
+            mt: 1.5,
+            mb: 1.5
+          }
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          spacing: 1,
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            sx: {
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "space-between"
+            },
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                color: "text.primary",
+                whiteSpace: "nowrap"
+              },
+              children: t("payment.checkout.fastPay.payer")
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                color: "text.secondary",
+                fontSize: 14
+              },
+              children: submit.context.payer ? `${submit.context.payer.slice(0, 10)}...${submit.context.payer.slice(-6)}` : ""
+            })]
+          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            sx: {
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "space-between"
+            },
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                color: "text.primary"
+              },
+              children: t("payment.checkout.fastPay.amount")
+            }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+              children: [(0, _format.formatTokenAmount)(submit.context.amount || "0", currency), " ", currency?.symbol || ""]
+            })]
+          })]
+        })]
+      }),
+      loading: false,
+      color: "primary"
+    }), submit.status === "credit_insufficient" && submit.context?.type === "credit_insufficient" && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
+      onConfirm: submit.cancel,
+      onCancel: submit.cancel,
+      title: t("payment.checkout.fastPay.credit.insufficientTitle"),
+      message: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: t("payment.checkout.fastPay.credit.insufficientMessage")
+      }),
+      confirm: t("common.confirm")
+    })]
+  });
+}

package/lib/checkout-v2/components/left/billing-toggle.d.ts

@@ -0,0 +1,6 @@
+import type { BillingIntervalData } from '@blocklet/payment-react-headless';
+interface BillingToggleProps {
+    billingInterval: BillingIntervalData | null;
+}
+export default function BillingToggle({ billingInterval }: BillingToggleProps): import("react").JSX.Element | null;
+export {};