@blocklet/payment-react 1.25.9 → 1.26.0

package/es/checkout-v2/panels/left/composite-panel.js

@@ -0,0 +1,423 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import TrendingDownIcon from "@mui/icons-material/TrendingDown";
+import { Avatar, Box, Button, Collapse, Stack, Typography } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import Toast from "@arcblock/ux/lib/Toast";
+import {
+  useCheckoutStatus,
+  useLineItems,
+  useBillingInterval,
+  usePricingFeature,
+  useExchangeRate,
+  useSlippage,
+  useSessionContext,
+  usePaymentMethodContext,
+  useProduct
+} from "@blocklet/payment-react-headless";
+import { useMobile } from "../../../hooks/mobile.js";
+import { INTERVAL_LOCALE_KEY, formatTrialText, getSessionHeaderMeta, tSafe } from "../../utils/format.js";
+import ProductItemCard from "../../components/left/product-item-card.js";
+import BillingToggle from "../../components/left/billing-toggle.js";
+import CrossSellCard from "../../components/left/cross-sell-card.js";
+import ExchangeRateFooter from "../../components/shared/exchange-rate-footer.js";
+import TrialInfo from "../../components/left/trial-info.js";
+export default function CompositePanel() {
+  const { t } = useLocaleContext();
+  const { session } = useSessionContext();
+  const { currency, isStripe, switching: currencySwitching } = usePaymentMethodContext();
+  const { livemode } = useCheckoutStatus();
+  const { product, pageInfo } = useProduct();
+  const lineItems = useLineItems();
+  const billingInterval = useBillingInterval();
+  const pricing = usePricingFeature();
+  const rate = useExchangeRate();
+  const slippage = useSlippage();
+  const { isMobile } = useMobile();
+  const mode = session?.mode || "payment";
+  const discounts = session?.discounts || [];
+  const appName = session?.app_name || session?.payment_link?.app_name || "";
+  const appLogo = session?.app_logo || session?.payment_link?.app_logo || "";
+  const showItemsCollapse = isMobile || lineItems.items.length >= 4;
+  const [itemsExpanded, setItemsExpanded] = useState(
+    isMobile ? lineItems.items.length <= 1 : lineItems.items.length < 4
+  );
+  const crossSellNotAdded = lineItems.crossSellItem && !lineItems.items.some((i) => i.price_id === lineItems.crossSellItem?.id);
+  const nonCrossSellItems = lineItems.items.filter((i) => !i.cross_sell);
+  const itemsWithUpsell = lineItems.items.filter((i) => i.price?.upsell?.upsells_to);
+  const upsellPrimaryItem = itemsWithUpsell.length === 1 ? itemsWithUpsell[0] : null;
+  const upsellTarget = upsellPrimaryItem ? upsellPrimaryItem.price?.upsell?.upsells_to : null;
+  const canUpsell = nonCrossSellItems.length <= 1;
+  const hasTopUpsell = canUpsell && !!upsellPrimaryItem && ["subscription", "setup"].includes(mode);
+  const isUpselled = !!upsellPrimaryItem?.upsell_price;
+  const currentInterval = hasTopUpsell ? upsellPrimaryItem.price?.recurring?.interval : null;
+  const upsellInterval = hasTopUpsell ? upsellTarget?.recurring?.interval : null;
+  let upsellSavings = 0;
+  if (hasTopUpsell && currentInterval && upsellInterval) {
+    const fromAmt = parseFloat(
+      upsellPrimaryItem.price?.base_amount || upsellPrimaryItem.price?.unit_amount || "0"
+    );
+    const toAmt = parseFloat(upsellTarget?.base_amount || upsellTarget?.unit_amount || "0");
+    const yearMap = { day: 365, week: 52, month: 12, year: 1 };
+    const fromY = fromAmt * (yearMap[currentInterval] || 1);
+    const toY = toAmt * (yearMap[upsellInterval] || 1);
+    if (fromY > toY && fromY > 0) upsellSavings = Math.round((fromY - toY) / fromY * 100);
+  }
+  const prevRateStatusRef = useRef(rate.status);
+  useEffect(() => {
+    if (prevRateStatusRef.current !== "unavailable" && rate.status === "unavailable" && !isStripe) {
+      Toast.error(t("payment.dynamicPricing.unavailable.message"));
+    }
+    prevRateStatusRef.current = rate.status;
+  }, [rate.status, isStripe, t]);
+  const headerMeta = getSessionHeaderMeta(t, session, product, lineItems.items);
+  const isMultiItem = lineItems.items.length > 1;
+  const activeSx = {
+    bgcolor: "primary.main",
+    color: "#fff",
+    boxShadow: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)"
+  };
+  const inactiveSx = {
+    color: "text.secondary",
+    "&:hover": { color: "text.primary" }
+  };
+  const capsuleBtnSx = (active) => ({
+    px: 3.5,
+    py: 1,
+    borderRadius: "9999px",
+    cursor: "pointer",
+    transition: "all 0.3s ease",
+    userSelect: "none",
+    ...active ? activeSx : inactiveSx
+  });
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", flex: 1 }, children: [
+    !isMobile && (appName || appLogo) && /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 5 }, children: [
+      appLogo && /* @__PURE__ */ jsx(
+        Avatar,
+        {
+          src: appLogo,
+          alt: appName,
+          sx: {
+            width: 48,
+            height: 48,
+            borderRadius: "16px",
+            bgcolor: "background.paper",
+            boxShadow: 1,
+            border: "1px solid",
+            borderColor: "divider"
+          }
+        }
+      ),
+      appName && /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, fontSize: 15, color: "text.primary" }, children: appName })
+    ] }),
+    !isMobile && /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1, flexShrink: 1, flexBasis: 0 } }),
+    /* @__PURE__ */ jsxs(Box, { sx: { flexShrink: 0 }, children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { mb: { xs: 3, md: 4 } }, children: [
+        isMobile && (appName || appLogo) && /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { mb: 1 }, children: [
+          appLogo && /* @__PURE__ */ jsx(Avatar, { src: appLogo, alt: appName, sx: { width: 24, height: 24, borderRadius: "6px" } }),
+          appName && /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, fontSize: 13, color: "text.secondary" }, children: appName })
+        ] }),
+        /* @__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: headerMeta.badgeLabel
+            }
+          ),
+          pricing.trial.active && pricing.trial.days > 0 && /* @__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: formatTrialText(t, pricing.trial.days, pricing.trial.afterTrialInterval || "day")
+            }
+          ),
+          !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")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            sx: {
+              fontWeight: 800,
+              fontSize: { xs: 24, md: 36 },
+              lineHeight: 1.1,
+              letterSpacing: "-0.03em",
+              color: "text.primary",
+              mb: 0.75
+            },
+            children: isMultiItem ? tSafe(t, "payment.checkout.orderSummary", "Order Summary") : headerMeta.title
+          }
+        ),
+        (isMultiItem || headerMeta.subtitle) && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            sx: {
+              color: "text.secondary",
+              fontSize: { xs: 14, md: 16 },
+              fontWeight: 500,
+              lineHeight: 1.5
+            },
+            children: isMultiItem ? tSafe(t, "payment.checkout.orderSummarySubtitle", "Items included in this purchase") : headerMeta.subtitle
+          }
+        ),
+        hasTopUpsell && /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 2, sx: { mt: 2.5 }, children: [
+          /* @__PURE__ */ jsxs(
+            Stack,
+            {
+              direction: "row",
+              alignItems: "center",
+              sx: {
+                bgcolor: "background.paper",
+                borderRadius: "9999px",
+                border: "1px solid",
+                borderColor: "divider",
+                p: "4px",
+                display: "inline-flex",
+                boxShadow: (theme) => theme.palette.mode === "dark" ? "0 1px 2px 0 rgba(0,0,0,0.3)" : "0 1px 2px 0 rgba(0,0,0,0.05)"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    onClick: async () => {
+                      if (isUpselled) {
+                        try {
+                          await lineItems.downsell(
+                            upsellPrimaryItem.upsell_price?.id || upsellPrimaryItem.price_id
+                          );
+                        } catch (err) {
+                          Toast.error(err?.response?.data?.error || err?.message || "Failed");
+                        }
+                      }
+                    },
+                    sx: capsuleBtnSx(!isUpselled),
+                    children: /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: 14, fontWeight: 700, color: "inherit", lineHeight: 1 }, children: t(INTERVAL_LOCALE_KEY[currentInterval] || "") })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    onClick: async () => {
+                      if (!isUpselled) {
+                        try {
+                          await lineItems.upsell(upsellPrimaryItem.price_id, upsellTarget.id);
+                        } catch (err) {
+                          Toast.error(err?.response?.data?.error || err?.message || "Failed");
+                        }
+                      }
+                    },
+                    sx: capsuleBtnSx(isUpselled),
+                    children: /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: 14, fontWeight: 700, color: "inherit", lineHeight: 1 }, children: t(INTERVAL_LOCALE_KEY[upsellInterval] || "") })
+                  }
+                )
+              ]
+            }
+          ),
+          upsellSavings > 0 && /* @__PURE__ */ jsxs(
+            Stack,
+            {
+              direction: "row",
+              alignItems: "center",
+              spacing: 0.75,
+              sx: {
+                px: 1.5,
+                py: 0.75,
+                bgcolor: (theme) => theme.palette.mode === "dark" ? "rgba(18,184,134,0.1)" : "#ebfef5",
+                color: "#12b886",
+                fontSize: 11,
+                fontWeight: 700,
+                borderRadius: "9999px",
+                border: "1px solid",
+                borderColor: (theme) => theme.palette.mode === "dark" ? "rgba(18,184,134,0.2)" : "#d3f9e8",
+                textTransform: "uppercase",
+                letterSpacing: "0.05em"
+              },
+              children: [
+                /* @__PURE__ */ jsx(TrendingDownIcon, { sx: { fontSize: 14 } }),
+                /* @__PURE__ */ jsxs(
+                  Typography,
+                  {
+                    component: "span",
+                    sx: { fontSize: "inherit", fontWeight: "inherit", color: "inherit", lineHeight: 1 },
+                    children: [
+                      "SAVE ",
+                      upsellSavings,
+                      "%"
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(BillingToggle, { billingInterval })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          flexGrow: 0,
+          flexShrink: 1,
+          flexBasis: "auto",
+          minHeight: { md: 0 },
+          overflowY: { md: "auto" },
+          "&::-webkit-scrollbar": { display: "none" },
+          scrollbarWidth: "none"
+        },
+        children: [
+          showItemsCollapse && /* @__PURE__ */ jsxs(
+            Stack,
+            {
+              direction: "row",
+              alignItems: "center",
+              justifyContent: "space-between",
+              onClick: () => setItemsExpanded(!itemsExpanded),
+              sx: { cursor: "pointer", mb: 1.5 },
+              children: [
+                /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 14, fontWeight: 600 }, children: t("payment.checkout.productListTotal", { total: lineItems.items.length }) }),
+                /* @__PURE__ */ jsx(ExpandMoreIcon, { sx: { transform: itemsExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "0.3s" } })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(Collapse, { in: itemsExpanded || !showItemsCollapse, children: [
+            /* @__PURE__ */ jsx(Stack, { spacing: 2, sx: { mb: 2 }, children: lineItems.items.map((item) => /* @__PURE__ */ jsx(
+              ProductItemCard,
+              {
+                item,
+                currency,
+                discounts,
+                exchangeRate: rate.value,
+                onQuantityChange: lineItems.updateQuantity,
+                onUpsell: lineItems.upsell,
+                onDownsell: lineItems.downsell,
+                trialActive: pricing.trial.active,
+                trialDays: pricing.trial.days,
+                hideUpsell: hasTopUpsell || !canUpsell,
+                isRateLoading: currencySwitching || rate.hasDynamicPricing && rate.status === "loading",
+                showFeatures: pageInfo?.showProductFeatures ?? false,
+                t,
+                children: item.cross_sell && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "small",
+                    color: "error",
+                    variant: "text",
+                    onClick: lineItems.removeCrossSell,
+                    sx: { mt: 1, ml: -0.5, textTransform: "none", fontSize: 12 },
+                    children: t("payment.checkout.cross_sell.remove")
+                  }
+                )
+              },
+              item.id
+            )) }),
+            crossSellNotAdded && /* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: /* @__PURE__ */ jsx(
+              CrossSellCard,
+              {
+                crossSellItem: lineItems.crossSellItem,
+                currency,
+                exchangeRate: rate.value,
+                crossSellRequired: lineItems.crossSellRequired,
+                onAdd: lineItems.addCrossSell
+              }
+            ) })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { sx: { flexShrink: 0 }, children: /* @__PURE__ */ jsx(
+      TrialInfo,
+      {
+        trial: {
+          active: pricing.trial.active,
+          days: pricing.trial.days,
+          afterTrialPrice: pricing.trial.afterTrialPrice,
+          afterTrialInterval: pricing.trial.afterTrialInterval
+        },
+        mode,
+        items: lineItems.items
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1, flexShrink: 1, flexBasis: 0 } }),
+    /* @__PURE__ */ jsxs(Box, { sx: { flexShrink: 0 }, children: [
+      rate.hasDynamicPricing && rate.status === "unavailable" && !isStripe && /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.75, sx: { mb: 2 }, children: [
+        /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 13, color: "text.secondary", fontWeight: 500 }, children: t("payment.dynamicPricing.unavailable.title") }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            component: "span",
+            onClick: rate.refresh,
+            sx: {
+              fontSize: 13,
+              color: "primary.main",
+              fontWeight: 600,
+              cursor: "pointer",
+              "&:hover": { textDecoration: "underline" }
+            },
+            children: t("payment.dynamicPricing.unavailable.retry")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        ExchangeRateFooter,
+        {
+          hasDynamicPricing: rate.hasDynamicPricing,
+          rate: {
+            value: rate.value,
+            display: rate.display,
+            provider: rate.provider,
+            providerDisplay: rate.providerDisplay,
+            fetchedAt: rate.fetchedAt,
+            status: rate.status
+          },
+          slippage: { percent: slippage.percent, set: slippage.set },
+          currencySymbol: currency?.symbol || "",
+          isSubscription: ["subscription", "setup"].includes(mode)
+        }
+      )
+    ] })
+  ] });
+}

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

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