@powerhousedao/contributor-billing 0.1.41 → 0.1.42

package/dist/editors/service-offering-editor/components/TheMatrix.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useMemo, useEffect, useRef, useCallback } from "react";
 import { generateId } from "document-model/core";
-import { addServiceLevel, updateServiceLevel, addUsageLimit, updateUsageLimit, removeUsageLimit, addService, } from "../../../document-models/service-offering/gen/creators.js";
+import { addServiceLevel, updateServiceLevel, addUsageLimit, updateUsageLimit, removeUsageLimit, addService, updateService, } from "../../../document-models/service-offering/gen/creators.js";
 const SERVICE_LEVELS = [
     {
         value: "INCLUDED",
@@ -437,6 +437,319 @@ const matrixStyles = `
     color: var(--so-slate-700);
   }
 
+  /* Premium Only Badge - Exclusivity Signal (Toggle Button) */
+  .matrix__premium-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.125rem 0.5rem;
+    margin-left: 0.5rem;
+    font-size: 0.5625rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    border-radius: 100px;
+    cursor: pointer;
+    transition: all var(--so-transition-fast);
+    font-family: var(--so-font-sans);
+  }
+
+  .matrix__premium-badge--active {
+    color: var(--so-amber-700);
+    background: linear-gradient(135deg, var(--so-amber-100) 0%, var(--so-amber-50) 100%);
+    border: 1px solid var(--so-amber-200);
+  }
+
+  .matrix__premium-badge--active:hover {
+    background: linear-gradient(135deg, var(--so-amber-200) 0%, var(--so-amber-100) 100%);
+    border-color: var(--so-amber-300);
+  }
+
+  .matrix__premium-badge--inactive {
+    color: var(--so-slate-400);
+    background: var(--so-slate-50);
+    border: 1px dashed var(--so-slate-200);
+    opacity: 0.6;
+  }
+
+  .matrix__premium-badge--inactive:hover {
+    opacity: 1;
+    color: var(--so-amber-600);
+    background: var(--so-amber-50);
+    border: 1px dashed var(--so-amber-300);
+  }
+
+  .matrix__premium-badge--active svg {
+    width: 0.625rem;
+    height: 0.625rem;
+    fill: var(--so-amber-500);
+    stroke: var(--so-amber-600);
+  }
+
+  .matrix__premium-badge--inactive svg {
+    width: 0.625rem;
+    height: 0.625rem;
+    fill: none;
+    stroke: currentColor;
+  }
+
+  /* Incomplete Services Warning */
+  .matrix__incomplete-warning {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.875rem;
+    padding: 1rem 1.25rem;
+    margin-bottom: 1rem;
+    background: var(--so-amber-50);
+    border: 1px solid var(--so-amber-200);
+    border-radius: var(--so-radius-md);
+    animation: matrix-warning-pulse 2s ease-in-out infinite;
+  }
+
+  @keyframes matrix-warning-pulse {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
+    50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1); }
+  }
+
+  .matrix__incomplete-icon {
+    flex-shrink: 0;
+    width: 1.5rem;
+    height: 1.5rem;
+    color: var(--so-amber-600);
+  }
+
+  .matrix__incomplete-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .matrix__incomplete-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .matrix__incomplete-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--so-amber-800);
+  }
+
+  .matrix__incomplete-text {
+    font-size: 0.8125rem;
+    color: var(--so-amber-700);
+    line-height: 1.5;
+  }
+
+  .matrix__incomplete-text strong {
+    font-weight: 600;
+    color: var(--so-amber-900);
+  }
+
+  /* Bulk Actions Toolbar */
+  .matrix__bulk-actions {
+    margin-bottom: 1rem;
+  }
+
+  .matrix__bulk-toggle {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.625rem 1rem;
+    font-family: var(--so-font-sans);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--so-slate-600);
+    background: var(--so-slate-100);
+    border: 1px solid var(--so-slate-200);
+    border-radius: var(--so-radius-md);
+    cursor: pointer;
+    transition: all var(--so-transition-fast);
+  }
+
+  .matrix__bulk-toggle:hover {
+    background: var(--so-slate-200);
+    color: var(--so-slate-700);
+  }
+
+  .matrix__bulk-toggle svg:first-child {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .matrix__bulk-toggle-arrow {
+    width: 0.875rem;
+    height: 0.875rem;
+    margin-left: auto;
+    transition: transform var(--so-transition-fast);
+  }
+
+  .matrix__bulk-toggle-arrow--open {
+    transform: rotate(180deg);
+  }
+
+  .matrix__bulk-panel {
+    margin-top: 0.75rem;
+    padding: 1rem;
+    background: var(--so-slate-50);
+    border: 1px solid var(--so-slate-200);
+    border-radius: var(--so-radius-md);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    animation: so-scale-in var(--so-transition-fast) ease-out;
+  }
+
+  .matrix__bulk-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .matrix__bulk-label {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--so-slate-500);
+  }
+
+  .matrix__bulk-buttons,
+  .matrix__bulk-copy {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .matrix__bulk-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.5rem 0.875rem;
+    font-family: var(--so-font-sans);
+    font-size: 0.75rem;
+    font-weight: 500;
+    border-radius: var(--so-radius-sm);
+    border: 1px solid;
+    cursor: pointer;
+    transition: all var(--so-transition-fast);
+  }
+
+  .matrix__bulk-btn svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  .matrix__bulk-btn--include {
+    background: var(--so-emerald-50);
+    border-color: var(--so-emerald-200);
+    color: var(--so-emerald-700);
+  }
+
+  .matrix__bulk-btn--include:hover {
+    background: var(--so-emerald-100);
+    border-color: var(--so-emerald-300);
+  }
+
+  .matrix__bulk-btn--clear {
+    background: var(--so-rose-50);
+    border-color: var(--so-rose-200);
+    color: var(--so-rose-700);
+  }
+
+  .matrix__bulk-btn--clear:hover {
+    background: var(--so-rose-100);
+    border-color: var(--so-rose-300);
+  }
+
+  .matrix__bulk-btn--copy {
+    background: var(--so-sky-50);
+    border-color: var(--so-sky-200);
+    color: var(--so-sky-700);
+  }
+
+  .matrix__bulk-btn--copy:hover {
+    background: var(--so-sky-100);
+    border-color: var(--so-sky-300);
+  }
+
+  /* Pattern Presets Section */
+  .matrix__bulk-patterns {
+    border-top: 1px dashed var(--so-slate-200);
+    padding-top: 1rem;
+    margin-top: 0.5rem;
+  }
+
+  .matrix__bulk-label-icon {
+    width: 1rem;
+    height: 1rem;
+    vertical-align: middle;
+    margin-right: 0.25rem;
+  }
+
+  .matrix__pattern-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 0.75rem;
+    margin-top: 0.5rem;
+  }
+
+  .matrix__pattern-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.875rem 0.75rem;
+    background: linear-gradient(135deg, var(--so-white) 0%, var(--so-slate-50) 100%);
+    border: 1px solid var(--so-slate-200);
+    border-radius: var(--so-radius-md);
+    cursor: pointer;
+    transition: all var(--so-transition-fast);
+    text-align: center;
+  }
+
+  .matrix__pattern-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--so-shadow-md);
+    border-color: var(--so-violet-300);
+    background: linear-gradient(135deg, var(--so-violet-50) 0%, var(--so-white) 100%);
+  }
+
+  .matrix__pattern-btn:active {
+    transform: translateY(0);
+  }
+
+  .matrix__pattern-icon {
+    font-size: 1.5rem;
+    line-height: 1;
+  }
+
+  .matrix__pattern-name {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--so-slate-700);
+  }
+
+  .matrix__pattern-desc {
+    font-size: 0.6875rem;
+    color: var(--so-slate-500);
+    line-height: 1.3;
+  }
+
+  .matrix__pattern-btn--simple {
+    padding: 0.625rem 0.75rem;
+    flex-direction: row;
+    gap: 0.5rem;
+  }
+
+  .matrix__pattern-btn--simple .matrix__pattern-icon {
+    font-size: 1rem;
+  }
+
+  .matrix__pattern-btn--simple .matrix__pattern-name {
+    font-size: 0.75rem;
+  }
+
   .matrix__level-cell {
     padding: 0.625rem 1rem;
     text-align: center;
@@ -462,6 +775,41 @@ const matrixStyles = `
     font-weight: 500;
   }
 
+  /* Loss Aversion Styling for NOT_INCLUDED */
+  .matrix__level-cell--not-included {
+    position: relative;
+    background: repeating-linear-gradient(
+      135deg,
+      transparent,
+      transparent 8px,
+      rgba(148, 163, 184, 0.08) 8px,
+      rgba(148, 163, 184, 0.08) 16px
+    );
+  }
+
+  .matrix__level-cell--not-included:hover .matrix__upgrade-hint {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .matrix__upgrade-hint {
+    position: absolute;
+    bottom: 2px;
+    left: 50%;
+    transform: translateX(-50%) translateY(4px);
+    font-size: 0.5625rem;
+    font-weight: 500;
+    color: var(--so-violet-600);
+    white-space: nowrap;
+    opacity: 0;
+    transition: all 0.15s ease-out;
+    pointer-events: none;
+  }
+
+  .matrix__level-value--not-included {
+    opacity: 0.6;
+  }
+
   /* Metric Row */
   .matrix__metric-row {
     background: inherit;
@@ -1358,6 +1706,8 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
     const [metricName, setMetricName] = useState("");
     const [metricLimits, setMetricLimits] = useState({});
     const [metricEnabledTiers, setMetricEnabledTiers] = useState(new Set());
+    // Bulk actions state
+    const [showBulkActions, setShowBulkActions] = useState(false);
     const getServiceGroup = (service) => {
         // Services now have optionGroupId directly on them
         return service.optionGroupId || null;
@@ -1404,6 +1754,16 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
         });
         return Array.from(metricsSet);
     };
+    // Incomplete services detection - services not assigned to any tier
+    const incompleteServices = useMemo(() => {
+        if (tiers.length === 0)
+            return [];
+        return services.filter((service) => {
+            // Check if service is included in at least one tier
+            const isIncludedAnywhere = tiers.some((tier) => tier.serviceLevels.some((sl) => sl.serviceId === service.id && sl.level === "INCLUDED"));
+            return !isIncludedAnywhere;
+        });
+    }, [services, tiers]);
     const getUsageLimitForMetric = (serviceId, metric, tier) => {
         return tier.usageLimits.find((ul) => ul.serviceId === serviceId && ul.metric === metric);
     };
@@ -1439,6 +1799,150 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
             return next;
         });
     };
+    // Bulk action handlers
+    const handleBulkIncludeAllInTier = (tierId) => {
+        const now = new Date().toISOString();
+        const tier = tiers.find((t) => t.id === tierId);
+        if (!tier)
+            return;
+        services.forEach((service) => {
+            const existingLevel = tier.serviceLevels.find((sl) => sl.serviceId === service.id);
+            if (!existingLevel) {
+                dispatch(addServiceLevel({
+                    tierId,
+                    serviceLevelId: generateId(),
+                    serviceId: service.id,
+                    level: "INCLUDED",
+                    optionGroupId: service.optionGroupId || undefined,
+                    lastModified: now,
+                }));
+            }
+            else if (existingLevel.level !== "INCLUDED") {
+                dispatch(updateServiceLevel({
+                    tierId,
+                    serviceLevelId: existingLevel.id,
+                    level: "INCLUDED",
+                    lastModified: now,
+                }));
+            }
+        });
+    };
+    const handleBulkClearTier = (tierId) => {
+        const now = new Date().toISOString();
+        const tier = tiers.find((t) => t.id === tierId);
+        if (!tier)
+            return;
+        tier.serviceLevels.forEach((sl) => {
+            dispatch(updateServiceLevel({
+                tierId,
+                serviceLevelId: sl.id,
+                level: "NOT_INCLUDED",
+                lastModified: now,
+            }));
+        });
+    };
+    const handleBulkCopyFromTier = (sourceTierId, targetTierId) => {
+        const now = new Date().toISOString();
+        const sourceTier = tiers.find((t) => t.id === sourceTierId);
+        const targetTier = tiers.find((t) => t.id === targetTierId);
+        if (!sourceTier || !targetTier)
+            return;
+        services.forEach((service) => {
+            const sourceLevel = sourceTier.serviceLevels.find((sl) => sl.serviceId === service.id);
+            const targetLevel = targetTier.serviceLevels.find((sl) => sl.serviceId === service.id);
+            const newLevel = sourceLevel?.level || "NOT_INCLUDED";
+            if (!targetLevel) {
+                dispatch(addServiceLevel({
+                    tierId: targetTierId,
+                    serviceLevelId: generateId(),
+                    serviceId: service.id,
+                    level: newLevel,
+                    optionGroupId: service.optionGroupId || undefined,
+                    lastModified: now,
+                }));
+            }
+            else if (targetLevel.level !== newLevel) {
+                dispatch(updateServiceLevel({
+                    tierId: targetTierId,
+                    serviceLevelId: targetLevel.id,
+                    level: newLevel,
+                    lastModified: now,
+                }));
+            }
+        });
+    };
+    // Common Pattern Presets - apply marketing psychology patterns across all tiers
+    const handleApplyPattern = (patternId) => {
+        const now = new Date().toISOString();
+        const tierCount = tiers.length;
+        if (tierCount === 0)
+            return;
+        // Pattern definitions
+        const patterns = {
+            // Good-Better-Best: Progressive inclusion (50% → 75% → 100%)
+            "good-better-best": (serviceIdx, tierIdx, totalServices, totalTiers) => {
+                const servicePosition = serviceIdx / totalServices;
+                const tierPosition = tierIdx / (totalTiers - 1 || 1);
+                // Lower tiers get fewer services
+                const threshold = 0.5 + tierPosition * 0.5;
+                return servicePosition < threshold ? "INCLUDED" : "NOT_INCLUDED";
+            },
+            // Premium Only: Top services only in top tier
+            "premium-only": (serviceIdx, tierIdx, totalServices, totalTiers) => {
+                const isTopTier = tierIdx === totalTiers - 1;
+                const isPremiumService = serviceIdx < Math.ceil(totalServices * 0.3);
+                if (isPremiumService) {
+                    return isTopTier ? "INCLUDED" : "NOT_INCLUDED";
+                }
+                return "INCLUDED";
+            },
+            // Core + Upgrades: Core included everywhere, extras are optional
+            "core-upgrades": (serviceIdx, tierIdx, totalServices) => {
+                const isCoreService = serviceIdx < Math.ceil(totalServices * 0.5);
+                if (isCoreService) {
+                    return "INCLUDED";
+                }
+                return "OPTIONAL";
+            },
+            // Ascending: Each tier adds more services
+            ascending: (serviceIdx, tierIdx, totalServices, totalTiers) => {
+                const servicesPerTier = Math.ceil(totalServices / totalTiers);
+                const includedUpTo = (tierIdx + 1) * servicesPerTier;
+                return serviceIdx < includedUpTo ? "INCLUDED" : "NOT_INCLUDED";
+            },
+            // All Included: Everything included in all tiers
+            "all-included": () => "INCLUDED",
+            // All Optional: Everything optional in all tiers
+            "all-optional": () => "OPTIONAL",
+        };
+        const pattern = patterns[patternId];
+        if (!pattern)
+            return;
+        services.forEach((service, serviceIdx) => {
+            tiers.forEach((tier, tierIdx) => {
+                const newLevel = pattern(serviceIdx, tierIdx, services.length, tierCount);
+                const existingLevel = tier.serviceLevels.find((sl) => sl.serviceId === service.id);
+                if (!existingLevel) {
+                    dispatch(addServiceLevel({
+                        tierId: tier.id,
+                        serviceLevelId: generateId(),
+                        serviceId: service.id,
+                        level: newLevel,
+                        optionGroupId: service.optionGroupId || undefined,
+                        lastModified: now,
+                    }));
+                }
+                else if (existingLevel.level !== newLevel) {
+                    dispatch(updateServiceLevel({
+                        tierId: tier.id,
+                        serviceLevelId: existingLevel.id,
+                        level: newLevel,
+                        lastModified: now,
+                    }));
+                }
+            });
+        });
+    };
     const handleAddService = () => {
         if (!addServiceModal || !newServiceName.trim())
             return;
@@ -1525,6 +2029,16 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
             }
         });
     };
+    const handleTogglePremiumExclusive = (serviceId) => {
+        const service = services.find((s) => s.id === serviceId);
+        if (!service)
+            return;
+        dispatch(updateService({
+            id: serviceId,
+            isPremiumExclusive: !service.isPremiumExclusive,
+            lastModified: new Date().toISOString(),
+        }));
+    };
     const handleSaveMetric = () => {
         if (!metricModal || !metricName.trim())
             return;
@@ -1608,27 +2122,33 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
                                                     : ""}`, children: option.label }, option.id))) })) : (_jsx("select", { value: selectedFacets[key] || "", onChange: (e) => setSelectedFacets((prev) => ({
                                                 ...prev,
                                                 [key]: e.target.value,
-                                            })), className: "matrix__facet-select", children: category.options.map((option) => (_jsx("option", { value: option.id, children: option.label }, option.id))) }))] }, key))) }), selectedFacets.ANONYMITY === "highest-anonymity" && (_jsx("div", { className: "matrix__facet-notice", children: _jsxs("p", { className: "matrix__facet-notice-text", children: [_jsx("strong", { children: "Highest Anonymity:" }), " Additional setup services may be required for enhanced privacy configurations."] }) }))] }), _jsx("div", { className: "matrix__table-wrap", children: _jsxs("table", { className: "matrix__table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "matrix__corner-cell" }), tiers.map((tier, idx) => (_jsx("th", { onClick: () => setSelectedTierIdx(idx), className: `matrix__tier-header ${idx === selectedTierIdx
+                                            })), className: "matrix__facet-select", children: category.options.map((option) => (_jsx("option", { value: option.id, children: option.label }, option.id))) }))] }, key))) }), selectedFacets.ANONYMITY === "highest-anonymity" && (_jsx("div", { className: "matrix__facet-notice", children: _jsxs("p", { className: "matrix__facet-notice-text", children: [_jsx("strong", { children: "Highest Anonymity:" }), " Additional setup services may be required for enhanced privacy configurations."] }) }))] }), services.length > 0 && tiers.length > 0 && (_jsxs("div", { className: "matrix__bulk-actions", children: [_jsxs("button", { type: "button", onClick: () => setShowBulkActions(!showBulkActions), className: "matrix__bulk-toggle", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M4 6h16M4 12h16M4 18h7" }) }), "Bulk Actions", _jsx("svg", { className: `matrix__bulk-toggle-arrow ${showBulkActions ? "matrix__bulk-toggle-arrow--open" : ""}`, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M19 9l-7 7-7-7" }) })] }), showBulkActions && (_jsxs("div", { className: "matrix__bulk-panel", children: [_jsxs("div", { className: "matrix__bulk-section", children: [_jsx("span", { className: "matrix__bulk-label", children: "Include all services in:" }), _jsx("div", { className: "matrix__bulk-buttons", children: tiers.map((tier) => (_jsxs("button", { type: "button", onClick: () => handleBulkIncludeAllInTier(tier.id), className: "matrix__bulk-btn matrix__bulk-btn--include", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M5 12l5 5L20 7" }) }), tier.name] }, tier.id))) })] }), _jsxs("div", { className: "matrix__bulk-section", children: [_jsx("span", { className: "matrix__bulk-label", children: "Clear all from:" }), _jsx("div", { className: "matrix__bulk-buttons", children: tiers.map((tier) => (_jsxs("button", { type: "button", onClick: () => handleBulkClearTier(tier.id), className: "matrix__bulk-btn matrix__bulk-btn--clear", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M6 18L18 6M6 6l12 12" }) }), tier.name] }, tier.id))) })] }), tiers.length >= 2 && (_jsxs("div", { className: "matrix__bulk-section", children: [_jsx("span", { className: "matrix__bulk-label", children: "Copy configuration:" }), _jsx("div", { className: "matrix__bulk-copy", children: tiers.map((sourceTier, idx) => tiers
+                                                    .filter((_, i) => i !== idx)
+                                                    .map((targetTier) => (_jsxs("button", { type: "button", onClick: () => handleBulkCopyFromTier(sourceTier.id, targetTier.id), className: "matrix__bulk-btn matrix__bulk-btn--copy", children: [sourceTier.name, " \u2192 ", targetTier.name] }, `${sourceTier.id}-${targetTier.id}`)))) })] })), _jsxs("div", { className: "matrix__bulk-section matrix__bulk-patterns", children: [_jsxs("span", { className: "matrix__bulk-label", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "matrix__bulk-label-icon", children: _jsx("path", { d: "M13 10V3L4 14h7v7l9-11h-7z" }) }), "Apply Pattern Preset:"] }), _jsxs("div", { className: "matrix__pattern-grid", children: [_jsxs("button", { type: "button", onClick: () => handleApplyPattern("good-better-best"), className: "matrix__pattern-btn", title: "Progressive inclusion: Basic tier gets 50%, mid-tier 75%, top tier 100%", children: [_jsx("span", { className: "matrix__pattern-icon", children: "\uD83D\uDCC8" }), _jsx("span", { className: "matrix__pattern-name", children: "Good-Better-Best" }), _jsx("span", { className: "matrix__pattern-desc", children: "Progressive inclusion" })] }), _jsxs("button", { type: "button", onClick: () => handleApplyPattern("premium-only"), className: "matrix__pattern-btn", title: "Top 30% services exclusive to premium tier, rest included everywhere", children: [_jsx("span", { className: "matrix__pattern-icon", children: "\u2B50" }), _jsx("span", { className: "matrix__pattern-name", children: "Premium Exclusives" }), _jsx("span", { className: "matrix__pattern-desc", children: "Top services in top tier only" })] }), _jsxs("button", { type: "button", onClick: () => handleApplyPattern("core-upgrades"), className: "matrix__pattern-btn", title: "Core services included, extras as optional add-ons", children: [_jsx("span", { className: "matrix__pattern-icon", children: "\uD83C\uDFAF" }), _jsx("span", { className: "matrix__pattern-name", children: "Core + Add-ons" }), _jsx("span", { className: "matrix__pattern-desc", children: "Half included, half optional" })] }), _jsxs("button", { type: "button", onClick: () => handleApplyPattern("ascending"), className: "matrix__pattern-btn", title: "Each tier unlocks more services progressively", children: [_jsx("span", { className: "matrix__pattern-icon", children: "\uD83E\uDE9C" }), _jsx("span", { className: "matrix__pattern-name", children: "Ascending Tiers" }), _jsx("span", { className: "matrix__pattern-desc", children: "Each tier unlocks more" })] }), _jsxs("button", { type: "button", onClick: () => handleApplyPattern("all-included"), className: "matrix__pattern-btn matrix__pattern-btn--simple", title: "Everything included in all tiers", children: [_jsx("span", { className: "matrix__pattern-icon", children: "\u2713" }), _jsx("span", { className: "matrix__pattern-name", children: "All Included" })] }), _jsxs("button", { type: "button", onClick: () => handleApplyPattern("all-optional"), className: "matrix__pattern-btn matrix__pattern-btn--simple", title: "Everything optional in all tiers", children: [_jsx("span", { className: "matrix__pattern-icon", children: "\u25D0" }), _jsx("span", { className: "matrix__pattern-name", children: "All Optional" })] })] })] })] }))] })), incompleteServices.length > 0 && (_jsxs("div", { className: "matrix__incomplete-warning", children: [_jsx("div", { className: "matrix__incomplete-icon", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }), _jsxs("div", { className: "matrix__incomplete-content", children: [_jsxs("span", { className: "matrix__incomplete-title", children: [incompleteServices.length, " service", incompleteServices.length !== 1 ? "s" : "", " not configured"] }), _jsxs("span", { className: "matrix__incomplete-text", children: ["The following services are not included in any tier:", " ", _jsx("strong", { children: incompleteServices
+                                                    .slice(0, 3)
+                                                    .map((s) => s.title)
+                                                    .join(", ") }), incompleteServices.length > 3 &&
+                                                ` and ${incompleteServices.length - 3} more`] })] })] })), _jsx("div", { className: "matrix__table-wrap", children: _jsxs("table", { className: "matrix__table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "matrix__corner-cell" }), tiers.map((tier, idx) => (_jsx("th", { onClick: () => setSelectedTierIdx(idx), className: `matrix__tier-header ${idx === selectedTierIdx
                                                     ? "matrix__tier-header--selected"
                                                     : ""}`, children: _jsxs("div", { className: "matrix__tier-header-inner", children: [_jsx("div", { className: "matrix__tier-radio" }), _jsx("span", { className: "matrix__tier-name", children: tier.name }), _jsx("span", { className: "matrix__tier-price", children: tier.isCustomPricing
                                                                 ? "Custom"
                                                                 : `$${tier.pricing.amount}/mo` })] }) }, tier.id)))] }) }), _jsxs("tbody", { children: [_jsx("tr", { children: _jsx("td", { colSpan: tiers.length + 1, className: "matrix__section-header", children: "Service Catalog" }) }), (setupGroups.length > 0 ||
-                                            ungroupedSetupServices.length > 0) && (_jsx("tr", { children: _jsxs("td", { colSpan: tiers.length + 1, className: "matrix__category-header", children: [_jsx("span", { className: "matrix__category-icon", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: [_jsx("path", { d: "M19 21V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v16" }), _jsx("path", { d: "M9 21v-6h6v6" }), _jsx("path", { d: "M9 7h.01M9 11h.01M15 7h.01M15 11h.01" })] }) }), "Setup & Formation"] }) })), setupGroups.map((group) => (_jsx(ServiceGroupSection, { group: group, services: groupedServices.get(group.id) || [], tiers: tiers, isSetupFormation: true, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, setupFee: groupSetupFees[group.id], onAddService: openAddServiceModal, selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric }, group.id))), ungroupedSetupServices.length > 0 && (_jsx(ServiceGroupSection, { group: {
+                                            ungroupedSetupServices.length > 0) && (_jsx("tr", { children: _jsxs("td", { colSpan: tiers.length + 1, className: "matrix__category-header", children: [_jsx("span", { className: "matrix__category-icon", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: [_jsx("path", { d: "M19 21V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v16" }), _jsx("path", { d: "M9 21v-6h6v6" }), _jsx("path", { d: "M9 7h.01M9 11h.01M15 7h.01M15 11h.01" })] }) }), "Setup & Formation"] }) })), setupGroups.map((group) => (_jsx(ServiceGroupSection, { group: group, services: groupedServices.get(group.id) || [], tiers: tiers, isSetupFormation: true, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, setupFee: groupSetupFees[group.id], onAddService: openAddServiceModal, selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric, onTogglePremiumExclusive: handleTogglePremiumExclusive }, group.id))), ungroupedSetupServices.length > 0 && (_jsx(ServiceGroupSection, { group: {
                                                 id: UNGROUPED_ID,
                                                 name: "Setup & Formation",
                                                 description: null,
                                                 isAddOn: false,
                                                 defaultSelected: true,
-                                            }, services: ungroupedSetupServices, tiers: tiers, isSetupFormation: true, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, setupFee: groupSetupFees[UNGROUPED_ID], selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric }, "ungrouped-setup")), (regularGroups.length > 0 ||
-                                            ungroupedRegularServices.length > 0) && (_jsx("tr", { children: _jsxs("td", { colSpan: tiers.length + 1, className: "matrix__category-header", children: [_jsx("span", { className: "matrix__category-icon", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }) }), "Recurring Services"] }) })), regularGroups.map((group) => (_jsx(ServiceGroupSection, { group: group, services: groupedServices.get(group.id) || [], tiers: tiers, isSetupFormation: false, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, onAddService: openAddServiceModal, selectedTierIdx: selectedTierIdx, dispatch: dispatch, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric }, group.id))), ungroupedRegularServices.length > 0 && (_jsx(ServiceGroupSection, { group: {
+                                            }, services: ungroupedSetupServices, tiers: tiers, isSetupFormation: true, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, setupFee: groupSetupFees[UNGROUPED_ID], selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric, onTogglePremiumExclusive: handleTogglePremiumExclusive }, "ungrouped-setup")), (regularGroups.length > 0 ||
+                                            ungroupedRegularServices.length > 0) && (_jsx("tr", { children: _jsxs("td", { colSpan: tiers.length + 1, className: "matrix__category-header", children: [_jsx("span", { className: "matrix__category-icon", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }) }), "Recurring Services"] }) })), regularGroups.map((group) => (_jsx(ServiceGroupSection, { group: group, services: groupedServices.get(group.id) || [], tiers: tiers, isSetupFormation: false, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, onAddService: openAddServiceModal, selectedTierIdx: selectedTierIdx, dispatch: dispatch, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric, onTogglePremiumExclusive: handleTogglePremiumExclusive }, group.id))), ungroupedRegularServices.length > 0 && (_jsx(ServiceGroupSection, { group: {
                                                 id: UNGROUPED_ID,
                                                 name: "Recurring Services",
                                                 description: null,
                                                 isAddOn: false,
                                                 defaultSelected: true,
-                                            }, services: ungroupedRegularServices, tiers: tiers, isSetupFormation: false, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric }, "ungrouped-regular")), _jsxs("tr", { className: "matrix__total-row", children: [_jsx("td", { children: "SUBTOTAL" }), tiers.map((tier) => (_jsx("td", { style: { textAlign: "center" }, children: tier.isCustomPricing
+                                            }, services: ungroupedRegularServices, tiers: tiers, isSetupFormation: false, isOptional: false, isEnabled: true, onToggle: () => { }, getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric, onTogglePremiumExclusive: handleTogglePremiumExclusive }, "ungrouped-regular")), _jsxs("tr", { className: "matrix__total-row", children: [_jsx("td", { children: "SUBTOTAL" }), tiers.map((tier) => (_jsx("td", { style: { textAlign: "center" }, children: tier.isCustomPricing
                                                         ? "Custom"
-                                                        : `$${tier.pricing.amount}` }, tier.id)))] }), addonGroups.map((group) => (_jsx(ServiceGroupSection, { group: group, services: groupedServices.get(group.id) || [], tiers: tiers, isSetupFormation: false, isOptional: true, isEnabled: enabledOptionalGroups.has(group.id), onToggle: () => toggleOptionalGroup(group.id), getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, onAddService: openAddServiceModal, selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric }, group.id))), _jsxs("tr", { className: "matrix__grand-total-row", children: [_jsx("td", { children: "Grand Total (Recurring)" }), tiers.map((tier, idx) => {
+                                                        : `$${tier.pricing.amount}` }, tier.id)))] }), addonGroups.map((group) => (_jsx(ServiceGroupSection, { group: group, services: groupedServices.get(group.id) || [], tiers: tiers, isSetupFormation: false, isOptional: true, isEnabled: enabledOptionalGroups.has(group.id), onToggle: () => toggleOptionalGroup(group.id), getServiceLevelForTier: getServiceLevelForTier, getUniqueMetricsForService: getUniqueMetricsForService, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, handleSetServiceLevel: handleSetServiceLevel, dispatch: dispatch, onAddService: openAddServiceModal, selectedTierIdx: selectedTierIdx, onAddMetric: handleAddMetric, onEditMetric: handleEditMetric, onRemoveMetric: handleRemoveMetric, onTogglePremiumExclusive: handleTogglePremiumExclusive }, group.id))), _jsxs("tr", { className: "matrix__grand-total-row", children: [_jsx("td", { children: "Grand Total (Recurring)" }), tiers.map((tier, idx) => {
                                                     const tierPrice = tier.pricing.amount || 0;
                                                     const grandTotal = tierPrice;
                                                     return (_jsx("td", { className: idx === selectedTierIdx
@@ -1716,7 +2236,7 @@ export function TheMatrix({ document, dispatch, groupSetupFees = {}, }) {
                                                 setMetricEnabledTiers(new Set());
                                             }, className: "matrix__modal-btn matrix__modal-btn--cancel", children: "Cancel" }), _jsx("button", { onClick: handleSaveMetric, disabled: !metricName.trim() || metricEnabledTiers.size === 0, className: "matrix__modal-btn matrix__modal-btn--primary", children: metricModal.metric ? "Save Changes" : "Add Metric" })] })] }) }))] })] }));
 }
-function ServiceGroupSection({ group, services, tiers, isSetupFormation, isOptional, isEnabled, onToggle, getServiceLevelForTier, getUniqueMetricsForService, getUsageLimitForMetric, getLevelDisplay, selectedCell, setSelectedCell, setupFee, onAddService, selectedTierIdx, onAddMetric, onEditMetric, onRemoveMetric, }) {
+function ServiceGroupSection({ group, services, tiers, isSetupFormation, isOptional, isEnabled, onToggle, getServiceLevelForTier, getUniqueMetricsForService, getUsageLimitForMetric, getLevelDisplay, selectedCell, setSelectedCell, setupFee, onAddService, selectedTierIdx, onAddMetric, onEditMetric, onRemoveMetric, onTogglePremiumExclusive, }) {
     const showGroup = services.length > 0 || onAddService;
     if (!showGroup)
         return null;
@@ -1738,7 +2258,7 @@ function ServiceGroupSection({ group, services, tiers, isSetupFormation, isOptio
                                     ? "OPTIONAL"
                                     : "INCLUDED" }) })] }), services.map((service) => {
                 const metrics = getUniqueMetricsForService(service.id);
-                return (_jsx(ServiceRowWithMetrics, { service: service, metrics: metrics, tiers: tiers, rowClass: rowClass, getServiceLevelForTier: getServiceLevelForTier, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, selectedTierIdx: selectedTierIdx, onAddMetric: onAddMetric, onEditMetric: onEditMetric, onRemoveMetric: onRemoveMetric }, service.id));
+                return (_jsx(ServiceRowWithMetrics, { service: service, metrics: metrics, tiers: tiers, rowClass: rowClass, getServiceLevelForTier: getServiceLevelForTier, getUsageLimitForMetric: getUsageLimitForMetric, getLevelDisplay: getLevelDisplay, selectedCell: selectedCell, setSelectedCell: setSelectedCell, selectedTierIdx: selectedTierIdx, onAddMetric: onAddMetric, onEditMetric: onEditMetric, onRemoveMetric: onRemoveMetric, onTogglePremiumExclusive: onTogglePremiumExclusive }, service.id));
             }), onAddService && group.id !== "__ungrouped__" && (_jsxs("tr", { className: `matrix__add-service-row ${rowClass}`, children: [_jsx("td", { className: rowClass, children: _jsxs("button", { onClick: () => onAddService(group.id, isSetupFormation), className: "matrix__add-service-btn", children: [_jsx("svg", { className: "matrix__add-service-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }), "+ Add a Service"] }) }), _jsx("td", { colSpan: tiers.length, className: rowClass })] })), isSetupFormation && (_jsxs("tr", { className: "matrix__setup-total-row", children: [_jsx("td", { children: "TOTAL SETUP FEE" }), _jsx("td", { colSpan: tiers.length, style: { textAlign: "center" }, children: setupFee
                             ? `$${setupFee} flat fee (applied to all tiers)`
                             : "No setup fee configured" })] })), isOptional && (_jsxs("tr", { className: `matrix__total-row ${headerClass}`, children: [_jsx("td", { className: headerClass, children: "SUBTOTAL" }), tiers.map((tier, tierIdx) => {
@@ -1754,8 +2274,15 @@ function ServiceGroupSection({ group, services, tiers, isSetupFormation, isOptio
                             }, children: isEnabled ? priceDisplay : "$0" }, tier.id));
                     })] }))] }));
 }
-function ServiceRowWithMetrics({ service, metrics, tiers, rowClass, getServiceLevelForTier, getUsageLimitForMetric, getLevelDisplay, selectedCell, setSelectedCell, selectedTierIdx, onAddMetric, onEditMetric, onRemoveMetric, }) {
-    return (_jsxs(_Fragment, { children: [_jsxs("tr", { className: `matrix__service-row ${rowClass}`, children: [_jsx("td", { className: `matrix__service-cell ${rowClass}`, children: _jsxs("div", { className: "matrix__service-cell-wrapper", children: [_jsx("span", { className: "matrix__service-title", children: service.title }), _jsx("button", { onClick: (e) => {
+function ServiceRowWithMetrics({ service, metrics, tiers, rowClass, getServiceLevelForTier, getUsageLimitForMetric, getLevelDisplay, selectedCell, setSelectedCell, selectedTierIdx, onAddMetric, onEditMetric, onRemoveMetric, onTogglePremiumExclusive, }) {
+    // Use persisted isPremiumExclusive field from document state
+    const isPremiumExclusive = service.isPremiumExclusive;
+    return (_jsxs(_Fragment, { children: [_jsxs("tr", { className: `matrix__service-row ${rowClass}`, children: [_jsx("td", { className: `matrix__service-cell ${rowClass}`, children: _jsxs("div", { className: "matrix__service-cell-wrapper", children: [_jsx("span", { className: "matrix__service-title", children: service.title }), _jsxs("button", { onClick: (e) => {
+                                        e.stopPropagation();
+                                        onTogglePremiumExclusive(service.id);
+                                    }, className: `matrix__premium-badge ${isPremiumExclusive ? "matrix__premium-badge--active" : "matrix__premium-badge--inactive"}`, title: isPremiumExclusive
+                                        ? "Click to remove premium exclusive status"
+                                        : "Click to mark as premium exclusive", children: [_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) }), "Premium"] }), _jsx("button", { onClick: (e) => {
                                         e.stopPropagation();
                                         onAddMetric(service.id);
                                     }, className: "matrix__add-metric-btn", title: "Add metric to this service", children: "+ Metric" })] }) }), tiers.map((tier, tierIdx) => {
@@ -1763,9 +2290,17 @@ function ServiceRowWithMetrics({ service, metrics, tiers, rowClass, getServiceLe
                         const display = getLevelDisplay(serviceLevel);
                         const isSelected = selectedCell?.serviceId === service.id &&
                             selectedCell?.tierId === tier.id;
-                        return (_jsx("td", { className: `matrix__level-cell ${isSelected ? "matrix__level-cell--selected" : ""} ${tierIdx === selectedTierIdx ? "matrix__level-cell--highlight" : ""}`, onClick: () => setSelectedCell(isSelected
+                        const isNotIncluded = !serviceLevel || serviceLevel.level === "NOT_INCLUDED";
+                        // Find next tier that has this service included (for upgrade hint)
+                        const nextTierWithService = isNotIncluded
+                            ? tiers.slice(tierIdx + 1).find((t) => {
+                                const sl = getServiceLevelForTier(service.id, t);
+                                return sl && sl.level === "INCLUDED";
+                            })
+                            : null;
+                        return (_jsxs("td", { className: `matrix__level-cell ${isSelected ? "matrix__level-cell--selected" : ""} ${tierIdx === selectedTierIdx ? "matrix__level-cell--highlight" : ""} ${isNotIncluded ? "matrix__level-cell--not-included" : ""}`, onClick: () => setSelectedCell(isSelected
                                 ? null
-                                : { serviceId: service.id, tierId: tier.id }), children: _jsx("span", { className: "matrix__level-value", style: { color: display.color }, children: display.label }) }, tier.id));
+                                : { serviceId: service.id, tierId: tier.id }), children: [_jsx("span", { className: `matrix__level-value ${isNotIncluded ? "matrix__level-value--not-included" : ""}`, style: { color: display.color }, children: display.label }), isNotIncluded && nextTierWithService && (_jsxs("span", { className: "matrix__upgrade-hint", children: ["In ", nextTierWithService.name, " \u2192"] }))] }, tier.id));
                     })] }), metrics.map((metric) => (_jsxs("tr", { className: `matrix__metric-row ${rowClass}`, onClick: () => onEditMetric(service.id, metric), children: [_jsx("td", { className: `matrix__metric-cell ${rowClass}`, children: _jsxs("div", { className: "matrix__metric-name-wrapper", children: [_jsx("span", { className: "matrix__metric-name", children: metric }), _jsxs("div", { className: "matrix__metric-actions", children: [_jsx("button", { onClick: (e) => {
                                                 e.stopPropagation();
                                                 onEditMetric(service.id, metric);