@meetelise/chat 1.20.63 → 1.20.65

package/src/WebComponent/Launcher.ts

@@ -1,641 +0,0 @@
-import { html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { createRef, ref, Ref } from "lit/directives/ref.js";
-import { glowBackgroundMp4 } from "../assetUrls";
-import { launcherStyles } from "./launcherStyles";
-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 {
-  FilledChatIcon,
-  FilledEmailIcon,
-  FilledPhoneIcon,
-  FilledTourIcon,
-  ChevronIconWhite,
-  HeyThereEmoji,
-  EmailBlackStrokeIcon,
-  PhoneBlackStrokeIcon,
-  ChatWhiteStrokeIcon,
-  EmailWhiteStrokeIcon,
-  TabletWhiteStrokeIcon,
-  ChatBlueBttnIcon,
-  PhoneWhiteStrokeIcon,
-  ChevronIconBlack,
-} from "../svgIcons";
-
-@customElement("meetelise-launcher")
-export class Launcher extends LitElement {
-  static styles = launcherStyles;
-
-  @property({ type: Boolean })
-  isMobile = false;
-
-  @property({ type: Boolean })
-  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 = true;
-  @property({ attribute: false })
-  layoutOptions: string[] = [];
-  @property({ attribute: false })
-  unitOptions: UnitV2[] = [];
-  @property({ attribute: false })
-  tourTypeOptions: LabeledOption[] = [];
-  @property({ attribute: false })
-  onChatTapped: () => void = () => {
-    return;
-  };
-  @property({ attribute: false })
-  launcherStyles: StyleInfo = {};
-
-  @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;
-  };
-
-  onClickMinimize = (e: MouseEvent): void => {
-    e.preventDefault();
-    e.stopPropagation();
-    this.isMinimized = !this.isMinimized;
-  };
-
-  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>
-    `;
-  };
-  renderPillVertical = (
-    content: TemplateResult,
-    onClick: (e: MouseEvent) => void
-  ): TemplateResult => {
-    return html`
-      <div @click=${onClick} class="inner-pill-wrapper">${content}</div>
-    `;
-  };
-
-  renderActionPills = (): TemplateResult => {
-    if (this.isMobile || this.isMinimized) {
-      return html`<div class="typeMobile-list">
-        ${this.isMobile
-          ? ""
-          : html` <button @click=${this.onClickMinimize} class="minimize-bttn">
-              <div class="chevron-up">${ChevronIconBlack}</div>
-            </button>`}
-        <ul>
-          <li @click=${this.onChatTapped} class="typeMobile-bttn">
-            <div class="typeMobile-inner">
-              <div class="typeMobile-icon">${ChatWhiteStrokeIcon}</div>
-            </div>
-          </li>
-          <li @click=${this.onClickEmailOption} class="typeMobile-bttn">
-            <div class="typeMobile-inner">
-              <div class="typeMobile-icon">${EmailWhiteStrokeIcon}</div>
-            </div>
-          </li>
-          <li @click=${this.onClickPhoneOption} class="typeMobile-bttn">
-            <div class="typeMobile-inner">
-              <div class="typeMobile-icon">${PhoneWhiteStrokeIcon}</div>
-            </div>
-          </li>
-        </ul>
-      </div>`;
-    }
-
-    if (this.buildingABTestType === abTestTypes.ConceptBlueBlack) {
-      return html` <div class="type-gradient__list">
-        <button @click=${this.onClickMinimize} class="minimize-bttn">
-          <div class="chevron-down">${ChevronIconBlack}</div>
-        </button>
-        ${this.hasChatEnabled
-          ? html`
-              <div
-                class="type-gradient__top-container"
-                @click=${this.onChatTapped}
-              >
-                <video class="glowBackground" autoplay loop muted playsinline>
-                  <source src="${glowBackgroundMp4}" type="video/mp4" />
-                </video>
-                <div class="type-gradient__scroll-info">
-                  ${ChatWhiteStrokeIcon}
-                  <div class="type-gradient__chat-container">
-                    <div class="type-gradient__chat-header">
-                      <span class="title-bold">Chat</span> with us
-                    </div>
-                    ${ChevronIconWhite}
-                  </div>
-                  <ul class="type-gradient__description">
-                    <li>our apartments</li>
-                    <li>unit availability</li>
-                    <li>tour bookings</li>
-                    <li>our amenities</li>
-                    <li>neighborhood</li>
-                  </ul>
-                </div>
-              </div>
-            `
-          : ""}
-        ${this.hasEmailEnabled
-          ? html` <div class="type-gradient__email type-gradient__bottom-tab" @click=${this.onClickEmailOption}>
-          <div class="type-gradient__icon">${EmailWhiteStrokeIcon}</div>
-          <div class="type-gradient__inner-txt">
-            <span class="title-bold">Email</span> an agent
-            </div>
-            <div class="type-gradient__icon">${ChevronIconWhite}</div>
-          </div>
-          </div>`
-          : ""}
-        ${this.phoneNumber && this.hasCallUsEnabled
-          ? html`
-              <div class="type-gradient__contact type-gradient__bottom-tab" @click=${
-                this.onClickPhoneOption
-              }> 
-              <div class="type-gradient__icon">${TabletWhiteStrokeIcon}</div>
-              <div class="type-gradient__inner-txt">
-                <span class="title-bold">Call</span>
-                ${
-                  this.hasTextUsEnabled
-                    ? html`or <span class="title-bold">text</span> us`
-                    : "us"
-                }
-                </div>
-              <div class="type-gradient__icon">${ChevronIconWhite}</div>
-              </div>
-              </div>
-              `
-          : ""}
-      </div>`;
-    }
-
-    if (this.buildingABTestType === abTestTypes.ConceptBlueWhite) {
-      return html`
-      
-      <div class="type-hey__list">
-      <button @click=${this.onClickMinimize} class="minimize-bttn">
-        <div class="chevron-down">${ChevronIconBlack}</div>
-      </button>
-        <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 class="type-hey__ask-prompt" @click=${this.onChatTapped}>
-                <div class="type-hey__ask-prompt-inner">
-                  <div class="type-hey__ask-start">
-                    <h2>Ask me about</h2>
-                    <div class="scroll-container">
-                        <ul>
-                          <li>booking a tour</li>
-                          <li>our pet policy</li>
-                          <li>our amenities</li>
-                          <li>our availability</li>
-                        </ul>
-                    </div>
-                  </div>
-                    <div>${ChevronIconWhite}</div>
-                  </div>
-                  </div>
-                </div>
-              `
-              : ""
-          }
-        </div>
-
-        <div class="type-hey__bottom-section">
-          ${
-            this.hasEmailEnabled
-              ? html` <div class="type-hey__email" @click=${this.onClickEmailOption}>
-          <div class="type-hey__icon">${EmailBlackStrokeIcon}</div>
-          <div>
-            <span class="title-bold">Email</span> an agent
-            </div>
-            <div class="type-gradient__icon">${ChevronIconWhite}</div>
-          </div>
-          </div>`
-              : ""
-          }
-          ${
-            this.phoneNumber && this.hasCallUsEnabled
-              ? html`
-              <div class="type-hey__contact" @click=${this.onClickPhoneOption}> 
-              <div class="type-hey__icon">${PhoneBlackStrokeIcon}</div>
-                <div>
-                <span class="title-bold">Call</span>
-                ${
-                  this.hasTextUsEnabled
-                    ? html`or <span class="title-bold">text</span> us`
-                    : "us"
-                }
-                </div>
-                <div class="type-gradient__icon">${ChevronIconWhite}</div>
-              </div>
-              </div>
-              `
-              : ""
-          }
-          <div class="type-hey__bottom-info">
-            Online <span class="heavy-blue">24 hours</span> a day, <span class="heavy-blue">7</span> days a week</div>
-          </div>
-        </div>
-        <div class="type-hey__chat-container" @click=${
-          this.onChatTapped
-        }>${ChatBlueBttnIcon}</div>
-      </div>
-      `;
-    }
-
-    return html` <div class="vertical-pill-list">
-      <button @click=${this.onClickMinimize} class="minimize-bttn">
-        <div class="chevron-down">${ChevronIconBlack}</div>
-      </button>
-      ${this.hasEmailEnabled
-        ? this.renderPillVertical(
-            html`
-              <div class="vertical-pill-icon">${FilledEmailIcon}</div>
-              <div class="vertical-pill-title">
-                <span class="vertical-pill-bold">Email</span> an agent
-              </div>
-            `,
-            this.onClickEmailOption
-          )
-        : ""}
-      ${this.hasChatEnabled
-        ? this.renderPillVertical(
-            html`
-              <div class="vertical-pill-icon">${FilledChatIcon}</div>
-              <div class="vertical-pill-title">
-                <span class="vertical-pill-bold">Chat</span> with us
-              </div>
-            `,
-            this.onChatTapped
-          )
-        : ""}
-      ${this.hasSSTEnabled
-        ? this.renderPillVertical(
-            html`
-              <div class="vertical-pill-icon">${FilledTourIcon}</div>
-              <div class="vertical-pill-title">
-                <span class="vertical-pill-bold">Book</span> a tour
-              </div>
-            `,
-            this.onClickSSTOption
-          )
-        : ""}
-      ${this.phoneNumber && this.hasCallUsEnabled
-        ? this.renderPillVertical(
-            html`
-              <div class="vertical-pill-icon">${FilledPhoneIcon}</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>
-            `,
-            this.onClickPhoneOption
-          )
-        : ""}
-    </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);
-  }
-};