@meetelise/chat 1.54.1 → 1.55.0

package/src/WebComponent/actions/email-us-window.ts

@@ -21,6 +21,13 @@ import {
   LeadSourceMultitouchClient,
   LeadSourceSubmittedListItem,
 } from "../LeadSourceMultitouchClient";
+import type { BrokerReferral } from "../brokerReferral";
+import {
+  brokerEmailError,
+  brokerNameIsMissing,
+  brokerRequestFields,
+  toBrokerReferral,
+} from "../brokerReferral";
 
 @customElement("email-us-window")
 export class EmailUsWindow extends LitElement {
@@ -62,11 +69,6 @@ export class EmailUsWindow extends LitElement {
         gap: 8px;
       }
 
-      /* With the broker toggle on its left, the toggle and Send sit at either end. */
-      .action-bttn-container--with-toggle {
-        justify-content: space-between;
-      }
-
       .email-us__message-input {
         resize: none;
         width: 100%;
@@ -99,14 +101,58 @@ export class EmailUsWindow extends LitElement {
         color: rgb(235, 64, 52);
       }
 
+      /* The question lines up with the fields' text, its switch with their right edge. */
       .email-us__broker-toggle {
         display: flex;
         align-items: center;
-        gap: 6px;
-        font-family: "Helvetica", Arial;
-        font-size: 13px;
-        color: #5c5c5c;
+        justify-content: space-between;
+        gap: 12px;
+        min-height: 32px;
+        padding: 0 17px;
+        font-family: "Helvetica Neue", Arial;
+        font-size: 14px;
+        color: #202020;
+        cursor: pointer;
+      }
+
+      .broker-switch {
+        appearance: none;
+        -webkit-appearance: none;
+        flex-shrink: 0;
+        position: relative;
+        width: 40px;
+        height: 24px;
+        margin: 0;
+        border-radius: 100px;
+        background: #bdbdbd;
         cursor: pointer;
+        transition: background 0.15s;
+      }
+
+      .broker-switch::before {
+        content: "";
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: #ffffff;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+        transition: transform 0.15s;
+      }
+
+      .broker-switch:checked {
+        background: #202020;
+      }
+
+      .broker-switch:checked::before {
+        transform: translateX(16px);
+      }
+
+      .broker-switch:focus-visible {
+        outline: 2px solid #202020;
+        outline-offset: 2px;
       }
 
       .email-us__section-label {
@@ -331,12 +377,12 @@ export class EmailUsWindow extends LitElement {
   /** The broker's details to send, only when the submitter says they're referring a client. */
   brokerReferral = (): BrokerReferral | null =>
     this.brokerIntakeEnabled && this.isBrokerReferral
-      ? {
-          firstName: this.brokerFirstName.trim(),
-          lastName: this.brokerLastName.trim(),
-          email: this.brokerEmail.trim(),
-          firmName: this.brokerFirmName.trim(),
-        }
+      ? toBrokerReferral(
+          this.brokerFirstName,
+          this.brokerLastName,
+          this.brokerEmail,
+          this.brokerFirmName
+        )
       : null;
 
   validateFormFields = (): void => {
@@ -349,17 +395,8 @@ export class EmailUsWindow extends LitElement {
     this.brokerEmailError = null;
     const broker = this.brokerReferral();
     if (broker) {
-      if (!broker.firstName || !broker.lastName) {
-        this.hasBrokerNameError = true;
-      }
-      // Broker intake opens a broker thread only for a broker email, and a broker can't be their own client.
-      if (!broker.email || !isValidEmail(broker.email)) {
-        this.brokerEmailError = "Enter your valid email address";
-      } else if (
-        broker.email.toLowerCase() === this.email.trim().toLowerCase()
-      ) {
-        this.brokerEmailError = "Enter your client's details below, not yours";
-      }
+      this.hasBrokerNameError = brokerNameIsMissing(broker);
+      this.brokerEmailError = brokerEmailError(broker, this.email);
     }
     if (!this.firstName || !this.lastName) {
       this.hasNameError = true;
@@ -464,13 +501,15 @@ export class EmailUsWindow extends LitElement {
 
   renderBrokerToggle = (): TemplateResult => html`
     <label class="email-us__broker-toggle">
+      <span>Are you an agent or locator?</span>
       <input
         type="checkbox"
+        role="switch"
         id="broker-referral-toggle"
+        class="broker-switch"
         .checked=${this.isBrokerReferral}
         @change=${this.onToggleBrokerReferral}
       />
-      Agent or broker? Refer a client
     </label>
   `;
 
@@ -667,6 +706,10 @@ export class EmailUsWindow extends LitElement {
               `
             : ""}
           <div class="email-us__vertical-spacer"></div>
+          ${this.brokerIntakeEnabled
+            ? html`${this.renderBrokerToggle()}
+                <div class="email-us__vertical-spacer"></div>`
+            : ""}
           ${this.leadSources.length > 0 &&
           (this.featureFlagShowDropdown === FeatureFlagsShowDropdown.always ||
             (this.featureFlagShowDropdown ===
@@ -705,13 +748,7 @@ export class EmailUsWindow extends LitElement {
           ${this.hasMessageError
             ? html` <div class="email-us__error-text">Include a message</div> `
             : ""}
-          <div
-            class=${classMap({
-              ["action-bttn-container"]: true,
-              ["action-bttn-container--with-toggle"]: this.brokerIntakeEnabled,
-            })}
-          >
-            ${this.brokerIntakeEnabled ? this.renderBrokerToggle() : ""}
+          <div class="action-bttn-container">
             <action-confirm-button
               .onClick=${this.onClick}
               .isLoading=${this.isSubmitting}
@@ -746,14 +783,6 @@ export const installEmailUsWindow = (): void => {
   }
 };
 
-/** A broker submitting the form for a client: sent as the request's broker fields. */
-export type BrokerReferral = {
-  firstName: string;
-  lastName: string;
-  email: string;
-  firmName: string;
-};
-
 const createEmail = async (
   firstName: string,
   lastName: string,
@@ -785,15 +814,7 @@ const createEmail = async (
     lead_sources_with_timestamps: (leadSourcesWithTimestamps ?? []).map(
       (source) => snakify({ ...source })
     ),
-    // The prospect fields above are the client's; broker intake links the broker to them.
-    ...(broker
-      ? {
-          broker_first_name: broker.firstName,
-          broker_last_name: broker.lastName,
-          broker_email: broker.email,
-          broker_firm_name: broker.firmName || null,
-        }
-      : {}),
+    ...brokerRequestFields(broker),
   };
   pushGtmEvent("emailUsSubmitted", {
     firstName,

package/src/WebComponent/brokerReferral.ts

@@ -0,0 +1,55 @@
+import { isValidEmail } from "../utils";
+
+/** A broker submitting a form for a client: sent as the request's broker fields. */
+export type BrokerReferral = {
+  firstName: string;
+  lastName: string;
+  email: string;
+  firmName: string;
+};
+
+/** The broker's typed details, trimmed, as a referral. */
+export const toBrokerReferral = (
+  firstName: string,
+  lastName: string,
+  email: string,
+  firmName: string
+): BrokerReferral => ({
+  firstName: firstName.trim(),
+  lastName: lastName.trim(),
+  email: email.trim(),
+  firmName: firmName.trim(),
+});
+
+export const brokerNameIsMissing = (broker: BrokerReferral): boolean =>
+  !broker.firstName || !broker.lastName;
+
+/**
+ * What's wrong with the broker's email, or null. Broker intake opens a broker thread only for a
+ * broker email, and a broker can't be their own client.
+ */
+export const brokerEmailError = (
+  broker: BrokerReferral,
+  clientEmail: string
+): string | null => {
+  if (!broker.email || !isValidEmail(broker.email)) {
+    return "Enter your valid email address";
+  }
+  if (broker.email.toLowerCase() === clientEmail.trim().toLowerCase()) {
+    return "Enter your client's details below, not yours";
+  }
+  return null;
+};
+
+/** The request's broker fields. The prospect fields stay the client's; broker intake links the broker to them. */
+export const brokerRequestFields = (
+  broker: BrokerReferral | null | undefined
+): Record<string, string | null> =>
+  broker
+    ? {
+        broker_first_name: broker.firstName,
+        broker_last_name: broker.lastName,
+        broker_email: broker.email,
+        broker_firm_name: broker.firmName || null,
+      }
+    : {};

package/src/WebComponent/launcher/Launcher.ts

@@ -1373,6 +1373,7 @@ export class Launcher extends LitElement {
                 .tourTypeOptions=${this.tourTypeOptions}
                 .layoutOptions=${this.layoutOptions}
                 .bedroomPreferenceRequired=${this.bedroomPreferenceRequired}
+                .brokerIntakeEnabled=${this.brokerIntakeEnabled}
                 .orgLegalName=${this.orgLegalName}
                 .country=${this.country}
                 .buildingState=${this.buildingState}

package/src/brokerReferralSubmission.test.ts

@@ -2,6 +2,10 @@ 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 FakeRequest = XMLHttpRequest & {
   requestBody?: string;
@@ -285,3 +289,148 @@ it("keeps a filled client when the referral box is unticked and ticked again", a
   ]);
   emailUs.remove();
 });
+
+// The tour form: same broker rules, sent with scheduleMe.
+
+type TourHarness = {
+  tourType: TourType;
+  selectedDate: Date;
+  selectedTime: { datetime: string; offset: string };
+  phoneNumber: string;
+  phoneNumberE164: string | null;
+  email: string;
+};
+
+const createTour = (fields: Record<string, unknown>): TourScheduler => {
+  const tour = document.createElement("tour-scheduler") as TourScheduler;
+  Object.assign(tour as unknown as TourHarness, {
+    tourType: "guided" as TourType,
+    selectedDate: new Date("2030-01-15T00:00:00Z"),
+    selectedTime: { datetime: "2030-01-15T10:00:00", offset: "-06:00" },
+    phoneNumber: clientFields.phoneNumber,
+    phoneNumberE164: clientFields.phoneNumberE164,
+    email: clientFields.email,
+  });
+  Object.assign(tour, {
+    buildingId: 445038,
+    buildingSlug: "test-building",
+    orgSlug: "test-org",
+    firstNameInputValue: clientFields.firstName,
+    lastNameInputValue: clientFields.lastName,
+    ...fields,
+  });
+  return tour;
+};
+
+it("books a broker's tour with the client as the prospect and the broker fields", async () => {
+  const requests = captureRequests();
+  const tour = createTour({
+    brokerIntakeEnabled: true,
+    isBrokerReferral: true,
+    ...brokerFields,
+  });
+
+  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({
+    first_name: "Cora",
+    last_name: "Client",
+    email_address: "cora@example.com",
+    phone_number: "+13125550100",
+    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: "scheduleTourSubmitted",
+    isBrokerReferral: true,
+  });
+  expect(JSON.stringify(event)).not.to.contain("bea@realty.example.com");
+});
+
+it("books a tour with no broker fields when broker intake is off, whatever the form holds", async () => {
+  const requests = captureRequests();
+  const tour = createTour({
+    brokerIntakeEnabled: false,
+    isBrokerReferral: true,
+    ...brokerFields,
+  });
+
+  const submission = tour.submit();
+
+  expect(requests).to.have.length(1);
+  expect(JSON.parse(requests[0].requestBody ?? "{}")).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;
+});
+
+it("won't book a referral tour where the broker entered themselves as the client", async () => {
+  const requests = captureRequests();
+  const tour = createTour({
+    brokerIntakeEnabled: true,
+    isBrokerReferral: true,
+    ...brokerFields,
+    brokerEmail: "CORA@example.com",
+  });
+
+  await tour.submit();
+
+  expect(requests).to.have.length(0);
+  expect(tour.formIsValidForSubmission()).to.equal(false);
+});
+
+it("won't book a referral tour without the broker's name", async () => {
+  const requests = captureRequests();
+  const tour = createTour({
+    brokerIntakeEnabled: true,
+    isBrokerReferral: true,
+    ...brokerFields,
+    brokerFirstName: " ",
+  });
+
+  await tour.submit();
+
+  expect(requests).to.have.length(0);
+});
+
+it("moves what a broker typed on the tour form into their own details when they tick the box", () => {
+  const tour = createTour({ brokerIntakeEnabled: true });
+  const harness = tour as unknown as TourHarness;
+  const toggle = (checked: boolean) =>
+    tour.onToggleBrokerReferral({ target: { checked } } as unknown as Event);
+
+  toggle(true);
+
+  expect([tour.brokerFirstName, tour.brokerEmail]).to.deep.equal([
+    "Cora",
+    "cora@example.com",
+  ]);
+  expect([
+    tour.firstNameInputValue,
+    tour.lastNameInputValue,
+    harness.email,
+    harness.phoneNumberE164,
+  ]).to.deep.equal(["", "", "", null]);
+
+  // Unticking before entering a client puts the details back.
+  toggle(false);
+  expect([tour.firstNameInputValue, harness.email]).to.deep.equal([
+    "Cora",
+    "cora@example.com",
+  ]);
+  expect(tour.brokerEmail).to.equal("");
+});