@burdenoff/microfe-coolandlovely 2026.1101.7 → 2026.1102.1

package/dist/coolandlovely/hooks/usePriceApi.js

@@ -0,0 +1,111 @@
+import { useCoolAndLovely as e } from "../context/CoolAndLovelyContext.js";
+import "../context/index.js";
+import { coolQuery as t } from "./useCoolAndLovelyApi.js";
+import { CooBestPricesDocument as n, CooMyPriceWatchDeliveriesDocument as r, CooMyPriceWatchesDocument as i, CooPriceDetailDocument as a, CooRemovePriceWatchDocument as o, CooSavePriceWatchDocument as s } from "../../generated/wspace-operations.js";
+import { useMutation as c, useQuery as l, useQueryClient as u } from "@tanstack/react-query";
+import { print as d } from "graphql";
+//#region src/coolandlovely/hooks/usePriceApi.ts
+function f() {
+	let { apiGatewayUrl: t, tenantId: n, organizationId: r, workspaceId: i, currentUser: a } = e();
+	return {
+		apiGatewayUrl: t,
+		key: [
+			"coolandlovely",
+			"prices",
+			t,
+			n,
+			r,
+			i,
+			a?.id
+		],
+		ready: !!(i && a?.id)
+	};
+}
+function p(e, r) {
+	let i = f(), a = [...new Set(e)].sort();
+	return l({
+		queryKey: [
+			...i.key,
+			"best",
+			r,
+			a
+		],
+		enabled: i.ready && a.length > 0 && a.length <= 100,
+		staleTime: 3e4,
+		queryFn: async ({ signal: e }) => (await t(d(n), {
+			styleItemIds: a,
+			currency: r
+		}, i.apiGatewayUrl, e)).cooBestPrices
+	});
+}
+function m(e, n, r, i, o) {
+	let s = f();
+	return l({
+		queryKey: [
+			...s.key,
+			"detail",
+			e,
+			n,
+			r,
+			i
+		],
+		enabled: s.ready && !!e && o,
+		staleTime: 3e4,
+		queryFn: ({ signal: o }) => t(d(a), {
+			styleItemId: e,
+			currency: n,
+			start: r,
+			end: i
+		}, s.apiGatewayUrl, o)
+	});
+}
+function h(e) {
+	let n = f();
+	return l({
+		queryKey: [
+			...n.key,
+			"watches",
+			e
+		],
+		enabled: n.ready,
+		queryFn: async ({ signal: r }) => (await t(d(i), { pagination: {
+			offset: e,
+			limit: 20
+		} }, n.apiGatewayUrl, r)).cooMyPriceAlerts
+	});
+}
+function g(e, n, i) {
+	let a = f();
+	return l({
+		queryKey: [
+			...a.key,
+			"receipts",
+			e,
+			n
+		],
+		enabled: a.ready && !!e && i,
+		queryFn: async ({ signal: i }) => (await t(d(r), {
+			alertId: e,
+			pagination: {
+				offset: n,
+				limit: 20
+			}
+		}, a.apiGatewayUrl, i)).cooMyPriceAlertDeliveries
+	});
+}
+function _() {
+	let e = f(), n = u();
+	return c({
+		mutationFn: async (n) => {
+			if (n.kind === "save") await t(d(s), { input: n.input }, e.apiGatewayUrl);
+			else if (!(await t(d(o), { id: n.id }, e.apiGatewayUrl)).cooDeletePriceAlert) throw Error("The price watch was not removed.");
+		},
+		onSuccess: async () => {
+			await Promise.all([n.invalidateQueries({ queryKey: [...e.key, "watches"] }), n.invalidateQueries({ queryKey: [...e.key, "receipts"] })]);
+		}
+	});
+}
+//#endregion
+export { p as useBestPrices, m as usePriceDetail, _ as usePriceWatchAction, g as usePriceWatchDeliveries, h as usePriceWatches };
+
+//# sourceMappingURL=usePriceApi.js.map

package/dist/coolandlovely/hooks/usePriceApi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePriceApi.js","names":[],"sources":["../../../src/coolandlovely/hooks/usePriceApi.ts"],"sourcesContent":["import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';\nimport { print } from 'graphql';\n\nimport {\n  CooBestPricesDocument,\n  CooMyPriceWatchesDocument,\n  CooMyPriceWatchDeliveriesDocument,\n  CooPriceDetailDocument,\n  CooRemovePriceWatchDocument,\n  CooSavePriceWatchDocument,\n} from '../../generated/wspace-operations';\nimport type {\n  CooBestPricesQuery,\n  CooMyPriceWatchesQuery,\n  CooMyPriceWatchDeliveriesQuery,\n  CooPriceDetailQuery,\n  CooRemovePriceWatchMutation,\n  CooSavePriceWatchMutation,\n} from '../../generated/wspace-operations';\nimport type { CooPriceAlertInput } from '../../generated/wspace-types';\nimport { useCoolAndLovely } from '../context';\nimport { coolQuery } from './useCoolAndLovelyApi';\n\nfunction usePriceScope() {\n  const { apiGatewayUrl, tenantId, organizationId, workspaceId, currentUser } = useCoolAndLovely();\n  return {\n    apiGatewayUrl,\n    key: [\n      'coolandlovely',\n      'prices',\n      apiGatewayUrl,\n      tenantId,\n      organizationId,\n      workspaceId,\n      currentUser?.id,\n    ],\n    ready: Boolean(workspaceId && currentUser?.id),\n  };\n}\n\n/** One request for the current card page; linked IDs only, never a per-card request burst. */\nexport function useBestPrices(styleItemIds: string[], currency: string) {\n  const scope = usePriceScope();\n  const ids = [...new Set(styleItemIds)].sort();\n  return useQuery({\n    queryKey: [...scope.key, 'best', currency, ids],\n    enabled: scope.ready && ids.length > 0 && ids.length <= 100,\n    staleTime: 30_000,\n    queryFn: async ({ signal }) =>\n      (\n        await coolQuery<CooBestPricesQuery>(\n          print(CooBestPricesDocument),\n          { styleItemIds: ids, currency },\n          scope.apiGatewayUrl,\n          signal\n        )\n      ).cooBestPrices,\n  });\n}\n\n/** History and full merchant details are loaded only when the shopper asks to compare. */\nexport function usePriceDetail(\n  styleItemId: string,\n  currency: string,\n  start: string,\n  end: string,\n  enabled: boolean\n) {\n  const scope = usePriceScope();\n  return useQuery({\n    queryKey: [...scope.key, 'detail', styleItemId, currency, start, end],\n    enabled: scope.ready && Boolean(styleItemId) && enabled,\n    staleTime: 30_000,\n    queryFn: ({ signal }) =>\n      coolQuery<CooPriceDetailQuery>(\n        print(CooPriceDetailDocument),\n        { styleItemId, currency, start, end },\n        scope.apiGatewayUrl,\n        signal\n      ),\n  });\n}\n\nexport function usePriceWatches(offset: number) {\n  const scope = usePriceScope();\n  return useQuery({\n    queryKey: [...scope.key, 'watches', offset],\n    enabled: scope.ready,\n    queryFn: async ({ signal }) =>\n      (\n        await coolQuery<CooMyPriceWatchesQuery>(\n          print(CooMyPriceWatchesDocument),\n          { pagination: { offset, limit: 20 } },\n          scope.apiGatewayUrl,\n          signal\n        )\n      ).cooMyPriceAlerts,\n  });\n}\n\nexport function usePriceWatchDeliveries(alertId: string, offset: number, enabled: boolean) {\n  const scope = usePriceScope();\n  return useQuery({\n    queryKey: [...scope.key, 'receipts', alertId, offset],\n    enabled: scope.ready && Boolean(alertId) && enabled,\n    queryFn: async ({ signal }) =>\n      (\n        await coolQuery<CooMyPriceWatchDeliveriesQuery>(\n          print(CooMyPriceWatchDeliveriesDocument),\n          { alertId, pagination: { offset, limit: 20 } },\n          scope.apiGatewayUrl,\n          signal\n        )\n      ).cooMyPriceAlertDeliveries,\n  });\n}\n\nexport function usePriceWatchAction() {\n  const scope = usePriceScope();\n  const client = useQueryClient();\n  return useMutation({\n    mutationFn: async (\n      action: { kind: 'save'; input: CooPriceAlertInput } | { kind: 'remove'; id: string }\n    ) => {\n      if (action.kind === 'save') {\n        await coolQuery<CooSavePriceWatchMutation>(\n          print(CooSavePriceWatchDocument),\n          { input: action.input },\n          scope.apiGatewayUrl\n        );\n      } else {\n        const result = await coolQuery<CooRemovePriceWatchMutation>(\n          print(CooRemovePriceWatchDocument),\n          { id: action.id },\n          scope.apiGatewayUrl\n        );\n        if (!result.cooDeletePriceAlert) throw new Error('The price watch was not removed.');\n      }\n    },\n    onSuccess: async () => {\n      await Promise.all([\n        client.invalidateQueries({ queryKey: [...scope.key, 'watches'] }),\n        client.invalidateQueries({ queryKey: [...scope.key, 'receipts'] }),\n      ]);\n    },\n  });\n}\n"],"mappings":";;;;;;;AAuBA,SAAS,IAAgB;CACvB,IAAM,EAAE,kBAAe,aAAU,mBAAgB,gBAAa,mBAAgB,EAAiB;CAC/F,OAAO;EACL;EACA,KAAK;GACH;GACA;GACA;GACA;GACA;GACA;GACA,GAAa;EACf;EACA,OAAO,GAAQ,KAAe,GAAa;CAC7C;AACF;AAGA,SAAgB,EAAc,GAAwB,GAAkB;CACtE,IAAM,IAAQ,EAAc,GACtB,IAAM,CAAC,GAAG,IAAI,IAAI,CAAY,CAAC,CAAC,CAAC,KAAK;CAC5C,OAAO,EAAS;EACd,UAAU;GAAC,GAAG,EAAM;GAAK;GAAQ;GAAU;EAAG;EAC9C,SAAS,EAAM,SAAS,EAAI,SAAS,KAAK,EAAI,UAAU;EACxD,WAAW;EACX,SAAS,OAAO,EAAE,iBAEd,MAAM,EACJ,EAAM,CAAqB,GAC3B;GAAE,cAAc;GAAK;EAAS,GAC9B,EAAM,eACN,CACF,EAAA,CACA;CACN,CAAC;AACH;AAGA,SAAgB,EACd,GACA,GACA,GACA,GACA,GACA;CACA,IAAM,IAAQ,EAAc;CAC5B,OAAO,EAAS;EACd,UAAU;GAAC,GAAG,EAAM;GAAK;GAAU;GAAa;GAAU;GAAO;EAAG;EACpE,SAAS,EAAM,SAAS,EAAQ,KAAgB;EAChD,WAAW;EACX,UAAU,EAAE,gBACV,EACE,EAAM,CAAsB,GAC5B;GAAE;GAAa;GAAU;GAAO;EAAI,GACpC,EAAM,eACN,CACF;CACJ,CAAC;AACH;AAEA,SAAgB,EAAgB,GAAgB;CAC9C,IAAM,IAAQ,EAAc;CAC5B,OAAO,EAAS;EACd,UAAU;GAAC,GAAG,EAAM;GAAK;GAAW;EAAM;EAC1C,SAAS,EAAM;EACf,SAAS,OAAO,EAAE,iBAEd,MAAM,EACJ,EAAM,CAAyB,GAC/B,EAAE,YAAY;GAAE;GAAQ,OAAO;EAAG,EAAE,GACpC,EAAM,eACN,CACF,EAAA,CACA;CACN,CAAC;AACH;AAEA,SAAgB,EAAwB,GAAiB,GAAgB,GAAkB;CACzF,IAAM,IAAQ,EAAc;CAC5B,OAAO,EAAS;EACd,UAAU;GAAC,GAAG,EAAM;GAAK;GAAY;GAAS;EAAM;EACpD,SAAS,EAAM,SAAS,EAAQ,KAAY;EAC5C,SAAS,OAAO,EAAE,iBAEd,MAAM,EACJ,EAAM,CAAiC,GACvC;GAAE;GAAS,YAAY;IAAE;IAAQ,OAAO;GAAG;EAAE,GAC7C,EAAM,eACN,CACF,EAAA,CACA;CACN,CAAC;AACH;AAEA,SAAgB,IAAsB;CACpC,IAAM,IAAQ,EAAc,GACtB,IAAS,EAAe;CAC9B,OAAO,EAAY;EACjB,YAAY,OACV,MACG;GACH,IAAI,EAAO,SAAS,QAClB,MAAM,EACJ,EAAM,CAAyB,GAC/B,EAAE,OAAO,EAAO,MAAM,GACtB,EAAM,aACR;QAOA,IAAI,EAAC,MALgB,EACnB,EAAM,CAA2B,GACjC,EAAE,IAAI,EAAO,GAAG,GAChB,EAAM,aACR,EAAA,CACY,qBAAqB,MAAU,MAAM,kCAAkC;EAEvF;EACA,WAAW,YAAY;GACrB,MAAM,QAAQ,IAAI,CAChB,EAAO,kBAAkB,EAAE,UAAU,CAAC,GAAG,EAAM,KAAK,SAAS,EAAE,CAAC,GAChE,EAAO,kBAAkB,EAAE,UAAU,CAAC,GAAG,EAAM,KAAK,UAAU,EAAE,CAAC,CACnE,CAAC;EACH;CACF,CAAC;AACH"}

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

@@ -1 +1 @@
-{"version":3,"file":"StoreListedPieceView.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/items/StoreListedPieceView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAY,MAAM,OAAO,CAAC;AAkS1C;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC;IAAE,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAkIxF,CAAC"}
+{"version":3,"file":"StoreListedPieceView.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/items/StoreListedPieceView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAAE,KAAK,EAAE,EAAY,MAAM,OAAO,CAAC;AAkS1C;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC;IAAE,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAqIxF,CAAC"}

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