Merge branch 'CNCI-1288-fix-error-null-data' into 'dev'

fix: error data null

See merge request !2

faq.html

@@ -384,59 +384,47 @@
     <div id="preloader"></div>
 
     <script>
-      const toggles = document.querySelectorAll('.cardToggle');
-
-      toggles.forEach((toggle) => {
-        toggle.addEventListener('click', function (e) {
-          e.preventDefault();
-
-          const pfCard = this.closest('.pf-card');
-          const contentCard = pfCard.querySelector('.content-card');
-          const iconDown = pfCard.querySelector('.icon-down');
-          const iconUp = pfCard.querySelector('.icon-up');
-          const titleCard = pfCard.querySelector('.titleCard');
-
-          contentCard.classList.toggle('open');
-          iconDown.classList.toggle('close');
-          iconUp.classList.toggle('open');
-          pfCard.classList.toggle('open');
-          titleCard.classList.toggle('open');
-        });
-      });
-    </script>
-
-    <script>
       fetch('https://promofenix.com/api/module_landing/getModuleLanding')
         .then((response) => response.json())
         .then((data) => {
-          const faqsContainer = document.querySelector(
-            '.preguntas-frecuentes-2'
-          );
-          faqsContainer.innerHTML = ''; // Limpiamos el contenedor
-
-          const faqsOrdenadas = data.data.faqs
-            .filter((faq) => faq.status === true)
-            .sort((a, b) => a.id - b.id); // Orden por ID ascendente
-
-          faqsOrdenadas.forEach((faq) => {
-            const pfCard = document.createElement('div');
-            pfCard.classList.add('pf-card');
-
-            pfCard.innerHTML = `
-          <div>
-            <h1 class="titleCard">${faq.question}</h1>
-            <a href="#" class="cardToggle">
-              <i class="bi bi-caret-down-fill icon-down"></i>
-              <i class="bi bi-caret-up-fill icon-up"></i>
-            </a>
-          </div>
-          <span class="content-card">${faq.answer.replace(/\n/g, '<br>')}</span>
-        `;
-
-            faqsContainer.appendChild(pfCard);
-          });
-
-          // Volver a agregar los listeners para el toggle
+          const faqsContainer = document.querySelector('.preguntas-frecuentes-2');
+    
+          if (
+            faqsContainer &&
+            Array.isArray(data.data.faqs) &&
+            data.data.faqs.length > 0
+          ) {
+            faqsContainer.innerHTML = ''; // Limpiar solo si vienen datos
+    
+            const faqsOrdenadas = data.data.faqs
+              .filter((faq) => faq.status === true)
+              .sort((a, b) => a.id - b.id);
+    
+            faqsOrdenadas.forEach((faq) => {
+              const pfCard = document.createElement('div');
+              pfCard.classList.add('pf-card');
+    
+              const pregunta = faq.question || 'Sin título';
+              const respuesta = faq.answer
+                ? faq.answer.replace(/\n/g, '<br>')
+                : 'Sin respuesta disponible';
+    
+              pfCard.innerHTML = `
+                <div>
+                  <h1 class="titleCard">${pregunta}</h1>
+                  <a href="#" class="cardToggle">
+                    <i class="bi bi-caret-down-fill icon-down"></i>
+                    <i class="bi bi-caret-up-fill icon-up"></i>
+                  </a>
+                </div>
+                <span class="content-card">${respuesta}</span>
+              `;
+    
+              faqsContainer.appendChild(pfCard);
+            });
+          }
+    
+          // 🔁 Esta parte se ejecuta SIEMPRE (ya sea que vengan FAQs o se muestren los estáticos)
           const toggles = document.querySelectorAll('.cardToggle');
           toggles.forEach((toggle) => {
             toggle.addEventListener('click', function (e) {
@@ -446,7 +434,7 @@
               const iconDown = pfCard.querySelector('.icon-down');
               const iconUp = pfCard.querySelector('.icon-up');
               const titleCard = pfCard.querySelector('.titleCard');
-
+    
               contentCard.classList.toggle('open');
               iconDown.classList.toggle('close');
               iconUp.classList.toggle('open');
@@ -457,8 +445,29 @@
         })
         .catch((error) => {
           console.error('Error al obtener las FAQs:', error);
+    
+          // 🔁 Aseguramos que los toggles funcionen incluso si hay error en la API
+          const toggles = document.querySelectorAll('.cardToggle');
+          toggles.forEach((toggle) => {
+            toggle.addEventListener('click', function (e) {
+              e.preventDefault();
+              const pfCard = this.closest('.pf-card');
+              const contentCard = pfCard.querySelector('.content-card');
+              const iconDown = pfCard.querySelector('.icon-down');
+              const iconUp = pfCard.querySelector('.icon-up');
+              const titleCard = pfCard.querySelector('.titleCard');
+    
+              contentCard.classList.toggle('open');
+              iconDown.classList.toggle('close');
+              iconUp.classList.toggle('open');
+              pfCard.classList.toggle('open');
+              titleCard.classList.toggle('open');
+            });
+          });
         });
     </script>
+    
+    
 
     <!-- Vendor JS Files -->
     <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
@@ -470,22 +479,6 @@
     <script src="assets/vendor/php-email-form/validate.js"></script>
 
     <!-- Template Main JS File -->
-    <script>
-      // Realizamos la petición a la API usando fetch
-      fetch('https://promofenix.com/api/module_landing/getModuleLanding')
-        .then((response) => response.json())
-        .then((data) => {
-          // Actualizamos las imágenes dinámicamente
-          document.getElementById('portada-img').src =
-            data.data.portada.image_path;
-          document.getElementById('seccion1-img').src =
-            data.data.seccion1.image_path;
-          document.getElementById('seccion2-img').src =
-            data.data.seccion2.image_path;
-        })
-        .catch((error) => {
-          console.error('Error al obtener los datos de la API:', error);
-        });
     </script>
     <script src="assets/js/main.js"></script>
     <script>

index.html

@@ -70,20 +70,6 @@
     <!-- End Header -->
     <!-- End Header -->
 
-    <!-- Menú desplegable -->
-    <nav id="sideMenu" class="side-menu">
-      <div class="side-menu-content">
-        <div class="side-options"
-          ><a href="index.html">¿Qué es PROMOFÉNIX?</a></div
-        >
-        <div class="side-options"
-          ><a href="#">Programa de bonificaciones</a></div
-        >
-        <div class="side-options"><a href="#">Experiencias PROMOFÉNIX</a></div>
-        <div class="side-options"><a href="#">Registrar referido</a></div>
-      </div>
-    </nav>
-
     <!-- ======= Hero Section ======= -->
     <section id="hero" class="hero">
       <div class="">
@@ -329,16 +315,6 @@
 
     <div id="preloader"></div>
 
-    <script>
-      const toggleButton = document.getElementById('menuToggle');
-      const sideMenu = document.getElementById('sideMenu');
-
-      toggleButton.addEventListener('click', function (e) {
-        e.preventDefault();
-        sideMenu.classList.toggle('open');
-      });
-    </script>
-
     <!-- Vendor JS Files -->
     <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
     <script src="assets/vendor/aos/aos.js"></script>
@@ -353,50 +329,72 @@
       fetch('https://promofenix.com/api/module_landing/getModuleLanding')
         .then((response) => response.json())
         .then((data) => {
-          // ✅ Actualiza imágenes y videos
-          document.getElementById('portada-img').src =
-            data.data.portada.image_path;
-          document.getElementById('seccion1-img').src =
-            data.data.seccion1.image_path;
-          document.getElementById('seccion2-img').src =
-            data.data.seccion2.image_path;
+          // ✅ Validación segura para cada sección
+
+          const portadaImg = document.getElementById('portada-img');
+          if (data.data.portada?.image_path) {
+            portadaImg.src = data.data.portada.image_path;
+          }
+
+          const seccion1Img = document.getElementById('seccion1-img');
+          if (data.data.seccion1?.image_path) {
+            seccion1Img.src = data.data.seccion1.image_path;
+          }
+
+          const seccion2Img = document.getElementById('seccion2-img');
+          if (data.data.seccion2?.image_path) {
+            seccion2Img.src = data.data.seccion2.image_path;
+          }
 
           const videoTestimonial = document.getElementById('video-testimonial');
-          videoTestimonial.src = data.data.videotestimonio.image_path;
-          videoTestimonial.poster = data.data.testimonio.image_path;
+          if (data.data.videotestimonio?.image_path) {
+            videoTestimonial.src = data.data.videotestimonio.image_path;
+          }
+          if (data.data.testimonio?.image_path) {
+            videoTestimonial.poster = data.data.testimonio.image_path;
+          }
 
           const videoTutorial1 = document.getElementById('video-tutorial1');
-          videoTutorial1.src = data.data.videotutorial1.image_path;
-          videoTutorial1.poster = data.data.tutorial1.image_path;
+          if (data.data.videotutorial1?.image_path) {
+            videoTutorial1.src = data.data.videotutorial1.image_path;
+          }
+          if (data.data.tutorial1?.image_path) {
+            videoTutorial1.poster = data.data.tutorial1.image_path;
+          }
 
           const videoTutorial2 = document.getElementById('video-tutorial2');
-          videoTutorial2.src = data.data.videotutorial2.image_path;
-          videoTutorial2.poster = data.data.tutorial2.image_path;
+          if (data.data.videotutorial2?.image_path) {
+            videoTutorial2.src = data.data.videotutorial2.image_path;
+          }
+          if (data.data.tutorial2?.image_path) {
+            videoTutorial2.poster = data.data.tutorial2.image_path;
+          }
 
-          // ✅ INSERTAR SOLO LAS 3 PRIMERAS FAQS
+          // ✅ Mostrar FAQs si existen
           const faqsContainer = document.querySelector('.faq-s-2');
-          faqsContainer.innerHTML = '';
-
-          const faqs = data.data.faqs.slice(0, 3); // Solo 3 preguntas
+          if (Array.isArray(data.data.faqs) && data.data.faqs.length > 0) {
+            faqsContainer.innerHTML = '';
 
-          faqs.forEach((faq) => {
-            const div = document.createElement('div');
-            div.classList.add('faq-s-table');
+            const faqs = data.data.faqs.slice(0, 3);
+            faqs.forEach((faq) => {
+              const div = document.createElement('div');
+              div.classList.add('faq-s-table');
 
-            const h1 = document.createElement('h1');
-            h1.textContent = faq.question;
+              const h1 = document.createElement('h1');
+              h1.textContent = faq.question || 'Sin título';
 
-            const p = document.createElement('p');
-            const respuestaCorta =
-              faq.answer.length > 240
-                ? faq.answer.slice(0, 240) + '...'
-                : faq.answer;
-            p.textContent = respuestaCorta;
+              const p = document.createElement('p');
+              const respuestaCorta =
+                faq.answer && faq.answer.length > 240
+                  ? faq.answer.slice(0, 240) + '...'
+                  : faq.answer || 'Sin respuesta';
+              p.textContent = respuestaCorta;
 
-            div.appendChild(h1);
-            div.appendChild(p);
-            faqsContainer.appendChild(div);
-          });
+              div.appendChild(h1);
+              div.appendChild(p);
+              faqsContainer.appendChild(div);
+            });
+          }
         })
         .catch((error) => {
           console.error('Error al obtener los datos de la API:', error);