233 lines
7.2 KiB
Vue
233 lines
7.2 KiB
Vue
<script setup lang="ts">
|
|
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;
|
|
|
|
phone_number: string;
|
|
birth_date: string;
|
|
};
|
|
}>();
|
|
|
|
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;
|
|
},
|
|
set(value) {
|
|
emit("update:modelValue", value);
|
|
},
|
|
});
|
|
</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">
|
|
{{ $t("a.Vorname") }}
|
|
</label>
|
|
<div class="mt-2">
|
|
<input
|
|
id="first-name"
|
|
v-model="address.first_name"
|
|
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">
|
|
{{ $t("a.Nachname") }}
|
|
</label>
|
|
<div class="mt-2">
|
|
<input
|
|
id="last-name"
|
|
v-model="address.last_name"
|
|
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-4">
|
|
<label
|
|
for="street-address"
|
|
class="block text-sm font-medium leading-6 text-gray-900"
|
|
>
|
|
{{ $t("a.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-2">
|
|
<label
|
|
for="street-number"
|
|
class="block text-sm font-medium leading-6 text-gray-900"
|
|
>
|
|
{{ $t("a.Hausnummmer") }}
|
|
</label>
|
|
<div class="mt-2">
|
|
<input
|
|
id="street-number"
|
|
v-model="address.street_number"
|
|
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"
|
|
>
|
|
{{ $t("a.PLZ") }}
|
|
</label>
|
|
<div class="mt-2">
|
|
<input
|
|
id="postal-code"
|
|
v-model="address.postal_code"
|
|
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">
|
|
{{ $t("a.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">
|
|
{{ $t("a.Land") }}
|
|
</label>
|
|
<div class="mt-2">
|
|
<select
|
|
id="country"
|
|
v-model="address.country_code"
|
|
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
|
|
v-for="country in countries"
|
|
:key="country.country_code"
|
|
:value="country.country_code"
|
|
>
|
|
{{ country.name }}
|
|
</option>
|
|
</select>
|
|
</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") }}
|
|
</label>
|
|
<div class="mt-2">
|
|
<input
|
|
id="phone"
|
|
v-model="address.phone_number"
|
|
type="text"
|
|
name="phone"
|
|
autocomplete="phone-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 v-if="address.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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|