@burdenoff/microfe-store 2026.912.2 → 2026.912.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -9,8 +9,12 @@ import { AlertCircle as s, ArrowLeft as c, Loader2 as l, ShieldCheck as u } from
|
|
|
9
9
|
import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
|
|
10
10
|
import { EmphasisPanel as m, IllustratedEmptyState as h, PagePurpose as g } from "@burdenoff/fe-libs/ui";
|
|
11
11
|
//#region src/pages/MyLicensesPage.tsx
|
|
12
|
-
var _ = (e) =>
|
|
13
|
-
|
|
12
|
+
var _ = (e) => new Date(e).toLocaleDateString("en-US", {
|
|
13
|
+
year: "numeric",
|
|
14
|
+
month: "short",
|
|
15
|
+
day: "numeric"
|
|
16
|
+
}), v = (e) => e === "ACTIVE" ? "bg-status-success-bg-subtle text-status-success-text" : e === "SUSPENDED" || e === "PENDING" ? "bg-status-warning-bg-subtle text-status-warning-text" : e === "EXPIRED" || e === "REVOKED" ? "bg-status-error-bg-subtle text-status-error-text" : "bg-bg-sunken text-text-muted", y = () => {
|
|
17
|
+
let y = i(), { basePath: b } = e(), { t: x } = o(), S = n(), { entitlements: C, hasMore: w, loading: T, error: E, refetch: D, loadMore: O } = t(), k = r(() => C.slice().sort((e, t) => e.id.localeCompare(t.id)), [C]);
|
|
14
18
|
return /* @__PURE__ */ p("div", {
|
|
15
19
|
className: "flex h-full flex-col",
|
|
16
20
|
children: [/* @__PURE__ */ f("header", {
|
|
@@ -19,16 +23,16 @@ var _ = (e) => e === "ACTIVE" ? "bg-status-success-bg-subtle text-status-success
|
|
|
19
23
|
className: "mx-auto flex max-w-5xl items-center gap-4",
|
|
20
24
|
children: [/* @__PURE__ */ f("button", {
|
|
21
25
|
type: "button",
|
|
22
|
-
onClick: () =>
|
|
26
|
+
onClick: () => y(-1),
|
|
23
27
|
"aria-label": "Go back",
|
|
24
28
|
className: "cursor-pointer rounded-lg p-2 text-text-muted transition-colors hover:bg-bg-sunken hover:text-text-primary",
|
|
25
29
|
children: /* @__PURE__ */ f(c, { className: "size-5" })
|
|
26
30
|
}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h1", {
|
|
27
31
|
className: "text-2xl font-bold text-text-primary",
|
|
28
|
-
children:
|
|
32
|
+
children: x("pages.licenses.title", { defaultValue: "My Licenses" })
|
|
29
33
|
}), /* @__PURE__ */ f("p", {
|
|
30
34
|
className: "text-sm text-text-muted",
|
|
31
|
-
children:
|
|
35
|
+
children: x("pages.licenses.subtitle", { defaultValue: "Review and manage your product entitlements" })
|
|
32
36
|
})] })]
|
|
33
37
|
})
|
|
34
38
|
}), /* @__PURE__ */ f("main", {
|
|
@@ -37,55 +41,55 @@ var _ = (e) => e === "ACTIVE" ? "bg-status-success-bg-subtle text-status-success
|
|
|
37
41
|
className: "mx-auto max-w-5xl",
|
|
38
42
|
children: [/* @__PURE__ */ f(g, {
|
|
39
43
|
className: "mb-6",
|
|
40
|
-
children:
|
|
41
|
-
}),
|
|
42
|
-
"aria-label":
|
|
44
|
+
children: S("pages.licenses.purpose", "Every paid app you own grants a license (entitlement) that proves your right to use it. Check here to confirm a license is active, find a license key to enter into a product, and see when paid access expires — so you're never caught out by a lapsed or suspended entitlement.")
|
|
45
|
+
}), T ? /* @__PURE__ */ f("output", {
|
|
46
|
+
"aria-label": S("pages.licenses.loading", "Loading licenses"),
|
|
43
47
|
className: "flex items-center justify-center py-16",
|
|
44
48
|
children: /* @__PURE__ */ f(l, {
|
|
45
49
|
className: "size-8 animate-spin text-text-muted",
|
|
46
50
|
"aria-hidden": "true"
|
|
47
51
|
})
|
|
48
|
-
}) :
|
|
52
|
+
}) : E ? /* @__PURE__ */ p("div", {
|
|
49
53
|
role: "alert",
|
|
50
54
|
className: "rounded-xl border border-status-error-border bg-status-error-bg-subtle p-8 text-center",
|
|
51
55
|
children: [
|
|
52
56
|
/* @__PURE__ */ f(s, { className: "mx-auto mb-3 size-10 text-status-error-text" }),
|
|
53
57
|
/* @__PURE__ */ f("h3", {
|
|
54
58
|
className: "text-lg font-semibold text-status-error-text",
|
|
55
|
-
children:
|
|
59
|
+
children: x("pages.licenses.failedToLoad", { defaultValue: "Failed to load licenses" })
|
|
56
60
|
}),
|
|
57
61
|
/* @__PURE__ */ f("p", {
|
|
58
62
|
className: "mt-2 text-sm text-text-muted",
|
|
59
|
-
children:
|
|
63
|
+
children: E.message
|
|
60
64
|
}),
|
|
61
65
|
/* @__PURE__ */ f("button", {
|
|
62
66
|
type: "button",
|
|
63
|
-
onClick: () =>
|
|
67
|
+
onClick: () => D(),
|
|
64
68
|
className: "mt-4 cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text",
|
|
65
|
-
children:
|
|
69
|
+
children: x("common.tryAgain", { defaultValue: "Try Again" })
|
|
66
70
|
})
|
|
67
71
|
]
|
|
68
|
-
}) :
|
|
72
|
+
}) : k.length === 0 ? /* @__PURE__ */ f(h, {
|
|
69
73
|
illustration: "empty-data",
|
|
70
|
-
title:
|
|
71
|
-
description:
|
|
74
|
+
title: x("pages.licenses.emptyTitle", { defaultValue: "No licenses yet" }),
|
|
75
|
+
description: x("pages.licenses.emptyDescription", { defaultValue: "Purchase apps from the marketplace to see your licenses here." }),
|
|
72
76
|
action: /* @__PURE__ */ f("button", {
|
|
73
77
|
type: "button",
|
|
74
|
-
onClick: () =>
|
|
78
|
+
onClick: () => y(`${b}/marketplace`),
|
|
75
79
|
className: "cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text",
|
|
76
|
-
children:
|
|
80
|
+
children: x("pages.licenses.browseMarketplace", { defaultValue: "Browse Marketplace" })
|
|
77
81
|
})
|
|
78
82
|
}) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(m, {
|
|
79
83
|
className: "mb-6",
|
|
80
84
|
children: /* @__PURE__ */ f(a, {
|
|
81
|
-
label:
|
|
82
|
-
used:
|
|
85
|
+
label: x("pages.licenses.activeLicenses", { defaultValue: "Active licenses" }),
|
|
86
|
+
used: k.filter((e) => e.status === "ACTIVE").length,
|
|
83
87
|
limit: null,
|
|
84
|
-
unit:
|
|
88
|
+
unit: x("pages.licenses.licensesUnit", { defaultValue: "licenses" })
|
|
85
89
|
})
|
|
86
90
|
}), /* @__PURE__ */ p("ul", {
|
|
87
91
|
className: "flex flex-col gap-y-4",
|
|
88
|
-
children: [
|
|
92
|
+
children: [k.map((e) => /* @__PURE__ */ f("li", {
|
|
89
93
|
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)]",
|
|
90
94
|
children: /* @__PURE__ */ p("div", {
|
|
91
95
|
className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
|
|
@@ -94,43 +98,43 @@ var _ = (e) => e === "ACTIVE" ? "bg-status-success-bg-subtle text-status-success
|
|
|
94
98
|
className: "flex items-center gap-2",
|
|
95
99
|
children: [/* @__PURE__ */ f(u, { className: "size-4 text-status-success-text" }), /* @__PURE__ */ f("h3", {
|
|
96
100
|
className: "font-semibold text-text-primary",
|
|
97
|
-
children:
|
|
101
|
+
children: S("pages.licenses.product", "Product {{id}}", { id: e.productId })
|
|
98
102
|
})]
|
|
99
103
|
}),
|
|
100
104
|
/* @__PURE__ */ f("p", {
|
|
101
105
|
className: "mt-1 text-sm text-text-muted",
|
|
102
|
-
children:
|
|
106
|
+
children: x("pages.licenses.entitlementId", {
|
|
103
107
|
defaultValue: `Entitlement ID: ${e.id}`,
|
|
104
108
|
id: e.id
|
|
105
109
|
})
|
|
106
110
|
}),
|
|
107
111
|
e.licenseKey && /* @__PURE__ */ f("p", {
|
|
108
|
-
className: "mt-1 text-sm text-text-muted",
|
|
109
|
-
children:
|
|
112
|
+
className: "mt-1 break-all text-sm text-text-muted",
|
|
113
|
+
children: x("pages.licenses.licenseKey", {
|
|
110
114
|
defaultValue: `License key: ${e.licenseKey}`,
|
|
111
115
|
key: e.licenseKey
|
|
112
116
|
})
|
|
113
117
|
}),
|
|
114
118
|
e.expiresAt && /* @__PURE__ */ f("p", {
|
|
115
119
|
className: "mt-1 text-sm text-text-muted",
|
|
116
|
-
children:
|
|
117
|
-
defaultValue: `Expires on ${
|
|
118
|
-
date:
|
|
120
|
+
children: x("pages.licenses.expiresOn", {
|
|
121
|
+
defaultValue: `Expires on ${_(e.expiresAt)}`,
|
|
122
|
+
date: _(e.expiresAt)
|
|
119
123
|
})
|
|
120
124
|
})
|
|
121
125
|
] }), /* @__PURE__ */ f("span", {
|
|
122
|
-
className: `rounded-full px-3 py-1 text-xs font-semibold ${
|
|
126
|
+
className: `rounded-full px-3 py-1 text-xs font-semibold ${v(e.status)} ${e.status === "ACTIVE" ? "motion-safe:animate-vc-glow-pulse" : ""}`,
|
|
123
127
|
children: e.status
|
|
124
128
|
})]
|
|
125
129
|
})
|
|
126
|
-
}, e.id)),
|
|
130
|
+
}, e.id)), w && /* @__PURE__ */ f("li", {
|
|
127
131
|
className: "flex justify-center pt-4 list-none",
|
|
128
132
|
children: /* @__PURE__ */ f("button", {
|
|
129
133
|
type: "button",
|
|
130
|
-
onClick:
|
|
131
|
-
disabled:
|
|
134
|
+
onClick: O,
|
|
135
|
+
disabled: T,
|
|
132
136
|
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",
|
|
133
|
-
children:
|
|
137
|
+
children: T ? S("common.loading", "Loading…") : S("common.loadMore", "Load more")
|
|
134
138
|
})
|
|
135
139
|
})]
|
|
136
140
|
})] })]
|
|
@@ -139,6 +143,6 @@ var _ = (e) => e === "ACTIVE" ? "bg-status-success-bg-subtle text-status-success
|
|
|
139
143
|
});
|
|
140
144
|
};
|
|
141
145
|
//#endregion
|
|
142
|
-
export {
|
|
146
|
+
export { y as MyLicensesPage };
|
|
143
147
|
|
|
144
148
|
//# sourceMappingURL=MyLicensesPage.js.map
|
|
@@ -1 +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';\nimport { ArrowLeft, ShieldCheck, AlertCircle, Loader2 } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useTr } from '../shared/hooks/useTr';\nimport { QuotaMeter } from '@burdenoff/fe-libs/shared/components';\nimport { EmphasisPanel, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { useStore } from '../providers/StoreProvider';\nimport { useMyEntitlements } from '../hooks/useStoreGraphQL';\n\ninterface LicenseItem {\n id: string;\n productId: string;\n status: string;\n licenseKey?: string | null;\n expiresAt?: string | null;\n}\n\nconst statusClass = (status: string): string => {\n if (status === 'ACTIVE') return 'bg-status-success-bg-subtle text-status-success-text';\n if (status === 'SUSPENDED' || status === 'PENDING') {\n return 'bg-status-warning-bg-subtle text-status-warning-text';\n }\n if (status === 'EXPIRED' || status === 'REVOKED') {\n return 'bg-status-error-bg-subtle text-status-error-text';\n }\n return 'bg-bg-sunken text-text-muted';\n};\n\nexport const MyLicensesPage: FC = () => {\n const navigate = useNavigate();\n const { basePath } = useStore();\n const { t } = useI18n();\n const tr = useTr();\n const { entitlements, hasMore, loading, error, refetch, loadMore } = useMyEntitlements();\n\n const licenses = useMemo(\n () => (entitlements as LicenseItem[]).slice().sort((a, b) => a.id.localeCompare(b.id)),\n [entitlements]\n );\n\n return (\n <div className=\"flex h-full flex-col\">\n <header className=\"sticky top-0 z-10 border-b border-border-seam bg-bg-surface px-6 py-4\">\n <div className=\"mx-auto flex max-w-5xl items-center gap-4\">\n <button\n type=\"button\"\n onClick={() => navigate(-1)}\n aria-label=\"Go back\"\n className=\"cursor-pointer rounded-lg p-2 text-text-muted transition-colors hover:bg-bg-sunken hover:text-text-primary\"\n >\n <ArrowLeft className=\"size-5\" />\n </button>\n <div>\n <h1 className=\"text-2xl font-bold text-text-primary\">\n {t('pages.licenses.title', { defaultValue: 'My Licenses' })}\n </h1>\n <p className=\"text-sm text-text-muted\">\n {t('pages.licenses.subtitle', {\n defaultValue: 'Review and manage your product entitlements',\n })}\n </p>\n </div>\n </div>\n </header>\n\n <main className=\"flex-1 overflow-y-auto p-6\">\n <div className=\"mx-auto max-w-5xl\">\n <PagePurpose className=\"mb-6\">\n {tr(\n 'pages.licenses.purpose',\n \"Every paid app you own grants a license (entitlement) that proves your right to use it. Check here to confirm a license is active, find a license key to enter into a product, and see when paid access expires — so you're never caught out by a lapsed or suspended entitlement.\"\n )}\n </PagePurpose>\n {loading ? (\n <output\n aria-label={tr('pages.licenses.loading', 'Loading licenses')}\n className=\"flex items-center justify-center py-16\"\n >\n <Loader2 className=\"size-8 animate-spin text-text-muted\" aria-hidden=\"true\" />\n </output>\n ) : error ? (\n <div\n role=\"alert\"\n className=\"rounded-xl border border-status-error-border bg-status-error-bg-subtle p-8 text-center\"\n >\n <AlertCircle className=\"mx-auto mb-3 size-10 text-status-error-text\" />\n <h3 className=\"text-lg font-semibold text-status-error-text\">\n {t('pages.licenses.failedToLoad', { defaultValue: 'Failed to load licenses' })}\n </h3>\n <p className=\"mt-2 text-sm text-text-muted\">{error.message}</p>\n <button\n type=\"button\"\n onClick={() => refetch()}\n className=\"mt-4 cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text\"\n >\n {t('common.tryAgain', { defaultValue: 'Try Again' })}\n </button>\n </div>\n ) : licenses.length === 0 ? (\n <IllustratedEmptyState\n illustration=\"empty-data\"\n title={t('pages.licenses.emptyTitle', { defaultValue: 'No licenses yet' })}\n description={t('pages.licenses.emptyDescription', {\n defaultValue: 'Purchase apps from the marketplace to see your licenses here.',\n })}\n action={\n <button\n type=\"button\"\n onClick={() => navigate(`${basePath}/marketplace`)}\n className=\"cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text\"\n >\n {t('pages.licenses.browseMarketplace', { defaultValue: 'Browse Marketplace' })}\n </button>\n }\n />\n ) : (\n <>\n {/*\n Inline quota meter showing active-license consumption vs the\n workspace plan limit. The limit is sourced from the billing\n summary when available; passing `null` renders an\n \"Unlimited\" indicator instead of misleading 0/0 progress.\n */}\n <EmphasisPanel className=\"mb-6\">\n <QuotaMeter\n label={t('pages.licenses.activeLicenses', {\n defaultValue: 'Active licenses',\n })}\n used={licenses.filter((l) => l.status === 'ACTIVE').length}\n limit={null}\n unit={t('pages.licenses.licensesUnit', {\n defaultValue: 'licenses',\n })}\n />\n </EmphasisPanel>\n <ul className=\"flex flex-col gap-y-4\">\n {licenses.map((license) => (\n <li\n key={license.id}\n className=\"rounded-xl border border-border-seam bg-bg-surface p-4 transition-[box-shadow,border-color] hover:border-border-strong hover:shadow-[var(--shadow-pop)]\"\n >\n <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n <div>\n <div className=\"flex items-center gap-2\">\n <ShieldCheck className=\"size-4 text-status-success-text\" />\n <h3 className=\"font-semibold text-text-primary\">\n {tr('pages.licenses.product', 'Product {{id}}', {\n id: license.productId,\n })}\n </h3>\n </div>\n <p className=\"mt-1 text-sm text-text-muted\">\n {t('pages.licenses.entitlementId', {\n defaultValue: `Entitlement ID: ${license.id}`,\n id: license.id,\n })}\n </p>\n {license.licenseKey && (\n <p className=\"mt-1 text-sm text-text-muted\">\n {t('pages.licenses.licenseKey', {\n defaultValue: `License key: ${license.licenseKey}`,\n key: license.licenseKey,\n })}\n </p>\n )}\n {license.expiresAt && (\n <p className=\"mt-1 text-sm text-text-muted\">\n {t('pages.licenses.expiresOn', {\n defaultValue: `Expires on ${new Date(license.expiresAt).toLocaleDateString()}`,\n date: new Date(license.expiresAt).toLocaleDateString(),\n })}\n </p>\n )}\n </div>\n <span\n className={`rounded-full px-3 py-1 text-xs font-semibold ${statusClass(license.status)} ${\n license.status === 'ACTIVE' ? 'motion-safe:animate-vc-glow-pulse' : ''\n }`}\n >\n {license.status}\n </span>\n </div>\n </li>\n ))}\n {hasMore && (\n <li className=\"flex justify-center pt-4 list-none\">\n <button\n type=\"button\"\n onClick={loadMore}\n disabled={loading}\n className=\"rounded-lg border border-border-default px-6 py-2.5 text-sm font-medium text-text-primary hover:bg-bg-subtle disabled:opacity-50\"\n >\n {loading\n ? tr('common.loading', 'Loading…')\n : tr('common.loadMore', '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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"}
|
|
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';\nimport { ArrowLeft, ShieldCheck, AlertCircle, Loader2 } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useTr } from '../shared/hooks/useTr';\nimport { QuotaMeter } from '@burdenoff/fe-libs/shared/components';\nimport { EmphasisPanel, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { useStore } from '../providers/StoreProvider';\nimport { useMyEntitlements } from '../hooks/useStoreGraphQL';\n\ninterface LicenseItem {\n id: string;\n productId: string;\n status: string;\n licenseKey?: string | null;\n expiresAt?: string | null;\n}\n\n/** en-US, spelled-out month — avoids the DD/MM vs MM/DD ambiguity of a bare\n * toLocaleDateString() (which follows the browser's locale, not a fixed one). */\nconst formatDate = (value: string): string =>\n new Date(value).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });\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 tr = useTr();\n const { entitlements, hasMore, loading, error, refetch, loadMore } = useMyEntitlements();\n\n const licenses = useMemo(\n () => (entitlements as LicenseItem[]).slice().sort((a, b) => a.id.localeCompare(b.id)),\n [entitlements]\n );\n\n return (\n <div className=\"flex h-full flex-col\">\n <header className=\"sticky top-0 z-10 border-b border-border-seam bg-bg-surface px-6 py-4\">\n <div className=\"mx-auto flex max-w-5xl items-center gap-4\">\n <button\n type=\"button\"\n onClick={() => navigate(-1)}\n aria-label=\"Go back\"\n className=\"cursor-pointer rounded-lg p-2 text-text-muted transition-colors hover:bg-bg-sunken hover:text-text-primary\"\n >\n <ArrowLeft className=\"size-5\" />\n </button>\n <div>\n <h1 className=\"text-2xl font-bold text-text-primary\">\n {t('pages.licenses.title', { defaultValue: 'My Licenses' })}\n </h1>\n <p className=\"text-sm text-text-muted\">\n {t('pages.licenses.subtitle', {\n defaultValue: 'Review and manage your product entitlements',\n })}\n </p>\n </div>\n </div>\n </header>\n\n <main className=\"flex-1 overflow-y-auto p-6\">\n <div className=\"mx-auto max-w-5xl\">\n <PagePurpose className=\"mb-6\">\n {tr(\n 'pages.licenses.purpose',\n \"Every paid app you own grants a license (entitlement) that proves your right to use it. Check here to confirm a license is active, find a license key to enter into a product, and see when paid access expires — so you're never caught out by a lapsed or suspended entitlement.\"\n )}\n </PagePurpose>\n {loading ? (\n <output\n aria-label={tr('pages.licenses.loading', 'Loading licenses')}\n className=\"flex items-center justify-center py-16\"\n >\n <Loader2 className=\"size-8 animate-spin text-text-muted\" aria-hidden=\"true\" />\n </output>\n ) : error ? (\n <div\n role=\"alert\"\n className=\"rounded-xl border border-status-error-border bg-status-error-bg-subtle p-8 text-center\"\n >\n <AlertCircle className=\"mx-auto mb-3 size-10 text-status-error-text\" />\n <h3 className=\"text-lg font-semibold text-status-error-text\">\n {t('pages.licenses.failedToLoad', { defaultValue: 'Failed to load licenses' })}\n </h3>\n <p className=\"mt-2 text-sm text-text-muted\">{error.message}</p>\n <button\n type=\"button\"\n onClick={() => refetch()}\n className=\"mt-4 cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text\"\n >\n {t('common.tryAgain', { defaultValue: 'Try Again' })}\n </button>\n </div>\n ) : licenses.length === 0 ? (\n <IllustratedEmptyState\n illustration=\"empty-data\"\n title={t('pages.licenses.emptyTitle', { defaultValue: 'No licenses yet' })}\n description={t('pages.licenses.emptyDescription', {\n defaultValue: 'Purchase apps from the marketplace to see your licenses here.',\n })}\n action={\n <button\n type=\"button\"\n onClick={() => navigate(`${basePath}/marketplace`)}\n className=\"cursor-pointer rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text\"\n >\n {t('pages.licenses.browseMarketplace', { defaultValue: 'Browse Marketplace' })}\n </button>\n }\n />\n ) : (\n <>\n {/*\n Inline quota meter showing active-license consumption vs the\n workspace plan limit. The limit is sourced from the billing\n summary when available; passing `null` renders an\n \"Unlimited\" indicator instead of misleading 0/0 progress.\n */}\n <EmphasisPanel className=\"mb-6\">\n <QuotaMeter\n label={t('pages.licenses.activeLicenses', {\n defaultValue: 'Active licenses',\n })}\n used={licenses.filter((l) => l.status === 'ACTIVE').length}\n limit={null}\n unit={t('pages.licenses.licensesUnit', {\n defaultValue: 'licenses',\n })}\n />\n </EmphasisPanel>\n <ul className=\"flex flex-col gap-y-4\">\n {licenses.map((license) => (\n <li\n key={license.id}\n className=\"rounded-xl border border-border-seam bg-bg-surface p-4 transition-[box-shadow,border-color] hover:border-border-strong hover:shadow-[var(--shadow-pop)]\"\n >\n <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n <div>\n <div className=\"flex items-center gap-2\">\n <ShieldCheck className=\"size-4 text-status-success-text\" />\n <h3 className=\"font-semibold text-text-primary\">\n {tr('pages.licenses.product', 'Product {{id}}', {\n id: license.productId,\n })}\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 break-all 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 ${formatDate(license.expiresAt)}`,\n date: formatDate(license.expiresAt),\n })}\n </p>\n )}\n </div>\n <span\n className={`rounded-full px-3 py-1 text-xs font-semibold ${statusClass(license.status)} ${\n license.status === 'ACTIVE' ? 'motion-safe:animate-vc-glow-pulse' : ''\n }`}\n >\n {license.status}\n </span>\n </div>\n </li>\n ))}\n {hasMore && (\n <li className=\"flex justify-center pt-4 list-none\">\n <button\n type=\"button\"\n onClick={loadMore}\n disabled={loading}\n className=\"rounded-lg border border-border-default px-6 py-2.5 text-sm font-medium text-text-primary hover:bg-bg-subtle disabled:opacity-50\"\n >\n {loading\n ? tr('common.loading', 'Loading…')\n : tr('common.loadMore', 'Load more')}\n </button>\n </li>\n )}\n </ul>\n </>\n )}\n </div>\n </main>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;AAqBA,IAAM,KAAc,MAClB,IAAI,KAAK,EAAM,CAAC,mBAAmB,SAAS;CAAE,MAAM;CAAW,OAAO;CAAS,KAAK;CAAW,CAAC,EAE5F,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,IAAK,GAAO,EACZ,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;cAAf,CACE,kBAAC,GAAD;KAAa,WAAU;eACpB,EACC,0BACA,qRACD;KACW,CAAA,EACb,IACC,kBAAC,UAAD;KACE,cAAY,EAAG,0BAA0B,mBAAmB;KAC5D,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,GAAD;KACE,cAAa;KACb,OAAO,EAAE,6BAA6B,EAAE,cAAc,mBAAmB,CAAC;KAC1E,aAAa,EAAE,mCAAmC,EAChD,cAAc,iEACf,CAAC;KACF,QACE,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAS,GAAG,EAAS,cAAc;MAClD,WAAU;gBAET,EAAE,oCAAoC,EAAE,cAAc,sBAAsB,CAAC;MACvE,CAAA;KAEX,CAAA,GAEF,kBAAA,GAAA,EAAA,UAAA,CAOE,kBAAC,GAAD;KAAe,WAAU;eACvB,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;KACY,CAAA,EAChB,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;oBACX,EAAG,0BAA0B,kBAAkB,EAC9C,IAAI,EAAQ,WACb,CAAC;UACC,CAAA,CACD;;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,EAAW,EAAQ,UAAU;UACzD,MAAM,EAAW,EAAQ,UAAU;UACpC,CAAC;SACA,CAAA;QAEF,EAAA,CAAA,EACN,kBAAC,QAAD;QACE,WAAW,gDAAgD,EAAY,EAAQ,OAAO,CAAC,GACrF,EAAQ,WAAW,WAAW,sCAAsC;kBAGrE,EAAQ;QACJ,CAAA,CACH;;MACH,EA5CE,EAAQ,GA4CV,CACL,EACD,KACC,kBAAC,MAAD;MAAI,WAAU;gBACZ,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,UAAU;OACV,WAAU;iBAET,IACG,EAAG,kBAAkB,WAAW,GAChC,EAAG,mBAAmB,YAAY;OAC/B,CAAA;MACN,CAAA,CAEJ;OACJ,EAAA,CAAA,CAED;;GACD,CAAA,CACH"}
|