@meetelise/chat 1.55.3 → 1.57.0

package/src/MyPubnub.ts

@@ -11,6 +11,11 @@ import { shouldCreateAsDevState } from "./shouldCreateAsDevState";
 import { WidgetType } from "./main/MEChat";
 import { BuildingWebchatView } from "./fetchBuildingWebchatView";
 import { LeadSourceMultitouchClient } from "./WebComponent/LeadSourceMultitouchClient";
+import {
+  getWebchatPageContext,
+  parseWebchatNavigation,
+  WebchatNavigation,
+} from "./webchatNavigation";
 
 interface TokenResponse {
   auth: {
@@ -29,6 +34,7 @@ enum MessageType {
   noReply = "no-reply",
   text = "text",
   media = "media",
+  navigation = "navigation",
 }
 
 interface RawPubnubMessage {
@@ -43,6 +49,7 @@ interface RawPubnubMessage {
     order?: number;
     stream_id?: string;
     media?: ChatMediaFile[];
+    navigation?: unknown;
   };
   publisher: string;
   subscription: string;
@@ -73,7 +80,18 @@ export interface SimpleMediaChatMessage {
   type: SimpleMessageTypes.media;
 }
 
-export type SimpleChatMessage = SimpleTextChatMessage | SimpleMediaChatMessage;
+/** A "Take me to {label}" button the agent sends after a reply's text. */
+export interface SimpleNavigationChatMessage {
+  timestamp: number;
+  navigation: WebchatNavigation;
+  isLeadMessage: boolean;
+  type: SimpleMessageTypes.navigation;
+}
+
+export type SimpleChatMessage =
+  | SimpleTextChatMessage
+  | SimpleMediaChatMessage
+  | SimpleNavigationChatMessage;
 
 export const isSimpleTextChatMessage = (
   message: SimpleChatMessage
@@ -87,9 +105,16 @@ export const isSimpleMediaChatMessage = (
   return message.type === SimpleMessageTypes.media;
 };
 
+export const isSimpleNavigationChatMessage = (
+  message: SimpleChatMessage
+): message is SimpleNavigationChatMessage => {
+  return message.type === SimpleMessageTypes.navigation;
+};
+
 export enum SimpleMessageTypes {
   text = "text",
   media = "media",
+  navigation = "navigation",
 }
 
 class MyPubnub {
@@ -111,6 +136,22 @@ class MyPubnub {
 
   private widgetType: WidgetType = WidgetType.Default;
 
+  /**
+   * Org-level webchat (`centralConvo: true`): the session is org-anchored, so it
+   * must come from /webchat/init and never from the per-lead v1 token fallback.
+   */
+  centralConvo = false;
+
+  /** The numeric id of the building the snippet names, sent as `declaredBuildingId`. */
+  declaredBuildingId: number | null = null;
+
+  /**
+   * The localStorage key the conversation (lead id) is saved under. It is the
+   * building slug, except in org-level webchat, where the conversation stays
+   * org-level even after the widget adopts the org's triage general building.
+   */
+  chatStorageSlug: string;
+
   pubnub: Pubnub | null = null;
   leadUserId = "";
   channel = "";
@@ -193,6 +234,7 @@ class MyPubnub {
     widgetType: WidgetType = WidgetType.Default
   ) {
     this.buildingSlug = buildingSlug;
+    this.chatStorageSlug = buildingSlug;
     this.buildingWebchatView = buildingDetails;
     this.orgSlug = orgSlug;
     this.leadSource = leadSource;
@@ -212,12 +254,20 @@ class MyPubnub {
     lead_id: string;
     channel: string;
     expires_in_seconds: number;
+    /**
+     * Org-level webchat only: the org's triage general building, which the
+     * widget then runs as.
+     */
+    building_slug?: string;
   } | null> {
     try {
-      const payload: Record<string, string> = {
+      const payload: Record<string, string | boolean> = {
         building_slug: buildingSlug,
         org_slug: orgSlug,
       };
+      if (this.centralConvo) {
+        payload.central_convo = true;
+      }
       if (existingLeadId) {
         payload.lead_id = existingLeadId;
       }
@@ -244,6 +294,18 @@ class MyPubnub {
     }
   }
 
+  /**
+   * Org-level webchat: run as the building /webchat/init resolved (the org's
+   * triage general building), so messages carry its id, slug and AI user.
+   */
+  adoptBuilding(
+    buildingSlug: string,
+    buildingDetails: BuildingWebchatView
+  ): void {
+    this.buildingSlug = buildingSlug;
+    this.buildingWebchatView = buildingDetails;
+  }
+
   private checkAndHandleDelayStreamingMessages = ({
     delayToFetchHistoryInMs = 10000,
   }: { delayToFetchHistoryInMs?: number } = {}): void => {
@@ -407,6 +469,10 @@ class MyPubnub {
         return response.data;
       }
 
+      // Org-level sessions only exist through /webchat/init, so there is no
+      // v1 session to fall back to.
+      if (this.centralConvo) return null;
+
       // v1 fallback for returning users with existing localStorage sessions
       const response = await axios.get(
         `${
@@ -665,7 +731,7 @@ class MyPubnub {
       if (!this.pubnub) {
         // ONLY create/gets a chat session if user actually wants to chat
         const chatStorageKey = createChatStorageKey(
-          this.buildingSlug,
+          this.chatStorageSlug,
           true,
           this.leadUserId
         );
@@ -728,6 +794,8 @@ class MyPubnub {
               leadSource: this.leadSource,
               widgetType: this.widgetType,
               isDevState: shouldCreateAsDevState(location.href),
+              // Read by the backend only for orgs in the org-level webchat rollout.
+              ...getWebchatPageContext(this.declaredBuildingId),
               lead_sources_with_timestamps: (
                 this.leadSourceMultitouchClient?.getSafeLeadSourceTouchpointsWithDefault(
                   { includedUserSelectedLeadSource: null }
@@ -815,14 +883,28 @@ class MyPubnub {
     const uniqueMessages = this.removeDuplicatedRawPubnubMessages(messages);
 
     uniqueMessages.forEach((message: RawPubnubMessage) => {
-      // Translate media messages
-      if (message.message.messageType === "media") {
+      if (message.message.messageType === MessageType.navigation) {
+        // A "Take me there" button; dropped if its url or label is unusable.
+        const navigation = parseWebchatNavigation(message.message.navigation);
+        if (navigation) {
+          parsedMessages.push({
+            timestamp: message.timetoken,
+            navigation,
+            isLeadMessage: false,
+            type: SimpleMessageTypes.navigation,
+          });
+        }
+      } else if (message.message.messageType === "media") {
+        // Translate media messages
         parsedMessages.push({
           timestamp: message.timetoken,
           media: message.message.media ?? [],
           isLeadMessage: this.isLeadMessage(message),
           type: SimpleMessageTypes.media,
         });
+      } else if (typeof message.message.text !== "string") {
+        // A message type this widget doesn't know, with no text to show.
+        return;
       } else if (
         // Translate non-streaming messages
         !message.message.stream_id ||

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

@@ -206,6 +206,16 @@ export class TourScheduler extends LitElement {
   brokerEmail = "";
   @state()
   brokerFirmName = "";
+  @state()
+  brokerPhone = "";
+  @state()
+  brokerPhoneE164: string | null = null;
+  @state()
+  brokerPhoneCountry: string | null = null;
+  @state()
+  brokerPhoneIsValid = false;
+  @state()
+  brokerPhoneHasBlurred = false;
 
   @property({ attribute: false })
   leadSources: string[] = [];
@@ -669,25 +679,44 @@ export class TourScheduler extends LitElement {
     this.email = (e.target as HTMLInputElement).value;
   };
 
+  onChangeBrokerPhone = (
+    event: CustomEvent<InternationalPhoneChangeDetail>
+  ): void => {
+    this.brokerPhone = event.detail.formattedValue;
+    this.brokerPhoneE164 = event.detail.e164;
+    this.brokerPhoneCountry = event.detail.country;
+    this.brokerPhoneIsValid = event.detail.isValid;
+  };
+
   /**
    * 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.
+   * the name, email and phone 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;
+      !this.brokerFirstName &&
+      !this.brokerLastName &&
+      !this.brokerEmail &&
+      !this.brokerPhone;
     const clientIsEmpty =
-      !this.firstNameInputValue && !this.lastNameInputValue && !this.email;
+      !this.firstNameInputValue &&
+      !this.lastNameInputValue &&
+      !this.email &&
+      !this.phoneNumber;
     if (isBrokerReferral && brokerIsEmpty) {
       this.brokerFirstName = this.firstNameInputValue;
       this.brokerLastName = this.lastNameInputValue;
       this.brokerEmail = this.email;
+      this.brokerPhone = this.phoneNumber;
+      this.brokerPhoneE164 = this.phoneNumberE164;
+      this.brokerPhoneCountry = this.phoneCountry;
+      this.brokerPhoneIsValid = this.phoneNumberIsValid;
+      this.brokerPhoneHasBlurred = this.phoneNumberHasBlurred;
       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;
@@ -696,9 +725,18 @@ export class TourScheduler extends LitElement {
       this.firstNameInputValue = this.brokerFirstName;
       this.lastNameInputValue = this.brokerLastName;
       this.email = this.brokerEmail;
+      this.phoneNumber = this.brokerPhone;
+      this.phoneNumberE164 = this.brokerPhoneE164;
+      this.phoneCountry = this.brokerPhoneCountry;
+      this.phoneNumberIsValid = this.brokerPhoneIsValid;
+      this.phoneNumberHasBlurred = this.brokerPhoneHasBlurred;
       this.brokerFirstName = "";
       this.brokerLastName = "";
       this.brokerEmail = "";
+      this.brokerPhone = "";
+      this.brokerPhoneE164 = null;
+      this.brokerPhoneIsValid = false;
+      this.brokerPhoneHasBlurred = false;
     }
     this.isBrokerReferral = isBrokerReferral;
   };
@@ -710,7 +748,8 @@ export class TourScheduler extends LitElement {
           this.brokerFirstName,
           this.brokerLastName,
           this.brokerEmail,
-          this.brokerFirmName
+          this.brokerFirmName,
+          this.brokerPhoneE164 ?? ""
         )
       : null;
 
@@ -729,9 +768,12 @@ export class TourScheduler extends LitElement {
       !this.bedroomPreferenceRequired || !!this.selectedLayoutValue,
     broker: (): boolean => {
       const broker = this.brokerReferral();
+      // The broker's phone is optional, but one that's been typed has to be valid.
       return (
         !broker ||
-        (!brokerNameIsMissing(broker) && !brokerEmailError(broker, this.email))
+        (!brokerNameIsMissing(broker) &&
+          !brokerEmailError(broker, this.email) &&
+          (!this.brokerPhone || this.brokerPhoneIsValid))
       );
     },
   };
@@ -1318,7 +1360,7 @@ export class TourScheduler extends LitElement {
 
   renderBrokerToggle = (): TemplateResult => html`
     <label class="broker-toggle">
-      <span>Are you an agent or locator?</span>
+      <span>Are you a broker or locator?</span>
       <input
         type="checkbox"
         role="switch"
@@ -1392,6 +1434,25 @@ export class TourScheduler extends LitElement {
         />
         ${emailError ? html`<p class="error-message">${emailError}</p>` : ""}
       </div>
+      <div class="inputContainer">
+        <international-phone-input
+          placeholder="Your phone (optional)"
+          .country=${this.brokerPhoneCountry ?? this.country}
+          .value=${this.brokerPhone}
+          .invalid=${this.brokerPhoneHasBlurred &&
+          !!this.brokerPhone &&
+          !this.brokerPhoneIsValid}
+          @phone-change=${this.onChangeBrokerPhone}
+          @phone-blur=${() => {
+            this.brokerPhoneHasBlurred = true;
+          }}
+        ></international-phone-input>
+        ${this.brokerPhoneHasBlurred &&
+        !!this.brokerPhone &&
+        !this.brokerPhoneIsValid
+          ? html`<p class="error-message">Invalid phone number</p>`
+          : ""}
+      </div>
       <div class="inputContainer">
         <input
           class=${inputClasses()}
@@ -1405,6 +1466,7 @@ export class TourScheduler extends LitElement {
           }}
         />
       </div>
+      ${this.renderBrokerToggle()}
       <div class="section-label">Your client</div>
     `;
   }
@@ -1488,7 +1550,9 @@ export class TourScheduler extends LitElement {
             ? html`<p class="error-message">Invalid phone number</p>`
             : ""}
         </div>
-        ${this.brokerIntakeEnabled ? this.renderBrokerToggle() : ""}
+        ${this.brokerIntakeEnabled && !isReferral
+          ? this.renderBrokerToggle()
+          : ""}
         ${this.layoutOptions.length > 0
           ? html` <me-select
               id="layout"

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

@@ -243,6 +243,16 @@ export class EmailUsWindow extends LitElement {
   brokerEmail = "";
   @state()
   brokerFirmName = "";
+  @state()
+  brokerPhone = "";
+  @state()
+  brokerPhoneE164: string | null = null;
+  @state()
+  brokerPhoneCountry: string | null = null;
+  @state()
+  brokerPhoneIsValid = false;
+  @state()
+  hasBrokerPhoneError = false;
 
   @query("me-select#leadSource")
   selectedLeadSource!: MESelect;
@@ -303,6 +313,15 @@ export class EmailUsWindow extends LitElement {
     this.phoneCountry = e.detail.country;
   };
 
+  onChangeBrokerPhone = (
+    e: CustomEvent<InternationalPhoneChangeDetail>
+  ): void => {
+    this.brokerPhone = e.detail.formattedValue;
+    this.brokerPhoneE164 = e.detail.e164;
+    this.brokerPhoneCountry = e.detail.country;
+    this.brokerPhoneIsValid = e.detail.isValid;
+  };
+
   onChangeMessage = (e: Event): void => {
     if (!e.target) {
       return;
@@ -313,36 +332,49 @@ export class EmailUsWindow extends LitElement {
 
   /**
    * 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 name, email and phone 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;
+      !this.brokerFirstName &&
+      !this.brokerLastName &&
+      !this.brokerEmail &&
+      !this.brokerPhone;
     if (isBrokerReferral && brokerIsEmpty) {
       this.brokerFirstName = this.firstName;
       this.brokerLastName = this.lastName;
       this.brokerEmail = this.email;
+      this.brokerPhone = this.phoneNumber;
+      this.brokerPhoneE164 = this.phoneNumberE164;
+      this.brokerPhoneCountry = this.phoneCountry;
+      this.brokerPhoneIsValid = !!this.phoneNumberE164;
       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.email &&
+      !this.phoneNumber
     ) {
       this.firstName = this.brokerFirstName;
       this.lastName = this.brokerLastName;
       this.email = this.brokerEmail;
+      this.phoneNumber = this.brokerPhone;
+      this.phoneNumberE164 = this.brokerPhoneE164;
+      this.phoneCountry = this.brokerPhoneCountry;
       this.brokerFirstName = "";
       this.brokerLastName = "";
       this.brokerEmail = "";
+      this.brokerPhone = "";
+      this.brokerPhoneE164 = null;
+      this.brokerPhoneIsValid = false;
     }
     this.isBrokerReferral = isBrokerReferral;
     this.hasNameError = false;
@@ -350,6 +382,7 @@ export class EmailUsWindow extends LitElement {
     this.hasPhoneNumberError = false;
     this.hasBrokerNameError = false;
     this.brokerEmailError = null;
+    this.hasBrokerPhoneError = false;
     this.windowHeight = this.baseHeight() + 30 * this.getNumErrors();
   };
 
@@ -372,7 +405,7 @@ export class EmailUsWindow extends LitElement {
   baseHeight = (): number =>
     525 +
     // The broker's rows, less the 79px the compact message box gives back.
-    (this.brokerIntakeEnabled && this.isBrokerReferral ? 170 - 79 : 0);
+    (this.brokerIntakeEnabled && this.isBrokerReferral ? 222 - 79 : 0);
 
   /** The broker's details to send, only when the submitter says they're referring a client. */
   brokerReferral = (): BrokerReferral | null =>
@@ -381,7 +414,8 @@ export class EmailUsWindow extends LitElement {
           this.brokerFirstName,
           this.brokerLastName,
           this.brokerEmail,
-          this.brokerFirmName
+          this.brokerFirmName,
+          this.brokerPhoneE164 ?? ""
         )
       : null;
 
@@ -393,10 +427,13 @@ export class EmailUsWindow extends LitElement {
     this.hasSubmissionError = false;
     this.hasBrokerNameError = false;
     this.brokerEmailError = null;
+    this.hasBrokerPhoneError = false;
     const broker = this.brokerReferral();
     if (broker) {
       this.hasBrokerNameError = brokerNameIsMissing(broker);
       this.brokerEmailError = brokerEmailError(broker, this.email);
+      // The broker's phone is optional, but one that's been typed has to be valid.
+      this.hasBrokerPhoneError = !!this.brokerPhone && !this.brokerPhoneIsValid;
     }
     if (!this.firstName || !this.lastName) {
       this.hasNameError = true;
@@ -421,7 +458,8 @@ export class EmailUsWindow extends LitElement {
       this.hasPhoneNumberError ||
       this.hasMessageError ||
       this.hasBrokerNameError ||
-      this.brokerEmailError
+      this.brokerEmailError ||
+      this.hasBrokerPhoneError
     ) {
       return;
     }
@@ -496,12 +534,13 @@ export class EmailUsWindow extends LitElement {
       this.hasSubmissionError,
       this.hasBrokerNameError,
       !!this.brokerEmailError,
+      this.hasBrokerPhoneError,
     ].filter((v) => v).length;
   };
 
   renderBrokerToggle = (): TemplateResult => html`
     <label class="email-us__broker-toggle">
-      <span>Are you an agent or locator?</span>
+      <span>Are you a broker or locator?</span>
       <input
         type="checkbox"
         role="switch"
@@ -563,6 +602,19 @@ export class EmailUsWindow extends LitElement {
                 </div>`
               : ""}
             <div class="email-us__vertical-spacer"></div>
+            <international-phone-input
+              placeholder="Your phone (optional)"
+              .country=${this.brokerPhoneCountry ?? this.country}
+              .value=${this.brokerPhone}
+              .invalid=${this.hasBrokerPhoneError}
+              @phone-change=${this.onChangeBrokerPhone}
+            ></international-phone-input>
+            ${this.hasBrokerPhoneError
+              ? html`<div class="email-us__error-text">
+                  Enter a valid phone number
+                </div>`
+              : ""}
+            <div class="email-us__vertical-spacer"></div>
             <input
               type="text"
               class=${inputClasses("email-us__contact-input")}
@@ -572,6 +624,8 @@ export class EmailUsWindow extends LitElement {
               @input=${this.onChangeBrokerField("brokerFirmName")}
             />
             <div class="email-us__vertical-spacer"></div>
+            ${this.renderBrokerToggle()}
+            <div class="email-us__vertical-spacer"></div>
             <div class="email-us__section-label">Your client</div>
           `
         : ""}
@@ -706,7 +760,7 @@ export class EmailUsWindow extends LitElement {
               `
             : ""}
           <div class="email-us__vertical-spacer"></div>
-          ${this.brokerIntakeEnabled
+          ${this.brokerIntakeEnabled && !this.isBrokerReferral
             ? html`${this.renderBrokerToggle()}
                 <div class="email-us__vertical-spacer"></div>`
             : ""}

package/src/WebComponent/actions/international-phone-input.ts

@@ -130,6 +130,9 @@ export class InternationalPhoneInput extends LitElement {
   @property({ type: Boolean })
   invalid = false;
 
+  @property({ type: String })
+  placeholder = "Phone";
+
   @state()
   private selectedCountry = "US";
 
@@ -287,7 +290,7 @@ export class InternationalPhoneInput extends LitElement {
           class="webchat-input"
           type="tel"
           inputmode="tel"
-          placeholder="Phone"
+          placeholder=${this.placeholder}
           name="phone"
           autocomplete="tel-national"
           maxlength="30"

package/src/WebComponent/brokerReferral.ts

@@ -6,6 +6,8 @@ export type BrokerReferral = {
   lastName: string;
   email: string;
   firmName: string;
+  /** E.164, or "" when the form has no broker phone or it was left empty. */
+  phone: string;
 };
 
 /** The broker's typed details, trimmed, as a referral. */
@@ -13,12 +15,14 @@ export const toBrokerReferral = (
   firstName: string,
   lastName: string,
   email: string,
-  firmName: string
+  firmName: string,
+  phone = ""
 ): BrokerReferral => ({
   firstName: firstName.trim(),
   lastName: lastName.trim(),
   email: email.trim(),
   firmName: firmName.trim(),
+  phone,
 });
 
 export const brokerNameIsMissing = (broker: BrokerReferral): boolean =>
@@ -51,5 +55,6 @@ export const brokerRequestFields = (
         broker_last_name: broker.lastName,
         broker_email: broker.email,
         broker_firm_name: broker.firmName || null,
+        ...(broker.phone ? { broker_phone: broker.phone } : {}),
       }
     : {};