ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement new form field order

This commit is contained in:
Elia Bieri 2024-09-17 17:16:20 +02:00
parent 6f3dac2e97
commit a049a450ce
3 changed files with 44 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
client/src/components/onboarding/PaymentMethod.vue Normal file
View File

@ -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>

34
client/src/components/onboarding/PersonalAddress.vue
View File

@ -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") }}

4
client/src/pages/onboarding/vv/CheckoutAddress.vue
View File

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