@kaikybrofc/omnizap-system 2.2.10 → 2.3.1

package/public/js/apps/homeApp.js

@@ -1,4 +1,40 @@
 const FALLBACK_THUMB_URL = '/assets/images/brand-logo-128.webp';
+const HOME_BOOTSTRAP_ENDPOINT = '/api/sticker-packs/home-bootstrap';
+const SVG_NS = 'http://www.w3.org/2000/svg';
+let homeBootstrapPayloadPromise = null;
+
+const fetchHomeBootstrapPayload = async () => {
+  if (!homeBootstrapPayloadPromise) {
+    homeBootstrapPayloadPromise = fetch(HOME_BOOTSTRAP_ENDPOINT, { credentials: 'include' })
+      .then((response) => {
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        return response.json();
+      })
+      .then((payload) => payload?.data || {})
+      .catch((error) => {
+        homeBootstrapPayloadPromise = null;
+        throw error;
+      });
+  }
+  return homeBootstrapPayloadPromise;
+};
+
+const createIcon = (iconId, className = 'icon') => {
+  const wrapper = document.createElement('span');
+  wrapper.className = className;
+  wrapper.setAttribute('aria-hidden', 'true');
+
+  const svg = document.createElementNS(SVG_NS, 'svg');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('focusable', 'false');
+
+  const use = document.createElementNS(SVG_NS, 'use');
+  use.setAttribute('href', `#${iconId}`);
+
+  svg.appendChild(use);
+  wrapper.appendChild(svg);
+  return wrapper;
+};
 
 const shortNum = (value) =>
   new Intl.NumberFormat('pt-BR', {
@@ -101,7 +137,21 @@ const initNavToggle = () => {
     toggle.setAttribute('aria-expanded', 'false');
   };
 
-  const onClick = () => {
+  const onClick = (event) => {
+    if (toggle.classList.contains('nav-toggle-login')) {
+      if (event) event.preventDefault();
+      closeMenu();
+      const loginUrl = String(toggle.dataset.loginUrl || '/login/').trim() || '/login/';
+      window.location.assign(loginUrl);
+      return;
+    }
+    if (toggle.classList.contains('nav-toggle-user')) {
+      if (event) event.preventDefault();
+      closeMenu();
+      const profileUrl = String(toggle.dataset.profileUrl || '/user/').trim() || '/user/';
+      window.location.assign(profileUrl);
+      return;
+    }
     const isOpen = nav.classList.toggle('open');
     toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
   };
@@ -127,38 +177,153 @@ const initNavToggle = () => {
 
 const initAuthSession = () => {
   const authLink = document.getElementById('nav-auth-link');
-  const heroLoginCta = document.getElementById('hero-login-cta');
-  const finalLoginCta = document.getElementById('final-login-cta');
+  const schedulerLink = document.getElementById('nav-scheduler-link');
+  const navToggle = document.getElementById('nav-toggle');
   if (!authLink) return null;
 
+  const mobileQuery = typeof window.matchMedia === 'function' ? window.matchMedia('(max-width: 920px)') : null;
+  let currentSessionData = null;
+  let isAuthenticated = false;
+  const isMobileViewport = () => {
+    const byMedia = Boolean(mobileQuery?.matches);
+    const viewportWidth = Math.max(Number(window.innerWidth || 0), Number(document.documentElement?.clientWidth || 0));
+    return byMedia || (viewportWidth > 0 && viewportWidth <= 920);
+  };
+  const schedulerDefaultHref = String(schedulerLink?.getAttribute('href') || '#beneficios').trim() || '#beneficios';
+  const schedulerDefaultLabel = String(schedulerLink?.textContent || 'Benefícios').trim() || 'Benefícios';
+  const navToggleDefaultLabel = String(navToggle?.textContent || '☰').trim() || '☰';
+
   const clearChildren = (node) => {
     while (node.firstChild) node.removeChild(node.firstChild);
   };
 
+  const setSchedulerDefaultState = () => {
+    if (!schedulerLink) return;
+    schedulerLink.classList.remove('nav-user-chip');
+    schedulerLink.href = schedulerDefaultHref;
+    schedulerLink.removeAttribute('title');
+    schedulerLink.removeAttribute('aria-label');
+    clearChildren(schedulerLink);
+    schedulerLink.append(document.createTextNode(schedulerDefaultLabel));
+  };
+
+  const setToggleDefaultState = () => {
+    if (!navToggle) return;
+    navToggle.classList.remove('nav-toggle-user', 'nav-toggle-login');
+    delete navToggle.dataset.profileUrl;
+    delete navToggle.dataset.loginUrl;
+    navToggle.setAttribute('aria-label', 'Abrir menu');
+    navToggle.setAttribute('aria-controls', 'main-nav');
+    navToggle.setAttribute('aria-expanded', 'false');
+    clearChildren(navToggle);
+    navToggle.append(document.createTextNode(navToggleDefaultLabel));
+  };
+
+  const setToggleLoginState = () => {
+    if (!navToggle) return;
+    navToggle.classList.remove('nav-toggle-user');
+    navToggle.classList.add('nav-toggle-login');
+    delete navToggle.dataset.profileUrl;
+    navToggle.dataset.loginUrl = '/login/';
+    navToggle.setAttribute('aria-label', 'Entrar');
+    navToggle.removeAttribute('aria-controls');
+    navToggle.removeAttribute('aria-expanded');
+    clearChildren(navToggle);
+    navToggle.append(document.createTextNode('Entrar'));
+  };
+
+  const setSchedulerAsUserBubble = (sessionData) => {
+    if (!schedulerLink) return;
+
+    const profile = sessionData?.user || {};
+    const resolvedName = String(profile?.name || profile?.email || 'Conta Google').trim() || 'Conta Google';
+    const resolvedPhoto = String(profile?.picture || '').trim() || FALLBACK_THUMB_URL;
+
+    schedulerLink.classList.add('nav-user-chip');
+    schedulerLink.href = '/user/';
+    schedulerLink.title = `${resolvedName} (sessão ativa)`;
+    schedulerLink.setAttribute('aria-label', `Sessão ativa de ${resolvedName}`);
+    clearChildren(schedulerLink);
+
+    const avatarBubble = document.createElement('span');
+    avatarBubble.className = 'nav-user-avatar-bubble';
+
+    const photo = document.createElement('img');
+    photo.className = 'nav-user-photo';
+    photo.src = resolvedPhoto;
+    photo.alt = `Foto de ${resolvedName}`;
+    photo.loading = 'lazy';
+    photo.decoding = 'async';
+    photo.width = 34;
+    photo.height = 34;
+    photo.onerror = () => {
+      photo.src = FALLBACK_THUMB_URL;
+    };
+    avatarBubble.appendChild(photo);
+    schedulerLink.append(avatarBubble);
+  };
+
+  const setToggleAsUserBubble = (sessionData) => {
+    if (!navToggle) return;
+
+    const profile = sessionData?.user || {};
+    const resolvedName = String(profile?.name || profile?.email || 'Conta Google').trim() || 'Conta Google';
+    const resolvedPhoto = String(profile?.picture || '').trim() || FALLBACK_THUMB_URL;
+
+    navToggle.classList.remove('nav-toggle-login');
+    navToggle.classList.add('nav-toggle-user');
+    navToggle.dataset.profileUrl = '/user/';
+    delete navToggle.dataset.loginUrl;
+    navToggle.setAttribute('aria-label', `Abrir perfil de ${resolvedName}`);
+    navToggle.removeAttribute('aria-controls');
+    navToggle.removeAttribute('aria-expanded');
+    clearChildren(navToggle);
+
+    const photo = document.createElement('img');
+    photo.className = 'nav-toggle-photo';
+    photo.src = resolvedPhoto;
+    photo.alt = `Foto de ${resolvedName}`;
+    photo.loading = 'lazy';
+    photo.decoding = 'async';
+    photo.width = 40;
+    photo.height = 40;
+    photo.onerror = () => {
+      photo.src = FALLBACK_THUMB_URL;
+    };
+    navToggle.append(photo);
+  };
+
+  const applyLoggedOutLayout = () => {
+    setSchedulerDefaultState();
+    if (isMobileViewport()) {
+      authLink.classList.add('nav-mobile-hidden');
+      setToggleLoginState();
+      return;
+    }
+    authLink.classList.remove('nav-mobile-hidden');
+    setToggleDefaultState();
+  };
+
   const setLoginState = () => {
+    currentSessionData = null;
+    isAuthenticated = false;
     authLink.classList.remove('nav-user-chip');
+    authLink.classList.remove('nav-mobile-hidden');
     authLink.href = '/login/';
     authLink.removeAttribute('title');
     authLink.removeAttribute('aria-label');
     clearChildren(authLink);
 
-    const icon = document.createElement('i');
-    icon.className = 'fa-solid fa-right-to-bracket';
-    icon.setAttribute('aria-hidden', 'true');
+    const icon = createIcon('icon-login');
 
     authLink.append(icon, document.createTextNode('Entrar'));
-
-    if (heroLoginCta) {
-      heroLoginCta.hidden = false;
-      heroLoginCta.removeAttribute('aria-hidden');
-    }
-    if (finalLoginCta) {
-      finalLoginCta.hidden = false;
-      finalLoginCta.removeAttribute('aria-hidden');
-    }
+    applyLoggedOutLayout();
   };
 
-  const setLoggedState = (sessionData) => {
+  const applyLoggedLayout = () => {
+    if (!currentSessionData) return;
+
+    const sessionData = currentSessionData;
     const profile = sessionData?.user || {};
     const resolvedName = String(profile?.name || profile?.email || 'Conta Google').trim() || 'Conta Google';
     const resolvedPhoto = String(profile?.picture || '').trim() || FALLBACK_THUMB_URL;
@@ -184,61 +349,68 @@ const initAuthSession = () => {
       photo.src = FALLBACK_THUMB_URL;
     };
     avatarBubble.appendChild(photo);
+    authLink.append(avatarBubble);
 
-    const nameBubble = document.createElement('span');
-    nameBubble.className = 'nav-user-name-bubble';
-
-    const icon = document.createElement('i');
-    icon.className = 'fa-solid fa-user nav-user-icon';
-    icon.setAttribute('aria-hidden', 'true');
+    if (isMobileViewport()) {
+      setSchedulerAsUserBubble(sessionData);
+      setToggleAsUserBubble(sessionData);
+      authLink.classList.add('nav-mobile-hidden');
+      return;
+    }
 
-    const name = document.createElement('span');
-    name.className = 'nav-user-name';
-    name.textContent = resolvedName;
+    authLink.classList.remove('nav-mobile-hidden');
+    setSchedulerDefaultState();
+    setToggleDefaultState();
+  };
 
-    nameBubble.append(icon, name);
-    authLink.append(avatarBubble, nameBubble);
+  const setLoggedState = (sessionData) => {
+    currentSessionData = sessionData || null;
+    isAuthenticated = true;
+    applyLoggedLayout();
+  };
 
-    if (heroLoginCta) {
-      heroLoginCta.hidden = true;
-      heroLoginCta.setAttribute('aria-hidden', 'true');
-    }
-    if (finalLoginCta) {
-      finalLoginCta.hidden = true;
-      finalLoginCta.setAttribute('aria-hidden', 'true');
+  const onViewportChange = () => {
+    if (isAuthenticated) {
+      applyLoggedLayout();
+      return;
     }
+    applyLoggedOutLayout();
   };
 
-  return runAfterLoadIdle(() => {
-    fetch('/api/sticker-packs/auth/google/session', { credentials: 'include' })
-      .then((response) => {
-        if (!response.ok) throw new Error('Sessão indisponível');
-        return response.json();
-      })
-      .then((payload) => {
-        const sessionData = payload?.data || {};
-        if (!sessionData?.authenticated || !sessionData?.user?.sub) {
+  if (mobileQuery && typeof mobileQuery.addEventListener === 'function') {
+    mobileQuery.addEventListener('change', onViewportChange);
+  } else if (mobileQuery && typeof mobileQuery.addListener === 'function') {
+    mobileQuery.addListener(onViewportChange);
+  }
+  window.addEventListener('resize', onViewportChange);
+
+  const stopBootstrap = runAfterLoadIdle(
+    () => {
+      fetchHomeBootstrapPayload()
+        .then((bootstrapData) => {
+          const sessionData = bootstrapData?.session || {};
+          if (!sessionData?.authenticated || !sessionData?.user?.sub) {
+            setLoginState();
+            return;
+          }
+          setLoggedState(sessionData);
+        })
+        .catch(() => {
           setLoginState();
-          return;
-        }
-        setLoggedState(sessionData);
-      })
-      .catch(() => {
-        setLoginState();
-      });
-  }, { delayMs: 160, timeoutMs: 1200 });
-};
+        });
+    },
+    { delayMs: 520, timeoutMs: 1200 },
+  );
 
-const resolveSupportUrl = async () => {
-  try {
-    const response = await fetch('/api/sticker-packs/support');
-    if (!response.ok) throw new Error(`HTTP ${response.status}`);
-    const payload = await response.json();
-    const url = String(payload?.data?.url || '').trim();
-    return url || '';
-  } catch {
-    return '';
-  }
+  return () => {
+    stopBootstrap();
+    window.removeEventListener('resize', onViewportChange);
+    if (mobileQuery && typeof mobileQuery.removeEventListener === 'function') {
+      mobileQuery.removeEventListener('change', onViewportChange);
+    } else if (mobileQuery && typeof mobileQuery.removeListener === 'function') {
+      mobileQuery.removeListener(onViewportChange);
+    }
+  };
 };
 
 const initAddBotCtas = () => {
@@ -263,18 +435,22 @@ const initAddBotCtas = () => {
     return true;
   };
 
-  return runAfterLoadIdle(() => {
-    resolveSupportUrl()
-      .then((url) => {
-        const applied = applyLink(url);
-        if (!applied && floatButton) {
-          floatButton.hidden = true;
-        }
-      })
-      .catch(() => {
-        if (floatButton) floatButton.hidden = true;
-      });
-  }, { delayMs: 120, timeoutMs: 1400 });
+  return runAfterLoadIdle(
+    () => {
+      fetchHomeBootstrapPayload()
+        .then((bootstrapData) => {
+          const url = String(bootstrapData?.bot_contact?.urls?.menu || '').trim();
+          const applied = applyLink(url);
+          if (!applied && floatButton) {
+            floatButton.hidden = true;
+          }
+        })
+        .catch(() => {
+          if (floatButton) floatButton.hidden = true;
+        });
+    },
+    { delayMs: 480, timeoutMs: 1400 },
+  );
 };
 
 const initSocialProof = () => {
@@ -293,7 +469,9 @@ const initSocialProof = () => {
   };
 
   const normalizeStatus = (value) => {
-    const normalized = String(value || '').trim().toLowerCase();
+    const normalized = String(value || '')
+      .trim()
+      .toLowerCase();
     if (!normalized) return 'pronto';
     if (['online', 'ok', 'healthy'].includes(normalized)) return 'online';
     if (['connecting', 'opening', 'reconnecting'].includes(normalized)) return 'conectando';
@@ -301,32 +479,27 @@ const initSocialProof = () => {
     return 'pronto';
   };
 
-  return runAfterLoadIdle(() => {
-    Promise.all([
-      fetch('/api/sticker-packs/stats'),
-      fetch('/api/sticker-packs/system-summary'),
-    ])
-      .then(async ([statsRes, summaryRes]) => {
-        if (!statsRes.ok || !summaryRes.ok) throw new Error('Falha ao carregar prova social');
-
-        const statsPayload = await statsRes.json();
-        const summaryPayload = await summaryRes.json();
-
-        const stats = statsPayload?.data || {};
-        const summary = summaryPayload?.data || {};
-
-        animateCountUp(packsEl, Number(stats.packs_total || 0));
-        animateCountUp(stickersEl, Number(stats.stickers_total || 0));
-        animateCountUp(groupsEl, Number(summary?.platform?.total_groups || 0));
-
-        if (statusEl) {
-          statusEl.textContent = `bot ${normalizeStatus(summary?.system_status || summary?.bot?.connection_status)}`;
-        }
-      })
-      .catch(() => {
-        setFallback();
-      });
-  }, { delayMs: 260, timeoutMs: 1500 });
+  return runAfterLoadIdle(
+    () => {
+      fetchHomeBootstrapPayload()
+        .then((bootstrapData) => {
+          const stats = bootstrapData?.stats || {};
+          const summary = bootstrapData?.system_summary || {};
+
+          animateCountUp(packsEl, Number(stats.packs_total || 0));
+          animateCountUp(stickersEl, Number(stats.stickers_total || 0));
+          animateCountUp(groupsEl, Number(summary?.platform?.total_groups || 0));
+
+          if (statusEl) {
+            statusEl.textContent = `bot ${normalizeStatus(summary?.system_status || summary?.bot?.connection_status)}`;
+          }
+        })
+        .catch(() => {
+          setFallback();
+        });
+    },
+    { delayMs: 620, timeoutMs: 1500 },
+  );
 };
 
 const registerCleanup = (cleanups, cleanup) => {

package/public/js/apps/loginApp.js

@@ -146,18 +146,12 @@ if (root) {
 
   const renderHint = () => {
     if (!state.hint.hasPayload) {
-      setText(
-        ui.hint,
-        'Voce abriu esta pagina direto. Por seguranca, gere seu link no WhatsApp clicando no botao abaixo e enviando "iniciar".',
-      );
+      setText(ui.hint, 'Voce abriu esta pagina direto. Por seguranca, gere seu link no WhatsApp clicando no botao abaixo e enviando "iniciar".');
       return;
     }
 
     if (!state.hint.phone) {
-      setText(
-        ui.hint,
-        'Este link nao trouxe um numero de WhatsApp valido. Ele pode ter sido alterado ou expirado. Gere um novo link enviando "iniciar".',
-      );
+      setText(ui.hint, 'Este link nao trouxe um numero de WhatsApp valido. Ele pode ter sido alterado ou expirado. Gere um novo link enviando "iniciar".');
       return;
     }
 
@@ -193,10 +187,7 @@ if (root) {
     }
 
     if (state.hint.phone) {
-      setText(
-        ui.summaryOwner,
-        `Numero detectado: +${formatPhone(state.hint.phone)}. Clique no botao do Google para concluir o vinculo.`,
-      );
+      setText(ui.summaryOwner, `Numero detectado: +${formatPhone(state.hint.phone)}. Clique no botao do Google para concluir o vinculo.`);
       renderWhatsAppCta();
       return;
     }