npm - @fluid-app/portal-sdk - Versions diffs - 0.1.349 → 0.1.351 - Mend

@fluid-app/portal-sdk 0.1.349 → 0.1.351

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 (281) hide show

package/dist/{ShopWidget-BzAuvfyC.mjs.map → ShopWidget-Cqnwq0AG.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ShopWidget-BzAuvfyC.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 getProductImageUrl,\n} from \"@fluid-app/products-core\";\nimport { 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 formatPortalPrice(\n price: string \| undefined,\n currency: string \| undefined,\n): string \| null {\n if (!price) return null;\n const numericPrice = Number(price);\n if (Number.isNaN(numericPrice)) return `${currency ?? \"\"}${price}`;\n try {\n return new Intl.NumberFormat(undefined, {\n style: \"currency\",\n currency: currency \|\| \"USD\",\n }).format(numericPrice);\n } catch {\n return `$${price}`;\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 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 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 renderImage({\n src:\n isVideo && coverImage\n ? getVideoThumbnailUrl(coverImage)\n : coverImage \|\|\n \"https://assets.fluid.app/fluid-admin/images/we-commerce/we-commerce.png\",\n alt: productName,\n fill: true,\n className:\n \"object-cover transition-transform group-hover:scale-105\",\n onError: (e) => {\n e.currentTarget.src =\n companyLogoUrl \|\|\n \"https://assets.fluid.app/fluid-admin/images/we-commerce/we-commerce.png\";\n },\n unoptimized: true,\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 </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 {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 </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\nfunction clampPageSize(value: number \| undefined): number {\n const n = Math.round(value ?? 25);\n return Math.min(100, Math.max(5, 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 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 const catalog = usePortalProductCatalog({ perPage: pageSize });\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 // Hard cap so pageSize doubles as a \"show at most N\" limit.\n const visibleProducts = useMemo(\n () => allProducts.slice(0, pageSize),\n [allProducts, pageSize],\n );\n const reachedLimit = 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 <SkeletonGrid columns={columns} count={columns * 2} />\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 <img\n src={imageUrl}\n alt={name}\n className=\"h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]\"\n loading=\"lazy\"\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: \"Maximum number of products rendered in the grid\",\n defaultValue: 25,\n min: 5,\n max: 100,\n step: 5,\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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"}
1	+ {"version":3,"file":"ShopWidget-Cqnwq0AG.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 getProductImageUrl,\n} from \"@fluid-app/products-core\";\nimport { 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 formatPortalPrice(\n price: string \| undefined,\n currency: string \| undefined,\n): string \| null {\n if (!price) return null;\n const numericPrice = Number(price);\n if (Number.isNaN(numericPrice)) return `${currency ?? \"\"}${price}`;\n try {\n return new Intl.NumberFormat(undefined, {\n style: \"currency\",\n currency: currency \|\| \"USD\",\n }).format(numericPrice);\n } catch {\n return `$${price}`;\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 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 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 renderImage({\n src:\n isVideo && coverImage\n ? getVideoThumbnailUrl(coverImage)\n : coverImage \|\|\n \"https://assets.fluid.app/fluid-admin/images/we-commerce/we-commerce.png\",\n alt: productName,\n fill: true,\n className:\n \"object-cover transition-transform group-hover:scale-105\",\n onError: (e) => {\n e.currentTarget.src =\n companyLogoUrl \|\|\n \"https://assets.fluid.app/fluid-admin/images/we-commerce/we-commerce.png\";\n },\n unoptimized: true,\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 </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 {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 </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\nfunction clampPageSize(value: number \| undefined): number {\n const n = Math.round(value ?? 25);\n return Math.min(100, Math.max(5, 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 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 const catalog = usePortalProductCatalog({ perPage: pageSize });\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 // Hard cap so pageSize doubles as a \"show at most N\" limit.\n const visibleProducts = useMemo(\n () => allProducts.slice(0, pageSize),\n [allProducts, pageSize],\n );\n const reachedLimit = 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 <SkeletonGrid columns={columns} count={columns * 2} />\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 <img\n src={imageUrl}\n alt={name}\n className=\"h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]\"\n loading=\"lazy\"\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: \"Maximum number of products rendered in the grid\",\n defaultValue: 25,\n min: 5,\n max: 100,\n step: 5,\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/{SpacerWidget-B0l19UqF.mjs → SpacerWidget-BhxIaqYF.mjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { vt as __exportAll } from "./PortalTenantClientProvider-BmRtQAbi.mjs";
+import { vt as __exportAll } from "./PortalTenantClientProvider-DVClpfbi.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowUpDown } from "lucide-react";
 //#region ../widgets/src/widgets/SpacerWidget.tsx
@@ -56,4 +56,4 @@ const spacerWidgetPropertySchema = {
 //#endregion
 export { SpacerWidget_exports as n, spacerWidgetPropertySchema as r, SpacerWidget as t };
-//# sourceMappingURL=SpacerWidget-B0l19UqF.mjs.map
+//# sourceMappingURL=SpacerWidget-BhxIaqYF.mjs.map

package/dist/{SpacerWidget-B0l19UqF.mjs.map → SpacerWidget-BhxIaqYF.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SpacerWidget-~~B0l19UqF~~.mjs","names":[],"sources":["../../widgets/src/widgets/SpacerWidget.tsx"],"sourcesContent":["import { type WidgetPropertySchema } from \"@fluid-app/portal-core/registries\";\nimport { ArrowUpDown } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport type React from \"react\";\n\ntype SpacerWidgetProps = ComponentProps<\"div\"> & {\n /*\n Custom height as a CSS value (e.g., \"128px\", \"8rem\", \"20vh\")\n /\n customHeight?: string;\n /\n Not customizable, determines if we should show a preview image in the container\n */\n previewMode?: boolean;\n};\n\nexport function SpacerWidget({\n customHeight = \"128px\",\n previewMode = false,\n className,\n style,\n ...props\n}: SpacerWidgetProps): React.JSX.Element {\n return (\n <div\n className={`w-full ${className ?? \"\"}`}\n style={{ height: customHeight, ...style }}\n aria-hidden=\"true\"\n {...props}\n >\n {previewMode && (\n <div className=\"border-muted/40 bg-muted text-muted-foreground flex h-full w-full items-center justify-center gap-1 border border-dashed\">\n <ArrowUpDown />\n <span>SPACER</span>\n </div>\n )}\n </div>\n );\n}\n\nexport const spacerWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"SpacerWidget\",\n displayName: \"Spacer\",\n fields: [\n {\n key: \"customHeight\",\n label: \"Height\",\n type: \"cssUnit\",\n description: \"Height of the spacer\",\n defaultValue: \"128px\",\n allowedUnits: [\"px\", \"vh\", \"rem\"],\n minByUnit: { px: 1, vh: 1, rem: 0.25 },\n maxByUnit: { px: 2000, vh: 100, rem: 125 },\n stepByUnit: { px: 1, vh: 1, rem: 0.25 },\n group: \"Spacing\",\n },\n ],\n};\n"],"mappings":";;;;;;;;AAgBA,SAAgB,aAAa,EAC3B,eAAe,SACf,cAAc,OACd,WACA,OACA,GAAG,SACoC;AACvC,QACE,oBAAC,OAAD;EACE,WAAW,UAAU,aAAa;EAClC,OAAO;GAAE,QAAQ;GAAc,GAAG;GAAO;EACzC,eAAY;EACZ,GAAI;YAEH,eACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,aAAD,EAAe,CAAA,EACf,oBAAC,QAAD,EAAA,UAAM,UAAa,CAAA,CACf;;EAEJ,CAAA;;AAIV,MAAa,6BAAmD;CAC9D,YAAY;CACZ,aAAa;CACb,QAAQ,CACN;EACE,KAAK;EACL,OAAO;EACP,MAAM;EACN,aAAa;EACb,cAAc;EACd,cAAc;GAAC;GAAM;GAAM;GAAM;EACjC,WAAW;GAAE,IAAI;GAAG,IAAI;GAAG,KAAK;GAAM;EACtC,WAAW;GAAE,IAAI;GAAM,IAAI;GAAK,KAAK;GAAK;EAC1C,YAAY;GAAE,IAAI;GAAG,IAAI;GAAG,KAAK;GAAM;EACvC,OAAO;EACR,CACF;CACF"}
1	+ {"version":3,"file":"SpacerWidget-BhxIaqYF.mjs","names":[],"sources":["../../widgets/src/widgets/SpacerWidget.tsx"],"sourcesContent":["import { type WidgetPropertySchema } from \"@fluid-app/portal-core/registries\";\nimport { ArrowUpDown } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport type React from \"react\";\n\ntype SpacerWidgetProps = ComponentProps<\"div\"> & {\n /*\n Custom height as a CSS value (e.g., \"128px\", \"8rem\", \"20vh\")\n /\n customHeight?: string;\n /\n Not customizable, determines if we should show a preview image in the container\n */\n previewMode?: boolean;\n};\n\nexport function SpacerWidget({\n customHeight = \"128px\",\n previewMode = false,\n className,\n style,\n ...props\n}: SpacerWidgetProps): React.JSX.Element {\n return (\n <div\n className={`w-full ${className ?? \"\"}`}\n style={{ height: customHeight, ...style }}\n aria-hidden=\"true\"\n {...props}\n >\n {previewMode && (\n <div className=\"border-muted/40 bg-muted text-muted-foreground flex h-full w-full items-center justify-center gap-1 border border-dashed\">\n <ArrowUpDown />\n <span>SPACER</span>\n </div>\n )}\n </div>\n );\n}\n\nexport const spacerWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"SpacerWidget\",\n displayName: \"Spacer\",\n fields: [\n {\n key: \"customHeight\",\n label: \"Height\",\n type: \"cssUnit\",\n description: \"Height of the spacer\",\n defaultValue: \"128px\",\n allowedUnits: [\"px\", \"vh\", \"rem\"],\n minByUnit: { px: 1, vh: 1, rem: 0.25 },\n maxByUnit: { px: 2000, vh: 100, rem: 125 },\n stepByUnit: { px: 1, vh: 1, rem: 0.25 },\n group: \"Spacing\",\n },\n ],\n};\n"],"mappings":";;;;;;;;AAgBA,SAAgB,aAAa,EAC3B,eAAe,SACf,cAAc,OACd,WACA,OACA,GAAG,SACoC;AACvC,QACE,oBAAC,OAAD;EACE,WAAW,UAAU,aAAa;EAClC,OAAO;GAAE,QAAQ;GAAc,GAAG;GAAO;EACzC,eAAY;EACZ,GAAI;YAEH,eACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,aAAD,EAAe,CAAA,EACf,oBAAC,QAAD,EAAA,UAAM,UAAa,CAAA,CACf;;EAEJ,CAAA;;AAIV,MAAa,6BAAmD;CAC9D,YAAY;CACZ,aAAa;CACb,QAAQ,CACN;EACE,KAAK;EACL,OAAO;EACP,MAAM;EACN,aAAa;EACb,cAAc;EACd,cAAc;GAAC;GAAM;GAAM;GAAM;EACjC,WAAW;GAAE,IAAI;GAAG,IAAI;GAAG,KAAK;GAAM;EACtC,WAAW;GAAE,IAAI;GAAM,IAAI;GAAK,KAAK;GAAK;EAC1C,YAAY;GAAE,IAAI;GAAG,IAAI;GAAG,KAAK;GAAM;EACvC,OAAO;EACR,CACF;CACF"}

package/dist/SubscriptionsScreen-BbUhL-zf.mjs ADDED Viewed

@@ -0,0 +1,50 @@
+import "./PortalTenantClientProvider-DVClpfbi.mjs";
+import "./FluidProvider-B4Za_Bnw.mjs";
+import "./ScreenRenderer-D3zNFSr3.mjs";
+import "./store-api-context-B_vtKkXO.mjs";
+import "./mysite-api-context-CoLr9vIf.mjs";
+import "./countries-api-context-Donus2X5.mjs";
+import "./task-composer-form-CZgRqbIc.mjs";
+import "./registry-context-CcoVxCii.mjs";
+import "./WidgetInteractionContext-BWH7njU7.mjs";
+import "./EmbedWidget-DRfjHvRs.mjs";
+import "./QuickLinksWidget-DJUI7r5_.mjs";
+import "./static-dict-adapter-DRBq3ndO.mjs";
+import "./error-state-BUe589mD.mjs";
+import "./translation-api-context-factory-DFr9yJ6Q.mjs";
+import "./LayoutWidget-CSFWeXYY.mjs";
+import "./registries-59Barbhg.mjs";
+import "./fields-Dm8-nLc_.mjs";
+import "./TextWidget-B5ZtQMX-.mjs";
+import "./AlertWidget-DMwOt9u8.mjs";
+import "./BulletListWidget-D--Mmasw.mjs";
+import "./preview-context-BXEGWx9T.mjs";
+import "./CalendarWidget-Cx6KvkaG.mjs";
+import "./CardWidget-DARqLSwy.mjs";
+import "./purify.es-Bl6SBkmi.mjs";
+import "./MediaRenderer-Db1KsIza.mjs";
+import "./CarouselWidget-Bnl_iggA.mjs";
+import "./CatchUpWidget-Bplozt8D.mjs";
+import "./src-CJw6JbdS.mjs";
+import { n as subscriptionsScreenPropertySchema, t as SubscriptionsScreen } from "./SubscriptionsScreen-d527tZfc.mjs";
+import "./ChartWidget-BPOZNKI_.mjs";
+import "./ContainerWidget-Bv0f8-TC.mjs";
+import "./ImageWidget-C7nfRJ6p.mjs";
+import "./LinkWidget-DI2Uod5O.mjs";
+import "./ListWidget-BdUhs2fo.mjs";
+import "./MySiteWidget-ivytLi6H.mjs";
+import "./NestedWidget-gqdWZS9Q.mjs";
+import "./PointsWidget-BJlOIK6o.mjs";
+import "./QuickShareWidget-B7DhQOyt.mjs";
+import "./RecentActivityWidget-BMGeLSUa.mjs";
+import "./SeparatorWidget-CGFzy35l.mjs";
+import "./SpacerWidget-BhxIaqYF.mjs";
+import "./TableWidget-Dwud4Fif.mjs";
+import "./ToDoWidget-Bnml3xLS.mjs";
+import "./VideoWidget-Cm3UQ3-Z.mjs";
+import "./SearchSort-C6RV6d9g.mjs";
+import "./ShopWidget-Cqnwq0AG.mjs";
+import "./ScreenHeaderContext-cuVMk00X.mjs";
+import "./AddressAutocompleteInput-CgOFJKwF.mjs";
+import "./Combobox-D8LKqQ19.mjs";
+export { SubscriptionsScreen, subscriptionsScreenPropertySchema };

package/dist/{SubscriptionsScreen-3LGH99fz.cjs → SubscriptionsScreen-CihWk-dF.cjs} RENAMED Viewed

@@ -1,16 +1,16 @@
 require("./chunk-9hOWP6kD.cjs");
-const require_FluidProvider = require("./FluidProvider-B9YdRuHR.cjs");
-const require_PortalTenantClientProvider = require("./PortalTenantClientProvider-Bpm-CZq1.cjs");
-const require_countries_api_context = require("./countries-api-context-G-NW4BoH.cjs");
-const require_static_dict_adapter = require("./static-dict-adapter-JAau5LHb.cjs");
-const require_translation_api_context_factory = require("./translation-api-context-factory-BSRK6Z50.cjs");
+const require_FluidProvider = require("./FluidProvider-DvHJZkGi.cjs");
+const require_PortalTenantClientProvider = require("./PortalTenantClientProvider-C0eJp8MN.cjs");
+const require_countries_api_context = require("./countries-api-context-16PZpF7O.cjs");
+const require_static_dict_adapter = require("./static-dict-adapter-BLq4QzCI.cjs");
+const require_translation_api_context_factory = require("./translation-api-context-factory-CjRDqIhF.cjs");
 const require_src = require("./src-Cx7UyT_c.cjs");
-const require_ScreenHeaderContext = require("./ScreenHeaderContext-BiGgRqjY.cjs");
-const require_use_store = require("./use-store-lOOUcpRT.cjs");
+const require_ScreenHeaderContext = require("./ScreenHeaderContext-VOp8pVHr.cjs");
+const require_use_store = require("./use-store-j_6I4DU4.cjs");
 const require_query_keys = require("./query-keys-elu0svUd.cjs");
-const require_use_account = require("./use-account-CQ-mhA3W.cjs");
-const require_AppNavigationContext = require("./AppNavigationContext-CoNtdUrr.cjs");
-const require_AddressAutocompleteInput = require("./AddressAutocompleteInput-BVG7EOyI.cjs");
+const require_use_account = require("./use-account-DltRHEwC.cjs");
+const require_AppNavigationContext = require("./AppNavigationContext-CLOwdlpx.cjs");
+const require_AddressAutocompleteInput = require("./AddressAutocompleteInput-C2Wx9yrV.cjs");
 const require_isAfter = require("./isAfter-BCyWSyQs.cjs");
 let react = require("react");
 let _tanstack_react_query = require("@tanstack/react-query");
@@ -2141,7 +2141,7 @@ function cleanEscapedString(input) {
 const SubscriptionsApiContext = (0, react.createContext)(null);
 const SubscriptionsApiProvider = SubscriptionsApiContext.Provider;
 function useSubscriptionsApi() {
-	const api = (0, react.useContext)(SubscriptionsApiContext);
+	const api = (0, react.use)(SubscriptionsApiContext);
 	if (!api) throw new Error("useSubscriptionsApi must be used within a SubscriptionsCoreProvider");
 	return api;
 }
@@ -2177,7 +2177,7 @@ const bundlesKeys = {
 const BundlesApiContext = (0, react.createContext)(null);
 const BundlesApiProvider = BundlesApiContext.Provider;
 function useBundlesApi() {
-	const api = (0, react.useContext)(BundlesApiContext);
+	const api = (0, react.use)(BundlesApiContext);
 	if (!api) throw new Error("useBundlesApi must be used within a BundlesCoreProvider");
 	return api;
 }
@@ -5033,7 +5033,7 @@ function PauseSubscriptionDialog({ open, onOpenChange, onConfirm, isLoading, err
 						className: "space-y-4",
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "flex items-center space-x-2",
+								className: "flex items-center gap-x-2",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 									id: "pause-indefinitely",
 									type: "radio",
@@ -5049,7 +5049,7 @@ function PauseSubscriptionDialog({ open, onOpenChange, onConfirm, isLoading, err
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "space-y-2",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "flex items-center space-x-2",
+									className: "flex items-center gap-x-2",
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 										id: "pause-order-count",
 										type: "radio",
@@ -5093,7 +5093,7 @@ function PauseSubscriptionDialog({ open, onOpenChange, onConfirm, isLoading, err
 					children: errorMessage
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogFooter, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex w-full flex-row justify-between space-x-2",
+					className: "flex w-full flex-row justify-between gap-x-2",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
 						variant: "outline",
 						className: "h-10 min-w-[70px] rounded p-3",
@@ -5226,7 +5226,7 @@ function ResumeSubscriptionDialog({ open, onOpenChange, onConfirm, isLoading, er
 					children: errorMessage
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogFooter, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex w-full flex-row justify-between space-x-2",
+					className: "flex w-full flex-row justify-between gap-x-2",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
 						className: "bg-muted text-foreground ring-border hover:bg-muted/80 h-10 min-w-[70px] rounded p-3 ring-1",
 						onClick: () => handleDismiss(false),
@@ -5484,7 +5484,7 @@ function EditBillDateDialog({ open, onOpenChange, onConfirm, isLoading, errorMes
 					children: errorMessage
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.DialogFooter, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex w-full flex-row justify-between space-x-2",
+					className: "flex w-full flex-row justify-between gap-x-2",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
 						variant: "outline",
 						className: "h-10 min-w-[70px] rounded p-3",
@@ -5686,7 +5686,7 @@ function SubscriptionDetailSkeleton() {
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-16 w-full rounded" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-16 w-full rounded" })]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "mt-6 flex items-center space-x-4",
+						className: "mt-6 flex items-center gap-x-4",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "size-24 rounded" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "flex-1 space-y-2",
 							children: [
@@ -5898,9 +5898,9 @@ function SubscriptionItemsSection({ subscription, displayQuantity, displayNextBi
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "py-6",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex flex-row items-center space-x-4",
+						className: "flex flex-row items-center gap-x-4",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex min-w-0 flex-1 flex-row space-x-4",
+							className: "flex min-w-0 flex-1 flex-row gap-x-4",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "relative shrink-0",
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -5920,7 +5920,7 @@ function SubscriptionItemsSection({ subscription, displayQuantity, displayNextBi
 									})]
 								})
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "flex min-w-0 flex-col space-y-0.5",
+								className: "flex min-w-0 flex-col gap-y-0.5",
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 										className: "text-foreground truncate text-sm font-medium",
@@ -6625,11 +6625,11 @@ function SelectablePaymentMethodDropdown({ title, displayPaymentMethod, paymentM
 				id: sectionId,
 				role: "listbox",
 				"aria-label": title,
-				className: "mt-5 flex max-h-[400px] flex-col space-y-4 overflow-y-auto pr-0.5",
+				className: "mt-5 flex max-h-[400px] flex-col gap-y-4 overflow-y-auto pr-0.5",
 				children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: [1, 2].map((i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "bg-muted flex flex-row items-center space-x-2 rounded-sm p-3",
+					className: "bg-muted flex flex-row items-center gap-x-2 rounded-sm p-3",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-6 w-10" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex flex-col space-y-1",
+						className: "flex flex-col gap-y-1",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-32" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-24" })]
 					})]
 				}, `skeleton-${i}`)) }) : paymentMethodList.map((paymentMethod) => {
@@ -7036,7 +7036,7 @@ function SelectableAddressDropdown({ title, displayAddress, addressList, selecte
 				id: sectionId,
 				role: "listbox",
 				"aria-label": title,
-				className: "mt-5 flex max-h-[400px] flex-col space-y-4 overflow-y-auto pr-0.5",
+				className: "mt-5 flex max-h-[400px] flex-col gap-y-4 overflow-y-auto pr-0.5",
 				children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: [1, 2].map((i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "bg-muted rounded-sm p-3",
 					children: [
@@ -7448,4 +7448,4 @@ Object.defineProperty(exports, "subscriptionsScreenPropertySchema", {
 	}
 });
-//# sourceMappingURL=SubscriptionsScreen-3LGH99fz.cjs.map
+//# sourceMappingURL=SubscriptionsScreen-CihWk-dF.cjs.map