@blocklet/payment-react
Version:
Reusable react components for payment kit v2
257 lines (256 loc) • 8.23 kB
JavaScript
"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: theme => (0, _format.primaryContrastColor)(theme),
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: theme => (0, _format.primaryContrastColor)(theme),
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")
})
})]
})]
})
})]
});
}