{"version":3,"file":"ShopScreen-CTxedZqv.mjs","names":["defaultRenderImage","defaultRenderImage","formatPrice","formatPriceRange"],"sources":["../../../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","../../../shop/ui/src/components/product-card.tsx","../../../shop/ui/src/components/image-gallery.tsx","../../../shop/ui/src/components/quantity-selector.tsx","../../../shop/ui/src/components/purchase-options.tsx","../../../shop/ui/src/components/bundle-item-subscribe.tsx","../../../shop/ui/src/components/bundle-group-item.tsx","../../../shop/ui/src/components/bundle-group.tsx","../../../shop/ui/src/components/bundle-selector.tsx","../../../shop/ui/src/components/dynamic-bundle.tsx","../../../shop/ui/src/utils/dynamic-bundle-flag.ts","../../../shop/ui/src/utils/is-variant-unavailable.ts","../../../shop/ui/src/components/shop-app.tsx","../src/screens/ShopScreen.tsx"],"sourcesContent":["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 * Explicit cookie domain for the FairShare SDK, rendered as\n * `data-fluid-cookie-domain` on the SDK script tag. When set, the SDK scopes\n * its cookies (session, affiliate/attribution, locale, etc.) to exactly this domain\n * instead of inferring an apex/brand domain from the hostname.\n *\n * This is required in the portal's hub/tenant model: the SDK's hostname\n * heuristic resolves a tenant host like `tacobell.portal.fluid.app` to the\n * shared `.portal.fluid.app` level, which leaks attribution across tenants.\n * Pass the current tenant host so cookies stay isolated per company.\n * Storefronts load the SDK directly (not via this component) and keep the\n * default brand-wide behavior. Requires a web-widgets bundle that parses\n * `data-fluid-cookie-domain`.\n */\n cookieDomain?: string;\n /**\n * Fair Share attribution GUID for the logged-in member, rendered as\n * `data-share-guid` on the SDK script tag. This is the FairShare SDK's\n * highest-priority attribution override: when present the SDK attributes\n * the member's in-portal shopping to this share GUID. A portal belongs to a\n * company (not a rep), so pass the current member's company-scoped share\n * GUID (`account.share_guid`) — reps only; omit for customers so they are\n * not self-attributed.\n */\n shareGuid?: 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 cookieDomain,\n shareGuid,\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 const cookieDomainRef = useRef(cookieDomain);\n cookieDomainRef.current = cookieDomain;\n const shareGuidRef = useRef(shareGuid);\n shareGuidRef.current = shareGuid;\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 if (cookieDomainRef.current) {\n script.dataset.fluidCookieDomain = cookieDomainRef.current;\n }\n if (shareGuidRef.current) {\n script.dataset.shareGuid = shareGuidRef.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`, `country`, `cookieDomain`, and `shareGuid` are intentionally\n // omitted from deps: the SDK reads data attributes only once when this\n // 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;\n}\n\nexport default function CartWidget({\n theme,\n}: CartWidgetProps): React.ReactNode {\n const [mounted, setMounted] = useState(false);\n const widgetRef = useRef(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;\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\nconst CART_OPERATION_SUCCESS_EVENT = \"CART_OPERATION_SUCCESS\";\n\nexport function CartButton({ onCheckout }: CartButtonProps): React.ReactNode {\n const { t } = useShopTranslation();\n const [cartItemCount, setCartItemCount] = 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 | null = null;\n let attempts = 0;\n let cancelled = false;\n\n const syncSDKState = (): boolean => {\n const sdk = window.FluidCommerceSDK;\n if (!sdk) return false;\n\n if (onCheckout) {\n sdk.setOnCheckout(navigateToCheckout);\n }\n const count = window.FairShareSDK?.getCartItemCount?.();\n if (count != null) {\n setCartItemCount(count);\n }\n return true;\n };\n\n const setupSDK = () => {\n if (cancelled || syncSDKState()) return;\n if (attempts < MAX_SDK_POLL_ATTEMPTS) {\n attempts++;\n timeoutId = setTimeout(setupSDK, 100);\n }\n };\n\n const handleCartOperationSuccess = () => {\n if (cancelled) return;\n if (timeoutId) {\n clearTimeout(timeoutId);\n timeoutId = null;\n }\n syncSDKState();\n };\n\n window.addEventListener(\n CART_OPERATION_SUCCESS_EVENT,\n handleCartOperationSuccess,\n );\n setupSDK();\n return () => {\n cancelled = true;\n window.removeEventListener(\n CART_OPERATION_SUCCESS_EVENT,\n handleCartOperationSuccess,\n );\n if (timeoutId) clearTimeout(timeoutId);\n };\n }, [navigateToCheckout, onCheckout]);\n\n return (\n {\n window.fluidCart?.open();\n }}\n >\n
\n \n \n {cartItemCount}\n \n
\n {t(\"cart\")}\n \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(null);\n const [portalContainer, setPortalContainer] = useState(\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 \n {portalContainer &&\n createPortal(\n <>\n {cartScript}\n {cartWidget}\n {children}\n ,\n portalContainer,\n )}\n \n \n );\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) => 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 /**\n * Whether this viewer may see CV/QV, resolved by the consumer through the\n * shared policy. Defaults to false — volume is opt-in.\n */\n canShowVolume?: boolean;\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 \n );\n}\n\nfunction ProductCardContent({\n product,\n countryIso,\n companyLogoUrl,\n canShowVolume = false,\n renderImage = defaultRenderImage,\n}: {\n product: ProductCardProduct;\n countryIso?: string;\n companyLogoUrl?: string | null;\n /**\n * Whether this viewer may see CV/QV, resolved by the consumer through the\n * shared policy. Defaults to false: volume is opt-in, and shop/ui has no\n * viewer signal of its own to fall back on.\n */\n canShowVolume?: boolean;\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[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 // Resolved once so the render can ask whether there is anything to show\n // before deciding to show it. Both are null when the country has no entry.\n const retailVariant =\n !isPortal && canShowVolume\n ? getSelectedVariant(product as LegacyProduct)\n : null;\n const retailCv =\n retailVariant && countryIso\n ? getVariantCountryValue(retailVariant, countryIso, \"cv\")\n : null;\n const retailQv =\n retailVariant && countryIso\n ? getVariantCountryValue(retailVariant, countryIso, \"qv\")\n : null;\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 isVideo && setIsHovered(true)}\n onMouseLeave={() => isVideo && setIsHovered(false)}\n >\n {isVideo && isHovered ? (\n \n ) : (\n renderImage({\n src: resolvedCoverImage,\n alt: productName,\n fill: true,\n className:\n \"object-cover transition-transform duration-300 hover:scale-[1.02]\",\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 {/* Video play indicator */}\n {isVideo && !isHovered && (\n
\n
\n \n
\n
\n )}\n\n {/* Bundle badge */}\n {isBundle && (\n \n {t(\"bundle_badge\")}\n \n )}\n \n\n {/* Product info */}\n
\n

\n {productName}\n

\n\n
\n {isBundle ? (\n bundlePrice && (\n \n {bundlePrice}\n \n )\n ) : (\n <>\n {repPrice && (\n \n {repPrice}\n \n )}\n {price && (\n \n {price}\n \n )}\n \n )}\n
\n\n {/* Having a wholesale price used to stand in for \"the viewer is a rep\".\n It is a pricing fact, not a viewer fact, and it is no longer\n consulted — the gate decides that. Presence of the values still\n decides whether there is a pill at all: a product may carry one\n metric without the other, so `-` fills the missing half rather\n than the row rendering as an empty \"CV | QV \". */}\n {!isPortal &&\n canShowVolume &&\n countryIso &&\n (retailCv != null || retailQv != null) && (\n
\n CV {retailCv ?? \"-\"} | QV {retailQv ?? \"-\"}\n
\n )}\n\n {isPortal &&\n canShowVolume &&\n (product.cv != null || product.qv != null) && (\n
\n CV {product.cv ?? \"-\"} | QV {product.qv ?? \"-\"}\n
\n )}\n
\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 canShowVolume = false,\n showShareModal = false,\n setShareModalOpen,\n setSelectedProduct,\n renderLink,\n renderImage,\n onClick,\n}: ProductCardProps): React.JSX.Element {\n const cardContent = (\n \n );\n\n const cardClassName =\n \"bg-transparent 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 \n \n {cardContent}\n \n \n );\n }\n\n if (onClick) {\n return (\n \n \n {cardContent}\n \n \n );\n }\n\n const href = `/portal/shop/${product.id}`;\n\n if (renderLink) {\n return (\n \n {renderLink({ href, children: cardContent })}\n \n );\n }\n\n return (\n \n \n {cardContent}\n \n \n );\n}\n","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 \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
\n
\n {/* Main Image */}\n
\n {isVideoUrl(displayImages[currentImageIndex]?.image_url) ? (\n \n ) : (\n 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 {renderImage({\n src:\n displayImages[currentImageIndex]?.image_url ||\n fallbackImageUrl,\n alt: productTitle,\n fill: true,\n className: \"rounded-xl object-cover md:shadow-sm\",\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 \n \n )}\n\n {/* Navigation arrows */}\n {displayImages.length > 1 && (\n <>\n \n \n \n \n \n \n \n )}\n
\n
\n\n {displayImages.length > 1 && (\n
\n {displayImages.map((image, index) => {\n const imageUrl = image.image_url || fallbackImageUrl;\n const isSelected = index === currentImageIndex;\n return (\n setCurrentImageIndex(index)}\n >\n {renderImage({\n src: imageUrl,\n alt: productTitle,\n fill: true,\n className: \"object-cover\",\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 \n );\n })}\n
\n )}\n\n {/* Image viewer dialog */}\n \n \n {productTitle}\n \n {t(\"image_viewer_description\")}\n \n \n \n {t(\"close_image_viewer\")}\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
\n \n \n
\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
\n
\n setQuantity(Math.max(1, quantity - 1))}\n className=\"text-foreground size-8 rounded-full border-0 p-0 shadow-none\"\n disabled={disabled}\n >\n −\n \n \n {quantity}\n \n setQuantity(quantity + 1)}\n className=\"text-foreground size-8 rounded-full border-0 p-0 shadow-none\"\n disabled={disabled}\n >\n +\n \n
\n
\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
\n onSubscribeChange(value === \"subscribe\")}\n className=\"gap-0 space-y-0\"\n >\n {showSubscribe && (\n 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
\n 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
\n
\n {savingsText\n ? t(\"subscribe_and_save\", { savings: savingsText })\n : t(\"subscribe\")}\n
\n\n {/* Subscription Plan Dropdown*/}\n {product_subscription_plans?.length > 0 && (\n e.stopPropagation()}\n >\n
\n {t(\"delivery_frequency\")}\n
\n \n \n \n \n \n {subscriptionPlanOptions.map((option) => (\n \n {option.label}\n \n ))}\n \n \n
\n )}\n
\n
\n \n )}\n {showBuyOnce && (\n 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
\n 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
\n {t(\"one_time_purchase\")}\n
\n
\n \n )}\n \n \n );\n}\n","import type { portalProducts } from \"@fluid-app/products-core\";\nimport { formatPortalPrice } from \"@fluid-app/products-core\";\nimport {\n Badge,\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n cn,\n} from \"@fluid-app/ui-primitives\";\nimport { Check } from \"lucide-react\";\nimport { useShopTranslation } from \"@fluid-app/shop-core/translation-api-context\";\n\ninterface BundleItemSubscribeProps {\n item: portalProducts.BundleGroupItem;\n subscribe: boolean;\n subscriptionPlanId: number | null;\n /** Group- or item-level forced subscription: the row is checked and locked. */\n forced: boolean;\n /**\n * Whether the item's own price drives the Total (item-level pricing). When\n * false the row is here only to pick a forced item's plan under bundle-level\n * pricing, so its per-item price/savings are hidden — they aren't what's\n * charged (the fixed bundle price is) and would read as conflicting.\n */\n showPrice: boolean;\n currency?: string;\n onSubscribeChange: (subscribe: boolean) => void;\n onPlanChange: (planId: number) => void;\n}\n\n/** Subscription price for the chosen plan (mirrors computeBundleTotals). */\nfunction planSubscriptionPrice(\n item: portalProducts.BundleGroupItem,\n plan: portalProducts.SubscriptionPlan | undefined,\n): number {\n const base = Number(item.price) || 0;\n if (plan?.price_adjustment_type === \"percentage\") {\n const amount = Number(plan.price_adjustment_amount) || 0;\n return Math.max(0, base * (1 - amount / 100));\n }\n const sub =\n item.subscription_price != null ? Number(item.subscription_price) : NaN;\n return Number.isFinite(sub) ? sub : base;\n}\n\n/**\n * Per-item \"Subscribe & save\" row shown beneath a selected item whose product\n * offers plans. Independent of the bundle-level subscribe toggle. A forced item\n * renders checked and locked; an optional one toggles freely. When the product\n * has more than one plan, a cadence picker appears once subscribed.\n */\nexport function BundleItemSubscribe({\n item,\n subscribe,\n subscriptionPlanId,\n forced,\n showPrice,\n currency,\n onSubscribeChange,\n onPlanChange,\n}: BundleItemSubscribeProps) {\n const { t } = useShopTranslation();\n const plans = item.subscription_plans;\n // Only offer the row when the product has plans and the item allows (or is\n // forced onto) a subscription — matches the theme's resolveItemSubscriptionMode.\n if (plans.length === 0 || (!item.allow_subscription && !forced)) return null;\n\n const plan = plans.find((p) => p.id === subscriptionPlanId) ?? plans[0];\n const base = Number(item.price) || 0;\n const subPrice = planSubscriptionPrice(item, plan);\n const savingsPercent = base > 0 ? Math.round((1 - subPrice / base) * 100) : 0;\n const cadence = plan\n ? t(\"bundle_subscribe_every\", {\n interval: plan.billing_interval ?? 1,\n unit: plan.billing_interval_unit ?? \"month\",\n })\n : \"\";\n\n return (\n \n !forced && onSubscribeChange(!subscribe)}\n aria-pressed={subscribe}\n disabled={forced}\n className={cn(\n \"flex w-full items-center gap-2 text-left\",\n !forced && \"cursor-pointer\",\n )}\n >\n \n {subscribe && }\n \n \n {t(\"bundle_subscribe\")}\n \n {showPrice && subscribe && savingsPercent > 0 && (\n \n {t(\"bundle_subscribe_save\", { percent: savingsPercent })}\n \n )}\n {showPrice && (\n \n \n {formatPortalPrice(String(subPrice.toFixed(2)), currency)}\n \n {subscribe && subPrice < base && (\n \n {formatPortalPrice(item.price, currency)}\n \n )}\n \n )}\n \n\n {cadence && (\n

{cadence}

\n )}\n\n {subscribe && plans.length > 1 && (\n onPlanChange(Number(value))}\n >\n \n \n \n \n {plans.map((p) =>\n p.id == null ? null : (\n \n {t(\"bundle_subscribe_every\", {\n interval: p.billing_interval ?? 1,\n unit: p.billing_interval_unit ?? \"month\",\n })}\n \n ),\n )}\n \n \n )}\n \n );\n}\n","import type { ReactNode } from \"react\";\nimport { Badge, Button, RadioGroupItem, cn } from \"@fluid-app/ui-primitives\";\nimport type { portalProducts } from \"@fluid-app/products-core\";\nimport { useShopTranslation } from \"@fluid-app/shop-core/translation-api-context\";\nimport { BundleItemSubscribe } from \"./bundle-item-subscribe\";\n\nexport type RenderBundleImage = (props: {\n src: string;\n alt: string;\n className?: string;\n}) => ReactNode;\n\nfunction defaultRenderImage({\n src,\n alt,\n className,\n}: {\n src: string;\n alt: string;\n className?: string;\n}): ReactNode {\n return {alt};\n}\n\n/**\n * How the item's selection control renders:\n * - `locked` — included group; shows the fixed quantity, no control.\n * - `radio` — single-select group; the radio lives in a parent RadioGroup.\n * - `add` — multi-select group; an Add button that becomes a quantity stepper.\n */\nexport type BundleItemControl = \"locked\" | \"radio\" | \"add\";\n\ninterface BundleGroupItemProps {\n item: portalProducts.BundleGroupItem;\n control: BundleItemControl;\n selected: boolean;\n quantity: number;\n /** Whether the group can still accept more quantity (disables the stepper's \"+\"). */\n canAddMore: boolean;\n /** Group- or item-level forced subscription: locks the per-item subscribe row on. */\n forceSubscription: boolean;\n /** Whether this item is currently set to subscribe. */\n subscribe: boolean;\n /** The item's chosen subscription plan id, or null. */\n subscriptionPlanId: number | null;\n /**\n * Whether the per-item Subscribe & save row renders here — in item-level\n * priced groups (the item's subscription price drives the Total), or for a\n * forced item that still needs a plan choice under bundle-level pricing.\n */\n subscriptionEnabled: boolean;\n /**\n * Whether the item's own price drives the Total (item-level pricing). Passed to\n * the subscribe row so it hides its per-item price/savings under bundle-level\n * pricing, where the fixed bundle price — not the item's — is what's charged.\n */\n subscriptionPriceDriving: boolean;\n currency?: string;\n onToggle: () => void;\n onQuantityChange: (quantity: number) => void;\n onSubscribeChange: (subscribe: boolean) => void;\n onSubscriptionPlanChange: (planId: number) => void;\n renderImage?: RenderBundleImage;\n}\n\nexport function BundleGroupItem({\n item,\n control,\n selected,\n quantity,\n canAddMore,\n forceSubscription,\n subscribe,\n subscriptionPlanId,\n subscriptionEnabled,\n subscriptionPriceDriving,\n currency,\n onToggle,\n onQuantityChange,\n onSubscribeChange,\n onSubscriptionPlanChange,\n renderImage = defaultRenderImage,\n}: BundleGroupItemProps) {\n const { t } = useShopTranslation();\n const label = item.title ?? t(\"no_title\");\n const unavailable = item.available === false;\n // Prefer the admin-curated per-item image; fall back to the variant/product\n // image the API resolves.\n const imageUrl = item.image_url ?? item.variant_image_url;\n // Lead with the product name (e.g. \"Chick-fil-A® Deluxe Sandwich\") and show\n // the variant (e.g. \"American Buttery white bun\") beneath it; when there's no\n // distinct variant title, the product name leads alone.\n const variantTitle =\n item.variant_title && item.variant_title !== label\n ? item.variant_title\n : null;\n const primaryLabel = label;\n const secondaryLabel = variantTitle;\n // Accessible name leads with the product then the variant, so same-product\n // variants (e.g. Small / Medium / Large) are distinguishable to assistive\n // tech — the product title alone would announce identically for each.\n const accessibleLabel = secondaryLabel\n ? `${primaryLabel}, ${secondaryLabel}`\n : primaryLabel;\n\n // Single-select rows are one big click target (not just the radio circle) so\n // tapping the image or product name selects the item. Rendered as a