@saasicat/ui-vue 0.4.0 → 0.6.0

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 { useTenantSubscriptionBundles } from '../use-tenant-subscription-bundles.js';
+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/OnboardingConfigurator.vue

@@ -104,9 +104,9 @@ import {
     useSubscriptionDraft,
     type PromoState,
     type SubscriptionDraft,
-} from '../use-subscription-draft.js';
-import type { CatalogPlan } from '../use-tenant-billing-catalog.js';
-import type { BillingCycleStr } from '../use-tenant-billing.js';
+} from '../vue/use-subscription-draft.js';
+import type { CatalogPlan } from '../vue/use-tenant-billing-catalog.js';
+import type { BillingCycleStr } from '../vue/use-tenant-billing.js';
 import type {
     OnboardingSelectionRequest,
     OnboardingSelectionResponse,

package/src/pages-tenant/PackageSnapshotPanel.vue

@@ -105,7 +105,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import type { PackageSnapshotShape } from '../use-tenant-billing.js';
+import type { PackageSnapshotShape } from '../vue/use-tenant-billing.js';
 import type { TenantPlanSectionI18n } from './default-i18n.js';
 
 // PackageSnapshotPanel — P11.4 (METAMODELL §17a):

package/src/pages-tenant/PlanChangeWizard.vue

@@ -220,8 +220,9 @@ 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 type { BillingCycleStr, PlanChangePreviewShape } from '../use-tenant-billing.js';
-import type { CatalogPlan } from '../use-tenant-billing-catalog.js';
+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';
 
 // PlanChangeWizard — 3-step dialog for plan changes.
 //
@@ -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';
@@ -204,13 +208,14 @@ import {
     useTenantBilling,
     type BundlePreviewShape,
     type SubscriptionBundleShape,
-} from '../use-tenant-billing.js';
+} from '../vue/use-tenant-billing.js';
 import {
     useTenantBillingCatalog,
     type CatalogBundle,
     type CatalogPlan,
-} from '../use-tenant-billing-catalog.js';
-import type { HttpClient } from '../types.js';
+} 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
 // UI. The consumer (app) embeds it in its settings page and passes through
@@ -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,