@meetelise/chat 1.55.3 → 1.57.0

package/src/webchatNavigation.test.ts

@@ -0,0 +1,99 @@
+import { expect } from "@esm-bundle/chai";
+import { restore, stub } from "sinon/pkg/sinon-esm";
+import {
+  consumeReopenChatAfterNavigation,
+  getWebchatPageContext,
+  markReopenChatAfterNavigation,
+  pageAddress,
+  parseWebchatNavigation,
+  REOPEN_CHAT_AFTER_NAVIGATION_KEY,
+  takeMeThere,
+} from "./webchatNavigation";
+
+declare const afterEach: (callback: () => void) => void;
+declare const it: (name: string, callback: () => void | Promise<void>) => void;
+
+afterEach(() => {
+  restore();
+  sessionStorage.clear();
+});
+
+it("reads a navigation with an http(s) url and a label", () => {
+  expect(
+    parseWebchatNavigation({
+      url: "https://www.macapartments.com/chicago",
+      label: "Chicago",
+    })
+  ).to.deep.equal({
+    url: "https://www.macapartments.com/chicago",
+    label: "Chicago",
+  });
+});
+
+it("drops navigations whose url is unsafe or malformed, or whose label is empty", () => {
+  expect(
+    parseWebchatNavigation({ url: "javascript:alert(1)", label: "Chicago" })
+  ).to.equal(null);
+  expect(
+    parseWebchatNavigation({ url: "data:text/html,hi", label: "Chicago" })
+  ).to.equal(null);
+  expect(parseWebchatNavigation({ url: "http://[::1", label: "x" })).to.equal(
+    null
+  );
+  expect(
+    parseWebchatNavigation({ url: "https://example.com", label: "  " })
+  ).to.equal(null);
+  expect(parseWebchatNavigation({ url: "https://example.com" })).to.equal(null);
+  expect(parseWebchatNavigation(undefined)).to.equal(null);
+  expect(parseWebchatNavigation("https://example.com")).to.equal(null);
+});
+
+it("sends the page url and title, and a declared building id only when it is a real id", () => {
+  document.title = "Chicago Apartments";
+  expect(getWebchatPageContext(445038)).to.deep.equal({
+    pageUrl: window.location.origin + window.location.pathname,
+    pageTitle: "Chicago Apartments",
+    declaredBuildingId: 445038,
+  });
+  for (const missing of [undefined, null, 0, NaN, 1.5, -3]) {
+    expect(getWebchatPageContext(missing)).not.to.have.property(
+      "declaredBuildingId"
+    );
+  }
+});
+
+it("sends the page address without its query string or fragment", () => {
+  expect(
+    pageAddress(
+      "https://www.mac.com/apartments/cornell-court?email=a%40b.com&gclid=x#tour"
+    )
+  ).to.equal("https://www.mac.com/apartments/cornell-court");
+  expect(pageAddress("not a url")).to.equal("");
+});
+
+it("reopens the chat on exactly one page load after a Take me there click", () => {
+  expect(consumeReopenChatAfterNavigation()).to.equal(false);
+  markReopenChatAfterNavigation();
+  expect(sessionStorage.getItem(REOPEN_CHAT_AFTER_NAVIGATION_KEY)).to.equal(
+    "true"
+  );
+  expect(consumeReopenChatAfterNavigation()).to.equal(true);
+  expect(consumeReopenChatAfterNavigation()).to.equal(false);
+});
+
+it("keeps working when sessionStorage is blocked", () => {
+  stub(Storage.prototype, "setItem").throws(new Error("blocked"));
+  stub(Storage.prototype, "getItem").throws(new Error("blocked"));
+  stub(Storage.prototype, "removeItem").throws(new Error("blocked"));
+  expect(() => markReopenChatAfterNavigation()).not.to.throw();
+  expect(consumeReopenChatAfterNavigation()).to.equal(false);
+});
+
+it("Take me there sets the reopen flag and then navigates the same tab", () => {
+  const assign = stub();
+  takeMeThere({ url: "https://example.com/chicago", label: "Chicago" }, (url) =>
+    assign(url, sessionStorage.getItem(REOPEN_CHAT_AFTER_NAVIGATION_KEY))
+  );
+  expect(assign.calledOnceWithExactly("https://example.com/chicago", "true")).to
+    .be.true;
+});

package/src/webchatNavigation.ts

@@ -0,0 +1,108 @@
+/**
+ * Org-level webchat navigation: the page context the widget sends with each
+ * visitor message, the "Take me there" navigation the agent can send back, and
+ * the per-tab flag that keeps the chat open across the page load that follows.
+ *
+ * The backend only acts on these for orgs in the org-level webchat rollout, so
+ * for every other customer the extra message fields are ignored.
+ */
+
+export interface WebchatNavigation {
+  url: string;
+  label: string;
+}
+
+export interface WebchatPageContext {
+  pageUrl: string;
+  pageTitle: string;
+  declaredBuildingId?: number;
+}
+
+/** sessionStorage key, so the flag is per tab and gone when the tab closes. */
+export const REOPEN_CHAT_AFTER_NAVIGATION_KEY =
+  "com.elise.webchat.reopenAfterNavigation";
+
+/**
+ * Read a navigation from a PubNub message's `navigation` field.
+ * Returns null unless it has an http(s) url and a non-empty label, so a
+ * malformed or unsafe (e.g. `javascript:`) url is never rendered.
+ */
+export const parseWebchatNavigation = (
+  raw: unknown
+): WebchatNavigation | null => {
+  if (!raw || typeof raw !== "object") return null;
+  const { url, label } = raw as { url?: unknown; label?: unknown };
+  if (typeof url !== "string" || typeof label !== "string") return null;
+  if (!label.trim()) return null;
+  try {
+    const parsed = new URL(url, window.location.href);
+    if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+      return null;
+    }
+    return { url: parsed.href, label: label.trim() };
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * A page's address without its query string or fragment, which can carry a
+ * visitor's details (an email in a link, ad click ids) and aren't needed to
+ * tell which page they are on.
+ */
+export const pageAddress = (href: string): string => {
+  try {
+    const url = new URL(href);
+    return `${url.origin}${url.pathname}`;
+  } catch {
+    return "";
+  }
+};
+
+/** The visitor's current page, sent with each visitor message. */
+export const getWebchatPageContext = (
+  declaredBuildingId?: number | null
+): WebchatPageContext => {
+  const context: WebchatPageContext = {
+    pageUrl: pageAddress(window.location.href),
+    pageTitle: document.title,
+  };
+  if (
+    typeof declaredBuildingId === "number" &&
+    Number.isInteger(declaredBuildingId) &&
+    declaredBuildingId > 0
+  ) {
+    context.declaredBuildingId = declaredBuildingId;
+  }
+  return context;
+};
+
+export const markReopenChatAfterNavigation = (): void => {
+  try {
+    sessionStorage.setItem(REOPEN_CHAT_AFTER_NAVIGATION_KEY, "true");
+  } catch {
+    // Storage can be blocked (e.g. some privacy modes); the chat then just
+    // opens closed on the next page, as it does today.
+  }
+};
+
+/** Whether the last page load came from a "Take me there" click. Clears the flag. */
+export const consumeReopenChatAfterNavigation = (): boolean => {
+  try {
+    const shouldReopen =
+      sessionStorage.getItem(REOPEN_CHAT_AFTER_NAVIGATION_KEY) === "true";
+    sessionStorage.removeItem(REOPEN_CHAT_AFTER_NAVIGATION_KEY);
+    return shouldReopen;
+  } catch {
+    return false;
+  }
+};
+
+/** Same-tab navigation, after which the chat reopens on the new page. */
+export const takeMeThere = (
+  navigation: WebchatNavigation,
+  assign: (url: string) => void = (url) => window.location.assign(url)
+): void => {
+  markReopenChatAfterNavigation();
+  assign(navigation.url);
+};