@meetelise/chat 1.34.7 → 1.35.1

package/src/insertLeadSourceIntoSchedulerLinks.ts

@@ -0,0 +1,71 @@
+// DEPRECATED: This function is no longer used. It was used to insert the lead source into the scheduler links.
+// We now prevent the redirect and force tour SST widget to open instead in replaceSSTLinkWithTourWidgetTrigger.ts.
+export const insertLeadSourceIntoSchedulerLinks = (
+  leadSource: string
+): void => {
+  const links = document.querySelectorAll("a");
+  links.forEach(function (link) {
+    const href = link.getAttribute("href");
+    if (href && href.startsWith("https://app.meetelise.com/")) {
+      const separator = href.includes("?") ? "&" : "?";
+      link.setAttribute(
+        "href",
+        href +
+          separator +
+          `eliseParsedLeadSource=${encodeURIComponent(leadSource)}`
+      );
+    }
+  });
+};
+
+export const replaceSSTLinkWithTourWidgetTrigger = (
+  handleTourClicked: (e: MouseEvent) => void
+): void => {
+  const sstRedirectElements = document.querySelectorAll("a");
+  sstRedirectElements.forEach(function (element) {
+    const href = element.getAttribute("href");
+    if (href && href.startsWith("https://app.meetelise.com/")) {
+      element.addEventListener("click", (event) => {
+        event.preventDefault(); // Prevents the default href redirect
+        handleTourClicked(event as MouseEvent);
+      });
+    }
+  });
+};
+
+export const replacePageRedirectElementWithTourWidgetTrigger = (
+  handleTourClicked: (e: MouseEvent) => void
+): void => {
+  // Gets any elements in format like <a href="/apartments/oh/westerville/schedule-a-tour" class=" ">Schedule a Tour</a>
+  const scheduleLinks = document.querySelectorAll('a[href$="schedule-a-tour"]');
+  scheduleLinks.forEach((linkElement) => {
+    if (!linkElement) {
+      return;
+    }
+    linkElement.addEventListener("click", (event) => {
+      event.preventDefault(); // Prevents the default href redirect
+      handleTourClicked(event as MouseEvent);
+    });
+  });
+};
+
+export const replaceTourTriggerElementWithTourWidgetTrigger = (
+  handleTourClicked: (e: MouseEvent) => void
+): void => {
+  const scheduleLinks = document.querySelectorAll(
+    'a[href^="#leaseleads-tour-open"]'
+  );
+  scheduleLinks.forEach((linkElement) => {
+    if (!linkElement) {
+      return;
+    }
+    const newLink = document.createElement("a");
+    newLink.innerHTML = linkElement.innerHTML;
+    newLink.style.cursor = "pointer";
+    newLink.addEventListener("click", (event) => {
+      event.preventDefault();
+      handleTourClicked(event as MouseEvent);
+    });
+    linkElement.parentNode?.replaceChild(newLink, linkElement);
+  });
+};

package/src/main/MEChat.test.ts

@@ -0,0 +1,110 @@
+import { expect } from "@esm-bundle/chai";
+import { stub, restore } from "sinon/pkg/sinon-esm";
+import MEChat from "../../public/dist/index";
+
+const stubResponse = {
+  json: stub().resolves({
+    id: 42,
+    userId: 42.1,
+    orgId: 42.2,
+    name: "Unit Test Building",
+    themeId: null,
+    avatarSrc: null,
+    avatarType: "",
+    userFirstName: "Ella",
+    userLastName: "",
+    logoSrc:
+      "https://eliseusercontent.meetelise.com/building/3660/test-logo.png",
+    chatTitle: "Elise",
+    chatSubtitle: "Leasing Agent ExtraordinAIre",
+    welcomeMessage:
+      "Welcome, I'm Elise! If you have any questions about Unit Test Building or would like to schedule a tour, I'm happy to help.",
+    systemWelcomeMessage: "I am an AI and may record this conversation!",
+    conversationMaintenanceMode: false,
+  }),
+};
+
+const waitForElementWithSelectorToExist = async (
+  selector: string,
+  target: Node = document.body
+): Promise<void> => {
+  return new Promise<void>((resolve) => {
+    // in case the element already exists
+    if (document.querySelector(selector)) {
+      resolve();
+    }
+    const observer = new MutationObserver(() => {
+      if (document.querySelector(selector)) {
+        resolve();
+      }
+    });
+    observer.observe(target, { subtree: true, childList: true });
+  });
+};
+
+// const wait = (delay, ...args) =>
+//   new Promise((resolve) => setTimeout(resolve, delay, ...args));
+
+afterEach(() => {
+  restore();
+});
+
+it.skip("shows the launcher", async function () {
+  // Given an API that returns this building theme
+  stub(window, "fetch").resolves(stubResponse);
+
+  // When I start MEChat
+  MEChat.start({
+    organization: "unit-test-org",
+    building: "unit-test-building",
+  });
+  await waitForElementWithSelectorToExist(".meetelise-chat.launcher > div");
+
+  // Then I should see a launcher
+  const launcher = document.querySelector<HTMLDivElement>(
+    ".meetelise-chat.launcher"
+  ).firstChild as HTMLDivElement;
+
+  // And the popup should be hidden
+  const popup = document.querySelector<HTMLSpanElement>(".__talkjs_popup");
+  expect(popup).to.be.an.instanceof(HTMLSpanElement);
+  const popupStyle = window.getComputedStyle(popup);
+  const popupDisplay = popupStyle.getPropertyValue("display");
+  expect(popupDisplay).to.equal("none");
+
+  launcher.click();
+  // Without waiting, the popup doesn't open in time for the next assertion
+  //await wait.skip(0);
+
+  // Then the popup should be visible
+  const popupStyle2 = window.getComputedStyle(popup);
+  const popupDisplay2 = popupStyle2.getPropertyValue("display");
+  expect(popupDisplay2).not.to.equal("none");
+
+  // Ideally, expect welcome message, but we can't select inside the iframe
+  // Ideally, expect theme colors, but we can't select inside the iframe
+});
+
+it.skip("works via the programmatic interface", async function () {
+  // Given an API that returns this building theme
+  stub(window, "fetch").resolves(stubResponse);
+
+  // When I start MEChat
+  const chat = MEChat.start({
+    organization: "unit-test-org",
+    building: "unit-test-building",
+  });
+
+  await waitForElementWithSelectorToExist(".meetelise-chat.launcher > div");
+
+  // Ideally, verify behavior, but this will at least verify nothing throws
+  chat.show();
+  chat.hide();
+  chat.setTheme({
+    avatarInitials: "G",
+  });
+  chat.open();
+  chat.close();
+  chat.restartConversation();
+  chat.remove();
+});

package/src/main/MEChat.ts

@@ -0,0 +1,404 @@
+import axios from "axios";
+import { StyleInfo } from "lit/directives/style-map";
+import "../WebComponent/me-chat";
+import { MEChat as MEChatLitElement } from "../WebComponent/me-chat";
+import "../WebComponent/health-chat";
+import { HealthChat as HealthChatLitElement } from "../WebComponent/health-chat";
+import "../WebComponent/utilities-chat";
+import { UtilitiesChat as UtilitiesChatElement } from "../WebComponent/utilities-chat";
+
+import { tintColor } from "../themes";
+import { LogType, sendLoggingEvent } from "../analytics";
+import { findBuildingSlugFromSite, handleRentgrataOverride } from "./utils";
+
+/**
+ * The interface to MeetElise chat.
+ *
+ * To add meetelise chat to the screen, call its static method
+ * `start()` with your building and organization slug.
+ *
+ * @example
+ * MEChat.start({
+ *   organization: 'the-jacobson-group',
+ *   building: 'twin-rivers-pointe'
+ * });
+ */
+
+interface PositioningOptions {
+  right?: number;
+  bottom?: number;
+  top?: number;
+  left?: number;
+}
+
+export interface HealthcareOptions extends PositioningOptions {
+  id: string;
+}
+export default class MEChat {
+  static meChat: MEChatLitElement | null = null;
+  static healthChat: HealthChatLitElement | null = null;
+  static utilitiesChat: UtilitiesChatElement | null = null;
+  static orgSlug = "";
+  static mutationObserver: MutationObserver | null = null;
+  static previousUrl = "";
+  static hasBuildingSlug: boolean | null = null;
+  static brandColor = "";
+  static backgroundColor = "";
+  static healthcareId = "";
+  static overridePlacement: {
+    right?: number;
+    bottom?: number;
+    top?: number;
+    left?: number;
+  } = {};
+
+  static healthcareStart(opts: HealthcareOptions, isInitialStart = true): void {
+    if (isInitialStart) {
+      this.healthcareId = opts.id;
+      this.overridePlacement = {
+        right: opts.right,
+        bottom: opts.bottom,
+        top: opts.top,
+        left: opts.left,
+      };
+    }
+    installFont();
+    const healthChat = document.createElement("health-chat");
+    healthChat.setAttribute("class", "health-chat");
+    healthChat.setAttribute("role", "dialog");
+    healthChat.setAttribute("aria-label", "EliseAI Healthcare Widget");
+    healthChat.setAttribute("aria-describedby", "aria-describe-info");
+    healthChat.setAttribute("aria-modal", "true");
+    healthChat.setAttribute("healthcareId", opts.id);
+
+    healthChat.setAttribute("right", opts.right?.toString() || "unset");
+    healthChat.setAttribute("bottom", opts.bottom?.toString() || "unset");
+    healthChat.setAttribute("top", opts.top?.toString() || "unset");
+    healthChat.setAttribute("left", opts.left?.toString() || "unset");
+
+    document.body.appendChild(healthChat);
+    MEChat.healthChat = healthChat;
+  }
+
+  static start(opts: Options, isInitialStart = true): void {
+    // If clients are Yardi and have a resident portal with rentcafe,
+    //  we do NOT want to display the launcher (if following in shows up anywhere in url).
+    if (
+      window.location.pathname.includes("residentservices") ||
+      window.location.pathname.includes("onlineleasing")
+    ) {
+      return;
+    }
+    if (isInitialStart) {
+      this.orgSlug =
+        opts.organization === "Pacific Urban Residential"
+          ? "cbc11aba-21c4-4571-bc43-ff9d86a029e3"
+          : opts.organization;
+      this.hasBuildingSlug = !!opts.building;
+      this.overridePlacement = {
+        right: opts?.position?.right,
+        bottom: opts?.position?.bottom,
+        top: opts?.position?.top,
+        left: opts?.position?.left,
+      };
+    }
+    installFont();
+
+    let meChatElement:
+      | MEChatLitElement
+      | UtilitiesChatElement
+      | HealthChatLitElement
+      | null = null;
+
+    switch (opts.widgetType) {
+      case WidgetType.Healthcare:
+        throw new Error(
+          "Healthcare widget is not supported yet, please use the healthcareStart method instead."
+        );
+      case WidgetType.Default:
+        meChatElement = document.createElement("me-chat");
+        break;
+      case WidgetType.Utilities:
+        meChatElement = document.createElement("utilities-chat");
+        break;
+      default:
+        meChatElement = document.createElement("me-chat");
+    }
+
+    if (!meChatElement) {
+      throw new Error("Invalid widget type");
+    }
+
+    meChatElement.setAttribute(
+      "orgSlug",
+      opts.organization === "Pacific Urban Residential"
+        ? "cbc11aba-21c4-4571-bc43-ff9d86a029e3"
+        : opts.organization
+    );
+    meChatElement.setAttribute(
+      "widgetType",
+      opts.widgetType || WidgetType.Default
+    );
+    meChatElement.setAttribute("class", "meetelise-chat");
+    meChatElement.setAttribute("role", "dialog");
+    meChatElement.setAttribute("aria-label", "EliseAI Widget");
+    meChatElement.setAttribute("aria-describedby", "aria-describe-info");
+    meChatElement.setAttribute("aria-modal", "true");
+
+    if (opts.brandColor) {
+      this.brandColor = opts.brandColor;
+      // we must tint the brand color, to ensure it is visible.
+      meChatElement.setAttribute(
+        "primaryColor",
+        tintColor(opts.brandColor, 0.3)
+      );
+    }
+    if (opts.backgroundColor) {
+      this.backgroundColor = opts.backgroundColor;
+    }
+
+    if (meChatElement instanceof MEChatLitElement) {
+      this.handleBuildingslug(
+        meChatElement as MEChatLitElement,
+        opts.organization,
+        opts.building
+      );
+      if (opts.launcherStyles) {
+        meChatElement.launcherStyles = opts.launcherStyles;
+      }
+      if (opts.mobileStyles) {
+        meChatElement.mobileStyles = opts.mobileStyles;
+      }
+      if (opts.onWidgetLoaded) {
+        meChatElement.onWidgetLoaded = opts.onWidgetLoaded;
+      }
+      if (opts.overrideRentgrata) {
+        handleRentgrataOverride();
+        meChatElement.overrideRentgrata = true;
+      }
+      if (opts.onSstClose) {
+        meChatElement.onSstClose = opts.onSstClose;
+      }
+    }
+
+    if (opts.position) {
+      meChatElement.setAttribute(
+        "right",
+        opts.position.right?.toString() || "unset"
+      );
+      meChatElement.setAttribute(
+        "bottom",
+        opts.position.bottom?.toString() || "unset"
+      );
+      meChatElement.setAttribute(
+        "top",
+        opts.position.top?.toString() || "unset"
+      );
+      meChatElement.setAttribute(
+        "left",
+        opts.position.left?.toString() || "unset"
+      );
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (window as any).eliseAi = {};
+    document.body.appendChild(meChatElement);
+
+    if (meChatElement instanceof MEChatLitElement) {
+      MEChat.meChat = meChatElement;
+    }
+    if (meChatElement instanceof UtilitiesChatElement) {
+      MEChat.utilitiesChat = meChatElement;
+    }
+  }
+
+  static async restartConversation(): Promise<void> {
+    if (!this.meChat) {
+      return;
+    }
+    await this.meChat.restartConversation();
+  }
+
+  static async remove(): Promise<void> {
+    if (!this.meChat) {
+      return;
+    }
+    await this.meChat.remove();
+    document.body.removeChild(this.meChat);
+    MEChat.meChat = null;
+  }
+
+  static async handleBuildingslug(
+    meChat: MEChatLitElement,
+    orgSlug?: string,
+    buildingSlug?: string
+  ): Promise<void> {
+    if (buildingSlug) {
+      meChat.setAttribute("buildingSlug", buildingSlug);
+      // TODO(JMB): Uncomment this when we want to start logging mismatches instead of just the "no match found" case
+      // this.calculateBuildingSlugForLogging(buildingSlug);
+      return;
+    }
+
+    if (this.mutationObserver) {
+      return;
+    }
+    if (!orgSlug) {
+      return;
+    }
+    const foundBuildingSlugFromSite = await findBuildingSlugFromSite(orgSlug);
+    if (foundBuildingSlugFromSite) {
+      const opts = {
+        organization: orgSlug,
+        building: foundBuildingSlugFromSite,
+        brandColor: this.brandColor,
+        backgroundColor: this.backgroundColor,
+      };
+      this.start(opts, false);
+    }
+    this.previousUrl = window.location.href;
+
+    document.body.addEventListener(
+      "click",
+      () => {
+        requestAnimationFrame(() => {
+          if (
+            this.previousUrl === window.location.href ||
+            this.hasBuildingSlug
+          ) {
+            return;
+          }
+          this.previousUrl = window.location.href;
+          findBuildingSlugFromSite(orgSlug).then(
+            (foundBuildingSlugFromSite) => {
+              if (!foundBuildingSlugFromSite) {
+                return;
+              }
+              const opts = {
+                organization: orgSlug,
+                building: foundBuildingSlugFromSite,
+                brandColor: this.brandColor,
+                backgroundColor: this.backgroundColor,
+              };
+              this.start(opts, false);
+            }
+          );
+        });
+      },
+      true
+    );
+  }
+
+  static async handleSingleFamilyUrl(): Promise<void> {
+    if (this.hasBuildingSlug) {
+      return;
+    }
+    this.remove();
+    const url = window.location.href;
+    const requestUrl = `https://app.meetelise.com/platformApi/webchat/microsite_slug?uri=${encodeURIComponent(
+      url
+    )}`;
+    const buildingSlug = await axios.get<string | null>(requestUrl, {
+      headers: { ["org-slug"]: this.orgSlug },
+    });
+    // TODO: Figure out whether we only want to sample a percentage of these
+    if (Math.random() < 0.2) {
+      sendLoggingEvent({
+        logType:
+          buildingSlug && buildingSlug.data ? LogType.info : LogType.warn,
+        logTitle: `[BUILDING_SLUG_CALCULATED_${
+          buildingSlug ? "SUCCESS" : "FAILURE"
+        }]`,
+        logData: {
+          calculatedBuildingSlug: buildingSlug.data,
+          url,
+          orgSlug: this.orgSlug,
+          givenBuildingSlug: null,
+          reason: buildingSlug && buildingSlug.data ? null : "No match found",
+        },
+      });
+    }
+    if (!buildingSlug || !buildingSlug.data) {
+      return;
+    }
+    const opts = {
+      organization: this.orgSlug,
+      building: buildingSlug.data,
+      brandColor: this.brandColor,
+      backgroundColor: this.backgroundColor,
+    };
+    this.start(opts, false);
+  }
+
+  static async calculateBuildingSlugForLogging(
+    givenBuildingSlug: string
+  ): Promise<void> {
+    // TODO: Figure out whether we only want to sample a percentage of these
+    const url = window.location.href;
+    const requestUrl = `https://app.meetelise.com/platformApi/webchat/microsite_slug?uri=${encodeURIComponent(
+      url
+    )}`;
+    const buildingSlug = await axios.get<string | null>(requestUrl, {
+      headers: { ["org-slug"]: this.orgSlug },
+    });
+    if (Math.random() < 0.2) {
+      sendLoggingEvent({
+        logType:
+          buildingSlug && buildingSlug.data === givenBuildingSlug
+            ? LogType.info
+            : LogType.warn,
+        logTitle: `[BUILDING_SLUG_CALCULATED_${
+          buildingSlug && buildingSlug.data === givenBuildingSlug
+            ? "SUCCESS"
+            : "FAILURE"
+        }]`,
+        logData: {
+          calculatedBuildingSlug: buildingSlug.data,
+          url,
+          orgSlug: this.orgSlug,
+          givenBuildingSlug,
+          reason:
+            buildingSlug && buildingSlug.data === givenBuildingSlug
+              ? null
+              : buildingSlug && !buildingSlug.data
+              ? "No match found"
+              : buildingSlug && buildingSlug.data !== givenBuildingSlug
+              ? "Mismatch"
+              : "No match found",
+        },
+      });
+    }
+    if (!buildingSlug || !buildingSlug.data) {
+      return;
+    }
+  }
+}
+
+export interface Options {
+  building: string;
+  organization: string;
+  avatarSrc?: string;
+  mini?: boolean;
+  launcherStyles?: StyleInfo;
+  brandColor?: string;
+  backgroundColor?: string;
+  mobileStyles?: StyleInfo;
+  position?: PositioningOptions;
+  onWidgetLoaded?: () => void;
+  overrideRentgrata?: boolean;
+  widgetType?: string;
+  onSstClose?: () => void;
+}
+
+export enum WidgetType {
+  Default = "default",
+  Healthcare = "healthcare",
+  Utilities = "utilities",
+}
+
+/** You can't install a font from CSS in a shadow DOM, so we use JS to do it here in the regular DOM. */
+const installFont = () => {
+  const link = document.createElement("link");
+  link.setAttribute("rel", "stylesheet");
+  link.setAttribute("type", "text/css");
+  document.head.appendChild(link);
+};

package/src/main/utils.ts

@@ -0,0 +1,70 @@
+import { LogType, sendLoggingEvent } from "../analytics";
+import axios from "axios";
+
+export const findBuildingSlugFromSite = async (
+  orgSlug: string
+): Promise<string | null> => {
+  const url = window.location.href;
+  const requestUrl = `https://app.meetelise.com/platformApi/webchat/microsite_slug?uri=${encodeURIComponent(
+    url
+  )}`;
+  const buildingSlug = await axios.get<string | null>(requestUrl, {
+    headers: { ["org-slug"]: orgSlug },
+  });
+  // TODO: Figure out whether we only want to sample a percentage of these
+  if (Math.random() < 0.2) {
+    sendLoggingEvent({
+      logType: buildingSlug && buildingSlug.data ? LogType.info : LogType.warn,
+      logTitle: `[BUILDING_SLUG_CALCULATED_${
+        buildingSlug ? "SUCCESS" : "FAILURE"
+      }]`,
+      logData: {
+        calculatedBuildingSlug: buildingSlug.data,
+        url,
+        orgSlug: orgSlug,
+        givenBuildingSlug: null,
+        reason: buildingSlug && buildingSlug.data ? null : "No match found",
+      },
+    });
+  }
+  return buildingSlug.data;
+};
+
+export const handleRentgrataOverride = async (): Promise<void> => {
+  const rentgrataWrapperElement = await waitForElement("rg-widget-compact");
+  if (!rentgrataWrapperElement) {
+    return;
+  }
+  rentgrataWrapperElement.setAttribute("style", "display: none");
+};
+
+const waitForElement = async (
+  elementId: string,
+  timeout = 5000
+): Promise<Element> => {
+  return new Promise((resolve, reject) => {
+    const observer = new MutationObserver((mutationsList, observer) => {
+      const element = document.getElementById(elementId);
+      if (element) {
+        observer.disconnect();
+        resolve(element);
+      }
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    const timeoutId = setTimeout(() => {
+      observer.disconnect();
+      reject(
+        new Error(`Element ${elementId} did not appear within ${timeout}ms`)
+      );
+    }, timeout);
+
+    const element = document.querySelector(elementId);
+    if (element) {
+      clearTimeout(timeoutId);
+      observer.disconnect();
+      resolve(element);
+    }
+  });
+};

package/src/postLeadSources.ts

@@ -0,0 +1,44 @@
+export function getUrlQueryParameters(): { [queryKey: string]: string } | null {
+  if (isQueryMalformed()) {
+    return getMalformedQueryParameters();
+  }
+  return getStandardUrlQueryParameters();
+}
+
+function getStandardUrlQueryParameters(): {
+  [queryKey: string]: string;
+} | null {
+  const queryParams = new URLSearchParams(window.location.search);
+
+  const hasUtmContent = queryParams.has("utm_content");
+  const hasUtmSource = queryParams.has("utm_source");
+
+  // If utm_content exists and utm_source does not, replace utm_content with utm_source
+  if (hasUtmContent && !hasUtmSource) {
+    const utmContentValue = queryParams.get("utm_content");
+    queryParams.delete("utm_content");
+    queryParams.set("utm_source", utmContentValue as string);
+  }
+
+  return Object.fromEntries(queryParams);
+}
+
+// Some clients are sending malformed query parameters, so we need to handle those
+//  i.e. .../?switch_cls[id]=94593/?utm_source=MillCreekPlaces&utm_medium=Community+Portfolio+Page
+function getMalformedQueryParameters(): { [queryKey: string]: string } | null {
+  const url = window.location.search;
+  const allParams: { [queryKey: string]: string } = {};
+  const malformedParts = url.split("?").slice(1).join("&");
+  const pairs = malformedParts.split("&");
+  pairs.forEach((pair) => {
+    const [key, value] = pair.split("=");
+    if (key && value) {
+      allParams[decodeURIComponent(key)] = decodeURIComponent(value);
+    }
+  });
+
+  return allParams;
+}
+
+const isQueryMalformed = (): boolean =>
+  (window.location.search.match(/\?/g) || []).length > 1;