@burdenoff/microfe-store 2026.625.5 → 2026.626.1

package/dist/pages/MyLicensesPage.js

@@ -3,146 +3,141 @@ import { useMyEntitlements as t } from "../hooks/useStoreGraphQL.js";
 import { useMemo as n } from "react";
 import { QuotaMeter as r } from "@burdenoff/fe-libs/shared/components";
 import { useI18n as i } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AlertCircle as a, ArrowLeft as o, KeyRound as s, Loader2 as c, ShieldCheck as l } from "lucide-react";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
-import { useNavigate as p } from "react-router-dom";
+import { AlertCircle as a, ArrowLeft as o, Loader2 as s, ShieldCheck as c } from "lucide-react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useNavigate as f } from "react-router-dom";
+import { EmphasisPanel as p, IllustratedEmptyState as m, PagePurpose as h } from "@burdenoff/fe-libs/ui";
 //#region src/pages/MyLicensesPage.tsx
-var m = (e) => e === "ACTIVE" ? "bg-status-success-bg-subtle text-status-success-text" : e === "SUSPENDED" || e === "PENDING" ? "bg-status-warning-bg-subtle text-status-warning-text" : e === "EXPIRED" || e === "REVOKED" ? "bg-status-error-bg-subtle text-status-error-text" : "bg-bg-sunken text-text-muted", h = () => {
-	let h = p(), { basePath: g } = e(), { t: _ } = i(), { entitlements: v, hasMore: y, loading: b, error: x, refetch: S, loadMore: C } = t(), w = n(() => v.slice().sort((e, t) => e.id.localeCompare(t.id)), [v]);
-	return /* @__PURE__ */ f("div", {
+var g = (e) => e === "ACTIVE" ? "bg-status-success-bg-subtle text-status-success-text" : e === "SUSPENDED" || e === "PENDING" ? "bg-status-warning-bg-subtle text-status-warning-text" : e === "EXPIRED" || e === "REVOKED" ? "bg-status-error-bg-subtle text-status-error-text" : "bg-bg-sunken text-text-muted", _ = () => {
+	let _ = f(), { basePath: v } = e(), { t: y } = i(), { entitlements: b, hasMore: x, loading: S, error: C, refetch: w, loadMore: T } = t(), E = n(() => b.slice().sort((e, t) => e.id.localeCompare(t.id)), [b]);
+	return /* @__PURE__ */ d("div", {
 		className: "flex h-full flex-col",
-		children: [/* @__PURE__ */ d("header", {
-			className: "sticky top-0 z-10 border-b border-border-default bg-bg-surface px-6 py-4",
-			children: /* @__PURE__ */ f("div", {
+		children: [/* @__PURE__ */ u("header", {
+			className: "sticky top-0 z-10 border-b border-border-seam bg-bg-surface px-6 py-4",
+			children: /* @__PURE__ */ d("div", {
 				className: "mx-auto flex max-w-5xl items-center gap-4",
-				children: [/* @__PURE__ */ d("button", {
+				children: [/* @__PURE__ */ u("button", {
 					type: "button",
-					onClick: () => h(-1),
+					onClick: () => _(-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__ */ d(o, { className: "size-5" })
-				}), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h1", {
+					children: /* @__PURE__ */ u(o, { className: "size-5" })
+				}), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("h1", {
 					className: "text-2xl font-bold text-text-primary",
-					children: _("pages.licenses.title", { defaultValue: "My Licenses" })
-				}), /* @__PURE__ */ d("p", {
+					children: y("pages.licenses.title", { defaultValue: "My Licenses" })
+				}), /* @__PURE__ */ u("p", {
 					className: "text-sm text-text-muted",
-					children: _("pages.licenses.subtitle", { defaultValue: "Review and manage your product entitlements" })
+					children: y("pages.licenses.subtitle", { defaultValue: "Review and manage your product entitlements" })
 				})] })]
 			})
-		}), /* @__PURE__ */ d("main", {
+		}), /* @__PURE__ */ u("main", {
 			className: "flex-1 overflow-y-auto p-6",
 			children: /* @__PURE__ */ d("div", {
 				className: "mx-auto max-w-5xl",
-				children: b ? /* @__PURE__ */ d("output", {
+				children: [/* @__PURE__ */ u(h, {
+					className: "mb-6",
+					children: "Every paid app you own grants a license (entitlement) that proves your right to use it. Check here to confirm a license is active, find a license key to enter into a product, and see when paid access expires — so you're never caught out by a lapsed or suspended entitlement."
+				}), S ? /* @__PURE__ */ u("output", {
 					"aria-label": "Loading licenses",
 					className: "flex items-center justify-center py-16",
-					children: /* @__PURE__ */ d(c, {
+					children: /* @__PURE__ */ u(s, {
 						className: "size-8 animate-spin text-text-muted",
 						"aria-hidden": "true"
 					})
-				}) : x ? /* @__PURE__ */ f("div", {
+				}) : C ? /* @__PURE__ */ d("div", {
 					role: "alert",
 					className: "rounded-xl border border-status-error-border bg-status-error-bg-subtle p-8 text-center",
 					children: [
-						/* @__PURE__ */ d(a, { className: "mx-auto mb-3 size-10 text-status-error-text" }),
-						/* @__PURE__ */ d("h3", {
+						/* @__PURE__ */ u(a, { className: "mx-auto mb-3 size-10 text-status-error-text" }),
+						/* @__PURE__ */ u("h3", {
 							className: "text-lg font-semibold text-status-error-text",
-							children: _("pages.licenses.failedToLoad", { defaultValue: "Failed to load licenses" })
+							children: y("pages.licenses.failedToLoad", { defaultValue: "Failed to load licenses" })
 						}),
-						/* @__PURE__ */ d("p", {
+						/* @__PURE__ */ u("p", {
 							className: "mt-2 text-sm text-text-muted",
-							children: x.message
+							children: C.message
 						}),
-						/* @__PURE__ */ d("button", {
+						/* @__PURE__ */ u("button", {
 							type: "button",
-							onClick: () => S(),
+							onClick: () => w(),
 							className: "mt-4 cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text",
-							children: _("common.tryAgain", { defaultValue: "Try Again" })
+							children: y("common.tryAgain", { defaultValue: "Try Again" })
 						})
 					]
-				}) : w.length === 0 ? /* @__PURE__ */ f("div", {
-					className: "rounded-xl border border-border-default bg-bg-surface p-12 text-center",
-					children: [
-						/* @__PURE__ */ d(s, { className: "mx-auto mb-3 size-12 text-text-muted" }),
-						/* @__PURE__ */ d("h3", {
-							className: "text-lg font-semibold text-text-primary",
-							children: _("pages.licenses.emptyTitle", { defaultValue: "No licenses yet" })
-						}),
-						/* @__PURE__ */ d("p", {
-							className: "mt-2 text-sm text-text-muted",
-							children: _("pages.licenses.emptyDescription", { defaultValue: "Purchase apps from the marketplace to see your licenses here." })
-						}),
-						/* @__PURE__ */ d("button", {
-							type: "button",
-							onClick: () => h(`${g}/marketplace`),
-							className: "mt-4 cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text",
-							children: _("pages.licenses.browseMarketplace", { defaultValue: "Browse Marketplace" })
-						})
-					]
-				}) : /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("div", {
-					className: "mb-6 rounded-xl border border-border-default bg-bg-surface p-4",
-					children: /* @__PURE__ */ d(r, {
-						label: _("pages.licenses.activeLicenses", { defaultValue: "Active licenses" }),
-						used: w.filter((e) => e.status === "ACTIVE").length,
+				}) : E.length === 0 ? /* @__PURE__ */ u(m, {
+					illustration: "empty-data",
+					title: y("pages.licenses.emptyTitle", { defaultValue: "No licenses yet" }),
+					description: y("pages.licenses.emptyDescription", { defaultValue: "Purchase apps from the marketplace to see your licenses here." }),
+					action: /* @__PURE__ */ u("button", {
+						type: "button",
+						onClick: () => _(`${v}/marketplace`),
+						className: "cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text",
+						children: y("pages.licenses.browseMarketplace", { defaultValue: "Browse Marketplace" })
+					})
+				}) : /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(p, {
+					className: "mb-6",
+					children: /* @__PURE__ */ u(r, {
+						label: y("pages.licenses.activeLicenses", { defaultValue: "Active licenses" }),
+						used: E.filter((e) => e.status === "ACTIVE").length,
 						limit: null,
-						unit: _("pages.licenses.licensesUnit", { defaultValue: "licenses" })
+						unit: y("pages.licenses.licensesUnit", { defaultValue: "licenses" })
 					})
-				}), /* @__PURE__ */ f("ul", {
+				}), /* @__PURE__ */ d("ul", {
 					className: "flex flex-col gap-y-4",
-					children: [w.map((e) => /* @__PURE__ */ d("li", {
-						className: "rounded-xl border border-border-default bg-bg-surface p-4",
-						children: /* @__PURE__ */ f("div", {
+					children: [E.map((e) => /* @__PURE__ */ u("li", {
+						className: "rounded-xl border border-border-seam bg-bg-surface p-4 transition-[box-shadow,border-color] hover:border-border-strong hover:shadow-[var(--shadow-pop)]",
+						children: /* @__PURE__ */ d("div", {
 							className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
-							children: [/* @__PURE__ */ f("div", { children: [
-								/* @__PURE__ */ f("div", {
+							children: [/* @__PURE__ */ d("div", { children: [
+								/* @__PURE__ */ d("div", {
 									className: "flex items-center gap-2",
-									children: [/* @__PURE__ */ d(l, { className: "size-4 text-status-success-text" }), /* @__PURE__ */ f("h3", {
+									children: [/* @__PURE__ */ u(c, { className: "size-4 text-status-success-text" }), /* @__PURE__ */ d("h3", {
 										className: "font-semibold text-text-primary",
 										children: ["Product ", e.productId]
 									})]
 								}),
-								/* @__PURE__ */ d("p", {
+								/* @__PURE__ */ u("p", {
 									className: "mt-1 text-sm text-text-muted",
-									children: _("pages.licenses.entitlementId", {
+									children: y("pages.licenses.entitlementId", {
 										defaultValue: `Entitlement ID: ${e.id}`,
 										id: e.id
 									})
 								}),
-								e.licenseKey && /* @__PURE__ */ d("p", {
+								e.licenseKey && /* @__PURE__ */ u("p", {
 									className: "mt-1 text-sm text-text-muted",
-									children: _("pages.licenses.licenseKey", {
+									children: y("pages.licenses.licenseKey", {
 										defaultValue: `License key: ${e.licenseKey}`,
 										key: e.licenseKey
 									})
 								}),
-								e.expiresAt && /* @__PURE__ */ d("p", {
+								e.expiresAt && /* @__PURE__ */ u("p", {
 									className: "mt-1 text-sm text-text-muted",
-									children: _("pages.licenses.expiresOn", {
+									children: y("pages.licenses.expiresOn", {
 										defaultValue: `Expires on ${new Date(e.expiresAt).toLocaleDateString()}`,
 										date: new Date(e.expiresAt).toLocaleDateString()
 									})
 								})
-							] }), /* @__PURE__ */ d("span", {
-								className: `rounded-full px-3 py-1 text-xs font-semibold ${m(e.status)}`,
+							] }), /* @__PURE__ */ u("span", {
+								className: `rounded-full px-3 py-1 text-xs font-semibold ${g(e.status)} ${e.status === "ACTIVE" ? "motion-safe:animate-vc-glow-pulse" : ""}`,
 								children: e.status
 							})]
 						})
-					}, e.id)), y && /* @__PURE__ */ d("li", {
+					}, e.id)), x && /* @__PURE__ */ u("li", {
 						className: "flex justify-center pt-4 list-none",
-						children: /* @__PURE__ */ d("button", {
+						children: /* @__PURE__ */ u("button", {
 							type: "button",
-							onClick: C,
-							disabled: b,
+							onClick: T,
+							disabled: S,
 							className: "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",
-							children: b ? "Loading…" : "Load more"
+							children: S ? "Loading…" : "Load more"
 						})
 					})]
-				})] })
+				})] })]
 			})
 		})]
 	});
 };
 //#endregion
-export { h as MyLicensesPage };
+export { _ as MyLicensesPage };
 
 //# sourceMappingURL=MyLicensesPage.js.map

package/dist/pages/MyLicensesPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"MyLicensesPage.js","names":[],"sources":["../../src/pages/MyLicensesPage.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useMemo } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { KeyRound, ArrowLeft, ShieldCheck, AlertCircle, Loader2 } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { QuotaMeter } from '@burdenoff/fe-libs/shared/components';\nimport { useStore } from '../providers/StoreProvider';\nimport { useMyEntitlements } from '../hooks/useStoreGraphQL';\n\ninterface LicenseItem {\n  id: string;\n  productId: string;\n  status: string;\n  licenseKey?: string | null;\n  expiresAt?: string | null;\n}\n\nconst statusClass = (status: string): string => {\n  if (status === 'ACTIVE') return 'bg-status-success-bg-subtle text-status-success-text';\n  if (status === 'SUSPENDED' || status === 'PENDING') {\n    return 'bg-status-warning-bg-subtle text-status-warning-text';\n  }\n  if (status === 'EXPIRED' || status === 'REVOKED') {\n    return 'bg-status-error-bg-subtle text-status-error-text';\n  }\n  return 'bg-bg-sunken text-text-muted';\n};\n\nexport const MyLicensesPage: FC = () => {\n  const navigate = useNavigate();\n  const { basePath } = useStore();\n  const { t } = useI18n();\n  const { entitlements, hasMore, loading, error, refetch, loadMore } = useMyEntitlements();\n\n  const licenses = useMemo(\n    () => (entitlements as LicenseItem[]).slice().sort((a, b) => a.id.localeCompare(b.id)),\n    [entitlements]\n  );\n\n  return (\n    <div className=\"flex h-full flex-col\">\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 flex max-w-5xl 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>\n            <h1 className=\"text-2xl font-bold text-text-primary\">\n              {t('pages.licenses.title', { defaultValue: 'My Licenses' })}\n            </h1>\n            <p className=\"text-sm text-text-muted\">\n              {t('pages.licenses.subtitle', {\n                defaultValue: 'Review and manage your product entitlements',\n              })}\n            </p>\n          </div>\n        </div>\n      </header>\n\n      <main className=\"flex-1 overflow-y-auto p-6\">\n        <div className=\"mx-auto max-w-5xl\">\n          {loading ? (\n            <output\n              aria-label=\"Loading licenses\"\n              className=\"flex items-center justify-center py-16\"\n            >\n              <Loader2 className=\"size-8 animate-spin text-text-muted\" aria-hidden=\"true\" />\n            </output>\n          ) : error ? (\n            <div\n              role=\"alert\"\n              className=\"rounded-xl border border-status-error-border bg-status-error-bg-subtle p-8 text-center\"\n            >\n              <AlertCircle className=\"mx-auto mb-3 size-10 text-status-error-text\" />\n              <h3 className=\"text-lg font-semibold text-status-error-text\">\n                {t('pages.licenses.failedToLoad', { defaultValue: 'Failed to load licenses' })}\n              </h3>\n              <p className=\"mt-2 text-sm text-text-muted\">{error.message}</p>\n              <button\n                type=\"button\"\n                onClick={() => refetch()}\n                className=\"mt-4 cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text\"\n              >\n                {t('common.tryAgain', { defaultValue: 'Try Again' })}\n              </button>\n            </div>\n          ) : licenses.length === 0 ? (\n            <div className=\"rounded-xl border border-border-default bg-bg-surface p-12 text-center\">\n              <KeyRound className=\"mx-auto mb-3 size-12 text-text-muted\" />\n              <h3 className=\"text-lg font-semibold text-text-primary\">\n                {t('pages.licenses.emptyTitle', { defaultValue: 'No licenses yet' })}\n              </h3>\n              <p className=\"mt-2 text-sm text-text-muted\">\n                {t('pages.licenses.emptyDescription', {\n                  defaultValue: 'Purchase apps from the marketplace to see your licenses here.',\n                })}\n              </p>\n              <button\n                type=\"button\"\n                onClick={() => navigate(`${basePath}/marketplace`)}\n                className=\"mt-4 cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text\"\n              >\n                {t('pages.licenses.browseMarketplace', { defaultValue: 'Browse Marketplace' })}\n              </button>\n            </div>\n          ) : (\n            <>\n              {/*\n                Inline quota meter showing active-license consumption vs the\n                workspace plan limit. The limit is sourced from the billing\n                summary when available; passing `null` renders an\n                \"Unlimited\" indicator instead of misleading 0/0 progress.\n              */}\n              <div className=\"mb-6 rounded-xl border border-border-default bg-bg-surface p-4\">\n                <QuotaMeter\n                  label={t('pages.licenses.activeLicenses', {\n                    defaultValue: 'Active licenses',\n                  })}\n                  used={licenses.filter((l) => l.status === 'ACTIVE').length}\n                  limit={null}\n                  unit={t('pages.licenses.licensesUnit', {\n                    defaultValue: 'licenses',\n                  })}\n                />\n              </div>\n              <ul className=\"flex flex-col gap-y-4\">\n                {licenses.map((license) => (\n                  <li\n                    key={license.id}\n                    className=\"rounded-xl border border-border-default bg-bg-surface p-4\"\n                  >\n                    <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n                      <div>\n                        <div className=\"flex items-center gap-2\">\n                          <ShieldCheck className=\"size-4 text-status-success-text\" />\n                          <h3 className=\"font-semibold text-text-primary\">\n                            Product {license.productId}\n                          </h3>\n                        </div>\n                        <p className=\"mt-1 text-sm text-text-muted\">\n                          {t('pages.licenses.entitlementId', {\n                            defaultValue: `Entitlement ID: ${license.id}`,\n                            id: license.id,\n                          })}\n                        </p>\n                        {license.licenseKey && (\n                          <p className=\"mt-1 text-sm text-text-muted\">\n                            {t('pages.licenses.licenseKey', {\n                              defaultValue: `License key: ${license.licenseKey}`,\n                              key: license.licenseKey,\n                            })}\n                          </p>\n                        )}\n                        {license.expiresAt && (\n                          <p className=\"mt-1 text-sm text-text-muted\">\n                            {t('pages.licenses.expiresOn', {\n                              defaultValue: `Expires on ${new Date(license.expiresAt).toLocaleDateString()}`,\n                              date: new Date(license.expiresAt).toLocaleDateString(),\n                            })}\n                          </p>\n                        )}\n                      </div>\n                      <span\n                        className={`rounded-full px-3 py-1 text-xs font-semibold ${statusClass(license.status)}`}\n                      >\n                        {license.status}\n                      </span>\n                    </div>\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=\"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                    >\n                      {loading ? 'Loading…' : 'Load more'}\n                    </button>\n                  </li>\n                )}\n              </ul>\n            </>\n          )}\n        </div>\n      </main>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"MyLicensesPage.js","names":[],"sources":["../../src/pages/MyLicensesPage.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useMemo } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { ArrowLeft, ShieldCheck, AlertCircle, Loader2 } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { QuotaMeter } from '@burdenoff/fe-libs/shared/components';\nimport { EmphasisPanel, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { useStore } from '../providers/StoreProvider';\nimport { useMyEntitlements } from '../hooks/useStoreGraphQL';\n\ninterface LicenseItem {\n  id: string;\n  productId: string;\n  status: string;\n  licenseKey?: string | null;\n  expiresAt?: string | null;\n}\n\nconst statusClass = (status: string): string => {\n  if (status === 'ACTIVE') return 'bg-status-success-bg-subtle text-status-success-text';\n  if (status === 'SUSPENDED' || status === 'PENDING') {\n    return 'bg-status-warning-bg-subtle text-status-warning-text';\n  }\n  if (status === 'EXPIRED' || status === 'REVOKED') {\n    return 'bg-status-error-bg-subtle text-status-error-text';\n  }\n  return 'bg-bg-sunken text-text-muted';\n};\n\nexport const MyLicensesPage: FC = () => {\n  const navigate = useNavigate();\n  const { basePath } = useStore();\n  const { t } = useI18n();\n  const { entitlements, hasMore, loading, error, refetch, loadMore } = useMyEntitlements();\n\n  const licenses = useMemo(\n    () => (entitlements as LicenseItem[]).slice().sort((a, b) => a.id.localeCompare(b.id)),\n    [entitlements]\n  );\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      <header className=\"sticky top-0 z-10 border-b border-border-seam bg-bg-surface px-6 py-4\">\n        <div className=\"mx-auto flex max-w-5xl 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>\n            <h1 className=\"text-2xl font-bold text-text-primary\">\n              {t('pages.licenses.title', { defaultValue: 'My Licenses' })}\n            </h1>\n            <p className=\"text-sm text-text-muted\">\n              {t('pages.licenses.subtitle', {\n                defaultValue: 'Review and manage your product entitlements',\n              })}\n            </p>\n          </div>\n        </div>\n      </header>\n\n      <main className=\"flex-1 overflow-y-auto p-6\">\n        <div className=\"mx-auto max-w-5xl\">\n          <PagePurpose className=\"mb-6\">\n            Every paid app you own grants a license (entitlement) that proves your right to use it.\n            Check here to confirm a license is active, find a license key to enter into a product,\n            and see when paid access expires — so you're never caught out by a lapsed or suspended\n            entitlement.\n          </PagePurpose>\n          {loading ? (\n            <output\n              aria-label=\"Loading licenses\"\n              className=\"flex items-center justify-center py-16\"\n            >\n              <Loader2 className=\"size-8 animate-spin text-text-muted\" aria-hidden=\"true\" />\n            </output>\n          ) : error ? (\n            <div\n              role=\"alert\"\n              className=\"rounded-xl border border-status-error-border bg-status-error-bg-subtle p-8 text-center\"\n            >\n              <AlertCircle className=\"mx-auto mb-3 size-10 text-status-error-text\" />\n              <h3 className=\"text-lg font-semibold text-status-error-text\">\n                {t('pages.licenses.failedToLoad', { defaultValue: 'Failed to load licenses' })}\n              </h3>\n              <p className=\"mt-2 text-sm text-text-muted\">{error.message}</p>\n              <button\n                type=\"button\"\n                onClick={() => refetch()}\n                className=\"mt-4 cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text\"\n              >\n                {t('common.tryAgain', { defaultValue: 'Try Again' })}\n              </button>\n            </div>\n          ) : licenses.length === 0 ? (\n            <IllustratedEmptyState\n              illustration=\"empty-data\"\n              title={t('pages.licenses.emptyTitle', { defaultValue: 'No licenses yet' })}\n              description={t('pages.licenses.emptyDescription', {\n                defaultValue: 'Purchase apps from the marketplace to see your licenses here.',\n              })}\n              action={\n                <button\n                  type=\"button\"\n                  onClick={() => navigate(`${basePath}/marketplace`)}\n                  className=\"cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text\"\n                >\n                  {t('pages.licenses.browseMarketplace', { defaultValue: 'Browse Marketplace' })}\n                </button>\n              }\n            />\n          ) : (\n            <>\n              {/*\n                Inline quota meter showing active-license consumption vs the\n                workspace plan limit. The limit is sourced from the billing\n                summary when available; passing `null` renders an\n                \"Unlimited\" indicator instead of misleading 0/0 progress.\n              */}\n              <EmphasisPanel className=\"mb-6\">\n                <QuotaMeter\n                  label={t('pages.licenses.activeLicenses', {\n                    defaultValue: 'Active licenses',\n                  })}\n                  used={licenses.filter((l) => l.status === 'ACTIVE').length}\n                  limit={null}\n                  unit={t('pages.licenses.licensesUnit', {\n                    defaultValue: 'licenses',\n                  })}\n                />\n              </EmphasisPanel>\n              <ul className=\"flex flex-col gap-y-4\">\n                {licenses.map((license) => (\n                  <li\n                    key={license.id}\n                    className=\"rounded-xl border border-border-seam bg-bg-surface p-4 transition-[box-shadow,border-color] hover:border-border-strong hover:shadow-[var(--shadow-pop)]\"\n                  >\n                    <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n                      <div>\n                        <div className=\"flex items-center gap-2\">\n                          <ShieldCheck className=\"size-4 text-status-success-text\" />\n                          <h3 className=\"font-semibold text-text-primary\">\n                            Product {license.productId}\n                          </h3>\n                        </div>\n                        <p className=\"mt-1 text-sm text-text-muted\">\n                          {t('pages.licenses.entitlementId', {\n                            defaultValue: `Entitlement ID: ${license.id}`,\n                            id: license.id,\n                          })}\n                        </p>\n                        {license.licenseKey && (\n                          <p className=\"mt-1 text-sm text-text-muted\">\n                            {t('pages.licenses.licenseKey', {\n                              defaultValue: `License key: ${license.licenseKey}`,\n                              key: license.licenseKey,\n                            })}\n                          </p>\n                        )}\n                        {license.expiresAt && (\n                          <p className=\"mt-1 text-sm text-text-muted\">\n                            {t('pages.licenses.expiresOn', {\n                              defaultValue: `Expires on ${new Date(license.expiresAt).toLocaleDateString()}`,\n                              date: new Date(license.expiresAt).toLocaleDateString(),\n                            })}\n                          </p>\n                        )}\n                      </div>\n                      <span\n                        className={`rounded-full px-3 py-1 text-xs font-semibold ${statusClass(license.status)} ${\n                          license.status === 'ACTIVE'\n                            ? 'motion-safe:animate-vc-glow-pulse'\n                            : ''\n                        }`}\n                      >\n                        {license.status}\n                      </span>\n                    </div>\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=\"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                    >\n                      {loading ? 'Loading…' : 'Load more'}\n                    </button>\n                  </li>\n                )}\n              </ul>\n            </>\n          )}\n        </div>\n      </main>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/pages/OrderConfirmationPage.js

@@ -6,100 +6,101 @@ import { ArrowRight as s, CheckCircle2 as c, Copy as l, Download as u, KeyRound
 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";
+import { EmphasisPanel as v, NextSteps as y } from "@burdenoff/fe-libs/ui";
 //#region src/pages/OrderConfirmationPage.tsx
-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);
+var b = "\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", x = () => {
+	let x = h(), { basePath: S, authToken: C } = e(), { orderId: w } = g(), [T, E] = o(null), [D, O] = o([]), [k, A] = o(!0), [j, M] = o(null), [N, P] = o(null);
 	a(() => {
-		if (!S) return;
+		if (!w) return;
 		let e = !1;
 		return (async () => {
-			O(!0), A(null);
+			A(!0), M(null);
 			try {
 				let t = await _({
 					gateway: "global",
-					query: v,
-					variables: { id: S },
-					authToken: x || void 0
+					query: b,
+					variables: { id: w },
+					authToken: C || void 0
 				});
 				if (e) return;
 				if (t.errors?.length) throw Error(t.errors[0]?.message ?? "Failed to load order");
-				w(t.data?.getStoreOrder ?? null);
+				E(t.data?.getStoreOrder ?? null);
 				let n = new Set((t.data?.getStoreOrder?.lineItems ?? []).map((e) => e.productId));
-				E((t.data?.myEntitlements ?? []).filter((e) => n.has(e.productId)));
+				O((t.data?.myEntitlements ?? []).filter((e) => n.has(e.productId)));
 			} catch (t) {
 				if (e) return;
-				A(t instanceof Error ? t.message : "Failed to load order");
+				M(t instanceof Error ? t.message : "Failed to load order");
 			} finally {
-				e || O(!1);
+				e || A(!1);
 			}
 		})(), () => {
 			e = !0;
 		};
-	}, [S, x]);
-	let N = async (e) => {
+	}, [w, C]);
+	let F = async (e) => {
 		r("light");
 		try {
-			await n(e) ? (M(e), i("success"), setTimeout(() => M(null), 1500)) : i("error");
+			await n(e) ? (P(e), i("success"), setTimeout(() => P(null), 1500)) : i("error");
 		} catch {
 			i("error");
 		}
-	}, P = (e, t) => {
+	}, I = (e, t) => {
 		let n = new URLSearchParams();
 		n.set("install", e), t && n.set("licenseKey", t), window.location.href = `/vibecontrols/agents?${n.toString()}`;
 	};
 	return /* @__PURE__ */ m("main", {
 		className: "mx-auto max-w-3xl p-6",
 		children: [
-			/* @__PURE__ */ m("div", {
-				className: "rounded-2xl border border-border-default bg-surface-raised p-6 text-center",
+			/* @__PURE__ */ m(v, {
+				className: "rounded-2xl p-6 text-center",
 				children: [
 					/* @__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"
 					}),
-					C && /* @__PURE__ */ m("p", {
-						className: "mt-1 text-sm text-text-secondary",
+					T && /* @__PURE__ */ m("p", {
+						className: "mt-1 text-sm tabular-nums text-text-secondary",
 						children: [
 							"Total: ",
-							((e, n) => t(e, n || "USD"))(C.total, C.currency),
-							C.purchasedAt && ` • ${new Date(C.purchasedAt).toLocaleString()}`
+							((e, n) => t(e, n || "USD"))(T.total, T.currency),
+							T.purchasedAt && ` • ${new Date(T.purchasedAt).toLocaleString()}`
 						]
 					}),
-					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",
+					w && /* @__PURE__ */ m("div", {
+						className: "mx-auto mt-4 max-w-sm rounded-lg border border-border-seam bg-surface-default px-4 py-2 text-left",
 						children: [/* @__PURE__ */ p("p", {
 							className: "text-xs uppercase tracking-wide text-text-tertiary",
 							children: "Order ID"
 						}), /* @__PURE__ */ p("p", {
 							className: "mt-0.5 break-all font-mono text-xs text-text-primary",
-							children: S
+							children: w
 						})]
 					})
 				]
 			}),
-			k && /* @__PURE__ */ p("div", {
+			j && /* @__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: k
+				children: j
 			}),
-			D ? /* @__PURE__ */ p("output", {
+			k ? /* @__PURE__ */ p("output", {
 				className: "mt-6 block py-12 text-center text-text-secondary",
 				children: "Loading licenses…"
-			}) : T.length > 0 ? /* @__PURE__ */ m("div", {
+			}) : D.length > 0 ? /* @__PURE__ */ m("div", {
 				className: "mt-6",
 				children: [/* @__PURE__ */ m("h2", {
 					className: "mb-3 flex items-center gap-2 text-sm font-semibold text-text-primary",
 					children: [
 						/* @__PURE__ */ p(d, { className: "size-4" }),
 						"Your licenses (",
-						T.length,
+						D.length,
 						")"
 					]
 				}), /* @__PURE__ */ p("ul", {
 					className: "space-y-3",
-					children: T.map((e) => /* @__PURE__ */ p("li", {
-						className: "rounded-lg border border-border-default bg-surface-raised p-4",
+					children: D.map((e) => /* @__PURE__ */ p("li", {
+						className: "rounded-lg border border-border-seam bg-surface-raised p-4 transition-[box-shadow,border-color] hover:border-border-strong hover:shadow-[var(--shadow-pop)]",
 						children: /* @__PURE__ */ m("div", {
 							className: "flex items-start gap-3",
 							children: [
@@ -129,13 +130,13 @@ var v = "\n  query OrderConfirmation($id: ID!) {\n    getStoreOrder(id: $id) {\n
 												children: e.licenseKey
 											}), /* @__PURE__ */ p("button", {
 												type: "button",
-												onClick: () => void N(e.licenseKey),
+												onClick: () => void F(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__ */ p(l, { className: "size-3.5" })
 											})]
 										}),
-										j === e.licenseKey && /* @__PURE__ */ p("p", {
+										N === e.licenseKey && /* @__PURE__ */ p("p", {
 											className: "mt-1 text-xs text-status-success-text",
 											children: "Copied to clipboard"
 										})
@@ -143,7 +144,7 @@ var v = "\n  query OrderConfirmation($id: ID!) {\n    getStoreOrder(id: $id) {\n
 								}),
 								/* @__PURE__ */ m("button", {
 									type: "button",
-									onClick: () => P(e.productId, e.licenseKey),
+									onClick: () => I(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__ */ p(u, { className: "size-3.5" }), "Install to workspace"]
 								})
@@ -152,16 +153,48 @@ var v = "\n  query OrderConfirmation($id: ID!) {\n    getStoreOrder(id: $id) {\n
 					}, e.id))
 				})]
 			}) : null,
+			!k && /* @__PURE__ */ p(y, {
+				className: "mt-6",
+				storageKey: "store-order-confirmation",
+				title: "What's next?",
+				steps: [
+					{
+						id: "install",
+						label: "Install what you bought",
+						description: "Add each purchased app to a workspace using its license.",
+						icon: /* @__PURE__ */ p(u, { className: "size-4" }),
+						onClick: () => {
+							let e = D[0];
+							e && I(e.productId, e.licenseKey);
+						},
+						done: D.length === 0
+					},
+					{
+						id: "orders",
+						label: "Keep this receipt",
+						description: "Find this order any time under My Orders.",
+						icon: /* @__PURE__ */ p(f, { className: "size-4" }),
+						onClick: () => x(`${S}/orders`)
+					},
+					{
+						id: "shop",
+						label: "Discover more",
+						description: "Browse the marketplace for more apps and tools.",
+						icon: /* @__PURE__ */ p(s, { className: "size-4" }),
+						onClick: () => x(`${S}/marketplace`)
+					}
+				]
+			}),
 			/* @__PURE__ */ m("div", {
 				className: "mt-6 flex flex-col gap-2 sm:flex-row sm:justify-center",
 				children: [/* @__PURE__ */ m("button", {
 					type: "button",
-					onClick: () => y(`${b}/orders`),
+					onClick: () => x(`${S}/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__ */ p(f, { className: "size-4" }), "View My Orders"]
 				}), /* @__PURE__ */ m("button", {
 					type: "button",
-					onClick: () => y(`${b}/marketplace`),
+					onClick: () => x(`${S}/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__ */ p(s, { className: "size-4" })]
 				})]
@@ -170,6 +203,6 @@ var v = "\n  query OrderConfirmation($id: ID!) {\n    getStoreOrder(id: $id) {\n
 	});
 };
 //#endregion
-export { y as OrderConfirmationPage };
+export { x 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';\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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"}
+{"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 { EmphasisPanel, NextSteps } from '@burdenoff/fe-libs/ui';\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      <EmphasisPanel className=\"rounded-2xl 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 tabular-nums 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-seam 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      </EmphasisPanel>\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-seam bg-surface-raised p-4 transition-[box-shadow,border-color] hover:border-border-strong hover:shadow-[var(--shadow-pop)]\"\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      {!loading && (\n        <NextSteps\n          className=\"mt-6\"\n          storageKey=\"store-order-confirmation\"\n          title=\"What's next?\"\n          steps={[\n            {\n              id: 'install',\n              label: 'Install what you bought',\n              description: 'Add each purchased app to a workspace using its license.',\n              icon: <Download className=\"size-4\" />,\n              onClick: () => {\n                const first = entitlements[0];\n                if (first) installInWorkspace(first.productId, first.licenseKey);\n              },\n              done: entitlements.length === 0,\n            },\n            {\n              id: 'orders',\n              label: 'Keep this receipt',\n              description: 'Find this order any time under My Orders.',\n              icon: <Receipt className=\"size-4\" />,\n              onClick: () => navigate(`${basePath}/orders`),\n            },\n            {\n              id: 'shop',\n              label: 'Discover more',\n              description: 'Browse the marketplace for more apps and tools.',\n              icon: <ArrowRight className=\"size-4\" />,\n              onClick: () => navigate(`${basePath}/marketplace`),\n            },\n          ]}\n        />\n      )}\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":";;;;;;;;;;AA4CA,IAAM,IAA4B,4YA4BrB,UAAkC;CAC7C,IAAM,IAAW,GAAa,EACxB,EAAE,aAAU,iBAAc,GAAU,EACpC,EAAE,eAAY,GAAgC,EAC9C,CAAC,GAAO,KAAY,EAA8B,KAAK,EACvD,CAAC,GAAc,KAAmB,EAAwB,EAAE,CAAC,EAC7D,CAAC,GAAS,KAAc,EAAS,GAAK,EACtC,CAAC,GAAO,KAAY,EAAwB,KAAK,EACjD,CAAC,GAAW,KAAgB,EAAwB,KAAK;AAE/D,SAAgB;AACd,MAAI,CAAC,EAAS;EACd,IAAI,IAAY;AAmChB,UAlCa,YAAY;AAEvB,GADA,EAAW,GAAK,EAChB,EAAS,KAAK;AACd,OAAI;IACF,IAAM,IAAS,MAAM,EAGlB;KACD,SAAS;KACT,OAAO;KACP,WAAW,EAAE,IAAI,GAAS;KAC1B,WAAW,KAAa,KAAA;KACzB,CAAC;AACF,QAAI,EAAW;AACf,QAAI,EAAO,QAAQ,OACjB,OAAU,MAAM,EAAO,OAAO,IAAI,WAAW,uBAAuB;AAEtE,MAAS,EAAO,MAAM,iBAAiB,KAAK;IAE5C,IAAM,IAAa,IAAI,KACpB,EAAO,MAAM,eAAe,aAAa,EAAE,EAAE,KAAK,MAAS,EAAK,UAAU,CAC5E;AAID,OAH2B,EAAO,MAAM,kBAAkB,EAAE,EAAE,QAAQ,MACpE,EAAW,IAAI,EAAE,UAAU,CAC5B,CACiC;YAC3B,GAAK;AACZ,QAAI,EAAW;AACf,MAAS,aAAe,QAAQ,EAAI,UAAU,uBAAuB;aAC7D;AACR,IAAK,KAAW,EAAW,GAAM;;MAG1B,QACE;AACX,OAAY;;IAEb,CAAC,GAAS,EAAU,CAAC;CAExB,IAAM,IAAU,OAAO,MAAgB;AAChC,IAAa,QAAQ;AAC1B,MAAI;AAEF,GADW,MAAM,EAAe,EAAI,IAElC,EAAa,EAAI,EACZ,EAAa,UAAU,EAC5B,iBAAiB,EAAa,KAAK,EAAE,KAAK,IAErC,EAAa,QAAQ;UAEtB;AACD,KAAa,QAAQ;;IAIxB,KAAsB,GAAmB,MAA8B;EAC3E,IAAM,IAAS,IAAI,iBAAiB;AAKpC,EAJA,EAAO,IAAI,WAAW,EAAU,EAC5B,KAAY,EAAO,IAAI,cAAc,EAAW,EAGpD,OAAO,SAAS,OAAO,wBAAwB,EAAO,UAAU;;AAMlE,QACE,kBAAC,QAAD;EAAM,WAAU;YAAhB;GACE,kBAAC,GAAD;IAAe,WAAU;cAAzB;KACE,kBAAC,GAAD,EAAc,WAAU,4CAA6C,CAAA;KACrE,kBAAC,MAAD;MAAI,WAAU;gBAA4C;MAA8B,CAAA;KACvF,KACC,kBAAC,KAAD;MAAG,WAAU;gBAAb;OAA6D;SAThD,GAAgB,MACnC,EAAe,GAAQ,KAAY,MAAM,EASb,EAAM,OAAO,EAAM,SAAS;OAC/C,EAAM,eAAe,MAAM,IAAI,KAAK,EAAM,YAAY,CAAC,gBAAgB;OACtE;;KAEL,KACC,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,KAAD;OAAG,WAAU;iBAAqD;OAAY,CAAA,EAC9E,kBAAC,KAAD;OAAG,WAAU;iBAAwD;OAAY,CAAA,CAC7E;;KAEM;;GAEf,KACC,kBAAC,OAAD;IACE,MAAK;IACL,WAAU;cAET;IACG,CAAA;GAGP,IACC,kBAAC,UAAD;IAAQ,WAAU;cAAmD;IAE5D,CAAA,GACP,EAAa,SAAS,IACxB,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eAAd;MACE,kBAAC,GAAD,EAAU,WAAU,UAAW,CAAA;;MACf,EAAa;MAAO;MACjC;QACL,kBAAC,MAAD;KAAI,WAAU;eACX,EAAa,KAAK,MACjB,kBAAC,MAAD;MAEE,WAAU;gBAEV,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACG,EAAI,SAAS,OACZ,kBAAC,OAAD;SACE,KAAK,EAAI,QAAQ;SACjB,KAAI;SACJ,WAAU;SACV,CAAA,GAEF,kBAAC,OAAD;SAAK,WAAU;mBACZ,EAAI,SAAS,KAAK,MAAM,GAAG,EAAE,CAAC,aAAa,IAAI;SAC5C,CAAA;QAER,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,MAAD;WAAI,WAAU;qBACX,EAAI,SAAS,QAAQ;WACnB,CAAA;UACJ,EAAI,aACH,kBAAC,KAAD;WAAG,WAAU;qBAAb,CAA2C,aAC/B,IAAI,KAAK,EAAI,UAAU,CAAC,oBAAoB,CACpD;;UAEL,EAAI,cACH,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,QAAD;YAAM,WAAU;sBACb,EAAI;YACA,CAAA,EACP,kBAAC,UAAD;YACE,MAAK;YACL,eAAe,KAAK,EAAQ,EAAI,WAAY;YAC5C,WAAU;YACV,OAAM;sBAEN,kBAAC,GAAD,EAAM,WAAU,YAAa,CAAA;YACtB,CAAA,CACL;;UAEP,MAAc,EAAI,cACjB,kBAAC,KAAD;WAAG,WAAU;qBAAwC;WAAuB,CAAA;UAE1E;;QACN,kBAAC,UAAD;SACE,MAAK;SACL,eAAe,EAAmB,EAAI,WAAW,EAAI,WAAW;SAChE,WAAU;mBAHZ,CAKE,kBAAC,GAAD,EAAU,WAAU,YAAa,CAAA,EAAA,uBAE1B;;QACL;;MACH,EApDE,EAAI,GAoDN,CACL;KACC,CAAA,CACD;QACJ;GAEH,CAAC,KACA,kBAAC,GAAD;IACE,WAAU;IACV,YAAW;IACX,OAAM;IACN,OAAO;KACL;MACE,IAAI;MACJ,OAAO;MACP,aAAa;MACb,MAAM,kBAAC,GAAD,EAAU,WAAU,UAAW,CAAA;MACrC,eAAe;OACb,IAAM,IAAQ,EAAa;AAC3B,OAAI,KAAO,EAAmB,EAAM,WAAW,EAAM,WAAW;;MAElE,MAAM,EAAa,WAAW;MAC/B;KACD;MACE,IAAI;MACJ,OAAO;MACP,aAAa;MACb,MAAM,kBAAC,GAAD,EAAS,WAAU,UAAW,CAAA;MACpC,eAAe,EAAS,GAAG,EAAS,SAAS;MAC9C;KACD;MACE,IAAI;MACJ,OAAO;MACP,aAAa;MACb,MAAM,kBAAC,GAAD,EAAY,WAAU,UAAW,CAAA;MACvC,eAAe,EAAS,GAAG,EAAS,cAAc;MACnD;KACF;IACD,CAAA;GAGJ,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAS,GAAG,EAAS,SAAS;KAC7C,WAAU;eAHZ,CAKE,kBAAC,GAAD,EAAS,WAAU,UAAW,CAAA,EAAA,iBAEvB;QACT,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAS,GAAG,EAAS,cAAc;KAClD,WAAU;eAHZ,CAIC,qBAEC,kBAAC,GAAD,EAAY,WAAU,UAAW,CAAA,CAC1B;OACL;;GACD"}