import { t as useAccount } from "./use-account-D70N5avv.mjs";
import { n as useFluidContext } from "./FluidProvider-Cx0wNNF7.mjs";
import { a as formatPortalPrice, d as isVariantSubscribable, i as formatSavings, l as usePortalProductDetail, n as bundleSubscriptionPrice, o as formatPortalPriceRange, r as isStaticBundle, t as SearchSort, u as usePortalProductCatalog } from "./SearchSort-DuTESNHX.mjs";
import { a as isVideoUrl, i as tagPortalProduct, r as ProductCard, s as useShopTranslation } from "./ShopWidget-N0OqYNM-.mjs";
import { $ as Dialog, A as RadioGroup, D as SelectTrigger, E as SelectItem, G as DropdownMenuLabel, H as DropdownMenu, J as DropdownMenuSeparator, K as DropdownMenuRadioGroup, O as SelectValue, Q as DropdownMenuTrigger, T as SelectContent, U as DropdownMenuContent, _n as BreadcrumbPage, et as DialogClose, g as Skeleton, gn as BreadcrumbList, hn as BreadcrumbLink, j as RadioGroupItem, jn as Button, mn as BreadcrumbItem, nt as DialogDescription, pn as Breadcrumb, q as DropdownMenuRadioItem, st as DialogTitle, tt as DialogContent, vn as BreadcrumbSeparator, w as Select, yn as Badge } from "./src-BPYu8cbo.mjs";
import { t as useNavigationParent } from "./use-navigation-parent-DpdVXF3K.mjs";
import { n as ScreenHeaderBreadcrumbs, t as ScreenHeaderActions } from "./ScreenHeaderContext-mFd2T-WH.mjs";
import { t as useStore } from "./use-store-DB3FAMT2.mjs";
import { n as useAppNavigation } from "./AppNavigationContext-DgelzxV9.mjs";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useInfiniteQuery } from "@tanstack/react-query";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { ArrowUpDown, ChevronLeft, ChevronRight, ExternalLink, ShoppingCart, X } from "lucide-react";
import { createPortal } from "react-dom";
//#region ../../shop/ui/src/components/image-gallery.tsx
function defaultRenderImage({ src, alt, fill, className, onError }) {
	return /* @__PURE__ */ jsx("img", {
		src,
		alt,
		className: `${fill ? "absolute inset-0 h-full w-full" : ""} ${className ?? ""}`,
		onError
	});
}
function ImageGallery({ images, fallbackImageUrl, productTitle, renderImage = defaultRenderImage }) {
	const { t } = useShopTranslation();
	const [currentImageIndex, setCurrentImageIndex] = useState(0);
	const [viewerOpen, setViewerOpen] = useState(false);
	const hasMultipleImages = images && images.length > 0;
	const displayImages = useMemo(() => hasMultipleImages ? images.toSorted((a, b) => a.position - b.position) : [{
		id: 0,
		image_url: fallbackImageUrl,
		position: 0
	}], [
		images,
		hasMultipleImages,
		fallbackImageUrl
	]);
	useEffect(() => {
		setCurrentImageIndex(0);
	}, [displayImages]);
	const nextImage = () => {
		if (displayImages.length > 1) setCurrentImageIndex((prev) => (prev + 1) % displayImages.length);
	};
	const prevImage = () => {
		if (displayImages.length > 1) setCurrentImageIndex((prev) => (prev - 1 + displayImages.length) % displayImages.length);
	};
	return /* @__PURE__ */ jsxs("div", {
		className: "space-y-4",
		children: [/* @__PURE__ */ jsxs("div", {
			className: "group bg-muted relative aspect-square overflow-hidden rounded-sm",
			children: [
				isVideoUrl(displayImages[currentImageIndex]?.image_url) ? /* @__PURE__ */ jsx("video", {
					src: displayImages[currentImageIndex]?.image_url,
					className: "absolute inset-0 h-full w-full object-cover",
					controls: true,
					loop: true,
					playsInline: true
				}, displayImages[currentImageIndex]?.id) : /* @__PURE__ */ jsxs("button", {
					type: "button",
					onClick: () => setViewerOpen(true),
					className: "group absolute inset-0 z-[1] cursor-pointer border-0 bg-transparent p-0",
					"aria-label": t("open_image_viewer"),
					children: [
						/* @__PURE__ */ jsx("img", {
							src: displayImages[currentImageIndex]?.image_url || fallbackImageUrl,
							alt: "",
							loading: "lazy",
							decoding: "async",
							className: "absolute inset-0 h-full w-full scale-125 object-cover blur-md",
							"aria-hidden": "true",
							onError: (e) => {
								e.currentTarget.style.display = "none";
							}
						}, displayImages[currentImageIndex]?.image_url || fallbackImageUrl),
						renderImage({
							src: displayImages[currentImageIndex]?.image_url || fallbackImageUrl,
							alt: productTitle,
							fill: true,
							className: "object-contain",
							onError: (e) => {
								e.currentTarget.src = "https://ik.imagekit.io/fluid/tr:w-1500,h-1500,cm-pad_resize,bg-FFFFFF/980191006/images/WJHL8V/WeCommerce_Logotype-Black_NcO-MzatB.png";
							},
							unoptimized: true
						}),
						/* @__PURE__ */ jsx("span", { className: "group-focus-visible:ring-ring pointer-events-none absolute inset-0 rounded-sm group-focus-visible:ring-2 group-focus-visible:ring-inset" })
					]
				}),
				displayImages.length > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
					type: "button",
					"aria-label": t("previous_image"),
					className: "bg-background/40 group-hover:bg-background/80 hover:bg-background absolute top-1/2 left-3 z-10 flex size-8 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full shadow-sm transition-colors",
					onClick: prevImage,
					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "text-foreground/40 group-hover:text-foreground size-5 transition-colors" })
				}), /* @__PURE__ */ jsx("button", {
					type: "button",
					"aria-label": t("next_image"),
					className: "bg-background/40 group-hover:bg-background/80 hover:bg-background absolute top-1/2 right-3 z-10 flex size-8 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full shadow-sm transition-colors",
					onClick: nextImage,
					children: /* @__PURE__ */ jsx(ChevronRight, { className: "text-foreground/40 group-hover:text-foreground size-5 transition-colors" })
				})] }),
				displayImages.length > 1 && /* @__PURE__ */ jsx("div", {
					className: "absolute bottom-3 left-1/2 z-10 flex -translate-x-1/2 gap-3",
					children: displayImages.map((_, index) => /* @__PURE__ */ jsx("button", {
						type: "button",
						className: `h-1.5 w-6 cursor-pointer rounded-lg transition-colors ${index === currentImageIndex ? "bg-foreground" : "bg-foreground/40 hover:bg-foreground/60"}`,
						"aria-label": t("go_to_image", { index: String(index + 1) }),
						onClick: () => setCurrentImageIndex(index)
					}, index))
				})
			]
		}), /* @__PURE__ */ jsx(Dialog, {
			open: viewerOpen,
			onOpenChange: setViewerOpen,
			children: /* @__PURE__ */ jsxs(DialogContent, {
				className: "h-[95vh] w-[95vw] max-w-none border-0 bg-transparent p-0 shadow-none sm:max-w-none",
				showCloseButton: false,
				overlayClassName: "bg-foreground/90",
				children: [
					/* @__PURE__ */ jsx(DialogTitle, {
						className: "sr-only",
						children: productTitle
					}),
					/* @__PURE__ */ jsx(DialogDescription, {
						className: "sr-only",
						children: t("image_viewer_description")
					}),
					/* @__PURE__ */ jsxs(DialogClose, {
						"aria-label": t("close_image_viewer"),
						className: "bg-foreground/60 text-background hover:bg-foreground/80 focus-visible:ring-ring focus-visible:ring-offset-background absolute top-4 right-4 z-10 flex size-10 cursor-pointer items-center justify-center rounded-full transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
						children: [/* @__PURE__ */ jsx(X, { className: "size-5" }), /* @__PURE__ */ jsx("span", {
							className: "sr-only",
							children: t("close_image_viewer")
						})]
					}),
					/* @__PURE__ */ jsx("div", {
						className: "relative flex h-full w-full items-center justify-center",
						children: renderImage({
							src: displayImages[currentImageIndex]?.image_url || fallbackImageUrl,
							alt: productTitle,
							fill: true,
							className: "object-contain",
							onError: (e) => {
								e.currentTarget.src = "https://ik.imagekit.io/fluid/tr:w-1500,h-1500,cm-pad_resize,bg-FFFFFF/980191006/images/WJHL8V/WeCommerce_Logotype-Black_NcO-MzatB.png";
							},
							unoptimized: true
						})
					})
				]
			})
		})]
	});
}
//#endregion
//#region ../../shop/ui/src/components/quantity-selector.tsx
function QuantitySelector({ quantity, setQuantity, disabled = false }) {
	return /* @__PURE__ */ jsx("div", {
		className: "flex items-center gap-3",
		children: /* @__PURE__ */ jsxs("div", {
			className: "flex items-center rounded-lg",
			children: [
				/* @__PURE__ */ jsx(Button, {
					variant: "default",
					onClick: () => setQuantity(Math.max(1, quantity - 1)),
					className: "border-0 px-3 py-2 shadow-none",
					disabled,
					children: "−"
				}),
				/* @__PURE__ */ jsx("span", {
					className: "text-foreground min-w-8 px-4 py-2 text-center text-sm font-medium",
					children: quantity
				}),
				/* @__PURE__ */ jsx(Button, {
					variant: "default",
					onClick: () => setQuantity(quantity + 1),
					className: "border-0 px-3 py-2 shadow-none",
					disabled,
					children: "+"
				})
			]
		})
	});
}
//#endregion
//#region ../../shop/ui/src/components/purchase-options.tsx
function PurchaseOptions({ showBuyOnce, showSubscribe, isSubscribe, onSubscribeChange, product_subscription_plans, selectedSubscriptionPlan, onSubscriptionPlanChange, wholesalePrice, wholesaleSubscriptionPrice, currency }) {
	const { t, locale } = useShopTranslation();
	const defaultSubscriptionPlan = useMemo(() => {
		if (!product_subscription_plans?.length) return null;
		return product_subscription_plans.find((plan) => plan.default) || product_subscription_plans[0];
	}, [product_subscription_plans]);
	const currentSubscriptionPlan = selectedSubscriptionPlan || defaultSubscriptionPlan;
	const savingsMode = currentSubscriptionPlan?.subscription_plan.savings_display_mode ?? "percent";
	const savingsText = useMemo(() => formatSavings({
		wholesalePrice,
		wholesaleSubscriptionPrice,
		mode: currency !== void 0 ? savingsMode : "percent",
		currency: currency ?? "USD",
		locale
	}), [
		wholesalePrice,
		wholesaleSubscriptionPrice,
		savingsMode,
		currency,
		locale
	]);
	const formatSubscriptionPlan = (plan) => {
		return `${plan.subscription_plan.billing_interval} ${plan.subscription_plan.billing_interval_unit} (${plan.subscription_plan.name})`;
	};
	const subscriptionPlanOptions = useMemo(() => {
		if (!product_subscription_plans?.length) return [];
		return product_subscription_plans.map((plan) => ({
			value: plan.subscription_plan.id.toString(),
			label: formatSubscriptionPlan(plan)
		}));
	}, [product_subscription_plans]);
	if (showBuyOnce && !showSubscribe) return null;
	const handleSubscriptionPlanChange = (planId) => {
		const selectedPlan = product_subscription_plans?.find((plan) => plan.subscription_plan.id.toString() === planId);
		if (selectedPlan && onSubscriptionPlanChange) onSubscriptionPlanChange(selectedPlan);
	};
	return /* @__PURE__ */ jsx("div", {
		className: "mb-3 flex flex-col",
		children: /* @__PURE__ */ jsxs(RadioGroup, {
			value: isSubscribe ? "subscribe" : "once",
			onValueChange: (value) => onSubscribeChange(value === "subscribe"),
			className: "gap-0 space-y-0",
			children: [showSubscribe && /* @__PURE__ */ jsx("div", {
				onClick: () => onSubscribeChange(true),
				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"}`,
				children: /* @__PURE__ */ jsxs("div", {
					className: "flex items-start gap-x-3",
					children: [/* @__PURE__ */ jsx(RadioGroupItem, {
						value: "subscribe",
						onClick: (e) => e.stopPropagation(),
						className: `flex items-center justify-center [&_svg]:h-1.5 [&_svg]:w-1.5 [&_svg]:fill-white ${isSubscribe ? "border-contrast bg-contrast text-foreground" : "border-border bg-background text-muted-foreground"}`
					}), /* @__PURE__ */ jsxs("div", {
						className: "flex-1",
						children: [/* @__PURE__ */ jsx("div", {
							className: "text-foreground mb-1 text-sm leading-tight font-medium",
							children: savingsText ? t("subscribe_and_save", { savings: savingsText }) : t("subscribe")
						}), product_subscription_plans?.length > 0 && /* @__PURE__ */ jsxs("div", {
							className: "bg-muted mt-3 rounded-lg p-2",
							onClick: (e) => e.stopPropagation(),
							children: [/* @__PURE__ */ jsx("div", {
								className: "text-foreground mb-1 text-xs font-medium",
								children: t("delivery_frequency")
							}), /* @__PURE__ */ jsxs(Select, {
								value: currentSubscriptionPlan?.subscription_plan.id.toString() || "",
								onValueChange: handleSubscriptionPlanChange,
								disabled: product_subscription_plans?.length === 1,
								children: [/* @__PURE__ */ jsx(SelectTrigger, {
									className: "bg-background text-foreground! w-full text-xs",
									children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("select_delivery_schedule") })
								}), /* @__PURE__ */ jsx(SelectContent, { children: subscriptionPlanOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, {
									value: option.value,
									children: option.label
								}, option.value)) })]
							})]
						})]
					})]
				})
			}), showBuyOnce && /* @__PURE__ */ jsx("div", {
				onClick: () => onSubscribeChange(false),
				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"}`,
				children: /* @__PURE__ */ jsxs("div", {
					className: "flex items-center gap-x-3",
					children: [/* @__PURE__ */ jsx(RadioGroupItem, {
						value: "once",
						onClick: (e) => e.stopPropagation(),
						className: `flex items-center justify-center [&_svg]:h-1.5 [&_svg]:w-1.5 [&_svg]:fill-white ${!isSubscribe ? "border-contrast bg-contrast text-foreground" : "border-border bg-background text-muted-foreground"}`
					}), /* @__PURE__ */ jsx("div", {
						className: "text-foreground mb-1 text-sm leading-tight font-medium",
						children: t("one_time_purchase")
					})]
				})
			})]
		})
	});
}
//#endregion
//#region ../../shop/ui/src/utils/is-variant-unavailable.ts
/**
* Decides whether a product variant should disable its purchase CTA on the
* portal shop page.
*/
function isVariantUnavailable(variant, product) {
	if (!variant) return true;
	if (variant.available === false) return true;
	if (variant.subscription_only) return !isVariantSubscribable(variant);
	const rawPrice = variant.price ?? product?.price;
	if (rawPrice == null || rawPrice === "") return true;
	const numericPrice = Number(rawPrice);
	if (Number.isNaN(numericPrice)) return true;
	if (numericPrice <= 0) return true;
	return false;
}
//#endregion
//#region ../../shop/ui/src/components/shop-app.tsx
const PAGE_SIZE = 25;
function sanitizeHtml(html) {
	const doc = new DOMParser().parseFromString(html, "text/html");
	for (const el of doc.querySelectorAll("script, iframe, object, embed, form, base, meta, link, style")) el.remove();
	for (const el of doc.querySelectorAll("*")) for (const attr of [...el.attributes]) if (attr.name.toLowerCase().startsWith("on") || attr.value.toLowerCase().trim().startsWith("javascript:")) el.removeAttribute(attr.name);
	return doc.body.innerHTML;
}
const GRID_CLASS = "grid grid-cols-2 gap-x-3 gap-y-6 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5";
function SkeletonGrid({ count = 8 }) {
	return /* @__PURE__ */ jsx("div", {
		className: GRID_CLASS,
		children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsxs("div", {
			className: "space-y-2",
			children: [
				/* @__PURE__ */ jsx(Skeleton, { className: "aspect-square w-full rounded-lg" }),
				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }),
				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }),
				/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/3" })
			]
		}, i))
	});
}
function ProductListing({ companyLogoUrl, renderImage, onSelectProduct, cartButton }) {
	const observerTarget = useRef(null);
	const { t } = useShopTranslation();
	const catalog = usePortalProductCatalog({ perPage: PAGE_SIZE });
	const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage, error, isFetched } = useInfiniteQuery({
		queryKey: catalog.queryKey,
		queryFn: ({ pageParam, signal }) => catalog.fetchProducts(pageParam, signal),
		getNextPageParam: catalog.getNextPageParam,
		initialPageParam: void 0
	});
	const handleIntersect = useCallback((entries) => {
		if (entries[0]?.isIntersecting && hasNextPage && !isFetchingNextPage) fetchNextPage();
	}, [
		hasNextPage,
		isFetchingNextPage,
		fetchNextPage
	]);
	useEffect(() => {
		const target = observerTarget.current;
		if (!target) return;
		const observer = new IntersectionObserver(handleIntersect, {
			threshold: .1,
			rootMargin: "200px"
		});
		observer.observe(target);
		return () => observer.disconnect();
	}, [handleIntersect]);
	const allProducts = data?.pages.flatMap((page) => page.products) ?? [];
	const sortOptions = useMemo(() => [
		{
			id: "title_asc",
			label: t("sort_title_asc")
		},
		{
			id: "title_desc",
			label: t("sort_title_desc")
		},
		{
			id: "price_asc",
			label: t("sort_price_asc")
		},
		{
			id: "price_desc",
			label: t("sort_price_desc")
		},
		{
			id: "created_at_desc",
			label: t("sort_recent")
		},
		{
			id: "created_at_asc",
			label: t("sort_oldest")
		}
	], [t]);
	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
		className: "mx-auto px-2 md:px-10",
		children: /* @__PURE__ */ jsxs("div", {
			className: "flex flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between",
			children: [/* @__PURE__ */ jsx("h1", {
				className: "text-foreground text-3xl leading-tight font-semibold tracking-tight",
				children: t("shop_all")
			}), /* @__PURE__ */ jsxs("div", {
				className: "flex items-center gap-2 sm:ml-auto",
				children: [
					/* @__PURE__ */ jsx("div", {
						className: "w-full max-w-sm sm:w-80 md:w-96",
						children: /* @__PURE__ */ jsx(SearchSort, {
							searchValue: catalog.searchTerm,
							onSearchChange: catalog.setSearchTerm,
							placeholder: t("search_placeholder")
						})
					}),
					/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
						asChild: true,
						children: /* @__PURE__ */ jsx(Button, {
							variant: "outline",
							size: "icon",
							className: "border-foreground/10 shadow-input size-9 shrink-0",
							children: /* @__PURE__ */ jsx(ArrowUpDown, { className: "size-3" })
						})
					}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
						align: "end",
						className: "w-60",
						children: [
							/* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("sort_by") }),
							/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
							/* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
								value: catalog.currentSort,
								onValueChange: catalog.setCurrentSort,
								children: sortOptions.map((opt) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
									value: opt.id,
									children: opt.label
								}, opt.id))
							})
						]
					})] }),
					cartButton && /* @__PURE__ */ jsx("div", {
						className: "flex shrink-0 items-center gap-3",
						children: cartButton
					})
				]
			})]
		})
	}), /* @__PURE__ */ jsx("div", {
		className: "mx-auto space-y-8 px-2 md:px-10 md:py-8",
		children: isLoading ? /* @__PURE__ */ jsx(SkeletonGrid, {}) : error ? /* @__PURE__ */ jsx("p", {
			className: "mx-auto my-6 rounded-lg bg-red-100 px-3 py-2 text-red-500",
			children: t("error_generic")
		}) : isFetched && allProducts.length === 0 ? /* @__PURE__ */ jsx("div", {
			className: "flex flex-col items-center justify-center py-8 text-center",
			children: /* @__PURE__ */ jsx("p", {
				className: "text-muted-foreground text-sm",
				children: catalog.searchTerm ? t("no_search_results", { term: catalog.searchTerm }) : t("no_products")
			})
		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
			/* @__PURE__ */ jsx("div", {
				className: GRID_CLASS,
				children: allProducts.map((product) => /* @__PURE__ */ jsx(ProductCard, {
					product: tagPortalProduct(product),
					...companyLogoUrl !== void 0 && { companyLogoUrl },
					...renderImage !== void 0 && { renderImage },
					onClick: () => onSelectProduct(String(product.id))
				}, product.id))
			}),
			/* @__PURE__ */ jsx("div", { ref: observerTarget }),
			isFetchingNextPage && /* @__PURE__ */ jsx(SkeletonGrid, { count: 4 })
		] })
	})] });
}
/**
* Build the variant options map by grouping option_values across all variants.
* Master variants can represent real selectable options in portal product
* responses, so include them when they carry option_values.
* Groups by option_id, collecting unique value entries.
*/
function buildOptionGroups(variants) {
	const groupMap = /* @__PURE__ */ new Map();
	for (const variant of variants) for (const ov of variant.option_values ?? []) {
		if (ov.option_id == null || ov.id == null) continue;
		if (!groupMap.has(ov.option_id)) groupMap.set(ov.option_id, {
			name: ov.option_name ?? `Option ${ov.option_id}`,
			values: /* @__PURE__ */ new Map()
		});
		groupMap.get(ov.option_id).values.set(ov.id, ov.name ?? String(ov.id));
	}
	return [...groupMap.entries()].map(([optionId, group]) => ({
		optionId,
		name: group.name,
		values: [...group.values.entries()].map(([id, name]) => ({
			id,
			name
		}))
	}));
}
/**
* Find the variant matching a set of selected option value IDs.
* selections is a map of optionId → selected value id.
*/
function findVariantBySelections(variants, selections) {
	const entries = Object.entries(selections).map(([k, v]) => [Number(k), v]);
	if (entries.length === 0) return void 0;
	const matchingVariants = variants.filter((v) => entries.every(([optionId, valueId]) => v.option_values?.some((ov) => ov.option_id === optionId && ov.id === valueId)));
	return matchingVariants.find((v) => v.is_master !== true) ?? matchingVariants[0];
}
/**
* Map BFF flat subscription plans to the legacy ProductSubscriptionPlan shape
* expected by the PurchaseOptions component.
*/
function mapToLegacySubscriptionPlans(plans) {
	return plans.map((plan, idx) => ({
		...plan.id !== void 0 && { id: plan.id },
		default: idx === 0,
		products_count: null,
		subscribers_count: null,
		active: true,
		subscription_plan: {
			id: plan.id ?? 0,
			name: plan.name ?? "",
			billing_interval: plan.billing_interval ?? 1,
			billing_interval_unit: plan.billing_interval_unit ?? "month",
			billing_frequency_in_words: plan.billing_frequency ?? `${plan.billing_interval} ${plan.billing_interval_unit}`,
			active: true,
			price_adjustment_amount: null,
			price_adjustment_type: null,
			...plan.savings_display_mode !== void 0 && { savings_display_mode: plan.savings_display_mode }
		}
	}));
}
function ProductDetail({ productId, renderImage }) {
	const [quantity, setQuantity] = useState(1);
	const [selections, setSelections] = useState({});
	const [userSelectedSubscribe, setUserSelectedSubscribe] = useState(null);
	const [selectedSubscriptionPlan, setSelectedSubscriptionPlan] = useState(void 0);
	const { t } = useShopTranslation();
	const { product, isLoading, error, images } = usePortalProductDetail({ productId });
	const variants = useMemo(() => product?.variants ?? [], [product?.variants]);
	const subscriptionPlans = useMemo(() => product?.subscription_plans ?? [], [product?.subscription_plans]);
	const masterVariant = useMemo(() => variants.find((v) => v.is_master) ?? variants[0], [variants]);
	const optionGroups = useMemo(() => buildOptionGroups(variants), [variants]);
	const showVariantChoices = optionGroups.length === 0 && variants.length > 1;
	const [selectedVariantId, setSelectedVariantId] = useState(null);
	useEffect(() => {
		if (optionGroups.length === 0) return;
		const source = masterVariant?.option_values?.length ? masterVariant : variants.find((v) => v.option_values?.length);
		if (!source?.option_values?.length) return;
		const defaults = {};
		for (const ov of source.option_values) if (ov.option_id != null && ov.id != null) defaults[ov.option_id] = ov.id;
		setSelections(defaults);
	}, [
		optionGroups,
		variants,
		masterVariant
	]);
	useEffect(() => {
		if (!showVariantChoices) return;
		if (selectedVariantId != null) return;
		if (masterVariant?.id == null) return;
		setSelectedVariantId(masterVariant.id);
	}, [
		showVariantChoices,
		selectedVariantId,
		masterVariant?.id
	]);
	const selectedVariant = useMemo(() => {
		if (showVariantChoices) return variants.find((v) => v.id === selectedVariantId) ?? masterVariant;
		if (optionGroups.length === 0) return masterVariant;
		return findVariantBySelections(variants, selections) ?? masterVariant;
	}, [
		variants,
		optionGroups,
		selections,
		masterVariant,
		showVariantChoices,
		selectedVariantId
	]);
	const legacySubscriptionPlans = useMemo(() => mapToLegacySubscriptionPlans(subscriptionPlans), [subscriptionPlans]);
	const showSubscribe = legacySubscriptionPlans.length > 0;
	const showBuyOnce = selectedVariant?.subscription_only !== true;
	const isSubscribe = selectedVariant?.subscription_only === true || (userSelectedSubscribe ?? showSubscribe);
	const galleryImages = useMemo(() => {
		const variantImages = selectedVariant?.images;
		if (variantImages && variantImages.length > 0) return variantImages.map((img, idx) => ({
			id: idx,
			image_url: img.url ?? "",
			image_path: null,
			position: idx
		}));
		return images.map((img, idx) => ({
			id: img.id ?? idx,
			image_url: img.url,
			image_path: null,
			position: idx
		}));
	}, [selectedVariant?.images, images]);
	const coverImage = galleryImages[0]?.image_url ?? null;
	const selectedPricing = selectedVariant?.subscription_pricing?.find((sp) => sp.plan_id === (selectedSubscriptionPlan?.subscription_plan.id ?? legacySubscriptionPlans[0]?.subscription_plan.id));
	const wholesalePrice = selectedVariant?.wholesale_price ? Number(selectedVariant.wholesale_price) : void 0;
	const wholesaleSubscriptionPrice = selectedPricing?.wholesale_price ? Number(selectedPricing.wholesale_price) : void 0;
	const currency = selectedVariant?.currency ?? product?.currency;
	const displayPrice = formatPortalPrice(selectedVariant?.price ?? product?.price, currency);
	const displayWholesalePrice = formatPortalPrice(selectedVariant?.wholesale_price ?? selectedVariant?.price ?? product?.price, currency);
	const displayWholesaleSubscriptionPrice = formatPortalPrice(selectedPricing?.wholesale_price ?? selectedPricing?.price ?? selectedVariant?.wholesale_price ?? void 0, currency);
	const resolvedPlanId = selectedSubscriptionPlan?.subscription_plan.id ?? legacySubscriptionPlans.find((p) => p.default)?.subscription_plan.id ?? legacySubscriptionPlans[0]?.subscription_plan.id;
	const cartVariantId = String(selectedVariant?.id ?? product?.id ?? "");
	if (isLoading) return /* @__PURE__ */ jsx("div", {
		className: "mx-auto max-w-7xl py-8 pr-4 pl-0 md:pr-6 lg:pr-8 lg:pl-0",
		children: /* @__PURE__ */ jsxs("div", {
			className: "grid grid-cols-1 gap-5 lg:grid-cols-2",
			children: [/* @__PURE__ */ jsx(Skeleton, { className: "aspect-square w-full rounded-lg" }), /* @__PURE__ */ jsxs("div", {
				className: "space-y-4 pl-2 lg:pl-20",
				children: [
					/* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-3/4" }),
					/* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-1/4" }),
					/* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-full" }),
					/* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-1/2" }),
					/* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
				]
			})]
		})
	});
	if (error) return /* @__PURE__ */ jsx("div", {
		className: "flex min-h-[400px] items-center justify-center",
		children: /* @__PURE__ */ jsxs("div", {
			className: "text-center",
			children: [/* @__PURE__ */ jsx("h3", {
				className: "text-foreground mb-2 text-lg font-medium",
				children: t("error_loading")
			}), /* @__PURE__ */ jsx("p", {
				className: "text-muted-foreground",
				children: t("error_generic")
			})]
		})
	});
	if (!product) return /* @__PURE__ */ jsx("div", {
		className: "flex min-h-[400px] items-center justify-center",
		children: /* @__PURE__ */ jsxs("div", {
			className: "text-center",
			children: [/* @__PURE__ */ jsx("h3", {
				className: "text-foreground mb-2 text-lg font-medium",
				children: t("product_not_found")
			}), /* @__PURE__ */ jsx("p", {
				className: "text-muted-foreground",
				children: t("product_not_found_description")
			})]
		})
	});
	const title = product.name || t("product_fallback_name");
	const isBundle = product.is_bundle === true;
	const bundleUrl = isBundle && product.shop_link ? product.shop_link : null;
	const staticBundle = isBundle && isStaticBundle(product) && selectedVariant?.id != null;
	const displayCv = isBundle ? product.cv : selectedVariant?.cv;
	const displayQv = isBundle ? product.qv : selectedVariant?.qv;
	const bundlePriceDisplay = isBundle ? formatPortalPriceRange(product.price_range, currency) ?? formatPortalPrice(product.price, currency) : null;
	const bundleBasePrice = product.price_range?.min != null ? Number(product.price_range.min) : void 0;
	const selectedBundlePlan = subscriptionPlans.find((p) => p.id === resolvedPlanId) ?? subscriptionPlans[0];
	const bundleSubPrice = staticBundle ? bundleSubscriptionPrice(bundleBasePrice, product.subscription_price_range, selectedBundlePlan) : void 0;
	const staticBundleSubDisplay = bundleSubPrice !== void 0 ? formatPortalPrice(bundleSubPrice.toFixed(2), currency) : null;
	const isUnavailable = !isBundle && isVariantUnavailable(selectedVariant, product);
	return /* @__PURE__ */ jsx("div", {
		className: "pb-5 md:pl-8",
		children: /* @__PURE__ */ jsx("div", {
			className: "mx-auto max-w-7xl px-4 py-8 md:pr-6 md:pl-0 lg:pr-8 lg:pl-0",
			children: /* @__PURE__ */ jsxs("div", {
				className: "grid grid-cols-1 gap-5 lg:grid-cols-2",
				children: [/* @__PURE__ */ jsx(ImageGallery, {
					images: galleryImages,
					fallbackImageUrl: coverImage ?? "https://ik.imagekit.io/fluid/tr:w-1500,h-1500,cm-pad_resize,bg-FFFFFF/980191006/images/WJHL8V/WeCommerce_Logotype-Black_NcO-MzatB.png",
					productTitle: title,
					...renderImage !== void 0 && { renderImage }
				}), /* @__PURE__ */ jsxs("div", {
					className: "max-w-lg pl-2 lg:pl-20",
					children: [
						/* @__PURE__ */ jsxs("div", {
							className: "flex items-center gap-2",
							children: [/* @__PURE__ */ jsx("h1", {
								className: "text-foreground text-3xl font-bold",
								children: title
							}), isBundle && /* @__PURE__ */ jsx(Badge, {
								variant: "secondary",
								children: t("bundle_badge")
							})]
						}),
						isBundle && !staticBundle && bundlePriceDisplay && /* @__PURE__ */ jsx("div", {
							className: "mb-2 flex items-center gap-2",
							children: /* @__PURE__ */ jsx("span", {
								className: "text-foreground text-sm",
								children: bundlePriceDisplay
							})
						}),
						staticBundle && bundlePriceDisplay && /* @__PURE__ */ jsxs("div", {
							className: "mb-2 flex items-center gap-2",
							children: [/* @__PURE__ */ jsx("span", {
								className: "text-foreground text-sm",
								children: isSubscribe && staticBundleSubDisplay ? staticBundleSubDisplay : bundlePriceDisplay
							}), isSubscribe && staticBundleSubDisplay && staticBundleSubDisplay !== bundlePriceDisplay && /* @__PURE__ */ jsx("span", {
								className: "text-muted-foreground text-sm line-through",
								children: bundlePriceDisplay
							})]
						}),
						!isBundle && !isUnavailable && /* @__PURE__ */ jsxs("div", {
							className: "mb-2 flex items-center gap-2",
							children: [/* @__PURE__ */ jsx("span", {
								className: "text-foreground text-sm",
								children: isSubscribe ? displayWholesaleSubscriptionPrice : displayWholesalePrice
							}), (isSubscribe && displayWholesaleSubscriptionPrice !== displayWholesalePrice || !isSubscribe && displayWholesalePrice !== displayPrice) && /* @__PURE__ */ jsx("span", {
								className: "text-muted-foreground text-sm line-through",
								children: isSubscribe ? displayWholesalePrice : displayPrice
							})]
						}),
						/* @__PURE__ */ jsxs("div", {
							className: "pt-2",
							children: [/* @__PURE__ */ jsx("h3", {
								className: "text-foreground mb-1 text-sm font-medium",
								children: t("product_description")
							}), /* @__PURE__ */ jsx("div", {
								className: "text-foreground mb-3 text-[12px]",
								dangerouslySetInnerHTML: { __html: sanitizeHtml(product.description ?? "") }
							})]
						}),
						product.wholesale_price != null && /* @__PURE__ */ jsxs("div", {
							className: "text-muted-foreground mb-3 text-sm",
							children: [
								"CV ",
								displayCv ?? "-",
								" | QV ",
								displayQv ?? "-"
							]
						}),
						isBundle && !staticBundle ? /* @__PURE__ */ jsxs("div", {
							className: "pt-4",
							children: [/* @__PURE__ */ jsxs(Button, {
								variant: "default",
								className: "w-full gap-2 py-2 text-base font-medium",
								disabled: !bundleUrl,
								onClick: () => {
									if (bundleUrl) window.open(bundleUrl, "_blank", "noopener,noreferrer");
								},
								children: [t("purchase_bundle"), /* @__PURE__ */ jsx(ExternalLink, { className: "size-4" })]
							}), !bundleUrl && /* @__PURE__ */ jsx("p", {
								className: "text-muted-foreground mt-2 text-center text-xs",
								children: t("bundle_unavailable")
							})]
						}) : staticBundle ? /* @__PURE__ */ jsxs("div", {
							className: "pt-4",
							children: [/* @__PURE__ */ jsx(PurchaseOptions, {
								showBuyOnce,
								showSubscribe,
								isSubscribe,
								onSubscribeChange: setUserSelectedSubscribe,
								...bundleBasePrice !== void 0 && { wholesalePrice: bundleBasePrice },
								...bundleSubPrice !== void 0 && { wholesaleSubscriptionPrice: bundleSubPrice },
								...currency !== void 0 && { currency },
								product_subscription_plans: legacySubscriptionPlans,
								...selectedSubscriptionPlan !== void 0 && { selectedSubscriptionPlan },
								onSubscriptionPlanChange: setSelectedSubscriptionPlan
							}), /* @__PURE__ */ jsxs("div", {
								className: "mt-4 flex items-center gap-3 pb-3",
								children: [/* @__PURE__ */ jsx(QuantitySelector, {
									quantity,
									setQuantity,
									disabled: isUnavailable
								}), /* @__PURE__ */ jsxs(Button, {
									variant: "default",
									className: "flex-1 gap-2 py-2 text-base font-medium",
									disabled: isUnavailable,
									...!isUnavailable && {
										"data-fluid-add-to-cart": cartVariantId,
										"data-fluid-quantity": quantity,
										"data-fluid-subscribe": isSubscribe,
										"data-fluid-subscription-plan-id": isSubscribe ? String(resolvedPlanId ?? "") : "",
										"data-fluid-open-cart-after-add": "true"
									},
									children: [/* @__PURE__ */ jsx(ShoppingCart, { className: "size-4" }), isSubscribe ? t("subscribe") : t("add_to_cart")]
								})]
							})]
						}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
							/* @__PURE__ */ jsx(PurchaseOptions, {
								showBuyOnce,
								showSubscribe,
								isSubscribe,
								onSubscribeChange: setUserSelectedSubscribe,
								...wholesalePrice !== void 0 && { wholesalePrice },
								...wholesaleSubscriptionPrice !== void 0 && { wholesaleSubscriptionPrice },
								...currency !== void 0 && { currency },
								product_subscription_plans: legacySubscriptionPlans,
								...selectedSubscriptionPlan !== void 0 && { selectedSubscriptionPlan },
								onSubscriptionPlanChange: setSelectedSubscriptionPlan
							}),
							optionGroups.length > 0 && /* @__PURE__ */ jsx("div", {
								className: "mb-4 pt-4",
								children: optionGroups.map((group) => /* @__PURE__ */ jsxs("div", {
									className: "mb-3 flex items-center",
									children: [/* @__PURE__ */ jsx("h3", {
										className: "text-md text-foreground w-24 font-bold",
										children: group.name.charAt(0).toUpperCase() + group.name.slice(1)
									}), /* @__PURE__ */ jsxs(Select, {
										value: String(selections[group.optionId] ?? ""),
										onValueChange: (value) => setSelections((prev) => ({
											...prev,
											[group.optionId]: Number(value)
										})),
										children: [/* @__PURE__ */ jsx(SelectTrigger, {
											className: "w-48 max-w-full",
											children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("select_option", { name: group.name }) })
										}), /* @__PURE__ */ jsx(SelectContent, {
											position: "popper",
											className: "max-h-60",
											children: group.values.map((v) => /* @__PURE__ */ jsx(SelectItem, {
												value: String(v.id),
												children: v.name
											}, v.id))
										})]
									})]
								}, group.optionId))
							}),
							showVariantChoices && /* @__PURE__ */ jsx("div", {
								className: "mb-4 pt-4",
								children: /* @__PURE__ */ jsxs("div", {
									className: "mb-3 flex items-center",
									children: [/* @__PURE__ */ jsx("h3", {
										className: "text-md text-foreground w-24 font-bold",
										children: t("variant_label")
									}), /* @__PURE__ */ jsxs(Select, {
										value: selectedVariantId != null ? String(selectedVariantId) : "",
										onValueChange: (value) => setSelectedVariantId(Number(value)),
										children: [/* @__PURE__ */ jsx(SelectTrigger, {
											className: "w-48 max-w-full",
											children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("select_variant") })
										}), /* @__PURE__ */ jsx(SelectContent, {
											position: "popper",
											className: "max-h-60",
											children: variants.map((v, idx) => v.id == null ? null : /* @__PURE__ */ jsx(SelectItem, {
												value: String(v.id),
												children: v.title || t("variant_fallback_name", { index: String(idx + 1) })
											}, v.id))
										})]
									})]
								})
							}),
							isUnavailable && /* @__PURE__ */ jsx("div", {
								className: "text-muted-foreground text-sm",
								children: t("product_unavailable")
							}),
							/* @__PURE__ */ jsx("div", { className: "mt-4 mb-3" }),
							/* @__PURE__ */ jsxs("div", {
								className: "flex items-center gap-3 pb-3",
								children: [/* @__PURE__ */ jsx(QuantitySelector, {
									quantity,
									setQuantity,
									disabled: isUnavailable
								}), /* @__PURE__ */ jsxs(Button, {
									variant: "default",
									className: "flex-1 gap-2 py-2 text-base font-medium",
									disabled: isUnavailable,
									...!isUnavailable && {
										"data-fluid-add-to-cart": cartVariantId,
										"data-fluid-quantity": quantity,
										"data-fluid-subscribe": isSubscribe,
										"data-fluid-subscription-plan-id": isSubscribe ? String(resolvedPlanId ?? "") : "",
										"data-fluid-open-cart-after-add": "true"
									},
									children: [/* @__PURE__ */ jsx(ShoppingCart, { className: "size-4" }), isSubscribe ? t("subscribe") : t("add_to_cart")]
								})]
							})
						] })
					]
				})]
			})
		})
	});
}
function ShopApp({ companyLogoUrl, renderImage, productId: controlledProductId, onSelectProduct: onSelectProductProp, onBack: _onBack, cartButton }) {
	const [internalProductId, setInternalProductId] = useState(null);
	const activeProductId = controlledProductId !== void 0 ? controlledProductId : internalProductId;
	const handleSelectProduct = onSelectProductProp ?? setInternalProductId;
	if (activeProductId) return /* @__PURE__ */ jsx(ProductDetail, {
		productId: activeProductId,
		...renderImage !== void 0 && { renderImage }
	}, activeProductId);
	return /* @__PURE__ */ jsx(ProductListing, {
		...companyLogoUrl !== void 0 && { companyLogoUrl },
		...renderImage !== void 0 && { renderImage },
		onSelectProduct: handleSelectProduct,
		cartButton
	});
}
//#endregion
//#region ../../cart/ui/src/components/cart-script.tsx
const SCRIPT_ID = "fluid-cdn-script";
const LEAD_CAPTURE_ID = "fluid-lead-capture-suppress";
const DEFAULT_SCRIPT_SRC = "https://assets.fluid.app/scripts/fluid-sdk/latest/web-widgets/index.js";
function CartScript({ subdomain, authJwt, bffMode, scriptSrc, apiBaseUrl, debug, country }) {
	const authJwtRef = useRef(authJwt);
	authJwtRef.current = authJwt;
	const countryRef = useRef(country);
	countryRef.current = country;
	useEffect(() => {
		if (!subdomain) return;
		if (document.getElementById(SCRIPT_ID)) return;
		const script = document.createElement("script");
		script.id = SCRIPT_ID;
		script.src = scriptSrc ?? DEFAULT_SCRIPT_SRC;
		script.type = "module";
		script.crossOrigin = "anonymous";
		script.dataset.fluidShop = subdomain;
		if (bffMode) script.dataset.bffMode = "true";
		else if (authJwtRef.current) script.dataset.authJwt = authJwtRef.current;
		if (apiBaseUrl) script.dataset.fluidApiBaseUrl = apiBaseUrl;
		if (debug) script.dataset.debug = "true";
		if (countryRef.current) script.dataset.fluidCountry = countryRef.current;
		document.head.appendChild(script);
		const leadCapture = document.createElement("fluid-lead-capture-widget");
		leadCapture.id = LEAD_CAPTURE_ID;
		leadCapture.setAttribute("hide-widget", "true");
		document.body.appendChild(leadCapture);
		return () => {
			const existing = document.getElementById(SCRIPT_ID);
			if (existing) existing.remove();
			const existingLeadCapture = document.getElementById(LEAD_CAPTURE_ID);
			if (existingLeadCapture) existingLeadCapture.remove();
		};
	}, [
		subdomain,
		bffMode,
		scriptSrc,
		apiBaseUrl,
		debug
	]);
	return null;
}
//#endregion
//#region ../../cart/ui/src/components/cart-widget.tsx
function CartWidget({ theme }) {
	const [mounted, setMounted] = useState(false);
	const widgetRef = useRef(null);
	useEffect(() => {
		setMounted(true);
	}, []);
	useEffect(() => {
		if (!mounted) return;
		const el = widgetRef.current;
		if (!el) return;
		if (theme) el.setAttribute("theme", JSON.stringify(theme));
		else el.removeAttribute("theme");
	}, [theme, mounted]);
	const widget = React.createElement("fluid-cart-widget", {
		ref: (el) => {
			widgetRef.current = el;
		},
		"data-fluid-widget": "true",
		"hide-widget": "true",
		"is-primary": "true"
	});
	if (mounted) return createPortal(widget, document.body);
	return null;
}
//#endregion
//#region ../../cart/ui/src/components/cart-button.tsx
const MAX_SDK_POLL_ATTEMPTS = 50;
function CartButton({ onCheckout }) {
	const { t } = useShopTranslation();
	const [initialCount, setInitialCount] = useState(0);
	const navigateToCheckout = useCallback(() => {
		if (!window.FluidCommerceSDK) {
			console.error("FluidCommerceSDK not available");
			return;
		}
		try {
			const checkoutUrl = window.FluidCommerceSDK.getCheckoutUrl();
			if (!checkoutUrl) {
				console.error("No checkout URL available");
				return;
			}
			onCheckout?.(checkoutUrl);
		} catch (error) {
			console.error("Error getting checkout URL:", error);
		}
	}, [onCheckout]);
	useEffect(() => {
		let timeoutId = null;
		let attempts = 0;
		let cancelled = false;
		const setupSDK = () => {
			if (cancelled) return;
			if (window.FluidCommerceSDK) {
				if (onCheckout) window.FluidCommerceSDK.setOnCheckout(navigateToCheckout);
				const count = window.FairShareSDK?.getCartItemCount?.();
				if (count != null) setInitialCount(count);
			} else if (attempts < MAX_SDK_POLL_ATTEMPTS) {
				attempts++;
				timeoutId = setTimeout(setupSDK, 100);
			}
		};
		setupSDK();
		return () => {
			cancelled = true;
			if (timeoutId) clearTimeout(timeoutId);
		};
	}, [navigateToCheckout, onCheckout]);
	return /* @__PURE__ */ jsxs(Button, {
		className: "bg-primary text-primary-foreground hover:bg-primary/70 relative flex h-8 items-center gap-2 rounded-sm px-3 py-1 text-xs",
		onClick: () => {
			window.fluidCart?.open();
		},
		children: [/* @__PURE__ */ jsxs("div", {
			className: "relative",
			children: [/* @__PURE__ */ jsx(ShoppingCart, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
				id: "fluid-cart-count",
				className: "bg-primary-foreground text-primary absolute -top-1 -right-2 flex size-3.5 items-center justify-center rounded-full text-[8px] font-bold",
				children: initialCount
			})]
		}), /* @__PURE__ */ jsx("span", { children: t("cart") })]
	});
}
//#endregion
//#region ../../cart/ui/src/components/shop-container.tsx
function ShopContainer({ children, className = "", cartScript, cartWidget }) {
	const containerRef = useRef(null);
	const [portalContainer, setPortalContainer] = useState(null);
	useEffect(() => {
		const currentContainer = containerRef.current;
		if (!currentContainer) return;
		const reactContentWrapper = document.createElement("div");
		reactContentWrapper.id = "react-content-wrapper";
		reactContentWrapper.style.cssText = `
      position: relative;
    `;
		reactContentWrapper.className = "min-h-full";
		currentContainer.appendChild(reactContentWrapper);
		setPortalContainer(reactContentWrapper);
		return () => {
			if (currentContainer && reactContentWrapper) try {
				currentContainer.removeChild(reactContentWrapper);
			} catch (e) {
				console.warn("Failed to cleanup isolated container:", e);
			}
			setPortalContainer(null);
		};
	}, []);
	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", {
		ref: containerRef,
		className: `isolated-shop-wrapper ${className} h-full`,
		children: portalContainer && createPortal(/* @__PURE__ */ jsxs(Fragment$1, { children: [
			cartScript,
			cartWidget,
			children
		] }), portalContainer)
	}) });
}
//#endregion
//#region src/screens/ShopScreen.tsx
function ShopScreen(props) {
	return /* @__PURE__ */ jsx(ShopScreenContent, { ...props });
}
function ShopScreenContent({ background, textColor, accentColor, padding, borderRadius, ...divProps }) {
	const { config } = useFluidContext();
	const { t } = useShopTranslation();
	const { data: store } = useStore();
	const { isPending: accountPending } = useAccount();
	const { currentSlug, navigate } = useAppNavigation();
	const countryCode = config.countryIso ?? "US";
	const subdomain = store?.subdomain;
	const productId = currentSlug.split("/")[1] ?? null;
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
		!productId && /* @__PURE__ */ jsx(ScreenHeaderBreadcrumbs, { children: /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsx(BreadcrumbList, {
			className: "text-lg",
			children: /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, {
				className: "font-semibold",
				children: t("breadcrumb")
			}) })
		}) }) }),
		/* @__PURE__ */ jsx(ScreenHeaderActions, { children: /* @__PURE__ */ jsx("div", {
			className: "flex items-center gap-4",
			children: /* @__PURE__ */ jsx(CartButton, {})
		}) }),
		/* @__PURE__ */ jsx("div", {
			...divProps,
			className: divProps.className ?? "",
			children: /* @__PURE__ */ jsxs(ShopContainer, {
				cartScript: subdomain && !accountPending ? /* @__PURE__ */ jsx(CartScript, {
					subdomain,
					bffMode: true,
					scriptSrc: import.meta.env.DEV ? String(import.meta.env.VITE_FAIRSHARE_SDK_URL || "http://localhost:4444/index.js") : void 0,
					apiBaseUrl: import.meta.env.DEV ? String(import.meta.env.VITE_FAIRSHARE_API_BASE_URL || "http://api.fluid.localhost:3000") : void 0,
					debug: import.meta.env.DEV,
					country: countryCode
				}) : null,
				cartWidget: /* @__PURE__ */ jsx(CartWidget, {}),
				children: [productId && /* @__PURE__ */ jsx(ProductBreadcrumb, { productId }), /* @__PURE__ */ jsx(ShopApp, {
					companyLogoUrl: store?.logo_url ?? void 0,
					productId,
					onSelectProduct: (id) => navigate(`shop/${id}`),
					onBack: () => navigate("shop")
				})]
			})
		})
	] });
}
const shopScreenPropertySchema = {
	widgetType: "ShopScreen",
	displayName: "Shop Screen",
	tabsConfig: [{
		id: "styling",
		label: "Styling"
	}],
	fields: []
};
/**
* Renders inside PortalProductsCoreProvider to set breadcrumbs with the
* product name: "Shop > {product name}". Overrides the parent's "Shop"
* breadcrumb once product data loads.
*/
function ProductBreadcrumb({ productId }) {
	const { navigate } = useAppNavigation();
	const parentBreadcrumb = useNavigationParent();
	const { t } = useShopTranslation();
	const { product } = usePortalProductDetail({ productId });
	const productName = product?.name ?? t("product_fallback_name");
	const parentLabel = parentBreadcrumb?.label ?? t("breadcrumb");
	return /* @__PURE__ */ jsx(ScreenHeaderBreadcrumbs, { children: /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsxs(BreadcrumbList, {
		className: "text-lg",
		children: [
			/* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, {
				onClick: parentBreadcrumb?.onClick ?? (() => navigate("shop")),
				className: "cursor-pointer font-semibold",
				children: parentLabel
			}) }),
			/* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
			/* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, {
				className: "font-semibold",
				children: productName
			}) })
		]
	}) }) });
}
//#endregion
export { shopScreenPropertySchema as n, ShopScreen as t };

//# sourceMappingURL=ShopScreen-CyRX0aOs.mjs.map