Add logic/validation for cembra fields

client/src/pages/onboarding/vv/CheckoutAddress.vue

@@ -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,17 +257,29 @@ 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>
 
+      <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"
@@ -298,6 +327,7 @@ const executePayment = async () => {
             </p>
           </div>
         </transition>
+      </section>
     </template>
 
     <template #footer>
@@ -313,7 +343,12 @@ const executePayment = async () => {
         data-cy="continue-pay"
         @click="executePayment"
       >
+        <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>