From 62a7eb5f2ec002558650aefa0115b390fb42c87c Mon Sep 17 00:00:00 2001
From: Reto Aebersold <aeby@substyle.ch>
Date: Mon, 4 Dec 2023 15:44:52 +0100
Subject: [PATCH] chore: translations

---
 .../onboarding/OrganisationAddress.vue        | 16 ++--
 .../components/onboarding/PersonalAddress.vue | 18 ++--
 .../pages/onboarding/vv/CheckoutAddress.vue   | 94 +++++++++++++------
 .../pages/onboarding/vv/CheckoutComplete.vue  | 27 ++++--
 client/src/stores/user.ts                     | 13 +++
 5 files changed, 113 insertions(+), 55 deletions(-)

diff --git a/client/src/components/onboarding/OrganisationAddress.vue b/client/src/components/onboarding/OrganisationAddress.vue
index 02bf4004..d0f4d2fd 100644
--- a/client/src/components/onboarding/OrganisationAddress.vue
+++ b/client/src/components/onboarding/OrganisationAddress.vue
@@ -34,7 +34,7 @@ const orgAddress = computed({
         for="company-name"
         class="block text-sm font-medium leading-6 text-gray-900"
       >
-        Name
+        {{ $t("a.Name") }}
       </label>
       <div class="mt-2">
         <input
@@ -47,12 +47,12 @@ const orgAddress = computed({
         />
       </div>
     </div>
-    <div class="sm:col-span-5">
+    <div class="sm:col-span-4">
       <label
         for="company-street-address"
         class="block text-sm font-medium leading-6 text-gray-900"
       >
-        Strasse
+        {{ $t("a.Strasse") }}
       </label>
       <div class="mt-2">
         <input
@@ -67,12 +67,12 @@ const orgAddress = computed({
       </div>
     </div>
 
-    <div class="sm:col-span-1">
+    <div class="sm:col-span-2">
       <label
         for="company-street-number"
         class="block text-sm font-medium leading-6 text-gray-900"
       >
-        Hausnummmer
+        {{ $t("a.Hausnummmer") }}
       </label>
       <div class="mt-2">
         <input
@@ -90,7 +90,7 @@ const orgAddress = computed({
         for="company-postal-code"
         class="block text-sm font-medium leading-6 text-gray-900"
       >
-        PLZ
+        {{ $t("a.PLZ") }}
       </label>
       <div class="mt-2">
         <input
@@ -110,7 +110,7 @@ const orgAddress = computed({
         for="company-city"
         class="block text-sm font-medium leading-6 text-gray-900"
       >
-        Ort
+        {{ $t("a.Ort") }}
       </label>
       <div class="mt-2">
         <input
@@ -130,7 +130,7 @@ const orgAddress = computed({
         for="company-country"
         class="block text-sm font-medium leading-6 text-gray-900"
       >
-        Land
+        {{ $t("a.Land") }}
       </label>
       <div class="mt-2">
         <select
diff --git a/client/src/components/onboarding/PersonalAddress.vue b/client/src/components/onboarding/PersonalAddress.vue
index f503e613..0dedbbf5 100644
--- a/client/src/components/onboarding/PersonalAddress.vue
+++ b/client/src/components/onboarding/PersonalAddress.vue
@@ -32,7 +32,7 @@ const address = computed({
   <div class="my-10 grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-6">
     <div class="sm:col-span-3">
       <label for="first-name" class="block text-sm font-medium leading-6 text-gray-900">
-        Vorname
+        {{ $t("a.Vorname") }}
       </label>
       <div class="mt-2">
         <input
@@ -49,7 +49,7 @@ const address = computed({
 
     <div class="sm:col-span-3">
       <label for="last-name" class="block text-sm font-medium leading-6 text-gray-900">
-        Name
+        {{ $t("a.Nachname") }}
       </label>
       <div class="mt-2">
         <input
@@ -64,12 +64,12 @@ const address = computed({
       </div>
     </div>
 
-    <div class="sm:col-span-5">
+    <div class="sm:col-span-4">
       <label
         for="street-address"
         class="block text-sm font-medium leading-6 text-gray-900"
       >
-        Strasse
+        {{ $t("a.Strasse") }}
       </label>
       <div class="mt-2">
         <input
@@ -84,12 +84,12 @@ const address = computed({
       </div>
     </div>
 
-    <div class="sm:col-span-1">
+    <div class="sm:col-span-2">
       <label
         for="street-number"
         class="block text-sm font-medium leading-6 text-gray-900"
       >
-        Hausnummmer
+        {{ $t("a.Hausnummmer") }}
       </label>
       <div class="mt-2">
         <input
@@ -108,7 +108,7 @@ const address = computed({
         for="postal-code"
         class="block text-sm font-medium leading-6 text-gray-900"
       >
-        PLZ
+        {{ $t("a.PLZ") }}
       </label>
       <div class="mt-2">
         <input
@@ -125,7 +125,7 @@ const address = computed({
 
     <div class="sm:col-span-5">
       <label for="city" class="block text-sm font-medium leading-6 text-gray-900">
-        Ort
+        {{ $t("a.Ort") }}
       </label>
       <div class="mt-2">
         <input
@@ -142,7 +142,7 @@ const address = computed({
 
     <div class="col-span-full">
       <label for="country" class="block text-sm font-medium leading-6 text-gray-900">
-        Land
+        {{ $t("a.Land") }}
       </label>
       <div class="mt-2">
         <select
diff --git a/client/src/pages/onboarding/vv/CheckoutAddress.vue b/client/src/pages/onboarding/vv/CheckoutAddress.vue
index 030a3500..dede2509 100644
--- a/client/src/pages/onboarding/vv/CheckoutAddress.vue
+++ b/client/src/pages/onboarding/vv/CheckoutAddress.vue
@@ -9,6 +9,7 @@ import { itPost, itPut } from "@/fetchHelpers";
 import { useEntities } from "@/services/onboarding";
 import { useDebounceFn, useFetch } from "@vueuse/core";
 import { useRoute } from "vue-router";
+import { useTranslation } from "i18next-vue";
 
 type BillingAddressType = {
   first_name: string;
@@ -114,61 +115,63 @@ const formErrors = ref<FormErrors>({
   company: [],
 });
 
+const { t } = useTranslation();
+
 function validateAddress() {
   formErrors.value.personal = [];
   formErrors.value.company = [];
 
   if (!address.value.first_name) {
-    formErrors.value.personal.push("Vorname");
+    formErrors.value.personal.push(t("a.Vorname"));
   }
 
   if (!address.value.last_name) {
-    formErrors.value.personal.push("Nachname");
+    formErrors.value.personal.push(t("a.Nachname"));
   }
 
   if (!address.value.street) {
-    formErrors.value.personal.push("Strasse");
+    formErrors.value.personal.push(t("a.Strasse"));
   }
 
   if (!address.value.street_number) {
-    formErrors.value.personal.push("Hausnummer");
+    formErrors.value.personal.push(t("a.Hausnummmer"));
   }
 
   if (!address.value.postal_code) {
-    formErrors.value.personal.push("Postleitzahl");
+    formErrors.value.personal.push(t("a.PLZ"));
   }
 
   if (!address.value.city) {
-    formErrors.value.personal.push("Ort");
+    formErrors.value.personal.push(t("a.Ort"));
   }
 
   if (!address.value.country) {
-    formErrors.value.personal.push("Land");
+    formErrors.value.personal.push(t("a.Land"));
   }
 
   if (useCompanyAddress.value) {
     if (!address.value.company_name) {
-      formErrors.value.company.push("Name");
+      formErrors.value.company.push(t("a.Name"));
     }
 
     if (!address.value.company_street) {
-      formErrors.value.company.push("Strasse");
+      formErrors.value.company.push(t("a.Strasse"));
     }
 
     if (!address.value.company_street_number) {
-      formErrors.value.company.push("Hausnummer");
+      formErrors.value.company.push(t("a.Hausnummmer"));
     }
 
     if (!address.value.company_postal_code) {
-      formErrors.value.company.push("Postleitzahl");
+      formErrors.value.company.push(t("a.PLZ"));
     }
 
     if (!address.value.company_city) {
-      formErrors.value.company.push("Ort");
+      formErrors.value.company.push(t("a.Ort"));
     }
 
     if (!address.value.company_country) {
-      formErrors.value.company.push("Land");
+      formErrors.value.company.push(t("a.Land"));
     }
   }
 }
@@ -201,29 +204,47 @@ const executePayment = () => {
 <template>
   <WizardPage :step="2">
     <template #content>
-      <h2 class="my-10">Lehrgang kaufen</h2>
+      <h2 class="my-10">{{ $t("a.Lehrgang kaufen") }}</h2>
       <p class="mb-4">
-        Der Preis für diesen Lehrgang beträgt
-        <b>300 CHF.</b>
-        Mit dem Kauf erhältst du Zugang auf den gesamten Kurs (inkl. Prüfung).
+        <i18next
+          :translation="$t('a.Der Preis für den Lehrgang {course} beträgt {price}.')"
+        >
+          <template #course>
+            <b>"{{ $t("a.Versicherungsvermittler/-in") }} ({{ user.languageName }})"</b>
+          </template>
+          <template #price>
+            <b class="whitespace-nowrap">300 CHF</b>
+          </template>
+        </i18next>
+        {{
+          $t("a.Mit dem Kauf erhältst du Zugang auf den gesamten Kurs (inkl. Prüfung).")
+        }}
+      </p>
+      <p>
+        {{ $t("a.Hier kannst du ausschliesslich mit einer Kreditkarte bezahlen.") }}
       </p>
-      <p>Hier kannst du ausschliesslich mit einer Kreditkarte bezahlen.</p>
 
       <p v-if="paymentError" class="text-bold mt-12 text-lg text-red-700">
-        Fehler bei der Zahlung. Bitte versuche es erneut oder
-        <a href="mailto:help@vbv.ch" class="underline">kontaktiere uns</a>
+        {{
+          $t("a.Fehler bei der Zahlung. Bitte versuche es erneut oder kontaktiere uns")
+        }}:
+        <a href="mailto:help@vbv.ch" class="underline">help@vbv.ch</a>
       </p>
 
-      <h3 class="mb-4 mt-10">Adresse</h3>
+      <h3 class="mb-4 mt-10">{{ $t("a.Adresse") }}</h3>
       <p>
-        Um die Zahlung vornehmen zu können, benötigen wir deine Privatadresse. Optional
-        kannst du die Rechnungsadresse deiner Gesellschaft hinzufügen.
+        {{
+          $t(
+            "a.Um die Zahlung vornehmen zu können, benötigen wir deine Privatadresse. Optional kannst du die Rechnungsadresse deiner Gesellschaft hinzufügen."
+          )
+        }}
       </p>
 
       <PersonalAddress v-model="address" />
 
       <p v-if="formErrors.personal.length" class="mb-10 text-red-700">
-        Bitte folgende Felder ausfüllen: {{ formErrors.personal.join(", ") }}
+        {{ $t("a.Bitte folgende Felder ausfüllen") }}:
+        {{ formErrors.personal.join(", ") }}
       </p>
 
       <button
@@ -232,9 +253,13 @@ const executePayment = () => {
         @click="useCompanyAddress = true"
       >
         <template v-if="userOrganisationName">
-          {{ `Rechnungsadresse von ${userOrganisationName} hinzufügen` }}
+          {{
+            $t("a.Rechnungsadresse von {organisation} hinzufügen", {
+              organisation: userOrganisationName,
+            })
+          }}
         </template>
-        <template v-else>Rechnungsadresse hinzufügen</template>
+        <template v-else>{{ $t("a.Rechnungsadresse hinzufügen") }}</template>
       </button>
 
       <transition
@@ -248,14 +273,21 @@ const executePayment = () => {
         <div v-if="useCompanyAddress">
           <div class="flex items-center justify-between">
             <h3 v-if="userOrganisationName">
-              {{ `Rechnungsadresse von ${userOrganisationName}` }}
+              {{
+                $t("a.Rechnungsadresse von {organisation}", {
+                  organisation: userOrganisationName,
+                })
+              }}
             </h3>
-            <h3 v-else>Rechnungsadresse</h3>
-            <button class="underline" @click="removeCompanyAddress">Entfernen</button>
+            <h3 v-else>{{ $t("a.Rechnungsadresse") }}</h3>
+            <button class="underline" @click="removeCompanyAddress">
+              {{ $t("a.Entfernen") }}
+            </button>
           </div>
           <OrganisationAddress v-model="address" />
           <p v-if="formErrors.company.length" class="text-red-700">
-            Bitte folgende Felder ausfüllen: {{ formErrors.company.join(", ") }}
+            {{ $t("a.Bitte folgende Felder ausfüllen") }}:
+            {{ formErrors.company.join(", ") }}
           </p>
         </div>
       </transition>
@@ -270,7 +302,7 @@ const executePayment = () => {
         {{ $t("general.back") }}
       </router-link>
       <button class="btn-blue flex items-center" @click="executePayment">
-        Mit Kreditkarte bezahlen
+        {{ $t("a.Mit Kreditkarte bezahlen") }}
         <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
       </button>
     </template>
diff --git a/client/src/pages/onboarding/vv/CheckoutComplete.vue b/client/src/pages/onboarding/vv/CheckoutComplete.vue
index 924c208e..03812f8a 100644
--- a/client/src/pages/onboarding/vv/CheckoutComplete.vue
+++ b/client/src/pages/onboarding/vv/CheckoutComplete.vue
@@ -6,7 +6,7 @@ const user = useUserStore();
 
 <template>
   <div class="flex flex-grow flex-col items-center gap-y-8 p-16">
-    <h1 class="my-10">Gratuliere!</h1>
+    <h1 class="my-10">{{ $t("a.Gratuliere!") }}</h1>
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="472"
@@ -22,16 +22,29 @@ const user = useUserStore();
       />
     </svg>
     <p class="w-128 text-center">
-      Die Zahlung für den Lehrgang «Versicherungsvermittler/-in» wurde erfolgreich
-      ausgeführt.
+      <i18next
+        :translation="
+          $t('a.Die Zahlung für den Lehrgang «{course}» wurde erfolgreich ausgeführt.')
+        "
+      >
+        <template #course>
+          {{ $t("a.Versicherungsvermittler/-in") }} ({{ user.languageName }})
+        </template>
+      </i18next>
     </p>
     <p class="w-128 text-center">
-      Wir haben per E-Mail eine Bestätigung an
-      <b>{{ user.email }}</b>
-      geschickt.
+      <i18next
+        :translation="
+          $t('a.Wir haben per E-Mail eine Bestätigung an {email} geschickt.')
+        "
+      >
+        <template #email>
+          <b>{{ user.email }}</b>
+        </template>
+      </i18next>
     </p>
     <router-link to="/" class="btn-blue flex items-center">
-      Mit dem Lehrgang starten
+      {{ $t("a.Jetzt mit Lehrgang starten") }}
     </router-link>
   </div>
 </template>
diff --git a/client/src/stores/user.ts b/client/src/stores/user.ts
index 7951978b..1c7c41c4 100644
--- a/client/src/stores/user.ts
+++ b/client/src/stores/user.ts
@@ -86,6 +86,19 @@ export const useUserStore = defineStore({
     getFullName(): string {
       return `${this.first_name} ${this.last_name}`.trim();
     },
+    languageName(): string {
+      if (this.language === "de") {
+        return "Deutsch";
+      }
+      if (this.language === "fr") {
+        return "Français";
+      }
+      if (this.language === "it") {
+        return "Italiano";
+      }
+
+      return this.language;
+    },
   },
   actions: {
     handleLogin(username: string, password: string, next = "/") {