@blocklet/payment-react
Version:
Reusable react components for payment kit v2
144 lines (143 loc) • 4.89 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { Close, LocalOffer } from "@mui/icons-material";
import { Box, Button, Stack, Typography } from "@mui/material";
import PromotionCode from "../../components/promotion-code.js";
import { formatAmount, formatCouponTerms } from "../../libs/util.js";
export default function PromotionSection({
checkoutSessionId,
currency,
currencyId,
discounts,
allowPromotionCodes,
completed = false,
disabled = false,
onPromotionUpdate,
onRemovePromotion,
calculatedDiscountAmount = null,
isRateLoading = false
}) {
const { t, locale } = useLocaleContext();
const hasDiscounts = discounts?.length > 0;
const getAppliedPromotionCodes = () => {
if (!discounts?.length) return [];
return discounts.filter((discount) => discount.promotion_code || discount.coupon).map((discount) => ({
id: discount.promotion_code || discount.coupon,
code: discount.verification_data?.code || "APPLIED",
discount_amount: discount.discount_amount
}));
};
if (allowPromotionCodes && !hasDiscounts) {
return /* @__PURE__ */ jsx(Box, { sx: { mt: 1 }, children: /* @__PURE__ */ jsx(
PromotionCode,
{
checkoutSessionId,
initialAppliedCodes: getAppliedPromotionCodes(),
disabled: completed,
onUpdate: onPromotionUpdate,
currencyId
}
) });
}
if (!hasDiscounts) {
return null;
}
return /* @__PURE__ */ jsx(Box, { children: discounts.map((discount) => {
const promotionCodeInfo = discount.promotion_code_details;
const couponInfo = discount.coupon_details;
const discountDescription = couponInfo ? formatCouponTerms(couponInfo, currency, locale) : "";
const notSupported = discountDescription === t("payment.checkout.coupon.noDiscount");
return /* @__PURE__ */ jsxs(Stack, { children: [
/* @__PURE__ */ jsxs(
Stack,
{
direction: "row",
spacing: 1,
sx: {
justifyContent: "space-between",
alignItems: "center"
},
children: [
/* @__PURE__ */ jsxs(
Stack,
{
direction: "row",
spacing: 1,
sx: {
alignItems: "center",
backgroundColor: "grey.100",
width: "fit-content",
px: 1,
py: 1,
borderRadius: 1
},
children: [
/* @__PURE__ */ jsxs(
Typography,
{
sx: {
fontWeight: "medium",
display: "flex",
alignItems: "center",
gap: 0.5
},
children: [
/* @__PURE__ */ jsx(LocalOffer, { sx: { color: "warning.main", fontSize: "small" } }),
promotionCodeInfo?.code || discount.verification_data?.code || t("payment.checkout.discount")
]
}
),
!completed && /* @__PURE__ */ jsx(
Button,
{
size: "small",
disabled,
onClick: () => onRemovePromotion(checkoutSessionId),
sx: {
minWidth: "auto",
width: 16,
height: 16,
color: "text.secondary",
"&.Mui-disabled": {
color: "text.disabled"
}
},
children: /* @__PURE__ */ jsx(Close, { sx: { fontSize: 14 } })
}
)
]
}
),
/* @__PURE__ */ jsxs(
Typography,
{
sx: {
color: "text.secondary",
opacity: isRateLoading ? 0 : 1,
transition: "opacity 300ms ease-in-out"
},
children: [
"-",
formatAmount(calculatedDiscountAmount || "0", currency.decimal),
" ",
currency.symbol
]
}
)
]
}
),
discountDescription && /* @__PURE__ */ jsx(
Typography,
{
sx: {
fontSize: "small",
color: notSupported ? "error.main" : "text.secondary",
mt: 0.5
},
children: discountDescription
}
)
] }, discount.promotion_code || discount.coupon || `discount-${discount.discount_amount}`);
}) });
}