@meetelise/chat 1.22.68 → 1.22.70

package/src/MyPubnub.ts

@@ -2,13 +2,13 @@ import { AxiosError } from "axios";
 import Pubnub, { ListenerParameters, MessageEvent } from "pubnub";
 
 import axios from "axios";
-import { Building } from "./fetchBuildingInfo";
 import { LogType, sendLoggingEvent } from "./analytics";
 import { ChatStorageKey, createChatStorageKey } from "./handleChatId";
 import LeadSourceClient from "./WebComponent/LeadSourceClient";
 import { pushGtmEvent } from "./gtm";
 import { isContainingEmail } from "./utils";
 import { WidgetType } from "./main/MEChat";
+import { BuildingWebchatView } from "./fetchBuildingWebchatView";
 
 interface TokenResponse {
   auth: {
@@ -94,7 +94,7 @@ class MyPubnub {
   private apiHost = "https://app.meetelise.com";
 
   private leadSourceClient: LeadSourceClient | null = null;
-  private building: Building | null = null;
+  private buildingWebchatView: BuildingWebchatView | null = null;
   private buildingSlug: string;
   private orgSlug: string;
 
@@ -165,7 +165,7 @@ class MyPubnub {
         if (containsConfirmedTour) {
           pushGtmEvent("scheduledTourEvent", {
             tourDetails: messageEvent.message,
-            buildingId: this.building?.id,
+            buildingId: this.buildingWebchatView?.id,
             buildingSlug: this.buildingSlug,
             orgSlug: this.orgSlug,
             leadUserId: this.leadUserId,
@@ -184,7 +184,7 @@ class MyPubnub {
 
   constructor(
     buildingSlug: string,
-    buildingDetails: Building | null,
+    buildingDetails: BuildingWebchatView | null,
     orgSlug: string,
     leadSource: string | null = null,
     leadUserId: string,
@@ -192,7 +192,7 @@ class MyPubnub {
     widgetType: WidgetType = WidgetType.Default
   ) {
     this.buildingSlug = buildingSlug;
-    this.building = buildingDetails;
+    this.buildingWebchatView = buildingDetails;
     this.orgSlug = orgSlug;
     this.leadSource = leadSource;
     this.leadUserId = leadUserId;
@@ -245,7 +245,7 @@ class MyPubnub {
         return;
       }
       pushGtmEvent("leadProvidedEmail", {
-        buildingId: this.building?.id,
+        buildingId: this.buildingWebchatView?.id,
         buildingSlug: this.buildingSlug,
         orgSlug: this.orgSlug,
         leadUserId: this.leadUserId,
@@ -302,7 +302,7 @@ class MyPubnub {
       );
       return response.data;
     } catch (error) {
-      if (this.building) {
+      if (this.buildingWebchatView) {
         sendLoggingEvent({
           logTitle: "PUBNUB_ERROR_FETCHING_TOKEN",
           logData: { error },
@@ -321,7 +321,7 @@ class MyPubnub {
       );
       return response.data;
     } catch (error) {
-      if (this.building) {
+      if (this.buildingWebchatView) {
         sendLoggingEvent({
           logTitle: "PUBNUB_ERROR_FETCHING_CHANNEL_EXISTS",
           logData: { error },
@@ -355,7 +355,7 @@ class MyPubnub {
 
           await apiRequestFunc();
         } catch (retryError) {
-          if (this.building) {
+          if (this.buildingWebchatView) {
             sendLoggingEvent({
               logTitle: "PUBNUB_ERROR_REFETCHING_TOKEN",
               logData: {
@@ -488,7 +488,7 @@ class MyPubnub {
         isLoading: false,
       });
     } catch (error) {
-      if (this.building) {
+      if (this.buildingWebchatView) {
         sendLoggingEvent({
           logTitle: "PUBNUB_WARN_FETCHING_HISTORY",
           logData: { error },
@@ -506,7 +506,7 @@ class MyPubnub {
       this.pubnub.subscribe({ channels: [this.channel] });
       this.pubnub.addListener(this.listenerParams);
     } catch (error) {
-      if (this.building) {
+      if (this.buildingWebchatView) {
         sendLoggingEvent({
           logTitle: "PUBNUB_ERROR_ADDING_LISTENER",
           logData: {
@@ -563,7 +563,7 @@ class MyPubnub {
         this.eliseResponseTimeout = setTimeout(() => {
           // eslint-disable-next-line no-console
           console.error("Elise AI did not respond in time...");
-          if (this.building) {
+          if (this.buildingWebchatView) {
             sendLoggingEvent({
               logTitle: "PUBNUB_ERROR_ELISEAI_MESSAGE_TIMEOUT",
               logData: {
@@ -602,9 +602,9 @@ class MyPubnub {
             message: {
               text: message,
               customType: "lead_message",
-              buildingId: this.building?.id,
+              buildingId: this.buildingWebchatView?.id,
               buildingSlug: this.buildingSlug,
-              userId: this.building?.userId, // this userid is actually the AI user!
+              userId: this.buildingWebchatView?.userId, // this userid is actually the AI user!
               leadSource: this.leadSource,
               widgetType: this.widgetType,
               isDevState: this.shouldCreateAsDevState(),
@@ -615,7 +615,7 @@ class MyPubnub {
         if (!this.isFirstChatMessageSent) {
           pushGtmEvent("firstChatMessageSent", {
             message,
-            buildingId: this.building?.id,
+            buildingId: this.buildingWebchatView?.id,
             buildingSlug: this.buildingSlug,
             orgSlug: this.orgSlug,
             leadUserId: this.leadUserId,
@@ -626,7 +626,7 @@ class MyPubnub {
 
         pushGtmEvent("chatMessageSent", {
           message,
-          buildingId: this.building?.id,
+          buildingId: this.buildingWebchatView?.id,
           buildingSlug: this.buildingSlug,
           orgSlug: this.orgSlug,
           leadUserId: this.leadUserId,

package/src/WebComponent/Scheduler/date-picker.ts

@@ -148,6 +148,8 @@ export class DatePicker extends LitElement {
       font-size: 12px;
       text-align: center;
       flex: 1 1 0px;
+      border: none;
+      background: none;
     }
 
     .dayInitial {
@@ -267,7 +269,8 @@ export class DatePicker extends LitElement {
       const hasNoAvailabilities =
         !this.availabilities?.[dateString] ||
         this.availabilities?.[dateString]?.length === 0;
-      return html`<span
+      return html`<button
+        ?disabled=${isPast || hasNoAvailabilities || isDifferentMonth}
         class="dayNumber ${classMap({
           past: isPast,
           differentMonth: isDifferentMonth,
@@ -275,8 +278,9 @@ export class DatePicker extends LitElement {
           selected: isSelected,
           noAvailabilities: hasNoAvailabilities,
         })}"
-        >${dayNumber}</span
-      >`;
+      >
+        ${dayNumber}
+      </button>`;
     });
     const rows = chunk(7, dayElements);
 
@@ -356,7 +360,7 @@ export class DatePicker extends LitElement {
           id="rows"
           @click="${(e: MouseEvent) => {
             const target = e.target as HTMLElement | undefined;
-            if (target?.closest("span.dayNumber:not(.differentMonth)"))
+            if (target?.closest("button.dayNumber:not(.differentMonth)"))
               this.selectedDate = new Date(
                 this.yearShown,
                 this.monthShown,

package/src/WebComponent/Scheduler/time-picker.ts

@@ -47,10 +47,10 @@ export class TimePicker extends LitElement {
 
     .timezone-display-text {
       font-size: 12px;
-      opacity: 0.5;
+      color: #767676;
     }
     .select-tour-type-instructions {
-      color: #ff0000;
+      color: #e60000;
     }
 
     #optionContainer {

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

@@ -787,7 +787,12 @@ export class TourScheduler extends LitElement {
   }
 
   closeButton(): TemplateResult {
-    return html` <button id="close-button" @click=${this.onCloseClicked}>
+    return html` <button
+      id="close-button"
+      @click=${this.onCloseClicked}
+      aria-label="Close"
+      aria-describedby="close-button"
+    >
       <svg
         width="19"
         height="19"

package/src/WebComponent/launcher/Launcher.ts

@@ -19,7 +19,7 @@ import {
 } from "../../themes";
 import "./mobile-launcher";
 import "../actions/collapse-expand-button";
-import { DesignConcepts } from "../../fetchWebchatPreferences";
+import { DesignConcepts } from "../../fetchBuildingWebchatView";
 import { isMobile } from "../../utils";
 import classNames from "classnames";
 import LeadSourceClient from "../LeadSourceClient";
@@ -460,6 +460,7 @@ export class Launcher extends LitElement {
       },
     ];
     const pills = emojiPillListItems.filter((v) => !!v.pill);
+
     return html`
       <div
         class="type-hey__list"

package/src/WebComponent/launcher/mobile-launcher.ts

@@ -115,11 +115,13 @@ export class MobileLauncher extends LitElement {
         )}
         ${!this.isMobileDesign && !this.hideChat
           ? html`
-              <minimize-expand-button
-                .onClick=${this.onClickMinimize}
-                .primaryColor=${this.primaryColor}
-                .toExpand=${true}
-              ></minimize-expand-button>
+              <li>
+                <minimize-expand-button
+                  .onClick=${this.onClickMinimize}
+                  .primaryColor=${this.primaryColor}
+                  .toExpand=${true}
+                ></minimize-expand-button>
+              </li>
             `
           : ""}
       </ul>

package/src/WebComponent/me-chat.ts

@@ -4,8 +4,11 @@ import { classMap } from "lit/directives/class-map.js";
 import { createRef, ref, Ref } from "lit/directives/ref.js";
 import { Launcher } from "./launcher/Launcher";
 import "./Scheduler/tour-scheduler";
+import fetchBuildingWebchatView, {
+  BuildingWebchatView,
+  DesignConcepts,
+} from "../fetchBuildingWebchatView";
 import Analytics, { logSignal, LogType, sendLoggingEvent } from "../analytics";
-import fetchBuildingInfo, { Building } from "../fetchBuildingInfo";
 import {
   FeatureFlagsShowDropdown,
   fetchFeatureFlagInsertDNIWebsite,
@@ -15,9 +18,6 @@ import {
   fetchFeatureFlagUseOverrideContactUsForm,
   fetchFeatureFlagUsePhoneNumberBySource,
 } from "../fetchFeatureFlag";
-import fetchWebchatPreferences, {
-  DesignConcepts,
-} from "../fetchWebchatPreferences";
 import fetchBuildingABTestType from "../fetchBuildingABTestType";
 import fetchPhoneNumberFromSource, {
   NumberForSelectedSource,
@@ -152,7 +152,7 @@ export class MEChat extends LitElement {
   @state()
   private launcher: HTMLElement | null = null;
   @state()
-  private building: Building | null = null;
+  private buildingWebchatView: BuildingWebchatView | null = null;
   @state()
   private designConcept: string | null = null;
   @state()
@@ -252,11 +252,11 @@ export class MEChat extends LitElement {
   firstUpdated = async (): Promise<void> => this.setupWebchat();
 
   private shouldShowWebchat = async (
-    building: Building | null,
+    buildingWebchatView: BuildingWebchatView | null,
     buildingSlug: string
   ): Promise<boolean> => {
     const sampleRateForWebchat = 0.01;
-    if (!building) {
+    if (!buildingWebchatView) {
       // eslint-disable-next-line no-console
       console.warn("MeetElise Chat will NOT appear. Building does NOT exist.");
       logSignal({
@@ -273,7 +273,7 @@ export class MEChat extends LitElement {
       });
       return false;
     }
-    if (!building.launchedDateTime) {
+    if (!buildingWebchatView.launchedDateTime) {
       // eslint-disable-next-line no-console
       console.warn(
         "MeetElise Chat will NOT appear. Building is NOT launched (based on launched date time)."
@@ -292,7 +292,7 @@ export class MEChat extends LitElement {
       });
       return false;
     }
-    if (!building.active) {
+    if (!buildingWebchatView.active) {
       // eslint-disable-next-line no-console
       console.warn("MeetElise Chat will NOT appear. Building is NOT active.");
       logSignal({
@@ -309,7 +309,7 @@ export class MEChat extends LitElement {
       });
       return false;
     }
-    if (!building.webchatScopeConfigured) {
+    if (!buildingWebchatView.webchatScopeConfigured) {
       // eslint-disable-next-line no-console
       console.warn(
         "MeetElise Chat will NOT appear. Building is NOT webchat scope configured."
@@ -357,7 +357,11 @@ export class MEChat extends LitElement {
 
   private setupWebchat = async (): Promise<void> => {
     if (!this.buildingSlug || !this.orgSlug) return;
-    const building = await fetchBuildingInfo(this.orgSlug, this.buildingSlug);
+    const buildingWebchatView = await fetchBuildingWebchatView(
+      this.orgSlug,
+      this.buildingSlug
+    );
+
     if (Math.random() < 0.2) {
       try {
         updateRentgrataToken(this.buildingSlug, this.orgSlug);
@@ -368,7 +372,7 @@ export class MEChat extends LitElement {
     }
 
     const shouldShowWebchat = await this.shouldShowWebchat(
-      building,
+      buildingWebchatView,
       this.buildingSlug
     );
     if (!shouldShowWebchat) {
@@ -382,11 +386,10 @@ export class MEChat extends LitElement {
           is_any_webchat_showing: true,
         },
         // We use a lower sample rate if not launched yet because likely still in onboarding process
-        sampleRate: building?.launchedDateTime ? 0.01 : 0.05,
+        sampleRate: buildingWebchatView?.launchedDateTime ? 0.01 : 0.05,
       });
     }
-
-    this.building = building;
+    this.buildingWebchatView = buildingWebchatView;
 
     await this.initializeChatVariables();
     await this.handleChatInitializeAnalytics();
@@ -411,7 +414,7 @@ export class MEChat extends LitElement {
 
   // The general info for the buildingg
   setBuildingDerivedInfo = async (): Promise<void> => {
-    const buildingDetails = this.building;
+    const buildingDetails = this.buildingWebchatView;
     if (!buildingDetails) return;
     if (buildingDetails && this.orgSlug) {
       overrideContactUsForm(
@@ -428,7 +431,6 @@ export class MEChat extends LitElement {
       leadSources,
       featureFlagShowDropdown,
       featureFlagUseDNI,
-      webchatSettings,
       featureFlagInsertDNIWebsite,
       featureFlagReplaceScheduleTourCtaWebsite,
     ] = await Promise.all([
@@ -436,13 +438,12 @@ export class MEChat extends LitElement {
       fetchLeadSources(this.orgSlug, this.buildingSlug),
       fetchFeatureFlagShowMarketingSourceDropdown(this.buildingSlug),
       fetchFeatureFlagUsePhoneNumberBySource(this.buildingSlug),
-      fetchWebchatPreferences(buildingDetails.id),
       fetchFeatureFlagInsertDNIWebsite(this.buildingSlug),
       fetchFeatureFlagReplaceScheduleTourCtaWebsite(this.buildingSlug),
     ]);
 
-    if (this.building) {
-      this.building.phoneNumber = formatPhoneNumber(
+    if (this.buildingWebchatView) {
+      this.buildingWebchatView.phoneNumber = formatPhoneNumber(
         buildingDetails.phoneNumber
       );
     }
@@ -456,20 +457,22 @@ export class MEChat extends LitElement {
       : await getBuildingPhoneNumber(this.buildingSlug);
 
     this.enabledChatWidgets = {
-      callDesktop: webchatSettings?.shouldShowPhoneDesktop ?? false,
-      callMobile: webchatSettings?.shouldShowPhoneMobile ?? false,
-      chatDesktop: webchatSettings?.shouldShowChatDesktop ?? false,
-      chatMobile: webchatSettings?.shouldShowChatMobile ?? false,
-      emailDesktop: webchatSettings?.shouldShowEmailDesktop ?? false,
-      emailMobile: webchatSettings?.shouldShowEmailMobile ?? false,
+      callDesktop: this.buildingWebchatView?.shouldShowPhoneDesktop ?? false,
+      callMobile: this.buildingWebchatView?.shouldShowPhoneMobile ?? false,
+      chatDesktop: this.buildingWebchatView?.shouldShowChatDesktop ?? false,
+      chatMobile: this.buildingWebchatView?.shouldShowChatMobile ?? false,
+      emailDesktop: this.buildingWebchatView?.shouldShowEmailDesktop ?? false,
+      emailMobile: this.buildingWebchatView?.shouldShowEmailMobile ?? false,
       textDesktop:
-        (webchatSettings?.shouldShowTextDesktop && !!buildingPhoneNumber) ??
+        (this.buildingWebchatView?.shouldShowTextDesktop &&
+          !!buildingPhoneNumber) ??
         false,
       textMobile:
-        (webchatSettings?.shouldShowTextMobile && !!buildingPhoneNumber) ??
+        (this.buildingWebchatView?.shouldShowTextMobile &&
+          !!buildingPhoneNumber) ??
         false,
-      sstDesktop: webchatSettings?.shouldShowSstDesktop ?? false,
-      sstMobile: webchatSettings?.shouldShowSstMobile ?? false,
+      sstDesktop: this.buildingWebchatView?.shouldShowSstDesktop ?? false,
+      sstMobile: this.buildingWebchatView?.shouldShowSstMobile ?? false,
     };
 
     if (
@@ -492,27 +495,33 @@ export class MEChat extends LitElement {
       }
     }
 
-    if (webchatSettings) {
-      this.primaryColor = webchatSettings.primaryColor ?? null;
-      this.backgroundColor = webchatSettings.secondaryColor ?? null;
+    if (this.buildingWebchatView) {
+      this.primaryColor = this.buildingWebchatView.primaryColor ?? null;
+      this.backgroundColor = this.buildingWebchatView.secondaryColor ?? null;
       this.foregroundColorOnPrimaryBackgroundColor =
-        webchatSettings.foregroundColorOnPrimaryBackgroundColor ?? null;
+        this.buildingWebchatView.foregroundColorOnPrimaryBackgroundColor ??
+        null;
       this.foregroundColorOnSecondaryBackgroundColor =
-        webchatSettings.foregroundColorOnSecondaryBackgroundColor ?? null;
-      this.webchatConfigHasAutoOpenChat = webchatSettings.autoOpenChat;
-      this.requiresConsent = webchatSettings.requiresConsentForChat;
-      this.hideMobileFeatures = webchatSettings.collapseMobileFeatures;
+        this.buildingWebchatView.foregroundColorOnSecondaryBackgroundColor ??
+        null;
+      this.webchatConfigHasAutoOpenChat =
+        this.buildingWebchatView.autoOpenChat ?? false;
+      this.requiresConsent =
+        this.buildingWebchatView.requiresConsentForChat ?? false;
+      this.hideMobileFeatures =
+        this.buildingWebchatView.collapseMobileFeatures ?? false;
       this.privacyPolicyUrl =
-        webchatSettings.privacyPolicyUrlForChat ?? this.privacyPolicyUrl;
+        this.buildingWebchatView.privacyPolicyUrlForChat ??
+        this.privacyPolicyUrl;
 
-      if (webchatSettings.displayStyle === DesignConcepts.MINIMIZED) {
+      if (this.buildingWebchatView.displayStyle === DesignConcepts.MINIMIZED) {
         // this.designConcept = DesignConcepts.MINIMIZED; // uncomment this if we want to remove the minimize/expand option
         this.isMinimized = true;
       }
-      if (webchatSettings.displayStyle === DesignConcepts.PILLS) {
+      if (this.buildingWebchatView.displayStyle === DesignConcepts.PILLS) {
         this.designConcept = null; // default design concept is PILLS, no need to specify here
       }
-      if (webchatSettings.displayStyle === DesignConcepts.EMOJI) {
+      if (this.buildingWebchatView.displayStyle === DesignConcepts.EMOJI) {
         this.designConcept = DesignConcepts.EMOJI;
       }
 
@@ -523,7 +532,7 @@ export class MEChat extends LitElement {
     if (this.backgroundColor === null)
       this.backgroundColor = defaultBackgroundColor;
 
-    const buildingsPhoneNumber = this.building?.phoneNumber ?? "";
+    const buildingsPhoneNumber = this.buildingWebchatView?.phoneNumber ?? "";
     let phoneNumberForSource = null;
     if (featureFlagUseDNI) {
       phoneNumberForSource = await fetchPhoneNumberFromSource(
@@ -588,7 +597,7 @@ export class MEChat extends LitElement {
   };
 
   private initializeChatVariables = async (): Promise<void> => {
-    if (!this.building) return;
+    if (!this.buildingWebchatView) return;
 
     // important to distinguish between a user who has never opened the chat and a user who has opened the chat but closed it
     const currentChatStorageKey = getChatStorageKey(this.buildingSlug);
@@ -605,7 +614,7 @@ export class MEChat extends LitElement {
     this.LeadSourceClient = new LeadSourceClient();
     this.myPubnub = new MyPubnub(
       this.buildingSlug,
-      this.building,
+      this.buildingWebchatView,
       this.orgSlug,
       null, // initialize lead source as null initially
       updatedChatStorageKey.leadId,
@@ -858,7 +867,7 @@ export class MEChat extends LitElement {
       this.hideLauncher && !this.isLoading && !isMobile();
 
     return html`
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=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.
@@ -875,7 +884,7 @@ export class MEChat extends LitElement {
                   .orgSlug=${this.orgSlug}
                   .buildingSlug=${this.buildingSlug}
                   .widgetType=${WidgetType.Default}
-                  .building=${this.building}
+                  .building=${this.buildingWebchatView}
                   .primaryColor=${this.primaryColor}
                   .backgroundColor=${this.backgroundColor}
                   .onClickExit=${this.onExitChat}
@@ -910,16 +919,17 @@ export class MEChat extends LitElement {
           })}
         >
           ${
-            this.building
+            this.buildingWebchatView
               ? html`<meetelise-launcher
                   id="meetelise-launcher"
                   ${ref(this.launcherRef)}
                   .isFirstMount=${!this.hasMounted}
-                  .buildingId=${this.building?.id ?? 0}
-                  .hasDynamicSchedulingEnabled=${this.building
+                  .buildingId=${this.buildingWebchatView?.id ?? 0}
+                  .hasDynamicSchedulingEnabled=${this.buildingWebchatView
                     ?.usesDynamicScheduling ?? false}
-                  .orgLegalName=${this.building?.orgLegalName ?? ""}
-                  .tourTypeOptions=${this.building?.tourTypeOptions ?? []}
+                  .orgLegalName=${this.buildingWebchatView?.orgLegalName ?? ""}
+                  .tourTypeOptions=${this.buildingWebchatView
+                    ?.tourTypeOptions ?? []}
                   .launcherStyles=${this.launcherStyles}
                   .primaryColor=${this.primaryColor}
                   .backgroundColor=${this.backgroundColor}
@@ -931,32 +941,35 @@ export class MEChat extends LitElement {
                   .onClickMinimize=${this.onClickMinimize}
                   .onSstClose=${this.onSstClose}
                   .overrideRentgrata=${this.overrideRentgrata}
-                  .autoOpenChatWidget=${this.building.autoOpenChatWidget ??
-                  false}
+                  .autoOpenChatWidget=${this.buildingWebchatView
+                    ?.autoOpenChat ?? false}
                   .mobileStyles=${isMobile() || this.isMinimized
                     ? this.mobileStyles
                     : {}}
-                  chatCallUsHeader=${this.building?.chatCallUsHeader ?? ""}
+                  chatCallUsHeader=${this.buildingWebchatView
+                    ?.chatCallUsHeader ?? ""}
                   chatId="${this.chatId}"
                   phoneNumber="${this.phoneNumberForSource?.number ??
-                  this.building?.phoneNumber ??
+                  this.buildingWebchatView?.phoneNumber ??
                   ""}"
-                  buildingName=${this.building?.name ?? ""}
+                  buildingName=${this.buildingWebchatView?.name ?? ""}
                   orgSlug="${this.orgSlug}"
                   buildingSlug="${this.buildingSlug}"
-                  sgtUrl="${this.building?.sgtUrl ?? ""}"
-                  selfGuidedToursTypeOffered="${this.building
+                  sgtUrl="${this.buildingWebchatView?.sgtUrl ?? ""}"
+                  selfGuidedToursTypeOffered="${this.buildingWebchatView
                     ?.selfGuidedToursTypeOffered}"
-                  selfGuidedTourEnabled="${this.building
-                    ?.selfGuidedTourEnabled}"
+                  selfGuidedTourEnabled="${this.buildingWebchatView
+                    ?.isSelfGuidedTourEnabled}"
                   designConcept="${this.designConcept ?? ""}"
                   currentLeadSource="${this.LeadSourceClient?.leadSource ??
                   null ??
                   ""}"
                   featureFlagShowDropdown="${this.featureFlagShowDropdown}"
                   .leadSources="${this.leadSources ?? []}"
-                  escortedToursLink="${this.building?.escortedToursLink ?? ""}"
-                  virtualToursLink="${this.building?.virtualToursLink ?? ""}"
+                  escortedToursLink="${this.buildingWebchatView
+                    ?.escortedToursLink ?? ""}"
+                  virtualToursLink="${this.buildingWebchatView
+                    ?.virtualToursLink ?? ""}"
                   .showTourNextToChat="${this.showTourNextToChat ?? ""}"
                   @closeShowTourNextToChat=${() => {
                     this.showTourNextToChat = false;
@@ -997,15 +1010,16 @@ export class MEChat extends LitElement {
     showChatAdditionalActions: boolean
   ): TemplateResult => {
     const triangleDivColor =
-      this.building &&
+      this.buildingWebchatView &&
       shouldUsePrimaryColorForChatFooter(
-        this.building.orgId,
-        this.building.id
+        this.buildingWebchatView.orgId,
+        this.buildingWebchatView.id
       ) &&
       this.primaryColor &&
       this.primaryColor !== defaultPrimaryColor
         ? hexToAlmostWhite(this.primaryColor, 0.6)
         : "black";
+
     return html` <style>
         #{id}::after {
           border-right-color: ${triangleDivColor} !important;
@@ -1249,9 +1263,12 @@ const overrideContactUsForm = async (
       ([key, val]) => (formValues[key] = val?.value)
     );
 
-    const building = await fetchBuildingInfo(orgSlug, buildingSlug);
+    const buildingWebchatView = await fetchBuildingWebchatView(
+      orgSlug,
+      buildingSlug
+    );
 
-    if (!building) {
+    if (!buildingWebchatView) {
       logContactUsFormError(buildingSlug, orgSlug, "Could not find building");
       return null;
     }
@@ -1262,7 +1279,7 @@ const overrideContactUsForm = async (
       last_name: formValues.lastName,
       phone_number: formValues.phone,
       first_message: formValues.message,
-      building_id: building.id,
+      building_id: buildingWebchatView.id,
       is_external_form: true,
       lead_sources: [
         ...new Set(