ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: translations

This commit is contained in:
Reto Aebersold 2023-12-04 12:06:43 +01:00 committed by Christian Cueni
parent a282427f24
commit 1ac67f9ce2
12 changed files with 105 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/components/onboarding/OrganisationAddress.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from "vue"; import { computed } from "vue";
import { useEntities } from "@/services/onboarding";
const props = defineProps<{ const props = defineProps<{
modelValue: { modelValue: {
@ -14,6 +15,8 @@ const props = defineProps<{
const emit = defineEmits(["update:modelValue"]); const emit = defineEmits(["update:modelValue"]);
const { countries } = useEntities();
const orgAddress = computed({ const orgAddress = computed({
get() { get() {
return props.modelValue; return props.modelValue;
@ -138,9 +141,9 @@ const orgAddress = computed({
autocomplete="country-name" autocomplete="country-name"
class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6" class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
> >
<option>Schweiz</option> <option v-for="country in countries" :key="country.id" :value="country.id">
<option>Deutschland</option> {{ country.name }}
<option>Österreich</option> </option>
</select> </select>
</div> </div>
</div> </div>

13
client/src/components/onboarding/WizardSidePanel.vue
View File

@ -90,9 +90,16 @@ async function changeLocale(language: AvailableLanguages) {
/> />
</svg> </svg>
<div> <div>
Hast du Fragen? Schau dir unsere <i18next
<a class="underline" href="#">FAQ</a> :translation="
an oder kontaktiere uns: $t('a.Hast du Fragen? Schau dir unsere FAQ an oder kontaktiere uns')
"
>
<template #faq>
<a class="underline" href="#">FAQ</a>
</template>
</i18next>
:
<a class="underline" href="mailto:help@vbv.ch">help@vbv.ch</a> <a class="underline" href="mailto:help@vbv.ch">help@vbv.ch</a>
</div> </div>
</div> </div>

4
client/src/pages/UKStartPage.vue
View File

@ -3,12 +3,12 @@
<template> <template>
<main class="bg-gray-200 lg:px-12 lg:py-12"> <main class="bg-gray-200 lg:px-12 lg:py-12">
<div class="container-medium"> <div class="container-medium">
<h2 class="mb-8 text-blue-900">Überbetriebliche Kurse</h2> <h2 class="mb-8 text-blue-900">{{ $t("a.Überbetriebliche Kurse") }}</h2>
<router-link <router-link
class="btn-primary" class="btn-primary"
:to="{ name: 'accountCreate', params: { courseType: 'uk' } }" :to="{ name: 'accountCreate', params: { courseType: 'uk' } }"
> >
Jetzt mit Lehrgang starten {{ $t("a.Jetzt mit Lehrgang starten") }}
</router-link> </router-link>
</div> </div>
</main> </main>

4
client/src/pages/VVStartPage.vue
View File

@ -3,12 +3,12 @@
<template> <template>
<main class="bg-gray-200 lg:px-12 lg:py-12"> <main class="bg-gray-200 lg:px-12 lg:py-12">
<div class="container-medium"> <div class="container-medium">
<h2 class="mb-8 text-blue-900">Versicherungsvermittler/-in</h2> <h2 class="mb-8 text-blue-900">{{ $t("a.Versicherungsvermittler/-in") }}</h2>
<router-link <router-link
class="btn-primary" class="btn-primary"
:to="{ name: 'accountCreate', params: { courseType: 'vv' } }" :to="{ name: 'accountCreate', params: { courseType: 'vv' } }"
> >
Jetzt mit Lehrgang starten {{ $t("a.Jetzt mit Lehrgang starten") }}
</router-link> </router-link>
</div> </div>
</main> </main>

16
client/src/pages/onboarding/AccountConfirm.vue
View File

@ -9,22 +9,26 @@ const userStore = useUserStore();
<template> <template>
<WizardPage :step="0.5"> <WizardPage :step="0.5">
<template #content> <template #content>
<h2 class="my-10">Konto erstellen</h2> <h2 class="my-10">{{ $t("a.Konto erstellen") }}</h2>
<InfoBox color="text-green-500" icon="it-icon-check"> <InfoBox color="text-green-500" icon="it-icon-check">
<template #content> <template #content>
<p class="text-lg font-bold"> <p class="text-lg font-bold">
Du hast erfolgreich ein Konto für {{
<br /> $t("a.Du hast erfolgreich ein Konto für EMAIL erstellt.", {
{{ userStore.email }} erstellt. email: userStore.email,
})
}}
</p> </p>
</template> </template>
</InfoBox> </InfoBox>
<p class="text-lg font-bold">Mach nun weiter mit dem nächsten Schritt.</p> <p class="text-lg font-bold">
{{ $t("a.Mach nun weiter mit dem nächsten Schritt.") }}
</p>
</template> </template>
<template #footer> <template #footer>
<router-link :to="{ name: 'accountProfile' }" class="btn-blue flex items-center"> <router-link :to="{ name: 'accountProfile' }" class="btn-blue flex items-center">
Weiter {{ $t("general.next") }}
<it-icon-arrow-right class="it-icon ml-2 h-6 w-6" /> <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
</router-link> </router-link>
</template> </template>

22
client/src/pages/onboarding/AccountProfile.vue
View File

@ -61,23 +61,29 @@ const nextRoute = computed(() => {
<template> <template>
<WizardPage :step="1"> <WizardPage :step="1">
<template #content> <template #content>
<h2 class="my-10">Profil ergänzen</h2> <h2 class="my-10">{{ $t("a.Profil ergänzen") }}</h2>
<h3 class="mb-3">Gesellschaft</h3> <h3 class="mb-3">{{ $t("a.Gesellschaft") }}</h3>
<p class="mb-6 max-w-md hyphens-none"> <p class="mb-6 max-w-md hyphens-none">
Wähle hier den Namen der Gesellschaft aus, in der du arbeitest. So können dich {{
andere Personen einfacher finden. $t(
"a.Wähle hier den Namen der Gesellschaft aus, in der du arbeitest. So können dich andere Personen einfacher finden."
)
}}
</p> </p>
<ItDropdownSelect v-model="selectedOrganisation" :items="organisations" /> <ItDropdownSelect v-model="selectedOrganisation" :items="organisations" />
<div class="mt-16 flex flex-col justify-between gap-12 lg:flex-row lg:gap-24"> <div class="mt-16 flex flex-col justify-between gap-12 lg:flex-row lg:gap-24">
<div> <div>
<h3 class="mb-3">Profilbild</h3> <h3 class="mb-3">{{ $t("a.Profilbild") }}</h3>
<p class="mb-6 max-w-md hyphens-none"> <p class="mb-6 max-w-md hyphens-none">
Lade ein Profilbild hoch, damit dich andere Personen auf den ersten Blick {{
erkennen. $t(
"a.Lade ein Profilbild hoch, damit dich andere Personen auf den ersten Blick erkennen."
)
}}
</p> </p>
<div class="btn-primary relative inline-flex cursor-pointer items-center"> <div class="btn-primary relative inline-flex cursor-pointer items-center">
<input <input
@ -107,7 +113,7 @@ const nextRoute = computed(() => {
role="link" role="link"
@click="navigate" @click="navigate"
> >
Weiter {{ $t("general.next") }}
<it-icon-arrow-right class="it-icon ml-2 h-6 w-6" /> <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
</button> </button>
</router-link> </router-link>

14
client/src/pages/onboarding/AccountSetup.vue
View File

@ -14,17 +14,21 @@ const user = useUserStore();
<template> <template>
<WizardPage :step="0"> <WizardPage :step="0">
<template #content> <template #content>
<h2 class="my-10">Konto erstellen</h2> <h2 class="my-10">{{ $t("a.Konto erstellen") }}</h2>
<p class="mb-4">Damit du myVBV nutzen kannst, brauchst du ein Konto.</p> <p class="mb-4">
{{ $t("a.Damit du myVBV nutzen kannst, brauchst du ein Konto.") }}
</p>
<a <a
:href="`/sso/signup?course=${props.courseType}&lang=${user.language}`" :href="`/sso/signup?course=${props.courseType}&lang=${user.language}`"
class="btn-primary" class="btn-primary"
> >
Konto erstellen {{ $t("a.Konto erstellen") }}
</a> </a>
<p class="mb-4 mt-12">Hast du schon ein Konto?</p> <p class="mb-4 mt-12">{{ $t("a.Hast du schon ein Konto?") }}</p>
<a :href="`/sso/login?lang=${user.language}`" class="btn-secondary">Anmelden</a> <a :href="`/sso/login?lang=${user.language}`" class="btn-secondary">
{{ $t("a.Anmelden") }}
</a>
</template> </template>
</WizardPage> </WizardPage>
</template> </template>

37
client/src/pages/onboarding/WizardBase.vue
View File

@ -3,6 +3,7 @@ import WizardSidePanel from "@/components/onboarding/WizardSidePanel.vue";
import { computed } from "vue"; import { computed } from "vue";
import mood_uk from "@/assets/images/mood_uk.jpg"; import mood_uk from "@/assets/images/mood_uk.jpg";
import mood_vv from "@/assets/images/mood_vv.jpg"; import mood_vv from "@/assets/images/mood_vv.jpg";
import { useTranslation } from "i18next-vue";
const props = defineProps({ const props = defineProps({
courseType: { courseType: {
@ -11,26 +12,26 @@ const props = defineProps({
}, },
}); });
type CourseMetaType = { const { t } = useTranslation();
[key: string]: {
name: string;
imageUrl: string;
};
};
const courseMeta: CourseMetaType = {
uk: {
name: "Überbetriebliche Kurse",
imageUrl: mood_uk,
},
vv: {
name: "Versicherungs&shy;vermittler/&#8209;in",
imageUrl: mood_vv,
},
};
const courseData = computed(() => { const courseData = computed(() => {
return courseMeta[props.courseType]; if (props.courseType === "uk") {
return {
name: t("a.Überbetriebliche Kurse"),
imageUrl: mood_uk,
};
}
if (props.courseType === "vv") {
return {
name: t("a.Versicherungsvermittler/-in"),
imageUrl: mood_vv,
};
}
return {
name: "",
imageUrl: "",
};
}); });
</script> </script>

34
client/src/pages/onboarding/uk/SetupComplete.vue
View File

@ -3,20 +3,25 @@ import WizardPage from "@/components/onboarding/WizardPage.vue";
import InfoBox from "@/components/onboarding/InfoBox.vue"; import InfoBox from "@/components/onboarding/InfoBox.vue";
import { ref } from "vue"; import { ref } from "vue";
// This page will probably not be reached with a course session already assigned.
// This is just a placeholder for the future.
const courseSessionName = ref(""); const courseSessionName = ref("");
</script> </script>
<template> <template>
<WizardPage :step="2"> <WizardPage :step="2">
<template #content> <template #content>
<h2 class="my-10">An Durchführung teilnehmen</h2> <h2 class="my-10">{{ $t("a.An Durchführung teilnehmen") }}</h2>
<template v-if="courseSessionName"> <template v-if="courseSessionName">
<InfoBox color="text-green-500" icon="it-icon-check"> <InfoBox color="text-green-500" icon="it-icon-check">
<template #content> <template #content>
<p class="text-lg"> <p class="text-lg">
Super, nun ist alles bereit. Du bist der Durchführung «{{ {{
courseSessionName $t(
}}» zugewiesen und kannst mit dem Lehrgang starten. "a.Super, nun ist alles bereit. Du bist der Durchführung «{course}» zugewiesen und kannst mit dem Lehrgang starten.",
{ course: courseSessionName }
)
}}
</p> </p>
</template> </template>
</InfoBox> </InfoBox>
@ -25,15 +30,22 @@ const courseSessionName = ref("");
<InfoBox> <InfoBox>
<template #content> <template #content>
<p class="text-lg"> <p class="text-lg">
Aktuell bist du leider keiner Durchführung zugewiesen. {{ $t("a.Aktuell bist du leider keiner Durchführung zugewiesen.") }}
</p> </p>
</template> </template>
</InfoBox> </InfoBox>
<p> <p>
Damit du mit diesem Lehrgang starten kannst, musst du einer Durchführung <i18next
zugewiesen werden. Nimm dafür deinem üK-Verantwortlichen oder unserem :translation="
<a class="underline" href="mailto:help@vbv.ch">Support</a> $t(
Kontakt auf. 'a.Damit du mit diesem Lehrgang starten kannst, musst du einer Durchführung zugewiesen werden. Nimm dafür deinem üK-Verantwortlichen oder unserem {support} Kontakt auf.'
)
"
>
<template #support>
<a class="underline" href="mailto:help@vbv.ch">Support</a>
</template>
</i18next>
</p> </p>
</template> </template>
</template> </template>
@ -43,10 +55,10 @@ const courseSessionName = ref("");
class="btn-secondary flex items-center" class="btn-secondary flex items-center"
> >
<it-icon-arrow-left class="it-icon mr-2 h-6 w-6" /> <it-icon-arrow-left class="it-icon mr-2 h-6 w-6" />
Zurück {{ $t("general.back") }}
</router-link> </router-link>
<router-link v-if="courseSessionName" to="/" class="btn-blue flex items-center"> <router-link v-if="courseSessionName" to="/" class="btn-blue flex items-center">
Jetzt mit dem Lehrgang starten {{ $t("a.Jetzt mit Lehrgang starten") }}
<it-icon-arrow-right class="it-icon ml-2 h-6 w-6" /> <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
</router-link> </router-link>
</template> </template>

4
client/src/pages/onboarding/vv/CheckoutAddress.vue
View File

@ -68,7 +68,6 @@ const address = ref({
}); });
const useCompanyAddress = ref(false); const useCompanyAddress = ref(false);
const fetchBillingAddress = useFetch("/api/shop/billing-address/").json(); const fetchBillingAddress = useFetch("/api/shop/billing-address/").json();
const billingAddressData: Ref<BillingAddressType | null> = fetchBillingAddress.data; const billingAddressData: Ref<BillingAddressType | null> = fetchBillingAddress.data;
@ -191,6 +190,7 @@ const executePayment = () => {
itPost("/api/shop/vv/checkout/", { itPost("/api/shop/vv/checkout/", {
redirect_url: fullHost, redirect_url: fullHost,
address: address.value, address: address.value,
product: `vv-${user.language}`,
}).then((res) => { }).then((res) => {
console.log("Going to next page", res.next_step_url); console.log("Going to next page", res.next_step_url);
window.location.href = res.next_step_url; window.location.href = res.next_step_url;
@ -267,7 +267,7 @@ const executePayment = () => {
class="btn-secondary flex items-center" class="btn-secondary flex items-center"
> >
<it-icon-arrow-left class="it-icon mr-2 h-6 w-6" /> <it-icon-arrow-left class="it-icon mr-2 h-6 w-6" />
Zurück {{ $t("general.back") }}
</router-link> </router-link>
<button class="btn-blue flex items-center" @click="executePayment"> <button class="btn-blue flex items-center" @click="executePayment">
Mit Kreditkarte bezahlen Mit Kreditkarte bezahlen

4
client/src/router/__tests__/onboarding.spec.ts
View File

@ -41,7 +41,7 @@ describe("Onboarding", () => {
user.loggedIn = true; user.loggedIn = true;
user.organisation = 1; user.organisation = 1;
const mockNext = vi.fn(); const mockNext = vi.fn();
onboardingRedirect(routeLocation("accountConfirm", "uk"), START_LOCATION, mockNext); onboardingRedirect(routeLocation("accountProfile", "uk"), START_LOCATION, mockNext);
expect(mockNext).toHaveBeenCalledWith({ expect(mockNext).toHaveBeenCalledWith({
name: "setupComplete", name: "setupComplete",
params: { courseType: "uk" }, params: { courseType: "uk" },
@ -53,7 +53,7 @@ describe("Onboarding", () => {
user.loggedIn = true; user.loggedIn = true;
user.organisation = 1; user.organisation = 1;
const mockNext = vi.fn(); const mockNext = vi.fn();
onboardingRedirect(routeLocation("accountConfirm", "vv"), START_LOCATION, mockNext); onboardingRedirect(routeLocation("accountProfile", "vv"), START_LOCATION, mockNext);
expect(mockNext).toHaveBeenCalledWith({ expect(mockNext).toHaveBeenCalledWith({
name: "checkoutAddress", name: "checkoutAddress",
params: { courseType: "vv" }, params: { courseType: "vv" },

12
client/src/router/onboarding.ts
View File

@ -23,12 +23,12 @@ export async function onboardingRedirect(
return next({ name: "accountConfirm", params: to.params }); return next({ name: "accountConfirm", params: to.params });
} }
// Maybe we can skip the account setup steps if (to.name === "accountConfirm") {
if ( return next();
from === START_LOCATION && }
user.organisation &&
(to.name === "accountConfirm" || to.name === "accountProfile") // Maybe we can skip the profile step
) { if (from === START_LOCATION && user.organisation && to.name === "accountProfile") {
return next({ name: profileNextRoute(to.params.courseType), params: to.params }); return next({ name: profileNextRoute(to.params.courseType), params: to.params });
} }