@meetelise/chat 1.29.0 → 1.30.1

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;

package/src/rentgrata.ts

@@ -0,0 +1,74 @@
+import axios from "axios";
+
+export const openRengrataWidget = (): void => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const rentgrata = (window as any).rentgrata;
+  if (!rentgrata) {
+    return;
+  }
+  const rentgrataWidget = rentgrata.Widget;
+  if (!rentgrataWidget) {
+    return;
+  }
+  if (!rentgrataWidget.openWidget) {
+    return;
+  }
+  rentgrataWidget.openWidget();
+};
+
+export const closeRengrataWidget = (): void => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const rentgrata = (window as any).rentgrata;
+  if (!rentgrata) {
+    return;
+  }
+  const rentgrataWidget = rentgrata.Widget;
+  if (!rentgrataWidget) {
+    return;
+  }
+  if (!rentgrataWidget.openWidget) {
+    return;
+  }
+  rentgrataWidget.close();
+};
+
+export const hasRentgrata = (): boolean => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return !!(window as any).rentgrata;
+};
+
+export const updateRentgrataToken = async (
+  buildingSlug: string,
+  orgSlug: string
+): Promise<void> => {
+  const host = "https://app.meetelise.com";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const rentgrata = (window as any).rentgrata;
+  if (!rentgrata) {
+    return;
+  }
+  const rentgrataWidget = rentgrata.Widget;
+  if (!rentgrataWidget) {
+    return;
+  }
+  const rentgrataConfig = rentgrataWidget.config;
+  if (!rentgrataConfig) {
+    return;
+  }
+
+  const widgetKey = rentgrataConfig.widgetKey;
+  if (!widgetKey) {
+    return;
+  }
+  await axios.post(
+    `${host}/platformApi/webchat/rentgrata?token=${widgetKey}`,
+    {},
+    {
+      headers: {
+        "Content-Type": "application/json",
+        "building-slug": buildingSlug ?? "",
+        "org-slug": orgSlug ?? "",
+      },
+    }
+  );
+};

package/src/replaceSelectButtonsWithNewLink.ts

@@ -0,0 +1,69 @@
+/**
+ * Script to find all application links/buttons on a page and replace them with a
+ * new elise application link.
+ */
+import { LogType, sendLoggingEvent } from "./analytics";
+
+/**
+ * Script to find all "Select" buttons with specific URL patterns and replace them with a
+ * new application link.
+ */
+export const replaceSelectButtonsWithNewLink = (
+  newApplicationLink: string,
+  orgSlug: string,
+  buildingSlug?: string
+): number => {
+  const urlPatterns = [
+    /thehavenatgreenhill\.securecafe\.com\/onlineleasing\/the-haven-at-greenhill\/oleapplication\.aspx(\?.*)?$/,
+    /securecafe\.com\/onlineleasing.*\/oleapplication\.aspx(\?.*)?$/,
+    /\/onlineleasing.*\/oleapplication\.aspx(\?.*)?$/,
+    /vsc\.myresman\.com\/Portal\/Applicants\/Availability(\?.*)?$/,
+  ];
+
+  const allElements = document.body.getElementsByTagName("a");
+  let totalReplacements = 0;
+
+  for (let i = 0; i < allElements.length; i++) {
+    const element = allElements[i] as HTMLAnchorElement;
+    if (element.nodeType !== Node.ELEMENT_NODE) continue;
+
+    const matchesUrlPattern = urlPatterns.some((pattern) =>
+      pattern.test(element.href)
+    );
+    const isSelectButtonWithUrl = matchesUrlPattern;
+
+    if (isSelectButtonWithUrl) {
+      const oldHref = element.getAttribute("href");
+      element.setAttribute("href", newApplicationLink);
+      totalReplacements++;
+
+      sendLoggingEvent({
+        logTitle: "SELECT_BUTTON_LINK_REPLACEMENT",
+        logData: {
+          type: "link-replacement",
+          oldHref,
+          newHref: newApplicationLink,
+          website: window.location.href,
+        },
+        logType: LogType.info,
+        buildingSlug,
+        orgSlug,
+      });
+    }
+  }
+
+  if (totalReplacements === 0) {
+    sendLoggingEvent({
+      logTitle: "SELECT_BUTTON_LINK_REPLACEMENT",
+      logData: {
+        type: "no-select-buttons-found",
+        website: window.location.href,
+      },
+      logType: LogType.warn,
+      buildingSlug,
+      orgSlug,
+    });
+  }
+
+  return totalReplacements;
+};