@burdenoff/microfe-store 2026.525.3 → 2026.527.1

package/dist/pages/OrderConfirmationPage.js

@@ -1,178 +1,175 @@
 import { useStore as e } from "../providers/StoreProvider.js";
-import { nativeCopyText as t, nativeImpact as n, nativeNotify as r } from "../utils/nativeBridge.js";
-import { useEffect as i, useState as a } from "react";
-import { ArrowRight as o, CheckCircle2 as s, Copy as c, Download as l, KeyRound as u, Receipt as d } from "lucide-react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { useNavigate as m, useParams as h } from "react-router-dom";
-import { graphqlFetch as g } from "@burdenoff/fe-libs/shared/graphql";
+import { formatPrice as t } from "../utils/index.js";
+import { nativeCopyText as n, nativeImpact as r, nativeNotify as i } from "../utils/nativeBridge.js";
+import { useEffect as a, useState as o } from "react";
+import { ArrowRight as s, CheckCircle2 as c, Copy as l, Download as u, KeyRound as d, Receipt as f } from "lucide-react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useNavigate as h, useParams as g } from "react-router-dom";
+import { graphqlFetch as _ } from "@burdenoff/fe-libs/shared/graphql";
 //#region src/pages/OrderConfirmationPage.tsx
-var _ = "\n  query OrderConfirmation($id: ID!) {\n    getStoreOrder(id: $id) {\n      id\n      status\n      total\n      currency\n      purchasedAt\n      lineItems\n      context\n    }\n    myEntitlements {\n      id\n      productId\n      licenseKey\n      expiresAt\n      features\n      product {\n        id\n        name\n        slug\n        icon\n        manifest\n      }\n    }\n  }\n", v = () => {
-	let v = m(), { basePath: y, authToken: b } = e(), { orderId: x } = h(), [S, C] = a(null), [w, T] = a([]), [E, D] = a(!0), [O, k] = a(null), [A, j] = a(null);
-	i(() => {
-		if (!x) return;
+var v = "\n  query OrderConfirmation($id: ID!) {\n    getStoreOrder(id: $id) {\n      id\n      status\n      total\n      currency\n      purchasedAt\n      lineItems\n      context\n    }\n    myEntitlements {\n      id\n      productId\n      licenseKey\n      expiresAt\n      features\n      product {\n        id\n        name\n        slug\n        icon\n        manifest\n      }\n    }\n  }\n", y = () => {
+	let y = h(), { basePath: b, authToken: x } = e(), { orderId: S } = g(), [C, w] = o(null), [T, E] = o([]), [D, O] = o(!0), [k, A] = o(null), [j, M] = o(null);
+	a(() => {
+		if (!S) return;
 		let e = !1;
 		return (async () => {
-			D(!0), k(null);
+			O(!0), A(null);
 			try {
-				let t = await g({
+				let t = await _({
 					gateway: "global",
-					query: _,
-					variables: { id: x },
-					authToken: b || void 0
+					query: v,
+					variables: { id: S },
+					authToken: x || void 0
 				});
 				if (e) return;
 				if (t.errors?.length) throw Error(t.errors[0]?.message ?? "Failed to load order");
-				C(t.data?.getStoreOrder ?? null);
+				w(t.data?.getStoreOrder ?? null);
 				let n = new Set((t.data?.getStoreOrder?.lineItems ?? []).map((e) => e.productId));
-				T((t.data?.myEntitlements ?? []).filter((e) => n.has(e.productId)));
+				E((t.data?.myEntitlements ?? []).filter((e) => n.has(e.productId)));
 			} catch (t) {
 				if (e) return;
-				k(t instanceof Error ? t.message : "Failed to load order");
+				A(t instanceof Error ? t.message : "Failed to load order");
 			} finally {
-				e || D(!1);
+				e || O(!1);
 			}
 		})(), () => {
 			e = !0;
 		};
-	}, [x, b]);
-	let M = async (e) => {
-		n("light");
+	}, [S, x]);
+	let N = async (e) => {
+		r("light");
 		try {
-			await t(e) ? (j(e), r("success"), setTimeout(() => j(null), 1500)) : r("error");
+			await n(e) ? (M(e), i("success"), setTimeout(() => M(null), 1500)) : i("error");
 		} catch {
-			r("error");
+			i("error");
 		}
-	}, N = (e, t) => {
+	}, P = (e, t) => {
 		let n = new URLSearchParams();
 		n.set("install", e), t && n.set("licenseKey", t), window.location.href = `/vibecontrols/agents?${n.toString()}`;
 	};
-	return /* @__PURE__ */ p("main", {
+	return /* @__PURE__ */ m("main", {
 		className: "mx-auto max-w-3xl p-6",
 		children: [
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ m("div", {
 				className: "rounded-2xl border border-border-default bg-surface-raised p-6 text-center",
 				children: [
-					/* @__PURE__ */ f(s, { className: "mx-auto h-12 w-12 text-status-success-text" }),
-					/* @__PURE__ */ f("h1", {
+					/* @__PURE__ */ p(c, { className: "mx-auto size-12 text-status-success-text" }),
+					/* @__PURE__ */ p("h1", {
 						className: "mt-3 text-2xl font-bold text-text-primary",
 						children: "Order placed successfully"
 					}),
-					S && /* @__PURE__ */ p("p", {
+					C && /* @__PURE__ */ m("p", {
 						className: "mt-1 text-sm text-text-secondary",
 						children: [
 							"Total: ",
-							((e, t) => new Intl.NumberFormat(void 0, {
-								style: "currency",
-								currency: t || "USD"
-							}).format(e))(S.total, S.currency),
-							S.purchasedAt && ` • ${new Date(S.purchasedAt).toLocaleString()}`
+							((e, n) => t(e, n || "USD"))(C.total, C.currency),
+							C.purchasedAt && ` • ${new Date(C.purchasedAt).toLocaleString()}`
 						]
 					}),
-					x && /* @__PURE__ */ p("div", {
+					S && /* @__PURE__ */ m("div", {
 						className: "mx-auto mt-4 max-w-sm rounded-lg border border-border-default bg-surface-default px-4 py-2 text-left",
-						children: [/* @__PURE__ */ f("p", {
+						children: [/* @__PURE__ */ p("p", {
 							className: "text-xs uppercase tracking-wide text-text-tertiary",
 							children: "Order ID"
-						}), /* @__PURE__ */ f("p", {
+						}), /* @__PURE__ */ p("p", {
 							className: "mt-0.5 break-all font-mono text-xs text-text-primary",
-							children: x
+							children: S
 						})]
 					})
 				]
 			}),
-			O && /* @__PURE__ */ f("div", {
+			k && /* @__PURE__ */ p("div", {
 				role: "alert",
 				className: "mt-4 rounded-md border border-border-danger bg-surface-danger-muted px-4 py-3 text-sm text-text-danger",
-				children: O
+				children: k
 			}),
-			E ? /* @__PURE__ */ f("div", {
-				role: "status",
-				className: "mt-6 py-12 text-center text-text-secondary",
+			D ? /* @__PURE__ */ p("output", {
+				className: "mt-6 block py-12 text-center text-text-secondary",
 				children: "Loading licenses…"
-			}) : w.length > 0 ? /* @__PURE__ */ p("div", {
+			}) : T.length > 0 ? /* @__PURE__ */ m("div", {
 				className: "mt-6",
-				children: [/* @__PURE__ */ p("h2", {
+				children: [/* @__PURE__ */ m("h2", {
 					className: "mb-3 flex items-center gap-2 text-sm font-semibold text-text-primary",
 					children: [
-						/* @__PURE__ */ f(u, { className: "h-4 w-4" }),
+						/* @__PURE__ */ p(d, { className: "size-4" }),
 						"Your licenses (",
-						w.length,
+						T.length,
 						")"
 					]
-				}), /* @__PURE__ */ f("ul", {
+				}), /* @__PURE__ */ p("ul", {
 					className: "space-y-3",
-					children: w.map((e) => /* @__PURE__ */ f("li", {
+					children: T.map((e) => /* @__PURE__ */ p("li", {
 						className: "rounded-lg border border-border-default bg-surface-raised p-4",
-						children: /* @__PURE__ */ p("div", {
+						children: /* @__PURE__ */ m("div", {
 							className: "flex items-start gap-3",
 							children: [
-								e.product?.icon ? /* @__PURE__ */ f("img", {
+								e.product?.icon ? /* @__PURE__ */ p("img", {
 									src: e.product.icon,
 									alt: "",
-									className: "h-12 w-12 flex-shrink-0 rounded-md object-cover"
-								}) : /* @__PURE__ */ f("div", {
-									className: "flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-md bg-surface-muted text-xs text-text-secondary",
+									className: "size-12 flex-shrink-0 rounded-md object-cover"
+								}) : /* @__PURE__ */ p("div", {
+									className: "flex size-12 flex-shrink-0 items-center justify-center rounded-md bg-surface-muted text-xs text-text-secondary",
 									children: e.product?.name.slice(0, 2).toUpperCase() ?? "?"
 								}),
-								/* @__PURE__ */ p("div", {
+								/* @__PURE__ */ m("div", {
 									className: "min-w-0 flex-1",
 									children: [
-										/* @__PURE__ */ f("h3", {
+										/* @__PURE__ */ p("h3", {
 											className: "text-base font-semibold text-text-primary",
 											children: e.product?.name ?? "Unknown product"
 										}),
-										e.expiresAt && /* @__PURE__ */ p("p", {
+										e.expiresAt && /* @__PURE__ */ m("p", {
 											className: "text-xs text-text-secondary",
 											children: ["Expires: ", new Date(e.expiresAt).toLocaleDateString()]
 										}),
-										e.licenseKey && /* @__PURE__ */ p("div", {
+										e.licenseKey && /* @__PURE__ */ m("div", {
 											className: "mt-2 flex items-center gap-2",
-											children: [/* @__PURE__ */ f("code", {
+											children: [/* @__PURE__ */ p("code", {
 												className: "flex-1 truncate rounded bg-surface-muted px-2 py-1 font-mono text-[11px] text-text-primary",
 												children: e.licenseKey
-											}), /* @__PURE__ */ f("button", {
+											}), /* @__PURE__ */ p("button", {
 												type: "button",
-												onClick: () => void M(e.licenseKey),
+												onClick: () => void N(e.licenseKey),
 												className: "rounded-md border border-border-default bg-surface-default p-1 text-text-primary hover:bg-surface-hover",
 												title: "Copy license key",
-												children: /* @__PURE__ */ f(c, { className: "h-3.5 w-3.5" })
+												children: /* @__PURE__ */ p(l, { className: "size-3.5" })
 											})]
 										}),
-										A === e.licenseKey && /* @__PURE__ */ f("p", {
+										j === e.licenseKey && /* @__PURE__ */ p("p", {
 											className: "mt-1 text-xs text-status-success-text",
 											children: "Copied to clipboard"
 										})
 									]
 								}),
-								/* @__PURE__ */ p("button", {
+								/* @__PURE__ */ m("button", {
 									type: "button",
-									onClick: () => N(e.productId, e.licenseKey),
+									onClick: () => P(e.productId, e.licenseKey),
 									className: "inline-flex items-center gap-1 rounded-md bg-action-primary-bg px-3 py-1.5 text-xs font-semibold text-action-primary-text hover:opacity-90",
-									children: [/* @__PURE__ */ f(l, { className: "h-3.5 w-3.5" }), "Install to workspace"]
+									children: [/* @__PURE__ */ p(u, { className: "size-3.5" }), "Install to workspace"]
 								})
 							]
 						})
 					}, e.id))
 				})]
 			}) : null,
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ m("div", {
 				className: "mt-6 flex flex-col gap-2 sm:flex-row sm:justify-center",
-				children: [/* @__PURE__ */ p("button", {
+				children: [/* @__PURE__ */ m("button", {
 					type: "button",
-					onClick: () => v(`${y}/orders`),
+					onClick: () => y(`${b}/orders`),
 					className: "cursor-pointer inline-flex items-center justify-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-semibold text-action-primary-text",
-					children: [/* @__PURE__ */ f(d, { className: "h-4 w-4" }), "View My Orders"]
-				}), /* @__PURE__ */ p("button", {
+					children: [/* @__PURE__ */ p(f, { className: "size-4" }), "View My Orders"]
+				}), /* @__PURE__ */ m("button", {
 					type: "button",
-					onClick: () => v(`${y}/marketplace`),
+					onClick: () => y(`${b}/marketplace`),
 					className: "cursor-pointer inline-flex items-center justify-center gap-2 rounded-lg border border-border-default px-4 py-2 text-sm font-semibold text-text-primary hover:bg-surface-hover",
-					children: ["Continue Shopping", /* @__PURE__ */ f(o, { className: "h-4 w-4" })]
+					children: ["Continue Shopping", /* @__PURE__ */ p(s, { className: "size-4" })]
 				})]
 			})
 		]
 	});
 };
 //#endregion
-export { v as OrderConfirmationPage };
+export { y as OrderConfirmationPage };
 
 //# sourceMappingURL=OrderConfirmationPage.js.map

package/dist/pages/OrderConfirmationPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrderConfirmationPage.js","names":[],"sources":["../../src/pages/OrderConfirmationPage.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useEffect, useState } from 'react';\nimport { useNavigate, useParams } from 'react-router-dom';\nimport { CheckCircle2, Receipt, ArrowRight, Copy, Download, KeyRound } from 'lucide-react';\nimport { graphqlFetch } from '@burdenoff/fe-libs/shared/graphql';\nimport { useStore } from '../providers/StoreProvider';\nimport { nativeCopyText, nativeImpact, nativeNotify } from '../utils/nativeBridge';\n\ntype LineItem = {\n  productId: string;\n  name: string;\n  quantity: number;\n  unitPrice: number;\n  subtotal: number;\n  itemType?: string;\n};\n\ntype OrderDetails = {\n  id: string;\n  status: string;\n  total: number;\n  currency: string;\n  purchasedAt?: string | null;\n  lineItems: LineItem[];\n  context?: Record<string, unknown> | null;\n};\n\ntype Entitlement = {\n  id: string;\n  productId: string;\n  licenseKey: string | null;\n  expiresAt: string | null;\n  features: string[];\n  product: {\n    id: string;\n    name: string;\n    slug: string;\n    icon: string | null;\n    manifest: Record<string, unknown> | null;\n  } | null;\n};\n\nconst ORDER_QUERY = /* GraphQL */ `\n  query OrderConfirmation($id: ID!) {\n    getStoreOrder(id: $id) {\n      id\n      status\n      total\n      currency\n      purchasedAt\n      lineItems\n      context\n    }\n    myEntitlements {\n      id\n      productId\n      licenseKey\n      expiresAt\n      features\n      product {\n        id\n        name\n        slug\n        icon\n        manifest\n      }\n    }\n  }\n`;\n\nexport const OrderConfirmationPage: FC = () => {\n  const navigate = useNavigate();\n  const { basePath, authToken } = useStore();\n  const { orderId } = useParams<{ orderId: string }>();\n  const [order, setOrder] = useState<OrderDetails | null>(null);\n  const [entitlements, setEntitlements] = useState<Entitlement[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [copiedKey, setCopiedKey] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (!orderId) return;\n    let cancelled = false;\n    const load = async () => {\n      setLoading(true);\n      setError(null);\n      try {\n        const result = await graphqlFetch<{\n          getStoreOrder: OrderDetails | null;\n          myEntitlements: Entitlement[];\n        }>({\n          gateway: 'global',\n          query: ORDER_QUERY,\n          variables: { id: orderId },\n          authToken: authToken || undefined,\n        });\n        if (cancelled) return;\n        if (result.errors?.length) {\n          throw new Error(result.errors[0]?.message ?? 'Failed to load order');\n        }\n        setOrder(result.data?.getStoreOrder ?? null);\n        // Filter entitlements to only those matching products in this order\n        const productIds = new Set(\n          (result.data?.getStoreOrder?.lineItems ?? []).map((item) => item.productId)\n        );\n        const orderEntitlements = (result.data?.myEntitlements ?? []).filter((e) =>\n          productIds.has(e.productId)\n        );\n        setEntitlements(orderEntitlements);\n      } catch (err) {\n        if (cancelled) return;\n        setError(err instanceof Error ? err.message : 'Failed to load order');\n      } finally {\n        if (!cancelled) setLoading(false);\n      }\n    };\n    void load();\n    return () => {\n      cancelled = true;\n    };\n  }, [orderId, authToken]);\n\n  const copyKey = async (key: string) => {\n    void nativeImpact('light');\n    try {\n      const ok = await nativeCopyText(key);\n      if (ok) {\n        setCopiedKey(key);\n        void nativeNotify('success');\n        setTimeout(() => setCopiedKey(null), 1500);\n      } else {\n        void nativeNotify('error');\n      }\n    } catch {\n      void nativeNotify('error');\n    }\n  };\n\n  const installInWorkspace = (productId: string, licenseKey: string | null) => {\n    const params = new URLSearchParams();\n    params.set('install', productId);\n    if (licenseKey) params.set('licenseKey', licenseKey);\n    // Navigate to the vibecontrols plugin install page via the top-level router.\n    // Uses a plain anchor to avoid cross-MFE router imports.\n    window.location.href = `/vibecontrols/agents?${params.toString()}`;\n  };\n\n  const formatPrice = (amount: number, currency: string) =>\n    new Intl.NumberFormat(undefined, { style: 'currency', currency: currency || 'USD' }).format(\n      amount\n    );\n\n  return (\n    <main className=\"mx-auto max-w-3xl p-6\">\n      <div className=\"rounded-2xl border border-border-default bg-surface-raised p-6 text-center\">\n        <CheckCircle2 className=\"mx-auto h-12 w-12 text-status-success-text\" />\n        <h1 className=\"mt-3 text-2xl font-bold text-text-primary\">Order placed successfully</h1>\n        {order && (\n          <p className=\"mt-1 text-sm text-text-secondary\">\n            Total: {formatPrice(order.total, order.currency)}\n            {order.purchasedAt && ` • ${new Date(order.purchasedAt).toLocaleString()}`}\n          </p>\n        )}\n        {orderId && (\n          <div className=\"mx-auto mt-4 max-w-sm rounded-lg border border-border-default bg-surface-default px-4 py-2 text-left\">\n            <p className=\"text-xs uppercase tracking-wide text-text-tertiary\">Order ID</p>\n            <p className=\"mt-0.5 break-all font-mono text-xs text-text-primary\">{orderId}</p>\n          </div>\n        )}\n      </div>\n\n      {error && (\n        <div\n          role=\"alert\"\n          className=\"mt-4 rounded-md border border-border-danger bg-surface-danger-muted px-4 py-3 text-sm text-text-danger\"\n        >\n          {error}\n        </div>\n      )}\n\n      {loading ? (\n        <div role=\"status\" className=\"mt-6 py-12 text-center text-text-secondary\">\n          Loading licenses…\n        </div>\n      ) : entitlements.length > 0 ? (\n        <div className=\"mt-6\">\n          <h2 className=\"mb-3 flex items-center gap-2 text-sm font-semibold text-text-primary\">\n            <KeyRound className=\"h-4 w-4\" />\n            Your licenses ({entitlements.length})\n          </h2>\n          <ul className=\"space-y-3\">\n            {entitlements.map((ent) => (\n              <li\n                key={ent.id}\n                className=\"rounded-lg border border-border-default bg-surface-raised p-4\"\n              >\n                <div className=\"flex items-start gap-3\">\n                  {ent.product?.icon ? (\n                    <img\n                      src={ent.product.icon}\n                      alt=\"\"\n                      className=\"h-12 w-12 flex-shrink-0 rounded-md object-cover\"\n                    />\n                  ) : (\n                    <div className=\"flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-md bg-surface-muted text-xs text-text-secondary\">\n                      {ent.product?.name.slice(0, 2).toUpperCase() ?? '?'}\n                    </div>\n                  )}\n                  <div className=\"min-w-0 flex-1\">\n                    <h3 className=\"text-base font-semibold text-text-primary\">\n                      {ent.product?.name ?? 'Unknown product'}\n                    </h3>\n                    {ent.expiresAt && (\n                      <p className=\"text-xs text-text-secondary\">\n                        Expires: {new Date(ent.expiresAt).toLocaleDateString()}\n                      </p>\n                    )}\n                    {ent.licenseKey && (\n                      <div className=\"mt-2 flex items-center gap-2\">\n                        <code className=\"flex-1 truncate rounded bg-surface-muted px-2 py-1 font-mono text-[11px] text-text-primary\">\n                          {ent.licenseKey}\n                        </code>\n                        <button\n                          type=\"button\"\n                          onClick={() => void copyKey(ent.licenseKey!)}\n                          className=\"rounded-md border border-border-default bg-surface-default p-1 text-text-primary hover:bg-surface-hover\"\n                          title=\"Copy license key\"\n                        >\n                          <Copy className=\"h-3.5 w-3.5\" />\n                        </button>\n                      </div>\n                    )}\n                    {copiedKey === ent.licenseKey && (\n                      <p className=\"mt-1 text-xs text-status-success-text\">Copied to clipboard</p>\n                    )}\n                  </div>\n                  <button\n                    type=\"button\"\n                    onClick={() => installInWorkspace(ent.productId, ent.licenseKey)}\n                    className=\"inline-flex items-center gap-1 rounded-md bg-action-primary-bg px-3 py-1.5 text-xs font-semibold text-action-primary-text hover:opacity-90\"\n                  >\n                    <Download className=\"h-3.5 w-3.5\" />\n                    Install to workspace\n                  </button>\n                </div>\n              </li>\n            ))}\n          </ul>\n        </div>\n      ) : null}\n\n      <div className=\"mt-6 flex flex-col gap-2 sm:flex-row sm:justify-center\">\n        <button\n          type=\"button\"\n          onClick={() => navigate(`${basePath}/orders`)}\n          className=\"cursor-pointer inline-flex items-center justify-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-semibold text-action-primary-text\"\n        >\n          <Receipt className=\"h-4 w-4\" />\n          View My Orders\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => navigate(`${basePath}/marketplace`)}\n          className=\"cursor-pointer inline-flex items-center justify-center gap-2 rounded-lg border border-border-default px-4 py-2 text-sm font-semibold text-text-primary hover:bg-surface-hover\"\n        >\n          Continue Shopping\n          <ArrowRight className=\"h-4 w-4\" />\n        </button>\n      </div>\n    </main>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"OrderConfirmationPage.js","names":[],"sources":["../../src/pages/OrderConfirmationPage.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useEffect, useState } from 'react';\nimport { useNavigate, useParams } from 'react-router-dom';\nimport { CheckCircle2, Receipt, ArrowRight, Copy, Download, KeyRound } from 'lucide-react';\nimport { graphqlFetch } from '@burdenoff/fe-libs/shared/graphql';\nimport { useStore } from '../providers/StoreProvider';\nimport { nativeCopyText, nativeImpact, nativeNotify } from '../utils/nativeBridge';\nimport { formatPrice as formatCurrency } from '../utils';\n\ntype LineItem = {\n  productId: string;\n  name: string;\n  quantity: number;\n  unitPrice: number;\n  subtotal: number;\n  itemType?: string;\n};\n\ntype OrderDetails = {\n  id: string;\n  status: string;\n  total: number;\n  currency: string;\n  purchasedAt?: string | null;\n  lineItems: LineItem[];\n  context?: Record<string, unknown> | null;\n};\n\ntype Entitlement = {\n  id: string;\n  productId: string;\n  licenseKey: string | null;\n  expiresAt: string | null;\n  features: string[];\n  product: {\n    id: string;\n    name: string;\n    slug: string;\n    icon: string | null;\n    manifest: Record<string, unknown> | null;\n  } | null;\n};\n\nconst ORDER_QUERY = /* GraphQL */ `\n  query OrderConfirmation($id: ID!) {\n    getStoreOrder(id: $id) {\n      id\n      status\n      total\n      currency\n      purchasedAt\n      lineItems\n      context\n    }\n    myEntitlements {\n      id\n      productId\n      licenseKey\n      expiresAt\n      features\n      product {\n        id\n        name\n        slug\n        icon\n        manifest\n      }\n    }\n  }\n`;\n\nexport const OrderConfirmationPage: FC = () => {\n  const navigate = useNavigate();\n  const { basePath, authToken } = useStore();\n  const { orderId } = useParams<{ orderId: string }>();\n  const [order, setOrder] = useState<OrderDetails | null>(null);\n  const [entitlements, setEntitlements] = useState<Entitlement[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [copiedKey, setCopiedKey] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (!orderId) return;\n    let cancelled = false;\n    const load = async () => {\n      setLoading(true);\n      setError(null);\n      try {\n        const result = await graphqlFetch<{\n          getStoreOrder: OrderDetails | null;\n          myEntitlements: Entitlement[];\n        }>({\n          gateway: 'global',\n          query: ORDER_QUERY,\n          variables: { id: orderId },\n          authToken: authToken || undefined,\n        });\n        if (cancelled) return;\n        if (result.errors?.length) {\n          throw new Error(result.errors[0]?.message ?? 'Failed to load order');\n        }\n        setOrder(result.data?.getStoreOrder ?? null);\n        // Filter entitlements to only those matching products in this order\n        const productIds = new Set(\n          (result.data?.getStoreOrder?.lineItems ?? []).map((item) => item.productId)\n        );\n        const orderEntitlements = (result.data?.myEntitlements ?? []).filter((e) =>\n          productIds.has(e.productId)\n        );\n        setEntitlements(orderEntitlements);\n      } catch (err) {\n        if (cancelled) return;\n        setError(err instanceof Error ? err.message : 'Failed to load order');\n      } finally {\n        if (!cancelled) setLoading(false);\n      }\n    };\n    void load();\n    return () => {\n      cancelled = true;\n    };\n  }, [orderId, authToken]);\n\n  const copyKey = async (key: string) => {\n    void nativeImpact('light');\n    try {\n      const ok = await nativeCopyText(key);\n      if (ok) {\n        setCopiedKey(key);\n        void nativeNotify('success');\n        setTimeout(() => setCopiedKey(null), 1500);\n      } else {\n        void nativeNotify('error');\n      }\n    } catch {\n      void nativeNotify('error');\n    }\n  };\n\n  const installInWorkspace = (productId: string, licenseKey: string | null) => {\n    const params = new URLSearchParams();\n    params.set('install', productId);\n    if (licenseKey) params.set('licenseKey', licenseKey);\n    // Navigate to the vibecontrols plugin install page via the top-level router.\n    // Uses a plain anchor to avoid cross-MFE router imports.\n    window.location.href = `/vibecontrols/agents?${params.toString()}`;\n  };\n\n  const formatPrice = (amount: number, currency: string) =>\n    formatCurrency(amount, currency || 'USD');\n\n  return (\n    <main className=\"mx-auto max-w-3xl p-6\">\n      <div className=\"rounded-2xl border border-border-default bg-surface-raised p-6 text-center\">\n        <CheckCircle2 className=\"mx-auto size-12 text-status-success-text\" />\n        <h1 className=\"mt-3 text-2xl font-bold text-text-primary\">Order placed successfully</h1>\n        {order && (\n          <p className=\"mt-1 text-sm text-text-secondary\">\n            Total: {formatPrice(order.total, order.currency)}\n            {order.purchasedAt && ` • ${new Date(order.purchasedAt).toLocaleString()}`}\n          </p>\n        )}\n        {orderId && (\n          <div className=\"mx-auto mt-4 max-w-sm rounded-lg border border-border-default bg-surface-default px-4 py-2 text-left\">\n            <p className=\"text-xs uppercase tracking-wide text-text-tertiary\">Order ID</p>\n            <p className=\"mt-0.5 break-all font-mono text-xs text-text-primary\">{orderId}</p>\n          </div>\n        )}\n      </div>\n\n      {error && (\n        <div\n          role=\"alert\"\n          className=\"mt-4 rounded-md border border-border-danger bg-surface-danger-muted px-4 py-3 text-sm text-text-danger\"\n        >\n          {error}\n        </div>\n      )}\n\n      {loading ? (\n        <output className=\"mt-6 block py-12 text-center text-text-secondary\">\n          Loading licenses…\n        </output>\n      ) : entitlements.length > 0 ? (\n        <div className=\"mt-6\">\n          <h2 className=\"mb-3 flex items-center gap-2 text-sm font-semibold text-text-primary\">\n            <KeyRound className=\"size-4\" />\n            Your licenses ({entitlements.length})\n          </h2>\n          <ul className=\"space-y-3\">\n            {entitlements.map((ent) => (\n              <li\n                key={ent.id}\n                className=\"rounded-lg border border-border-default bg-surface-raised p-4\"\n              >\n                <div className=\"flex items-start gap-3\">\n                  {ent.product?.icon ? (\n                    <img\n                      src={ent.product.icon}\n                      alt=\"\"\n                      className=\"size-12 flex-shrink-0 rounded-md object-cover\"\n                    />\n                  ) : (\n                    <div className=\"flex size-12 flex-shrink-0 items-center justify-center rounded-md bg-surface-muted text-xs text-text-secondary\">\n                      {ent.product?.name.slice(0, 2).toUpperCase() ?? '?'}\n                    </div>\n                  )}\n                  <div className=\"min-w-0 flex-1\">\n                    <h3 className=\"text-base font-semibold text-text-primary\">\n                      {ent.product?.name ?? 'Unknown product'}\n                    </h3>\n                    {ent.expiresAt && (\n                      <p className=\"text-xs text-text-secondary\">\n                        Expires: {new Date(ent.expiresAt).toLocaleDateString()}\n                      </p>\n                    )}\n                    {ent.licenseKey && (\n                      <div className=\"mt-2 flex items-center gap-2\">\n                        <code className=\"flex-1 truncate rounded bg-surface-muted px-2 py-1 font-mono text-[11px] text-text-primary\">\n                          {ent.licenseKey}\n                        </code>\n                        <button\n                          type=\"button\"\n                          onClick={() => void copyKey(ent.licenseKey!)}\n                          className=\"rounded-md border border-border-default bg-surface-default p-1 text-text-primary hover:bg-surface-hover\"\n                          title=\"Copy license key\"\n                        >\n                          <Copy className=\"size-3.5\" />\n                        </button>\n                      </div>\n                    )}\n                    {copiedKey === ent.licenseKey && (\n                      <p className=\"mt-1 text-xs text-status-success-text\">Copied to clipboard</p>\n                    )}\n                  </div>\n                  <button\n                    type=\"button\"\n                    onClick={() => installInWorkspace(ent.productId, ent.licenseKey)}\n                    className=\"inline-flex items-center gap-1 rounded-md bg-action-primary-bg px-3 py-1.5 text-xs font-semibold text-action-primary-text hover:opacity-90\"\n                  >\n                    <Download className=\"size-3.5\" />\n                    Install to workspace\n                  </button>\n                </div>\n              </li>\n            ))}\n          </ul>\n        </div>\n      ) : null}\n\n      <div className=\"mt-6 flex flex-col gap-2 sm:flex-row sm:justify-center\">\n        <button\n          type=\"button\"\n          onClick={() => navigate(`${basePath}/orders`)}\n          className=\"cursor-pointer inline-flex items-center justify-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-semibold text-action-primary-text\"\n        >\n          <Receipt className=\"size-4\" />\n          View My Orders\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => navigate(`${basePath}/marketplace`)}\n          className=\"cursor-pointer inline-flex items-center justify-center gap-2 rounded-lg border border-border-default px-4 py-2 text-sm font-semibold text-text-primary hover:bg-surface-hover\"\n        >\n          Continue Shopping\n          <ArrowRight className=\"size-4\" />\n        </button>\n      </div>\n    </main>\n  );\n};\n"],"mappings":"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"}

package/dist/pages/OrdersPage.js

@@ -4,7 +4,6 @@ import { formatPrice as n } from "../utils/index.js";
 import { useInstallations as r } from "../hooks/useInstallations.js";
 import { useOrders as i } from "../hooks/useOrders.js";
 import { InstallAppModal as a } from "../components/InstallAppModal.js";
-import "../components/index.js";
 import { useMemo as o, useState as s } from "react";
 import { useI18n as c } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { ArrowLeft as l, CheckCircle as u, Clock as d, Download as f, Loader2 as p, Package as m, RefreshCw as h, ShoppingBag as g, XCircle as _ } from "lucide-react";
@@ -57,13 +56,13 @@ var S = (e) => {
 		className: "flex items-center gap-4 rounded-lg border border-border-default bg-bg-sunken/50 p-4",
 		children: [
 			/* @__PURE__ */ y("div", {
-				className: "h-14 w-14 flex-shrink-0 overflow-hidden rounded-lg bg-bg-sunken",
+				className: "size-14 flex-shrink-0 overflow-hidden rounded-lg bg-bg-sunken",
 				children: e.productIcon ? /* @__PURE__ */ y("img", {
 					src: e.productIcon,
 					alt: e.productName,
-					className: "h-full w-full object-cover"
+					className: "size-full object-cover"
 				}) : /* @__PURE__ */ y("div", {
-					className: "flex h-full w-full items-center justify-center text-lg font-bold text-text-muted",
+					className: "flex size-full items-center justify-center text-lg font-bold text-text-muted",
 					children: e.productName.charAt(0)
 				})
 			}),
@@ -98,12 +97,13 @@ var S = (e) => {
 				className: "flex-shrink-0",
 				children: e.installed ? /* @__PURE__ */ b("span", {
 					className: "inline-flex items-center gap-1.5 rounded-lg bg-status-success-bg-subtle/10 px-4 py-2 text-sm font-medium text-status-success-text",
-					children: [/* @__PURE__ */ y(u, { className: "h-4 w-4" }), "Installed"]
+					children: [/* @__PURE__ */ y(u, { className: "size-4" }), "Installed"]
 				}) : o && s ? /* @__PURE__ */ y("button", {
+					type: "button",
 					onClick: () => i(t, e),
 					disabled: a,
 					className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-opacity hover:opacity-90 disabled:opacity-50",
-					children: a ? /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(p, { className: "h-4 w-4 animate-spin" }), "Installing..."] }) : /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(f, { className: "h-4 w-4" }), "Install App"] })
+					children: a ? /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(p, { className: "size-4 animate-spin" }), "Installing…"] }) : /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(f, { className: "size-4" }), "Install App"] })
 				}) : null
 			})
 		]
@@ -122,7 +122,7 @@ var S = (e) => {
 						children: e.orderNumber
 					}), /* @__PURE__ */ b("span", {
 						className: `inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-semibold ${i.color}`,
-						children: [/* @__PURE__ */ y(a, { className: "h-4 w-4" }), i.label]
+						children: [/* @__PURE__ */ y(a, { className: "size-4" }), i.label]
 					})]
 				}), /* @__PURE__ */ y("p", {
 					className: "text-sm text-text-muted mt-1",
@@ -192,7 +192,7 @@ var S = (e) => {
 			console.warn("OrderStatusUpdated subscription error:", e.message);
 		}
 	});
-	let [O, k] = s(!1), [A, j] = s(null), [M, N] = s(null), [P, F] = s(null), I = o(() => new Set(E.filter((e) => e.status === "ACTIVE").map((e) => e.productId)), [E]), L = f.map((e) => {
+	let [O, k] = s(!1), [A, j] = s(null), [M, N] = s(null), [P, F] = s(null), I = o(() => new Set(E.flatMap((e) => e.status === "ACTIVE" ? [e.productId] : [])), [E]), L = f.map((e) => {
 		let t = e.lineItems || [], n = t.reduce((e, t) => e + t.subtotal, 0), r = e.total - n, i = t.map((t, n) => ({
 			id: `${e.id}-${n}`,
 			productId: t.productId,
@@ -242,14 +242,15 @@ var S = (e) => {
 					children: /* @__PURE__ */ b("div", {
 						className: "flex items-center gap-4",
 						children: [/* @__PURE__ */ y("button", {
+							type: "button",
 							onClick: () => n(-1),
 							"aria-label": "Go back",
 							className: "cursor-pointer rounded-lg p-2 text-text-muted transition-colors hover:bg-bg-sunken hover:text-text-primary",
-							children: /* @__PURE__ */ y(l, { className: "h-5 w-5" })
+							children: /* @__PURE__ */ y(l, { className: "size-5" })
 						}), /* @__PURE__ */ b("div", {
 							className: "flex items-center gap-3",
 							children: [
-								/* @__PURE__ */ y(m, { className: "h-6 w-6 text-text-primary" }),
+								/* @__PURE__ */ y(m, { className: "size-6 text-text-primary" }),
 								/* @__PURE__ */ y("h1", {
 									className: "text-xl font-bold text-text-primary",
 									children: d("pages.orders.title", { defaultValue: "My Orders" })
@@ -264,17 +265,16 @@ var S = (e) => {
 				})
 			}),
 			/* @__PURE__ */ y("main", {
-				className: "mx-auto max-w-4xl px-6 py-6",
-				children: h ? /* @__PURE__ */ b("div", {
-					role: "status",
+				className: "mx-auto max-w-4xl p-6",
+				children: h ? /* @__PURE__ */ b("output", {
 					"aria-label": "Loading orders",
 					className: "flex flex-col items-center justify-center py-16",
 					children: [/* @__PURE__ */ y(p, {
-						className: "h-12 w-12 animate-spin text-text-muted mb-4",
+						className: "size-12 animate-spin text-text-muted mb-4",
 						"aria-hidden": "true"
 					}), /* @__PURE__ */ y("p", {
 						className: "text-text-muted",
-						children: "Loading your orders..."
+						children: "Loading your orders…"
 					})]
 				}) : v ? /* @__PURE__ */ b("div", {
 					role: "alert",
@@ -282,7 +282,7 @@ var S = (e) => {
 					children: [
 						/* @__PURE__ */ y("div", {
 							className: "mb-6 rounded-full bg-status-error-bg-subtle/10 p-6",
-							children: /* @__PURE__ */ y(_, { className: "h-16 w-16 text-status-error-text" })
+							children: /* @__PURE__ */ y(_, { className: "size-16 text-status-error-text" })
 						}),
 						/* @__PURE__ */ y("h2", {
 							className: "mb-2 text-2xl font-bold text-text-primary",
@@ -293,9 +293,10 @@ var S = (e) => {
 							children: v.message || "An error occurred while loading your orders. Please try again."
 						}),
 						/* @__PURE__ */ b("button", {
+							type: "button",
 							onClick: H,
 							className: "cursor-pointer flex items-center gap-2 rounded-lg bg-action-primary-bg px-6 py-3 font-semibold text-action-primary-text transition-opacity hover:opacity-90",
-							children: [/* @__PURE__ */ y(g, { className: "h-5 w-5" }), "Browse Marketplace"]
+							children: [/* @__PURE__ */ y(g, { className: "size-5" }), "Browse Marketplace"]
 						})
 					]
 				}) : L.length === 0 ? /* @__PURE__ */ b("div", {
@@ -303,7 +304,7 @@ var S = (e) => {
 					children: [
 						/* @__PURE__ */ y("div", {
 							className: "mb-6 rounded-full bg-bg-sunken p-6",
-							children: /* @__PURE__ */ y(g, { className: "h-16 w-16 text-text-muted" })
+							children: /* @__PURE__ */ y(g, { className: "size-16 text-text-muted" })
 						}),
 						/* @__PURE__ */ y("h2", {
 							className: "mb-2 text-2xl font-bold text-text-primary",
@@ -314,9 +315,10 @@ var S = (e) => {
 							children: "You have not placed any orders yet. Browse the marketplace to discover apps and products!"
 						}),
 						/* @__PURE__ */ b("button", {
+							type: "button",
 							onClick: H,
 							className: "cursor-pointer flex items-center gap-2 rounded-lg bg-action-primary-bg px-6 py-3 font-semibold text-action-primary-text transition-opacity hover:opacity-90",
-							children: [/* @__PURE__ */ y(g, { className: "h-5 w-5" }), "Browse Marketplace"]
+							children: [/* @__PURE__ */ y(g, { className: "size-5" }), "Browse Marketplace"]
 						})
 					]
 				}) : /* @__PURE__ */ b("ul", {
@@ -334,7 +336,7 @@ var S = (e) => {
 							className: "flex items-center gap-2 rounded-lg border border-border-default px-6 py-2.5 text-sm font-medium text-text-primary hover:bg-bg-subtle disabled:opacity-50",
 							"aria-label": d("common.loadMore", { defaultValue: "Load more" }),
 							children: [h ? /* @__PURE__ */ y(p, {
-								className: "h-4 w-4 animate-spin",
+								className: "size-4 animate-spin",
 								"aria-hidden": "true"
 							}) : null, d("common.loadMore", { defaultValue: "Load more" })]
 						})

package/dist/pages/OrdersPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrdersPage.js","names":[],"sources":["../../src/pages/OrdersPage.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useMemo, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport {\n  Package,\n  ArrowLeft,\n  ShoppingBag,\n  Download,\n  CheckCircle,\n  Clock,\n  XCircle,\n  RefreshCw,\n  Loader2,\n} from 'lucide-react';\nimport { useStore } from '../providers/StoreProvider';\nimport { useInstallations } from '../hooks/useInstallations';\nimport { useOrders } from '../hooks/useOrders';\nimport { formatPrice } from '../utils';\nimport { InstallAppModal, type AppInfo } from '../components';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useOrderStatusUpdatedSubscription } from '../generated/global-operations';\n\n// Local types for UI\ninterface OrderItem {\n  id: string;\n  productId: string;\n  productName: string;\n  productIcon?: string;\n  productType: string;\n  version?: string;\n  quantity: number;\n  unitPrice: number;\n  totalPrice: number;\n  installed?: boolean;\n}\n\ninterface UIOrder {\n  id: string;\n  orderNumber: string;\n  items: OrderItem[];\n  subtotal: number;\n  tax: number;\n  total: number;\n  status:\n    | 'PENDING'\n    | 'PROCESSING'\n    | 'COMPLETED'\n    | 'FAILED'\n    | 'CANCELLED'\n    | 'FULFILLED'\n    | 'PROCESSED'\n    | 'REFUNDED';\n  createdAt: string;\n}\n\n/**\n * Get status icon and color\n */\nconst getStatusDisplay = (status: UIOrder['status']) => {\n  switch (status) {\n    case 'COMPLETED':\n    case 'FULFILLED':\n    case 'PROCESSED':\n      return {\n        icon: CheckCircle,\n        color: 'text-status-success-text bg-status-success-bg-subtle/10',\n        label: 'Completed',\n      };\n    case 'PROCESSING':\n      return {\n        icon: Clock,\n        color: 'text-status-warning-text bg-status-warning-bg-subtle/10',\n        label: 'Processing',\n      };\n    case 'PENDING':\n      return {\n        icon: Clock,\n        color: 'text-status-warning-text bg-status-warning-bg-subtle/10',\n        label: 'Pending',\n      };\n    case 'FAILED':\n      return {\n        icon: XCircle,\n        color: 'text-status-error-text bg-status-error-bg-subtle/10',\n        label: 'Failed',\n      };\n    case 'REFUNDED':\n      return {\n        icon: RefreshCw,\n        color: 'text-status-warning-text bg-status-warning-bg-subtle/10',\n        label: 'Refunded',\n      };\n    case 'CANCELLED':\n      return { icon: RefreshCw, color: 'text-text-muted bg-bg-sunken', label: 'Cancelled' };\n    default:\n      return { icon: Clock, color: 'text-text-muted', label: status };\n  }\n};\n\n/**\n * Order item card with Install App button\n */\nconst OrderItemCard: FC<{\n  item: OrderItem;\n  orderId: string;\n  orderStatus: UIOrder['status'];\n  onOpenInstallModal: (orderId: string, item: OrderItem) => void;\n  installing: boolean;\n}> = ({ item, orderId, orderStatus, onOpenInstallModal, installing }) => {\n  const isOrderSuccessful =\n    orderStatus === 'COMPLETED' || orderStatus === 'FULFILLED' || orderStatus === 'PROCESSED';\n  const isInstallable = item.productType !== 'PHYSICAL' && item.productType !== 'MERCHANDISE';\n  return (\n    <div className=\"flex items-center gap-4 rounded-lg border border-border-default bg-bg-sunken/50 p-4\">\n      {/* Product Icon */}\n      <div className=\"h-14 w-14 flex-shrink-0 overflow-hidden rounded-lg bg-bg-sunken\">\n        {item.productIcon ? (\n          <img\n            src={item.productIcon}\n            alt={item.productName}\n            className=\"h-full w-full object-cover\"\n          />\n        ) : (\n          <div className=\"flex h-full w-full items-center justify-center text-lg font-bold text-text-muted\">\n            {item.productName.charAt(0)}\n          </div>\n        )}\n      </div>\n\n      {/* Product Info */}\n      <div className=\"flex-1 min-w-0\">\n        <h4 className=\"font-medium text-text-primary truncate\">{item.productName}</h4>\n        <div className=\"flex items-center gap-2 mt-1\">\n          <span className=\"inline-flex items-center rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-muted\">\n            {item.productType}\n          </span>\n          <span className=\"text-sm text-text-muted\">\n            {item.quantity} x {formatPrice(item.unitPrice)}\n          </span>\n        </div>\n      </div>\n\n      {/* Price */}\n      <div className=\"text-right\">\n        <p className=\"font-semibold text-text-primary\">{formatPrice(item.totalPrice)}</p>\n      </div>\n\n      {/* Install Button - only show when order is successfully processed */}\n      <div className=\"flex-shrink-0\">\n        {item.installed ? (\n          <span className=\"inline-flex items-center gap-1.5 rounded-lg bg-status-success-bg-subtle/10 px-4 py-2 text-sm font-medium text-status-success-text\">\n            <CheckCircle className=\"h-4 w-4\" />\n            Installed\n          </span>\n        ) : isOrderSuccessful && isInstallable ? (\n          <button\n            onClick={() => onOpenInstallModal(orderId, item)}\n            disabled={installing}\n            className=\"inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-opacity hover:opacity-90 disabled:opacity-50\"\n          >\n            {installing ? (\n              <>\n                <Loader2 className=\"h-4 w-4 animate-spin\" />\n                Installing...\n              </>\n            ) : (\n              <>\n                <Download className=\"h-4 w-4\" />\n                Install App\n              </>\n            )}\n          </button>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\n/**\n * Order card component\n */\nconst OrderCard: FC<{\n  order: UIOrder;\n  onOpenInstallModal: (orderId: string, item: OrderItem) => void;\n  installingItem: string | null;\n}> = ({ order, onOpenInstallModal, installingItem }) => {\n  const statusDisplay = getStatusDisplay(order.status);\n  const StatusIcon = statusDisplay.icon;\n\n  return (\n    <div className=\"rounded-xl border border-border-default bg-bg-surface p-6 transition-shadow hover:shadow-md\">\n      {/* Order Header */}\n      <div className=\"flex items-start justify-between mb-4\">\n        <div>\n          <div className=\"flex items-center gap-3\">\n            <h3 className=\"text-lg font-semibold text-text-primary\">{order.orderNumber}</h3>\n            <span\n              className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-semibold ${statusDisplay.color}`}\n            >\n              <StatusIcon className=\"h-4 w-4\" />\n              {statusDisplay.label}\n            </span>\n          </div>\n          <p className=\"text-sm text-text-muted mt-1\">\n            {new Date(order.createdAt).toLocaleDateString('en-US', {\n              year: 'numeric',\n              month: 'long',\n              day: 'numeric',\n              hour: '2-digit',\n              minute: '2-digit',\n            })}\n          </p>\n        </div>\n        <div className=\"text-right\">\n          <p className=\"text-xl font-bold text-text-primary\">{formatPrice(order.total)}</p>\n          <p className=\"text-xs text-text-muted\">\n            {order.items.length} {order.items.length === 1 ? 'item' : 'items'}\n          </p>\n        </div>\n      </div>\n\n      {/* Order Items */}\n      <div className=\"space-y-3\">\n        {order.items.map((item) => (\n          <OrderItemCard\n            key={item.id}\n            item={item}\n            orderId={order.id}\n            orderStatus={order.status}\n            onOpenInstallModal={onOpenInstallModal}\n            installing={installingItem === item.id}\n          />\n        ))}\n      </div>\n\n      {/* Order Summary */}\n      <div className=\"mt-4 pt-4 border-t border-border-default\">\n        <div className=\"flex justify-between text-sm\">\n          <span className=\"text-text-muted\">Subtotal</span>\n          <span className=\"text-text-primary\">{formatPrice(order.subtotal)}</span>\n        </div>\n        <div className=\"flex justify-between text-sm mt-1\">\n          <span className=\"text-text-muted\">Tax</span>\n          <span className=\"text-text-primary\">{formatPrice(order.tax)}</span>\n        </div>\n      </div>\n    </div>\n  );\n};\n\n/**\n * OrdersPage component\n *\n * Displays a list of all orders with their items and Install App buttons\n */\nexport const OrdersPage: FC = () => {\n  const navigate = useNavigate();\n  const { basePath } = useStore();\n  const { t } = useI18n();\n  const { orders: backendOrders, loading, error, refetchOrders, hasMore, loadMore } = useOrders();\n  const { installations, refetch: refetchInstallations } = useInstallations();\n\n  useOrderStatusUpdatedSubscription({\n    onData: () => {\n      void refetchOrders();\n    },\n    onError: (err) => {\n      console.warn('OrderStatusUpdated subscription error:', err.message);\n    },\n  });\n\n  // Modal state\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [selectedOrderId, setSelectedOrderId] = useState<string | null>(null);\n  const [selectedApp, setSelectedApp] = useState<AppInfo | null>(null);\n  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);\n\n  const installedProductIds = useMemo(\n    () =>\n      new Set(\n        installations\n          .filter((installation) => installation.status === 'ACTIVE')\n          .map((installation) => installation.productId)\n      ),\n    [installations]\n  );\n\n  // Map backend orders to UI format\n  const orders: UIOrder[] = backendOrders.map((order) => {\n    // Calculate subtotal from line items (with safety check)\n    const lineItems = order.lineItems || [];\n    const subtotal = lineItems.reduce((sum, item) => sum + item.subtotal, 0);\n    // Estimate tax (backend doesn't store separate tax amount)\n    const tax = order.total - subtotal;\n\n    // Map lineItems to items with unique IDs\n    const items: OrderItem[] = lineItems.map((item, index) => ({\n      id: `${order.id}-${index}`, // Generate unique ID for each line item\n      productId: item.productId,\n      productName: item.name, // Backend uses 'name', UI expects 'productName'\n      productIcon: item.productIcon,\n      productType:\n        item.productType ||\n        (typeof item.itemType === 'string' ? item.itemType.toUpperCase() : 'APP'),\n      version: item.version,\n      quantity: item.quantity,\n      unitPrice: item.unitPrice,\n      totalPrice: item.subtotal, // Backend uses 'subtotal', UI expects 'totalPrice'\n      installed: installedProductIds.has(item.productId),\n    }));\n\n    return {\n      id: order.id,\n      orderNumber: `#${order.id.slice(-8).toUpperCase()}`, // Generate order number from ID\n      items,\n      subtotal,\n      tax,\n      total: order.total,\n      status: order.status as UIOrder['status'], // Cast to union type\n      createdAt: order.createdAt,\n    };\n  });\n\n  const handleOpenInstallModal = (orderId: string, item: OrderItem) => {\n    setSelectedOrderId(orderId);\n    setSelectedItemId(item.id);\n    setSelectedApp({\n      id: item.productId,\n      name: item.productName,\n      icon: item.productIcon,\n      type: item.productType,\n      version: item.version,\n    });\n    setIsModalOpen(true);\n  };\n\n  const handleCloseModal = () => {\n    setIsModalOpen(false);\n    setSelectedOrderId(null);\n    setSelectedApp(null);\n    setSelectedItemId(null);\n  };\n\n  const handleInstallSuccess = (workspaceId: string, workspaceName: string) => {\n    if (!selectedOrderId || !selectedItemId) return;\n\n    console.log(\n      `Successfully installed ${selectedApp?.name} to workspace ${workspaceName} (${workspaceId})`\n    );\n\n    // Reset modal state\n    handleCloseModal();\n    void refetchInstallations();\n  };\n\n  const handleInstallError = (error: Error) => {\n    console.error('Installation failed:', error.message);\n    // Error is displayed in modal, no need to close it\n  };\n\n  const handleBrowseMarketplace = () => {\n    navigate(`${basePath}/marketplace`);\n  };\n\n  return (\n    <div className=\"h-full overflow-y-auto\">\n      {/* Header */}\n      <header className=\"sticky top-0 z-10 border-b border-border-default bg-bg-surface px-6 py-4\">\n        <div className=\"mx-auto max-w-4xl\">\n          <div className=\"flex items-center gap-4\">\n            <button\n              onClick={() => navigate(-1)}\n              aria-label=\"Go back\"\n              className=\"cursor-pointer rounded-lg p-2 text-text-muted transition-colors hover:bg-bg-sunken hover:text-text-primary\"\n            >\n              <ArrowLeft className=\"h-5 w-5\" />\n            </button>\n            <div className=\"flex items-center gap-3\">\n              <Package className=\"h-6 w-6 text-text-primary\" />\n              <h1 className=\"text-xl font-bold text-text-primary\">\n                {t('pages.orders.title', { defaultValue: 'My Orders' })}\n              </h1>\n              {orders.length > 0 && (\n                <span className=\"rounded-full bg-action-primary-bg px-2.5 py-0.5 text-sm font-medium text-action-primary-text\">\n                  {orders.length}\n                </span>\n              )}\n            </div>\n          </div>\n        </div>\n      </header>\n\n      <main className=\"mx-auto max-w-4xl px-6 py-6\">\n        {loading ? (\n          // Loading State\n          <div\n            role=\"status\"\n            aria-label=\"Loading orders\"\n            className=\"flex flex-col items-center justify-center py-16\"\n          >\n            <Loader2 className=\"h-12 w-12 animate-spin text-text-muted mb-4\" aria-hidden=\"true\" />\n            <p className=\"text-text-muted\">Loading your orders...</p>\n          </div>\n        ) : error ? (\n          // Error State\n          <div role=\"alert\" className=\"flex flex-col items-center justify-center py-16 text-center\">\n            <div className=\"mb-6 rounded-full bg-status-error-bg-subtle/10 p-6\">\n              <XCircle className=\"h-16 w-16 text-status-error-text\" />\n            </div>\n            <h2 className=\"mb-2 text-2xl font-bold text-text-primary\">\n              {t('pages.orders.failedToLoad', { defaultValue: 'Failed to load orders' })}\n            </h2>\n            <p className=\"mb-6 max-w-md text-text-muted\">\n              {error.message || 'An error occurred while loading your orders. Please try again.'}\n            </p>\n            <button\n              onClick={handleBrowseMarketplace}\n              className=\"cursor-pointer flex items-center gap-2 rounded-lg bg-action-primary-bg px-6 py-3 font-semibold text-action-primary-text transition-opacity hover:opacity-90\"\n            >\n              <ShoppingBag className=\"h-5 w-5\" />\n              Browse Marketplace\n            </button>\n          </div>\n        ) : orders.length === 0 ? (\n          // Empty State\n          <div className=\"flex flex-col items-center justify-center py-16 text-center\">\n            <div className=\"mb-6 rounded-full bg-bg-sunken p-6\">\n              <ShoppingBag className=\"h-16 w-16 text-text-muted\" />\n            </div>\n            <h2 className=\"mb-2 text-2xl font-bold text-text-primary\">\n              {t('pages.orders.emptyTitle', { defaultValue: 'No orders yet' })}\n            </h2>\n            <p className=\"mb-6 max-w-md text-text-muted\">\n              You have not placed any orders yet. Browse the marketplace to discover apps and\n              products!\n            </p>\n            <button\n              onClick={handleBrowseMarketplace}\n              className=\"cursor-pointer flex items-center gap-2 rounded-lg bg-action-primary-bg px-6 py-3 font-semibold text-action-primary-text transition-opacity hover:opacity-90\"\n            >\n              <ShoppingBag className=\"h-5 w-5\" />\n              Browse Marketplace\n            </button>\n          </div>\n        ) : (\n          // Orders List\n          <ul className=\"space-y-6\">\n            {orders.map((order) => (\n              <li key={order.id}>\n                <OrderCard\n                  order={order}\n                  onOpenInstallModal={handleOpenInstallModal}\n                  installingItem={isModalOpen ? selectedItemId : null}\n                />\n              </li>\n            ))}\n            {hasMore && (\n              <li className=\"flex justify-center pt-4 list-none\">\n                <button\n                  type=\"button\"\n                  onClick={loadMore}\n                  disabled={loading}\n                  className=\"flex items-center gap-2 rounded-lg border border-border-default px-6 py-2.5 text-sm font-medium text-text-primary hover:bg-bg-subtle disabled:opacity-50\"\n                  aria-label={t('common.loadMore', { defaultValue: 'Load more' })}\n                >\n                  {loading ? <Loader2 className=\"h-4 w-4 animate-spin\" aria-hidden=\"true\" /> : null}\n                  {t('common.loadMore', { defaultValue: 'Load more' })}\n                </button>\n              </li>\n            )}\n          </ul>\n        )}\n      </main>\n\n      {/* Install App Modal */}\n      {selectedApp && (\n        <InstallAppModal\n          isOpen={isModalOpen}\n          onClose={handleCloseModal}\n          app={selectedApp}\n          orderId={selectedOrderId}\n          onInstallSuccess={handleInstallSuccess}\n          onInstallError={handleInstallError}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"OrdersPage.js","names":[],"sources":["../../src/pages/OrdersPage.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useMemo, useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport {\n  Package,\n  ArrowLeft,\n  ShoppingBag,\n  Download,\n  CheckCircle,\n  Clock,\n  XCircle,\n  RefreshCw,\n  Loader2,\n} from 'lucide-react';\nimport { useStore } from '../providers/StoreProvider';\nimport { useInstallations } from '../hooks/useInstallations';\nimport { useOrders } from '../hooks/useOrders';\nimport { formatPrice } from '../utils';\nimport { InstallAppModal, type AppInfo } from '../components/InstallAppModal';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useOrderStatusUpdatedSubscription } from '../generated/global-operations';\n\n// Local types for UI\ninterface OrderItem {\n  id: string;\n  productId: string;\n  productName: string;\n  productIcon?: string;\n  productType: string;\n  version?: string;\n  quantity: number;\n  unitPrice: number;\n  totalPrice: number;\n  installed?: boolean;\n}\n\ninterface UIOrder {\n  id: string;\n  orderNumber: string;\n  items: OrderItem[];\n  subtotal: number;\n  tax: number;\n  total: number;\n  status:\n    | 'PENDING'\n    | 'PROCESSING'\n    | 'COMPLETED'\n    | 'FAILED'\n    | 'CANCELLED'\n    | 'FULFILLED'\n    | 'PROCESSED'\n    | 'REFUNDED';\n  createdAt: string;\n}\n\n/**\n * Get status icon and color\n */\nconst getStatusDisplay = (status: UIOrder['status']) => {\n  switch (status) {\n    case 'COMPLETED':\n    case 'FULFILLED':\n    case 'PROCESSED':\n      return {\n        icon: CheckCircle,\n        color: 'text-status-success-text bg-status-success-bg-subtle/10',\n        label: 'Completed',\n      };\n    case 'PROCESSING':\n      return {\n        icon: Clock,\n        color: 'text-status-warning-text bg-status-warning-bg-subtle/10',\n        label: 'Processing',\n      };\n    case 'PENDING':\n      return {\n        icon: Clock,\n        color: 'text-status-warning-text bg-status-warning-bg-subtle/10',\n        label: 'Pending',\n      };\n    case 'FAILED':\n      return {\n        icon: XCircle,\n        color: 'text-status-error-text bg-status-error-bg-subtle/10',\n        label: 'Failed',\n      };\n    case 'REFUNDED':\n      return {\n        icon: RefreshCw,\n        color: 'text-status-warning-text bg-status-warning-bg-subtle/10',\n        label: 'Refunded',\n      };\n    case 'CANCELLED':\n      return { icon: RefreshCw, color: 'text-text-muted bg-bg-sunken', label: 'Cancelled' };\n    default:\n      return { icon: Clock, color: 'text-text-muted', label: status };\n  }\n};\n\n/**\n * Order item card with Install App button\n */\nconst OrderItemCard: FC<{\n  item: OrderItem;\n  orderId: string;\n  orderStatus: UIOrder['status'];\n  onOpenInstallModal: (orderId: string, item: OrderItem) => void;\n  installing: boolean;\n}> = ({ item, orderId, orderStatus, onOpenInstallModal, installing }) => {\n  const isOrderSuccessful =\n    orderStatus === 'COMPLETED' || orderStatus === 'FULFILLED' || orderStatus === 'PROCESSED';\n  const isInstallable = item.productType !== 'PHYSICAL' && item.productType !== 'MERCHANDISE';\n  return (\n    <div className=\"flex items-center gap-4 rounded-lg border border-border-default bg-bg-sunken/50 p-4\">\n      {/* Product Icon */}\n      <div className=\"size-14 flex-shrink-0 overflow-hidden rounded-lg bg-bg-sunken\">\n        {item.productIcon ? (\n          <img src={item.productIcon} alt={item.productName} className=\"size-full object-cover\" />\n        ) : (\n          <div className=\"flex size-full items-center justify-center text-lg font-bold text-text-muted\">\n            {item.productName.charAt(0)}\n          </div>\n        )}\n      </div>\n\n      {/* Product Info */}\n      <div className=\"flex-1 min-w-0\">\n        <h4 className=\"font-medium text-text-primary truncate\">{item.productName}</h4>\n        <div className=\"flex items-center gap-2 mt-1\">\n          <span className=\"inline-flex items-center rounded-full bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-muted\">\n            {item.productType}\n          </span>\n          <span className=\"text-sm text-text-muted\">\n            {item.quantity} x {formatPrice(item.unitPrice)}\n          </span>\n        </div>\n      </div>\n\n      {/* Price */}\n      <div className=\"text-right\">\n        <p className=\"font-semibold text-text-primary\">{formatPrice(item.totalPrice)}</p>\n      </div>\n\n      {/* Install Button - only show when order is successfully processed */}\n      <div className=\"flex-shrink-0\">\n        {item.installed ? (\n          <span className=\"inline-flex items-center gap-1.5 rounded-lg bg-status-success-bg-subtle/10 px-4 py-2 text-sm font-medium text-status-success-text\">\n            <CheckCircle className=\"size-4\" />\n            Installed\n          </span>\n        ) : isOrderSuccessful && isInstallable ? (\n          <button\n            type=\"button\"\n            onClick={() => onOpenInstallModal(orderId, item)}\n            disabled={installing}\n            className=\"inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-opacity hover:opacity-90 disabled:opacity-50\"\n          >\n            {installing ? (\n              <>\n                <Loader2 className=\"size-4 animate-spin\" />\n                Installing…\n              </>\n            ) : (\n              <>\n                <Download className=\"size-4\" />\n                Install App\n              </>\n            )}\n          </button>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\n/**\n * Order card component\n */\nconst OrderCard: FC<{\n  order: UIOrder;\n  onOpenInstallModal: (orderId: string, item: OrderItem) => void;\n  installingItem: string | null;\n}> = ({ order, onOpenInstallModal, installingItem }) => {\n  const statusDisplay = getStatusDisplay(order.status);\n  const StatusIcon = statusDisplay.icon;\n\n  return (\n    <div className=\"rounded-xl border border-border-default bg-bg-surface p-6 transition-shadow hover:shadow-md\">\n      {/* Order Header */}\n      <div className=\"flex items-start justify-between mb-4\">\n        <div>\n          <div className=\"flex items-center gap-3\">\n            <h3 className=\"text-lg font-semibold text-text-primary\">{order.orderNumber}</h3>\n            <span\n              className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-semibold ${statusDisplay.color}`}\n            >\n              <StatusIcon className=\"size-4\" />\n              {statusDisplay.label}\n            </span>\n          </div>\n          <p className=\"text-sm text-text-muted mt-1\">\n            {new Date(order.createdAt).toLocaleDateString('en-US', {\n              year: 'numeric',\n              month: 'long',\n              day: 'numeric',\n              hour: '2-digit',\n              minute: '2-digit',\n            })}\n          </p>\n        </div>\n        <div className=\"text-right\">\n          <p className=\"text-xl font-bold text-text-primary\">{formatPrice(order.total)}</p>\n          <p className=\"text-xs text-text-muted\">\n            {order.items.length} {order.items.length === 1 ? 'item' : 'items'}\n          </p>\n        </div>\n      </div>\n\n      {/* Order Items */}\n      <div className=\"space-y-3\">\n        {order.items.map((item) => (\n          <OrderItemCard\n            key={item.id}\n            item={item}\n            orderId={order.id}\n            orderStatus={order.status}\n            onOpenInstallModal={onOpenInstallModal}\n            installing={installingItem === item.id}\n          />\n        ))}\n      </div>\n\n      {/* Order Summary */}\n      <div className=\"mt-4 pt-4 border-t border-border-default\">\n        <div className=\"flex justify-between text-sm\">\n          <span className=\"text-text-muted\">Subtotal</span>\n          <span className=\"text-text-primary\">{formatPrice(order.subtotal)}</span>\n        </div>\n        <div className=\"flex justify-between text-sm mt-1\">\n          <span className=\"text-text-muted\">Tax</span>\n          <span className=\"text-text-primary\">{formatPrice(order.tax)}</span>\n        </div>\n      </div>\n    </div>\n  );\n};\n\n/**\n * OrdersPage component\n *\n * Displays a list of all orders with their items and Install App buttons\n */\nexport const OrdersPage: FC = () => {\n  const navigate = useNavigate();\n  const { basePath } = useStore();\n  const { t } = useI18n();\n  const { orders: backendOrders, loading, error, refetchOrders, hasMore, loadMore } = useOrders();\n  const { installations, refetch: refetchInstallations } = useInstallations();\n\n  useOrderStatusUpdatedSubscription({\n    onData: () => {\n      void refetchOrders();\n    },\n    onError: (err) => {\n      console.warn('OrderStatusUpdated subscription error:', err.message);\n    },\n  });\n\n  // Modal state\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [selectedOrderId, setSelectedOrderId] = useState<string | null>(null);\n  const [selectedApp, setSelectedApp] = useState<AppInfo | null>(null);\n  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);\n\n  const installedProductIds = useMemo(\n    () =>\n      new Set(\n        installations.flatMap((installation) =>\n          installation.status === 'ACTIVE' ? [installation.productId] : []\n        )\n      ),\n    [installations]\n  );\n\n  // Map backend orders to UI format\n  const orders: UIOrder[] = backendOrders.map((order) => {\n    // Calculate subtotal from line items (with safety check)\n    const lineItems = order.lineItems || [];\n    const subtotal = lineItems.reduce((sum, item) => sum + item.subtotal, 0);\n    // Estimate tax (backend doesn't store separate tax amount)\n    const tax = order.total - subtotal;\n\n    // Map lineItems to items with unique IDs\n    const items: OrderItem[] = lineItems.map((item, index) => ({\n      id: `${order.id}-${index}`, // Generate unique ID for each line item\n      productId: item.productId,\n      productName: item.name, // Backend uses 'name', UI expects 'productName'\n      productIcon: item.productIcon,\n      productType:\n        item.productType ||\n        (typeof item.itemType === 'string' ? item.itemType.toUpperCase() : 'APP'),\n      version: item.version,\n      quantity: item.quantity,\n      unitPrice: item.unitPrice,\n      totalPrice: item.subtotal, // Backend uses 'subtotal', UI expects 'totalPrice'\n      installed: installedProductIds.has(item.productId),\n    }));\n\n    return {\n      id: order.id,\n      orderNumber: `#${order.id.slice(-8).toUpperCase()}`, // Generate order number from ID\n      items,\n      subtotal,\n      tax,\n      total: order.total,\n      status: order.status as UIOrder['status'], // Cast to union type\n      createdAt: order.createdAt,\n    };\n  });\n\n  const handleOpenInstallModal = (orderId: string, item: OrderItem) => {\n    setSelectedOrderId(orderId);\n    setSelectedItemId(item.id);\n    setSelectedApp({\n      id: item.productId,\n      name: item.productName,\n      icon: item.productIcon,\n      type: item.productType,\n      version: item.version,\n    });\n    setIsModalOpen(true);\n  };\n\n  const handleCloseModal = () => {\n    setIsModalOpen(false);\n    setSelectedOrderId(null);\n    setSelectedApp(null);\n    setSelectedItemId(null);\n  };\n\n  const handleInstallSuccess = (workspaceId: string, workspaceName: string) => {\n    if (!selectedOrderId || !selectedItemId) return;\n\n    console.log(\n      `Successfully installed ${selectedApp?.name} to workspace ${workspaceName} (${workspaceId})`\n    );\n\n    // Reset modal state\n    handleCloseModal();\n    void refetchInstallations();\n  };\n\n  const handleInstallError = (error: Error) => {\n    console.error('Installation failed:', error.message);\n    // Error is displayed in modal, no need to close it\n  };\n\n  const handleBrowseMarketplace = () => {\n    navigate(`${basePath}/marketplace`);\n  };\n\n  return (\n    <div className=\"h-full overflow-y-auto\">\n      {/* Header */}\n      <header className=\"sticky top-0 z-10 border-b border-border-default bg-bg-surface px-6 py-4\">\n        <div className=\"mx-auto max-w-4xl\">\n          <div className=\"flex items-center gap-4\">\n            <button\n              type=\"button\"\n              onClick={() => navigate(-1)}\n              aria-label=\"Go back\"\n              className=\"cursor-pointer rounded-lg p-2 text-text-muted transition-colors hover:bg-bg-sunken hover:text-text-primary\"\n            >\n              <ArrowLeft className=\"size-5\" />\n            </button>\n            <div className=\"flex items-center gap-3\">\n              <Package className=\"size-6 text-text-primary\" />\n              <h1 className=\"text-xl font-bold text-text-primary\">\n                {t('pages.orders.title', { defaultValue: 'My Orders' })}\n              </h1>\n              {orders.length > 0 && (\n                <span className=\"rounded-full bg-action-primary-bg px-2.5 py-0.5 text-sm font-medium text-action-primary-text\">\n                  {orders.length}\n                </span>\n              )}\n            </div>\n          </div>\n        </div>\n      </header>\n\n      <main className=\"mx-auto max-w-4xl p-6\">\n        {loading ? (\n          // Loading State\n          <output\n            aria-label=\"Loading orders\"\n            className=\"flex flex-col items-center justify-center py-16\"\n          >\n            <Loader2 className=\"size-12 animate-spin text-text-muted mb-4\" aria-hidden=\"true\" />\n            <p className=\"text-text-muted\">Loading your orders…</p>\n          </output>\n        ) : error ? (\n          // Error State\n          <div role=\"alert\" className=\"flex flex-col items-center justify-center py-16 text-center\">\n            <div className=\"mb-6 rounded-full bg-status-error-bg-subtle/10 p-6\">\n              <XCircle className=\"size-16 text-status-error-text\" />\n            </div>\n            <h2 className=\"mb-2 text-2xl font-bold text-text-primary\">\n              {t('pages.orders.failedToLoad', { defaultValue: 'Failed to load orders' })}\n            </h2>\n            <p className=\"mb-6 max-w-md text-text-muted\">\n              {error.message || 'An error occurred while loading your orders. Please try again.'}\n            </p>\n            <button\n              type=\"button\"\n              onClick={handleBrowseMarketplace}\n              className=\"cursor-pointer flex items-center gap-2 rounded-lg bg-action-primary-bg px-6 py-3 font-semibold text-action-primary-text transition-opacity hover:opacity-90\"\n            >\n              <ShoppingBag className=\"size-5\" />\n              Browse Marketplace\n            </button>\n          </div>\n        ) : orders.length === 0 ? (\n          // Empty State\n          <div className=\"flex flex-col items-center justify-center py-16 text-center\">\n            <div className=\"mb-6 rounded-full bg-bg-sunken p-6\">\n              <ShoppingBag className=\"size-16 text-text-muted\" />\n            </div>\n            <h2 className=\"mb-2 text-2xl font-bold text-text-primary\">\n              {t('pages.orders.emptyTitle', { defaultValue: 'No orders yet' })}\n            </h2>\n            <p className=\"mb-6 max-w-md text-text-muted\">\n              You have not placed any orders yet. Browse the marketplace to discover apps and\n              products!\n            </p>\n            <button\n              type=\"button\"\n              onClick={handleBrowseMarketplace}\n              className=\"cursor-pointer flex items-center gap-2 rounded-lg bg-action-primary-bg px-6 py-3 font-semibold text-action-primary-text transition-opacity hover:opacity-90\"\n            >\n              <ShoppingBag className=\"size-5\" />\n              Browse Marketplace\n            </button>\n          </div>\n        ) : (\n          // Orders List\n          <ul className=\"space-y-6\">\n            {orders.map((order) => (\n              <li key={order.id}>\n                <OrderCard\n                  order={order}\n                  onOpenInstallModal={handleOpenInstallModal}\n                  installingItem={isModalOpen ? selectedItemId : null}\n                />\n              </li>\n            ))}\n            {hasMore && (\n              <li className=\"flex justify-center pt-4 list-none\">\n                <button\n                  type=\"button\"\n                  onClick={loadMore}\n                  disabled={loading}\n                  className=\"flex items-center gap-2 rounded-lg border border-border-default px-6 py-2.5 text-sm font-medium text-text-primary hover:bg-bg-subtle disabled:opacity-50\"\n                  aria-label={t('common.loadMore', { defaultValue: 'Load more' })}\n                >\n                  {loading ? <Loader2 className=\"size-4 animate-spin\" aria-hidden=\"true\" /> : null}\n                  {t('common.loadMore', { defaultValue: 'Load more' })}\n                </button>\n              </li>\n            )}\n          </ul>\n        )}\n      </main>\n\n      {/* Install App Modal */}\n      {selectedApp && (\n        <InstallAppModal\n          isOpen={isModalOpen}\n          onClose={handleCloseModal}\n          app={selectedApp}\n          orderId={selectedOrderId}\n          onInstallSuccess={handleInstallSuccess}\n          onInstallError={handleInstallError}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/pages/ProductCategoryPage.js

@@ -7,6 +7,7 @@ import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { useNavigate as s, useParams as c } from "react-router-dom";
 //#region src/pages/ProductCategoryPage.tsx
 var l = ({ product: e, onOpen: t, noDesc: n }) => /* @__PURE__ */ o("button", {
+	type: "button",
 	onClick: () => t(e.id),
 	className: "cursor-pointer rounded-xl border border-border-default bg-bg-surface p-4 text-left transition-colors hover:bg-bg-sunken",
 	children: [
@@ -35,10 +36,11 @@ var l = ({ product: e, onOpen: t, noDesc: n }) => /* @__PURE__ */ o("button", {
 			children: /* @__PURE__ */ o("div", {
 				className: "mx-auto flex max-w-6xl items-center gap-3",
 				children: [/* @__PURE__ */ a("button", {
+					type: "button",
 					onClick: () => u(-1),
 					"aria-label": "Go back",
 					className: "cursor-pointer rounded-lg p-2 text-text-muted hover:bg-bg-sunken hover:text-text-primary",
-					children: /* @__PURE__ */ a(i, { className: "h-5 w-5" })
+					children: /* @__PURE__ */ a(i, { className: "size-5" })
 				}), /* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("h1", {
 					className: "text-2xl font-bold text-text-primary",
 					children: p("pages.category.title", {