@meetelise/chat 1.53.6 → 1.54.0

package/src/brokerReferralSubmission.test.ts

@@ -0,0 +1,287 @@
+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";
+
+type FakeRequest = XMLHttpRequest & {
+  requestBody?: string;
+  respond: (
+    status: number,
+    headers?: Record<string, string>,
+    body?: string
+  ) => void;
+  url: string;
+};
+
+const clientFields = {
+  firstName: "Cora",
+  lastName: "Client",
+  email: "cora@example.com",
+  phoneNumber: "(312) 555-0100",
+  phoneNumberE164: "+13125550100",
+  message: "Cora is looking at 2-bedrooms.",
+  buildingId: 445038,
+  buildingSlug: "test-building",
+  orgSlug: "test-org",
+};
+
+const brokerFields = {
+  brokerFirstName: "Bea",
+  brokerLastName: "Broker",
+  brokerEmail: "bea@realty.example.com",
+  brokerFirmName: "Demo Realty",
+};
+
+const createForm = (fields: Record<string, unknown>): EmailUsWindow => {
+  const emailUs = document.createElement("email-us-window") as EmailUsWindow;
+  Object.assign(emailUs, clientFields, fields);
+  return emailUs;
+};
+
+const captureRequests = (): FakeRequest[] => {
+  const fakeXhr = useFakeXMLHttpRequest();
+  const requests: FakeRequest[] = [];
+  fakeXhr.onCreate = (request: FakeRequest) => requests.push(request);
+  return requests;
+};
+
+afterEach(() => {
+  restore();
+  window.dataLayer = [];
+});
+
+it("sends a broker referral with the client as the prospect and the broker fields", async () => {
+  const requests = captureRequests();
+  const emailUs = createForm({
+    brokerIntakeEnabled: true,
+    isBrokerReferral: true,
+    ...brokerFields,
+  });
+
+  const submission = emailUs.onClick();
+
+  expect(requests).to.have.length(1);
+  expect(JSON.parse(requests[0].requestBody ?? "{}")).to.include({
+    first_name: "Cora",
+    last_name: "Client",
+    email_address: "cora@example.com",
+    broker_first_name: "Bea",
+    broker_last_name: "Broker",
+    broker_email: "bea@realty.example.com",
+    broker_firm_name: "Demo Realty",
+  });
+  requests[0].respond(200, { "Content-Type": "application/json" }, "{}");
+  await submission;
+
+  const event = window.dataLayer[window.dataLayer.length - 1];
+  expect(event).to.include({
+    event: "emailUsSubmitted",
+    isBrokerReferral: true,
+  });
+  expect(JSON.stringify(event)).not.to.contain("bea@realty.example.com");
+});
+
+it("sends no broker fields when broker intake is off, whatever the form holds", async () => {
+  const requests = captureRequests();
+  const emailUs = createForm({
+    brokerIntakeEnabled: false,
+    isBrokerReferral: true,
+    ...brokerFields,
+  });
+
+  const submission = emailUs.onClick();
+
+  expect(requests).to.have.length(1);
+  const body = JSON.parse(requests[0].requestBody ?? "{}");
+  expect(body).not.to.have.any.keys(
+    "broker_first_name",
+    "broker_last_name",
+    "broker_email",
+    "broker_firm_name"
+  );
+  requests[0].respond(200, { "Content-Type": "application/json" }, "{}");
+  await submission;
+  expect(window.dataLayer[window.dataLayer.length - 1]).not.to.have.property(
+    "isBrokerReferral"
+  );
+});
+
+it("sends no broker fields when the submitter is not referring a client", async () => {
+  const requests = captureRequests();
+  const emailUs = createForm({
+    brokerIntakeEnabled: true,
+    isBrokerReferral: false,
+    ...brokerFields,
+  });
+
+  const submission = emailUs.onClick();
+
+  expect(requests).to.have.length(1);
+  expect(JSON.parse(requests[0].requestBody ?? "{}")).not.to.have.property(
+    "broker_email"
+  );
+  requests[0].respond(200, { "Content-Type": "application/json" }, "{}");
+  await submission;
+});
+
+it("refuses a referral without a valid broker email", async () => {
+  const requests = captureRequests();
+  const emailUs = createForm({
+    brokerIntakeEnabled: true,
+    isBrokerReferral: true,
+    ...brokerFields,
+    brokerEmail: "not-an-email",
+  });
+
+  await emailUs.onClick();
+
+  expect(requests).to.have.length(0);
+  expect(emailUs.brokerEmailError).to.equal("Enter your valid email address");
+});
+
+it("refuses a referral where the broker entered themselves as the client", async () => {
+  const requests = captureRequests();
+  const emailUs = createForm({
+    brokerIntakeEnabled: true,
+    isBrokerReferral: true,
+    ...brokerFields,
+    email: "BEA@realty.example.com",
+  });
+
+  await emailUs.onClick();
+
+  expect(requests).to.have.length(0);
+  expect(emailUs.brokerEmailError).to.equal(
+    "Enter your client's details below, not yours"
+  );
+});
+
+it("refuses a referral without the broker's name", async () => {
+  const requests = captureRequests();
+  const emailUs = createForm({
+    brokerIntakeEnabled: true,
+    isBrokerReferral: true,
+    ...brokerFields,
+    brokerLastName: " ",
+  });
+
+  await emailUs.onClick();
+
+  expect(requests).to.have.length(0);
+  expect(emailUs.hasBrokerNameError).to.equal(true);
+});
+
+it("takes broker details that were autofilled or pasted, not only typed", async () => {
+  const emailUs = createForm({ brokerIntakeEnabled: true });
+  document.body.appendChild(emailUs);
+  await emailUs.updateComplete;
+  const checkbox = emailUs.shadowRoot?.querySelector(
+    'input[type="checkbox"]'
+  ) as HTMLInputElement;
+  checkbox.click();
+  await emailUs.updateComplete;
+
+  // Autofill and a mouse paste set the value and fire "input", with no key events.
+  const fill = (placeholder: string, value: string) => {
+    const input = emailUs.shadowRoot?.querySelector(
+      `input[placeholder="${placeholder}"]`
+    ) as HTMLInputElement;
+    input.value = value;
+    input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+  };
+  fill("Your first name", "Bea");
+  fill("Your last name", "Broker");
+  fill("Your email", "bea@realty.example.com");
+  fill("Brokerage (optional)", "Demo Realty");
+  await emailUs.updateComplete;
+
+  expect(emailUs.brokerFirstName).to.equal("Bea");
+  expect(emailUs.brokerLastName).to.equal("Broker");
+  expect(emailUs.brokerEmail).to.equal("bea@realty.example.com");
+  expect(emailUs.brokerFirmName).to.equal("Demo Realty");
+  emailUs.remove();
+});
+
+it("moves what a broker typed into their own details when they tick the referral box", async () => {
+  const emailUs = document.createElement("email-us-window") as EmailUsWindow;
+  Object.assign(emailUs, { brokerIntakeEnabled: true, buildingId: 445038 });
+  document.body.appendChild(emailUs);
+  await emailUs.updateComplete;
+
+  const fill = (placeholder: string, value: string) => {
+    const input = emailUs.shadowRoot?.querySelector(
+      `input[placeholder="${placeholder}"]`
+    ) as HTMLInputElement;
+    input.value = value;
+    input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+  };
+  fill("First name", "Bea");
+  fill("Last name", "Broker");
+  fill("Email", "bea@realty.example.com");
+  await emailUs.updateComplete;
+
+  const checkbox = emailUs.shadowRoot?.querySelector(
+    "#broker-referral-toggle"
+  ) as HTMLInputElement;
+  checkbox.click();
+  await emailUs.updateComplete;
+
+  expect(emailUs.brokerFirstName).to.equal("Bea");
+  expect(emailUs.brokerLastName).to.equal("Broker");
+  expect(emailUs.brokerEmail).to.equal("bea@realty.example.com");
+  expect([emailUs.firstName, emailUs.lastName, emailUs.email]).to.deep.equal([
+    "",
+    "",
+    "",
+  ]);
+  const clientFirstName = emailUs.shadowRoot?.querySelector(
+    'input[placeholder="Client first name"]'
+  ) as HTMLInputElement;
+  expect(clientFirstName.value).to.equal("");
+
+  // Unticking before entering a client puts the details back.
+  checkbox.click();
+  await emailUs.updateComplete;
+  expect(emailUs.firstName).to.equal("Bea");
+  expect(emailUs.email).to.equal("bea@realty.example.com");
+  expect(emailUs.brokerEmail).to.equal("");
+  emailUs.remove();
+});
+
+it("keeps a filled client when the referral box is unticked and ticked again", async () => {
+  const emailUs = document.createElement("email-us-window") as EmailUsWindow;
+  Object.assign(emailUs, { brokerIntakeEnabled: true, buildingId: 445038 });
+  document.body.appendChild(emailUs);
+  await emailUs.updateComplete;
+  const checkbox = emailUs.shadowRoot?.querySelector(
+    "#broker-referral-toggle"
+  ) as HTMLInputElement;
+  checkbox.click();
+  await emailUs.updateComplete;
+  Object.assign(emailUs, {
+    ...brokerFields,
+    firstName: "Cora",
+    lastName: "Client",
+    email: "cora@example.com",
+    phoneNumber: "(312) 555-0100",
+    phoneNumberE164: "+13125550100",
+  });
+  await emailUs.updateComplete;
+
+  checkbox.click();
+  await emailUs.updateComplete;
+  checkbox.click();
+  await emailUs.updateComplete;
+
+  expect(emailUs.isBrokerReferral).to.equal(true);
+  expect([
+    emailUs.firstName,
+    emailUs.email,
+    emailUs.phoneNumberE164,
+  ]).to.deep.equal(["Cora", "cora@example.com", "+13125550100"]);
+  expect([emailUs.brokerFirstName, emailUs.brokerEmail]).to.deep.equal([
+    "Bea",
+    "bea@realty.example.com",
+  ]);
+  emailUs.remove();
+});

package/src/fetchFeatureFlag.ts

@@ -136,3 +136,23 @@ export async function fetchTrackedRolloutBedroomPreferenceRequired(
     return false;
   }
 }
+
+/** Whether the building has broker intake on, so the email form offers the broker referral fields. */
+export async function fetchTrackedRolloutBrokerIntake(
+  buildingSlug: string
+): Promise<boolean> {
+  if (!buildingSlug) return false;
+  try {
+    const response = await axios.get(trackedRolloutEndpoint(buildingSlug), {
+      params: {
+        rollout_name: "broker_intake",
+        default_value: false,
+      },
+      // The widget waits on this with its other startup reads; a slow answer means "off", not a slow widget.
+      timeout: 3000,
+    });
+    return response.data === true;
+  } catch (_) {
+    return false;
+  }
+}