@meetelise/chat 1.21.0 → 1.21.2

package/src/WebComponent/Launcher.ts

@@ -1,559 +0,0 @@
-import classnames from "classnames";
-import { html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { createRef, ref, Ref } from "lit/directives/ref.js";
-import { glowBarMp4, glowBarWebm } 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 {
-  FilledChatIcon,
-  FilledEmailIcon,
-  FilledPhoneIcon,
-  FilledTourIcon,
-  OutlinedChatIcon,
-  OutlinedEmailIcon,
-  OutlinedPhoneIcon,
-  OutlinedTourIcon,
-} from "../svgIcons";
-
-@customElement("meetelise-launcher")
-export class Launcher extends LitElement {
-  static styles = launcherStyles;
-
-  @property({ type: Boolean })
-  isMobile = 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: 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: 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;
-  };
-
-  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.buildingABTestType === "close") {
-      return html` <div class="vertical-pill-list">
-        ${this.hasEmailEnabled && !this.isCallToActionWindowOpen()
-          ? 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.isCallToActionWindowOpen()
-          ? 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.isCallToActionWindowOpen()
-          ? 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.isCallToActionWindowOpen()
-          ? 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>`;
-    }
-    return html`
-      ${this.hasChatEnabled && !this.isCallToActionWindowOpen()
-        ? this.renderMiniOption(OutlinedChatIcon, this.onChatTapped)
-        : ""}
-      ${this.hasEmailEnabled && !this.isCallToActionWindowOpen()
-        ? this.renderMiniOption(
-            OutlinedEmailIcon,
-            this.onClickEmailOption,
-            true
-          )
-        : ""}
-      ${this.hasSSTEnabled && !this.isCallToActionWindowOpen()
-        ? this.renderMiniOption(OutlinedTourIcon, this.onClickSSTOption, true)
-        : ""}
-      ${this.phoneNumber &&
-      this.hasCallUsEnabled &&
-      !this.isCallToActionWindowOpen()
-        ? this.renderMiniOption(
-            OutlinedPhoneIcon,
-            this.onClickPhoneOption,
-            true
-          )
-        : ""}
-    `;
-  };
-
-  renderMiniLauncher = (): TemplateResult => {
-    return html`
-      <div
-        class="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}"
-                ${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}
-              ></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}
-                ${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 : ""}
-                ></call-us-window>
-              </div>
-            `
-          : ""}
-        ${this.renderActionPills()}
-      </div>
-    `;
-  };
-
-  render(): TemplateResult {
-    installEmailUsWindow();
-    installTextUsWindow();
-    installCallUsWindow();
-    if (this.isMini || this.buildingABTestType === "close") {
-      return this.renderMiniLauncher();
-    }
-
-    return html`
-      <div>
-        ${this.isEmailWindowOpen
-          ? html`<div class="launcher__window-wrapper">
-              <email-us-window
-                ${ref(this.emailUsWindowRef)}
-                .buildingId=${this.buildingId}
-              >
-              </email-us-window>
-            </div>`
-          : ""}
-        ${this.isTextUsWindowOpen
-          ? html`<div class="launcher__window-wrapper">
-              <text-us-window
-                ${ref(this.textUsWindowRef)}
-                .buildingId=${this.buildingId}
-              ></text-us-window>
-            </div>`
-          : ""}
-        ${this.isSSTWindowOpen
-          ? html`<div class="launcher__window-wrapper">
-              <tour-scheduler
-                .layoutOptions=${this.layoutOptions}
-                .tourTypeOptions=${this.tourTypeOptions}
-                buildingId=${this.buildingId}
-                ${ref(this.tourSchedulerRef)}
-              ></tour-scheduler>
-            </div>`
-          : ""}
-        ${this.isCallUsWindowOpen && this.phoneNumber
-          ? html`
-              <div class="launcher__window-wrapper">
-                <call-us-window
-                  .onCloseClicked=${this.onClosePhoneWindow}
-                  phoneNumber="${this.phoneNumber}"
-                  .buildingId=${this.buildingId}
-                  hasTextUsEnabled=${this.hasTextUsEnabled ? true : ""}
-                ></call-us-window>
-              </div>
-            `
-          : ""}
-        ${!this.isCallToActionWindowOpen()
-          ? html`
-              <div
-                @click=${this.onChatTapped}
-                class="${classnames(
-                  "launcher",
-                  this.isMobile ? "launcher__mobile" : "launcher__desktop",
-                  {
-                    firstMount: this.isFirstMount,
-                  }
-                )}"
-                style="background-color: ${this.backgroundColor}; color: ${this
-                  .textColor};"
-              >
-                <div
-                  style=${styleMap({
-                    position: "absolute",
-                  })}
-                ></div>
-                <video class="glowBar" autoplay loop muted playsinline>
-                  <source src="${glowBarWebm}" type="video/webm" />
-                  <source src="${glowBarMp4}" type="video/mp4" />
-                </video>
-                <div class="content">
-                  <div class="launcher__primary-action">
-                    <div class="launcher__primary-action-text">
-                      Ask a question
-                      <svg
-                        width="21"
-                        height="20"
-                        viewBox="0 0 21 20"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M15.0282 7H5.02819C4.76297 7 4.50862 7.10536 4.32108 7.29289C4.13354 7.48043 4.02819 7.73478 4.02819 8C4.02819 8.26522 4.13354 8.51957 4.32108 8.70711C4.50862 8.89464 4.76297 9 5.02819 9H15.0282C15.2934 9 15.5478 8.89464 15.7353 8.70711C15.9228 8.51957 16.0282 8.26522 16.0282 8C16.0282 7.73478 15.9228 7.48043 15.7353 7.29289C15.5478 7.10536 15.2934 7 15.0282 7ZM11.0282 11H5.02819C4.76297 11 4.50862 11.1054 4.32108 11.2929C4.13354 11.4804 4.02819 11.7348 4.02819 12C4.02819 12.2652 4.13354 12.5196 4.32108 12.7071C4.50862 12.8946 4.76297 13 5.02819 13H11.0282C11.2934 13 11.5478 12.8946 11.7353 12.7071C11.9228 12.5196 12.0282 12.2652 12.0282 12C12.0282 11.7348 11.9228 11.4804 11.7353 11.2929C11.5478 11.1054 11.2934 11 11.0282 11ZM10.0282 0C8.71497 0 7.41461 0.258658 6.20135 0.761205C4.9881 1.26375 3.8857 2.00035 2.95712 2.92893C1.08175 4.8043 0.0281864 7.34784 0.0281864 10C0.0194442 12.3091 0.818979 14.5485 2.28819 16.33L0.288186 18.33C0.149429 18.4706 0.0554325 18.6492 0.0180584 18.8432C-0.0193158 19.0372 0.0016069 19.2379 0.0781863 19.42C0.161244 19.5999 0.29589 19.7511 0.465033 19.8544C0.634176 19.9577 0.830187 20.0083 1.02819 20H10.0282C12.6804 20 15.2239 18.9464 17.0993 17.0711C18.9746 15.1957 20.0282 12.6522 20.0282 10C20.0282 7.34784 18.9746 4.8043 17.0993 2.92893C15.2239 1.05357 12.6804 0 10.0282 0ZM10.0282 18H3.43819L4.36819 17.07C4.55444 16.8826 4.65898 16.6292 4.65898 16.365C4.65898 16.1008 4.55444 15.8474 4.36819 15.66C3.05877 14.352 2.24336 12.6305 2.06088 10.7888C1.87839 8.94705 2.34013 7.09901 3.36741 5.55952C4.3947 4.02004 5.92398 2.88436 7.6947 2.34597C9.46543 1.80759 11.368 1.8998 13.0784 2.60691C14.7888 3.31402 16.201 4.59227 17.0746 6.22389C17.9482 7.85551 18.2291 9.73954 17.8693 11.555C17.5096 13.3705 16.5315 15.005 15.1017 16.1802C13.672 17.3554 11.8789 17.9985 10.0282 18Z"
-                          fill="#1E1E1E"
-                        />
-                      </svg>
-                    </div>
-                    <div class="launcher__ask-underline"></div>
-                  </div>
-                  ${this.getNumCallToActions() === 0
-                    ? html`
-                        <div class="launcher__filler-text">
-                          I can also help you schedule a tour
-                        </div>
-                      `
-                    : this.renderCallToActions()}
-                </div>
-              </div>
-            `
-          : ""}
-      </div>
-    `;
-  }
-}
-
-export const installLauncher = (): void => {
-  if (!window.customElements.get("meetelise-launcher")) {
-    window.customElements.define("meetelise-launcher", Launcher);
-  }
-};