Lead managment, and best practices with reload routes

.gitignore

@@ -51,4 +51,7 @@ peticiones
 /playwright/.cache/
 
 # TypeScript cache
-*.tsbuildinfo
+*.tsbuildinfo
+
+# Documents
+.pdf

client/index.html

@@ -41,4 +41,18 @@
       }
     });
   </script>
+  <!-- Mailchimp Script -->
+  <script id="mcjs">
+    !(function (c, h, i, m, p) {
+      (m = c.createElement(h)),
+        (p = c.getElementsByTagName(h)[0]),
+        (m.async = 1),
+        (m.src = i),
+        p.parentNode.insertBefore(m, p);
+    })(
+      document,
+      'script',
+      'https://chimpstatic.com/mcjs-connected/js/users/f7935ca15719c2730014aaf2e/9275e8c2804ab2c2ba5d2a2b6.js'
+    );
+  </script>
 </html>

client/package.json

@@ -18,7 +18,8 @@
     "react-helmet-async": "^2.0.5",
     "react-hot-toast": "^2.4.1",
     "react-router": "^6.24.1",
-    "react-router-dom": "^6.24.1"
+    "react-router-dom": "^6.24.1",
+    "uuid": "^11.0.5"
   },
   "devDependencies": {
     "@firebase/app-types": "^0.9.3",

client/src/pages/Blog.tsx

@@ -1,12 +1,12 @@
 import CardPublicationBlog from '@/components/pages-components/blog/CardPublicationBlog';
 import FormPublication from '@/components/pages-components/blog/FormPublication';
 import { handleChangeModal } from '@/scripts/modal';
-import { useEffect, useState } from 'react';
+import PaginationReactBoostrap from '@/components/pages-components/blog/Pagination';
+import { useEffect, useRef, useState } from 'react';
 import { getPublications } from '@/scripts/render-data';
-import { type PublicationCardType } from 'types/types';
 import { Helmet } from 'react-helmet-async';
-import PaginationReactBoostrap from '@/components/pages-components/blog/Pagination';
 import { useNavigate, useParams } from 'react-router';
+import { type PublicationCardType } from 'types/types';
 import '@/styles/main-blog.css';
 
 const Blog = () => {
@@ -44,10 +44,19 @@ const Blog = () => {
     }
   };
 
-  // Cargar las publicaciones
+  // Añadir referencia de carga para evitar doble carga
+  const isInitialMount = useRef(true);
+  const prevPage = useRef(page);
+
   useEffect(() => {
-    if (page && cardsBlog.length == 0) fetchPublications(page);
-  }, [page, cardsBlog.length]);
+    if (isInitialMount.current && page) {
+      fetchPublications(page);
+      isInitialMount.current = false;
+    } else if (prevPage.current !== page && page) {
+      fetchPublications(page);
+    }
+    prevPage.current = page;
+  }, [page]);
 
   return (
     <>

client/src/pages/Newsletter.tsx

@@ -29,6 +29,7 @@ const Newsletter = () => {
     newsletter: false,
     mailchimp: false,
   });
+  const leadmanagment = useRef(true);
 
   const [active, setActive] = useState(false);
 
@@ -81,14 +82,17 @@ const Newsletter = () => {
     // Tags de mailchimp
     let tags: OptionsChampTag[] = [];
 
-    // Obtenemos el UID de Firebase
-    const uuidFB = await fetchGetUidByEmail(form.email);
+    // Obtenemos el UID de Firebase aurthentication
+    const uuidFB: { uid: string } | null = await fetchGetUidByEmail(form.email);
+
+    // Si existe el usuario en Firebase autentication
     if (uuidFB && uuidFB?.uid) {
-      // Actualizamos las tags del usuario por si ya tiene una clase asignada por apuntarse a cursos con anterioridad
+      // Obtenemos el usuario de firebase database
       const userFB = await getUserDB(uuidFB.uid);
+
+      // Si el usuario tiene angun tag le asignamos el tag al usuario de mailchimp
       if (userFB !== null && userFB.class) tags = userFB.class;
     }
-
     // Creamos el objeto de miembro
     const member: Member = {
       email_address: form.email,
@@ -113,6 +117,16 @@ const Newsletter = () => {
 
     // Enviando la suscripción a la API de Mailchimp
     await submitSubscriptionMailchimp(member);
+
+    // Descargar lead managment
+    if (leadmanagment.current) {
+      const link = document.createElement('a');
+      link.href = '/pdf/lead-managment-tfsh.pdf';
+      link.download = 'lead-managment-tfsh.pdf';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
   };
 
   // Función para manejar el scroll del boton de download de la página
@@ -128,6 +142,20 @@ const Newsletter = () => {
       const elementPosition = targetElement.getBoundingClientRect().top;
       const offsetPosition = elementPosition + window.pageYOffset - offset;
 
+      toast(
+        <span>
+          It is necessary to <b>subscribe to the newsletter before</b>
+        </span>,
+        {
+          duration: 10000,
+          icon: 'ℹ️',
+          style: {
+            outline: '2px solid var(--primary-blue)',
+          },
+        }
+      );
+
+      leadmanagment.current = true;
       window.scrollTo({
         top: offsetPosition,
         behavior: 'smooth',
@@ -309,8 +337,13 @@ const Newsletter = () => {
                     className={subscribed && !form.privacy ? 'required' : ''}
                   >
                     I have read and accept the{' '}
-                    <a href="/info">privacy policy</a> and{' '}
-                    <a href="/info">terms and conditions</a>
+                    <a href="/info" target="_blank">
+                      privacy policy
+                    </a>{' '}
+                    and{' '}
+                    <a href="/info" target="_blank">
+                      terms and conditions
+                    </a>
                   </label>
                 </div>
                 <div className="checkbox-group">

client/src/scripts/firebase-db.tsx

@@ -101,7 +101,7 @@ function addTag(userId: string, newSubscriber: SubscriberType) {
 }
 
 // Función para obtener un usuario de la DB
-export async function getUserDB(userId: string) {
+export async function getUserDB(userId: string): Promise<any> {
   const userRef = ref(dbFirebase, 'usuarios/' + userId);
 
   // Si el usuario existe, obtenemos sus datos
@@ -110,8 +110,8 @@ export async function getUserDB(userId: string) {
       if (snapshot.exists()) return snapshot.val();
       else return null;
     })
-    .catch((error) => {
-      console.error('Error al obtener los datos del usuario:', error);
+    .catch(() => {
+      return null;
     });
 }
 

client/src/scripts/render-data.tsx

@@ -13,6 +13,7 @@ import {
   type InterestResponse,
   type SubscriberType,
 } from 'types/types';
+import { User } from 'firebase/auth';
 
 const helper = Helper();
 
@@ -83,14 +84,13 @@ export const getMailchimpUser = async (email: string) => {
 
 export const fetchGetUidByEmail = async (
   email: string
-): Promise<{ uid: string } | undefined> => {
+): Promise<{ uid: string } | null> => {
   try {
-    return (await helper.get(`${url_api}/firebase/user/${email}`)) as {
-      uid: string;
-    };
+    const uuid = await helper.get(`${url_api}/firebase/user/${email}`);
+    return uuid as { uid: string };
   } catch (error) {
     // El usuario no existe en la base de datos algo normal ya que puede no haberse inscrito a una clase y querer entrar en la new
-    return;
+    return null;
   }
 };
 

client/vercel.json

@@ -0,0 +1,7 @@
+{
+  "rewrites": [
+    { "source": "/robots.txt", "destination": "/public/robots.txt" },
+    { "source": "/sitemap.xml", "destination": "/public/sitemap.xml" },
+    { "source": "/(.*)", "destination": "/" }
+  ]
+}

server/lib/resend/resend.ts

@@ -48,7 +48,7 @@ export async function submitEmailStudent(newstudent: SubscriberType) {
       html: `<html>
         <body style="font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; margin: 0; padding: 20px;">
           <div style="background-color: #fff; padding: 20px; max-width: 1000px; margin: 20px auto; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
-            <h1 style="text-align: center; color: #2a8cff;">The Fuent Spanish House</h1>
+            <h1 style="text-align: center; color: #2a8cff;">TheFuentSpanishHouse</h1>
             <h3 style="text-align: center; color: #2a8cff;">New Student Request</h3>
             <p style="font-size: 16px; line-height: 1.6;">The user <b style="color: #2a8cff;">${newstudent.name} ${newstudent.lastname}</b> with email <b style="color: #2a8cff;">${newstudent.email}</b> wants to be a new student:</p>
             <p style="font-size: 16px; line-height: 1.6;">They would like to sign up for <b style="color: #2a8cff;">${newstudent.class}</b>.</p>
@@ -73,7 +73,7 @@ export async function submitEmailComment(note: NoteType, originUrl: string) {
       html: `<html>
         <body style="font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; margin: 0; padding: 20px;">
           <div style="background-color: #fff; padding: 20px; max-width: 1000px; margin: 20px auto; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
-               <h1 style="text-align: center; color: #2a8cff;">The Fuent Spanish House</h1>
+               <h1 style="text-align: center; color: #2a8cff;">TheFuentSpanishHouse</h1>
             <h3 style="text-align: center; color: #2a8cff;">New Message from ${note.username}</h3>
             <p style="font-size: 16px; line-height: 1.6;">The user <strong style="color: #2a8cff;">${note.username} ${note.email_user}</strong> says:</p>
             <p style="font-size: 16px; line-height: 1.6; background-color: #f9f9f9; padding: 10px; border-left: 4px solid #2a8cff; margin-top: 10px;">${note.note}</p>

server/routes/publications.ts

@@ -77,7 +77,6 @@ router.get('/:id', log, verifyIdToken, async (req: Request, res: Response) => {
 // Añadir nuevas publicaciones
 router.post('/new', log, verifyIdToken, async (req: Request, res: Response) => {
   const newPublication: PublicationCardType = req.body;
-
   try {
     // Validaciones
     if (