mitre-form-component 0.1.4 → 2.0.0

package/dist/index.cjs

@@ -36,7 +36,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Form/index.tsx
-var import_react7 = __toESM(require("react"), 1);
+var import_react8 = __toESM(require("react"), 1);
 
 // src/components/hooks/useError.ts
 var import_react = require("react");
@@ -928,14 +928,181 @@ var Alert = ({
   );
 };
 
-// src/components/PhoneInput/index.tsx
+// src/components/Modal/index.tsx
 var import_react5 = require("react");
+var import_hi2 = require("react-icons/hi");
 
-// src/components/PhoneInput/styles.ts
+// src/components/Modal/styles.ts
 var import_styled_components6 = __toESM(require("styled-components"), 1);
+var fadeIn2 = import_styled_components6.keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+var slideIn = import_styled_components6.keyframes`
+  from { opacity: 0; transform: translateY(-20px) scale(0.96); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+`;
+var Overlay = import_styled_components6.default.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  padding: 1rem;
+  animation: ${fadeIn2} 0.18s ease-out;
+`;
+var accentStyles = {
+  success: import_styled_components6.css`
+    color: ${theme.colors.green2};
+  `,
+  error: import_styled_components6.css`
+    color: ${theme.colors.red};
+  `
+};
+var Container = import_styled_components6.default.div`
+  position: relative;
+  background: ${theme.colors.white};
+  border-radius: 0.75rem;
+  box-shadow: ${theme.shadows.shadow500};
+  max-width: 420px;
+  width: 100%;
+  padding: 1.75rem 1.5rem 1.25rem;
+  font-family: ${theme.fonts.primary};
+  animation: ${slideIn} 0.22s ease-out;
+
+  &::before {
+    content: "";
+    display: block;
+    width: 56px;
+    height: 4px;
+    border-radius: 999px;
+    margin: 0 auto 1rem;
+    background: ${({ $type }) => $type === "success" ? theme.colors.green2 : theme.colors.red};
+  }
+
+  h2 {
+    margin: 0 0 0.5rem;
+    font-size: 1.25rem;
+    font-weight: 700;
+    text-align: center;
+    ${({ $type }) => accentStyles[$type]}
+  }
+
+  p {
+    margin: 0 0 1.5rem;
+    font-size: 0.95rem;
+    line-height: 1.45;
+    text-align: center;
+    color: ${theme.colors.black};
+  }
+`;
+var CloseButton = import_styled_components6.default.button`
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: ${theme.colors.gray550};
+  padding: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  transition: background 0.15s, color 0.15s;
+
+  &:hover {
+    background: ${theme.colors.gray300};
+    color: ${theme.colors.black};
+  }
+
+  svg {
+    width: 1.1rem;
+    height: 1.1rem;
+  }
+`;
+var PrimaryButton = import_styled_components6.default.button`
+  display: block;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: none;
+  border-radius: 0.5rem;
+  background: ${({ $bgColor }) => $bgColor || theme.colors.yellow500};
+  color: ${({ $textColor }) => $textColor || theme.colors.black};
+  font-family: ${theme.fonts.primary};
+  font-size: 1rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: filter 0.15s;
+
+  &:hover {
+    filter: brightness(0.95);
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${theme.colors.yellow400};
+    outline-offset: 2px;
+  }
+`;
+
+// src/components/Modal/index.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Modal = ({
+  type,
+  title,
+  message,
+  primaryButtonText,
+  onPrimaryAction,
+  onClose,
+  primaryButtonBgColor,
+  primaryButtonTextColor
+}) => {
+  const primaryButtonRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    primaryButtonRef.current?.focus();
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    const handleKey = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [onClose]);
+  const handleOverlayClick = (event) => {
+    if (event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Overlay, { onClick: handleOverlayClick, role: "dialog", "aria-modal": "true", "aria-label": title, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Container, { $type: type, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CloseButton, { onClick: onClose, "aria-label": "Fechar", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_hi2.HiX, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      PrimaryButton,
+      {
+        ref: primaryButtonRef,
+        onClick: onPrimaryAction,
+        $bgColor: primaryButtonBgColor,
+        $textColor: primaryButtonTextColor,
+        type: "button",
+        children: primaryButtonText
+      }
+    )
+  ] }) });
+};
+
+// src/components/PhoneInput/index.tsx
+var import_react6 = require("react");
+
+// src/components/PhoneInput/styles.ts
+var import_styled_components7 = __toESM(require("styled-components"), 1);
 var import_react_international_phone = require("react-international-phone");
 var import_style = require("react-international-phone/style.css");
-var FormLabel3 = import_styled_components6.default.label`
+var FormLabel3 = import_styled_components7.default.label`
   font-family: ${theme.fonts.primary};
   font-style: normal;
   font-weight: 500;
@@ -945,7 +1112,7 @@ var FormLabel3 = import_styled_components6.default.label`
   margin-bottom: 0.5rem;
   text-align: left;
 `;
-var StyledPhoneInput = (0, import_styled_components6.default)(import_react_international_phone.PhoneInput)`
+var StyledPhoneInput = (0, import_styled_components7.default)(import_react_international_phone.PhoneInput)`
   width: 100%;
   height: 3.125rem;
   background: ${(props) => props.$backgroundColor || theme.colors.white};
@@ -1059,24 +1226,24 @@ var StyledPhoneInput = (0, import_styled_components6.default)(import_react_inter
     }
   }
 `;
-var FormErrorMessage3 = import_styled_components6.default.small`
+var FormErrorMessage3 = import_styled_components7.default.small`
   font-size: 0.75rem;
   line-height: 1.125rem;
   color: ${theme.colors.red};
   margin-top: 0.25rem;
   display: block;
 `;
-var FormControl3 = import_styled_components6.default.div.withConfig({
+var FormControl3 = import_styled_components7.default.div.withConfig({
   shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
 })`
   ${FormLabel3} {
-    ${(props) => props.isInvalid && import_styled_components6.css`
+    ${(props) => props.isInvalid && import_styled_components7.css`
         color: ${theme.colors.red};
       `};
   }
 
   ${StyledPhoneInput} {
-    ${(props) => props.isInvalid && import_styled_components6.css`
+    ${(props) => props.isInvalid && import_styled_components7.css`
         border: 1px solid ${theme.colors.red};
 
         &:not(:focus)::placeholder {
@@ -1086,7 +1253,7 @@ var FormControl3 = import_styled_components6.default.div.withConfig({
       `};
 
     .react-international-phone-input-container {
-      ${(props) => props.isInvalid && import_styled_components6.css`
+      ${(props) => props.isInvalid && import_styled_components7.css`
           border: 1px solid ${theme.colors.red};
 
           &:not(:focus)::placeholder {
@@ -1097,7 +1264,7 @@ var FormControl3 = import_styled_components6.default.div.withConfig({
     }
 
     .react-international-phone-country-selector-button {
-      ${(props) => props.isInvalid && import_styled_components6.css`
+      ${(props) => props.isInvalid && import_styled_components7.css`
           border-right: 1px solid ${theme.colors.red};
         `};
     }
@@ -1105,7 +1272,7 @@ var FormControl3 = import_styled_components6.default.div.withConfig({
 `;
 
 // src/components/PhoneInput/index.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var PhoneInputBase = ({
   id,
   label,
@@ -1120,9 +1287,9 @@ var PhoneInputBase = ({
   value,
   ...rest
 }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(FormControl3, { isInvalid: !!error, children: [
-    !!label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FormLabel3, { htmlFor: id, $textColor: labelTextColor, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(FormControl3, { isInvalid: !!error, children: [
+    !!label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormLabel3, { htmlFor: id, $textColor: labelTextColor, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       StyledPhoneInput,
       {
         ref,
@@ -1156,14 +1323,14 @@ var PhoneInputBase = ({
         $textColor: inputTextColor
       }
     ),
-    !!error && showErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FormErrorMessage3, { "data-testid": "error-message", children: typeof error === "string" ? error : error?.message })
+    !!error && showErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormErrorMessage3, { "data-testid": "error-message", children: typeof error === "string" ? error : error?.message })
   ] });
 };
-var PhoneInput2 = (0, import_react5.forwardRef)(PhoneInputBase);
+var PhoneInput2 = (0, import_react6.forwardRef)(PhoneInputBase);
 
 // src/components/ProductSelect/index.tsx
-var import_react6 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var ProductSelectBase = ({
   id,
   label,
@@ -1178,9 +1345,9 @@ var ProductSelectBase = ({
   placeholder = "Selecione um produto",
   ...rest
 }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(FormControl, { isInvalid: !!error, children: [
-    !!label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormLabel, { htmlFor: id, $textColor: labelTextColor, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(FormControl, { isInvalid: !!error, children: [
+    !!label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormLabel, { htmlFor: id, $textColor: labelTextColor, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       Select,
       {
         id,
@@ -1192,18 +1359,37 @@ var ProductSelectBase = ({
         $textColor: textColor,
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", disabled: true, children: placeholder }),
-          products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: product.id, children: product.name }, product.id))
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", disabled: true, children: placeholder }),
+          products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: product.id, children: product.name }, product.id))
         ]
       }
     ),
-    !!error && showErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormErrorMessage, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
+    !!error && showErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormErrorMessage, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
   ] });
 };
-var ProductSelect = (0, import_react6.forwardRef)(ProductSelectBase);
+var ProductSelect = (0, import_react7.forwardRef)(ProductSelectBase);
+
+// src/config/environments.ts
+var ENVIRONMENTS = {
+  homol: {
+    apiUrl: "https://leads-hml.mitrerealty.com.br/api-leads",
+    apiToken: "TEFORElOR19NSVRSRTptZlFXZnhvUHdNbWVZY0FidkF0QWJ3Q2RFYWtKckJBOXg5cGNsOTBvS1V0N2ZsU0d4TEtNdEZZd3k0NFlEc0c3",
+    whatsappPhone: "551148100601",
+    chatUrl: "https://crm-hml.mitrerealty.com.br/wcc/UserLoginSubmit.do"
+  },
+  prod: {
+    apiUrl: "https://leads.mitrerealty.com.br/api-leads",
+    apiToken: "TEFORElOR19NSVRSRTptZlFXZnhvUHdNbWVZY0FidkF0QWJ3Q2RFYWtKckJBOXg5cGNsOTBvS1V0N2ZsU0d4TEtNdEZZd3k0NFlEc0c3",
+    whatsappPhone: "551148100601",
+    chatUrl: "https://crm.mitrerealty.com.br/wcc/UserLoginSubmit.do"
+  }
+};
+var resolveEnvironment = (ambiente = "homol") => {
+  return ENVIRONMENTS[ambiente] ?? null;
+};
 
 // src/components/Form/index.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var phoneUtil = import_google_libphonenumber.PhoneNumberUtil.getInstance();
 var PreferenciaContato = /* @__PURE__ */ ((PreferenciaContato2) => {
   PreferenciaContato2["Whatsapp"] = "Whatsapp";
@@ -1211,6 +1397,40 @@ var PreferenciaContato = /* @__PURE__ */ ((PreferenciaContato2) => {
   PreferenciaContato2["Ligacao"] = "Liga\xE7\xE3o";
   return PreferenciaContato2;
 })(PreferenciaContato || {});
+var WHATSAPP_MESSAGE = "Ol\xE1! Tenho interesse e gostaria de mais informa\xE7\xF5es.";
+var WHATSAPP_TITLE = "Fale com um corretor por WhatsApp";
+var WHATSAPP_SUBTITLE = "Informe seus dados para contato.";
+var WHATSAPP_BUTTON_TEXT = "Entrar";
+var CHAT_TITLE = "Fale com um corretor por chat";
+var CHAT_SUBTITLE = "Informe seus dados para contato.";
+var CHAT_BUTTON_TEXT = "Entrar";
+var MODAL_ERROR_TITLE = "N\xE3o foi poss\xEDvel completar seu contato";
+var MODAL_ERROR_MESSAGE = "Por favor, tente novamente em alguns instantes.";
+var MODAL_ERROR_BUTTON_TEXT = "OK";
+var MODAL_SUCCESS_TITLE = "Cadastro realizado!";
+var MODAL_SUCCESS_MESSAGE_WHATSAPP = "Clique abaixo para continuar pelo WhatsApp.";
+var MODAL_SUCCESS_BUTTON_WHATSAPP = "Abrir WhatsApp";
+var MODAL_SUCCESS_MESSAGE_CHAT = "Clique abaixo para iniciar o atendimento.";
+var MODAL_SUCCESS_BUTTON_CHAT = "Iniciar atendimento";
+function buildWhatsappUrl(phone) {
+  const digits = phone.replace(/\D/g, "");
+  const text = encodeURIComponent(WHATSAPP_MESSAGE);
+  return `https://api.whatsapp.com/send?phone=${digits}&text=${text}`;
+}
+function submitChatInNewTab(chatUrl, virtualObj) {
+  const form = document.createElement("form");
+  form.method = "POST";
+  form.action = chatUrl;
+  form.target = "_blank";
+  const input = document.createElement("input");
+  input.type = "hidden";
+  input.name = "virtual_obj";
+  input.value = JSON.stringify(virtualObj);
+  form.appendChild(input);
+  document.body.appendChild(form);
+  form.submit();
+  document.body.removeChild(form);
+}
 var isPhoneValid = (phone) => {
   try {
     return phoneUtil.isValidNumber(phoneUtil.parseAndKeepRawInput(phone));
@@ -1240,10 +1460,10 @@ var schemaWithProduct = yup.object().shape({
   productId: yup.string().required("Produto \xE9 obrigat\xF3rio")
 });
 var schema = yup.object().shape(baseSchema);
-var MitreFormComponent = import_react7.default.forwardRef(({
+var MitreFormComponent = import_react8.default.forwardRef(({
   products,
-  apiUrl,
-  apiToken,
+  ambiente = "homol",
+  canal = "form",
   showHeader = true,
   title = "Atendimento por mensagem",
   subtitle = "Informe seus dados e retornaremos a mensagem.",
@@ -1258,15 +1478,17 @@ var MitreFormComponent = import_react7.default.forwardRef(({
   inputPlaceholderColor = theme.colors.gray100,
   inputTextColor = theme.colors.black,
   showPreferenciaContato = false,
-  onSuccess,
-  onError
+  idProdutoTerceiro,
+  idEmpreendimento,
+  naoCriarEvento
 }, ref) => {
   useMontserratFont();
-  const [loading, setIsLoading] = (0, import_react7.useState)(false);
+  const [loading, setIsLoading] = (0, import_react8.useState)(false);
   const { error, handleError, clearError } = useError();
-  const [successMessage, setSuccessMessage] = (0, import_react7.useState)("");
-  const [formKey, setFormKey] = (0, import_react7.useState)(0);
-  const [selectedProductId, setSelectedProductId] = (0, import_react7.useState)(null);
+  const [successMessage, setSuccessMessage] = (0, import_react8.useState)("");
+  const [formKey, setFormKey] = (0, import_react8.useState)(0);
+  const [selectedProductId, setSelectedProductId] = (0, import_react8.useState)(null);
+  const [actionModal, setActionModal] = (0, import_react8.useState)(null);
   const validateProducts = () => {
     if (!products) {
       return "Lista de produtos n\xE3o foi fornecida";
@@ -1291,14 +1513,60 @@ var MitreFormComponent = import_react7.default.forwardRef(({
     }
     return null;
   };
+  const env = resolveEnvironment(ambiente);
+  const validateAmbienteConfig = () => {
+    if (!env) {
+      return `ambiente='${ambiente}' n\xE3o \xE9 reconhecido. Use 'homol' ou 'prod'.`;
+    }
+    if (!env.apiUrl || !env.apiToken) {
+      return `Configura\xE7\xE3o interna do ambiente '${ambiente}' est\xE1 incompleta (apiUrl/apiToken).`;
+    }
+    return null;
+  };
+  const validateWhatsappConfig = () => {
+    if (canal !== "whatsapp") return null;
+    if (!env) return null;
+    const raw = env.whatsappPhone?.trim() ?? "";
+    if (!raw) {
+      return `canal='whatsapp' exige whatsappPhone no ambiente '${ambiente}'.`;
+    }
+    const normalized = raw.startsWith("+") ? raw : `+${raw}`;
+    if (!isPhoneValid(normalized)) {
+      return `whatsappPhone do ambiente '${ambiente}' \xE9 inv\xE1lido (${JSON.stringify(env.whatsappPhone)}).`;
+    }
+    return null;
+  };
+  const validateChatConfig = () => {
+    if (canal !== "chat") return null;
+    if (!env) return null;
+    const raw = env.chatUrl?.trim() ?? "";
+    if (!raw) {
+      return `canal='chat' exige chatUrl no ambiente '${ambiente}'.`;
+    }
+    try {
+      const parsed = new URL(raw);
+      if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+        return `chatUrl do ambiente '${ambiente}' precisa ter protocolo http(s) (recebido: ${JSON.stringify(env.chatUrl)}).`;
+      }
+    } catch {
+      return `chatUrl do ambiente '${ambiente}' n\xE3o \xE9 URL absoluta v\xE1lida (recebido: ${JSON.stringify(env.chatUrl)}).`;
+    }
+    return null;
+  };
   const productsValidationError = validateProducts();
-  const [utm, setUtm] = (0, import_react7.useState)({ utm_source: "direto", createdAt: (/* @__PURE__ */ new Date()).toISOString() });
+  const ambienteConfigError = validateAmbienteConfig();
+  const whatsappConfigError = validateWhatsappConfig();
+  const chatConfigError = validateChatConfig();
+  const effectiveShowPreferenciaContato = canal === "whatsapp" || canal === "chat" ? false : showPreferenciaContato;
+  const effectiveTitle = canal === "whatsapp" ? WHATSAPP_TITLE : canal === "chat" ? CHAT_TITLE : title;
+  const effectiveSubtitle = canal === "whatsapp" ? WHATSAPP_SUBTITLE : canal === "chat" ? CHAT_SUBTITLE : subtitle;
+  const [utm, setUtm] = (0, import_react8.useState)({ utm_source: "direto", createdAt: (/* @__PURE__ */ new Date()).toISOString() });
   const formSchema = products && products.length > 1 ? schemaWithProduct : schema;
   const { control, register, handleSubmit, formState: { errors }, reset, clearErrors } = (0, import_react_hook_form.useForm)({
     resolver: (0, import_yup.yupResolver)(formSchema),
     mode: "onSubmit"
   });
-  import_react7.default.useEffect(() => {
+  import_react8.default.useEffect(() => {
     if (!isBrowser()) return;
     const { data } = resolveUtmWithPriority(/* @__PURE__ */ new Date());
     setUtm(data);
@@ -1330,9 +1598,13 @@ var MitreFormComponent = import_react7.default.forwardRef(({
     const phoneValue = phone.inputValue;
     const phoneDigitsOnly = phoneValue?.replace(/\D/g, "") || "";
     const message = "Gostaria de mais informa\xE7\xF5es sobre o produto";
+    setActionModal(null);
     try {
       setIsLoading(true);
-      if (!products || products.length === 0 || !apiToken) {
+      if (!env) {
+        throw new Error("Ambiente n\xE3o resolvido");
+      }
+      if (!products || products.length === 0) {
         throw new Error("Par\xE2metros obrigat\xF3rios n\xE3o informados");
       }
       let selectedProduct;
@@ -1348,6 +1620,8 @@ var MitreFormComponent = import_react7.default.forwardRef(({
         }
         selectedProduct = foundProduct;
       }
+      const paginaAtual = typeof window !== "undefined" ? window.location.href : void 0;
+      const naoCriarEventoEfetivo = canal !== "form" && (naoCriarEvento ?? true);
       const requestBody = {
         name,
         email,
@@ -1358,13 +1632,23 @@ var MitreFormComponent = import_react7.default.forwardRef(({
         utm_campaign: utm.utm_campaign,
         utm_medium: utm.utm_medium,
         utm_term: utm.utm_term,
-        ...showPreferenciaContato && preferencia_contato ? { preferencia_contato } : {}
+        ...canal === "whatsapp" ? { preferencia_contato: "Whatsapp" /* Whatsapp */ } : effectiveShowPreferenciaContato && preferencia_contato ? { preferencia_contato } : {},
+        ...canal !== "form" ? {
+          canal,
+          ...paginaAtual ? { pagina: paginaAtual } : {},
+          // Paridade com atendimento.html legado: o mesmo <form id="chat-form">
+          // era usado para chat e whatsapp, portanto is_chat=true ia em ambos.
+          is_chat: true,
+          ...idProdutoTerceiro !== void 0 ? { idProdutoTerceiro } : {},
+          ...idEmpreendimento !== void 0 ? { idEmpreendimento } : {},
+          ...naoCriarEventoEfetivo ? { naoCriarEvento: true } : {}
+        } : {}
       };
-      const response = await fetch(`${apiUrl}/leads`, {
+      const response = await fetch(`${env.apiUrl}/leads`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          Authorization: `Basic ${apiToken}`
+          Authorization: `Basic ${env.apiToken}`
         },
         body: JSON.stringify(requestBody)
       });
@@ -1373,26 +1657,61 @@ var MitreFormComponent = import_react7.default.forwardRef(({
       }
       const responseData = await response.json();
       const leadId = responseData.leadId || responseData.id || "";
-      setSuccessMessage("Mensagem enviada com sucesso!");
       resetForm();
-      onSuccess?.(requestBody, leadId);
+      if (canal === "whatsapp") {
+        setActionModal({
+          kind: "success",
+          canal: "whatsapp",
+          targetUrl: buildWhatsappUrl(env.whatsappPhone)
+        });
+      } else if (canal === "chat") {
+        const virtualObj = {
+          ...requestBody,
+          externalOriginId: leadId,
+          ...paginaAtual ? { pagina: paginaAtual } : {},
+          ...idProdutoTerceiro !== void 0 ? { idProdutoTerceiro } : {},
+          ...idEmpreendimento !== void 0 ? { idEmpreendimento } : {},
+          ...naoCriarEventoEfetivo ? { naoCriarEvento: true } : {}
+        };
+        setActionModal({
+          kind: "success",
+          canal: "chat",
+          chatUrl: env.chatUrl,
+          virtualObj
+        });
+      } else {
+        setSuccessMessage("Mensagem enviada com sucesso!");
+      }
     } catch (err) {
-      const error2 = err instanceof Error ? err : new Error("Erro desconhecido");
-      handleError(err);
-      onError?.(error2);
+      if (canal === "whatsapp" || canal === "chat") {
+        setActionModal({ kind: "error" });
+      } else {
+        handleError(err);
+      }
     } finally {
       setIsLoading(false);
     }
   };
-  if (productsValidationError) {
-    console.error("Erro na valida\xE7\xE3o dos produtos:", productsValidationError);
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(HeaderContainer, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Title, { $textColor: textColor, children: "Erro no carregamento do formul\xE1rio!" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Subtitle, { $textColor: textColor, children: "N\xE3o foi poss\xEDvel carregar o formul\xE1rio. Tente novamente mais tarde." })
+  if (productsValidationError || ambienteConfigError || whatsappConfigError || chatConfigError) {
+    if (productsValidationError) {
+      console.error("Erro na valida\xE7\xE3o dos produtos:", productsValidationError);
+    }
+    if (ambienteConfigError) {
+      console.error("Erro na valida\xE7\xE3o do ambiente:", ambienteConfigError);
+    }
+    if (whatsappConfigError) {
+      console.error("Erro na valida\xE7\xE3o do canal whatsapp:", whatsappConfigError);
+    }
+    if (chatConfigError) {
+      console.error("Erro na valida\xE7\xE3o do canal chat:", chatConfigError);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(HeaderContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Title, { $textColor: textColor, children: "Erro no carregamento do formul\xE1rio!" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Subtitle, { $textColor: textColor, children: "N\xE3o foi poss\xEDvel carregar o formul\xE1rio. Tente novamente mais tarde." })
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       Alert,
       {
         type: "error",
@@ -1402,7 +1721,7 @@ var MitreFormComponent = import_react7.default.forwardRef(({
         children: error.message
       }
     ),
-    successMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    successMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       Alert,
       {
         type: "success",
@@ -1412,13 +1731,58 @@ var MitreFormComponent = import_react7.default.forwardRef(({
         children: successMessage
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: [
-      showHeader && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(HeaderContainer, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Title, { $textColor: textColor, children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Subtitle, { $textColor: textColor, children: subtitle })
+    actionModal?.kind === "error" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Modal,
+      {
+        type: "error",
+        title: MODAL_ERROR_TITLE,
+        message: MODAL_ERROR_MESSAGE,
+        primaryButtonText: MODAL_ERROR_BUTTON_TEXT,
+        onPrimaryAction: () => setActionModal(null),
+        onClose: () => setActionModal(null),
+        primaryButtonBgColor: buttonBackgroundColor,
+        primaryButtonTextColor: buttonTextColor
+      }
+    ),
+    actionModal?.kind === "success" && actionModal.canal === "whatsapp" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Modal,
+      {
+        type: "success",
+        title: MODAL_SUCCESS_TITLE,
+        message: MODAL_SUCCESS_MESSAGE_WHATSAPP,
+        primaryButtonText: MODAL_SUCCESS_BUTTON_WHATSAPP,
+        onPrimaryAction: () => {
+          window.open(actionModal.targetUrl, "_blank", "noopener,noreferrer");
+          setActionModal(null);
+        },
+        onClose: () => setActionModal(null),
+        primaryButtonBgColor: buttonBackgroundColor,
+        primaryButtonTextColor: buttonTextColor
+      }
+    ),
+    actionModal?.kind === "success" && actionModal.canal === "chat" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Modal,
+      {
+        type: "success",
+        title: MODAL_SUCCESS_TITLE,
+        message: MODAL_SUCCESS_MESSAGE_CHAT,
+        primaryButtonText: MODAL_SUCCESS_BUTTON_CHAT,
+        onPrimaryAction: () => {
+          submitChatInNewTab(actionModal.chatUrl, actionModal.virtualObj);
+          setActionModal(null);
+        },
+        onClose: () => setActionModal(null),
+        primaryButtonBgColor: buttonBackgroundColor,
+        primaryButtonTextColor: buttonTextColor
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: [
+      showHeader && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(HeaderContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Title, { $textColor: textColor, children: effectiveTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Subtitle, { $textColor: textColor, children: effectiveSubtitle })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
-        products.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
+        products.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           ProductSelect,
           {
             id: "productId",
@@ -1435,7 +1799,7 @@ var MitreFormComponent = import_react7.default.forwardRef(({
             textColor: inputTextColor
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Input2,
           {
             id: "name",
@@ -1453,7 +1817,7 @@ var MitreFormComponent = import_react7.default.forwardRef(({
             inputTextColor
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Input2,
           {
             id: "email",
@@ -1472,7 +1836,7 @@ var MitreFormComponent = import_react7.default.forwardRef(({
             inputTextColor
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           import_react_hook_form.Controller,
           {
             name: "phone",
@@ -1481,7 +1845,7 @@ var MitreFormComponent = import_react7.default.forwardRef(({
             shouldUnregister: true,
             render: ({ field }) => {
               const errorMsg = errors.phone?.inputValue?.message || errors.phone?.phone?.message || errors.phone?.message;
-              return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 PhoneInput2,
                 {
                   id: "phone",
@@ -1504,9 +1868,9 @@ var MitreFormComponent = import_react7.default.forwardRef(({
           },
           formKey
         ),
-        showPreferenciaContato && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(FormControl, { isInvalid: !!errors.preferencia_contato, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormLabel, { htmlFor: "preferencia_contato", $textColor: textColor, children: "Prefer\xEAncia de Contato" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        effectiveShowPreferenciaContato && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FormControl, { isInvalid: !!errors.preferencia_contato, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FormLabel, { htmlFor: "preferencia_contato", $textColor: textColor, children: "Prefer\xEAncia de Contato" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
             Select,
             {
               id: "preferencia_contato",
@@ -1517,19 +1881,19 @@ var MitreFormComponent = import_react7.default.forwardRef(({
               $focusBorderColor: inputFocusBorderColor,
               $textColor: inputTextColor,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", disabled: true, children: "Selecione uma op\xE7\xE3o" }),
-                Object.values(PreferenciaContato).map((op) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: op, children: op }, op))
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", disabled: true, children: "Selecione uma op\xE7\xE3o" }),
+                Object.values(PreferenciaContato).map((op) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: op, children: op }, op))
               ]
             }
           ),
-          errors.preferencia_contato && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FormErrorMessage, { children: errors.preferencia_contato.message })
+          errors.preferencia_contato && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FormErrorMessage, { children: errors.preferencia_contato.message })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button2, { bgColor: buttonBackgroundColor, color: buttonTextColor, type: "submit", isSubmitting: loading, children: "Enviar mensagem" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ButtonContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button2, { bgColor: buttonBackgroundColor, color: buttonTextColor, type: "submit", isSubmitting: loading, children: canal === "whatsapp" ? WHATSAPP_BUTTON_TEXT : canal === "chat" ? CHAT_BUTTON_TEXT : "Enviar mensagem" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { children: [
           "A Mitre Realty respeita a sua privacidade e utiliza os seus dados pessoais para contat\xE1-lo por e-mail ou telefone aqui registrados. Para saber mais, acesse a nossa",
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "a",
             {
               href: "https://www.mitrerealty.com.br/politica-de-privacidade",