@meetelise/chat 1.51.0 → 1.51.1

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