https://humanoseguros.com/wp-content/themes/humano-seguros/js/success-modal-handler.js

1(function() {
2    'use strict';
3
4    // Función para crear el modal de Servicio Extranjero
5    function createServicioExtranjeroModal() {
6        // Verificar si el modal ya existe
7        if (document.getElementById('servicioExtranjeroModal')) {
8            return;
9        }
10
11        const modalHTML = `
12            <div id="servicioExtranjeroModal" class="servicio-extranjero-modal" style="display: none;">
13                <div class="servicio-extranjero-modal-overlay"></div>
14                <div class="servicio-extranjero-modal-content">
15                    <div class="servicio-extranjero-modal-icon">
16                        <img src="/wp-content/uploads/2026/05/check-circle.png" alt="Success">
17                    </div>
18                    <h3 class="servicio-extranjero-modal-title">Su solicitud ha sido enviada</h3>
19                    <p class="servicio-extranjero-modal-subtitle">Será contactado en un plazo de 24-48 horas.</p>
20                    <div class="servicio-extranjero-modal-contact">
21                        <p class="contact-label">Ante dudas, puede contactarnos:</p>
22                        <p class="contact-email">[email protected]</p>
23                        <p class="contact-phone"><i class="fa-solid fa-phone"></i> 338-3434 opción 2</p>
24                    </div>
25                    <button type="button" class="servicio-extranjero-modal-button" id="servicioExtranjeroModalButton">Aceptar</button>
26                </div>
27            </div>
28        `;
29
30        // Agregar el modal al body
31        document.body.insertAdjacentHTML('beforeend', modalHTML);
32
33        // Agregar event listener al botón
34        const modalButton = document.getElementById('servicioExtranjeroModalButton');
35        if (modalButton) {
36            modalButton.addEventListener('click', closeServicioExtranjeroModal);
37        }
38
39        // Cerrar modal al hacer clic en el overlay
40        const overlay = document.querySelector('.servicio-extranjero-modal-overlay');
41        if (overlay) {
42            overlay.addEventListener('click', closeServicioExtranjeroModal);
43        }
44    }
45
46    // Función para crear el modal de Premium
47    function createPremiumModal() {
48        // Verificar si el modal ya existe
49        if (document.getElementById('premiumModal')) {
50            return;
51        }
52
53        const modalHTML = `
54            <div id="premiumModal" class="premium-modal" style="display: none;">
55                <div class="premium-modal-overlay"></div>
56                <div class="premium-modal-content">
57                    <div class="premium-modal-icon">
58                        <img src="/wp-content/uploads/2026/05/check-circle.png" alt="Success">
59                    </div>
60                    <h3 class="premium-modal-title">Su solicitud ha sido enviada</h3>
61                    <p class="premium-modal-subtitle">Será contactado en un plazo de 24-48 horas.</p>
62                    <div class="premium-modal-contact">
63                        <p class="contact-label">Ante dudas, puede contactarnos:</p>
64                        <p class="contact-email">[email protected]</p>
65                        <p class="contact-phone"><i class="fa-solid fa-phone"></i> 338-3434 opción 2</p>
66                    </div>
67                    <button type="button" class="premium-modal-button" id="premiumModalButton">Aceptar</button>
68                </div>
69            </div>
70        `;
71
72        // Agregar el modal al body
73        document.body.insertAdjacentHTML('beforeend', modalHTML);
74
75        // Agregar event listener al botón
76        const modalButton = document.getElementById('premiumModalButton');
77        if (modalButton) {
78            modalButton.addEventListener('click', closePremiumModal);
79        }
80
81        // Cerrar modal al hacer clic en el overlay
82        const overlay = document.querySelector('.premium-modal-overlay');
83        if (overlay) {
84            overlay.addEventListener('click', closePremiumModal);
85        }
86    }
87
88    // Función para mostrar el modal de Servicio Extranjero
89    function showServicioExtranjeroModal() {
90        createServicioExtranjeroModal();
91        
92        const modal = document.getElementById('servicioExtranjeroModal');
93        if (modal) {
94            modal.style.display = 'flex';
95            document.body.style.overflow = 'hidden';
96        }
97    }
98
99    // Función para mostrar el modal Premium

100    function showPremiumModal() {
101        createPremiumModal();
102        
103        const modal = document.getElementById('premiumModal');
104        if (modal) {
105            modal.style.display = 'flex';
106            document.body.style.overflow = 'hidden';
107        }
108    }
109
110    // Función para cerrar el modal de Servicio Extranjero
111    function closeServicioExtranjeroModal() {
112        const modal = document.getElementById('servicioExtranjeroModal');
113        if (modal) {
114            modal.style.display = 'none';
115            document.body.style.overflow = '';
116            window.location.reload();
117        }
118    }
119
120    // Función para cerrar el modal Premium
121    function closePremiumModal() {
122        const modal = document.getElementById('premiumModal');
123        if (modal) {
124            modal.style.display = 'none';
125            document.body.style.overflow = '';
126            window.location.reload();
127        }
128    }
129
130    // Función para crear el modal de Certificaciones
131    function createCertificacionesModal() {
132        // Verificar si el modal ya existe
133        if (document.getElementById('certificacionesModal')) {
134            return;
135        }
136
137        const modalHTML = `
138            <div id="certificacionesModal" class="certificaciones-modal" style="display: none;">
139                <div class="certificaciones-modal-overlay"></div>
140                <div class="certificaciones-modal-content">
141                    <div class="certificaciones-modal-icon">
142                        <img src="/wp-content/uploads/2026/05/check-circle.png" alt="Success">
143                    </div>
144                    <h3 class="certificaciones-modal-title">Su solicitud ha sido enviada</h3>
145                    <p class="certificaciones-modal-subtitle">Tu certificación será enviada al correo o teléfono proporcionado en un plazo de 24 a 48 horas hábiles</p>
146                    <div class="certificaciones-modal-contact">
147                        <p class="contact-label">Ante dudas, puede contactarnos:</p>
148                        <p class="contact-email">[email protected]</p>
149                        <p class="contact-phone"><i class="fa-solid fa-phone"></i> 338-3434 opción 2</p>
150                    </div>
151                    <button type="button" class="certificaciones-modal-button" id="certificacionesModalButton">Aceptar</button>
152                </div>
153            </div>
154        `;
155
156        // Agregar el modal al body
157        document.body.insertAdjacentHTML('beforeend', modalHTML);
158
159        // Agregar event listener al botón
160        const modalButton = document.getElementById('certificacionesModalButton');
161        if (modalButton) {
162            modalButton.addEventListener('click', closeCertificacionesModal);
163        }
164
165        // Cerrar modal al hacer clic en el overlay
166        const overlay = document.querySelector('.certificaciones-modal-overlay');
167        if (overlay) {
168            overlay.addEventListener('click', closeCertificacionesModal);
169        }
170    }
171
172    // Función para mostrar el modal de Certificaciones
173    function showCertificacionesModal() {
174        createCertificacionesModal();
175        
176        const modal = document.getElementById('certificacionesModal');
177        if (modal) {
178            modal.style.display = 'flex';
179            document.body.style.overflow = 'hidden';
180        }
181    }
182
183    // Función para cerrar el modal de Certificaciones
184    function closeCertificacionesModal() {
185        const modal = document.getElementById('certificacionesModal');
186        if (modal) {
187            modal.style.display = 'none';
188            document.body.style.overflow = '';
189            window.location.reload();
190        }
191    }
192
193    // MODAL DE CARNET
194    function createCarnetModal() {
195        if (document.getElementById('carnetModal')) return;
196        const modalHTML = `<div id="carnetModal" class="carnet-modal" style="display: none;"><div class="carnet-modal-overlay"></div><div class="carnet-modal-content"><div class="carnet-modal-icon"><img src="/wp-content/uploads/2026/05/check-circle.png" alt="Success"></div><h3 class="carnet-modal-title">

196Su solicitud ha sido enviada</h3><p class="carnet-modal-subtitle">Será contactado en un plazo de 24-48 horas.</p><div class="carnet-modal-contact"><p class="contact-label">Ante dudas, puede contactarnos:</p><p class="contact-email">[email protected]</p><p class="contact-phone"><i class="fa-solid fa-phone"></i> 338-3434 opción 2</p></div><button type="button" class="carnet-modal-button" id="carnetModalButton">Aceptar</button></div></div>`;
197        document.body.insertAdjacentHTML('beforeend', modalHTML);
198        document.getElementById('carnetModalButton').addEventListener('click', closeCarnetModal);
199        document.querySelector('.carnet-modal-overlay').addEventListener('click', closeCarnetModal);
200    }
201
202    function showCarnetModal() {
203        createCarnetModal();
204        const modal = document.getElementById('carnetModal');
205        if (modal) {
206            modal.style.display = 'flex';
207            document.body.style.overflow = 'hidden';
208        }
209    }
210
211    function closeCarnetModal() {
212        const modal = document.getElementById('carnetModal');
213        if (modal) {
214            modal.style.display = 'none';
215            document.body.style.overflow = '';
216            window.location.reload();
217        }
218    }
219
220    // Detectar cuando Contact Form 7 envía el formulario exitosamente
221    document.addEventListener('wpcf7mailsent', function(event) {
222        const form = event.target;
223        
224        // Verificar si es el formulario de Global Health Servicio Extranjero
225        const servicioExtranjeroContainer = form.querySelector('.global-health-servicio-extranjero-form');
226        const isServicioExtranjeroForm = servicioExtranjeroContainer !== null;
227        
228        // Verificar si es el formulario de Certificaciones
229        const certificacionesContainer = form.querySelector('.global-health-certificaciones-form');
230        const isCertificacionesForm = certificacionesContainer !== null;
231        
232        // Verificar si es el formulario de Carnet
233        const carnetContainer = form.querySelector('.carnet-solicitud-form');
234        const isCarnetForm = carnetContainer !== null;
235        
236        // Verificar si es el formulario Premium (sin las otras clases)
237        const globalHealthContainer = form.querySelector('.global-health-form');
238        const isPremiumForm = globalHealthContainer !== null && !isServicioExtranjeroForm && !isCertificacionesForm && !isCarnetForm;
239        
240        if (isServicioExtranjeroForm) {
241            // Ocultar el mensaje de éxito de Contact Form 7
242            const responseOutput = form.querySelector('.wpcf7-response-output');
243            if (responseOutput) {
244                responseOutput.style.display = 'none';
245            }
246            
247            // Mostrar el modal de Servicio Extranjero
248            showServicioExtranjeroModal();
249        } else if (isCertificacionesForm) {
250            // Ocultar el mensaje de éxito de Contact Form 7
251            const responseOutput = form.querySelector('.wpcf7-response-output');
252            if (responseOutput) {
253                responseOutput.style.display = 'none';
254            }
255            
256            // Mostrar el modal de Certificaciones
257            showCertificacionesModal();
258        } else if (isCarnetForm) {
259            // Ocultar el mensaje de éxito de Contact Form 7
260            const responseOutput = form.querySelector('.wpcf7-response-output');
261            if (responseOutput) {
262                responseOutput.style.display = 'none';
263            }
264            
265            // Mostrar el modal de Carnet
266            showCarnetModal();
267        } else if (isPremiumForm) {
268            // Ocultar el mensaje de éxito de Contact Form 7
269            const responseOutput = form.querySelector('.wpcf7-response-output');
270            if (responseOutput) {
271                responseOutput.style.display = 'none';
272            }
273            
274            // Mostrar el modal Premium
275            showPremiumModal();
276        }
277    }, false);
278
279    // Cerrar modales con la tecla ESC
280    document.addEventListener('keydown', function(e) {
281        if (e.key === 'Escape') {
282            const servicioExtranjeroModal = document.getElementById('servicioExtranjeroModal');
283            if (servicioExtranjeroModal && servicioExtranjeroModal.style.display === 'flex') {
284                closeServicioExtranjeroModal();
285            }
286            

287            const premiumModal = document.getElementById('premiumModal');
288            if (premiumModal && premiumModal.style.display === 'flex') {
289                closePremiumModal();
290            }
291            
292            const certificacionesModal = document.getElementById('certificacionesModal');
293            if (certificacionesModal && certificacionesModal.style.display === 'flex') {
294                closeCertificacionesModal();
295            }
296        }
297    });
298})();