@meetelise/chat 1.20.57 → 1.20.59

package/src/MEChat.ts

@@ -43,8 +43,8 @@ export default class MEChat {
     this.handleBuildingslug(meChat, opts.building);
     meChat.setAttribute("class", "meetelise-chat");
     meChat.setAttribute("role", "dialog");
-    meChat.setAttribute("aria-labelledby", "aria-label");
-    meChat.setAttribute("aria-describedby", "aria-describe");
+    meChat.setAttribute("aria-label", "EliseAI Widget");
+    meChat.setAttribute("aria-describedby", "aria-describe-info");
     meChat.setAttribute("aria-modal", "true");
     if (opts.themeId) {
       meChat.setAttribute("themeId", opts.themeId);

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

@@ -2,7 +2,7 @@ import { css, html, LitElement, PropertyValueMap, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import {
   shortcutKeyIsPressed,
-  formatToPhone,
+  formatToPhoneInput,
   isPrintableCharacter,
 } from "../actions/formatPhoneNumber";
 import "./tour-type-option.ts";
@@ -180,7 +180,7 @@ export class TourScheduler extends LitElement {
         this.phoneNumber.slice(0, cursorPosition) +
         e.key +
         this.phoneNumber.slice(cursorPosition);
-      this.phoneNumber = formatToPhone(updated.replace(/\D/g, ""));
+      this.phoneNumber = formatToPhoneInput(updated.replace(/\D/g, ""));
       this.phoneInput.value = this.phoneNumber;
     } else if (e.key === "Backspace") {
       /*
@@ -216,7 +216,7 @@ export class TourScheduler extends LitElement {
         0,
         -1
       )}${digitsAfterCursor}`;
-      this.phoneNumber = formatToPhone(updatedDigits);
+      this.phoneNumber = formatToPhoneInput(updatedDigits);
       this.phoneInput.value = this.phoneNumber;
       const numOfCharactersDeleted =
         originalCharacterCount - this.phoneNumber.length;
@@ -287,7 +287,7 @@ export class TourScheduler extends LitElement {
     const numbersAfterCursor = cursorPosition
       ? this.phoneInput.value.slice(cursorPosition).replace(/\D/g, "")
       : "";
-    this.phoneNumber = formatToPhone(this.phoneInput.value);
+    this.phoneNumber = formatToPhoneInput(this.phoneInput.value);
 
     // EXAMPLES: (123)| 4            numbersAfterCursor will be '4'.
     let cursorNegativeIndex = 0;
@@ -1109,7 +1109,7 @@ export class TourScheduler extends LitElement {
                 if (!e.target) {
                   return;
                 }
-                this.phoneNumber = formatToPhone(
+                this.phoneNumber = formatToPhoneInput(
                   (e.target as HTMLInputElement).value
                 );
               }}

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

@@ -8,7 +8,7 @@ import postLeadSources from "../../postLeadSources";
 import "../me-select.ts";
 import { MESelect } from "../me-select";
 import {
-  formatToPhone,
+  formatToPhoneInput,
   isModifierKey,
   isNumericInput,
 } from "./formatPhoneNumber";
@@ -177,7 +177,7 @@ export class EmailUsWindow extends LitElement {
     }
     const inputElement = e.target as HTMLInputElement;
 
-    this.phoneNumber = formatToPhone(inputElement.value);
+    this.phoneNumber = formatToPhoneInput(inputElement.value);
 
     this.phoneNumberInputRef.value.value = this.phoneNumber;
   };

package/src/WebComponent/actions/formatPhoneNumber.ts

@@ -1,7 +1,8 @@
 /**
  * For now, only handles the US phone number case.....
+ * Formats into phone number as you type
  */
-export const formatToPhone = (phoneNumber: string): string => {
+export const formatToPhoneInput = (phoneNumber: string): string => {
   const input = phoneNumber.replace(/\D/g, "").substring(0, 10);
   const areaCode = input.substring(0, 3);
   const middle = input.substring(3, 6);
@@ -19,6 +20,19 @@ export const formatToPhone = (phoneNumber: string): string => {
   return "";
 };
 
+/**
+ * Formats a phone number into a human-readable format.
+ */
+export const formatPhoneNumber = (phoneNumberString: string): string => {
+  const cleaned = ("" + phoneNumberString).replace(/\D/g, "");
+  const match = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/);
+  if (match) {
+    const intlCode = match[1] ? "+1 " : "";
+    return [intlCode, "(", match[2], ") ", match[3], "-", match[4]].join("");
+  }
+  return phoneNumberString;
+};
+
 export const isNumericInput = (event: KeyboardEvent): boolean => {
   const key = event.keyCode;
   return (key >= 48 && key <= 57) || (key >= 96 && key <= 105);

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

@@ -4,7 +4,7 @@ import { createRef, ref, Ref } from "lit/directives/ref.js";
 import { installActionConfirmButton } from "./action-confirm-button";
 import { installDetailsWindow } from "./details-window";
 import {
-  formatToPhone,
+  formatToPhoneInput,
   isModifierKey,
   isNumericInput,
 } from "./formatPhoneNumber";
@@ -95,7 +95,7 @@ export class TextUsWindow extends LitElement {
     }
     const inputElement = e.target as HTMLInputElement;
 
-    this.phoneNumber = formatToPhone(inputElement.value);
+    this.phoneNumber = formatToPhoneInput(inputElement.value);
 
     this.phoneNumberInputRef.value.value = this.phoneNumber;
   };

package/src/WebComponent/launcherStyles.ts

@@ -330,6 +330,7 @@ export const launcherStyles = css`
     padding: 0;
     cursor: pointer;
     z-index: 1;
+    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
   }
   .minimize-bttn:hover {
     filter: brightness(0.9);

package/src/WebComponent/me-chat.ts

@@ -16,6 +16,9 @@ import fetchBuildingABTestType, {
   abTestTypes,
 } from "../fetchBuildingABTestType";
 import fetchCurrentParsedLeadSource from "../fetchCurrentParsedLeadSource";
+import fetchPhoneNumberFromSource, {
+  NumberForSelectedSource,
+} from "../fetchPhoneNumberFromSource";
 import { getTheme, Theme, ThemeIdString } from "../themes";
 import { isMobile } from "../utils";
 import { installLauncher } from "./Launcher";
@@ -33,6 +36,7 @@ import {
   TabletWhiteStrokeIcon,
   WhiteStrokeTourIcon,
 } from "../svgIcons";
+import { formatPhoneNumber } from "./actions/formatPhoneNumber";
 
 export interface Options {
   building: string;
@@ -150,6 +154,8 @@ export class MEChat extends LitElement {
   private featureFlagShowDropdown: FeatureFlagsShowDropdown =
     FeatureFlagsShowDropdown.always;
   @state()
+  private phoneNumberForSource: NumberForSelectedSource | null = null;
+  @state()
   private hasMounted = false;
   @state()
   private hideLauncher = false;
@@ -186,12 +192,29 @@ export class MEChat extends LitElement {
       fetchCurrentParsedLeadSource(this.buildingSlug, document.referrer),
     ]);
 
+    building.phoneNumber = formatPhoneNumber(building.phoneNumber);
     this.building = building;
     this.buildingABTestType = buildingABTest?.abTestType ?? "";
     this.leadSources = leadSources;
     this.featureFlagShowDropdown = featureFlagShowDropdown;
     this.currentLeadSource = currentLeadSource;
 
+    const phoneNumberForSource = await fetchPhoneNumberFromSource(
+      this.buildingSlug,
+      this.currentLeadSource
+    );
+
+    // if the building does NOT have IVR setup, we want to use the building's phone number
+    if (!phoneNumberForSource) {
+      this.phoneNumberForSource = {
+        number: this.building.phoneNumber,
+        isMatch: false,
+        isPropertyWebsiteCatchall: true,
+      };
+    } else {
+      this.phoneNumberForSource = phoneNumberForSource;
+    }
+
     if (this.currentLeadSource) {
       if (!this.leadSources.includes(this.currentLeadSource)) {
         this.leadSources.push(this.currentLeadSource);
@@ -434,9 +457,8 @@ export class MEChat extends LitElement {
       this.isMobile;
 
     return html`
-      <div>
-        <div id="aria-label" style="display: none;">EliseAI Widget</div>
-        <div id="aria-describe" style="display: none;">
+    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=1">
+      <div id="aria-describe-info" style="display: none;">
           EliseAI widget that allows you to chat with a virtual assistant, book
           a tour, contact the leasing office, and more.
         </div>
@@ -469,53 +491,58 @@ export class MEChat extends LitElement {
             ["hideTab"]: this.isLoading,
           })}
         >
-          ${this.building
-            ? html`<meetelise-launcher
-                ${ref(this.launcherRef)}
-                .isMobile=${this.isMobile}
-                .isFirstMount=${!this.hasMounted}
-                .isMini=${this.useMiniWidget}
-                .buildingId=${this.building?.id ?? 0}
-                .layoutOptions=${this.building?.layoutOptionsV2 ?? []}
-                .unitOptions=${this.building?.unitOptionsV2 ?? []}
-                .tourTypeOptions=${this.building?.tourTypeOptions ?? []}
-                .launcherStyles=${this.launcherStyles}
-                .autoOpenChatWidget=${this.building.autoOpenChatWidget ?? false}
-                chatCallUsHeader=${this.building?.chatCallUsHeader ?? ""}
-                chatId="${this.chatId}"
-                phoneNumber="${this.building?.phoneNumber ?? ""}"
-                textColor="${this.theme.chatHeader.textColor}"
-                backgroundColor="${this.theme.chatPaneBackgroundColor}"
-                orgSlug="${this.orgSlug}"
-                buildingSlug="${this.buildingSlug}"
-                sgtUrl="${this.building?.sgtUrl ?? ""}"
-                buildingABTestType="${this.buildingABTestType ?? ""}"
-                currentLeadSource="${this.currentLeadSource ?? ""}"
-                featureFlagShowDropdown="${this.featureFlagShowDropdown}"
-                .leadSources="${this.leadSources ?? []}"
-                escortedToursLink="${this.building?.escortedToursLink ?? ""}"
-                virtualToursLink="${this.building?.virtualToursLink ?? ""}"
-                ?hidden=${this.hideLauncher}
-                ?hasCallUsEnabled=${!this.building?.chatWidgets
-                  ? true
-                  : this.building?.chatWidgets.includes("CALL")}
-                ?hasChatEnabled=${!this.building?.chatWidgets
-                  ? true
-                  : this.building?.chatWidgets.includes("CHAT")}
-                ?hasEmailEnabled=${!this.building?.chatWidgets
-                  ? true
-                  : this.building?.chatWidgets.includes("EMAIL")}
-                ?hasTextUsEnabled=${!this.building?.chatWidgets
-                  ? true
-                  : this.building?.chatWidgets.includes("SMS")}
-                ?hasSSTEnabled=${!this.building?.chatWidgets
-                  ? true
-                  : this.building?.chatWidgets.includes("SST")}
-              >
-              </meetelise-launcher>`
-            : ""}
+          ${
+            this.building
+              ? html`<meetelise-launcher
+                  ${ref(this.launcherRef)}
+                  .isMobile=${this.isMobile}
+                  .isFirstMount=${!this.hasMounted}
+                  .isMini=${this.useMiniWidget}
+                  .buildingId=${this.building?.id ?? 0}
+                  .layoutOptions=${this.building?.layoutOptionsV2 ?? []}
+                  .unitOptions=${this.building?.unitOptionsV2 ?? []}
+                  .tourTypeOptions=${this.building?.tourTypeOptions ?? []}
+                  .launcherStyles=${this.launcherStyles}
+                  .autoOpenChatWidget=${this.building.autoOpenChatWidget ??
+                  false}
+                  chatCallUsHeader=${this.building?.chatCallUsHeader ?? ""}
+                  chatId="${this.chatId}"
+                  phoneNumber="${this.phoneNumberForSource?.number ??
+                  this.building?.phoneNumber ??
+                  ""}"
+                  textColor="${this.theme.chatHeader.textColor}"
+                  backgroundColor="${this.theme.chatPaneBackgroundColor}"
+                  orgSlug="${this.orgSlug}"
+                  buildingSlug="${this.buildingSlug}"
+                  sgtUrl="${this.building?.sgtUrl ?? ""}"
+                  buildingABTestType="${this.buildingABTestType ?? ""}"
+                  currentLeadSource="${this.currentLeadSource ?? ""}"
+                  featureFlagShowDropdown="${this.featureFlagShowDropdown}"
+                  .leadSources="${this.leadSources ?? []}"
+                  escortedToursLink="${this.building?.escortedToursLink ?? ""}"
+                  virtualToursLink="${this.building?.virtualToursLink ?? ""}"
+                  ?hidden=${this.hideLauncher}
+                  ?hasCallUsEnabled=${!this.building?.chatWidgets
+                    ? true
+                    : this.building?.chatWidgets.includes("CALL")}
+                  ?hasChatEnabled=${!this.building?.chatWidgets
+                    ? true
+                    : this.building?.chatWidgets.includes("CHAT")}
+                  ?hasEmailEnabled=${!this.building?.chatWidgets
+                    ? true
+                    : this.building?.chatWidgets.includes("EMAIL")}
+                  ?hasTextUsEnabled=${!this.building?.chatWidgets
+                    ? true
+                    : this.building?.chatWidgets.includes("SMS")}
+                  ?hasSSTEnabled=${!this.building?.chatWidgets
+                    ? true
+                    : this.building?.chatWidgets.includes("SST")}
+                >
+                </meetelise-launcher>`
+              : ""
+          }
         </div>
-      </div>
+      </meta>
     `;
   }
 

package/src/fetchPhoneNumberFromSource.ts

@@ -0,0 +1,31 @@
+import axios from "axios";
+import { formatPhoneNumber } from "./WebComponent/actions/formatPhoneNumber";
+
+export interface NumberForSelectedSource {
+  number: string;
+  isMatch: boolean;
+  isPropertyWebsiteCatchall: boolean;
+}
+
+export default async function fetchPhoneNumberFromSource(
+  buildingSlug: string,
+  source: string | null
+): Promise<NumberForSelectedSource | null> {
+  const host = "https://app.meetelise.com";
+  try {
+    const phoneNumberResponse = await axios.get(
+      `${host}/platformApi/webchat/${buildingSlug}/phone-number-by-source?source=${source}`
+    );
+    if (phoneNumberResponse.data) {
+      return {
+        number: formatPhoneNumber(phoneNumberResponse.data.number),
+        isMatch: phoneNumberResponse.data.isMatch,
+        isPropertyWebsiteCatchall:
+          phoneNumberResponse.data.isPropertyWebsiteCatchall,
+      };
+    }
+    return null;
+  } catch (_) {
+    return null;
+  }
+}