@blocklet/payment-react 1.25.9 → 1.26.0

package/es/checkout-v2/components/shared/exchange-rate-footer.js

@@ -0,0 +1,182 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import TuneIcon from "@mui/icons-material/Tune";
+import { Box, Dialog, DialogContent, DialogTitle, Fade, Stack, Tooltip, Typography, keyframes } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import SlippageConfig from "../../../components/slippage-config.js";
+import { whiteTooltipSx } from "../../utils/format.js";
+const ping = keyframes`
+  75%, 100% { transform: scale(2); opacity: 0; }
+`;
+function formatDateTime(ts) {
+  if (!ts) return "\u2014";
+  const d = new Date(ts);
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+export default function ExchangeRateFooter({
+  hasDynamicPricing,
+  rate,
+  slippage,
+  currencySymbol,
+  isSubscription
+}) {
+  const { t } = useLocaleContext();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [pendingConfig, setPendingConfig] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [localSlippage, setLocalSlippage] = useState(slippage?.percent ?? 0.5);
+  useEffect(() => {
+    setLocalSlippage(slippage?.percent ?? 0.5);
+  }, [slippage?.percent]);
+  if (!hasDynamicPricing || !rate.value || rate.status === "unavailable") return null;
+  const rateDisplay = rate.display || `$${Number(rate.value).toFixed(2)}`;
+  const showSlippage = isSubscription && typeof slippage?.set === "function";
+  const handleOpenDialog = () => {
+    setPendingConfig({ mode: "percent", percent: localSlippage });
+    setDialogOpen(true);
+  };
+  const handleCloseDialog = () => {
+    setDialogOpen(false);
+    setPendingConfig(null);
+  };
+  const handleSlippageChange = (value) => {
+    setPendingConfig((prev) => prev ? { ...prev, percent: value } : { mode: "percent", percent: value });
+  };
+  const handleConfigChange = (config) => {
+    setPendingConfig(config);
+  };
+  const handleSubmit = async () => {
+    if (!pendingConfig || !slippage?.set) return;
+    setSubmitting(true);
+    try {
+      setLocalSlippage(pendingConfig.percent);
+      await slippage.set({ ...pendingConfig, base_currency: "USD" });
+      setDialogOpen(false);
+      setPendingConfig(null);
+    } catch (err) {
+      setLocalSlippage(slippage?.percent ?? 0.5);
+      console.error("Failed to update slippage", err);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const labelSx = {
+    fontSize: 11,
+    fontWeight: 700,
+    color: "primary.main",
+    letterSpacing: "0.02em"
+  };
+  const providerName = rate.providerDisplay || rate.provider || "\u2014";
+  const updatedAt = formatDateTime(rate.fetchedAt);
+  const fullRate = `$${rate.value}`;
+  const tooltipSx = whiteTooltipSx;
+  const rowSx = { fontSize: 12, color: "text.secondary", lineHeight: 1.4 };
+  const valSx = { fontSize: 12, fontWeight: 600, color: "text.primary", lineHeight: 1.4 };
+  const tooltipContent = /* @__PURE__ */ jsxs(Stack, { spacing: 0.75, children: [
+    /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 13, fontWeight: 700, color: "text.primary", mb: 0.25 }, children: [
+      "1 ",
+      currencySymbol,
+      " = ",
+      fullRate
+    ] }),
+    /* @__PURE__ */ jsx(Box, { sx: { borderTop: "1px solid", borderColor: "divider", pt: 0.75 }, children: /* @__PURE__ */ jsxs(Stack, { spacing: 0.5, children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", spacing: 2, children: [
+        /* @__PURE__ */ jsx(Typography, { sx: rowSx, children: t("payment.checkout.quote.detailProvider") }),
+        /* @__PURE__ */ jsx(Typography, { sx: valSx, children: providerName })
+      ] }),
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", spacing: 2, children: [
+        /* @__PURE__ */ jsx(Typography, { sx: rowSx, children: t("payment.checkout.quote.detailUpdatedAt") }),
+        /* @__PURE__ */ jsx(Typography, { sx: valSx, children: updatedAt })
+      ] })
+    ] }) })
+  ] });
+  const slippageTooltip = t("payment.checkout.quote.slippage.tooltip");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Box, { sx: { width: "100%", pt: 3, pb: 1, borderTop: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ jsx(Fade, { in: true, timeout: 300, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", sx: { alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx(Tooltip, { title: tooltipContent, placement: "top", arrow: true, slotProps: { popper: { sx: tooltipSx } }, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { cursor: "default" }, children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", width: 8, height: 8, flexShrink: 0 }, children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                position: "absolute",
+                inset: 0,
+                borderRadius: "50%",
+                bgcolor: "#60a5fa",
+                opacity: 0.6,
+                animation: `${ping} 1s cubic-bezier(0, 0, 0.2, 1) infinite`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                position: "relative",
+                width: 8,
+                height: 8,
+                borderRadius: "50%",
+                bgcolor: "primary.main"
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Typography, { sx: labelSx, children: [
+          "1 ",
+          currencySymbol,
+          " \u2248 ",
+          rateDisplay
+        ] })
+      ] }) }),
+      showSlippage && /* @__PURE__ */ jsx(Tooltip, { title: slippageTooltip, placement: "top", arrow: true, slotProps: { popper: { sx: whiteTooltipSx } }, children: /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "row",
+          alignItems: "center",
+          spacing: 0.75,
+          onClick: handleOpenDialog,
+          sx: {
+            cursor: "pointer",
+            "&:hover": { opacity: 1 },
+            "&:hover .tune-icon": { transform: "rotate(90deg)" },
+            transition: "opacity 0.2s"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              TuneIcon,
+              {
+                className: "tune-icon",
+                sx: { fontSize: 16, color: "primary.main", transition: "transform 0.5s" }
+              }
+            ),
+            /* @__PURE__ */ jsxs(Typography, { sx: labelSx, children: [
+              t("payment.checkout.quote.detailSlippage"),
+              " ",
+              localSlippage,
+              "%"
+            ] })
+          ]
+        }
+      ) })
+    ] }) }) }),
+    /* @__PURE__ */ jsxs(Dialog, { open: dialogOpen, onClose: handleCloseDialog, maxWidth: "sm", fullWidth: true, children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: t("payment.checkout.quote.slippage.title") }),
+      /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(
+        SlippageConfig,
+        {
+          value: pendingConfig?.percent ?? localSlippage,
+          onChange: handleSlippageChange,
+          config: pendingConfig || { mode: "percent", percent: localSlippage },
+          onConfigChange: handleConfigChange,
+          exchangeRate: rate.value ? String(rate.value) : null,
+          baseCurrency: "USD",
+          disabled: submitting,
+          sx: { mt: 1 },
+          onCancel: handleCloseDialog,
+          onSave: handleSubmit
+        }
+      ) })
+    ] })
+  ] });
+}

package/es/checkout-v2/components/shared/scenario-badge.d.ts

@@ -0,0 +1,6 @@
+interface ScenarioBadgeProps {
+    livemode: boolean;
+    label?: string;
+}
+export default function ScenarioBadge({ livemode, label }: ScenarioBadgeProps): import("react").JSX.Element;
+export {};

package/es/checkout-v2/components/shared/scenario-badge.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Stack, Typography } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { tSafe } from "../../utils/format.js";
+export default function ScenarioBadge({ livemode, label = void 0 }) {
+  const { t } = useLocaleContext();
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 1.5 }, children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        component: "span",
+        sx: {
+          fontSize: 10,
+          fontWeight: 700,
+          letterSpacing: "0.1em",
+          lineHeight: 1,
+          textTransform: "uppercase",
+          color: "primary.main",
+          bgcolor: (theme) => theme.palette.mode === "dark" ? `${theme.palette.primary.main}1A` : `${theme.palette.primary.main}0D`,
+          px: 1,
+          py: 0.5,
+          borderRadius: "4px"
+        },
+        children: label || tSafe(t, "payment.checkout.orderSummary", "Order Summary")
+      }
+    ),
+    !livemode && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        component: "span",
+        sx: {
+          fontSize: 10,
+          fontWeight: 700,
+          letterSpacing: "0.1em",
+          lineHeight: 1,
+          textTransform: "uppercase",
+          color: (theme) => theme.palette.mode === "dark" ? theme.palette.grey[500] : theme.palette.grey[400],
+          bgcolor: (theme) => theme.palette.mode === "dark" ? "rgba(255,255,255,0.06)" : theme.palette.grey[100],
+          px: 1,
+          py: 0.5,
+          borderRadius: "4px"
+        },
+        children: t("common.livemode")
+      }
+    )
+  ] });
+}

package/es/checkout-v2/components/shared/total-display.d.ts

@@ -0,0 +1,7 @@
+interface TotalDisplayProps {
+    label?: string;
+    total: string;
+    usdEquivalent?: string | null;
+}
+export default function TotalDisplay({ label, total, usdEquivalent }: TotalDisplayProps): import("react").JSX.Element;
+export {};

package/es/checkout-v2/components/shared/total-display.js

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Stack, Typography } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { tSafe } from "../../utils/format.js";
+function splitPrice(total) {
+  if (!total) return { prefix: "", integer: "0", decimal: "", suffix: "" };
+  const trimmed = total.trim();
+  if (trimmed.startsWith("$")) {
+    const numPart = trimmed.slice(1).trim();
+    const dotIdx2 = numPart.indexOf(".");
+    if (dotIdx2 >= 0) {
+      return {
+        prefix: "$",
+        integer: numPart.slice(0, dotIdx2),
+        decimal: `.${numPart.slice(dotIdx2 + 1)}`,
+        suffix: ""
+      };
+    }
+    return { prefix: "$", integer: numPart, decimal: "", suffix: "" };
+  }
+  const parts = trimmed.split(/\s+/);
+  const numStr = parts[0] || "0";
+  const unit = parts.slice(1).join(" ");
+  const dotIdx = numStr.indexOf(".");
+  if (dotIdx >= 0) {
+    return {
+      prefix: "",
+      integer: numStr.slice(0, dotIdx),
+      decimal: `.${numStr.slice(dotIdx + 1)}`,
+      suffix: unit
+    };
+  }
+  return { prefix: "", integer: numStr, decimal: "", suffix: unit };
+}
+export default function TotalDisplay({ label = void 0, total, usdEquivalent = void 0 }) {
+  const { t } = useLocaleContext();
+  const { prefix, integer, decimal, suffix } = splitPrice(total);
+  return /* @__PURE__ */ jsxs(Box, { sx: { pt: 4, borderTop: "1px solid", borderColor: "divider" }, children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "flex-end", children: [
+      /* @__PURE__ */ jsx(Stack, { spacing: 0.5, sx: { pb: 1 }, children: /* @__PURE__ */ jsx(
+        Typography,
+        {
+          sx: {
+            fontSize: 12,
+            fontWeight: 700,
+            letterSpacing: "0.02em",
+            color: "text.disabled"
+          },
+          children: label || tSafe(t, "payment.checkout.totalDueToday", "Total due today")
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "baseline", lineHeight: 1 }, children: [
+        prefix && /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: 36, fontWeight: 500, color: "text.primary", opacity: 0.4 }, children: prefix }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            component: "span",
+            sx: {
+              fontSize: { xs: 54, md: 72 },
+              fontWeight: 800,
+              lineHeight: 1,
+              letterSpacing: "-0.04em",
+              color: "text.primary"
+            },
+            children: integer
+          }
+        ),
+        decimal && /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: 36, fontWeight: 300, color: "text.primary", opacity: 0.3 }, children: decimal }),
+        suffix && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            component: "span",
+            sx: { fontSize: 20, fontWeight: 700, color: "text.disabled", ml: 1, textTransform: "uppercase" },
+            children: suffix
+          }
+        )
+      ] })
+    ] }),
+    usdEquivalent && /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 12, color: "text.disabled", textAlign: "right", mt: 0.5, fontWeight: 500 }, children: [
+      "\u2248 ",
+      usdEquivalent
+    ] })
+  ] });
+}

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

@@ -0,0 +1,2 @@
+export { default as CheckoutV2 } from './checkout-v2';
+export type { CheckoutV2Props, CheckoutScenario } from './types';

package/es/checkout-v2/index.js

@@ -0,0 +1 @@
+export { default as CheckoutV2 } from "./checkout-v2.js";

package/es/checkout-v2/layouts/checkout-layout.d.ts

@@ -0,0 +1,7 @@
+interface CheckoutLayoutProps {
+    left: React.ReactNode;
+    right: React.ReactNode;
+    mode?: string;
+}
+export default function CheckoutLayout({ left, right, mode }: CheckoutLayoutProps): import("react").JSX.Element;
+export {};

package/es/checkout-v2/layouts/checkout-layout.js

@@ -0,0 +1,226 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import { alpha, useTheme } from "@mui/material/styles";
+import Header from "@blocklet/ui-react/lib/Header";
+import { useMobile } from "../../hooks/mobile.js";
+const hiddenScrollbar = {
+  overflowY: "auto",
+  "&::-webkit-scrollbar": { display: "none" },
+  scrollbarWidth: "none"
+};
+const mobileFadeIn = {
+  "@keyframes mobileFadeIn": {
+    from: { opacity: 0 },
+    to: { opacity: 1 }
+  },
+  animation: { xs: "mobileFadeIn 0.4s ease both", md: "none" }
+};
+const fadeIn = {
+  "@keyframes fadeIn": {
+    from: { opacity: 0, transform: "translateY(12px)" },
+    to: { opacity: 1, transform: "translateY(0)" }
+  },
+  animation: { xs: "none", md: "fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both" }
+};
+const slideInFromRight = {
+  "@keyframes slideInRight": {
+    from: { transform: "translateX(100%)" },
+    to: { transform: "translateX(0)" }
+  },
+  animation: { xs: "none", md: "slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards" }
+};
+export default function CheckoutLayout({ left, right, mode = "inline" }) {
+  const isFullScreen = mode === "standalone";
+  const { isMobile } = useMobile();
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+  const hideLeft = left === null;
+  const mobileSubmitBarSx = {};
+  if (isMobile && !hideLeft) {
+    mobileSubmitBarSx["& .cko-v2-submit-btn"] = {
+      position: "fixed",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      zIndex: 999,
+      bgcolor: isDark ? "rgba(30,30,30,0.82)" : "background.paper",
+      backdropFilter: isDark ? "blur(12px)" : "none",
+      p: 1.5,
+      borderTop: "1px solid",
+      borderColor: "divider",
+      boxShadow: isDark ? "0 -4px 20px rgba(0,0,0,0.4)" : "0 -2px 10px rgba(0,0,0,0.08)"
+    };
+  }
+  if (!isFullScreen) {
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: { xs: "column", md: "row" },
+          width: "100%",
+          minHeight: { md: 640 },
+          maxWidth: 1120,
+          mx: "auto",
+          borderRadius: "16px",
+          overflow: "hidden",
+          boxShadow: 1,
+          border: 1,
+          borderColor: "divider",
+          borderLeft: "4px solid",
+          borderLeftColor: "primary.main",
+          // Same bg as left panel so slide-in reveals white over gradient
+          bgcolor: (t) => t.palette.mode === "dark" ? "background.default" : "#f8faff",
+          ...mobileFadeIn
+        },
+        children: [
+          !hideLeft && /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                flex: 1,
+                bgcolor: (t) => t.palette.mode === "dark" ? "background.default" : "#f8faff",
+                p: { xs: 3, md: 5 },
+                pt: { xs: 3, md: 4 },
+                display: "flex",
+                flexDirection: "column",
+                ...fadeIn
+              },
+              children: left
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                width: hideLeft ? "100%" : { xs: "100%", md: 480 },
+                flexShrink: 0,
+                bgcolor: "background.paper",
+                p: { xs: 3, md: 4 },
+                pt: { xs: 3, md: 4 },
+                display: "flex",
+                flexDirection: "column",
+                overflow: { md: "hidden" },
+                ...hideLeft ? {} : slideInFromRight
+              },
+              children: right
+            }
+          )
+        ]
+      }
+    );
+  }
+  const mobileBg = isDark ? theme.palette.background.default : theme.palette.grey[100];
+  const desktopBg = isDark ? theme.palette.background.default : "#f8faff";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        width: "100%",
+        height: { xs: "auto", md: "100vh" },
+        minHeight: { xs: "100vh" },
+        overflow: { md: "hidden" },
+        display: "flex",
+        flexDirection: { xs: "column", md: "row" },
+        position: "relative",
+        // Mobile: solid gray bg; Desktop: gradient over light blue
+        background: isMobile ? mobileBg : `linear-gradient(160deg, ${alpha(theme.palette.primary.main, 0.03)} 0%, ${alpha(theme.palette.primary.main, 0.07)} 50%, ${alpha(theme.palette.primary.main, 0.04)} 100%)`,
+        bgcolor: desktopBg,
+        ...mobileFadeIn
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Header,
+          {
+            sx: {
+              position: "absolute",
+              top: 20,
+              left: 0,
+              right: 0,
+              zIndex: 10,
+              background: "transparent",
+              "& .header-container": { height: "auto" }
+            },
+            hideNavMenu: true,
+            brand: null,
+            description: null,
+            addons: (buildIns) => {
+              const addons = buildIns.filter(
+                (addon) => ["locale-selector", "theme-mode-toggle", "session-user"].includes(addon.key)
+              );
+              return addons;
+            }
+          }
+        ),
+        !hideLeft && /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              width: { xs: "100%", md: "50%" },
+              height: { xs: "auto", md: "100vh" },
+              display: "flex",
+              justifyContent: { md: "center" },
+              ...isMobile ? { bgcolor: "background.paper", mt: 9 } : {},
+              ...hiddenScrollbar
+            },
+            children: /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  width: "100%",
+                  maxWidth: { md: 640 },
+                  p: { xs: 3, md: 5 },
+                  pt: { xs: 3, md: 10 },
+                  display: "flex",
+                  flexDirection: "column",
+                  flex: 1,
+                  ...fadeIn
+                },
+                children: left
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              width: hideLeft ? "100%" : { xs: "100%", md: "50%" },
+              height: hideLeft ? "100vh" : { xs: "auto", md: "100vh" },
+              bgcolor: "background.paper",
+              boxShadow: hideLeft ? "none" : { md: "-4px 0 16px rgba(0,0,0,0.04)" },
+              position: "relative",
+              display: "flex",
+              flexDirection: "column",
+              ...hideLeft ? {} : slideInFromRight,
+              ...isMobile && !hideLeft ? { pb: "180px", mt: 2 } : {},
+              // Mobile: scroll entire panel; Desktop: let PaymentPanel handle internal scroll
+              overflowY: { xs: "auto", md: "hidden" },
+              "&::-webkit-scrollbar": { display: "none" },
+              scrollbarWidth: "none",
+              ...mobileSubmitBarSx
+            },
+            children: /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  width: "100%",
+                  maxWidth: { md: 600 },
+                  mx: "auto",
+                  p: { xs: 3, md: 4 },
+                  pt: hideLeft ? { xs: 10, md: "10vh" } : { xs: 3, md: "10vh" },
+                  display: "flex",
+                  flexDirection: "column",
+                  flex: 1,
+                  minHeight: 0,
+                  justifyContent: hideLeft ? "center" : void 0
+                },
+                children: right
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}

package/es/checkout-v2/panels/left/composite-panel.d.ts

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