Merged in feature/VBV-711-bezahlung-optionen-sichtbarer-machen (pull request #386)

VBV-711: Bezahlungs Optionen Sichtbarer Machen

Approved-by: Dario Aebersold
Approved-by: Daniel Egger

client/src/components/onboarding/PaymentMethod.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { t } from "i18next";
+
+const model = defineModel<{
+  payment_method: string;
+}>({ required: true });
+
+const paymentMethods = [
+  { value: "credit_card", label: t("a.Debit-/Kreditkarte/Twint") },
+  { value: "cembra_byjuno", label: t("a.Rechnung") },
+];
+</script>
+
+<template>
+  <div class="col-span-full">
+    <div class="mt-2">
+      <select
+        id="paymentMethod"
+        v-model="model.payment_method"
+        required
+        name="paymentMethod"
+        class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+      >
+        <option v-for="pm in paymentMethods" :key="pm.value" :value="pm.value">
+          {{ pm.label }}
+        </option>
+      </select>
+    </div>
+  </div>
+
+  <div v-if="model.payment_method === 'cembra_byjuno'" class="col-span-full">
+    <p class="mt-4">
+      {{ $t("shop.paymentCembraByjunoMessage") }}
+    </p>
+  </div>
+</template>

client/src/components/onboarding/PersonalAddress.vue

@@ -2,42 +2,22 @@
 import ItDatePicker from "@/components/ui/ItDatePicker.vue";
 import { useEntities } from "@/services/entities";
 import "@vuepic/vue-datepicker/dist/main.css";
-import { t } from "i18next";
-import { computed } from "vue";
 
-const props = defineProps<{
-  modelValue: {
-    first_name: string;
-    last_name: string;
-    street: string;
-    street_number: string;
-    postal_code: string;
-    city: string;
-    country_code: string;
-    payment_method: string;
+const model = defineModel<{
+  first_name: string;
+  last_name: string;
+  street: string;
+  street_number: string;
+  postal_code: string;
+  city: string;
+  country_code: string;
+  payment_method: string;
 
-    phone_number: string;
-    birth_date: string;
-  };
-}>();
-
-const emit = defineEmits(["update:modelValue"]);
+  phone_number: string;
+  birth_date: string;
+}>({ required: true });
 
 const { countries } = useEntities();
-
-const paymentMethods = [
-  { value: "credit_card", label: t("a.Debit-/Kreditkarte/Twint") },
-  { value: "cembra_byjuno", label: t("a.Rechnung") },
-];
-
-const address = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(value) {
-    emit("update:modelValue", value);
-  },
-});
 </script>
 
 <template>
@@ -49,7 +29,7 @@ const address = computed({
       <div class="mt-2">
         <input
           id="first-name"
-          v-model="address.first_name"
+          v-model="model.first_name"
           type="text"
           name="first-name"
           required
@@ -66,7 +46,7 @@ const address = computed({
       <div class="mt-2">
         <input
           id="last-name"
-          v-model="address.last_name"
+          v-model="model.last_name"
           type="text"
           name="last-name"
           required
@@ -86,7 +66,7 @@ const address = computed({
       <div class="mt-2">
         <input
           id="street-address"
-          v-model="address.street"
+          v-model="model.street"
           type="text"
           required
           name="street-address"
@@ -106,7 +86,7 @@ const address = computed({
       <div class="mt-2">
         <input
           id="street-number"
-          v-model="address.street_number"
+          v-model="model.street_number"
           name="street-number"
           type="text"
           autocomplete="street-number"
@@ -125,7 +105,7 @@ const address = computed({
       <div class="mt-2">
         <input
           id="postal-code"
-          v-model="address.postal_code"
+          v-model="model.postal_code"
           type="text"
           required
           name="postal-code"
@@ -142,7 +122,7 @@ const address = computed({
       <div class="mt-2">
         <input
           id="city"
-          v-model="address.city"
+          v-model="model.city"
           type="text"
           name="city"
           required
@@ -159,7 +139,7 @@ const address = computed({
       <div class="mt-2">
         <select
           id="country"
-          v-model="address.country_code"
+          v-model="model.country_code"
           required
           name="country"
           autocomplete="country-name"
@@ -176,42 +156,14 @@ const address = computed({
       </div>
     </div>
 
-    <div class="col-span-full">
-      <label
-        for="paymentMethod"
-        class="block text-sm font-medium leading-6 text-gray-900"
-      >
-        {{ $t("a.Zahlungsart") }}
-      </label>
-      <div class="mt-2">
-        <select
-          id="paymentMethod"
-          v-model="address.payment_method"
-          required
-          name="paymentMethod"
-          class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
-        >
-          <option v-for="pm in paymentMethods" :key="pm.value" :value="pm.value">
-            {{ pm.label }}
-          </option>
-        </select>
-      </div>
-    </div>
-
-    <div v-if="address.payment_method === 'cembra_byjuno'" class="col-span-full">
-      <p class="mt-4">
-        {{ $t("shop.paymentCembraByjunoMessage") }}
-      </p>
-    </div>
-
-    <div v-if="address.payment_method === 'cembra_byjuno'" class="col-span-full">
+    <div v-if="model.payment_method === 'cembra_byjuno'" class="col-span-full">
       <label for="phone" class="block text-sm font-medium leading-6 text-gray-900">
         {{ $t("a.Telefonnummer") }}
       </label>
       <div class="mt-2">
         <input
           id="phone"
-          v-model="address.phone_number"
+          v-model="model.phone_number"
           type="text"
           name="phone"
           autocomplete="phone-number"
@@ -220,12 +172,12 @@ const address = computed({
       </div>
     </div>
 
-    <div v-if="address.payment_method === 'cembra_byjuno'" class="col-span-full">
+    <div v-if="model.payment_method === 'cembra_byjuno'" class="col-span-full">
       <label for="birth-date" class="block text-sm font-medium leading-6 text-gray-900">
         {{ $t("a.Geburtsdatum") }}
       </label>
       <div class="mt-2">
-        <ItDatePicker v-model="address.birth_date"></ItDatePicker>
+        <ItDatePicker v-model="model.birth_date"></ItDatePicker>
       </div>
     </div>
   </div>

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import DatatransCembraDeviceFingerprint from "@/components/onboarding/DatatransCembraDeviceFingerprint.vue";
 import OrganisationAddress from "@/components/onboarding/OrganisationAddress.vue";
+import PaymentMethod from "@/components/onboarding/PaymentMethod.vue";
 import PersonalAddress from "@/components/onboarding/PersonalAddress.vue";
 import WizardPage from "@/components/onboarding/WizardPage.vue";
 import {
@@ -272,6 +273,9 @@ const executePayment = async () => {
         }}
       </p>
 
+      <h3 class="mb-4 mt-10">{{ $t("a.Zahlungsart") }}</h3>
+      <PaymentMethod v-model="address" />
+
       <h3 class="mb-4 mt-10">{{ $t("a.Adresse") }}</h3>
       <p class="mb-2">
         {{