feat: onboarding course checkout
This commit is contained in:
Reto Aebersold
Christian Cueni
parent
607789d599
commit
9592005419
|
|
@ -0,0 +1,131 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, watch } from "vue";
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
modelValue: {
|
||||||
|
street: string;
|
||||||
|
streetNumber: string;
|
||||||
|
postalCode: string;
|
||||||
|
city: string;
|
||||||
|
country: string;
|
||||||
|
};
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const orgAddress = ref(props.modelValue);
|
||||||
|
|
||||||
|
// Emit update event for v-model
|
||||||
|
const emit = defineEmits(["update:modelValue"]);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
orgAddress,
|
||||||
|
(newValue) => {
|
||||||
|
emit("update:modelValue", newValue);
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="my-10 grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-6">
|
||||||
|
<div class="sm:col-span-5">
|
||||||
|
<label
|
||||||
|
for="company-street-address"
|
||||||
|
class="block text-sm font-medium leading-6 text-gray-900"
|
||||||
|
>
|
||||||
|
Strasse
|
||||||
|
</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<input
|
||||||
|
id="company-street-address"
|
||||||
|
v-model="orgAddress.street"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
name="street-address"
|
||||||
|
autocomplete="street-address"
|
||||||
|
class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sm:col-span-1">
|
||||||
|
<label
|
||||||
|
for="company-street-number"
|
||||||
|
class="block text-sm font-medium leading-6 text-gray-900"
|
||||||
|
>
|
||||||
|
Hausnummmer
|
||||||
|
</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<input
|
||||||
|
id="company-street-number"
|
||||||
|
v-model="orgAddress.streetNumber"
|
||||||
|
name="street-number"
|
||||||
|
type="text"
|
||||||
|
autocomplete="street-number"
|
||||||
|
class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sm:col-span-1">
|
||||||
|
<label
|
||||||
|
for="company-postal-code"
|
||||||
|
class="block text-sm font-medium leading-6 text-gray-900"
|
||||||
|
>
|
||||||
|
PLZ
|
||||||
|
</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<input
|
||||||
|
id="company-postal-code"
|
||||||
|
v-model="orgAddress.postalCode"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
name="postal-code"
|
||||||
|
autocomplete="postal-code"
|
||||||
|
class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sm:col-span-5">
|
||||||
|
<label
|
||||||
|
for="company-city"
|
||||||
|
class="block text-sm font-medium leading-6 text-gray-900"
|
||||||
|
>
|
||||||
|
Ort
|
||||||
|
</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<input
|
||||||
|
id="company-city"
|
||||||
|
v-model="orgAddress.city"
|
||||||
|
type="text"
|
||||||
|
name="city"
|
||||||
|
required
|
||||||
|
autocomplete="address-level2"
|
||||||
|
class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-full">
|
||||||
|
<label
|
||||||
|
for="company-country"
|
||||||
|
class="block text-sm font-medium leading-6 text-gray-900"
|
||||||
|
>
|
||||||
|
Land
|
||||||
|
</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<select
|
||||||
|
id="company-country"
|
||||||
|
v-model="orgAddress.country"
|
||||||
|
required
|
||||||
|
name="country"
|
||||||
|
autocomplete="country-name"
|
||||||
|
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>Schweiz</option>
|
||||||
|
<option>Deutschland</option>
|
||||||
|
<option>Österreich</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,162 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, watch } from "vue";
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
modelValue: {
|
||||||
|
firstName: string;
|
||||||
|
lastName: string;
|
||||||
|
street: string;
|
||||||
|
streetNumber: string;
|
||||||
|
postalCode: string;
|
||||||
|
city: string;
|
||||||
|
country: string;
|
||||||
|
};
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const address = ref(props.modelValue);
|
||||||
|
|
||||||
|
// Emit update event for v-model
|
||||||
|
const emit = defineEmits(["update:modelValue"]);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
address,
|
||||||
|
(newValue) => {
|
||||||
|
emit("update:modelValue", newValue);
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="my-10 grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-6">
|
||||||
|
<div class="sm:col-span-3">
|
||||||
|
<label for="first-name" class="block text-sm font-medium leading-6 text-gray-900">
|
||||||
|
Vorname
|
||||||
|
</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<input
|
||||||
|
id="first-name"
|
||||||
|
v-model="address.firstName"
|
||||||
|
type="text"
|
||||||
|
name="first-name"
|
||||||
|
required
|
||||||
|
autocomplete="given-name"
|
||||||
|
class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sm:col-span-3">
|
||||||
|
<label for="last-name" class="block text-sm font-medium leading-6 text-gray-900">
|
||||||
|
Name
|
||||||
|
</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<input
|
||||||
|
id="last-name"
|
||||||
|
v-model="address.lastName"
|
||||||
|
type="text"
|
||||||
|
name="last-name"
|
||||||
|
required
|
||||||
|
autocomplete="family-name"
|
||||||
|
class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sm:col-span-5">
|
||||||
|
<label
|
||||||
|
for="street-address"
|
||||||
|
class="block text-sm font-medium leading-6 text-gray-900"
|
||||||
|
>
|
||||||
|
Strasse
|
||||||
|
</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<input
|
||||||
|
id="street-address"
|
||||||
|
v-model="address.street"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
name="street-address"
|
||||||
|
autocomplete="street-address"
|
||||||
|
class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sm:col-span-1">
|
||||||
|
<label
|
||||||
|
for="street-number"
|
||||||
|
class="block text-sm font-medium leading-6 text-gray-900"
|
||||||
|
>
|
||||||
|
Hausnummmer
|
||||||
|
</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<input
|
||||||
|
id="street-number"
|
||||||
|
v-model="address.streetNumber"
|
||||||
|
name="street-number"
|
||||||
|
type="text"
|
||||||
|
autocomplete="street-number"
|
||||||
|
class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sm:col-span-1">
|
||||||
|
<label
|
||||||
|
for="postal-code"
|
||||||
|
class="block text-sm font-medium leading-6 text-gray-900"
|
||||||
|
>
|
||||||
|
PLZ
|
||||||
|
</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<input
|
||||||
|
id="postal-code"
|
||||||
|
v-model="address.postalCode"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
name="postal-code"
|
||||||
|
autocomplete="postal-code"
|
||||||
|
class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sm:col-span-5">
|
||||||
|
<label for="city" class="block text-sm font-medium leading-6 text-gray-900">
|
||||||
|
Ort
|
||||||
|
</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<input
|
||||||
|
id="city"
|
||||||
|
v-model="address.city"
|
||||||
|
type="text"
|
||||||
|
name="city"
|
||||||
|
required
|
||||||
|
autocomplete="address-level2"
|
||||||
|
class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-full">
|
||||||
|
<label for="country" class="block text-sm font-medium leading-6 text-gray-900">
|
||||||
|
Land
|
||||||
|
</label>
|
||||||
|
<div class="mt-2">
|
||||||
|
<select
|
||||||
|
id="country"
|
||||||
|
v-model="address.country"
|
||||||
|
required
|
||||||
|
name="country"
|
||||||
|
autocomplete="country-name"
|
||||||
|
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>Schweiz</option>
|
||||||
|
<option>Deutschland</option>
|
||||||
|
<option>Österreich</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -7,14 +7,14 @@ const props = defineProps<{
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-1 flex-col">
|
<div class="flex h-screen flex-col">
|
||||||
<div class="flex-grow p-16">
|
<div class="flex-grow scroll-smooth p-16 lg:overflow-auto">
|
||||||
<ItNavigationProgress :steps="3" :current-step="props.step" />
|
<ItNavigationProgress :steps="3" :current-step="props.step" />
|
||||||
<slot name="content"></slot>
|
<slot name="content"></slot>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="flex justify-end space-x-2 px-6 py-4"
|
class="flex flex-wrap justify-end gap-4 px-4 py-4 sm:px-6"
|
||||||
:class="{ 'border border-t': $slots.footer }"
|
:class="{ 'border border-t': $slots.footer }"
|
||||||
>
|
>
|
||||||
<slot name="footer"></slot>
|
<slot name="footer"></slot>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,35 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import WizardPage from "@/components/onboarding/WizardPage.vue";
|
import WizardPage from "@/components/onboarding/WizardPage.vue";
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { useUserStore } from "@/stores/user";
|
||||||
|
import PersonalAddress from "@/components/onboarding/PersonalAddress.vue";
|
||||||
|
import OrganisationAddress from "@/components/onboarding/OrganisationAddress.vue";
|
||||||
|
|
||||||
|
const user = useUserStore();
|
||||||
|
|
||||||
|
const address = ref({
|
||||||
|
firstName: user.first_name,
|
||||||
|
lastName: user.last_name,
|
||||||
|
street: "",
|
||||||
|
streetNumber: "",
|
||||||
|
postalCode: "",
|
||||||
|
city: "",
|
||||||
|
country: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const useCompanyAddress = ref(false);
|
||||||
|
|
||||||
|
const orgAddress = ref({
|
||||||
|
street: "",
|
||||||
|
streetNumber: "",
|
||||||
|
postalCode: "",
|
||||||
|
city: "",
|
||||||
|
country: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const executePayment = () => {
|
||||||
|
console.log("Validate & Execute Payment");
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -19,145 +49,34 @@ import WizardPage from "@/components/onboarding/WizardPage.vue";
|
||||||
kannst du die Rechnungsadresse deiner Gesellschaft hinzufügen.
|
kannst du die Rechnungsadresse deiner Gesellschaft hinzufügen.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-6">
|
<PersonalAddress v-model="address" />
|
||||||
<div class="sm:col-span-3">
|
|
||||||
<label
|
|
||||||
for="first-name"
|
|
||||||
class="block text-sm font-medium leading-6 text-gray-900"
|
|
||||||
>
|
|
||||||
Vorname
|
|
||||||
</label>
|
|
||||||
<div class="mt-2">
|
|
||||||
<input
|
|
||||||
id="first-name"
|
|
||||||
type="text"
|
|
||||||
name="first-name"
|
|
||||||
autocomplete="given-name"
|
|
||||||
class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sm:col-span-3">
|
<button
|
||||||
<label
|
v-if="!useCompanyAddress"
|
||||||
for="last-name"
|
class="underline"
|
||||||
class="block text-sm font-medium leading-6 text-gray-900"
|
@click="useCompanyAddress = true"
|
||||||
>
|
>
|
||||||
Last name
|
Rechnungsadresse von Axa hinzufügen
|
||||||
</label>
|
</button>
|
||||||
<div class="mt-2">
|
|
||||||
<input
|
|
||||||
id="last-name"
|
|
||||||
type="text"
|
|
||||||
name="last-name"
|
|
||||||
autocomplete="family-name"
|
|
||||||
class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sm:col-span-4">
|
<transition
|
||||||
<label for="email" class="block text-sm font-medium leading-6 text-gray-900">
|
enter-active-class="transition ease-out duration-100"
|
||||||
Email address
|
enter-from-class="transform opacity-0 scale-y-95"
|
||||||
</label>
|
enter-to-class="transform opacity-100 scale-y-100"
|
||||||
<div class="mt-2">
|
leave-active-class="transition ease-in duration-75"
|
||||||
<input
|
leave-from-class="transform opacity-100 scale-y-100"
|
||||||
id="email"
|
leave-to-class="transform opacity-0 scale-y-95"
|
||||||
name="email"
|
>
|
||||||
type="email"
|
<div v-if="useCompanyAddress">
|
||||||
autocomplete="email"
|
<div class="flex items-center justify-between">
|
||||||
class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
<h3>Rechnungsaddresse von Axa</h3>
|
||||||
/>
|
<button class="underline" @click="useCompanyAddress = false">
|
||||||
|
Entfernen
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<OrganisationAddress v-model="orgAddress" />
|
||||||
</div>
|
</div>
|
||||||
|
</transition>
|
||||||
<div class="sm:col-span-3">
|
|
||||||
<label
|
|
||||||
for="country"
|
|
||||||
class="block text-sm font-medium leading-6 text-gray-900"
|
|
||||||
>
|
|
||||||
Country
|
|
||||||
</label>
|
|
||||||
<div class="mt-2">
|
|
||||||
<select
|
|
||||||
id="country"
|
|
||||||
name="country"
|
|
||||||
autocomplete="country-name"
|
|
||||||
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:max-w-xs sm:text-sm sm:leading-6"
|
|
||||||
>
|
|
||||||
<option>United States</option>
|
|
||||||
<option>Canada</option>
|
|
||||||
<option>Mexico</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-span-full">
|
|
||||||
<label
|
|
||||||
for="street-address"
|
|
||||||
class="block text-sm font-medium leading-6 text-gray-900"
|
|
||||||
>
|
|
||||||
Street address
|
|
||||||
</label>
|
|
||||||
<div class="mt-2">
|
|
||||||
<input
|
|
||||||
id="street-address"
|
|
||||||
type="text"
|
|
||||||
name="street-address"
|
|
||||||
autocomplete="street-address"
|
|
||||||
class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sm:col-span-2 sm:col-start-1">
|
|
||||||
<label for="city" class="block text-sm font-medium leading-6 text-gray-900">
|
|
||||||
City
|
|
||||||
</label>
|
|
||||||
<div class="mt-2">
|
|
||||||
<input
|
|
||||||
id="city"
|
|
||||||
type="text"
|
|
||||||
name="city"
|
|
||||||
autocomplete="address-level2"
|
|
||||||
class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sm:col-span-2">
|
|
||||||
<label for="region" class="block text-sm font-medium leading-6 text-gray-900">
|
|
||||||
State / Province
|
|
||||||
</label>
|
|
||||||
<div class="mt-2">
|
|
||||||
<input
|
|
||||||
id="region"
|
|
||||||
type="text"
|
|
||||||
name="region"
|
|
||||||
autocomplete="address-level1"
|
|
||||||
class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sm:col-span-2">
|
|
||||||
<label
|
|
||||||
for="postal-code"
|
|
||||||
class="block text-sm font-medium leading-6 text-gray-900"
|
|
||||||
>
|
|
||||||
ZIP / Postal code
|
|
||||||
</label>
|
|
||||||
<div class="mt-2">
|
|
||||||
<input
|
|
||||||
id="postal-code"
|
|
||||||
type="text"
|
|
||||||
name="postal-code"
|
|
||||||
autocomplete="postal-code"
|
|
||||||
class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #footer>
|
<template #footer>
|
||||||
|
|
@ -168,10 +87,10 @@ import WizardPage from "@/components/onboarding/WizardPage.vue";
|
||||||
<it-icon-arrow-left class="it-icon mr-2 h-6 w-6" />
|
<it-icon-arrow-left class="it-icon mr-2 h-6 w-6" />
|
||||||
Zurück
|
Zurück
|
||||||
</router-link>
|
</router-link>
|
||||||
<router-link to="/" class="btn-blue flex items-center">
|
<button class="btn-blue flex items-center" @click="executePayment">
|
||||||
Mit Kreditkarte bezahlen
|
Mit Kreditkarte bezahlen
|
||||||
<it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
|
<it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
|
||||||
</router-link>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
</WizardPage>
|
</WizardPage>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue