@meetelise/chat 1.53.6 → 1.54.0

package/src/WebComponent/FeeCalculator/components/charge-inputs/charge-inputs.ts

@@ -118,15 +118,6 @@ export class ChargeInputsComponent extends LitElement {
       font-weight: 500;
     }
 
-    .rentable-item-type {
-      font-size: 12px;
-      color: #9ca3af;
-      margin-top: 1px;
-      font-weight: 500;
-      text-transform: uppercase;
-      letter-spacing: 0.025em;
-    }
-
     .rentable-item-price {
       font-size: 12px;
       color: #6b7280;
@@ -266,7 +257,6 @@ export class ChargeInputsComponent extends LitElement {
       <div class="rentable-item-row">
         <div class="rentable-item-info">
           <div class="rentable-item-label">${item.description}</div>
-          <div class="rentable-item-type">${item.type}</div>
           <div class="rentable-item-price">${item.priceDescription}</div>
         </div>
         <input
@@ -275,7 +265,7 @@ export class ChargeInputsComponent extends LitElement {
           .checked=${isSelected}
           ?disabled=${this.disabled}
           @change=${() => this.handleRentableItemToggle(item)}
-          aria-label="Select ${item.description} (${item.type})"
+          aria-label="Select ${item.description}"
         />
       </div>
     `;

package/src/WebComponent/actions/details-window.ts

@@ -97,18 +97,42 @@ export class DetailsWindow extends LitElement {
 
   private _cleanupMobileListener?: () => void;
 
+  private readonly _onWindowResize = (): void => this.fitAboveBottom();
+
   connectedCallback(): void {
     super.connectedCallback();
     this._cleanupMobileListener = onMobileChange((m) => {
       this.isMobileSized = m;
     });
+    window.addEventListener("resize", this._onWindowResize);
   }
 
   disconnectedCallback(): void {
     this._cleanupMobileListener?.();
+    window.removeEventListener("resize", this._onWindowResize);
     super.disconnectedCallback();
   }
 
+  updated(): void {
+    this.fitAboveBottom();
+  }
+
+  /**
+   * The window is anchored at its bottom, above the launcher, so the 100vh cap alone can push its top (header and
+   * close button) off screen when the form is tall. Cap it to the room above its bottom edge; it scrolls past that.
+   */
+  fitAboveBottom(): void {
+    const inner = this.shadowRoot?.getElementById("details-window-inner");
+    if (!inner) return;
+    const bottom = inner.getBoundingClientRect().bottom;
+    // max-height sizes the content box, so the wrapper's vertical padding comes off the room.
+    const style = getComputedStyle(inner);
+    const padding =
+      parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+    const room = Math.min(window.innerHeight - 40, bottom - 16) - padding;
+    inner.style.maxHeight = bottom > 0 ? `${Math.max(200, room)}px` : "";
+  }
+
   render(): TemplateResult {
     return html`
       <div

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

@@ -57,7 +57,14 @@ export class EmailUsWindow extends LitElement {
       .action-bttn-container {
         margin-top: 19px;
         display: flex;
+        align-items: center;
         justify-content: flex-end;
+        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 {
@@ -70,6 +77,11 @@ export class EmailUsWindow extends LitElement {
         height: 159px;
       }
 
+      /* A referral adds the broker's rows, so the message box gives back some height. */
+      .email-us__message-input--compact {
+        height: 80px;
+      }
+
       .email-us__submitted-info {
         font-size: 18px;
         line-height: 24px;
@@ -87,6 +99,24 @@ export class EmailUsWindow extends LitElement {
         color: rgb(235, 64, 52);
       }
 
+      .email-us__broker-toggle {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-family: "Helvetica", Arial;
+        font-size: 13px;
+        color: #5c5c5c;
+        cursor: pointer;
+      }
+
+      .email-us__section-label {
+        font-family: "Helvetica", Arial;
+        font-size: 12px;
+        font-weight: 600;
+        color: #5c5c5c;
+        margin-bottom: 4px;
+      }
+
       .email-us__center_icon {
         display: flex;
         justify-content: center;
@@ -133,6 +163,10 @@ export class EmailUsWindow extends LitElement {
   @property({ attribute: true })
   featureFlagShowDropdown = "";
 
+  /** Broker intake is on for the building: offer the broker referral fields. */
+  @property({ attribute: false })
+  brokerIntakeEnabled = false;
+
   @property()
   privatePolicyUrl = "https://www.meetelise.com/privacy";
   @property()
@@ -153,6 +187,17 @@ export class EmailUsWindow extends LitElement {
   @state()
   message = "";
 
+  @state()
+  isBrokerReferral = false;
+  @state()
+  brokerFirstName = "";
+  @state()
+  brokerLastName = "";
+  @state()
+  brokerEmail = "";
+  @state()
+  brokerFirmName = "";
+
   @query("me-select#leadSource")
   selectedLeadSource!: MESelect;
 
@@ -168,6 +213,10 @@ export class EmailUsWindow extends LitElement {
   @state()
   hasMessageError = false;
   @state()
+  hasBrokerNameError = false;
+  @state()
+  brokerEmailError: string | null = null;
+  @state()
   hasSubmittedForm = false;
   @state()
   windowHeight = 525;
@@ -216,12 +265,102 @@ export class EmailUsWindow extends LitElement {
     this.message = (e.target as HTMLTextAreaElement).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: the main fields then
+   * hold the client. Unticking with the client's fields still empty moves the details back.
+   */
+  onToggleBrokerReferral = (e: Event): void => {
+    const isBrokerReferral = (e.target as HTMLInputElement).checked;
+    const brokerIsEmpty =
+      !this.brokerFirstName && !this.brokerLastName && !this.brokerEmail;
+    if (isBrokerReferral && brokerIsEmpty) {
+      this.brokerFirstName = this.firstName;
+      this.brokerLastName = this.lastName;
+      this.brokerEmail = this.email;
+      this.firstName = "";
+      this.lastName = "";
+      this.email = "";
+      // There's no broker phone field: what was typed is the broker's, not the client's.
+      this.phoneNumber = "";
+      this.phoneNumberE164 = null;
+    } else if (
+      !isBrokerReferral &&
+      !this.firstName &&
+      !this.lastName &&
+      !this.email
+    ) {
+      this.firstName = this.brokerFirstName;
+      this.lastName = this.brokerLastName;
+      this.email = this.brokerEmail;
+      this.brokerFirstName = "";
+      this.brokerLastName = "";
+      this.brokerEmail = "";
+    }
+    this.isBrokerReferral = isBrokerReferral;
+    this.hasNameError = false;
+    this.hasEmailError = false;
+    this.hasPhoneNumberError = false;
+    this.hasBrokerNameError = false;
+    this.brokerEmailError = null;
+    this.windowHeight = this.baseHeight() + 30 * this.getNumErrors();
+  };
+
+  onChangeBrokerField =
+    (
+      field:
+        | "brokerFirstName"
+        | "brokerLastName"
+        | "brokerEmail"
+        | "brokerFirmName"
+    ) =>
+    (e: Event): void => {
+      if (!e.target) {
+        return;
+      }
+      this[field] = (e.target as HTMLInputElement).value;
+    };
+
+  /** The form's height without error lines: the broker's section adds rows when shown. */
+  baseHeight = (): number =>
+    525 +
+    // The broker's rows, less the 79px the compact message box gives back.
+    (this.brokerIntakeEnabled && this.isBrokerReferral ? 170 - 79 : 0);
+
+  /** 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(),
+        }
+      : null;
+
   validateFormFields = (): void => {
     this.hasNameError = false;
     this.hasEmailError = false;
     this.hasPhoneNumberError = false;
     this.hasMessageError = false;
     this.hasSubmissionError = false;
+    this.hasBrokerNameError = false;
+    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";
+      }
+    }
     if (!this.firstName || !this.lastName) {
       this.hasNameError = true;
     }
@@ -231,7 +370,7 @@ export class EmailUsWindow extends LitElement {
     if (!this.phoneNumberE164) {
       this.hasPhoneNumberError = true;
     }
-    this.windowHeight = 525 + 30 * this.getNumErrors();
+    this.windowHeight = this.baseHeight() + 30 * this.getNumErrors();
   };
 
   onClick = async (): Promise<void> => {
@@ -243,7 +382,9 @@ export class EmailUsWindow extends LitElement {
       this.hasNameError ||
       this.hasEmailError ||
       this.hasPhoneNumberError ||
-      this.hasMessageError
+      this.hasMessageError ||
+      this.hasBrokerNameError ||
+      this.brokerEmailError
     ) {
       return;
     }
@@ -255,7 +396,7 @@ export class EmailUsWindow extends LitElement {
     try {
       this.isSubmitting = true;
       // Height of the button when it's in the loading state
-      this.windowHeight = 525 + 60;
+      this.windowHeight = this.baseHeight() + 60;
       const parsedLeadSource =
         this.selectedLeadSource && this.selectedLeadSource.value
           ? this.selectedLeadSource.value
@@ -288,7 +429,8 @@ export class EmailUsWindow extends LitElement {
                 ? this.selectedLeadSource.value
                 : null,
           }
-        )
+        ),
+        this.brokerReferral()
       );
       this.leadSourceClient?.checkAndHandleForLogLeadSource({
         webchatAction: "email-us",
@@ -299,12 +441,12 @@ export class EmailUsWindow extends LitElement {
       this.hasSubmittedForm = true;
       this.isSubmitting = false;
       // Remove the height of the button when it leaves the loading state
-      this.windowHeight = 525;
+      this.windowHeight = this.baseHeight();
     } catch (e) {
       this.hasSubmissionError = true;
       this.isSubmitting = false;
       // Remove the height of the button when it leaves the loading state
-      this.windowHeight = 525;
+      this.windowHeight = this.baseHeight();
     }
   };
 
@@ -315,9 +457,88 @@ export class EmailUsWindow extends LitElement {
       this.hasPhoneNumberError,
       this.hasMessageError,
       this.hasSubmissionError,
+      this.hasBrokerNameError,
+      !!this.brokerEmailError,
     ].filter((v) => v).length;
   };
 
+  renderBrokerToggle = (): TemplateResult => html`
+    <label class="email-us__broker-toggle">
+      <input
+        type="checkbox"
+        id="broker-referral-toggle"
+        .checked=${this.isBrokerReferral}
+        @change=${this.onToggleBrokerReferral}
+      />
+      Agent or broker? Refer a client
+    </label>
+  `;
+
+  renderBrokerSection = (): TemplateResult => {
+    const inputClasses = (extra: string) =>
+      classMap({
+        ["webchat-input"]: true,
+        [extra]: true,
+        ["webchat-font__desktop"]: !isMobile(),
+        ["webchat-font__mobile"]: isMobile(),
+      });
+    return html`
+      ${this.isBrokerReferral
+        ? html`
+            <div class="email-us__section-label">Your details</div>
+            <div class="email-us__name-wrapper">
+              <input
+                type="text"
+                class=${inputClasses("email-us__name-input")}
+                placeholder="Your first name"
+                autocomplete="given-name"
+                .value=${this.brokerFirstName}
+                @input=${this.onChangeBrokerField("brokerFirstName")}
+              />
+              <input
+                type="text"
+                class=${inputClasses("email-us__name-input")}
+                placeholder="Your last name"
+                autocomplete="family-name"
+                .value=${this.brokerLastName}
+                @input=${this.onChangeBrokerField("brokerLastName")}
+              />
+            </div>
+            ${this.hasBrokerNameError
+              ? html`<div class="email-us__error-text">
+                  Enter your full name
+                </div>`
+              : ""}
+            <div class="email-us__vertical-spacer"></div>
+            <input
+              type="email"
+              class=${inputClasses("email-us__contact-input")}
+              placeholder="Your email"
+              autocomplete="email"
+              .value=${this.brokerEmail}
+              @input=${this.onChangeBrokerField("brokerEmail")}
+            />
+            ${this.brokerEmailError
+              ? html`<div class="email-us__error-text">
+                  ${this.brokerEmailError}
+                </div>`
+              : ""}
+            <div class="email-us__vertical-spacer"></div>
+            <input
+              type="text"
+              class=${inputClasses("email-us__contact-input")}
+              placeholder="Brokerage (optional)"
+              autocomplete="organization"
+              .value=${this.brokerFirmName}
+              @input=${this.onChangeBrokerField("brokerFirmName")}
+            />
+            <div class="email-us__vertical-spacer"></div>
+            <div class="email-us__section-label">Your client</div>
+          `
+        : ""}
+    `;
+  };
+
   render = (): TemplateResult => {
     installDetailsWindow();
     installActionConfirmButton();
@@ -350,8 +571,9 @@ export class EmailUsWindow extends LitElement {
             </div>
             <div class="email-us__vertical-spacer"></div>
             <div class="email-us__submitted-info">
-              Thank you for your message. A member of our leasing team will
-              contact you.
+              ${this.isBrokerReferral
+                ? "Thank you for the referral. A member of our leasing team will contact your client."
+                : "Thank you for your message. A member of our leasing team will contact you."}
             </div>
           </div>
         </details-window>
@@ -366,6 +588,7 @@ export class EmailUsWindow extends LitElement {
         height="${this.windowHeight}px"
       >
         <div class="email-us-wrapper" id="email-us-form">
+          ${this.brokerIntakeEnabled ? this.renderBrokerSection() : ""}
           <div class="email-us__name-wrapper">
             <input
               type="text"
@@ -375,10 +598,12 @@ export class EmailUsWindow extends LitElement {
                 ["webchat-font__desktop"]: !isMobile(),
                 ["webchat-font__mobile"]: isMobile(),
               })}
-              placeholder="First name"
-              autocomplete="given-name"
-              value="${this.firstName}"
-              @keyup=${this.onChangeFirstName}
+              placeholder=${this.isBrokerReferral
+                ? "Client first name"
+                : "First name"}
+              autocomplete=${this.isBrokerReferral ? "off" : "given-name"}
+              .value=${this.firstName}
+              @input=${this.onChangeFirstName}
             />
             <div class="email-us__horizontal-spacer"></div>
             <input
@@ -389,22 +614,28 @@ export class EmailUsWindow extends LitElement {
                 ["webchat-font__desktop"]: !isMobile(),
                 ["webchat-font__mobile"]: isMobile(),
               })}
-              placeholder="Last name"
-              autocomplete="family-name"
-              value="${this.lastName}"
-              @keyup=${this.onChangeLastName}
+              placeholder=${this.isBrokerReferral
+                ? "Client last name"
+                : "Last name"}
+              autocomplete=${this.isBrokerReferral ? "off" : "family-name"}
+              .value=${this.lastName}
+              @input=${this.onChangeLastName}
             />
           </div>
           ${this.hasNameError
             ? html`
-                <div class="email-us__error-text">Enter your full name</div>
+                <div class="email-us__error-text">
+                  ${this.isBrokerReferral
+                    ? "Enter your client's full name"
+                    : "Enter your full name"}
+                </div>
               `
             : ""}
           <div class="email-us__vertical-spacer"></div>
           <input
             type="email"
-            placeholder="Email"
-            autocomplete="email"
+            placeholder=${this.isBrokerReferral ? "Client email" : "Email"}
+            autocomplete=${this.isBrokerReferral ? "off" : "email"}
             class=${classMap({
               ["webchat-input"]: true,
               ["email-us__contact-input"]: true,
@@ -412,7 +643,7 @@ export class EmailUsWindow extends LitElement {
               ["webchat-font__mobile"]: isMobile(),
             })}
             .value=${this.email}
-            @keyup=${this.onChangeEmail}
+            @input=${this.onChangeEmail}
           />
           ${this.hasEmailError
             ? html`
@@ -463,6 +694,7 @@ export class EmailUsWindow extends LitElement {
             .value=${this.message}
             class=${classMap({
               ["email-us__message-input"]: true,
+              ["email-us__message-input--compact"]: this.isBrokerReferral,
               ["webchat-input"]: true,
               ["webchat-textarea"]: true,
               ["webchat-font__desktop"]: !isMobile(),
@@ -473,7 +705,13 @@ export class EmailUsWindow extends LitElement {
           ${this.hasMessageError
             ? html` <div class="email-us__error-text">Include a message</div> `
             : ""}
-          <div class="action-bttn-container">
+          <div
+            class=${classMap({
+              ["action-bttn-container"]: true,
+              ["action-bttn-container--with-toggle"]: this.brokerIntakeEnabled,
+            })}
+          >
+            ${this.brokerIntakeEnabled ? this.renderBrokerToggle() : ""}
             <action-confirm-button
               .onClick=${this.onClick}
               .isLoading=${this.isSubmitting}
@@ -508,6 +746,14 @@ 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,
@@ -519,7 +765,8 @@ const createEmail = async (
   buildingSlug: string,
   leadSources: string[],
   chatId?: string | null,
-  leadSourcesWithTimestamps?: LeadSourceSubmittedListItem[]
+  leadSourcesWithTimestamps?: LeadSourceSubmittedListItem[],
+  broker?: BrokerReferral | null
 ) => {
   const queryParams = new URLSearchParams(window.location.search);
   const requestBody = {
@@ -538,6 +785,15 @@ 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,
+        }
+      : {}),
   };
   pushGtmEvent("emailUsSubmitted", {
     firstName,
@@ -548,6 +804,8 @@ const createEmail = async (
     originatingSource:
       leadSources.find((i) => i !== "property-website") || null,
     conversationTrackingId: chatId ?? null,
+    // A flag only: the broker's own details stay out of the data layer.
+    ...(broker ? { isBrokerReferral: true } : {}),
   });
   await axios.post(
     "https://app.meetelise.com/platformApi/state/create/emailMe",

package/src/WebComponent/launcher/Launcher.ts

@@ -157,6 +157,8 @@ export class Launcher extends LitElement {
   layoutOptions: LayoutOption[] = [];
   @property({ attribute: true })
   bedroomPreferenceRequired = false;
+  @property({ attribute: false })
+  brokerIntakeEnabled = false;
   @property({ attribute: true })
   hasDynamicSchedulingEnabled = false;
 
@@ -1343,6 +1345,7 @@ export class Launcher extends LitElement {
                 .orgLegalName=${this.orgLegalName}
                 .country=${this.country}
                 .buildingState=${this.buildingState}
+                .brokerIntakeEnabled=${this.brokerIntakeEnabled}
               >
               </email-us-window>
             </div>`

package/src/WebComponent/me-chat.ts

@@ -15,6 +15,7 @@ import {
   fetchFeatureFlagUseApplicationsLinkReplacement,
   fetchFeatureFlagUseOverrideContactUsForm,
   fetchTrackedRolloutBedroomPreferenceRequired,
+  fetchTrackedRolloutBrokerIntake,
 } from "../fetchFeatureFlag";
 import { HIDE_DATA_LAYER_PII_ORG_IDS, setGtmPiiRedaction } from "../gtm";
 import fetchPhoneNumberFromSource, {
@@ -180,6 +181,8 @@ export class MEChat extends LitElement {
   @state()
   private bedroomPreferenceRequired = false;
   @state()
+  private brokerIntakeEnabled = false;
+  @state()
   private phoneNumberForSource: NumberForSelectedSource | null = null;
   @state()
   private hasMounted = false;
@@ -380,11 +383,13 @@ export class MEChat extends LitElement {
       featureFlagUseApplicationsLinkReplacement,
       isAip,
       bedroomPreferenceRequired,
+      brokerIntakeEnabled,
     ] = await Promise.all([
       fetchLeadSources(this.orgSlug, this.buildingSlug),
       fetchFeatureFlagUseApplicationsLinkReplacement(this.buildingSlug),
       fetchBuildingAip(this.buildingSlug),
       fetchTrackedRolloutBedroomPreferenceRequired(this.buildingSlug),
+      fetchTrackedRolloutBrokerIntake(this.buildingSlug),
     ]);
 
     if (this.buildingWebchatView) {
@@ -397,6 +402,7 @@ export class MEChat extends LitElement {
     this.featureFlagShowDropdown =
       featureFlagShowDropdown as FeatureFlagsShowDropdown;
     this.bedroomPreferenceRequired = bedroomPreferenceRequired;
+    this.brokerIntakeEnabled = brokerIntakeEnabled;
 
     // The backend is cached for ~4 hours, so falling back to the existing api request until the cache propagates all the changes
     const buildingPhoneNumber = buildingDetails.textWithUsPhoneNumber
@@ -1050,6 +1056,7 @@ export class MEChat extends LitElement {
                   .layoutOptions=${this.buildingWebchatView?.layoutOptions ??
                   []}
                   .bedroomPreferenceRequired=${this.bedroomPreferenceRequired}
+                  .brokerIntakeEnabled=${this.brokerIntakeEnabled}
                   .launcherStyles=${this.launcherStyles}
                   .primaryColor=${this.primaryColor}
                   .backgroundColor=${this.backgroundColor}