{ "name": "product-card", "title": "ProductCard", "description": "Product display card with modal or link mode.", "type": "component", "registryDependencies": [ "price", "product-sheet", "cn", "strip-html" ], "files": [ { "path": "product-card.tsx", "content": "\"use client\";\n\nimport React, { useCallback, useContext, useState } from \"react\";\nimport { Dialog } from \"@base-ui/react/dialog\";\nimport type { Product, ProductWithDetails } from \"@cimplify/sdk\";\nimport { BOUNDARY_KIND, PRODUCT_TYPE, RENDER_HINT, DURATION_UNIT } from \"@cimplify/sdk\";\nimport { useProduct } from \"@cimplify/sdk/react\";\nimport { prefetchProduct, trackProductView } from \"./hooks/use-product\";\nimport { useInViewport } from \"./hooks/use-in-viewport\";\nimport { speculate } from \"./utils/prefetch-policy\";\nimport { preloadImage } from \"./utils/preload-image\";\nimport {\n useOptionalCimplifyClient,\n DEFAULT_PREFETCH_OPTIONS,\n type PrefetchMode,\n} from \"@cimplify/sdk/react\";\nimport { ImagePriorityContext } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { getProductCurrency } from \"@cimplify/sdk\";\nimport { ProductSheet } from \"@cimplify/sdk/react\";\nimport { CardVariant } from \"@cimplify/sdk/react\";\nimport type { CardLayoutProps } from \"@cimplify/sdk/react\";\nimport { FoodProductCard } from \"@cimplify/sdk/react\";\nimport { RetailProductCard } from \"@cimplify/sdk/react\";\nimport { WholesaleProductCard } from \"@cimplify/sdk/react\";\nimport { DigitalProductCard } from \"@cimplify/sdk/react\";\nimport { StandardServiceCard } from \"@cimplify/sdk/react\";\nimport { RentalServiceCard } from \"@cimplify/sdk/react\";\nimport { AccommodationCard } from \"@cimplify/sdk/react\";\nimport { LeaseServiceCard } from \"@cimplify/sdk/react\";\nimport { SubscriptionCard } from \"@cimplify/sdk/react\";\nimport { BundleProductCard } from \"./cards/bundle-product-card\";\nimport { CompositeProductCard } from \"./cards/composite-product-card\";\nimport { cn } from \"@cimplify/sdk/react\";\nimport { stripHtmlToText } from \"@cimplify/sdk/react\";\n\nconst ASPECT_STYLES: Record = {\n square: { aspectRatio: \"1/1\" },\n \"4/3\": { aspectRatio: \"4/3\" },\n \"16/10\": { aspectRatio: \"16/10\" },\n \"3/4\": { aspectRatio: \"3/4\" },\n};\n\nexport interface ProductCardClassNames {\n root?: string;\n imageContainer?: string;\n image?: string;\n body?: string;\n name?: string;\n description?: string;\n price?: string;\n badges?: string;\n badge?: string;\n modal?: string;\n modalOverlay?: string;\n}\n\nexport interface ProductCardProps {\n /** The product to display. */\n product: Product;\n /** Display mode: \"card\" opens a modal, \"page\" renders as a link. Auto-detected from product.display_mode. */\n displayMode?: \"card\" | \"page\";\n /** Explicit card variant. Auto-detected from product data when omitted. */\n variant?: CardVariant;\n /** Per-slug card map. Highest priority — maps a product slug to a custom card component. */\n cards?: Record>;\n /** Link href for page mode. Default: `/menu/${product.slug}` */\n href?: string;\n /** Custom modal content renderer. Receives the fully-loaded product and a close callback. */\n renderModal?: (product: ProductWithDetails, onClose: () => void) => React.ReactNode;\n /** Custom image renderer (e.g. Next.js Image). */\n renderImage?: (props: {\n src: string;\n alt: string;\n className?: string;\n }) => React.ReactNode;\n /** Custom link renderer for page mode (e.g. Next.js Link). */\n renderLink?: (props: {\n href: string;\n className?: string;\n children: React.ReactNode;\n onPointerEnter?: React.PointerEventHandler;\n onFocus?: React.FocusEventHandler;\n }) => React.ReactElement;\n /** Called when quick-add button is clicked (if the resolved card supports it). */\n onQuickAdd?: (product: Product) => void;\n /** Replace the entire default card body. */\n children?: React.ReactNode;\n /** Image aspect ratio. Default: \"4/3\". */\n aspectRatio?: \"square\" | \"4/3\" | \"16/10\" | \"3/4\";\n prefetch?: PrefetchMode;\n className?: string;\n classNames?: ProductCardClassNames;\n}\n\nconst BUILT_IN_CARDS: Record> = {\n [CardVariant.Food]: FoodProductCard,\n [CardVariant.Retail]: RetailProductCard,\n [CardVariant.Wholesale]: WholesaleProductCard,\n [CardVariant.Digital]: DigitalProductCard,\n [CardVariant.Standard]: StandardServiceCard,\n [CardVariant.Rental]: RentalServiceCard,\n [CardVariant.Accommodation]: AccommodationCard,\n [CardVariant.Lease]: LeaseServiceCard,\n [CardVariant.Bundle]: BundleProductCard,\n [CardVariant.Composite]: CompositeProductCard,\n [CardVariant.Subscription]: SubscriptionCard,\n};\n\nconst RENTAL_UNITS = new Set([DURATION_UNIT.Days, DURATION_UNIT.Hours]);\nconst LEASE_UNITS = new Set([DURATION_UNIT.Weeks, DURATION_UNIT.Months, DURATION_UNIT.Years]);\n\nfunction resolveCardVariant(product: Product): CardVariant {\n if (product.type === PRODUCT_TYPE.Bundle) {\n return CardVariant.Bundle;\n }\n if (product.type === PRODUCT_TYPE.Composite) {\n return CardVariant.Composite;\n }\n if (product.quantity_pricing && product.quantity_pricing.length > 1) {\n return CardVariant.Wholesale;\n }\n if (product.type === PRODUCT_TYPE.Digital) {\n return CardVariant.Digital;\n }\n if (product.type === PRODUCT_TYPE.Service) {\n // An explicit boundary_kind overrides the duration-unit heuristic for the\n // card family (CTA + per-unit copy), so e.g. a days-unit serviced apartment\n // marked check_in_out renders as accommodation, and a delivered rental as\n // a rental. `custom`/unset fall through to the duration-unit defaults.\n switch (product.boundary_kind) {\n case BOUNDARY_KIND.CheckInOut:\n return CardVariant.Accommodation;\n case BOUNDARY_KIND.MoveInOut:\n return CardVariant.Lease;\n case BOUNDARY_KIND.PickupReturn:\n case BOUNDARY_KIND.DeliveryCollection:\n case BOUNDARY_KIND.AccessVacate:\n return CardVariant.Rental;\n }\n if (product.duration_unit && RENTAL_UNITS.has(product.duration_unit)) {\n return CardVariant.Rental;\n }\n if (product.duration_unit === DURATION_UNIT.Nights) {\n return CardVariant.Accommodation;\n }\n if (product.duration_unit && LEASE_UNITS.has(product.duration_unit)) {\n return CardVariant.Lease;\n }\n if (product.billing_plans && product.billing_plans.length > 0 && !product.duration_minutes) {\n return CardVariant.Subscription;\n }\n return CardVariant.Standard;\n }\n if (product.render_hint === RENDER_HINT.Food) {\n return CardVariant.Food;\n }\n if (product.render_hint === RENDER_HINT.Physical) {\n return CardVariant.Retail;\n }\n return CardVariant.Retail;\n}\n\n/**\n * ProductCard — a product display card with two modes:\n *\n * - **card** (default): clickable button that opens a Base UI Dialog modal\n * - **page**: a plain `` link for SEO-friendly product pages\n */\nexport function ProductCard({\n product,\n displayMode,\n variant,\n cards,\n href,\n renderModal,\n renderImage,\n renderLink,\n onQuickAdd,\n children,\n aspectRatio = \"4/3\",\n prefetch: prefetchProp,\n className,\n classNames,\n}: ProductCardProps): React.ReactElement {\n const mode = displayMode ?? product.display_mode ?? \"card\";\n const [isOpen, setIsOpen] = useState(false);\n\n const context = useOptionalCimplifyClient();\n const client = context?.client ?? null;\n const prefetchConfig = context?.prefetch ?? DEFAULT_PREFETCH_OPTIONS;\n const LinkComponent = context?.linkComponent ?? null;\n const prefetchMode = prefetchProp ?? prefetchConfig.mode;\n const imagePriority = useContext(ImagePriorityContext);\n\n const { product: productDetails } = useProduct(product.slug ?? product.id, {\n enabled: isOpen,\n });\n\n const warm = useCallback(() => {\n if (!client || prefetchMode === \"off\") return;\n speculate(() => prefetchProduct(client, product.slug ?? product.id));\n if (prefetchConfig.images) {\n preloadImage(product.images?.[0] || product.image_url);\n }\n }, [client, prefetchMode, prefetchConfig.images, product]);\n\n const viewportRef = useInViewport(warm, {\n rootMargin: prefetchConfig.rootMargin,\n disabled: prefetchMode !== \"aggressive\",\n });\n\n const handleOpenChange = useCallback(\n (open: boolean) => {\n setIsOpen(open);\n if (open && client) {\n trackProductView(client, product);\n }\n },\n [client, product],\n );\n\n const handleClose = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const imageUrl = product.image_url || product.images?.[0];\n\n const cardBody = (() => {\n if (children) return children;\n\n // Resolve card variant: slug map → explicit variant → auto-detect\n const SlugCard = cards?.[product.slug];\n if (SlugCard) {\n return ;\n }\n\n const key = variant ?? resolveCardVariant(product);\n const ResolvedCard = BUILT_IN_CARDS[key];\n if (ResolvedCard) {\n return ;\n }\n\n // Fallback: minimal default\n const descriptionPreview = stripHtmlToText(product.description);\n return (\n <>\n {imageUrl && (\n \n {renderImage ? (\n renderImage({ src: imageUrl, alt: product.name, className: classNames?.image })\n ) : (\n \n )}\n \n )}\n
\n \n {product.name}\n \n {descriptionPreview && (\n \n {descriptionPreview}\n \n )}\n \n
\n \n );\n })();\n\n // Page mode — render as a link\n if (mode === \"page\") {\n const linkHref = href ?? `/menu/${product.slug}`;\n const linkClassName = cn(\"group block no-underline text-[inherit] rounded-xl border border-border bg-background transition-shadow duration-200 hover:shadow-md\", className, classNames?.root);\n\n if (renderLink) {\n return renderLink({\n href: linkHref,\n className: linkClassName,\n children: cardBody,\n onPointerEnter: warm,\n onFocus: warm,\n });\n }\n\n if (LinkComponent) {\n return (\n \n {cardBody}\n \n );\n }\n\n return (\n \n {cardBody}\n \n );\n }\n\n // Card mode — render as Base UI Dialog\n return (\n \n \n {cardBody}\n \n\n \n \n \n {isOpen && (\n productDetails ? (\n renderModal ? (\n renderModal(productDetails, handleClose)\n ) : (\n \n )\n ) : (\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n )\n )}\n \n \n \n );\n}\n" } ] }