@meetelise/chat 1.20.150 → 1.20.151

package/src/MEChat.ts

@@ -2,9 +2,6 @@ import axios from "axios";
 import { StyleInfo } from "lit/directives/style-map";
 import "./WebComponent/me-chat";
 import { MEChat as MEChatLitElement } from "./WebComponent/me-chat";
-import fetchBuildingInfo from "./fetchBuildingInfo";
-import { fetchFeatureFlagUseOverrideContactUsForm } from "./fetchFeatureFlag";
-import fetchCurrentParsedLeadSource from "./fetchCurrentParsedLeadSource";
 import { tintColor } from "./themes";
 
 /**
@@ -60,10 +57,6 @@ export default class MEChat {
     }
     document.body.appendChild(meChat);
     MEChat.meChat = meChat;
-
-    if (opts.building && opts.organization) {
-      overrideContactUsForm(opts.organization, opts.building);
-    }
   }
 
   static async restartConversation(): Promise<void> {
@@ -156,238 +149,3 @@ const installFont = () => {
   link.setAttribute("type", "text/css");
   document.head.appendChild(link);
 };
-
-const findElementById = (priorityIds: string[]): HTMLElement | null => {
-  for (const id of priorityIds) {
-    const element = document.getElementById(id);
-    if (element) {
-      return element;
-    }
-  }
-  return null;
-};
-
-const overrideContactUsForm = async (
-  orgSlug: string,
-  buildingSlug?: string
-): Promise<void> => {
-  if (!buildingSlug || !orgSlug) return;
-  const shouldUseOverrideContactUsForm =
-    await fetchFeatureFlagUseOverrideContactUsForm(buildingSlug);
-  if (!shouldUseOverrideContactUsForm) return;
-
-  const form = findElementById(["myContactForm", "contactus"]);
-  let btn = undefined;
-
-  if (!form || !(form instanceof HTMLFormElement)) {
-    const foundForm = document.querySelector("form");
-    if (window.location.pathname.toLowerCase().includes("contactus")) {
-      logContactUsFormError(
-        buildingSlug,
-        orgSlug,
-        "Could not find form",
-        foundForm ? { id: foundForm.id } : undefined
-      );
-    }
-    return;
-  }
-
-  // Loop through the elements of the form
-  for (let i = 0; i < form.elements.length; i++) {
-    const element = form.elements[i];
-    if (
-      element.tagName.toLowerCase() === "button" &&
-      element.getAttribute("data-selenium-id") === "fakebutton"
-    ) {
-      btn = element;
-      break;
-    }
-  }
-
-  if (!btn) {
-    return logContactUsFormError(
-      buildingSlug,
-      orgSlug,
-      "Could not find submit button"
-    );
-  }
-
-  const eliseUrl =
-    "https://app.meetelise.com/platformApi/state/create/contactMe";
-
-  const getFormElements = () => {
-    const firstName = findElementById([
-      "firstname",
-      "txtName",
-    ]) as HTMLInputElement | null;
-    const lastName = findElementById([
-      "lastname",
-      "txtName2",
-    ]) as HTMLInputElement | null;
-    const email = findElementById([
-      "email",
-      "txtEmail",
-    ]) as HTMLInputElement | null;
-    const phone = findElementById([
-      "phonenumber",
-      "txtPhone",
-    ]) as HTMLInputElement | null;
-    const message = findElementById([
-      "message",
-      "txtComments",
-    ]) as HTMLTextAreaElement | null;
-
-    const formElements = { firstName, lastName, email, phone, message };
-
-    return formElements;
-  };
-
-  const isMissingFormElements = () => {
-    if (Object.values(getFormElements()).some((el) => el === null)) {
-      return true;
-    }
-    return false;
-  };
-
-  const validateFormElements = () => {
-    Object.values(getFormElements()).forEach((el) => {
-      if (el?.getAttribute("aria-required") === "true" && !el.value) {
-        el.className = "form-control required is-invalid";
-      }
-    });
-  };
-
-  const isValid = () => {
-    return Object.values(getFormElements()).every((el) => {
-      if (el === null) return false;
-      if (el.getAttribute("aria-required") === "true" && !el.value) {
-        return false;
-      }
-      if (
-        (el.id === "email" || el.id === "phonenumber") &&
-        el.getAttribute("aria-invalid") === "true"
-      ) {
-        return false;
-      }
-      return true;
-    });
-  };
-
-  if (isMissingFormElements()) {
-    const missingElements = Object.entries(getFormElements())
-      .filter(([, val]) => val === null)
-      .map(([key]) => key);
-    return logContactUsFormError(
-      buildingSlug,
-      orgSlug,
-      "Missing the following form elements: " + missingElements.join(", ")
-    );
-  }
-  const originalButtonText = btn.textContent;
-
-  // Replace the original form element with the cloned one
-  const clonedButton = btn.cloneNode(true) as HTMLButtonElement;
-  btn.parentNode?.replaceChild(clonedButton, btn);
-
-  clonedButton.onclick = async function (event) {
-    validateFormElements();
-
-    if (!isValid()) return;
-    event.preventDefault();
-
-    clonedButton.textContent = "Processing request...";
-    clonedButton.disabled = true;
-
-    const formValues: { [key: string]: string | undefined } = {};
-    Object.entries(getFormElements()).forEach(
-      ([key, val]) => (formValues[key] = val?.value)
-    );
-
-    const building = await fetchBuildingInfo(orgSlug, buildingSlug);
-    const currentLeadSource = await fetchCurrentParsedLeadSource(
-      buildingSlug,
-      document.referrer
-    );
-
-    if (!building) {
-      logContactUsFormError(buildingSlug, orgSlug, "Could not find building");
-      return null;
-    }
-
-    const data = {
-      email_address: formValues.email,
-      first_name: formValues.firstName,
-      last_name: formValues.lastName,
-      phone_number: formValues.phone,
-      first_message: formValues.message,
-      building_id: building.id,
-      is_external_form: true,
-      lead_sources: [
-        ...new Set(
-          currentLeadSource
-            ? [currentLeadSource, "property-website"]
-            : ["property-website"]
-        ),
-      ],
-    };
-
-    const jsonData = JSON.stringify(data);
-
-    fetch(eliseUrl, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "building-slug": buildingSlug,
-        "org-slug": orgSlug,
-      },
-      body: jsonData,
-    })
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error(`HTTP error ${response.status}`);
-        }
-
-        if (form) {
-          form.reset();
-        }
-
-        Object.values(getFormElements()).forEach((el) => {
-          if (!el) return;
-          el.disabled = true;
-        });
-        clonedButton.textContent = "Submitted";
-        clonedButton.disabled = true;
-
-        return response.json();
-      })
-      .catch(() => {
-        clonedButton.textContent = originalButtonText;
-      });
-  };
-};
-
-const logContactUsFormError = (
-  buildingSlug: string,
-  orgSlug: string,
-  reason?: string,
-  formIdInfo?: Record<string, unknown>
-) => {
-  const url = `https://app.meetelise.com/platformApi/webchat/form-override-error`;
-  const body = JSON.stringify({
-    orgSlug,
-    buildingSlug,
-    reason,
-    url: window.location.href,
-    formIdInfo,
-  });
-
-  fetch(url, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      "building-slug": buildingSlug,
-      "org-slug": orgSlug,
-    },
-    body,
-  });
-};

package/src/WebComponent/me-chat.ts

@@ -10,6 +10,7 @@ import {
   FeatureFlagsShowDropdown,
   fetchFeatureFlagInsertDNIWebsite,
   fetchFeatureFlagShowMarketingSourceDropdown,
+  fetchFeatureFlagUseOverrideContactUsForm,
   fetchFeatureFlagUsePhoneNumberBySource,
 } from "../fetchFeatureFlag";
 import fetchWebchatPreferences, {
@@ -191,9 +192,19 @@ export class MEChat extends LitElement {
       return;
     }
     const building = await fetchBuildingInfo(this.orgSlug, this.buildingSlug);
+    if (building.conversationMaintenanceMode) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        "MeetElise Chat is in maintenance mode. Chat icon will not appear."
+      );
+      return;
+    }
     if (building.active !== 1) {
       return;
     }
+    if (building && this.orgSlug) {
+      overrideContactUsForm(this.orgSlug, this.buildingSlug);
+    }
 
     const [
       buildingABTest,
@@ -653,3 +664,238 @@ declare global {
     RCTPCampaign?: { CampaignDetails: { Source: string } };
   }
 }
+
+const findElementById = (priorityIds: string[]): HTMLElement | null => {
+  for (const id of priorityIds) {
+    const element = document.getElementById(id);
+    if (element) {
+      return element;
+    }
+  }
+  return null;
+};
+
+const overrideContactUsForm = async (
+  orgSlug: string,
+  buildingSlug?: string
+): Promise<void> => {
+  if (!buildingSlug || !orgSlug) return;
+  const shouldUseOverrideContactUsForm =
+    await fetchFeatureFlagUseOverrideContactUsForm(buildingSlug);
+  if (!shouldUseOverrideContactUsForm) return;
+
+  const form = findElementById(["myContactForm", "contactus"]);
+  let btn = undefined;
+
+  if (!form || !(form instanceof HTMLFormElement)) {
+    const foundForm = document.querySelector("form");
+    if (window.location.pathname.toLowerCase().includes("contactus")) {
+      logContactUsFormError(
+        buildingSlug,
+        orgSlug,
+        "Could not find form",
+        foundForm ? { id: foundForm.id } : undefined
+      );
+    }
+    return;
+  }
+
+  // Loop through the elements of the form
+  for (let i = 0; i < form.elements.length; i++) {
+    const element = form.elements[i];
+    if (
+      element.tagName.toLowerCase() === "button" &&
+      element.getAttribute("data-selenium-id") === "fakebutton"
+    ) {
+      btn = element;
+      break;
+    }
+  }
+
+  if (!btn) {
+    return logContactUsFormError(
+      buildingSlug,
+      orgSlug,
+      "Could not find submit button"
+    );
+  }
+
+  const eliseUrl =
+    "https://app.meetelise.com/platformApi/state/create/contactMe";
+
+  const getFormElements = () => {
+    const firstName = findElementById([
+      "firstname",
+      "txtName",
+    ]) as HTMLInputElement | null;
+    const lastName = findElementById([
+      "lastname",
+      "txtName2",
+    ]) as HTMLInputElement | null;
+    const email = findElementById([
+      "email",
+      "txtEmail",
+    ]) as HTMLInputElement | null;
+    const phone = findElementById([
+      "phonenumber",
+      "txtPhone",
+    ]) as HTMLInputElement | null;
+    const message = findElementById([
+      "message",
+      "txtComments",
+    ]) as HTMLTextAreaElement | null;
+
+    const formElements = { firstName, lastName, email, phone, message };
+
+    return formElements;
+  };
+
+  const isMissingFormElements = () => {
+    if (Object.values(getFormElements()).some((el) => el === null)) {
+      return true;
+    }
+    return false;
+  };
+
+  const validateFormElements = () => {
+    Object.values(getFormElements()).forEach((el) => {
+      if (el?.getAttribute("aria-required") === "true" && !el.value) {
+        el.className = "form-control required is-invalid";
+      }
+    });
+  };
+
+  const isValid = () => {
+    return Object.values(getFormElements()).every((el) => {
+      if (el === null) return false;
+      if (el.getAttribute("aria-required") === "true" && !el.value) {
+        return false;
+      }
+      if (
+        (el.id === "email" || el.id === "phonenumber") &&
+        el.getAttribute("aria-invalid") === "true"
+      ) {
+        return false;
+      }
+      return true;
+    });
+  };
+
+  if (isMissingFormElements()) {
+    const missingElements = Object.entries(getFormElements())
+      .filter(([, val]) => val === null)
+      .map(([key]) => key);
+    return logContactUsFormError(
+      buildingSlug,
+      orgSlug,
+      "Missing the following form elements: " + missingElements.join(", ")
+    );
+  }
+  const originalButtonText = btn.textContent;
+
+  // Replace the original form element with the cloned one
+  const clonedButton = btn.cloneNode(true) as HTMLButtonElement;
+  btn.parentNode?.replaceChild(clonedButton, btn);
+
+  clonedButton.onclick = async function (event) {
+    validateFormElements();
+
+    if (!isValid()) return;
+    event.preventDefault();
+
+    clonedButton.textContent = "Processing request...";
+    clonedButton.disabled = true;
+
+    const formValues: { [key: string]: string | undefined } = {};
+    Object.entries(getFormElements()).forEach(
+      ([key, val]) => (formValues[key] = val?.value)
+    );
+
+    const building = await fetchBuildingInfo(orgSlug, buildingSlug);
+    const currentLeadSource = await fetchCurrentParsedLeadSource(
+      buildingSlug,
+      document.referrer
+    );
+
+    if (!building) {
+      logContactUsFormError(buildingSlug, orgSlug, "Could not find building");
+      return null;
+    }
+
+    const data = {
+      email_address: formValues.email,
+      first_name: formValues.firstName,
+      last_name: formValues.lastName,
+      phone_number: formValues.phone,
+      first_message: formValues.message,
+      building_id: building.id,
+      is_external_form: true,
+      lead_sources: [
+        ...new Set(
+          currentLeadSource
+            ? [currentLeadSource, "property-website"]
+            : ["property-website"]
+        ),
+      ],
+    };
+
+    const jsonData = JSON.stringify(data);
+
+    fetch(eliseUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "building-slug": buildingSlug,
+        "org-slug": orgSlug,
+      },
+      body: jsonData,
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error ${response.status}`);
+        }
+
+        if (form) {
+          form.reset();
+        }
+
+        Object.values(getFormElements()).forEach((el) => {
+          if (!el) return;
+          el.disabled = true;
+        });
+        clonedButton.textContent = "Submitted";
+        clonedButton.disabled = true;
+
+        return response.json();
+      })
+      .catch(() => {
+        clonedButton.textContent = originalButtonText;
+      });
+  };
+};
+
+const logContactUsFormError = (
+  buildingSlug: string,
+  orgSlug: string,
+  reason?: string,
+  formIdInfo?: Record<string, unknown>
+) => {
+  const url = `https://app.meetelise.com/platformApi/webchat/form-override-error`;
+  const body = JSON.stringify({
+    orgSlug,
+    buildingSlug,
+    reason,
+    url: window.location.href,
+    formIdInfo,
+  });
+
+  fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "building-slug": buildingSlug,
+      "org-slug": orgSlug,
+    },
+    body,
+  });
+};