@burdenoff/microfe-coolandlovely 2026.1101.8 → 2026.1102.2

package/dist/coolandlovely/pages/items/StoreListedPieceView.js

@@ -12,115 +12,116 @@ import { TagList as f } from "../../components/TagList.js";
 import { ColourSwatchRow as p } from "../../components/ColourSwatchRow.js";
 import { useBuyStoreListedPiece as m, useStoreListedPiece as h, useSyncOrderPayment as g } from "../../hooks/useCommerceApi.js";
 import { PayForOrder as _ } from "../../components/PayForOrder.js";
-import { useState as v } from "react";
-import { ArrowLeft as y, Loader2 as b, ShoppingBag as x, Store as S } from "lucide-react";
-import { jsx as C, jsxs as w } from "react/jsx-runtime";
-import { GlassCard as T } from "@burdenoff/fe-libs/ui";
+import { PricePanel as v } from "../../components/prices/PricePanel.js";
+import { useState as y } from "react";
+import { ArrowLeft as b, Loader2 as x, ShoppingBag as S, Store as C } from "lucide-react";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import { GlassCard as E } from "@burdenoff/fe-libs/ui";
 //#region src/coolandlovely/pages/items/StoreListedPieceView.tsx
-var E = 10, D = 5, O = (e) => t("inline-flex min-w-9 items-center justify-center rounded-full border px-3 py-1 text-sm font-medium transition-colors disabled:opacity-40 disabled:line-through", e ? "border-action-primary-bg bg-action-primary-bg text-action-primary-text" : "border-border-seam text-text-primary hover:bg-bg-sunken"), k = "inline-flex w-full items-center justify-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2.5 text-sm font-semibold text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50";
-function A(e, t, n) {
+var D = 10, O = 5, k = (e) => t("inline-flex min-w-9 items-center justify-center rounded-full border px-3 py-1 text-sm font-medium transition-colors disabled:opacity-40 disabled:line-through", e ? "border-action-primary-bg bg-action-primary-bg text-action-primary-text" : "border-border-seam text-text-primary hover:bg-bg-sunken"), A = "inline-flex w-full items-center justify-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2.5 text-sm font-semibold text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50";
+function j(e, t, n) {
 	return e.trackInventory ? e.variants.filter((e) => (t === null || (e.size ?? "") === t) && (n === null || (e.colour ?? "") === n)).reduce((e, t) => e + t.available, 0) : null;
 }
-var j = ({ piece: e, onCheckout: n }) => {
-	let i = r(), a = m(), [o, c] = v(e.sizes.length === 1 ? e.sizes[0] ?? null : null), [l, f] = v(e.colours.length === 1 ? e.colours[0] ?? null : null), [p, h] = v(1), [g, _] = v(""), [y, S] = v(""), [T, j] = v("");
-	if (!e.inStock) return /* @__PURE__ */ C("p", {
+var M = ({ piece: e, onCheckout: n }) => {
+	let i = r(), a = m(), [o, c] = y(e.sizes.length === 1 ? e.sizes[0] ?? null : null), [l, f] = y(e.colours.length === 1 ? e.colours[0] ?? null : null), [p, h] = y(1), [g, _] = y(""), [v, b] = y(""), [C, E] = y("");
+	if (!e.inStock) return /* @__PURE__ */ w("p", {
 		className: "rounded-lg border border-border-seam bg-bg-sunken p-3 text-sm text-text-secondary",
 		children: i("coolandlovely.storePiece.soldOut", "This piece is sold out right now.")
 	});
-	let M = e.sizes.length > 0 && !o, N = e.colours.length > 0 && !l, P = M || N ? null : A(e, o ?? "", l ?? ""), F = P !== null && P <= 0, I = P === null ? E : Math.max(1, Math.min(E, P)), L = !M && !N && !F && g.trim() !== "" && y.trim() !== "";
-	return /* @__PURE__ */ w("div", {
+	let M = e.sizes.length > 0 && !o, N = e.colours.length > 0 && !l, P = M || N ? null : j(e, o ?? "", l ?? ""), F = P !== null && P <= 0, I = P === null ? D : Math.max(1, Math.min(D, P)), L = !M && !N && !F && g.trim() !== "" && v.trim() !== "";
+	return /* @__PURE__ */ T("div", {
 		className: "space-y-4",
 		"data-testid": "store-buy-panel",
 		children: [
-			e.sizes.length > 0 && /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+			e.sizes.length > 0 && /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
 				className: "mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary",
 				children: i("coolandlovely.cart.chooseSize", "Choose a size")
-			}), /* @__PURE__ */ C("div", {
+			}), /* @__PURE__ */ w("div", {
 				className: "flex flex-wrap gap-2",
-				children: e.sizes.map((t) => /* @__PURE__ */ C("button", {
+				children: e.sizes.map((t) => /* @__PURE__ */ w("button", {
 					type: "button",
 					"aria-pressed": o === t,
-					disabled: A(e, t, l) === 0,
+					disabled: j(e, t, l) === 0,
 					onClick: () => {
 						c(t), h(1);
 					},
-					className: O(o === t),
+					className: k(o === t),
 					children: t
 				}, t))
 			})] }),
-			e.colours.length > 0 && /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+			e.colours.length > 0 && /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
 				className: "mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary",
 				children: i("coolandlovely.cart.chooseColour", "Choose a colour")
-			}), /* @__PURE__ */ C("div", {
+			}), /* @__PURE__ */ w("div", {
 				className: "flex flex-wrap gap-2",
-				children: e.colours.map((t) => /* @__PURE__ */ C("button", {
+				children: e.colours.map((t) => /* @__PURE__ */ w("button", {
 					type: "button",
 					"aria-pressed": l === t,
-					disabled: A(e, o, t) === 0,
+					disabled: j(e, o, t) === 0,
 					onClick: () => {
 						f(t), h(1);
 					},
-					className: O(l === t),
+					className: k(l === t),
 					children: t
 				}, t))
 			})] }),
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ T("div", {
 				className: "flex items-center gap-3",
-				children: [/* @__PURE__ */ C("label", {
+				children: [/* @__PURE__ */ w("label", {
 					htmlFor: "coo-store-quantity",
 					className: "text-sm text-text-secondary",
 					children: i("coolandlovely.cart.quantity", "Quantity")
-				}), /* @__PURE__ */ C("select", {
+				}), /* @__PURE__ */ w("select", {
 					id: "coo-store-quantity",
 					value: p,
 					onChange: (e) => h(Number(e.target.value)),
 					className: "rounded-lg border border-border-seam bg-bg-surface px-2 py-1.5 text-sm text-text-primary",
-					children: Array.from({ length: I }, (e, t) => t + 1).map((e) => /* @__PURE__ */ C("option", {
+					children: Array.from({ length: I }, (e, t) => t + 1).map((e) => /* @__PURE__ */ w("option", {
 						value: e,
 						children: e
 					}, e))
 				})]
 			}),
-			P !== null && /* @__PURE__ */ C("p", {
+			P !== null && /* @__PURE__ */ w("p", {
 				"data-testid": "store-stock-left",
-				className: t("text-sm font-medium", F || P <= D ? "text-status-warning-text" : "text-text-secondary"),
-				children: F ? i("coolandlovely.cart.soldOut", "Sold out in this size and colour") : P <= D ? i("coolandlovely.cart.onlyLeft", "Only {{count}} left", { count: P }) : i("coolandlovely.cart.inStock", "In stock")
+				className: t("text-sm font-medium", F || P <= O ? "text-status-warning-text" : "text-text-secondary"),
+				children: F ? i("coolandlovely.cart.soldOut", "Sold out in this size and colour") : P <= O ? i("coolandlovely.cart.onlyLeft", "Only {{count}} left", { count: P }) : i("coolandlovely.cart.inStock", "In stock")
 			}),
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ T("div", {
 				className: "space-y-3 border-t border-border-seam pt-4",
 				children: [
-					/* @__PURE__ */ C(d, {
+					/* @__PURE__ */ w(d, {
 						id: "coo-store-shipping-name",
 						label: i("coolandlovely.checkout.shippingName", "Full name"),
 						value: g,
 						onChange: _,
 						required: !0
 					}),
-					/* @__PURE__ */ C(u, {
+					/* @__PURE__ */ w(u, {
 						id: "coo-store-shipping-address",
 						label: i("coolandlovely.checkout.shippingAddress", "Shipping address"),
-						value: y,
-						onChange: S,
+						value: v,
+						onChange: b,
 						rows: 3,
 						required: !0
 					}),
-					/* @__PURE__ */ C(d, {
+					/* @__PURE__ */ w(d, {
 						id: "coo-store-buyer-note",
 						label: i("coolandlovely.checkout.note", "Note for the brand (optional)"),
-						value: T,
-						onChange: j
+						value: C,
+						onChange: E
 					})
 				]
 			}),
-			/* @__PURE__ */ C("p", {
+			/* @__PURE__ */ w("p", {
 				className: "text-xs text-text-secondary",
 				children: i("coolandlovely.cart.taxNote", "Tax is calculated when you place the order.")
 			}),
-			a.error && /* @__PURE__ */ C("p", {
+			a.error && /* @__PURE__ */ w("p", {
 				className: "text-sm text-status-error-text",
 				children: a.error.message
 			}),
-			/* @__PURE__ */ w("button", {
+			/* @__PURE__ */ T("button", {
 				type: "button",
 				disabled: !L || a.isPending,
 				onClick: () => {
@@ -130,55 +131,55 @@ var j = ({ piece: e, onCheckout: n }) => {
 						size: o,
 						colour: l,
 						shippingName: g.trim(),
-						shippingAddress: y.trim(),
-						buyerNote: T.trim() || null
+						shippingAddress: v.trim(),
+						buyerNote: C.trim() || null
 					}, { onSuccess: n });
 				},
-				className: k,
-				children: [a.isPending ? /* @__PURE__ */ C(b, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ C(x, { className: "h-4 w-4" }), i("coolandlovely.storePiece.buyNow", "Buy now · {{amount}}", { amount: s(e.price * p, e.currency) })]
+				className: A,
+				children: [a.isPending ? /* @__PURE__ */ w(x, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ w(S, { className: "h-4 w-4" }), i("coolandlovely.storePiece.buyNow", "Buy now · {{amount}}", { amount: s(e.price * p, e.currency) })]
 			})
 		]
 	});
-}, M = ({ session: t }) => {
+}, N = ({ session: t }) => {
 	let i = r(), { navigateTo: a } = e(), o = g();
-	return /* @__PURE__ */ C(n, {
+	return /* @__PURE__ */ w(n, {
 		title: i("coolandlovely.checkout.payTitle", "Pay for your order"),
 		description: t.order.orderNumber,
-		children: /* @__PURE__ */ C("div", {
+		children: /* @__PURE__ */ w("div", {
 			className: "mx-auto max-w-lg space-y-4",
-			children: /* @__PURE__ */ w(T, {
+			children: /* @__PURE__ */ T(E, {
 				treatment: "glass",
 				className: "space-y-4 p-6",
 				children: [
-					/* @__PURE__ */ w("dl", {
+					/* @__PURE__ */ T("dl", {
 						className: "space-y-2 text-sm",
 						children: [
-							/* @__PURE__ */ w("div", {
+							/* @__PURE__ */ T("div", {
 								className: "flex justify-between",
-								children: [/* @__PURE__ */ C("dt", {
+								children: [/* @__PURE__ */ w("dt", {
 									className: "text-text-secondary",
 									children: i("coolandlovely.checkout.subtotal", "Subtotal")
-								}), /* @__PURE__ */ C("dd", {
+								}), /* @__PURE__ */ w("dd", {
 									className: "tabular-nums text-text-primary",
 									children: s(t.subtotal, t.currency)
 								})]
 							}),
-							/* @__PURE__ */ w("div", {
+							/* @__PURE__ */ T("div", {
 								className: "flex justify-between",
-								children: [/* @__PURE__ */ C("dt", {
+								children: [/* @__PURE__ */ w("dt", {
 									className: "text-text-secondary",
 									children: i("coolandlovely.checkout.tax", "Tax")
-								}), /* @__PURE__ */ C("dd", {
+								}), /* @__PURE__ */ w("dd", {
 									className: "tabular-nums text-text-primary",
 									children: s(t.taxAmount, t.currency)
 								})]
 							}),
-							/* @__PURE__ */ w("div", {
+							/* @__PURE__ */ T("div", {
 								className: "flex justify-between border-t border-border-seam pt-2 text-base font-semibold",
-								children: [/* @__PURE__ */ C("dt", {
+								children: [/* @__PURE__ */ w("dt", {
 									className: "text-text-primary",
 									children: i("coolandlovely.checkout.total", "Total")
-								}), /* @__PURE__ */ C("dd", {
+								}), /* @__PURE__ */ w("dd", {
 									className: "tabular-nums text-text-primary",
 									"data-testid": "store-checkout-total",
 									children: s(t.total, t.currency)
@@ -186,13 +187,13 @@ var j = ({ piece: e, onCheckout: n }) => {
 							})
 						]
 					}),
-					/* @__PURE__ */ C(_, {
+					/* @__PURE__ */ w(_, {
 						checkout: t,
 						onSettle: async () => {
 							await o.mutateAsync(t.order.id).catch(() => void 0), a(`/orders/${t.order.id}`);
 						}
 					}),
-					/* @__PURE__ */ C("button", {
+					/* @__PURE__ */ w("button", {
 						type: "button",
 						onClick: () => a(`/orders/${t.order.id}`),
 						className: "w-full text-center text-sm font-medium text-text-secondary hover:underline",
@@ -202,151 +203,157 @@ var j = ({ piece: e, onCheckout: n }) => {
 			})
 		})
 	});
-}, N = ({ itemId: t, onRetry: u }) => {
-	let d = r(), { navigateTo: m } = e(), g = h(t, !0), [_, b] = v(null), x = d("coolandlovely.storePiece.pageTitle", "Style item");
-	if (_) return /* @__PURE__ */ C(M, { session: _ });
-	if (g.isLoading) return /* @__PURE__ */ C(n, {
-		title: x,
-		children: /* @__PURE__ */ C(a, { label: d("coolandlovely.storePiece.loading", "Loading item…") })
+}, P = ({ itemId: t, onRetry: u }) => {
+	let d = r(), { navigateTo: m } = e(), g = h(t, !0), [_, x] = y(null), S = d("coolandlovely.storePiece.pageTitle", "Style item");
+	if (_) return /* @__PURE__ */ w(N, { session: _ });
+	if (g.isLoading) return /* @__PURE__ */ w(n, {
+		title: S,
+		children: /* @__PURE__ */ w(a, { label: d("coolandlovely.storePiece.loading", "Loading item…") })
 	});
-	let E = g.data;
-	return g.isError || !E ? /* @__PURE__ */ C(n, {
-		title: x,
-		children: /* @__PURE__ */ C(i, {
+	let D = g.data;
+	return g.isError || !D ? /* @__PURE__ */ w(n, {
+		title: S,
+		children: /* @__PURE__ */ w(i, {
 			title: d("coolandlovely.storePiece.notFound", "Item not found"),
 			onRetry: () => {
 				u(), g.refetch();
 			}
 		})
-	}) : /* @__PURE__ */ C(n, {
-		title: E.name,
-		description: E.brandName,
-		actions: /* @__PURE__ */ w("button", {
+	}) : /* @__PURE__ */ T(n, {
+		title: D.name,
+		description: D.brandName,
+		actions: /* @__PURE__ */ T("button", {
 			type: "button",
 			onClick: () => m("/discover"),
 			className: "inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken",
 			children: [
-				/* @__PURE__ */ C(y, { className: "h-4 w-4" }),
+				/* @__PURE__ */ w(b, { className: "h-4 w-4" }),
 				" ",
 				d("coolandlovely.storePiece.back", "Discover")
 			]
 		}),
-		children: /* @__PURE__ */ w("div", {
+		children: [/* @__PURE__ */ T("div", {
 			className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
 			"data-testid": "store-listed-piece",
-			children: [/* @__PURE__ */ C("div", {
+			children: [/* @__PURE__ */ w("div", {
 				className: "lg:col-span-2",
-				children: /* @__PURE__ */ w(T, {
+				children: /* @__PURE__ */ T(E, {
 					treatment: "glass",
 					className: "overflow-hidden p-0",
-					children: [/* @__PURE__ */ C(o, {
-						icon: l(E.category, 48),
-						seed: E.id,
-						alt: E.name,
+					children: [/* @__PURE__ */ w(o, {
+						icon: l(D.category, 48),
+						seed: D.id,
+						alt: D.name,
 						className: "aspect-[4/5] w-full"
-					}), E.description && /* @__PURE__ */ C("div", {
+					}), D.description && /* @__PURE__ */ w("div", {
 						className: "p-6",
-						children: /* @__PURE__ */ C("p", {
+						children: /* @__PURE__ */ w("p", {
 							className: "text-sm leading-relaxed text-text-secondary",
-							children: E.description
+							children: D.description
 						})
 					})]
 				})
-			}), /* @__PURE__ */ w("div", {
+			}), /* @__PURE__ */ T("div", {
 				className: "space-y-4",
-				children: [/* @__PURE__ */ w(T, {
+				children: [/* @__PURE__ */ T(E, {
 					treatment: "glass",
 					className: "space-y-5 p-6",
 					children: [
-						/* @__PURE__ */ w("div", { children: [
-							/* @__PURE__ */ w("p", {
+						/* @__PURE__ */ T("div", { children: [
+							/* @__PURE__ */ T("p", {
 								className: "inline-flex items-center gap-1.5 text-xs font-medium text-accent-primary",
-								children: [/* @__PURE__ */ C(S, { className: "h-3.5 w-3.5" }), d("coolandlovely.storePiece.fromStore", "Listed in the Burdenoff store")]
+								children: [/* @__PURE__ */ w(C, { className: "h-3.5 w-3.5" }), d("coolandlovely.storePiece.fromStore", "Listed in the Burdenoff store")]
 							}),
-							/* @__PURE__ */ C("h2", {
+							/* @__PURE__ */ w("h2", {
 								className: "mt-2 text-2xl font-semibold leading-tight text-text-primary",
-								children: E.name
+								children: D.name
 							}),
-							/* @__PURE__ */ w("p", {
+							/* @__PURE__ */ T("p", {
 								className: "mt-1 text-sm font-medium text-text-secondary",
-								children: [E.brandName, /* @__PURE__ */ w("span", {
+								children: [D.brandName, /* @__PURE__ */ T("span", {
 									className: "ml-1 text-text-tertiary",
-									children: ["@", E.brandHandle]
+									children: ["@", D.brandHandle]
 								})]
 							}),
-							/* @__PURE__ */ w("p", {
+							/* @__PURE__ */ T("p", {
 								className: "mt-3 text-3xl font-bold text-text-primary tabular-nums",
-								children: [s(E.price, E.currency), /* @__PURE__ */ C("span", {
+								children: [s(D.price, D.currency), /* @__PURE__ */ w("span", {
 									className: "ml-2 text-base font-medium text-text-secondary",
-									children: E.currency
+									children: D.currency
 								})]
 							})
 						] }),
-						E.colours.length > 0 && /* @__PURE__ */ C(p, {
-							colours: E.colours,
+						D.colours.length > 0 && /* @__PURE__ */ w(p, {
+							colours: D.colours,
 							max: 12
 						}),
-						/* @__PURE__ */ C("div", {
+						/* @__PURE__ */ w("div", {
 							className: "border-t border-border-seam pt-5",
-							children: /* @__PURE__ */ C(j, {
-								piece: E,
-								onCheckout: b
+							children: /* @__PURE__ */ w(M, {
+								piece: D,
+								onCheckout: x
 							})
 						}),
-						E.materials.length > 0 && /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
+						D.materials.length > 0 && /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
 							className: "mb-1 text-xs font-medium uppercase tracking-wide text-text-secondary",
 							children: d("coolandlovely.storePiece.materials", "Materials")
-						}), /* @__PURE__ */ C("p", {
+						}), /* @__PURE__ */ w("p", {
 							className: "text-sm text-text-primary",
-							children: E.materials.join(", ")
+							children: D.materials.join(", ")
 						})] }),
-						E.tags.length > 0 && /* @__PURE__ */ C(f, {
-							tags: E.tags,
+						D.tags.length > 0 && /* @__PURE__ */ w(f, {
+							tags: D.tags,
 							max: 12,
 							tone: "accent"
 						})
 					]
-				}), /* @__PURE__ */ w(T, {
+				}), /* @__PURE__ */ T(E, {
 					treatment: "plain",
 					className: "p-5",
 					children: [
-						/* @__PURE__ */ C("h3", {
+						/* @__PURE__ */ w("h3", {
 							className: "mb-3 text-sm font-semibold text-text-primary",
 							children: d("coolandlovely.storePiece.details", "Details")
 						}),
-						/* @__PURE__ */ w("dl", {
+						/* @__PURE__ */ T("dl", {
 							className: "space-y-2 text-sm",
-							children: [/* @__PURE__ */ w("div", {
+							children: [/* @__PURE__ */ T("div", {
 								className: "flex justify-between gap-2",
-								children: [/* @__PURE__ */ C("dt", {
+								children: [/* @__PURE__ */ w("dt", {
 									className: "text-text-secondary",
 									children: d("coolandlovely.storePiece.category", "Category")
-								}), /* @__PURE__ */ C("dd", {
+								}), /* @__PURE__ */ w("dd", {
 									className: "text-text-primary",
-									children: c(E.category)
+									children: c(D.category)
 								})]
-							}), /* @__PURE__ */ w("div", {
+							}), /* @__PURE__ */ T("div", {
 								className: "flex justify-between gap-2",
-								children: [/* @__PURE__ */ C("dt", {
+								children: [/* @__PURE__ */ w("dt", {
 									className: "text-text-secondary",
 									children: "SKU"
-								}), /* @__PURE__ */ C("dd", {
+								}), /* @__PURE__ */ w("dd", {
 									className: "text-text-primary",
-									children: E.sku ?? "—"
+									children: D.sku ?? "—"
 								})]
 							})]
 						}),
-						/* @__PURE__ */ C("p", {
+						/* @__PURE__ */ w("p", {
 							className: "mt-3 text-xs text-text-secondary",
-							children: d("coolandlovely.storePiece.soldBy", "Sold and shipped by {{brand}}. Your order appears in My Orders.", { brand: E.brandName })
+							children: d("coolandlovely.storePiece.soldBy", "Sold and shipped by {{brand}}. Your order appears in My Orders.", { brand: D.brandName })
 						})
 					]
 				})]
 			})]
-		})
+		}), /* @__PURE__ */ w("div", {
+			className: "mt-6",
+			children: /* @__PURE__ */ w(v, {
+				styleItemId: D.id,
+				currency: D.currency
+			}, D.id)
+		})]
 	});
 };
 //#endregion
-export { N as StoreListedPieceView };
+export { P as StoreListedPieceView };
 
 //# sourceMappingURL=StoreListedPieceView.js.map

package/dist/coolandlovely/pages/items/StoreListedPieceView.js.map

@@ -1 +1 @@
-{"version":3,"file":"StoreListedPieceView.js","names":[],"sources":["../../../../src/coolandlovely/pages/items/StoreListedPieceView.tsx"],"sourcesContent":["/**\n * Store-listed piece view (BOFF-10017)\n * @module coolandlovely/pages/items\n *\n * What a shopper sees when they follow a Burdenoff store listing (\"View on CoolAndLovely\") to a\n * piece that belongs to a brand outside their workspace. The workspace catalogue has no such\n * piece, so the page falls back to `cooStoreListedPiece` (product facts only, readable from any\n * workspace) and lets the shopper buy it directly with `cooBuyStoreListedPiece`. The order is\n * held by the brand, paid through the provider global-billing chose, and settled only once the\n * backend re-reads billing's record; the shopper follows it from My Orders.\n */\n\nimport { type FC, useState } from 'react';\nimport { ArrowLeft, Loader2, ShoppingBag, Store } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\n\nimport { ColourSwatchRow } from '../../components/ColourSwatchRow';\nimport { TextAreaField, TextField } from '../../components/Field';\nimport { PageLayout } from '../../components/PageLayout';\nimport { PayForOrder } from '../../components/PayForOrder';\nimport { ErrorView, LoadingView } from '../../components/StateViews';\nimport { TagList } from '../../components/TagList';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useTr } from '../../hooks';\nimport {\n  useBuyStoreListedPiece,\n  useStoreListedPiece,\n  useSyncOrderPayment,\n} from '../../hooks/useCommerceApi';\nimport type { CooOrderCheckout, CooStoreListedPiece } from '../../types';\nimport { cn } from '../../utils/cn';\nimport { formatPrice, titleCase } from '../../utils/formatters';\nimport { categoryIcon } from '../../utils/icons';\n\nconst MAX_QUANTITY = 10;\n/** Stock at or below this is shown to the shopper as \"Only N left\". */\nconst LOW_STOCK = 5;\n\nconst chip = (selected: boolean) =>\n  cn(\n    'inline-flex min-w-9 items-center justify-center rounded-full border px-3 py-1 text-sm font-medium transition-colors disabled:opacity-40 disabled:line-through',\n    selected\n      ? 'border-action-primary-bg bg-action-primary-bg text-action-primary-text'\n      : 'border-border-seam text-text-primary hover:bg-bg-sunken'\n  );\n\nconst primaryButton =\n  'inline-flex w-full items-center justify-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2.5 text-sm font-semibold text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50';\n\n/**\n * Units left of a (possibly partial) size/colour choice while the piece tracks stock; null when\n * it does not. The service checks the stock again when the order is placed.\n */\nfunction unitsLeft(\n  piece: CooStoreListedPiece,\n  size: string | null,\n  colour: string | null\n): number | null {\n  if (!piece.trackInventory) return null;\n  return piece.variants\n    .filter(\n      (variant) =>\n        (size === null || (variant.size ?? '') === size) &&\n        (colour === null || (variant.colour ?? '') === colour)\n    )\n    .reduce((sum, variant) => sum + variant.available, 0);\n}\n\n/** Size/colour/quantity, shipping details and \"Buy now\" for a store-listed piece. */\nconst BuyListedPiecePanel: FC<{\n  piece: CooStoreListedPiece;\n  onCheckout: (checkout: CooOrderCheckout) => void;\n}> = ({ piece, onCheckout }) => {\n  const tr = useTr();\n  const buy = useBuyStoreListedPiece();\n  const [size, setSize] = useState<string | null>(\n    piece.sizes.length === 1 ? (piece.sizes[0] ?? null) : null\n  );\n  const [colour, setColour] = useState<string | null>(\n    piece.colours.length === 1 ? (piece.colours[0] ?? null) : null\n  );\n  const [quantity, setQuantity] = useState(1);\n  const [shippingName, setShippingName] = useState('');\n  const [shippingAddress, setShippingAddress] = useState('');\n  const [buyerNote, setBuyerNote] = useState('');\n\n  if (!piece.inStock) {\n    return (\n      <p className=\"rounded-lg border border-border-seam bg-bg-sunken p-3 text-sm text-text-secondary\">\n        {tr('coolandlovely.storePiece.soldOut', 'This piece is sold out right now.')}\n      </p>\n    );\n  }\n\n  const needsSize = piece.sizes.length > 0 && !size;\n  const needsColour = piece.colours.length > 0 && !colour;\n  const left = needsSize || needsColour ? null : unitsLeft(piece, size ?? '', colour ?? '');\n  const soldOut = left !== null && left <= 0;\n  const maxQuantity = left === null ? MAX_QUANTITY : Math.max(1, Math.min(MAX_QUANTITY, left));\n  const canSubmit =\n    !needsSize &&\n    !needsColour &&\n    !soldOut &&\n    shippingName.trim() !== '' &&\n    shippingAddress.trim() !== '';\n\n  const submit = () => {\n    buy.mutate(\n      {\n        styleItemId: piece.id,\n        quantity,\n        size,\n        colour,\n        shippingName: shippingName.trim(),\n        shippingAddress: shippingAddress.trim(),\n        buyerNote: buyerNote.trim() || null,\n      },\n      { onSuccess: onCheckout }\n    );\n  };\n\n  return (\n    <div className=\"space-y-4\" data-testid=\"store-buy-panel\">\n      {piece.sizes.length > 0 && (\n        <div>\n          <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n            {tr('coolandlovely.cart.chooseSize', 'Choose a size')}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {piece.sizes.map((option) => (\n              <button\n                key={option}\n                type=\"button\"\n                aria-pressed={size === option}\n                disabled={unitsLeft(piece, option, colour) === 0}\n                onClick={() => {\n                  setSize(option);\n                  setQuantity(1);\n                }}\n                className={chip(size === option)}\n              >\n                {option}\n              </button>\n            ))}\n          </div>\n        </div>\n      )}\n      {piece.colours.length > 0 && (\n        <div>\n          <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n            {tr('coolandlovely.cart.chooseColour', 'Choose a colour')}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {piece.colours.map((option) => (\n              <button\n                key={option}\n                type=\"button\"\n                aria-pressed={colour === option}\n                disabled={unitsLeft(piece, size, option) === 0}\n                onClick={() => {\n                  setColour(option);\n                  setQuantity(1);\n                }}\n                className={chip(colour === option)}\n              >\n                {option}\n              </button>\n            ))}\n          </div>\n        </div>\n      )}\n      <div className=\"flex items-center gap-3\">\n        <label htmlFor=\"coo-store-quantity\" className=\"text-sm text-text-secondary\">\n          {tr('coolandlovely.cart.quantity', 'Quantity')}\n        </label>\n        <select\n          id=\"coo-store-quantity\"\n          value={quantity}\n          onChange={(event) => setQuantity(Number(event.target.value))}\n          className=\"rounded-lg border border-border-seam bg-bg-surface px-2 py-1.5 text-sm text-text-primary\"\n        >\n          {Array.from({ length: maxQuantity }, (_, index) => index + 1).map((value) => (\n            <option key={value} value={value}>\n              {value}\n            </option>\n          ))}\n        </select>\n      </div>\n      {left !== null && (\n        <p\n          data-testid=\"store-stock-left\"\n          className={cn(\n            'text-sm font-medium',\n            soldOut || left <= LOW_STOCK ? 'text-status-warning-text' : 'text-text-secondary'\n          )}\n        >\n          {soldOut\n            ? tr('coolandlovely.cart.soldOut', 'Sold out in this size and colour')\n            : left <= LOW_STOCK\n              ? tr('coolandlovely.cart.onlyLeft', 'Only {{count}} left', { count: left })\n              : tr('coolandlovely.cart.inStock', 'In stock')}\n        </p>\n      )}\n      <div className=\"space-y-3 border-t border-border-seam pt-4\">\n        <TextField\n          id=\"coo-store-shipping-name\"\n          label={tr('coolandlovely.checkout.shippingName', 'Full name')}\n          value={shippingName}\n          onChange={setShippingName}\n          required\n        />\n        <TextAreaField\n          id=\"coo-store-shipping-address\"\n          label={tr('coolandlovely.checkout.shippingAddress', 'Shipping address')}\n          value={shippingAddress}\n          onChange={setShippingAddress}\n          rows={3}\n          required\n        />\n        <TextField\n          id=\"coo-store-buyer-note\"\n          label={tr('coolandlovely.checkout.note', 'Note for the brand (optional)')}\n          value={buyerNote}\n          onChange={setBuyerNote}\n        />\n      </div>\n      <p className=\"text-xs text-text-secondary\">\n        {tr('coolandlovely.cart.taxNote', 'Tax is calculated when you place the order.')}\n      </p>\n      {buy.error && <p className=\"text-sm text-status-error-text\">{buy.error.message}</p>}\n      <button\n        type=\"button\"\n        disabled={!canSubmit || buy.isPending}\n        onClick={submit}\n        className={primaryButton}\n      >\n        {buy.isPending ? (\n          <Loader2 className=\"h-4 w-4 animate-spin\" />\n        ) : (\n          <ShoppingBag className=\"h-4 w-4\" />\n        )}\n        {tr('coolandlovely.storePiece.buyNow', 'Buy now · {{amount}}', {\n          amount: formatPrice(piece.price * quantity, piece.currency),\n        })}\n      </button>\n    </div>\n  );\n};\n\n/** Pay for the order the store purchase created. */\nconst PayForStorePurchase: FC<{ session: CooOrderCheckout }> = ({ session }) => {\n  const tr = useTr();\n  const { navigateTo } = useCoolAndLovely();\n  const sync = useSyncOrderPayment();\n  const settle = async () => {\n    await sync.mutateAsync(session.order.id).catch(() => undefined);\n    navigateTo(`/orders/${session.order.id}`);\n  };\n  return (\n    <PageLayout\n      title={tr('coolandlovely.checkout.payTitle', 'Pay for your order')}\n      description={session.order.orderNumber}\n    >\n      <div className=\"mx-auto max-w-lg space-y-4\">\n        <GlassCard treatment=\"glass\" className=\"space-y-4 p-6\">\n          <dl className=\"space-y-2 text-sm\">\n            <div className=\"flex justify-between\">\n              <dt className=\"text-text-secondary\">\n                {tr('coolandlovely.checkout.subtotal', 'Subtotal')}\n              </dt>\n              <dd className=\"tabular-nums text-text-primary\">\n                {formatPrice(session.subtotal, session.currency)}\n              </dd>\n            </div>\n            <div className=\"flex justify-between\">\n              <dt className=\"text-text-secondary\">{tr('coolandlovely.checkout.tax', 'Tax')}</dt>\n              <dd className=\"tabular-nums text-text-primary\">\n                {formatPrice(session.taxAmount, session.currency)}\n              </dd>\n            </div>\n            <div className=\"flex justify-between border-t border-border-seam pt-2 text-base font-semibold\">\n              <dt className=\"text-text-primary\">{tr('coolandlovely.checkout.total', 'Total')}</dt>\n              <dd className=\"tabular-nums text-text-primary\" data-testid=\"store-checkout-total\">\n                {formatPrice(session.total, session.currency)}\n              </dd>\n            </div>\n          </dl>\n          <PayForOrder checkout={session} onSettle={settle} />\n          <button\n            type=\"button\"\n            onClick={() => navigateTo(`/orders/${session.order.id}`)}\n            className=\"w-full text-center text-sm font-medium text-text-secondary hover:underline\"\n          >\n            {tr('coolandlovely.checkout.payLater', 'Pay later from My Orders')}\n          </button>\n        </GlassCard>\n      </div>\n    </PageLayout>\n  );\n};\n\n/**\n * The fallback piece page for a store shopper. Renders \"Item not found\" when the store does not\n * list the piece either (drafts, retired pieces, pieces of unpublished brands).\n */\nexport const StoreListedPieceView: FC<{ itemId: string | undefined; onRetry: () => void }> = ({\n  itemId,\n  onRetry,\n}) => {\n  const tr = useTr();\n  const { navigateTo } = useCoolAndLovely();\n  const query = useStoreListedPiece(itemId, true);\n  const [session, setSession] = useState<CooOrderCheckout | null>(null);\n  const pageTitle = tr('coolandlovely.storePiece.pageTitle', 'Style item');\n\n  if (session) return <PayForStorePurchase session={session} />;\n\n  if (query.isLoading) {\n    return (\n      <PageLayout title={pageTitle}>\n        <LoadingView label={tr('coolandlovely.storePiece.loading', 'Loading item…')} />\n      </PageLayout>\n    );\n  }\n\n  const piece = query.data;\n  if (query.isError || !piece) {\n    return (\n      <PageLayout title={pageTitle}>\n        <ErrorView\n          title={tr('coolandlovely.storePiece.notFound', 'Item not found')}\n          onRetry={() => {\n            onRetry();\n            void query.refetch();\n          }}\n        />\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title={piece.name}\n      description={piece.brandName}\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo('/discover')}\n          className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n        >\n          <ArrowLeft className=\"h-4 w-4\" /> {tr('coolandlovely.storePiece.back', 'Discover')}\n        </button>\n      }\n    >\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\" data-testid=\"store-listed-piece\">\n        <div className=\"lg:col-span-2\">\n          <GlassCard treatment=\"glass\" className=\"overflow-hidden p-0\">\n            <Thumbnail\n              icon={categoryIcon(piece.category, 48)}\n              seed={piece.id}\n              alt={piece.name}\n              className=\"aspect-[4/5] w-full\"\n            />\n            {piece.description && (\n              <div className=\"p-6\">\n                <p className=\"text-sm leading-relaxed text-text-secondary\">{piece.description}</p>\n              </div>\n            )}\n          </GlassCard>\n        </div>\n\n        <div className=\"space-y-4\">\n          <GlassCard treatment=\"glass\" className=\"space-y-5 p-6\">\n            <div>\n              <p className=\"inline-flex items-center gap-1.5 text-xs font-medium text-accent-primary\">\n                <Store className=\"h-3.5 w-3.5\" />\n                {tr('coolandlovely.storePiece.fromStore', 'Listed in the Burdenoff store')}\n              </p>\n              <h2 className=\"mt-2 text-2xl font-semibold leading-tight text-text-primary\">\n                {piece.name}\n              </h2>\n              <p className=\"mt-1 text-sm font-medium text-text-secondary\">\n                {piece.brandName}\n                <span className=\"ml-1 text-text-tertiary\">@{piece.brandHandle}</span>\n              </p>\n              <p className=\"mt-3 text-3xl font-bold text-text-primary tabular-nums\">\n                {formatPrice(piece.price, piece.currency)}\n                <span className=\"ml-2 text-base font-medium text-text-secondary\">\n                  {piece.currency}\n                </span>\n              </p>\n            </div>\n            {piece.colours.length > 0 && <ColourSwatchRow colours={piece.colours} max={12} />}\n            <div className=\"border-t border-border-seam pt-5\">\n              <BuyListedPiecePanel piece={piece} onCheckout={setSession} />\n            </div>\n            {piece.materials.length > 0 && (\n              <div>\n                <p className=\"mb-1 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n                  {tr('coolandlovely.storePiece.materials', 'Materials')}\n                </p>\n                <p className=\"text-sm text-text-primary\">{piece.materials.join(', ')}</p>\n              </div>\n            )}\n            {piece.tags.length > 0 && <TagList tags={piece.tags} max={12} tone=\"accent\" />}\n          </GlassCard>\n\n          <GlassCard treatment=\"plain\" className=\"p-5\">\n            <h3 className=\"mb-3 text-sm font-semibold text-text-primary\">\n              {tr('coolandlovely.storePiece.details', 'Details')}\n            </h3>\n            <dl className=\"space-y-2 text-sm\">\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">\n                  {tr('coolandlovely.storePiece.category', 'Category')}\n                </dt>\n                <dd className=\"text-text-primary\">{titleCase(piece.category)}</dd>\n              </div>\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">SKU</dt>\n                <dd className=\"text-text-primary\">{piece.sku ?? '—'}</dd>\n              </div>\n            </dl>\n            <p className=\"mt-3 text-xs text-text-secondary\">\n              {tr(\n                'coolandlovely.storePiece.soldBy',\n                'Sold and shipped by {{brand}}. Your order appears in My Orders.',\n                { brand: piece.brandName }\n              )}\n            </p>\n          </GlassCard>\n        </div>\n      </div>\n    </PageLayout>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"StoreListedPieceView.js","names":[],"sources":["../../../../src/coolandlovely/pages/items/StoreListedPieceView.tsx"],"sourcesContent":["/**\n * Store-listed piece view (BOFF-10017)\n * @module coolandlovely/pages/items\n *\n * What a shopper sees when they follow a Burdenoff store listing (\"View on CoolAndLovely\") to a\n * piece that belongs to a brand outside their workspace. The workspace catalogue has no such\n * piece, so the page falls back to `cooStoreListedPiece` (product facts only, readable from any\n * workspace) and lets the shopper buy it directly with `cooBuyStoreListedPiece`. The order is\n * held by the brand, paid through the provider global-billing chose, and settled only once the\n * backend re-reads billing's record; the shopper follows it from My Orders.\n */\n\nimport { PricePanel } from '../../components/prices/PricePanel';\nimport { type FC, useState } from 'react';\nimport { ArrowLeft, Loader2, ShoppingBag, Store } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\n\nimport { ColourSwatchRow } from '../../components/ColourSwatchRow';\nimport { TextAreaField, TextField } from '../../components/Field';\nimport { PageLayout } from '../../components/PageLayout';\nimport { PayForOrder } from '../../components/PayForOrder';\nimport { ErrorView, LoadingView } from '../../components/StateViews';\nimport { TagList } from '../../components/TagList';\nimport { Thumbnail } from '../../components/Thumbnail';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useTr } from '../../hooks';\nimport {\n  useBuyStoreListedPiece,\n  useStoreListedPiece,\n  useSyncOrderPayment,\n} from '../../hooks/useCommerceApi';\nimport type { CooOrderCheckout, CooStoreListedPiece } from '../../types';\nimport { cn } from '../../utils/cn';\nimport { formatPrice, titleCase } from '../../utils/formatters';\nimport { categoryIcon } from '../../utils/icons';\n\nconst MAX_QUANTITY = 10;\n/** Stock at or below this is shown to the shopper as \"Only N left\". */\nconst LOW_STOCK = 5;\n\nconst chip = (selected: boolean) =>\n  cn(\n    'inline-flex min-w-9 items-center justify-center rounded-full border px-3 py-1 text-sm font-medium transition-colors disabled:opacity-40 disabled:line-through',\n    selected\n      ? 'border-action-primary-bg bg-action-primary-bg text-action-primary-text'\n      : 'border-border-seam text-text-primary hover:bg-bg-sunken'\n  );\n\nconst primaryButton =\n  'inline-flex w-full items-center justify-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2.5 text-sm font-semibold text-action-primary-text transition-colors hover:bg-action-primary-bg/90 disabled:opacity-50';\n\n/**\n * Units left of a (possibly partial) size/colour choice while the piece tracks stock; null when\n * it does not. The service checks the stock again when the order is placed.\n */\nfunction unitsLeft(\n  piece: CooStoreListedPiece,\n  size: string | null,\n  colour: string | null\n): number | null {\n  if (!piece.trackInventory) return null;\n  return piece.variants\n    .filter(\n      (variant) =>\n        (size === null || (variant.size ?? '') === size) &&\n        (colour === null || (variant.colour ?? '') === colour)\n    )\n    .reduce((sum, variant) => sum + variant.available, 0);\n}\n\n/** Size/colour/quantity, shipping details and \"Buy now\" for a store-listed piece. */\nconst BuyListedPiecePanel: FC<{\n  piece: CooStoreListedPiece;\n  onCheckout: (checkout: CooOrderCheckout) => void;\n}> = ({ piece, onCheckout }) => {\n  const tr = useTr();\n  const buy = useBuyStoreListedPiece();\n  const [size, setSize] = useState<string | null>(\n    piece.sizes.length === 1 ? (piece.sizes[0] ?? null) : null\n  );\n  const [colour, setColour] = useState<string | null>(\n    piece.colours.length === 1 ? (piece.colours[0] ?? null) : null\n  );\n  const [quantity, setQuantity] = useState(1);\n  const [shippingName, setShippingName] = useState('');\n  const [shippingAddress, setShippingAddress] = useState('');\n  const [buyerNote, setBuyerNote] = useState('');\n\n  if (!piece.inStock) {\n    return (\n      <p className=\"rounded-lg border border-border-seam bg-bg-sunken p-3 text-sm text-text-secondary\">\n        {tr('coolandlovely.storePiece.soldOut', 'This piece is sold out right now.')}\n      </p>\n    );\n  }\n\n  const needsSize = piece.sizes.length > 0 && !size;\n  const needsColour = piece.colours.length > 0 && !colour;\n  const left = needsSize || needsColour ? null : unitsLeft(piece, size ?? '', colour ?? '');\n  const soldOut = left !== null && left <= 0;\n  const maxQuantity = left === null ? MAX_QUANTITY : Math.max(1, Math.min(MAX_QUANTITY, left));\n  const canSubmit =\n    !needsSize &&\n    !needsColour &&\n    !soldOut &&\n    shippingName.trim() !== '' &&\n    shippingAddress.trim() !== '';\n\n  const submit = () => {\n    buy.mutate(\n      {\n        styleItemId: piece.id,\n        quantity,\n        size,\n        colour,\n        shippingName: shippingName.trim(),\n        shippingAddress: shippingAddress.trim(),\n        buyerNote: buyerNote.trim() || null,\n      },\n      { onSuccess: onCheckout }\n    );\n  };\n\n  return (\n    <div className=\"space-y-4\" data-testid=\"store-buy-panel\">\n      {piece.sizes.length > 0 && (\n        <div>\n          <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n            {tr('coolandlovely.cart.chooseSize', 'Choose a size')}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {piece.sizes.map((option) => (\n              <button\n                key={option}\n                type=\"button\"\n                aria-pressed={size === option}\n                disabled={unitsLeft(piece, option, colour) === 0}\n                onClick={() => {\n                  setSize(option);\n                  setQuantity(1);\n                }}\n                className={chip(size === option)}\n              >\n                {option}\n              </button>\n            ))}\n          </div>\n        </div>\n      )}\n      {piece.colours.length > 0 && (\n        <div>\n          <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n            {tr('coolandlovely.cart.chooseColour', 'Choose a colour')}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {piece.colours.map((option) => (\n              <button\n                key={option}\n                type=\"button\"\n                aria-pressed={colour === option}\n                disabled={unitsLeft(piece, size, option) === 0}\n                onClick={() => {\n                  setColour(option);\n                  setQuantity(1);\n                }}\n                className={chip(colour === option)}\n              >\n                {option}\n              </button>\n            ))}\n          </div>\n        </div>\n      )}\n      <div className=\"flex items-center gap-3\">\n        <label htmlFor=\"coo-store-quantity\" className=\"text-sm text-text-secondary\">\n          {tr('coolandlovely.cart.quantity', 'Quantity')}\n        </label>\n        <select\n          id=\"coo-store-quantity\"\n          value={quantity}\n          onChange={(event) => setQuantity(Number(event.target.value))}\n          className=\"rounded-lg border border-border-seam bg-bg-surface px-2 py-1.5 text-sm text-text-primary\"\n        >\n          {Array.from({ length: maxQuantity }, (_, index) => index + 1).map((value) => (\n            <option key={value} value={value}>\n              {value}\n            </option>\n          ))}\n        </select>\n      </div>\n      {left !== null && (\n        <p\n          data-testid=\"store-stock-left\"\n          className={cn(\n            'text-sm font-medium',\n            soldOut || left <= LOW_STOCK ? 'text-status-warning-text' : 'text-text-secondary'\n          )}\n        >\n          {soldOut\n            ? tr('coolandlovely.cart.soldOut', 'Sold out in this size and colour')\n            : left <= LOW_STOCK\n              ? tr('coolandlovely.cart.onlyLeft', 'Only {{count}} left', { count: left })\n              : tr('coolandlovely.cart.inStock', 'In stock')}\n        </p>\n      )}\n      <div className=\"space-y-3 border-t border-border-seam pt-4\">\n        <TextField\n          id=\"coo-store-shipping-name\"\n          label={tr('coolandlovely.checkout.shippingName', 'Full name')}\n          value={shippingName}\n          onChange={setShippingName}\n          required\n        />\n        <TextAreaField\n          id=\"coo-store-shipping-address\"\n          label={tr('coolandlovely.checkout.shippingAddress', 'Shipping address')}\n          value={shippingAddress}\n          onChange={setShippingAddress}\n          rows={3}\n          required\n        />\n        <TextField\n          id=\"coo-store-buyer-note\"\n          label={tr('coolandlovely.checkout.note', 'Note for the brand (optional)')}\n          value={buyerNote}\n          onChange={setBuyerNote}\n        />\n      </div>\n      <p className=\"text-xs text-text-secondary\">\n        {tr('coolandlovely.cart.taxNote', 'Tax is calculated when you place the order.')}\n      </p>\n      {buy.error && <p className=\"text-sm text-status-error-text\">{buy.error.message}</p>}\n      <button\n        type=\"button\"\n        disabled={!canSubmit || buy.isPending}\n        onClick={submit}\n        className={primaryButton}\n      >\n        {buy.isPending ? (\n          <Loader2 className=\"h-4 w-4 animate-spin\" />\n        ) : (\n          <ShoppingBag className=\"h-4 w-4\" />\n        )}\n        {tr('coolandlovely.storePiece.buyNow', 'Buy now · {{amount}}', {\n          amount: formatPrice(piece.price * quantity, piece.currency),\n        })}\n      </button>\n    </div>\n  );\n};\n\n/** Pay for the order the store purchase created. */\nconst PayForStorePurchase: FC<{ session: CooOrderCheckout }> = ({ session }) => {\n  const tr = useTr();\n  const { navigateTo } = useCoolAndLovely();\n  const sync = useSyncOrderPayment();\n  const settle = async () => {\n    await sync.mutateAsync(session.order.id).catch(() => undefined);\n    navigateTo(`/orders/${session.order.id}`);\n  };\n  return (\n    <PageLayout\n      title={tr('coolandlovely.checkout.payTitle', 'Pay for your order')}\n      description={session.order.orderNumber}\n    >\n      <div className=\"mx-auto max-w-lg space-y-4\">\n        <GlassCard treatment=\"glass\" className=\"space-y-4 p-6\">\n          <dl className=\"space-y-2 text-sm\">\n            <div className=\"flex justify-between\">\n              <dt className=\"text-text-secondary\">\n                {tr('coolandlovely.checkout.subtotal', 'Subtotal')}\n              </dt>\n              <dd className=\"tabular-nums text-text-primary\">\n                {formatPrice(session.subtotal, session.currency)}\n              </dd>\n            </div>\n            <div className=\"flex justify-between\">\n              <dt className=\"text-text-secondary\">{tr('coolandlovely.checkout.tax', 'Tax')}</dt>\n              <dd className=\"tabular-nums text-text-primary\">\n                {formatPrice(session.taxAmount, session.currency)}\n              </dd>\n            </div>\n            <div className=\"flex justify-between border-t border-border-seam pt-2 text-base font-semibold\">\n              <dt className=\"text-text-primary\">{tr('coolandlovely.checkout.total', 'Total')}</dt>\n              <dd className=\"tabular-nums text-text-primary\" data-testid=\"store-checkout-total\">\n                {formatPrice(session.total, session.currency)}\n              </dd>\n            </div>\n          </dl>\n          <PayForOrder checkout={session} onSettle={settle} />\n          <button\n            type=\"button\"\n            onClick={() => navigateTo(`/orders/${session.order.id}`)}\n            className=\"w-full text-center text-sm font-medium text-text-secondary hover:underline\"\n          >\n            {tr('coolandlovely.checkout.payLater', 'Pay later from My Orders')}\n          </button>\n        </GlassCard>\n      </div>\n    </PageLayout>\n  );\n};\n\n/**\n * The fallback piece page for a store shopper. Renders \"Item not found\" when the store does not\n * list the piece either (drafts, retired pieces, pieces of unpublished brands).\n */\nexport const StoreListedPieceView: FC<{ itemId: string | undefined; onRetry: () => void }> = ({\n  itemId,\n  onRetry,\n}) => {\n  const tr = useTr();\n  const { navigateTo } = useCoolAndLovely();\n  const query = useStoreListedPiece(itemId, true);\n  const [session, setSession] = useState<CooOrderCheckout | null>(null);\n  const pageTitle = tr('coolandlovely.storePiece.pageTitle', 'Style item');\n\n  if (session) return <PayForStorePurchase session={session} />;\n\n  if (query.isLoading) {\n    return (\n      <PageLayout title={pageTitle}>\n        <LoadingView label={tr('coolandlovely.storePiece.loading', 'Loading item…')} />\n      </PageLayout>\n    );\n  }\n\n  const piece = query.data;\n  if (query.isError || !piece) {\n    return (\n      <PageLayout title={pageTitle}>\n        <ErrorView\n          title={tr('coolandlovely.storePiece.notFound', 'Item not found')}\n          onRetry={() => {\n            onRetry();\n            void query.refetch();\n          }}\n        />\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title={piece.name}\n      description={piece.brandName}\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo('/discover')}\n          className=\"inline-flex items-center gap-1.5 rounded-lg border border-border-seam px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-bg-sunken\"\n        >\n          <ArrowLeft className=\"h-4 w-4\" /> {tr('coolandlovely.storePiece.back', 'Discover')}\n        </button>\n      }\n    >\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3\" data-testid=\"store-listed-piece\">\n        <div className=\"lg:col-span-2\">\n          <GlassCard treatment=\"glass\" className=\"overflow-hidden p-0\">\n            <Thumbnail\n              icon={categoryIcon(piece.category, 48)}\n              seed={piece.id}\n              alt={piece.name}\n              className=\"aspect-[4/5] w-full\"\n            />\n            {piece.description && (\n              <div className=\"p-6\">\n                <p className=\"text-sm leading-relaxed text-text-secondary\">{piece.description}</p>\n              </div>\n            )}\n          </GlassCard>\n        </div>\n\n        <div className=\"space-y-4\">\n          <GlassCard treatment=\"glass\" className=\"space-y-5 p-6\">\n            <div>\n              <p className=\"inline-flex items-center gap-1.5 text-xs font-medium text-accent-primary\">\n                <Store className=\"h-3.5 w-3.5\" />\n                {tr('coolandlovely.storePiece.fromStore', 'Listed in the Burdenoff store')}\n              </p>\n              <h2 className=\"mt-2 text-2xl font-semibold leading-tight text-text-primary\">\n                {piece.name}\n              </h2>\n              <p className=\"mt-1 text-sm font-medium text-text-secondary\">\n                {piece.brandName}\n                <span className=\"ml-1 text-text-tertiary\">@{piece.brandHandle}</span>\n              </p>\n              <p className=\"mt-3 text-3xl font-bold text-text-primary tabular-nums\">\n                {formatPrice(piece.price, piece.currency)}\n                <span className=\"ml-2 text-base font-medium text-text-secondary\">\n                  {piece.currency}\n                </span>\n              </p>\n            </div>\n            {piece.colours.length > 0 && <ColourSwatchRow colours={piece.colours} max={12} />}\n            <div className=\"border-t border-border-seam pt-5\">\n              <BuyListedPiecePanel piece={piece} onCheckout={setSession} />\n            </div>\n            {piece.materials.length > 0 && (\n              <div>\n                <p className=\"mb-1 text-xs font-medium uppercase tracking-wide text-text-secondary\">\n                  {tr('coolandlovely.storePiece.materials', 'Materials')}\n                </p>\n                <p className=\"text-sm text-text-primary\">{piece.materials.join(', ')}</p>\n              </div>\n            )}\n            {piece.tags.length > 0 && <TagList tags={piece.tags} max={12} tone=\"accent\" />}\n          </GlassCard>\n\n          <GlassCard treatment=\"plain\" className=\"p-5\">\n            <h3 className=\"mb-3 text-sm font-semibold text-text-primary\">\n              {tr('coolandlovely.storePiece.details', 'Details')}\n            </h3>\n            <dl className=\"space-y-2 text-sm\">\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">\n                  {tr('coolandlovely.storePiece.category', 'Category')}\n                </dt>\n                <dd className=\"text-text-primary\">{titleCase(piece.category)}</dd>\n              </div>\n              <div className=\"flex justify-between gap-2\">\n                <dt className=\"text-text-secondary\">SKU</dt>\n                <dd className=\"text-text-primary\">{piece.sku ?? '—'}</dd>\n              </div>\n            </dl>\n            <p className=\"mt-3 text-xs text-text-secondary\">\n              {tr(\n                'coolandlovely.storePiece.soldBy',\n                'Sold and shipped by {{brand}}. Your order appears in My Orders.',\n                { brand: piece.brandName }\n              )}\n            </p>\n          </GlassCard>\n        </div>\n      </div>\n      <div className=\"mt-6\">\n        <PricePanel key={piece.id} styleItemId={piece.id} currency={piece.currency} />\n      </div>\n    </PageLayout>\n  );\n};\n"],"mappings":"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"}

package/dist/coolandlovely/pages/items/StyleItemDetailPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyleItemDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/items/StyleItemDetailPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AA0BH,wBAAgB,mBAAmB,gCA2QlC"}
+{"version":3,"file":"StyleItemDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/items/StyleItemDetailPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AA2BH,wBAAgB,mBAAmB,gCAkRlC"}