@meetelise/chat 1.54.0 → 1.55.0

package/src/WebComponent/Scheduler/tour-scheduler.ts

@@ -44,6 +44,13 @@ import {
 import { pushGtmEvent } from "../../gtm";
 import formDisclaimer from "../../disclaimers";
 import { tourSchedulerStyles } from "./tourSchedulerStyles";
+import type { BrokerReferral } from "../brokerReferral";
+import {
+  brokerEmailError,
+  brokerNameIsMissing,
+  brokerRequestFields,
+  toBrokerReferral,
+} from "../brokerReferral";
 import { defaultPrimaryColor } from "../../themes";
 import { LogType, sendLoggingEvent } from "../../analytics";
 import LeadSourceClient, {
@@ -128,6 +135,9 @@ export class TourScheduler extends LitElement {
   hasDynamicSchedulingEnabled = false;
   @property({ attribute: true })
   bedroomPreferenceRequired = false;
+  /** Broker intake is on for the building: offer the broker referral fields. */
+  @property({ attribute: false })
+  brokerIntakeEnabled = false;
 
   @property({ attribute: true })
   private leadSourceClient: LeadSourceClient | null = null;
@@ -186,6 +196,16 @@ export class TourScheduler extends LitElement {
   private promptForReschedule = false;
   @state()
   private canceledReschedule = false;
+  @state()
+  isBrokerReferral = false;
+  @state()
+  brokerFirstName = "";
+  @state()
+  brokerLastName = "";
+  @state()
+  brokerEmail = "";
+  @state()
+  brokerFirmName = "";
 
   @property({ attribute: false })
   leadSources: string[] = [];
@@ -649,6 +669,51 @@ export class TourScheduler extends LitElement {
     this.email = (e.target as HTMLInputElement).value;
   };
 
+  /**
+   * A broker usually starts typing their own details before ticking the box, so ticking it moves
+   * the name and email into the broker's empty details and leaves the client's fields empty. Once
+   * the broker's details are filled, re-ticking leaves both sections alone, as on the email form.
+   */
+  onToggleBrokerReferral = (e: Event): void => {
+    const isBrokerReferral = (e.target as HTMLInputElement).checked;
+    const brokerIsEmpty =
+      !this.brokerFirstName && !this.brokerLastName && !this.brokerEmail;
+    const clientIsEmpty =
+      !this.firstNameInputValue && !this.lastNameInputValue && !this.email;
+    if (isBrokerReferral && brokerIsEmpty) {
+      this.brokerFirstName = this.firstNameInputValue;
+      this.brokerLastName = this.lastNameInputValue;
+      this.brokerEmail = this.email;
+      this.firstNameInputValue = "";
+      this.lastNameInputValue = "";
+      this.email = "";
+      // There's no broker phone field: what was typed is the broker's, not the client's.
+      this.phoneNumber = "";
+      this.phoneNumberE164 = null;
+      this.phoneNumberIsValid = false;
+      this.phoneNumberHasBlurred = false;
+    } else if (!isBrokerReferral && clientIsEmpty) {
+      this.firstNameInputValue = this.brokerFirstName;
+      this.lastNameInputValue = this.brokerLastName;
+      this.email = this.brokerEmail;
+      this.brokerFirstName = "";
+      this.brokerLastName = "";
+      this.brokerEmail = "";
+    }
+    this.isBrokerReferral = isBrokerReferral;
+  };
+
+  /** The broker's details to send, only when the submitter says they're referring a client. */
+  brokerReferral = (): BrokerReferral | null =>
+    this.brokerIntakeEnabled && this.isBrokerReferral
+      ? toBrokerReferral(
+          this.brokerFirstName,
+          this.brokerLastName,
+          this.brokerEmail,
+          this.brokerFirmName
+        )
+      : null;
+
   validators = {
     tourType: (): boolean => this.tourType !== null,
     dateAndTime: (): boolean => !!this.selectedDate && !!this.selectedTime,
@@ -662,6 +727,13 @@ export class TourScheduler extends LitElement {
     },
     layout: (): boolean =>
       !this.bedroomPreferenceRequired || !!this.selectedLayoutValue,
+    broker: (): boolean => {
+      const broker = this.brokerReferral();
+      return (
+        !broker ||
+        (!brokerNameIsMissing(broker) && !brokerEmailError(broker, this.email))
+      );
+    },
   };
 
   formIsValidForSubmission = (): boolean => {
@@ -669,7 +741,8 @@ export class TourScheduler extends LitElement {
       this.validators.tourType() &&
       this.validators.dateAndTime() &&
       this.validators.leadInfo() &&
-      this.validators.layout();
+      this.validators.layout() &&
+      this.validators.broker();
     return isValid;
   };
 
@@ -696,6 +769,10 @@ export class TourScheduler extends LitElement {
       this.phoneNumberIsValid = false;
       return;
     }
+    if (!this.validators.broker()) {
+      return;
+    }
+    const broker = this.brokerReferral();
     const queryParams = new URLSearchParams(window.location.search);
 
     let parsedLeadSource = null;
@@ -744,6 +821,8 @@ export class TourScheduler extends LitElement {
       layout: selectedLayout,
       unit: selectedUnit,
       conversationTrackingId: this.leadSourceClient?.chatId ?? null,
+      // A flag only: the broker's own details stay out of the data layer.
+      ...(broker ? { isBrokerReferral: true } : {}),
     });
     const googleReferral = readGoogleReserveReferral();
     const data = {
@@ -781,6 +860,7 @@ export class TourScheduler extends LitElement {
       google_rwg_token: googleReferral?.rwgToken,
       google_referral_building_id: googleReferral?.buildingId,
       google_environment: googleReferral?.environment,
+      ...brokerRequestFields(broker),
     };
 
     const url = `https://app.meetelise.com/platformApi/state/create/v2/scheduleMe`;
@@ -1216,7 +1296,8 @@ export class TourScheduler extends LitElement {
       },
     },
     {
-      validate: (): boolean => this.validators.leadInfo(),
+      validate: (): boolean =>
+        this.validators.leadInfo() && this.validators.broker(),
       // last page gets <action-confirm-button> instead of the regular button
       nextButtonText: null,
       renderNextButton: (): TemplateResult => html` <action-confirm-button
@@ -1235,10 +1316,105 @@ export class TourScheduler extends LitElement {
     },
   ];
 
+  renderBrokerToggle = (): TemplateResult => html`
+    <label class="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}
+      />
+    </label>
+  `;
+
+  renderBrokerSection(): TemplateResult {
+    const inputClasses = (extra?: string) =>
+      classMap({
+        ["webchat-input"]: true,
+        ...(extra ? { [extra]: true } : {}),
+        ["webchat-font__desktop"]: !isMobile(),
+        ["webchat-font__mobile"]: isMobile(),
+      });
+    const broker = this.brokerReferral();
+    // Only once the broker has typed an email, so the field isn't flagged before they start.
+    const emailError =
+      broker && this.brokerEmail ? brokerEmailError(broker, this.email) : null;
+    return html`
+      <div class="section-label">Your details</div>
+      <div id="brokerNamesWrapper" class="namesWrapper">
+        <div class="nameContainer">
+          <input
+            class=${inputClasses("nameInput")}
+            type="text"
+            placeholder="Your first name"
+            name="brokerFirstName"
+            autocomplete="given-name"
+            .value=${this.brokerFirstName}
+            @input=${(e: Event) => {
+              this.brokerFirstName = (e.target as HTMLInputElement).value;
+            }}
+          />
+        </div>
+        <div class="nameContainer">
+          <input
+            class=${inputClasses("nameInput")}
+            type="text"
+            placeholder="Your last name"
+            name="brokerLastName"
+            autocomplete="family-name"
+            .value=${this.brokerLastName}
+            @input=${(e: Event) => {
+              this.brokerLastName = (e.target as HTMLInputElement).value;
+            }}
+          />
+        </div>
+      </div>
+      <div class="inputContainer">
+        <input
+          class=${classMap({
+            ["webchat-input"]: true,
+            ["webchat-font__desktop"]: !isMobile(),
+            ["webchat-font__mobile"]: isMobile(),
+            ["webchat-input__error"]: !!emailError,
+          })}
+          type="email"
+          inputmode="email"
+          placeholder="Your email"
+          name="brokerEmail"
+          autocomplete="email"
+          .value=${this.brokerEmail}
+          @input=${(e: Event) => {
+            this.brokerEmail = (e.target as HTMLInputElement).value;
+          }}
+        />
+        ${emailError ? html`<p class="error-message">${emailError}</p>` : ""}
+      </div>
+      <div class="inputContainer">
+        <input
+          class=${inputClasses()}
+          type="text"
+          placeholder="Brokerage (optional)"
+          name="brokerFirmName"
+          autocomplete="organization"
+          .value=${this.brokerFirmName}
+          @input=${(e: Event) => {
+            this.brokerFirmName = (e.target as HTMLInputElement).value;
+          }}
+        />
+      </div>
+      <div class="section-label">Your client</div>
+    `;
+  }
+
   userInfoAndLayoutMenu(): TemplateResult {
+    const isReferral = this.brokerIntakeEnabled && this.isBrokerReferral;
     return html`<h2 class="journey-header">Your Information</h2>
       <div id="yourInformationMenu">
-        <div id="namesWrapper">
+        ${isReferral ? this.renderBrokerSection() : ""}
+        <div id="namesWrapper" class="namesWrapper">
           <div class="nameContainer" id="firstName">
             <input
               class=${classMap({
@@ -1248,10 +1424,13 @@ export class TourScheduler extends LitElement {
                 ["webchat-font__mobile"]: isMobile(),
               })}
               type="text"
-              placeholder="First name"
+              placeholder=${isReferral ? "Client first name" : "First name"}
               name="firstName"
-              autocomplete="given-name"
-              @input=${() => this.requestUpdate()}
+              autocomplete=${isReferral ? "off" : "given-name"}
+              .value=${this.firstNameInputValue}
+              @input=${(e: Event) => {
+                this.firstNameInputValue = (e.target as HTMLInputElement).value;
+              }}
             />
           </div>
           <div class="nameContainer" id="lastName">
@@ -1263,10 +1442,13 @@ export class TourScheduler extends LitElement {
                 ["webchat-font__mobile"]: isMobile(),
               })}
               type="text"
-              placeholder="Last name"
+              placeholder=${isReferral ? "Client last name" : "Last name"}
               name="lastName"
-              autocomplete="family-name"
-              @input=${() => this.requestUpdate()}
+              autocomplete=${isReferral ? "off" : "family-name"}
+              .value=${this.lastNameInputValue}
+              @input=${(e: Event) => {
+                this.lastNameInputValue = (e.target as HTMLInputElement).value;
+              }}
             />
           </div>
         </div>
@@ -1282,9 +1464,9 @@ export class TourScheduler extends LitElement {
             })}
             type="email"
             inputmode="email"
-            placeholder="Email"
+            placeholder=${isReferral ? "Client email" : "Email"}
             name="email"
-            autocomplete="email"
+            autocomplete=${isReferral ? "off" : "email"}
             .value=${this.email}
             @input=${this.onChangeEmail}
           />
@@ -1306,6 +1488,7 @@ export class TourScheduler extends LitElement {
             ? html`<p class="error-message">Invalid phone number</p>`
             : ""}
         </div>
+        ${this.brokerIntakeEnabled ? this.renderBrokerToggle() : ""}
         ${this.layoutOptions.length > 0
           ? html` <me-select
               id="layout"
@@ -1438,27 +1621,56 @@ export class TourScheduler extends LitElement {
             fill="#202020"
           />
         </svg>
-        <p>Thank you!</p>
-        <p>
-          Your
-          ${{
-            [TourType.Guided]: "guided",
-            [TourType.Self]: "self-guided",
-            [TourType.Virtual]: "virtual",
-          }[this.tourType]}
-          tour is
-          ${this.promptForReschedule ? html`rescheduled` : html`scheduled`} for
-          ${readableDateAndTime}
-          ${getTimezoneAbbreviation(this.calendarTimeZone)}.
-        </p>
-        <p>
-          Look for an email confirmation along with instructions and directions.
-        </p>
-        <p>You can make changes at any time, just reply to the email.</p>
+        ${this.brokerIntakeEnabled && this.isBrokerReferral
+          ? this.referralConfirmation(readableDateAndTime)
+          : html`<p>Thank you!</p>
+              <p>
+                Your
+                ${{
+                  [TourType.Guided]: "guided",
+                  [TourType.Self]: "self-guided",
+                  [TourType.Virtual]: "virtual",
+                }[this.tourType]}
+                tour is
+                ${this.promptForReschedule
+                  ? html`rescheduled`
+                  : html`scheduled`}
+                for ${readableDateAndTime}
+                ${getTimezoneAbbreviation(this.calendarTimeZone)}.
+              </p>
+              <p>
+                Look for an email confirmation along with instructions and
+                directions.
+              </p>
+              <p>
+                You can make changes at any time, just reply to the email.
+              </p>`}
       </div>
     `;
   }
 
+  /** The broker isn't the one touring: the client gets the confirmation email. */
+  private referralConfirmation(readableDateAndTime: string): TemplateResult {
+    if (this.tourType === null) return html``;
+    return html`<p>Thank you for the referral!</p>
+      <p>
+        Your client's
+        ${{
+          [TourType.Guided]: "guided",
+          [TourType.Self]: "self-guided",
+          [TourType.Virtual]: "virtual",
+        }[this.tourType]}
+        tour is
+        ${this.promptForReschedule ? html`rescheduled` : html`scheduled`} for
+        ${readableDateAndTime}
+        ${getTimezoneAbbreviation(this.calendarTimeZone)}.
+      </p>
+      <p>
+        We'll email your client a confirmation along with instructions and
+        directions.
+      </p>`;
+  }
+
   loadingIcon(size = 21): TemplateResult {
     return html` <svg
       aria-hidden="true"
@@ -1678,7 +1890,13 @@ export class TourScheduler extends LitElement {
                 </div>
               `
             : html`
-                <div id="scheduler-container">
+                <div
+                  id="scheduler-container"
+                  class=${classMap({
+                    ["with-broker"]:
+                      this.brokerIntakeEnabled && this.isBrokerReferral,
+                  })}
+                >
                   <div id="book-tour-journey-items">
                     <div id="tour-type-menu-outer-container">
                       ${this.tourTypeMenu()}
@@ -1694,9 +1912,12 @@ export class TourScheduler extends LitElement {
                 </div>
                 <div id="tour-scheduler-footer">
                   <div class="explanation">
-                    We'll send a confirmation and any follow-ups to your email
-                    address, please reply to the email to make any appointment
-                    changes.
+                    ${this.brokerIntakeEnabled && this.isBrokerReferral
+                      ? html`We'll send a confirmation and any follow-ups to
+                        your client's email address.`
+                      : html`We'll send a confirmation and any follow-ups to
+                        your email address, please reply to the email to make
+                        any appointment changes.`}
                     ${formDisclaimer({
                       buildingName: this.buildingName,
                       phoneNumberInput: this.phoneNumber,

package/src/WebComponent/Scheduler/tourSchedulerStyles.ts

@@ -271,6 +271,46 @@ otherwise there's some empty space at the bottom of the button, which interferes
     height: 49px;
   }
 
+  #yourInformationMenu .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;
+  }
+
+  #yourInformationMenu .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;
+  }
+
+  #yourInformationMenu .broker-switch:checked {
+    background: #202020;
+  }
+
+  #yourInformationMenu .broker-switch:checked::before {
+    transform: translateX(16px);
+  }
+
+  #yourInformationMenu .broker-switch:focus-visible {
+    outline: 2px solid #202020;
+    outline-offset: 2px;
+  }
+
   hr {
     grid-row: 6;
     grid-column: 1 / 5;
@@ -403,9 +443,35 @@ otherwise there's some empty space at the bottom of the button, which interferes
     display: none;
   }
 
-  #namesWrapper {
+  #namesWrapper,
+  .namesWrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  /* A broker referral adds the broker's rows, so the form may grow taller before it scrolls. */
+  #scheduler-container.with-broker {
+    max-height: min(720px, calc(100vh - 180px));
+  }
+
+  .section-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: #5c5c5c;
+  }
+
+  /* The question lines up with the fields' text, its switch with their right edge. */
+  .broker-toggle {
     display: flex;
+    align-items: center;
     justify-content: space-between;
+    gap: 12px;
+    min-height: 32px;
+    padding: 0 17px;
+    font-family: "Helvetica Neue", Arial;
+    font-size: 14px;
+    color: #202020;
+    cursor: pointer;
   }
 
   .nameContainer {