@meetelise/chat 1.51.0 → 1.51.2

package/src/internationalPhoneInput.test.ts

@@ -0,0 +1,253 @@
+import { expect } from "@esm-bundle/chai";
+import "../public/dist/index";
+import type {
+  InternationalPhoneChangeDetail,
+  InternationalPhoneInput,
+} from "./WebComponent/actions/international-phone-input";
+import type { EmailUsWindow } from "./WebComponent/actions/email-us-window";
+import type { CallUsWindow } from "./WebComponent/actions/call-us-window";
+
+describe("international-phone-input", () => {
+  let phoneInput: InternationalPhoneInput;
+
+  beforeEach(async () => {
+    if (!customElements.get("international-phone-input")) {
+      throw new Error("Expected international-phone-input to be registered");
+    }
+    phoneInput = document.createElement(
+      "international-phone-input"
+    ) as InternationalPhoneInput;
+    phoneInput.country = "US";
+    document.body.appendChild(phoneInput);
+    await phoneInput.updateComplete;
+  });
+
+  afterEach(() => {
+    phoneInput.remove();
+  });
+
+  it("infers the country and E.164 value when an international number is pasted", async () => {
+    let detail: InternationalPhoneChangeDetail | null = null;
+    phoneInput.addEventListener("phone-change", (event) => {
+      detail = (event as CustomEvent<InternationalPhoneChangeDetail>).detail;
+    });
+    const input = phoneInput.shadowRoot?.querySelector("input");
+    if (!input) throw new Error("Expected phone input");
+
+    input.value = "+44 7400 123456";
+    input.setSelectionRange(input.value.length, input.value.length);
+    input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    await phoneInput.updateComplete;
+
+    expect(phoneInput.e164).to.equal("+447400123456");
+    expect(phoneInput.isValid).to.equal(true);
+    expect(
+      phoneInput.shadowRoot?.querySelector<HTMLSelectElement>("select")?.value
+    ).to.equal("GB");
+    expect(detail).to.deep.include({
+      country: "GB",
+      e164: "+447400123456",
+      isValid: true,
+    });
+  });
+
+  it("uses the building country for national input", async () => {
+    phoneInput.country = "GB";
+    await phoneInput.updateComplete;
+    expect(
+      phoneInput.shadowRoot?.querySelector<HTMLSelectElement>("select")?.value
+    ).to.equal("GB");
+    const input = phoneInput.shadowRoot?.querySelector("input");
+    if (!input) throw new Error("Expected phone input");
+
+    input.value = "07400123456";
+    input.setSelectionRange(input.value.length, input.value.length);
+    input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    await phoneInput.updateComplete;
+
+    expect(phoneInput.value).to.equal("07400 123456");
+    expect(phoneInput.e164).to.equal("+447400123456");
+  });
+
+  it("displays a non-US building country on the first render", async () => {
+    phoneInput.remove();
+    phoneInput = document.createElement(
+      "international-phone-input"
+    ) as InternationalPhoneInput;
+    phoneInput.country = "GB";
+    document.body.appendChild(phoneInput);
+    await phoneInput.updateComplete;
+
+    expect(
+      phoneInput.shadowRoot?.querySelector<HTMLSelectElement>("select")?.value
+    ).to.equal("GB");
+  });
+
+  it("retains existing US behavior by default", async () => {
+    const input = phoneInput.shadowRoot?.querySelector("input");
+    if (!input) throw new Error("Expected phone input");
+
+    input.value = "2025550123";
+    input.setSelectionRange(input.value.length, input.value.length);
+    input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    await phoneInput.updateComplete;
+
+    expect(phoneInput.value).to.equal("(202) 555-0123");
+    expect(phoneInput.e164).to.equal("+12025550123");
+  });
+
+  it("uses a compact selected-country label while keeping full menu labels", async () => {
+    const select = phoneInput.shadowRoot?.querySelector("select");
+    if (!select) throw new Error("Expected country select");
+    select.value = "MX";
+    select.dispatchEvent(new Event("change", { bubbles: true }));
+    await phoneInput.updateComplete;
+
+    expect(
+      phoneInput.shadowRoot?.querySelector(".country-select-label")?.textContent
+    ).to.contain("🇲🇽 +52");
+    expect(select.selectedOptions[0].textContent).to.contain("🇲🇽 +52 – Mexico");
+  });
+
+  it("deletes the preceding digit when backspacing over formatting", async () => {
+    const input = phoneInput.shadowRoot?.querySelector("input");
+    if (!input) throw new Error("Expected phone input");
+    input.value = "2025550123";
+    input.setSelectionRange(input.value.length, input.value.length);
+    input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    await phoneInput.updateComplete;
+
+    input.setSelectionRange(5, 5);
+    input.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: "Backspace",
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+      })
+    );
+    await phoneInput.updateComplete;
+
+    expect(phoneInput.value).to.equal("(205) 550-123");
+    expect(input.selectionStart).to.equal(3);
+  });
+
+  it("keeps the caret at the start when input is reformatted", async () => {
+    const input = phoneInput.shadowRoot?.querySelector("input");
+    if (!input) throw new Error("Expected phone input");
+    input.value = "2025550123";
+    input.setSelectionRange(0, 0);
+
+    input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    await phoneInput.updateComplete;
+
+    expect(phoneInput.value).to.equal("(202) 555-0123");
+    expect(input.selectionStart).to.equal(0);
+  });
+
+  it("preserves an international prefix when backspacing over formatting", async () => {
+    const input = phoneInput.shadowRoot?.querySelector("input");
+    if (!input) throw new Error("Expected phone input");
+    input.value = "+44 7400 123456";
+    input.setSelectionRange(input.value.length, input.value.length);
+    input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    await phoneInput.updateComplete;
+
+    input.setSelectionRange(9, 9);
+    input.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: "Backspace",
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+      })
+    );
+    await phoneInput.updateComplete;
+
+    expect(phoneInput.value.startsWith("+")).to.equal(true);
+    expect(phoneInput.value.replace(/\D/g, "")).to.equal("44740123456");
+    expect(input.selectionStart).to.equal(6);
+  });
+
+  it("allows backspace to remove the leading international prefix", async () => {
+    const input = phoneInput.shadowRoot?.querySelector("input");
+    if (!input) throw new Error("Expected phone input");
+    input.value = "+";
+    input.setSelectionRange(1, 1);
+    const keydown = new KeyboardEvent("keydown", {
+      key: "Backspace",
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+    });
+
+    input.dispatchEvent(keydown);
+
+    expect(keydown.defaultPrevented).to.equal(false);
+    input.value = "";
+    input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    await phoneInput.updateComplete;
+    expect(phoneInput.value).to.equal("");
+    expect(phoneInput.e164).to.equal(null);
+  });
+});
+
+it("normalizes international numbers through the Email Us form", async () => {
+  const emailUs = document.createElement("email-us-window") as EmailUsWindow;
+  emailUs.country = "GB";
+  document.body.appendChild(emailUs);
+  await emailUs.updateComplete;
+
+  const phoneInput = emailUs.shadowRoot?.querySelector<InternationalPhoneInput>(
+    "international-phone-input"
+  );
+  expect(phoneInput).to.exist;
+  expect(phoneInput?.country).to.equal("GB");
+  const input = phoneInput?.shadowRoot?.querySelector("input");
+  if (!phoneInput || !input) throw new Error("Expected phone input");
+
+  input.value = "07400123456";
+  input.setSelectionRange(input.value.length, input.value.length);
+  input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+  await phoneInput.updateComplete;
+  await emailUs.updateComplete;
+
+  expect(emailUs.phoneNumber).to.equal("07400 123456");
+  expect(emailUs.phoneNumberE164).to.equal("+447400123456");
+  expect(emailUs.phoneCountry).to.equal("GB");
+
+  emailUs.firstName = "Local";
+  emailUs.lastName = "Test";
+  emailUs.email = "local.test@example.com";
+  emailUs.validateFormFields();
+  expect(emailUs.hasPhoneNumberError).to.equal(false);
+
+  emailUs.remove();
+});
+
+it("keeps Text Us on the existing US-only phone input", async () => {
+  const callUs = document.createElement("call-us-window") as CallUsWindow;
+  callUs.hasTextUsEnabled = "true";
+  document.body.appendChild(callUs);
+  await callUs.updateComplete;
+
+  expect(callUs.shadowRoot?.querySelector("international-phone-input")).to.not
+    .exist;
+  expect(
+    callUs.shadowRoot?.querySelector('[aria-label="Country calling code"]')
+  ).to.not.exist;
+
+  const input = callUs.shadowRoot?.querySelector<HTMLInputElement>(
+    'input[placeholder="Enter phone"]'
+  );
+  if (!input) throw new Error("Expected Text Us phone input");
+  input.value = "2025550123";
+  input.dispatchEvent(new KeyboardEvent("keyup", { bubbles: true }));
+  await callUs.updateComplete;
+
+  expect(callUs.phoneNumberToText).to.equal("(202) 555-0123");
+  expect(input.value).to.equal("(202) 555-0123");
+  expect(input.maxLength).to.equal(14);
+
+  callUs.remove();
+});

package/src/internationalPhoneSubmission.test.ts

@@ -0,0 +1,145 @@
+import { expect } from "@esm-bundle/chai";
+import { restore, useFakeXMLHttpRequest } from "sinon/pkg/sinon-esm";
+import "../public/dist/index";
+import type { EmailUsWindow } from "./WebComponent/actions/email-us-window";
+import type {
+  TourScheduler,
+  TourType,
+} from "./WebComponent/Scheduler/tour-scheduler";
+
+type TourSubmissionHarness = {
+  tourType: TourType;
+  selectedDate: Date;
+  selectedTime: { datetime: string; offset: string };
+  phoneNumber: string;
+  phoneNumberE164: string | null;
+  email: string;
+};
+
+type FakeRequest = XMLHttpRequest & {
+  requestBody?: string;
+  respond: (
+    status: number,
+    headers?: Record<string, string>,
+    body?: string
+  ) => void;
+  url: string;
+};
+
+const guidedTour = "guided" as TourType;
+
+afterEach(() => {
+  restore();
+  window.dataLayer = [];
+});
+
+it("submits the canonical international number in the Email Us request", async () => {
+  const fakeXhr = useFakeXMLHttpRequest();
+  const requests: FakeRequest[] = [];
+  fakeXhr.onCreate = (request: FakeRequest) => requests.push(request);
+  const emailUs = document.createElement("email-us-window") as EmailUsWindow;
+  Object.assign(emailUs, {
+    firstName: "Local",
+    lastName: "Test",
+    email: "local.test@example.com",
+    phoneNumber: "07400 123456",
+    phoneNumberE164: "+447400123456",
+    message: "I would like more information.",
+    buildingId: 3660,
+    buildingSlug: "test-building",
+    orgSlug: "test-org",
+  });
+
+  const submission = emailUs.onClick();
+
+  expect(requests).to.have.length(1);
+  expect(requests[0].url).to.equal(
+    "https://app.meetelise.com/platformApi/state/create/emailMe"
+  );
+  expect(JSON.parse(requests[0].requestBody ?? "{}")).to.include({
+    phone_number: "+447400123456",
+    email_address: "local.test@example.com",
+  });
+  requests[0].respond(200, { "Content-Type": "application/json" }, "{}");
+  await submission;
+
+  expect(window.dataLayer[window.dataLayer.length - 1]).to.include({
+    event: "emailUsSubmitted",
+    phone: "+447400123456",
+  });
+});
+
+it("submits the canonical international number in the Tour request", async () => {
+  const fakeXhr = useFakeXMLHttpRequest();
+  const requests: FakeRequest[] = [];
+  fakeXhr.onCreate = (request: FakeRequest) => requests.push(request);
+  const tour = document.createElement("tour-scheduler") as TourScheduler;
+  Object.assign(tour as unknown as TourSubmissionHarness, {
+    tourType: guidedTour,
+    selectedDate: new Date("2030-01-15T00:00:00Z"),
+    selectedTime: {
+      datetime: "2030-01-15T10:00:00",
+      offset: "+01:00",
+    },
+    phoneNumber: "02 1234 5678",
+    phoneNumberE164: "+390212345678",
+    email: "local.test@example.com",
+  });
+  Object.assign(tour, {
+    buildingId: 3660,
+    buildingSlug: "test-building",
+    orgSlug: "test-org",
+    firstNameInputValue: "Local",
+    lastNameInputValue: "Test",
+  });
+
+  const submission = tour.submit();
+
+  expect(requests).to.have.length(1);
+  expect(requests[0].url).to.equal(
+    "https://app.meetelise.com/platformApi/state/create/v2/scheduleMe"
+  );
+  expect(JSON.parse(requests[0].requestBody ?? "{}")).to.include({
+    phone_number: "+390212345678",
+    email_address: "local.test@example.com",
+  });
+  requests[0].respond(200, { "Content-Type": "application/json" }, "{}");
+  await submission;
+
+  expect(window.dataLayer[window.dataLayer.length - 1]).to.include({
+    event: "scheduleTourSubmitted",
+    phone: "+390212345678",
+  });
+});
+
+it("does not submit either form without a canonical phone number", async () => {
+  const fakeXhr = useFakeXMLHttpRequest();
+  const requests: FakeRequest[] = [];
+  fakeXhr.onCreate = (request: FakeRequest) => requests.push(request);
+  const emailUs = document.createElement("email-us-window") as EmailUsWindow;
+  Object.assign(emailUs, {
+    firstName: "Local",
+    lastName: "Test",
+    email: "local.test@example.com",
+    phoneNumber: "123",
+    phoneNumberE164: null,
+  });
+  await emailUs.onClick();
+
+  const tour = document.createElement("tour-scheduler") as TourScheduler;
+  Object.assign(tour as unknown as TourSubmissionHarness, {
+    tourType: guidedTour,
+    selectedDate: new Date("2030-01-15T00:00:00Z"),
+    selectedTime: {
+      datetime: "2030-01-15T10:00:00",
+      offset: "+01:00",
+    },
+    phoneNumber: "123",
+    phoneNumberE164: null,
+    email: "local.test@example.com",
+  });
+  await tour.submit();
+
+  expect(requests).to.have.length(0);
+  expect(emailUs.hasPhoneNumberError).to.equal(true);
+});