@blocklet/payment-react 1.25.9 → 1.26.0

package/lib/checkout-v2/components/left/billing-toggle.js

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = BillingToggle;
+var _jsxRuntime = require("react/jsx-runtime");
+var _TrendingDown = _interopRequireDefault(require("@mui/icons-material/TrendingDown"));
+var _material = require("@mui/material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _format = require("../../utils/format");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function BillingToggle({
+  billingInterval
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  if (!billingInterval?.available?.length || billingInterval.available.length <= 1) {
+    return null;
+  }
+  const best = billingInterval.available.reduce((a, b) => Number(b.savings || 0) > Number(a.savings || 0) ? b : a);
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+    direction: "row",
+    alignItems: "center",
+    spacing: 2,
+    sx: {
+      mb: 3
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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: billingInterval.available.map(option => {
+        const isSelected = option.interval === billingInterval.current;
+        const selectedSx = {
+          bgcolor: th => th.palette.mode === "dark" ? "rgba(156,106,222,0.25)" : "rgba(156,106,222,0.15)",
+          color: "primary.main",
+          backdropFilter: "blur(8px)",
+          WebkitBackdropFilter: "blur(8px)",
+          boxShadow: th => th.palette.mode === "dark" ? "0 2px 8px rgba(156,106,222,0.2), inset 0 1px 0 rgba(255,255,255,0.06)" : "0 2px 8px rgba(156,106,222,0.15), inset 0 1px 0 rgba(255,255,255,0.5)",
+          border: "1px solid",
+          borderColor: th => th.palette.mode === "dark" ? "rgba(156,106,222,0.3)" : "rgba(156,106,222,0.2)"
+        };
+        const unselectedSx = {
+          color: "text.secondary",
+          border: "1px solid transparent",
+          "&:hover": {
+            color: "text.primary"
+          }
+        };
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          onClick: () => {
+            if (option.interval !== billingInterval.current && !billingInterval.switching) {
+              billingInterval.switch(option.interval);
+            }
+          },
+          sx: {
+            px: 3.5,
+            py: 1,
+            borderRadius: "9999px",
+            cursor: "pointer",
+            transition: "all 0.3s ease",
+            userSelect: "none",
+            ...(isSelected ? selectedSx : unselectedSx)
+          },
+          children: billingInterval.switching && isSelected ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+            size: 14,
+            color: "inherit",
+            sx: {
+              my: "1px"
+            }
+          }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            component: "span",
+            sx: {
+              fontSize: 14,
+              fontWeight: 700,
+              color: "inherit",
+              lineHeight: 1
+            },
+            children: t(_format.INTERVAL_LOCALE_KEY[option.interval] || option.interval)
+          })
+        }, option.interval);
+      })
+    }), best.savings && Number(best.savings) > 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.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__ */(0, _jsxRuntime.jsx)(_TrendingDown.default, {
+        sx: {
+          fontSize: 14
+        }
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+        component: "span",
+        sx: {
+          fontSize: "inherit",
+          fontWeight: "inherit",
+          color: "inherit",
+          lineHeight: 1
+        },
+        children: ["SAVE ", best.savings, "%"]
+      })]
+    })]
+  });
+}

package/lib/checkout-v2/components/left/cross-sell-card.d.ts

@@ -0,0 +1,10 @@
+import type { TPaymentCurrency, TPrice } from '@blocklet/payment-types';
+interface CrossSellCardProps {
+    crossSellItem: TPrice;
+    currency: TPaymentCurrency | null;
+    exchangeRate: string | null;
+    crossSellRequired: boolean;
+    onAdd: () => Promise<void>;
+}
+export default function CrossSellCard({ crossSellItem, currency, exchangeRate, crossSellRequired, onAdd, }: CrossSellCardProps): import("react").JSX.Element | null;
+export {};

package/lib/checkout-v2/components/left/cross-sell-card.js

@@ -0,0 +1,257 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = CrossSellCard;
+var _jsxRuntime = require("react/jsx-runtime");
+var _AddShoppingCart = _interopRequireDefault(require("@mui/icons-material/AddShoppingCart"));
+var _ShoppingCartCheckout = _interopRequireDefault(require("@mui/icons-material/ShoppingCartCheckout"));
+var _material = require("@mui/material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _format = require("../../utils/format");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function CrossSellCard({
+  crossSellItem,
+  currency,
+  exchangeRate,
+  crossSellRequired,
+  onAdd
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  if (!crossSellItem) return null;
+  const {
+    product
+  } = crossSellItem;
+  const productImage = product?.images?.[0] || "";
+  const productName = product?.name || t("payment.checkout.cross_sell.add");
+  const {
+    recurring
+  } = crossSellItem;
+  const intervalKey = recurring?.interval ? _format.INTERVAL_LOCALE_KEY[recurring.interval] : null;
+  const rawDescription = product?.description || "";
+  const subtitle = (() => {
+    if (rawDescription && rawDescription !== productName) return rawDescription;
+    return intervalKey ? t(intervalKey) : "";
+  })();
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      position: "relative"
+    },
+    children: [crossSellRequired && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
+      label: (0, _format.tSafe)(t, "payment.checkout.cross_sell.recommended", "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.jsx)(_material.Box, {
+      sx: {
+        p: {
+          xs: 2,
+          md: 3
+        },
+        bgcolor: "background.paper",
+        borderRadius: {
+          xs: "16px",
+          md: "24px"
+        },
+        border: "2px dashed",
+        borderColor: theme => theme.palette.mode === "dark" ? "rgba(255,255,255,0.15)" : "rgba(45,124,243,0.25)",
+        boxShadow: theme => theme.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",
+        cursor: "pointer",
+        "&:hover": {
+          borderColor: "primary.main",
+          boxShadow: "0 12px 40px -8px rgba(0,0,0,0.1)"
+        }
+      },
+      onClick: onAdd,
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        spacing: {
+          xs: 1.5,
+          md: 2.5
+        },
+        sx: {
+          alignItems: "center",
+          width: "100%"
+        },
+        children: [productImage ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+          src: productImage,
+          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: theme => theme.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.jsxs)(_material.Box, {
+          sx: {
+            flex: 1,
+            minWidth: 0
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            justifyContent: "space-between",
+            alignItems: "flex-start",
+            sx: {
+              mb: 0.25
+            },
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                fontWeight: 800,
+                fontSize: {
+                  xs: 15,
+                  md: 18
+                },
+                color: "text.primary",
+                lineHeight: 1.3
+              },
+              children: productName
+            }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+              alignItems: "flex-end",
+              sx: {
+                flexShrink: 0,
+                ml: {
+                  xs: 1,
+                  md: 2
+                }
+              },
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+                sx: {
+                  fontWeight: 800,
+                  color: "text.primary",
+                  whiteSpace: "nowrap",
+                  fontSize: {
+                    xs: 15,
+                    md: 18
+                  }
+                },
+                children: [(0, _format.formatDynamicUnitPrice)(crossSellItem, currency, exchangeRate), " ", currency?.symbol]
+              }), exchangeRate && crossSellItem.base_amount && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+                sx: {
+                  fontSize: 10,
+                  color: "text.disabled",
+                  fontWeight: 700,
+                  lineHeight: 1
+                },
+                children: ["\u2248 $", Number(crossSellItem.base_amount || 0).toFixed(2)]
+              })]
+            })]
+          }), subtitle && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: {
+              fontSize: {
+                xs: 12,
+                md: 14
+              },
+              color: "text.secondary",
+              fontWeight: 500,
+              lineHeight: 1.4
+            },
+            noWrap: true,
+            children: subtitle
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            sx: {
+              pt: {
+                xs: 1.5,
+                md: 2
+              }
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+              size: "small",
+              variant: "outlined",
+              startIcon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_AddShoppingCart.default, {
+                sx: {
+                  fontSize: "14px !important"
+                }
+              }),
+              sx: {
+                textTransform: "none",
+                fontSize: {
+                  xs: 11,
+                  md: 12
+                },
+                fontWeight: 700,
+                borderRadius: "8px",
+                border: "1px solid",
+                borderColor: "divider",
+                color: "primary.main",
+                bgcolor: "background.paper",
+                boxShadow: 1,
+                px: 1.5,
+                py: 0.5,
+                transition: "all 0.2s",
+                "&:hover": {
+                  bgcolor: "primary.main",
+                  color: "#fff",
+                  borderColor: "primary.main"
+                },
+                "&:active": {
+                  transform: "scale(0.95)"
+                }
+              },
+              onClick: e => {
+                e.stopPropagation();
+                onAdd();
+              },
+              children: (0, _format.tSafe)(t, "payment.checkout.cross_sell.addToOrder", "Add to order")
+            })
+          })]
+        })]
+      })
+    })]
+  });
+}

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

@@ -0,0 +1,26 @@
+import type { TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+interface ProductItemCardProps {
+    item: TLineItemExpanded & {
+        adjustable_quantity?: {
+            enabled: boolean;
+            minimum?: number;
+            maximum?: number;
+        };
+    };
+    currency: TPaymentCurrency | null;
+    discounts: any[];
+    exchangeRate: string | null;
+    onQuantityChange: (itemId: string, qty: number) => Promise<void>;
+    onUpsell: (fromId: string, toId: string) => Promise<void>;
+    onDownsell: (priceId: string) => Promise<void>;
+    trialActive: boolean;
+    trialDays: number;
+    t: (key: string, params?: any) => string;
+    recommended?: boolean;
+    hideUpsell?: boolean;
+    isRateLoading?: boolean;
+    showFeatures?: boolean;
+    children?: React.ReactNode;
+}
+export default function ProductItemCard({ item, currency, discounts, exchangeRate, onQuantityChange, onUpsell, onDownsell, trialActive, trialDays, t, recommended, hideUpsell, isRateLoading, showFeatures, children, }: ProductItemCardProps): import("react").JSX.Element;
+export {};