diff --git a/client/src/pages/onboarding/vv/CheckoutAddress.vue b/client/src/pages/onboarding/vv/CheckoutAddress.vue index d0f0fe8e..81d141ab 100644 --- a/client/src/pages/onboarding/vv/CheckoutAddress.vue +++ b/client/src/pages/onboarding/vv/CheckoutAddress.vue @@ -85,7 +85,92 @@ watch( { deep: true } ); +const removeCompanyAddress = () => { + useCompanyAddress.value = false; + address.value.company_name = ""; + address.value.company_street = ""; + address.value.company_street_number = ""; + address.value.company_postal_code = ""; + address.value.company_city = ""; + address.value.company_country = ""; +}; + +type FormErrors = { + personal: string[]; + company: string[]; +}; + +const formErrors = ref({ + personal: [], + company: [], +}); + +function validateAddress() { + formErrors.value.personal = []; + formErrors.value.company = []; + + if (!address.value.first_name) { + formErrors.value.personal.push("Vorname"); + } + + if (!address.value.last_name) { + formErrors.value.personal.push("Nachname"); + } + + if (!address.value.street) { + formErrors.value.personal.push("Strasse"); + } + + if (!address.value.street_number) { + formErrors.value.personal.push("Hausnummer"); + } + + if (!address.value.postal_code) { + formErrors.value.personal.push("Postleitzahl"); + } + + if (!address.value.city) { + formErrors.value.personal.push("Ort"); + } + + if (!address.value.country) { + formErrors.value.personal.push("Land"); + } + + if (useCompanyAddress.value) { + if (!address.value.company_name) { + formErrors.value.company.push("Name"); + } + + if (!address.value.company_street) { + formErrors.value.company.push("Strasse"); + } + + if (!address.value.company_street_number) { + formErrors.value.company.push("Hausnummer"); + } + + if (!address.value.company_postal_code) { + formErrors.value.company.push("Postleitzahl"); + } + + if (!address.value.company_city) { + formErrors.value.company.push("Ort"); + } + + if (!address.value.company_country) { + formErrors.value.company.push("Land"); + } + } +} + const executePayment = () => { + validateAddress(); + + if (formErrors.value.personal.length > 0 || formErrors.value.company.length > 0) { + return; + } + // Where the payment page will redirect to after the payment is done: // The reason why this is here is convenience: We could also do this in the backend // then we'd need to configure this for all environments (including Caprover). @@ -122,6 +207,10 @@ const executePayment = () => { +

+ Bitte folgende Felder ausfüllen: {{ formErrors.personal.join(", ") }} +

+ + +

+ Bitte folgende Felder ausfüllen: {{ formErrors.company.join(", ") }} +