@meetelise/chat 1.20.66 → 1.20.67

package/src/WebComponent/me-chat.ts

@@ -21,7 +21,7 @@ import fetchPhoneNumberFromSource, {
   NumberForSelectedSource,
 } from "../fetchPhoneNumberFromSource";
 import { defaultBrandColor, getTheme, Theme } from "../themes";
-import { isMobile } from "../utils";
+import { isMobile, sleep } from "../utils";
 import { installLauncher } from "./launcher/Launcher";
 import parseISO from "date-fns/parseISO";
 import isPast from "date-fns/isPast";
@@ -161,12 +161,23 @@ export class MEChat extends LitElement {
     await this.initializeLaunchJS();
     this.attachOnClickToLauncher();
     this.isLoading = false;
+    if (localStorage.getItem("overrideContactUsForm") === "true") {
+      this
+        .overrideContactUsForm
+        //   {
+        //   orgSlug: this.orgSlug,
+        //   buildingSlug: this.buildingSlug,
+        //   buildingId: this.building?.id ?? null,
+        // }
+        ();
+    }
   };
 
   setBuildingDerivedInfo = async (): Promise<void> => {
     if (!this.buildingSlug || !this.orgSlug) {
       return;
     }
+    const beginTime = Date.now(); // used for widget delay
     const [
       building,
       buildingABTest,
@@ -199,6 +210,15 @@ export class MEChat extends LitElement {
       if (this.buildingABTestType === null) {
         this.buildingABTestType = webchatPreferences.designConcept ?? null;
       }
+      if (webchatPreferences.delayOpen) {
+        // We take into account the time it took to fetch the building info
+        const secondsAlreadyPassed = (Date.now() - beginTime) / 1000;
+        if (secondsAlreadyPassed < webchatPreferences.delayOpen) {
+          await sleep(
+            (webchatPreferences.delayOpen - secondsAlreadyPassed) * 1000
+          ); // delayOpen is in seconds
+        }
+      }
     }
 
     if (this.brandColor === null) {
@@ -474,6 +494,10 @@ export class MEChat extends LitElement {
     const showChatAdditionalActions =
       this.hideLauncher && !this.isLoading && !this.isMobile;
 
+    if (this.isLoading) {
+      return html``;
+    }
+
     return html`
     <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=1">
       <div id="aria-describe-info" style="display: none;">
@@ -591,6 +615,147 @@ export class MEChat extends LitElement {
       this.hasMounted = true;
     };
   };
+
+  private overrideContactUsForm = (): //   {
+  //   orgSlug,
+  //   buildingSlug,
+  //   buildingId,
+  // }: {
+  //   orgSlug: MEChat["orgSlug"];
+  //   buildingSlug: MEChat["buildingSlug"];
+  //   buildingId: Building["id"] | null;
+  // }
+  void => {
+    const form = document.getElementById(
+      "myContactForm"
+    ) as HTMLFormElement | null;
+    let btn = undefined;
+    if (!form || !(form instanceof HTMLFormElement)) {
+      // TODO: Add log
+      // return console.log("No Contact Us Form Found");
+      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) {
+      // TODO: Add log
+      // return console.log('No button with data-selenium-id="fakebutton" found');
+      return;
+    }
+
+    // Replace the original form element with the cloned one
+    const clonedButton = btn.cloneNode(true) as HTMLButtonElement;
+    btn.parentNode?.replaceChild(clonedButton, btn);
+    //TODO: Remove textContent after testing
+    clonedButton.textContent = "Elise Submit";
+
+    const eliseUrl =
+      "https://app.meetelise.com/platformApi/state/create/contactMe";
+
+    const getFormElements = () => {
+      const firstName = document.getElementById(
+        "firstname"
+      ) as HTMLInputElement | null;
+      const lastName = document.getElementById(
+        "lastname"
+      ) as HTMLInputElement | null;
+      const email = document.getElementById("email") as HTMLInputElement | null;
+      const phone = document.getElementById(
+        "phonenumber"
+      ) as HTMLInputElement | null;
+      const message = document.getElementById(
+        "message"
+      ) as HTMLTextAreaElement | null;
+
+      const formElements = { firstName, lastName, email, phone, message };
+
+      if (Object.values(formElements).some((el) => el === null)) {
+        // console.log("Form is missing elements");
+        // TODO: Add logger to log that form scraper is boken on el.name in current route or buildingId
+      }
+
+      return formElements;
+    };
+    const getFormValues = () => {
+      const formValues: { [key: string]: string | undefined } = {};
+      Object.entries(getFormElements()).forEach(
+        ([key, val]) => (formValues[key] = val?.value)
+      );
+      return formValues;
+    };
+
+    const isValid = () => {
+      return Object.values(getFormElements()).every((el) => {
+        if (el === null) return false;
+        //TODO: May need to not depend on aria-invalid
+        return el.getAttribute("aria-invalid") !== "true";
+      });
+    };
+
+    clonedButton.onclick = function (event) {
+      if (!isValid()) return;
+      event.preventDefault();
+      const formValues = getFormValues();
+
+      const data = {
+        email_address: formValues.email,
+        first_name: formValues.firstName,
+        last_name: formValues.lastName,
+        phone_number: formValues.phone,
+        first_message: formValues.message,
+
+        //TODO: Replace after testing is done
+        building_id: 3660,
+      };
+
+      // Convert the data object to a JSON string
+      const jsonData = JSON.stringify(data);
+
+      fetch(eliseUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "building-slug": "e2e-test-yardi-building",
+          "org-slug": "test-company",
+          //TODO: Replace org and building slugs
+        },
+        body: jsonData,
+      }).then((response) => {
+        // TODO: What's needed here?
+        // console.log(response);
+        // Check if the request was successful
+        if (!response.ok) {
+          throw new Error(`HTTP error ${response.status}`);
+        }
+
+        form.reset();
+
+        // Parse the response as JSON
+        return response.json();
+      });
+      // .then((responseData) => {
+      //   // Handle the JSON response data
+      //   // TODO: What's needed here?
+      //   // console.log("Response data:", responseData);
+      // })
+      // .catch((error) => {
+      //   // Handle any errors that occurred during the request
+      //   // TODO: What's needed here?
+      //   // console.error("Error:", error);
+      // });
+    };
+  };
 }
 
 declare global {

package/src/utils.ts

@@ -78,3 +78,7 @@ export const hexToAlmostWhite = (hexColor: string, ratio: number): string => {
     b.toString(16).padStart(2, "0")
   );
 };
+
+export const sleep = (ms: number): Promise<void> => {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+};