376 lines
15 KiB
JavaScript
376 lines
15 KiB
JavaScript
// ============================================
|
|
// MVA Global Fret — Form Handler
|
|
// HubSpot Portal ID : 148163754
|
|
// HubSpot Form GUID : 1d9b75c9-8b60-4966-aa18-4bf503452e9a
|
|
// ============================================
|
|
|
|
const HUBSPOT_PORTAL_ID = '148163754';
|
|
const HUBSPOT_FORM_GUID = '1d9b75c9-8b60-4966-aa18-4bf503452e9a';
|
|
const FORMSPREE_ID = 'mojrvokp';
|
|
|
|
// ── EMAILJS (email de bienvenue au client) ────────────────────────────────────
|
|
const EMAILJS_PUBLIC_KEY = '8KUlaQ7BDVIbkZRyP';
|
|
const EMAILJS_SERVICE_ID = 'service_aeamo3x';
|
|
const EMAILJS_TEMPLATE_ID = 'template_s1kr2et';
|
|
// Template pour les clients déjà inscrits ("Ravis de te revoir")
|
|
// ⚠️ À créer dans EmailJS puis remplacer la valeur ci-dessous
|
|
const EMAILJS_TEMPLATE_WELCOME_BACK = 'template_welcome_back';
|
|
|
|
// Initialisation EmailJS (une seule fois au chargement)
|
|
if (typeof emailjs !== 'undefined') {
|
|
emailjs.init({ publicKey: EMAILJS_PUBLIC_KEY });
|
|
}
|
|
|
|
// ── PROXY CLOUDFLARE WORKER ───────────────────────────────────────────────────
|
|
// URL du Worker qui proxifie l'API HubSpot CRM (contourne le CORS).
|
|
// Après déploiement du Worker (voir cloudflare-worker/hubspot-proxy.js),
|
|
// remplacer la chaîne vide par l'URL obtenue, ex :
|
|
// 'https://mva-hubspot-proxy.moncompte.workers.dev'
|
|
// Tant que cette constante est vide, la vérification doublon est désactivée
|
|
// (le formulaire s'envoie normalement — aucun blocage).
|
|
const WORKER_PROXY_URL = 'https://mva-hubspot-proxy.sergemind4s.workers.dev';
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const form = document.getElementById('contactForm');
|
|
if (form) setupContactForm(form);
|
|
});
|
|
|
|
// Génération séquentielle via le Worker HubSpot : MVA-001, MVA-002, etc.
|
|
// Fallback sur un timestamp court si le Worker est indisponible.
|
|
async function generateRefNumber() {
|
|
if (WORKER_PROXY_URL) {
|
|
try {
|
|
const res = await fetch(WORKER_PROXY_URL, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ action: 'nextRef' }),
|
|
});
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
if (data.nextRef) return data.nextRef;
|
|
}
|
|
} catch { /* fallback ci-dessous */ }
|
|
}
|
|
// Fallback : numéro aléatoire court pour éviter les doublons en cas d'indisponibilité
|
|
const rand = String(Math.floor(Math.random() * 900) + 100);
|
|
return `MVA-F${rand}`;
|
|
}
|
|
|
|
// Vérifie si l'email existe déjà dans HubSpot via le proxy Cloudflare Worker.
|
|
// Retourne les propriétés du contact existant, ou null si nouveau client / proxy non configuré.
|
|
async function checkExistingContact(email) {
|
|
// Si le proxy n'est pas encore déployé, on laisse passer sans bloquer
|
|
if (!WORKER_PROXY_URL) return null;
|
|
|
|
try {
|
|
const res = await fetch(WORKER_PROXY_URL, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email: email.toLowerCase().trim() }),
|
|
});
|
|
if (!res.ok) return null;
|
|
const data = await res.json();
|
|
return data.total > 0 ? data.results[0].properties : null;
|
|
} catch {
|
|
// Erreur réseau ou Worker indisponible : on laisse passer
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function setupContactForm(form) {
|
|
form.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
if (!validateForm(form)) return;
|
|
|
|
// ── VÉRIFICATION TURNSTILE (CAPTCHA anti-bot) ────────────────────────────
|
|
if (!window.turnstileToken) {
|
|
const errEl = document.getElementById('formErrorGlobal');
|
|
if (errEl) {
|
|
errEl.style.display = 'block';
|
|
errEl.textContent = '🤖 Veuillez compléter le contrôle anti-robot ci-dessus avant d\'envoyer le formulaire.';
|
|
}
|
|
return;
|
|
}
|
|
// ─────────────────────────────────────────────────────────────────────────
|
|
|
|
setLoading(true);
|
|
|
|
const email = form.email.value.trim();
|
|
|
|
// ── VÉRIFICATION DOUBLON ──────────────────────────────────────────────────
|
|
// Vérifie HubSpot. Comme les contacts ne sont créés QU'APRÈS confirmation
|
|
// email, ce check ne retourne que les vrais clients déjà inscrits (pas
|
|
// les inscriptions en attente de confirmation).
|
|
const existing = await checkExistingContact(email);
|
|
if (existing) {
|
|
setLoading(false);
|
|
showAlreadyRegistered(existing);
|
|
return;
|
|
}
|
|
// ─────────────────────────────────────────────────────────────────────────
|
|
|
|
const data = {
|
|
firstname: form.firstname.value.trim(),
|
|
lastname: form.lastname.value.trim(),
|
|
phone: form.phone.value.trim(),
|
|
email: email,
|
|
address: form.address.value.trim(),
|
|
};
|
|
|
|
// ── ENVOI VERS LE WORKER ──────────────────────────────────────────────────
|
|
// Le Worker stocke les données en KV (24h), envoie un email de validation
|
|
// via Brevo. Le contact n'est créé dans HubSpot QUE quand l'utilisateur
|
|
// clique sur le lien de confirmation (anti-pollution du CRM).
|
|
let ok = false;
|
|
try {
|
|
const res = await fetch(WORKER_PROXY_URL, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
action: 'requestVerification',
|
|
...data,
|
|
turnstile_token: window.turnstileToken || '',
|
|
}),
|
|
});
|
|
const result = await res.json().catch(() => ({}));
|
|
ok = res.ok && result.ok === true;
|
|
} catch (err) {
|
|
console.warn('[requestVerification]', err);
|
|
}
|
|
|
|
setLoading(false);
|
|
|
|
if (ok) {
|
|
showSuccess(null, data);
|
|
} else {
|
|
showError();
|
|
}
|
|
});
|
|
}
|
|
|
|
// ── SOUMISSION HUBSPOT ────────────────────────────────────────────────────────
|
|
async function submitToHubSpot(data) {
|
|
const payload = {
|
|
fields: [
|
|
{ name: 'firstname', value: data.firstname },
|
|
{ name: 'lastname', value: data.lastname },
|
|
{ name: 'phone', value: data.phone },
|
|
{ name: 'email', value: data.email },
|
|
{ name: 'address', value: data.address },
|
|
{ name: 'reference_client', value: data.reference_client },
|
|
],
|
|
context: {
|
|
pageUri: window.location.href,
|
|
pageName: document.title,
|
|
},
|
|
};
|
|
|
|
const res = await fetch(
|
|
`https://api.hsforms.com/submissions/v3/integration/submit/${HUBSPOT_PORTAL_ID}/${HUBSPOT_FORM_GUID}`,
|
|
{
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload),
|
|
}
|
|
);
|
|
|
|
if (!res.ok) throw new Error(`HubSpot error: ${res.status}`);
|
|
return res.json();
|
|
}
|
|
|
|
// ── SOUMISSION FORMSPREE (email de backup) ────────────────────────────────────
|
|
async function submitToFormspree(data) {
|
|
if (FORMSPREE_ID === 'YOUR_FORMSPREE_ID') return;
|
|
|
|
const res = await fetch(`https://formspree.io/f/${FORMSPREE_ID}`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
|
|
body: JSON.stringify({
|
|
nom: data.lastname,
|
|
prenom: data.firstname,
|
|
telephone: data.phone,
|
|
email: data.email,
|
|
adresse_livraison: data.address,
|
|
reference_client: data.reference_client,
|
|
}),
|
|
});
|
|
|
|
if (!res.ok) throw new Error(`Formspree error: ${res.status}`);
|
|
return res.json();
|
|
}
|
|
|
|
// ── NOTIFICATION DOUBLON (email interne seulement, sans toucher aux données) ──
|
|
async function notifyDuplicateViaFormspree(contact) {
|
|
if (FORMSPREE_ID === 'YOUR_FORMSPREE_ID') return;
|
|
try {
|
|
await fetch(`https://formspree.io/f/${FORMSPREE_ID}`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
|
|
body: JSON.stringify({
|
|
_subject: `[MVA] Tentative double inscription — ${contact.firstname || ''} ${contact.lastname || ''}`,
|
|
message: `Le client ${contact.firstname || ''} ${contact.lastname || ''} (${contact.email}) a tenté de s'inscrire à nouveau. Référence existante : ${contact.reference_client || 'non définie'}.`,
|
|
}),
|
|
});
|
|
} catch { /* Ne pas bloquer l'interface si la notification échoue */ }
|
|
}
|
|
|
|
// ── VALIDATION ────────────────────────────────────────────────────────────────
|
|
function validateForm(form) {
|
|
let valid = true;
|
|
const lang = localStorage.getItem('mva-lang') || 'fr';
|
|
const t = translations?.[lang]?.contact || {};
|
|
|
|
const requiredMsg = t.required || 'Ce champ est obligatoire';
|
|
const invalidEmail = t.invalidEmail || 'Adresse email invalide';
|
|
const invalidPhone = t.invalidPhone || 'Numéro de téléphone invalide';
|
|
|
|
const fields = ['firstname', 'lastname', 'phone', 'email', 'address'];
|
|
fields.forEach(name => clearError(name));
|
|
clearError('cgv');
|
|
|
|
fields.forEach(name => {
|
|
const el = form[name];
|
|
if (!el.value.trim()) {
|
|
showFieldError(name, requiredMsg);
|
|
valid = false;
|
|
}
|
|
});
|
|
|
|
const cgvBox = form['cgv'];
|
|
if (cgvBox && !cgvBox.checked) {
|
|
showFieldError('cgv', t.cgvRequired || 'Vous devez accepter les Conditions Générales de Vente.');
|
|
valid = false;
|
|
}
|
|
|
|
if (form.email.value.trim() && !isValidEmail(form.email.value.trim())) {
|
|
showFieldError('email', invalidEmail);
|
|
valid = false;
|
|
}
|
|
|
|
if (form.phone.value.trim() && !isValidPhone(form.phone.value.trim())) {
|
|
showFieldError('phone', invalidPhone);
|
|
valid = false;
|
|
}
|
|
|
|
return valid;
|
|
}
|
|
|
|
function isValidEmail(email) {
|
|
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
|
}
|
|
|
|
function isValidPhone(phone) {
|
|
return /^[+\d][\d\s\-().]{6,20}$/.test(phone);
|
|
}
|
|
|
|
// ── AFFICHAGE ─────────────────────────────────────────────────────────────────
|
|
function showFieldError(name, msg) {
|
|
const el = document.getElementById(`error-${name}`);
|
|
const input = document.getElementById(name) || document.querySelector(`[name="${name}"]`);
|
|
if (el) el.textContent = msg;
|
|
if (input) input.classList.add('error');
|
|
}
|
|
|
|
function clearError(name) {
|
|
const el = document.getElementById(`error-${name}`);
|
|
const input = document.getElementById(name) || document.querySelector(`[name="${name}"]`);
|
|
if (el) el.textContent = '';
|
|
if (input) input.classList.remove('error');
|
|
}
|
|
|
|
function setLoading(isLoading) {
|
|
const btn = document.getElementById('submitBtn');
|
|
const txt = document.getElementById('submitText');
|
|
const form = document.getElementById('contactForm');
|
|
const lang = localStorage.getItem('mva-lang') || 'fr';
|
|
const t = translations?.[lang]?.contact || {};
|
|
|
|
if (!btn) return;
|
|
btn.disabled = isLoading;
|
|
if (txt) {
|
|
txt.textContent = isLoading
|
|
? (t.submitLoading || 'Envoi en cours...')
|
|
: (t.submitBtn || "S'inscrire");
|
|
}
|
|
form?.classList.toggle('form-loading', isLoading);
|
|
}
|
|
|
|
function showSuccess(_refNumber, _clientData) {
|
|
// L'envoi de l'email de validation est déjà fait dans setupContactForm
|
|
// via l'appel Worker requestVerification — on n'a plus rien à faire ici
|
|
// sauf afficher la confirmation à l'écran.
|
|
const successEl = document.getElementById('formSuccess');
|
|
const form = document.getElementById('contactForm');
|
|
if (successEl) {
|
|
successEl.classList.add('show');
|
|
successEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
}
|
|
if (form) form.style.display = 'none';
|
|
}
|
|
|
|
// ── EMAIL "RAVIS DE TE REVOIR" (client déjà inscrit) ──────────────────────────
|
|
// Rappelle au client son numéro de référence existant — n'écrit RIEN dans HubSpot.
|
|
// Passe par le Cloudflare Worker (action: sendWelcomeBack) qui délègue à Resend
|
|
// — footer 2026 cohérent avec les autres emails transactionnels. Anti-bot via
|
|
// Turnstile : on transmet le token déjà validé au moment du submit du formulaire.
|
|
async function sendWelcomeBackEmail(contact) {
|
|
if (!WORKER_PROXY_URL) return;
|
|
if (!contact || !contact.email) return;
|
|
if (!window.turnstileToken) return;
|
|
try {
|
|
await fetch(WORKER_PROXY_URL, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
action : 'sendWelcomeBack',
|
|
email : contact.email,
|
|
firstname : contact.firstname || '',
|
|
turnstile_token : window.turnstileToken,
|
|
}),
|
|
});
|
|
} catch (err) {
|
|
// Erreur réseau : on n'interrompt pas l'UX (le client voit déjà sa ref dans le UI)
|
|
console.warn('Worker sendWelcomeBack failed:', err);
|
|
}
|
|
}
|
|
|
|
// Affiche le message "déjà client" — ne modifie AUCUNE donnée HubSpot
|
|
function showAlreadyRegistered(contact) {
|
|
const lang = localStorage.getItem('mva-lang') || 'fr';
|
|
const t = translations?.[lang]?.contact || {};
|
|
|
|
const alreadyEl = document.getElementById('alreadyRegistered');
|
|
const form = document.getElementById('contactForm');
|
|
const refDisplay = document.getElementById('existingRefDisplay');
|
|
|
|
// Affiche la référence existante si disponible, sinon message de contact
|
|
if (refDisplay) {
|
|
refDisplay.textContent = contact.reference_client
|
|
? contact.reference_client
|
|
: (t.alreadyRefUnknown || 'Contactez-nous pour retrouver votre référence.');
|
|
}
|
|
|
|
if (alreadyEl) {
|
|
alreadyEl.classList.add('show');
|
|
alreadyEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
}
|
|
|
|
if (form) form.style.display = 'none';
|
|
|
|
// Envoi d'une notification interne à MVA (sans modifier les données du client)
|
|
notifyDuplicateViaFormspree(contact);
|
|
|
|
// Email "Ravis de te revoir" via Worker + Resend (= footer 2026 cohérent)
|
|
sendWelcomeBackEmail(contact);
|
|
}
|
|
|
|
function showError() {
|
|
const errEl = document.getElementById('formErrorGlobal');
|
|
const lang = localStorage.getItem('mva-lang') || 'fr';
|
|
const t = translations?.[lang]?.contact || {};
|
|
if (errEl) {
|
|
errEl.style.display = 'block';
|
|
errEl.textContent = t.errorMsg || 'Une erreur est survenue. Veuillez réessayer ou nous contacter directement.';
|
|
}
|
|
}
|