@saasicat/ui-vue 0.4.0 → 0.6.0

package/src/pages-standard/marketing-catalog/MarketingCatalogHeader.vue

@@ -1,15 +1,12 @@
 <template>
     <div class="mc-page-head">
         <div>
-            <h2 class="mc-h-title">Marketing-Catalog</h2>
-            <p class="mc-h-sub">
-                Öffentliche Marketing-Projektion · gefilterte Sicht für Website, Pricing-Page und
-                Checkout
-            </p>
+            <h2 class="mc-h-title">{{ msg.header.title }}</h2>
+            <p class="mc-h-sub">{{ msg.header.subtitle }}</p>
         </div>
         <div class="mc-head-actions">
             <div class="mc-locale-mgr">
-                <span class="mc-locale-mgr-label">Sprachen:</span>
+                <span class="mc-locale-mgr-label">{{ msg.header.localesLabel }}</span>
                 <span
                     v-for="loc in activeLocaleSet"
                     :key="loc"
@@ -22,13 +19,15 @@
                         @click="$emit('localeChange', loc)"
                     >
                         {{ loc.toUpperCase() }}
-                        <span v-if="loc === defaultLocale" title="Default-Sprache">★</span>
+                        <span v-if="loc === defaultLocale" :title="msg.header.defaultLocale"
+                            >★</span
+                        >
                     </button>
                     <button
                         v-if="loc !== defaultLocale"
                         type="button"
                         class="mc-locale-x"
-                        title="Sprache deaktivieren"
+                        :title="msg.header.deactivateLocale"
                         @click="$emit('removeLocale', loc)"
                     >
                         ×
@@ -41,7 +40,7 @@
                         :disabled="addableLocales.length === 0"
                         @click="$emit('update:localePickerOpen', !localePickerOpen)"
                     >
-                        + Sprache
+                        {{ msg.header.addLocale }}
                     </button>
                     <div v-if="localePickerOpen" class="mc-locale-picker">
                         <button
@@ -67,13 +66,15 @@
                 >
                     <path d="M21 12a9 9 0 1 1-3-6.7M21 3v6h-6" />
                 </svg>
-                <span>Aktualisieren</span>
+                <span>{{ msg.header.refresh }}</span>
             </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
+
 defineProps<{
     activeLocaleSet: string[];
     activeLocale: string;
@@ -90,4 +91,6 @@ defineEmits<{
     (e: 'update:localePickerOpen', value: boolean): void;
     (e: 'reload'): void;
 }>();
+
+const msg = useSaMessages('marketing');
 </script>

package/src/pages-standard/marketing-catalog/MarketingCatalogPreview.vue

@@ -7,15 +7,13 @@
             <div class="mc-chrome-url">{{ previewUrl }}</div>
         </div>
         <div class="mc-canvas">
-            <div class="mc-eyebrow">Preise &amp; Pakete</div>
-            <h1 class="mc-hero">Der passende Plan</h1>
-            <p class="mc-sub">
-                Flexibel skalieren, jederzeit upgraden. Kein Setup-Fee, monatlich kündbar.
-            </p>
+            <div class="mc-eyebrow">{{ msg.preview.eyebrow }}</div>
+            <h1 class="mc-hero">{{ msg.preview.hero }}</h1>
+            <p class="mc-sub">{{ msg.preview.sub }}</p>
 
             <div v-if="visibleRows.length === 0" class="mc-banner mc-banner--info">
-                Kein Plan ist aktuell für den Public-Catalog sichtbar. Aktiviere die Sichtbarkeit im
-                Tab <strong>Marketing-Verwaltung</strong>.
+                {{ msg.preview.emptyBefore }} <strong>{{ msg.tabs.admin }}</strong
+                >{{ msg.preview.emptyAfter }}
             </div>
 
             <div v-else class="mc-grid">
@@ -49,42 +47,46 @@
                         </template>
                         <template v-else-if="!row.liveVersion">
                             <span class="mc-card-price-big" style="font-size: 22px">
-                                Auf Anfrage
+                                {{ msg.preview.priceOnRequest }}
                             </span>
                         </template>
                         <template v-else-if="promoResultOf(row)">
                             <span class="mc-card-price-big">
                                 {{ formatEuro(promoResultOf(row)?.discounted ?? 0) }}
                             </span>
-                            <span class="mc-card-price-unit">/ Monat</span>
+                            <span class="mc-card-price-unit">{{ msg.preview.perMonth }}</span>
                         </template>
                         <template v-else>
                             <span class="mc-card-price-big">
                                 {{ formatEuro(monthlyOf(row)) }}
                             </span>
-                            <span class="mc-card-price-unit">/ Monat</span>
+                            <span class="mc-card-price-unit">{{ msg.preview.perMonth }}</span>
                         </template>
                     </div>
                     <div v-if="promoResultOf(row)" class="mc-card-price-strike">
                         <s>{{ formatEuro(promoResultOf(row)?.original ?? 0) }}</s>
-                        <span class="mc-price-regular">regulär</span>
+                        <span class="mc-price-regular">{{ msg.preview.regularPrice }}</span>
                     </div>
                     <div
                         v-else-if="row.liveVersion && yearlyOf(row) > 0 && !row.m.priceTag"
                         class="mc-card-price-y"
                     >
-                        oder {{ formatEuro(yearlyOf(row)) }} jährlich
+                        {{
+                            formatMessage(msg.preview.orYearly, {
+                                price: formatEuro(yearlyOf(row)),
+                            })
+                        }}
                     </div>
 
                     <button type="button" class="mc-card-cta">{{ ctaText(row) }}</button>
                     <div v-if="showTrialNote(row) && !promoOf(row)" class="mc-card-trialnote">
-                        {{ row.m.trialDays }} Tage kostenlos · keine Kreditkarte nötig
+                        {{ formatMessage(msg.preview.trialNote, { days: row.m.trialDays }) }}
                     </div>
                     <div v-if="promoFineprintOf(row)" class="mc-card-fineprint">
                         {{ promoFineprintOf(row) }}
                     </div>
 
-                    <div class="mc-card-includes">Top-Features</div>
+                    <div class="mc-card-includes">{{ msg.topFeatures }}</div>
                     <ul v-if="row.m.topFeatures.length > 0" class="mc-card-features">
                         <li v-for="(f, i) in row.m.topFeatures" :key="i">
                             <span class="mc-tick">
@@ -105,7 +107,9 @@
                             </span>
                         </li>
                     </ul>
-                    <div v-else class="mc-card-features-empty">Keine Top-Features gepflegt.</div>
+                    <div v-else class="mc-card-features-empty">
+                        {{ msg.preview.noTopFeatures }}
+                    </div>
                 </div>
             </div>
         </div>
@@ -113,11 +117,9 @@
 </template>
 
 <script setup lang="ts">
-import type {
-    MarketingTopFeature,
-    PromotionResult,
-    PromotionRow,
-} from '@saasicat/types';
+import type { MarketingTopFeature, PromotionResult, PromotionRow } from '@saasicat/types';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { MarketingRow } from './types.js';
 
 defineProps<{
@@ -135,4 +137,6 @@ defineProps<{
     showTrialNote: (row: MarketingRow) => boolean;
     topFeatureLabel: (feature: MarketingTopFeature) => string;
 }>();
+
+const msg = useSaMessages('marketing');
 </script>

package/src/pages-standard/marketing-catalog/MarketingCatalogToolbar.vue

@@ -7,7 +7,7 @@
                 :class="{ active: tab === 'preview' }"
                 @click="$emit('update:tab', 'preview')"
             >
-                Public-Catalog Vorschau
+                {{ msg.tabs.preview }}
             </button>
             <button
                 type="button"
@@ -15,7 +15,7 @@
                 :class="{ active: tab === 'admin' }"
                 @click="$emit('update:tab', 'admin')"
             >
-                Marketing-Verwaltung
+                {{ msg.tabs.admin }}
             </button>
             <button
                 type="button"
@@ -23,7 +23,7 @@
                 :class="{ active: tab === 'promos' }"
                 @click="$emit('update:tab', 'promos')"
             >
-                Aktionen
+                {{ msg.tabs.promos }}
                 <span v-if="activePromoCount > 0" class="mc-tab-count">
                     {{ activePromoCount }}
                 </span>
@@ -43,6 +43,7 @@
 </template>
 
 <script setup lang="ts">
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { MarketingCatalogTab } from './types.js';
 
 defineProps<{
@@ -55,4 +56,6 @@ defineProps<{
 defineEmits<{
     (e: 'update:tab', tab: MarketingCatalogTab): void;
 }>();
+
+const msg = useSaMessages('marketing');
 </script>

package/src/pages-standard/plan-versions/PlanDiffCard.vue

@@ -6,7 +6,7 @@
                 {{ title }}
                 <span v-if="versionNew" class="sa-pv-diff-card__ver">v{{ versionNew }}</span>
             </div>
-            <div class="sa-pv-diff-card__sub">Keine Änderungen</div>
+            <div class="sa-pv-diff-card__sub">{{ common.noChanges }}</div>
         </div>
     </div>
     <div v-else class="sa-pv-diff-card">
@@ -27,9 +27,7 @@
             <span v-else-if="versionOld != null" class="sa-pv-diff-card__ver"
                 >− v{{ versionOld }}</span
             >
-            <span class="sa-pv-diff-card__count">
-                {{ changes.length }} Änderung{{ changes.length !== 1 ? 'en' : '' }}
-            </span>
+            <span class="sa-pv-diff-card__count">{{ changeCountLabel }}</span>
         </header>
         <div class="sa-pv-diff-card__body">
             <VersionDiffPreview :changes="changes" :field-labels="fieldLabels" />
@@ -38,10 +36,13 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { VersionChange } from '@saasicat/types';
-import VersionDiffPreview from './VersionDiffPreview.vue';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
+import VersionDiffPreview from '../../components/VersionDiffPreview.vue';
 
-defineProps<{
+const props = defineProps<{
     title: string;
     versionOld: number | null;
     versionNew: number | null;
@@ -49,6 +50,15 @@ defineProps<{
     changes: VersionChange[];
     fieldLabels?: Record<string, string>;
 }>();
+
+const msg = useSaMessages('planVersions');
+const common = useSaMessages('common');
+
+const changeCountLabel = computed(() => {
+    const count = props.changes.length;
+    const template = count === 1 ? msg.value.diff.changeCountOne : msg.value.diff.changeCountMany;
+    return formatMessage(template, { count });
+});
 </script>
 
 <style scoped>

package/src/pages-standard/plan-versions/PlanVersionHeader.vue

@@ -15,7 +15,7 @@
                             class="sa-pv-header__cmp-btn"
                             @click="emit('clearCompare')"
                         >
-                            <q-icon name="close" size="14px" /> Vergleich beenden
+                            <q-icon name="close" size="14px" /> {{ msg.compareEnd }}
                         </button>
                     </template>
                 </div>
@@ -28,23 +28,21 @@
                         class="sa-pv-header__meta-item sa-pv-header__meta-item--ok"
                     >
                         <q-icon name="rocket_launch" size="14px" />
-                        Publiziert {{ formatDateDe(snapshot.publishedAt) }}
+                        {{ publishedOnLabel }}
                     </span>
                     <span
                         v-if="snapshot.kind === 'drafts'"
                         class="sa-pv-header__meta-item sa-pv-header__meta-item--warn"
                     >
                         <q-icon name="edit_note" size="14px" />
-                        <strong>{{ snapshot.draftCount }}</strong> offene Drafts
+                        <strong>{{ snapshot.draftCount }}</strong> {{ msg.header.openDrafts }}
                     </span>
                     <span
                         v-if="snapshot.regressionCount > 0"
                         class="sa-pv-header__meta-item sa-pv-header__meta-item--bad"
                     >
                         <q-icon name="trending_down" size="14px" />
-                        <strong>{{ snapshot.regressionCount }}</strong> Regression{{
-                            snapshot.regressionCount === 1 ? '' : 'en'
-                        }}
+                        <strong>{{ snapshot.regressionCount }}</strong> {{ regressionLabel }}
                     </span>
                 </div>
             </div>
@@ -57,7 +55,7 @@
                     @click="emit('publish')"
                 >
                     <q-icon name="rocket_launch" size="16px" />
-                    Publish-Flow starten
+                    {{ msg.header.startPublishFlow }}
                 </button>
             </div>
         </div>
@@ -68,7 +66,7 @@
                 :class="{ 'sa-pv-header__switcher--disabled': !!compareSnapshot }"
             >
                 <button
-                    v-for="m in modes"
+                    v-for="m in resolvedModes"
                     :key="m.id"
                     type="button"
                     class="sa-pv-header__mode-btn"
@@ -81,7 +79,7 @@
             </div>
             <span v-if="compareSnapshot" class="sa-pv-header__cmp-hint">
                 <q-icon name="compare_arrows" size="13px" />
-                Vergleichsmodus aktiv — andere Ansichten deaktiviert
+                {{ msg.header.compareModeHint }}
             </span>
         </div>
     </header>
@@ -89,26 +87,20 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import type { CatalogSnapshot } from '../../plan-versions-catalog.js';
-import { formatDateDe } from './format.js';
+import type { CatalogSnapshot } from '../../client/plan-versions-catalog.js';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
+import { formatDate } from './format.js';
 import PlanVersionStatusBadge from './PlanVersionStatusBadge.vue';
 import type { PlanVersionViewMode } from './types.js';
 
-const props = withDefaults(
-    defineProps<{
-        snapshot: CatalogSnapshot;
-        viewMode: PlanVersionViewMode;
-        compareSnapshot: CatalogSnapshot | null;
-        modes?: ReadonlyArray<{ id: PlanVersionViewMode; label: string; icon: string }>;
-    }>(),
-    {
-        modes: () => [
-            { id: 'list' as const, label: 'Plan-Liste', icon: 'list' },
-            { id: 'matrix' as const, label: 'Feature-Matrix', icon: 'grid_view' },
-            { id: 'audit' as const, label: 'Aktivität', icon: 'history' },
-        ],
-    },
-);
+const props = defineProps<{
+    snapshot: CatalogSnapshot;
+    viewMode: PlanVersionViewMode;
+    compareSnapshot: CatalogSnapshot | null;
+    /** Overrides the localized default view switcher. */
+    modes?: ReadonlyArray<{ id: PlanVersionViewMode; label: string; icon: string }>;
+}>();
 
 const emit = defineEmits<{
     (e: 'viewChange', mode: PlanVersionViewMode): void;
@@ -116,9 +108,33 @@ const emit = defineEmits<{
     (e: 'clearCompare'): void;
 }>();
 
+const msg = useSaMessages('planVersions');
+const { locale } = useSuperAdminI18n();
+
 const canPublish = computed(
     () => props.snapshot.kind === 'drafts' && props.snapshot.draftCount > 0,
 );
+
+const publishedOnLabel = computed(() =>
+    formatMessage(msg.value.header.publishedOn, {
+        date: formatDate(props.snapshot.publishedAt ?? undefined, locale.value),
+    }),
+);
+
+const regressionLabel = computed(() =>
+    props.snapshot.regressionCount === 1
+        ? msg.value.header.regressionOne
+        : msg.value.header.regressionMany,
+);
+
+const resolvedModes = computed(
+    () =>
+        props.modes ?? [
+            { id: 'list' as const, label: msg.value.header.modeList, icon: 'list' },
+            { id: 'matrix' as const, label: msg.value.header.modeMatrix, icon: 'grid_view' },
+            { id: 'audit' as const, label: msg.value.header.modeAudit, icon: 'history' },
+        ],
+);
 </script>
 
 <style scoped>

package/src/pages-standard/plan-versions/PlanVersionsAudit.vue

@@ -3,18 +3,18 @@
         <div class="sa-pv-audit__card">
             <header class="sa-pv-audit__head">
                 <q-icon name="history" size="18px" class="sa-pv-audit__head-icon" />
-                <h3>Aktivität</h3>
-                <span class="sa-pv-audit__count">{{ events.length }} Events</span>
+                <h3>{{ msg.audit.title }}</h3>
+                <span class="sa-pv-audit__count">{{ eventCountLabel }}</span>
                 <q-space />
                 <button v-if="!loading" type="button" class="sa-pv-audit__refresh" @click="reload">
-                    <q-icon name="refresh" size="14px" /> Neu laden
+                    <q-icon name="refresh" size="14px" /> {{ common.reload }}
                 </button>
             </header>
             <div v-if="loading" class="sa-pv-audit__loading">
-                <q-spinner size="20px" /> Audit-Trail wird geladen…
+                <q-spinner size="20px" /> {{ msg.audit.loading }}
             </div>
             <div v-else-if="events.length === 0" class="sa-pv-audit__empty">
-                Keine Plan-/Add-on-Events im Audit-Log gefunden.
+                {{ msg.audit.empty }}
             </div>
             <div v-else class="sa-pv-audit__list">
                 <div
@@ -42,7 +42,7 @@
                         <div class="sa-pv-audit__meta">
                             <span
                                 ><q-icon name="schedule" size="12px" />
-                                {{ formatTsDe(e.createdAt) }}</span
+                                {{ formatTimestamp(e.createdAt, locale) }}</span
                             >
                             <span v-if="actorEmail(e)">
                                 <q-icon name="person" size="12px" /> {{ actorEmail(e) }}
@@ -56,9 +56,11 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
-import type { CatalogSnapshot } from '../../plan-versions-catalog.js';
-import { formatTsDe } from './format.js';
+import { computed, onMounted, ref, watch } from 'vue';
+import type { CatalogSnapshot } from '../../client/plan-versions-catalog.js';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
+import { formatTimestamp } from './format.js';
 
 // PlanVersionsAudit — data-agnostic. Consumers pass in a `loadAudit` loader
 // that supplies events; the component filters them to match the current
@@ -100,34 +102,49 @@ const props = withDefaults(
 const loading = ref(false);
 const events = ref<AuditRow[]>([]);
 
-const DEFAULT_ACTION_META: Record<string, ActionMeta> = {
+const msg = useSaMessages('planVersions');
+const common = useSaMessages('common');
+const { locale } = useSuperAdminI18n();
+
+const eventCountLabel = computed(() =>
+    formatMessage(msg.value.audit.eventCount, { count: events.value.length }),
+);
+
+const ACTION_ICONS: Record<string, { icon: string; color: string }> = {
+    PLAN_VERSION_PUBLISH: { icon: 'rocket_launch', color: '#047857' },
+    PLAN_VERSION_DRAFT_CREATE: { icon: 'edit_note', color: '#b45309' },
+    PLAN_VERSION_DRAFT_UPDATE: { icon: 'edit', color: '#3f6bff' },
+    PLAN_VERSION_DRAFT_DELETE: { icon: 'delete', color: '#dc2626' },
+    PLAN_CATALOG_UPDATE: { icon: 'rocket_launch', color: '#047857' },
+};
+
+const defaultActionMeta = computed<Record<string, ActionMeta>>(() => ({
     PLAN_VERSION_PUBLISH: {
-        icon: 'rocket_launch',
-        color: '#047857',
-        label: 'Plan publiziert',
+        ...ACTION_ICONS.PLAN_VERSION_PUBLISH,
+        label: msg.value.audit.actionPlanPublished,
     },
     PLAN_VERSION_DRAFT_CREATE: {
-        icon: 'edit_note',
-        color: '#b45309',
-        label: 'Plan-Draft angelegt',
+        ...ACTION_ICONS.PLAN_VERSION_DRAFT_CREATE,
+        label: msg.value.audit.actionPlanDraftCreated,
+    },
+    PLAN_VERSION_DRAFT_UPDATE: {
+        ...ACTION_ICONS.PLAN_VERSION_DRAFT_UPDATE,
+        label: msg.value.audit.actionPlanDraftUpdated,
     },
-    PLAN_VERSION_DRAFT_UPDATE: { icon: 'edit', color: '#3f6bff', label: 'Plan-Draft geändert' },
     PLAN_VERSION_DRAFT_DELETE: {
-        icon: 'delete',
-        color: '#dc2626',
-        label: 'Plan-Draft gelöscht',
+        ...ACTION_ICONS.PLAN_VERSION_DRAFT_DELETE,
+        label: msg.value.audit.actionPlanDraftDeleted,
     },
     PLAN_CATALOG_UPDATE: {
-        icon: 'rocket_launch',
-        color: '#047857',
-        label: 'Catalog publiziert',
+        ...ACTION_ICONS.PLAN_CATALOG_UPDATE,
+        label: msg.value.audit.actionCatalogPublished,
     },
-};
+}));
 
 function meta(action: string): ActionMeta {
     return (
         props.actionMeta[action] ??
-        DEFAULT_ACTION_META[action] ?? {
+        defaultActionMeta.value[action] ?? {
             icon: 'circle',
             color: '#64748b',
             label: action,
@@ -156,8 +173,10 @@ function detail(e: AuditRow): string {
         changes?: unknown;
     };
     if (c.changeNote) return c.changeNote;
-    if (c.nonRegressive === false) return 'Mit mindestens einer Verschlechterung publiziert.';
-    if (Array.isArray(c.changes)) return `${c.changes.length} Felder geändert.`;
+    if (c.nonRegressive === false) return msg.value.audit.detailRegression;
+    if (Array.isArray(c.changes)) {
+        return formatMessage(msg.value.audit.detailFieldsChanged, { count: c.changes.length });
+    }
     return e.action;
 }
 

package/src/pages-standard/plan-versions/PlanVersionsDiff.vue

@@ -5,7 +5,7 @@
                 <q-icon name="compare_arrows" size="22px" color="white" />
             </div>
             <div>
-                <div class="sa-pv-diff__legend">Vergleich</div>
+                <div class="sa-pv-diff__legend">{{ msg.diff.legend }}</div>
                 <div class="sa-pv-diff__title">
                     {{ from.label }} <span class="sa-pv-diff__sep">→</span> {{ to.label }}
                 </div>
@@ -13,13 +13,13 @@
             <div class="sa-pv-diff__spacer" />
             <div class="sa-pv-diff__stats">
                 <div class="sa-pv-diff__stat">
-                    <div class="sa-pv-diff__stat-label">Pakete geändert</div>
+                    <div class="sa-pv-diff__stat-label">{{ msg.diff.plansChanged }}</div>
                     <div class="sa-pv-diff__stat-value sa-pv-diff__stat-value--warn">
                         {{ planChangedCount }}
                     </div>
                 </div>
                 <div v-if="regressionCount > 0" class="sa-pv-diff__stat">
-                    <div class="sa-pv-diff__stat-label">Regressionen</div>
+                    <div class="sa-pv-diff__stat-label">{{ msg.diff.regressions }}</div>
                     <div class="sa-pv-diff__stat-value sa-pv-diff__stat-value--bad">
                         {{ regressionCount }}
                     </div>
@@ -27,7 +27,7 @@
             </div>
         </div>
 
-        <h2 class="sa-pv-diff__section">Pakete</h2>
+        <h2 class="sa-pv-diff__section">{{ msg.diff.sectionPlans }}</h2>
         <PlanDiffCard
             v-for="d in planDiffs"
             :key="d.id"
@@ -38,14 +38,14 @@
             :changes="d.changes"
             :field-labels="fieldLabels"
         />
-
     </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { VersionChange } from '@saasicat/types';
-import type { CatalogSnapshot, ResolvedPlan } from '../../plan-versions-catalog.js';
+import type { CatalogSnapshot, ResolvedPlan } from '../../client/plan-versions-catalog.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import PlanDiffCard from './PlanDiffCard.vue';
 
 interface SnapshotEntityDiff {
@@ -64,6 +64,8 @@ const props = defineProps<{
     fieldLabels?: Record<string, string>;
 }>();
 
+const msg = useSaMessages('planVersions');
+
 function planAccent(planId: string): string {
     return props.planAccents?.[planId] ?? '#3f6bff';
 }