@meetelise/chat 1.55.3 → 1.56.0

package/src/orgLevelNavigation.test.ts

@@ -0,0 +1,625 @@
+import { expect } from "@esm-bundle/chai";
+import { restore, stub, useFakeXMLHttpRequest } from "sinon/pkg/sinon-esm";
+import "../public/dist/index";
+import type MyPubnub from "./MyPubnub";
+import type { SimpleChatMessage } from "./MyPubnub";
+import type { PubnubChat } from "./WebComponent/pubnub-chat";
+import type { PubnubNavigation } from "./WebComponent/pubnub-navigation";
+import type { BuildingWebchatView } from "./fetchBuildingWebchatView";
+
+declare const afterEach: (callback: () => void) => void;
+declare const beforeEach: (callback: () => void) => void;
+declare const it: (name: string, callback: () => void | Promise<void>) => void;
+
+// Org-level webchat navigation, end to end through the built widget. Every
+// network request is answered by a fake: nothing reaches EliseAI or PubNub.
+
+type FakeRequest = XMLHttpRequest & {
+  method: string;
+  url: string;
+  requestBody?: string;
+  respond: (
+    status: number,
+    headers?: Record<string, string>,
+    body?: string
+  ) => void;
+  onSend?: () => void;
+};
+
+type MeChatInternals = HTMLElement & {
+  updateComplete: Promise<boolean>;
+  isLoading: boolean;
+  displayPubnubChat: boolean;
+  myPubnub: MyPubnub | null;
+  buildingSlug: string;
+  buildingWebchatView: BuildingWebchatView | null;
+  enabledChatWidgets: Record<string, boolean>;
+  phoneNumberForSource: { number: string } | null;
+};
+
+const REOPEN_KEY = "com.elise.webchat.reopenAfterNavigation";
+
+const view = (overrides: Partial<BuildingWebchatView>) => ({
+  id: 445038,
+  orgId: 53,
+  name: "Test Building",
+  userId: 7,
+  active: 1,
+  userFirstName: "Elise",
+  welcomeMessage: "Welcome, I'm Elise!",
+  launchedDateTime: "2024-01-01T00:00:00Z",
+  webchatScopeConfigured: true,
+  displayStyle: "pills",
+  shouldShowChatDesktop: true,
+  shouldShowChatMobile: true,
+  phoneNumber: null,
+  layoutOptions: [],
+  tourTypeOptions: [],
+  ...overrides,
+});
+
+/** Every contact option on, as a building's webchat config can set them. */
+const allContactOptions = {
+  shouldShowPhoneDesktop: true,
+  shouldShowPhoneMobile: true,
+  shouldShowEmailDesktop: true,
+  shouldShowEmailMobile: true,
+  shouldShowTextDesktop: true,
+  shouldShowTextMobile: true,
+  textWithUsPhoneNumber: "(555) 555-0100",
+};
+
+const GENERAL_BUILDING = "test-org-general";
+
+interface FakeBackendOptions {
+  /** The org-level /webchat/init answer: today's 400, or the rollout's 200. */
+  orgInit?: "400" | { building_slug?: string };
+  /** Overrides for test-building's config. */
+  building?: Partial<BuildingWebchatView>;
+  /** The triage general building's config, or a status to fail with. */
+  generalBuilding?: Partial<BuildingWebchatView> | number;
+}
+
+const fakeBackend = (options: FakeBackendOptions = {}): FakeRequest[] => {
+  const requests: FakeRequest[] = [];
+  const fakeXhr = useFakeXMLHttpRequest();
+  fakeXhr.onCreate = (request: FakeRequest) => {
+    requests.push(request);
+    request.onSend = () =>
+      setTimeout(() => {
+        const json = (status: number, body: unknown) =>
+          request.respond(
+            status,
+            { "Content-Type": "application/json" },
+            JSON.stringify(body)
+          );
+        const { url } = request;
+        if (url.includes("/organization/test-org/building/test-building/v2")) {
+          return json(200, view(options.building ?? {}));
+        }
+        if (
+          url.includes(`/organization/test-org/building/${GENERAL_BUILDING}/v2`)
+        ) {
+          const general = options.generalBuilding ?? {};
+          if (typeof general === "number") return json(general, {});
+          return json(
+            200,
+            view({ id: 900, userId: 9, name: "Test Org General", ...general })
+          );
+        }
+        if (url.includes("/organization/test-org/webchat/v2")) {
+          return json(200, view({ id: 0, userId: null, name: "Test Org" }));
+        }
+        if (url.endsWith("/webchat/init")) {
+          const body = JSON.parse(request.requestBody ?? "{}");
+          const session = {
+            session_token: "session",
+            lead_id: "lead_test",
+            channel: "webchat_lead_test",
+            expires_in_seconds: 3600,
+          };
+          if (body.central_convo) {
+            const orgInit = options.orgInit ?? "400";
+            // An org outside the org-level webchat rollout.
+            if (orgInit === "400") return json(400, { detail: "Invalid" });
+            // An org in it: the session lives in its triage general building.
+            return json(200, { ...session, ...orgInit });
+          }
+          return json(200, session);
+        }
+        if (url.includes("chat-ui-feature-flag")) return json(200, false);
+        return json(200, null);
+      });
+  };
+  return requests;
+};
+
+const startWidget = async (
+  attributes: Record<string, string>
+): Promise<MeChatInternals> => {
+  const meChat = document.createElement("me-chat") as MeChatInternals;
+  Object.entries(attributes).forEach(([name, value]) =>
+    meChat.setAttribute(name, value)
+  );
+  document.body.appendChild(meChat);
+  for (let i = 0; i < 200 && meChat.isLoading; i++) {
+    await new Promise((resolve) => setTimeout(resolve, 10));
+  }
+  expect(meChat.isLoading, "widget finished loading").to.equal(false);
+  await meChat.updateComplete;
+  return meChat;
+};
+
+const perBuilding = { orgslug: "test-org", buildingslug: "test-building" };
+const orgMode = { orgslug: "test-org", centralconvo: "" };
+
+const initBodies = (requests: FakeRequest[]) =>
+  requests
+    .filter((r) => r.url.endsWith("/webchat/init"))
+    .map((r) => JSON.parse(r.requestBody ?? "{}"));
+
+beforeEach(() => {
+  localStorage.clear();
+  sessionStorage.clear();
+  // MEChat.start() sets this up for the launcher before adding the widget.
+  (window as unknown as { eliseAi: unknown }).eliseAi = {};
+  // Analytics and logging use fetch; keep them off the network too.
+  stub(window, "fetch").resolves(new Response("{}"));
+});
+
+afterEach(() => {
+  document
+    .querySelectorAll("me-chat, pubnub-chat")
+    .forEach((el) => el.remove());
+  restore();
+  localStorage.clear();
+  sessionStorage.clear();
+});
+
+// --- Keeping the chat open across a Take me there click ---
+
+it("keeps a per-building chat closed on load, as today, when there was no Take me there click", async () => {
+  const requests = fakeBackend();
+  const meChat = await startWidget(perBuilding);
+
+  expect(meChat.displayPubnubChat).to.equal(false);
+  expect(initBodies(requests)).to.deep.equal([
+    { building_slug: "test-building", org_slug: "test-org" },
+  ]);
+});
+
+it("reopens the chat on the page load after a Take me there click, and only that one", async () => {
+  fakeBackend();
+  sessionStorage.setItem(REOPEN_KEY, "true");
+
+  const meChat = await startWidget(perBuilding);
+
+  expect(meChat.displayPubnubChat).to.equal(true);
+  expect(sessionStorage.getItem(REOPEN_KEY)).to.equal(null);
+  const chat = meChat.shadowRoot?.querySelector("pubnub-chat") as PubnubChat;
+  await chat.updateComplete;
+  expect(chat.shadowRoot?.querySelector("#pubnub-chat-container")).to.exist;
+  // Closing state is untouched: the chat isn't marked open for later loads.
+  expect(localStorage.getItem("isChatOpen")).to.equal(null);
+});
+
+// --- Org mode (centralConvo with no building) ---
+
+const BUILDING_ONLY_ENDPOINTS = [
+  /\/webchat\/\/|\/webchat\/undefined\//, // any /webchat/{buildingSlug}/... with no slug
+  /\/lead-sources/,
+  /\/phone-number/,
+  /\/tour\/availabilities/,
+  /\/cdn-version/,
+  /\/rentgrata/,
+  /\/organization\/test-org\/building\//,
+];
+
+it("loads org mode without calling building-only endpoints or crashing", async () => {
+  const requests = fakeBackend();
+  const errors: unknown[] = [];
+  const onRejection = (event: PromiseRejectionEvent) =>
+    errors.push(event.reason);
+  window.addEventListener("unhandledrejection", onRejection);
+
+  const meChat = await startWidget(orgMode);
+  await new Promise((resolve) => setTimeout(resolve, 50));
+  window.removeEventListener("unhandledrejection", onRejection);
+
+  const urls = requests.map((r) => r.url);
+  for (const pattern of BUILDING_ONLY_ENDPOINTS) {
+    expect(
+      urls.filter((url) => pattern.test(url)),
+      String(pattern)
+    ).to.deep.equal([]);
+  }
+  expect(errors).to.deep.equal([]);
+  // The session request says it's org-level; the backend decides the rest.
+  expect(initBodies(requests)).to.deep.equal([
+    { building_slug: "", org_slug: "test-org", central_convo: true },
+  ]);
+  expect(meChat.myPubnub?.centralConvo).to.equal(true);
+  expect(meChat.myPubnub?.declaredBuildingId).to.equal(null);
+});
+
+it("draws the org-mode chat window instead of an empty one", async () => {
+  fakeBackend();
+  sessionStorage.setItem(REOPEN_KEY, "true");
+  const meChat = await startWidget(orgMode);
+
+  const chat = meChat.shadowRoot?.querySelector("pubnub-chat") as PubnubChat;
+  await chat.updateComplete;
+  expect(chat.shadowRoot?.querySelector("#header-text")?.textContent).to.equal(
+    "Test Org"
+  );
+});
+
+it("sends the declared building's id in org mode when the snippet names a building", async () => {
+  const requests = fakeBackend();
+  const meChat = await startWidget({
+    ...orgMode,
+    declaredbuildingslug: "test-building",
+  });
+  for (let i = 0; i < 50 && !meChat.myPubnub?.declaredBuildingId; i++) {
+    await new Promise((resolve) => setTimeout(resolve, 10));
+  }
+
+  expect(meChat.myPubnub?.declaredBuildingId).to.equal(445038);
+  // Config and the conversation stay org-anchored.
+  expect(initBodies(requests)[0]).to.include({
+    building_slug: "",
+    central_convo: true,
+  });
+});
+
+// --- Messages: page context out, navigation in ---
+
+const myPubnubFor = async (
+  attributes: Record<string, string>,
+  requests = fakeBackend()
+): Promise<MyPubnub> => {
+  const meChat = await startWidget(attributes);
+  if (!meChat.myPubnub) throw new Error("Expected a MyPubnub instance");
+  requests.length = 0;
+  return meChat.myPubnub;
+};
+
+const publishedMessage = async (
+  myPubnub: MyPubnub
+): Promise<Record<string, unknown>> => {
+  const publish = stub().resolves({});
+  myPubnub.pubnub = {
+    publish,
+    unsubscribe: stub(),
+    removeListener: stub(),
+  } as unknown as MyPubnub["pubnub"];
+  myPubnub.channel = "webchat_lead_test";
+  await myPubnub.sendMessage("Do you have 2 bedrooms?");
+  expect(publish.calledOnce).to.equal(true);
+  return publish.firstCall.args[0].message;
+};
+
+it("sends the visitor's page and the snippet's building id with each message", async () => {
+  document.title = "Chicago Apartments";
+  const myPubnub = await myPubnubFor(perBuilding);
+
+  const message = await publishedMessage(myPubnub);
+
+  expect(message).to.include({
+    text: "Do you have 2 bedrooms?",
+    customType: "lead_message",
+    buildingId: 445038,
+    buildingSlug: "test-building",
+    pageUrl: window.location.origin + window.location.pathname,
+    pageTitle: "Chicago Apartments",
+    declaredBuildingId: 445038,
+  });
+});
+
+it("omits declaredBuildingId in org mode with no building", async () => {
+  const myPubnub = await myPubnubFor(orgMode);
+  const message = await publishedMessage(myPubnub);
+  expect(message).to.have.property(
+    "pageUrl",
+    window.location.origin + window.location.pathname
+  );
+  expect(message).not.to.have.property("declaredBuildingId");
+});
+
+it("never falls back to the v1 token endpoint in org mode", async () => {
+  const requests = fakeBackend();
+  const myPubnub = await myPubnubFor(orgMode, requests);
+  expect(await myPubnub.fetchToken("lead_test", "webchat_lead_test")).to.equal(
+    null
+  );
+  expect(requests).to.deep.equal([]);
+});
+
+const raw = (timetoken: number, message: Record<string, unknown>) => ({
+  channel: "webchat_lead_test",
+  message,
+  publisher: "eliseai",
+  subscription: "webchat_lead_test",
+  timetoken,
+});
+
+const translate = (
+  myPubnub: MyPubnub,
+  messages: unknown[]
+): SimpleChatMessage[] =>
+  myPubnub.translatePubnubMessagesIntoSimpleChatMessages(
+    messages as Parameters<
+      MyPubnub["translatePubnubMessagesIntoSimpleChatMessages"]
+    >[0]
+  );
+
+const replyWithNavigation = [
+  raw(1, {
+    text: "Here is Chicago.",
+    customType: "ai_message",
+    messageType: "text",
+    stream_id: "s1",
+    order: 0,
+  }),
+  raw(2, {
+    text: "",
+    customType: "ai_message",
+    messageType: "text",
+    stream_id: "s1",
+    order: 1,
+    is_done: true,
+  }),
+  raw(3, {
+    sender: "building_1",
+    customType: "ai_message",
+    messageType: "navigation",
+    navigation: { url: "https://example.com/chicago", label: "Chicago" },
+  }),
+];
+
+it("turns a navigation message into a button after the reply's text", async () => {
+  const myPubnub = await myPubnubFor(perBuilding);
+  const messages = translate(myPubnub, replyWithNavigation);
+
+  expect(messages.map((m) => m.type)).to.deep.equal(["text", "navigation"]);
+  expect(messages[1]).to.deep.include({
+    timestamp: 3,
+    isLeadMessage: false,
+    navigation: { url: "https://example.com/chicago", label: "Chicago" },
+  });
+});
+
+it("drops unusable navigations and text-less unknown messages, and keeps unknown ones with text", async () => {
+  const myPubnub = await myPubnubFor(perBuilding);
+  const messages = translate(myPubnub, [
+    raw(1, {
+      customType: "ai_message",
+      messageType: "navigation",
+      navigation: { url: "javascript:alert(1)", label: "Chicago" },
+    }),
+    raw(2, { customType: "ai_message", messageType: "navigation" }),
+    raw(3, { customType: "ai_message", messageType: "carousel", cards: [] }),
+    raw(4, { text: "Hello", customType: "ai_message", messageType: "future" }),
+  ]);
+
+  expect(messages).to.have.length(1);
+  expect(messages[0]).to.deep.include({ message: "Hello", type: "text" });
+});
+
+// --- Rendering ---
+
+const renderChat = async (
+  messages: SimpleChatMessage[]
+): Promise<PubnubChat> => {
+  const chat = document.createElement("pubnub-chat") as PubnubChat;
+  chat.buildingSlug = "test-building";
+  chat.orgSlug = "test-org";
+  chat.building = view({}) as unknown as BuildingWebchatView;
+  document.body.appendChild(chat);
+  await chat.updateComplete;
+  chat.messages = messages;
+  await chat.updateComplete;
+  return chat;
+};
+
+it("renders Take me to {label}, which marks the chat to reopen and navigates the same tab", async () => {
+  const myPubnub = await myPubnubFor(perBuilding);
+  // As restored from history: the same translation as live messages.
+  const chat = await renderChat(translate(myPubnub, replyWithNavigation));
+
+  const navigation = chat.shadowRoot?.querySelector(
+    "pubnub-navigation"
+  ) as PubnubNavigation;
+  expect(navigation).to.exist;
+  await navigation.updateComplete;
+  const navigate = stub();
+  navigation.navigate = navigate;
+  await navigation.updateComplete;
+
+  const button = navigation.shadowRoot?.querySelector("button");
+  expect(button?.textContent?.trim()).to.equal("Take me to Chicago");
+  expect(
+    navigation.closest("li")?.getAttribute("aria-label") ??
+      chat.shadowRoot
+        ?.querySelector("li:has(pubnub-navigation)")
+        ?.getAttribute("aria-label")
+  ).to.equal("Elise: Take me to Chicago");
+  expect(chat.shadowRoot?.querySelector("pubnub-message")).to.exist;
+
+  button?.click();
+  expect(
+    navigate.calledOnceWithExactly("https://example.com/chicago")
+  ).to.equal(true);
+  expect(sessionStorage.getItem(REOPEN_KEY)).to.equal("true");
+});
+
+// --- Org mode: running as the org's triage general building ---
+
+const inRollout = { orgInit: { building_slug: GENERAL_BUILDING } };
+
+it("adopts the building /webchat/init returns and runs as it, keeping the org-level conversation", async () => {
+  const requests = fakeBackend(inRollout);
+  const meChat = await startWidget(orgMode);
+
+  expect(meChat.buildingSlug).to.equal(GENERAL_BUILDING);
+  expect(meChat.buildingWebchatView?.id).to.equal(900);
+  // The session is asked for at the org, once.
+  expect(initBodies(requests)).to.deep.equal([
+    { building_slug: "", org_slug: "test-org", central_convo: true },
+  ]);
+  // Per-building endpoints now use the adopted building.
+  const urls = requests.map((r) => r.url);
+  expect(urls.some((url) => url.includes(`/${GENERAL_BUILDING}/lead-sources`)))
+    .to.be.true;
+  // The conversation is saved org-level, under the lead /webchat/init gave.
+  expect(
+    JSON.parse(localStorage.getItem("com.elise.webchat.slug=") ?? "{}")
+  ).to.include({ leadId: "lead_test" });
+  expect(localStorage.getItem(`com.elise.webchat.slug=${GENERAL_BUILDING}`)).to
+    .be.null;
+
+  // Messages carry the adopted building, as a per-building widget's do.
+  const myPubnub = meChat.myPubnub as MyPubnub;
+  const message = await publishedMessage(myPubnub);
+  expect(message).to.include({
+    buildingId: 900,
+    buildingSlug: GENERAL_BUILDING,
+    userId: 9,
+    pageUrl: window.location.origin + window.location.pathname,
+  });
+  expect(myPubnub.centralConvo).to.equal(true);
+  // The first message saves the conversation org-level too.
+  expect(myPubnub.chatStorageSlug).to.equal("");
+});
+
+it("stays in org mode when the adopted building's config can't be loaded", async () => {
+  fakeBackend({ ...inRollout, generalBuilding: 404 });
+  const meChat = await startWidget(orgMode);
+
+  expect(meChat.buildingSlug).to.equal("");
+  expect(meChat.buildingWebchatView?.name).to.equal("Test Org");
+});
+
+it("stays in org mode when /webchat/init returns no building", async () => {
+  fakeBackend({ orgInit: {} });
+  const meChat = await startWidget(orgMode);
+
+  expect(meChat.buildingSlug).to.equal("");
+  expect(meChat.myPubnub?.centralConvo).to.equal(true);
+});
+
+const contactOptions = (meChat: MeChatInternals) => {
+  const w = meChat.enabledChatWidgets;
+  return {
+    call: [w.callDesktop, w.callMobile],
+    email: [w.emailDesktop, w.emailMobile],
+    text: [w.textDesktop, w.textMobile],
+  };
+};
+
+it("hides Email and Text Us in org mode, and offers Call Us with the adopted building's number", async () => {
+  fakeBackend({
+    ...inRollout,
+    generalBuilding: { ...allContactOptions, phoneNumber: "5555550123" },
+  });
+  const meChat = await startWidget(orgMode);
+
+  expect(contactOptions(meChat)).to.deep.equal({
+    call: [true, true],
+    email: [false, false],
+    text: [false, false],
+  });
+  expect(meChat.phoneNumberForSource?.number).to.equal("(555) 555-0123");
+  const launcher = meChat.shadowRoot?.querySelector("meetelise-launcher");
+  expect(launcher?.getAttribute("phoneNumber")).to.equal("(555) 555-0123");
+});
+
+it("hides Call Us in org mode when the adopted building has no number", async () => {
+  fakeBackend({
+    ...inRollout,
+    generalBuilding: { ...allContactOptions, phoneNumber: null },
+  });
+  const meChat = await startWidget(orgMode);
+
+  expect(contactOptions(meChat)).to.deep.equal({
+    call: [false, false],
+    email: [false, false],
+    text: [false, false],
+  });
+});
+
+it("hides Email and Text Us in org mode before any building is adopted too", async () => {
+  fakeBackend();
+  const meChat = await startWidget(orgMode);
+
+  expect(contactOptions(meChat).email).to.deep.equal([false, false]);
+  expect(contactOptions(meChat).text).to.deep.equal([false, false]);
+});
+
+it("leaves a per-building widget's Call, Email and Text Us as its config sets them", async () => {
+  fakeBackend({
+    building: { ...allContactOptions, phoneNumber: "5555550199" },
+  });
+  const meChat = await startWidget(perBuilding);
+
+  expect(meChat.buildingSlug).to.equal("test-building");
+  expect(contactOptions(meChat)).to.deep.equal({
+    call: [true, true],
+    email: [true, true],
+    text: [true, true],
+  });
+  expect(meChat.phoneNumberForSource?.number).to.equal("(555) 555-0199");
+});
+
+/** Tour links on the host page before the widget starts, which is when it rewrites them. */
+const addTourLinks = (buildingSlug: string): HTMLAnchorElement[] =>
+  [
+    `https://app.meetelise.com/test-org/${buildingSlug}/tour`,
+    "/apartments/chicago/schedule-a-tour",
+  ].map((href) => {
+    const link = document.createElement("a");
+    link.setAttribute("href", href);
+    document.body.appendChild(link);
+    return link;
+  });
+
+/** Whether the widget takes over a click on the link instead of letting it navigate. */
+const widgetTakesOverClick = (link: HTMLAnchorElement): boolean => {
+  let seenByPage: boolean | null = null;
+  // Runs after the link's own listeners; then stops the test page navigating.
+  const record = (event: Event) => {
+    seenByPage = event.defaultPrevented;
+    event.preventDefault();
+  };
+  window.addEventListener("click", record);
+  const notCancelled = link.dispatchEvent(
+    new MouseEvent("click", { bubbles: true, cancelable: true })
+  );
+  window.removeEventListener("click", record);
+  // The widget's scheduler stops the click propagating, so the page never sees it.
+  return seenByPage ?? !notCancelled;
+};
+
+const tourScheduler = { shouldShowSstDesktop: true, shouldShowSstMobile: true };
+
+it("leaves the org site's tour links alone in org mode", async () => {
+  fakeBackend({ ...inRollout, generalBuilding: tourScheduler });
+  const links = addTourLinks(GENERAL_BUILDING);
+  const meChat = await startWidget(orgMode);
+
+  expect(meChat.buildingSlug).to.equal(GENERAL_BUILDING);
+  expect(meChat.enabledChatWidgets.sstDesktop).to.equal(true);
+  links.forEach((link) => {
+    expect(widgetTakesOverClick(link), link.href).to.equal(false);
+    link.remove();
+  });
+});
+
+it("still opens a per-building widget's tour scheduler from its tour link", async () => {
+  fakeBackend({ building: tourScheduler });
+  const [buildingTourLink, ...others] = addTourLinks("test-building");
+  await startWidget(perBuilding);
+
+  expect(widgetTakesOverClick(buildingTourLink)).to.equal(true);
+  [buildingTourLink, ...others].forEach((link) => link.remove());
+});