@meetelise/chat 1.20.63 → 1.20.65

package/src/WebComponent/launcher/Launcher.ts

@@ -0,0 +1,586 @@
+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 { installTextUsWindow, TextUsWindow } from "../actions/text-us-window";
+import { StyleInfo, styleMap } from "lit/directives/style-map.js";
+import { classMap } from "lit/directives/class-map.js";
+import { installCallUsWindow } from "../actions/call-us-window";
+import { getRegisteredPhoneNumbers } from "../../getRegisteredPhoneNumbers";
+import { TourScheduler } from "../Scheduler/tour-scheduler";
+import { LabeledOption, UnitV2 } from "../../fetchBuildingInfo";
+import { abTestTypes } from "../../fetchBuildingABTestType";
+import {
+  EmailBlackOutlineIcon,
+  ChatWhiteOutlineIcon,
+  BookTourBlackOutlineIcon,
+  PhoneBlackOutlineIcon,
+  HeyThereEmoji,
+  ChevronIconBlack,
+  ChevronIconWhite,
+} from "../../svgIcons";
+import { defaultBrandColor } from "../../themes";
+import { hexToAlmostWhite } from "../../utils";
+import "./mobile-launcher";
+
+@customElement("meetelise-launcher")
+export class Launcher extends LitElement {
+  static styles = css`
+    ${launcherStyles}
+    ${typeEmojiStyles}
+    ${typeMiniStyles}
+  `;
+
+  @property({ type: Boolean })
+  isMobile = false;
+
+  @property({ attribute: true })
+  isMinimized = false;
+
+  @property({ type: Boolean })
+  isFirstMount = false;
+
+  @property()
+  backgroundColor = "rgba(255, 255, 255, 0.75)";
+
+  @property()
+  textColor = "#202020";
+
+  @property({ type: Boolean })
+  isMini = true;
+  @property({ attribute: false })
+  autoOpenChatWidget = false;
+
+  @property()
+  phoneNumber = "";
+  @property({ attribute: true })
+  chatId = "";
+  @property({ attribute: true })
+  chatCallUsHeader = "";
+  @property({ attribute: false })
+  buildingId = 0;
+  @property({ attribute: true })
+  buildingSlug = "";
+  @property({ attribute: true })
+  orgSlug = "";
+  @property({ attribute: true })
+  sgtUrl = "";
+  @property({ attribute: true })
+  buildingABTestType = "";
+  @property({ attribute: true })
+  featureFlagShowDropdown = "";
+  @property({ attribute: false })
+  leadSources: string[] = [];
+  @property({ attribute: true })
+  currentLeadSource = "";
+  @property({ attribute: true })
+  escortedToursLink = "";
+  @property({ attribute: true })
+  virtualToursLink = "";
+  @property({ type: Boolean })
+  hasCallUsEnabled = false;
+  @property({ type: Boolean })
+  hasChatEnabled = false;
+  @property({ type: Boolean })
+  hasEmailEnabled = false;
+  @property({ type: Boolean })
+  hasSSTEnabled = false;
+  @property({ type: Boolean })
+  hasTextUsEnabled = false;
+  @property({ attribute: false })
+  layoutOptions: string[] = [];
+  @property({ attribute: false })
+  unitOptions: UnitV2[] = [];
+  @property({ attribute: false })
+  tourTypeOptions: LabeledOption[] = [];
+  @property({ attribute: false })
+  onChatTapped: () => void = () => {
+    return;
+  };
+
+  @property({ attribute: true })
+  onClickMinimize: (e: MouseEvent) => void = () => {
+    return;
+  };
+
+  @property({ attribute: false })
+  launcherStyles: StyleInfo = {};
+
+  @property({ attribute: true })
+  brandColor: string = defaultBrandColor;
+
+  @state()
+  isEmailWindowOpen = false;
+  @state()
+  isCallUsWindowOpen = false;
+  @state()
+  isSSTWindowOpen = false;
+  @state()
+  isTextUsWindowOpen = false;
+
+  getNumCallToActions = (): number => {
+    return [
+      this.hasEmailEnabled,
+      !!this.phoneNumber && this.hasCallUsEnabled,
+      this.hasSSTEnabled,
+      this.hasTextUsEnabled,
+    ].filter((v) => v).length;
+  };
+
+  emailUsWindowRef: Ref<EmailUsWindow> = createRef();
+  textUsWindowRef: Ref<TextUsWindow> = createRef();
+  tourSchedulerRef: Ref<TourScheduler> = createRef();
+
+  updated = async (): Promise<void> => {
+    this.attachOnClickToEmailUsWindow();
+    this.attachOnClickToTextUsWindow();
+    this.attachOnClickToSSTWindow();
+    if (this.buildingId) {
+      const registeredPhoneNumbers = await getRegisteredPhoneNumbers(
+        this.buildingId
+      );
+      this.hasTextUsEnabled =
+        registeredPhoneNumbers.length > 0 &&
+        this.hasTextUsEnabled &&
+        this.buildingId !== 4895;
+      // TODO: replace this with the real API call once the endpoint exists
+      const schedulingIsEnabled = await (async function putApiCallHere(
+        buildingId: number
+      ) {
+        return !!buildingId;
+      })(this.buildingId);
+      if (schedulingIsEnabled && this.hasSSTEnabled) {
+        this.hasSSTEnabled = true;
+      }
+    }
+  };
+
+  attachOnClickToEmailUsWindow = (): void => {
+    const emailUsWindowRef = this.emailUsWindowRef.value;
+    if (!emailUsWindowRef) {
+      return;
+    }
+    emailUsWindowRef.onCloseClicked = this.onCloseEmailWindow;
+  };
+
+  attachOnClickToTextUsWindow = (): void => {
+    const textUsWindowRef = this.textUsWindowRef.value;
+    if (!textUsWindowRef) {
+      return;
+    }
+    textUsWindowRef.onCloseClicked = this.onCloseTextUsWindow;
+  };
+
+  attachOnClickToSSTWindow = (): void => {
+    const sstWindowRef = this.tourSchedulerRef.value;
+    if (!sstWindowRef) {
+      return;
+    }
+    sstWindowRef.onCloseClicked = this.onCloseSSTWindow;
+  };
+
+  onClickEmailOption = (e: MouseEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.isEmailWindowOpen = true;
+  };
+
+  onCloseEmailWindow = (): void => {
+    this.isEmailWindowOpen = false;
+  };
+
+  renderEmailOption = (): TemplateResult => {
+    const text = this.getNumCallToActions() > 2 ? "Email" : "Email us";
+    return html`
+      <div
+        @click=${this.onClickEmailOption}
+        class="launcher__call-to-action-option"
+      >
+        ${text}
+      </div>
+    `;
+  };
+
+  onClickPhoneOption = (e: MouseEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.isCallUsWindowOpen = true;
+  };
+
+  onClosePhoneWindow = (): void => {
+    this.isCallUsWindowOpen = false;
+  };
+
+  renderCallUsOption = (): TemplateResult => {
+    const text = this.getNumCallToActions() > 2 ? "Phone" : "Hours/Phone";
+    return html` <div class="launcher__call-to-action-option">${text}</div> `;
+  };
+
+  onClickSSTOption = (e: MouseEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.isSSTWindowOpen = true;
+  };
+
+  onCloseSSTWindow = (): void => {
+    this.isSSTWindowOpen = false;
+  };
+
+  renderSSTOption = (): TemplateResult => {
+    const text = this.getNumCallToActions() > 2 ? "Book" : "Book a tour";
+    return html`
+      <div
+        class="launcher__call-to-action-option"
+        @click=${this.onClickSSTOption}
+      >
+        ${text}
+      </div>
+    `;
+  };
+
+  onClickTextUsOption = (e: MouseEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.isTextUsWindowOpen = true;
+  };
+
+  onCloseTextUsWindow = (): void => {
+    this.isTextUsWindowOpen = false;
+  };
+
+  renderTextUsOption = (): TemplateResult => {
+    return html`
+      <div
+        @click=${this.onClickTextUsOption}
+        class="launcher__call-to-action-option"
+      >
+        Text us
+      </div>
+    `;
+  };
+
+  renderCallToActions = (): TemplateResult => {
+    if (this.getNumCallToActions() === 0) {
+      return html``;
+    }
+
+    return html`
+      <div class="launcher__call-to-actions-wrapper">
+        ${this.hasEmailEnabled ? this.renderEmailOption() : ""}
+        ${this.phoneNumber && this.hasCallUsEnabled
+          ? this.renderCallUsOption()
+          : ""}
+        ${this.hasTextUsEnabled ? this.renderTextUsOption() : ""}
+        ${this.hasSSTEnabled ? this.renderSSTOption() : ""}
+      </div>
+    `;
+  };
+
+  isCallToActionWindowOpen = (): boolean => {
+    return (
+      [
+        this.isEmailWindowOpen,
+        this.isCallUsWindowOpen,
+        this.isSSTWindowOpen,
+        this.isTextUsWindowOpen,
+      ].filter((v) => v).length === 1
+    );
+  };
+
+  renderMiniOption = (
+    content: TemplateResult,
+    onClick?: (e: MouseEvent) => void,
+    isSecondaryAction?: boolean
+  ): TemplateResult => {
+    return html`
+      <div class="launcher__mini-option-wrapper">
+        <div
+          @click=${onClick}
+          class=${classMap({
+            ["launcher__mini-option"]: true,
+            ["launcher__secondary-option"]: !!isSecondaryAction,
+          })}
+        >
+          ${content}
+        </div>
+      </div>
+    `;
+  };
+
+  renderActionPills = (): TemplateResult => {
+    if (this.isMobile || this.isMinimized) {
+      return html` <mobile-launcher
+        .onClickMinimize=${this.onClickMinimize}
+        .onClickEmailOption=${this.onClickEmailOption}
+        .onClickPhoneOption=${this.onClickPhoneOption}
+        .onClickSSTOption=${this.onClickSSTOption}
+        .onChatTapped=${this.onChatTapped}
+        .isMobile=${this.isMobile}
+        .brandColor=${this.brandColor}
+      ></mobile-launcher>`;
+    }
+
+    if (this.buildingABTestType === abTestTypes.ConceptEmoji) {
+      return html`
+        <div
+          class="type-hey__list"
+          style=${styleMap({
+            background: this.brandColor,
+          })}
+        >
+          <div class="type-hey__chat-container">
+            <minimize-expand-button
+              .brandColor=${this.brandColor}
+              .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.hasChatEnabled
+              ? html`
+                  <div
+                    id="type-hey__ask-prompt"
+                    class="type-hey__pill"
+                    @click=${this.onChatTapped}
+                    style=${styleMap({
+                      background: hexToAlmostWhite(this.brandColor, 0.2),
+                    })}
+                  >
+                    <div class="type-hey__pill-left">
+                      <div class="type-hey__icon">${ChatWhiteOutlineIcon}</div>
+                      <div><span class="title-bold">Chat</span> with us</div>
+                    </div>
+                    <div class="type-gradient__icon">${ChevronIconWhite}</div>
+                  </div>
+                `
+              : ""}
+          </div>
+
+          <div class="type-hey__bottom-section">
+            <div class="type-hey__botton-section-pills">
+              ${this.hasEmailEnabled
+                ? html` <div
+                    class="type-hey__pill"
+                    @click=${this.onClickEmailOption}
+                  >
+                    <div class="type-hey__pill-left">
+                      <div class="type-hey__icon">${EmailBlackOutlineIcon}</div>
+                      <div><span class="title-bold">Email</span> an agent</div>
+                    </div>
+                    <div class="type-gradient__icon">${ChevronIconBlack}</div>
+                    </div>
+                  </div>`
+                : ""}
+              ${this.phoneNumber && this.hasCallUsEnabled
+                ? html`
+                    <div class="type-hey__pill" @click=${
+                      this.onClickPhoneOption
+                    }>
+                    <div class="type-hey__pill-left">
+                      <div class="type-hey__icon">${PhoneBlackOutlineIcon}</div>
+                        <div>
+                          <span class="title-bold">Call</span>
+                            ${
+                              this.hasTextUsEnabled
+                                ? html`or
+                                    <span class="title-bold">text</span> us`
+                                : "us"
+                            }
+                        </div>
+                      </div>
+                      <div class="type-gradient__icon">${ChevronIconBlack}</div>
+                    </div>
+                  </div>`
+                : ""}
+              ${this.hasSSTEnabled
+                ? html` 
+                    <div class="type-hey__pill" @click=${this.onClickSSTOption}>
+                      <div class="type-hey__pill-left">
+                        <div class="type-hey__icon">${BookTourBlackOutlineIcon}</div>
+                          <div>
+                            <span class="title-bold">Book</span> a tour
+                          </div>
+                      </div>
+                      <div class="type-gradient__icon">${ChevronIconBlack}</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>
+      `;
+    }
+
+    return html` <div class="vertical-pill-list">
+      <button @click=${this.onClickMinimize} class="minimize-bttn">
+        <div class="chevron-down">${ChevronIconBlack}</div>
+      </button>
+      ${this.hasChatEnabled
+        ? html`
+              <div id="overlay-inner-pill" class="inner-pill-wrapper" 
+              style=${styleMap({
+                background: this.brandColor,
+              })} @click=${this.onChatTapped}>
+                <div class="vertical-pill-left">
+                  <div class="vertical-pill-icon">${ChatWhiteOutlineIcon}</div>
+                  <div class="vertical-pill-title">
+                    <span class="vertical-pill-bold">Chat</span> with us
+                  </div>
+                </div>
+                <div class="chevron-right">${ChevronIconWhite}</div>
+              </div>
+            </div>
+          `
+        : ""}
+      ${this.hasEmailEnabled
+        ? html`
+            <div @click=${this.onClickEmailOption} class="inner-pill-wrapper">
+              <div class="vertical-pill-left">
+                <div class="vertical-pill-icon">${EmailBlackOutlineIcon}</div>
+                <div class="vertical-pill-title">
+                  <span class="vertical-pill-bold">Email</span> an agent
+                </div>
+              </div>
+              <div class="chevron-right">${ChevronIconBlack}</div>
+            </div>
+          `
+        : ""}
+      ${this.phoneNumber && this.hasCallUsEnabled
+        ? html`
+            <div @click=${this.onClickPhoneOption} class="inner-pill-wrapper">
+              <div class="vertical-pill-left">
+                <div class="vertical-pill-icon">${PhoneBlackOutlineIcon}</div>
+                <div class="vertical-pill-title">
+                  <span class="vertical-pill-bold">Call</span>
+                  ${this.hasTextUsEnabled
+                    ? html`or <span class="vertical-pill-bold">text</span> us`
+                    : "us"}
+                </div>
+              </div>
+              <div class="chevron-right">${ChevronIconBlack}</div>
+            </div>
+          `
+        : ""}
+      ${this.hasSSTEnabled
+        ? html`
+            <div @click=${this.onClickSSTOption} class="inner-pill-wrapper">
+              <div class="vertical-pill-left">
+                <div class="vertical-pill-icon">
+                  ${BookTourBlackOutlineIcon}
+                </div>
+                <div class="vertical-pill-title">
+                  <span class="vertical-pill-bold">Book</span> a tour
+                </div>
+              </div>
+              <div class="chevron-right">${ChevronIconBlack}</div>
+            </div>
+          `
+        : ""}
+    </div>`;
+  };
+
+  render(): TemplateResult {
+    installEmailUsWindow();
+    installTextUsWindow();
+    installCallUsWindow();
+
+    return html`
+      <div
+        class=${this.isMobile || this.isMinimized
+          ? "launcher__mobile-launcher-wrapper"
+          : "launcher__mini-launcher-wrapper"}
+        style=${styleMap(this.launcherStyles)}
+      >
+        ${this.isEmailWindowOpen
+          ? html`<div class="launcher__window-wrapper">
+              <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}
+              >
+              </email-us-window>
+            </div>`
+          : ""}
+        ${this.isTextUsWindowOpen
+          ? html`<div class="launcher__window-wrapper">
+              <text-us-window
+                orgSlug="${this.orgSlug}"
+                buildingSlug="${this.buildingSlug}"
+                ${ref(this.textUsWindowRef)}
+                .buildingId=${this.buildingId}
+                currentLeadSource="${this.currentLeadSource}"
+              ></text-us-window>
+            </div>`
+          : ""}
+        ${this.isSSTWindowOpen
+          ? html`<div class="launcher__window-wrapper">
+              <tour-scheduler
+                chatId="${this.chatId}"
+                orgSlug="${this.orgSlug}"
+                buildingSlug="${this.buildingSlug}"
+                sgtUrl="${this.sgtUrl}"
+                escortedToursLink="${this.escortedToursLink}"
+                virtualToursLink="${this.virtualToursLink}"
+                currentLeadSource="${this.currentLeadSource}"
+                .leadSources="${this.leadSources}"
+                .layoutOptions=${this.layoutOptions}
+                .unitOptions=${this.unitOptions}
+                .tourTypeOptions=${this.tourTypeOptions}
+                buildingId=${this.buildingId}
+                featureFlagShowDropdown="${this.featureFlagShowDropdown}"
+                ${ref(this.tourSchedulerRef)}
+              ></tour-scheduler>
+            </div>`
+          : ""}
+        ${this.isCallUsWindowOpen
+          ? html`
+              <div class="launcher__window-wrapper">
+                <call-us-window
+                  .onCloseClicked=${this.onClosePhoneWindow}
+                  phoneNumber="${this.phoneNumber}"
+                  .buildingId=${this.buildingId}
+                  chatCallUsHeader="${this.chatCallUsHeader}"
+                  hasTextUsEnabled=${this.hasTextUsEnabled ? true : ""}
+                  currentLeadSource="${this.currentLeadSource}"
+                ></call-us-window>
+              </div>
+            `
+          : ""}
+        ${!this.isCallToActionWindowOpen() ? this.renderActionPills() : ""}
+      </div>
+    `;
+  }
+}
+
+export const installLauncher = (): void => {
+  if (!window.customElements.get("meetelise-launcher")) {
+    window.customElements.define("meetelise-launcher", Launcher);
+  }
+};