@omnizap-system/omnizap 2.6.2 → 2.6.3

package/public/js/apps/paymentsReactApp.js

@@ -0,0 +1,399 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import htm from 'htm';
+
+const html = htm.bind(React.createElement);
+
+const GOOGLE_AUTH_CACHE_KEY = 'omnizap_google_web_auth_cache_v1';
+const GOOGLE_AUTH_CACHE_MAX_STALE_MS = 8 * 24 * 60 * 60 * 1000;
+const DEFAULT_HOME_BOOTSTRAP_ENDPOINT = '/api/home-bootstrap';
+const DEFAULT_LOGIN_PATH = '/login/';
+const DEFAULT_PAYMENTS_API_BASE_PATH = '/api/payments';
+const DEFAULT_PLAN_NAME = 'Plano Premium';
+const DEFAULT_PLAN_PRICE = 'Assinatura recorrente';
+
+const normalizeDigits = (value) =>
+  String(value || '')
+    .replace(/\D+/g, '')
+    .slice(0, 20);
+
+const normalizeGoogleAuthState = (value) => {
+  const user = value?.user && typeof value.user === 'object' ? value.user : null;
+  const sub = String(user?.sub || '').trim();
+  if (!sub) return null;
+
+  return {
+    user: {
+      sub,
+      email: String(user?.email || '').trim(),
+      name: String(user?.name || '').trim(),
+      picture: String(user?.picture || '').trim(),
+    },
+    ownerPhone: normalizeDigits(value?.ownerPhone || ''),
+    ownerJid: String(value?.ownerJid || '').trim(),
+    expiresAt: String(value?.expiresAt || '').trim(),
+  };
+};
+
+const readGoogleAuthCache = () => {
+  try {
+    const raw = localStorage.getItem(GOOGLE_AUTH_CACHE_KEY);
+    if (!raw) return null;
+
+    const parsed = JSON.parse(raw);
+    const savedAt = Number(parsed?.savedAt || 0);
+    if (savedAt && Date.now() - savedAt > GOOGLE_AUTH_CACHE_MAX_STALE_MS) {
+      localStorage.removeItem(GOOGLE_AUTH_CACHE_KEY);
+      return null;
+    }
+
+    const normalized = normalizeGoogleAuthState(parsed?.auth || null);
+    if (!normalized?.user?.sub) {
+      localStorage.removeItem(GOOGLE_AUTH_CACHE_KEY);
+      return null;
+    }
+
+    if (normalized.expiresAt) {
+      const expiresAt = Number(new Date(normalized.expiresAt));
+      if (Number.isFinite(expiresAt) && expiresAt <= Date.now()) {
+        localStorage.removeItem(GOOGLE_AUTH_CACHE_KEY);
+        return null;
+      }
+    }
+
+    return normalized;
+  } catch {
+    return null;
+  }
+};
+
+const writeGoogleAuthCache = (authState) => {
+  try {
+    const normalized = normalizeGoogleAuthState(authState);
+    if (!normalized?.user?.sub) return;
+
+    localStorage.setItem(
+      GOOGLE_AUTH_CACHE_KEY,
+      JSON.stringify({
+        auth: normalized,
+        savedAt: Date.now(),
+      }),
+    );
+  } catch {
+    // ignore storage errors
+  }
+};
+
+const clearGoogleAuthCache = () => {
+  try {
+    localStorage.removeItem(GOOGLE_AUTH_CACHE_KEY);
+  } catch {
+    // ignore storage errors
+  }
+};
+
+const resolveOwnerPhone = ({ ownerPhone = '', ownerJid = '' } = {}) => {
+  const fromPhone = normalizeDigits(ownerPhone);
+  if (fromPhone.length >= 10) return fromPhone;
+
+  return normalizeDigits(String(ownerJid || '').split('@')[0]);
+};
+
+const buildLoginRedirectUrl = (loginPath) => {
+  const nextPath = `${window.location.pathname || '/pagamentos/'}${window.location.search || ''}`;
+  const loginUrl = new URL(loginPath || DEFAULT_LOGIN_PATH, window.location.origin);
+  loginUrl.searchParams.set('next', nextPath);
+  return `${loginUrl.pathname}${loginUrl.search}`;
+};
+
+const resolveConfig = (rootElement) => {
+  const dataset = rootElement?.dataset || {};
+
+  return {
+    loginPath: String(dataset.loginPath || DEFAULT_LOGIN_PATH).trim() || DEFAULT_LOGIN_PATH,
+    homeBootstrapPath: String(dataset.homeBootstrapPath || DEFAULT_HOME_BOOTSTRAP_ENDPOINT).trim() || DEFAULT_HOME_BOOTSTRAP_ENDPOINT,
+    paymentsApiBasePath: String(dataset.paymentsApiBasePath || DEFAULT_PAYMENTS_API_BASE_PATH).trim() || DEFAULT_PAYMENTS_API_BASE_PATH,
+  };
+};
+
+const PaymentsReactApp = ({ config }) => {
+  const [statusMessage, setStatusMessage] = useState('');
+  const [statusType, setStatusType] = useState('');
+  const [planName, setPlanName] = useState(DEFAULT_PLAN_NAME);
+  const [planPriceLabel, setPlanPriceLabel] = useState(DEFAULT_PLAN_PRICE);
+  const [paymentsEnabled, setPaymentsEnabled] = useState(true);
+  const [authenticated, setAuthenticated] = useState(false);
+  const [loadingCheckout, setLoadingCheckout] = useState(false);
+
+  const [formValues, setFormValues] = useState({
+    name: '',
+    email: '',
+    whatsapp: '',
+  });
+
+  const [lockedFields, setLockedFields] = useState({
+    name: false,
+    email: false,
+    whatsapp: false,
+  });
+
+  const setStatus = useCallback((message, type = '') => {
+    setStatusMessage(String(message || ''));
+    setStatusType(String(type || ''));
+  }, []);
+
+  const fillFormWithUserData = useCallback(({ name = '', email = '', ownerPhone = '', ownerJid = '' } = {}) => {
+    const normalizedName = String(name || '').trim();
+    const normalizedEmail = String(email || '')
+      .trim()
+      .toLowerCase();
+    const normalizedPhone = resolveOwnerPhone({ ownerPhone, ownerJid });
+
+    setFormValues((previous) => ({
+      ...previous,
+      name: normalizedName || previous.name,
+      email: normalizedEmail || previous.email,
+      whatsapp: normalizedPhone || previous.whatsapp,
+    }));
+
+    setLockedFields({
+      name: Boolean(normalizedName),
+      email: Boolean(normalizedEmail),
+      whatsapp: Boolean(normalizedPhone),
+    });
+  }, []);
+
+  const redirectToLogin = useCallback(() => {
+    window.location.replace(buildLoginRedirectUrl(config.loginPath));
+  }, [config.loginPath]);
+
+  const loadAuthenticatedUser = useCallback(async () => {
+    const cachedAuth = readGoogleAuthCache();
+    if (cachedAuth?.user?.sub) {
+      fillFormWithUserData({
+        name: cachedAuth.user?.name,
+        email: cachedAuth.user?.email,
+        ownerPhone: cachedAuth.ownerPhone,
+        ownerJid: cachedAuth.ownerJid,
+      });
+    }
+
+    let response = null;
+    try {
+      response = await fetch(config.homeBootstrapPath, {
+        method: 'GET',
+        headers: { Accept: 'application/json' },
+        credentials: 'include',
+      });
+    } catch {
+      if (cachedAuth?.user?.sub) {
+        setAuthenticated(true);
+        return true;
+      }
+      redirectToLogin();
+      return false;
+    }
+
+    const payload = await response.json().catch(() => ({}));
+    const session = payload?.data?.session || null;
+    const isAuthenticated = Boolean(response.ok && session?.authenticated && session?.user?.sub);
+
+    if (!isAuthenticated) {
+      clearGoogleAuthCache();
+      redirectToLogin();
+      return false;
+    }
+
+    const authState = {
+      user: {
+        sub: String(session?.user?.sub || ''),
+        email: String(session?.user?.email || ''),
+        name: String(session?.user?.name || ''),
+        picture: String(session?.user?.picture || ''),
+      },
+      ownerPhone: String(session?.owner_phone || ''),
+      ownerJid: String(session?.owner_jid || ''),
+      expiresAt: String(session?.expires_at || ''),
+    };
+
+    writeGoogleAuthCache(authState);
+    fillFormWithUserData(authState);
+    setAuthenticated(true);
+    return true;
+  }, [config.homeBootstrapPath, fillFormWithUserData, redirectToLogin]);
+
+  const loadPublicConfig = useCallback(async () => {
+    try {
+      const response = await fetch(`${config.paymentsApiBasePath}/config`, {
+        method: 'GET',
+        headers: { Accept: 'application/json' },
+      });
+
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok || !payload || payload.ok !== true) return true;
+
+      if (payload.plan_name) setPlanName(String(payload.plan_name));
+      if (payload.plan_price_label) setPlanPriceLabel(String(payload.plan_price_label));
+
+      if (payload.enabled === false) {
+        setPaymentsEnabled(false);
+        setStatus('Pagamentos estao temporariamente indisponiveis.', 'error');
+        return false;
+      }
+
+      return true;
+    } catch {
+      return true;
+    }
+  }, [config.paymentsApiBasePath, setStatus]);
+
+  useEffect(() => {
+    let active = true;
+
+    const bootstrap = async () => {
+      setStatus('Validando sua sessao...', 'success');
+      const [configEnabled] = await Promise.all([loadPublicConfig(), loadAuthenticatedUser()]);
+      if (!active) return;
+      if (configEnabled) {
+        setStatus('', '');
+      }
+    };
+
+    void bootstrap();
+
+    return () => {
+      active = false;
+    };
+  }, [loadAuthenticatedUser, loadPublicConfig, setStatus]);
+
+  const onInputChange = useCallback(
+    (field) => (event) => {
+      const value = String(event?.target?.value || '');
+      setFormValues((previous) => ({ ...previous, [field]: value }));
+    },
+    [],
+  );
+
+  const onSubmit = useCallback(
+    async (event) => {
+      event.preventDefault();
+      setStatus('', '');
+
+      const whatsapp = String(formValues.whatsapp || '').trim();
+      const email = String(formValues.email || '').trim();
+      const name = String(formValues.name || '').trim();
+
+      if (!whatsapp) {
+        setStatus('Informe seu WhatsApp para continuar.', 'error');
+        return;
+      }
+
+      setLoadingCheckout(true);
+      setStatus('Preparando checkout seguro...', 'success');
+
+      try {
+        const response = await fetch(`${config.paymentsApiBasePath}/checkout-session`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+          },
+          credentials: 'include',
+          body: JSON.stringify({ whatsapp, email, name }),
+        });
+
+        const payload = await response.json().catch(() => ({}));
+        if (!response.ok) {
+          throw new Error(payload?.error || 'Nao foi possivel iniciar o checkout.');
+        }
+
+        if (!payload?.checkout_url) {
+          throw new Error('Checkout criado sem URL de redirecionamento.');
+        }
+
+        window.location.href = payload.checkout_url;
+      } catch (error) {
+        setStatus(error?.message || 'Falha ao iniciar checkout.', 'error');
+        setLoadingCheckout(false);
+      }
+    },
+    [config.paymentsApiBasePath, formValues.email, formValues.name, formValues.whatsapp, setStatus],
+  );
+
+  const submitDisabled = useMemo(() => loadingCheckout || !authenticated || !paymentsEnabled, [authenticated, loadingCheckout, paymentsEnabled]);
+
+  const statusClassName = useMemo(() => {
+    const list = ['payments-status'];
+    if (statusType) list.push(statusType);
+    return list.join(' ');
+  }, [statusType]);
+
+  return html`
+    <main className="payments-page">
+      <section className="payments-hero">
+        <span className="payments-eyebrow">Pagamento Automatico Stripe</span>
+        <h1>Ative o Premium em minutos</h1>
+        <p>Preencha seu WhatsApp e siga para o checkout seguro. Assim que o pagamento confirmar no webhook, seu acesso Premium e liberado automaticamente.</p>
+      </section>
+
+      <section className="payments-layout">
+        <article className="payments-card payments-checkout">
+          <form onSubmit=${onSubmit} novalidate=${true}>
+            <div className="payments-row">
+              <label htmlFor="checkout-name">Nome</label>
+              <input id="checkout-name" name="name" type="text" maxlength="120" autocomplete="name" placeholder="Seu nome" value=${formValues.name} onChange=${onInputChange('name')} readonly=${lockedFields.name} title=${lockedFields.name ? 'Campo preenchido automaticamente pela sua sessao.' : undefined} />
+            </div>
+
+            <div className="payments-row">
+              <label htmlFor="checkout-email">E-mail</label>
+              <input id="checkout-email" name="email" type="email" maxlength="255" autocomplete="email" placeholder="voce@empresa.com" value=${formValues.email} onChange=${onInputChange('email')} readonly=${lockedFields.email} title=${lockedFields.email ? 'Campo preenchido automaticamente pela sua sessao.' : undefined} />
+            </div>
+
+            <div className="payments-row">
+              <label htmlFor="checkout-whatsapp">WhatsApp para liberar Premium</label>
+              <input id="checkout-whatsapp" name="whatsapp" type="text" required=${true} autocomplete="tel" placeholder="5511999999999" value=${formValues.whatsapp} onChange=${onInputChange('whatsapp')} readonly=${lockedFields.whatsapp} title=${lockedFields.whatsapp ? 'Campo preenchido automaticamente pela sua sessao.' : undefined} />
+              <p className="payments-hint">
+                Use com DDI e DDD. Exemplo:
+                <code>5511999999999</code>
+                ou
+                <code>5511999999999@s.whatsapp.net</code>
+              </p>
+            </div>
+
+            <div className="payments-actions">
+              <button className="payments-button payments-button-primary" type="submit" disabled=${submitDisabled}>${loadingCheckout ? 'Criando checkout...' : 'Ir para checkout'}</button>
+              <a className="payments-button payments-button-secondary" href="/">Voltar para home</a>
+            </div>
+
+            <p className=${statusClassName} aria-live="polite">${statusMessage}</p>
+          </form>
+        </article>
+
+        <aside className="payments-card payments-aside">
+          <p className="payments-plan-badge">Plano ativo no checkout</p>
+          <h2 className="payments-plan-title">${planName}</h2>
+          <p className="payments-plan-price">${planPriceLabel}</p>
+
+          <ul className="payments-feature-list">
+            <li>Ativacao automatica apos pagamento confirmado no Stripe.</li>
+            <li>Fluxo seguro com assinatura de webhook validada no backend.</li>
+            <li>Checkout hospedado no Stripe para reduzir risco e fraude.</li>
+          </ul>
+
+          <p className="payments-small">
+            Ao continuar, voce concorda com os
+            <a href="/termos-de-uso/">Termos de Uso</a>
+            e
+            <a href="/politica-de-privacidade/">Politica de Privacidade</a>.
+          </p>
+        </aside>
+      </section>
+    </main>
+  `;
+};
+
+const rootElement = document.getElementById('payments-react-root');
+if (rootElement) {
+  const config = resolveConfig(rootElement);
+  createRoot(rootElement).render(html`<${PaymentsReactApp} config=${config} />`);
+}

package/public/js/apps/paymentsSuccessReactApp.js

@@ -0,0 +1,148 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import htm from 'htm';
+
+const html = htm.bind(React.createElement);
+
+const DEFAULT_PAYMENTS_API_BASE_PATH = '/api/payments';
+const DEFAULT_PANEL_PATH = '/user/';
+const DEFAULT_PAYMENTS_PATH = '/pagamentos/';
+
+const normalizeRoutePath = (value, fallback) => {
+  const raw = String(value || '').trim();
+  if (!raw) return fallback;
+  if (!raw.startsWith('/')) return fallback;
+  if (/^\/\//.test(raw)) return fallback;
+  return raw;
+};
+
+const normalizeSessionId = (value) =>
+  String(value || '')
+    .trim()
+    .slice(0, 255);
+
+const resolveConfig = (rootElement) => {
+  const dataset = rootElement?.dataset || {};
+
+  return {
+    paymentsApiBasePath: String(dataset.paymentsApiBasePath || DEFAULT_PAYMENTS_API_BASE_PATH).trim() || DEFAULT_PAYMENTS_API_BASE_PATH,
+    panelPath: normalizeRoutePath(dataset.panelPath, DEFAULT_PANEL_PATH),
+    paymentsPath: normalizeRoutePath(dataset.paymentsPath, DEFAULT_PAYMENTS_PATH),
+  };
+};
+
+const PaymentsSuccessReactApp = ({ config }) => {
+  const sessionId = useMemo(() => {
+    const params = new URLSearchParams(window.location.search);
+    return normalizeSessionId(params.get('session_id'));
+  }, []);
+
+  const [statusMessage, setStatusMessage] = useState('Consultando o status no Stripe...');
+  const [statusType, setStatusType] = useState('');
+  const [metaMessage, setMetaMessage] = useState('');
+
+  useEffect(() => {
+    let active = true;
+
+    const setStatus = (message, type = '') => {
+      if (!active) return;
+      setStatusMessage(String(message || ''));
+      setStatusType(String(type || ''));
+    };
+
+    const setMeta = (message) => {
+      if (!active) return;
+      setMetaMessage(String(message || ''));
+    };
+
+    if (!sessionId) {
+      setStatus('Pagamento concluido. Se o Premium ainda nao apareceu, aguarde alguns segundos e atualize o painel.', 'pending');
+      setMeta('Dica: volte ao painel e confirme se o plano Premium ja foi liberado.');
+      return () => {
+        active = false;
+      };
+    }
+
+    const loadStatus = async () => {
+      try {
+        const response = await fetch(`${config.paymentsApiBasePath}/finalize-session`, {
+          method: 'POST',
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            session_id: sessionId,
+          }),
+        });
+
+        const payload = await response.json().catch(() => ({}));
+        if (!response.ok) {
+          throw new Error(payload?.error || 'Nao foi possivel consultar o status da sessao.');
+        }
+
+        const status = String(payload?.session?.status || '').toLowerCase();
+        const paymentStatus = String(payload?.session?.payment_status || '').toLowerCase();
+        const customerEmail = String(payload?.session?.customer_email || '').trim();
+        const ownerJid = String(payload?.owner_jid || payload?.session?.owner_jid || '').trim();
+        const action = String(payload?.action || '').toLowerCase();
+        const reason = String(payload?.reason || '').toLowerCase();
+
+        if (action === 'premium_activated') {
+          setStatus('Pagamento confirmado e Premium ativado com sucesso.');
+        } else if (status === 'complete' && (paymentStatus === 'paid' || paymentStatus === 'no_payment_required') && reason === 'owner_jid_missing') {
+          setStatus('Pagamento confirmado, mas faltou o WhatsApp para liberar Premium. Fale com o suporte.', 'error');
+        } else if (status === 'complete' && (paymentStatus === 'paid' || paymentStatus === 'no_payment_required')) {
+          setStatus('Pagamento confirmado. Estamos finalizando a liberacao do Premium.', 'pending');
+        } else {
+          setStatus('Sessao concluida, aguardando confirmacao final de pagamento no Stripe.', 'pending');
+        }
+
+        const metaParts = [`Sessao: ${sessionId}`];
+        if (customerEmail) metaParts.push(`Cliente: ${customerEmail}`);
+        if (ownerJid) metaParts.push(`WhatsApp: ${ownerJid}`);
+        if (status) metaParts.push(`Status checkout: ${status}`);
+        if (paymentStatus) metaParts.push(`Status pagamento: ${paymentStatus}`);
+        if (action) metaParts.push(`Acao: ${action}`);
+        if (reason && reason !== 'ok') metaParts.push(`Motivo: ${reason}`);
+        setMeta(metaParts.join(' | '));
+      } catch (error) {
+        setStatus(error?.message || 'Falha ao consultar status do pagamento.', 'error');
+        setMeta(`Sessao: ${sessionId}`);
+      }
+    };
+
+    void loadStatus();
+
+    return () => {
+      active = false;
+    };
+  }, [config.paymentsApiBasePath, sessionId]);
+
+  const statusClassName = useMemo(() => {
+    const list = ['payments-result-status'];
+    if (statusType) list.push(statusType);
+    return list.join(' ');
+  }, [statusType]);
+
+  return html`
+    <main className="payments-result-card">
+      <h1 className="payments-result-title">Pagamento recebido</h1>
+      <p className="payments-result-subtitle">Estamos finalizando a ativacao do seu Premium.</p>
+
+      <p className=${statusClassName} aria-live="polite">${statusMessage}</p>
+      <p className="payments-result-meta">${metaMessage}</p>
+
+      <div className="payments-result-actions">
+        <a className="payments-result-button primary" href=${config.panelPath}>Ir para painel</a>
+        <a className="payments-result-button" href=${config.paymentsPath}>Fazer outro pagamento</a>
+      </div>
+    </main>
+  `;
+};
+
+const rootElement = document.getElementById('payments-success-react-root');
+if (rootElement) {
+  const config = resolveConfig(rootElement);
+  createRoot(rootElement).render(html`<${PaymentsSuccessReactApp} config=${config} />`);
+}

package/public/pages/pagamentos-cancelado.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="pt-BR" data-theme="night">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Pagamento cancelado | OmniZap</title>
+    <meta name="description" content="Seu pagamento foi cancelado. Voce pode tentar novamente quando quiser." />
+    <meta name="robots" content="noindex, nofollow" />
+    <meta name="theme-color" content="#2a1318" />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <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=Sora:wght@600;700;800&family=Manrope:wght@400;600&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="/assets/css/payments-react.css" />
+  </head>
+  <body class="payments-body payments-body-cancel">
+    <div id="payments-cancel-react-root" data-payments-path="/pagamentos/" data-home-path="/"></div>
+
+    <script type="module" src="/assets/js/payments-cancel-react.bundle.js"></script>
+  </body>
+</html>

package/public/pages/pagamentos-sucesso.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="pt-BR" data-theme="night">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Pagamento concluido | OmniZap</title>
+    <meta name="description" content="Status do seu pagamento OmniZap Premium." />
+    <meta name="robots" content="noindex, nofollow" />
+    <meta name="theme-color" content="#0e1f1f" />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <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=Sora:wght@500;700;800&family=Manrope:wght@400;600;700&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="/assets/css/payments-react.css" />
+  </head>
+  <body class="payments-body payments-body-success">
+    <div id="payments-success-react-root" data-payments-api-base-path="/api/payments" data-panel-path="/user/" data-payments-path="/pagamentos/"></div>
+
+    <script type="module" src="/assets/js/payments-success-react.bundle.js"></script>
+  </body>
+</html>

package/public/pages/pagamentos.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="pt-BR" data-theme="night">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Pagamentos | OmniZap Premium</title>
+    <meta name="description" content="Ative seu plano Premium do OmniZap com pagamento automatico via Stripe Checkout." />
+    <meta name="robots" content="index, follow" />
+    <meta name="theme-color" content="#0f172a" />
+    <link rel="canonical" href="https://omnizap.shop/pagamentos/" />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <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=Sora:wght@400;600;700;800&family=Manrope:wght@400;600;700&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="/assets/css/payments-react.css" />
+  </head>
+  <body class="payments-body payments-body-main">
+    <div id="payments-react-root" data-login-path="/login/" data-home-bootstrap-path="/api/home-bootstrap" data-payments-api-base-path="/api/payments"></div>
+
+    <noscript>
+      <main style="max-width: 680px; margin: 100px auto; padding: 20px; text-align: center; color: #e7f0ff">
+        <h1>Pagamento OmniZap Premium</h1>
+        <p>Ative o JavaScript para continuar com o checkout seguro.</p>
+        <a href="/login/" style="color: #4ade80">Ir para login</a>
+      </main>
+    </noscript>
+
+    <script type="module" src="/assets/js/payments-react.bundle.js"></script>
+  </body>
+</html>

package/scripts/deploy.sh

@@ -732,6 +732,9 @@ prepare_legacy_static_entrypoints() {
   copy_page_alias "dpa.html" "dpa/index.html"
   copy_page_alias "licenca.html" "licenca/index.html"
   copy_page_alias "notice-and-takedown.html" "notice-and-takedown/index.html"
+  copy_page_alias "pagamentos.html" "pagamentos/index.html"
+  copy_page_alias "pagamentos-sucesso.html" "pagamentos/sucesso/index.html"
+  copy_page_alias "pagamentos-cancelado.html" "pagamentos/cancelado/index.html"
   copy_page_alias "politica-de-privacidade.html" "politica-de-privacidade/index.html"
   copy_page_alias "suboperadores.html" "suboperadores/index.html"
   copy_page_alias "termos-de-uso.html" "termos-de-uso/index.html"