mitre-actions-widget 0.1.7 → 2.1.0

package/README.md

@@ -45,17 +45,26 @@ const products = JSON.parse(process.env.VITE_PRODUCT_ID!);
 
 <MitreActionsWidget
   products={products}
-  apiUrl={process.env.VITE_REGISTER_LEADS_URL!}
-  apiToken={process.env.VITE_REGISTER_LEADS_TOKEN!}
+  ambiente="prod"
 />
 
 // Com cor personalizada
 <MitreActionsWidget
   products={products}
-  apiUrl={process.env.VITE_REGISTER_LEADS_URL!}
-  apiToken={process.env.VITE_REGISTER_LEADS_TOKEN!}
+  ambiente="prod"
   backgroundColor="#FF5733"
 />
+
+// Com customização do formulário e callback de sucesso (props opcionais)
+<MitreActionsWidget
+  products={products}
+  ambiente="prod"
+  // formShowHeader={true}
+  // formTitle="Fale conosco"
+  // formSubtitle="Preencha o formulário abaixo"
+  // formShowPreferenciaContato={true}
+  // onFormSuccess={(body, leadId) => console.log("Lead criado:", leadId)}
+/>
 ```
 
 ---
@@ -115,9 +124,13 @@ Depois de instalar a biblioteca, você pode começar a usá-la diretamente no se
 O `MitreActionsWidget` aceita as seguintes props:
 
 - **`products`** (Product[]): Array de produtos do empreendimento.
-- **`apiUrl`** (string): URL da API para registro dos leads.
-- **`apiToken`** (string): Token de autenticação da API.
+- **`ambiente`** (`"homol" | "prod"`, opcional): Define de qual config interno do `mitre-form-component` o widget lê `apiUrl`, `apiToken`, `whatsappPhone` e `chatUrl`. Padrão: `"homol"`.
 - **`backgroundColor`** (string, opcional): Cor de fundo personalizada para o botão flutuante. Padrão: `#2DCE68` (verde).
+- **`formShowHeader`** (boolean, opcional): Exibe ou oculta o cabeçalho do formulário.
+- **`formTitle`** (string, opcional): Título exibido no cabeçalho do formulário.
+- **`formSubtitle`** (string, opcional): Subtítulo exibido no cabeçalho do formulário.
+- **`formShowPreferenciaContato`** (boolean, opcional): Exibe ou oculta o campo de preferência de contato no formulário.
+- **`onFormSuccess`** ((requestBody, leadId) => void, opcional): Callback chamado após o envio bem-sucedido do formulário. Recebe o corpo da requisição (`RequestBody`) e o ID do lead gerado.
 
 ---
 
@@ -143,9 +156,13 @@ const products = JSON.parse(process.env.NEXT_PUBLIC_PRODUCT_ID!);
 <ErrorBoundary fallback={<div>Erro ao carregar o formulário</div>}>
   <MitreActionsWidget
     products={products}
-    apiUrl={process.env.NEXT_PUBLIC_REGISTER_LEADS_URL!}
-    apiToken={process.env.NEXT_PUBLIC_REGISTER_LEADS_TOKEN!}
+    ambiente="prod"
     backgroundColor="#2DCE68" // Opcional: cor personalizada
+    // formShowHeader={true}
+    // formTitle="Fale conosco"
+    // formSubtitle="Preencha o formulário abaixo"
+    // formShowPreferenciaContato={true}
+    // onFormSuccess={(body, leadId) => console.log("Lead criado:", leadId)}
   />
 </ErrorBoundary>;
 ```

package/dist/index.cjs

@@ -35,7 +35,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/MitreActionsWidget/index.tsx
-var import_react5 = __toESM(require("react"), 1);
+var import_react4 = __toESM(require("react"), 1);
 
 // src/components/styles/utils.ts
 function flex(direction = "row", alignItems, justifyContent) {
@@ -184,7 +184,7 @@ var ensureMontserratFont = () => {
 };
 
 // src/components/Selector/index.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 
 // src/components/hooks/useClickOutside.ts
 var import_react = require("react");
@@ -502,95 +502,6 @@ var Navbar = ({ setCurrentOpen, currentOpen }) => {
 };
 var Navbar_default = Navbar;
 
-// src/components/TalkWithASeller/index.tsx
-var import_react2 = require("react");
-
-// src/components/utils/utm.ts
-var UTM_STORAGE_KEY = "utm_meta";
-var TTL_DAYS = 7;
-var isBrowser = () => typeof window !== "undefined" && typeof document !== "undefined";
-var daysToMs = (days) => days * 24 * 60 * 60 * 1e3;
-function readStoredUtm(maxAgeDays = TTL_DAYS) {
-  if (!isBrowser()) return { data: null, isValid: false };
-  try {
-    const raw = window.localStorage.getItem(UTM_STORAGE_KEY);
-    if (!raw) return { data: null, isValid: false };
-    const parsed = JSON.parse(raw);
-    if (!parsed?.createdAt) return { data: null, isValid: false };
-    const age = Date.now() - new Date(parsed.createdAt).getTime();
-    const isValid = age <= daysToMs(maxAgeDays);
-    return { data: isValid ? parsed : null, isValid };
-  } catch {
-    return { data: null, isValid: false };
-  }
-}
-function saveUtm(data, now = /* @__PURE__ */ new Date()) {
-  if (!isBrowser()) return null;
-  const payload = {
-    utm_source: data.utm_source || "direto",
-    utm_campaign: data.utm_campaign,
-    utm_medium: data.utm_medium,
-    utm_term: data.utm_term,
-    createdAt: now.toISOString()
-  };
-  try {
-    window.localStorage.setItem(UTM_STORAGE_KEY, JSON.stringify(payload));
-  } catch {
-  }
-  return payload;
-}
-function parseUrlUtm(loc) {
-  if (!isBrowser()) return {};
-  const locationObj = loc || window.location;
-  const sp = new URL(locationObj.href).searchParams;
-  const utm_source = sp.get("utm_source") || void 0;
-  const utm_campaign = sp.get("utm_campaign") || void 0;
-  const utm_medium = sp.get("utm_medium") || void 0;
-  const utm_term = sp.get("utm_term") || void 0;
-  return { utm_source, utm_campaign, utm_medium, utm_term };
-}
-function inferSourceFromReferrer(ref) {
-  if (!isBrowser()) return void 0;
-  const href = (ref ?? document.referrer ?? "").toLowerCase();
-  if (!href) return "direto";
-  const hostMatch = href.match(/https?:\/\/([^/]+)/);
-  const host = hostMatch?.[1] ?? href;
-  if (/google\./.test(host) || /^g\.co$/.test(host) || /^goo\.gl$/.test(host)) return "google";
-  if (/(^|\.)facebook\.com$/.test(host) || /(^|\.)m\.facebook\.com$/.test(host) || /(^|\.)fb\.com$/.test(host) || /(^|\.)fb\.me$/.test(host) || /(^|\.)fb\.watch$/.test(host) || /(^|\.)m\.me$/.test(host)) return "facebook";
-  if (/(^|\.)instagram\.com$/.test(host) || /(^|\.)l\.instagram\.com$/.test(host) || /(^|\.)instagr\.am$/.test(host) || /^ig\.me$/.test(host)) return "instagram";
-  if (/(^|\.)linkedin\.com$/.test(host) || /^lnkd\.in$/.test(host)) return "linkedin";
-  if (/^t\.co$/.test(host) || /(^|\.)twitter\.com$/.test(host) || /(^|\.)x\.com$/.test(host)) return "twitter";
-  if (/(^|\.)youtube\.com$/.test(host) || /^youtu\.be$/.test(host)) return "youtube";
-  if (/(^|\.)mail\.google\.com$/.test(host)) return "email";
-  if (/(^|\.)outlook\.live\.com$/.test(host) || /(^|\.)outlook\.office\.com$/.test(host)) return "email";
-  if (/^(wa\.me)$/.test(host) || /(^|\.)api\.whatsapp\.com$/.test(host) || /(^|\.)web\.whatsapp\.com$/.test(host)) return "whatsapp";
-  if (/^t\.me$/.test(host)) return "telegram";
-  if (/(^|\.)tiktok\.com$/.test(host)) return "tiktok";
-  return "direto";
-}
-function resolveUtmWithPriority(now = /* @__PURE__ */ new Date(), propOverride) {
-  const stored = readStoredUtm();
-  if (stored.data) {
-    const merged = { ...stored.data, ...propOverride };
-    return { data: merged, source: "localStorage" };
-  }
-  const fromUrl = parseUrlUtm();
-  if (fromUrl.utm_source) {
-    const saved = saveUtm(fromUrl, now);
-    const merged = { ...saved, ...propOverride };
-    return { data: merged, source: "url" };
-  }
-  const utm_source = inferSourceFromReferrer();
-  const payload = {
-    utm_source: utm_source || "direto",
-    utm_campaign: propOverride?.utm_campaign,
-    utm_medium: propOverride?.utm_medium,
-    utm_term: propOverride?.utm_term,
-    createdAt: now.toISOString()
-  };
-  return { data: payload, source: "referrer" };
-}
-
 // src/components/styles.ts
 var import_styled_components5 = __toESM(require("styled-components"), 1);
 var Container2 = import_styled_components5.default.div`
@@ -673,113 +584,13 @@ var SelectorOption = import_styled_components5.default.div`
   }
 `;
 
-// src/components/utils/windowPopup.ts
-var openWindowPopup = (url) => {
-  const dualScreenLeft = window.screenLeft !== void 0 ? window.screenLeft : window.screenX;
-  const dualScreenTop = window.screenTop !== void 0 ? window.screenTop : window.screenY;
-  const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
-  const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
-  const systemZoom = width / window.screen.availWidth;
-  const w = 674;
-  const h = 540;
-  const left = (width - w) / 2 / systemZoom + dualScreenLeft;
-  const top = (height - h) / 2 / systemZoom + dualScreenTop;
-  window.open(
-    url,
-    `mitre-window`,
-    `width=${w / systemZoom}, 
-      height=${h / systemZoom}, 
-      top=${top}, 
-      left=${left}, 
-      status=no, 
-      toolbar=no, 
-      location=no, 
-      menubar=no, 
-      resizable=no, 
-      fullscreen=no`
-  );
-};
-
 // src/components/TalkWithASeller/index.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var TalkWithSeller = ({
-  products,
-  apiUrl,
-  setCurrentFormOpen
-}) => {
-  const [utm, setUtm] = (0, import_react2.useState)({ utm_source: "direto", createdAt: (/* @__PURE__ */ new Date()).toISOString() });
-  (0, import_react2.useEffect)(() => {
-    if (!isBrowser()) return;
-    const { data } = resolveUtmWithPriority(/* @__PURE__ */ new Date());
-    setUtm(data);
-  }, []);
-  const validateProducts = () => {
-    if (!products) {
-      return "Lista de produtos n\xE3o foi fornecida";
-    }
-    if (!Array.isArray(products)) {
-      return "Lista de produtos deve ser um array";
-    }
-    if (products.length === 0) {
-      return "Lista de produtos n\xE3o pode estar vazia";
-    }
-    for (let i = 0; i < products.length; i++) {
-      const product = products[i];
-      if (!product) {
-        return `Produto na posi\xE7\xE3o ${i} \xE9 inv\xE1lido (nulo/undefined)`;
-      }
-      if (typeof product.id !== "number" || product.id <= 0) {
-        return `Produto na posi\xE7\xE3o ${i} possui ID inv\xE1lido (deve ser um n\xFAmero positivo)`;
-      }
-      if (typeof product.name !== "string" || product.name.trim().length === 0) {
-        return `Produto na posi\xE7\xE3o ${i} possui nome inv\xE1lido (deve ser uma string n\xE3o vazia)`;
-      }
-    }
-    return null;
-  };
-  const onWhatsClick = async () => {
-    try {
-      const validationError = validateProducts();
-      if (validationError) {
-        console.log(validationError);
-        throw new Error("Missing required parameters");
-      }
-      const params = new URLSearchParams();
-      params.append("id_produto", products[0].id.toString());
-      params.append("utm_source", utm.utm_source);
-      if (utm.utm_medium) params.append("utm_medium", utm.utm_medium);
-      if (utm.utm_campaign) params.append("utm_campaign", utm.utm_campaign);
-      if (utm.utm_term) params.append("utm_term", utm.utm_term);
-      params.append("canal", "whatsapp");
-      const url = `${apiUrl}/atendimento?${params.toString()}`;
-      openWindowPopup(url);
-    } catch (error) {
-      console.error("Error in onWhatsClick:", error);
-    }
-  };
-  const onChatClick = async () => {
-    try {
-      const validationError = validateProducts();
-      if (validationError) {
-        console.log(validationError);
-        throw new Error("Missing required parameters");
-      }
-      const params = new URLSearchParams();
-      params.append("id_produto", products[0].id.toString());
-      params.append("utm_source", utm.utm_source);
-      if (utm.utm_medium) params.append("utm_medium", utm.utm_medium);
-      if (utm.utm_campaign) params.append("utm_campaign", utm.utm_campaign);
-      if (utm.utm_term) params.append("utm_term", utm.utm_term);
-      const url = `${apiUrl}/atendimento?${params.toString()}`;
-      openWindowPopup(url);
-    } catch (error) {
-      console.error("Error in onChatClick:", error);
-    }
-  };
+var TalkWithSeller = ({ openForm }) => {
   const itens = [
-    { title: "Atendimento por Whatsapp", text: "Canal exclusivo para vendas", onClick: () => onWhatsClick(), icon: "whatsapp" },
-    { title: "Atendimento por chat", text: "Canal exclusivo para vendas", onClick: () => onChatClick(), icon: "chat" },
-    { title: "Atendimento por mensagem", text: "Canal exclusivo para vendas", onClick: () => setCurrentFormOpen(0), icon: "message" }
+    { title: "Atendimento por Whatsapp", text: "Canal exclusivo para vendas", onClick: () => openForm("whatsapp"), icon: "whatsapp" },
+    { title: "Atendimento por chat", text: "Canal exclusivo para vendas", onClick: () => openForm("chat"), icon: "chat" },
+    { title: "Atendimento por mensagem", text: "Canal exclusivo para vendas", onClick: () => openForm("form"), icon: "message" }
   ];
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Title, { children: "Converse com um corretor" }),
@@ -805,10 +616,10 @@ var TalkWithSeller = ({
 var TalkWithASeller_default = TalkWithSeller;
 
 // src/components/hooks/useDeviceType.ts
-var import_react3 = require("react");
+var import_react2 = require("react");
 function useDeviceType() {
-  const [deviceType, setDeviceType] = (0, import_react3.useState)("Unknown");
-  (0, import_react3.useEffect)(() => {
+  const [deviceType, setDeviceType] = (0, import_react2.useState)("Unknown");
+  (0, import_react2.useEffect)(() => {
     const userAgent = navigator.userAgent || navigator.vendor;
     if (/android/i.test(userAgent)) {
       setDeviceType("Android");
@@ -952,13 +763,19 @@ var import_react_error_boundary = require("react-error-boundary");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var Selector = ({
   products,
-  apiUrl,
-  apiToken,
-  close
+  ambiente,
+  close,
+  formShowHeader,
+  formTitle,
+  formSubtitle,
+  formShowPreferenciaContato,
+  onFormSuccess
 }) => {
-  const ref = (0, import_react4.useRef)(null);
-  const [currentOpen, setCurrentOpen] = (0, import_react4.useState)(0);
-  const [currentFormOpen, setCurrentFormOpen] = (0, import_react4.useState)(-1);
+  const ref = (0, import_react3.useRef)(null);
+  const [currentOpen, setCurrentOpen] = (0, import_react3.useState)(0);
+  const [formCanal, setFormCanal] = (0, import_react3.useState)(null);
+  const openForm = (canal) => setFormCanal(canal);
+  const closeForm = () => setFormCanal(null);
   useClickOutside_default(ref, close);
   const tabs = [
     TalkWithASeller_default,
@@ -973,9 +790,9 @@ var Selector = ({
         import_hi.HiArrowNarrowLeft,
         {
           className: "back-icon",
-          onClick: () => setCurrentFormOpen(-1),
+          onClick: closeForm,
           size: 28,
-          visibility: currentFormOpen >= 0 ? "visible" : "hidden",
+          visibility: formCanal !== null ? "visible" : "hidden",
           color: colors.black
         }
       ),
@@ -989,7 +806,7 @@ var Selector = ({
         }
       )
     ] }),
-    currentFormOpen >= 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_error_boundary.ErrorBoundary, { fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(FormErrorContainer, { children: [
+    formCanal !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_error_boundary.ErrorBoundary, { fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(FormErrorContainer, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_hi.HiOutlineExclamation,
         {
@@ -1002,20 +819,18 @@ var Selector = ({
       import_mitre_form_component.MitreFormComponent,
       {
         products,
-        apiUrl,
-        apiToken,
+        ambiente,
+        canal: formCanal,
         backgroundColor: "transparent",
-        innerPadding: "0"
+        innerPadding: "0",
+        showHeader: formShowHeader,
+        title: formTitle,
+        subtitle: formSubtitle,
+        showPreferenciaContato: formShowPreferenciaContato,
+        onSuccess: onFormSuccess
       }
     ) }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ContentContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        CurrentComponent,
-        {
-          setCurrentFormOpen,
-          products,
-          apiUrl
-        }
-      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ContentContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CurrentComponent, { openForm }) }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FooterContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         Navbar_default,
         {
@@ -1030,14 +845,18 @@ var Selector_default = Selector;
 
 // src/components/MitreActionsWidget/index.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var MitreActionsWidget = import_react5.default.forwardRef(({
+var MitreActionsWidget = import_react4.default.forwardRef(({
   products,
-  apiUrl,
-  apiToken,
-  backgroundColor
+  ambiente,
+  backgroundColor,
+  formShowHeader,
+  formTitle,
+  formSubtitle,
+  formShowPreferenciaContato,
+  onFormSuccess
 }, ref) => {
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  (0, import_react5.useEffect)(() => {
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
     ensureMontserratFont();
   }, []);
   function handleOpen() {
@@ -1047,7 +866,7 @@ var MitreActionsWidget = import_react5.default.forwardRef(({
     setOpen(false);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ComponentWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Container, { children: [
-    open && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Selector_default, { products, apiUrl, apiToken, close: () => close() }),
+    open && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Selector_default, { products, ambiente, close: () => close(), formShowHeader, formTitle, formSubtitle, formShowPreferenciaContato, onFormSuccess }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonContainer, { ref, open, $backgroundColor: backgroundColor, onClick: () => handleOpen(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "img",
       {