@burdenoff/microfe-store 2026.624.4 → 2026.625.1

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":";;;;;;;;;AAiBA,IAAM,KAAe,MACf,MAAW,WAAiB,yDAC5B,MAAW,eAAe,MAAW,YAChC,yDAEL,MAAW,aAAa,MAAW,YAC9B,qDAEF,gCAGI,UAA2B;CACtC,IAAM,IAAW,GAAa,EACxB,EAAE,gBAAa,GAAU,EACzB,EAAE,SAAM,GAAS,EACjB,EAAE,iBAAc,YAAS,YAAS,UAAO,YAAS,gBAAa,GAAmB,EAElF,IAAW,QACR,EAA+B,OAAO,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG,cAAc,EAAE,GAAG,CAAC,EACtF,CAAC,EAAa,CACf;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GAAQ,WAAU;aAChB,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAS,GAAG;KAC3B,cAAW;KACX,WAAU;eAEV,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA;KACzB,CAAA,EACT,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAE,wBAAwB,EAAE,cAAc,eAAe,CAAC;KACxD,CAAA,EACL,kBAAC,KAAD;KAAG,WAAU;eACV,EAAE,2BAA2B,EAC5B,cAAc,+CACf,CAAC;KACA,CAAA,CACA,EAAA,CAAA,CACF;;GACC,CAAA,EAET,kBAAC,QAAD;GAAM,WAAU;aACd,kBAAC,OAAD;IAAK,WAAU;cACZ,IACC,kBAAC,UAAD;KACE,cAAW;KACX,WAAU;eAEV,kBAAC,GAAD;MAAS,WAAU;MAAsC,eAAY;MAAS,CAAA;KACvE,CAAA,GACP,IACF,kBAAC,OAAD;KACE,MAAK;KACL,WAAU;eAFZ;MAIE,kBAAC,GAAD,EAAa,WAAU,+CAAgD,CAAA;MACvE,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAE,+BAA+B,EAAE,cAAc,2BAA2B,CAAC;OAC3E,CAAA;MACL,kBAAC,KAAD;OAAG,WAAU;iBAAgC,EAAM;OAAY,CAAA;MAC/D,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,GAAS;OACxB,WAAU;iBAET,EAAE,mBAAmB,EAAE,cAAc,aAAa,CAAC;OAC7C,CAAA;MACL;SACJ,EAAS,WAAW,IACtB,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,GAAD,EAAU,WAAU,wCAAyC,CAAA;MAC7D,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAE,6BAA6B,EAAE,cAAc,mBAAmB,CAAC;OACjE,CAAA;MACL,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAE,mCAAmC,EACpC,cAAc,iEACf,CAAC;OACA,CAAA;MACJ,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,EAAS,GAAG,EAAS,cAAc;OAClD,WAAU;iBAET,EAAE,oCAAoC,EAAE,cAAc,sBAAsB,CAAC;OACvE,CAAA;MACL;SAEN,kBAAA,GAAA,EAAA,UAAA,CAOE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD;MACE,OAAO,EAAE,iCAAiC,EACxC,cAAc,mBACf,CAAC;MACF,MAAM,EAAS,QAAQ,MAAM,EAAE,WAAW,SAAS,CAAC;MACpD,OAAO;MACP,MAAM,EAAE,+BAA+B,EACrC,cAAc,YACf,CAAC;MACF,CAAA;KACE,CAAA,EACN,kBAAC,MAAD;KAAI,WAAU;eAAd,CACG,EAAS,KAAK,MACb,kBAAC,MAAD;MAEE,WAAU;gBAEV,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD,EAAA,UAAA;QACE,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,GAAD,EAAa,WAAU,mCAAoC,CAAA,EAC3D,kBAAC,MAAD;UAAI,WAAU;oBAAd,CAAgD,YACrC,EAAQ,UACd;YACD;;QACN,kBAAC,KAAD;SAAG,WAAU;mBACV,EAAE,gCAAgC;UACjC,cAAc,mBAAmB,EAAQ;UACzC,IAAI,EAAQ;UACb,CAAC;SACA,CAAA;QACH,EAAQ,cACP,kBAAC,KAAD;SAAG,WAAU;mBACV,EAAE,6BAA6B;UAC9B,cAAc,gBAAgB,EAAQ;UACtC,KAAK,EAAQ;UACd,CAAC;SACA,CAAA;QAEL,EAAQ,aACP,kBAAC,KAAD;SAAG,WAAU;mBACV,EAAE,4BAA4B;UAC7B,cAAc,cAAc,IAAI,KAAK,EAAQ,UAAU,CAAC,oBAAoB;UAC5E,MAAM,IAAI,KAAK,EAAQ,UAAU,CAAC,oBAAoB;UACvD,CAAC;SACA,CAAA;QAEF,EAAA,CAAA,EACN,kBAAC,QAAD;QACE,WAAW,gDAAgD,EAAY,EAAQ,OAAO;kBAErF,EAAQ;QACJ,CAAA,CACH;;MACH,EAxCE,EAAQ,GAwCV,CACL,EACD,KACC,kBAAC,MAAD;MAAI,WAAU;gBACZ,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,UAAU;OACV,WAAU;iBAET,IAAU,aAAa;OACjB,CAAA;MACN,CAAA,CAEJ;OACJ,EAAA,CAAA;IAED,CAAA;GACD,CAAA,CACH"}
+{"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 { EmphasisPanel } 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          {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              <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                      >\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 } 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 y = "\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", b = () => {
+	let b = h(), { basePath: x, authToken: S } = e(), { orderId: C } = g(), [w, T] = o(null), [E, D] = o([]), [O, k] = o(!0), [A, j] = o(null), [M, N] = o(null);
 	a(() => {
-		if (!S) return;
+		if (!C) return;
 		let e = !1;
 		return (async () => {
-			O(!0), A(null);
+			k(!0), j(null);
 			try {
 				let t = await _({
 					gateway: "global",
-					query: v,
-					variables: { id: S },
-					authToken: x || void 0
+					query: y,
+					variables: { id: C },
+					authToken: S || void 0
 				});
 				if (e) return;
 				if (t.errors?.length) throw Error(t.errors[0]?.message ?? "Failed to load order");
-				w(t.data?.getStoreOrder ?? null);
+				T(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)));
+				D((t.data?.myEntitlements ?? []).filter((e) => n.has(e.productId)));
 			} catch (t) {
 				if (e) return;
-				A(t instanceof Error ? t.message : "Failed to load order");
+				j(t instanceof Error ? t.message : "Failed to load order");
 			} finally {
-				e || O(!1);
+				e || k(!1);
 			}
 		})(), () => {
 			e = !0;
 		};
-	}, [S, x]);
-	let N = async (e) => {
+	}, [C, S]);
+	let P = async (e) => {
 		r("light");
 		try {
-			await n(e) ? (M(e), i("success"), setTimeout(() => M(null), 1500)) : i("error");
+			await n(e) ? (N(e), i("success"), setTimeout(() => N(null), 1500)) : i("error");
 		} catch {
 			i("error");
 		}
-	}, P = (e, t) => {
+	}, F = (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",
+					w && /* @__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"))(w.total, w.currency),
+							w.purchasedAt && ` • ${new Date(w.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",
+					C && /* @__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: C
 						})]
 					})
 				]
 			}),
-			k && /* @__PURE__ */ p("div", {
+			A && /* @__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: A
 			}),
-			D ? /* @__PURE__ */ p("output", {
+			O ? /* @__PURE__ */ p("output", {
 				className: "mt-6 block py-12 text-center text-text-secondary",
 				children: "Loading licenses…"
-			}) : T.length > 0 ? /* @__PURE__ */ m("div", {
+			}) : E.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,
+						E.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: E.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 P(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", {
+										M === 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: () => F(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"]
 								})
@@ -156,12 +157,12 @@ var v = "\n  query OrderConfirmation($id: ID!) {\n    getStoreOrder(id: $id) {\n
 				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: () => b(`${x}/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: () => b(`${x}/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 +171,6 @@ var v = "\n  query OrderConfirmation($id: ID!) {\n    getStoreOrder(id: $id) {\n
 	});
 };
 //#endregion
-export { y as OrderConfirmationPage };
+export { b 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 } 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      <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

@@ -9,8 +9,9 @@ import { useI18n as c } from "@burdenoff/fe-libs/shared/providers/shell/I18nProv
 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";
 import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
 import { useNavigate as x } from "react-router-dom";
+import { GlassCard as S } from "@burdenoff/fe-libs/ui";
 //#region src/pages/OrdersPage.tsx
-var S = (e) => {
+var C = (e) => {
 	switch (e) {
 		case "COMPLETED":
 		case "FULFILLED":
@@ -50,10 +51,10 @@ var S = (e) => {
 			label: e
 		};
 	}
-}, C = ({ item: e, orderId: t, orderStatus: r, onOpenInstallModal: i, installing: a }) => {
+}, w = ({ item: e, orderId: t, orderStatus: r, onOpenInstallModal: i, installing: a }) => {
 	let o = r === "COMPLETED" || r === "FULFILLED" || r === "PROCESSED", s = e.productType !== "PHYSICAL" && e.productType !== "MERCHANDISE";
 	return /* @__PURE__ */ b("div", {
-		className: "flex items-center gap-4 rounded-lg border border-border-default bg-bg-sunken/50 p-4",
+		className: "flex items-center gap-4 rounded-lg border border-border-seam bg-bg-sunken/50 p-4",
 		children: [
 			/* @__PURE__ */ y("div", {
 				className: "size-14 flex-shrink-0 overflow-hidden rounded-lg bg-bg-sunken",
@@ -89,7 +90,7 @@ var S = (e) => {
 			/* @__PURE__ */ y("div", {
 				className: "text-right",
 				children: /* @__PURE__ */ y("p", {
-					className: "font-semibold text-text-primary",
+					className: "font-semibold tabular-nums text-text-primary",
 					children: n(e.totalPrice)
 				})
 			}),
@@ -108,10 +109,10 @@ var S = (e) => {
 			})
 		]
 	});
-}, w = ({ order: e, onOpenInstallModal: t, installingItem: r }) => {
-	let i = S(e.status), a = i.icon;
-	return /* @__PURE__ */ b("div", {
-		className: "rounded-xl border border-border-default bg-bg-surface p-6 transition-shadow hover:shadow-md",
+}, T = ({ order: e, onOpenInstallModal: t, installingItem: r }) => {
+	let i = C(e.status), a = i.icon;
+	return /* @__PURE__ */ b(S, {
+		className: "p-6",
 		children: [
 			/* @__PURE__ */ b("div", {
 				className: "flex items-start justify-between mb-4",
@@ -136,7 +137,7 @@ var S = (e) => {
 				})] }), /* @__PURE__ */ b("div", {
 					className: "text-right",
 					children: [/* @__PURE__ */ y("p", {
-						className: "text-xl font-bold text-text-primary",
+						className: "text-xl font-bold tabular-nums text-text-primary",
 						children: n(e.total)
 					}), /* @__PURE__ */ b("p", {
 						className: "text-xs text-text-muted",
@@ -150,7 +151,7 @@ var S = (e) => {
 			}),
 			/* @__PURE__ */ y("div", {
 				className: "space-y-3",
-				children: e.items.map((n) => /* @__PURE__ */ y(C, {
+				children: e.items.map((n) => /* @__PURE__ */ y(w, {
 					item: n,
 					orderId: e.id,
 					orderStatus: e.status,
@@ -159,14 +160,14 @@ var S = (e) => {
 				}, n.id))
 			}),
 			/* @__PURE__ */ b("div", {
-				className: "mt-4 pt-4 border-t border-border-default",
+				className: "mt-4 pt-4 border-t border-border-seam",
 				children: [/* @__PURE__ */ b("div", {
 					className: "flex justify-between text-sm",
 					children: [/* @__PURE__ */ y("span", {
 						className: "text-text-muted",
 						children: "Subtotal"
 					}), /* @__PURE__ */ y("span", {
-						className: "text-text-primary",
+						className: "tabular-nums text-text-primary",
 						children: n(e.subtotal)
 					})]
 				}), /* @__PURE__ */ b("div", {
@@ -175,15 +176,15 @@ var S = (e) => {
 						className: "text-text-muted",
 						children: "Tax"
 					}), /* @__PURE__ */ y("span", {
-						className: "text-text-primary",
+						className: "tabular-nums text-text-primary",
 						children: n(e.tax)
 					})]
 				})]
 			})
 		]
 	});
-}, T = () => {
-	let n = x(), { basePath: u } = e(), { t: d } = c(), { orders: f, loading: h, error: v, refetchOrders: S, hasMore: C, loadMore: T } = i(), { installations: E, refetch: D } = r();
+}, E = () => {
+	let n = x(), { basePath: u } = e(), { t: d } = c(), { orders: f, loading: h, error: v, refetchOrders: S, hasMore: C, loadMore: w } = i(), { installations: E, refetch: D } = r();
 	t({
 		onData: () => {
 			S();
@@ -236,7 +237,7 @@ var S = (e) => {
 		className: "h-full overflow-y-auto",
 		children: [
 			/* @__PURE__ */ y("header", {
-				className: "sticky top-0 z-10 border-b border-border-default bg-bg-surface px-6 py-4",
+				className: "sticky top-0 z-10 border-b border-border-seam bg-bg-surface px-6 py-4",
 				children: /* @__PURE__ */ y("div", {
 					className: "mx-auto max-w-4xl",
 					children: /* @__PURE__ */ b("div", {
@@ -323,7 +324,7 @@ var S = (e) => {
 					]
 				}) : /* @__PURE__ */ b("ul", {
 					className: "space-y-6",
-					children: [L.map((e) => /* @__PURE__ */ y("li", { children: /* @__PURE__ */ y(w, {
+					children: [L.map((e) => /* @__PURE__ */ y("li", { children: /* @__PURE__ */ y(T, {
 						order: e,
 						onOpenInstallModal: R,
 						installingItem: O ? P : null
@@ -331,7 +332,7 @@ var S = (e) => {
 						className: "flex justify-center pt-4 list-none",
 						children: /* @__PURE__ */ b("button", {
 							type: "button",
-							onClick: T,
+							onClick: w,
 							disabled: h,
 							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" }),
@@ -355,6 +356,6 @@ var S = (e) => {
 	});
 };
 //#endregion
-export { T as OrdersPage };
+export { E as OrdersPage };
 
 //# sourceMappingURL=OrdersPage.js.map

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/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      {/* TODO(ux-sweep): no order-details modal exists; tax + shipping live inline. When a modal lands, wrap \"Tax + shipping advanced\" in OptionalFields. */}\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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"}
+{"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 { GlassCard } from '@burdenoff/fe-libs/ui';\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-seam 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 tabular-nums text-text-primary\">\n          {formatPrice(item.totalPrice)}\n        </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    <GlassCard className=\"p-6\">\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 tabular-nums text-text-primary\">\n            {formatPrice(order.total)}\n          </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      {/* TODO(ux-sweep): no order-details modal exists; tax + shipping live inline. When a modal lands, wrap \"Tax + shipping advanced\" in OptionalFields. */}\n      <div className=\"mt-4 pt-4 border-t border-border-seam\">\n        <div className=\"flex justify-between text-sm\">\n          <span className=\"text-text-muted\">Subtotal</span>\n          <span className=\"tabular-nums 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=\"tabular-nums text-text-primary\">{formatPrice(order.tax)}</span>\n        </div>\n      </div>\n    </GlassCard>\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-seam 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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"}