@saasicat/ui-vue 0.5.0 → 0.7.0

package/src/pages-standard/DiscoveryPage.vue

@@ -11,7 +11,7 @@
 
         <q-banner v-if="error" class="sa-discovery__error" rounded>
             <template #avatar><q-icon name="warning" color="negative" /></template>
-            Fehler: {{ error.message }}
+            {{ common.error }}: {{ error.message }}
         </q-banner>
 
         <DiscoveryKpis
@@ -25,8 +25,8 @@
         />
 
         <q-tabs v-model="activeTab" align="left" dense class="sa-discovery__tabs">
-            <q-tab name="features" :label="`Features (${features.length})`" />
-            <q-tab name="quotas" :label="`Quotas (${quotas.length})`" />
+            <q-tab name="features" :label="featuresTabLabel" />
+            <q-tab name="quotas" :label="quotasTabLabel" />
         </q-tabs>
 
         <q-tab-panels v-model="activeTab" animated class="sa-discovery__panels">
@@ -37,7 +37,7 @@
                         dense
                         outlined
                         clearable
-                        placeholder="Feature-Key, Label oder Capability suchen …"
+                        :placeholder="msg.searchPlaceholder"
                         class="sa-discovery__search"
                     >
                         <template #prepend><q-icon name="search" /></template>
@@ -48,7 +48,7 @@
                         outlined
                         emit-value
                         map-options
-                        :options="STATUS_FILTER_OPTIONS"
+                        :options="statusFilterOptions"
                         class="sa-discovery__filter"
                     />
                 </div>
@@ -76,21 +76,20 @@
                     </div>
                 </div>
                 <div v-if="filteredFeatures.length === 0" class="sa-discovery__empty-row">
-                    Keine Features entsprechen den Filtern.
+                    {{ msg.noFeaturesMatchFilters }}
                 </div>
 
                 <div v-if="orphanCaps.length" class="sa-discovery__group">
                     <div class="sa-discovery__group-head">
                         <span class="sa-discovery__group-title sa-discovery__group-title--orphan">
                             <q-icon name="warning" size="14px" />
-                            Capabilities ohne Feature
+                            {{ msg.orphansTitle }}
                         </span>
                         <span class="sa-discovery__group-count">{{ orphanCaps.length }}</span>
                     </div>
                     <p class="sa-discovery__orphan-hint">
-                        Diesen Capabilities fehlt der <code>feature:</code>-Tag im
-                        <code>@ImplementsCapability</code>-Decorator — Feature-Zuordnung im Code
-                        nachziehen, sonst sind sie nicht verkaufbar.
+                        {{ msg.orphanHint.before }} <code>feature:</code>{{ msg.orphanHint.middle }}
+                        <code>@ImplementsCapability</code>{{ msg.orphanHint.after }}
                     </p>
                     <DiscoveryCapList
                         :capabilities="orphanCaps"
@@ -113,7 +112,7 @@
                         @quota-locale="onQuotaLocale"
                     />
                     <div v-if="quotas.length === 0" class="sa-discovery__empty-row">
-                        Keine Quotas im Code deklariert.
+                        {{ msg.noQuotasDeclared }}
                     </div>
                 </div>
             </q-tab-panel>
@@ -140,7 +139,9 @@ import DiscoveryHeader from './discovery-page/DiscoveryHeader.vue';
 import DiscoveryKpis from './discovery-page/DiscoveryKpis.vue';
 import DiscoveryMetaBanner from './discovery-page/DiscoveryMetaBanner.vue';
 import DiscoveryQuotaCard from './discovery-page/DiscoveryQuotaCard.vue';
-import { STATUS_META } from './discovery-page/discovery-ui.js';
+import { formatMessage } from '../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
+import { statusLabel } from './discovery-page/discovery-ui.js';
 
 // Platform standard page: Discovery review, feature-centric (#20).
 // Two tabs (Features + Quotas); each entry is an expandable card with
@@ -174,18 +175,31 @@ const props = defineProps<{
 }>();
 
 const activeTab = ref<'features' | 'quotas'>('features');
+
+const featuresTabLabel = computed(() =>
+    formatMessage(msg.value.tabFeatures, { count: props.features.length }),
+);
+const quotasTabLabel = computed(() =>
+    formatMessage(msg.value.tabQuotas, { count: props.quotas.length }),
+);
 const featureQuery = ref('');
 const statusFilter = ref<DiscoveryStatus | 'all'>('all');
 const expandedFeature = ref<string | null>(null);
 const expandedQuota = ref<string | null>(null);
 
-const STATUS_FILTER_OPTIONS: Array<{ label: string; value: DiscoveryStatus | 'all' }> = [
-    { label: 'Alle Status', value: 'all' },
-    ...(['pending', 'approved', 'outdated', 'obsolete'] as const).map((status) => ({
-        label: STATUS_META[status].label,
-        value: status,
-    })),
-];
+const msg = useSaMessages('discovery');
+const common = useSaMessages('common');
+const { locale, intlLocale } = useSuperAdminI18n();
+
+const statusFilterOptions = computed<Array<{ label: string; value: DiscoveryStatus | 'all' }>>(
+    () => [
+        { label: msg.value.statusFilterAll, value: 'all' },
+        ...(['pending', 'approved', 'outdated', 'obsolete'] as const).map((status) => ({
+            label: statusLabel(status, locale.value),
+            value: status,
+        })),
+    ],
+);
 
 const appKey = computed(() => props.snapshot?.app.key ?? '—');
 const appLabel = computed(() => {
@@ -194,9 +208,9 @@ const appLabel = computed(() => {
 });
 const appVersion = computed(() => props.snapshot?.app.version ?? '0.0.0');
 const scanLabel = computed(() => {
-    if (!props.snapshot?.scannedAt) return 'noch nicht gescannt';
+    if (!props.snapshot?.scannedAt) return msg.value.notScannedYet;
     try {
-        return new Date(props.snapshot.scannedAt).toLocaleString('de-DE');
+        return new Date(props.snapshot.scannedAt).toLocaleString(intlLocale.value);
     } catch {
         return props.snapshot.scannedAt;
     }
@@ -277,21 +291,19 @@ const filteredFeatures = computed(() => {
     });
 });
 
-const NO_OWNER_LABEL = 'Ohne Owner';
-
-/** Grouping by primary owner (#14); "Ohne Owner" last. */
+/** Grouping by primary owner (#14); the ownerless group goes last. */
 const featureGroups = computed<Array<{ label: string; features: FeatureCatalogEntryRow[] }>>(() => {
     const groups = new Map<string, FeatureCatalogEntryRow[]>();
     for (const f of filteredFeatures.value) {
-        const owner = ownersByFeature.value.get(f.featureKey)?.[0] ?? NO_OWNER_LABEL;
+        const owner = ownersByFeature.value.get(f.featureKey)?.[0] ?? msg.value.noOwner;
         const list = groups.get(owner);
         if (list) list.push(f);
         else groups.set(owner, [f]);
     }
     return [...groups.entries()]
         .sort((a, b) => {
-            if (a[0] === NO_OWNER_LABEL) return 1;
-            if (b[0] === NO_OWNER_LABEL) return -1;
+            if (a[0] === msg.value.noOwner) return 1;
+            if (b[0] === msg.value.noOwner) return -1;
             return a[0].localeCompare(b[0]);
         })
         .map(([label, features]) => ({ label, features }));
@@ -340,7 +352,7 @@ function persist(p: Promise<unknown>): void {
     p.catch((err) => {
         // Auth renewal/redirect is handled by the HTTP client; here just log
         // so a failed save stays visible.
-        console.error('Catalog-Entry konnte nicht gespeichert werden', err);
+        console.error('Failed to save catalog entry', err);
     });
 }
 

package/src/pages-standard/EmailHistoryPage.vue

@@ -2,13 +2,10 @@
     <div class="sa-emh">
         <header class="sa-emh__head">
             <div>
-                <h1 class="sa-emh__title">{{ title }}</h1>
-                <p class="sa-emh__sub">
-                    Über den Plattform-Absender versendete System-Mails — Empfänger, Status und
-                    Fehler.
-                </p>
+                <h1 class="sa-emh__title">{{ resolvedTitle }}</h1>
+                <p class="sa-emh__sub">{{ msg.history.subtitle }}</p>
             </div>
-            <q-btn flat icon="refresh" label="Neu laden" @click="applyFilter" />
+            <q-btn flat icon="refresh" :label="common.reload" @click="applyFilter" />
         </header>
 
         <div class="sa-emh__body">
@@ -18,7 +15,7 @@
                     outlined
                     dense
                     clearable
-                    label="Suche (Empfänger, Betreff, Inhalt …)"
+                    :label="msg.history.searchLabel"
                     debounce="350"
                     @keyup.enter="applyFilter"
                     @update:model-value="applyFilter"
@@ -32,7 +29,7 @@
                     clearable
                     emit-value
                     map-options
-                    label="Status"
+                    :label="common.status"
                     :options="statusOptions"
                     @update:model-value="applyFilter"
                 />
@@ -42,7 +39,7 @@
                     dense
                     clearable
                     type="date"
-                    label="Von"
+                    :label="common.from"
                     @update:model-value="applyFilter"
                 />
                 <q-input
@@ -51,7 +48,7 @@
                     dense
                     clearable
                     type="date"
-                    label="Bis"
+                    :label="common.to"
                     @update:model-value="applyFilter"
                 />
             </div>
@@ -70,7 +67,10 @@
                 >
                     <template #body-cell-status="{ row }">
                         <q-td>
-                            <q-badge :color="statusColor(row.status)" :label="statusLabel(row.status)" />
+                            <q-badge
+                                :color="statusColor(row.status)"
+                                :label="statusLabel(row.status)"
+                            />
                         </q-td>
                     </template>
                     <template #body-cell-actions="{ row }">
@@ -80,7 +80,7 @@
                                 dense
                                 icon="send"
                                 color="primary"
-                                title="Erneut senden"
+                                :title="msg.history.resend"
                                 @click.stop="onResend(row.id)"
                             />
                             <q-btn
@@ -88,13 +88,13 @@
                                 dense
                                 icon="delete"
                                 color="negative"
-                                title="Aus Verlauf entfernen"
+                                :title="msg.history.removeFromHistory"
                                 @click.stop="askDelete(row.id)"
                             />
                         </q-td>
                     </template>
                     <template #no-data>
-                        <div class="sa-emh__empty">Keine E-Mails im Verlauf.</div>
+                        <div class="sa-emh__empty">{{ msg.history.empty }}</div>
                     </template>
                 </q-table>
             </div>
@@ -106,21 +106,36 @@
                 <template v-if="detail">
                     <q-card-section>
                         <div class="row items-center no-wrap q-gutter-sm">
-                            <q-badge :color="statusColor(detail.status)" :label="statusLabel(detail.status)" />
+                            <q-badge
+                                :color="statusColor(detail.status)"
+                                :label="statusLabel(detail.status)"
+                            />
                             <div class="text-h6 ellipsis">{{ detail.subject }}</div>
                         </div>
                         <div class="text-caption text-grey-7 q-mt-xs">
-                            Von {{ detail.fromEmail }} · An {{ detail.toEmail }}
+                            {{
+                                formatMessage(msg.history.detailFromTo, {
+                                    from: detail.fromEmail,
+                                    to: detail.toEmail,
+                                })
+                            }}
                             <span v-if="detail.ccEmail"> · Cc {{ detail.ccEmail }}</span>
                             <span v-if="detail.bccEmail"> · Bcc {{ detail.bccEmail }}</span>
                         </div>
                         <div class="text-caption text-grey-7">
-                            Erstellt {{ formatTs(detail.createdAt) }} · Gesendet
-                            {{ formatTs(detail.sentAt) }}
+                            {{
+                                formatMessage(msg.history.detailTimestamps, {
+                                    created: formatTs(detail.createdAt),
+                                    sent: formatTs(detail.sentAt),
+                                })
+                            }}
                         </div>
                     </q-card-section>
 
-                    <q-card-section v-if="detail.status === 'FAILED' && detail.errorMessage" class="q-pt-none">
+                    <q-card-section
+                        v-if="detail.status === 'FAILED' && detail.errorMessage"
+                        class="q-pt-none"
+                    >
                         <q-banner dense class="bg-red-1 text-red-9 sa-emh__error">
                             <template #avatar><q-icon name="error" color="negative" /></template>
                             {{ detail.errorMessage }}
@@ -137,12 +152,14 @@
                             referrerpolicy="no-referrer"
                             class="sa-emh__frame"
                         />
-                        <pre v-else-if="detail.bodyText" class="sa-emh__text">{{ detail.bodyText }}</pre>
-                        <div v-else class="text-grey-6">Kein Inhalt gespeichert.</div>
+                        <pre v-else-if="detail.bodyText" class="sa-emh__text">{{
+                            detail.bodyText
+                        }}</pre>
+                        <div v-else class="text-grey-6">{{ msg.history.noContent }}</div>
                     </q-card-section>
 
                     <q-card-section v-if="detail.smtpResponse" class="q-pt-none">
-                        <div class="text-caption text-grey-7">SMTP-Antwort</div>
+                        <div class="text-caption text-grey-7">{{ msg.history.smtpResponse }}</div>
                         <pre class="sa-emh__smtp">{{ detail.smtpResponse }}</pre>
                     </q-card-section>
 
@@ -151,17 +168,17 @@
                             flat
                             color="negative"
                             icon="delete"
-                            label="Entfernen"
+                            :label="common.remove"
                             @click="askDelete(detail.id)"
                         />
                         <q-btn
                             unelevated
                             color="primary"
                             icon="send"
-                            label="Erneut senden"
+                            :label="msg.history.resend"
                             @click="onResend(detail.id)"
                         />
-                        <q-btn v-close-popup flat label="Schließen" />
+                        <q-btn v-close-popup flat :label="common.close" />
                     </q-card-actions>
                 </template>
             </q-card>
@@ -170,15 +187,19 @@
         <q-dialog v-model="confirmDeleteOpen">
             <q-card class="sa-emh__confirm">
                 <q-card-section>
-                    <div class="text-h6">E-Mail entfernen</div>
+                    <div class="text-h6">{{ msg.history.confirmRemoveTitle }}</div>
                 </q-card-section>
                 <q-card-section class="q-pt-none">
-                    Diese E-Mail aus dem Verlauf entfernen? Der Eintrag wird ausgeblendet, bleibt
-                    aber für das Audit erhalten.
+                    {{ msg.history.confirmRemoveMessage }}
                 </q-card-section>
                 <q-card-actions align="right">
-                    <q-btn v-close-popup flat label="Abbrechen" />
-                    <q-btn unelevated color="negative" label="Entfernen" @click="confirmDelete" />
+                    <q-btn v-close-popup flat :label="common.cancel" />
+                    <q-btn
+                        unelevated
+                        color="negative"
+                        :label="common.remove"
+                        @click="confirmDelete"
+                    />
                 </q-card-actions>
             </q-card>
         </q-dialog>
@@ -196,9 +217,11 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from 'vue';
+import { computed, reactive, ref } from 'vue';
 import { useSuperAdminNotify } from '../quasar/notify.js';
 import MfaPromptDialog from '../components/MfaPromptDialog.vue';
+import { formatMessage } from '../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 import type {
     EmailHistoryRow,
     EmailHistoryDetail,
@@ -225,13 +248,18 @@ const props = withDefaults(
         mfaSetupHint?: string;
     }>(),
     {
-        title: 'Plattform-E-Mail-Verlauf',
         pageSize: 25,
         requireMfaForWrite: false,
     },
 );
 
 const notify = useSuperAdminNotify();
+const msg = useSaMessages('email');
+const common = useSaMessages('common');
+const shell = useSaMessages('shell');
+const { intlLocale } = useSuperAdminI18n();
+
+const resolvedTitle = computed(() => props.title ?? msg.value.history.title);
 
 const rows = ref<EmailHistoryRow[]>([]);
 const loading = ref(false);
@@ -249,32 +277,37 @@ const pagination = ref({
     rowsNumber: 0,
 });
 
-const statusOptions = [
-    { label: 'Gesendet', value: 'SENT' },
-    { label: 'Fehlgeschlagen', value: 'FAILED' },
-    { label: 'Ausstehend', value: 'PENDING' },
-    { label: 'Bounced', value: 'BOUNCED' },
-];
-
-const columns = [
-    { name: 'status', label: 'Status', field: 'status', align: 'left' as const },
-    { name: 'toEmail', label: 'Empfänger', field: 'toEmail', align: 'left' as const },
-    { name: 'subject', label: 'Betreff', field: 'subject', align: 'left' as const },
-    { name: 'fromEmail', label: 'Absender', field: 'fromEmail', align: 'left' as const },
+const statusOptions = computed(() => [
+    { label: msg.value.history.statusSent, value: 'SENT' },
+    { label: msg.value.history.statusFailed, value: 'FAILED' },
+    { label: msg.value.history.statusPending, value: 'PENDING' },
+    { label: msg.value.history.statusBounced, value: 'BOUNCED' },
+]);
+
+const columns = computed(() => [
+    { name: 'status', label: common.value.status, field: 'status', align: 'left' as const },
+    { name: 'toEmail', label: msg.value.recipient, field: 'toEmail', align: 'left' as const },
+    {
+        name: 'subject',
+        label: msg.value.history.columnSubject,
+        field: 'subject',
+        align: 'left' as const,
+    },
+    { name: 'fromEmail', label: msg.value.sender, field: 'fromEmail', align: 'left' as const },
     {
         name: 'createdAt',
-        label: 'Erstellt',
+        label: msg.value.history.columnCreatedAt,
         field: (r: EmailHistoryRow) => formatTs(r.createdAt),
         align: 'left' as const,
     },
     {
         name: 'sentAt',
-        label: 'Gesendet',
+        label: msg.value.history.columnSentAt,
         field: (r: EmailHistoryRow) => formatTs(r.sentAt),
         align: 'left' as const,
     },
     { name: 'actions', label: '', field: 'id' as never, align: 'right' as const },
-];
+]);
 
 const detailOpen = ref(false);
 const detailLoading = ref(false);
@@ -349,14 +382,14 @@ async function openDetail(row: EmailHistoryRow): Promise<void> {
 }
 
 async function onResend(id: string): Promise<void> {
-    const { ok, result } = await runWrite('Plattform-Mail erneut senden', (code) =>
+    const { ok, result } = await runWrite(msg.value.history.mfaResend, (code) =>
         props.resendEmail(id, code || undefined),
     );
     if (!ok) return;
     if (result && result.success === false) {
-        notify('negative', result.message ?? 'Versand fehlgeschlagen');
+        notify('negative', result.message ?? msg.value.history.sendFailed);
     } else {
-        notify('positive', 'E-Mail erneut versendet');
+        notify('positive', msg.value.history.resendSuccess);
     }
     await reload();
 }
@@ -370,11 +403,11 @@ async function confirmDelete(): Promise<void> {
     const id = pendingDeleteId.value;
     confirmDeleteOpen.value = false;
     if (!id) return;
-    const { ok } = await runWrite('Plattform-Mail aus Verlauf entfernen', (code) =>
+    const { ok } = await runWrite(msg.value.history.mfaRemove, (code) =>
         props.deleteEmail(id, code || undefined),
     );
     if (!ok) return;
-    notify('positive', 'Aus Verlauf entfernt');
+    notify('positive', msg.value.history.removeSuccess);
     if (detail.value?.id === id) detailOpen.value = false;
     await reload();
 }
@@ -404,7 +437,7 @@ async function runWrite<T>(
         } catch (err) {
             const status = (err as { response?: { status?: number } })?.response?.status;
             if (status === 401) {
-                mfaError.value = 'TOTP-Code ungültig oder MFA nicht eingerichtet.';
+                mfaError.value = shell.value.mfa.invalidCode;
                 continue;
             }
             showMfa.value = false;
@@ -453,13 +486,13 @@ function statusColor(status: EmailHistoryStatus): string {
 function statusLabel(status: EmailHistoryStatus): string {
     switch (status) {
         case 'SENT':
-            return 'Gesendet';
+            return msg.value.history.statusSent;
         case 'FAILED':
-            return 'Fehlgeschlagen';
+            return msg.value.history.statusFailed;
         case 'BOUNCED':
-            return 'Bounced';
+            return msg.value.history.statusBounced;
         default:
-            return 'Ausstehend';
+            return msg.value.history.statusPending;
     }
 }
 
@@ -467,14 +500,14 @@ function errMsg(err: unknown): string {
     return (
         (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
         (err as Error)?.message ??
-        'Aktion fehlgeschlagen'
+        msg.value.errorAction
     );
 }
 
 function formatTs(iso: string | null | undefined): string {
     if (!iso) return '—';
     try {
-        return new Date(iso).toLocaleString('de-DE', {
+        return new Date(iso).toLocaleString(intlLocale.value, {
             day: '2-digit',
             month: 'short',
             year: 'numeric',

package/src/pages-standard/MarketingCatalogPage.vue

@@ -32,7 +32,7 @@
         />
 
         <div v-if="pageError" class="mc-banner mc-banner--error" role="alert">
-            <strong>Fehler:</strong> {{ pageError }}
+            <strong>{{ common.error }}:</strong> {{ pageError }}
             <button class="mc-banner-x" type="button" @click="pageError = null">×</button>
         </div>
 
@@ -43,7 +43,7 @@
             :active-locale="activeLocale"
         />
 
-        <div v-if="loading" class="mc-loading">Lade Marketing-Catalog …</div>
+        <div v-if="loading" class="mc-loading">{{ msg.page.loading }}</div>
 
         <!-- ─── Tab: Promotions ─── -->
         <MarketingPromotionsTab
@@ -59,8 +59,8 @@
         />
 
         <div v-else-if="rows.length === 0" class="mc-banner mc-banner--info">
-            Noch keine Pläne angelegt — der Marketing-Catalog projiziert veröffentlichte Pläne. Lege
-            zuerst unter <strong>Pläne</strong> einen Plan mit Live-Version an.
+            {{ msg.page.emptyPlansBefore }} <strong>{{ msg.page.emptyPlansLink }}</strong>
+            {{ msg.page.emptyPlansAfter }}
         </div>
 
         <MarketingCatalogPreview
@@ -126,6 +126,9 @@ import { usePlans } from '../vue/use-plans.js';
 import { useMarketingProjections } from '../vue/use-marketing-projections.js';
 import { usePromotions } from '../vue/use-promotions.js';
 import { useCatalogEntries } from '../vue/use-catalog-entries.js';
+import { formatCurrency } from '../client/i18n/currency.js';
+import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
+import { formatMessage } from '../client/i18n/format.js';
 import { defaultHttpClient, type HttpClient } from '../client/types.js';
 import MarketingPromotionsTab from '../components/MarketingPromotionsTab.vue';
 import MarketingCatalogAdmin from './marketing-catalog/MarketingCatalogAdmin.vue';
@@ -156,6 +159,10 @@ const props = defineProps<{
     planAccents?: Record<string, string>;
 }>();
 
+const msg = useSaMessages('marketing');
+const common = useSaMessages('common');
+const { locale, intlLocale } = useSuperAdminI18n();
+
 const availableLocales = computed(() =>
     props.availableLocales && props.availableLocales.length > 0 ? props.availableLocales : ['de'],
 );
@@ -457,15 +464,25 @@ function formatVersionTab(v: PlanVersionRow): string {
 }
 
 function formatVersionTitle(v: PlanVersionRow): string {
-    const from = v.validFrom ? formatDateLong(v.validFrom) : 'unbekannt';
-    const until = v.validUntil ? formatDateLong(v.validUntil) : 'unbegrenzt';
+    const from = v.validFrom
+        ? formatDateLong(v.validFrom)
+        : msg.value.admin.versionValidFromUnknown;
+    const until = v.validUntil ? formatDateLong(v.validUntil) : common.value.unlimited;
     const changeNote = v.changeNote ? ` — ${v.changeNote}` : '';
-    return `Version ${v.version}: gültig ${from} bis ${until}${changeNote}`;
+    return formatMessage(msg.value.admin.versionTitle, {
+        version: v.version,
+        from,
+        until,
+        changeNote,
+    });
 }
 
 function formatDateShort(iso: string): string {
     try {
-        return new Date(iso).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' });
+        return new Date(iso).toLocaleDateString(intlLocale.value, {
+            day: '2-digit',
+            month: '2-digit',
+        });
     } catch {
         return iso.slice(0, 10);
     }
@@ -473,7 +490,7 @@ function formatDateShort(iso: string): string {
 
 function formatDateLong(iso: string): string {
     try {
-        return new Date(iso).toLocaleDateString('de-DE', {
+        return new Date(iso).toLocaleDateString(intlLocale.value, {
             day: '2-digit',
             month: 'short',
             year: 'numeric',
@@ -577,9 +594,7 @@ function yearlyOf(row: MarketingRow): number {
     return row.liveVersion ? Number.parseFloat(row.liveVersion.yearlyNet) || 0 : 0;
 }
 function formatEuro(value: number): string {
-    const rounded = Math.round(value * 100) / 100;
-    const text = Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(2).replace('.', ',');
-    return `${text} €`;
+    return formatCurrency(Math.round(value * 100) / 100, locale.value);
 }
 
 // ─── Promo application in the preview (SPEC_V2 §9a) ───
@@ -601,7 +616,11 @@ function promoResultOf(row: MarketingRow): PromotionResult | null {
 function promoBadgeOf(row: MarketingRow): string {
     const promo = promoOf(row);
     if (!promo) return '';
-    return promo.i18n?.[activeLocale.value]?.badge || promo.i18n?.de?.badge || 'Aktion';
+    return (
+        promo.i18n?.[activeLocale.value]?.badge ||
+        promo.i18n?.de?.badge ||
+        msg.value.preview.promoBadgeFallback
+    );
 }
 function promoFineprintOf(row: MarketingRow): string {
     const promo = promoOf(row);
@@ -614,9 +633,9 @@ function promoColorOf(row: MarketingRow): string {
 
 // ─── CTA ───
 function autoCtaText(row: MarketingRow): string {
-    if (!row.liveVersion) return 'Kontakt aufnehmen';
-    if (row.m.trialEnabled) return `Jetzt ${row.m.trialDays} Tage testen`;
-    return 'Plan wählen';
+    if (!row.liveVersion) return msg.value.cta.contact;
+    if (row.m.trialEnabled) return formatMessage(msg.value.cta.trial, { days: row.m.trialDays });
+    return msg.value.cta.choosePlan;
 }
 function ctaText(row: MarketingRow): string {
     return row.m.ctaLabel && row.m.ctaLabel.length > 0 ? row.m.ctaLabel : autoCtaText(row);