npm - @fluid-app/portal-sdk - Versions diffs - 0.1.372 → 0.1.374 - Mend

@fluid-app/portal-sdk 0.1.372 → 0.1.374

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

package/dist/ShopScreen-CgN-6gic.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"ShopScreen-CgN-6gic.mjs","names":["formatPrice","formatPriceRange"],"sources":["../../../shop/ui/src/components/image-gallery.tsx","../../../shop/ui/src/components/quantity-selector.tsx","../../../shop/ui/src/components/purchase-options.tsx","../../../shop/ui/src/utils/is-variant-unavailable.ts","../../../shop/ui/src/components/shop-app.tsx","../../../cart/ui/src/components/cart-script.tsx","../../../cart/ui/src/components/cart-widget.tsx","../../../cart/ui/src/components/cart-button.tsx","../../../cart/ui/src/components/shop-container.tsx","../src/screens/ShopScreen.tsx"],"sourcesContent":["import type React from \"react\";\nimport { type ReactNode, useEffect, useMemo, useState } from \"react\";\nimport { ChevronLeft, ChevronRight, X } from \"lucide-react\";\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogTitle,\n DialogClose,\n} from \"@fluid-app/ui-primitives\";\nimport { useShopTranslation } from \"@fluid-app/shop-core/translation-api-context\";\nimport { isVideoUrl } from \"../utils/media-helpers\";\nimport type { RenderImageProps } from \"./product-card\";\n\ninterface ImageGalleryProps {\n images: Array<{\n id: number;\n image_url: string;\n image_path: string | null;\n position: number;\n }>;\n fallbackImageUrl: string;\n productTitle: string;\n renderImage?: (props: RenderImageProps) => ReactNode;\n}\n\nfunction defaultRenderImage({\n src,\n alt,\n fill,\n className,\n onError,\n}: RenderImageProps): ReactNode {\n return (\n <img\n src={src}\n alt={alt}\n className={`${fill ? \"absolute inset-0 h-full w-full\" : \"\"} ${className ?? \"\"}`}\n onError={onError}\n />\n );\n}\n\nexport default function ImageGallery({\n images,\n fallbackImageUrl,\n productTitle,\n renderImage = defaultRenderImage,\n}: ImageGalleryProps): React.JSX.Element {\n const { t } = useShopTranslation();\n const [currentImageIndex, setCurrentImageIndex] = useState(0);\n const [viewerOpen, setViewerOpen] = useState(false);\n\n const hasMultipleImages = images && images.length > 0;\n const displayImages = useMemo(\n () =>\n hasMultipleImages\n ? images.toSorted((a, b) => a.position - b.position)\n : [{ id: 0, image_url: fallbackImageUrl, position: 0 }],\n [images, hasMultipleImages, fallbackImageUrl],\n );\n\n // Reset to first image when the images array changes (e.g. variant switch)\n useEffect(() => {\n setCurrentImageIndex(0);\n }, [displayImages]);\n\n const nextImage = () => {\n if (displayImages.length > 1) {\n setCurrentImageIndex((prev) => (prev + 1) % displayImages.length);\n }\n };\n\n const prevImage = () => {\n if (displayImages.length > 1) {\n setCurrentImageIndex(\n (prev) => (prev - 1 + displayImages.length) % displayImages.length,\n );\n }\n };\n\n return (\n <div className=\"space-y-4\">\n {/* Main Image */}\n <div className=\"group bg-muted relative aspect-square overflow-hidden rounded-sm\">\n {isVideoUrl(displayImages[currentImageIndex]?.image_url) ? (\n <video\n key={displayImages[currentImageIndex]?.id}\n src={displayImages[currentImageIndex]?.image_url}\n className=\"absolute inset-0 h-full w-full object-cover\"\n controls\n loop\n playsInline\n />\n ) : (\n <button\n type=\"button\"\n onClick={() => setViewerOpen(true)}\n className=\"group absolute inset-0 z-[1] cursor-pointer border-0 bg-transparent p-0\"\n aria-label={t(\"open_image_viewer\")}\n >\n <img\n key={\n displayImages[currentImageIndex]?.image_url || fallbackImageUrl\n }\n src={\n displayImages[currentImageIndex]?.image_url || fallbackImageUrl\n }\n alt=\"\"\n loading=\"lazy\"\n decoding=\"async\"\n className=\"absolute inset-0 h-full w-full scale-125 object-cover blur-md\"\n aria-hidden=\"true\"\n onError={(e) => {\n e.currentTarget.style.display = \"none\";\n }}\n />\n {renderImage({\n src:\n displayImages[currentImageIndex]?.image_url || fallbackImageUrl,\n alt: productTitle,\n fill: true,\n className: \"object-contain\",\n onError: (e) => {\n e.currentTarget.src =\n \"https://ik.imagekit.io/fluid/tr:w-1500,h-1500,cm-pad_resize,bg-FFFFFF/980191006/images/WJHL8V/WeCommerce_Logotype-Black_NcO-MzatB.png\";\n },\n unoptimized: true,\n })}\n <span className=\"group-focus-visible:ring-ring pointer-events-none absolute inset-0 rounded-sm group-focus-visible:ring-2 group-focus-visible:ring-inset\" />\n </button>\n )}\n\n {/* Navigation arrows */}\n {displayImages.length > 1 && (\n <>\n <button\n type=\"button\"\n aria-label={t(\"previous_image\")}\n className=\"bg-background/40 group-hover:bg-background/80 hover:bg-background absolute top-1/2 left-3 z-10 flex size-8 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full shadow-sm transition-colors\"\n onClick={prevImage}\n >\n <ChevronLeft className=\"text-foreground/40 group-hover:text-foreground size-5 transition-colors\" />\n </button>\n <button\n type=\"button\"\n aria-label={t(\"next_image\")}\n className=\"bg-background/40 group-hover:bg-background/80 hover:bg-background absolute top-1/2 right-3 z-10 flex size-8 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full shadow-sm transition-colors\"\n onClick={nextImage}\n >\n <ChevronRight className=\"text-foreground/40 group-hover:text-foreground size-5 transition-colors\" />\n </button>\n </>\n )}\n\n {/* Page Indicators - Bottom Center */}\n {displayImages.length > 1 && (\n <div className=\"absolute bottom-3 left-1/2 z-10 flex -translate-x-1/2 gap-3\">\n {displayImages.map((_, index) => (\n <button\n type=\"button\"\n key={index}\n className={`h-1.5 w-6 cursor-pointer rounded-lg transition-colors ${\n index === currentImageIndex\n ? \"bg-foreground\"\n : \"bg-foreground/40 hover:bg-foreground/60\"\n }`}\n aria-label={t(\"go_to_image\", { index: String(index + 1) })}\n onClick={() => setCurrentImageIndex(index)}\n />\n ))}\n </div>\n )}\n </div>\n\n {/* Image viewer dialog */}\n <Dialog open={viewerOpen} onOpenChange={setViewerOpen}>\n <DialogContent\n className=\"h-[95vh] w-[95vw] max-w-none border-0 bg-transparent p-0 shadow-none sm:max-w-none\"\n showCloseButton={false}\n overlayClassName=\"bg-foreground/90\"\n >\n <DialogTitle className=\"sr-only\">{productTitle}</DialogTitle>\n <DialogDescription className=\"sr-only\">\n {t(\"image_viewer_description\")}\n </DialogDescription>\n <DialogClose\n aria-label={t(\"close_image_viewer\")}\n className=\"bg-foreground/60 text-background hover:bg-foreground/80 focus-visible:ring-ring focus-visible:ring-offset-background absolute top-4 right-4 z-10 flex size-10 cursor-pointer items-center justify-center rounded-full transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none\"\n >\n <X className=\"size-5\" />\n <span className=\"sr-only\">{t(\"close_image_viewer\")}</span>\n </DialogClose>\n <div className=\"relative flex h-full w-full items-center justify-center\">\n {renderImage({\n src:\n displayImages[currentImageIndex]?.image_url || fallbackImageUrl,\n alt: productTitle,\n fill: true,\n className: \"object-contain\",\n onError: (e) => {\n e.currentTarget.src =\n \"https://ik.imagekit.io/fluid/tr:w-1500,h-1500,cm-pad_resize,bg-FFFFFF/980191006/images/WJHL8V/WeCommerce_Logotype-Black_NcO-MzatB.png\";\n },\n unoptimized: true,\n })}\n </div>\n </DialogContent>\n </Dialog>\n </div>\n );\n}\n","import type React from \"react\";\nimport { Button } from \"@fluid-app/ui-primitives\";\n\ninterface QuantitySelectorProps {\n quantity: number;\n setQuantity: (quantity: number) => void;\n disabled?: boolean;\n}\n\nexport default function QuantitySelector({\n quantity,\n setQuantity,\n disabled = false,\n}: QuantitySelectorProps): React.JSX.Element {\n return (\n <div className=\"flex items-center gap-3\">\n <div className=\"flex items-center rounded-lg\">\n <Button\n variant=\"default\"\n onClick={() => setQuantity(Math.max(1, quantity - 1))}\n className=\"border-0 px-3 py-2 shadow-none\"\n disabled={disabled}\n >\n −\n </Button>\n <span className=\"text-foreground min-w-8 px-4 py-2 text-center text-sm font-medium\">\n {quantity}\n </span>\n <Button\n variant=\"default\"\n onClick={() => setQuantity(quantity + 1)}\n className=\"border-0 px-3 py-2 shadow-none\"\n disabled={disabled}\n >\n +\n </Button>\n </div>\n </div>\n );\n}\n","import type React from \"react\";\nimport { useMemo } from \"react\";\nimport { formatSavings, type products } from \"@fluid-app/products-core\";\nimport {\n RadioGroup,\n RadioGroupItem,\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@fluid-app/ui-primitives\";\nimport { useShopTranslation } from \"@fluid-app/shop-core/translation-api-context\";\n\ninterface PurchaseOptionsProps {\n showBuyOnce: boolean;\n showSubscribe: boolean;\n isSubscribe: boolean;\n onSubscribeChange: (subscribe: boolean) => void;\n product_subscription_plans: products.ProductSubscriptionPlan[];\n selectedSubscriptionPlan?: products.ProductSubscriptionPlan;\n onSubscriptionPlanChange?: (plan: products.ProductSubscriptionPlan) => void;\n wholesalePrice?: number;\n wholesaleSubscriptionPrice?: number;\n currency?: string;\n}\n\nexport default function PurchaseOptions({\n showBuyOnce,\n showSubscribe,\n isSubscribe,\n onSubscribeChange,\n product_subscription_plans,\n selectedSubscriptionPlan,\n onSubscriptionPlanChange,\n wholesalePrice,\n wholesaleSubscriptionPrice,\n currency,\n}: PurchaseOptionsProps): React.JSX.Element | null {\n const { t, locale } = useShopTranslation();\n\n // Find default subscription plan or use first one\n const defaultSubscriptionPlan = useMemo(() => {\n if (!product_subscription_plans?.length) return null;\n return (\n product_subscription_plans.find((plan) => plan.default) ||\n product_subscription_plans[0]\n );\n }, [product_subscription_plans]);\n\n // Use selected plan or default to the default/first plan\n const currentSubscriptionPlan =\n selectedSubscriptionPlan || defaultSubscriptionPlan;\n\n const savingsMode =\n currentSubscriptionPlan?.subscription_plan.savings_display_mode ??\n \"percent\";\n\n const savingsText = useMemo(\n () =>\n formatSavings({\n wholesalePrice,\n wholesaleSubscriptionPrice,\n // When currency is unknown, skip amount formatting (which would\n // misrender as \"$X.XX\" on a non-USD store) and fall back to percent.\n mode: currency !== undefined ? savingsMode : \"percent\",\n currency: currency ?? \"USD\",\n locale,\n }),\n [wholesalePrice, wholesaleSubscriptionPrice, savingsMode, currency, locale],\n );\n\n // Format subscription plan display name\n const formatSubscriptionPlan = (plan: products.ProductSubscriptionPlan) => {\n const interval = plan.subscription_plan.billing_interval;\n const unit = plan.subscription_plan.billing_interval_unit;\n return `${interval} ${unit} (${plan.subscription_plan.name})`;\n };\n\n // Prepare subscription plan options for Select component\n const subscriptionPlanOptions = useMemo(() => {\n if (!product_subscription_plans?.length) return [];\n\n return product_subscription_plans.map((plan) => ({\n value: plan.subscription_plan.id.toString(),\n label: formatSubscriptionPlan(plan),\n }));\n }, [product_subscription_plans]);\n\n // Don't render if only buy once is shown and subscribe is false\n if (showBuyOnce && !showSubscribe) {\n return null;\n }\n const handleSubscriptionPlanChange = (planId: string) => {\n const selectedPlan = product_subscription_plans?.find(\n (plan) => plan.subscription_plan.id.toString() === planId,\n );\n if (selectedPlan && onSubscriptionPlanChange) {\n onSubscriptionPlanChange(selectedPlan);\n }\n };\n\n const purchaseType = isSubscribe ? \"subscribe\" : \"once\";\n\n return (\n <div className=\"mb-3 flex flex-col\">\n <RadioGroup\n value={purchaseType}\n onValueChange={(value) => onSubscribeChange(value === \"subscribe\")}\n className=\"gap-0 space-y-0\"\n >\n {showSubscribe && (\n <div\n onClick={() => onSubscribeChange(true)}\n className={`cursor-pointer rounded-t-lg p-4 text-left transition-all duration-200 ${showBuyOnce ? \"border border-b-0\" : \"rounded-b-lg\"} ${isSubscribe ? \"bg-muted\" : \"bg-background\"}`}\n >\n <div className=\"flex items-start gap-x-3\">\n <RadioGroupItem\n value=\"subscribe\"\n onClick={(e) => e.stopPropagation()}\n className={`flex items-center justify-center [&_svg]:h-1.5 [&_svg]:w-1.5 [&_svg]:fill-white ${\n isSubscribe\n ? \"border-contrast bg-contrast text-foreground\"\n : \"border-border bg-background text-muted-foreground\"\n }`}\n />\n <div className=\"flex-1\">\n <div className=\"text-foreground mb-1 text-sm leading-tight font-medium\">\n {savingsText\n ? t(\"subscribe_and_save\", { savings: savingsText })\n : t(\"subscribe\")}\n </div>\n\n {/* Subscription Plan Dropdown*/}\n {product_subscription_plans?.length > 0 && (\n <div\n className=\"bg-muted mt-3 rounded-lg p-2\"\n onClick={(e) => e.stopPropagation()}\n >\n <div className=\"text-foreground mb-1 text-xs font-medium\">\n {t(\"delivery_frequency\")}\n </div>\n <Select\n value={\n currentSubscriptionPlan?.subscription_plan.id.toString() ||\n \"\"\n }\n onValueChange={handleSubscriptionPlanChange}\n disabled={product_subscription_plans?.length === 1}\n >\n <SelectTrigger className=\"bg-background text-foreground! w-full text-xs\">\n <SelectValue\n placeholder={t(\"select_delivery_schedule\")}\n />\n </SelectTrigger>\n <SelectContent>\n {subscriptionPlanOptions.map((option) => (\n <SelectItem key={option.value} value={option.value}>\n {option.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n )}\n </div>\n </div>\n </div>\n )}\n {showBuyOnce && (\n <div\n onClick={() => onSubscribeChange(false)}\n className={`cursor-pointer rounded-b-lg border p-4 text-left transition-all duration-200 ${showSubscribe ? \"border-t-0\" : \"rounded-t-lg\"} ${!isSubscribe ? \"bg-muted\" : \"bg-background\"}`}\n >\n <div className=\"flex items-center gap-x-3\">\n <RadioGroupItem\n value=\"once\"\n onClick={(e) => e.stopPropagation()}\n className={`flex items-center justify-center [&_svg]:h-1.5 [&_svg]:w-1.5 [&_svg]:fill-white ${\n !isSubscribe\n ? \"border-contrast bg-contrast text-foreground\"\n : \"border-border bg-background text-muted-foreground\"\n }`}\n />\n <div className=\"text-foreground mb-1 text-sm leading-tight font-medium\">\n {t(\"one_time_purchase\")}\n </div>\n </div>\n </div>\n )}\n </RadioGroup>\n </div>\n );\n}\n","import {\n isVariantSubscribable,\n type portalProducts,\n} from \"@fluid-app/products-core\";\n\n/**\n * Decides whether a product variant should disable its purchase CTA on the\n * portal shop page.\n */\nexport function isVariantUnavailable(\n variant: portalProducts.Variant | undefined,\n product: portalProducts.Product | undefined,\n): boolean {\n if (!variant) return true;\n if (variant.available === false) return true;\n // Subscription-only variants price via `subscription_pricing`, so `price` is\n // often \"0\"/null. Purchasability is the shared `isVariantSubscribable` rule,\n // which tolerates whichever subscribability signal the API populates (the\n // portal-tenant BFF sends `subscription_pricing`, not `allow_subscription`).\n if (variant.subscription_only) {\n return !isVariantSubscribable(variant);\n }\n // Match the render path's fallback (variant.price ?? product.price) so a\n // variant inheriting price from the product isn't blocked.\n const rawPrice = variant.price ?? product?.price;\n if (rawPrice == null || rawPrice === \"\") return true;\n const numericPrice = Number(rawPrice);\n if (Number.isNaN(numericPrice)) return true;\n if (numericPrice <= 0) return true;\n return false;\n}\n","import type React from \"react\";\nimport {\n useState,\n useMemo,\n useEffect,\n useRef,\n useCallback,\n type ReactNode,\n} from \"react\";\nimport {\n bundleSubscriptionPrice,\n formatPortalPrice as formatPrice,\n formatPortalPriceRange as formatPriceRange,\n isStaticBundle,\n usePortalProductCatalog,\n usePortalProductDetail,\n type PortalProductPageParam,\n type portalProducts,\n type products,\n} from \"@fluid-app/products-core\";\nimport { useInfiniteQuery } from \"@tanstack/react-query\";\nimport {\n Badge,\n Button,\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuLabel,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n Skeleton,\n} from \"@fluid-app/ui-primitives\";\nimport { SearchSort } from \"@fluid-app/ui-components/components/SearchSort\";\nimport { useShopTranslation } from \"@fluid-app/shop-core/translation-api-context\";\nimport { ArrowUpDown, ExternalLink, ShoppingCart } from \"lucide-react\";\nimport ProductCard, {\n tagPortalProduct,\n type RenderImageProps,\n} from \"./product-card\";\nimport ImageGallery from \"./image-gallery\";\nimport QuantitySelector from \"./quantity-selector\";\nimport PurchaseOptions from \"./purchase-options\";\nimport { isVariantUnavailable } from \"../utils/is-variant-unavailable\";\n\ninterface ShopAppProps {\n companyLogoUrl?: string | null;\n renderImage?: (props: RenderImageProps) => ReactNode;\n /** When provided, controls which product detail to show (URL-driven routing) */\n productId?: string | null;\n /** Called when a product is selected from the listing */\n onSelectProduct?: (productId: string) => void;\n /** Called when user navigates back from product detail */\n onBack?: () => void;\n /** Optional cart button to render in the header area */\n cartButton?: ReactNode;\n}\n\nconst PAGE_SIZE = 25;\n\nfunction sanitizeHtml(html: string): string {\n const doc = new DOMParser().parseFromString(html, \"text/html\");\n for (const el of doc.querySelectorAll(\n \"script, iframe, object, embed, form, base, meta, link, style\",\n )) {\n el.remove();\n }\n for (const el of doc.querySelectorAll(\"*\")) {\n for (const attr of [...el.attributes]) {\n if (\n attr.name.toLowerCase().startsWith(\"on\") ||\n attr.value.toLowerCase().trim().startsWith(\"javascript:\")\n ) {\n el.removeAttribute(attr.name);\n }\n }\n }\n return doc.body.innerHTML;\n}\n\nconst GRID_CLASS =\n \"grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-4\";\n\nfunction SkeletonGrid({ count = 8 }: { count?: number }) {\n return (\n <div className={GRID_CLASS}>\n {Array.from({ length: count }, (_, i) => (\n <div key={i} className=\"space-y-2\">\n <Skeleton className=\"aspect-square w-full rounded-lg\" />\n <Skeleton className=\"h-4 w-3/4\" />\n <Skeleton className=\"h-4 w-1/2\" />\n <Skeleton className=\"h-3 w-1/3\" />\n </div>\n ))}\n </div>\n );\n}\n\nfunction ProductListing({\n companyLogoUrl,\n renderImage,\n onSelectProduct,\n cartButton,\n}: {\n companyLogoUrl?: string | null;\n renderImage?: (props: RenderImageProps) => ReactNode;\n onSelectProduct: (productId: string) => void;\n cartButton?: ReactNode;\n}) {\n const observerTarget = useRef<HTMLDivElement>(null);\n const { t } = useShopTranslation();\n\n const catalog = usePortalProductCatalog({ perPage: PAGE_SIZE });\n\n const {\n data,\n isLoading,\n isFetchingNextPage,\n hasNextPage,\n fetchNextPage,\n error,\n isFetched,\n } = useInfiniteQuery({\n queryKey: catalog.queryKey,\n queryFn: ({ pageParam, signal }) =>\n catalog.fetchProducts(pageParam, signal),\n getNextPageParam: catalog.getNextPageParam,\n initialPageParam: undefined as PortalProductPageParam,\n });\n\n const handleIntersect = useCallback(\n (entries: IntersectionObserverEntry[]) => {\n if (entries[0]?.isIntersecting && hasNextPage && !isFetchingNextPage) {\n fetchNextPage();\n }\n },\n [hasNextPage, isFetchingNextPage, fetchNextPage],\n );\n\n useEffect(() => {\n const target = observerTarget.current;\n if (!target) return;\n\n const observer = new IntersectionObserver(handleIntersect, {\n threshold: 0.1,\n rootMargin: \"200px\",\n });\n observer.observe(target);\n return () => observer.disconnect();\n }, [handleIntersect]);\n\n const allProducts = data?.pages.flatMap((page) => page.products) ?? [];\n\n const sortOptions = useMemo(\n () => [\n { id: \"title_asc\", label: t(\"sort_title_asc\") },\n { id: \"title_desc\", label: t(\"sort_title_desc\") },\n { id: \"price_asc\", label: t(\"sort_price_asc\") },\n { id: \"price_desc\", label: t(\"sort_price_desc\") },\n { id: \"created_at_desc\", label: t(\"sort_recent\") },\n { id: \"created_at_asc\", label: t(\"sort_oldest\") },\n ],\n [t],\n );\n\n return (\n <div>\n <div className=\"mx-auto px-2 md:px-10\">\n {/* Search + Sort */}\n <div className=\"flex items-center justify-end gap-2 py-4\">\n <div className=\"w-full max-w-sm\">\n <SearchSort\n searchValue={catalog.searchTerm}\n onSearchChange={catalog.setSearchTerm}\n placeholder={t(\"search_placeholder\")}\n />\n </div>\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"border-foreground/10 shadow-input size-9 shrink-0\"\n >\n <ArrowUpDown className=\"size-3\" />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-60\">\n <DropdownMenuLabel>{t(\"sort_by\")}</DropdownMenuLabel>\n <DropdownMenuSeparator />\n <DropdownMenuRadioGroup\n value={catalog.currentSort}\n onValueChange={catalog.setCurrentSort}\n >\n {sortOptions.map((opt) => (\n <DropdownMenuRadioItem key={opt.id} value={opt.id}>\n {opt.label}\n </DropdownMenuRadioItem>\n ))}\n </DropdownMenuRadioGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n {cartButton && (\n <div className=\"flex shrink-0 items-center gap-3\">{cartButton}</div>\n )}\n </div>\n </div>\n\n {/* Product Grid */}\n <div className=\"mx-auto space-y-8 px-2 md:px-10 md:py-8\">\n {isLoading ? (\n <SkeletonGrid />\n ) : error ? (\n <p className=\"mx-auto my-6 rounded-lg bg-red-100 px-3 py-2 text-red-500\">\n {t(\"error_generic\")}\n </p>\n ) : isFetched && allProducts.length === 0 ? (\n <div className=\"flex flex-col items-center justify-center py-8 text-center\">\n <p className=\"text-muted-foreground text-sm\">\n {catalog.searchTerm\n ? t(\"no_search_results\", { term: catalog.searchTerm })\n : t(\"no_products\")}\n </p>\n </div>\n ) : (\n <>\n <div className={GRID_CLASS}>\n {allProducts.map((product) => (\n <ProductCard\n key={product.id}\n product={tagPortalProduct(product)}\n {...(companyLogoUrl !== undefined && { companyLogoUrl })}\n {...(renderImage !== undefined && { renderImage })}\n onClick={() => onSelectProduct(String(product.id))}\n />\n ))}\n </div>\n <div ref={observerTarget} />\n {isFetchingNextPage && <SkeletonGrid count={4} />}\n </>\n )}\n </div>\n </div>\n );\n}\n\ninterface OptionGroup {\n optionId: number;\n name: string;\n values: { id: number; name: string }[];\n}\n\n/**\n * Build the variant options map by grouping option_values across all variants.\n * Master variants can represent real selectable options in portal product\n * responses, so include them when they carry option_values.\n * Groups by option_id, collecting unique value entries.\n */\nfunction buildOptionGroups(variants: portalProducts.Variant[]): OptionGroup[] {\n const groupMap = new Map<\n number,\n { name: string; values: Map<number, string> }\n >();\n\n for (const variant of variants) {\n for (const ov of variant.option_values ?? []) {\n if (ov.option_id == null || ov.id == null) continue;\n if (!groupMap.has(ov.option_id)) {\n groupMap.set(ov.option_id, {\n name: ov.option_name ?? `Option ${ov.option_id}`,\n values: new Map(),\n });\n }\n groupMap.get(ov.option_id)!.values.set(ov.id, ov.name ?? String(ov.id));\n }\n }\n\n return [...groupMap.entries()].map(([optionId, group]) => ({\n optionId,\n name: group.name,\n values: [...group.values.entries()].map(([id, name]) => ({ id, name })),\n }));\n}\n\n/**\n * Find the variant matching a set of selected option value IDs.\n * selections is a map of optionId → selected value id.\n */\nfunction findVariantBySelections(\n variants: portalProducts.Variant[],\n selections: Record<number, number>,\n): portalProducts.Variant | undefined {\n const entries = Object.entries(selections).map(\n ([k, v]) => [Number(k), v] as const,\n );\n if (entries.length === 0) return undefined;\n const matchingVariants = variants.filter((v) =>\n entries.every(([optionId, valueId]) =>\n v.option_values?.some(\n (ov) => ov.option_id === optionId && ov.id === valueId,\n ),\n ),\n );\n // When duplicate option values exist, prefer the concrete non-master\n // variant. A master variant is still returned when it is the only match.\n return (\n matchingVariants.find((v) => v.is_master !== true) ?? matchingVariants[0]\n );\n}\n\n/**\n * Map BFF flat subscription plans to the legacy ProductSubscriptionPlan shape\n * expected by the PurchaseOptions component.\n */\nfunction mapToLegacySubscriptionPlans(\n plans: portalProducts.SubscriptionPlan[],\n): products.ProductSubscriptionPlan[] {\n return plans.map((plan, idx) => ({\n ...(plan.id !== undefined && { id: plan.id }),\n default: idx === 0,\n products_count: null,\n subscribers_count: null,\n active: true,\n subscription_plan: {\n id: plan.id ?? 0,\n name: plan.name ?? \"\",\n billing_interval: plan.billing_interval ?? 1,\n billing_interval_unit: plan.billing_interval_unit ?? \"month\",\n billing_frequency_in_words:\n plan.billing_frequency ??\n `${plan.billing_interval} ${plan.billing_interval_unit}`,\n active: true,\n // Intentionally null on the legacy shape: bundle subscription pricing\n // reads price_adjustment_type/amount from the raw BFF plan\n // (selectedBundlePlan), not this mapped legacy plan.\n price_adjustment_amount: null,\n price_adjustment_type: null,\n ...(plan.savings_display_mode !== undefined && {\n savings_display_mode: plan.savings_display_mode,\n }),\n },\n }));\n}\n\nfunction ProductDetail({\n productId,\n renderImage,\n}: {\n productId: string;\n renderImage?: (props: RenderImageProps) => ReactNode;\n}) {\n const [quantity, setQuantity] = useState(1);\n // selections: optionId → selected value id\n const [selections, setSelections] = useState<Record<number, number>>({});\n const [userSelectedSubscribe, setUserSelectedSubscribe] = useState<\n boolean | null\n >(null);\n const [selectedSubscriptionPlan, setSelectedSubscriptionPlan] = useState<\n products.ProductSubscriptionPlan | undefined\n >(undefined);\n\n const { t } = useShopTranslation();\n\n const { product, isLoading, error, images } = usePortalProductDetail({\n productId,\n });\n\n const variants = useMemo(() => product?.variants ?? [], [product?.variants]);\n const subscriptionPlans = useMemo(\n () => product?.subscription_plans ?? [],\n [product?.subscription_plans],\n );\n\n // Default to the master variant, or the first available variant\n const masterVariant = useMemo(\n () => variants.find((v) => v.is_master) ?? variants[0],\n [variants],\n );\n\n // Build option groups from all variants with option_values\n const optionGroups = useMemo(() => buildOptionGroups(variants), [variants]);\n\n // Title-based fallback: products that distinguish variants by `title` only\n // (no Options/OptionValues set up) — list every variant by title.\n const showVariantChoices = optionGroups.length === 0 && variants.length > 1;\n const [selectedVariantId, setSelectedVariantId] = useState<number | null>(\n null,\n );\n\n // Initialise selections from the master variant when it carries option values,\n // otherwise fall back to the first variant with option values.\n useEffect(() => {\n if (optionGroups.length === 0) return;\n const source = masterVariant?.option_values?.length\n ? masterVariant\n : variants.find((v) => v.option_values?.length);\n if (!source?.option_values?.length) return;\n const defaults: Record<number, number> = {};\n for (const ov of source.option_values) {\n if (ov.option_id != null && ov.id != null) {\n defaults[ov.option_id] = ov.id;\n }\n }\n setSelections(defaults);\n }, [optionGroups, variants, masterVariant]);\n\n // Default the title-based picker to the master variant\n useEffect(() => {\n if (!showVariantChoices) return;\n if (selectedVariantId != null) return;\n if (masterVariant?.id == null) return;\n setSelectedVariantId(masterVariant.id);\n }, [showVariantChoices, selectedVariantId, masterVariant?.id]);\n\n // Resolve the currently selected variant\n const selectedVariant = useMemo(() => {\n if (showVariantChoices) {\n return variants.find((v) => v.id === selectedVariantId) ?? masterVariant;\n }\n if (optionGroups.length === 0) return masterVariant;\n return findVariantBySelections(variants, selections) ?? masterVariant;\n }, [\n variants,\n optionGroups,\n selections,\n masterVariant,\n showVariantChoices,\n selectedVariantId,\n ]);\n\n // Map BFF subscription plans → legacy ProductSubscriptionPlan shape for PurchaseOptions\n const legacySubscriptionPlans = useMemo(\n () => mapToLegacySubscriptionPlans(subscriptionPlans),\n [subscriptionPlans],\n );\n\n // Derive subscription state from variant, falling back to subscribe-by-default\n // when the product offers subscription plans — matches the front-facing storefront.\n const showSubscribe = legacySubscriptionPlans.length > 0;\n const showBuyOnce = selectedVariant?.subscription_only !== true;\n const isSubscribe =\n selectedVariant?.subscription_only === true ||\n (userSelectedSubscribe ?? showSubscribe);\n\n // Prefer variant-specific images when available, fall back to product-level images\n const galleryImages = useMemo(() => {\n const variantImages = selectedVariant?.images;\n if (variantImages && variantImages.length > 0) {\n return variantImages.map((img, idx) => ({\n id: idx,\n image_url: img.url ?? \"\",\n image_path: null as string | null,\n position: idx,\n }));\n }\n return images.map((img, idx) => ({\n id: img.id ?? idx,\n image_url: img.url,\n image_path: null as string | null,\n position: idx,\n }));\n }, [selectedVariant?.images, images]);\n\n const coverImage = galleryImages[0]?.image_url ?? null;\n\n // Pricing: use selected variant's subscription_pricing for wholesale comparison\n const selectedPricing = selectedVariant?.subscription_pricing?.find(\n (sp) =>\n sp.plan_id ===\n (selectedSubscriptionPlan?.subscription_plan.id ??\n legacySubscriptionPlans[0]?.subscription_plan.id),\n );\n const wholesalePrice = selectedVariant?.wholesale_price\n ? Number(selectedVariant.wholesale_price)\n : undefined;\n const wholesaleSubscriptionPrice = selectedPricing?.wholesale_price\n ? Number(selectedPricing.wholesale_price)\n : undefined;\n\n // Display prices\n // price = retail price, wholesale_price = rep/logged-in price\n // subscription_pricing.wholesale_price = subscription wholesale price\n const currency = selectedVariant?.currency ?? product?.currency;\n const displayPrice = formatPrice(\n selectedVariant?.price ?? product?.price,\n currency,\n );\n const displayWholesalePrice = formatPrice(\n selectedVariant?.wholesale_price ??\n selectedVariant?.price ??\n product?.price,\n currency,\n );\n const displayWholesaleSubscriptionPrice = formatPrice(\n selectedPricing?.wholesale_price ??\n selectedPricing?.price ??\n selectedVariant?.wholesale_price ??\n undefined,\n currency,\n );\n\n // Resolve subscription plan ID for the cart SDK\n const resolvedPlanId =\n selectedSubscriptionPlan?.subscription_plan.id ??\n legacySubscriptionPlans.find((p) => p.default)?.subscription_plan.id ??\n legacySubscriptionPlans[0]?.subscription_plan.id;\n\n // Cart data attributes — SDK expects variant ID, not product ID\n const cartVariantId = String(selectedVariant?.id ?? product?.id ?? \"\");\n\n if (isLoading) {\n return (\n <div className=\"mx-auto max-w-7xl py-8 pr-4 pl-0 md:pr-6 lg:pr-8 lg:pl-0\">\n <div className=\"grid grid-cols-1 gap-5 lg:grid-cols-2\">\n <Skeleton className=\"aspect-square w-full rounded-lg\" />\n <div className=\"space-y-4 pl-2 lg:pl-20\">\n <Skeleton className=\"h-8 w-3/4\" />\n <Skeleton className=\"h-5 w-1/4\" />\n <Skeleton className=\"h-20 w-full\" />\n <Skeleton className=\"h-10 w-1/2\" />\n <Skeleton className=\"h-10 w-full\" />\n </div>\n </div>\n </div>\n );\n }\n\n if (error) {\n return (\n <div className=\"flex min-h-[400px] items-center justify-center\">\n <div className=\"text-center\">\n <h3 className=\"text-foreground mb-2 text-lg font-medium\">\n {t(\"error_loading\")}\n </h3>\n <p className=\"text-muted-foreground\">{t(\"error_generic\")}</p>\n </div>\n </div>\n );\n }\n\n if (!product) {\n return (\n <div className=\"flex min-h-[400px] items-center justify-center\">\n <div className=\"text-center\">\n <h3 className=\"text-foreground mb-2 text-lg font-medium\">\n {t(\"product_not_found\")}\n </h3>\n <p className=\"text-muted-foreground\">\n {t(\"product_not_found_description\")}\n </p>\n </div>\n </div>\n );\n }\n\n const title = product.name || t(\"product_fallback_name\");\n const isBundle = product.is_bundle === true;\n const bundleUrl = isBundle && product.shop_link ? product.shop_link : null;\n // A static bundle (no customizable groups) is functionally just a product, so\n // keep logged-in shoppers in-app with wholesale pricing by adding it straight\n // to the cart instead of bouncing to the storefront. Gate on a real variant\n // ID (the cart SDK expects a variant, not a product ID — `cartVariantId`\n // falls back to `product.id`): without a master variant we can't add it\n // reliably, so fall back to the storefront link below.\n const staticBundle =\n isBundle && isStaticBundle(product) && selectedVariant?.id != null;\n const displayCv = isBundle ? product.cv : selectedVariant?.cv;\n const displayQv = isBundle ? product.qv : selectedVariant?.qv;\n // `price_range` is tier-aware (the backend resolves wholesale for reps,\n // retail for customers), so display it directly — no client-side\n // wholesale/retail strikethrough. A static bundle has min === max, which\n // formatPriceRange collapses to a single price.\n const bundlePriceDisplay = isBundle\n ? (formatPriceRange(product.price_range, currency) ??\n formatPrice(product.price, currency))\n : null;\n // Static-bundle subscription price: the tier base is price_range.min (== max\n // for a static bundle); the per-plan subscription price is derived from the\n // selected plan's adjustment (percentage off the base, or the tier-aware\n // subscription_price_range). The plan's $0 master variant carries no usable\n // subscription price, so we compute it from the bundle payload instead.\n const bundleBasePrice =\n product.price_range?.min != null\n ? Number(product.price_range.min)\n : undefined;\n const selectedBundlePlan =\n subscriptionPlans.find((p) => p.id === resolvedPlanId) ??\n subscriptionPlans[0];\n const bundleSubPrice = staticBundle\n ? bundleSubscriptionPrice(\n bundleBasePrice,\n product.subscription_price_range,\n selectedBundlePlan,\n )\n : undefined;\n const staticBundleSubDisplay =\n bundleSubPrice !== undefined\n ? formatPrice(bundleSubPrice.toFixed(2), currency)\n : null;\n const isUnavailable =\n !isBundle && isVariantUnavailable(selectedVariant, product);\n return (\n <div className=\"pb-5 md:pl-8\">\n <div className=\"mx-auto max-w-7xl px-4 py-8 md:pr-6 md:pl-0 lg:pr-8 lg:pl-0\">\n <div className=\"grid grid-cols-1 gap-5 lg:grid-cols-2\">\n {/* Image Gallery */}\n <ImageGallery\n images={galleryImages}\n fallbackImageUrl={\n coverImage ??\n \"https://ik.imagekit.io/fluid/tr:w-1500,h-1500,cm-pad_resize,bg-FFFFFF/980191006/images/WJHL8V/WeCommerce_Logotype-Black_NcO-MzatB.png\"\n }\n productTitle={title}\n {...(renderImage !== undefined && { renderImage })}\n />\n\n {/* Product Info */}\n <div className=\"max-w-lg pl-2 lg:pl-20\">\n <div className=\"flex items-center gap-2\">\n <h1 className=\"text-foreground text-3xl font-bold\">{title}</h1>\n {isBundle && (\n <Badge variant=\"secondary\">{t(\"bundle_badge\")}</Badge>\n )}\n </div>\n\n {/* Customizable bundle: show the retail price range */}\n {isBundle && !staticBundle && bundlePriceDisplay && (\n <div className=\"mb-2 flex items-center gap-2\">\n <span className=\"text-foreground text-sm\">\n {bundlePriceDisplay}\n </span>\n </div>\n )}\n\n {/* Static bundle: show the tier-resolved price_range directly. The\n backend already resolved the tier (wholesale for reps, retail\n for customers), so — unlike a normal product — there is no\n separate retail value to strike through in buy-once mode\n (bundle price/wholesale_price are the $0 master-variant\n placeholder). When subscribed, show the discounted subscription\n price with the base price struck through (the subscribe\n savings). */}\n {staticBundle && bundlePriceDisplay && (\n <div className=\"mb-2 flex items-center gap-2\">\n <span className=\"text-foreground text-sm\">\n {isSubscribe && staticBundleSubDisplay\n ? staticBundleSubDisplay\n : bundlePriceDisplay}\n </span>\n {isSubscribe &&\n staticBundleSubDisplay &&\n staticBundleSubDisplay !== bundlePriceDisplay && (\n <span className=\"text-muted-foreground text-sm line-through\">\n {bundlePriceDisplay}\n </span>\n )}\n </div>\n )}\n\n {/* Price — matches admin exactly */}\n {!isBundle && !isUnavailable && (\n <div className=\"mb-2 flex items-center gap-2\">\n <span className=\"text-foreground text-sm\">\n {isSubscribe\n ? displayWholesaleSubscriptionPrice\n : displayWholesalePrice}\n </span>\n {((isSubscribe &&\n displayWholesaleSubscriptionPrice !==\n displayWholesalePrice) ||\n (!isSubscribe && displayWholesalePrice !== displayPrice)) && (\n <span className=\"text-muted-foreground text-sm line-through\">\n {isSubscribe ? displayWholesalePrice : displayPrice}\n </span>\n )}\n </div>\n )}\n\n {/* Product Description */}\n <div className=\"pt-2\">\n <h3 className=\"text-foreground mb-1 text-sm font-medium\">\n {t(\"product_description\")}\n </h3>\n <div\n className=\"text-foreground mb-3 text-[12px]\"\n dangerouslySetInnerHTML={{\n __html: sanitizeHtml(product.description ?? \"\"),\n }}\n />\n </div>\n\n {product.wholesale_price != null && (\n <div className=\"text-muted-foreground mb-3 text-sm\">\n CV {displayCv ?? \"-\"} | QV {displayQv ?? \"-\"}\n </div>\n )}\n\n {isBundle && !staticBundle ? (\n <div className=\"pt-4\">\n <Button\n variant=\"default\"\n className=\"w-full gap-2 py-2 text-base font-medium\"\n disabled={!bundleUrl}\n onClick={() => {\n if (bundleUrl)\n window.open(bundleUrl, \"_blank\", \"noopener,noreferrer\");\n }}\n >\n {t(\"purchase_bundle\")}\n <ExternalLink className=\"size-4\" />\n </Button>\n {!bundleUrl && (\n <p className=\"text-muted-foreground mt-2 text-center text-xs\">\n {t(\"bundle_unavailable\")}\n </p>\n )}\n </div>\n ) : staticBundle ? (\n <div className=\"pt-4\">\n {/* Static bundle: buy in-app like a product, including\n subscription when the bundle offers plans. Pricing is the\n tier-aware bundle total: base = price_range, subscription =\n bundleSubPrice (computed from the plan adjustment), so\n PurchaseOptions shows the real \"save X%\". */}\n <PurchaseOptions\n showBuyOnce={showBuyOnce}\n showSubscribe={showSubscribe}\n isSubscribe={isSubscribe}\n onSubscribeChange={setUserSelectedSubscribe}\n {...(bundleBasePrice !== undefined && {\n wholesalePrice: bundleBasePrice,\n })}\n {...(bundleSubPrice !== undefined && {\n wholesaleSubscriptionPrice: bundleSubPrice,\n })}\n {...(currency !== undefined && { currency })}\n product_subscription_plans={legacySubscriptionPlans}\n {...(selectedSubscriptionPlan !== undefined && {\n selectedSubscriptionPlan,\n })}\n onSubscriptionPlanChange={setSelectedSubscriptionPlan}\n />\n <div className=\"mt-4 flex items-center gap-3 pb-3\">\n <QuantitySelector\n quantity={quantity}\n setQuantity={setQuantity}\n disabled={isUnavailable}\n />\n <Button\n variant=\"default\"\n className=\"flex-1 gap-2 py-2 text-base font-medium\"\n disabled={isUnavailable}\n {...(!isUnavailable && {\n \"data-fluid-add-to-cart\": cartVariantId,\n \"data-fluid-quantity\": quantity,\n \"data-fluid-subscribe\": isSubscribe,\n \"data-fluid-subscription-plan-id\": isSubscribe\n ? String(resolvedPlanId ?? \"\")\n : \"\",\n \"data-fluid-open-cart-after-add\": \"true\",\n })}\n >\n <ShoppingCart className=\"size-4\" />\n {isSubscribe ? t(\"subscribe\") : t(\"add_to_cart\")}\n </Button>\n </div>\n </div>\n ) : (\n <>\n {/* Purchase Options — matches admin PurchaseOptions component */}\n <PurchaseOptions\n showBuyOnce={showBuyOnce}\n showSubscribe={showSubscribe}\n isSubscribe={isSubscribe}\n onSubscribeChange={setUserSelectedSubscribe}\n {...(wholesalePrice !== undefined && { wholesalePrice })}\n {...(wholesaleSubscriptionPrice !== undefined && {\n wholesaleSubscriptionPrice,\n })}\n {...(currency !== undefined && { currency })}\n product_subscription_plans={legacySubscriptionPlans}\n {...(selectedSubscriptionPlan !== undefined && {\n selectedSubscriptionPlan,\n })}\n onSubscriptionPlanChange={setSelectedSubscriptionPlan}\n />\n\n {/* Variant Options — matches admin layout */}\n {optionGroups.length > 0 && (\n <div className=\"mb-4 pt-4\">\n {optionGroups.map((group) => (\n <div\n key={group.optionId}\n className=\"mb-3 flex items-center\"\n >\n <h3 className=\"text-md text-foreground w-24 font-bold\">\n {group.name.charAt(0).toUpperCase() +\n group.name.slice(1)}\n </h3>\n <Select\n value={String(selections[group.optionId] ?? \"\")}\n onValueChange={(value) =>\n setSelections((prev) => ({\n ...prev,\n [group.optionId]: Number(value),\n }))\n }\n >\n <SelectTrigger className=\"w-48 max-w-full\">\n <SelectValue\n placeholder={t(\"select_option\", {\n name: group.name,\n })}\n />\n </SelectTrigger>\n <SelectContent position=\"popper\" className=\"max-h-60\">\n {group.values.map((v) => (\n <SelectItem key={v.id} value={String(v.id)}>\n {v.name}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n ))}\n </div>\n )}\n\n {/* Title-based variant picker — for products without Options */}\n {showVariantChoices && (\n <div className=\"mb-4 pt-4\">\n <div className=\"mb-3 flex items-center\">\n <h3 className=\"text-md text-foreground w-24 font-bold\">\n {t(\"variant_label\")}\n </h3>\n <Select\n value={\n selectedVariantId != null\n ? String(selectedVariantId)\n : \"\"\n }\n onValueChange={(value) =>\n setSelectedVariantId(Number(value))\n }\n >\n <SelectTrigger className=\"w-48 max-w-full\">\n <SelectValue placeholder={t(\"select_variant\")} />\n </SelectTrigger>\n <SelectContent position=\"popper\" className=\"max-h-60\">\n {variants.map((v, idx) =>\n v.id == null ? null : (\n <SelectItem key={v.id} value={String(v.id)}>\n {v.title ||\n t(\"variant_fallback_name\", {\n index: String(idx + 1),\n })}\n </SelectItem>\n ),\n )}\n </SelectContent>\n </Select>\n </div>\n </div>\n )}\n\n {/* Unavailable product message */}\n {isUnavailable && (\n <div className=\"text-muted-foreground text-sm\">\n {t(\"product_unavailable\")}\n </div>\n )}\n\n {/* Quantity and Add to Cart — matches admin. data-fluid-* attrs are stripped when unavailable so the cart SDK can't bind to a disabled button. */}\n <div className=\"mt-4 mb-3\" />\n <div className=\"flex items-center gap-3 pb-3\">\n <QuantitySelector\n quantity={quantity}\n setQuantity={setQuantity}\n disabled={isUnavailable}\n />\n\n <Button\n variant=\"default\"\n className=\"flex-1 gap-2 py-2 text-base font-medium\"\n disabled={isUnavailable}\n {...(!isUnavailable && {\n \"data-fluid-add-to-cart\": cartVariantId,\n \"data-fluid-quantity\": quantity,\n \"data-fluid-subscribe\": isSubscribe,\n \"data-fluid-subscription-plan-id\": isSubscribe\n ? String(resolvedPlanId ?? \"\")\n : \"\",\n \"data-fluid-open-cart-after-add\": \"true\",\n })}\n >\n <ShoppingCart className=\"size-4\" />\n {isSubscribe ? t(\"subscribe\") : t(\"add_to_cart\")}\n </Button>\n </div>\n </>\n )}\n </div>\n </div>\n </div>\n </div>\n );\n}\n\nexport default function ShopApp({\n companyLogoUrl,\n renderImage,\n productId: controlledProductId,\n onSelectProduct: onSelectProductProp,\n onBack: _onBack,\n cartButton,\n}: ShopAppProps): React.JSX.Element {\n // Internal state used only when navigation is not controlled externally\n const [internalProductId, setInternalProductId] = useState<string | null>(\n null,\n );\n\n const isControlled = controlledProductId !== undefined;\n const activeProductId = isControlled\n ? controlledProductId\n : internalProductId;\n\n const handleSelectProduct = onSelectProductProp ?? setInternalProductId;\n\n if (activeProductId) {\n return (\n <ProductDetail\n key={activeProductId}\n productId={activeProductId}\n {...(renderImage !== undefined && { renderImage })}\n />\n );\n }\n\n return (\n <ProductListing\n {...(companyLogoUrl !== undefined && { companyLogoUrl })}\n {...(renderImage !== undefined && { renderImage })}\n onSelectProduct={handleSelectProduct}\n cartButton={cartButton}\n />\n );\n}\n","import { useEffect, useRef } from \"react\";\n\ninterface CartScriptProps {\n subdomain: string;\n authJwt?: string;\n /** Enable BFF mode — uses portal session cookies instead of JWT for cart auth. */\n bffMode?: boolean;\n /** Override the SDK script URL (e.g. \"http://localhost:4444/index.js\" for local dev). */\n scriptSrc?: string;\n /** Override the API base URL the SDK uses (e.g. \"http://localhost:3000\" for local dev). */\n apiBaseUrl?: string;\n /** Enable SDK debug logging. */\n debug?: boolean;\n /**\n * Initial ISO 3166-1 alpha-2 country code to seed the FairShare SDK with\n * before any cart operation. Renders as `data-fluid-country` on the SDK\n * script tag; the SDK reads it at init time and uses it for cart creation\n * paths so they don't fall back to locale-derived country. Requires\n * fluid-fairshare PR #443 (web-widgets bundle with data-fluid-country\n * parsing) on the CDN.\n */\n country?: string;\n}\n\nconst SCRIPT_ID = \"fluid-cdn-script\";\nconst LEAD_CAPTURE_ID = \"fluid-lead-capture-suppress\";\nconst DEFAULT_SCRIPT_SRC =\n \"https://assets.fluid.app/scripts/fluid-sdk/latest/web-widgets/index.js\";\n\nexport default function CartScript({\n subdomain,\n authJwt,\n bffMode,\n scriptSrc,\n apiBaseUrl,\n debug,\n country,\n}: CartScriptProps): React.ReactNode {\n // Use a ref so the script is injected once with the initial values.\n // ES modules are cached by URL — re-inserting the same script won't\n // re-execute it, so changing props after the first load has no effect.\n const authJwtRef = useRef(authJwt);\n authJwtRef.current = authJwt;\n const countryRef = useRef(country);\n countryRef.current = country;\n\n useEffect(() => {\n if (!subdomain) return;\n\n // Don't add a duplicate script\n if (document.getElementById(SCRIPT_ID)) return;\n\n const script = document.createElement(\"script\");\n script.id = SCRIPT_ID;\n script.src = scriptSrc ?? DEFAULT_SCRIPT_SRC;\n script.type = \"module\";\n script.crossOrigin = \"anonymous\";\n script.dataset.fluidShop = subdomain;\n if (bffMode) {\n script.dataset.bffMode = \"true\";\n } else if (authJwtRef.current) {\n script.dataset.authJwt = authJwtRef.current;\n }\n if (apiBaseUrl) {\n script.dataset.fluidApiBaseUrl = apiBaseUrl;\n }\n if (debug) {\n script.dataset.debug = \"true\";\n }\n if (countryRef.current) {\n script.dataset.fluidCountry = countryRef.current;\n }\n document.head.appendChild(script);\n\n // Suppress the SDK's auto-injected lead capture widget.\n // The SDK skips injection when it finds an existing element with hide-widget.\n const leadCapture = document.createElement(\"fluid-lead-capture-widget\");\n leadCapture.id = LEAD_CAPTURE_ID;\n leadCapture.setAttribute(\"hide-widget\", \"true\");\n document.body.appendChild(leadCapture);\n\n return () => {\n const existing = document.getElementById(SCRIPT_ID);\n if (existing) existing.remove();\n const existingLeadCapture = document.getElementById(LEAD_CAPTURE_ID);\n if (existingLeadCapture) existingLeadCapture.remove();\n };\n // `authJwt` and `country` are intentionally omitted from deps: the SDK\n // reads data attributes only once when this module script first executes.\n // Re-inserting the same module URL after those props change does not\n // re-run FairShare initialization, so treat them as inject-time values.\n }, [subdomain, bffMode, scriptSrc, apiBaseUrl, debug]);\n\n return null;\n}\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\ninterface CartWidgetProps {\n theme?: Record<string, string>;\n}\n\nexport default function CartWidget({\n theme,\n}: CartWidgetProps): React.ReactNode {\n const [mounted, setMounted] = useState(false);\n const widgetRef = useRef<HTMLElement | null>(null);\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n useEffect(() => {\n if (!mounted) return;\n const el = widgetRef.current;\n if (!el) return;\n if (theme) {\n el.setAttribute(\"theme\", JSON.stringify(theme));\n } else {\n el.removeAttribute(\"theme\");\n }\n }, [theme, mounted]);\n\n const widget = React.createElement(\"fluid-cart-widget\", {\n ref: (el: HTMLElement | null) => {\n widgetRef.current = el;\n },\n \"data-fluid-widget\": \"true\",\n \"hide-widget\": \"true\",\n \"is-primary\": \"true\",\n });\n\n // Portal to document.body so the cart drawer escapes any\n // overflow-hidden / isolation stacking contexts in the layout.\n if (mounted) {\n return createPortal(widget, document.body);\n }\n\n return null;\n}\n","\"use client\";\n\nimport { Button } from \"@fluid-app/ui-primitives\";\nimport { ShoppingCart } from \"lucide-react\";\nimport React, { useEffect, useCallback, useState } from \"react\";\nimport { useShopTranslation } from \"@fluid-app/shop-core/translation-api-context\";\n\ndeclare global {\n interface Window {\n FluidCommerceSDK?: {\n getCheckoutUrl: () => string;\n setOnCheckout: (callback: () => void) => void;\n };\n FairShareSDK?: {\n getCartItemCount: () => number;\n isBffMode: () => boolean;\n updateLocaleSettings: (options: {\n language?: string;\n country?: string;\n }) => Promise<void>;\n };\n fluidCart?: {\n open: () => void;\n };\n }\n}\n\ninterface CartButtonProps {\n onCheckout?: (checkoutUrl: string) => void;\n}\n\nconst MAX_SDK_POLL_ATTEMPTS = 50; // 5 seconds at 100ms intervals\n\nexport function CartButton({ onCheckout }: CartButtonProps): React.ReactNode {\n const { t } = useShopTranslation();\n const [initialCount, setInitialCount] = useState(0);\n\n const navigateToCheckout = useCallback(() => {\n if (!window.FluidCommerceSDK) {\n console.error(\"FluidCommerceSDK not available\");\n return;\n }\n\n try {\n const checkoutUrl = window.FluidCommerceSDK.getCheckoutUrl();\n if (!checkoutUrl) {\n console.error(\"No checkout URL available\");\n return;\n }\n onCheckout?.(checkoutUrl);\n } catch (error) {\n console.error(\"Error getting checkout URL:\", error);\n }\n }, [onCheckout]);\n\n useEffect(() => {\n let timeoutId: ReturnType<typeof setTimeout> | null = null;\n let attempts = 0;\n let cancelled = false;\n\n const setupSDK = () => {\n if (cancelled) return;\n if (window.FluidCommerceSDK) {\n if (onCheckout) {\n window.FluidCommerceSDK.setOnCheckout(navigateToCheckout);\n }\n const count = window.FairShareSDK?.getCartItemCount?.();\n if (count != null) {\n setInitialCount(count);\n }\n } else if (attempts < MAX_SDK_POLL_ATTEMPTS) {\n attempts++;\n timeoutId = setTimeout(setupSDK, 100);\n }\n };\n\n setupSDK();\n return () => {\n cancelled = true;\n if (timeoutId) clearTimeout(timeoutId);\n };\n }, [navigateToCheckout, onCheckout]);\n\n return (\n <Button\n className=\"bg-primary text-primary-foreground hover:bg-primary/70 relative flex h-8 items-center gap-2 rounded-sm px-3 py-1 text-xs\"\n onClick={() => {\n window.fluidCart?.open();\n }}\n >\n <div className=\"relative\">\n <ShoppingCart className=\"size-4\" />\n <span\n id=\"fluid-cart-count\"\n className=\"bg-primary-foreground text-primary absolute -top-1 -right-2 flex size-3.5 items-center justify-center rounded-full text-[8px] font-bold\"\n >\n {initialCount}\n </span>\n </div>\n <span>{t(\"cart\")}</span>\n </Button>\n );\n}\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\ninterface ShopContainerProps {\n children: React.ReactNode;\n className?: string;\n cartScript?: React.ReactNode;\n cartWidget?: React.ReactNode;\n}\n\nexport default function ShopContainer({\n children,\n className = \"\",\n cartScript,\n cartWidget,\n}: ShopContainerProps): React.ReactNode {\n const containerRef = useRef<HTMLDivElement>(null);\n const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(\n null,\n );\n\n useEffect(() => {\n const currentContainer = containerRef.current;\n if (!currentContainer) return;\n\n const reactContentWrapper = document.createElement(\"div\");\n reactContentWrapper.id = \"react-content-wrapper\";\n reactContentWrapper.style.cssText = `\n position: relative;\n `;\n reactContentWrapper.className = \"min-h-full\";\n\n currentContainer.appendChild(reactContentWrapper);\n\n setPortalContainer(reactContentWrapper);\n\n return () => {\n if (currentContainer && reactContentWrapper) {\n try {\n currentContainer.removeChild(reactContentWrapper);\n } catch (e) {\n console.warn(\"Failed to cleanup isolated container:\", e);\n }\n }\n setPortalContainer(null);\n };\n }, []);\n\n return (\n <>\n <div\n ref={containerRef}\n className={`isolated-shop-wrapper ${className} h-full`}\n >\n {portalContainer &&\n createPortal(\n <>\n {cartScript}\n {cartWidget}\n {children}\n </>,\n portalContainer,\n )}\n </div>\n </>\n );\n}\n","import { type ComponentProps } from \"react\";\nimport ShopApp from \"@fluid-app/shop-ui/components/shop-app\";\nimport {\n CartButton,\n CartScript,\n CartWidget,\n ShopContainer,\n} from \"@fluid-app/cart-ui\";\nimport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@fluid-app/ui-primitives\";\nimport {\n ScreenHeaderBreadcrumbs,\n ScreenHeaderActions,\n} from \"@fluid-app/portal-react/shell/ScreenHeaderContext\";\nimport { useShopTranslation } from \"@fluid-app/shop-core/translation-api-context\";\nimport type {\n BackgroundValue,\n BorderRadiusOptions,\n ColorOptions,\n PaddingOptions,\n} from \"../types\";\nimport type { WidgetPropertySchema } from \"../registries/property-schema-types\";\nimport { useFluidContext } from \"../providers/FluidProvider\";\nimport { useAppNavigation } from \"../shell/AppNavigationContext\";\nimport { useNavigationParent } from \"../shell/use-navigation-parent\";\nimport { useStore } from \"../hooks/use-store\";\nimport { useAccount } from \"../hooks/use-account\";\nimport { usePortalProductDetail } from \"@fluid-app/products-core\";\n\ntype ShopScreenProps = ComponentProps<\"div\"> & {\n background?: BackgroundValue;\n textColor?: ColorOptions;\n accentColor?: ColorOptions;\n padding?: PaddingOptions;\n borderRadius?: BorderRadiusOptions;\n};\n\nexport function ShopScreen(props: ShopScreenProps): React.JSX.Element {\n return <ShopScreenContent {...props} />;\n}\n\nfunction ShopScreenContent({\n /* eslint-disable @typescript-eslint/no-unused-vars -- destructured to exclude from divProps spread */\n background,\n textColor,\n accentColor,\n padding,\n borderRadius,\n /* eslint-enable @typescript-eslint/no-unused-vars */\n ...divProps\n}: ShopScreenProps): React.JSX.Element {\n const { config } = useFluidContext();\n const { t } = useShopTranslation();\n const { data: store } = useStore();\n const { isPending: accountPending } = useAccount();\n const { currentSlug, navigate } = useAppNavigation();\n const countryCode = config.countryIso ?? \"US\";\n const subdomain = store?.subdomain;\n\n // Parse product ID from slug: \"shop/{productId}\"\n const parts = currentSlug.split(\"/\");\n const productId = parts[1] ?? null;\n\n // TODO(portal-theme): Cart widget theming requires AppShell to expose\n // resolvedTheme via context. Currently it's local state in AppShell.\n\n return (\n <>\n {!productId && (\n <ScreenHeaderBreadcrumbs>\n <Breadcrumb>\n <BreadcrumbList className=\"text-lg\">\n <BreadcrumbItem>\n <BreadcrumbPage className=\"font-semibold\">\n {t(\"breadcrumb\")}\n </BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </ScreenHeaderBreadcrumbs>\n )}\n <ScreenHeaderActions>\n <div className=\"flex items-center gap-4\">\n <CartButton />\n </div>\n </ScreenHeaderActions>\n <div {...divProps} className={divProps.className ?? \"\"}>\n <ShopContainer\n cartScript={\n // Mount CartScript ONLY when both:\n // (a) subdomain is known (otherwise data-fluid-shop is empty), and\n // (b) the customer's account has resolved (so FluidConfigHydrator\n // has already merged account.default_country_iso into\n // config.countryIso, and countryCode is the real country\n // rather than the \"US\" fallback).\n // ES modules are cached by URL, so the SDK script only executes\n // once per page. Mounting before account resolves would seed\n // fs_country with \"US\" and a later re-render with the real\n // country would NOT re-execute the module — fluid-fairshare#443's\n // data-fluid-country seeding only works at first script init.\n subdomain && !accountPending ? (\n <CartScript\n subdomain={subdomain}\n bffMode\n scriptSrc={\n import.meta.env.DEV\n ? String(\n import.meta.env.VITE_FAIRSHARE_SDK_URL ||\n \"http://localhost:4444/index.js\",\n )\n : undefined\n }\n apiBaseUrl={\n import.meta.env.DEV\n ? String(\n import.meta.env.VITE_FAIRSHARE_API_BASE_URL ||\n \"http://api.fluid.localhost:3000\",\n )\n : undefined\n }\n debug={import.meta.env.DEV}\n country={countryCode}\n />\n ) : null\n }\n cartWidget={<CartWidget />}\n >\n {productId && <ProductBreadcrumb productId={productId} />}\n <ShopApp\n companyLogoUrl={store?.logo_url ?? undefined}\n productId={productId}\n onSelectProduct={(id) => navigate(`shop/${id}`)}\n onBack={() => navigate(\"shop\")}\n />\n </ShopContainer>\n </div>\n </>\n );\n}\n\nexport const shopScreenPropertySchema: WidgetPropertySchema = {\n widgetType: \"ShopScreen\",\n displayName: \"Shop Screen\",\n tabsConfig: [{ id: \"styling\", label: \"Styling\" }],\n fields: [],\n} as const satisfies WidgetPropertySchema;\n\n/**\n * Renders inside PortalProductsCoreProvider to set breadcrumbs with the\n * product name: \"Shop > {product name}\". Overrides the parent's \"Shop\"\n * breadcrumb once product data loads.\n */\nfunction ProductBreadcrumb({ productId }: { productId: string }) {\n const { navigate } = useAppNavigation();\n const parentBreadcrumb = useNavigationParent();\n const { t } = useShopTranslation();\n const { product } = usePortalProductDetail({ productId });\n const productName = product?.name ?? t(\"product_fallback_name\");\n\n const parentLabel = parentBreadcrumb?.label ?? t(\"breadcrumb\");\n const onParentClick = parentBreadcrumb?.onClick ?? (() => navigate(\"shop\"));\n\n return (\n <ScreenHeaderBreadcrumbs>\n <Breadcrumb>\n <BreadcrumbList className=\"text-lg\">\n <BreadcrumbItem>\n <BreadcrumbLink\n onClick={onParentClick}\n className=\"cursor-pointer font-semibold\"\n >\n {parentLabel}\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <BreadcrumbItem>\n <BreadcrumbPage className=\"font-semibold\">\n {productName}\n </BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </ScreenHeaderBreadcrumbs>\n );\n}\n"],"mappings":"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"}

package/dist/ShopWidget-BbCPV2_Y.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"ShopWidget-BbCPV2_Y.cjs","names":["createTranslationContext","getProductImageUrl","formatPortalPrice","determineProductPrice","formatPortalPriceRange","CirclePlay","Badge","Card","useWidgetPreviewContext","useWidgetInteraction","usePortalProductCatalog","SearchSort","DropdownMenu","DropdownMenuTrigger","Button","ArrowUpDown","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuRadioGroup","DropdownMenuRadioItem","ImageIcon","Skeleton","getColorField","getPaddingField","getBorderRadiusField"],"sources":["../../../shop/core/src/translation-api-context.ts","../../../shop/ui/src/utils/media-helpers.ts","../../../shop/ui/src/components/product-card.tsx","../../widgets/src/widgets/ShopWidget.tsx"],"sourcesContent":["import { createTranslationContext } from \"@fluid-app/i18n/translation-api-context-factory\";\nimport type { ShopDict } from \"./translation-dictionary\";\n\nconst { Provider, useTranslation } = createTranslationContext<ShopDict>(\"Shop\");\n\nexport const ShopTranslationProvider = Provider;\nexport const useShopTranslation = useTranslation;\n","const VIDEO_EXTENSIONS = [\n \".mp4\",\n \".webm\",\n \".mov\",\n \".avi\",\n \".m4v\",\n \".mkv\",\n \".ogv\",\n \".ogg\",\n \".wmv\",\n \".flv\",\n \".3gp\",\n];\n\nconst IMAGE_EXTENSIONS = [\n \".jpg\",\n \".jpeg\",\n \".png\",\n \".gif\",\n \".webp\",\n \".svg\",\n \".bmp\",\n \".ico\",\n \".tiff\",\n \".tif\",\n];\n\nexport function isVideoUrl(url: string | undefined | null): boolean {\n if (!url) return false;\n const lowerUrl = url.toLowerCase();\n return VIDEO_EXTENSIONS.some((ext) => lowerUrl.includes(ext));\n}\n\nexport function isImageUrl(url: string | undefined | null): boolean {\n if (!url) return false;\n const lowerUrl = url.toLowerCase();\n return IMAGE_EXTENSIONS.some((ext) => lowerUrl.includes(ext));\n}\n\nexport function getMediaTypeFromUrl(\n url: string | undefined | null,\n): \"video\" | \"image\" | \"unknown\" {\n if (isVideoUrl(url)) return \"video\";\n if (isImageUrl(url)) return \"image\";\n return \"unknown\";\n}\n\nexport function getVideoThumbnailUrl(videoUrl: string): string {\n if (videoUrl.includes(\"ik.imagekit.io\")) {\n return `${videoUrl}/ik-thumbnail.jpg`;\n }\n return videoUrl;\n}\n\nexport function ensureImageIsFeatured<\n T extends { image_url: string; position?: number },\n>(items: T[]): T[] {\n if (items.length === 0) return items;\n\n const firstItem = items[0];\n if (!firstItem || !isVideoUrl(firstItem.image_url)) {\n return items;\n }\n\n const firstImageIndex = items.findIndex(\n (item) => !isVideoUrl(item.image_url),\n );\n\n if (firstImageIndex === -1) {\n return items;\n }\n\n const reordered = [...items];\n const [imageToMove] = reordered.splice(firstImageIndex, 1);\n if (imageToMove) {\n reordered.unshift(imageToMove);\n }\n\n return reordered;\n}\n","import type React from \"react\";\nimport { useState, type ReactNode } from \"react\";\nimport type { products, portalProducts } from \"@fluid-app/products-core\";\nimport {\n determineProductPrice,\n formatPortalPrice,\n formatPortalPriceRange,\n getProductImageUrl,\n} from \"@fluid-app/products-core\";\nimport { Badge, Card } from \"@fluid-app/ui-primitives\";\nimport { useShopTranslation } from \"@fluid-app/shop-core/translation-api-context\";\nimport { CirclePlay } from \"lucide-react\";\nimport { getVideoThumbnailUrl, isVideoUrl } from \"../utils/media-helpers\";\n\ntype LegacyProduct = (products.Product | products.ShopProduct) & {\n kind?: string;\n video_url?: string;\n};\n\nexport interface RenderImageProps {\n src: string;\n alt: string;\n fill?: boolean;\n className?: string;\n onError?: (e: React.SyntheticEvent<HTMLImageElement>) => void;\n unoptimized?: boolean;\n}\n\ntype TaggedPortalProduct = portalProducts.Product & {\n readonly __portalProduct: true;\n};\n\nexport type ProductCardProduct = LegacyProduct | TaggedPortalProduct;\n\ninterface ProductCardProps {\n product: ProductCardProduct;\n countryIso?: string;\n companyLogoUrl?: string | null;\n showShareModal?: boolean;\n setShareModalOpen?: (open: boolean) => void;\n setSelectedProduct?: (product: LegacyProduct) => void;\n renderLink?: (props: { href: string; children: ReactNode }) => ReactNode;\n renderImage?: (props: RenderImageProps) => ReactNode;\n onClick?: () => void;\n}\n\nexport function tagPortalProduct(\n product: portalProducts.Product,\n): TaggedPortalProduct {\n return { ...product, __portalProduct: true as const };\n}\n\nfunction isPortalProduct(\n product: ProductCardProduct,\n): product is TaggedPortalProduct {\n return \"__portalProduct\" in product && product.__portalProduct === true;\n}\n\nfunction getPortalProductCoverImage(\n product: portalProducts.Product,\n): string | null {\n if (product.images && product.images.length > 0) {\n return product.images[0]?.url ?? null;\n }\n return null;\n}\n\nfunction defaultRenderImage({\n src,\n alt,\n fill,\n className,\n onError,\n}: RenderImageProps): ReactNode {\n return (\n <img\n src={src}\n alt={alt}\n className={`${fill ? \"absolute inset-0 h-full w-full\" : \"\"} ${className ?? \"\"}`}\n onError={onError}\n />\n );\n}\n\nfunction ProductCardContent({\n product,\n countryIso,\n companyLogoUrl,\n renderImage = defaultRenderImage,\n}: {\n product: ProductCardProduct;\n countryIso?: string;\n companyLogoUrl?: string | null;\n renderImage?: (props: RenderImageProps) => ReactNode;\n}) {\n const [isHovered, setIsHovered] = useState(false);\n const { t } = useShopTranslation();\n\n const isPortal = isPortalProduct(product);\n const coverImage = isPortal\n ? getPortalProductCoverImage(product)\n : getProductImageUrl(product as Parameters<typeof getProductImageUrl>[0]);\n const isVideo = isVideoUrl(coverImage);\n const productName = isPortal\n ? product.name || t(\"no_title\")\n : (product as LegacyProduct).title || t(\"no_title\");\n\n const isBundle = isPortal && product.is_bundle === true;\n\n let repPrice: string | null | undefined = null;\n let price: string | null | undefined = null;\n if (isPortal) {\n // wholesale_price is non-null for reps, null for customers\n if (product.wholesale_price) {\n repPrice = formatPortalPrice(product.wholesale_price, product.currency);\n // Show retail as strikethrough if different from wholesale\n const retailFormatted = formatPortalPrice(\n product.price,\n product.currency,\n );\n if (retailFormatted !== repPrice) {\n price = retailFormatted;\n }\n } else {\n repPrice = formatPortalPrice(product.price, product.currency);\n }\n } else if (countryIso) {\n const prices = determineProductPrice(product, countryIso);\n repPrice = prices.repPrice;\n price = prices.price;\n }\n\n // A bundle's master-variant price is often $0, so show the resolved range.\n // Fall back to the single (backend-guaranteed non-zero) retail price when no\n // range — matching the detail page's fallback so card and detail never diverge.\n const bundlePrice = isBundle\n ? (formatPortalPriceRange(product.price_range, product.currency) ??\n formatPortalPrice(product.price, product.currency))\n : null;\n\n const resolvedCoverImage =\n isVideo && coverImage\n ? getVideoThumbnailUrl(coverImage)\n : coverImage ||\n \"https://ik.imagekit.io/fluid/tr:w-1500,h-1500,cm-pad_resize,bg-FFFFFF/980191006/images/WJHL8V/WeCommerce_Logotype-Black_NcO-MzatB.png\";\n\n return (\n <>\n {/* Image/Video container */}\n <div\n className=\"bg-muted relative aspect-square overflow-hidden\"\n onMouseEnter={() => isVideo && setIsHovered(true)}\n onMouseLeave={() => isVideo && setIsHovered(false)}\n >\n {isVideo && isHovered ? (\n <video\n src={coverImage || \"\"}\n className=\"absolute inset-0 h-full w-full object-cover\"\n autoPlay\n muted\n loop\n playsInline\n />\n ) : (\n <>\n {!isVideo && (\n <img\n key={resolvedCoverImage}\n src={resolvedCoverImage}\n alt=\"\"\n loading=\"lazy\"\n decoding=\"async\"\n className=\"absolute inset-0 h-full w-full scale-125 object-cover blur-md\"\n aria-hidden=\"true\"\n onError={(e) => {\n e.currentTarget.style.display = \"none\";\n }}\n />\n )}\n {renderImage({\n src: resolvedCoverImage,\n alt: productName,\n fill: true,\n className: \"object-contain\",\n onError: (e) => {\n e.currentTarget.src =\n companyLogoUrl ||\n \"https://ik.imagekit.io/fluid/tr:w-1500,h-1500,cm-pad_resize,bg-FFFFFF/980191006/images/WJHL8V/WeCommerce_Logotype-Black_NcO-MzatB.png\";\n },\n unoptimized: true,\n })}\n </>\n )}\n\n {/* Video play indicator */}\n {isVideo && !isHovered && (\n <div className=\"absolute inset-0 flex items-center justify-center\">\n <div className=\"flex size-16 items-center justify-center rounded-full bg-black/50 backdrop-blur-sm\">\n <CirclePlay className=\"size-12 text-white\" />\n </div>\n </div>\n )}\n\n {/* Bundle badge */}\n {isBundle && (\n <Badge variant=\"secondary\" className=\"absolute top-2 left-2\">\n {t(\"bundle_badge\")}\n </Badge>\n )}\n </div>\n\n {/* Product info */}\n <div className=\"px-3 pt-2 pb-4\">\n <h3 className=\"text-foreground line-clamp-1 text-sm font-bold\">\n {productName}\n </h3>\n\n <div className=\"flex items-center gap-2\">\n {isBundle ? (\n bundlePrice && (\n <span className=\"text-foreground text-sm font-bold\">\n {bundlePrice}\n </span>\n )\n ) : (\n <>\n {repPrice && (\n <span className=\"text-foreground text-sm font-bold\">\n {repPrice}\n </span>\n )}\n {price && (\n <span className=\"text-muted-foreground text-sm line-through\">\n {price}\n </span>\n )}\n </>\n )}\n </div>\n\n {!isPortal && countryIso && (\n <div className=\"text-muted-foreground text-sm\">\n CV{\" \"}\n {getVariantCountryValue(\n getSelectedVariant(product as LegacyProduct),\n countryIso,\n \"cv\",\n ) || \"-\"}{\" \"}\n | QV{\" \"}\n {getVariantCountryValue(\n getSelectedVariant(product as LegacyProduct),\n countryIso,\n \"qv\",\n ) || \"-\"}\n </div>\n )}\n\n {isPortal && product.wholesale_price != null && (\n <div className=\"text-muted-foreground text-sm\">\n CV {product.cv ?? \"-\"} | QV {product.qv ?? \"-\"}\n </div>\n )}\n </div>\n </>\n );\n}\n\nfunction getSelectedVariant(\n product: LegacyProduct,\n): products.Variant | products.ShopVariant | null {\n if (!product.variants || product.variants.length === 0) return null;\n\n const masterVariant = product.variants.find(\n (v: products.Variant | products.ShopVariant) => {\n return \"is_master\" in v && v.is_master;\n },\n );\n if (masterVariant) return masterVariant;\n\n return product.variants[0] || null;\n}\n\nfunction getVariantCountryValue(\n variant: products.Variant | products.ShopVariant | null,\n countryIso: string,\n field: \"cv\" | \"qv\",\n): number | null {\n if (!variant || !variant.variant_countries) return null;\n\n if (\n typeof variant.variant_countries === \"object\" &&\n !Array.isArray(variant.variant_countries)\n ) {\n const countryData = variant.variant_countries[countryIso] as\n | products.VariantCountry\n | undefined;\n return countryData?.[field] ?? null;\n }\n\n if (Array.isArray(variant.variant_countries)) {\n const countryData = variant.variant_countries.find(\n (vc: products.ShopVariantCountry) => vc.country_iso === countryIso,\n );\n return countryData?.[field] ?? null;\n }\n\n return null;\n}\n\nexport default function ProductCard({\n product,\n countryIso,\n companyLogoUrl,\n showShareModal = false,\n setShareModalOpen,\n setSelectedProduct,\n renderLink,\n renderImage,\n onClick,\n}: ProductCardProps): React.JSX.Element {\n const cardContent = (\n <ProductCardContent\n product={product}\n {...(countryIso !== undefined && { countryIso })}\n {...(companyLogoUrl !== undefined && { companyLogoUrl })}\n {...(renderImage !== undefined && { renderImage })}\n />\n );\n\n const cardClassName = \"overflow-hidden border-0 shadow-none pt-0 gap-0\";\n\n if (showShareModal && !isPortalProduct(product)) {\n const handleShareClick = () => {\n if (setSelectedProduct && setShareModalOpen) {\n setSelectedProduct(product);\n setShareModalOpen(true);\n }\n };\n return (\n <Card className={cardClassName}>\n <button\n onClick={handleShareClick}\n className=\"group block w-full cursor-pointer text-left\"\n >\n {cardContent}\n </button>\n </Card>\n );\n }\n\n if (onClick) {\n return (\n <Card className={cardClassName}>\n <button\n onClick={onClick}\n className=\"group block w-full cursor-pointer text-left\"\n >\n {cardContent}\n </button>\n </Card>\n );\n }\n\n const href = `/portal/shop/${product.id}`;\n\n if (renderLink) {\n return (\n <Card className={cardClassName}>\n {renderLink({ href, children: cardContent })}\n </Card>\n );\n }\n\n return (\n <Card className={cardClassName}>\n <a href={href} className=\"group block cursor-pointer\">\n {cardContent}\n </a>\n </Card>\n );\n}\n","import {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n type ComponentProps,\n} from \"react\";\nimport type React from \"react\";\nimport {\n usePortalProductCatalog,\n type PortalProductPageParam,\n type portalProducts,\n} from \"@fluid-app/products-core\";\nimport { useInfiniteQuery } from \"@tanstack/react-query\";\nimport {\n Button,\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuLabel,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n Skeleton,\n} from \"@fluid-app/ui-primitives\";\nimport { SearchSort } from \"@fluid-app/ui-components/components/SearchSort\";\nimport ProductCard, {\n tagPortalProduct,\n} from \"@fluid-app/shop-ui/components/product-card\";\nimport { useWidgetPreviewContext } from \"@fluid-app/portal-react/data-sources/preview-context\";\nimport type {\n BackgroundValue,\n BorderRadiusOptions,\n ColorOptions,\n PaddingOptions,\n} from \"@fluid-app/portal-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/portal-core/registries\";\nimport { ArrowUpDown, ImageIcon } from \"lucide-react\";\nimport {\n getBorderRadiusField,\n getColorField,\n getPaddingField,\n} from \"../core/fields\";\nimport { useWidgetInteraction } from \"../contexts/WidgetInteractionContext\";\n\ntype ColumnsKey = 2 | 3 | 4 | 5 | 6;\n\ntype ShopWidgetProps = ComponentProps<\"div\"> & {\n titleEnabled?: boolean;\n title?: string;\n titleColor?: ColorOptions;\n showSearch?: boolean;\n showSort?: boolean;\n columns?: ColumnsKey;\n pageSize?: number;\n useDataSource?: boolean;\n products?: portalProducts.Product[];\n background?: BackgroundValue;\n padding?: PaddingOptions;\n borderRadius?: BorderRadiusOptions;\n cardBackground?: ColorOptions;\n cardTextColor?: ColorOptions;\n};\n\nconst GRID_BY_COLUMNS: Record<ColumnsKey, string> = {\n 2: \"grid grid-cols-2 gap-3 sm:gap-6\",\n 3: \"grid grid-cols-2 gap-3 sm:gap-6 md:grid-cols-3\",\n 4: \"grid grid-cols-2 gap-3 sm:gap-6 sm:grid-cols-3 md:grid-cols-4\",\n 5: \"grid grid-cols-2 gap-3 sm:gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5\",\n 6: \"grid grid-cols-2 gap-3 sm:gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6\",\n};\n\nconst SORT_OPTIONS = [\n { id: \"title_asc\", label: \"Title (A–Z)\" },\n { id: \"title_desc\", label: \"Title (Z–A)\" },\n { id: \"price_asc\", label: \"Price (Low to High)\" },\n { id: \"price_desc\", label: \"Price (High to Low)\" },\n { id: \"created_at_desc\", label: \"Recently added\" },\n { id: \"created_at_asc\", label: \"Oldest\" },\n] as const;\n\nconst PREVIEW_PRODUCTS: ReadonlyArray<{\n id: string;\n name: string;\n price: string;\n}> = [\n { id: \"preview-1\", name: \"Premium Wireless Headphones\", price: \"$249\" },\n { id: \"preview-2\", name: \"Smart Watch Series X\", price: \"$199\" },\n { id: \"preview-3\", name: \"Sunglasses\", price: \"$79\" },\n { id: \"preview-4\", name: \"Trail Running Shoes\", price: \"$129\" },\n { id: \"preview-5\", name: \"Daypack Backpack\", price: \"$89\" },\n { id: \"preview-6\", name: \"Stainless Bottle\", price: \"$32\" },\n { id: \"preview-7\", name: \"Linen Throw\", price: \"$59\" },\n { id: \"preview-8\", name: \"Ceramic Mug\", price: \"$24\" },\n { id: \"preview-9\", name: \"Wool Blanket\", price: \"$148\" },\n { id: \"preview-10\", name: \"Leather Wallet\", price: \"$45\" },\n { id: \"preview-11\", name: \"Pour-Over Kettle\", price: \"$78\" },\n { id: \"preview-12\", name: \"Linen Shirt\", price: \"$95\" },\n];\n\nfunction clampColumns(value: number | undefined): ColumnsKey {\n const n = Math.round(value ?? 4);\n if (n <= 2) return 2;\n if (n >= 6) return 6;\n return n as ColumnsKey;\n}\n\nconst INFINITE_SCROLL_THRESHOLD = 10;\n\nfunction clampPageSize(value: number | undefined): number {\n const n = Math.round(value ?? 25);\n return Math.max(1, n);\n}\n\n// Data sources can deliver products in legacy/shareable shape (`title`,\n// `image_url`/`imageUrl`/`thumbnail_url`) or portal shape (`name`, `images`).\n// Modeled as a typed superset so the probe doesn't lose type-safety.\ntype LegacyProductFields = {\n title?: string;\n image_url?: string;\n imageUrl?: string;\n thumbnail_url?: string;\n};\n\ntype LegacyImageFields = {\n url?: string;\n image_url?: string;\n alt?: string | null;\n};\n\nfunction normalizeDataSourceProduct(\n input: portalProducts.Product,\n): portalProducts.Product {\n const r = input as portalProducts.Product & LegacyProductFields;\n const name = r.name ?? r.title ?? \"\";\n\n let images: portalProducts.ProductImage[];\n if (Array.isArray(r.images) && r.images.length > 0) {\n images = r.images.flatMap<portalProducts.ProductImage>((img) => {\n const i = img as LegacyImageFields;\n const url = i.url ?? i.image_url;\n if (!url) return [];\n return [{ url, alt: i.alt ?? null }];\n });\n } else {\n const url = r.image_url ?? r.imageUrl ?? r.thumbnail_url;\n images = url ? [{ url, alt: null }] : [];\n }\n\n // Strip undefined props from the spread so EOPT accepts the result.\n const cleaned: Record<string, unknown> = {};\n for (const [k, v] of Object.entries(r)) {\n if (v !== undefined) cleaned[k] = v;\n }\n return { ...(cleaned as portalProducts.Product), name, images };\n}\n\n// Tailwind v4 @theme inline aliases --color-*; remap the underlying --card / --foreground tokens.\nfunction cardScopedStyle(\n cardBackground: ColorOptions | undefined,\n cardTextColor: ColorOptions | undefined,\n): React.CSSProperties {\n const style: Record<string, string> = {};\n if (cardBackground) style[\"--card\"] = `var(--${cardBackground})`;\n if (cardTextColor) style[\"--foreground\"] = `var(--${cardTextColor})`;\n return style as React.CSSProperties;\n}\n\nexport function ShopWidget({\n titleEnabled = true,\n title = \"\",\n titleColor = \"foreground\",\n showSearch = true,\n showSort = true,\n columns = 4,\n pageSize = 25,\n useDataSource = false,\n products,\n\n background = { type: \"solid\", color: \"background\" },\n padding = 6,\n borderRadius = \"lg\",\n\n cardBackground,\n cardTextColor,\n\n className,\n ...props\n}: ShopWidgetProps): React.JSX.Element {\n const { isPreview } = useWidgetPreviewContext();\n const safeColumns = clampColumns(columns);\n const safePageSize = clampPageSize(pageSize);\n\n const backgroundColor = background.color ?? \"background\";\n const backgroundImage =\n background.type === \"image\" &&\n (background.resource?.image_url || background.resource?.imageUrl)\n ? `url(${background.resource.image_url || background.resource.imageUrl})`\n : \"none\";\n\n return (\n <div\n className={`bg-${backgroundColor} p-${padding} rounded-${borderRadius} @container ${className ?? \"\"}`}\n style={{ backgroundImage }}\n {...props}\n >\n {isPreview ? (\n <PreviewBody\n columns={safeColumns}\n titleEnabled={titleEnabled}\n title={title}\n titleColor={titleColor}\n showSearch={showSearch}\n showSort={showSort}\n cardBackground={cardBackground}\n cardTextColor={cardTextColor}\n />\n ) : (\n <LiveBody\n columns={safeColumns}\n pageSize={safePageSize}\n titleEnabled={titleEnabled}\n title={title}\n titleColor={titleColor}\n showSearch={showSearch}\n showSort={showSort}\n useDataSource={useDataSource}\n products={products}\n cardBackground={cardBackground}\n cardTextColor={cardTextColor}\n />\n )}\n </div>\n );\n}\n\nfunction PreviewBody({\n columns,\n titleEnabled,\n title,\n titleColor,\n showSearch,\n showSort,\n cardBackground,\n cardTextColor,\n}: {\n columns: ColumnsKey;\n titleEnabled: boolean;\n title: string | undefined;\n titleColor: ColorOptions;\n showSearch: boolean;\n showSort: boolean;\n cardBackground: ColorOptions | undefined;\n cardTextColor: ColorOptions | undefined;\n}) {\n const hasTitle = titleEnabled && !!title;\n const hasHeader = hasTitle || showSearch || showSort;\n return (\n <div>\n {hasHeader && (\n <div className=\"mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-2\">\n {hasTitle && (\n <h2\n className={`text-${titleColor} text-2xl font-semibold tracking-tight`}\n >\n {title}\n </h2>\n )}\n {(showSearch || showSort) && (\n <div className=\"flex items-center gap-2 sm:ml-auto\">\n {showSearch && (\n <div\n aria-hidden\n className=\"bg-muted h-9 w-full max-w-sm rounded-md sm:w-64\"\n />\n )}\n {showSort && (\n <div aria-hidden className=\"bg-muted size-9 rounded-md\" />\n )}\n </div>\n )}\n </div>\n )}\n <div\n className={GRID_BY_COLUMNS[columns]}\n style={cardScopedStyle(cardBackground, cardTextColor)}\n >\n {PREVIEW_PRODUCTS.slice(0, columns * 2).map((p) => (\n <ProductCardCompact\n key={p.id}\n name={p.name}\n imageUrl={null}\n price={p.price}\n />\n ))}\n </div>\n </div>\n );\n}\n\nfunction LiveBody({\n useDataSource,\n products,\n ...rest\n}: {\n columns: ColumnsKey;\n pageSize: number;\n titleEnabled: boolean;\n title: string | undefined;\n titleColor: ColorOptions;\n showSearch: boolean;\n showSort: boolean;\n useDataSource: boolean;\n products: portalProducts.Product[] | undefined;\n cardBackground: ColorOptions | undefined;\n cardTextColor: ColorOptions | undefined;\n}) {\n // Branch at the component level so the catalog hook (which throws when\n // PortalProductsCoreProvider is missing) is only called in catalog mode.\n if (useDataSource) {\n // DataAwareWidget owns loading state; undefined here just means no data source configured, not \"still loading.\"\n return (\n <DataSourceBody\n columns={rest.columns}\n titleEnabled={rest.titleEnabled}\n title={rest.title}\n titleColor={rest.titleColor}\n products={products ?? []}\n cardBackground={rest.cardBackground}\n cardTextColor={rest.cardTextColor}\n />\n );\n }\n return <CatalogBody {...rest} />;\n}\n\nfunction DataSourceBody({\n columns,\n titleEnabled,\n title,\n titleColor,\n products,\n cardBackground,\n cardTextColor,\n}: {\n columns: ColumnsKey;\n titleEnabled: boolean;\n title: string | undefined;\n titleColor: ColorOptions;\n products: portalProducts.Product[];\n cardBackground: ColorOptions | undefined;\n cardTextColor: ColorOptions | undefined;\n}) {\n const { onNavigate } = useWidgetInteraction();\n const handleSelect = useCallback(\n (id: string | number) => {\n onNavigate?.(`shop/${id}`);\n },\n [onNavigate],\n );\n\n const hasTitle = titleEnabled && !!title;\n\n return (\n <div>\n {hasTitle && (\n <h2\n className={`text-${titleColor} mb-6 text-2xl font-semibold tracking-tight`}\n >\n {title}\n </h2>\n )}\n {products.length === 0 ? (\n <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n <p className=\"text-muted-foreground text-sm\">No products yet.</p>\n </div>\n ) : (\n <div\n className={GRID_BY_COLUMNS[columns]}\n style={cardScopedStyle(cardBackground, cardTextColor)}\n >\n {products.map((product) => {\n if (product.id == null) return null;\n // Defensive: older widgets may have a data source that returns\n // non-product shareables (Medium, EnrollmentPack, Page, Library).\n // The shop widget only knows how to navigate to product detail,\n // so skip anything that isn't a Product. Items without\n // `shareable_type` (static products / untagged feeds) fall through.\n const shareableType = (product as { shareable_type?: string })\n .shareable_type;\n if (shareableType != null && shareableType !== \"Product\")\n return null;\n const productId = product.id;\n return (\n <ProductCard\n key={productId}\n product={tagPortalProduct(normalizeDataSourceProduct(product))}\n onClick={() => handleSelect(productId)}\n />\n );\n })}\n </div>\n )}\n </div>\n );\n}\n\nfunction CatalogBody({\n columns,\n pageSize,\n titleEnabled,\n title,\n titleColor,\n showSearch,\n showSort,\n cardBackground,\n cardTextColor,\n}: {\n columns: ColumnsKey;\n pageSize: number;\n titleEnabled: boolean;\n title: string | undefined;\n titleColor: ColorOptions;\n showSearch: boolean;\n showSort: boolean;\n cardBackground: ColorOptions | undefined;\n cardTextColor: ColorOptions | undefined;\n}) {\n const observerTarget = useRef<HTMLDivElement>(null);\n const { onNavigate } = useWidgetInteraction();\n\n // Cap the API batch in infinite mode so the observer has pages left to fetch.\n const isInfinite = pageSize > INFINITE_SCROLL_THRESHOLD;\n const apiPerPage = isInfinite ? INFINITE_SCROLL_THRESHOLD : pageSize;\n\n const catalog = usePortalProductCatalog({ perPage: apiPerPage });\n const {\n data,\n isLoading,\n isFetchingNextPage,\n hasNextPage,\n fetchNextPage,\n error,\n isFetched,\n } = useInfiniteQuery({\n queryKey: catalog.queryKey,\n queryFn: ({ pageParam, signal }) =>\n catalog.fetchProducts(pageParam, signal),\n getNextPageParam: catalog.getNextPageParam,\n initialPageParam: undefined as PortalProductPageParam,\n });\n\n const allProducts = useMemo(\n () => data?.pages.flatMap((page) => page.products) ?? [],\n [data?.pages],\n );\n\n const visibleProducts = useMemo(\n () => (isInfinite ? allProducts : allProducts.slice(0, pageSize)),\n [allProducts, pageSize, isInfinite],\n );\n const reachedLimit = !isInfinite && visibleProducts.length >= pageSize;\n\n const handleIntersect = useCallback(\n (entries: IntersectionObserverEntry[]) => {\n if (\n entries[0]?.isIntersecting &&\n hasNextPage &&\n !isFetchingNextPage &&\n !reachedLimit\n ) {\n fetchNextPage();\n }\n },\n [hasNextPage, isFetchingNextPage, fetchNextPage, reachedLimit],\n );\n\n useEffect(() => {\n const target = observerTarget.current;\n if (!target) return;\n const observer = new IntersectionObserver(handleIntersect, {\n threshold: 0.1,\n rootMargin: \"200px\",\n });\n observer.observe(target);\n return () => observer.disconnect();\n }, [handleIntersect]);\n\n const handleSelect = useCallback(\n (id: string | number) => {\n onNavigate?.(`shop/${id}`);\n },\n [onNavigate],\n );\n\n const hasTitle = titleEnabled && !!title;\n const hasHeader = hasTitle || showSearch || showSort;\n\n return (\n <div>\n {hasHeader && (\n <div className=\"mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-2\">\n {hasTitle && (\n <h2\n className={`text-${titleColor} text-2xl font-semibold tracking-tight`}\n >\n {title}\n </h2>\n )}\n {(showSearch || showSort) && (\n <div className=\"flex items-center gap-2 sm:ml-auto\">\n {showSearch && (\n <div className=\"w-full max-w-sm sm:w-64\">\n <SearchSort\n searchValue={catalog.searchTerm}\n onSearchChange={catalog.setSearchTerm}\n placeholder=\"Search products\"\n />\n </div>\n )}\n {showSort && (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"border-foreground/10 size-9 shrink-0\"\n >\n <ArrowUpDown className=\"size-3\" />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-60\">\n <DropdownMenuLabel>Sort by</DropdownMenuLabel>\n <DropdownMenuSeparator />\n <DropdownMenuRadioGroup\n value={catalog.currentSort}\n onValueChange={catalog.setCurrentSort}\n >\n {SORT_OPTIONS.map((opt) => (\n <DropdownMenuRadioItem key={opt.id} value={opt.id}>\n {opt.label}\n </DropdownMenuRadioItem>\n ))}\n </DropdownMenuRadioGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n )}\n </div>\n )}\n </div>\n )}\n\n {isLoading ? (\n // Floor of 8 keeps mobile (always 2 cols) from rendering a stubby grid.\n <SkeletonGrid columns={columns} count={Math.max(columns * 2, 8)} />\n ) : error && visibleProducts.length === 0 ? (\n <div className=\"bg-destructive/10 text-destructive my-6 rounded-lg px-4 py-3 text-sm\">\n Couldn’t load products. Try again later.\n </div>\n ) : isFetched && visibleProducts.length === 0 ? (\n <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n <p className=\"text-muted-foreground text-sm\">\n {catalog.searchTerm\n ? `No products match “${catalog.searchTerm}”.`\n : \"No products yet.\"}\n </p>\n </div>\n ) : (\n <>\n <div\n className={GRID_BY_COLUMNS[columns]}\n style={cardScopedStyle(cardBackground, cardTextColor)}\n >\n {visibleProducts.map((product) => {\n if (product.id == null) return null;\n const productId = product.id;\n return (\n <ProductCard\n key={productId}\n product={tagPortalProduct(product)}\n onClick={() => handleSelect(productId)}\n />\n );\n })}\n </div>\n {!reachedLimit && <div ref={observerTarget} />}\n {isFetchingNextPage && !reachedLimit && (\n <div className=\"mt-6\">\n <SkeletonGrid columns={columns} count={columns} />\n </div>\n )}\n {error && (\n <div className=\"bg-destructive/10 text-destructive mt-6 rounded-lg px-4 py-3 text-sm\">\n Couldn’t load more products. Try again later.\n </div>\n )}\n </>\n )}\n </div>\n );\n}\n\nfunction ProductCardCompact({\n name,\n imageUrl,\n price,\n onClick,\n}: {\n name: string;\n imageUrl: string | null;\n price: string | null;\n onClick?: () => void;\n}) {\n const interactive = !!onClick;\n return (\n <button\n type=\"button\"\n onClick={onClick}\n disabled={!interactive}\n className={`bg-card text-card-foreground group flex flex-col overflow-hidden rounded-lg border border-transparent text-left ${interactive ? \"hover:border-border cursor-pointer transition-shadow hover:shadow-md\" : \"cursor-default\"} focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none`}\n >\n <div className=\"bg-muted relative aspect-square w-full overflow-hidden\">\n {imageUrl ? (\n <>\n <img\n key={imageUrl}\n src={imageUrl}\n alt=\"\"\n loading=\"lazy\"\n decoding=\"async\"\n className=\"absolute inset-0 h-full w-full scale-125 object-cover blur-md\"\n aria-hidden=\"true\"\n onError={(e) => {\n e.currentTarget.style.display = \"none\";\n }}\n />\n <img\n src={imageUrl}\n alt={name}\n className=\"relative z-[1] h-full w-full object-contain\"\n loading=\"lazy\"\n />\n </>\n ) : (\n <div className=\"flex h-full w-full items-center justify-center\">\n <ImageIcon className=\"text-muted-foreground/40 size-10\" />\n </div>\n )}\n </div>\n <div className=\"p-3\">\n <h3 className=\"text-foreground line-clamp-2 text-sm font-medium\">\n {name}\n </h3>\n {price && (\n <p className=\"text-foreground mt-1 text-sm font-semibold\">{price}</p>\n )}\n </div>\n </button>\n );\n}\n\nfunction SkeletonGrid({\n columns,\n count,\n}: {\n columns: ColumnsKey;\n count: number;\n}) {\n return (\n <div className={GRID_BY_COLUMNS[columns]}>\n {Array.from({ length: count }, (_, i) => (\n <div key={i} className=\"space-y-3\">\n <Skeleton className=\"aspect-square w-full rounded-lg\" />\n <Skeleton className=\"h-4 w-3/4\" />\n <Skeleton className=\"h-4 w-1/3\" />\n </div>\n ))}\n </div>\n );\n}\n\nexport const shopWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"ShopWidget\",\n displayName: \"Shop\",\n tabsConfig: [\n { id: \"styling\", label: \"Styling\" },\n { id: \"data\", label: \"Data\" },\n ],\n dataSourceTargetProps: [\"products\"],\n fields: [\n // Title group\n {\n key: \"titleEnabled\",\n label: \"Widget Title\",\n type: \"boolean\",\n description: \"Enable the heading shown above the grid\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Title\",\n },\n {\n key: \"title\",\n label: \"Title\",\n type: \"text\",\n description: \"Heading text shown above the grid\",\n defaultValue: \"\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n },\n getColorField({\n key: \"titleColor\",\n label: \"Title Color\",\n description: \"Color of the heading text\",\n defaultValue: \"foreground\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n }),\n\n // Display group\n {\n key: \"showSearch\",\n label: \"Show Search\",\n type: \"boolean\",\n description: \"Display the search input above the grid\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Display\",\n requiresKeyValue: { key: \"useDataSource\", value: false },\n },\n {\n key: \"showSort\",\n label: \"Show Sort\",\n type: \"boolean\",\n description: \"Display the sort menu above the grid\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Display\",\n requiresKeyValue: { key: \"useDataSource\", value: false },\n },\n {\n key: \"columns\",\n label: \"Columns (desktop)\",\n type: \"select\",\n description:\n \"Max columns at the largest breakpoint. Mobile is always 2 columns; intermediate sizes scale smoothly between.\",\n options: [\n { label: \"2\", value: 2 },\n { label: \"3\", value: 3 },\n { label: \"4\", value: 4 },\n { label: \"5\", value: 5 },\n { label: \"6\", value: 6 },\n ],\n defaultValue: 4,\n tab: \"styling\",\n group: \"Display\",\n },\n\n // Design group\n {\n type: \"background\",\n key: \"background\",\n label: \"Background\",\n description: \"Container background\",\n defaultValue: \"background\",\n tab: \"styling\",\n group: \"Design\",\n },\n getPaddingField({\n key: \"padding\",\n label: \"Padding\",\n description: \"Inner spacing around the grid\",\n defaultValue: 6,\n tab: \"styling\",\n group: \"Design\",\n }),\n getBorderRadiusField({\n key: \"borderRadius\",\n label: \"Border Radius\",\n description: \"Container corner radius\",\n defaultValue: \"lg\",\n tab: \"styling\",\n group: \"Design\",\n }),\n\n // Card group — optional theme overrides; unset means \"inherit from theme\".\n getColorField({\n key: \"cardBackground\",\n label: \"Card Background\",\n description:\n \"Override the card background color. Leave unset to use the theme's card color.\",\n tab: \"styling\",\n group: \"Card\",\n }),\n getColorField({\n key: \"cardTextColor\",\n label: \"Card Text\",\n description:\n \"Override title + price color inside each card. Leave unset to use the theme's foreground color.\",\n tab: \"styling\",\n group: \"Card\",\n }),\n\n // Data tab\n {\n key: \"useDataSource\",\n label: \"Use Data Source\",\n type: \"boolean\",\n description:\n \"Off shows all products from the catalog. On replaces the catalog with a data source — disables search and sort.\",\n defaultValue: false,\n tab: \"data\",\n group: \"Data Configuration\",\n },\n {\n key: \"pageSize\",\n label: \"Products to show\",\n type: \"number\",\n description:\n \"Up to 10 acts as a hard cap. Above 10 the grid switches to infinite scroll (products load in batches of 10 as you scroll).\",\n defaultValue: 25,\n tab: \"data\",\n group: \"Data Configuration\",\n requiresKeyValue: { key: \"useDataSource\", value: false },\n },\n {\n key: \"dataSource\",\n label: \"Data Source\",\n type: \"dataSource\",\n description: \"\",\n tab: \"data\",\n group: \"Data Configuration\",\n requiresKeyToBeTrue: \"useDataSource\",\n },\n ],\n};\n"],"mappings":"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"}

package/dist/ShopWidget-YMXis5SJ.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"ShopWidget-YMXis5SJ.mjs","names":[],"sources":["../../../shop/core/src/translation-api-context.ts","../../../shop/ui/src/utils/media-helpers.ts","../../../shop/ui/src/components/product-card.tsx","../../widgets/src/widgets/ShopWidget.tsx"],"sourcesContent":["import { createTranslationContext } from \"@fluid-app/i18n/translation-api-context-factory\";\nimport type { ShopDict } from \"./translation-dictionary\";\n\nconst { Provider, useTranslation } = createTranslationContext<ShopDict>(\"Shop\");\n\nexport const ShopTranslationProvider = Provider;\nexport const useShopTranslation = useTranslation;\n","const VIDEO_EXTENSIONS = [\n \".mp4\",\n \".webm\",\n \".mov\",\n \".avi\",\n \".m4v\",\n \".mkv\",\n \".ogv\",\n \".ogg\",\n \".wmv\",\n \".flv\",\n \".3gp\",\n];\n\nconst IMAGE_EXTENSIONS = [\n \".jpg\",\n \".jpeg\",\n \".png\",\n \".gif\",\n \".webp\",\n \".svg\",\n \".bmp\",\n \".ico\",\n \".tiff\",\n \".tif\",\n];\n\nexport function isVideoUrl(url: string | undefined | null): boolean {\n if (!url) return false;\n const lowerUrl = url.toLowerCase();\n return VIDEO_EXTENSIONS.some((ext) => lowerUrl.includes(ext));\n}\n\nexport function isImageUrl(url: string | undefined | null): boolean {\n if (!url) return false;\n const lowerUrl = url.toLowerCase();\n return IMAGE_EXTENSIONS.some((ext) => lowerUrl.includes(ext));\n}\n\nexport function getMediaTypeFromUrl(\n url: string | undefined | null,\n): \"video\" | \"image\" | \"unknown\" {\n if (isVideoUrl(url)) return \"video\";\n if (isImageUrl(url)) return \"image\";\n return \"unknown\";\n}\n\nexport function getVideoThumbnailUrl(videoUrl: string): string {\n if (videoUrl.includes(\"ik.imagekit.io\")) {\n return `${videoUrl}/ik-thumbnail.jpg`;\n }\n return videoUrl;\n}\n\nexport function ensureImageIsFeatured<\n T extends { image_url: string; position?: number },\n>(items: T[]): T[] {\n if (items.length === 0) return items;\n\n const firstItem = items[0];\n if (!firstItem || !isVideoUrl(firstItem.image_url)) {\n return items;\n }\n\n const firstImageIndex = items.findIndex(\n (item) => !isVideoUrl(item.image_url),\n );\n\n if (firstImageIndex === -1) {\n return items;\n }\n\n const reordered = [...items];\n const [imageToMove] = reordered.splice(firstImageIndex, 1);\n if (imageToMove) {\n reordered.unshift(imageToMove);\n }\n\n return reordered;\n}\n","import type React from \"react\";\nimport { useState, type ReactNode } from \"react\";\nimport type { products, portalProducts } from \"@fluid-app/products-core\";\nimport {\n determineProductPrice,\n formatPortalPrice,\n formatPortalPriceRange,\n getProductImageUrl,\n} from \"@fluid-app/products-core\";\nimport { Badge, Card } from \"@fluid-app/ui-primitives\";\nimport { useShopTranslation } from \"@fluid-app/shop-core/translation-api-context\";\nimport { CirclePlay } from \"lucide-react\";\nimport { getVideoThumbnailUrl, isVideoUrl } from \"../utils/media-helpers\";\n\ntype LegacyProduct = (products.Product | products.ShopProduct) & {\n kind?: string;\n video_url?: string;\n};\n\nexport interface RenderImageProps {\n src: string;\n alt: string;\n fill?: boolean;\n className?: string;\n onError?: (e: React.SyntheticEvent<HTMLImageElement>) => void;\n unoptimized?: boolean;\n}\n\ntype TaggedPortalProduct = portalProducts.Product & {\n readonly __portalProduct: true;\n};\n\nexport type ProductCardProduct = LegacyProduct | TaggedPortalProduct;\n\ninterface ProductCardProps {\n product: ProductCardProduct;\n countryIso?: string;\n companyLogoUrl?: string | null;\n showShareModal?: boolean;\n setShareModalOpen?: (open: boolean) => void;\n setSelectedProduct?: (product: LegacyProduct) => void;\n renderLink?: (props: { href: string; children: ReactNode }) => ReactNode;\n renderImage?: (props: RenderImageProps) => ReactNode;\n onClick?: () => void;\n}\n\nexport function tagPortalProduct(\n product: portalProducts.Product,\n): TaggedPortalProduct {\n return { ...product, __portalProduct: true as const };\n}\n\nfunction isPortalProduct(\n product: ProductCardProduct,\n): product is TaggedPortalProduct {\n return \"__portalProduct\" in product && product.__portalProduct === true;\n}\n\nfunction getPortalProductCoverImage(\n product: portalProducts.Product,\n): string | null {\n if (product.images && product.images.length > 0) {\n return product.images[0]?.url ?? null;\n }\n return null;\n}\n\nfunction defaultRenderImage({\n src,\n alt,\n fill,\n className,\n onError,\n}: RenderImageProps): ReactNode {\n return (\n <img\n src={src}\n alt={alt}\n className={`${fill ? \"absolute inset-0 h-full w-full\" : \"\"} ${className ?? \"\"}`}\n onError={onError}\n />\n );\n}\n\nfunction ProductCardContent({\n product,\n countryIso,\n companyLogoUrl,\n renderImage = defaultRenderImage,\n}: {\n product: ProductCardProduct;\n countryIso?: string;\n companyLogoUrl?: string | null;\n renderImage?: (props: RenderImageProps) => ReactNode;\n}) {\n const [isHovered, setIsHovered] = useState(false);\n const { t } = useShopTranslation();\n\n const isPortal = isPortalProduct(product);\n const coverImage = isPortal\n ? getPortalProductCoverImage(product)\n : getProductImageUrl(product as Parameters<typeof getProductImageUrl>[0]);\n const isVideo = isVideoUrl(coverImage);\n const productName = isPortal\n ? product.name || t(\"no_title\")\n : (product as LegacyProduct).title || t(\"no_title\");\n\n const isBundle = isPortal && product.is_bundle === true;\n\n let repPrice: string | null | undefined = null;\n let price: string | null | undefined = null;\n if (isPortal) {\n // wholesale_price is non-null for reps, null for customers\n if (product.wholesale_price) {\n repPrice = formatPortalPrice(product.wholesale_price, product.currency);\n // Show retail as strikethrough if different from wholesale\n const retailFormatted = formatPortalPrice(\n product.price,\n product.currency,\n );\n if (retailFormatted !== repPrice) {\n price = retailFormatted;\n }\n } else {\n repPrice = formatPortalPrice(product.price, product.currency);\n }\n } else if (countryIso) {\n const prices = determineProductPrice(product, countryIso);\n repPrice = prices.repPrice;\n price = prices.price;\n }\n\n // A bundle's master-variant price is often $0, so show the resolved range.\n // Fall back to the single (backend-guaranteed non-zero) retail price when no\n // range — matching the detail page's fallback so card and detail never diverge.\n const bundlePrice = isBundle\n ? (formatPortalPriceRange(product.price_range, product.currency) ??\n formatPortalPrice(product.price, product.currency))\n : null;\n\n const resolvedCoverImage =\n isVideo && coverImage\n ? getVideoThumbnailUrl(coverImage)\n : coverImage ||\n \"https://ik.imagekit.io/fluid/tr:w-1500,h-1500,cm-pad_resize,bg-FFFFFF/980191006/images/WJHL8V/WeCommerce_Logotype-Black_NcO-MzatB.png\";\n\n return (\n <>\n {/* Image/Video container */}\n <div\n className=\"bg-muted relative aspect-square overflow-hidden\"\n onMouseEnter={() => isVideo && setIsHovered(true)}\n onMouseLeave={() => isVideo && setIsHovered(false)}\n >\n {isVideo && isHovered ? (\n <video\n src={coverImage || \"\"}\n className=\"absolute inset-0 h-full w-full object-cover\"\n autoPlay\n muted\n loop\n playsInline\n />\n ) : (\n <>\n {!isVideo && (\n <img\n key={resolvedCoverImage}\n src={resolvedCoverImage}\n alt=\"\"\n loading=\"lazy\"\n decoding=\"async\"\n className=\"absolute inset-0 h-full w-full scale-125 object-cover blur-md\"\n aria-hidden=\"true\"\n onError={(e) => {\n e.currentTarget.style.display = \"none\";\n }}\n />\n )}\n {renderImage({\n src: resolvedCoverImage,\n alt: productName,\n fill: true,\n className: \"object-contain\",\n onError: (e) => {\n e.currentTarget.src =\n companyLogoUrl ||\n \"https://ik.imagekit.io/fluid/tr:w-1500,h-1500,cm-pad_resize,bg-FFFFFF/980191006/images/WJHL8V/WeCommerce_Logotype-Black_NcO-MzatB.png\";\n },\n unoptimized: true,\n })}\n </>\n )}\n\n {/* Video play indicator */}\n {isVideo && !isHovered && (\n <div className=\"absolute inset-0 flex items-center justify-center\">\n <div className=\"flex size-16 items-center justify-center rounded-full bg-black/50 backdrop-blur-sm\">\n <CirclePlay className=\"size-12 text-white\" />\n </div>\n </div>\n )}\n\n {/* Bundle badge */}\n {isBundle && (\n <Badge variant=\"secondary\" className=\"absolute top-2 left-2\">\n {t(\"bundle_badge\")}\n </Badge>\n )}\n </div>\n\n {/* Product info */}\n <div className=\"px-3 pt-2 pb-4\">\n <h3 className=\"text-foreground line-clamp-1 text-sm font-bold\">\n {productName}\n </h3>\n\n <div className=\"flex items-center gap-2\">\n {isBundle ? (\n bundlePrice && (\n <span className=\"text-foreground text-sm font-bold\">\n {bundlePrice}\n </span>\n )\n ) : (\n <>\n {repPrice && (\n <span className=\"text-foreground text-sm font-bold\">\n {repPrice}\n </span>\n )}\n {price && (\n <span className=\"text-muted-foreground text-sm line-through\">\n {price}\n </span>\n )}\n </>\n )}\n </div>\n\n {!isPortal && countryIso && (\n <div className=\"text-muted-foreground text-sm\">\n CV{\" \"}\n {getVariantCountryValue(\n getSelectedVariant(product as LegacyProduct),\n countryIso,\n \"cv\",\n ) || \"-\"}{\" \"}\n | QV{\" \"}\n {getVariantCountryValue(\n getSelectedVariant(product as LegacyProduct),\n countryIso,\n \"qv\",\n ) || \"-\"}\n </div>\n )}\n\n {isPortal && product.wholesale_price != null && (\n <div className=\"text-muted-foreground text-sm\">\n CV {product.cv ?? \"-\"} | QV {product.qv ?? \"-\"}\n </div>\n )}\n </div>\n </>\n );\n}\n\nfunction getSelectedVariant(\n product: LegacyProduct,\n): products.Variant | products.ShopVariant | null {\n if (!product.variants || product.variants.length === 0) return null;\n\n const masterVariant = product.variants.find(\n (v: products.Variant | products.ShopVariant) => {\n return \"is_master\" in v && v.is_master;\n },\n );\n if (masterVariant) return masterVariant;\n\n return product.variants[0] || null;\n}\n\nfunction getVariantCountryValue(\n variant: products.Variant | products.ShopVariant | null,\n countryIso: string,\n field: \"cv\" | \"qv\",\n): number | null {\n if (!variant || !variant.variant_countries) return null;\n\n if (\n typeof variant.variant_countries === \"object\" &&\n !Array.isArray(variant.variant_countries)\n ) {\n const countryData = variant.variant_countries[countryIso] as\n | products.VariantCountry\n | undefined;\n return countryData?.[field] ?? null;\n }\n\n if (Array.isArray(variant.variant_countries)) {\n const countryData = variant.variant_countries.find(\n (vc: products.ShopVariantCountry) => vc.country_iso === countryIso,\n );\n return countryData?.[field] ?? null;\n }\n\n return null;\n}\n\nexport default function ProductCard({\n product,\n countryIso,\n companyLogoUrl,\n showShareModal = false,\n setShareModalOpen,\n setSelectedProduct,\n renderLink,\n renderImage,\n onClick,\n}: ProductCardProps): React.JSX.Element {\n const cardContent = (\n <ProductCardContent\n product={product}\n {...(countryIso !== undefined && { countryIso })}\n {...(companyLogoUrl !== undefined && { companyLogoUrl })}\n {...(renderImage !== undefined && { renderImage })}\n />\n );\n\n const cardClassName = \"overflow-hidden border-0 shadow-none pt-0 gap-0\";\n\n if (showShareModal && !isPortalProduct(product)) {\n const handleShareClick = () => {\n if (setSelectedProduct && setShareModalOpen) {\n setSelectedProduct(product);\n setShareModalOpen(true);\n }\n };\n return (\n <Card className={cardClassName}>\n <button\n onClick={handleShareClick}\n className=\"group block w-full cursor-pointer text-left\"\n >\n {cardContent}\n </button>\n </Card>\n );\n }\n\n if (onClick) {\n return (\n <Card className={cardClassName}>\n <button\n onClick={onClick}\n className=\"group block w-full cursor-pointer text-left\"\n >\n {cardContent}\n </button>\n </Card>\n );\n }\n\n const href = `/portal/shop/${product.id}`;\n\n if (renderLink) {\n return (\n <Card className={cardClassName}>\n {renderLink({ href, children: cardContent })}\n </Card>\n );\n }\n\n return (\n <Card className={cardClassName}>\n <a href={href} className=\"group block cursor-pointer\">\n {cardContent}\n </a>\n </Card>\n );\n}\n","import {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n type ComponentProps,\n} from \"react\";\nimport type React from \"react\";\nimport {\n usePortalProductCatalog,\n type PortalProductPageParam,\n type portalProducts,\n} from \"@fluid-app/products-core\";\nimport { useInfiniteQuery } from \"@tanstack/react-query\";\nimport {\n Button,\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuLabel,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n Skeleton,\n} from \"@fluid-app/ui-primitives\";\nimport { SearchSort } from \"@fluid-app/ui-components/components/SearchSort\";\nimport ProductCard, {\n tagPortalProduct,\n} from \"@fluid-app/shop-ui/components/product-card\";\nimport { useWidgetPreviewContext } from \"@fluid-app/portal-react/data-sources/preview-context\";\nimport type {\n BackgroundValue,\n BorderRadiusOptions,\n ColorOptions,\n PaddingOptions,\n} from \"@fluid-app/portal-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/portal-core/registries\";\nimport { ArrowUpDown, ImageIcon } from \"lucide-react\";\nimport {\n getBorderRadiusField,\n getColorField,\n getPaddingField,\n} from \"../core/fields\";\nimport { useWidgetInteraction } from \"../contexts/WidgetInteractionContext\";\n\ntype ColumnsKey = 2 | 3 | 4 | 5 | 6;\n\ntype ShopWidgetProps = ComponentProps<\"div\"> & {\n titleEnabled?: boolean;\n title?: string;\n titleColor?: ColorOptions;\n showSearch?: boolean;\n showSort?: boolean;\n columns?: ColumnsKey;\n pageSize?: number;\n useDataSource?: boolean;\n products?: portalProducts.Product[];\n background?: BackgroundValue;\n padding?: PaddingOptions;\n borderRadius?: BorderRadiusOptions;\n cardBackground?: ColorOptions;\n cardTextColor?: ColorOptions;\n};\n\nconst GRID_BY_COLUMNS: Record<ColumnsKey, string> = {\n 2: \"grid grid-cols-2 gap-3 sm:gap-6\",\n 3: \"grid grid-cols-2 gap-3 sm:gap-6 md:grid-cols-3\",\n 4: \"grid grid-cols-2 gap-3 sm:gap-6 sm:grid-cols-3 md:grid-cols-4\",\n 5: \"grid grid-cols-2 gap-3 sm:gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5\",\n 6: \"grid grid-cols-2 gap-3 sm:gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6\",\n};\n\nconst SORT_OPTIONS = [\n { id: \"title_asc\", label: \"Title (A–Z)\" },\n { id: \"title_desc\", label: \"Title (Z–A)\" },\n { id: \"price_asc\", label: \"Price (Low to High)\" },\n { id: \"price_desc\", label: \"Price (High to Low)\" },\n { id: \"created_at_desc\", label: \"Recently added\" },\n { id: \"created_at_asc\", label: \"Oldest\" },\n] as const;\n\nconst PREVIEW_PRODUCTS: ReadonlyArray<{\n id: string;\n name: string;\n price: string;\n}> = [\n { id: \"preview-1\", name: \"Premium Wireless Headphones\", price: \"$249\" },\n { id: \"preview-2\", name: \"Smart Watch Series X\", price: \"$199\" },\n { id: \"preview-3\", name: \"Sunglasses\", price: \"$79\" },\n { id: \"preview-4\", name: \"Trail Running Shoes\", price: \"$129\" },\n { id: \"preview-5\", name: \"Daypack Backpack\", price: \"$89\" },\n { id: \"preview-6\", name: \"Stainless Bottle\", price: \"$32\" },\n { id: \"preview-7\", name: \"Linen Throw\", price: \"$59\" },\n { id: \"preview-8\", name: \"Ceramic Mug\", price: \"$24\" },\n { id: \"preview-9\", name: \"Wool Blanket\", price: \"$148\" },\n { id: \"preview-10\", name: \"Leather Wallet\", price: \"$45\" },\n { id: \"preview-11\", name: \"Pour-Over Kettle\", price: \"$78\" },\n { id: \"preview-12\", name: \"Linen Shirt\", price: \"$95\" },\n];\n\nfunction clampColumns(value: number | undefined): ColumnsKey {\n const n = Math.round(value ?? 4);\n if (n <= 2) return 2;\n if (n >= 6) return 6;\n return n as ColumnsKey;\n}\n\nconst INFINITE_SCROLL_THRESHOLD = 10;\n\nfunction clampPageSize(value: number | undefined): number {\n const n = Math.round(value ?? 25);\n return Math.max(1, n);\n}\n\n// Data sources can deliver products in legacy/shareable shape (`title`,\n// `image_url`/`imageUrl`/`thumbnail_url`) or portal shape (`name`, `images`).\n// Modeled as a typed superset so the probe doesn't lose type-safety.\ntype LegacyProductFields = {\n title?: string;\n image_url?: string;\n imageUrl?: string;\n thumbnail_url?: string;\n};\n\ntype LegacyImageFields = {\n url?: string;\n image_url?: string;\n alt?: string | null;\n};\n\nfunction normalizeDataSourceProduct(\n input: portalProducts.Product,\n): portalProducts.Product {\n const r = input as portalProducts.Product & LegacyProductFields;\n const name = r.name ?? r.title ?? \"\";\n\n let images: portalProducts.ProductImage[];\n if (Array.isArray(r.images) && r.images.length > 0) {\n images = r.images.flatMap<portalProducts.ProductImage>((img) => {\n const i = img as LegacyImageFields;\n const url = i.url ?? i.image_url;\n if (!url) return [];\n return [{ url, alt: i.alt ?? null }];\n });\n } else {\n const url = r.image_url ?? r.imageUrl ?? r.thumbnail_url;\n images = url ? [{ url, alt: null }] : [];\n }\n\n // Strip undefined props from the spread so EOPT accepts the result.\n const cleaned: Record<string, unknown> = {};\n for (const [k, v] of Object.entries(r)) {\n if (v !== undefined) cleaned[k] = v;\n }\n return { ...(cleaned as portalProducts.Product), name, images };\n}\n\n// Tailwind v4 @theme inline aliases --color-*; remap the underlying --card / --foreground tokens.\nfunction cardScopedStyle(\n cardBackground: ColorOptions | undefined,\n cardTextColor: ColorOptions | undefined,\n): React.CSSProperties {\n const style: Record<string, string> = {};\n if (cardBackground) style[\"--card\"] = `var(--${cardBackground})`;\n if (cardTextColor) style[\"--foreground\"] = `var(--${cardTextColor})`;\n return style as React.CSSProperties;\n}\n\nexport function ShopWidget({\n titleEnabled = true,\n title = \"\",\n titleColor = \"foreground\",\n showSearch = true,\n showSort = true,\n columns = 4,\n pageSize = 25,\n useDataSource = false,\n products,\n\n background = { type: \"solid\", color: \"background\" },\n padding = 6,\n borderRadius = \"lg\",\n\n cardBackground,\n cardTextColor,\n\n className,\n ...props\n}: ShopWidgetProps): React.JSX.Element {\n const { isPreview } = useWidgetPreviewContext();\n const safeColumns = clampColumns(columns);\n const safePageSize = clampPageSize(pageSize);\n\n const backgroundColor = background.color ?? \"background\";\n const backgroundImage =\n background.type === \"image\" &&\n (background.resource?.image_url || background.resource?.imageUrl)\n ? `url(${background.resource.image_url || background.resource.imageUrl})`\n : \"none\";\n\n return (\n <div\n className={`bg-${backgroundColor} p-${padding} rounded-${borderRadius} @container ${className ?? \"\"}`}\n style={{ backgroundImage }}\n {...props}\n >\n {isPreview ? (\n <PreviewBody\n columns={safeColumns}\n titleEnabled={titleEnabled}\n title={title}\n titleColor={titleColor}\n showSearch={showSearch}\n showSort={showSort}\n cardBackground={cardBackground}\n cardTextColor={cardTextColor}\n />\n ) : (\n <LiveBody\n columns={safeColumns}\n pageSize={safePageSize}\n titleEnabled={titleEnabled}\n title={title}\n titleColor={titleColor}\n showSearch={showSearch}\n showSort={showSort}\n useDataSource={useDataSource}\n products={products}\n cardBackground={cardBackground}\n cardTextColor={cardTextColor}\n />\n )}\n </div>\n );\n}\n\nfunction PreviewBody({\n columns,\n titleEnabled,\n title,\n titleColor,\n showSearch,\n showSort,\n cardBackground,\n cardTextColor,\n}: {\n columns: ColumnsKey;\n titleEnabled: boolean;\n title: string | undefined;\n titleColor: ColorOptions;\n showSearch: boolean;\n showSort: boolean;\n cardBackground: ColorOptions | undefined;\n cardTextColor: ColorOptions | undefined;\n}) {\n const hasTitle = titleEnabled && !!title;\n const hasHeader = hasTitle || showSearch || showSort;\n return (\n <div>\n {hasHeader && (\n <div className=\"mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-2\">\n {hasTitle && (\n <h2\n className={`text-${titleColor} text-2xl font-semibold tracking-tight`}\n >\n {title}\n </h2>\n )}\n {(showSearch || showSort) && (\n <div className=\"flex items-center gap-2 sm:ml-auto\">\n {showSearch && (\n <div\n aria-hidden\n className=\"bg-muted h-9 w-full max-w-sm rounded-md sm:w-64\"\n />\n )}\n {showSort && (\n <div aria-hidden className=\"bg-muted size-9 rounded-md\" />\n )}\n </div>\n )}\n </div>\n )}\n <div\n className={GRID_BY_COLUMNS[columns]}\n style={cardScopedStyle(cardBackground, cardTextColor)}\n >\n {PREVIEW_PRODUCTS.slice(0, columns * 2).map((p) => (\n <ProductCardCompact\n key={p.id}\n name={p.name}\n imageUrl={null}\n price={p.price}\n />\n ))}\n </div>\n </div>\n );\n}\n\nfunction LiveBody({\n useDataSource,\n products,\n ...rest\n}: {\n columns: ColumnsKey;\n pageSize: number;\n titleEnabled: boolean;\n title: string | undefined;\n titleColor: ColorOptions;\n showSearch: boolean;\n showSort: boolean;\n useDataSource: boolean;\n products: portalProducts.Product[] | undefined;\n cardBackground: ColorOptions | undefined;\n cardTextColor: ColorOptions | undefined;\n}) {\n // Branch at the component level so the catalog hook (which throws when\n // PortalProductsCoreProvider is missing) is only called in catalog mode.\n if (useDataSource) {\n // DataAwareWidget owns loading state; undefined here just means no data source configured, not \"still loading.\"\n return (\n <DataSourceBody\n columns={rest.columns}\n titleEnabled={rest.titleEnabled}\n title={rest.title}\n titleColor={rest.titleColor}\n products={products ?? []}\n cardBackground={rest.cardBackground}\n cardTextColor={rest.cardTextColor}\n />\n );\n }\n return <CatalogBody {...rest} />;\n}\n\nfunction DataSourceBody({\n columns,\n titleEnabled,\n title,\n titleColor,\n products,\n cardBackground,\n cardTextColor,\n}: {\n columns: ColumnsKey;\n titleEnabled: boolean;\n title: string | undefined;\n titleColor: ColorOptions;\n products: portalProducts.Product[];\n cardBackground: ColorOptions | undefined;\n cardTextColor: ColorOptions | undefined;\n}) {\n const { onNavigate } = useWidgetInteraction();\n const handleSelect = useCallback(\n (id: string | number) => {\n onNavigate?.(`shop/${id}`);\n },\n [onNavigate],\n );\n\n const hasTitle = titleEnabled && !!title;\n\n return (\n <div>\n {hasTitle && (\n <h2\n className={`text-${titleColor} mb-6 text-2xl font-semibold tracking-tight`}\n >\n {title}\n </h2>\n )}\n {products.length === 0 ? (\n <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n <p className=\"text-muted-foreground text-sm\">No products yet.</p>\n </div>\n ) : (\n <div\n className={GRID_BY_COLUMNS[columns]}\n style={cardScopedStyle(cardBackground, cardTextColor)}\n >\n {products.map((product) => {\n if (product.id == null) return null;\n // Defensive: older widgets may have a data source that returns\n // non-product shareables (Medium, EnrollmentPack, Page, Library).\n // The shop widget only knows how to navigate to product detail,\n // so skip anything that isn't a Product. Items without\n // `shareable_type` (static products / untagged feeds) fall through.\n const shareableType = (product as { shareable_type?: string })\n .shareable_type;\n if (shareableType != null && shareableType !== \"Product\")\n return null;\n const productId = product.id;\n return (\n <ProductCard\n key={productId}\n product={tagPortalProduct(normalizeDataSourceProduct(product))}\n onClick={() => handleSelect(productId)}\n />\n );\n })}\n </div>\n )}\n </div>\n );\n}\n\nfunction CatalogBody({\n columns,\n pageSize,\n titleEnabled,\n title,\n titleColor,\n showSearch,\n showSort,\n cardBackground,\n cardTextColor,\n}: {\n columns: ColumnsKey;\n pageSize: number;\n titleEnabled: boolean;\n title: string | undefined;\n titleColor: ColorOptions;\n showSearch: boolean;\n showSort: boolean;\n cardBackground: ColorOptions | undefined;\n cardTextColor: ColorOptions | undefined;\n}) {\n const observerTarget = useRef<HTMLDivElement>(null);\n const { onNavigate } = useWidgetInteraction();\n\n // Cap the API batch in infinite mode so the observer has pages left to fetch.\n const isInfinite = pageSize > INFINITE_SCROLL_THRESHOLD;\n const apiPerPage = isInfinite ? INFINITE_SCROLL_THRESHOLD : pageSize;\n\n const catalog = usePortalProductCatalog({ perPage: apiPerPage });\n const {\n data,\n isLoading,\n isFetchingNextPage,\n hasNextPage,\n fetchNextPage,\n error,\n isFetched,\n } = useInfiniteQuery({\n queryKey: catalog.queryKey,\n queryFn: ({ pageParam, signal }) =>\n catalog.fetchProducts(pageParam, signal),\n getNextPageParam: catalog.getNextPageParam,\n initialPageParam: undefined as PortalProductPageParam,\n });\n\n const allProducts = useMemo(\n () => data?.pages.flatMap((page) => page.products) ?? [],\n [data?.pages],\n );\n\n const visibleProducts = useMemo(\n () => (isInfinite ? allProducts : allProducts.slice(0, pageSize)),\n [allProducts, pageSize, isInfinite],\n );\n const reachedLimit = !isInfinite && visibleProducts.length >= pageSize;\n\n const handleIntersect = useCallback(\n (entries: IntersectionObserverEntry[]) => {\n if (\n entries[0]?.isIntersecting &&\n hasNextPage &&\n !isFetchingNextPage &&\n !reachedLimit\n ) {\n fetchNextPage();\n }\n },\n [hasNextPage, isFetchingNextPage, fetchNextPage, reachedLimit],\n );\n\n useEffect(() => {\n const target = observerTarget.current;\n if (!target) return;\n const observer = new IntersectionObserver(handleIntersect, {\n threshold: 0.1,\n rootMargin: \"200px\",\n });\n observer.observe(target);\n return () => observer.disconnect();\n }, [handleIntersect]);\n\n const handleSelect = useCallback(\n (id: string | number) => {\n onNavigate?.(`shop/${id}`);\n },\n [onNavigate],\n );\n\n const hasTitle = titleEnabled && !!title;\n const hasHeader = hasTitle || showSearch || showSort;\n\n return (\n <div>\n {hasHeader && (\n <div className=\"mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-2\">\n {hasTitle && (\n <h2\n className={`text-${titleColor} text-2xl font-semibold tracking-tight`}\n >\n {title}\n </h2>\n )}\n {(showSearch || showSort) && (\n <div className=\"flex items-center gap-2 sm:ml-auto\">\n {showSearch && (\n <div className=\"w-full max-w-sm sm:w-64\">\n <SearchSort\n searchValue={catalog.searchTerm}\n onSearchChange={catalog.setSearchTerm}\n placeholder=\"Search products\"\n />\n </div>\n )}\n {showSort && (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"border-foreground/10 size-9 shrink-0\"\n >\n <ArrowUpDown className=\"size-3\" />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-60\">\n <DropdownMenuLabel>Sort by</DropdownMenuLabel>\n <DropdownMenuSeparator />\n <DropdownMenuRadioGroup\n value={catalog.currentSort}\n onValueChange={catalog.setCurrentSort}\n >\n {SORT_OPTIONS.map((opt) => (\n <DropdownMenuRadioItem key={opt.id} value={opt.id}>\n {opt.label}\n </DropdownMenuRadioItem>\n ))}\n </DropdownMenuRadioGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n )}\n </div>\n )}\n </div>\n )}\n\n {isLoading ? (\n // Floor of 8 keeps mobile (always 2 cols) from rendering a stubby grid.\n <SkeletonGrid columns={columns} count={Math.max(columns * 2, 8)} />\n ) : error && visibleProducts.length === 0 ? (\n <div className=\"bg-destructive/10 text-destructive my-6 rounded-lg px-4 py-3 text-sm\">\n Couldn’t load products. Try again later.\n </div>\n ) : isFetched && visibleProducts.length === 0 ? (\n <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n <p className=\"text-muted-foreground text-sm\">\n {catalog.searchTerm\n ? `No products match “${catalog.searchTerm}”.`\n : \"No products yet.\"}\n </p>\n </div>\n ) : (\n <>\n <div\n className={GRID_BY_COLUMNS[columns]}\n style={cardScopedStyle(cardBackground, cardTextColor)}\n >\n {visibleProducts.map((product) => {\n if (product.id == null) return null;\n const productId = product.id;\n return (\n <ProductCard\n key={productId}\n product={tagPortalProduct(product)}\n onClick={() => handleSelect(productId)}\n />\n );\n })}\n </div>\n {!reachedLimit && <div ref={observerTarget} />}\n {isFetchingNextPage && !reachedLimit && (\n <div className=\"mt-6\">\n <SkeletonGrid columns={columns} count={columns} />\n </div>\n )}\n {error && (\n <div className=\"bg-destructive/10 text-destructive mt-6 rounded-lg px-4 py-3 text-sm\">\n Couldn’t load more products. Try again later.\n </div>\n )}\n </>\n )}\n </div>\n );\n}\n\nfunction ProductCardCompact({\n name,\n imageUrl,\n price,\n onClick,\n}: {\n name: string;\n imageUrl: string | null;\n price: string | null;\n onClick?: () => void;\n}) {\n const interactive = !!onClick;\n return (\n <button\n type=\"button\"\n onClick={onClick}\n disabled={!interactive}\n className={`bg-card text-card-foreground group flex flex-col overflow-hidden rounded-lg border border-transparent text-left ${interactive ? \"hover:border-border cursor-pointer transition-shadow hover:shadow-md\" : \"cursor-default\"} focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none`}\n >\n <div className=\"bg-muted relative aspect-square w-full overflow-hidden\">\n {imageUrl ? (\n <>\n <img\n key={imageUrl}\n src={imageUrl}\n alt=\"\"\n loading=\"lazy\"\n decoding=\"async\"\n className=\"absolute inset-0 h-full w-full scale-125 object-cover blur-md\"\n aria-hidden=\"true\"\n onError={(e) => {\n e.currentTarget.style.display = \"none\";\n }}\n />\n <img\n src={imageUrl}\n alt={name}\n className=\"relative z-[1] h-full w-full object-contain\"\n loading=\"lazy\"\n />\n </>\n ) : (\n <div className=\"flex h-full w-full items-center justify-center\">\n <ImageIcon className=\"text-muted-foreground/40 size-10\" />\n </div>\n )}\n </div>\n <div className=\"p-3\">\n <h3 className=\"text-foreground line-clamp-2 text-sm font-medium\">\n {name}\n </h3>\n {price && (\n <p className=\"text-foreground mt-1 text-sm font-semibold\">{price}</p>\n )}\n </div>\n </button>\n );\n}\n\nfunction SkeletonGrid({\n columns,\n count,\n}: {\n columns: ColumnsKey;\n count: number;\n}) {\n return (\n <div className={GRID_BY_COLUMNS[columns]}>\n {Array.from({ length: count }, (_, i) => (\n <div key={i} className=\"space-y-3\">\n <Skeleton className=\"aspect-square w-full rounded-lg\" />\n <Skeleton className=\"h-4 w-3/4\" />\n <Skeleton className=\"h-4 w-1/3\" />\n </div>\n ))}\n </div>\n );\n}\n\nexport const shopWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"ShopWidget\",\n displayName: \"Shop\",\n tabsConfig: [\n { id: \"styling\", label: \"Styling\" },\n { id: \"data\", label: \"Data\" },\n ],\n dataSourceTargetProps: [\"products\"],\n fields: [\n // Title group\n {\n key: \"titleEnabled\",\n label: \"Widget Title\",\n type: \"boolean\",\n description: \"Enable the heading shown above the grid\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Title\",\n },\n {\n key: \"title\",\n label: \"Title\",\n type: \"text\",\n description: \"Heading text shown above the grid\",\n defaultValue: \"\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n },\n getColorField({\n key: \"titleColor\",\n label: \"Title Color\",\n description: \"Color of the heading text\",\n defaultValue: \"foreground\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n }),\n\n // Display group\n {\n key: \"showSearch\",\n label: \"Show Search\",\n type: \"boolean\",\n description: \"Display the search input above the grid\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Display\",\n requiresKeyValue: { key: \"useDataSource\", value: false },\n },\n {\n key: \"showSort\",\n label: \"Show Sort\",\n type: \"boolean\",\n description: \"Display the sort menu above the grid\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Display\",\n requiresKeyValue: { key: \"useDataSource\", value: false },\n },\n {\n key: \"columns\",\n label: \"Columns (desktop)\",\n type: \"select\",\n description:\n \"Max columns at the largest breakpoint. Mobile is always 2 columns; intermediate sizes scale smoothly between.\",\n options: [\n { label: \"2\", value: 2 },\n { label: \"3\", value: 3 },\n { label: \"4\", value: 4 },\n { label: \"5\", value: 5 },\n { label: \"6\", value: 6 },\n ],\n defaultValue: 4,\n tab: \"styling\",\n group: \"Display\",\n },\n\n // Design group\n {\n type: \"background\",\n key: \"background\",\n label: \"Background\",\n description: \"Container background\",\n defaultValue: \"background\",\n tab: \"styling\",\n group: \"Design\",\n },\n getPaddingField({\n key: \"padding\",\n label: \"Padding\",\n description: \"Inner spacing around the grid\",\n defaultValue: 6,\n tab: \"styling\",\n group: \"Design\",\n }),\n getBorderRadiusField({\n key: \"borderRadius\",\n label: \"Border Radius\",\n description: \"Container corner radius\",\n defaultValue: \"lg\",\n tab: \"styling\",\n group: \"Design\",\n }),\n\n // Card group — optional theme overrides; unset means \"inherit from theme\".\n getColorField({\n key: \"cardBackground\",\n label: \"Card Background\",\n description:\n \"Override the card background color. Leave unset to use the theme's card color.\",\n tab: \"styling\",\n group: \"Card\",\n }),\n getColorField({\n key: \"cardTextColor\",\n label: \"Card Text\",\n description:\n \"Override title + price color inside each card. Leave unset to use the theme's foreground color.\",\n tab: \"styling\",\n group: \"Card\",\n }),\n\n // Data tab\n {\n key: \"useDataSource\",\n label: \"Use Data Source\",\n type: \"boolean\",\n description:\n \"Off shows all products from the catalog. On replaces the catalog with a data source — disables search and sort.\",\n defaultValue: false,\n tab: \"data\",\n group: \"Data Configuration\",\n },\n {\n key: \"pageSize\",\n label: \"Products to show\",\n type: \"number\",\n description:\n \"Up to 10 acts as a hard cap. Above 10 the grid switches to infinite scroll (products load in batches of 10 as you scroll).\",\n defaultValue: 25,\n tab: \"data\",\n group: \"Data Configuration\",\n requiresKeyValue: { key: \"useDataSource\", value: false },\n },\n {\n key: \"dataSource\",\n label: \"Data Source\",\n type: \"dataSource\",\n description: \"\",\n tab: \"data\",\n group: \"Data Configuration\",\n requiresKeyToBeTrue: \"useDataSource\",\n },\n ],\n};\n"],"mappings":"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"}