@meetelise/chat 1.29.0 → 1.30.1

package/src/getShouldShowWebchat.ts

@@ -0,0 +1,114 @@
+import { logSignal } from "./analytics";
+import { BuildingWebchatView } from "./fetchBuildingWebchatView";
+import { fetchFeatureFlagMaintenanceMode } from "./fetchFeatureFlag";
+import { WebchatNoShowReason } from "./types/webchat-no-show-reason";
+
+const getShouldShowWebchat = async (
+  buildingWebchatView: BuildingWebchatView | null,
+  buildingSlug: string,
+  orgSlug: string
+): Promise<boolean> => {
+  const sampleRateForWebchat = 0.01;
+
+  if (!buildingWebchatView) {
+    // eslint-disable-next-line no-console
+    console.warn("MeetElise Chat will NOT appear. Building does NOT exist.");
+    log(
+      orgSlug,
+      buildingSlug,
+      true,
+      false,
+      "building_does_not_exist",
+      sampleRateForWebchat
+    );
+    return false;
+  }
+  if (!buildingWebchatView.launchedDateTime) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "MeetElise Chat will NOT appear. Building is NOT launched (based on launched date time)."
+    );
+    log(
+      orgSlug,
+      buildingSlug,
+      true,
+      false,
+      "building_not_launched",
+      sampleRateForWebchat
+    );
+    return false;
+  }
+
+  if (!buildingWebchatView.active) {
+    // eslint-disable-next-line no-console
+    console.warn("MeetElise Chat will NOT appear. Building is NOT active.");
+    log(
+      orgSlug,
+      buildingSlug,
+      true,
+      false,
+      "building_not_active",
+      sampleRateForWebchat
+    );
+    return false;
+  }
+  if (!buildingWebchatView.webchatScopeConfigured) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "MeetElise Chat will NOT appear. Building is NOT webchat scope configured."
+    );
+    log(
+      orgSlug,
+      buildingSlug,
+      true,
+      false,
+      "building_not_webchat_scope_configured",
+      sampleRateForWebchat
+    );
+    return false;
+  }
+
+  const leasingMaintenanceMode = await fetchFeatureFlagMaintenanceMode(
+    buildingSlug
+  );
+  // https://app.launchdarkly.com/projects/default/flags/webchat-leasing-in-maintenance-mode/targeting?env=production&selected-env=production
+  if (leasingMaintenanceMode) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "MeetElise Chat will NOT appear. Chat is in maintenance mode."
+    );
+    log(
+      orgSlug,
+      buildingSlug,
+      true,
+      false,
+      "building_in_maintenance_mode",
+      sampleRateForWebchat
+    );
+    return false;
+  }
+  return true;
+};
+
+const log = (
+  orgSlug: string,
+  buildingSlug: string,
+  isPixelOnSite = true,
+  isAnyWebchatShowing = false,
+  webchatNoShowReason: WebchatNoShowReason,
+  sampleRate = 0.01
+) =>
+  logSignal({
+    params: {
+      org_slug: orgSlug,
+      building_slug: buildingSlug,
+      is_pixel_on_site: isPixelOnSite,
+      is_any_webchat_showing: isAnyWebchatShowing,
+      extra_data: {
+        webchat_no_show_reason: webchatNoShowReason,
+      },
+    },
+    sampleRate,
+  });
+
+export default getShouldShowWebchat;

package/src/getTimezoneString.ts

@@ -0,0 +1,39 @@
+const isDaylightSavingTime = (date: Date): boolean => {
+  const jan = new Date(date.getFullYear(), 0, 1);
+  const jul = new Date(date.getFullYear(), 6, 1);
+  const stdTimezoneOffset = Math.max(
+    jan.getTimezoneOffset(),
+    jul.getTimezoneOffset()
+  );
+
+  return date.getTimezoneOffset() < stdTimezoneOffset;
+};
+
+export const getTimezoneAbbreviation = (): string => {
+  const date = new Date();
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const isDST = isDaylightSavingTime(date);
+
+  switch (timeZone) {
+    case "America/New_York":
+      return isDST ? "EDT" : "EST";
+    case "America/Chicago":
+      return isDST ? "CDT" : "CST";
+    case "America/Denver":
+      return isDST ? "MDT" : "MST";
+    case "America/Los_Angeles":
+      return isDST ? "PDT" : "PST";
+    case "America/Anchorage":
+      return isDST ? "AKDT" : "AKST";
+    case "America/Honolulu":
+      return "HST";
+    case "America/Phoenix":
+      return "MST";
+    case "America/Indiana/Indianapolis":
+      return isDST ? "EDT" : "EST";
+    case "America/Indiana/Knox":
+      return isDST ? "CDT" : "CST";
+    default:
+      return "Unknown";
+  }
+};

package/src/globals.ts

@@ -0,0 +1 @@
+export const BASE_DOMAIN = "https://app.meetelise.com";

package/src/gtm.ts

@@ -0,0 +1,17 @@
+declare global {
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    dataLayer: any[];
+  }
+}
+
+export const pushGtmEvent = (
+  eventName: string,
+  event: Record<string, unknown> = {}
+): void => {
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push({
+    event: eventName,
+    ...event,
+  });
+};

package/src/handleChatId.ts

@@ -0,0 +1,101 @@
+import parseISO from "date-fns/parseISO";
+import { v4 as uuid } from "uuid";
+import formatISO from "date-fns/formatISO";
+import { isTimestampExpired } from "./utils";
+import isBefore from "date-fns/isBefore";
+
+export interface ChatStorageKey {
+  leadId: string | null;
+  timestamp: Date | null;
+  buildingSlug: string | null;
+  initiatedChat: boolean;
+}
+
+export const ttlHours = 24;
+
+export const clearChatStorageKey = (buildingSlug: string): void =>
+  localStorage.removeItem("com.elise.webchat.slug=" + buildingSlug);
+
+export const createChatStorageKey = (
+  buildingSlug: string,
+  withChatinitialized: boolean,
+  leadId?: string
+): ChatStorageKey => {
+  const storageTimestamp = formatISO(new Date());
+
+  // must preface with lead for BE to extract lead id
+  const leadUserId = leadId ? leadId : `lead_${uuid()}`;
+  localStorage.setItem(
+    "com.elise.webchat.slug=" + buildingSlug,
+    JSON.stringify({
+      buildingSlug: buildingSlug,
+      leadId: leadUserId,
+      timestamp: storageTimestamp,
+      initiatedChat: withChatinitialized,
+    })
+  );
+  return {
+    leadId: leadUserId,
+    timestamp: parseISO(storageTimestamp),
+    buildingSlug: buildingSlug,
+    initiatedChat: withChatinitialized,
+  };
+};
+
+export const getChatStorageKey = (buildingSlug: string): ChatStorageKey => {
+  const eliseaiLocalStorageValue = localStorage.getItem(
+    "com.elise.webchat.slug=" + buildingSlug
+  );
+  if (eliseaiLocalStorageValue) {
+    try {
+      const eliseaiLocalStorageValueParsed = JSON.parse(
+        eliseaiLocalStorageValue
+      );
+      const newStorageKey = {
+        leadId: eliseaiLocalStorageValueParsed.leadId,
+        timestamp: new Date(eliseaiLocalStorageValueParsed.timestamp),
+        buildingSlug: eliseaiLocalStorageValueParsed.buildingSlug,
+        initiatedChat: eliseaiLocalStorageValueParsed.initiatedChat,
+      };
+      if (isChatKeyValid(buildingSlug, newStorageKey)) {
+        return newStorageKey;
+      }
+    } catch (_) {
+      // eslint-disable-next-line no-console
+      console.warn("Error getting chat storage key");
+    }
+  }
+
+  return {
+    leadId: null,
+    timestamp: null,
+    buildingSlug: null,
+    initiatedChat: false,
+  };
+};
+export const isChatKeyValid = (
+  buildingSlug: string,
+  storageValue: ChatStorageKey
+): boolean => {
+  // If we want to do force invalidation
+  try {
+    if (storageValue.timestamp && storageValue.initiatedChat) {
+      const topBoundaryTimestamp = new Date("2024-06-06T21:30:00Z");
+      if (isBefore(storageValue.timestamp, topBoundaryTimestamp)) {
+        return false;
+      }
+    }
+  } catch (_) {
+    // eslint-disable-next-line no-console
+    console.warn("Error checking chat storage key validity");
+  }
+
+  if (
+    storageValue.buildingSlug !== buildingSlug ||
+    !storageValue.leadId ||
+    !storageValue.timestamp
+  ) {
+    return false;
+  }
+  return !isTimestampExpired(storageValue.timestamp, ttlHours);
+};

package/src/insertDNIIntoWebsite.ts

@@ -0,0 +1,146 @@
+/**
+ * General script to find all phone numbers on a page and replace them with a
+ * DNI phone number.
+ */
+
+import { LogType, sendLoggingEvent } from "./analytics";
+
+export const insertDNIIntoWebsite = (
+  cleanPhoneNumber: string, // format of 1234567890
+  orgSlug: string,
+  buildingSlug?: string
+): number => {
+  const newHrefNumber = `tel:${cleanPhoneNumber}`;
+  const newHrefSmsNumber = `sms:${cleanPhoneNumber}`;
+  const newWhatsAppNumber = `whatsapp://send?phone=${cleanPhoneNumber}}`;
+  const newFacetimeNumber = `facetime:${cleanPhoneNumber}`;
+  const newFacetimeAudioNumber = `facetime-audio:${cleanPhoneNumber}`;
+
+  const phoneNumberPattern = /(?:\(\d{3}\)\s|\d{3}-)\d{3}-\d{4}/g;
+  const hrefNumberPattern = /(tel|sms):(?:\(\d{3}\)\s|\d{3}-)\d{3}-\d{4}/g;
+
+  const whatsappNumberPattern = /whatsapp:\/\/send\?phone=\d+/g;
+  const facetimeNumberPattern = /(facetime|facetime-audio):\d+/g;
+
+  const allHTMLItems = document.body.getElementsByTagName("*");
+
+  let foundPhoneNumber = false;
+
+  // from a phone format of 1234567890 to (123) 456-7890
+  const newPhoneNumber = cleanPhoneNumber.replace(
+    /(\d{3})(\d{3})(\d{4})/,
+    "($1) $2-$3"
+  );
+
+  let shouldLogTextInsertionError = false;
+  let shouldLogHrefInsertionError = false;
+
+  let totalReplacements = 0;
+
+  for (let i = 0; i < allHTMLItems.length; i++) {
+    if (allHTMLItems[i].nodeType !== Node.ELEMENT_NODE) {
+      continue;
+    }
+
+    // Handles the actual display phone number
+    if (
+      allHTMLItems[i].childNodes.length === 1 &&
+      allHTMLItems[i].childNodes[0].nodeType == Node.TEXT_NODE
+    ) {
+      const oldInnerHTML = allHTMLItems[i].innerHTML;
+      const newInnerHTML = oldInnerHTML.replace(
+        phoneNumberPattern,
+        newPhoneNumber
+      );
+      if (oldInnerHTML !== newInnerHTML) {
+        totalReplacements++;
+      }
+      allHTMLItems[i].innerHTML = newInnerHTML;
+
+      foundPhoneNumber = true;
+
+      if (!shouldLogTextInsertionError) {
+        shouldLogTextInsertionError = true;
+      }
+    }
+
+    // Handles the href phone number (so when you click the link, it will call the phone number)
+    if (allHTMLItems[i].hasAttribute("href")) {
+      const href = allHTMLItems[i].getAttribute("href");
+      if (!href) {
+        continue;
+      }
+
+      let newHrefValue = "";
+      let currentPattern = hrefNumberPattern;
+
+      if (href.startsWith("sms:")) {
+        newHrefValue = newHrefSmsNumber;
+      } else if (href.startsWith("whatsapp:")) {
+        newHrefValue = newWhatsAppNumber;
+        currentPattern = whatsappNumberPattern;
+      } else if (href.startsWith("facetime:")) {
+        newHrefValue = newFacetimeNumber;
+        currentPattern = facetimeNumberPattern;
+      } else if (href.startsWith("facetime-audio:")) {
+        newHrefValue = newFacetimeAudioNumber;
+        currentPattern = facetimeNumberPattern;
+      } else {
+        newHrefValue = newHrefNumber;
+      }
+
+      const newHref = href.replace(currentPattern, newHrefValue);
+      allHTMLItems[i].setAttribute("href", newHref);
+
+      if (!shouldLogHrefInsertionError) {
+        shouldLogHrefInsertionError = true;
+      }
+    }
+  }
+
+  // We could make these logs more specific but for now we'll just log the
+  // if there is even a single error to limit the error logs we throw
+
+  if (shouldLogTextInsertionError) {
+    sendLoggingEvent({
+      logTitle: "DNI_WEBSITE_INSERTION",
+      logData: {
+        type: "text-insertion",
+        newPhoneNumber,
+        website: window.location.href,
+      },
+      logType: LogType.info,
+      buildingSlug,
+      orgSlug,
+    });
+  }
+
+  if (shouldLogHrefInsertionError) {
+    sendLoggingEvent({
+      logTitle: "DNI_WEBSITE_INSERTION",
+      logData: {
+        type: "href-insertion",
+        newPhoneNumber,
+        website: window.location.href,
+      },
+      logType: LogType.info,
+      buildingSlug,
+      orgSlug,
+    });
+  }
+
+  if (!foundPhoneNumber) {
+    sendLoggingEvent({
+      logTitle: "DNI_WEBSITE_INSERTION",
+      logData: {
+        type: "no-phone-number-found",
+        website: window.location.href,
+      },
+      logType: LogType.warn,
+      buildingSlug,
+      orgSlug,
+    });
+  }
+
+  return totalReplacements;
+};

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();
+});