@oneuptime/common 11.5.7 → 11.5.8

package/build/dist/UI/Components/EditionLabel/EditionLabel.js

@@ -1,5 +1,5 @@
 import Modal, { ModalWidth } from "../Modal/Modal";
-import Icon, { IconType, SizeProp } from "../Icon/Icon";
+import Icon, { IconType } from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
 import Input from "../Input/Input";
 import Button, { ButtonStyleType } from "../Button/Button";
@@ -13,6 +13,14 @@ import URL from "../../../Types/API/URL";
 import { APP_API_URL, BILLING_ENABLED, IS_ENTERPRISE_EDITION, } from "../../Config";
 import Alert, { AlertType } from "../Alerts/Alert";
 const ENTERPRISE_URL = "https://oneuptime.com/enterprise/demo";
+const SALES_EMAIL = "sales@oneuptime.com";
+const SALES_MAILTO_URL = "mailto:sales@oneuptime.com";
+/*
+ * Seat usage at or above this percent asks the admin to talk to OneUptime about
+ * expanding. Matches CRITICAL_CAPACITY_PERCENT in
+ * App/FeatureSet/Workers/Jobs/InstanceHealth/EvaluateClickhouseCapacity.ts.
+ */
+const SEAT_WARNING_PERCENT = 90;
 const parseLicenseInstances = (value) => {
     if (!Array.isArray(value)) {
         return [];
@@ -197,15 +205,142 @@ const EditionLabel = (props) => {
         }
         return currentUserCount > userLimit;
     }, [licenseValid, userLimit, currentUserCount]);
-    const userUsagePercent = useMemo(() => {
+    /*
+     * Unclamped and unrounded. The only value that can tell 120/120 apart from
+     * 240/120. Null means there is no seat limit to measure against, either
+     * because the license is unlimited or because usage has not been reported.
+     */
+    const rawUserUsagePercent = useMemo(() => {
         if (typeof userLimit !== "number" || userLimit <= 0) {
             return null;
         }
         if (typeof currentUserCount !== "number") {
             return null;
         }
-        return Math.min(100, Math.max(0, Math.round((currentUserCount / userLimit) * 100)));
+        return Math.max(0, (currentUserCount / userLimit) * 100);
     }, [userLimit, currentUserCount]);
+    /*
+     * The percent the admin reads, and the one the warning fires on. May exceed
+     * 100 so a breach shows a real figure. Floored to 99 when rounding would
+     * claim 100% while a seat is genuinely free, so 599/600 never reads
+     * "100% of licensed seats in use" next to "1 seat remaining".
+     */
+    const seatUsageDisplayPercent = useMemo(() => {
+        if (rawUserUsagePercent === null) {
+            return null;
+        }
+        const rounded = Math.round(rawUserUsagePercent);
+        if (rounded >= 100 && rawUserUsagePercent < 100) {
+            return 99;
+        }
+        return rounded;
+    }, [rawUserUsagePercent]);
+    /*
+     * The displayed percent clamped to 0-100. Drives the bar width and
+     * aria-valuenow, so the fill can never overflow its track and aria-valuenow
+     * can never exceed aria-valuemax. Derived from the displayed percent rather
+     * than the raw ratio so the fill always agrees with the caption beneath it:
+     * 599/600 reads 99% and fills to 99%, not to a visually full 100%. The true
+     * figure for a breach goes in aria-valuetext.
+     */
+    const seatUsageBarPercent = useMemo(() => {
+        if (seatUsageDisplayPercent === null) {
+            return 0;
+        }
+        return Math.min(100, Math.max(0, seatUsageDisplayPercent));
+    }, [seatUsageDisplayPercent]);
+    const seatsRemaining = useMemo(() => {
+        if (typeof userLimit !== "number" || userLimit <= 0) {
+            return null;
+        }
+        if (typeof currentUserCount !== "number") {
+            return null;
+        }
+        return userLimit - currentUserCount;
+    }, [userLimit, currentUserCount]);
+    const seatsRemainingText = useMemo(() => {
+        if (typeof seatsRemaining !== "number") {
+            return "";
+        }
+        if (seatsRemaining > 0) {
+            return `${seatsRemaining.toLocaleString()} ${seatsRemaining === 1 ? "seat" : "seats"} remaining`;
+        }
+        if (seatsRemaining === 0) {
+            return "No seats remaining";
+        }
+        return `${Math.abs(seatsRemaining).toLocaleString()} over limit`;
+    }, [seatsRemaining]);
+    /*
+     * Total and mutually exclusive. isUserLimitBreached is tested first, so
+     * reaching the >= 90 test structurally guarantees the limit is not exceeded
+     * and the amber nudge can never co-fire with the red breach.
+     *
+     * The test runs on the displayed percent rather than the raw ratio so that
+     * the number triggering the warning is the number printed under the bar.
+     */
+    const seatTone = useMemo(() => {
+        if (!licenseValid) {
+            return "healthy";
+        }
+        if (isUserLimitBreached) {
+            return "breached";
+        }
+        if (typeof seatUsageDisplayPercent === "number" &&
+            seatUsageDisplayPercent >= SEAT_WARNING_PERCENT) {
+            return "approaching";
+        }
+        return "healthy";
+    }, [licenseValid, isUserLimitBreached, seatUsageDisplayPercent]);
+    /*
+     * Copy containing apostrophes lives in string literals rather than JSX text,
+     * because react/no-unescaped-entities is enforced in this repo.
+     */
+    const seatAdvisoryTitle = useMemo(() => {
+        if (seatTone === "breached") {
+            const over = Math.abs(seatsRemaining || 0);
+            return over === 1
+                ? "1 user over your licensed seats"
+                : `${over.toLocaleString()} users over your licensed seats`;
+        }
+        if (seatTone === "approaching") {
+            if (seatsRemaining === 0) {
+                return "Every licensed seat is in use";
+            }
+            return seatsRemaining === 1
+                ? "Only 1 seat left on your license"
+                : `Only ${(seatsRemaining || 0).toLocaleString()} seats left on your license`;
+        }
+        return "";
+    }, [seatTone, seatsRemaining]);
+    const seatAdvisoryBody = useMemo(() => {
+        const limitText = (userLimit || 0).toLocaleString();
+        const inUse = `${(currentUserCount || 0).toLocaleString()} of ${limitText}`;
+        if (seatTone === "breached") {
+            return `This installation is using ${inUse} licensed seats. Expand your license so it covers everyone on the platform.`;
+        }
+        if (seatTone === "approaching") {
+            return `You're using ${inUse} licensed seats. Anyone you add beyond ${limitText} puts this installation over its licensed limit — if more people are joining, it's worth talking to OneUptime about expanding now.`;
+        }
+        return "";
+    }, [seatTone, currentUserCount, userLimit]);
+    const seatUsageAriaValueText = useMemo(() => {
+        if (typeof seatUsageDisplayPercent !== "number") {
+            return "";
+        }
+        if (seatTone === "breached") {
+            return `${seatUsageDisplayPercent}% of licensed seats in use — ${seatAdvisoryTitle}`;
+        }
+        if (typeof seatsRemaining === "number") {
+            return `${seatUsageDisplayPercent}% of licensed seats in use — ${seatsRemainingText}`;
+        }
+        return `${seatUsageDisplayPercent}% of licensed seats in use`;
+    }, [
+        seatUsageDisplayPercent,
+        seatTone,
+        seatAdvisoryTitle,
+        seatsRemaining,
+        seatsRemainingText,
+    ]);
     const editionName = useMemo(() => {
         if (!IS_ENTERPRISE_EDITION) {
             return "Community Edition";
@@ -227,11 +362,14 @@ const EditionLabel = (props) => {
         if (!licenseValid) {
             return "bg-red-500";
         }
-        if (isUserLimitBreached) {
+        if (seatTone === "breached") {
             return "bg-red-500";
         }
+        if (seatTone === "approaching") {
+            return "bg-amber-500";
+        }
         return "bg-emerald-500";
-    }, [isConfigLoading, licenseValid, isUserLimitBreached]);
+    }, [isConfigLoading, licenseValid, seatTone]);
     const ctaLabel = useMemo(() => {
         if (!IS_ENTERPRISE_EDITION) {
             return "Learn more";
@@ -242,11 +380,84 @@ const EditionLabel = (props) => {
         if (!licenseValid) {
             return "Validate license";
         }
-        if (isUserLimitBreached) {
+        if (seatTone === "breached") {
             return "User limit exceeded";
         }
+        if (seatTone === "approaching") {
+            return "Seats nearly full";
+        }
         return "View details";
+    }, [isConfigLoading, licenseValid, seatTone]);
+    const pillTone = useMemo(() => {
+        if (!IS_ENTERPRISE_EDITION || isConfigLoading) {
+            return "normal";
+        }
+        if (seatTone === "breached" ||
+            (!licenseValid && Boolean(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enterpriseLicenseKey))) {
+            return "alerted";
+        }
+        if (seatTone === "approaching") {
+            return "warning";
+        }
+        return "normal";
+    }, [
+        isConfigLoading,
+        licenseValid,
+        seatTone,
+        globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enterpriseLicenseKey,
+    ]);
+    const modalIcon = useMemo(() => {
+        if (!IS_ENTERPRISE_EDITION || isConfigLoading) {
+            return IconProp.Cube;
+        }
+        if (!licenseValid || isUserLimitBreached) {
+            return IconProp.Alert;
+        }
+        return IconProp.ShieldCheck;
+    }, [isConfigLoading, licenseValid, isUserLimitBreached]);
+    const modalIconType = useMemo(() => {
+        if (!IS_ENTERPRISE_EDITION || isConfigLoading) {
+            return IconType.Info;
+        }
+        if (!licenseValid || isUserLimitBreached) {
+            return IconType.Danger;
+        }
+        return IconType.Success;
     }, [isConfigLoading, licenseValid, isUserLimitBreached]);
+    const modalDescription = useMemo(() => {
+        if (!IS_ENTERPRISE_EDITION) {
+            return "You are running the free, open-source build of OneUptime.";
+        }
+        if (isConfigLoading) {
+            return "Checking your license with OneUptime...";
+        }
+        if (!licenseValid) {
+            return "Validate your license key to activate Enterprise Edition.";
+        }
+        return "License, seat usage, and the instances covered by this key.";
+    }, [isConfigLoading, licenseValid]);
+    /*
+     * The per-instance counts only exceed the unique total when someone actually
+     * appears on more than one instance, and the component cannot know whether
+     * they do — it receives per-instance counts and the unique total separately.
+     * So the summation is stated as a possibility, and is dropped entirely when
+     * there is no unique total to compare against. It names the unique user count
+     * rather than "the total above", which would be ambiguous next to a hero
+     * reading "119 / 120 seats".
+     */
+    const instanceOverlapText = useMemo(() => {
+        const countingRule = `Seats are counted uniquely across all ${licenseInstances.length} instances that share this license — the same person on multiple instances uses one seat.`;
+        if (typeof currentUserCount !== "number") {
+            return countingRule;
+        }
+        return `${countingRule} Per-instance counts can therefore add up to more than the ${currentUserCount.toLocaleString()} unique ${currentUserCount === 1 ? "user" : "users"} counted above.`;
+    }, [licenseInstances.length, currentUserCount]);
+    const licenseKeyHelperText = useMemo(() => {
+        if (isChangingLicense) {
+            return "Enter the new enterprise license key and validate it to replace the current one. Your existing license stays active until the new key is validated.";
+        }
+        return "You have installed Enterprise Edition of OneUptime. You need to validate your license key. Need a license key? Contact our sales team at";
+    }, [isChangingLicense]);
     const communityFeatures = useMemo(() => {
         return [
             "Full OneUptime platform with incident response, status pages, and workflow automation.",
@@ -299,6 +510,26 @@ const EditionLabel = (props) => {
         }
         closeDialog();
     };
+    const buildSeatExpansionMailto = () => {
+        const subject = seatTone === "breached"
+            ? "Expand OneUptime license - over seat limit"
+            : "Expand OneUptime license - nearly out of seats";
+        const body = [
+            "Hi OneUptime,",
+            "",
+            "We would like to expand the seat count on our enterprise license.",
+            "",
+            `Company: ${(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enterpriseCompanyName) || "Not specified"}`,
+            `Seats in use: ${(currentUserCount || 0).toLocaleString()} of ${(userLimit || 0).toLocaleString()}`,
+            `Instances on this license: ${licenseInstances.length}`,
+        ].join("\n");
+        return `${SALES_MAILTO_URL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+    };
+    const handleRequestMoreSeats = () => {
+        if (typeof window !== "undefined") {
+            window.location.href = buildSeatExpansionMailto();
+        }
+    };
     const runLicenseValidation = useCallback(async (key, setLoading) => {
         const trimmedKey = key.trim();
         if (!trimmedKey) {
@@ -348,6 +579,20 @@ const EditionLabel = (props) => {
     };
     const showLicenseKeyInput = IS_ENTERPRISE_EDITION && (!licenseValid || isChangingLicense);
     const shouldShowEnterpriseValidationButton = showLicenseKeyInput;
+    /*
+     * Collapses the !configError && !isConfigLoading && licenseValid chain that
+     * gates the stat strip, the seat card and the instances card.
+     */
+    const showLicenseDetails = IS_ENTERPRISE_EDITION && !configError && !isConfigLoading && licenseValid;
+    const showEnterpriseFeatureList = IS_ENTERPRISE_EDITION && !configError && !isConfigLoading && !licenseValid;
+    /*
+     * GlobalConfigAPI returns userLimit and currentUserCount to anonymous callers
+     * because the same route serves the signed-out login page, and gates only
+     * licenseKey, token, instances and instanceId on isAuthenticatedUser. Gate
+     * the sales ask on a field the server does redact, so a signed-out visitor is
+     * never shown an administrator-targeted CTA.
+     */
+    const canSeeLicenseAdmin = Boolean(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enterpriseLicenseKey);
     const modalSubmitButtonText = IS_ENTERPRISE_EDITION
         ? shouldShowEnterpriseValidationButton
             ? "Validate License"
@@ -366,169 +611,209 @@ const EditionLabel = (props) => {
             ? !licenseKeyInput.trim() || isValidating || isConfigLoading
             : undefined
         : false;
-    const showAlertedPill = IS_ENTERPRISE_EDITION &&
-        !isConfigLoading &&
-        (isUserLimitBreached ||
-            (!licenseValid && Boolean(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enterpriseLicenseKey)));
-    const pillClassName = showAlertedPill
+    const modalRightElement = showLicenseDetails ? (React.createElement("span", { className: `inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium ${seatTone === "breached"
+            ? "border-red-200 bg-red-50 text-red-700"
+            : seatTone === "approaching"
+                ? "border-amber-200 bg-amber-50 text-amber-800"
+                : "border-emerald-200 bg-emerald-50 text-emerald-800"}` },
+        React.createElement("span", { className: `h-1.5 w-1.5 shrink-0 rounded-full ${seatTone === "breached"
+                ? "bg-red-500"
+                : seatTone === "approaching"
+                    ? "bg-amber-500"
+                    : "bg-emerald-500"}` }),
+        seatTone === "breached"
+            ? "Seat limit exceeded"
+            : seatTone === "approaching"
+                ? "Seats nearly full"
+                : "License active")) : undefined;
+    const modalLeftFooterElement = showLicenseDetails && !isChangingLicense ? (React.createElement(Button, { title: "Change license key", icon: IconProp.Edit, buttonStyle: ButtonStyleType.NORMAL, onClick: handleStartChangingLicense })) : undefined;
+    const pillClassName = pillTone === "alerted"
         ? "group inline-flex items-center gap-2 rounded-full border border-red-200 bg-red-50 px-3 py-1 text-xs font-medium text-red-700 shadow-sm transition hover:border-red-300 hover:bg-red-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400"
-        : "group inline-flex items-center gap-2 rounded-full border border-indigo-100 bg-white px-3 py-1 text-xs font-medium text-indigo-700 shadow-sm transition hover:border-indigo-300 hover:bg-indigo-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400";
-    const pillCtaTextClassName = showAlertedPill
+        : pillTone === "warning"
+            ? "group inline-flex items-center gap-2 rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs font-medium text-amber-800 shadow-sm transition hover:border-amber-300 hover:bg-amber-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-400"
+            : "group inline-flex items-center gap-2 rounded-full border border-indigo-100 bg-white px-3 py-1 text-xs font-medium text-indigo-700 shadow-sm transition hover:border-indigo-300 hover:bg-indigo-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400";
+    const pillCtaTextClassName = pillTone === "alerted"
         ? "text-[11px] text-red-500 group-hover:text-red-600"
-        : "text-[11px] text-indigo-500 group-hover:text-indigo-600";
+        : pillTone === "warning"
+            ? "text-[11px] text-amber-600 group-hover:text-amber-700"
+            : "text-[11px] text-indigo-500 group-hover:text-indigo-600";
     return (React.createElement(React.Fragment, null,
         React.createElement("button", { type: "button", onClick: openDialog, className: `${pillClassName} ${props.className ? props.className : ""}`, "aria-label": `${editionName}, ${ctaLabel}` },
-            showAlertedPill && (React.createElement(Icon, { icon: IconProp.Alert, size: SizeProp.Small, className: "text-red-600" })),
+            pillTone !== "normal" && (React.createElement(Icon, { icon: pillTone === "alerted"
+                    ? IconProp.Alert
+                    : IconProp.ExclaimationCircle, className: `h-3 w-3 ${pillTone === "alerted" ? "text-red-600" : "text-amber-600"}` })),
             React.createElement("span", { className: `h-2 w-2 rounded-full transition group-hover:scale-110 ${indicatorColor}` }),
             React.createElement("span", { className: "tracking-wide" }, editionName),
             React.createElement("span", { className: pillCtaTextClassName }, ctaLabel)),
-        isDialogOpen && (React.createElement(Modal, { title: editionName, submitButtonText: modalSubmitButtonText, closeButtonText: "Close", onClose: closeDialog, onSubmit: modalOnSubmit, modalWidth: ModalWidth.Large, isLoading: modalIsLoading, disableSubmitButton: modalDisableSubmitButton, isBodyLoading: IS_ENTERPRISE_EDITION ? isConfigLoading : false },
-            React.createElement("div", { className: "space-y-3 text-sm text-gray-600" }, IS_ENTERPRISE_EDITION ? (React.createElement(React.Fragment, null,
-                configError && (React.createElement("div", { className: "rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-700" },
-                    React.createElement("p", { className: "font-semibold" }, "Unable to load license details"),
-                    React.createElement("p", { className: "mt-1" }, configError),
-                    React.createElement("div", { className: "mt-3 -ml-3" },
-                        React.createElement(Button, { title: "Retry", buttonStyle: ButtonStyleType.DANGER, onClick: handleRetryFetch, isLoading: isConfigLoading })))),
-                !configError && !isConfigLoading && licenseValid && (React.createElement("div", { className: "rounded-md border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-700" },
-                    React.createElement("p", { className: "font-semibold" }, "License verified"),
-                    React.createElement("p", { className: "mt-1" },
-                        React.createElement("span", { className: "font-medium" }, "Company:"),
-                        " ",
-                        (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enterpriseCompanyName) || "Not specified"),
-                    licenseExpiresAtText && (React.createElement("p", null,
-                        React.createElement("span", { className: "font-medium" }, "Expires:"),
-                        " ",
-                        licenseExpiresAtText)))),
-                !configError && !isConfigLoading && licenseValid && (React.createElement("div", { className: `rounded-lg border p-4 shadow-sm ${isUserLimitBreached
-                        ? "border-red-200 bg-red-50"
-                        : "border-gray-200 bg-white"}` },
-                    React.createElement("div", { className: "flex items-start gap-3" },
-                        React.createElement("div", { className: `flex h-9 w-9 items-center justify-center rounded-full ${isUserLimitBreached
-                                ? "bg-red-100 text-red-600"
-                                : "bg-indigo-100 text-indigo-600"}` },
-                            React.createElement(Icon, { icon: isUserLimitBreached ? IconProp.Alert : IconProp.User, size: SizeProp.Regular })),
-                        React.createElement("div", { className: "flex-1" },
-                            React.createElement("div", { className: "flex items-center justify-between" },
-                                React.createElement("h3", { className: `text-sm font-semibold ${isUserLimitBreached
-                                        ? "text-red-900"
-                                        : "text-gray-900"}` }, "User Usage"),
-                                isUserLimitBreached && (React.createElement("span", { className: "inline-flex items-center gap-1 rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700" }, "Limit exceeded"))),
-                            React.createElement("div", { className: "mt-2 flex items-baseline gap-1" },
-                                React.createElement("span", { className: `text-2xl font-semibold ${isUserLimitBreached
+        isDialogOpen && (React.createElement(Modal, { title: editionName, description: modalDescription, icon: modalIcon, iconType: modalIconType, rightElement: modalRightElement, submitButtonText: modalSubmitButtonText, closeButtonText: "Close", onClose: closeDialog, onSubmit: modalOnSubmit, modalWidth: ModalWidth.Medium, isLoading: modalIsLoading, disableSubmitButton: modalDisableSubmitButton, isBodyLoading: IS_ENTERPRISE_EDITION ? isConfigLoading : false, leftFooterElement: modalLeftFooterElement },
+            React.createElement("div", { className: "space-y-4 text-sm text-gray-600" }, IS_ENTERPRISE_EDITION ? (React.createElement(React.Fragment, null,
+                !configError && successMessage && (React.createElement(Alert, { type: AlertType.SUCCESS, title: successMessage })),
+                configError && (React.createElement("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4" },
+                    React.createElement("div", { className: "flex items-start gap-2.5" },
+                        React.createElement(Icon, { icon: IconProp.Alert, className: "mt-0.5 h-4 w-4 shrink-0 text-red-600" }),
+                        React.createElement("div", { className: "min-w-0 flex-1" },
+                            React.createElement("p", { className: "text-sm font-semibold text-red-900" }, "Unable to load license details"),
+                            React.createElement("p", { className: "mt-1 text-xs leading-relaxed text-red-800" }, configError),
+                            React.createElement("div", { className: "mt-3" },
+                                React.createElement(Button, { title: "Try again", buttonStyle: ButtonStyleType.DANGER, onClick: handleRetryFetch, isLoading: isConfigLoading, className: "!mt-0 md:!ml-0" })))))),
+                showLicenseDetails && (React.createElement("dl", { className: "grid grid-cols-1 gap-px overflow-hidden rounded-xl border border-gray-200 bg-gray-200 sm:grid-cols-2" },
+                    React.createElement("div", { className: "min-w-0 bg-white px-4 py-3" },
+                        React.createElement("dt", { className: "text-[11px] font-medium uppercase tracking-wide text-gray-500" }, "Licensed to"),
+                        React.createElement("dd", { className: "mt-1 truncate text-sm font-medium text-gray-900", title: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enterpriseCompanyName) || undefined }, (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enterpriseCompanyName) || "Not specified")),
+                    React.createElement("div", { className: "bg-white px-4 py-3" },
+                        React.createElement("dt", { className: "text-[11px] font-medium uppercase tracking-wide text-gray-500" }, "Expires"),
+                        React.createElement("dd", { className: "mt-1 text-sm font-medium tabular-nums text-gray-900" }, licenseExpiresAtText || "—")))),
+                showLicenseDetails && (React.createElement("section", { "aria-labelledby": "edition-seats-heading", className: "rounded-xl border border-gray-200 bg-white p-5" },
+                    React.createElement("div", { className: "flex items-start justify-between gap-4" },
+                        React.createElement("div", { className: "min-w-0" },
+                            React.createElement("h4", { id: "edition-seats-heading", className: "text-sm font-semibold text-gray-900" }, "Licensed seats"),
+                            React.createElement("p", { className: "mt-0.5 text-xs text-gray-500" }, "Unique users across every instance on this license.")),
+                        seatTone !== "healthy" && (React.createElement("span", { className: `inline-flex shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium ${seatTone === "breached"
+                                ? "bg-red-100 text-red-700"
+                                : "bg-amber-100 text-amber-800"}` }, seatTone === "breached"
+                            ? "Limit exceeded"
+                            : "Nearly full"))),
+                    React.createElement("div", { className: "mt-4 flex items-end justify-between gap-4" },
+                        React.createElement("p", { className: "flex items-baseline gap-1.5" },
+                            React.createElement("span", { className: `text-3xl font-semibold leading-none tabular-nums ${typeof currentUserCount !== "number"
+                                    ? "text-gray-300"
+                                    : seatTone === "breached"
                                         ? "text-red-700"
                                         : "text-gray-900"}` }, typeof currentUserCount === "number"
-                                    ? currentUserCount.toLocaleString()
-                                    : "—"),
-                                React.createElement("span", { className: "text-sm text-gray-500" },
-                                    " / ",
-                                    typeof userLimit === "number" && userLimit > 0
-                                        ? `${userLimit.toLocaleString()} users`
-                                        : "unlimited")),
-                            typeof userUsagePercent === "number" && (React.createElement("div", { className: "mt-3" },
-                                React.createElement("div", { className: "h-2 w-full overflow-hidden rounded-full bg-gray-200" },
-                                    React.createElement("div", { className: `h-full rounded-full transition-all ${isUserLimitBreached
-                                            ? "bg-red-500"
-                                            : userUsagePercent >= 80
-                                                ? "bg-amber-500"
-                                                : "bg-emerald-500"}`, style: { width: `${userUsagePercent}%` } })),
-                                React.createElement("p", { className: "mt-1 text-xs text-gray-500" },
-                                    userUsagePercent,
-                                    "% of licensed seats in use"))),
-                            isUserLimitBreached && (React.createElement("p", { className: "mt-3 text-xs text-red-700" },
-                                "Your installation has more users than your license permits. Please contact",
-                                " ",
-                                React.createElement("a", { href: "mailto:sales@oneuptime.com", className: "font-medium text-red-800 underline hover:text-red-900" }, "sales@oneuptime.com"),
-                                " ",
-                                "to expand your license.")),
-                            licenseInstances.length > 1 && (React.createElement("p", { className: "mt-3 text-xs text-gray-500" },
-                                "Users are counted uniquely across all",
-                                " ",
-                                licenseInstances.length,
-                                " instances that share this license \u2014 the same user on multiple instances uses one seat.")),
-                            React.createElement("p", { className: "mt-3 text-xs text-gray-500" }, userCountUpdatedAtText
-                                ? `Last reported to OneUptime on ${userCountUpdatedAtText}.`
-                                : "User count has not been reported to OneUptime yet. The first report will be sent within 24 hours."))))),
-                !configError &&
-                    !isConfigLoading &&
-                    licenseValid &&
-                    licenseInstances.length > 0 && (React.createElement("div", { className: "rounded-lg border border-gray-200 bg-white p-4 shadow-sm" },
-                    React.createElement("div", { className: "flex items-center justify-between" },
-                        React.createElement("h3", { className: "text-sm font-semibold text-gray-900" }, "Instances using this license"),
-                        React.createElement("span", { className: "text-xs text-gray-500" },
+                                ? currentUserCount.toLocaleString()
+                                : "—"),
+                            React.createElement("span", { className: "text-sm tabular-nums text-gray-500" },
+                                " / ",
+                                typeof userLimit === "number" && userLimit > 0
+                                    ? `${userLimit.toLocaleString()} seats`
+                                    : "unlimited")),
+                        typeof seatsRemaining === "number" && (React.createElement("p", { className: `text-xs font-medium tabular-nums ${seatTone === "breached"
+                                ? "text-red-700"
+                                : seatTone === "approaching"
+                                    ? "text-amber-700"
+                                    : "text-gray-500"}` }, seatsRemainingText))),
+                    typeof seatUsageDisplayPercent === "number" && (React.createElement("div", { className: "mt-2.5" },
+                        React.createElement("div", { className: "h-2.5 w-full overflow-hidden rounded-full bg-gray-100", role: "progressbar", "aria-label": "Licensed seat usage", "aria-valuenow": seatUsageBarPercent, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuetext": seatUsageAriaValueText },
+                            React.createElement("div", { className: `h-full rounded-full transition-all duration-300 ease-out ${seatTone === "breached"
+                                    ? "bg-red-500"
+                                    : seatTone === "approaching"
+                                        ? "bg-amber-500"
+                                        : "bg-emerald-500"}`, style: { width: `${seatUsageBarPercent}%` } })),
+                        React.createElement("p", { className: "mt-1.5 text-xs tabular-nums text-gray-500" },
+                            seatUsageDisplayPercent,
+                            "% of licensed seats in use"))),
+                    seatTone !== "healthy" && canSeeLicenseAdmin && (React.createElement("div", { role: seatTone === "breached" ? "alert" : "status", className: `mt-4 rounded-lg border p-3.5 ${seatTone === "breached"
+                            ? "border-red-200 bg-red-50"
+                            : "border-amber-200 bg-amber-50"}` },
+                        React.createElement("div", { className: "flex items-start gap-2.5" },
+                            React.createElement(Icon, { icon: seatTone === "breached"
+                                    ? IconProp.Alert
+                                    : IconProp.ExclaimationCircle, className: `mt-0.5 h-4 w-4 shrink-0 ${seatTone === "breached"
+                                    ? "text-red-600"
+                                    : "text-amber-600"}` }),
+                            React.createElement("div", { className: "min-w-0 flex-1" },
+                                React.createElement("h5", { className: `text-sm font-semibold ${seatTone === "breached"
+                                        ? "text-red-900"
+                                        : "text-amber-900"}` }, seatAdvisoryTitle),
+                                React.createElement("p", { className: `mt-1 text-xs leading-relaxed ${seatTone === "breached"
+                                        ? "text-red-800"
+                                        : "text-amber-800"}` }, seatAdvisoryBody),
+                                React.createElement("div", { className: "mt-3 flex flex-wrap items-center gap-x-3 gap-y-2" },
+                                    React.createElement(Button, { title: seatTone === "breached"
+                                            ? "Expand your license"
+                                            : "Request more seats", icon: IconProp.Email, buttonStyle: seatTone === "breached"
+                                            ? ButtonStyleType.DANGER
+                                            : ButtonStyleType.PRIMARY, onClick: handleRequestMoreSeats, className: "!mt-0 md:!ml-0" }),
+                                    React.createElement("span", { className: `text-[11px] ${seatTone === "breached"
+                                            ? "text-red-700"
+                                            : "text-amber-700"}` },
+                                        "Or email",
+                                        " ",
+                                        React.createElement("a", { href: SALES_MAILTO_URL, className: `font-medium underline ${seatTone === "breached"
+                                                ? "text-red-800 hover:text-red-900"
+                                                : "text-amber-900 hover:text-amber-950"}` }, SALES_EMAIL),
+                                        " ",
+                                        "directly.")))))),
+                    React.createElement("div", { className: "mt-4 border-t border-gray-100 pt-3" },
+                        React.createElement("p", { className: "text-xs text-gray-500" }, userCountUpdatedAtText
+                            ? `Last reported to OneUptime on ${userCountUpdatedAtText}.`
+                            : "User count has not been reported to OneUptime yet. The first report will be sent within 24 hours.")))),
+                showLicenseDetails && licenseInstances.length > 0 && (React.createElement("section", { "aria-labelledby": "edition-instances-heading", className: "rounded-xl border border-gray-200 bg-white p-5" },
+                    React.createElement("div", { className: "flex items-center justify-between gap-3" },
+                        React.createElement("h4", { id: "edition-instances-heading", className: "text-sm font-semibold text-gray-900" }, "Instances on this license"),
+                        React.createElement("span", { className: "shrink-0 rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium tabular-nums text-gray-600" },
                             licenseInstances.length,
                             " ",
                             licenseInstances.length === 1
                                 ? "instance"
                                 : "instances")),
-                    React.createElement("p", { className: "mt-1 text-xs text-gray-500" }, "Use the same license key on every instance you deploy (staging, production, and so on). Each instance reports its usage daily."),
-                    React.createElement("ul", { className: "mt-3 divide-y divide-gray-100" }, licenseInstances.map((instance, index) => {
+                    React.createElement("p", { className: "mt-1 text-xs leading-relaxed text-gray-500" }, "Use the same license key on every instance you deploy (staging, production, and so on). Each instance reports its usage daily."),
+                    licenseInstances.length > 1 && (React.createElement("p", { className: "mt-1.5 text-xs leading-relaxed text-gray-500" }, instanceOverlapText)),
+                    React.createElement("ul", { className: "mt-3 divide-y divide-gray-100 overflow-hidden rounded-lg border border-gray-200" }, licenseInstances.map((instance, index) => {
                         const isThisInstance = Boolean(thisInstanceId) &&
                             instance.instanceId === thisInstanceId;
-                        return (React.createElement("li", { key: instance.instanceId || index, className: "flex items-center justify-between gap-3 py-2" },
-                            React.createElement("div", { className: "min-w-0" },
-                                React.createElement("p", { className: "truncate text-sm font-medium text-gray-900" },
-                                    instance.host || "Unknown host",
-                                    isThisInstance && (React.createElement("span", { className: "ml-2 inline-flex items-center rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-medium text-indigo-700" }, "This instance"))),
-                                React.createElement("p", { className: "text-xs text-gray-500" }, formatInstanceReportedAt(instance.lastReportedAt))),
-                            React.createElement("div", { className: "shrink-0 text-right text-sm text-gray-700" }, typeof instance.userCount === "number"
-                                ? `${instance.userCount.toLocaleString()} ${instance.userCount === 1
+                        return (React.createElement("li", { key: instance.instanceId || index, className: "flex items-center justify-between gap-4 bg-white px-3 py-2.5 transition-colors hover:bg-gray-50" },
+                            React.createElement("div", { className: "min-w-0 flex-1" },
+                                React.createElement("div", { className: "flex min-w-0 items-center gap-2" },
+                                    React.createElement("span", { className: "truncate text-sm font-medium text-gray-900", title: instance.host || "Unknown host" }, instance.host || "Unknown host"),
+                                    isThisInstance && (React.createElement("span", { className: "shrink-0 rounded-full bg-indigo-50 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-indigo-700" }, "This instance"))),
+                                React.createElement("p", { className: "mt-0.5 truncate text-xs text-gray-500" }, formatInstanceReportedAt(instance.lastReportedAt))),
+                            React.createElement("div", { className: "flex shrink-0 items-baseline justify-end gap-1" }, typeof instance.userCount === "number" ? (React.createElement(React.Fragment, null,
+                                React.createElement("span", { className: "text-sm font-medium tabular-nums text-gray-900" }, instance.userCount.toLocaleString()),
+                                React.createElement("span", { className: "text-xs text-gray-500" }, instance.userCount === 1
                                     ? "user"
-                                    : "users"}`
-                                : "—")));
+                                    : "users"))) : (React.createElement("span", { className: "text-sm text-gray-400" }, "\u2014")))));
                     })))),
-                !configError &&
-                    !isConfigLoading &&
-                    licenseValid &&
-                    !isChangingLicense && (React.createElement("div", { className: "-ml-3" },
-                    React.createElement(Button, { title: "Change license key", icon: IconProp.Edit, buttonStyle: ButtonStyleType.NORMAL, onClick: handleStartChangingLicense }))),
                 !configError &&
                     !isConfigLoading &&
                     !licenseValid &&
-                    (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enterpriseLicenseKey) && (React.createElement("div", { className: "rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-700" },
-                    React.createElement("p", { className: "font-semibold" }, "License validation required"),
-                    React.createElement("p", { className: "mt-1" }, "The stored license information could not be verified. Please validate the license key again."))),
-                !configError && (React.createElement(React.Fragment, null,
-                    successMessage && (React.createElement(Alert, { type: AlertType.SUCCESS, title: successMessage })),
-                    showLicenseKeyInput && (React.createElement(React.Fragment, null,
-                        React.createElement("div", null,
-                            React.createElement("label", { className: "text-sm font-medium text-gray-700" }, isChangingLicense
-                                ? "New License Key"
-                                : "License Key"),
-                            React.createElement(Input, { value: licenseKeyInput, onChange: (value) => {
-                                    setLicenseKeyInput(value);
-                                    licenseInputEditedRef.current = true;
-                                }, placeholder: "Enter your enterprise license key", disableSpellCheck: true })),
-                        validationError && (React.createElement(Alert, { type: AlertType.DANGER, title: validationError })),
-                        isChangingLicense ? (React.createElement("div", { className: "flex items-center justify-between gap-3" },
-                            React.createElement("p", { className: "text-xs text-gray-500" }, "Enter the new enterprise license key and validate it to replace the current one. Your existing license stays active until the new key is validated."),
-                            React.createElement(Button, { title: "Cancel", buttonStyle: ButtonStyleType.NORMAL, onClick: handleCancelChangingLicense }))) : (React.createElement("p", { className: "text-xs text-gray-500" },
-                            "You have installed Enterprise Edition of OneUptime. You need to validate your license key. Need a license key? Contact our sales team at",
-                            " ",
-                            React.createElement("a", { href: "mailto:sales@oneuptime.com", className: "font-medium text-indigo-600 hover:text-indigo-700" }, "sales@oneuptime.com"),
-                            ".")))))),
-                React.createElement("div", { className: "rounded-lg border border-indigo-200 bg-indigo-50 p-4 shadow-sm" },
-                    React.createElement("h3", { className: "text-sm font-semibold text-indigo-900" }, "Enterprise Edition Features"),
-                    React.createElement("ul", { className: "mt-3 space-y-2 text-sm text-indigo-900" }, enterpriseFeatures.map((feature, index) => {
-                        return (React.createElement("li", { key: index, className: "flex items-start gap-2" },
-                            React.createElement(Icon, { icon: IconProp.Check, type: IconType.Success, size: SizeProp.Small, className: "mt-0.5" }),
-                            React.createElement("span", { className: "leading-snug" }, feature)));
-                    })),
-                    React.createElement("p", { className: "mt-3 text-xs text-indigo-700" }, "Already have a license? Validate it above to unlock these premium capabilities immediately.")))) : (React.createElement(React.Fragment, null,
+                    (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enterpriseLicenseKey) && (React.createElement("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4" },
+                    React.createElement("p", { className: "text-sm font-semibold text-red-900" }, "License validation required"),
+                    React.createElement("p", { className: "mt-1 text-xs leading-relaxed text-red-800" }, "The stored license information could not be verified. Please validate the license key again."))),
+                !configError && showLicenseKeyInput && (React.createElement("section", { className: "rounded-xl border border-gray-200 bg-white p-5" },
+                    React.createElement("div", { className: "flex items-start justify-between gap-4" },
+                        React.createElement("div", { className: "min-w-0" },
+                            React.createElement("label", { htmlFor: "enterprise-license-key", className: "text-sm font-semibold text-gray-900" }, isChangingLicense
+                                ? "New license key"
+                                : "License key"),
+                            React.createElement("p", { className: "mt-0.5 text-xs leading-relaxed text-gray-500" },
+                                licenseKeyHelperText,
+                                !isChangingLicense && (React.createElement(React.Fragment, null,
+                                    " ",
+                                    React.createElement("a", { href: SALES_MAILTO_URL, className: "font-medium text-indigo-600 hover:text-indigo-700" }, SALES_EMAIL),
+                                    ".")))),
+                        isChangingLicense && (React.createElement(Button, { title: "Cancel", buttonStyle: ButtonStyleType.NORMAL, onClick: handleCancelChangingLicense, className: "!mt-0 shrink-0 md:!ml-0" }))),
+                    React.createElement("div", { className: "mt-3" },
+                        React.createElement(Input, { id: "enterprise-license-key", value: licenseKeyInput, onChange: (value) => {
+                                setLicenseKeyInput(value);
+                                licenseInputEditedRef.current = true;
+                            }, placeholder: "Enter your enterprise license key", disableSpellCheck: true })),
+                    validationError && (React.createElement("div", { className: "mt-3" },
+                        React.createElement(Alert, { type: AlertType.DANGER, title: validationError }))))),
+                showEnterpriseFeatureList && (React.createElement("section", { "aria-labelledby": "edition-features-heading", className: "rounded-xl border border-indigo-100 bg-gradient-to-br from-indigo-50 via-white to-white p-5" },
+                    React.createElement("h4", { id: "edition-features-heading", className: "text-sm font-semibold text-indigo-900" }, "What your license unlocks"),
+                    React.createElement("p", { className: "mt-0.5 text-xs text-indigo-700" }, "Validate your key above to turn these on immediately."),
+                    React.createElement("ul", { className: "mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2" }, enterpriseFeatures.map((feature, index) => {
+                        return (React.createElement("li", { key: index, className: "flex items-start gap-2 rounded-lg border border-gray-100 bg-white px-3 py-2.5" },
+                            React.createElement("span", { className: "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-indigo-50" },
+                                React.createElement(Icon, { icon: IconProp.Check, className: "h-3 w-3 text-indigo-600" })),
+                            React.createElement("span", { className: "text-xs leading-snug text-gray-700" }, feature)));
+                    })))))) : (React.createElement(React.Fragment, null,
                 React.createElement("p", null, "You are running the Community Edition of OneUptime. Here is a quick comparison to help you decide if Enterprise is the right fit for your team."),
                 React.createElement("div", { className: "grid gap-4 md:grid-cols-2" },
-                    React.createElement("div", { className: "rounded-lg border border-gray-200 bg-white p-4 shadow-sm" },
-                        React.createElement("h3", { className: "text-sm font-semibold text-gray-900" }, "Community Edition"),
+                    React.createElement("div", { className: "rounded-xl border border-gray-200 bg-white p-4" },
+                        React.createElement("h4", { className: "text-sm font-semibold text-gray-900" }, "Community Edition"),
                         React.createElement("ul", { className: "mt-3 space-y-2 text-sm text-gray-600" }, communityFeatures.map((feature, index) => {
                             return (React.createElement("li", { key: index, className: "flex items-start gap-2" },
-                                React.createElement(Icon, { icon: IconProp.Check, size: SizeProp.Small, className: "mt-0.5 text-gray-400" }),
+                                React.createElement(Icon, { icon: IconProp.Check, className: "mt-0.5 h-3 w-3 shrink-0 text-gray-400" }),
                                 React.createElement("span", { className: "leading-snug" }, feature)));
                         })),
                         React.createElement("p", { className: "mt-3 text-xs text-gray-500" }, "Best for small teams experimenting with reliability workflows.")),
-                    React.createElement("div", { className: "rounded-lg border border-indigo-200 bg-indigo-50 p-4 shadow-sm" },
-                        React.createElement("h3", { className: "text-sm font-semibold text-indigo-900" }, "Enterprise Edition"),
+                    React.createElement("div", { className: "rounded-xl border border-indigo-100 bg-gradient-to-br from-indigo-50 via-white to-white p-4" },
+                        React.createElement("h4", { className: "text-sm font-semibold text-indigo-900" }, "Enterprise Edition"),
                         React.createElement("ul", { className: "mt-3 space-y-2 text-sm text-indigo-900" }, enterpriseFeatures.map((feature, index) => {
                             return (React.createElement("li", { key: index, className: "flex items-start gap-2" },
-                                React.createElement(Icon, { icon: IconProp.Check, type: IconType.Success, size: SizeProp.Small, className: "mt-0.5" }),
+                                React.createElement(Icon, { icon: IconProp.Check, className: "mt-0.5 h-3 w-3 shrink-0 text-indigo-600" }),
                                 React.createElement("span", { className: "leading-snug" }, feature)));
                         })),
                         React.createElement("p", { className: "mt-3 text-xs text-indigo-700" }, "Everything in Community plus white-glove onboarding, enterprise SLAs, and a partner dedicated to your reliability goals."))),