feat: validate address

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<FormErrors>({
+  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 = () => {
 
       <PersonalAddress v-model="address" />
 
+      <p v-if="formErrors.personal.length" class="mb-10 text-red-700">
+        Bitte folgende Felder ausfüllen: {{ formErrors.personal.join(", ") }}
+      </p>
+
       <button
         v-if="!useCompanyAddress"
         class="underline"
@@ -147,11 +236,12 @@ const executePayment = () => {
               {{ `Rechnungsadresse von ${userOrganisationName}` }}
             </h3>
             <h3 v-else>Rechnungsadresse</h3>
-            <button class="underline" @click="useCompanyAddress = false">
-              Entfernen
-            </button>
+            <button class="underline" @click="removeCompanyAddress">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(", ") }}
+          </p>
         </div>
       </transition>
     </template>