acceptPolicy()¶

interface ComplyrAPI {
  /**
   * Registra a aceitação de uma política específica por um usuário identificado
   *
   * @param policyType - Tipo da política ('privacy-policy', 'terms-of-service', etc.)
   * @param userIdentifier - Identificador único do usuário (email recomendado)
   * @returns Promise que resolve quando a aceitação for registrada
   * @throws Error se o script Complyr não estiver carregado ou se houver falha na requisição
   */
  acceptPolicy(policyType: string, userIdentifier: string): Promise<void>;
}

// Acesso via window
declare global {
  interface Window {
    complyr?: ComplyrAPI;
  }
}

import React, { useState } from 'react';

interface RegistrationFormProps {
  onSuccess?: () => void;
}

export const RegistrationForm: React.FC<RegistrationFormProps> = ({ onSuccess }) => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
    acceptTerms: false,
  });

  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);

    // Validar aceitação de termos
    if (!formData.acceptTerms) {
      setError('Você precisa aceitar os Termos de Uso e a Política de Privacidade');
      return;
    }

    setLoading(true);

    try {
      // Verificar se Complyr está carregado
      if (!window.complyr) {
        throw new Error('Sistema de conformidade não disponível. Recarregue a página.');
      }

      // Registrar aceitação das políticas
      await window.complyr.acceptPolicy('terms-of-service', formData.email);
      await window.complyr.acceptPolicy('privacy-policy', formData.email);

      console.log('✅ Políticas aceitas:', {
        email: formData.email,
        policies: ['terms-of-service', 'privacy-policy'],
        timestamp: new Date().toISOString(),
      });

      // Enviar dados do usuário para backend
      const response = await fetch('/api/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: formData.name,
          email: formData.email,
          password: formData.password,
        }),
      });

      if (!response.ok) {
        throw new Error('Erro ao criar conta');
      }

      // Sucesso
      alert('Conta criada com sucesso! Verifique seu email.');
      onSuccess?.();

    } catch (err) {
      console.error('Erro no registro:', err);
      setError(err instanceof Error ? err.message : 'Erro ao processar registro');
    } finally {
      setLoading(false);
    }
  };

  const handleViewPolicy = (policyType: string) => {
    if (window.complyr) {
      window.complyr.loadPolicy(policyType, '#policy-modal');
    }
  };

  return (
    <div className="registration-form">
      <h1>Criar Conta</h1>

      {error && (
        <div className="alert alert-error">
          {error}
        </div>
      )}

      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label htmlFor="name">Nome Completo</label>
          <input
            type="text"
            id="name"
            value={formData.name}
            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
            required
          />
        </div>

        <div className="form-group">
          <label htmlFor="email">Email</label>
          <input
            type="email"
            id="email"
            value={formData.email}
            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
            required
          />
        </div>

        <div className="form-group">
          <label htmlFor="password">Senha</label>
          <input
            type="password"
            id="password"
            value={formData.password}
            onChange={(e) => setFormData({ ...formData, password: e.target.value })}
            required
            minLength={8}
          />
        </div>

        <div className="form-group checkbox">
          <label>
            <input
              type="checkbox"
              checked={formData.acceptTerms}
              onChange={(e) => setFormData({ ...formData, acceptTerms: e.target.checked })}
              required
            />
            Li e aceito os{' '}
            <button
              type="button"
              onClick={() => handleViewPolicy('terms-of-service')}
              className="link-button"
            >
              Termos de Uso
            </button>
            {' '}e a{' '}
            <button
              type="button"
              onClick={() => handleViewPolicy('privacy-policy')}
              className="link-button"
            >
              Política de Privacidade
            </button>
          </label>
        </div>

        <button
          type="submit"
          disabled={loading}
          className="btn btn-primary"
        >
          {loading ? 'Criando conta...' : 'Criar Conta'}
        </button>
      </form>

      {/* Container para exibir políticas */}
      <div id="policy-modal"></div>
    </div>
  );
};

// TypeScript declaration
declare global {
  interface Window {
    complyr?: {
      acceptPolicy(policyType: string, userIdentifier: string): Promise<void>;
      loadPolicy(policyType: string, selector: string): void;
    };
  }
}

import { useState, useCallback } from 'react';

interface UsePolicyAcceptanceOptions {
  onSuccess?: () => void;
  onError?: (error: Error) => void;
}

interface UsePolicyAcceptanceResult {
  acceptPolicy: (policyType: string, userIdentifier: string) => Promise<void>;
  acceptMultiplePolicies: (policyTypes: string[], userIdentifier: string) => Promise<void>;
  loading: boolean;
  error: Error | null;
}

export const usePolicyAcceptance = (
  options: UsePolicyAcceptanceOptions = {}
): UsePolicyAcceptanceResult => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);

  const acceptPolicy = useCallback(async (
    policyType: string,
    userIdentifier: string
  ) => {
    setLoading(true);
    setError(null);

    try {
      if (!window.complyr) {
        throw new Error('Complyr não está disponível');
      }

      await window.complyr.acceptPolicy(policyType, userIdentifier);

      console.log(`✅ Política aceita: ${policyType}`, {
        user: userIdentifier,
        timestamp: new Date().toISOString(),
      });

      options.onSuccess?.();

    } catch (err) {
      const error = err instanceof Error ? err : new Error('Erro desconhecido');
      setError(error);
      options.onError?.(error);
      throw error;
    } finally {
      setLoading(false);
    }
  }, [options]);

  const acceptMultiplePolicies = useCallback(async (
    policyTypes: string[],
    userIdentifier: string
  ) => {
    setLoading(true);
    setError(null);

    try {
      if (!window.complyr) {
        throw new Error('Complyr não está disponível');
      }

      // Aceitar todas as políticas em paralelo
      await Promise.all(
        policyTypes.map(type => window.complyr!.acceptPolicy(type, userIdentifier))
      );

      console.log(`✅ ${policyTypes.length} políticas aceitas`, {
        policies: policyTypes,
        user: userIdentifier,
        timestamp: new Date().toISOString(),
      });

      options.onSuccess?.();

    } catch (err) {
      const error = err instanceof Error ? err : new Error('Erro desconhecido');
      setError(error);
      options.onError?.(error);
      throw error;
    } finally {
      setLoading(false);
    }
  }, [options]);

  return {
    acceptPolicy,
    acceptMultiplePolicies,
    loading,
    error,
  };
};

// Exemplo de uso do hook
export const RegistrationFormWithHook: React.FC = () => {
  const [email, setEmail] = useState('');
  const [acceptTerms, setAcceptTerms] = useState(false);

  const { acceptMultiplePolicies, loading, error } = usePolicyAcceptance({
    onSuccess: () => {
      alert('Políticas aceitas! Conta criada com sucesso.');
      window.location.href = '/dashboard';
    },
    onError: (error) => {
      console.error('Erro ao aceitar políticas:', error);
    },
  });

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!acceptTerms) {
      alert('Você precisa aceitar as políticas');
      return;
    }

    try {
      await acceptMultiplePolicies(
        ['terms-of-service', 'privacy-policy'],
        email
      );
    } catch (err) {
      // Erro já tratado pelo hook
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />

      <label>
        <input
          type="checkbox"
          checked={acceptTerms}
          onChange={(e) => setAcceptTerms(e.target.checked)}
        />
        Aceito as políticas
      </label>

      {error && <p className="error">{error.message}</p>}

      <button type="submit" disabled={loading}>
        {loading ? 'Processando...' : 'Criar Conta'}
      </button>
    </form>
  );
};

import { ref } from 'vue';

interface PolicyAcceptanceOptions {
  onSuccess?: () => void;
  onError?: (error: Error) => void;
}

export function usePolicyAcceptance(options: PolicyAcceptanceOptions = {}) {
  const loading = ref(false);
  const error = ref<Error | null>(null);

  const acceptPolicy = async (policyType: string, userIdentifier: string) => {
    loading.value = true;
    error.value = null;

    try {
      if (!window.complyr) {
        throw new Error('Complyr não está disponível');
      }

      await window.complyr.acceptPolicy(policyType, userIdentifier);

      console.log(`✅ Política aceita: ${policyType}`, {
        user: userIdentifier,
        timestamp: new Date().toISOString(),
      });

      options.onSuccess?.();

    } catch (err) {
      const errorObj = err instanceof Error ? err : new Error('Erro desconhecido');
      error.value = errorObj;
      options.onError?.(errorObj);
      throw errorObj;
    } finally {
      loading.value = false;
    }
  };

  const acceptMultiplePolicies = async (
    policyTypes: string[],
    userIdentifier: string
  ) => {
    loading.value = true;
    error.value = null;

    try {
      if (!window.complyr) {
        throw new Error('Complyr não está disponível');
      }

      await Promise.all(
        policyTypes.map(type => window.complyr!.acceptPolicy(type, userIdentifier))
      );

      console.log(`✅ ${policyTypes.length} políticas aceitas`);
      options.onSuccess?.();

    } catch (err) {
      const errorObj = err instanceof Error ? err : new Error('Erro desconhecido');
      error.value = errorObj;
      options.onError?.(errorObj);
      throw errorObj;
    } finally {
      loading.value = false;
    }
  };

  return {
    acceptPolicy,
    acceptMultiplePolicies,
    loading,
    error,
  };
}

// pages/api/register.ts
import type { NextApiRequest, NextApiResponse } from 'next';

interface RegisterRequest {
  name: string;
  email: string;
  password: string;
  acceptPolicies: boolean;
}

interface RegisterResponse {
  success: boolean;
  message: string;
  userId?: string;
}

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<RegisterResponse>
) {
  if (req.method !== 'POST') {
    return res.status(405).json({ success: false, message: 'Method not allowed' });
  }

  const { name, email, password, acceptPolicies }: RegisterRequest = req.body;

  // Validar dados
  if (!acceptPolicies) {
    return res.status(400).json({
      success: false,
      message: 'Você precisa aceitar as políticas',
    });
  }

  try {
    // 1. Criar usuário no banco de dados
    const user = await createUser({ name, email, password });

    // 2. Registrar aceitação de políticas via Complyr API
    const workspaceId = process.env.COMPLYR_WORKSPACE_ID!;
    const apiUrl = process.env.COMPLYR_API_URL || 'https://app.complyr.com.br/api';

    // Aceitar múltiplas políticas em paralelo
    await Promise.all([
      fetch(`${apiUrl}/policy-acceptances`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Workspace-ID': workspaceId,
        },
        body: JSON.stringify({
          policyType: 'terms-of-service',
          userEmail: email,
        }),
      }),
      fetch(`${apiUrl}/policy-acceptances`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Workspace-ID': workspaceId,
        },
        body: JSON.stringify({
          policyType: 'privacy-policy',
          userEmail: email,
        }),
      }),
    ]);

    console.log(`✅ Políticas registradas para ${email}`);

    // 3. Enviar email de boas-vindas
    await sendWelcomeEmail(email, name);

    return res.status(201).json({
      success: true,
      message: 'Conta criada com sucesso',
      userId: user.id,
    });

  } catch (error) {
    console.error('Erro no registro:', error);
    return res.status(500).json({
      success: false,
      message: 'Erro ao criar conta',
    });
  }
}

// Funções auxiliares
async function createUser(data: { name: string; email: string; password: string }) {
  // Implementação de criação de usuário
  // ...
  return { id: 'user-123' };
}

async function sendWelcomeEmail(email: string, name: string) {
  // Implementação de envio de email
  // ...
}

// components/RegistrationForm.tsx
'use client';

import { useState } from 'react';

export default function RegistrationForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
    acceptPolicies: false,
  });

  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    try {
      // Validar frontend
      if (!formData.acceptPolicies) {
        alert('Você precisa aceitar as políticas');
        return;
      }

      // Enviar para API route
      const response = await fetch('/api/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      });

      const data = await response.json();

      if (data.success) {
        alert('Conta criada com sucesso!');
        window.location.href = '/login';
      } else {
        alert(data.message);
      }

    } catch (error) {
      console.error('Erro:', error);
      alert('Erro ao criar conta');
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Campos do formulário */}
      <input
        type="text"
        placeholder="Nome"
        value={formData.name}
        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
        required
      />

      <input
        type="email"
        placeholder="Email"
        value={formData.email}
        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
        required
      />

      <input
        type="password"
        placeholder="Senha"
        value={formData.password}
        onChange={(e) => setFormData({ ...formData, password: e.target.value })}
        required
      />

      <label>
        <input
          type="checkbox"
          checked={formData.acceptPolicies}
          onChange={(e) => setFormData({ ...formData, acceptPolicies: e.target.checked })}
          required
        />
        Aceito as políticas
      </label>

      <button type="submit" disabled={loading}>
        {loading ? 'Criando...' : 'Criar Conta'}
      </button>
    </form>
  );
}