@meetelise/chat 1.29.0 → 1.30.1

package/src/WebComponent/me-chat.ts

@@ -0,0 +1,1262 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+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 {
+  FeatureFlagsShowDropdown,
+  fetchFeatureFlagInsertDNIWebsite,
+  fetchFeatureFlagReplaceScheduleTourCtaWebsite,
+  fetchFeatureFlagShowMarketingSourceDropdown,
+  fetchFeatureFlagUseApplicationsLinkReplacement,
+  fetchFeatureFlagUseOverrideContactUsForm,
+  fetchFeatureFlagUsePhoneNumberBySource,
+} from "../fetchFeatureFlag";
+import fetchBuildingABTestType from "../fetchBuildingABTestType";
+import fetchPhoneNumberFromSource, {
+  NumberForSelectedSource,
+} from "../fetchPhoneNumberFromSource";
+import { defaultPrimaryColor, defaultBackgroundColor } from "../themes";
+import getShouldShowWebchat from "../getShouldShowWebchat";
+import { isMobile, isTestEnv } from "../utils";
+import { installLauncher } from "./launcher/Launcher";
+import parseISO from "date-fns/parseISO";
+import isPast from "date-fns/isPast";
+
+import "./MEChat.css";
+import { getRawAvailabilities } from "../getAvailabilities";
+import { StyleInfo } from "lit/directives/style-map";
+import addMinutes from "date-fns/addMinutes";
+import formatISO from "date-fns/formatISO";
+import fetchLeadSources from "../fetchLeadSources";
+import { formatPhoneNumber } from "./actions/formatPhoneNumber";
+import MyPubnub from "../MyPubnub";
+import { insertDNIIntoWebsite } from "../insertDNIIntoWebsite";
+import {
+  insertLeadSourceIntoSchedulerLinks,
+  replacePageRedirectElementWithTourWidgetTrigger,
+  replaceSSTLinkWithTourWidgetTrigger,
+  replaceTourTriggerElementWithTourWidgetTrigger,
+} from "../insertLeadSourceIntoSchedulerLinks";
+
+import "./actions/minimize-expand-button";
+import "./launcher/mobile-launcher";
+import "./pubnub-chat";
+import { getBuildingPhoneNumber } from "../getBuildingPhoneNumber";
+import {
+  clearChatStorageKey,
+  createChatStorageKey,
+  getChatStorageKey,
+  isChatKeyValid,
+} from "../handleChatId";
+import LeadSourceClient, {
+  getDefaultLeadSourceAttribution,
+} from "./LeadSourceClient";
+import noop from "lodash/noop";
+import { updateRentgrataToken } from "../rentgrata";
+import { WidgetType } from "../main/MEChat";
+import { replaceSelectButtonsWithNewLink } from "../replaceSelectButtonsWithNewLink";
+
+import "./chat-additional-actions";
+
+@customElement("me-chat")
+export class MEChat extends LitElement {
+  static styles = css`
+    :host {
+      all: initial;
+    }
+
+    #__talkjs_launcher:not(.shouldBeVisible) {
+      display: none;
+    }
+
+    .launcherContainer.launcher__mobile {
+      width: 100%;
+      height: 100px;
+    }
+
+    .hideTab {
+      display: none;
+    }
+    .showTab {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 32px;
+    }
+    #chatAdditionalActionsPubnub {
+      position: fixed;
+      box-sizing: border-box;
+
+      box-sizing: border-box;
+      width: 340px;
+
+      padding-top: 0px;
+      padding-right: 12px;
+
+      z-index: 1000000000;
+    }
+    #chatAdditionalActionsPubnub::after {
+      content: "";
+      position: absolute;
+      top: -6px;
+      right: 0;
+      width: 0;
+      height: 0;
+      border-bottom: 22px solid transparent;
+      border-right: 30px solid black;
+    }
+    #pubnub-bottom {
+      position: fixed;
+      bottom: 0;
+    }
+  `;
+  @property({ type: String })
+  private buildingSlug = "";
+  @property({ type: String })
+  private orgSlug = "";
+  @property({ type: Object })
+  launcherStyles: StyleInfo = {};
+  @property()
+  mobileStyles: StyleInfo = {};
+
+  @property({ type: Boolean })
+  isMinimized = false;
+
+  @property({ type: String })
+  private primaryColor: string | null = null;
+
+  @property({ type: String })
+  private backgroundColor: string | null = null;
+
+  @property({ type: String })
+  private foregroundColorOnPrimaryBackgroundColor: string | null = null;
+
+  @property({ type: String })
+  private foregroundColorOnSecondaryBackgroundColor: string | null = null;
+
+  @state()
+  private chatId = "";
+  @state()
+  private analytics: Analytics | null = null;
+  @state()
+  private launcher: HTMLElement | null = null;
+  @state()
+  private buildingWebchatView: BuildingWebchatView | null = null;
+  @state()
+  private designConcept: string | null = null;
+  @state()
+  private leadSources: string[] | null = null;
+  @state()
+  private currentLeadSource: string | null = null;
+  @state()
+  private featureFlagShowDropdown: FeatureFlagsShowDropdown =
+    FeatureFlagsShowDropdown.always;
+  @state()
+  private phoneNumberForSource: NumberForSelectedSource | null = null;
+  @state()
+  private hasMounted = false;
+  @state()
+  private hideLauncher = false;
+  @state()
+  private isLoading = true;
+
+  @state()
+  private showTourNextToChat = false;
+
+  @state()
+  private displayPubnubChat = false;
+
+  @state()
+  private myPubnub: MyPubnub | null = null;
+
+  @state()
+  private LeadSourceClient: LeadSourceClient | null = null;
+
+  @state()
+  private sampleRateToUse = 0.05;
+
+  @property({ type: Number })
+  private right = undefined;
+
+  @property({ type: Number })
+  private bottom = undefined;
+
+  @property({ type: Number })
+  private top = undefined;
+
+  @property({ type: Number })
+  private left = undefined;
+
+  @property({ attribute: true })
+  overrideRentgrata = false;
+
+  @property({ attribute: true })
+  widgetType: WidgetType = WidgetType.Default;
+
+  @property()
+  onWidgetLoaded: () => void = noop;
+
+  @property({ attribute: true })
+  onSstClose: () => void = noop;
+
+  @state()
+  private enabledChatWidgets: {
+    callDesktop: boolean;
+    callMobile: boolean;
+    chatMobile: boolean;
+    chatDesktop: boolean;
+    emailDesktop: boolean;
+    emailMobile: boolean;
+    textDesktop: boolean;
+    textMobile: boolean;
+    sstDesktop: boolean;
+    sstMobile: boolean;
+    calcDesktop: boolean;
+    calcMobile: boolean;
+  } = {
+    callDesktop: false,
+    callMobile: false,
+    chatMobile: false,
+    chatDesktop: false,
+    emailDesktop: false,
+    emailMobile: false,
+    textDesktop: false,
+    textMobile: false,
+    sstDesktop: false,
+    sstMobile: false,
+    calcDesktop: false,
+    calcMobile: false,
+  };
+
+  @state()
+  private webchatConfigHasAutoOpenChat = false;
+
+  @state()
+  private requiresConsent = false;
+
+  @state()
+  private hideMobileFeatures = false;
+
+  @state()
+  private privacyPolicyUrl = "http://bit.ly/me_privacy_policy";
+
+  launcherRef: Ref<Launcher> = createRef();
+
+  firstUpdated = async (): Promise<void> => this.setupWebchat();
+
+  private setupWebchat = async (): Promise<void> => {
+    if (!this.buildingSlug || !this.orgSlug) return;
+    const buildingWebchatView = await fetchBuildingWebchatView(
+      this.orgSlug,
+      this.buildingSlug
+    );
+
+    if (Math.random() < 0.2) {
+      try {
+        updateRentgrataToken(this.buildingSlug, this.orgSlug);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn("Error updating rentgrata token", e);
+      }
+    }
+
+    const shouldShowWebchat = await getShouldShowWebchat(
+      buildingWebchatView,
+      this.buildingSlug,
+      this.orgSlug
+    );
+    if (!shouldShowWebchat) {
+      return;
+    } else {
+      logSignal({
+        params: {
+          org_slug: this.orgSlug,
+          building_slug: this.buildingSlug,
+          is_pixel_on_site: true,
+          is_any_webchat_showing: true,
+        },
+        // We use a lower sample rate if not launched yet because likely still in onboarding process
+        sampleRate: buildingWebchatView?.launchedDateTime ? 0.01 : 0.05,
+      });
+    }
+    this.buildingWebchatView = buildingWebchatView;
+
+    await this.initializeChatVariables();
+    await this.handleChatInitializeAnalytics();
+    await this.setBuildingDerivedInfo();
+
+    this.attachOnClickToLauncher();
+
+    if (this.shouldAutoOpenChat(this.webchatConfigHasAutoOpenChat)) {
+      this.displayPubnubChat = true;
+      this.hideLauncher = true;
+      this.hasMounted = true;
+      this.updateAlreadyAutoOpenedTimestamp();
+    }
+
+    this.isLoading = false;
+
+    if (localStorage.getItem("isChatOpen") === "true") {
+      this.hideLauncher = true;
+      this.displayPubnubChat = true;
+    }
+  };
+
+  // The general info for the buildingg
+  setBuildingDerivedInfo = async (): Promise<void> => {
+    const buildingDetails = this.buildingWebchatView;
+    if (!buildingDetails) return;
+    if (buildingDetails && this.orgSlug) {
+      overrideContactUsForm(
+        this.orgSlug,
+        this.LeadSourceClient?.chatId ?? null,
+        this.sampleRateToUse,
+        this.buildingSlug,
+        this.LeadSourceClient?.leadSource ?? null
+      );
+    }
+
+    const [
+      buildingABTest,
+      leadSources,
+      featureFlagShowDropdown,
+      featureFlagUseDNI,
+      featureFlagInsertDNIWebsite,
+      featureFlagReplaceScheduleTourCtaWebsite,
+      featureFlagUseApplicationsLinkReplacement,
+    ] = await Promise.all([
+      fetchBuildingABTestType(this.buildingSlug),
+      fetchLeadSources(this.orgSlug, this.buildingSlug),
+      fetchFeatureFlagShowMarketingSourceDropdown(this.buildingSlug),
+      fetchFeatureFlagUsePhoneNumberBySource(this.buildingSlug),
+      fetchFeatureFlagInsertDNIWebsite(this.buildingSlug),
+      fetchFeatureFlagReplaceScheduleTourCtaWebsite(this.buildingSlug),
+      fetchFeatureFlagUseApplicationsLinkReplacement(this.buildingSlug),
+    ]);
+
+    if (this.buildingWebchatView) {
+      this.buildingWebchatView.phoneNumber = formatPhoneNumber(
+        buildingDetails.phoneNumber
+      );
+    }
+    this.designConcept = buildingABTest?.abTestType ?? "";
+    this.leadSources = leadSources;
+    this.featureFlagShowDropdown = featureFlagShowDropdown;
+
+    // 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
+      ? buildingDetails.textWithUsPhoneNumber
+      : await getBuildingPhoneNumber(this.buildingSlug);
+
+    const shouldShowCalcDesktop =
+      (this.buildingWebchatView?.shouldShowPricingCalculatorDesktop &&
+        isTestEnv()) ??
+      false;
+    const shouldShowCalcMobile =
+      (this.buildingWebchatView?.shouldShowPricingCalculatorMobile &&
+        isTestEnv()) ??
+      false;
+
+    this.enabledChatWidgets = {
+      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:
+        (this.buildingWebchatView?.shouldShowTextDesktop &&
+          !!buildingPhoneNumber) ??
+        false,
+      textMobile:
+        (this.buildingWebchatView?.shouldShowTextMobile &&
+          !!buildingPhoneNumber) ??
+        false,
+      sstDesktop: this.buildingWebchatView?.shouldShowSstDesktop ?? false,
+      sstMobile: this.buildingWebchatView?.shouldShowSstMobile ?? false,
+      calcDesktop: shouldShowCalcDesktop,
+      calcMobile: shouldShowCalcMobile,
+    };
+
+    if (
+      this.enabledChatWidgets.sstDesktop ||
+      this.enabledChatWidgets.sstMobile ||
+      this.orgSlug === "radco"
+    ) {
+      replaceSSTLinkWithTourWidgetTrigger(this.handleTourClicked);
+      if (featureFlagReplaceScheduleTourCtaWebsite) {
+        replacePageRedirectElementWithTourWidgetTrigger(this.handleTourClicked);
+      }
+      if (this.orgSlug === "radco") {
+        replaceTourTriggerElementWithTourWidgetTrigger(this.handleTourClicked);
+      }
+    } else {
+      if (this.LeadSourceClient?.leadSource) {
+        insertLeadSourceIntoSchedulerLinks(
+          this.LeadSourceClient?.leadSource ?? null
+        );
+      }
+    }
+
+    if (this.buildingWebchatView) {
+      this.primaryColor = this.buildingWebchatView.primaryColor ?? null;
+      this.backgroundColor = this.buildingWebchatView.secondaryColor ?? null;
+      this.foregroundColorOnPrimaryBackgroundColor =
+        this.buildingWebchatView.foregroundColorOnPrimaryBackgroundColor ??
+        null;
+      this.foregroundColorOnSecondaryBackgroundColor =
+        this.buildingWebchatView.foregroundColorOnSecondaryBackgroundColor ??
+        null;
+      this.webchatConfigHasAutoOpenChat =
+        this.buildingWebchatView.autoOpenChat ?? false;
+      this.requiresConsent =
+        this.buildingWebchatView.requiresConsentForChat ?? false;
+      this.hideMobileFeatures =
+        this.buildingWebchatView.collapseMobileFeatures ?? false;
+      this.privacyPolicyUrl =
+        this.buildingWebchatView.privacyPolicyUrlForChat ??
+        this.privacyPolicyUrl;
+
+      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 (this.buildingWebchatView.displayStyle === DesignConcepts.PILLS) {
+        this.designConcept = null; // default design concept is PILLS, no need to specify here
+      }
+      if (this.buildingWebchatView.displayStyle === DesignConcepts.EMOJI) {
+        this.designConcept = DesignConcepts.EMOJI;
+      }
+
+      this.onWidgetLoaded();
+    }
+
+    if (this.primaryColor === null) this.primaryColor = defaultPrimaryColor;
+    if (this.backgroundColor === null)
+      this.backgroundColor = defaultBackgroundColor;
+
+    const buildingsPhoneNumber = this.buildingWebchatView?.phoneNumber ?? "";
+    let phoneNumberForSource = null;
+    if (featureFlagUseDNI) {
+      phoneNumberForSource = await fetchPhoneNumberFromSource(
+        this.buildingSlug,
+        this.LeadSourceClient?.leadSource ?? null
+      );
+
+      // By default, we want to use the building's phone number, not the default catchall number
+      // https://meetelise.slack.com/archives/C01BT9GB9LZ/p1696437860448009
+      if (phoneNumberForSource && !phoneNumberForSource.isMatch) {
+        phoneNumberForSource.number = buildingsPhoneNumber;
+      }
+      if (!this.LeadSourceClient?.leadSource && phoneNumberForSource) {
+        phoneNumberForSource.number = buildingsPhoneNumber;
+      }
+    }
+    if (featureFlagInsertDNIWebsite && phoneNumberForSource?.number) {
+      const totalReplacements = insertDNIIntoWebsite(
+        phoneNumberForSource.number,
+        this.orgSlug,
+        this.buildingSlug
+      );
+      if (totalReplacements > 0) {
+        logSignal({
+          params: {
+            org_slug: this.orgSlug,
+            building_slug: this.buildingSlug,
+            is_dni_insert_override_success: true,
+            extra_data: {
+              total_replacements: totalReplacements,
+            },
+          },
+          sampleRate: this.sampleRateToUse,
+        });
+      }
+    }
+
+    const devTestPhoneNumber = localStorage.getItem(
+      "eliseai_phone_number_devtest"
+    );
+    if (devTestPhoneNumber) {
+      // eslint-disable-next-line no-console
+      console.info("Using dev test phone number: ", devTestPhoneNumber);
+      insertDNIIntoWebsite(devTestPhoneNumber, this.orgSlug, this.buildingSlug);
+    }
+
+    // if the building does NOT have IVR setup, we want to use the building's phone number
+    if (!phoneNumberForSource) {
+      this.phoneNumberForSource = {
+        number: buildingsPhoneNumber,
+        isMatch: false,
+        isPropertyWebsiteCatchall: true,
+      };
+    } else {
+      this.phoneNumberForSource = phoneNumberForSource;
+    }
+
+    const currentLeadSource = this.LeadSourceClient?.leadSource ?? null;
+    if (currentLeadSource) {
+      if (!this.leadSources.includes(currentLeadSource)) {
+        this.leadSources.push(currentLeadSource);
+      }
+    }
+    getRawAvailabilities(buildingDetails.id); // we're not using this here, just want to cache the result
+
+    if (
+      featureFlagUseApplicationsLinkReplacement &&
+      this.buildingSlug &&
+      this.buildingWebchatView?.isLiveOnApplications
+    ) {
+      const totalReplacements = replaceSelectButtonsWithNewLink(
+        `https://applications.eliseai.com/building/${this.buildingSlug}`,
+        this.orgSlug,
+        this.buildingSlug
+      );
+      if (totalReplacements > 0) {
+        logSignal({
+          params: {
+            org_slug: this.orgSlug,
+            building_slug: this.buildingSlug,
+            is_application_link_replacement_success: true,
+            extra_data: {
+              total_replacements: totalReplacements,
+            },
+          },
+          sampleRate: this.sampleRateToUse,
+        });
+      }
+    }
+  };
+
+  private initializeChatVariables = async (): Promise<void> => {
+    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);
+    const updatedChatStorageKey = isChatKeyValid(
+      this.buildingSlug,
+      currentChatStorageKey
+    )
+      ? currentChatStorageKey
+      : createChatStorageKey(this.buildingSlug, false);
+
+    if (!updatedChatStorageKey.leadId) {
+      throw new Error("Lead ID is null");
+    }
+    this.LeadSourceClient = new LeadSourceClient();
+    this.myPubnub = new MyPubnub(
+      this.buildingSlug,
+      this.buildingWebchatView,
+      this.orgSlug,
+      null, // initialize lead source as null initially
+      updatedChatStorageKey.leadId,
+      this.LeadSourceClient,
+      this.widgetType
+    );
+    this.LeadSourceClient.chatId = this.myPubnub.channel;
+    await this.LeadSourceClient?.generateUserLeadSource({
+      leadId: this.myPubnub?.leadUserId ?? "",
+      orgSlug: this.orgSlug,
+      buildingSlug: this.buildingSlug,
+    });
+
+    // eslint-disable-next-line no-console
+    console.log(
+      "EliseAI Mapped Lead Source source: ",
+      this.LeadSourceClient?.leadSource
+    );
+
+    if (getDefaultLeadSourceAttribution(this.orgSlug) !== "property-website") {
+      this.myPubnub.leadSource =
+        this.LeadSourceClient?.leadSource ??
+        getDefaultLeadSourceAttribution(this.orgSlug);
+    } else {
+      this.myPubnub.leadSource = this.LeadSourceClient?.leadSource ?? null;
+    }
+    if (updatedChatStorageKey.initiatedChat) {
+      await this.myPubnub.initializePubnub(currentChatStorageKey);
+    }
+  };
+
+  private shouldAutoOpenChat = (buildingHasAutoOpen: boolean): boolean => {
+    const alreadyAutoOpenedTimestamp = sessionStorage.getItem(
+      "alreadyAutoOpenedTimestamp"
+    ); // we dont want to autoopen on EVERY single page load, so we'll only do it once every 15 minutes max
+    const shouldAutoOpen =
+      !alreadyAutoOpenedTimestamp ||
+      !(
+        alreadyAutoOpenedTimestamp &&
+        !isPast(parseISO(alreadyAutoOpenedTimestamp))
+      );
+    return !!buildingHasAutoOpen && !!shouldAutoOpen && !isMobile();
+  };
+
+  private async handleChatInitializeAnalytics(): Promise<void> {
+    this.analytics = new Analytics(
+      this.orgSlug,
+      this.buildingSlug,
+      this.myPubnub?.channel ?? "", // this will be empty if the user does not have a current chat session.
+      this.LeadSourceClient?.leadSource ?? null
+    );
+
+    // Too many logs kills our DB, so we'll only log 5% of the time
+    if (Math.random() < 0.05) {
+      this.analytics.ping("webchat_heartbeat");
+    }
+  }
+
+  public async restartConversation(): Promise<void> {
+    this.myPubnub?.handleDisconnect();
+    clearChatStorageKey(this.buildingSlug);
+    this.myPubnub = null;
+    this.displayPubnubChat = false;
+    await this.setupWebchat();
+    this.hideLauncher = false;
+  }
+
+  private updateAlreadyAutoOpenedTimestamp = (): void => {
+    sessionStorage.setItem(
+      "alreadyAutoOpenedTimestamp",
+      formatISO(addMinutes(new Date(), 15))
+    );
+  };
+
+  /** Show the chat button on the screen if it was previously hidden. */
+  show(): void {
+    if (!this.launcher) {
+      return;
+    }
+    this.launcher.style.display = "";
+  }
+
+  /** Hide the chat button from the screen (but don't remove from the DOM). */
+  hide(): void {
+    if (!this.launcher) {
+      return;
+    }
+    this.launcher.style.display = "none";
+  }
+
+  handleContactClicked = (e: MouseEvent): void => {
+    this.displayPubnubChat = false;
+    this.hideLauncher = false;
+    this.showTourNextToChat = false;
+
+    this.launcherRef.value?.onClickEmailOption(e);
+  };
+
+  handleTourClicked = (e: MouseEvent): void => {
+    if (this.showTourNextToChat) {
+      this.launcherRef.value?.onClickSSTOption(e);
+      return;
+    }
+    if (!this.hideLauncher) {
+      this.displayPubnubChat = false;
+    } else {
+      this.showTourNextToChat = true;
+    }
+
+    this.hideLauncher = false;
+    this.launcherRef.value?.onClickSSTOption(e);
+  };
+
+  handleContactTabClicked = (e: MouseEvent): void => {
+    this.displayPubnubChat = false;
+    this.showTourNextToChat = false;
+    this.hideLauncher = false;
+    this.launcherRef.value?.onClickPhoneOption(e);
+  };
+
+  // Depending on the rendered element of the chat widget, we need to adjust the position of the chat additional actions
+  // these will be aligned at the bottom. It is much easier to handle here at the parent of the launchers rather than
+  // in pubnub-chat.
+  adjustPositionChatAdditionalActions = (): void => {
+    const headerRef = this.shadowRoot?.getElementById(
+      "chatAdditionalActionsPubnub"
+    );
+    if (!headerRef) return;
+
+    const pubnubContainerElement = this.shadowRoot
+      ?.getElementById("pubnub-chat")
+      ?.shadowRoot?.getElementById("pubnub-chat-container");
+
+    const pubnubPopupCoords = pubnubContainerElement?.getBoundingClientRect();
+    if (!pubnubPopupCoords) return;
+    headerRef.style.left = `${pubnubPopupCoords.left}px`;
+    headerRef.style.top = `${pubnubPopupCoords.bottom}px`;
+  };
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    window.addEventListener("resize", this.adjustPositionChatAdditionalActions);
+    window.addEventListener("keydown", this.handleKeydownTab);
+  }
+
+  handleKeydownTab = (e: KeyboardEvent): void => {
+    if (e.key === "Tab") {
+      const pubnubContainerElement = this.displayPubnubChat
+        ? this.shadowRoot // pubnub chat
+            ?.getElementById("pubnub-chat")
+            ?.shadowRoot?.getElementById("pubnub-chat-container")
+        : this.shadowRoot // email us form
+            ?.getElementById("meetelise-launcher")
+            ?.shadowRoot?.getElementById("email-us-window")
+            ?.shadowRoot?.getElementById("email-us-form") ??
+          this.shadowRoot // tour booking form
+            ?.getElementById("meetelise-launcher")
+            ?.shadowRoot?.getElementById("tour-scheduler-window")
+            ?.shadowRoot?.getElementById("scheduler-container") ??
+          this.shadowRoot // text us form
+            ?.getElementById("meetelise-launcher")
+            ?.shadowRoot?.getElementById("call-us-window")
+            ?.shadowRoot?.getElementById("details-window");
+
+      if (!pubnubContainerElement) return;
+      e.preventDefault();
+
+      const inputsRef = pubnubContainerElement.querySelectorAll(
+        "input, me-select, textarea, action-confirm-button, [tabindex]"
+      );
+
+      const inputsArray = Array.from(inputsRef) as HTMLElement[];
+      const currentFocusedIndex = inputsArray.findIndex((el) =>
+        el.matches(":focus")
+      );
+
+      const nextIndex = (currentFocusedIndex + 1) % inputsArray.length;
+      inputsArray[nextIndex].focus();
+    }
+  };
+
+  getDeepActiveElement(): Element | null {
+    let activeElement = document.activeElement;
+    let count = 0;
+    while (
+      activeElement?.shadowRoot &&
+      activeElement?.shadowRoot.activeElement
+    ) {
+      count += 1;
+      activeElement = activeElement?.shadowRoot.activeElement;
+      if (count > 100) {
+        // just incase we get stuck in an infinite loop
+        sendLoggingEvent({
+          logType: LogType.error,
+          buildingSlug: this.buildingSlug,
+          logTitle: "[ERROR_GETTING_DEEP_ELEMENT]",
+          logData: { message: "error getting deep active element" },
+        });
+        break;
+      }
+    }
+    return activeElement;
+  }
+
+  updated(): void {
+    this.adjustPositionChatAdditionalActions();
+  }
+
+  disconnectedCallback(): void {
+    this.myPubnub?.handleDisconnect();
+    window.removeEventListener(
+      "resize",
+      this.adjustPositionChatAdditionalActions
+    );
+    window.removeEventListener("keydown", this.handleKeydownTab);
+
+    super.disconnectedCallback();
+  }
+
+  onClickMinimize = (e: MouseEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.isMinimized = !this.isMinimized;
+    this.showTourNextToChat = false;
+  };
+
+  private attachOnClickToLauncher = () => {
+    const launcher = this.launcherRef.value;
+    if (!launcher) {
+      return;
+    }
+
+    launcher.onChatTapped = async () => {
+      this.displayPubnubChat = true;
+      this.hideLauncher = true;
+      this.hasMounted = true;
+      localStorage.setItem("isChatOpen", "true");
+    };
+    launcher.onExitChat = this.onExitChat;
+  };
+
+  onExitChat = (): void => {
+    this.displayPubnubChat = false;
+    this.hideLauncher = false;
+    this.showTourNextToChat = false;
+    localStorage.setItem("isChatOpen", "false");
+  };
+
+  render(): TemplateResult {
+    installLauncher();
+    const showChatAdditionalActions =
+      this.hideLauncher && !this.isLoading && !isMobile();
+
+    return html`
+    <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.
+      </div>
+
+
+        ${
+          this.displayPubnubChat
+            ? html`
+                <pubnub-chat
+                  id="pubnub-chat"
+                  .channel=${this.myPubnub?.channel}
+                  .myPubnub=${this.myPubnub}
+                  .orgSlug=${this.orgSlug}
+                  .buildingSlug=${this.buildingSlug}
+                  .widgetType=${WidgetType.Default}
+                  .building=${this.buildingWebchatView}
+                  .primaryColor=${this.primaryColor}
+                  .backgroundColor=${this.backgroundColor}
+                  .onClickExit=${this.onExitChat}
+                  .onMount=${() => {
+                    this.adjustPositionChatAdditionalActions();
+                  }}
+                  .requiresConsent=${this.requiresConsent}
+                  .hideMobileFeatures=${this.hideMobileFeatures}
+                  .privacyPolicyUrl=${this.privacyPolicyUrl}
+                  .top=${this.top}
+                  .bottom=${this.bottom}
+                  .left=${this.left}
+                  .right=${this.right}
+                ></pubnub-chat>
+                <chat-additional-actions
+                  id="chatAdditionalActionsPubnub"
+                  .showChatAdditionalActions=${showChatAdditionalActions ||
+                  this.showTourNextToChat}
+                  .buildingWebchatView=${this.buildingWebchatView}
+                  .primaryColor=${this.primaryColor}
+                  .backgroundColor=${this.backgroundColor}
+                  .enabledChatWidgets=${this.enabledChatWidgets}
+                  .onClickMinimize=${this.onClickMinimize}
+                  .onClickEmailOption=${this.handleContactClicked}
+                  .onClickPhoneOption=${this.handleContactTabClicked}
+                  .onClickSSTOption=${this.handleTourClicked}
+                  .onClose=${() => {
+                    this.displayPubnubChat = false;
+                    this.showTourNextToChat = false;
+                    this.hideLauncher = false;
+                    localStorage.setItem("isChatOpen", "false");
+                  }}
+                ></chat-additional-actions>
+              `
+            : ""
+        }
+
+        <div
+        id='meetelise-chat-launcher-container'
+          class=${classMap({
+            launcherContainer: true,
+            ["launcher__mobile"]: isMobile(),
+            ["launcher__desktop"]: !isMobile(),
+            ["meetelise-chat"]: true,
+            launcher: true,
+            shouldBeVisible: true,
+            ["hideTab"]: this.isLoading,
+          })}
+        >
+          ${
+            this.buildingWebchatView
+              ? html`<meetelise-launcher
+                  id="meetelise-launcher"
+                  ${ref(this.launcherRef)}
+                  .isFirstMount=${!this.hasMounted}
+                  .buildingId=${this.buildingWebchatView?.id ?? 0}
+                  .hasDynamicSchedulingEnabled=${this.buildingWebchatView
+                    ?.usesDynamicScheduling ?? false}
+                  .orgLegalName=${this.buildingWebchatView?.orgLegalName ?? ""}
+                  .tourTypeOptions=${this.buildingWebchatView
+                    ?.tourTypeOptions ?? []}
+                  .launcherStyles=${this.launcherStyles}
+                  .primaryColor=${this.primaryColor}
+                  .backgroundColor=${this.backgroundColor}
+                  .foregroundColorOnPrimaryBackgroundColor=${this
+                    .foregroundColorOnPrimaryBackgroundColor ?? "white"}
+                  .foregroundColorOnSecondaryBackgroundColor=${this
+                    .foregroundColorOnSecondaryBackgroundColor ?? "black"}
+                  .isMinimized=${this.isMinimized}
+                  .onClickMinimize=${this.onClickMinimize}
+                  .onSstClose=${this.onSstClose}
+                  .overrideRentgrata=${this.overrideRentgrata}
+                  .autoOpenChatWidget=${this.buildingWebchatView
+                    ?.autoOpenChat ?? false}
+                  .mobileStyles=${isMobile() || this.isMinimized
+                    ? this.mobileStyles
+                    : {}}
+                  chatCallUsHeader=${this.buildingWebchatView
+                    ?.chatCallUsHeader ?? ""}
+                  chatId="${this.chatId}"
+                  phoneNumber="${this.phoneNumberForSource?.number ??
+                  this.buildingWebchatView?.phoneNumber ??
+                  ""}"
+                  buildingName=${this.buildingWebchatView?.name ?? ""}
+                  orgSlug="${this.orgSlug}"
+                  buildingSlug="${this.buildingSlug}"
+                  sgtUrl="${this.buildingWebchatView?.sgtUrl ?? ""}"
+                  selfGuidedToursTypeOffered="${this.buildingWebchatView
+                    ?.selfGuidedToursTypeOffered}"
+                  selfGuidedTourEnabled="${this.buildingWebchatView
+                    ?.isSelfGuidedTourEnabled}"
+                  designConcept="${this.designConcept ?? ""}"
+                  currentLeadSource="${this.LeadSourceClient?.leadSource ??
+                  null ??
+                  ""}"
+                  featureFlagShowDropdown="${this.featureFlagShowDropdown}"
+                  .leadSources="${this.leadSources ?? []}"
+                  escortedToursLink="${this.buildingWebchatView
+                    ?.escortedToursLink ?? ""}"
+                  virtualToursLink="${this.buildingWebchatView
+                    ?.virtualToursLink ?? ""}"
+                  .showTourNextToChat="${this.showTourNextToChat ?? ""}"
+                  @closeShowTourNextToChat=${() => {
+                    this.showTourNextToChat = false;
+                    this.hideLauncher = true;
+                  }}
+                  ?hidden=${this.hideLauncher}
+                  .hasCallUsEnabledDesktop=${this.enabledChatWidgets
+                    .callDesktop}
+                  .hasCallUsEnabledMobile=${this.enabledChatWidgets.callMobile}
+                  .hasChatEnabledDesktop=${this.enabledChatWidgets.chatDesktop}
+                  .hasChatEnabledMobile=${this.enabledChatWidgets.chatMobile}
+                  .hasEmailEnabledDesktop=${this.enabledChatWidgets
+                    .emailDesktop}
+                  .hasEmailEnabledMobile=${this.enabledChatWidgets.emailMobile}
+                  .hasTextUsEnabledDesktop=${this.enabledChatWidgets
+                    .textDesktop}
+                  .hasTextUsEnabledMobile=${this.enabledChatWidgets.textMobile}
+                  .hasSSTEnabledDesktop=${this.enabledChatWidgets.sstDesktop}
+                  .hasSSTEnabledMobile=${this.enabledChatWidgets.sstMobile}
+                  .hasApplyNowEnabledDesktop=${this.buildingWebchatView
+                    .shouldShowApplyNowDesktop}
+                  .hasApplyNowEnabledMobile=${this.buildingWebchatView
+                    .shouldShowApplyNowMobile}
+                  .applicationLink=${this.buildingWebchatView.applicationLink}
+                  .hasPricingCalculatorEnabledDesktop=${this.enabledChatWidgets
+                    .calcDesktop}
+                  .hasPricingCalculatorEnabledMobile=${this.enabledChatWidgets
+                    .calcMobile}
+                  .hasHideMobileFeatures=${this.hideMobileFeatures}
+                  .top=${this.top}
+                  .bottom=${this.bottom}
+                  .left=${this.left}
+                  .right=${this.right}
+                  .leadSourceClient=${this.LeadSourceClient}
+                >
+                </meetelise-launcher>`
+              : ""
+          }
+        </div>
+      </meta>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "me-chat": MEChat;
+  }
+
+  interface Window {
+    RCTPCampaign?: { CampaignDetails: { Source: string } };
+  }
+}
+
+const findElementById = (priorityIds: string[]): HTMLElement | null => {
+  for (const id of priorityIds) {
+    const element = document.getElementById(id);
+    if (element) {
+      return element;
+    }
+  }
+  return null;
+};
+
+const overrideContactUsForm = async (
+  orgSlug: string,
+  chatId: string | null,
+  sampleRateToUse: number,
+  buildingSlug?: string,
+  leadSource?: string | null
+): Promise<void> => {
+  if (!buildingSlug || !orgSlug) return;
+  const shouldUseOverrideContactUsForm =
+    await fetchFeatureFlagUseOverrideContactUsForm(buildingSlug);
+  if (!shouldUseOverrideContactUsForm) return;
+
+  const form = findElementById([
+    "myContactForm",
+    "contactus",
+    "fpa-myContactForm",
+  ]);
+  let btn = undefined;
+
+  if (!form || !(form instanceof HTMLFormElement)) {
+    const foundForm = document.querySelector("form");
+    if (window.location.pathname.toLowerCase().includes("contactus")) {
+      logContactUsFormError(
+        buildingSlug,
+        orgSlug,
+        "Could not find form",
+        foundForm ? { id: foundForm.id } : undefined
+      );
+    }
+    return;
+  }
+
+  // If the form is apart of the schedule tour form, do not override
+  // https://meetelise.slack.com/archives/C01BT9GB9LZ/p1706132172167819
+  try {
+    if (form.parentElement && form.parentElement.id === "scheduleTourForm") {
+      return logContactUsFormError(
+        buildingSlug,
+        orgSlug,
+        "Form is apart of schedule tour form!"
+      );
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error("error", error);
+  }
+
+  // Loop through the elements of the form
+  for (let i = 0; i < form.elements.length; i++) {
+    const element = form.elements[i];
+    if (
+      element.tagName.toLowerCase() === "button" &&
+      element.getAttribute("data-selenium-id") === "fakebutton"
+    ) {
+      btn = element;
+      break;
+    }
+    if (element.getAttribute("id") === "fpa-contact-submit") {
+      btn = element;
+      break;
+    }
+  }
+
+  if (!btn) {
+    return logContactUsFormError(
+      buildingSlug,
+      orgSlug,
+      "Could not find submit button"
+    );
+  }
+
+  const eliseUrl =
+    "https://app.meetelise.com/platformApi/state/create/contactMe";
+
+  const getFormElements = () => {
+    const firstName = findElementById([
+      "firstname",
+      "txtName",
+      "fpa-firstname",
+      "Form_FirstName",
+    ]) as HTMLInputElement | null;
+    const lastName = findElementById([
+      "lastname",
+      "txtName2",
+      "fpa-lastname",
+      "Form_LastName",
+    ]) as HTMLInputElement | null;
+    const email = findElementById([
+      "email",
+      "txtEmail",
+      "fpa-email",
+      "Form_Email",
+    ]) as HTMLInputElement | null;
+    const phone = findElementById([
+      "phonenumber",
+      "txtPhone",
+      "fpa-phonenumber",
+      "Form_Phone",
+    ]) as HTMLInputElement | null;
+    const message = findElementById([
+      "message",
+      "txtComments",
+      "fpa-email",
+      "Form_Message",
+    ]) as HTMLTextAreaElement | null;
+
+    const formElements = { firstName, lastName, email, phone, message };
+    return formElements;
+  };
+
+  const isMissingFormElements = () => {
+    if (Object.values(getFormElements()).some((el) => el === null)) {
+      return true;
+    }
+    return false;
+  };
+
+  const validateFormElements = () => {
+    Object.values(getFormElements()).forEach((el) => {
+      if (el?.getAttribute("aria-required") === "true" && !el.value) {
+        el.className = "form-control required is-invalid";
+      }
+    });
+  };
+
+  const isValid = () => {
+    return Object.values(getFormElements()).every((el) => {
+      if (el === null) return false;
+      if (el.getAttribute("aria-required") === "true" && !el.value) {
+        return false;
+      }
+      if (
+        (el.id === "email" || el.id === "phonenumber") &&
+        el.getAttribute("aria-invalid") === "true"
+      ) {
+        return false;
+      }
+      return true;
+    });
+  };
+
+  if (isMissingFormElements()) {
+    const missingElements = Object.entries(getFormElements())
+      .filter(([, val]) => val === null)
+      .map(([key]) => key);
+    return logContactUsFormError(
+      buildingSlug,
+      orgSlug,
+      "Missing the following form elements: " + missingElements.join(", ")
+    );
+  }
+  const originalButtonText = btn.textContent;
+
+  // Replace the original form element with the cloned one
+  const clonedButton = btn.cloneNode(true) as HTMLButtonElement;
+  btn.parentNode?.replaceChild(clonedButton, btn);
+
+  if (clonedButton) {
+    logSignal({
+      params: {
+        chat_id: chatId,
+        org_slug: orgSlug,
+        building_slug: buildingSlug,
+        is_form_override_success: true,
+      },
+      sampleRate: sampleRateToUse,
+    });
+  }
+
+  clonedButton.onclick = async function (event) {
+    validateFormElements();
+
+    if (!isValid()) return;
+    event.preventDefault();
+
+    clonedButton.textContent = "Processing request...";
+    clonedButton.disabled = true;
+
+    const formValues: { [key: string]: string | undefined } = {};
+    Object.entries(getFormElements()).forEach(
+      ([key, val]) => (formValues[key] = val?.value)
+    );
+
+    const buildingWebchatView = await fetchBuildingWebchatView(
+      orgSlug,
+      buildingSlug
+    );
+
+    if (!buildingWebchatView) {
+      logContactUsFormError(buildingSlug, orgSlug, "Could not find building");
+      return null;
+    }
+
+    const data = {
+      email_address: formValues.email,
+      first_name: formValues.firstName,
+      last_name: formValues.lastName,
+      phone_number: formValues.phone,
+      first_message: formValues.message,
+      building_id: buildingWebchatView.id,
+      is_external_form: true,
+      lead_sources: [
+        ...new Set(
+          leadSource
+            ? [leadSource, getDefaultLeadSourceAttribution(orgSlug)]
+            : [getDefaultLeadSourceAttribution(orgSlug)]
+        ),
+      ],
+    };
+
+    const jsonData = JSON.stringify(data);
+
+    fetch(eliseUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "building-slug": buildingSlug,
+        "org-slug": orgSlug,
+      },
+      body: jsonData,
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error ${response.status}`);
+        }
+
+        if (form) {
+          form.reset();
+        }
+
+        Object.values(getFormElements()).forEach((el) => {
+          if (!el) return;
+          el.disabled = true;
+        });
+        clonedButton.textContent = "Submitted";
+        clonedButton.disabled = true;
+
+        return response.json();
+      })
+      .catch(() => {
+        clonedButton.textContent = originalButtonText;
+      });
+  };
+};
+
+const logContactUsFormError = (
+  buildingSlug: string,
+  orgSlug: string,
+  reason?: string,
+  formIdInfo?: Record<string, unknown>
+) => {
+  const url = `https://app.meetelise.com/platformApi/webchat/form-override-error`;
+  const body = JSON.stringify({
+    orgSlug,
+    buildingSlug,
+    reason,
+    url: window.location.href,
+    formIdInfo,
+  });
+
+  fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "building-slug": buildingSlug,
+      "org-slug": orgSlug,
+    },
+    body,
+  });
+};