@coursebuilder/commerce-next/dist/pricing/price-display.js

Commerce Functionality for Course Builder with Next.js

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { formatUsd } from '@coursebuilder/core/utils/format-usd';
import { cn } from '../cn';
import { usePriceCheck } from './pricing-check-context';
export const PriceDisplay = ({ status, formattedPrice, className = '', }) => {
    const { isDiscount } = usePriceCheck();
    const appliedMerchantCoupon = formattedPrice?.appliedMerchantCoupon;
    const fullPrice = formattedPrice?.fullPrice;
    const percentOff = appliedMerchantCoupon
        ? Math.floor(+appliedMerchantCoupon.percentageDiscount * 100)
        : formattedPrice && isDiscount(formattedPrice)
            ? Math.floor(((formattedPrice.unitPrice - formattedPrice.calculatedPrice) /
                formattedPrice.unitPrice) *
                100)
            : 0;
    const percentOffLabel = appliedMerchantCoupon && `${percentOff}% off of $${fullPrice}`;
    return (_jsx("div", { "data-price-container": status, className: className, children: status === 'pending' ? (_jsxs("div", { "data-loading-price": "", children: [_jsx("span", { className: "sr-only", children: "Loading price" }), _jsx(Spinner, { "aria-hidden": "true", className: "text-foreground h-8 w-8" })] })) : (_jsxs(_Fragment, { children: [_jsx("sup", { "aria-hidden": "true", children: "US" }), _jsxs("div", { "aria-live": "polite", "data-price": "", children: [formattedPrice?.calculatedPrice &&
                            formatUsd(formattedPrice?.calculatedPrice).dollars, _jsx("span", { className: "sup text-sm", "aria-hidden": "true", children: formattedPrice?.calculatedPrice &&
                                formatUsd(formattedPrice?.calculatedPrice).cents }), Boolean(appliedMerchantCoupon || isDiscount(formattedPrice)) && (_jsxs(_Fragment, { children: [_jsxs("div", { "aria-hidden": "true", "data-price-discounted": "", children: [_jsx("div", { "data-full-price": fullPrice, children: '$' + fullPrice }), _jsxs("div", { "data-percent-off": percentOff, children: ["Save ", percentOff, "%"] })] }), _jsxs("div", { className: "sr-only", children: [appliedMerchantCoupon?.type === 'bulk' ? (_jsx("div", { children: "Team discount." })) : null, ' ', percentOffLabel] })] }))] })] })) }));
};
const Spinner = ({ className = 'w-8 h-8', ...rest }) => (_jsxs("svg", { className: cn('animate-spin', className), xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", ...rest, children: [_jsx("title", { children: "Loading" }), _jsx("circle", { opacity: 0.25, cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { opacity: 0.75, fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }));