@meetelise/chat 1.20.66 → 1.20.68

package/src/WebComponent/me-chat.ts

@@ -161,6 +161,16 @@ 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> => {
@@ -213,7 +223,7 @@ export class MEChat extends LitElement {
       );
     }
 
-    // if the building does NOT have IVR setup, we want to use the building's phone number
+    // if the building does NOT have IVR setup, we want to use the building's phone numbr
     if (!phoneNumberForSource) {
       this.phoneNumberForSource = {
         number: this.building.phoneNumber,
@@ -591,6 +601,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 {