@meetelise/chat 1.34.1 → 1.34.3

package/src/WebComponent/me-chat.ts

@@ -1,1261 +0,0 @@
-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 } 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 ?? false;
-    const shouldShowCalcMobile =
-      this.buildingWebchatView?.shouldShowPricingCalculatorMobile ?? 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 ?? ""}"
-                  virtualToursTypeOffered="${this.buildingWebchatView
-                    .virtualToursTypeOffered ?? ""}"
-                  .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,
-  });
-};