Add logic/validation for cembra fields
This commit is contained in:
Daniel Egger
parent
b6e4f30b58
commit
42fd2f1377
|
|
@ -75,6 +75,13 @@ const setWithCompanyAddress = (value: boolean) => {
|
|||
|
||||
const withCembraInvoice = ref<boolean>(false);
|
||||
|
||||
function toggleCembraInvoice() {
|
||||
withCembraInvoice.value = !withCembraInvoice.value;
|
||||
if (!withCembraInvoice.value) {
|
||||
setWithCompanyAddress(false);
|
||||
}
|
||||
}
|
||||
|
||||
type FormErrors = {
|
||||
personal: string[];
|
||||
company: string[];
|
||||
|
|
@ -119,6 +126,16 @@ function validateAddress() {
|
|||
formErrors.value.personal.push(t("a.Land"));
|
||||
}
|
||||
|
||||
if (withCembraInvoice.value) {
|
||||
if (!address.value.phone_number) {
|
||||
formErrors.value.personal.push(t("a.Telefonnummer"));
|
||||
}
|
||||
|
||||
if (!address.value.birth_date) {
|
||||
formErrors.value.personal.push(t("a.Geburtsdatum"));
|
||||
}
|
||||
}
|
||||
|
||||
if (withCompanyAddress.value) {
|
||||
if (!address.value.organisation_detail_name) {
|
||||
formErrors.value.company.push(t("a.Name"));
|
||||
|
|
@ -240,64 +257,77 @@ const executePayment = async () => {
|
|||
</p>
|
||||
<PersonalAddress v-model="address" />
|
||||
|
||||
<p v-if="formErrors.personal.length" class="mb-10 text-red-700">
|
||||
{{ $t("a.Bitte folgende Felder ausfüllen") }}:
|
||||
{{ formErrors.personal.join(", ") }}
|
||||
</p>
|
||||
|
||||
<div class="flex flex-row items-center space-x-2 text-sm">
|
||||
<ItToggleSwitch
|
||||
data-cy="cembra-switch"
|
||||
:initially-switched-left="withCembraInvoice"
|
||||
@click="withCembraInvoice = !withCembraInvoice"
|
||||
@click="toggleCembraInvoice()"
|
||||
></ItToggleSwitch>
|
||||
<span :class="{ 'text-gray-700': !withCembraInvoice }">
|
||||
"TODO: Zahlung auf Rechnung/Cembra"
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button
|
||||
v-if="!withCompanyAddress"
|
||||
class="underline"
|
||||
data-cy="add-company-address"
|
||||
@click="setWithCompanyAddress(true)"
|
||||
>
|
||||
<template v-if="userOrganisationName">
|
||||
{{
|
||||
$t("a.Rechnungsadresse von {organisation} hinzufügen", {
|
||||
organisation: userOrganisationName,
|
||||
})
|
||||
}}
|
||||
</template>
|
||||
<template v-else>{{ $t("a.Rechnungsadresse hinzufügen") }}</template>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<transition
|
||||
enter-active-class="transition ease-out duration-100"
|
||||
enter-from-class="transform opacity-0 scale-y-95"
|
||||
enter-to-class="transform opacity-100 scale-y-100"
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
leave-from-class="transform opacity-100 scale-y-100"
|
||||
leave-to-class="transform opacity-0 scale-y-95"
|
||||
>
|
||||
<div v-if="withCompanyAddress">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 v-if="userOrganisationName">
|
||||
<section v-if="withCembraInvoice">
|
||||
<p class="mt-4">
|
||||
TODO: Bei Zahlung auf Rechnung/Cembra, wird immer auf deine Privatadresse
|
||||
verrechnet. Du musst zwinged deine Telefonnummer und Geburtsdatum angeben.
|
||||
</p>
|
||||
</section>
|
||||
<section v-else>
|
||||
<div class="mt-4">
|
||||
<button
|
||||
v-if="!withCompanyAddress"
|
||||
class="underline"
|
||||
data-cy="add-company-address"
|
||||
@click="setWithCompanyAddress(true)"
|
||||
>
|
||||
<template v-if="userOrganisationName">
|
||||
{{
|
||||
$t("a.Rechnungsadresse von {organisation}", {
|
||||
$t("a.Rechnungsadresse von {organisation} hinzufügen", {
|
||||
organisation: userOrganisationName,
|
||||
})
|
||||
}}
|
||||
</h3>
|
||||
<h3 v-else>{{ $t("a.Rechnungsadresse") }}</h3>
|
||||
<button class="underline" @click="setWithCompanyAddress(false)">
|
||||
{{ $t("a.Entfernen") }}
|
||||
</button>
|
||||
</div>
|
||||
<OrganisationAddress v-model="address" />
|
||||
<p v-if="formErrors.company.length" class="text-red-700">
|
||||
{{ $t("a.Bitte folgende Felder ausfüllen") }}:
|
||||
{{ formErrors.company.join(", ") }}
|
||||
</p>
|
||||
</template>
|
||||
<template v-else>{{ $t("a.Rechnungsadresse hinzufügen") }}</template>
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<transition
|
||||
enter-active-class="transition ease-out duration-100"
|
||||
enter-from-class="transform opacity-0 scale-y-95"
|
||||
enter-to-class="transform opacity-100 scale-y-100"
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
leave-from-class="transform opacity-100 scale-y-100"
|
||||
leave-to-class="transform opacity-0 scale-y-95"
|
||||
>
|
||||
<div v-if="withCompanyAddress">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 v-if="userOrganisationName">
|
||||
{{
|
||||
$t("a.Rechnungsadresse von {organisation}", {
|
||||
organisation: userOrganisationName,
|
||||
})
|
||||
}}
|
||||
</h3>
|
||||
<h3 v-else>{{ $t("a.Rechnungsadresse") }}</h3>
|
||||
<button class="underline" @click="setWithCompanyAddress(false)">
|
||||
{{ $t("a.Entfernen") }}
|
||||
</button>
|
||||
</div>
|
||||
<OrganisationAddress v-model="address" />
|
||||
<p v-if="formErrors.company.length" class="text-red-700">
|
||||
{{ $t("a.Bitte folgende Felder ausfüllen") }}:
|
||||
{{ formErrors.company.join(", ") }}
|
||||
</p>
|
||||
</div>
|
||||
</transition>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
|
|
@ -313,7 +343,12 @@ const executePayment = async () => {
|
|||
data-cy="continue-pay"
|
||||
@click="executePayment"
|
||||
>
|
||||
{{ $t("a.Mit Kreditkarte bezahlen") }}
|
||||
<template v-if="withCembraInvoice">
|
||||
TODO: Mit Rechnung/Cembra bezahlen
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ $t("a.Mit Kreditkarte bezahlen") }}
|
||||
</template>
|
||||
<it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
|
||||
</button>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue