@blocklet/payment-react 1.25.10 → 1.26.1

package/lib/checkout-v2/components/left/product-item-card.js

@@ -0,0 +1,738 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = ProductItemCard;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
+var _LocalOffer = _interopRequireDefault(require("@mui/icons-material/LocalOffer"));
+var _Remove = _interopRequireDefault(require("@mui/icons-material/Remove"));
+var _ShoppingCartCheckout = _interopRequireDefault(require("@mui/icons-material/ShoppingCartCheckout"));
+var _material = require("@mui/material");
+var _KeyboardArrowUp = _interopRequireDefault(require("@mui/icons-material/KeyboardArrowUp"));
+var _paymentReactHeadless = require("@blocklet/payment-react-headless");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _format = require("../../utils/format");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ProductItemCard({
+  item,
+  currency,
+  discounts,
+  exchangeRate,
+  onQuantityChange,
+  onUpsell,
+  onDownsell,
+  trialActive,
+  trialDays,
+  t,
+  recommended = false,
+  hideUpsell = false,
+  isRateLoading = false,
+  showFeatures = true,
+  children = void 0
+}) {
+  const activePrice = item.upsell_price || item.price;
+  const product = activePrice?.product;
+  const name = product?.name || "Item";
+  const logo = product?.images?.[0] || "";
+  const features = product?.features || [];
+  const recurring = activePrice?.recurring;
+  const quantity = item.quantity || 1;
+  const isMetered = recurring?.usage_type === "metered";
+  const metered = isMetered ? ` ${t("common.metered")}` : "";
+  const perUnitFormatted = (0, _format.formatDynamicUnitPrice)(activePrice, currency, exchangeRate);
+  const isSubscription = !!recurring;
+  const typeBadgeText = isSubscription ? t("payment.checkout.typeBadge.subscription") : t("payment.checkout.typeBadge.oneTime");
+  const priceIntervalSuffix = recurring?.interval ? ` / ${t(`common.${recurring.interval}`)}` : "";
+  const subtitleText = (() => {
+    if (quantity > 1 && perUnitFormatted && currency) {
+      return `${quantity} \xD7 ${perUnitFormatted} ${currency.symbol}`;
+    }
+    if (isMetered) return metered.trim();
+    return "";
+  })();
+  const itemTotal = (() => {
+    const quoteCurrencyId = item.quote_currency_id;
+    if (item.custom_amount && quoteCurrencyId && quoteCurrencyId === currency?.id) {
+      return (0, _format.formatTokenAmount)(item.custom_amount, currency);
+    }
+    if (activePrice?.pricing_type === "dynamic" && exchangeRate && activePrice.base_amount) {
+      const rate = Number(exchangeRate);
+      if (rate > 0 && Number.isFinite(rate)) {
+        const baseUsd = Number(activePrice.base_amount);
+        if (baseUsd > 0 && Number.isFinite(baseUsd)) {
+          const tokenAmount = baseUsd * quantity / rate;
+          const abs = Math.abs(tokenAmount);
+          const precision = abs > 0 && abs < 0.01 ? 6 : 2;
+          return tokenAmount.toLocaleString("en-US", {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: precision
+          }).replace(/(\.\d*?)0+$/, "$1").replace(/\.$/, "") || "0";
+        }
+      }
+    }
+    if (!exchangeRate && activePrice?.base_amount != null) {
+      const baseUsd = Number(activePrice.base_amount);
+      if (baseUsd >= 0 && Number.isFinite(baseUsd)) {
+        const total = baseUsd * quantity;
+        return total.toLocaleString("en-US", {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2
+        });
+      }
+    }
+    if (activePrice && currency) {
+      const unitAmount = (0, _paymentReactHeadless.getPriceUnitAmountByCurrency)(activePrice, currency);
+      if (unitAmount && unitAmount !== "0") {
+        const totalUnits = BigInt(unitAmount) * BigInt(quantity);
+        return (0, _format.formatTokenAmount)(totalUnits.toString(), currency);
+      }
+    }
+    return "0";
+  })();
+  const discount = discounts?.[0];
+  const discountCode = discount?.promotion_code_details?.code || discount?.verification_data?.code || discount?.promotion_code || "";
+  const perItemDiscount = (() => {
+    if (!discountCode || !discount) return null;
+    const couponDetails = discount?.coupon_details;
+    if (couponDetails?.percent_off > 0) {
+      const numericTotal = parseFloat(String(itemTotal).replace(/,/g, ""));
+      if (!Number.isNaN(numericTotal) && numericTotal > 0) {
+        const discAmount = numericTotal * couponDetails.percent_off / 100;
+        const abs = Math.abs(discAmount);
+        const precision = abs > 0 && abs < 0.01 ? 6 : 2;
+        return `${discAmount.toLocaleString("en-US", {
+          minimumFractionDigits: 0,
+          maximumFractionDigits: precision
+        }).replace(/(\.\d*?)0+$/, "$1").replace(/\.$/, "") || "0"} ${currency?.symbol || ""}`;
+      }
+    }
+    if (item.discount_amounts?.length > 0 && currency) {
+      return `${(0, _format.formatTokenAmount)(item.discount_amounts[0].amount, currency)} ${currency.symbol}`;
+    }
+    return null;
+  })();
+  const adjustable = item.adjustable_quantity?.enabled;
+  const min = item.adjustable_quantity?.minimum || 1;
+  const max = item.adjustable_quantity?.maximum;
+  const [qtyInput, setQtyInput] = (0, _react.useState)(String(quantity));
+  const [isEditing, setIsEditing] = (0, _react.useState)(false);
+  const theme = (0, _material.useTheme)();
+  const isMobile = (0, _material.useMediaQuery)(theme.breakpoints.down("md"));
+  const [featuresOpen, setFeaturesOpen] = (0, _react.useState)(!isMobile);
+  (0, _react.useEffect)(() => {
+    if (!isEditing) setQtyInput(String(quantity));
+  }, [quantity, isEditing]);
+  const canUpsell = !!item.price?.upsell?.upsells_to;
+  const isUpselled = !!item.upsell_price;
+  const upsellTo = item.price?.upsell?.upsells_to;
+  let savingsPercent = 0;
+  if (canUpsell && upsellTo) {
+    const fromAmount = parseFloat(item.price?.base_amount || item.price?.unit_amount || "0");
+    const toAmount = parseFloat(upsellTo?.base_amount || upsellTo?.unit_amount || "0");
+    const fromInterval = item.price?.recurring?.interval;
+    const toInterval = upsellTo?.recurring?.interval;
+    if (fromAmount > 0 && toAmount > 0 && fromInterval && toInterval) {
+      const monthsMap = {
+        day: 365,
+        week: 52,
+        month: 12,
+        year: 1
+      };
+      const fromYearly = fromAmount * (monthsMap[fromInterval] || 1);
+      const toYearly = toAmount * (monthsMap[toInterval] || 1);
+      if (fromYearly > toYearly) {
+        savingsPercent = Math.round((fromYearly - toYearly) / fromYearly * 100);
+      }
+    }
+  }
+  const upsellInterval = upsellTo?.recurring?.interval;
+  const upsellPrice = (() => {
+    if (!upsellTo) return "";
+    const slashText = upsellInterval ? t("common.slash", {
+      interval: t(`common.${upsellInterval}`)
+    }) : "";
+    if (upsellTo.pricing_type === "dynamic" && upsellTo.base_amount && exchangeRate) {
+      const rate = Number(exchangeRate);
+      if (rate > 0 && Number.isFinite(rate)) {
+        const baseUsd = parseFloat(upsellTo.base_amount);
+        if (baseUsd > 0 && Number.isFinite(baseUsd)) {
+          const tokenAmount = baseUsd / rate;
+          const abs = Math.abs(tokenAmount);
+          const precision = abs > 0 && abs < 0.01 ? 6 : 2;
+          const formatted = tokenAmount.toLocaleString("en-US", {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: precision
+          }).replace(/(\.\d*?)0+$/, "$1").replace(/\.$/, "") || "0";
+          return `${formatted} ${currency?.symbol || ""} ${slashText}`;
+        }
+      }
+    }
+    if (upsellTo.pricing_type === "dynamic" && upsellTo.base_amount && upsellTo.base_currency === "USD") {
+      const baseUsd = parseFloat(upsellTo.base_amount);
+      const formattedUsd = baseUsd.toLocaleString("en-US", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      });
+      return `$${formattedUsd} ${slashText}`;
+    }
+    const upsellUnitFormatted = (0, _format.formatDynamicUnitPrice)(upsellTo, currency, exchangeRate);
+    return upsellUnitFormatted ? `${upsellUnitFormatted} ${currency?.symbol || ""} ${slashText}` : "";
+  })();
+  const originalInterval = item.price?.recurring?.interval;
+  const downsellPrice = (() => {
+    if (!item.price || !isUpselled) return "";
+    const originalPrice = item.price;
+    const originalSlash = originalInterval ? t("common.slash", {
+      interval: t(`common.${originalInterval}`)
+    }) : "";
+    if (originalPrice.pricing_type === "dynamic" && originalPrice.base_amount && exchangeRate) {
+      const rate = Number(exchangeRate);
+      if (rate > 0 && Number.isFinite(rate)) {
+        const baseUsd = parseFloat(originalPrice.base_amount);
+        if (baseUsd > 0 && Number.isFinite(baseUsd)) {
+          const tokenAmount = baseUsd / rate;
+          const abs = Math.abs(tokenAmount);
+          const precision = abs > 0 && abs < 0.01 ? 6 : 2;
+          const formatted = tokenAmount.toLocaleString("en-US", {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: precision
+          }).replace(/(\.\d*?)0+$/, "$1").replace(/\.$/, "") || "0";
+          return `${formatted} ${currency?.symbol || ""} ${originalSlash}`;
+        }
+      }
+    }
+    if (originalPrice.pricing_type === "dynamic" && originalPrice.base_amount && originalPrice.base_currency === "USD") {
+      const baseUsd = parseFloat(originalPrice.base_amount);
+      const formattedUsd = baseUsd.toLocaleString("en-US", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      });
+      return `$${formattedUsd} ${originalSlash}`;
+    }
+    const unitFormatted = (0, _format.formatDynamicUnitPrice)(originalPrice, currency, exchangeRate);
+    return unitFormatted ? `${unitFormatted} ${currency?.symbol || ""} ${originalSlash}` : "";
+  })();
+  const upsellToggleLabel = (() => {
+    if (isUpselled) {
+      const recurringLabel2 = originalInterval ? t(_format.INTERVAL_LOCALE_KEY[originalInterval] || "") : "";
+      return t("payment.checkout.upsell.revert", {
+        recurring: recurringLabel2
+      });
+    }
+    const recurringLabel = upsellInterval ? t(_format.INTERVAL_LOCALE_KEY[upsellInterval] || "") : "";
+    return t("payment.checkout.upsell.save", {
+      recurring: recurringLabel
+    });
+  })();
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      position: "relative"
+    },
+    children: [recommended && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
+      label: "RECOMMENDED",
+      size: "small",
+      sx: {
+        position: "absolute",
+        top: 0,
+        right: 40,
+        transform: "translateY(-50%)",
+        zIndex: 1,
+        height: 22,
+        fontSize: 9,
+        fontWeight: 900,
+        letterSpacing: "0.12em",
+        bgcolor: "primary.main",
+        color: "#fff",
+        boxShadow: "0 4px 12px rgba(45,124,243,0.2)",
+        "& .MuiChip-label": {
+          px: 1.5
+        }
+      }
+    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        p: {
+          xs: 2,
+          md: 3
+        },
+        bgcolor: "background.paper",
+        borderRadius: {
+          xs: "16px",
+          md: "24px"
+        },
+        border: "1px solid",
+        borderColor: "divider",
+        boxShadow: th => th.palette.mode === "dark" ? "0 12px 40px -8px rgba(0,0,0,0.3)" : "0 12px 40px -8px rgba(0,0,0,0.06)",
+        transition: "all 0.3s ease",
+        ...(canUpsell && !hideUpsell ? {
+          borderRadius: {
+            xs: "16px 16px 0 0",
+            md: "24px 24px 0 0"
+          }
+        } : {}),
+        "&:hover": {
+          borderColor: th => th.palette.mode === "dark" ? "rgba(255,255,255,0.12)" : "rgba(45,124,243,0.15)"
+        }
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        spacing: {
+          xs: 1.5,
+          md: 2.5
+        },
+        sx: {
+          alignItems: "center",
+          width: "100%"
+        },
+        children: [logo ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+          src: logo,
+          alt: name,
+          variant: "rounded",
+          sx: {
+            width: {
+              xs: 44,
+              md: 64
+            },
+            height: {
+              xs: 44,
+              md: 64
+            },
+            borderRadius: {
+              xs: "12px",
+              md: "16px"
+            },
+            flexShrink: 0
+          }
+        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+          variant: "rounded",
+          sx: {
+            width: {
+              xs: 44,
+              md: 64
+            },
+            height: {
+              xs: 44,
+              md: 64
+            },
+            borderRadius: {
+              xs: "12px",
+              md: "16px"
+            },
+            bgcolor: th => th.palette.mode === "dark" ? "rgba(255,255,255,0.06)" : "#eff6ff",
+            flexShrink: 0
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_ShoppingCartCheckout.default, {
+            sx: {
+              fontSize: {
+                xs: 22,
+                md: 28
+              },
+              color: "primary.main",
+              opacity: 0.45
+            }
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          sx: {
+            flex: 1,
+            minWidth: 0,
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            justifyContent: "space-between",
+            alignItems: "flex-start",
+            sx: {
+              mb: 0.25
+            },
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+              sx: {
+                minWidth: 0
+              },
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                sx: {
+                  color: "text.primary",
+                  fontWeight: 800,
+                  fontSize: {
+                    xs: 15,
+                    md: 18
+                  },
+                  lineHeight: 1.3
+                },
+                children: name
+              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                component: "span",
+                sx: {
+                  display: "inline-block",
+                  mt: 0.5,
+                  fontSize: 10,
+                  fontWeight: 700,
+                  letterSpacing: "0.08em",
+                  lineHeight: 1,
+                  textTransform: "uppercase",
+                  color: "primary.main",
+                  bgcolor: th => th.palette.mode === "dark" ? `${th.palette.primary.main}1A` : `${th.palette.primary.main}0D`,
+                  px: 0.75,
+                  py: 0.4,
+                  borderRadius: "3px"
+                },
+                children: typeBadgeText
+              }), subtitleText && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                sx: {
+                  color: "text.disabled",
+                  fontSize: 13,
+                  fontWeight: 500,
+                  mt: 0.25
+                },
+                children: subtitleText
+              })]
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+              alignItems: "flex-end",
+              sx: {
+                flexShrink: 0,
+                ml: 1.5
+              },
+              children: trialActive && isSubscription ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                sx: {
+                  fontWeight: 800,
+                  color: "text.primary",
+                  whiteSpace: "nowrap",
+                  fontSize: {
+                    xs: 15,
+                    md: 18
+                  }
+                },
+                children: (0, _format.formatTrialText)(t, trialDays, recurring?.interval || "day")
+              }) : isRateLoading ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                variant: "text",
+                width: 100,
+                height: 28
+              }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+                  sx: {
+                    fontWeight: 800,
+                    color: "text.primary",
+                    whiteSpace: "nowrap",
+                    fontSize: {
+                      xs: 15,
+                      md: 18
+                    },
+                    transition: "opacity 0.3s ease"
+                  },
+                  children: [itemTotal, " ", currency?.symbol, priceIntervalSuffix]
+                }), exchangeRate && activePrice?.base_amount && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+                  sx: {
+                    fontSize: 12,
+                    color: "text.disabled",
+                    fontWeight: 600,
+                    lineHeight: 1
+                  },
+                  children: ["\u2248 $", (Number(activePrice.base_amount) * quantity).toFixed(2)]
+                })]
+              })
+            })]
+          })
+        })]
+      }), showFeatures && features.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          mt: {
+            xs: 2,
+            md: 2.5
+          },
+          pt: {
+            xs: 2,
+            md: 2.5
+          },
+          borderTop: "1px solid",
+          borderColor: th => th.palette.mode === "dark" ? "rgba(255,255,255,0.06)" : "grey.100"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          onClick: () => setFeaturesOpen(v => !v),
+          sx: {
+            cursor: "pointer",
+            userSelect: "none",
+            mb: featuresOpen ? 1.25 : 0
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: {
+              fontSize: 14,
+              fontWeight: 700,
+              color: "text.primary"
+            },
+            children: t("payment.checkout.planFeatures")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_KeyboardArrowUp.default, {
+            sx: {
+              fontSize: 20,
+              color: "text.secondary",
+              transition: "transform 0.2s ease",
+              transform: featuresOpen ? "rotate(0deg)" : "rotate(180deg)"
+            }
+          })]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Collapse, {
+          in: featuresOpen,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+            spacing: 1.25,
+            children: features.map(feature => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+              direction: "row",
+              spacing: 1.5,
+              alignItems: "center",
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+                sx: {
+                  width: 20,
+                  height: 20,
+                  borderRadius: "50%",
+                  bgcolor: th => th.palette.mode === "dark" ? "rgba(16,185,129,0.15)" : "rgba(16,185,129,0.1)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  flexShrink: 0
+                },
+                children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Check.default, {
+                  sx: {
+                    fontSize: 14,
+                    color: "success.main"
+                  }
+                })
+              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                sx: {
+                  fontSize: 14,
+                  fontWeight: 500,
+                  color: "text.secondary"
+                },
+                children: feature.name
+              })]
+            }, feature.name))
+          })
+        })]
+      }), discountCode && perItemDiscount && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          mt: 1.5
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
+          icon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_LocalOffer.default, {
+            sx: {
+              color: "warning.main",
+              fontSize: "small"
+            }
+          }),
+          label: `${discountCode} (-${perItemDiscount})`,
+          size: "small",
+          sx: {
+            height: 22,
+            borderRadius: "6px",
+            "& .MuiChip-label": {
+              fontSize: 12
+            }
+          }
+        })
+      }), adjustable && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        spacing: 1,
+        alignItems: "center",
+        sx: {
+          mt: 2
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            color: "text.secondary",
+            minWidth: "fit-content",
+            fontSize: 13,
+            fontWeight: 500
+          },
+          children: t("common.quantity")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+          size: "small",
+          onClick: () => onQuantityChange(item.price_id, quantity - 1),
+          disabled: quantity <= min,
+          sx: {
+            width: 36,
+            height: 36,
+            border: "1px solid",
+            borderColor: "divider",
+            borderRadius: "50%",
+            "&:hover": {
+              bgcolor: "action.hover"
+            }
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Remove.default, {
+            sx: {
+              fontSize: 20
+            }
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+          value: qtyInput,
+          size: "small",
+          type: "number",
+          slotProps: {
+            htmlInput: {
+              style: {
+                textAlign: "center",
+                padding: "6px 4px",
+                fontWeight: 700,
+                fontSize: 16,
+                MozAppearance: "textfield"
+              },
+              min,
+              max: max || void 0
+            }
+          },
+          sx: {
+            minWidth: 64,
+            "& input": {
+              textAlign: "center"
+            },
+            "& .MuiOutlinedInput-root": {
+              borderRadius: "12px"
+            },
+            "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": {
+              WebkitAppearance: "none",
+              margin: 0
+            },
+            "& input[type=number]": {
+              MozAppearance: "textfield"
+            }
+          },
+          onFocus: () => setIsEditing(true),
+          onChange: e => setQtyInput(e.target.value),
+          onKeyDown: e => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              e.stopPropagation();
+              e.target.blur();
+            }
+          },
+          onBlur: () => {
+            setIsEditing(false);
+            const v = parseInt(qtyInput, 10);
+            if (!Number.isNaN(v) && v >= min && (!max || v <= max) && v !== quantity) {
+              onQuantityChange(item.price_id, v);
+            } else {
+              setQtyInput(String(quantity));
+            }
+          }
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+          size: "small",
+          onClick: () => onQuantityChange(item.price_id, quantity + 1),
+          disabled: max ? quantity >= max : false,
+          sx: {
+            width: 36,
+            height: 36,
+            border: "1px solid",
+            borderColor: "divider",
+            borderRadius: "50%",
+            "&:hover": {
+              bgcolor: "action.hover"
+            }
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Add.default, {
+            sx: {
+              fontSize: 20
+            }
+          })
+        })]
+      }), children]
+    }), canUpsell && !hideUpsell && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        px: {
+          xs: 2,
+          md: 3
+        },
+        py: 1.5,
+        bgcolor: "background.paper",
+        border: "1px solid",
+        borderTop: 0,
+        borderColor: "divider",
+        borderRadius: {
+          xs: "0 0 16px 16px",
+          md: "0 0 24px 24px"
+        },
+        boxShadow: th => th.palette.mode === "dark" ? "0 12px 40px -8px rgba(0,0,0,0.3)" : "0 12px 40px -8px rgba(0,0,0,0.06)"
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          borderTop: "1px solid",
+          borderColor: "divider",
+          mb: 1.5
+        }
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          alignItems: "center",
+          spacing: 1,
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Switch, {
+            checked: isUpselled,
+            onChange: async () => {
+              try {
+                if (isUpselled) {
+                  await onDownsell(item.upsell_price?.id || item.price.id);
+                } else {
+                  await onUpsell(item.price_id, upsellTo.id);
+                }
+              } catch (err) {
+                _Toast.default.error(err?.response?.data?.error || err?.message || "Failed");
+              }
+            },
+            size: "small",
+            sx: {
+              "& .MuiSwitch-switchBase.Mui-checked": {
+                color: "#12b886"
+              },
+              "& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track": {
+                bgcolor: "#12b886"
+              }
+            }
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: {
+              fontSize: 13,
+              color: "text.secondary",
+              cursor: "pointer",
+              fontWeight: 600
+            },
+            onClick: async () => {
+              try {
+                if (isUpselled) await onDownsell(item.upsell_price?.id || item.price.id);else await onUpsell(item.price_id, upsellTo.id);
+              } catch (err) {
+                _Toast.default.error(err?.response?.data?.error || err?.message || "Failed");
+              }
+            },
+            children: upsellToggleLabel
+          }), !isUpselled && savingsPercent > 0 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
+            label: t("payment.checkout.upsell.off", {
+              saving: savingsPercent
+            }),
+            size: "small",
+            sx: {
+              height: 22,
+              fontSize: 11,
+              fontWeight: 700,
+              bgcolor: th => th.palette.mode === "dark" ? "rgba(18,184,134,0.1)" : "#ebfef5",
+              color: "#12b886",
+              border: "1px solid",
+              borderColor: th => th.palette.mode === "dark" ? "rgba(18,184,134,0.2)" : "#d3f9e8",
+              borderRadius: "9999px",
+              "& .MuiChip-label": {
+                px: 1
+              }
+            }
+          })]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            fontSize: 13,
+            color: "text.primary",
+            whiteSpace: "nowrap",
+            fontWeight: 700
+          },
+          children: isUpselled ? downsellPrice : upsellPrice
+        })]
+      })]
+    })]
+  });
+}