@fluid-app/portal-sdk 0.1.237 → 0.1.239

package/dist/{ShareablesScreen-Bt0E1aya.cjs → ShareablesScreen-A69L0Nok.cjs}

@@ -105,6 +105,14 @@ const shareablesKeys = {
 			id
 		]
 	},
+	mediaProducts: {
+		all: ["mediaProducts"],
+		list: (mediaId) => [
+			"mediaProducts",
+			"list",
+			mediaId
+		]
+	},
 	shareLinks: {
 		all: ["shareLinks"],
 		link: (type, id, contactId, locale) => [
@@ -1952,6 +1960,108 @@ function MediaListingScreen(_props) {
 	})] });
 }
 //#endregion
+//#region ../../shareables/ui/src/components/SharePage/TaggedProductsList.tsx
+const DEFAULT_IMAGE$5 = "https://assets.fluid.app/fluid-admin/images/we-commerce/we-commerce.png";
+function resolvePrice(product) {
+	let price = product.display_price || product.price;
+	if (product.variants && product.variants.length > 0) {
+		const firstVariant = product.variants[0];
+		if (firstVariant?.display_price) price = firstVariant.display_price;
+		else if (firstVariant?.price) price = firstVariant.price;
+	}
+	if (!price) return null;
+	const numPrice = parseFloat(price.replace(/[^0-9.-]/g, ""));
+	if (Number.isNaN(numPrice) || numPrice <= 0) return null;
+	if (price.includes("$")) return price;
+	return `$${numPrice.toFixed(2)}`;
+}
+function TaggedProductsList({ products, onProductClick }) {
+	const renderImage = useRenderImage();
+	const handleProductClick = (productId, e) => {
+		e.stopPropagation();
+		if (productId == null) return;
+		onProductClick?.(productId);
+	};
+	if (!products || products.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "mb-6",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "mb-4 px-4",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				className: "text-foreground text-[15px] leading-[1.4] font-semibold",
+				children: "Tagged Products (0)"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex flex-1 items-center justify-center px-6 py-12",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "text-center",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-muted-foreground mb-2",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ShoppingBag, { className: "mx-auto h-12 w-12" })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-foreground mb-1 text-sm",
+						children: "No Tagged Products"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-muted-foreground text-xs",
+						children: "No products are tagged in this playlist"
+					})
+				]
+			})
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "mb-6",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "mb-4 px-4",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h2", {
+				className: "text-foreground text-[15px] leading-[1.4] font-semibold",
+				children: [
+					"Tagged Products (",
+					products.length,
+					")"
+				]
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "px-4",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "scrollbar-none flex gap-4 overflow-x-auto pb-2",
+				children: products.map((product, index) => {
+					const imageUrl = product.images?.[0]?.image_url || product.image_url || product.compressed_image_url || DEFAULT_IMAGE$5;
+					const title = product.title || "Untitled";
+					const displayPrice = resolvePrice(product);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						onClick: (e) => handleProductClick(product.id, e),
+						className: "group bg-muted hover:bg-muted/60 flex w-[168px] shrink-0 flex-col gap-2 rounded-lg p-3 text-left transition-all",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "bg-background relative h-[168px] w-full overflow-hidden rounded-lg",
+							children: renderImage({
+								src: imageUrl,
+								alt: title,
+								fill: true,
+								className: "object-cover"
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex min-w-0 flex-col gap-1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h3", {
+								className: "text-foreground flex items-start gap-1.5 text-[15px] leading-[1.4] font-semibold",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "line-clamp-2",
+									children: title
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUpRight, { className: "text-foreground mt-0.5 h-3 w-3 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" })]
+							}), displayPrice && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "text-foreground text-[15px] leading-[1.4] font-normal",
+								children: displayPrice
+							})]
+						})]
+					}, product.id ?? index);
+				})
+			})
+		})]
+	});
+}
+//#endregion
 //#region ../../shareables/ui/src/components/screens/MediaDetailScreen.tsx
 function getBadgeLabel(kind) {
 	switch (kind) {
@@ -1961,15 +2071,28 @@ function getBadgeLabel(kind) {
 		default: return "Media";
 	}
 }
-function MediaDetailScreen({ mediaId, onNavigate: _onNavigate, onBack }) {
+function MediaDetailScreen({ mediaId, onNavigate, onBack }) {
 	const api = useShareablesApi();
 	const repContext = useRepContext();
-	const { navigate, readOnly } = useShareablesUI();
+	const { navigate, readOnly, mediaProductsApi } = useShareablesUI();
 	const { data: mediaResponse, isLoading } = (0, _tanstack_react_query.useQuery)({
 		queryKey: shareablesKeys.media.detail(Number(mediaId), repContext),
 		queryFn: () => api.media.getMediaById(Number(mediaId))
 	});
 	const { shareLink, loading: shareLinkLoading, error: shareLinkError } = useShareLink({ id: Number(mediaId) }, "Medium");
+	const { data: mediaProductsData } = (0, _tanstack_react_query.useQuery)({
+		queryKey: shareablesKeys.mediaProducts.list(Number(mediaId)),
+		queryFn: () => mediaProductsApi.listMediaProducts(Number(mediaId)),
+		enabled: !!mediaProductsApi
+	});
+	const taggedProducts = (0, react.useMemo)(() => mediaProductsData?.media_products?.map((p) => ({
+		id: p.id,
+		title: p.name ?? null,
+		image_url: p.image_url ?? null,
+		price: p.price ?? null,
+		slug: p.slug ?? null,
+		sku: p.sku ?? null
+	})) ?? [], [mediaProductsData]);
 	const mediaItem = mediaResponse?.media;
 	const displayTitle = mediaItem?.title || "";
 	const displayImage = mediaItem?.image_url || "";
@@ -2045,7 +2168,14 @@ function MediaDetailScreen({ mediaId, onNavigate: _onNavigate, onBack }) {
 			isVideo,
 			relateableId: Number(mediaId),
 			relateableType: "Medium"
-		})
+		}),
+		children: taggedProducts.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Separator, { className: "bg-foreground my-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "bg-background rounded-lg",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TaggedProductsList, {
+				products: taggedProducts,
+				onProductClick: (productId) => onNavigate?.("product", String(productId))
+			})
+		})] })
 	});
 }
 //#endregion
@@ -9489,7 +9619,7 @@ function MediaCreateScreen({ onNavigate, onBack }) {
 }
 //#endregion
 //#region ../../shareables/ui/src/components/playlists/PlaylistCard.tsx
-const DEFAULT_IMAGE$5 = "https://assets.fluid.app/fluid-admin/images/we-commerce/we-commerce.png";
+const DEFAULT_IMAGE$4 = "https://assets.fluid.app/fluid-admin/images/we-commerce/we-commerce.png";
 function PlaylistCard({ title, imageUrl, href, itemCount, isFavorited = false, isSelectable = false, isSelected = false, canEdit = false, onSelectionChange, onToggleFavorite, onEdit, onDelete }) {
 	const { navigate } = useShareablesUI();
 	const renderImage = useRenderImage();
@@ -9514,7 +9644,7 @@ function PlaylistCard({ title, imageUrl, href, itemCount, isFavorited = false, i
 					className: "bg-muted relative aspect-square overflow-hidden rounded-lg",
 					children: [
 						renderImage({
-							src: imgError ? DEFAULT_IMAGE$5 : imageUrl || DEFAULT_IMAGE$5,
+							src: imgError ? DEFAULT_IMAGE$4 : imageUrl || DEFAULT_IMAGE$4,
 							alt: title,
 							fill: true,
 							className: "object-cover transition-transform group-hover:scale-105",
@@ -9969,108 +10099,6 @@ const NAVIGABLE_RELATEABLE_TYPES = new Set([
 	"Medium"
 ]);
 //#endregion
-//#region ../../shareables/ui/src/components/SharePage/TaggedProductsList.tsx
-const DEFAULT_IMAGE$4 = "https://assets.fluid.app/fluid-admin/images/we-commerce/we-commerce.png";
-function resolvePrice(product) {
-	let price = product.display_price || product.price;
-	if (product.variants && product.variants.length > 0) {
-		const firstVariant = product.variants[0];
-		if (firstVariant?.display_price) price = firstVariant.display_price;
-		else if (firstVariant?.price) price = firstVariant.price;
-	}
-	if (!price) return null;
-	const numPrice = parseFloat(price.replace(/[^0-9.-]/g, ""));
-	if (Number.isNaN(numPrice) || numPrice <= 0) return null;
-	if (price.includes("$")) return price;
-	return `$${numPrice.toFixed(2)}`;
-}
-function TaggedProductsList({ products, onProductClick }) {
-	const renderImage = useRenderImage();
-	const handleProductClick = (productId, e) => {
-		e.stopPropagation();
-		if (productId == null) return;
-		onProductClick?.(productId);
-	};
-	if (!products || products.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "mb-6",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "mb-4 px-4",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-				className: "text-foreground text-[15px] leading-[1.4] font-semibold",
-				children: "Tagged Products (0)"
-			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex flex-1 items-center justify-center px-6 py-12",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "text-center",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "text-muted-foreground mb-2",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ShoppingBag, { className: "mx-auto h-12 w-12" })
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "text-foreground mb-1 text-sm",
-						children: "No Tagged Products"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "text-muted-foreground text-xs",
-						children: "No products are tagged in this playlist"
-					})
-				]
-			})
-		})]
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "mb-6",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "mb-4 px-4",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h2", {
-				className: "text-foreground text-[15px] leading-[1.4] font-semibold",
-				children: [
-					"Tagged Products (",
-					products.length,
-					")"
-				]
-			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "px-4",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "scrollbar-none flex gap-4 overflow-x-auto pb-2",
-				children: products.map((product, index) => {
-					const imageUrl = product.images?.[0]?.image_url || product.image_url || product.compressed_image_url || DEFAULT_IMAGE$4;
-					const title = product.title || "Untitled";
-					const displayPrice = resolvePrice(product);
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						onClick: (e) => handleProductClick(product.id, e),
-						className: "group bg-muted hover:bg-muted/60 flex w-[168px] shrink-0 flex-col gap-2 rounded-lg p-3 text-left transition-all",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "bg-background relative h-[168px] w-full overflow-hidden rounded-lg",
-							children: renderImage({
-								src: imageUrl,
-								alt: title,
-								fill: true,
-								className: "object-cover"
-							})
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex min-w-0 flex-col gap-1",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h3", {
-								className: "text-foreground flex items-start gap-1.5 text-[15px] leading-[1.4] font-semibold",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "line-clamp-2",
-									children: title
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUpRight, { className: "text-foreground mt-0.5 h-3 w-3 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" })]
-							}), displayPrice && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "text-foreground text-[15px] leading-[1.4] font-normal",
-								children: displayPrice
-							})]
-						})]
-					}, product.id ?? index);
-				})
-			})
-		})]
-	});
-}
-//#endregion
 //#region ../../shareables/ui/src/components/SharePage/PlaylistItemsList.tsx
 const DEFAULT_IMAGE$3 = "https://assets.fluid.app/fluid-admin/images/we-commerce/we-commerce.png";
 function getItemType(type, kind) {
@@ -13469,4 +13497,4 @@ Object.defineProperty(exports, "shareablesScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=ShareablesScreen-Bt0E1aya.cjs.map
+//# sourceMappingURL=ShareablesScreen-A69L0Nok.cjs.map