site-mva-global-fret/js/confirmation.js

// ============================================================
// MVA Global Fret — Page de confirmation post-double-opt-in
// ============================================================
// Cette page est la cible de redirection après que l'utilisateur
// a cliqué sur "Confirmer" dans l'email de validation HubSpot.
//
// HubSpot redirige vers :
//   https://mva-global-fret.github.io/site-mva-global-fret/confirmation.html?email={contact.email}
//
// Étapes :
//   1. Lire l'email depuis l'URL
//   2. Demander au Cloudflare Worker la fiche du contact (incluant reference_client)
//   3. Envoyer un email de bienvenue via EmailJS contenant la référence
//   4. Afficher la référence à l'écran
//
// Si une étape échoue, on affiche un fallback poli (l'inscription
// reste valide côté HubSpot, c'est juste l'email qui ne part pas).
// ============================================================

const WORKER_PROXY_URL    = 'https://mva-hubspot-proxy.mvaglobalfret.workers.dev';
const EMAILJS_PUBLIC_KEY  = '8KUlaQ7BDVIbkZRyP';
const EMAILJS_SERVICE_ID  = 'service_aeamo3x';
const EMAILJS_TEMPLATE_ID = 'template_s1kr2et';

// Marqueur localStorage : empêche de relancer l'envoi si l'utilisateur
// recharge la page après confirmation (par sécurité ET pour ne pas
// renvoyer 3 fois le même email).
const STORAGE_KEY_PREFIX = 'mva-confirm-sent-';

document.addEventListener('DOMContentLoaded', async () => {
  if (typeof emailjs !== 'undefined') {
    emailjs.init({ publicKey: EMAILJS_PUBLIC_KEY });
  }

  const email = getEmailFromUrl();

  if (!email) {
    // Pas d'email dans l'URL : on affiche quand même un succès générique
    // (l'utilisateur a bien confirmé puisqu'il atterrit ici depuis HubSpot)
    showSuccess(null);
    return;
  }

  try {
    const contact = await fetchContact(email);

    if (!contact) {
      // Contact non trouvé via Worker — on affiche succès quand même
      showSuccess(null);
      return;
    }

    const ref = contact.reference_client || null;

    // Idempotence : un seul email par confirmation
    const storageKey = STORAGE_KEY_PREFIX + email.toLowerCase();
    if (!localStorage.getItem(storageKey)) {
      await sendWelcomeEmail({
        firstname:        contact.firstname || '',
        email:            email,
        reference_client: ref || '',
      });
      localStorage.setItem(storageKey, String(Date.now()));
    }

    showSuccess(ref);
  } catch (err) {
    console.warn('[confirmation] flow failed:', err);
    showError();
  }
});

function getEmailFromUrl() {
  const params = new URLSearchParams(window.location.search);
  const raw = params.get('email');
  if (!raw) return null;
  const email = raw.trim().toLowerCase();
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) ? email : null;
}

async function fetchContact(email) {
  const res = await fetch(WORKER_PROXY_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email }),
  });
  if (!res.ok) throw new Error('Worker error: ' + res.status);
  const data = await res.json();
  if (!data.results || data.results.length === 0) return null;
  return data.results[0].properties;
}

async function sendWelcomeEmail(payload) {
  if (typeof emailjs === 'undefined') return;
  await emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, payload);
}

function showSuccess(ref) {
  document.getElementById('cardLoading').style.display = 'none';
  document.getElementById('cardSuccess').style.display = '';
  if (ref) {
    document.getElementById('refDisplay').textContent = ref;
    document.getElementById('refBlock').style.display = '';
  }
}

function showError() {
  document.getElementById('cardLoading').style.display = 'none';
  document.getElementById('cardError').style.display = '';
}