@meetelise/chat 1.30.0 → 1.30.2

package/src/WebComponent/launcher/Launcher.ts

@@ -0,0 +1,1282 @@
+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;
+    calculatorWindowRef.onClickEmailOption = this.onClickEmailOption;
+    calculatorWindowRef.onClickPhoneOption = this.onClickPhoneOption;
+    calculatorWindowRef.onClickSSTOption = this.onClickSSTOption;
+    calculatorWindowRef.onClickTextUsOption = this.onClickTextUsOption;
+  };
+
+  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}
+          .foregroundColorOnSecondaryBackgroundColor=${this
+            .foregroundColorOnSecondaryBackgroundColor}
+        ></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,
+      },
+      {
+        pillKey: "Apply",
+        pill:
+          this.applicationLink && this.hasApplyNowEnabledDesktop
+            ? html`
+                <div
+                  @click=${this.onClickApplyNowOption}
+                  class="type-hey__pill"
+                  style=${styleMap({
+                    background: this.backgroundColor,
+                  })}
+                >
+                  <div class="type-hey__pill-left">
+                    <div class="type-hey__icon">
+                      ${ApplyOutlineIcon(
+                        this.foregroundColorOnSecondaryBackgroundColor
+                      )}
+                    </div>
+                    <div
+                      class="vertical-pill-title"
+                      style=${styleMap({
+                        color: this.foregroundColorOnSecondaryBackgroundColor,
+                      })}
+                    >
+                      <span class="title-bold">Apply</span>
+                      now
+                    </div>
+                  </div>
+                  <div class="type-gradient__icon">
+                    ${ChevronRightIcon(
+                      this.foregroundColorOnSecondaryBackgroundColor
+                    )}
+                  </div>
+                </div>
+              `
+            : null,
+      },
+      {
+        pillKey: "Price Calculator",
+        pill: this.hasPricingCalculatorEnabledDesktop
+          ? html`
+              <div
+                class="type-hey__pill"
+                @click=${this.onClickPriceCalculatorOption}
+                style=${styleMap({
+                  background: this.backgroundColor,
+                })}
+              >
+                <div class="type-hey__pill-left">
+                  <div class="type-hey__icon">
+                    ${CalculatorOutlineIcon(
+                      this.foregroundColorOnSecondaryBackgroundColor
+                    )}
+                  </div>
+                  <div
+                    style=${styleMap({
+                      color: this.foregroundColorOnSecondaryBackgroundColor,
+                    })}
+                  >
+                    <span class="title-bold">Calculate</span> cost
+                  </div>
+                </div>
+                <div class="type-gradient__icon">
+                  ${ChevronRightIcon(
+                    this.foregroundColorOnSecondaryBackgroundColor
+                  )}
+                </div>
+              </div>
+            `
+          : null,
+      },
+    ];
+    const pills = emojiPillListItems.filter((v) => !!v.pill);
+
+    return html`
+      <div
+        class="type-hey__list"
+        style=${styleMap({
+          background: this.primaryColor,
+          height: 300 + Math.max(36 * pills.length - 108, 0) + "px", // 36 for the pill + gap, 108 for the "expected" height of the pills section, after which point it needs to grow
+        })}
+      >
+        <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"
+          style=${styleMap({
+            height: 120 + Math.max(0, 36 * pills.length - 108) + "px", // 36 for the pill + gap, 108 for the "expected" height of the pills section, after which point it needs to grow
+          })}
+        >
+          <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}
+                  .onCloseClicked=${this.onCloseCalculatorWindow}
+                  .onClickEmailOption=${this.onClickEmailOption}
+                  .onClickPhoneOption=${this.onClickPhoneOption}
+                  .onClickSSTOption=${this.onClickSSTOption}
+                  .onClickTextUsOption=${this.onClickTextUsOption}
+                ></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);
+  }
+};