@blocklet/payment-react 1.25.9 → 1.26.0

package/es/checkout-v2/panels/right/payment-panel.js

@@ -0,0 +1,644 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import CreditCardIcon from "@mui/icons-material/CreditCard";
+import CurrencyBitcoinIcon from "@mui/icons-material/CurrencyBitcoin";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
+import LocalOfferOutlinedIcon from "@mui/icons-material/LocalOfferOutlined";
+import CloseIcon from "@mui/icons-material/Close";
+import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
+import {
+  Avatar,
+  Box,
+  Button,
+  CircularProgress,
+  Collapse,
+  Divider,
+  Drawer,
+  MenuItem,
+  Select,
+  Skeleton,
+  Stack,
+  ToggleButton,
+  ToggleButtonGroup,
+  Tooltip,
+  Typography
+} from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import {
+  useCheckoutStatus,
+  usePaymentMethodFeature,
+  useCustomerFormFeature,
+  useSubmitFeature,
+  usePricingFeature,
+  useSessionContext,
+  useLineItems,
+  usePromotion,
+  useExchangeRate
+} from "@blocklet/payment-react-headless";
+import { joinURL } from "ufo";
+import { usePaymentContext } from "../../../contexts/payment.js";
+import { useMobile } from "../../../hooks/mobile.js";
+import { getPrefix } from "../../../libs/util.js";
+import OverdueInvoicePayment from "../../../components/over-due-invoice-payment.js";
+import { tSafe, whiteTooltipSx } from "../../utils/format.js";
+import CustomerInfoCard from "../../components/right/customer-info-card.js";
+import SubscriptionDisclaimer from "../../components/right/subscription-disclaimer.js";
+import StatusFeedback from "../../components/right/status-feedback.js";
+import PromotionInput from "../../components/left/promotion-input.js";
+export default function PaymentPanel() {
+  const { t, locale } = useLocaleContext();
+  const { session, sessionData, subscription, refresh } = useSessionContext();
+  const { isDonation } = useCheckoutStatus();
+  const paymentMethod = usePaymentMethodFeature();
+  const form = useCustomerFormFeature();
+  const submit = useSubmitFeature();
+  const pricing = usePricingFeature();
+  const { session: didSession, connect, prefix: paymentKitPrefix } = usePaymentContext();
+  const { inventoryOk } = useLineItems();
+  const promotion = usePromotion();
+  const rate = useExchangeRate();
+  const { isMobile } = useMobile();
+  const isAmountLoading = paymentMethod.switching || rate.hasDynamicPricing && rate.status === "loading";
+  const { currency, types, isStripe, isCrypto } = paymentMethod;
+  const mode = session?.mode || "payment";
+  const discounts = session?.discounts || [];
+  const isLoggedIn = !!didSession?.user;
+  const actionLabel = isDonation ? t("payment.checkout.donate") : t(`payment.checkout.${mode}`);
+  const buttonLabel = isLoggedIn ? actionLabel : t("payment.checkout.connect", { action: actionLabel });
+  const [customerLimited, setCustomerLimited] = useState(false);
+  const [mobileDetailsOpen, setMobileDetailsOpen] = useState(false);
+  const [promoDrawerOpen, setPromoDrawerOpen] = useState(false);
+  useEffect(() => {
+    if (submit.status === "failed" && submit.context?.code === "CUSTOMER_LIMITED") {
+      setCustomerLimited(true);
+    }
+  }, [submit.status, submit.context]);
+  const canSubmit = submit.status === "idle" && session?.status === "open" && inventoryOk;
+  const isProcessing = ["submitting", "waiting_did"].includes(submit.status);
+  const handleAction = useCallback(() => {
+    if (!canSubmit) return;
+    submit.lock();
+    if (isLoggedIn || isDonation) {
+      submit.execute();
+      return;
+    }
+    didSession?.login?.(() => {
+      Promise.all([refresh(true), form.refetchCustomer()]).then(() => submit.execute()).catch((err) => {
+        console.error("Post-login refresh failed:", err);
+      });
+    });
+  }, [canSubmit, isLoggedIn, isDonation, didSession, refresh, form, submit]);
+  useEffect(() => {
+    if (didSession?.user && !submit.status.startsWith("submitting")) {
+      form.refetchCustomer();
+    }
+  }, [didSession?.user]);
+  const cryptoType = types.find((tp) => tp.type === "crypto");
+  const cryptoMethods = useMemo(
+    () => paymentMethod.available.filter((m) => m.type !== "stripe"),
+    [paymentMethod.available]
+  );
+  const networks = useMemo(() => {
+    if (!cryptoMethods.length) return [];
+    return cryptoMethods.map((m) => ({
+      id: m.id,
+      name: m.name,
+      logo: m.logo || "",
+      currencies: m.payment_currencies || []
+    }));
+  }, [cryptoMethods]);
+  const currentMethodId = paymentMethod.current?.id || "";
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && canSubmit && submit.status === "idle") {
+        const tag = e.target?.tagName?.toLowerCase();
+        if (tag === "textarea") return;
+        handleAction();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [canSubmit, submit.status, handleAction]);
+  const didConnectOpenedRef = useRef(false);
+  useEffect(() => {
+    if (submit.status !== "waiting_did") {
+      didConnectOpenedRef.current = false;
+      return;
+    }
+    const ctx = submit.context;
+    if (ctx?.type !== "did_connect" || !connect) return;
+    if (didConnectOpenedRef.current) return;
+    didConnectOpenedRef.current = true;
+    const didPrefix = `${paymentKitPrefix}/api/did`.replace(/([^:])\/\//g, "$1/");
+    connect.open({
+      locale,
+      action: ctx.action,
+      prefix: didPrefix,
+      saveConnect: false,
+      extraParams: ctx.extraParams,
+      onSuccess: () => {
+        connect.close();
+      },
+      onClose: () => {
+        connect.close();
+        submit.reset();
+      },
+      onError: (err) => {
+        console.error("DID Connect error:", err);
+        submit.reset();
+      },
+      messages: {
+        title: t("payment.checkout.connectModal.title", { action: buttonLabel }),
+        scan: t("payment.checkout.connectModal.scan"),
+        confirm: t("payment.checkout.connectModal.confirm")
+      }
+    });
+  }, [submit.status, submit.context, connect, locale, t, buttonLabel]);
+  const activeType = types.find((tp) => tp.active)?.type || "crypto";
+  const hasMultipleTypes = types.length > 1;
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }, children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          overflowY: "auto",
+          minHeight: 0,
+          "&::-webkit-scrollbar": { display: "none" },
+          scrollbarWidth: "none"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              sx: {
+                fontSize: 13,
+                fontWeight: 700,
+                letterSpacing: "0.02em",
+                color: "text.primary",
+                mb: 2.5
+              },
+              children: t("payment.checkout.paymentDetails")
+            }
+          ),
+          hasMultipleTypes && /* @__PURE__ */ jsx(
+            ToggleButtonGroup,
+            {
+              value: activeType,
+              exclusive: true,
+              onChange: (_, v) => v && paymentMethod.setType(v),
+              fullWidth: true,
+              size: "small",
+              sx: {
+                mb: 2.5,
+                bgcolor: (theme) => theme.palette.mode === "dark" ? "rgba(255,255,255,0.06)" : "grey.100",
+                borderRadius: "10px",
+                p: 0.5,
+                "& .MuiToggleButton-root": {
+                  textTransform: "none",
+                  borderRadius: "8px !important",
+                  py: 0.75,
+                  border: "none",
+                  fontSize: 14,
+                  fontWeight: 500,
+                  gap: 0.75,
+                  color: "text.secondary"
+                },
+                "& .Mui-selected": {
+                  bgcolor: "background.paper !important",
+                  color: "text.primary",
+                  fontWeight: 600,
+                  boxShadow: (theme) => theme.palette.mode === "dark" ? "0 1px 3px rgba(0,0,0,0.3)" : "0 1px 3px rgba(0,0,0,0.08)",
+                  "&:hover": { bgcolor: "background.paper !important" }
+                }
+              },
+              children: types.map((tp) => /* @__PURE__ */ jsxs(ToggleButton, { value: tp.type, children: [
+                tp.type === "stripe" ? /* @__PURE__ */ jsx(CreditCardIcon, { sx: { fontSize: 18 } }) : /* @__PURE__ */ jsx(CurrencyBitcoinIcon, { sx: { fontSize: 18 } }),
+                tp.label || (tp.type === "stripe" ? "Card" : "Crypto")
+              ] }, tp.type))
+            }
+          ),
+          isCrypto && networks.length > 0 && /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1.5, sx: { mb: 2.5 }, children: [
+            networks.length > 1 && /* @__PURE__ */ jsxs(Box, { sx: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  sx: {
+                    fontSize: 12,
+                    fontWeight: 600,
+                    color: "text.secondary",
+                    mb: 0.5,
+                    letterSpacing: "0.02em"
+                  },
+                  children: t("common.network")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Select,
+                {
+                  value: currentMethodId,
+                  onChange: (e) => {
+                    const network = networks.find((n) => n.id === e.target.value);
+                    if (network?.currencies?.[0]) {
+                      paymentMethod.setCurrency(network.currencies[0].id);
+                    }
+                  },
+                  fullWidth: true,
+                  size: "small",
+                  sx: {
+                    borderRadius: "8px",
+                    bgcolor: (theme) => theme.palette.mode === "dark" ? "rgba(255,255,255,0.06)" : "grey.50",
+                    "& .MuiOutlinedInput-notchedOutline": { borderColor: "transparent" },
+                    "&:hover .MuiOutlinedInput-notchedOutline": { borderColor: "divider" },
+                    "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "primary.main", borderWidth: 1 },
+                    "& .MuiSelect-select": { display: "flex", alignItems: "center", gap: 1, py: 1 }
+                  },
+                  children: networks.map((net) => /* @__PURE__ */ jsxs(MenuItem, { value: net.id, sx: { gap: 1 }, children: [
+                    net.logo && /* @__PURE__ */ jsx(Avatar, { src: net.logo, sx: { width: 20, height: 20 } }),
+                    /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 14 }, children: net.name })
+                  ] }, net.id))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(Box, { sx: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  sx: {
+                    fontSize: 12,
+                    fontWeight: 600,
+                    color: "text.secondary",
+                    mb: 0.5,
+                    letterSpacing: "0.02em"
+                  },
+                  children: t("common.currency")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Select,
+                {
+                  value: currency?.id || "",
+                  onChange: (e) => paymentMethod.setCurrency(e.target.value),
+                  fullWidth: true,
+                  size: "small",
+                  sx: {
+                    borderRadius: "8px",
+                    bgcolor: (theme) => theme.palette.mode === "dark" ? "rgba(255,255,255,0.06)" : "grey.50",
+                    "& .MuiOutlinedInput-notchedOutline": { borderColor: "transparent" },
+                    "&:hover .MuiOutlinedInput-notchedOutline": { borderColor: "divider" },
+                    "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "primary.main", borderWidth: 1 },
+                    "& .MuiSelect-select": { display: "flex", alignItems: "center", gap: 1, py: 1 }
+                  },
+                  children: (isCrypto && networks.length > 1 ? networks.find((n) => n.id === currentMethodId)?.currencies || [] : cryptoType?.currencies || []).map((cur) => /* @__PURE__ */ jsxs(MenuItem, { value: cur.id, sx: { gap: 1 }, children: [
+                    cur.logo && /* @__PURE__ */ jsx(Avatar, { src: cur.logo, sx: { width: 20, height: 20 } }),
+                    /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 14 }, children: cur.symbol }),
+                    /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 12, color: "text.secondary", ml: 0.5 }, children: cur.name })
+                  ] }, cur.id))
+                }
+              )
+            ] })
+          ] }),
+          isStripe && currency && /* @__PURE__ */ jsxs(Box, { sx: { mb: 2.5 }, children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                sx: {
+                  fontSize: 12,
+                  fontWeight: 600,
+                  color: "text.secondary",
+                  mb: 0.5,
+                  letterSpacing: "0.02em"
+                },
+                children: t("common.currency")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                value: currency.id || "usd",
+                readOnly: true,
+                fullWidth: true,
+                size: "small",
+                IconComponent: () => null,
+                sx: {
+                  borderRadius: "8px",
+                  bgcolor: (theme) => theme.palette.mode === "dark" ? "rgba(255,255,255,0.06)" : "grey.50",
+                  "& .MuiOutlinedInput-notchedOutline": { borderColor: "transparent !important" },
+                  "& .MuiSelect-select": { display: "flex", alignItems: "center", gap: 1, py: 1 }
+                },
+                children: /* @__PURE__ */ jsxs(MenuItem, { value: currency.id || "usd", sx: { gap: 1 }, children: [
+                  currency.logo && /* @__PURE__ */ jsx(Avatar, { src: currency.logo, sx: { width: 20, height: 20 } }),
+                  /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 14, fontWeight: 600 }, children: currency.symbol }),
+                  /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 12, color: "text.secondary", ml: 0.5 }, children: currency.name })
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(CustomerInfoCard, { form, isLoggedIn })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { className: "cko-v2-submit-btn", sx: { flexShrink: 0 }, children: [
+      isMobile && pricing.staking && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            onClick: () => setMobileDetailsOpen(!mobileDetailsOpen),
+            sx: { display: "flex", alignItems: "center", justifyContent: "space-between", cursor: "pointer", mb: 1 },
+            children: [
+              /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 13, fontWeight: 600, color: "text.secondary" }, children: t("payment.checkout.orderSummary") }),
+              /* @__PURE__ */ jsx(
+                ExpandMoreIcon,
+                {
+                  sx: {
+                    fontSize: 18,
+                    color: "text.secondary",
+                    transition: "0.2s",
+                    transform: mobileDetailsOpen ? "rotate(180deg)" : "rotate(0deg)"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(Collapse, { in: mobileDetailsOpen, children: [
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 1 }, children: [
+            /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [
+              /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 13, color: "text.secondary" }, children: t("payment.checkout.staking.title") }),
+              /* @__PURE__ */ jsx(HelpOutlineIcon, { sx: { fontSize: 14, color: "text.disabled" } })
+            ] }),
+            isAmountLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 60, height: 18 }) : /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 13, fontWeight: 600 }, children: [
+              "+",
+              pricing.staking
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Divider, { sx: { mb: 1 } })
+        ] })
+      ] }),
+      !isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Divider, { sx: { mb: 2 } }),
+        pricing.staking && /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 1 }, children: [
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [
+            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 14, color: "text.secondary" }, children: t("payment.checkout.staking.title") }),
+            /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                title: t("payment.checkout.staking.tooltip"),
+                placement: "top",
+                arrow: true,
+                slotProps: { popper: { sx: whiteTooltipSx } },
+                children: /* @__PURE__ */ jsx(HelpOutlineIcon, { sx: { fontSize: 16, color: "text.disabled" } })
+              }
+            )
+          ] }),
+          isAmountLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 80, height: 22 }) : /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 14, fontWeight: 600 }, children: [
+            "+",
+            pricing.staking
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          PromotionInput,
+          {
+            promotion: {
+              applied: promotion.applied,
+              code: promotion.code,
+              active: promotion.active,
+              inactiveReason: promotion.inactiveReason,
+              apply: promotion.apply,
+              remove: promotion.remove
+            },
+            discounts,
+            discountAmount: pricing.discount
+          }
+        )
+      ] }),
+      (() => {
+        const totalStr = pricing.total || "0";
+        const parts = totalStr.split(/\s+/);
+        const num = parts[0] || "0";
+        const sym = parts.slice(1).join(" ") || currency?.symbol || "";
+        const dotIdx = num.indexOf(".");
+        const intPart = dotIdx >= 0 ? num.slice(0, dotIdx) : num;
+        const decPart = dotIdx >= 0 ? num.slice(dotIdx) : "";
+        return /* @__PURE__ */ jsxs(Box, { sx: { mb: isMobile ? 1.5 : 2.5 }, children: [
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "flex-end", children: [
+            /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 700, fontSize: 14, color: "text.secondary", pb: 0.5 }, children: t("common.totalDue") }),
+            isAmountLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 140, height: 44 }) : /* @__PURE__ */ jsxs(Box, { sx: { textAlign: "right" }, children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  component: "span",
+                  sx: {
+                    fontSize: { xs: 28, md: 36 },
+                    fontWeight: 800,
+                    color: "text.primary",
+                    lineHeight: 1,
+                    transition: "opacity 0.3s ease"
+                  },
+                  children: intPart
+                }
+              ),
+              decPart && /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  component: "span",
+                  sx: { fontSize: { xs: 16, md: 20 }, fontWeight: 700, color: "text.secondary", lineHeight: 1 },
+                  children: decPart
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  component: "span",
+                  sx: { fontSize: { xs: 14, md: 16 }, fontWeight: 600, color: "text.secondary", ml: 0.75 },
+                  children: sym
+                }
+              )
+            ] })
+          ] }),
+          (pricing.usdEquivalent || isMobile && promotion.active) && !isAmountLoading && /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mt: 0.25 }, children: [
+            (() => {
+              if (isMobile && !promotion.applied && promotion.active) {
+                return /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    onClick: () => setPromoDrawerOpen(true),
+                    sx: { display: "flex", alignItems: "center", gap: 0.5, cursor: "pointer" },
+                    children: [
+                      /* @__PURE__ */ jsx(LocalOfferOutlinedIcon, { sx: { fontSize: 14, color: "primary.main" } }),
+                      /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 12, fontWeight: 600, color: "primary.main" }, children: tSafe(t, "payment.checkout.promotion.add", "Add promo code") })
+                    ]
+                  }
+                );
+              }
+              if (isMobile && promotion.applied) {
+                return /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
+                  /* @__PURE__ */ jsx(LocalOfferOutlinedIcon, { sx: { fontSize: 14, color: "success.main" } }),
+                  /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 12, fontWeight: 600, color: "success.main" }, children: promotion.code }),
+                  pricing.discount && /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 11, color: "text.secondary" }, children: [
+                    "(-",
+                    pricing.discount,
+                    ")"
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    CloseIcon,
+                    {
+                      onClick: promotion.remove,
+                      sx: { fontSize: 14, color: "error.main", cursor: "pointer", ml: 0.25 }
+                    }
+                  )
+                ] });
+              }
+              return /* @__PURE__ */ jsx(Box, {});
+            })(),
+            pricing.usdEquivalent && /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 13, color: "text.secondary" }, children: [
+              "\u2248 ",
+              pricing.usdEquivalent
+            ] })
+          ] })
+        ] });
+      })(),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "contained",
+          size: "large",
+          fullWidth: true,
+          disabled: !canSubmit || submit.status === "waiting_stripe",
+          onClick: handleAction,
+          startIcon: isProcessing ? /* @__PURE__ */ jsx(CircularProgress, { size: 20, color: "inherit" }) : null,
+          endIcon: !isProcessing ? /* @__PURE__ */ jsx(ArrowForwardIcon, {}) : void 0,
+          sx: {
+            py: 1.5,
+            fontSize: "1.1rem",
+            fontWeight: 600,
+            textTransform: "none",
+            borderRadius: "12px"
+          },
+          children: isProcessing ? `${t("payment.checkout.processing")}...` : buttonLabel
+        }
+      ),
+      isMobile && /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          spacing: 0.75,
+          sx: { mt: 1.5, opacity: 0.55 },
+          children: [
+            /* @__PURE__ */ jsx(LockOutlinedIcon, { sx: { fontSize: 13, color: "text.secondary" } }),
+            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 11, color: "text.secondary" }, children: tSafe(t, "payment.checkout.ssl", "SSL Secure") }),
+            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 11, color: "text.disabled" }, children: "\xB7" }),
+            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 11, color: "text.secondary" }, children: tSafe(t, "common.terms", "Terms") }),
+            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 11, color: "text.disabled" }, children: "|" }),
+            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 11, color: "text.secondary" }, children: tSafe(t, "common.privacy", "Privacy") })
+          ]
+        }
+      )
+    ] }),
+    isMobile && /* @__PURE__ */ jsxs(
+      Drawer,
+      {
+        anchor: "bottom",
+        open: promoDrawerOpen,
+        onClose: () => setPromoDrawerOpen(false),
+        PaperProps: {
+          sx: {
+            borderRadius: "16px 16px 0 0",
+            p: 3,
+            pb: 4,
+            minHeight: "30vh"
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(Box, { sx: { width: 40, height: 4, bgcolor: "divider", borderRadius: 2, mx: "auto", mb: 3 } }),
+          /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 700, fontSize: 16, mb: 2 }, children: tSafe(t, "payment.checkout.promotion.add", "Add promo code") }),
+          /* @__PURE__ */ jsx(
+            PromotionInput,
+            {
+              initialShowInput: true,
+              promotion: {
+                applied: promotion.applied,
+                code: promotion.code,
+                active: promotion.active,
+                inactiveReason: promotion.inactiveReason,
+                apply: async (...args) => {
+                  const result = await promotion.apply(...args);
+                  if (result.success) setPromoDrawerOpen(false);
+                  return result;
+                },
+                remove: promotion.remove
+              },
+              discounts,
+              discountAmount: pricing.discount
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { sx: { flexShrink: 0 }, children: [
+      /* @__PURE__ */ jsx(
+        SubscriptionDisclaimer,
+        {
+          mode,
+          subscription,
+          staking: pricing.staking,
+          appName: session?.metadata?.app_name || "New Payment Kit"
+        }
+      ),
+      !isMobile && /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          spacing: 0.75,
+          sx: { mt: 2.5, opacity: 0.55 },
+          children: [
+            /* @__PURE__ */ jsx(LockOutlinedIcon, { sx: { fontSize: 13, color: "text.secondary" } }),
+            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 11, color: "text.secondary" }, children: tSafe(t, "payment.checkout.ssl", "SSL Secure") }),
+            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 11, color: "text.disabled" }, children: "\xB7" }),
+            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 11, color: "text.secondary" }, children: tSafe(t, "common.terms", "Terms") }),
+            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 11, color: "text.disabled" }, children: "|" }),
+            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 11, color: "text.secondary" }, children: tSafe(t, "common.privacy", "Privacy") })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(StatusFeedback, { status: submit.status, context: submit.context, onReset: submit.reset }),
+    customerLimited && /* @__PURE__ */ jsx(
+      OverdueInvoicePayment,
+      {
+        customerId: sessionData?.customer?.id || session?.user?.did,
+        onPaid: () => {
+          setCustomerLimited(false);
+          submit.retry();
+        },
+        alertMessage: t("payment.customer.pastDue.alert.customMessage"),
+        detailLinkOptions: {
+          enabled: true,
+          onClick: () => {
+            setCustomerLimited(false);
+            window.open(
+              joinURL(getPrefix(), `/customer/invoice/past-due?referer=${encodeURIComponent(window.location.href)}`),
+              "_self"
+            );
+          }
+        },
+        dialogProps: {
+          open: customerLimited,
+          onClose: () => {
+            setCustomerLimited(false);
+            submit.reset();
+          },
+          title: t("payment.customer.pastDue.alert.title")
+        }
+      }
+    )
+  ] });
+}

package/es/checkout-v2/types.d.ts

@@ -0,0 +1,15 @@
+import type { ThemeOptions, SxProps } from '@mui/material';
+import type { LiteralUnion } from 'type-fest';
+export type CheckoutScenario = 'credit-topup' | 'subscription' | 'composite';
+export type PaymentThemeOptions = ThemeOptions & {
+    sx?: SxProps;
+};
+export interface CheckoutV2Props {
+    id: string;
+    onPaid?: (result: any) => void;
+    onError?: (err: Error) => void;
+    goBack?: () => void;
+    theme?: 'default' | 'inherit' | PaymentThemeOptions;
+    mode?: LiteralUnion<'standalone' | 'inline', string>;
+    extraParams?: Record<string, string>;
+}