@kaikybrofc/omnizap-system 2.2.3 → 2.2.4

package/public/js/apps/userApp.js

@@ -0,0 +1,244 @@
+/* global document, window, fetch, URLSearchParams */
+
+const DEFAULT_API_BASE_PATH = '/api/sticker-packs';
+const DEFAULT_STICKERS_PATH = '/stickers';
+const DEFAULT_LOGIN_PATH = '/login';
+const FALLBACK_AVATAR = 'https://iili.io/FC3FABe.jpg';
+
+const root = document.getElementById('user-app-root');
+
+if (root) {
+  const ui = {
+    status: document.getElementById('user-status'),
+    error: document.getElementById('user-error'),
+    profile: document.getElementById('user-profile'),
+    avatar: document.getElementById('user-avatar'),
+    name: document.getElementById('user-name'),
+    email: document.getElementById('user-email'),
+    whatsapp: document.getElementById('user-whatsapp'),
+    grid: document.getElementById('user-grid'),
+    metricPacks: document.getElementById('metric-packs'),
+    metricStickers: document.getElementById('metric-stickers'),
+    metricDownloads: document.getElementById('metric-downloads'),
+    metricLikes: document.getElementById('metric-likes'),
+    summary: document.getElementById('user-summary'),
+    ownerJid: document.getElementById('user-owner-jid'),
+    googleSub: document.getElementById('user-google-sub'),
+    expiresAt: document.getElementById('user-expires-at'),
+    actions: document.getElementById('user-actions'),
+    chatLink: document.getElementById('user-chat-link'),
+    logoutBtn: document.getElementById('user-logout-btn'),
+    manageHeadLink: document.getElementById('user-manage-head-link'),
+    manageMainLink: document.getElementById('user-manage-main-link'),
+    currentYear: document.getElementById('user-current-year'),
+  };
+
+  const state = {
+    apiBasePath: String(root.dataset.apiBasePath || DEFAULT_API_BASE_PATH).trim() || DEFAULT_API_BASE_PATH,
+    stickersPath: String(root.dataset.stickersPath || DEFAULT_STICKERS_PATH).trim() || DEFAULT_STICKERS_PATH,
+    loginPath: String(root.dataset.loginPath || DEFAULT_LOGIN_PATH).trim() || DEFAULT_LOGIN_PATH,
+    botPhone: '',
+  };
+
+  const sessionApiPath = `${state.apiBasePath}/auth/google/session`;
+  const myProfileApiPath = `${state.apiBasePath}/me`;
+  const botContactApiPath = `${state.apiBasePath}/bot-contact`;
+
+  const setText = (el, value) => {
+    if (!el) return;
+    el.textContent = String(value || '');
+  };
+
+  const showError = (message) => {
+    if (!ui.error) return;
+    const safeMessage = String(message || '').trim();
+    ui.error.hidden = !safeMessage;
+    if (safeMessage) ui.error.textContent = safeMessage;
+  };
+
+  const normalizeDigits = (value) => String(value || '').replace(/\D+/g, '');
+
+  const formatPhone = (digits) => {
+    const value = normalizeDigits(digits);
+    if (!value) return '';
+    if (value.length <= 4) return value;
+    return `${value.slice(0, 2)} ${value.slice(2, -4)}-${value.slice(-4)}`.trim();
+  };
+
+  const formatNumber = (value) =>
+    new Intl.NumberFormat('pt-BR', {
+      maximumFractionDigits: 0,
+    }).format(Math.max(0, Number(value || 0)));
+
+  const formatDateTime = (value) => {
+    const ms = Date.parse(String(value || ''));
+    if (!Number.isFinite(ms)) return 'n/d';
+    return new Intl.DateTimeFormat('pt-BR', { dateStyle: 'short', timeStyle: 'short' }).format(new Date(ms));
+  };
+
+  const buildLoginRedirectUrl = () => {
+    const loginUrl = new URL(state.loginPath, window.location.origin);
+    loginUrl.searchParams.set('next', '/user/');
+    return `${loginUrl.pathname}${loginUrl.search}`;
+  };
+
+  const buildWhatsAppMenuUrl = (phoneDigits) => {
+    const params = new URLSearchParams({
+      text: '/menu',
+      type: 'custom_url',
+      app_absent: '0',
+    });
+    const digits = normalizeDigits(phoneDigits);
+    if (digits) params.set('phone', digits);
+    return `https://api.whatsapp.com/send/?${params.toString()}`;
+  };
+
+  const fetchJson = async (url, init = {}) => {
+    const response = await fetch(url, {
+      credentials: 'include',
+      ...init,
+    });
+    let payload = null;
+    try {
+      payload = await response.json();
+    } catch {
+      payload = null;
+    }
+
+    if (!response.ok) {
+      const err = new Error(payload?.error || `Falha HTTP ${response.status}`);
+      err.statusCode = response.status;
+      throw err;
+    }
+    return payload || {};
+  };
+
+  const redirectToLogin = () => {
+    window.location.assign(buildLoginRedirectUrl());
+  };
+
+  const loadBotPhone = async () => {
+    try {
+      const payload = await fetchJson(botContactApiPath, { method: 'GET' });
+      state.botPhone = normalizeDigits(payload?.data?.phone || '');
+    } catch {
+      state.botPhone = '';
+    }
+    if (ui.chatLink) ui.chatLink.href = buildWhatsAppMenuUrl(state.botPhone);
+  };
+
+  const renderSession = (sessionData) => {
+    const user = sessionData?.user || {};
+    const ownerPhone = String(sessionData?.owner_phone || '').trim();
+    const ownerJid = String(sessionData?.owner_jid || '').trim();
+
+    setText(ui.name, user?.name || 'Conta Google');
+    setText(ui.email, user?.email || 'Email não disponível');
+    if (ownerPhone) {
+      setText(ui.whatsapp, `WhatsApp vinculado: +${formatPhone(ownerPhone)}`);
+    } else if (ownerJid) {
+      setText(ui.whatsapp, `WhatsApp vinculado via owner: ${ownerJid}`);
+    } else {
+      setText(ui.whatsapp, 'WhatsApp não vinculado.');
+    }
+
+    if (ui.avatar) {
+      const picture = String(user?.picture || '').trim() || FALLBACK_AVATAR;
+      ui.avatar.src = picture;
+      ui.avatar.onerror = () => {
+        ui.avatar.src = FALLBACK_AVATAR;
+      };
+    }
+
+    setText(ui.ownerJid, ownerJid || 'n/d');
+    setText(ui.googleSub, String(user?.sub || '').trim() || 'n/d');
+    setText(ui.expiresAt, formatDateTime(sessionData?.expires_at));
+
+    if (ui.profile) ui.profile.hidden = false;
+    if (ui.summary) ui.summary.hidden = false;
+    if (ui.actions) ui.actions.hidden = false;
+  };
+
+  const renderPackMetrics = (payload) => {
+    const data = payload?.data || {};
+    const packs = Array.isArray(data?.packs) ? data.packs : [];
+    const stats = data?.stats && typeof data.stats === 'object' ? data.stats : {};
+
+    let stickers = 0;
+    let downloads = 0;
+    let likes = 0;
+
+    for (const pack of packs) {
+      stickers += Number(pack?.sticker_count || 0);
+      downloads += Number(pack?.engagement?.open_count || 0);
+      likes += Number(pack?.engagement?.like_count || 0);
+    }
+
+    setText(ui.metricPacks, formatNumber(stats.total || packs.length));
+    setText(ui.metricStickers, formatNumber(stickers));
+    setText(ui.metricDownloads, formatNumber(downloads));
+    setText(ui.metricLikes, formatNumber(likes));
+    if (ui.grid) ui.grid.hidden = false;
+  };
+
+  const handleLogout = async () => {
+    if (!ui.logoutBtn) return;
+    ui.logoutBtn.disabled = true;
+    ui.logoutBtn.textContent = 'Encerrando...';
+    try {
+      await fetchJson(sessionApiPath, { method: 'DELETE' });
+    } catch {
+      // clear local navigation even if request fails
+    }
+    window.location.assign(`${state.loginPath}/`);
+  };
+
+  const init = async () => {
+    const manageHref = `${state.stickersPath.replace(/\/+$/, '') || DEFAULT_STICKERS_PATH}/perfil`;
+    if (ui.manageHeadLink) ui.manageHeadLink.href = manageHref;
+    if (ui.manageMainLink) ui.manageMainLink.href = manageHref;
+    if (ui.currentYear) ui.currentYear.textContent = String(new Date().getFullYear());
+
+    setText(ui.status, 'Validando sua sessão...');
+    showError('');
+
+    let sessionData = null;
+    try {
+      const sessionPayload = await fetchJson(sessionApiPath, { method: 'GET' });
+      sessionData = sessionPayload?.data || {};
+      if (!sessionData?.authenticated || !sessionData?.user?.sub) {
+        redirectToLogin();
+        return;
+      }
+    } catch (error) {
+      showError(error?.message || 'Falha ao validar sessão.');
+      setText(ui.status, 'Não foi possível validar sua sessão agora.');
+      return;
+    }
+
+    renderSession(sessionData);
+    await loadBotPhone();
+
+    try {
+      const myProfilePayload = await fetchJson(myProfileApiPath, { method: 'GET' });
+      const sessionOk = Boolean(myProfilePayload?.data?.session?.authenticated);
+      if (!sessionOk) {
+        redirectToLogin();
+        return;
+      }
+      renderPackMetrics(myProfilePayload);
+      setText(ui.status, 'Sessão ativa. Dados da sua conta carregados com sucesso.');
+    } catch (error) {
+      showError(error?.message || 'Falha ao carregar dados da conta.');
+      setText(ui.status, 'Sessão ativa, mas não foi possível carregar todos os dados.');
+    }
+  };
+
+  if (ui.logoutBtn) {
+    ui.logoutBtn.addEventListener('click', () => {
+      void handleLogout();
+    });
+  }
+
+  void init();
+}

package/public/js/runtime/react-runtime.js

@@ -9,6 +9,7 @@ if (typeof document !== 'undefined' && !window.__omnizapTwindReady) {
 
 export {
   default as React,
+  useCallback,
   useEffect,
   useMemo,
   useRef,

package/public/login/index.html

@@ -0,0 +1,333 @@
+<!doctype html>
+<html lang="pt-BR">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>OmniZap System | Login</title>
+  <meta
+    name="description"
+    content="Login OmniZap System com Google para vincular sua conta ao numero do WhatsApp."
+  />
+  <meta name="robots" content="index, follow" />
+  <meta name="theme-color" content="#0b1020" />
+  <link rel="canonical" href="https://omnizap.shop/login/" />
+  <link rel="icon" type="image/jpeg" href="https://iili.io/FC3FABe.jpg" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700&display=swap"
+    rel="stylesheet"
+  />
+  <script>
+    (() => {
+      try {
+        const params = new URLSearchParams(window.location.search || '');
+        const phone = String(params.get('wa') || '').replace(/\D+/g, '');
+        if (phone) {
+          document.documentElement.setAttribute('data-login-has-wa', '1');
+        }
+      } catch {}
+    })();
+  </script>
+  <style>
+    :root {
+      --bg: #0b1020;
+      --bg-2: #121a2f;
+      --card: #121f39cf;
+      --line: #2f466f;
+      --text: #e6edf7;
+      --muted: #9bb0cf;
+      --primary: #22c55e;
+      --error: #f87171;
+      --radius: 18px;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      min-height: 100%;
+    }
+
+    body {
+      color: var(--text);
+      font-family: "Manrope", system-ui, sans-serif;
+      background:
+        radial-gradient(55rem 22rem at -10% -10%, #1fce6f30, transparent 60%),
+        radial-gradient(55rem 22rem at 110% -8%, #43b8ff22, transparent 56%),
+        linear-gradient(160deg, var(--bg), var(--bg-2));
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px 14px;
+    }
+
+    .page {
+      width: min(760px, 100%);
+      border: 1px solid #314b74;
+      border-radius: 24px;
+      background: linear-gradient(150deg, #0f1a31e8, #0f1b34ee);
+      box-shadow: 0 18px 44px #0209166e, inset 0 1px 0 #95c1ff1a;
+      overflow: hidden;
+    }
+
+    .head {
+      border-bottom: 1px solid #2a3f63;
+      padding: 20px 22px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 14px;
+      flex-wrap: wrap;
+    }
+
+    .brand {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      font-family: "Sora", sans-serif;
+      font-weight: 700;
+      letter-spacing: 0.2px;
+      text-decoration: none;
+      color: var(--text);
+    }
+
+    .brand img {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      border: 1px solid #33507e;
+      object-fit: cover;
+    }
+
+    .btn {
+      border: 1px solid var(--line);
+      border-radius: 12px;
+      background: #101a2f;
+      color: var(--text);
+      text-decoration: none;
+      padding: 9px 12px;
+      font-size: 14px;
+      font-weight: 600;
+      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
+      cursor: pointer;
+    }
+
+    .btn:hover {
+      transform: translateY(-1px);
+      border-color: #4e6ea1;
+      box-shadow: 0 10px 20px #02091650;
+    }
+
+    .btn.primary {
+      border-color: transparent;
+      background: linear-gradient(90deg, var(--primary), #16a34a);
+      color: #052412;
+      box-shadow: 0 10px 22px #22c55e30;
+    }
+
+    .content {
+      padding: 24px 22px;
+      display: grid;
+      gap: 14px;
+    }
+
+    h1 {
+      margin: 0;
+      font-family: "Sora", sans-serif;
+      font-size: clamp(26px, 3.6vw, 36px);
+      line-height: 1.08;
+      letter-spacing: -0.02em;
+      background: linear-gradient(90deg, #eef5ff 0%, #8fd7ff 46%, #6ce8b5 100%);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+    }
+
+    .lead {
+      margin: 0;
+      color: #bfd1ea;
+      line-height: 1.6;
+      font-size: 16px;
+    }
+
+    .card {
+      border: 1px solid #334f7bc7;
+      border-radius: var(--radius);
+      background: var(--card);
+      padding: 16px;
+      display: grid;
+      gap: 10px;
+      backdrop-filter: blur(8px);
+    }
+
+    .status {
+      margin: 0;
+      color: #dce8fa;
+      font-size: 15px;
+      line-height: 1.5;
+    }
+
+    .hint {
+      margin: 0;
+      color: var(--muted);
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    .error {
+      margin: 0;
+      border: 1px solid #a74949;
+      border-radius: 12px;
+      background: #3b181899;
+      color: #ffd7d7;
+      padding: 9px 10px;
+      font-size: 14px;
+    }
+
+    .google-area {
+      border: 1px dashed #3c5b8d;
+      border-radius: 14px;
+      background: #0f1930a3;
+      padding: 12px;
+      display: grid;
+      gap: 10px;
+      align-items: stretch;
+    }
+
+    html:not([data-login-has-wa="1"]) #google-login-area {
+      display: none !important;
+    }
+
+    [data-google-login-button] {
+      width: 100%;
+      min-height: 40px;
+    }
+
+    .google-state {
+      margin: 0;
+      color: var(--muted);
+      font-size: 13px;
+    }
+
+    .summary {
+      border: 1px solid #2b8b5d9c;
+      border-radius: 12px;
+      background: #112d2094;
+      padding: 10px;
+      display: grid;
+      gap: 6px;
+      color: #dfffe8;
+      font-size: 14px;
+    }
+
+    .whatsapp-cta {
+      border: 1px solid #2d7d57a8;
+      border-radius: 14px;
+      background: #1032248f;
+      padding: 12px;
+      display: grid;
+      gap: 10px;
+    }
+
+    html[data-login-has-wa="1"] #whatsapp-cta {
+      display: none !important;
+    }
+
+    .whatsapp-cta p {
+      margin: 0;
+      color: #d5ffdf;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    .btn.whatsapp {
+      border-color: #1e9a5f;
+      background: linear-gradient(90deg, #1fc86a, #16a34a);
+      color: #04230f;
+      text-align: center;
+    }
+
+    .whatsapp-meta {
+      margin: 0;
+      color: #b7e9ca;
+      font-size: 13px;
+    }
+
+    .actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    @media (max-width: 620px) {
+      .head {
+        padding: 16px;
+      }
+
+      .content {
+        padding: 18px 16px;
+      }
+
+      .actions .btn {
+        width: 100%;
+        text-align: center;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main id="login-app-root" class="page" data-api-base-path="/api/sticker-packs">
+    <header class="head">
+      <a href="/" class="brand">
+        <img src="https://iili.io/FC3FABe.jpg" alt="OmniZap" loading="lazy" decoding="async" />
+        <span>OmniZap System</span>
+      </a>
+    </header>
+
+    <section class="content">
+      <h1>Login da Plataforma</h1>
+      <p class="lead">
+        Entre com Google para vincular sua conta ao seu numero do WhatsApp e liberar os recursos web do OmniZap.
+      </p>
+
+      <article class="card">
+        <p id="login-status" class="status">Carregando estado de login...</p>
+        <p id="login-hint" class="hint"></p>
+        <p id="login-error" class="error" hidden></p>
+
+        <div id="google-login-area" class="google-area" hidden>
+          <div data-google-login-button></div>
+          <p id="google-login-state" class="google-state">Carregando login Google...</p>
+        </div>
+
+        <div id="login-summary" class="summary" hidden>
+          <div id="login-summary-owner">WhatsApp vinculado:</div>
+        </div>
+
+        <div id="whatsapp-cta" class="whatsapp-cta" hidden>
+          <p>Abriu esta página direto? Inicie a conversa no WhatsApp para gerar o link com seu número automaticamente.</p>
+          <a id="whatsapp-cta-link" class="btn whatsapp" href="https://wa.me/?text=iniciar" target="_blank" rel="noreferrer noopener">
+            Abrir WhatsApp e enviar "iniciar"
+          </a>
+          <p id="whatsapp-cta-meta" class="whatsapp-meta"></p>
+        </div>
+
+        <div id="login-success-actions" class="actions" hidden>
+          <a id="login-success-chat" class="btn primary" href="https://wa.me/?text=%2Fmenu" target="_blank" rel="noreferrer noopener">
+            Voltar ao chat do bot (/menu)
+          </a>
+          <a id="login-success-home" class="btn" href="/">Voltar para Home</a>
+        </div>
+      </article>
+    </section>
+  </main>
+
+  <script type="module" src="/js/apps/loginApp.js?v=20260228f"></script>
+</body>
+</html>

package/public/stickers/create/index.html

@@ -40,8 +40,9 @@
     id="create-pack-react-root"
     data-api-base-path="/api/sticker-packs"
     data-web-path="/stickers"
+    data-login-path="__STICKER_LOGIN_WEB_PATH__"
   ></div>
 
-  <script type="module" src="/js/apps/createPackApp.js?v=20260226-create-pack-cta-open-created-pack1"></script>
+  <script type="module" src="/js/apps/createPackApp.js?v=20260228-create-pack-login-required1"></script>
 </body>
 </html>

package/public/stickers/index.html

@@ -38,11 +38,12 @@
     data-web-path="/stickers"
     data-api-base-path="/api/sticker-packs"
     data-orphan-api-path="/api/sticker-packs/orphan-stickers"
+    data-login-path="__STICKER_LOGIN_WEB_PATH__"
     data-default-limit="24"
     data-default-orphan-limit="24"
     data-initial-pack-key=""
   ></div>
 
-  <script type="module" src="/js/apps/stickersApp.js?v=20260227-ui-hotfix-v5"></script>
+  <script type="module" src="/js/apps/stickersApp.js?v=20260228-login-redirect-my-packs1"></script>
 </body>
 </html>