UNPKG

@coursebuilder/commerce-next

Version:

Commerce Functionality for Course Builder with Next.js

36 lines (35 loc) 2.06 kB
'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 };