@meetelise/chat 1.51.12 → 1.51.14

package/src/WebComponent/me-chat.ts

@@ -424,7 +424,12 @@ export class MEChat extends LitElement {
       this.enabledChatWidgets.sstMobile ||
       this.orgSlug === "radco"
     ) {
-      replaceSSTLinkWithTourWidgetTrigger(this.handleTourClicked);
+      replaceSSTLinkWithTourWidgetTrigger(
+        this.handleTourClicked,
+        this.orgSlug,
+        this.buildingSlug,
+        () => this.isConnected
+      );
       if (featureFlagReplaceScheduleTourCtaWebsite) {
         replacePageRedirectElementWithTourWidgetTrigger(this.handleTourClicked);
       }

package/src/__mocks__/analytics.ts

@@ -0,0 +1,7 @@
+export enum LogType {
+  error = "error",
+  info = "info",
+  warn = "warn",
+}
+
+export const sendLoggingEvent = (): Promise<void> => Promise.resolve();

package/src/insertDNIIntoWebsite.test.ts

@@ -0,0 +1,217 @@
+import { expect } from "@esm-bundle/chai";
+import { insertDNIIntoWebsite } from "./insertDNIIntoWebsite";
+
+const DNI_NUMBER = "3035550123";
+const DNI_DISPLAY = "(303) 555-0123";
+
+const render = (html: string): void => {
+  document.body.innerHTML = html;
+};
+
+const insert = (cleanPhoneNumber: string = DNI_NUMBER): number =>
+  insertDNIIntoWebsite(cleanPhoneNumber, "test-org", "test-building");
+
+const textOf = (selector: string): string | null =>
+  document.querySelector(selector)?.textContent ?? null;
+
+const hrefOf = (selector: string): string | null =>
+  document.querySelector(selector)?.getAttribute("href") ?? null;
+
+describe("insertDNIIntoWebsite", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  describe("display text", () => {
+    it("replaces common US phone formats", () => {
+      const formats = [
+        "(855) 383-2298",
+        "855-383-2298",
+        "855.383.2298",
+        "855 383 2298",
+        "(855)383-2298",
+        "855-3832298",
+      ];
+      render(formats.map((f, i) => `<span id="n${i}">${f}</span>`).join(""));
+
+      insert();
+
+      formats.forEach((format, i) => {
+        expect(textOf(`#n${i}`)).to.equal(DNI_DISPLAY, format);
+      });
+    });
+
+    it("keeps a +1 country code prefix", () => {
+      render(`<span id="n">+1 855-383-2298</span>`);
+
+      insert();
+
+      expect(textOf("#n")).to.equal(`+1 ${DNI_DISPLAY}`);
+    });
+
+    it("replaces a number embedded in surrounding text", () => {
+      render(`<p id="n">Call us at 855-383-2298 today!</p>`);
+
+      insert();
+
+      expect(textOf("#n")).to.equal(`Call us at ${DNI_DISPLAY} today!`);
+    });
+
+    it("accepts 10-digit, 11-digit, and +1 DNI numbers", () => {
+      for (const dni of ["3035550123", "13035550123", "+13035550123"]) {
+        render(`<span id="n">855-383-2298</span>`);
+
+        insert(dni);
+
+        expect(textOf("#n")).to.equal(DNI_DISPLAY, dni);
+      }
+    });
+
+    it("replaces both the text and tel: href of a phone link", () => {
+      render(`<a id="n" href="tel:8553832298">(855) 383-2298</a>`);
+
+      insert();
+
+      expect(textOf("#n")).to.equal(DNI_DISPLAY);
+      expect(hrefOf("#n")).to.equal(`tel:${DNI_NUMBER}`);
+    });
+  });
+
+  describe("NANP validity", () => {
+    it("ignores numbers whose area code starts with 0 or 1", () => {
+      render(
+        `<span id="a">123-456-7890</span><span id="b">(023) 456-7890</span>`
+      );
+
+      insert();
+
+      expect(textOf("#a")).to.equal("123-456-7890");
+      expect(textOf("#b")).to.equal("(023) 456-7890");
+    });
+
+    it("ignores numbers whose exchange starts with 0 or 1", () => {
+      render(
+        `<span id="a">(212) 155-1234</span><span id="b">212-055-1234</span>`
+      );
+
+      insert();
+
+      expect(textOf("#a")).to.equal("(212) 155-1234");
+      expect(textOf("#b")).to.equal("212-055-1234");
+    });
+
+    it("ignores western US longitudes in visible text", () => {
+      render(`<p id="n">Lat/Long: 39.9038078, -104.9932859</p>`);
+
+      insert();
+
+      expect(textOf("#n")).to.equal("Lat/Long: 39.9038078, -104.9932859");
+    });
+
+    it("keeps JSON-LD geo coordinates valid", () => {
+      render(
+        `<script id="n" type="application/ld+json">${JSON.stringify({
+          "@type": "ApartmentComplex",
+          telephone: "855-383-2298",
+          geo: {
+            "@type": "GeoCoordinates",
+            latitude: 39.9038078,
+            longitude: -104.9932859,
+          },
+        })}</script>`
+      );
+
+      insert();
+
+      const schema = JSON.parse(textOf("#n") ?? "");
+      expect(schema.geo.latitude).to.equal(39.9038078);
+      expect(schema.geo.longitude).to.equal(-104.9932859);
+      expect(schema.telephone).to.equal(DNI_DISPLAY);
+    });
+  });
+
+  describe("guardrails", () => {
+    it("does not replace protected numbers", () => {
+      render(`<a id="n" href="tel:8002221222">800-222-1222</a>`);
+
+      insert();
+
+      expect(textOf("#n")).to.equal("800-222-1222");
+      expect(hrefOf("#n")).to.equal("tel:8002221222");
+    });
+
+    it("does not replace numbers next to emergency text", () => {
+      render(
+        `<div><strong>After-hours emergency</strong><span id="en">855-383-2298</span></div>` +
+          `<div><strong>Mantenimiento de emergencia</strong><span id="es">855-383-2298</span></div>`
+      );
+
+      insert();
+
+      expect(textOf("#en")).to.equal("855-383-2298");
+      expect(textOf("#es")).to.equal("855-383-2298");
+    });
+  });
+
+  describe("hrefs", () => {
+    it("rewrites tel: hrefs in any format", () => {
+      const hrefs = [
+        "tel:8553832298",
+        "tel:18553832298",
+        "tel:+18553832298",
+        "tel:855-383-2298",
+        "tel:(855) 383-2298",
+      ];
+      render(
+        hrefs.map((h, i) => `<a id="h${i}" href="${h}">Call</a>`).join("")
+      );
+
+      insert();
+
+      hrefs.forEach((href, i) => {
+        expect(hrefOf(`#h${i}`)).to.equal(`tel:${DNI_NUMBER}`, href);
+      });
+    });
+
+    it("rewrites sms, whatsapp, and facetime hrefs", () => {
+      render(
+        `<a id="sms" href="sms:8553832298">Text</a>` +
+          `<a id="wa" href="whatsapp://send?phone=18553832298">WhatsApp</a>` +
+          `<a id="ft" href="facetime:8553832298">FaceTime</a>` +
+          `<a id="fta" href="facetime-audio:8553832298">FaceTime Audio</a>`
+      );
+
+      insert();
+
+      expect(hrefOf("#sms")).to.equal(`sms:${DNI_NUMBER}`);
+      expect(hrefOf("#wa")).to.equal(`whatsapp://send?phone=${DNI_NUMBER}`);
+      expect(hrefOf("#ft")).to.equal(`facetime:${DNI_NUMBER}`);
+      expect(hrefOf("#fta")).to.equal(`facetime-audio:${DNI_NUMBER}`);
+    });
+
+    it("leaves non-phone hrefs untouched", () => {
+      render(`<a id="n" href="/floor-plans">Floor plans</a>`);
+
+      insert();
+
+      expect(hrefOf("#n")).to.equal("/floor-plans");
+    });
+  });
+
+  describe("return value", () => {
+    it("counts elements whose display text changed", () => {
+      render(
+        `<span>855-383-2298</span><span>(855) 383-2298</span>` +
+          `<a href="tel:8553832298">Call</a><span>123-456-7890</span>`
+      );
+
+      expect(insert()).to.equal(2);
+    });
+
+    it("returns 0 when no phone number is found", () => {
+      render(`<p>No phone numbers here, just 39.9038078, -104.9932859.</p>`);
+
+      expect(insert()).to.equal(0);
+    });
+  });
+});

package/src/insertDNIIntoWebsite.ts

@@ -31,7 +31,7 @@ export const insertDNIIntoWebsite = (
     const newFacetimeAudioNumber = `facetime-audio:${cleanedNumber}`;
 
     const phoneNumberPattern =
-      /(?:\+1[\s.-]?)?(?:\(\d{3}\)[\s.-]?|\d{3}[\s.-])\d{3}[\s.-]?\d{4}/g;
+      /(?:\+1[\s.-]?)?(?:\([2-9]\d{2}\)[\s.-]?|[2-9]\d{2}[\s.-])[2-9]\d{2}[\s.-]?\d{4}/g;
     const hrefNumberPattern =
       /(tel|sms):(?:\+1\s)?(?:(?:\(\d{3}\)\s|\d{3}-)\d{3}-\d{4}|\d{10,11})/g;
 

package/src/insertLeadSourceIntoSchedulerLinks.test.ts

@@ -0,0 +1,216 @@
+import { expect } from "@esm-bundle/chai";
+import {
+  replacePageRedirectElementWithTourWidgetTrigger,
+  replaceSSTLinkWithTourWidgetTrigger,
+  replaceTourTriggerElementWithTourWidgetTrigger,
+} from "./insertLeadSourceIntoSchedulerLinks";
+
+const APP = "https://app.meetelise.com";
+const ORG = "test-org";
+const BUILDING = "test-building";
+
+const render = (hrefs: string[]): HTMLAnchorElement[] => {
+  document.body.innerHTML = hrefs
+    .map((href) => `<a href="${href}">link</a>`)
+    .join("");
+  return Array.from(document.querySelectorAll("a"));
+};
+
+// Returns whether the widget cancelled the click. The document listener runs
+// after the link's own listeners, then cancels navigation so the test page stays.
+const click = (element: Element): boolean => {
+  let defaultPrevented = false;
+  const recordAndCancel = (event: Event) => {
+    defaultPrevented = event.defaultPrevented;
+    event.preventDefault();
+  };
+  document.addEventListener("click", recordAndCancel);
+  element.dispatchEvent(
+    new MouseEvent("click", { bubbles: true, cancelable: true })
+  );
+  document.removeEventListener("click", recordAndCancel);
+  return defaultPrevented;
+};
+
+const clickAll = (links: HTMLAnchorElement[]): Record<string, boolean> =>
+  Object.fromEntries(
+    links.map((link) => [link.getAttribute("href") ?? "", click(link)])
+  );
+
+const allEqual = (hrefs: string[], value: boolean): Record<string, boolean> =>
+  Object.fromEntries(hrefs.map((href) => [href, value]));
+
+describe("replaceSSTLinkWithTourWidgetTrigger", () => {
+  let opened: MouseEvent[];
+  const install = (orgSlug = ORG, buildingSlug = BUILDING): void =>
+    replaceSSTLinkWithTourWidgetTrigger(
+      (event) => opened.push(event),
+      orgSlug,
+      buildingSlug,
+      () => true
+    );
+
+  beforeEach(() => {
+    opened = [];
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("opens the scheduler only for the current building's tour link on a portfolio page", () => {
+    const [ownTour, otherTour, contactUs] = render([
+      `${APP}/${ORG}/${BUILDING}/tour`,
+      `${APP}/${ORG}/other-building/tour`,
+      `${APP}/${ORG}/${BUILDING}/contactUs`,
+    ]);
+
+    install();
+
+    expect({
+      ownTour: click(ownTour),
+      otherTour: click(otherTour),
+      contactUs: click(contactUs),
+    }).to.deep.equal({ ownTour: true, otherTour: false, contactUs: false });
+    expect(opened).to.have.length(1);
+  });
+
+  it("matches the current building's tour link with query strings, fragments, trailing slashes and any casing", () => {
+    const hrefs = [
+      `${APP}/${ORG}/${BUILDING}/tour/`,
+      `${APP}/${ORG}/${BUILDING}/tour?utm_source=website`,
+      `${APP}/${ORG}/${BUILDING}/tour/?hideScrollBars=true`,
+      `${APP}/${ORG}/${BUILDING}/tour?stateId=abc123`,
+      `${APP}/${ORG}/${BUILDING}/tour#schedule`,
+      `${APP}/${ORG}//${BUILDING}/tour`,
+      `${APP}/Test-Org/Test-Building/Tour`,
+    ];
+    const links = render(hrefs);
+
+    install();
+
+    expect(clickAll(links)).to.deep.equal(allEqual(hrefs, true));
+    expect(opened).to.have.length(hrefs.length);
+  });
+
+  it("matches when the widget was started with differently cased slugs", () => {
+    const [link] = render([`${APP}/${ORG}/${BUILDING}/tour`]);
+
+    install("Test-Org", "TEST-BUILDING");
+
+    expect(click(link)).to.equal(true);
+  });
+
+  it("keeps default navigation for every other app.meetelise.com link", () => {
+    const hrefs = [
+      `${APP}/other-org/${BUILDING}/tour`,
+      `${APP}/${ORG}/${BUILDING}-2/tour`,
+      `${APP}/${ORG}/${BUILDING}/tour-2`,
+      `${APP}/${ORG}/${BUILDING}/tour/extra`,
+      `${APP}/${ORG}/${BUILDING}/contactUs?utm_source=website`,
+      `${APP}/${ORG}/${BUILDING}`,
+      `${APP}/${ORG}/tour`,
+      `${APP}/${BUILDING}/tour`,
+      `${APP}/settings/widgets`,
+      `${APP}/`,
+    ];
+    const links = render(hrefs);
+
+    install();
+
+    expect(clickAll(links)).to.deep.equal(allEqual(hrefs, false));
+    expect(opened).to.have.length(0);
+  });
+
+  it("never intercepts links outside https://app.meetelise.com", () => {
+    const hrefs = [
+      `/${ORG}/${BUILDING}/tour`,
+      `http://app.meetelise.com/${ORG}/${BUILDING}/tour`,
+      `https://www.example.com/${ORG}/${BUILDING}/tour`,
+    ];
+    const links = render(hrefs);
+
+    install();
+
+    expect(clickAll(links)).to.deep.equal(allEqual(hrefs, false));
+  });
+
+  it("lets a removed widget's tour link navigate after the widget switches buildings", () => {
+    const [firstTour, secondTour] = render([
+      `${APP}/${ORG}/${BUILDING}/tour`,
+      `${APP}/${ORG}/other-building/tour`,
+    ]);
+    const openedByFirst: MouseEvent[] = [];
+    const openedBySecond: MouseEvent[] = [];
+    let firstMounted = true;
+    replaceSSTLinkWithTourWidgetTrigger(
+      (event) => openedByFirst.push(event),
+      ORG,
+      BUILDING,
+      () => firstMounted
+    );
+
+    // Studio removes the first widget and starts one for another building.
+    firstMounted = false;
+    replaceSSTLinkWithTourWidgetTrigger(
+      (event) => openedBySecond.push(event),
+      ORG,
+      "other-building",
+      () => true
+    );
+
+    expect({
+      firstTour: click(firstTour),
+      secondTour: click(secondTour),
+    }).to.deep.equal({ firstTour: false, secondTour: true });
+    expect(openedByFirst).to.have.length(0);
+    expect(openedBySecond).to.have.length(1);
+  });
+
+  it("intercepts nothing when the building slug is missing", () => {
+    const hrefs = [`${APP}/${ORG}/${BUILDING}/tour`, `${APP}/${ORG}//tour`];
+    const links = render(hrefs);
+
+    install(ORG, "");
+
+    expect(clickAll(links)).to.deep.equal(allEqual(hrefs, false));
+    expect(opened).to.have.length(0);
+  });
+});
+
+describe("site schedule-a-tour hooks", () => {
+  let opened: MouseEvent[];
+
+  beforeEach(() => {
+    opened = [];
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("opens the scheduler from links ending in schedule-a-tour", () => {
+    const [link] = render(["/apartments/oh/westerville/schedule-a-tour"]);
+
+    replacePageRedirectElementWithTourWidgetTrigger((event) =>
+      opened.push(event)
+    );
+
+    expect(click(link)).to.equal(true);
+    expect(opened).to.have.length(1);
+  });
+
+  it("replaces #leaseleads-tour-open links with a scheduler trigger", () => {
+    render(["#leaseleads-tour-open"]);
+
+    replaceTourTriggerElementWithTourWidgetTrigger((event) =>
+      opened.push(event)
+    );
+
+    const trigger = document.querySelector("a");
+    expect(trigger?.hasAttribute("href")).to.equal(false);
+    expect(trigger?.textContent).to.equal("link");
+    expect(click(trigger as HTMLAnchorElement)).to.equal(true);
+    expect(opened).to.have.length(1);
+  });
+});

package/src/insertLeadSourceIntoSchedulerLinks.ts

@@ -18,14 +18,43 @@ export const insertLeadSourceIntoSchedulerLinks = (
   });
 };
 
+// Mirrors the web-app's /:organization/:building/tour route, which ignores
+// empty path segments. Case-insensitive so slug casing differences still match.
+const isBuildingTourLink = (
+  href: string,
+  orgSlug: string,
+  buildingSlug: string
+): boolean => {
+  const [org, building, page, ...rest] = new URL(href).pathname
+    .split("/")
+    .filter(Boolean)
+    .map((segment) => segment.toLowerCase());
+  return (
+    rest.length === 0 &&
+    page === "tour" &&
+    org === orgSlug.toLowerCase() &&
+    building === buildingSlug.toLowerCase()
+  );
+};
+
 export const replaceSSTLinkWithTourWidgetTrigger = (
-  handleTourClicked: (e: MouseEvent) => void
+  handleTourClicked: (e: MouseEvent) => void,
+  orgSlug: string,
+  buildingSlug: string,
+  isWidgetMounted: () => boolean
 ): void => {
   const sstRedirectElements = document.querySelectorAll("a");
   sstRedirectElements.forEach(function (element) {
     const href = element.getAttribute("href");
-    if (href && href.startsWith("https://app.meetelise.com/")) {
+    if (
+      href &&
+      href.startsWith("https://app.meetelise.com/") &&
+      isBuildingTourLink(href, orgSlug, buildingSlug)
+    ) {
       element.addEventListener("click", (event) => {
+        // Studio can swap the widget for another building's. A removed
+        // widget's listener must let the link navigate, not swallow the click.
+        if (!isWidgetMounted()) return;
         event.preventDefault(); // Prevents the default href redirect
         handleTourClicked(event as MouseEvent);
       });