import { useState, useEffect, useRef } from "react";
import { addPropertyControls, ControlType } from "framer";
export default function ActiveCampaignFinalForm(props) {
const {
formTitle = "Formulário de Contato",
buttonText = "Enviar",
successMessage = "Formulário enviado com sucesso!",
// Estilos
phoneInputWidth = "100%",
backgroundColor = "#ffffff",
accentColor = "#0066ff",
textColor = "#333333",
borderRadius = 8,
formWidth = "100%",
maxFormWidth = "500px",
titleFontSize = "24px",
labelFontSize = "16px",
inputFontSize = "16px",
buttonFontSize = "16px",
// Configurações do ActiveCampaign
activeCampaignUrl = "",
activeCampaignApiKey = "",
activeCampaignListId = "1",
tagId = "", // Novo campo para ID da Tag
// Configuração de Debug
showDebugInfo = false,
} = props;
// Referência para o input de telefone
const phoneInputRef = useRef(null);
// Estados
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
const [utmCampaign, setUtmCampaign] = useState("");
const [utmMedium, setUtmMedium] = useState("");
const [utmContent, setUtmContent] = useState("");
const [utmSource, setUtmSource] = useState("");
const [utmTerm, setUtmTerm] = useState("");
const [src, setSrc] = useState("");
const [sck, setSck] = useState("");
const [isPhoneValid, setIsPhoneValid] = useState(true);
const [isEmailValid, setIsEmailValid] = useState(true);
const [submitted, setSubmitted] = useState(false);
const [formErrors, setFormErrors] = useState({});
const [submitting, setSubmitting] = useState(false);
const [apiError, setApiError] = useState("");
// Captura UTMs e parâmetros adicionais da URL
useEffect(() => {
const urlParams = new URLSearchParams(window.location.search);
setUtmCampaign(urlParams.get("utm_campaign") || "");
setUtmMedium(urlParams.get("utm_medium") || "");
setUtmContent(urlParams.get("utm_content") || "");
setUtmSource(urlParams.get("utm_source") || "");
setUtmTerm(urlParams.get("utm_term") || "");
setSrc(urlParams.get("src") || "");
setSck(urlParams.get("sck") || "");
}, []);
// Validação do formulário
const validateForm = () => {
const errors = {};
if (!name.trim()) errors.name = "Nome é obrigatório";
if (!email.trim()) errors.email = "Email é obrigatório";
if (!phone.trim()) errors.phone = "Telefone é obrigatório";
setFormErrors(errors);
return Object.keys(errors).length === 0;
};
// Envio para ActiveCampaign
const submitToActiveCampaign = async (formData) => {
if (!activeCampaignUrl || !activeCampaignApiKey) {
setApiError("Configuração da API do ActiveCampaign não encontrada");
return false;
}
try {
const baseUrl = `https://cors-anywhere.herokuapp.com/${activeCampaignUrl}`;
// Criar contato
const contactResponse = await fetch(`${baseUrl}/api/3/contacts`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
"Api-Token": activeCampaignApiKey,
},
body: JSON.stringify({
contact: {
email: formData.email,
firstName: formData.firstName,
lastName: formData.lastName,
phone: formData.phone,
fieldValues: [
{ field: "1", value: formData.utmCampaign },
{ field: "2", value: formData.utmMedium },
{ field: "3", value: formData.utmContent },
{ field: "4", value: formData.utmSource },
{ field: "5", value: formData.utmTerm },
{ field: "6", value: formData.src },
{ field: "7", value: formData.sck },
],
},
}),
});
if (!contactResponse.ok) throw new Error("Erro ao criar contato");
const contactData = await contactResponse.json();
const contactId = contactData.contact.id;
// Adicionar contato à lista
if (activeCampaignListId) {
await fetch(`${baseUrl}/api/3/contactLists`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
"Api-Token": activeCampaignApiKey,
},
body: JSON.stringify({
contactList: {
list: parseInt(activeCampaignListId),
contact: contactId,
status: 1,
},
}),
});
}
// Adicionar Tag (se configurado)
if (tagId) {
await fetch(`${baseUrl}/api/3/contactTags`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
"Api-Token": activeCampaignApiKey,
},
body: JSON.stringify({
contactTag: {
contact: contactId,
tag: tagId,
},
}),
});
}
return true;
} catch (error) {
setApiError("Erro ao enviar o formulário: " + error.message);
return false;
}
};
// Envio do formulário
const handleSubmit = async (e) => {
e.preventDefault();
setApiError("");
if (validateForm()) {
setSubmitting(true);
const nameParts = name.trim().split(" ");
const firstName = nameParts[0] || "";
const lastName = nameParts.slice(1).join(" ") || "";
const formData = {
firstName,
lastName,
email,
phone,
utmCampaign,
utmMedium,
utmContent,
utmSource,
utmTerm,
src,
sck,
};
const success = await submitToActiveCampaign(formData);
setSubmitting(false);
if (success) setSubmitted(true);
}
};
return (
);
}