@saasicat/ui-vue 0.4.0 → 0.6.0

package/src/components/dialogs/PromoCodeCreateDialog.vue

@@ -7,12 +7,8 @@
         <q-card class="pc-dlg">
             <q-card-section class="pc-dlg__head">
                 <div>
-                    <div class="pc-dlg__title">Neuer Promo-Code</div>
-                    <div class="pc-dlg__sub">
-                        {{
-                            subtitle ?? 'Code, Rabatt-Logik, Laufzeit und Plan-Zuordnung festlegen.'
-                        }}
-                    </div>
+                    <div class="pc-dlg__title">{{ msg.createDialog.title }}</div>
+                    <div class="pc-dlg__sub">{{ subtitle ?? msg.createDialog.subtitle }}</div>
                 </div>
                 <q-btn
                     class="pc-dlg__close"
@@ -28,15 +24,15 @@
             <q-card-section class="pc-dlg__body">
                 <!-- Section: Code & Discount -->
                 <div class="pc-section">
-                    <div class="pc-section__title">Code &amp; Rabatt</div>
+                    <div class="pc-section__title">{{ msg.form.sectionCodeDiscount }}</div>
                     <div class="pc-grid pc-grid--2">
                         <div class="pc-field">
-                            <div class="pc-field__label">Code</div>
+                            <div class="pc-field__label">{{ msg.form.codeLabel }}</div>
                             <div class="pc-code-input">
                                 <input
                                     v-model="form.code"
                                     class="pc-input pc-input--code"
-                                    placeholder="z. B. WELCOME10"
+                                    :placeholder="msg.form.codePlaceholder"
                                     @input="onCodeInput"
                                 />
                                 <button
@@ -44,19 +40,17 @@
                                     class="pc-btn-mini"
                                     @click="form.code = randomCode()"
                                 >
-                                    Zufall
+                                    {{ msg.form.codeRandom }}
                                 </button>
                             </div>
-                            <div class="pc-field__hint">
-                                Großbuchstaben, Zahlen, „-" und „_" · nach Anlage stabil
-                            </div>
+                            <div class="pc-field__hint">{{ msg.form.codeHint }}</div>
                         </div>
 
                         <div class="pc-field">
-                            <div class="pc-field__label">Rabatt-Typ</div>
+                            <div class="pc-field__label">{{ msg.form.valueTypeLabel }}</div>
                             <div class="pc-type-grid">
                                 <button
-                                    v-for="o in TYPE_OPTIONS"
+                                    v-for="o in typeOptions"
                                     :key="o.k"
                                     type="button"
                                     class="pc-type-opt"
@@ -72,7 +66,11 @@
 
                     <div class="pc-field" style="max-width: 280px">
                         <div class="pc-field__label">
-                            {{ form.valueType === 'PERCENT' ? 'Rabatt in %' : 'Rabatt in €' }}
+                            {{
+                                form.valueType === 'PERCENT'
+                                    ? msg.form.valuePercentLabel
+                                    : msg.form.valueAbsoluteLabel
+                            }}
                         </div>
                         <input
                             v-model.number="form.value"
@@ -86,10 +84,10 @@
 
                 <!-- Section: Validity & Duration -->
                 <div class="pc-section">
-                    <div class="pc-section__title">Gültigkeit &amp; Laufzeit</div>
+                    <div class="pc-section__title">{{ msg.form.sectionValidity }}</div>
 
                     <div v-if="plans.length > 0" class="pc-field">
-                        <div class="pc-field__label">Anwendbar auf Pläne</div>
+                        <div class="pc-field__label">{{ msg.form.plansLabel }}</div>
                         <div class="pc-plan-pick">
                             <button
                                 v-for="p in plans"
@@ -108,16 +106,20 @@
                             </button>
                         </div>
                         <div class="pc-field__hint">
-                            Leer = alle Pläne ({{ form.appliesToPlans.length }} ausgewählt)
+                            {{
+                                formatMessage(msg.form.plansHint, {
+                                    count: form.appliesToPlans.length,
+                                })
+                            }}
                         </div>
                     </div>
 
                     <div class="pc-grid pc-grid--2">
                         <div class="pc-field">
-                            <div class="pc-field__label">Laufzeit des Rabatts</div>
+                            <div class="pc-field__label">{{ msg.form.durationLabel }}</div>
                             <div class="pc-dur">
                                 <button
-                                    v-for="o in DURATION_OPTIONS"
+                                    v-for="o in durationOptions"
                                     :key="o.k"
                                     type="button"
                                     class="pc-dur-opt"
@@ -135,31 +137,35 @@
                                 min="1"
                                 style="margin-top: 8px; max-width: 120px"
                                 :placeholder="
-                                    form.durationType === 'MONTHS' ? 'Monate' : 'Perioden'
+                                    form.durationType === 'MONTHS'
+                                        ? msg.form.durationMonthsPlaceholder
+                                        : msg.form.durationCyclesPlaceholder
                                 "
                             />
                         </div>
 
                         <div class="pc-field">
-                            <div class="pc-field__label">Max. Einlösungen</div>
+                            <div class="pc-field__label">{{ msg.form.maxRedemptionsLabel }}</div>
                             <input
                                 v-model.number="form.maxRedemptions"
                                 class="pc-input"
                                 type="number"
                                 min="1"
-                                placeholder="leer = ∞"
+                                :placeholder="msg.form.maxRedemptionsPlaceholder"
                             />
-                            <div class="pc-field__hint">Leerlassen für unbegrenzt</div>
+                            <div class="pc-field__hint">
+                                {{ msg.form.maxRedemptionsHintCreate }}
+                            </div>
                         </div>
                     </div>
 
                     <div class="pc-grid pc-grid--2">
                         <div class="pc-field">
-                            <div class="pc-field__label">Gültig ab</div>
+                            <div class="pc-field__label">{{ msg.form.validFromLabel }}</div>
                             <input v-model="form.validFrom" class="pc-input" type="date" />
                         </div>
                         <div class="pc-field">
-                            <div class="pc-field__label">Gültig bis</div>
+                            <div class="pc-field__label">{{ msg.form.validUntilLabel }}</div>
                             <input v-model="form.validUntil" class="pc-input" type="date" />
                         </div>
                     </div>
@@ -167,23 +173,23 @@
 
                 <!-- Section: Campaign & Note -->
                 <div class="pc-section">
-                    <div class="pc-section__title">Kampagne &amp; Notizen</div>
+                    <div class="pc-section__title">{{ msg.form.sectionCampaign }}</div>
                     <div v-if="showCampaignTag" class="pc-field">
-                        <div class="pc-field__label">Kampagne (optional)</div>
+                        <div class="pc-field__label">{{ msg.form.campaignLabel }}</div>
                         <input
                             v-model="form.campaignTag"
                             class="pc-input"
-                            placeholder="z. B. Frühjahrs-Aktion 2026"
+                            :placeholder="msg.form.campaignPlaceholder"
                         />
-                        <div class="pc-field__hint">Gruppiert mehrere Codes optisch</div>
+                        <div class="pc-field__hint">{{ msg.form.campaignHint }}</div>
                     </div>
                     <div class="pc-field">
-                        <div class="pc-field__label">Notiz (intern)</div>
+                        <div class="pc-field__label">{{ msg.form.noteLabel }}</div>
                         <textarea
                             v-model="form.description"
                             class="pc-input"
                             rows="2"
-                            placeholder="Kontext, Quelle, Sales-Bezug — wird nicht an Kunden ausgespielt."
+                            :placeholder="msg.form.notePlaceholder"
                         />
                     </div>
                 </div>
@@ -199,45 +205,47 @@
                             :name="advancedOpen ? 'expand_more' : 'chevron_right'"
                             size="16px"
                         />
-                        Erweiterte Einschränkungen
+                        {{ msg.form.advancedToggle }}
                     </button>
                     <div v-if="advancedOpen" class="pc-advanced">
                         <div class="pc-grid pc-grid--2">
                             <div class="pc-field">
-                                <div class="pc-field__label">Nur für Abrechnungs-Zyklus</div>
+                                <div class="pc-field__label">{{ msg.form.billingCycleLabel }}</div>
                                 <select v-model="form.appliesToBilling" class="pc-input">
-                                    <option :value="undefined">Beide</option>
-                                    <option value="MONTHLY">Monatlich</option>
-                                    <option value="YEARLY">Jährlich</option>
+                                    <option :value="undefined">
+                                        {{ common.both }}
+                                    </option>
+                                    <option value="MONTHLY">{{ common.monthly }}</option>
+                                    <option value="YEARLY">{{ common.yearly }}</option>
                                 </select>
                             </div>
                             <div class="pc-field">
-                                <div class="pc-field__label">Mindest-Plan-Betrag (€ brutto)</div>
+                                <div class="pc-field__label">{{ msg.form.minAmountLabel }}</div>
                                 <input
                                     v-model.number="form.minimumPlanAmountGross"
                                     class="pc-input"
                                     type="number"
                                     min="0"
-                                    placeholder="leer = keine Schwelle"
+                                    :placeholder="msg.form.minAmountPlaceholder"
                                 />
                             </div>
                         </div>
                         <div class="pc-grid pc-grid--2">
                             <label class="pc-check">
                                 <input v-model="form.firstTimeCustomersOnly" type="checkbox" />
-                                <span>Nur Neukunden</span>
+                                <span>{{ msg.form.firstTimeOnly }}</span>
                             </label>
                             <label class="pc-check">
                                 <input v-model="form.allowZeroInvoice" type="checkbox" />
-                                <span>0-€-Rechnung zulassen</span>
+                                <span>{{ msg.form.allowZeroInvoice }}</span>
                             </label>
                         </div>
                         <div class="pc-field">
-                            <div class="pc-field__label">Erlös-Minderungs-Konto (Buchhaltung)</div>
+                            <div class="pc-field__label">{{ msg.form.revenueAccountLabel }}</div>
                             <input
                                 v-model="form.revenueDeductionAccount"
                                 class="pc-input"
-                                placeholder="z. B. 8736"
+                                :placeholder="msg.form.revenueAccountPlaceholder"
                             />
                         </div>
                     </div>
@@ -245,7 +253,7 @@
 
                 <!-- Live preview -->
                 <div class="pc-preview">
-                    <div class="pc-preview__eyebrow">Vorschau im Catalog</div>
+                    <div class="pc-preview__eyebrow">{{ msg.form.previewEyebrow }}</div>
                     <div class="pc-preview__body">
                         <code class="pc-preview__code">{{ form.code || 'CODE' }}</code>
                         <span class="pc-preview__disc">{{ previewValue }}</span>
@@ -257,11 +265,11 @@
             </q-card-section>
 
             <q-card-actions align="right" class="pc-dlg__foot">
-                <q-btn flat label="Abbrechen" v-close-popup :disable="loading" />
+                <q-btn flat :label="common.cancel" v-close-popup :disable="loading" />
                 <q-btn
                     unelevated
                     color="primary"
-                    label="Anlegen"
+                    :label="common.create"
                     :loading="loading"
                     :disable="!isValid"
                     @click="onSubmit"
@@ -273,6 +281,8 @@
 
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type {
     PromoCodeCreatePayload,
     PromoCodeDurationType,
@@ -304,16 +314,29 @@ const emit = defineEmits<{
     (e: 'created'): void;
 }>();
 
-const TYPE_OPTIONS: ReadonlyArray<{ k: PromoCodeValueType; label: string; sub: string }> = [
-    { k: 'PERCENT', label: 'Prozent', sub: '−x %' },
-    { k: 'ABSOLUTE', label: 'Fester €', sub: '−x €' },
-];
+const msg = useSaMessages('promos');
+const common = useSaMessages('common');
+
+const typeOptions = computed<ReadonlyArray<{ k: PromoCodeValueType; label: string; sub: string }>>(
+    () => [
+        {
+            k: 'PERCENT',
+            label: msg.value.form.valueTypePercent,
+            sub: msg.value.form.valueTypePercentSub,
+        },
+        {
+            k: 'ABSOLUTE',
+            label: msg.value.form.valueTypeAbsolute,
+            sub: msg.value.form.valueTypeAbsoluteSub,
+        },
+    ],
+);
 
-const DURATION_OPTIONS: ReadonlyArray<{ k: PromoCodeDurationType; label: string }> = [
-    { k: 'ONCE', label: 'Einmalig' },
-    { k: 'MONTHS', label: 'N Monate' },
-    { k: 'BILLING_CYCLES', label: 'N Perioden' },
-];
+const durationOptions = computed<ReadonlyArray<{ k: PromoCodeDurationType; label: string }>>(() => [
+    { k: 'ONCE', label: msg.value.form.durationOnce },
+    { k: 'MONTHS', label: msg.value.form.durationMonths },
+    { k: 'BILLING_CYCLES', label: msg.value.form.durationBillingCycles },
+]);
 
 function emptyForm() {
     return {
@@ -378,17 +401,20 @@ const previewValue = computed(() => {
 
 const previewMeta = computed(() => {
     const parts: string[] = [];
-    if (form.durationType === 'ONCE') parts.push('einmalig');
-    else if (form.durationType === 'MONTHS') parts.push(`${form.durationValue || 0} Monate`);
-    else parts.push(`${form.durationValue || 0} Perioden`);
+    const count = form.durationValue || 0;
+    if (form.durationType === 'ONCE') parts.push(msg.value.form.previewOnce);
+    else if (form.durationType === 'MONTHS')
+        parts.push(formatMessage(msg.value.form.previewMonths, { count }));
+    else parts.push(formatMessage(msg.value.form.previewCycles, { count }));
     parts.push(
         form.appliesToPlans.length > 0
             ? form.appliesToPlans.join(', ')
             : props.plans.length > 0
-              ? 'alle Pläne'
-              : 'kein Plan-Filter',
+              ? msg.value.form.previewAllPlans
+              : msg.value.form.previewNoPlanFilter,
     );
-    if (form.maxRedemptions) parts.push(`max. ${form.maxRedemptions}`);
+    if (form.maxRedemptions)
+        parts.push(formatMessage(msg.value.form.previewMax, { count: form.maxRedemptions }));
     return parts.join(' · ');
 });
 
@@ -441,7 +467,7 @@ async function onSubmit() {
         error.value =
             (err as { response?: { data?: { message?: string } } }).response?.data?.message ??
             (err as Error).message ??
-            'Anlegen fehlgeschlagen';
+            common.value.createFailed;
     } finally {
         loading.value = false;
     }