@saasicat/ui-vue 0.5.0 → 0.6.0

package/src/pages-standard/plans-page/PlanBundleOverview.vue

@@ -1,23 +1,29 @@
 <template>
     <section class="sa-bundles">
         <div class="sa-bundles__head">
-            <h2 class="sa-bundles__title">Bundles</h2>
+            <h2 class="sa-bundles__title">{{ msg.bundleOverview.title }}</h2>
             <span class="sa-bundles__count">{{ bundles.length }}</span>
         </div>
 
         <div v-if="bundles.length === 0" class="sa-bundles__empty">
-            Keine Bundles vorhanden.
+            {{ msg.bundleOverview.empty }}
         </div>
 
         <div v-else class="sa-bundles__grid">
-            <q-card v-for="bundle in bundles" :key="bundle.bundleKey" flat bordered class="sa-bundle">
+            <q-card
+                v-for="bundle in bundles"
+                :key="bundle.bundleKey"
+                flat
+                bordered
+                class="sa-bundle"
+            >
                 <q-card-section class="sa-bundle__header">
                     <div class="sa-bundle__label">{{ bundle.label ?? bundle.bundleKey }}</div>
                     <div class="sa-bundle__key">{{ bundle.bundleKey }}</div>
                 </q-card-section>
                 <q-separator />
                 <q-card-section>
-                    <div class="sa-bundle__caption">Enthält</div>
+                    <div class="sa-bundle__caption">{{ msg.bundleOverview.contains }}</div>
                     <div class="sa-bundle__chips">
                         <q-chip
                             v-for="feature in bundle.features"
@@ -33,7 +39,7 @@
                     </div>
                 </q-card-section>
                 <q-card-section class="sa-bundle__compat">
-                    <div class="sa-bundle__caption">Kompatibel mit</div>
+                    <div class="sa-bundle__caption">{{ msg.bundleOverview.compatibleWith }}</div>
                     <div class="sa-bundle__plans">{{ compatLabel(bundle) }}</div>
                 </q-card-section>
             </q-card>
@@ -43,6 +49,7 @@
 
 <script setup lang="ts">
 import type { PlanRow } from '@saasicat/types';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 
 interface BundleEntry {
     bundleKey: string;
@@ -57,6 +64,8 @@ const props = defineProps<{
     featureRegistry: Record<string, { label?: string; group?: string }>;
 }>();
 
+const msg = useSaMessages('plans');
+
 function featureLabel(featureKey: string): string {
     return props.featureRegistry[featureKey]?.label ?? featureKey;
 }
@@ -68,7 +77,7 @@ function planLabel(planKey: string): string {
 // Empty compatibility list = bundle applies to all plans (cf. PlanMatrix.hasBundle).
 function compatLabel(bundle: BundleEntry): string {
     const keys = bundle.compatiblePlanKeys ?? [];
-    if (keys.length === 0) return 'Alle Pläne';
+    if (keys.length === 0) return msg.value.bundleOverview.allPlans;
     return keys.map(planLabel).join(', ');
 }
 </script>

package/src/pages-standard/plans-page/PlanDiscardDraftDialog.vue

@@ -6,21 +6,20 @@
     >
         <q-card style="min-width: 400px">
             <q-card-section>
-                <div class="text-h6">Draft verwerfen?</div>
+                <div class="text-h6">{{ msg.discardDialog.title }}</div>
                 <div class="text-body2 q-mt-sm">
-                    Draft v{{ target?.draft.version }} von
-                    <code>{{ target?.plan.planKey }}</code> wird unwiderruflich gelöscht. Published
-                    Versions bleiben unverändert.
+                    {{ bodyLead }}
+                    <code>{{ target?.plan.planKey }}</code> {{ msg.discardDialog.bodyTail }}
                 </div>
             </q-card-section>
             <q-banner v-if="error" class="bg-warning q-mx-md q-mb-md" rounded>
                 {{ error }}
             </q-banner>
             <q-card-actions align="right">
-                <q-btn flat label="Abbrechen" @click="$emit('update:modelValue', false)" />
+                <q-btn flat :label="common.cancel" @click="$emit('update:modelValue', false)" />
                 <q-btn
                     color="negative"
-                    label="Verwerfen"
+                    :label="common.discard"
                     :loading="discarding"
                     @click="$emit('execute')"
                 />
@@ -30,15 +29,27 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { PlanDiscardTarget } from './types.js';
 
-defineProps<{
+const props = defineProps<{
     modelValue: boolean;
     target: PlanDiscardTarget | null;
     error: string | null;
     discarding: boolean;
 }>();
 
+const msg = useSaMessages('plans');
+const common = useSaMessages('common');
+
+const bodyLead = computed(() =>
+    formatMessage(msg.value.discardDialog.bodyLead, {
+        version: props.target?.draft.version ?? '',
+    }),
+);
+
 defineEmits<{
     (e: 'update:modelValue', value: boolean): void;
     (e: 'execute'): void;

package/src/pages-standard/plans-page/PlanPublishDialog.vue

@@ -6,25 +6,24 @@
     >
         <q-card style="min-width: 420px">
             <q-card-section>
-                <div class="text-h6">Version publishen?</div>
+                <div class="text-h6">{{ msg.publishDialog.title }}</div>
                 <div class="text-body2 q-mt-sm">
-                    Plan <code>{{ selectedPlan?.planKey }}</code
-                    >, Draft v{{ publishTarget?.version }}.
+                    {{ msg.publishDialog.bodyLead }} <code>{{ selectedPlan?.planKey }}</code
+                    >{{ bodyTail }}
                 </div>
                 <div class="text-caption text-grey-7 q-mt-sm">
-                    Eine ggf. zuvor live Version wird auf <code>supersededAt</code> gesetzt
-                    (Vertragsschutz P1: Bestand-Subscriptions bleiben auf der alten Version bis zum
-                    nächsten Renewal).
+                    {{ msg.publishDialog.supersededNoteLead }} <code>supersededAt</code>
+                    {{ msg.publishDialog.supersededNoteTail }}
                 </div>
                 <q-checkbox
                     :model-value="forceRegressive"
-                    label="Force-Publish auch bei Regression (Feature entfernt / Quota gesenkt / Preis erhöht)"
+                    :label="msg.publishDialog.forceRegressive"
                     class="q-mt-md"
                     @update:model-value="$emit('update:forceRegressive', Boolean($event))"
                 />
                 <q-checkbox
                     :model-value="allowZeroPrice"
-                    label="Preis 0,00 bewusst zulassen (kostenloser Sondervertrag)"
+                    :label="msg.publishDialog.allowZeroPrice"
                     class="q-mt-sm"
                     @update:model-value="$emit('update:allowZeroPrice', Boolean($event))"
                 />
@@ -33,7 +32,7 @@
                 {{ publishError }}
             </q-banner>
             <q-card-section v-if="regressionChanges.length > 0" class="q-pt-none">
-                <div class="text-subtitle2 q-mb-xs">Regressive Änderungen:</div>
+                <div class="text-subtitle2 q-mb-xs">{{ msg.publishDialog.regressiveChanges }}</div>
                 <ul class="sa-publish-regression">
                     <li v-for="c in regressionChanges" :key="c.field">
                         <strong>{{ fieldLabel(c.field) }}:</strong>
@@ -48,10 +47,10 @@
                 </ul>
             </q-card-section>
             <q-card-actions align="right">
-                <q-btn flat label="Abbrechen" @click="$emit('update:modelValue', false)" />
+                <q-btn flat :label="common.cancel" @click="$emit('update:modelValue', false)" />
                 <q-btn
                     color="primary"
-                    label="Publish"
+                    :label="msg.publishDialog.confirm"
                     :loading="publishing"
                     @click="$emit('execute')"
                 />
@@ -61,10 +60,13 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { PlanRow, PlanVersionRow } from '@saasicat/types';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { RegressionChange } from './types.js';
 
-defineProps<{
+const props = defineProps<{
     modelValue: boolean;
     selectedPlan: PlanRow | null;
     publishTarget: PlanVersionRow | null;
@@ -77,6 +79,15 @@ defineProps<{
     formatChangeValue: (value: unknown) => string;
 }>();
 
+const msg = useSaMessages('plans');
+const common = useSaMessages('common');
+
+const bodyTail = computed(() =>
+    formatMessage(msg.value.publishDialog.bodyTail, {
+        version: props.publishTarget?.version ?? '',
+    }),
+);
+
 defineEmits<{
     (e: 'update:modelValue', value: boolean): void;
     (e: 'update:forceRegressive', value: boolean): void;

package/src/pages-standard/tenants/format.ts

@@ -28,9 +28,10 @@ export function planAccent(
     return accents[planId] ?? '#3f6bff';
 }
 
-export function formatDateDe(iso: string | null | undefined): string {
+/** `locale` is a BCP-47 tag — pages pass `intlLocale.value` of the active UI locale. */
+export function formatDate(iso: string | null | undefined, locale: string): string {
     if (!iso) return '—';
-    return new Date(iso).toLocaleDateString('de-DE', {
+    return new Date(iso).toLocaleDateString(locale, {
         day: '2-digit',
         month: 'short',
         year: 'numeric',

package/src/pages-tenant/MySubscriptionBundlesPage.vue

@@ -2,11 +2,8 @@
     <div class="msb">
         <header class="msb-head">
             <div>
-                <h2 class="msb-title">Meine Bundles</h2>
-                <p class="msb-sub">
-                    Eigenständig gebuchte Add-On-Pakete zu deinem Plan. Mindestlaufzeit +
-                    Kündigungs- Termin pro Bundle.
-                </p>
+                <h2 class="msb-title">{{ effectiveI18n.myBundlesTitle }}</h2>
+                <p class="msb-sub">{{ effectiveI18n.myBundlesSubtitle }}</p>
             </div>
             <button class="msb-btn msb-btn--primary" type="button" @click="openAddDialog">
                 <svg
@@ -19,22 +16,24 @@
                 >
                     <path d="M12 5v14M5 12h14" />
                 </svg>
-                <span>Bundle buchen</span>
+                <span>{{ effectiveI18n.bundleBookAction }}</span>
             </button>
         </header>
 
         <div v-if="error" class="msb-error" role="alert">
-            <strong>Fehler:</strong> {{ error.message }}
+            <strong>{{ effectiveI18n.errorLabel }}:</strong> {{ error.message }}
         </div>
 
-        <div v-if="loading && bundles.length === 0" class="msb-loading">Lade …</div>
+        <div v-if="loading && bundles.length === 0" class="msb-loading">
+            {{ effectiveI18n.loading }}
+        </div>
 
         <div v-else-if="bundles.length === 0" class="msb-empty">
-            Du hast noch kein Bundle gebucht. Über
+            {{ effectiveI18n.myBundlesEmptyPrefix }}
             <button type="button" class="msb-empty-link" @click="openAddDialog">
-                Bundle buchen
+                {{ effectiveI18n.bundleBookAction }}
             </button>
-            kannst du dein Paket um zusätzliche Features &amp; Quotas erweitern.
+            {{ effectiveI18n.myBundlesEmptySuffix }}
         </div>
 
         <div v-else class="msb-list">
@@ -48,9 +47,10 @@
                             </span>
                         </div>
                         <div class="msb-card-meta">
-                            Gebucht seit {{ formatDate(b.startedAt) }}
+                            {{ effectiveI18n.myBundlesBookedSince }} {{ formatDate(b.startedAt) }}
                             <template v-if="b.minimumTermEndsAt">
-                                · Mindestlaufzeit bis {{ formatDate(b.minimumTermEndsAt) }}
+                                · {{ effectiveI18n.bundleMinimumTermUntil }}
+                                {{ formatDate(b.minimumTermEndsAt) }}
                             </template>
                         </div>
                     </div>
@@ -61,11 +61,16 @@
                         :disabled="cancellingId === b.id"
                         @click="onCancel(b)"
                     >
-                        {{ cancellingId === b.id ? 'Kündige …' : 'Kündigen' }}
+                        {{
+                            cancellingId === b.id
+                                ? effectiveI18n.myBundlesCancelInProgress
+                                : effectiveI18n.bundleCancelAction
+                        }}
                     </button>
                 </header>
                 <div v-if="b.canceledAt !== null" class="msb-cancel-info">
-                    Gekündigt am {{ formatDate(b.canceledAt) }} · läuft bis
+                    {{ effectiveI18n.myBundlesCanceledAt }} {{ formatDate(b.canceledAt) }} ·
+                    {{ effectiveI18n.myBundlesRunsUntil }}
                     <strong>{{ formatDate(b.canceledEffectiveAt) }}</strong>
                 </div>
             </article>
@@ -75,11 +80,11 @@
         <div v-if="addOpen" class="msb-modal-bg" @click="closeAddDialog">
             <div class="msb-modal" @click.stop>
                 <div class="msb-modal-head">
-                    <div class="msb-modal-title">Bundle buchen</div>
+                    <div class="msb-modal-title">{{ effectiveI18n.bundleBookAction }}</div>
                     <button
                         class="msb-modal-x"
                         type="button"
-                        aria-label="Schließen"
+                        :aria-label="effectiveI18n.wizardClose"
                         @click="closeAddDialog"
                     >
                         <svg
@@ -98,9 +103,13 @@
                     <!-- Selection list via public catalog, otherwise fallback to direct UUID input. -->
                     <template v-if="bookable.length > 0">
                         <label class="msb-field">
-                            <span class="msb-field-label">Bundle</span>
+                            <span class="msb-field-label">{{
+                                effectiveI18n.myBundlesAddBundleLabel
+                            }}</span>
                             <select v-model="addForm.bundleVersionId" class="msb-input">
-                                <option value="">— bitte wählen —</option>
+                                <option value="">
+                                    {{ effectiveI18n.myBundlesAddSelectPlaceholder }}
+                                </option>
                                 <option
                                     v-for="b in bookable"
                                     :key="b.bundleVersionId"
@@ -108,54 +117,67 @@
                                 >
                                     {{ b.label }} ({{ b.bundleKey }})
                                     <template v-if="b.monthlyNet !== null">
-                                        — {{ b.monthlyNet }} € / Mo
+                                        — {{ b.monthlyNet }}
+                                        {{ effectiveI18n.myBundlesPricePerMonthShort }}
                                     </template>
                                 </option>
                             </select>
                             <span v-if="hiddenBecauseIncompatible > 0" class="msb-field-hint">
-                                {{ hiddenBecauseIncompatible }} weitere Bundle(s) ausgeblendet —
-                                nicht kompatibel mit Plan <code>{{ currentPlanKey }}</code
+                                {{ hiddenBecauseIncompatible }}
+                                {{ effectiveI18n.myBundlesHiddenIncompatible }}
+                                <code>{{ currentPlanKey }}</code
                                 >.
                             </span>
                         </label>
                     </template>
                     <template v-else>
                         <label class="msb-field">
-                            <span class="msb-field-label">BundleVersion-ID</span>
+                            <span class="msb-field-label">
+                                {{ effectiveI18n.myBundlesBundleVersionIdLabel }}
+                            </span>
                             <input
                                 v-model="addForm.bundleVersionId"
                                 class="msb-input"
-                                placeholder="UUID der gewünschten Bundle-Version"
+                                :placeholder="effectiveI18n.myBundlesBundleVersionIdPlaceholder"
                             />
+                            <!-- Integration hint for the embedding app, not for tenants. -->
                             <span class="msb-field-hint">
-                                Aus dem öffentlichen Marketing-Catalog. Konsument kann
+                                From the public marketing catalog. Pass
                                 <code>availableBundles</code>
-                                als Prop reichen, dann erscheint hier ein Dropdown.
+                                as a prop to get a dropdown here.
                             </span>
                         </label>
                     </template>
                     <label class="msb-field">
-                        <span class="msb-field-label">Mindestlaufzeit (Monate, optional)</span>
+                        <span class="msb-field-label">{{
+                            effectiveI18n.myBundlesMinimumTermLabel
+                        }}</span>
                         <input
                             v-model.number="addForm.minimumTermMonths"
                             type="number"
                             min="0"
                             max="120"
                             class="msb-input"
-                            placeholder="Default: 12"
+                            :placeholder="effectiveI18n.myBundlesMinimumTermPlaceholder"
                         />
                     </label>
                     <div v-if="addError" class="msb-error">{{ addError }}</div>
                 </div>
                 <div class="msb-modal-foot">
-                    <button class="msb-btn" type="button" @click="closeAddDialog">Abbrechen</button>
+                    <button class="msb-btn" type="button" @click="closeAddDialog">
+                        {{ effectiveI18n.bundlePreviewClose }}
+                    </button>
                     <button
                         class="msb-btn msb-btn--primary"
                         type="button"
                         :disabled="!canSubmit || adding"
                         @click="submitAdd"
                     >
-                        {{ adding ? 'Buche …' : 'Bundle buchen' }}
+                        {{
+                            adding
+                                ? effectiveI18n.myBundlesBookInProgress
+                                : effectiveI18n.bundleBookAction
+                        }}
                     </button>
                 </div>
             </div>
@@ -167,7 +189,9 @@
 import { computed, onMounted, reactive, ref } from 'vue';
 import type { SubscriptionBundleRecord } from '@saasicat/types';
 
+import { useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 import { useTenantSubscriptionBundles } from '../vue/use-tenant-subscription-bundles.js';
+import { defaultTenantPlanSectionI18n, type TenantPlanSectionI18n } from './default-i18n.js';
 
 // MySubscriptionBundlesPage — tenant self-service page "Meine Bundles".
 // The hosting app embeds the page
@@ -208,6 +232,8 @@ const props = withDefaults(
         currentPlanKey?: string | null;
         /** Optional: auth token provider (for the Bearer header). */
         getAuthToken?: () => string | null;
+        /** i18n overrides — missing keys fall back to the active locale's map. */
+        i18n?: Partial<TenantPlanSectionI18n>;
     }>(),
     {
         bundleLabels: () => ({}),
@@ -217,6 +243,13 @@ const props = withDefaults(
     },
 );
 
+const { locale, intlLocale } = useSuperAdminI18n();
+
+const effectiveI18n = computed<TenantPlanSectionI18n>(() => ({
+    ...defaultTenantPlanSectionI18n(locale.value),
+    ...(props.i18n ?? {}),
+}));
+
 const { bundles, loading, error, load, add, cancel } = useTenantSubscriptionBundles({
     billingEndpoint: props.billingEndpoint,
     getAuthToken: props.getAuthToken,
@@ -308,9 +341,7 @@ async function submitAdd(): Promise<void> {
 const cancellingId = ref<string | null>(null);
 
 async function onCancel(b: SubscriptionBundleRecord): Promise<void> {
-    const ok = window.confirm(
-        `Bundle wirklich kündigen? Die Kündigung wird zum nächstmöglichen Termin wirksam.`,
-    );
+    const ok = window.confirm(effectiveI18n.value.myBundlesCancelConfirm);
     if (!ok) return;
     cancellingId.value = b.id;
     try {
@@ -336,9 +367,9 @@ function statusOf(b: SubscriptionBundleRecord): 'active' | 'canceled-pending' |
 
 function statusLabel(b: SubscriptionBundleRecord): string {
     const s = statusOf(b);
-    if (s === 'active') return 'Aktiv';
-    if (s === 'canceled-pending') return 'Kündigung wirksam ab …';
-    return 'Beendet';
+    if (s === 'active') return effectiveI18n.value.statusActive;
+    if (s === 'canceled-pending') return effectiveI18n.value.myBundlesStatusCanceledPending;
+    return effectiveI18n.value.myBundlesStatusEnded;
 }
 
 function cardStatusClass(b: SubscriptionBundleRecord): string {
@@ -349,7 +380,11 @@ function formatDate(date: Date | string | null | undefined): string {
     if (!date) return '—';
     const d = typeof date === 'string' ? new Date(date) : date;
     if (Number.isNaN(d.getTime())) return '—';
-    return d.toLocaleDateString('de-DE', { year: 'numeric', month: '2-digit', day: '2-digit' });
+    return d.toLocaleDateString(intlLocale.value, {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+    });
 }
 </script>
 

package/src/pages-tenant/PlanChangeWizard.vue

@@ -220,6 +220,7 @@ import { computed, ref, watch } from 'vue';
 import LimitsRow from './LimitsRow.vue';
 import PlanCycleToggle from '../components/plan/PlanCycleToggle.vue';
 import PlanGrid from '../components/plan/PlanGrid.vue';
+import { useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 import type { BillingCycleStr, PlanChangePreviewShape } from '../vue/use-tenant-billing.js';
 import type { CatalogPlan } from '../vue/use-tenant-billing-catalog.js';
 
@@ -239,6 +240,7 @@ interface I18nStrings {
     badgeCurrent: string;
     badgePopular: string;
     priceUnitMonthly: string;
+    priceUnitYearly: string;
     priceOnRequest: string;
     stepChoose: string;
     stepChooseIntro: string;
@@ -302,8 +304,8 @@ interface Props {
     formatQuotaLabel?: (key: string, value: number) => string;
     /**
      * Plain value per quota key, e.g. "200" or "10 GB" (for PlanGrid).
-     * Optional — default: takes `value.toLocaleString('de-DE')`, appends a
-     * `GB` suffix for `storage` keys, replaces -1 with ∞.
+     * Optional — default: takes `value.toLocaleString()` in the active UI
+     * locale, appends a `GB` suffix for `storage` keys, replaces -1 with ∞.
      */
     formatQuotaValue?: (key: string, value: number) => string;
     quotaLabel: (key: string) => string;
@@ -321,6 +323,8 @@ const emit = defineEmits<{
     submitted: [];
 }>();
 
+const { intlLocale } = useSuperAdminI18n();
+
 const model = computed({
     get: () => props.modelValue,
     set: (v) => emit('update:modelValue', v),
@@ -430,7 +434,7 @@ function formatQuotaValueResolved(key: string, value: number | null | undefined)
     if (value === null || value === undefined || Number.isNaN(value)) return '–';
     if (value < 0) return '∞';
     if (key.toLowerCase().includes('storage')) return `${value} GB`;
-    return value.toLocaleString('de-DE');
+    return value.toLocaleString(intlLocale.value);
 }
 
 const cycleI18n = computed(() => ({
@@ -443,7 +447,7 @@ const planGridI18n = computed(() => ({
     popular: props.i18n.badgePopular,
     current: props.i18n.badgeCurrent,
     perMonth: props.i18n.priceUnitMonthly,
-    perYear: props.i18n.priceUnitMonthly,
+    perYear: props.i18n.priceUnitYearly,
     priceOnRequest: props.i18n.priceOnRequest,
 }));
 

package/src/pages-tenant/TenantPlanSection.vue

@@ -122,7 +122,11 @@
             <!-- Reactivate confirmation (analogous to cancellation): deliberate action -->
             <q-dialog
                 :model-value="reactivateConfirmId !== null"
-                @update:model-value="(v) => { if (!v) closeReactivateConfirm(); }"
+                @update:model-value="
+                    (v) => {
+                        if (!v) closeReactivateConfirm();
+                    }
+                "
             >
                 <q-card style="min-width: 360px; max-width: 480px">
                     <q-card-section>
@@ -194,7 +198,7 @@ import { computed, ref } from 'vue';
 import PackageSnapshotPanel from './PackageSnapshotPanel.vue';
 import PendingVersionBanner from './PendingVersionBanner.vue';
 import PlanChangeWizard from './PlanChangeWizard.vue';
-import { DEFAULT_I18N_DE, type TenantPlanSectionI18n } from './default-i18n.js';
+import { defaultTenantPlanSectionI18n, type TenantPlanSectionI18n } from './default-i18n.js';
 import BundlePreviewDialog from './tenant-plan-section/BundlePreviewDialog.vue';
 import TenantBundleStore from './tenant-plan-section/TenantBundleStore.vue';
 import TenantFeatureMatrix from './tenant-plan-section/TenantFeatureMatrix.vue';
@@ -210,6 +214,7 @@ import {
     type CatalogBundle,
     type CatalogPlan,
 } from '../vue/use-tenant-billing-catalog.js';
+import { useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 import type { HttpClient } from '../client/types.js';
 
 // TenantPlanSection — main component for the tenant plan/bundle self-service
@@ -234,7 +239,8 @@ interface Props {
      * Plain value per quota key (e.g. "200" or "10 GB") — separate from the
      * label so the wizard's `<PlanGrid>` can render value + label separately.
      * Optional; without an override the wizard default applies
-     * (`value.toLocaleString('de-DE')` + `GB` for storage keys, ∞ for -1).
+     * (`value.toLocaleString()` in the active UI locale + `GB` for storage
+     * keys, ∞ for -1).
      */
     formatQuotaValue?: (key: string, value: number) => string;
 
@@ -245,7 +251,7 @@ interface Props {
     /** Default: storage quotas (float), all others integer. */
     isFractionalQuota?: (key: string) => boolean;
 
-    /** i18n overrides — missing keys fall back to DEFAULT_I18N_DE. */
+    /** i18n overrides — missing keys fall back to the active locale's map. */
     i18n?: Partial<TenantPlanSectionI18n>;
 
     /**
@@ -264,6 +270,8 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const { locale } = useSuperAdminI18n();
+
 const billing = useTenantBilling({
     http: props.http,
     getAuthToken: props.getAuthToken,
@@ -287,8 +295,7 @@ const bundleError = ref<string | null>(null);
 
 // Bundle preview dialog state (#37/#61)
 type PendingBundleAction =
-    | { kind: 'add'; bundleVersionId: string }
-    | { kind: 'cancel'; subscriptionBundleId: string };
+    { kind: 'add'; bundleVersionId: string } | { kind: 'cancel'; subscriptionBundleId: string };
 const bundlePreviewOpen = ref(false);
 const bundlePreview = ref<BundlePreviewShape | null>(null);
 const bundlePreviewLoading = ref(false);
@@ -301,7 +308,7 @@ const loading = computed(() => billing.loading.value || catalog.loading.value);
 const error = computed(() => billing.error.value ?? catalog.error.value);
 
 const effectiveI18n = computed<TenantPlanSectionI18n>(() => ({
-    ...DEFAULT_I18N_DE,
+    ...defaultTenantPlanSectionI18n(locale.value),
     ...(props.i18n ?? {}),
 }));
 
@@ -331,10 +338,7 @@ const availableBundles = computed<CatalogBundle[]>(() => catalog.bundles.value ?
 // no longer active and disappears from the list.
 function isSubscriptionBundleActive(b: SubscriptionBundleShape): boolean {
     if (b.canceledAt === null) return true;
-    return (
-        b.canceledEffectiveAt !== null &&
-        new Date(b.canceledEffectiveAt).getTime() > Date.now()
-    );
+    return b.canceledEffectiveAt !== null && new Date(b.canceledEffectiveAt).getTime() > Date.now();
 }
 
 const bookedBundles = computed<SubscriptionBundleShape[]>(() =>
@@ -348,8 +352,7 @@ const hasBundleStore = computed(
 const featureRegistry = computed(() => catalog.featureRegistry.value);
 const activeFeatures = computed<string[]>(() => usage.value?.limits.features ?? []);
 const hasFeatureOverview = computed(
-    () =>
-        Object.keys(featureRegistry.value ?? {}).length > 0 || activeFeatures.value.length > 0,
+    () => Object.keys(featureRegistry.value ?? {}).length > 0 || activeFeatures.value.length > 0,
 );
 
 const currentPlanName = computed(() => {
@@ -435,6 +438,7 @@ const wizardI18n = computed(() => ({
     badgeCurrent: effectiveI18n.value.wizardBadgeCurrent,
     badgePopular: effectiveI18n.value.wizardBadgePopular,
     priceUnitMonthly: effectiveI18n.value.wizardPriceUnitMonthly,
+    priceUnitYearly: effectiveI18n.value.wizardPriceUnitYearly,
     priceOnRequest: effectiveI18n.value.wizardPriceOnRequest,
     stepChoose: effectiveI18n.value.wizardStepChoose,
     stepChooseIntro: effectiveI18n.value.wizardStepChooseIntro,