Implement new form field order

client/src/components/onboarding/PaymentMethod.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { t } from "i18next";
+
+const props = defineProps<{
+  modelValue: {
+    payment_method: string;
+  };
+}>();
+
+const emit = defineEmits(["update:modelValue"]);
+
+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="props.modelValue.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="props.modelValue.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,7 +2,6 @@
 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<{
@@ -25,11 +24,6 @@ const emit = defineEmits(["update:modelValue"]);
 
 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;
@@ -176,34 +170,6 @@ 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">
       <label for="phone" class="block text-sm font-medium leading-6 text-gray-900">
         {{ $t("a.Telefonnummer") }}

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">
         {{