@coursebuilder/commerce-next/dist/invoices/invoice-teaser.js

Commerce Functionality for Course Builder with Next.js

'use client';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import NextLink from 'next/link';
import { Slot } from '@radix-ui/react-slot';
import { format } from 'date-fns';
import { cn } from '@coursebuilder/ui/utils/cn';
const InvoiceTeaserContext = React.createContext(undefined);
export const InvoiceTeaserProvider = ({ children, ...props }) => {
    return (_jsx(InvoiceTeaserContext.Provider, { value: props, children: children }));
};
export const useInvoiceTeaser = () => {
    const context = React.use(InvoiceTeaserContext);
    if (context === undefined) {
        throw new Error('useInvoiceTeaser must be used within an InvoiceTeaserProvider');
    }
    return context;
};
const Root = ({ children, asChild, className, ...props }) => {
    const Comp = asChild ? Slot : 'section';
    return (_jsx(InvoiceTeaserProvider, { ...props, children: _jsx(Comp, { className: cn('', className), children: children }) }));
};
const Title = ({ className, asChild, children, }) => {
    const Comp = asChild ? Slot : 'p';
    const { purchase } = useInvoiceTeaser();
    return (_jsx(Comp, { className: cn('text-balance font-medium', className), children: children || _jsx(_Fragment, { children: purchase?.product?.name }) }));
};
const Amount = ({ className, children, }) => {
    const { purchase } = useInvoiceTeaser();
    return (_jsx("span", { className: cn('', className), children: children || (_jsx(_Fragment, { children: Intl.NumberFormat('en-US', {
                style: 'currency',
                currency: 'USD',
            }).format(purchase.totalAmount) })) }));
};
const IssueDate = ({ className, children, }) => {
    const { purchase } = useInvoiceTeaser();
    return (_jsx("time", { dateTime: purchase.createdAt.toString(), className: cn('', className), children: children || _jsx(_Fragment, { children: format(new Date(purchase.createdAt), 'MMMM d, y') }) }));
};
const Metadata = ({ className, children, }) => {
    return (_jsxs("div", { className: cn('inline-flex items-center gap-3', className), children: [_jsx(Amount, {}), _jsx("span", { children: "\u30FB" }), _jsx(IssueDate, {})] }));
};
const Link = ({ className, asChild, children, }) => {
    const Comp = asChild ? Slot : NextLink;
    const { purchase } = useInvoiceTeaser();
    return (_jsx(Comp, { href: `/invoices/${purchase.merchantChargeId}`, className: cn('', className), children: children || _jsx(_Fragment, { children: "View \u2192" }) }));
};
// full component
const InvoiceTeaserComp = ({ purchase, }) => {
    return (_jsxs(Root, { purchase: purchase, children: [_jsx(Title, {}), _jsx(Amount, {}), _jsx(Date, {})] }));
};
export { Root, Title, IssueDate, Amount, Metadata, Link, InvoiceTeaserComp };