327 lines
9.0 KiB
Vue
327 lines
9.0 KiB
Vue
<script setup lang="ts">
|
|
import WizardPage from "@/components/onboarding/WizardPage.vue";
|
|
import type { Ref } from "vue";
|
|
import { computed, ref, watch } from "vue";
|
|
import { useUserStore } from "@/stores/user";
|
|
import PersonalAddress from "@/components/onboarding/PersonalAddress.vue";
|
|
import OrganisationAddress from "@/components/onboarding/OrganisationAddress.vue";
|
|
import { itPost, itPut } from "@/fetchHelpers";
|
|
import { useEntities } from "@/services/entities";
|
|
import { useDebounceFn, useFetch } from "@vueuse/core";
|
|
import { useRoute } from "vue-router";
|
|
import { useTranslation } from "i18next-vue";
|
|
import { getVVCourseName } from "./composables";
|
|
|
|
type BillingAddressType = {
|
|
first_name: string;
|
|
last_name: string;
|
|
street: string;
|
|
street_number: string;
|
|
postal_code: string;
|
|
city: string;
|
|
country: string;
|
|
company_name: string;
|
|
company_street: string;
|
|
company_street_number: string;
|
|
company_postal_code: string;
|
|
company_city: string;
|
|
company_country: string;
|
|
};
|
|
|
|
const props = defineProps({
|
|
courseType: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const user = useUserStore();
|
|
const route = useRoute();
|
|
const { organisations } = useEntities();
|
|
|
|
const userOrganisationName = computed(() => {
|
|
if (!user.organisation) {
|
|
return null;
|
|
}
|
|
|
|
// Those IDs do not represent a company
|
|
// 1: Other broker
|
|
// 2: Other insurance
|
|
// 3: Other private insurance
|
|
// 31: No company relation
|
|
if ([1, 2, 3, 31].includes(user.organisation)) {
|
|
return null;
|
|
}
|
|
|
|
return organisations.value?.find((c) => c.id === user.organisation)?.name;
|
|
});
|
|
|
|
const paymentError = computed(() => {
|
|
return "error" in route.query;
|
|
});
|
|
|
|
const address = ref({
|
|
first_name: "",
|
|
last_name: "",
|
|
street: "",
|
|
street_number: "",
|
|
postal_code: "",
|
|
city: "",
|
|
country: "",
|
|
company_name: "",
|
|
company_street: "",
|
|
company_street_number: "",
|
|
company_postal_code: "",
|
|
company_city: "",
|
|
company_country: "",
|
|
});
|
|
|
|
const useCompanyAddress = ref(false);
|
|
const fetchBillingAddress = useFetch("/api/shop/billing-address/").json();
|
|
const billingAddressData: Ref<BillingAddressType | null> = fetchBillingAddress.data;
|
|
|
|
watch(billingAddressData, (newVal) => {
|
|
if (newVal) {
|
|
address.value = newVal;
|
|
useCompanyAddress.value = !!newVal.company_name;
|
|
}
|
|
});
|
|
|
|
const updateAddress = useDebounceFn(() => {
|
|
itPut("/api/shop/billing-address/update/", address.value);
|
|
}, 500);
|
|
|
|
watch(
|
|
address,
|
|
(newVal, oldVal) => {
|
|
if (Object.values(oldVal).every((x) => x === "")) {
|
|
return;
|
|
}
|
|
|
|
updateAddress();
|
|
},
|
|
{ deep: true }
|
|
);
|
|
|
|
const removeCompanyAddress = () => {
|
|
useCompanyAddress.value = false;
|
|
address.value.company_name = "";
|
|
address.value.company_street = "";
|
|
address.value.company_street_number = "";
|
|
address.value.company_postal_code = "";
|
|
address.value.company_city = "";
|
|
address.value.company_country = "";
|
|
};
|
|
|
|
type FormErrors = {
|
|
personal: string[];
|
|
company: string[];
|
|
};
|
|
|
|
const formErrors = ref<FormErrors>({
|
|
personal: [],
|
|
company: [],
|
|
});
|
|
|
|
const { t } = useTranslation();
|
|
|
|
function validateAddress() {
|
|
formErrors.value.personal = [];
|
|
formErrors.value.company = [];
|
|
|
|
if (!address.value.first_name) {
|
|
formErrors.value.personal.push(t("a.Vorname"));
|
|
}
|
|
|
|
if (!address.value.last_name) {
|
|
formErrors.value.personal.push(t("a.Nachname"));
|
|
}
|
|
|
|
if (!address.value.street) {
|
|
formErrors.value.personal.push(t("a.Strasse"));
|
|
}
|
|
|
|
if (!address.value.street_number) {
|
|
formErrors.value.personal.push(t("a.Hausnummmer"));
|
|
}
|
|
|
|
if (!address.value.postal_code) {
|
|
formErrors.value.personal.push(t("a.PLZ"));
|
|
}
|
|
|
|
if (!address.value.city) {
|
|
formErrors.value.personal.push(t("a.Ort"));
|
|
}
|
|
|
|
if (!address.value.country) {
|
|
formErrors.value.personal.push(t("a.Land"));
|
|
}
|
|
|
|
if (useCompanyAddress.value) {
|
|
if (!address.value.company_name) {
|
|
formErrors.value.company.push(t("a.Name"));
|
|
}
|
|
|
|
if (!address.value.company_street) {
|
|
formErrors.value.company.push(t("a.Strasse"));
|
|
}
|
|
|
|
if (!address.value.company_street_number) {
|
|
formErrors.value.company.push(t("a.Hausnummmer"));
|
|
}
|
|
|
|
if (!address.value.company_postal_code) {
|
|
formErrors.value.company.push(t("a.PLZ"));
|
|
}
|
|
|
|
if (!address.value.company_city) {
|
|
formErrors.value.company.push(t("a.Ort"));
|
|
}
|
|
|
|
if (!address.value.company_country) {
|
|
formErrors.value.company.push(t("a.Land"));
|
|
}
|
|
}
|
|
}
|
|
|
|
const executePayment = () => {
|
|
validateAddress();
|
|
|
|
if (formErrors.value.personal.length > 0 || formErrors.value.company.length > 0) {
|
|
return;
|
|
}
|
|
|
|
// Where the payment page will redirect to after the payment is done:
|
|
// The reason why this is here is convenience: We could also do this in the backend
|
|
// then we'd need to configure this for all environments (including Caprover).
|
|
// /server/transactions/redirect?... will just redirect to the frontend to the right page
|
|
// anyway, so it seems fine to do it here.
|
|
const fullHost = `${window.location.protocol}//${window.location.host}`;
|
|
|
|
itPost("/api/shop/vv/checkout/", {
|
|
redirect_url: fullHost,
|
|
address: address.value,
|
|
product: props.courseType,
|
|
}).then((res) => {
|
|
console.log("Going to next page", res.next_step_url);
|
|
window.location.href = res.next_step_url;
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<WizardPage :step="2">
|
|
<template #content>
|
|
<h2 class="my-10">{{ $t("a.Lehrgang kaufen") }}</h2>
|
|
<p class="mb-4">
|
|
<i18next
|
|
:translation="$t('a.Der Preis für den Lehrgang {course} beträgt {price}.')"
|
|
>
|
|
<template #course>
|
|
<b>«{{ getVVCourseName(props.courseType) }}»</b>
|
|
</template>
|
|
<template #price>
|
|
<b class="whitespace-nowrap">300 CHF</b>
|
|
</template>
|
|
</i18next>
|
|
{{
|
|
$t("a.Mit dem Kauf erhältst du Zugang auf den gesamten Kurs (inkl. Prüfung).")
|
|
}}
|
|
</p>
|
|
<p>
|
|
{{ $t("a.Hier kannst du ausschliesslich mit einer Kreditkarte bezahlen.") }}
|
|
</p>
|
|
|
|
<p v-if="paymentError" class="text-bold mt-12 text-lg text-red-700">
|
|
{{
|
|
$t("a.Fehler bei der Zahlung. Bitte versuche es erneut oder kontaktiere uns")
|
|
}}:
|
|
<a href="mailto:vermittler@vbv-afa.ch" class="underline">
|
|
vermittler@vbv-afa.ch
|
|
</a>
|
|
</p>
|
|
|
|
<h3 class="mb-4 mt-10">{{ $t("a.Adresse") }}</h3>
|
|
<p class="mb-2">
|
|
{{
|
|
$t(
|
|
"a.Um die Zahlung vornehmen zu können, benötigen wir deine Privatadresse. Optional kannst du die Rechnungsadresse deiner Gesellschaft hinzufügen."
|
|
)
|
|
}}
|
|
</p>
|
|
<p>
|
|
{{
|
|
$t(
|
|
"Wichtig: wird die Rechnung von deinem Arbeitgeber bezahlt, dann kannst du zusätzlich die Rechnungsadresse deines Arbeitsgebers erfassen."
|
|
)
|
|
}}
|
|
</p>
|
|
<PersonalAddress v-model="address" />
|
|
|
|
<p v-if="formErrors.personal.length" class="mb-10 text-red-700">
|
|
{{ $t("a.Bitte folgende Felder ausfüllen") }}:
|
|
{{ formErrors.personal.join(", ") }}
|
|
</p>
|
|
|
|
<button
|
|
v-if="!useCompanyAddress"
|
|
class="underline"
|
|
@click="useCompanyAddress = true"
|
|
>
|
|
<template v-if="userOrganisationName">
|
|
{{
|
|
$t("a.Rechnungsadresse von {organisation} hinzufügen", {
|
|
organisation: userOrganisationName,
|
|
})
|
|
}}
|
|
</template>
|
|
<template v-else>{{ $t("a.Rechnungsadresse hinzufügen") }}</template>
|
|
</button>
|
|
|
|
<transition
|
|
enter-active-class="transition ease-out duration-100"
|
|
enter-from-class="transform opacity-0 scale-y-95"
|
|
enter-to-class="transform opacity-100 scale-y-100"
|
|
leave-active-class="transition ease-in duration-75"
|
|
leave-from-class="transform opacity-100 scale-y-100"
|
|
leave-to-class="transform opacity-0 scale-y-95"
|
|
>
|
|
<div v-if="useCompanyAddress">
|
|
<div class="flex items-center justify-between">
|
|
<h3 v-if="userOrganisationName">
|
|
{{
|
|
$t("a.Rechnungsadresse von {organisation}", {
|
|
organisation: userOrganisationName,
|
|
})
|
|
}}
|
|
</h3>
|
|
<h3 v-else>{{ $t("a.Rechnungsadresse") }}</h3>
|
|
<button class="underline" @click="removeCompanyAddress">
|
|
{{ $t("a.Entfernen") }}
|
|
</button>
|
|
</div>
|
|
<OrganisationAddress v-model="address" />
|
|
<p v-if="formErrors.company.length" class="text-red-700">
|
|
{{ $t("a.Bitte folgende Felder ausfüllen") }}:
|
|
{{ formErrors.company.join(", ") }}
|
|
</p>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<template #footer>
|
|
<router-link
|
|
:to="{ name: 'accountProfile' }"
|
|
class="btn-secondary flex items-center"
|
|
>
|
|
<it-icon-arrow-left class="it-icon mr-2 h-6 w-6" />
|
|
{{ $t("general.back") }}
|
|
</router-link>
|
|
<button class="btn-blue flex items-center" @click="executePayment">
|
|
{{ $t("a.Mit Kreditkarte bezahlen") }}
|
|
<it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
|
|
</button>
|
|
</template>
|
|
</WizardPage>
|
|
</template>
|