@react-vant-next/campaign/es/coupon-list/Coupon.js

React Mobile UI Components based on Vant UI - Next Generation

import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { ConfigProviderContext, Checkbox } from '@react-vant-next/ui';
import { createNamespace, mergeProps, padZero } from '@react-vant-next/utils';
import cls from 'clsx';
import { use, useMemo } from 'react';

function getDate(timeStamp) {
    const date = new Date(timeStamp * 1000);
    return `${date.getFullYear()}.${padZero(date.getMonth() + 1)}.${padZero(date.getDate())}`;
}
function formatDiscount(discount) {
    return (discount / 10).toFixed(discount % 10 === 0 ? 0 : 1);
}
function formatAmount(amount) {
    return (amount / 100).toFixed(amount % 100 === 0 ? 0 : amount % 10 === 0 ? 1 : 2);
}
const [bem] = createNamespace("coupon");
const Coupon = (p) => {
    const props = mergeProps(p, {
        currency: "¥",
    });
    const { locale } = use(ConfigProviderContext);
    const validPeriod = useMemo(() => {
        const { startAt, endAt } = props.coupon;
        return `${getDate(startAt)} - ${getDate(endAt)}`;
    }, [props.coupon]);
    const faceAmount = useMemo(() => {
        const { coupon, currency } = props;
        if (coupon.valueDesc) {
            return (jsxs(Fragment, { children: [coupon.valueDesc, " ", jsx("span", { children: coupon.unitDesc || "" })] }));
        }
        if (coupon.denominations) {
            const denominations = formatAmount(coupon.denominations);
            return (jsxs(Fragment, { children: [jsx("span", { children: currency }), " ", "$", denominations] }));
        }
        if (coupon.discount) {
            return locale.vanCoupon.discount(+formatDiscount(coupon.discount));
        }
        return "";
    }, [props.coupon, props.coupon]);
    const conditionMessage = useMemo(() => {
        const condition = formatAmount(props.coupon.originCondition || 0);
        return condition === "0"
            ? locale.vanCoupon.unlimited
            : locale.vanCoupon.condition(+condition);
    }, [props.coupon.originCondition]);
    const { chosen, coupon, disabled } = props;
    const description = (disabled && coupon.reason) || coupon.description;
    return (jsxs("div", { className: cls(props.className, bem({ disabled })), style: props.style, onClick: props.onClick, children: [jsxs("div", { className: cls(bem("content")), children: [jsxs("div", { className: cls(bem("head")), children: [jsx("h2", { className: cls(bem("amount")), children: faceAmount }), jsx("p", { className: cls(bem("condition")), children: coupon.condition || conditionMessage })] }), jsxs("div", { className: cls(bem("body")), children: [jsx("p", { className: cls(bem("name")), children: coupon.name }), jsx("p", { className: cls(bem("valid")), children: validPeriod }), !disabled && (jsx(Checkbox, { className: cls(bem("corner")), checked: chosen }))] })] }), description && jsx("p", { className: cls(bem("description")), children: description })] }));
};

export { Coupon as default };
//# sourceMappingURL=Coupon.js.map