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,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">
+      <section v-if="withCembraInvoice">
-        <button
+        <p class="mt-4">
-          v-if="!withCompanyAddress"
+          TODO: Bei Zahlung auf Rechnung/Cembra, wird immer auf deine Privatadresse
-          class="underline"
+          verrechnet. Du musst zwinged deine Telefonnummer und Geburtsdatum angeben.
-          data-cy="add-company-address"
+        </p>
-          @click="setWithCompanyAddress(true)"
+      </section>
-        >
+      <section v-else>
-          <template v-if="userOrganisationName">
+        <div class="mt-4">
-            {{
+          <button
-              $t("a.Rechnungsadresse von {organisation} hinzufügen", {
+            v-if="!withCompanyAddress"
-                organisation: userOrganisationName,
+            class="underline"
-              })
+            data-cy="add-company-address"
-            }}
+            @click="setWithCompanyAddress(true)"
-          </template>
+          >
-          <template v-else>{{ $t("a.Rechnungsadresse hinzufügen") }}</template>
+            <template v-if="userOrganisationName">
-        </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">
               {{
-                $t("a.Rechnungsadresse von {organisation}", {
+                $t("a.Rechnungsadresse von {organisation} hinzufügen", {
                   organisation: userOrganisationName,
                 })
               }}
-            </h3>
+            </template>
-            <h3 v-else>{{ $t("a.Rechnungsadresse") }}</h3>
+            <template v-else>{{ $t("a.Rechnungsadresse hinzufügen") }}</template>
-            <button class="underline" @click="setWithCompanyAddress(false)">
+          </button>
-              {{ $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>
+
+        <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>