@saasicat/ui-vue 0.5.0 → 0.7.0

package/src/components/bundle-editor/BundleQuotasEditor.vue

@@ -15,10 +15,10 @@
                 :disabled="locked"
                 :title="
                     locked
-                        ? 'Live-Version ist read-only'
+                        ? msg.compatPicker.lockedTooltip
                         : q.quotaKey in quotas
-                          ? 'Quota entfernen'
-                          : 'Quota aufnehmen'
+                          ? msg.quotasEditor.removeTooltip
+                          : msg.quotasEditor.addTooltip
                 "
                 @click="$emit('toggle', q.quotaKey)"
             >
@@ -70,7 +70,7 @@
             </div>
         </div>
         <div v-if="availableQuotas.length === 0" class="bd-quotas-empty">
-            Keine Quotas im Discovery-Snapshot.
+            {{ msg.quotasEditor.empty }}
         </div>
     </div>
 </template>
@@ -79,6 +79,7 @@
 import { computed } from 'vue';
 import type { DiscoveredQuota } from '@saasicat/types';
 import type { QuotaMeta } from './catalog-i18n.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 
 // BundleQuotasEditor — toggle + numeric per Quota, against the discovery
 // snapshot as a library (after plan simulation). `quotas[key]` is the
@@ -98,6 +99,8 @@ const props = defineProps<{
     quotaRegistry?: Record<string, QuotaMeta>;
 }>();
 
+const msg = useSaMessages('bundles');
+
 defineEmits<{
     (e: 'toggle', quotaKey: string): void;
     (e: 'setValue', quotaKey: string, value: number): void;

package/src/components/bundle-editor/BundleStatusBanner.vue

@@ -51,35 +51,29 @@
         </span>
         <div class="bv-status-text">
             <template v-if="status === 'live'">
-                <b>v{{ version.version }}</b> ist <b>live</b> seit
-                {{ formatDateDE(version.validFrom) }} — wird aktuell als Add-On angeboten.
-                <span class="bv-status-warn">
-                    Inhalt &amp; Preis sind read-only (laufende Verträge). Für Änderungen eine neue
-                    Version anlegen.
-                </span>
+                <b>v{{ version.version }}</b> {{ msg.statusBanner.is }}
+                <b>{{ msg.statusBanner.live }}</b> {{ liveTail }}
+                <span class="bv-status-warn">{{ msg.statusBanner.liveWarning }}</span>
             </template>
             <template v-else-if="status === 'scheduled'">
-                <b>v{{ version.version }}</b> ist <b>geplant</b> für
-                {{ formatDateDE(version.validFrom) }} — wird ab dann verkaufbar.
-                <span class="bv-status-ok">Frei editierbar bis dahin.</span>
+                <b>v{{ version.version }}</b> {{ msg.statusBanner.is }}
+                <b>{{ msg.statusBanner.scheduled }}</b> {{ scheduledTail }}
+                <span class="bv-status-ok">{{ msg.statusBanner.scheduledOk }}</span>
             </template>
             <template v-else-if="status === 'superseded'">
-                <b>v{{ version.version }}</b> ist <b>abgelöst</b> ({{
-                    formatDateDE(version.validFrom)
-                }}
-                – {{ formatDateDE(version.validUntil) }}) — wird nicht mehr angeboten, Bestand
-                bleibt für Abrechnung erhalten.
+                <b>v{{ version.version }}</b> {{ msg.statusBanner.is }}
+                <b>{{ msg.statusBanner.superseded }}</b> {{ supersededTail }}
             </template>
             <template v-else>
-                <b>v{{ version.version }}</b> ist <b>Draft</b> — noch nicht published, frei
-                editierbar.
+                <b>v{{ version.version }}</b> {{ msg.statusBanner.is }}
+                <b>{{ msg.statusBanner.draft }}</b> {{ msg.statusBanner.draftTail }}
             </template>
         </div>
         <button
             v-if="status === 'scheduled' || status === 'draft'"
             class="bv-status-discard"
             type="button"
-            title="Geplante Version verwerfen"
+            :title="msg.statusBanner.discardTooltip"
             @click="$emit('discard')"
         >
             <svg
@@ -94,7 +88,7 @@
                     d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"
                 />
             </svg>
-            <span>Verwerfen</span>
+            <span>{{ common.discard }}</span>
         </button>
     </div>
 </template>
@@ -103,7 +97,9 @@
 import { computed } from 'vue';
 import type { BundleVersionRow } from '@saasicat/types';
 
-import { bundleVersionStatus, formatDateDE } from './bundle-version-status';
+import { bundleVersionStatus, formatDate } from './bundle-version-status';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
 
 // BundleStatusBanner — inline hint per bundle version with plain-text info on
 // editability (after plan simulation). Shows the status + the business
@@ -119,7 +115,28 @@ defineEmits<{
     (e: 'discard'): void;
 }>();
 
+const msg = useSaMessages('bundles');
+const common = useSaMessages('common');
+const { locale } = useSuperAdminI18n();
+
 const status = computed(() => bundleVersionStatus(props.version, props.now));
+
+const liveTail = computed(() =>
+    formatMessage(msg.value.statusBanner.liveTail, {
+        date: formatDate(props.version.validFrom, locale.value),
+    }),
+);
+const scheduledTail = computed(() =>
+    formatMessage(msg.value.statusBanner.scheduledTail, {
+        date: formatDate(props.version.validFrom, locale.value),
+    }),
+);
+const supersededTail = computed(() =>
+    formatMessage(msg.value.statusBanner.supersededTail, {
+        from: formatDate(props.version.validFrom, locale.value),
+        until: formatDate(props.version.validUntil, locale.value),
+    }),
+);
 </script>
 
 <style scoped>

package/src/components/bundle-editor/BundleVersionInlineEditor.vue

@@ -5,9 +5,8 @@
         <div v-if="hasOverlap" class="bve-overlap-banner" role="alert">
             <span class="bve-overlap-ico">⚠</span>
             <span>
-                <b>{{ overlapPlansCount }}</b> Plan{{ overlapPlansCount === 1 ? '' : 'e' }} mit
-                Überschneidung — Features/Quotas dieses Bundles sind im Plan bereits enthalten.
-                Bitte vor Publish bereinigen.
+                <b>{{ overlapPlansCount }}</b>
+                {{ overlapPlansCount === 1 ? msg.editor.overlapOne : msg.editor.overlapMany }}
             </span>
         </div>
 
@@ -15,7 +14,7 @@
             <!-- LEFT: Features + Quotas -->
             <section class="bve-col">
                 <div class="bve-section-label">
-                    <span>Features</span>
+                    <span>{{ msg.editor.sectionFeatures }}</span>
                     <span class="bve-section-count">
                         {{ form.features.length }} / {{ availableFeatures.length }}
                     </span>
@@ -30,7 +29,7 @@
                 />
 
                 <div class="bve-section-label bve-section-label--top">
-                    <span>Quotas</span>
+                    <span>{{ msg.fields.quotas }}</span>
                     <span class="bve-section-count">
                         {{ Object.keys(form.quotas).length }} / {{ availableQuotas.length }}
                     </span>
@@ -49,12 +48,12 @@
             <!-- RIGHT: Pricing · Validity · Compat -->
             <section class="bve-col">
                 <div class="bve-section-label">
-                    <span>Pricing</span>
-                    <span class="bve-section-count">Bundle-Preis · zusätzlich zum Plan</span>
+                    <span>{{ msg.editor.sectionPricing }}</span>
+                    <span class="bve-section-count">{{ msg.editor.pricingHint }}</span>
                 </div>
                 <div class="bve-row bve-row--pricing">
                     <label class="bve-field">
-                        <span class="bve-field-label">Monatspreis</span>
+                        <span class="bve-field-label">{{ msg.fields.monthlyPrice }}</span>
                         <div class="bve-input-grp">
                             <input
                                 type="text"
@@ -64,11 +63,11 @@
                                 :disabled="locked"
                                 @input="onPriceInput('monthlyNet', $event)"
                             />
-                            <span class="bve-input-unit">€/Mo</span>
+                            <span class="bve-input-unit">{{ msg.fields.perMonthUnit }}</span>
                         </div>
                     </label>
                     <label class="bve-field">
-                        <span class="bve-field-label">Jahrespreis</span>
+                        <span class="bve-field-label">{{ msg.fields.yearlyPrice }}</span>
                         <div class="bve-input-grp">
                             <input
                                 type="text"
@@ -78,26 +77,26 @@
                                 :disabled="locked"
                                 @input="onPriceInput('yearlyNet', $event)"
                             />
-                            <span class="bve-input-unit">€/Jahr</span>
+                            <span class="bve-input-unit">{{ msg.fields.perYearUnit }}</span>
                         </div>
                     </label>
                     <div class="bve-savings">
                         <template v-if="savingsPercent !== null">
-                            ≈ {{ monthlyEquivalent }} €/Mo bei Jahresbuchung
+                            {{ yearlyEquivalentText }}
                             <span v-if="savingsPercent > 0" class="bve-savings-pill">
-                                {{ savingsPercent }} % sparen
+                                {{ savingsText }}
                             </span>
                         </template>
                     </div>
                 </div>
 
                 <div class="bve-section-label bve-section-label--top">
-                    <span>Gültigkeit</span>
-                    <span class="bve-section-count">validUntil automatisch (Auto-Sukzession)</span>
+                    <span>{{ common.validity }}</span>
+                    <span class="bve-section-count">{{ msg.editor.validityHint }}</span>
                 </div>
                 <div class="bve-row bve-row--validity">
                     <label class="bve-field">
-                        <span class="bve-field-label">Gültig ab</span>
+                        <span class="bve-field-label">{{ msg.fields.validFrom }}</span>
                         <input
                             type="date"
                             class="bve-input"
@@ -107,21 +106,19 @@
                         />
                     </label>
                     <label class="bve-field">
-                        <span class="bve-field-label">Gültig bis</span>
+                        <span class="bve-field-label">{{ msg.fields.validUntil }}</span>
                         <input
                             type="text"
                             class="bve-input bve-input--readonly"
-                            :value="formatDateDE(form.validUntil) || 'offen'"
+                            :value="validUntilDisplay"
                             disabled
                         />
-                        <span class="bve-field-hint">
-                            wird beim Publish einer Nachfolge-Version automatisch gesetzt
-                        </span>
+                        <span class="bve-field-hint">{{ msg.editor.validUntilHint }}</span>
                     </label>
                 </div>
 
                 <div class="bve-section-label bve-section-label--top">
-                    <span>Marketing</span>
+                    <span>{{ msg.editor.sectionMarketing }}</span>
                 </div>
                 <label class="bve-toggle-row">
                     <input
@@ -130,25 +127,25 @@
                         :disabled="locked"
                         @change="onMarketedToggle"
                     />
-                    <span class="bve-toggle-label">Im Public-Catalog vermarkten</span>
+                    <span class="bve-toggle-label">{{ msg.editor.marketed }}</span>
                 </label>
 
                 <div class="bve-section-label bve-section-label--top">
-                    <span>Change-Note</span>
-                    <span class="bve-section-count">Pflicht beim Publish</span>
+                    <span>{{ msg.editor.sectionChangeNote }}</span>
+                    <span class="bve-section-count">{{ msg.editor.changeNoteRequired }}</span>
                 </div>
                 <textarea
                     class="bve-textarea"
                     rows="2"
                     :value="form.changeNote"
                     :disabled="locked"
-                    placeholder="z. B. Add WhatsApp + Preisanpassung +4 €"
+                    :placeholder="msg.editor.changeNotePlaceholder"
                     @input="onChangeNoteInput"
                 />
 
                 <div class="bve-section-label bve-section-label--top">
-                    <span>Kompatibel mit Plänen</span>
-                    <span class="bve-section-count">{{ form.planIds.length }} ausgewählt</span>
+                    <span>{{ msg.fields.planCompat }}</span>
+                    <span class="bve-section-count">{{ selectedCountText }}</span>
                 </div>
                 <BundlePlanCompatPicker
                     :plans="plans"
@@ -172,16 +169,16 @@
                 :disabled="saving || !hasChanges"
                 @click="onReset"
             >
-                Zurücksetzen
+                {{ common.reset }}
             </button>
             <button
                 type="button"
                 class="bve-btn bve-btn--primary"
                 :disabled="!canSave || saving"
-                :title="!canSave ? 'Form ist invalide oder unverändert' : 'Änderungen speichern'"
+                :title="!canSave ? msg.editor.saveDisabledTooltip : msg.editor.saveTooltip"
                 @click="onSave"
             >
-                {{ saving ? 'Speichern …' : 'Speichern' }}
+                {{ saving ? common.saving : common.save }}
             </button>
         </div>
         <div v-if="saveError" class="bve-error">
@@ -206,7 +203,9 @@ import BundlePlanCompatPicker from './BundlePlanCompatPicker.vue';
 import BundleQuotasEditor from './BundleQuotasEditor.vue';
 import BundleStatusBanner from './BundleStatusBanner.vue';
 import type { QuotaMeta } from './catalog-i18n.js';
-import { bundleVersionStatus, findBundlePlanOverlap, formatDateDE } from './bundle-version-status';
+import { bundleVersionStatus, findBundlePlanOverlap, formatDate } from './bundle-version-status';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
 
 // BundleVersionInlineEditor — orchestrates the five sub-components (status
 // banner + features editor + quotas editor + pricing/validity block +
@@ -262,6 +261,10 @@ const emit = defineEmits<{
 
 const PRICE_RE = /^\d+(\.\d{1,2})?$/;
 
+const msg = useSaMessages('bundles');
+const common = useSaMessages('common');
+const { locale } = useSuperAdminI18n();
+
 function buildForm(v: BundleVersionRow): Form {
     return {
         features: [...v.features],
@@ -307,20 +310,33 @@ const monthlyEquivalent = computed(() => {
     return (y / 12).toFixed(2);
 });
 
+const yearlyEquivalentText = computed(() =>
+    formatMessage(msg.value.editor.yearlyEquivalent, { amount: monthlyEquivalent.value }),
+);
+const savingsText = computed(() =>
+    formatMessage(msg.value.editor.savings, { percent: savingsPercent.value ?? 0 }),
+);
+const selectedCountText = computed(() =>
+    formatMessage(msg.value.editor.selectedCount, { count: form.planIds.length }),
+);
+const validUntilDisplay = computed(
+    () => formatDate(form.validUntil, locale.value) || msg.value.fields.validUntilOpen,
+);
+
 // ── Validation ─────────────────────────────────────────────
 const validFromError = computed<string | null>(() => {
     if (locked.value) return null;
-    if (!form.validFrom) return 'Gültig ab ist Pflicht.';
+    if (!form.validFrom) return msg.value.validation.validFromRequired;
     return null;
 });
 
 const priceError = computed<string | null>(() => {
     if (locked.value) return null;
     if (form.monthlyNet && !PRICE_RE.test(form.monthlyNet)) {
-        return 'Monatspreis: Dezimal mit max. 2 Nachkommastellen.';
+        return msg.value.validation.monthlyPriceFormat;
     }
     if (form.yearlyNet && !PRICE_RE.test(form.yearlyNet)) {
-        return 'Jahrespreis: Dezimal mit max. 2 Nachkommastellen.';
+        return msg.value.validation.yearlyPriceFormat;
     }
     return null;
 });

package/src/components/bundle-editor/BundleVersionStrip.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="bv-vstrip">
-        <div class="bv-vstrip-label">Versionen</div>
+        <div class="bv-vstrip-label">{{ msg.versionStrip.label }}</div>
         <div class="bv-vstrip-tabs">
             <button
                 v-for="v in sortedVersions"
@@ -8,20 +8,23 @@
                 type="button"
                 class="bv-vtab"
                 :class="[`bv-vtab-${statusOf(v)}`, { 'bv-vtab-current': v.id === modelValue }]"
-                :title="BUNDLE_STATUS_META[statusOf(v)].tooltip"
+                :title="statusMetaOf(v).tooltip"
                 @click="$emit('update:modelValue', v.id)"
             >
                 <span class="bv-vtab-name">v{{ v.version }}</span>
                 <span :class="['bv-vtab-status', statusOf(v)]">
-                    {{ BUNDLE_STATUS_META[statusOf(v)].label }}
+                    {{ statusMetaOf(v).label }}
                 </span>
                 <span class="bv-vtab-dates">
-                    {{ formatDateDE(v.validFrom) }}
-                    <template v-if="v.validUntil"> – {{ formatDateDE(v.validUntil) }}</template>
-                    <template v-else> – offen</template>
+                    {{ formatDate(v.validFrom, locale) }}
+                    <template v-if="v.validUntil">
+                        – {{ formatDate(v.validUntil, locale) }}</template
+                    >
+                    <template v-else> – {{ msg.fields.validUntilOpen }}</template>
                 </span>
                 <span class="bv-vtab-price">
-                    {{ v.monthlyNet ?? '—' }}<template v-if="v.monthlyNet"> €</template> / Mo
+                    {{ v.monthlyNet ?? '—' }}<template v-if="v.monthlyNet"> €</template>
+                    {{ msg.versionStrip.perMonth }}
                 </span>
             </button>
             <button
@@ -30,8 +33,8 @@
                 :disabled="!canAddVersion"
                 :title="
                     canAddVersion
-                        ? 'Neue, zukünftige Version anlegen'
-                        : 'Bundle hat bereits eine Draft-Version — erst publishen oder verwerfen'
+                        ? msg.versionStrip.addTooltip
+                        : msg.versionStrip.addDisabledTooltip
                 "
                 @click="$emit('addVersion')"
             >
@@ -45,7 +48,7 @@
                 >
                     <path d="M12 5v14M5 12h14" />
                 </svg>
-                <span>Neue Version</span>
+                <span>{{ msg.versionStrip.addVersion }}</span>
             </button>
         </div>
     </div>
@@ -56,11 +59,13 @@ import { computed } from 'vue';
 import type { BundleVersionRow } from '@saasicat/types';
 
 import {
-    BUNDLE_STATUS_META,
+    bundleStatusMeta,
     bundleVersionStatus,
     bundleVersionsSorted,
-    formatDateDE,
+    formatDate,
+    type BundleStatusMeta,
 } from './bundle-version-status';
+import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
 
 // BundleVersionStrip — tab bar across all versions of a bundle, modeled on
 // the plan simulation (saasadminui/project/bundles.jsx → BundleVersionStrip).
@@ -82,6 +87,9 @@ defineEmits<{
     (e: 'addVersion'): void;
 }>();
 
+const msg = useSaMessages('bundles');
+const { locale } = useSuperAdminI18n();
+
 const sortedVersions = computed(() => bundleVersionsSorted(props.versions));
 
 const canAddVersion = computed(() => !props.versions.some((v) => v.publishedAt === null));
@@ -89,6 +97,10 @@ const canAddVersion = computed(() => !props.versions.some((v) => v.publishedAt =
 function statusOf(v: BundleVersionRow) {
     return bundleVersionStatus(v, props.now);
 }
+
+function statusMetaOf(v: BundleVersionRow): BundleStatusMeta {
+    return bundleStatusMeta(statusOf(v), locale.value);
+}
 </script>
 
 <style scoped>

package/src/components/bundle-editor/bundle-version-status.ts

@@ -6,6 +6,9 @@
 
 import type { BundleVersionRow, PlanVersionRow } from '@saasicat/types';
 
+import { SA_INTL_LOCALES, type SaLocale } from '../../client/i18n/locale.js';
+import { bundlesMessages } from '../../client/i18n/messages/bundles.js';
+
 /** UI lifecycle status of a single BundleVersion. */
 export type BundleVersionUiStatus = 'draft' | 'live' | 'scheduled' | 'superseded';
 
@@ -51,34 +54,23 @@ export interface BundleStatusMeta {
     tooltip: string;
 }
 
-export const BUNDLE_STATUS_META: Record<BundleAggregateStatus, BundleStatusMeta> = {
-    draft: {
-        label: 'Draft',
-        cls: 'draft',
-        tooltip: 'Noch nicht veröffentlicht — frei editierbar',
-    },
-    live: {
-        label: 'Live',
-        cls: 'live',
-        tooltip: 'Aktive Version · verkaufbar · read-only (laufende Verträge)',
-    },
-    scheduled: {
-        label: 'Geplant',
-        cls: 'scheduled',
-        tooltip: 'Zukünftig aktiv · noch nicht verkaufbar · frei editierbar',
-    },
-    superseded: {
-        label: 'Abgelöst',
-        cls: 'supersed',
-        tooltip: 'Durch neue Version ersetzt · Bestand bleibt',
-    },
-    retired: {
-        label: 'Retired',
-        cls: 'supersed',
-        tooltip: 'Bundle-Stamm wurde soft-deleted',
-    },
+const BUNDLE_STATUS_CLASS: Record<BundleAggregateStatus, BundleStatusMeta['cls']> = {
+    draft: 'draft',
+    live: 'live',
+    scheduled: 'scheduled',
+    superseded: 'supersed',
+    retired: 'supersed',
 };
 
+/** Label, chip class and tooltip for a status in the given UI locale. */
+export function bundleStatusMeta(
+    status: BundleAggregateStatus,
+    locale: SaLocale,
+): BundleStatusMeta {
+    const texts = bundlesMessages[locale].status[status];
+    return { label: texts.label, cls: BUNDLE_STATUS_CLASS[status], tooltip: texts.tooltip };
+}
+
 /**
  * Sorts the versions of a bundle line ascending by
  * `validFrom` (drafts without validFrom go to the end).
@@ -154,11 +146,19 @@ export function findBundlePlanOverlap(
     return { features, quotas, hasAny: features.length > 0 || quotas.length > 0 };
 }
 
-/** ISO `YYYY-MM-DD` → `DD.MM.YYYY` for UI display; null/empty → '—'. */
-export function formatDateDE(iso: string | null | undefined): string {
+/**
+ * ISO `YYYY-MM-DD` → numeric date in the UI locale; null/empty → '—'.
+ * Formatted in UTC so a calendar day never shifts across time zones.
+ */
+export function formatDate(iso: string | null | undefined, locale: SaLocale): string {
     if (!iso) return '—';
     const day = iso.slice(0, 10);
     const [y, m, d] = day.split('-');
     if (!y || !m || !d) return iso;
-    return `${d}.${m}.${y}`;
+    return new Date(`${day}T00:00:00Z`).toLocaleDateString(SA_INTL_LOCALES[locale], {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        timeZone: 'UTC',
+    });
 }