@blocklet/payment-react 1.25.10 → 1.26.1

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

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = ScenarioBadge;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _format = require("../../utils/format");
+function ScenarioBadge({
+  livemode,
+  label = void 0
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+    direction: "row",
+    alignItems: "center",
+    spacing: 1,
+    sx: {
+      mb: 1.5
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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 || (0, _format.tSafe)(t, "payment.checkout.orderSummary", "Order Summary")
+    }), !livemode && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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/lib/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/lib/checkout-v2/components/shared/total-display.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = TotalDisplay;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _format = require("../../utils/format");
+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
+  };
+}
+function TotalDisplay({
+  label = void 0,
+  total,
+  usdEquivalent = void 0
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    prefix,
+    integer,
+    decimal,
+    suffix
+  } = splitPrice(total);
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      pt: 4,
+      borderTop: "1px solid",
+      borderColor: "divider"
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      justifyContent: "space-between",
+      alignItems: "flex-end",
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+        spacing: 0.5,
+        sx: {
+          pb: 1
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            fontSize: 12,
+            fontWeight: 700,
+            letterSpacing: "0.02em",
+            color: "text.disabled"
+          },
+          children: label || (0, _format.tSafe)(t, "payment.checkout.totalDueToday", "Total due today")
+        })
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          display: "flex",
+          alignItems: "baseline",
+          lineHeight: 1
+        },
+        children: [prefix && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "span",
+          sx: {
+            fontSize: 36,
+            fontWeight: 500,
+            color: "text.primary",
+            opacity: 0.4
+          },
+          children: prefix
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "span",
+          sx: {
+            fontSize: {
+              xs: 54,
+              md: 72
+            },
+            fontWeight: 800,
+            lineHeight: 1,
+            letterSpacing: "-0.04em",
+            color: "text.primary"
+          },
+          children: integer
+        }), decimal && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "span",
+          sx: {
+            fontSize: 36,
+            fontWeight: 300,
+            color: "text.primary",
+            opacity: 0.3
+          },
+          children: decimal
+        }), suffix && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "span",
+          sx: {
+            fontSize: 20,
+            fontWeight: 700,
+            color: "text.disabled",
+            ml: 1,
+            textTransform: "uppercase"
+          },
+          children: suffix
+        })]
+      })]
+    }), usdEquivalent && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+      sx: {
+        fontSize: 12,
+        color: "text.disabled",
+        textAlign: "right",
+        mt: 0.5,
+        fontWeight: 500
+      },
+      children: ["\u2248 ", usdEquivalent]
+    })]
+  });
+}

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

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

package/lib/checkout-v2/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CheckoutV2", {
+  enumerable: true,
+  get: function () {
+    return _checkoutV.default;
+  }
+});
+var _checkoutV = _interopRequireDefault(require("./checkout-v2"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/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/lib/checkout-v2/layouts/checkout-layout.js

@@ -0,0 +1,308 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = CheckoutLayout;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _styles = require("@mui/material/styles");
+var _Header = _interopRequireDefault(require("@blocklet/ui-react/lib/Header"));
+var _mobile = require("../../hooks/mobile");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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"
+  }
+};
+function CheckoutLayout({
+  left,
+  right,
+  mode = "inline"
+}) {
+  const isFullScreen = mode === "standalone";
+  const {
+    isMobile
+  } = (0, _mobile.useMobile)();
+  const theme = (0, _styles.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__ */(0, _jsxRuntime.jsxs)(_material.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__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsxs)(_material.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, ${(0, _styles.alpha)(theme.palette.primary.main, 0.03)} 0%, ${(0, _styles.alpha)(theme.palette.primary.main, 0.07)} 50%, ${(0, _styles.alpha)(theme.palette.primary.main, 0.04)} 100%)`,
+      bgcolor: desktopBg,
+      ...mobileFadeIn
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Header.default, {
+      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__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)(_material.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/lib/checkout-v2/panels/left/composite-panel.d.ts

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