updated new iframe

Layout/default/Preordercampaign/Form.php

@@ -305,18 +305,27 @@
 
                                 <!-- IFrame Consents -->
                                 <div class="form-group row">
-                                    <label class="col-lg-2 col-form-label" for="iframe_consents">IFrame Consents</label>
+                                    <label class="col-lg-2 col-form-label">IFrame Consents</label>
                                     <div class="col-lg-10">
-                                        <div id="iframe-consents-container">
+                                        <div class="card">
-                                            <!-- Dynamic inputs will be added here -->
+                                            <div class="card-header">
+                                                <button class="btn btn-link text-left p-0 w-100" type="button" data-toggle="collapse" data-target="#iframe-consents-collapse" aria-expanded="false" aria-controls="iframe-consents-collapse">
+                                                    <i class="fas fa-chevron-right" id="iframe-consents-icon"></i>
+                                                    <strong>IFrame Consents konfigurieren</strong>
+                                                </button>
+                                            </div>
+                                            <div class="collapse" id="iframe-consents-collapse">
+                                                <div class="card-body">
+                                                    <div id="iframe-consents-container">
+                                                        <!-- Dynamic inputs will be added here -->
+                                                    </div>
+                                                    <input type="hidden" name="iframe_consents" id="iframe_consents" value=""/>
+                                                    <small class="form-text text-muted">
+                                                        Zustimmungen für verschiedene Bereiche konfigurieren
+                                                    </small>
+                                                </div>
+                                            </div>
                                         </div>
-                                        <button type="button" class="btn btn-sm btn-success mt-2" id="add-iframe-consent">
-                                            <i class="fas fa-plus"></i> Zustimmung
-                                        </button>
-                                        <input type="hidden" name="iframe_consents" id="iframe_consents" value=""/>
-                                        <small class="form-text text-muted">
-                                            Zusätzliche Custom Zustimmungen mit Verlinkung
-                                        </small>
                                     </div>
                                 </div>
 
@@ -743,9 +752,50 @@
         $(document).ready(function() {
             // Initialize with existing data
             let iframeOrigins = <?= $campaign->iframe_origins ?? '[]'; ?>;
-            let iframeConsents = <?= $campaign->iframe_consents ?? '[]'; ?>;
+            let iframeConsents = <?= $campaign->iframe_consents ?? '{}'; ?>;
 
-            // IFrame Origins Management
+            console.log(iframeConsents);
+
+            // Predefined consent types with default texts
+            const consentTypes = {
+                'agb': {
+                    'label': 'Zustimmung AGB',
+                    required: true,
+                    'defaultText': 'Ich habe mich über die wesentlichen Vertragsinhalte lt. Vertragsbedingungen Glasfaseranschluss informiert und akzeptiere die Allgemeinen Geschäftsbedingungen.'
+                },
+                'dsgvo': {
+                    'label': 'Zustimmung DSGVO',
+                    required: true,
+                    'defaultText': 'Ich habe die Information zur Datenschutzgrundverordnung (DSGVO) zur Kenntnis genommen. Diese ist jederzeit im Downloadbereich abrufbar.'
+                },
+                'ruecktrittsrecht': {
+                    'label': 'Zustimmung Rücktrittsrecht',
+                    required: true,
+                    'defaultText': 'Ich habe die Information über die Rücktrittsrechte für Verbraucher gemäß §3 KSchG und §§ 11 FAGG erhalten, gelesen und zur Kenntnis genommen.'
+                },
+                'datenweitergabe': {
+                    'label': 'Zustimmung Datenweitergabe',
+                    'defaultText': '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 übermittelt werden. Diese Zustimmungserklärung kann jederzeit widerrufen werden.'
+                },
+                'grabungsarbeiten': {
+                    'label': 'Zustimmung Grabungsarbeiten',
+                    'defaultText': 'Ich stimme den notwendigen Grabungsarbeiten für die Installation des Glasfaseranschlusses zu.'
+                }
+            };
+
+            // Ensure iframeConsents is an object with all consent types
+            Object.keys(consentTypes).forEach(key => {
+                if (!iframeConsents[key]) {
+                    iframeConsents[key] = {
+                        url: consentTypes[key].defaultURL || '',
+                        text: consentTypes[key].defaultText,
+                        required: consentTypes[key].required || false,
+                        replace: consentTypes[key].defaultReplacer || ''
+                    };
+                }
+            });
+
+            // IFrame Origins Management (unchanged)
             function renderIframeOrigins() {
                 const container = $('#iframe-origins-container');
                 container.empty();
@@ -793,46 +843,57 @@
                 updateIframeOriginsInput();
             });
 
-            // IFrame Consents Management
+
+
+            // IFrame Consents Management (modified for predefined types)
             function renderIframeConsents() {
                 const container = $('#iframe-consents-container');
                 container.empty();
 
-                iframeConsents.forEach((consent, index) => {
+                Object.keys(consentTypes).forEach(consentKey => {
+                    const consent = iframeConsents[consentKey];
+                    const consentConfig = consentTypes[consentKey];
+
                     const row = $(`
-                <div class="card mb-2">
+                <div class="card mb-3">
+                    <div class="card-header">
+                        <h6 class="mb-0">${consentConfig.label}</h6>
+                    </div>
                     <div class="card-body">
                         <div class="row">
                             <div class="col-md-6">
                                 <label class="form-label">URL</label>
                                 <input type="text" class="form-control iframe-consent-url"
-                                       placeholder="https://partner.com" value="${consent.url || ''}" data-index="${index}">
+                                       placeholder="https://partner.com" value="${consent.url || ''}" data-consent="${consentKey}">
                             </div>
                             <div class="col-md-6">
-                                <label class="form-label">Text</label>
-                                <input type="text" class="form-control iframe-consent-text"
-                                       placeholder="Text" value="${consent.text || ''}" data-index="${index}">
-                            </div>
-                        </div>
-                        <div class="row mt-2">
-                            <div class="col-md-4">
                                 <label class="form-label">URL Replacer</label>
                                 <input type="text" class="form-control iframe-consent-replace"
-                                       placeholder="Consent" value="${consent.replace || ''}" data-index="${index}">
+                                       placeholder="Consent" value="${consent.replace || 'Consent'}" data-consent="${consentKey}">
+                            </div>
+                        </div>
+                        <div class="row mt-3">
+                            <div class="col-md-8">
+                                <label class="form-label">Text</label>
+                                <textarea class="form-control iframe-consent-text" rows="4"
+                                          placeholder="${consentConfig.defaultText}" data-consent="${consentKey}">${consent.text || consentConfig.defaultText}</textarea>
                             </div>
                             <div class="col-md-4">
                                 <div class="form-check mt-4">
                                     <input type="checkbox" class="form-check-input iframe-consent-required"
-                                           id="consent-required-${index}" data-index="${index}" ${consent.required ? 'checked' : ''}>
+                                           id="consent-required-${consentKey}" data-consent="${consentKey}" ${consent.required ? 'checked' : ''}>
-                                    <label class="form-check-label" for="consent-required-${index}">
+                                    <label class="form-check-label" for="consent-required-${consentKey}">
                                         Erforderlich?
                                     </label>
                                 </div>
-                            </div>
+
-                            <div class="col-md-4">
+                                <div class="form-check mt-4">
-                                <button type="button" class="btn btn-outline-danger btn-sm mt-4 remove-iframe-consent" data-index="${index}">
+                                    <input type="checkbox" class="form-check-input iframe-consent-activated"
-                                    <i class="fas fa-trash"></i> Entfernen
+                                           id="consent-activated-${consentKey}" data-consent="${consentKey}" ${consent.activated ? 'checked' : ''}>
-                                </button>
+                                    <label class="form-check-label" for="consent-activated-${consentKey}">
+                                        Aktiviert?
+                                    </label>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -845,53 +906,43 @@
             }
 
             function updateIframeConsentsInput() {
+                console.log('json result', JSON.stringify(iframeConsents));
                 $('#iframe_consents').val(JSON.stringify(iframeConsents));
             }
 
-            // Add new iframe consent
-            $('#add-iframe-consent').click(function() {
-                iframeConsents.push({
-                    url: '',
-                    text: '',
-                    required: false,
-                    replace: 'Consent'
-                });
-                renderIframeConsents();
-            });
-
-            // Remove iframe consent
-            $(document).on('click', '.remove-iframe-consent', function() {
-                const index = $(this).data('index');
-                iframeConsents.splice(index, 1);
-                renderIframeConsents();
-            });
-
             // Update iframe consent values
             $(document).on('input', '.iframe-consent-url', function() {
-                const index = $(this).data('index');
+                const consentKey = $(this).data('consent');
                 const value = $(this).val();
-                iframeConsents[index].url = value;
+                iframeConsents[consentKey].url = value;
                 updateIframeConsentsInput();
             });
 
             $(document).on('input', '.iframe-consent-text', function() {
-                const index = $(this).data('index');
+                const consentKey = $(this).data('consent');
                 const value = $(this).val();
-                iframeConsents[index].text = value;
+                iframeConsents[consentKey].text = value;
                 updateIframeConsentsInput();
             });
 
             $(document).on('input', '.iframe-consent-replace', function() {
-                const index = $(this).data('index');
+                const consentKey = $(this).data('consent');
                 const value = $(this).val();
-                iframeConsents[index].replace = value;
+                iframeConsents[consentKey].replace = value;
                 updateIframeConsentsInput();
             });
 
             $(document).on('change', '.iframe-consent-required', function() {
-                const index = $(this).data('index');
+                const consentKey = $(this).data('consent');
                 const checked = $(this).is(':checked');
-                iframeConsents[index].required = checked;
+                iframeConsents[consentKey].required = checked;
+                updateIframeConsentsInput();
+            });
+
+            $(document).on('change', '.iframe-consent-activated', function() {
+                const consentKey = $(this).data('consent');
+                const checked = $(this).is(':checked');
+                iframeConsents[consentKey].activated = checked;
                 updateIframeConsentsInput();
             });
 
@@ -899,15 +950,20 @@
             renderIframeOrigins();
             renderIframeConsents();
 
-            // Add at least one empty entry if none exist
+            // Add at least one empty entry if none exist for origins
             if (iframeOrigins.length === 0) {
                 $('#add-iframe-origin').click();
             }
 
-            if (iframeConsents.length === 0) {
+            // Handle collapse icon rotation
-                $('#add-iframe-consent').click();
+            $('#iframe-consents-collapse').on('show.bs.collapse', function () {
-            }
+                $('#iframe-consents-icon').removeClass('fa-chevron-right').addClass('fa-chevron-down');
+            });
+
+            $('#iframe-consents-collapse').on('hide.bs.collapse', function () {
+                $('#iframe-consents-icon').removeClass('fa-chevron-down').addClass('fa-chevron-right');
+            });
         });
-    </script>
+</script>
 
 <?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/footer.php"); ?>

Layout/default/VueViews/PreorderIFrame.php

@@ -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;
+                const { firstName, lastName, email, billingAddressChoice, billing } = form;
-                if (!firstName || !lastName || !email || !acceptAgb || !acceptWithdrawal || !acceptDsgvo) return true;
+
+                // 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">
+                                <template v-for="(consent, key) in iframeConsents" :key="key">
-                                  <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">
+                                  <label v-if="consent.activated" class="flex items-start space-x-3 cursor-pointer">
-                                  <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>
+                                    <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">
-                                </label>
+                                    <span class="text-slate-600 text-sm">
-                                <label class="flex items-start space-x-3 cursor-pointer">
+                                      <template v-if="consent.replace && consent.url">
-                                  <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">
+                                        {{ consent.text.split(consent.replace)[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>
+                                        <a :href="consent.url" target="_blank" class="text-[var(--color-primary-600)] hover:underline">{{ consent.replace }}</a>
-                                </label>
+                                        {{ consent.text.split(consent.replace)[1] }}
-                                <label class="flex items-start space-x-3 cursor-pointer">
+                                      </template>
-                                  <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">
+                                      <template v-else>
-                                  <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>
+                                        {{ consent.text }}
-                                </label>
+                                      </template>
-                                <label class="flex items-start space-x-3 cursor-pointer">
+                                      <span v-if="consent.required" class="text-red-500">*</span>
-                                  <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>
-                                  <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>
-                                </label>
+                                </template>
                               </div>
                             </fieldset>
 

application/PreorderIFrame/PreorderIFrameController.php

@@ -38,6 +38,27 @@ class PreorderIFrameController extends mfBaseController
         self::returnJson(['clusters' => $this->preorderIFrameModel->getClusters($_SERVER['HTTP_X_FRAME_REFERRER'])]);
     }
 
+    public function getClusterInfoAction()
+    {
+        $clusterId = $this->request->get('cluster_id');
+        if (!$clusterId) self::sendError("Cluster ID is required.");
+
+        $allClusters = $this->preorderIFrameModel->getClusters($_SERVER['HTTP_X_FRAME_REFERRER']);
+        if (!$allClusters) self::sendError("No cluster found for the given ID.");
+
+        $clusterInfo = null;
+        foreach ($allClusters as $cluster) {
+            if ($cluster['id'] == $clusterId) {
+                $clusterInfo = $cluster;
+                break;
+            }
+        }
+
+        $preorderCampaign = new Preordercampaign($clusterInfo['campaign_id']);
+
+        self::returnJson(['iframe_consents' => json_decode($preorderCampaign->iframe_consents ?? '[]')]);
+    }
+
     public function findCityAction()
     {
         $allowedClusters = $this->preorderIFrameModel->getClusters($_SERVER['HTTP_X_FRAME_REFERRER']);

application/PreorderIFrame/PreorderIFrameModel.php

@@ -47,7 +47,7 @@ class PreorderIFrameModel extends mfBaseModel
     public function getClusters($frame_referrer): array
     {
         $query = "
-            SELECT n.adb_netzgebiet_id as id, ng.name
+            SELECT n.adb_netzgebiet_id as id, ng.name, pc.id as campaign_id, pc.name as campaign_name
             FROM thetool.Preordercampaign pc
             JOIN thetool.Network n ON pc.Network_id = n.id
             JOIN addressdb.Netzgebiet ng ON n.adb_netzgebiet_id = ng.id