@meetelise/chat 1.25.0 → 1.25.2

package/src/WebComponent/launcher/Launcher.ts

@@ -1,1193 +0,0 @@
-import { html, LitElement, TemplateResult, css } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { createRef, ref, Ref } from "lit/directives/ref.js";
-import { launcherStyles } from "./launcherStyles";
-import { typeEmojiStyles } from "./typeEmojiStyles";
-import { typeMiniStyles } from "./typeMiniStyles";
-import {
-  EmailUsWindow,
-  installEmailUsWindow,
-} from "../actions/email-us-window";
-import { StyleInfo, styleMap } from "lit/directives/style-map.js";
-import { installCallUsWindow } from "../actions/call-us-window";
-import { TourScheduler } from "../Scheduler/tour-scheduler";
-import { FeeCalculator } from "../FeeCalculator/fee-calculator";
-import { installFeeCalculator } from "../FeeCalculator";
-import { LabeledOption } from "../../fetchBuildingInfo";
-import {
-  defaultBackgroundColor,
-  defaultPrimaryColor,
-  hexToAlmostWhite,
-} from "../../themes";
-import "./mobile-launcher";
-import "../actions/collapse-expand-button";
-import { DesignConcepts } from "../../fetchBuildingWebchatView";
-import { isMobile } from "../../utils";
-import classNames from "classnames";
-import LeadSourceClient from "../LeadSourceClient";
-
-import {
-  closeRengrataWidget,
-  hasRentgrata,
-  openRengrataWidget,
-} from "../../rentgrata";
-import noop from "lodash/noop";
-import { ChatOutlineIcon } from "../icons/ChatOutlineIcon";
-import { ChevronRightIcon } from "../icons/ChevronRightIcon";
-import { BookTourOutlineIcon } from "../icons/BookTourOutlineIcon";
-import { EmailOutlineIcon } from "../icons/EmailOutlineIcon";
-import { PhoneOutlineIcon } from "../icons/PhoneOutlineIcon";
-import { HeyThereEmoji } from "../icons/HeyThereEmojiIcon";
-import { ContactResidentIcon } from "../icons/ContactResidentIcon";
-import { ApplyOutlineIcon } from "../icons/ApplyOutlineIcon";
-import { CalculatorOutlineIcon } from "../icons/CalculatorOutlineIcon";
-
-@customElement("meetelise-launcher")
-export class Launcher extends LitElement {
-  static styles = css`
-    ${launcherStyles}
-    ${typeEmojiStyles}
-    ${typeMiniStyles}
-  `;
-
-  @property({ attribute: true })
-  isMinimized = false;
-
-  @property()
-  mobileStyles: StyleInfo = {};
-
-  @property({ type: Boolean })
-  isFirstMount = false;
-
-  @property({ attribute: false })
-  autoOpenChatWidget = false;
-
-  @property()
-  phoneNumber = "";
-  @property({ attribute: true })
-  buildingName = "";
-  @property({ attribute: true })
-  chatId = "";
-  @property({ attribute: true })
-  orgLegalName = "";
-  @property({ attribute: true })
-  chatCallUsHeader = "";
-  @property({ attribute: false })
-  buildingId = 0;
-  @property({ attribute: true })
-  buildingSlug = "";
-  @property({ attribute: true })
-  orgSlug = "";
-  @property({ attribute: true })
-  sgtUrl = "";
-  @property({ attribute: true })
-  selfGuidedTourEnabled = false;
-  @property({ attribute: true })
-  selfGuidedToursTypeOffered = "";
-  @property({ attribute: true })
-  designConcept = "";
-  @property({ attribute: true })
-  featureFlagShowDropdown = "";
-  @property({ attribute: false })
-  leadSources: string[] = [];
-  @property({ attribute: true })
-  currentLeadSource = "";
-  @property({ attribute: true })
-  escortedToursLink = "";
-  @property({ attribute: true })
-  virtualToursLink = "";
-
-  @property({ type: Boolean })
-  hasChatEnabledDesktop = false;
-  @property({ type: Boolean })
-  hasChatEnabledMobile = false;
-
-  @property({ type: Boolean })
-  hasEmailEnabledDesktop = false;
-  @property({ type: Boolean })
-  hasEmailEnabledMobile = false;
-
-  @property({ attribute: true })
-  hasApplyNowEnabledDesktop = false;
-  @property({ attribute: true })
-  hasApplyNowEnabledMobile = false;
-  @property({ attribute: true })
-  applicationLink = "";
-
-  @property({ type: Boolean })
-  hasCallUsEnabledDesktop = false;
-  @property({ type: Boolean })
-  hasCallUsEnabledMobile = false;
-
-  @property({ type: Boolean })
-  hasTextUsEnabledDesktop = false;
-  @property({ type: Boolean })
-  hasTextUsEnabledMobile = false;
-
-  @property({ type: Boolean })
-  hasSSTEnabledDesktop = false;
-  @property({ type: Boolean })
-  hasSSTEnabledMobile = false;
-
-  @property({ attribute: false })
-  tourTypeOptions: LabeledOption[] = [];
-  @property({ attribute: true })
-  hasDynamicSchedulingEnabled = false;
-
-  @property({ attribute: true })
-  hasPricingCalculatorEnabledDesktop = false;
-  @property({ attribute: true })
-  hasPricingCalculatorEnabledMobile = false;
-
-  onExitChat: () => void = () => {
-    return;
-  };
-
-  @property({ attribute: false })
-  hasHideMobileFeatures = false;
-
-  @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 })
-  showTourNextToChat = false;
-
-  @property({ attribute: false })
-  onChatTapped: () => void = () => {
-    return;
-  };
-
-  @property({ attribute: true })
-  onClickMinimize: (e: MouseEvent) => void = () => {
-    return;
-  };
-
-  @property({ attribute: true })
-  onSstClose: () => void = noop;
-
-  @property({ attribute: true })
-  overrideRentgrata = false;
-
-  @property({ attribute: false })
-  launcherStyles: StyleInfo = {};
-
-  @property({ attribute: true })
-  primaryColor: string = defaultPrimaryColor;
-
-  @property({ attribute: true })
-  backgroundColor: string = defaultBackgroundColor;
-
-  @property({ attribute: true })
-  foregroundColorOnPrimaryBackgroundColor = "white";
-  @property({ attribute: true })
-  foregroundColorOnSecondaryBackgroundColor = "black";
-
-  @property({ attribute: true })
-  private leadSourceClient: LeadSourceClient | null = null;
-
-  @state()
-  isEmailWindowOpen = false;
-  @state()
-  isCallUsWindowOpen = false;
-  @state()
-  isSSTWindowOpen = false;
-  @state()
-  isTextUsWindowOpen = false;
-  @state()
-  isCalculatorWindowOpen = false;
-
-  @state()
-  private isMobileFeaturesExpanded = false;
-
-  getNumCallToActions = (): number => {
-    const isEmailEnabled =
-      this.hasEmailEnabledDesktop || this.hasEmailEnabledMobile;
-    const isPhoneNumberEnabled =
-      !!this.phoneNumber &&
-      (this.hasCallUsEnabledDesktop || this.hasCallUsEnabledMobile);
-    const isSSTEnabled = this.hasSSTEnabledDesktop || this.hasSSTEnabledMobile;
-    const isTextUsEnabled =
-      this.hasTextUsEnabledDesktop || this.hasTextUsEnabledMobile;
-    const isApplyNowEnabled =
-      this.hasApplyNowEnabledDesktop || this.hasApplyNowEnabledMobile;
-    const isPricingCalculatorEnabled =
-      this.hasPricingCalculatorEnabledDesktop ||
-      this.hasPricingCalculatorEnabledMobile;
-
-    return [
-      isEmailEnabled,
-      isPhoneNumberEnabled,
-      isSSTEnabled,
-      isTextUsEnabled,
-      isApplyNowEnabled,
-      isPricingCalculatorEnabled,
-    ].filter((v) => v).length;
-  };
-
-  emailUsWindowRef: Ref<EmailUsWindow> = createRef();
-  tourSchedulerRef: Ref<TourScheduler> = createRef();
-  calculatorWindowRef: Ref<FeeCalculator> = createRef();
-
-  updated = async (): Promise<void> => {
-    this.attachOnClickToEmailUsWindow();
-    this.attachOnClickToSSTWindow();
-    this.attachOnClickToCalculatorWindow();
-
-    // If we have the SST tour popup open next to the chat widget, we want to close it
-    if (
-      (this.isEmailWindowOpen || this.isCallUsWindowOpen) &&
-      this.isSSTWindowOpen
-    ) {
-      this.onCloseSSTWindow();
-    }
-  };
-
-  attachOnClickToEmailUsWindow = (): void => {
-    const emailUsWindowRef = this.emailUsWindowRef.value;
-    if (!emailUsWindowRef) {
-      return;
-    }
-    emailUsWindowRef.onCloseClicked = this.onCloseEmailWindow;
-  };
-
-  attachOnClickToSSTWindow = (): void => {
-    const sstWindowRef = this.tourSchedulerRef.value;
-    if (!sstWindowRef) {
-      return;
-    }
-    sstWindowRef.onCloseClicked = this.onCloseSSTWindow;
-  };
-
-  attachOnClickToCalculatorWindow = (): void => {
-    const calculatorWindowRef = this.calculatorWindowRef.value;
-    if (!calculatorWindowRef) return;
-    calculatorWindowRef.onCloseClicked = this.onCloseCalculatorWindow;
-  };
-
-  onClickEmailOption = (e: MouseEvent): void => {
-    e.preventDefault();
-    e.stopPropagation();
-    closeRengrataWidget();
-
-    this.isEmailWindowOpen = true;
-  };
-
-  onCloseEmailWindow = (): void => {
-    this.isEmailWindowOpen = false;
-  };
-
-  onClickPhoneOption = (e: MouseEvent): void => {
-    e.preventDefault();
-    e.stopPropagation();
-    closeRengrataWidget();
-    this.isCallUsWindowOpen = true;
-  };
-
-  onClickApplyNowOption = (e: MouseEvent): void => {
-    e.preventDefault();
-    e.stopPropagation();
-    closeRengrataWidget();
-    window.open(this.applicationLink, "_blank");
-  };
-
-  onClickPriceCalculatorOption = (e: MouseEvent): void => {
-    e.preventDefault();
-    e.stopPropagation();
-    closeRengrataWidget();
-    this.isCalculatorWindowOpen = true;
-  };
-
-  onClosePhoneWindow = (): void => {
-    this.isCallUsWindowOpen = false;
-  };
-
-  onClickSSTOption = (e: MouseEvent): void => {
-    e.preventDefault();
-    e.stopPropagation();
-    closeRengrataWidget();
-    this.isSSTWindowOpen = true;
-  };
-
-  onCloseSSTWindow = (): void => {
-    this.onSstClose();
-    this.isSSTWindowOpen = false;
-    if (this.showTourNextToChat) {
-      this.dispatchEvent(
-        new CustomEvent("closeShowTourNextToChat", {
-          bubbles: true,
-        })
-      );
-    }
-  };
-
-  onCloseCalculatorWindow = (): void => {
-    this.isCalculatorWindowOpen = false;
-  };
-
-  onClickTextUsOption = (e: MouseEvent): void => {
-    e.preventDefault();
-    e.stopPropagation();
-    this.isTextUsWindowOpen = true;
-  };
-
-  isCallToActionWindowOpen = (): boolean => {
-    return (
-      [
-        this.isEmailWindowOpen,
-        this.isCallUsWindowOpen,
-        this.isSSTWindowOpen,
-        this.isTextUsWindowOpen,
-        this.isCalculatorWindowOpen,
-      ].filter((v) => v).length === 1
-    );
-  };
-
-  toggleMobileFeatures = (): void => {
-    this.isMobileFeaturesExpanded = !this.isMobileFeaturesExpanded;
-  };
-
-  renderActionPills = (): TemplateResult => {
-    if (
-      isMobile() ||
-      this.isMinimized ||
-      this.designConcept === DesignConcepts.MINIMIZED
-    ) {
-      return html` ${this.hasHideMobileFeatures && isMobile()
-          ? html`<collapse-expand-button
-              .toExpand=${this.isMobileFeaturesExpanded}
-              .primaryColor=${this.primaryColor}
-              .onClick=${this.toggleMobileFeatures}
-            ></collapse-expand-button>`
-          : ""}
-        <mobile-launcher
-          .onClickMinimize=${this.onClickMinimize}
-          .onClickEmailOption=${this.onClickEmailOption}
-          .onClickPhoneOption=${this.onClickPhoneOption}
-          .onClickSSTOption=${this.onClickSSTOption}
-          .onChatTapped=${this.onChatTapped}
-          .onClickApplyNowOption=${this.onClickApplyNowOption}
-          .onClickPriceCalculatorOption=${this.onClickPriceCalculatorOption}
-          .overrideRentgrata=${this.overrideRentgrata}
-          .isMobileDesign=${isMobile() ||
-          this.designConcept === DesignConcepts.MINIMIZED}
-          .primaryColor=${this.primaryColor}
-          .backgroundColor=${this.backgroundColor}
-          .hasChatEnabled=${!isMobile()
-            ? this.hasChatEnabledDesktop
-            : this.hasChatEnabledMobile}
-          .hasEmailEnabled=${!isMobile()
-            ? this.hasEmailEnabledDesktop
-            : this.hasHideMobileFeatures && !this.isMobileFeaturesExpanded
-            ? false
-            : this.hasEmailEnabledMobile}
-          .hasCallUsEnabled=${!isMobile()
-            ? this.phoneNumber && this.hasCallUsEnabledDesktop
-            : this.hasHideMobileFeatures && !this.isMobileFeaturesExpanded
-            ? false
-            : this.hasCallUsEnabledMobile}
-          .hasTextUsEnabled=${!isMobile()
-            ? this.hasTextUsEnabledDesktop
-            : this.hasHideMobileFeatures && !this.isMobileFeaturesExpanded
-            ? false
-            : this.hasTextUsEnabledMobile}
-          .hasSSTEnabled=${!isMobile()
-            ? this.hasSSTEnabledDesktop
-            : this.hasHideMobileFeatures && !this.isMobileFeaturesExpanded
-            ? false
-            : this.hasSSTEnabledMobile}
-          .hasApplyNowEnabled=${!isMobile()
-            ? this.hasApplyNowEnabledDesktop
-            : this.hasHideMobileFeatures && !this.isMobileFeaturesExpanded
-            ? false
-            : this.hasApplyNowEnabledMobile}
-          .applicationLink=${this.applicationLink}
-          .hasPricingCalculatorEnabled=${!isMobile()
-            ? this.hasPricingCalculatorEnabledDesktop
-            : this.hasHideMobileFeatures && !this.isMobileFeaturesExpanded
-            ? false
-            : this.hasPricingCalculatorEnabledMobile}
-        ></mobile-launcher>`;
-    }
-
-    if (this.designConcept === DesignConcepts.EMOJI) {
-      return this.emojiPillList();
-    }
-    return this.verticalPillList();
-  };
-
-  private emojiPillList = (): TemplateResult => {
-    const emojiPillListItems: {
-      pillKey: string;
-      pill: TemplateResult | null;
-    }[] = [
-      {
-        pillKey: "Email",
-        pill: this.hasEmailEnabledDesktop
-          ? html` <div
-          class="type-hey__pill"
-          @click=${this.onClickEmailOption}
-          style=${styleMap({
-            background: this.backgroundColor,
-          })}
-        >
-          <div class="type-hey__pill-left">
-            <div class="type-hey__icon">${EmailOutlineIcon(
-              this.foregroundColorOnSecondaryBackgroundColor
-            )}</div>
-            <div style=${styleMap({
-              color: this.foregroundColorOnSecondaryBackgroundColor,
-            })}><span class="title-bold">Email</span> an agent</div>
-          </div>
-          <div class="type-gradient__icon">${ChevronRightIcon(
-            this.foregroundColorOnSecondaryBackgroundColor
-          )}</div>
-          </div>
-        </div>`
-          : null,
-      },
-      {
-        pillKey: "SST",
-        pill: this.hasSSTEnabledDesktop
-          ? html`
-             <div
-                class="type-hey__pill"
-                @click=${this.onClickSSTOption}
-                style=${styleMap({
-                  background: this.backgroundColor,
-                })}>
-                <div class="type-hey__pill-left">
-                  <div class="type-hey__icon">${BookTourOutlineIcon(
-                    this.foregroundColorOnSecondaryBackgroundColor
-                  )}</div>
-                    <div style=${styleMap({
-                      color: this.foregroundColorOnSecondaryBackgroundColor,
-                    })}>
-                      <span class="title-bold">Book</span> a tour
-                    </div>
-                </div>
-                <div class="type-gradient__icon">${ChevronRightIcon(
-                  this.foregroundColorOnSecondaryBackgroundColor
-                )}</div>
-                </div>
-              </div>
-            `
-          : null,
-      },
-      {
-        pillKey: "Phone",
-        pill:
-          this.phoneNumber &&
-          (this.hasCallUsEnabledDesktop || this.hasTextUsEnabledDesktop)
-            ? html`
-                <div
-                      class="type-hey__pill"
-                      @click=${this.onClickPhoneOption}
-                      style=${styleMap({
-                        background: this.backgroundColor,
-                      })}
-                      >
-                    <div class="type-hey__pill-left">
-                      <div class="type-hey__icon">${PhoneOutlineIcon(
-                        this.foregroundColorOnSecondaryBackgroundColor
-                      )}</div>
-                        <div style=${styleMap({
-                          color: this.foregroundColorOnSecondaryBackgroundColor,
-                        })}>
-                          ${
-                            this.hasCallUsEnabledDesktop &&
-                            this.hasTextUsEnabledDesktop
-                              ? html` <span class="title-bold">Call</span> or
-                                  <span class="title-bold">text</span> us`
-                              : ""
-                          }
-                          ${
-                            this.hasCallUsEnabledDesktop &&
-                            !this.hasTextUsEnabledDesktop
-                              ? html` <span class="title-bold">Call</span> us`
-                              : ""
-                          }
-                          ${
-                            !this.hasCallUsEnabledDesktop &&
-                            this.hasTextUsEnabledDesktop
-                              ? html` <span class="title-bold">Text</span> us`
-                              : ""
-                          }
-
-                        </div>
-                      </div>
-                      <div class="type-gradient__icon">${ChevronRightIcon(
-                        this.foregroundColorOnSecondaryBackgroundColor
-                      )}</div>
-                    </div>
-                  </div>
-              `
-            : null,
-      },
-    ];
-    const pills = emojiPillListItems.filter((v) => !!v.pill);
-
-    return html`
-      <div
-        class="type-hey__list"
-        style=${styleMap({
-          background: this.primaryColor,
-        })}
-      >
-        <div class="type-hey__chat-container">
-          ${this.hasChatEnabledDesktop
-            ? html`<minimize-expand-button
-                .primaryColor=${this.primaryColor}
-                .onClick=${this.onClickMinimize}
-              ></minimize-expand-button>`
-            : ""}
-        </div>
-
-        <div class="type-hey__top-section">
-          <div class="type-hey__ai-topic">
-            <p>AI Assistant</p>
-            <div class="type-hey__ai-topic-notch"></div>
-          </div>
-          <div class="type-hey__greeting">
-            <h1>Hey there!</h1>
-            <div>${HeyThereEmoji()}</div>
-          </div>
-          ${this.hasChatEnabledDesktop
-            ? html`
-                <div
-                  id="type-hey__ask-prompt"
-                  class="type-hey__pill"
-                  @click=${this.onChatTapped}
-                  style=${styleMap({
-                    background: hexToAlmostWhite(this.primaryColor, 0.2),
-                  })}
-                >
-                  <div class="type-hey__pill-left">
-                    <div class="type-hey__icon">
-                      ${ChatOutlineIcon(
-                        this.foregroundColorOnPrimaryBackgroundColor
-                      )}
-                    </div>
-                    <div
-                      style=${styleMap({
-                        color: this.foregroundColorOnPrimaryBackgroundColor,
-                      })}
-                    >
-                      <span class="title-bold">Chat</span> with us
-                    </div>
-                  </div>
-                  <div class="type-gradient__icon">
-                    ${ChevronRightIcon(
-                      this.foregroundColorOnPrimaryBackgroundColor
-                    )}
-                  </div>
-                </div>
-              `
-            : ""}
-        </div>
-
-        <div class="type-hey__bottom-section">
-          <div class="type-hey__botton-section-pills">
-            ${pills.map((p) => p.pill)}
-            ${this.overrideRentgrata && hasRentgrata()
-              ? html`
-                    <div
-                      class="type-hey__pill"
-                      @click=${() => {
-                        openRengrataWidget();
-                      }}
-                      style=${styleMap({
-                        background: this.backgroundColor,
-                      })}>
-                      <div class="type-hey__pill-left">
-                        <div class="type-hey__icon">${ContactResidentIcon(
-                          "black"
-                        )}</div>
-                          <div>
-                            <span class="title-bold">Contact</span> a resident
-                          </div>
-                      </div>
-                      <div class="type-gradient__icon">${ChevronRightIcon(
-                        this.foregroundColorOnSecondaryBackgroundColor
-                      )}</div>
-                      </div>
-                    </div>`
-              : ""}
-          </div>
-
-          <div class="type-hey__bottom-info">
-            <div class="type-hey__bottom-info-inner">
-              Online <span class="title-bold">24 hours</span> a day,
-              <span class="title-bold">7</span> days a week
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  };
-
-  private verticalPillList = (): TemplateResult => {
-    // Some clients are insisting on the tour pill being at the top
-    const showTourAtTop =
-      this.orgSlug === "Pacific Urban Residential" ||
-      this.orgSlug === "cbc11aba-21c4-4571-bc43-ff9d86a029e3";
-
-    const verticalPillListItems: {
-      pillKey: string;
-      pill: TemplateResult | null;
-    }[] = [
-      {
-        pillKey: "Chat",
-        pill: this.hasChatEnabledDesktop
-          ? html`
-              <div class="inner-pill-wrapper"
-                style=${styleMap({
-                  background: showTourAtTop
-                    ? this.backgroundColor
-                    : this.primaryColor,
-                })}
-                @click=${this.onChatTapped}>
-                  <div class="vertical-pill-left">
-                    <div class="vertical-pill-icon">${ChatOutlineIcon(
-                      showTourAtTop
-                        ? this.foregroundColorOnSecondaryBackgroundColor
-                        : this.foregroundColorOnPrimaryBackgroundColor
-                    )}</div>
-                    <div class="vertical-pill-title" style=${styleMap({
-                      color: showTourAtTop
-                        ? this.foregroundColorOnSecondaryBackgroundColor
-                        : this.foregroundColorOnPrimaryBackgroundColor,
-                    })}>
-                      <span class="vertical-pill-bold">Chat</span> with us
-                    </div>
-                  </div>
-                  <div class="chevron-right">${ChevronRightIcon(
-                    showTourAtTop
-                      ? this.foregroundColorOnSecondaryBackgroundColor
-                      : this.foregroundColorOnPrimaryBackgroundColor
-                  )}</div>
-              </div>
-            </div>
-          `
-          : null,
-      },
-      {
-        pillKey: "Price Calculator",
-        pill: this.hasPricingCalculatorEnabledDesktop
-          ? html`
-              <div
-                @click=${this.onClickPriceCalculatorOption}
-                class="inner-pill-wrapper"
-                style=${styleMap({
-                  background: this.backgroundColor,
-                })}
-              >
-                <div class="vertical-pill-left">
-                  <div class="vertical-pill-icon">
-                    ${CalculatorOutlineIcon(
-                      this.foregroundColorOnSecondaryBackgroundColor
-                    )}
-                  </div>
-                  <div class="vertical-pill-title">
-                    <span class="vertical-pill-bold">Calculate</span> Cost
-                  </div>
-                </div>
-                <div class="chevron-right">
-                  ${ChevronRightIcon(
-                    this.foregroundColorOnSecondaryBackgroundColor
-                  )}
-                </div>
-              </div>
-            `
-          : null,
-      },
-      {
-        pillKey: "SST",
-        pill: this.hasSSTEnabledDesktop
-          ? html`
-              <div
-                @click=${this.onClickSSTOption}
-                id="overlay-inner-pill"
-                class="inner-pill-wrapper"
-                style=${styleMap({
-                  background: showTourAtTop
-                    ? this.primaryColor
-                    : this.backgroundColor,
-                })}
-              >
-                <div class="vertical-pill-left">
-                  <div class="vertical-pill-icon">
-                    ${BookTourOutlineIcon(
-                      showTourAtTop
-                        ? this.foregroundColorOnPrimaryBackgroundColor
-                        : this.foregroundColorOnSecondaryBackgroundColor
-                    )}
-                  </div>
-                  <div
-                    class="vertical-pill-title"
-                    style=${styleMap({
-                      color: showTourAtTop
-                        ? this.foregroundColorOnPrimaryBackgroundColor
-                        : this.foregroundColorOnSecondaryBackgroundColor,
-                    })}
-                  >
-                    <span class="vertical-pill-bold">Book</span>
-                    a tour
-                  </div>
-                </div>
-                <div class="chevron-right">
-                  ${ChevronRightIcon(
-                    showTourAtTop
-                      ? this.foregroundColorOnPrimaryBackgroundColor
-                      : this.foregroundColorOnSecondaryBackgroundColor
-                  )}
-                </div>
-              </div>
-            `
-          : null,
-      },
-      {
-        pillKey: "Email",
-        pill: this.hasEmailEnabledDesktop
-          ? html`
-              <div
-                @click=${this.onClickEmailOption}
-                class="inner-pill-wrapper"
-                style=${styleMap({
-                  background: this.backgroundColor,
-                })}
-              >
-                <div class="vertical-pill-left">
-                  <div class="vertical-pill-icon">
-                    ${EmailOutlineIcon(
-                      this.foregroundColorOnSecondaryBackgroundColor
-                    )}
-                  </div>
-                  <div
-                    class="vertical-pill-title"
-                    style=${styleMap({
-                      color: this.foregroundColorOnSecondaryBackgroundColor,
-                    })}
-                  >
-                    <span class="vertical-pill-bold">Email</span>
-                    an agent
-                  </div>
-                </div>
-                <div class="chevron-right">
-                  ${ChevronRightIcon(
-                    this.foregroundColorOnSecondaryBackgroundColor
-                  )}
-                </div>
-              </div>
-            `
-          : null,
-      },
-      {
-        pillKey: "Phone",
-        pill:
-          this.phoneNumber &&
-          (this.hasCallUsEnabledDesktop || this.hasTextUsEnabledDesktop)
-            ? html`
-                <div
-                  @click=${this.onClickPhoneOption}
-                  class="inner-pill-wrapper"
-                  style=${styleMap({
-                    background: this.backgroundColor,
-                  })}
-                >
-                  <div class="vertical-pill-left">
-                    <div class="vertical-pill-icon">
-                      ${PhoneOutlineIcon(
-                        this.foregroundColorOnSecondaryBackgroundColor
-                      )}
-                    </div>
-                    ${this.hasCallUsEnabledDesktop &&
-                    this.hasTextUsEnabledDesktop
-                      ? html`
-                          <div
-                            class="vertical-pill-title"
-                            style=${styleMap({
-                              color:
-                                this.foregroundColorOnSecondaryBackgroundColor,
-                            })}
-                          >
-                            <span class="vertical-pill-bold">Call</span> or
-                            <span class="vertical-pill-bold">text</span> us
-                          </div>
-                        `
-                      : ""}
-                    ${this.hasCallUsEnabledDesktop &&
-                    !this.hasTextUsEnabledDesktop
-                      ? html`
-                          <div
-                            class="vertical-pill-title"
-                            style=${styleMap({
-                              color:
-                                this.foregroundColorOnSecondaryBackgroundColor,
-                            })}
-                          >
-                            <span class="vertical-pill-bold">Call</span> us
-                          </div>
-                        `
-                      : ""}
-                    ${!this.hasCallUsEnabledDesktop &&
-                    this.hasTextUsEnabledDesktop
-                      ? html`
-                          <div
-                            class="vertical-pill-title"
-                            style=${styleMap({
-                              color:
-                                this.foregroundColorOnSecondaryBackgroundColor,
-                            })}
-                          >
-                            <span class="vertical-pill-bold">Text</span> us
-                          </div>
-                        `
-                      : ""}
-                  </div>
-                  <div class="chevron-right">
-                    ${ChevronRightIcon(
-                      this.foregroundColorOnSecondaryBackgroundColor
-                    )}
-                  </div>
-                </div>
-              `
-            : null,
-      },
-      {
-        pillKey: "Apply",
-        pill:
-          this.applicationLink && this.hasApplyNowEnabledDesktop
-            ? html`
-                <div
-                  @click=${this.onClickApplyNowOption}
-                  class="inner-pill-wrapper"
-                  style=${styleMap({
-                    background: this.backgroundColor,
-                  })}
-                >
-                  <div class="vertical-pill-left">
-                    <div class="vertical-pill-icon">
-                      ${ApplyOutlineIcon(
-                        this.foregroundColorOnSecondaryBackgroundColor
-                      )}
-                    </div>
-                    <div
-                      class="vertical-pill-title"
-                      style=${styleMap({
-                        color: this.foregroundColorOnSecondaryBackgroundColor,
-                      })}
-                    >
-                      <span class="vertical-pill-bold">Apply</span>
-                      now
-                    </div>
-                  </div>
-                  <div class="chevron-right">
-                    ${ChevronRightIcon(
-                      this.foregroundColorOnSecondaryBackgroundColor
-                    )}
-                  </div>
-                </div>
-              `
-            : null,
-      },
-    ];
-    const pills = verticalPillListItems.filter((v) => !!v.pill);
-    if (showTourAtTop) {
-      const sstIndex = pills.findIndex((p) => p.pillKey === "SST");
-      if (sstIndex !== -1) {
-        const [sstPill] = pills.splice(sstIndex, 1);
-        pills.unshift(sstPill);
-      }
-    }
-    return html`
-      <div class="vertical-pill-list">
-        <div class="vertical-pill-list">
-          ${this.hasChatEnabledDesktop
-            ? html`<button
-                @click=${this.onClickMinimize}
-                class="minimize-button"
-                aria-label="Minimize"
-              >
-                <div class="chevron-down">${ChevronRightIcon("black")}</div>
-              </button>`
-            : ""}
-          ${pills.map((p) => p.pill)}
-          ${this.overrideRentgrata && hasRentgrata()
-            ? html`<div
-                @click=${() => {
-                  openRengrataWidget();
-                }}
-                class="inner-pill-wrapper"
-                style=${styleMap({
-                  background: this.backgroundColor,
-                })}
-              >
-                <div class="vertical-pill-left">
-                  <div class="vertical-pill-icon">
-                    ${ContactResidentIcon(
-                      this.foregroundColorOnSecondaryBackgroundColor
-                    )}
-                  </div>
-                  <div class="vertical-pill-title">
-                    <span class="vertical-pill-bold">Contact</span> a resident
-                  </div>
-                </div>
-                <div class="chevron-right">${ChevronRightIcon("black")}</div>
-              </div>`
-            : ""}
-        </div>
-      </div>
-    `;
-  };
-
-  render(): TemplateResult {
-    installEmailUsWindow();
-    installCallUsWindow();
-    installFeeCalculator();
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (window as any).eliseAi.onOpenSST = (callBack?: () => void) => {
-      this.isSSTWindowOpen = true;
-      this.isCallUsWindowOpen = false;
-      this.isEmailWindowOpen = false;
-      this.onExitChat();
-      if (callBack) {
-        callBack();
-      }
-    };
-
-    if (this.hasChatEnabledDesktop || this.hasChatEnabledMobile) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (window as any).eliseAi.onOpenChat = (callBack?: () => void) => {
-        this.onChatTapped();
-        this.isSSTWindowOpen = false;
-        this.isCallUsWindowOpen = false;
-        this.isEmailWindowOpen = false;
-        if (callBack) {
-          callBack();
-        }
-      };
-    }
-    if (this.hasCallUsEnabledDesktop || this.hasCallUsEnabledMobile) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (window as any).eliseAi.onOpenCallUsWindow = (callBack?: () => void) => {
-        this.isCallUsWindowOpen = true;
-        this.isSSTWindowOpen = false;
-        this.isEmailWindowOpen = false;
-        this.onExitChat();
-        if (callBack) {
-          callBack();
-        }
-      };
-    }
-    if (this.hasEmailEnabledDesktop || this.hasEmailEnabledMobile) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (window as any).eliseAi.onOpenEmailUsWindow = (callBack?: () => void) => {
-        this.isEmailWindowOpen = true;
-        this.isSSTWindowOpen = false;
-        this.isCallUsWindowOpen = false;
-        this.onExitChat();
-        if (callBack) {
-          callBack();
-        }
-      };
-    }
-    if (
-      this.hasPricingCalculatorEnabledDesktop ||
-      this.hasPricingCalculatorEnabledMobile
-    ) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (window as any).eliseAi.onOpenPriceCalculatorWindow = (
-        callBack?: () => void
-      ) => {
-        this.isCalculatorWindowOpen = true;
-        if (callBack) {
-          callBack();
-        }
-      };
-    }
-    const overrideStyleWindows = {
-      top:
-        !isMobile() && this.top !== undefined && !isNaN(this.top)
-          ? `${this.top}px`
-          : undefined,
-      bottom:
-        !isMobile() && this.bottom !== undefined && !isNaN(this.bottom)
-          ? `${this.bottom}px`
-          : undefined,
-      left:
-        !isMobile() && this.left !== undefined && !isNaN(this.left)
-          ? `${this.left}px`
-          : undefined,
-      right:
-        !isMobile() && this.right !== undefined && !isNaN(this.right)
-          ? `${this.right}px`
-          : undefined,
-    };
-
-    return html`
-      <div
-        class=${classNames({
-          ["launcher__mobile-launcher-wrapper"]: isMobile() || this.isMinimized,
-          ["launcher__mini-launcher-wrapper"]: !isMobile() && !this.isMinimized,
-          ["launcher__mini-elevated"]:
-            this.orgSlug.toLowerCase() === "livcor" &&
-            (isMobile() || this.isMinimized),
-        })}
-        style=${styleMap({
-          ...this.launcherStyles,
-          ...this.mobileStyles,
-          top:
-            !isMobile() && this.top !== undefined && !isNaN(this.top)
-              ? `${this.top - 700}px`
-              : this.mobileStyles.top !== undefined
-              ? `${this.mobileStyles.top}px`
-              : undefined,
-          bottom:
-            !isMobile() && this.bottom !== undefined && !isNaN(this.bottom)
-              ? `${this.bottom}px`
-              : this.mobileStyles.bottom !== undefined
-              ? `${this.mobileStyles.bottom}px`
-              : "72px",
-          left:
-            !isMobile() && this.left !== undefined && !isNaN(this.left)
-              ? `${this.left}px`
-              : this.mobileStyles.left !== undefined
-              ? `${this.mobileStyles.left}px`
-              : undefined,
-          right:
-            !isMobile() && this.right !== undefined && !isNaN(this.right)
-              ? `${this.right}px`
-              : this.mobileStyles.right !== undefined
-              ? `${this.mobileStyles.right}px`
-              : "18px",
-        })}
-      >
-        ${this.isEmailWindowOpen
-          ? html`<div
-              class="launcher__window-wrapper"
-              style=${styleMap(overrideStyleWindows)}
-            >
-              <email-us-window
-                id="email-us-window"
-                chatId="${this.chatId}"
-                .leadSources="${this.leadSources}"
-                currentLeadSource="${this.currentLeadSource}"
-                orgSlug="${this.orgSlug}"
-                buildingSlug="${this.buildingSlug}"
-                featureFlagShowDropdown="${this.featureFlagShowDropdown}"
-                ${ref(this.emailUsWindowRef)}
-                .buildingId=${this.buildingId}
-                .buildingName=${this.buildingName}
-                .leadSourceClient=${this.leadSourceClient}
-                .orgLegalName=${this.orgLegalName}
-              >
-              </email-us-window>
-            </div>`
-          : ""}
-        ${this.isSSTWindowOpen
-          ? html`<div
-              class="launcher__window-wrapper"
-              style=${styleMap(overrideStyleWindows)}
-            >
-              <tour-scheduler
-                id="tour-scheduler-window"
-                chatId="${this.chatId}"
-                orgSlug="${this.orgSlug}"
-                buildingSlug="${this.buildingSlug}"
-                sgtUrl="${this.sgtUrl}"
-                selfGuidedTourEnabled="${this.selfGuidedTourEnabled}"
-                selfGuidedToursTypeOffered="${this.selfGuidedToursTypeOffered}"
-                escortedToursLink="${this.escortedToursLink}"
-                virtualToursLink="${this.virtualToursLink}"
-                currentLeadSource="${this.currentLeadSource}"
-                .hasDynamicSchedulingEnabled=${this.hasDynamicSchedulingEnabled}
-                .leadSources="${this.leadSources}"
-                .tourTypeOptions=${this.tourTypeOptions}
-                .orgLegalName=${this.orgLegalName}
-                buildingId=${this.buildingId}
-                featureFlagShowDropdown="${this.featureFlagShowDropdown}"
-                .buildingName=${this.buildingName}
-                .primaryColor=${this.primaryColor}
-                .foregroundColorOnPrimaryBackgroundColor=${this
-                  .foregroundColorOnPrimaryBackgroundColor}
-                .foregroundColorOnSecondaryBackgroundColor=${this
-                  .foregroundColorOnSecondaryBackgroundColor}
-                .compactDesign=${this.showTourNextToChat
-                  ? this.showTourNextToChat
-                  : ""}
-                .leadSourceClient=${this.leadSourceClient}
-                ${ref(this.tourSchedulerRef)}
-              ></tour-scheduler>
-            </div>`
-          : ""}
-        ${this.isCallUsWindowOpen
-          ? html`
-              <div
-                class="launcher__window-wrapper"
-                style=${styleMap(overrideStyleWindows)}
-              >
-                <call-us-window
-                  id="call-us-window"
-                  .onCloseClicked=${this.onClosePhoneWindow}
-                  phoneNumberToCall="${this.phoneNumber}"
-                  .buildingId=${this.buildingId}
-                  chatCallUsHeader="${this.chatCallUsHeader}"
-                  hasTextUsEnabled=${this.hasTextUsEnabledDesktop ||
-                  this.hasTextUsEnabledMobile
-                    ? true
-                    : ""}
-                  hasCallUsEnabled=${this.hasCallUsEnabledDesktop ||
-                  this.hasCallUsEnabledMobile
-                    ? true
-                    : ""}
-                  currentLeadSource="${this.currentLeadSource}"
-                  buildingSlug="${this.buildingSlug}"
-                  buildingName="${this.buildingName}"
-                  orgSlug="${this.orgSlug}"
-                  .leadSourceClient=${this.leadSourceClient}
-                  .orgLegalName=${this.orgLegalName}
-                ></call-us-window>
-              </div>
-            `
-          : ""}
-        ${this.isCalculatorWindowOpen
-          ? html`
-              <div
-                class="launcher__window-wrapper"
-                style=${styleMap(overrideStyleWindows)}
-              >
-                <fee-calculator
-                  id="fee-calculator-window"
-                  ${ref(this.calculatorWindowRef)}
-                  buildingSlug=${this.buildingSlug}
-                  orgSlug="${this.orgSlug}"
-                  primaryColor="${this.primaryColor}"
-                  backgroundColor="${this.backgroundColor}"
-                  .compactDesign=${this.showTourNextToChat}
-                ></fee-calculator>
-              </div>
-            `
-          : ""}
-        ${!this.isCallToActionWindowOpen() && !this.showTourNextToChat
-          ? this.renderActionPills()
-          : ""}
-      </div>
-    `;
-  }
-}
-
-export const installLauncher = (): void => {
-  if (!window.customElements.get("meetelise-launcher")) {
-    window.customElements.define("meetelise-launcher", Launcher);
-  }
-};