Aplicação SaaS (React)¶

// src/hooks/useComplyr.ts
import { useEffect, useState } from 'react';

interface ConsentPurposes {
  essential: boolean;
  analytics: boolean;
  marketing: boolean;
  personalization: boolean;
  third_party: boolean;
}

interface ConsentData {
  workspaceId: string;
  consentId: string;
  status: 'NONE' | 'GRANTED' | 'PARTIAL' | 'DENIED' | 'REVOKED' | 'EXPIRED';
  purposes: Record<string, { granted: boolean; grantedAt: string | null }>;
  createdAt: string;
  expiresAt: string;
}

export function useComplyr() {
  const [isLoaded, setIsLoaded] = useState(false);
  const [consent, setConsent] = useState<ConsentData | null>(null);

  useEffect(() => {
    // Listener para quando Complyr carregar
    const handleComplyrLoaded = () => {
      setIsLoaded(true);
      loadConsent();
    };

    // Listener para quando consentimento for atualizado
    const handleConsentUpdated = (event: CustomEvent<ConsentPurposes>) => {
      console.log('Consentimento atualizado:', event.detail);
      loadConsent();
    };

    document.addEventListener('complyr:loaded', handleComplyrLoaded as EventListener);
    document.addEventListener('consent-updated', handleConsentUpdated as EventListener);

    // Se já carregou, atualizar estado
    if (window.complyr) {
      setIsLoaded(true);
      loadConsent();
    }

    return () => {
      document.removeEventListener('complyr:loaded', handleComplyrLoaded as EventListener);
      document.removeEventListener('consent-updated', handleConsentUpdated as EventListener);
    };
  }, []);

  const loadConsent = () => {
    try {
      const stored = localStorage.getItem('complyr_consent');
      if (stored) {
        setConsent(JSON.parse(stored));
      }
    } catch (error) {
      console.error('Erro ao carregar consentimento:', error);
    }
  };

  const identify = (email: string) => {
    if (window.complyr) {
      window.complyr.identify('email', email);
    }
  };

  const openPreferences = () => {
    if (window.complyr) {
      window.complyr.openPreferences();
    }
  };

  const revokeConsent = (reason: string) => {
    if (window.complyr) {
      window.complyr.revokeConsent(reason);
    }
  };

  return {
    isLoaded,
    consent,
    identify,
    openPreferences,
    revokeConsent,
  };
}

// Tipos para window.complyr
declare global {
  interface Window {
    complyr?: {
      identify: (type: string, value: string) => void;
      openPreferences: () => void;
      revokeConsent: (reason: string) => void;
      loadPolicy: (type: string, policyId: string | null) => void;
      acceptPolicy: (type: string, policyId: string | null) => void;
    };
  }
}

// src/services/api.ts
import axios from 'axios';

const api = axios.create({
  baseURL: process.env.REACT_APP_API_URL || 'http://localhost:5000',
});

// Interceptor para adicionar token JWT
api.interceptors.request.use((config) => {
  const token = localStorage.getItem('auth_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export interface SaveConsentPreferencesDto {
  analytics: boolean;
  marketing: boolean;
  personalization: boolean;
  third_party: boolean;
}

export interface UserConsentPreferences {
  userId: string;
  analytics: boolean;
  marketing: boolean;
  personalization: boolean;
  third_party: boolean;
  createdAt: string;
  updatedAt: string;
}

// Salvar preferências de consentimento no backend
export async function saveUserConsentPreferences(
  preferences: SaveConsentPreferencesDto
): Promise<UserConsentPreferences> {
  const response = await api.post('/user/consent-preferences', preferences);
  return response.data;
}

// Carregar preferências de consentimento do backend
export async function getUserConsentPreferences(): Promise<UserConsentPreferences | null> {
  try {
    const response = await api.get('/user/consent-preferences');
    return response.data;
  } catch (error) {
    if (axios.isAxiosError(error) && error.response?.status === 404) {
      return null; // Usuário ainda não tem preferências salvas
    }
    throw error;
  }
}

// Revogar consentimento
export async function revokeUserConsent(reason: string): Promise<void> {
  await api.post('/user/revoke-consent', { reason });
}

export default api;

// backend/src/user/consent-preferences.controller.ts
import { Controller, Get, Post, Body, UseGuards } from '@nestjs/common';
import { JwtAuthGuard } from '../auth/jwt-auth.guard';
import { CurrentUser } from '../auth/current-user.decorator';

interface ConsentPreferencesDto {
  analytics: boolean;
  marketing: boolean;
  personalization: boolean;
  third_party: boolean;
}

@Controller('user')
@UseGuards(JwtAuthGuard)
export class ConsentPreferencesController {
  constructor(private readonly consentService: ConsentPreferencesService) {}

  @Post('consent-preferences')
  async savePreferences(
    @CurrentUser() user: User,
    @Body() dto: ConsentPreferencesDto,
  ) {
    return this.consentService.savePreferences(user.id, dto);
  }

  @Get('consent-preferences')
  async getPreferences(@CurrentUser() user: User) {
    const preferences = await this.consentService.getPreferences(user.id);
    if (!preferences) {
      throw new NotFoundException('Preferences not found');
    }
    return preferences;
  }

  @Post('revoke-consent')
  async revokeConsent(
    @CurrentUser() user: User,
    @Body('reason') reason: string,
  ) {
    return this.consentService.revokeConsent(user.id, reason);
  }
}

// src/contexts/AuthContext.tsx
import React, { createContext, useContext, useState, useEffect } from 'react';
import { useComplyr } from '../hooks/useComplyr';
import { getUserConsentPreferences } from '../services/api';

interface User {
  id: string;
  email: string;
  name: string;
}

interface AuthContextData {
  user: User | null;
  loading: boolean;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
}

const AuthContext = createContext<AuthContextData>({} as AuthContextData);

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const { identify } = useComplyr();

  useEffect(() => {
    // Carregar usuário do localStorage
    const storedUser = localStorage.getItem('user');
    if (storedUser) {
      const parsedUser = JSON.parse(storedUser);
      setUser(parsedUser);

      // Identificar no Complyr
      identify(parsedUser.email);

      // Carregar preferências do backend
      loadUserPreferences();
    }
    setLoading(false);
  }, []);

  const loadUserPreferences = async () => {
    try {
      const preferences = await getUserConsentPreferences();
      if (preferences) {
        // Aplicar preferências automaticamente
        // O Complyr vai ler do localStorage ou do backend
        console.log('Preferências carregadas:', preferences);
      }
    } catch (error) {
      console.error('Erro ao carregar preferências:', error);
    }
  };

  const login = async (email: string, password: string) => {
    // Sua lógica de login aqui
    const response = await fetch('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password }),
    });

    const data = await response.json();

    if (data.success) {
      const userData = data.user;
      setUser(userData);
      localStorage.setItem('user', JSON.stringify(userData));
      localStorage.setItem('auth_token', data.token);

      // ✅ IMPORTANTE: Identificar no Complyr após login
      identify(userData.email);

      // Carregar preferências do backend
      await loadUserPreferences();
    }
  };

  const logout = () => {
    setUser(null);
    localStorage.removeItem('user');
    localStorage.removeItem('auth_token');
    localStorage.removeItem('complyr_consent');
  };

  return (
    <AuthContext.Provider value={{ user, loading, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

// src/pages/PrivacySettings.tsx
import React, { useState, useEffect } from 'react';
import { useComplyr } from '../hooks/useComplyr';
import { saveUserConsentPreferences, getUserConsentPreferences, revokeUserConsent } from '../services/api';

export function PrivacySettings() {
  const { consent, openPreferences, isLoaded } = useComplyr();
  const [preferences, setPreferences] = useState({
    analytics: false,
    marketing: false,
    personalization: false,
    third_party: false,
  });
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    loadPreferences();
  }, []);

  const loadPreferences = async () => {
    try {
      const userPrefs = await getUserConsentPreferences();
      if (userPrefs) {
        setPreferences({
          analytics: userPrefs.analytics,
          marketing: userPrefs.marketing,
          personalization: userPrefs.personalization,
          third_party: userPrefs.third_party,
        });
      } else if (consent) {
        // Fallback: usar localStorage
        setPreferences({
          analytics: consent.purposes.analytics?.granted || false,
          marketing: consent.purposes.marketing?.granted || false,
          personalization: consent.purposes.personalization?.granted || false,
          third_party: consent.purposes.third_party?.granted || false,
        });
      }
    } catch (error) {
      console.error('Erro ao carregar preferências:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleSave = async () => {
    setSaving(true);
    try {
      await saveUserConsentPreferences(preferences);
      alert('Preferências salvas com sucesso!');
    } catch (error) {
      console.error('Erro ao salvar preferências:', error);
      alert('Erro ao salvar preferências. Tente novamente.');
    } finally {
      setSaving(false);
    }
  };

  const handleRevoke = async () => {
    if (window.confirm('Deseja revogar todos os seus consentimentos?')) {
      try {
        await revokeUserConsent('User requested data deletion');
        setPreferences({
          analytics: false,
          marketing: false,
          personalization: false,
          third_party: false,
        });
        alert('Consentimentos revogados com sucesso!');
      } catch (error) {
        console.error('Erro ao revogar consentimento:', error);
        alert('Erro ao revogar consentimento. Tente novamente.');
      }
    }
  };

  if (loading) {
    return <div>Carregando...</div>;
  }

  return (
    <div className="privacy-settings">
      <h1>Configurações de Privacidade</h1>
      <p>Gerencie suas preferências de cookies e dados pessoais.</p>

      <div className="consent-options">
        {/* Essencial - sempre ativo */}
        <div className="consent-item">
          <div className="consent-header">
            <h3>🔒 Cookies Essenciais</h3>
            <span className="badge">Sempre Ativo</span>
          </div>
          <p>
            Necessários para o funcionamento básico da aplicação (autenticação, sessão, segurança).
            Não podem ser desativados.
          </p>
        </div>

        {/* Analytics */}
        <div className="consent-item">
          <div className="consent-header">
            <h3>📊 Analytics</h3>
            <label className="toggle">
              <input
                type="checkbox"
                checked={preferences.analytics}
                onChange={(e) => setPreferences({ ...preferences, analytics: e.target.checked })}
              />
              <span className="slider"></span>
            </label>
          </div>
          <p>
            Nos ajudam a entender como você usa a aplicação para melhorar a experiência.
            Google Analytics, Hotjar, etc.
          </p>
        </div>

        {/* Marketing */}
        <div className="consent-item">
          <div className="consent-header">
            <h3>📢 Marketing</h3>
            <label className="toggle">
              <input
                type="checkbox"
                checked={preferences.marketing}
                onChange={(e) => setPreferences({ ...preferences, marketing: e.target.checked })}
              />
              <span className="slider"></span>
            </label>
          </div>
          <p>
            Usados para exibir anúncios relevantes e medir a eficácia de campanhas.
            Facebook Pixel, Google Ads, etc.
          </p>
        </div>

        {/* Personalization */}
        <div className="consent-item">
          <div className="consent-header">
            <h3>🎨 Personalização</h3>
            <label className="toggle">
              <input
                type="checkbox"
                checked={preferences.personalization}
                onChange={(e) => setPreferences({ ...preferences, personalization: e.target.checked })}
              />
              <span className="slider"></span>
            </label>
          </div>
          <p>
            Permitem personalizar a interface e conteúdo baseado nas suas preferências.
          </p>
        </div>

        {/* Third Party */}
        <div className="consent-item">
          <div className="consent-header">
            <h3>🔗 Terceiros</h3>
            <label className="toggle">
              <input
                type="checkbox"
                checked={preferences.third_party}
                onChange={(e) => setPreferences({ ...preferences, third_party: e.target.checked })}
              />
              <span className="slider"></span>
            </label>
          </div>
          <p>
            Serviços de terceiros como chat, vídeos incorporados, mapas, etc.
          </p>
        </div>
      </div>

      {/* Botões de ação */}
      <div className="actions">
        <button
          className="btn btn-primary"
          onClick={handleSave}
          disabled={saving}
        >
          {saving ? 'Salvando...' : 'Salvar Preferências'}
        </button>

        <button
          className="btn btn-secondary"
          onClick={openPreferences}
          disabled={!isLoaded}
        >
          Abrir Banner Complyr
        </button>

        <button
          className="btn btn-danger"
          onClick={handleRevoke}
        >
          Revogar Todos os Consentimentos
        </button>
      </div>

      {/* Informações adicionais */}
      <div className="info-section">
        <h3>Seus Direitos (LGPD)</h3>
        <ul>
          <li>Confirmação de processamento de dados</li>
          <li>Acesso aos seus dados</li>
          <li>Correção de dados incompletos ou desatualizados</li>
          <li>Anonimização, bloqueio ou eliminação</li>
          <li>Portabilidade dos dados</li>
          <li>Informações sobre compartilhamento</li>
          <li>Revogação de consentimento</li>
        </ul>

        <p>
          Para exercer seus direitos, entre em contato: <a href="mailto:privacidade@suaapp.com">privacidade@suaapp.com</a>
        </p>
      </div>
    </div>
  );
}

// src/pages/Login.tsx
import { useAuth } from '../contexts/AuthContext';

export function Login() {
  const { login } = useAuth();

  const handleLogin = async (email: string, password: string) => {
    await login(email, password);

    // Rastrear login no GTM
    if (window.dataLayer) {
      window.dataLayer.push({
        event: 'login',
        method: 'email',
        user_id: email, // Será hasheado pelo Complyr
      });
    }
  };

  // ...resto do componente
}

// src/components/Product.tsx
import { useComplyr } from '../hooks/useComplyr';

export function Product({ product }) {
  const { consent } = useComplyr();

  const trackProductView = () => {
    if (consent?.purposes.analytics?.granted && window.dataLayer) {
      window.dataLayer.push({
        event: 'view_item',
        ecommerce: {
          items: [{
            item_id: product.id,
            item_name: product.name,
            price: product.price,
          }]
        }
      });
    }
  };

  useEffect(() => {
    trackProductView();
  }, [product]);

  // ...resto do componente
}

// src/App.tsx
import { useEffect } from 'react';
import { useAuth } from './contexts/AuthContext';
import { getUserConsentPreferences } from './services/api';

export function App() {
  const { user } = useAuth();

  useEffect(() => {
    checkUserPreferences();
  }, [user]);

  const checkUserPreferences = async () => {
    if (user) {
      // Usuário logado - verificar se tem preferências
      const preferences = await getUserConsentPreferences();

      if (preferences) {
        // Usuário tem preferências salvas
        // Aplicar automaticamente sem exibir banner
        applyPreferencesAutomatically(preferences);
      }
      // Se não tiver preferências, banner aparecerá normalmente
    }
  };

  const applyPreferencesAutomatically = (preferences: any) => {
    // Simular aceite/rejeição baseado nas preferências salvas
    const consentData = {
      analytics: preferences.analytics,
      marketing: preferences.marketing,
      personalization: preferences.personalization,
      third_party: preferences.third_party,
    };

    // Disparar evento consent-updated
    document.dispatchEvent(
      new CustomEvent('consent-updated', { detail: consentData })
    );

    // Atualizar dataLayer para GTM
    if (window.dataLayer) {
      window.dataLayer.push({
        event: 'consent-updated',
        consent_analytics: preferences.analytics,
        consent_marketing: preferences.marketing,
        consent_personalization: preferences.personalization,
        consent_third_party: preferences.third_party,
      });
    }
  };

  return (
    // ...seu app
  );
}

// src/App.tsx
import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { AuthProvider, useAuth } from './contexts/AuthContext';
import { Login } from './pages/Login';
import { Register } from './pages/Register';
import { Dashboard } from './pages/Dashboard';
import { PrivacySettings } from './pages/PrivacySettings';

function PrivateRoute({ children }: { children: React.ReactNode }) {
  const { user, loading } = useAuth();

  if (loading) {
    return <div>Carregando...</div>;
  }

  return user ? <>{children}</> : <Navigate to="/login" />;
}

function App() {
  return (
    <AuthProvider>
      <BrowserRouter>
        <Routes>
          {/* Rotas públicas */}
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />

          {/* Rotas privadas */}
          <Route
            path="/dashboard"
            element={
              <PrivateRoute>
                <Dashboard />
              </PrivateRoute>
            }
          />
          <Route
            path="/settings/privacy"
            element={
              <PrivateRoute>
                <PrivacySettings />
              </PrivateRoute>
            }
          />

          {/* Redirect padrão */}
          <Route path="/" element={<Navigate to="/dashboard" />} />
        </Routes>
      </BrowserRouter>
    </AuthProvider>
  );
}

export default App;

// Console do navegador após login
console.log(localStorage.getItem('complyr_consent'));
// Deve conter emailHash

// Verificar se identify foi chamado
// DevTools → Network → Filtrar por "complyr"
// Deve haver uma requisição POST com hash do email

// Verificar se endpoint está retornando dados
const prefs = await getUserConsentPreferences();
console.log('Preferências carregadas:', prefs);

// Se null, usuário não tem preferências salvas ainda
// Banner deve aparecer normalmente

// Aguardar carregamento do script
document.addEventListener('complyr:loaded', () => {
  if (window.complyr) {
    window.complyr.identify('email', user.email);
  }
});

// Verificar se token está sendo enviado
api.interceptors.request.use((config) => {
  const token = localStorage.getItem('auth_token');
  console.log('Token JWT:', token);
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});