mitre-form-component 0.1.4 → 2.1.0

package/dist/index.js

@@ -894,16 +894,183 @@ var Alert = ({
   );
 };
 
+// src/components/Modal/index.tsx
+import { useEffect as useEffect3, useRef } from "react";
+import { HiX as HiX2 } from "react-icons/hi";
+
+// src/components/Modal/styles.ts
+import styled6, { css as css5, keyframes as keyframes2 } from "styled-components";
+var fadeIn2 = keyframes2`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+var slideIn = keyframes2`
+  from { opacity: 0; transform: translateY(-20px) scale(0.96); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+`;
+var Overlay = styled6.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: css5`
+    color: ${theme.colors.green2};
+  `,
+  error: css5`
+    color: ${theme.colors.red};
+  `
+};
+var Container = styled6.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 = styled6.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 = styled6.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
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var Modal = ({
+  type,
+  title,
+  message,
+  primaryButtonText,
+  onPrimaryAction,
+  onClose,
+  primaryButtonBgColor,
+  primaryButtonTextColor
+}) => {
+  const primaryButtonRef = useRef(null);
+  useEffect3(() => {
+    primaryButtonRef.current?.focus();
+  }, []);
+  useEffect3(() => {
+    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__ */ jsx4(Overlay, { onClick: handleOverlayClick, role: "dialog", "aria-modal": "true", "aria-label": title, children: /* @__PURE__ */ jsxs4(Container, { $type: type, children: [
+    /* @__PURE__ */ jsx4(CloseButton, { onClick: onClose, "aria-label": "Fechar", children: /* @__PURE__ */ jsx4(HiX2, {}) }),
+    /* @__PURE__ */ jsx4("h2", { children: title }),
+    /* @__PURE__ */ jsx4("p", { children: message }),
+    /* @__PURE__ */ jsx4(
+      PrimaryButton,
+      {
+        ref: primaryButtonRef,
+        onClick: onPrimaryAction,
+        $bgColor: primaryButtonBgColor,
+        $textColor: primaryButtonTextColor,
+        type: "button",
+        children: primaryButtonText
+      }
+    )
+  ] }) });
+};
+
 // src/components/PhoneInput/index.tsx
 import {
   forwardRef as forwardRef2
 } from "react";
 
 // src/components/PhoneInput/styles.ts
-import styled6, { css as css5 } from "styled-components";
+import styled7, { css as css6 } from "styled-components";
 import { PhoneInput } from "react-international-phone";
 import "react-international-phone/style.css";
-var FormLabel3 = styled6.label`
+var FormLabel3 = styled7.label`
   font-family: ${theme.fonts.primary};
   font-style: normal;
   font-weight: 500;
@@ -913,7 +1080,7 @@ var FormLabel3 = styled6.label`
   margin-bottom: 0.5rem;
   text-align: left;
 `;
-var StyledPhoneInput = styled6(PhoneInput)`
+var StyledPhoneInput = styled7(PhoneInput)`
   width: 100%;
   height: 3.125rem;
   background: ${(props) => props.$backgroundColor || theme.colors.white};
@@ -1027,24 +1194,24 @@ var StyledPhoneInput = styled6(PhoneInput)`
     }
   }
 `;
-var FormErrorMessage3 = styled6.small`
+var FormErrorMessage3 = styled7.small`
   font-size: 0.75rem;
   line-height: 1.125rem;
   color: ${theme.colors.red};
   margin-top: 0.25rem;
   display: block;
 `;
-var FormControl3 = styled6.div.withConfig({
+var FormControl3 = styled7.div.withConfig({
   shouldForwardProp: (prop) => !["isInvalid"].includes(prop)
 })`
   ${FormLabel3} {
-    ${(props) => props.isInvalid && css5`
+    ${(props) => props.isInvalid && css6`
         color: ${theme.colors.red};
       `};
   }
 
   ${StyledPhoneInput} {
-    ${(props) => props.isInvalid && css5`
+    ${(props) => props.isInvalid && css6`
         border: 1px solid ${theme.colors.red};
 
         &:not(:focus)::placeholder {
@@ -1054,7 +1221,7 @@ var FormControl3 = styled6.div.withConfig({
       `};
 
     .react-international-phone-input-container {
-      ${(props) => props.isInvalid && css5`
+      ${(props) => props.isInvalid && css6`
           border: 1px solid ${theme.colors.red};
 
           &:not(:focus)::placeholder {
@@ -1065,7 +1232,7 @@ var FormControl3 = styled6.div.withConfig({
     }
 
     .react-international-phone-country-selector-button {
-      ${(props) => props.isInvalid && css5`
+      ${(props) => props.isInvalid && css6`
           border-right: 1px solid ${theme.colors.red};
         `};
     }
@@ -1073,7 +1240,7 @@ var FormControl3 = styled6.div.withConfig({
 `;
 
 // src/components/PhoneInput/index.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var PhoneInputBase = ({
   id,
   label,
@@ -1088,9 +1255,9 @@ var PhoneInputBase = ({
   value,
   ...rest
 }, ref) => {
-  return /* @__PURE__ */ jsxs4(FormControl3, { isInvalid: !!error, children: [
-    !!label && /* @__PURE__ */ jsx4(FormLabel3, { htmlFor: id, $textColor: labelTextColor, children: label }),
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5(FormControl3, { isInvalid: !!error, children: [
+    !!label && /* @__PURE__ */ jsx5(FormLabel3, { htmlFor: id, $textColor: labelTextColor, children: label }),
+    /* @__PURE__ */ jsx5(
       StyledPhoneInput,
       {
         ref,
@@ -1124,7 +1291,7 @@ var PhoneInputBase = ({
         $textColor: inputTextColor
       }
     ),
-    !!error && showErrorMessage && /* @__PURE__ */ jsx4(FormErrorMessage3, { "data-testid": "error-message", children: typeof error === "string" ? error : error?.message })
+    !!error && showErrorMessage && /* @__PURE__ */ jsx5(FormErrorMessage3, { "data-testid": "error-message", children: typeof error === "string" ? error : error?.message })
   ] });
 };
 var PhoneInput2 = forwardRef2(PhoneInputBase);
@@ -1133,7 +1300,7 @@ var PhoneInput2 = forwardRef2(PhoneInputBase);
 import {
   forwardRef as forwardRef3
 } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var ProductSelectBase = ({
   id,
   label,
@@ -1148,9 +1315,9 @@ var ProductSelectBase = ({
   placeholder = "Selecione um produto",
   ...rest
 }, ref) => {
-  return /* @__PURE__ */ jsxs5(FormControl, { isInvalid: !!error, children: [
-    !!label && /* @__PURE__ */ jsx5(FormLabel, { htmlFor: id, $textColor: labelTextColor, children: label }),
-    /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(FormControl, { isInvalid: !!error, children: [
+    !!label && /* @__PURE__ */ jsx6(FormLabel, { htmlFor: id, $textColor: labelTextColor, children: label }),
+    /* @__PURE__ */ jsxs6(
       Select,
       {
         id,
@@ -1162,18 +1329,37 @@ var ProductSelectBase = ({
         $textColor: textColor,
         ...rest,
         children: [
-          /* @__PURE__ */ jsx5("option", { value: "", disabled: true, children: placeholder }),
-          products.map((product) => /* @__PURE__ */ jsx5("option", { value: product.id, children: product.name }, product.id))
+          /* @__PURE__ */ jsx6("option", { value: "", disabled: true, children: placeholder }),
+          products.map((product) => /* @__PURE__ */ jsx6("option", { value: product.id, children: product.name }, product.id))
         ]
       }
     ),
-    !!error && showErrorMessage && /* @__PURE__ */ jsx5(FormErrorMessage, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
+    !!error && showErrorMessage && /* @__PURE__ */ jsx6(FormErrorMessage, { "data-testid": "error-message", children: typeof error === "string" ? error : error.message })
   ] });
 };
 var ProductSelect = forwardRef3(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
-import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var phoneUtil = PhoneNumberUtil.getInstance();
 var PreferenciaContato = /* @__PURE__ */ ((PreferenciaContato2) => {
   PreferenciaContato2["Whatsapp"] = "Whatsapp";
@@ -1181,6 +1367,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));
@@ -1212,8 +1432,8 @@ var schemaWithProduct = yup.object().shape({
 var schema = yup.object().shape(baseSchema);
 var MitreFormComponent = React2.forwardRef(({
   products,
-  apiUrl,
-  apiToken,
+  ambiente = "homol",
+  canal = "form",
   showHeader = true,
   title = "Atendimento por mensagem",
   subtitle = "Informe seus dados e retornaremos a mensagem.",
@@ -1228,6 +1448,9 @@ var MitreFormComponent = React2.forwardRef(({
   inputPlaceholderColor = theme.colors.gray100,
   inputTextColor = theme.colors.black,
   showPreferenciaContato = false,
+  idProdutoTerceiro,
+  idEmpreendimento,
+  naoCriarEvento,
   onSuccess,
   onError
 }, ref) => {
@@ -1237,6 +1460,7 @@ var MitreFormComponent = React2.forwardRef(({
   const [successMessage, setSuccessMessage] = useState3("");
   const [formKey, setFormKey] = useState3(0);
   const [selectedProductId, setSelectedProductId] = useState3(null);
+  const [actionModal, setActionModal] = useState3(null);
   const validateProducts = () => {
     if (!products) {
       return "Lista de produtos n\xE3o foi fornecida";
@@ -1261,7 +1485,53 @@ var MitreFormComponent = React2.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 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] = useState3({ utm_source: "direto", createdAt: (/* @__PURE__ */ new Date()).toISOString() });
   const formSchema = products && products.length > 1 ? schemaWithProduct : schema;
   const { control, register, handleSubmit, formState: { errors }, reset, clearErrors } = useForm({
@@ -1300,9 +1570,13 @@ var MitreFormComponent = React2.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;
@@ -1318,6 +1592,8 @@ var MitreFormComponent = React2.forwardRef(({
         }
         selectedProduct = foundProduct;
       }
+      const paginaAtual = typeof window !== "undefined" ? window.location.href : void 0;
+      const naoCriarEventoEfetivo = canal !== "form" && (naoCriarEvento ?? true);
       const requestBody = {
         name,
         email,
@@ -1328,13 +1604,23 @@ var MitreFormComponent = React2.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)
       });
@@ -1343,26 +1629,64 @@ var MitreFormComponent = React2.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);
+      if (canal === "whatsapp" || canal === "chat") {
+        setActionModal({ kind: "error" });
+      } else {
+        handleError(err);
+      }
       onError?.(error2);
     } finally {
       setIsLoading(false);
     }
   };
-  if (productsValidationError) {
-    console.error("Erro na valida\xE7\xE3o dos produtos:", productsValidationError);
-    return /* @__PURE__ */ jsx6(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: /* @__PURE__ */ jsxs6(HeaderContainer, { children: [
-      /* @__PURE__ */ jsx6(Title, { $textColor: textColor, children: "Erro no carregamento do formul\xE1rio!" }),
-      /* @__PURE__ */ jsx6(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__ */ jsx7(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: /* @__PURE__ */ jsxs7(HeaderContainer, { children: [
+      /* @__PURE__ */ jsx7(Title, { $textColor: textColor, children: "Erro no carregamento do formul\xE1rio!" }),
+      /* @__PURE__ */ jsx7(Subtitle, { $textColor: textColor, children: "N\xE3o foi poss\xEDvel carregar o formul\xE1rio. Tente novamente mais tarde." })
     ] }) });
   }
-  return /* @__PURE__ */ jsxs6(Fragment, { children: [
-    error && /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    error && /* @__PURE__ */ jsx7(
       Alert,
       {
         type: "error",
@@ -1372,7 +1696,7 @@ var MitreFormComponent = React2.forwardRef(({
         children: error.message
       }
     ),
-    successMessage && /* @__PURE__ */ jsx6(
+    successMessage && /* @__PURE__ */ jsx7(
       Alert,
       {
         type: "success",
@@ -1382,13 +1706,58 @@ var MitreFormComponent = React2.forwardRef(({
         children: successMessage
       }
     ),
-    /* @__PURE__ */ jsxs6(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: [
-      showHeader && /* @__PURE__ */ jsxs6(HeaderContainer, { children: [
-        /* @__PURE__ */ jsx6(Title, { $textColor: textColor, children: title }),
-        /* @__PURE__ */ jsx6(Subtitle, { $textColor: textColor, children: subtitle })
+    actionModal?.kind === "error" && /* @__PURE__ */ jsx7(
+      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__ */ jsx7(
+      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__ */ jsx7(
+      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__ */ jsxs7(FormContainer, { $backgroundColor: backgroundColor, $innerPadding: innerPadding, ref, children: [
+      showHeader && /* @__PURE__ */ jsxs7(HeaderContainer, { children: [
+        /* @__PURE__ */ jsx7(Title, { $textColor: textColor, children: effectiveTitle }),
+        /* @__PURE__ */ jsx7(Subtitle, { $textColor: textColor, children: effectiveSubtitle })
       ] }),
-      /* @__PURE__ */ jsxs6(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
-        products.length > 1 && /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsxs7(Form, { $textColor: textColor, onSubmit: handleSubmit(sendMessage), noValidate: true, children: [
+        products.length > 1 && /* @__PURE__ */ jsx7(
           ProductSelect,
           {
             id: "productId",
@@ -1405,7 +1774,7 @@ var MitreFormComponent = React2.forwardRef(({
             textColor: inputTextColor
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           Input2,
           {
             id: "name",
@@ -1423,7 +1792,7 @@ var MitreFormComponent = React2.forwardRef(({
             inputTextColor
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           Input2,
           {
             id: "email",
@@ -1442,7 +1811,7 @@ var MitreFormComponent = React2.forwardRef(({
             inputTextColor
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           Controller,
           {
             name: "phone",
@@ -1451,7 +1820,7 @@ var MitreFormComponent = React2.forwardRef(({
             shouldUnregister: true,
             render: ({ field }) => {
               const errorMsg = errors.phone?.inputValue?.message || errors.phone?.phone?.message || errors.phone?.message;
-              return /* @__PURE__ */ jsx6(
+              return /* @__PURE__ */ jsx7(
                 PhoneInput2,
                 {
                   id: "phone",
@@ -1474,9 +1843,9 @@ var MitreFormComponent = React2.forwardRef(({
           },
           formKey
         ),
-        showPreferenciaContato && /* @__PURE__ */ jsxs6(FormControl, { isInvalid: !!errors.preferencia_contato, children: [
-          /* @__PURE__ */ jsx6(FormLabel, { htmlFor: "preferencia_contato", $textColor: textColor, children: "Prefer\xEAncia de Contato" }),
-          /* @__PURE__ */ jsxs6(
+        effectiveShowPreferenciaContato && /* @__PURE__ */ jsxs7(FormControl, { isInvalid: !!errors.preferencia_contato, children: [
+          /* @__PURE__ */ jsx7(FormLabel, { htmlFor: "preferencia_contato", $textColor: textColor, children: "Prefer\xEAncia de Contato" }),
+          /* @__PURE__ */ jsxs7(
             Select,
             {
               id: "preferencia_contato",
@@ -1487,19 +1856,19 @@ var MitreFormComponent = React2.forwardRef(({
               $focusBorderColor: inputFocusBorderColor,
               $textColor: inputTextColor,
               children: [
-                /* @__PURE__ */ jsx6("option", { value: "", disabled: true, children: "Selecione uma op\xE7\xE3o" }),
-                Object.values(PreferenciaContato).map((op) => /* @__PURE__ */ jsx6("option", { value: op, children: op }, op))
+                /* @__PURE__ */ jsx7("option", { value: "", disabled: true, children: "Selecione uma op\xE7\xE3o" }),
+                Object.values(PreferenciaContato).map((op) => /* @__PURE__ */ jsx7("option", { value: op, children: op }, op))
               ]
             }
           ),
-          errors.preferencia_contato && /* @__PURE__ */ jsx6(FormErrorMessage, { children: errors.preferencia_contato.message })
+          errors.preferencia_contato && /* @__PURE__ */ jsx7(FormErrorMessage, { children: errors.preferencia_contato.message })
         ] }),
-        /* @__PURE__ */ jsx6("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
-        /* @__PURE__ */ jsx6(ButtonContainer, { children: /* @__PURE__ */ jsx6(Button2, { bgColor: buttonBackgroundColor, color: buttonTextColor, type: "submit", isSubmitting: loading, children: "Enviar mensagem" }) }),
-        /* @__PURE__ */ jsxs6("p", { children: [
+        /* @__PURE__ */ jsx7("h6", { children: "* Campos de preenchimento obrigat\xF3rio." }),
+        /* @__PURE__ */ jsx7(ButtonContainer, { children: /* @__PURE__ */ jsx7(Button2, { bgColor: buttonBackgroundColor, color: buttonTextColor, type: "submit", isSubmitting: loading, children: canal === "whatsapp" ? WHATSAPP_BUTTON_TEXT : canal === "chat" ? CHAT_BUTTON_TEXT : "Enviar mensagem" }) }),
+        /* @__PURE__ */ jsxs7("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__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "a",
             {
               href: "https://www.mitrerealty.com.br/politica-de-privacidade",