updated new iframe
This commit is contained in:
Luca Haid
@@ -9,7 +9,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Bestellformular</title>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.27/dist/vue.global.prod.js"></script>
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@3.4.27/dist/vue.global.prod.js"></script>-->
|
||||
<!-- use non production vue for testing-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.27/dist/vue.global.js"></script>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios@1.7.2/dist/axios.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
@@ -205,6 +207,7 @@
|
||||
const isLoading = ref(false);
|
||||
const errorMessage = ref('');
|
||||
const orderResponse = ref(null);
|
||||
const iframeConsents = reactive({});
|
||||
const form = reactive({
|
||||
customerType: 'Privatkunde', title: '', birthDate: '', firstName: '', lastName: '', phone: '', email: '', isOwner: 'Ja', notes: '',
|
||||
billingAddressChoice: 'Anschlussadresse',
|
||||
@@ -214,7 +217,8 @@
|
||||
});
|
||||
// add header where the iframe is embedded
|
||||
|
||||
const referrer = document.referrer.split('?')[0];
|
||||
// const referrer = document.referrer.split('?')[0];
|
||||
const referrer = 'http://localhost/test.html';
|
||||
const api = axios.create({ baseURL: API_BASE_URL, headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-Frame-Options': 'SAMEORIGIN', 'X-Frame-Referrer': referrer } });
|
||||
config.color = new URLSearchParams(window.location.search).get('color') || config.color || 'blue';
|
||||
|
||||
@@ -251,6 +255,14 @@
|
||||
watch(() => addressForm.city, (n, o) => { if (n && n !== o) { addressStep.value = 'street'; clearSubsequentSteps('city'); fetchStreets(addressForm.zip, n); } });
|
||||
watch(() => addressForm.street, (n, o) => { if (n && n !== o) { addressStep.value = 'housenumber'; clearSubsequentSteps('street');} });
|
||||
watch(() => addressForm.wohneinheit_id, (n) => { if (n) { const unit = units.value.find(u => u.wohneinheit_id === n); if (unit) selectAddress(unit); } });
|
||||
watch(currentStep, async (newStep) => {
|
||||
if (newStep === 'addressSearch' && clusterId.value) {
|
||||
const response = await api.get(`/getClusterInfo`, { params: { cluster_id: clusterId.value } });
|
||||
Object.assign(iframeConsents, response.data?.iframe_consents || {});
|
||||
console.log(response.data.iframe_consents);
|
||||
console.log('Iframe consents:', iframeConsents);
|
||||
}
|
||||
});
|
||||
|
||||
// --- API CALLS & METHODS ---
|
||||
function handleError(error, message) {
|
||||
@@ -353,18 +365,31 @@
|
||||
}
|
||||
|
||||
const isFormInvalid = computed(() => {
|
||||
const { firstName, lastName, email, billingAddressChoice, billing, acceptAgb, acceptWithdrawal, acceptDsgvo } = form;
|
||||
if (!firstName || !lastName || !email || !acceptAgb || !acceptWithdrawal || !acceptDsgvo) return true;
|
||||
const { firstName, lastName, email, billingAddressChoice, billing } = form;
|
||||
|
||||
// Basic form field validation
|
||||
if (!firstName || !lastName || !email) return true;
|
||||
|
||||
// Billing address validation
|
||||
if (billingAddressChoice === 'Andere') {
|
||||
if (!billing.name || !billing.street || !billing.housenumber || !billing.zip || !billing.city) return true;
|
||||
}
|
||||
|
||||
// Dynamic validation for required consents
|
||||
for (const key in iframeConsents) {
|
||||
if (iframeConsents[key].required && !form[key]) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
return {
|
||||
currentStep, clusterId, clusters, addressStep, addressForm, goBackToStep,
|
||||
cities, streets, units, isLoading, selectedAddress, isFormInvalid, form,
|
||||
findAddress, submitOrder, startNewOrder, orderResponse, errorMessage,
|
||||
findAddress, submitOrder, startNewOrder, orderResponse, errorMessage, iframeConsents,
|
||||
handleClusterSelection: () => { if (clusterId.value) currentStep.value = 'addressSearch'; },
|
||||
};
|
||||
},
|
||||
@@ -437,7 +462,7 @@
|
||||
<label for="connectionType" class="block text-sm font-medium text-slate-600 mb-2">Anschlussart *</label>
|
||||
|
||||
<!-- For building_type = 1 (single option) -->
|
||||
<div v-if="selectedAddress.building_type === 1" class="space-y-2">
|
||||
<div v-if="selectedAddress.building_type === 2" class="space-y-2">
|
||||
<div class="p-4 border-2 border-[var(--color-primary-600)] rounded-md bg-[var(--color-primary-50)]">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-medium text-slate-800">Wohnungs-Anschluss</span>
|
||||
@@ -448,7 +473,7 @@
|
||||
</div>
|
||||
|
||||
<!-- For building_type = 2 (multiple options) -->
|
||||
<div v-else-if="selectedAddress.building_type === 2" class="space-y-3">
|
||||
<div v-else-if="selectedAddress.building_type === 1" class="space-y-3">
|
||||
<label class="flex items-center p-4 border-2 rounded-md cursor-pointer hover:bg-slate-50 transition-colors"
|
||||
:class="form.connectionType === 'vorsorge' ? 'border-[var(--color-primary-600)] bg-[var(--color-primary-50)]' : 'border-slate-300'">
|
||||
<input type="radio" v-model="form.connectionType" value="vorsorge" class="form-radio h-5 w-5 text-[var(--color-primary-600)] mr-3">
|
||||
@@ -572,22 +597,22 @@
|
||||
<fieldset>
|
||||
<legend class="text-lg font-semibold text-slate-800 mb-2">Zustimmungen</legend>
|
||||
<div class="space-y-4">
|
||||
<label class="flex items-start space-x-3 cursor-pointer">
|
||||
<input type="checkbox" v-model="form.acceptAgb" class="form-checkbox h-5 w-5 text-[var(--color-primary-600)] mt-0.5 flex-shrink-0">
|
||||
<span class="text-slate-600 text-sm">*Ich habe mich über die wesentlichen Vertragsinhalte lt. Vertragsbedingungen Glasfaseranschluss informiert und akzeptiere die Allgemeinen Geschäftsbedingungen.</span>
|
||||
</label>
|
||||
<label class="flex items-start space-x-3 cursor-pointer">
|
||||
<input type="checkbox" v-model="form.acceptMarketing" class="form-checkbox h-5 w-5 text-[var(--color-primary-600)] mt-0.5 flex-shrink-0">
|
||||
<span class="text-slate-600 text-sm">Ich stimme zu, dass meine Daten zur telefonischen Kontaktaufnahme, sowie für die postalische und elektronische Zusendung von Produkt- und Dienstleistungs-Informationen bzw. für Marketingaktivitäten an verbundene Unternehmen der Energie Steiermark Breitband GmbH übermittelt werden. Diese Zustimmungserklärung kann jederzeit widerrufen werden. <a href="#" class="text-[var(--color-primary-600)] hover:underline">Mehr erfahren</a></span>
|
||||
</label>
|
||||
<label class="flex items-start space-x-3 cursor-pointer">
|
||||
<input type="checkbox" v-model="form.acceptWithdrawal" class="form-checkbox h-5 w-5 text-[var(--color-primary-600)] mt-0.5 flex-shrink-0">
|
||||
<span class="text-slate-600 text-sm">*Ich habe die Information über die Rücktrittsrechte für Verbraucher gemäß §3 KSchG und §§ 11 FAGG erhalten, gelesen und zur Kenntnis genommen.</span>
|
||||
</label>
|
||||
<label class="flex items-start space-x-3 cursor-pointer">
|
||||
<input type="checkbox" v-model="form.acceptDsgvo" class="form-checkbox h-5 w-5 text-[var(--color-primary-600)] mt-0.5 flex-shrink-0">
|
||||
<span class="text-slate-600 text-sm">*Ich habe die Information zur Datenschutzgrundverordnung (DSGVO) zur Kenntnis genommen. Diese ist jederzeit im Downloadbereich abrufbar.</span>
|
||||
</label>
|
||||
<template v-for="(consent, key) in iframeConsents" :key="key">
|
||||
<label v-if="consent.activated" class="flex items-start space-x-3 cursor-pointer">
|
||||
<input type="checkbox" v-model="form[key]" class="form-checkbox h-5 w-5 text-[var(--color-primary-600)] mt-0.5 flex-shrink-0">
|
||||
<span class="text-slate-600 text-sm">
|
||||
<template v-if="consent.replace && consent.url">
|
||||
{{ consent.text.split(consent.replace)[0] }}
|
||||
<a :href="consent.url" target="_blank" class="text-[var(--color-primary-600)] hover:underline">{{ consent.replace }}</a>
|
||||
{{ consent.text.split(consent.replace)[1] }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ consent.text }}
|
||||
</template>
|
||||
<span v-if="consent.required" class="text-red-500">*</span>
|
||||
</span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user