@coursebuilder/commerce-next
Version:
Commerce Functionality for Course Builder with Next.js
36 lines (35 loc) • 2.06 kB
JavaScript
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { Slot } from '@radix-ui/react-slot';
import { cn } from '@coursebuilder/ui/utils/cn';
import { CldImage } from '../../src/components/cld-image';
const PurchaseSummaryContext = React.createContext(undefined);
export const OrderSummaryProvider = ({ children, ...props }) => {
return (_jsx(PurchaseSummaryContext.Provider, { value: props, children: children }));
};
export const usePurchaseSummary = () => {
const context = React.use(PurchaseSummaryContext);
if (context === undefined) {
throw new Error('usePurchaseSummary must be used within an PurchaseSummaryProvider');
}
return context;
};
const Root = ({ children, className, ...props }) => (_jsx(OrderSummaryProvider, { ...props, children: _jsx("section", { className: cn('mx-auto w-full border-b pb-5', className), children: children }) }));
const Title = ({ className, asChild, children, }) => {
const { title } = usePurchaseSummary();
const Comp = asChild ? Slot : 'h1';
return (_jsx(Comp, { className: cn('w-full text-balance text-lg font-medium sm:text-xl lg:text-2xl', className), children: children || title }));
};
const Status = ({ className, children = 'Success!', }) => {
return (_jsx("span", { className: cn('text-primary block pb-4 text-sm uppercase', className), children: children }));
};
const Description = ({ className, children, }) => {
const { description } = usePurchaseSummary();
return children || description ? (_jsx("p", { className: cn('w-full text-balance pt-5', className), children: children || description })) : null;
};
const ProductImage = ({ className, children, }) => {
const { product } = usePurchaseSummary();
return children ? (children) : product?.fields?.image?.url ? (_jsx(CldImage, { className: cn('flex-shrink-0', className), src: product.fields.image.url, alt: product.fields?.image?.alt || product?.name, width: 250, height: 250 })) : null;
};
export { Root, Title, Description, ProductImage, Status };