@meetelise/chat 1.11.0 → 1.12.0

package/src/WebComponent/MEChat.ts

@@ -0,0 +1,282 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { createRef, ref, Ref } from "lit/directives/ref.js";
+import Talk from "talkjs";
+import { InHouseLauncher } from ".";
+import "./Scheduler/tour-scheduler";
+import Analytics from "../analytics";
+import { getChatID } from "../chatID";
+import createConversation from "../createConversation";
+import fetchBuildingInfo, { Building } from "../fetchBuildingInfo";
+import { getTheme, Theme, ThemeIdString } from "../themes";
+import { isMobile } from "../utils";
+import { installInHouseLauncher } from "./InHouseLauncher";
+
+import "./MEChat.css";
+
+export interface Options {
+  building: string;
+  organization: string;
+  themeId?: ThemeIdString;
+  avatarSrc?: string;
+  mini?: boolean;
+}
+
+@customElement("me-chat")
+export class MEChat extends LitElement {
+  static styles = css`
+    #__talkjs_launcher:not(.shouldBeVisible) {
+      display: none;
+    }
+
+    .inHouseLauncherContainer.in-house-launcher__mobile {
+      width: 100%;
+      height: 100px;
+    }
+  `;
+  static session: Promise<Talk.Session> = Talk.ready.then(() => {
+    const me = new Talk.User({
+      id: "anonymous",
+      name: "Me",
+      email: null,
+      role: "Default",
+    });
+    return new Talk.Session({
+      appId: "ogKIvCor",
+      me,
+    });
+  });
+  @property({ type: String })
+  private buildingSlug = "";
+  @property({ type: String })
+  private orgSlug = "";
+  @property({ type: String })
+  private themeId: string | undefined;
+  @property({ attribute: false })
+  private avatarSrc?: string | null;
+  @property({ type: Boolean })
+  useMiniWidget = true;
+
+  @state()
+  private popup: Talk.Popup | null = null;
+  @state()
+  private theme: Theme = getTheme();
+  @state()
+  private chatId = "";
+  @state()
+  private analytics: Analytics | null = null;
+  @state()
+  private isMobile = isMobile();
+  @state()
+  private launcher: HTMLElement | null = null;
+  @state()
+  private building: Building | null = null;
+  @state()
+  private hasMounted = false;
+  @state()
+  private hideLauncher = false;
+
+  private yardiDNIScriptInterval: NodeJS.Timer | null = null;
+  inHouseLauncherRef: Ref<InHouseLauncher> = createRef();
+
+  initializeInstanceVariables = async (): Promise<void> => {
+    await this.setBuildingDerivedInfo();
+    await this.initializeLaunchJS();
+    this.attachOnClickToInHouseLauncher();
+  };
+
+  setBuildingDerivedInfo = async (): Promise<void> => {
+    if (!this.buildingSlug || !this.orgSlug) {
+      return;
+    }
+    this.building = await fetchBuildingInfo(this.orgSlug, this.buildingSlug);
+    this.chatId = getChatID(this.orgSlug, this.buildingSlug);
+    this.avatarSrc = this.avatarSrc || this.building.avatarSrc;
+    this.theme = getTheme(this.themeId ?? this.building.themeId);
+  };
+
+  private initializeLaunchJS = async () => {
+    if (!this.building || !this.theme) {
+      return;
+    }
+    if (this.popup && this.launcher) {
+      return;
+    }
+
+    const [building, theme, avatarSrc, session] = await Promise.all([
+      this.building,
+      this.theme,
+      this.avatarSrc,
+      MEChat.session,
+    ]);
+    if (building.conversationMaintenanceMode) {
+      return new Promise(() => {
+        // If in maintenance mode, we return an always-pending Promise
+        // eslint-disable-next-line no-console
+        console.warn(
+          "MeetElise Chat is in maintenance mode. Chat icon will not appear."
+        );
+      });
+    }
+    await this.configureTalkJSPopup(building, theme, session, avatarSrc);
+    this.configureLauncherElement();
+
+    this.yardiDNIScriptInterval = setInterval(
+      () => this.pollForYardiCampaignSource(),
+      1000
+    );
+    setTimeout(clearInterval, 15000, this.yardiDNIScriptInterval);
+  };
+
+  private pollForYardiCampaignSource() {
+    const yardiSource = window.RCTPCampaign?.CampaignDetails?.Source;
+    if (yardiSource) {
+      this.analytics?.ping("yardi-DNI-init");
+      if (this.yardiDNIScriptInterval) {
+        clearInterval(this.yardiDNIScriptInterval);
+      }
+    }
+  }
+
+  private configureLauncherElement = () => {
+    if (!this.popup || !this.inHouseLauncherRef.value) {
+      return;
+    }
+    this.launcher = this.inHouseLauncherRef.value;
+  };
+
+  private configureTalkJSPopup = async (
+    building: Building,
+    theme: Theme,
+    session: Talk.Session,
+    avatarSrc?: string | null
+  ) => {
+    const popup = session.createPopup(
+      createConversation(
+        session,
+        building,
+        theme,
+        avatarSrc || building.avatarSrc,
+        this.chatId,
+        this.isMobile
+      ),
+      {
+        launcher: "never",
+        showCloseInHeader: true,
+        messageField: { placeholder: "Ask a question..." },
+      }
+    );
+
+    await popup.mount({ show: false });
+    popup.on("close", () => {
+      this.hideLauncher = false;
+    });
+    const talkjsPopupElement = document.querySelector(".__talkjs_popup");
+    if (!talkjsPopupElement) throw new Error("Failed to find chat window");
+    talkjsPopupElement.classList.add("meetelise-chat", "pane");
+    if (!this.isMobile) {
+      talkjsPopupElement.classList.add("in-house-launcher__desktop");
+    }
+    (talkjsPopupElement as HTMLElement).style.zIndex = "99999999999";
+    this.popup = popup;
+  };
+
+  /**
+   * Remove the instance from the screen.
+   *
+   * Chat will be unusable after this. If you just need to hide the
+   * chat button, use {@link MEChat#hide} instead.
+   */
+  remove(): void {
+    this.popup?.destroy();
+  }
+
+  /** Open the messages window */
+  open(): void {
+    this.popup?.show();
+  }
+
+  /** Close the messages window */
+  close(): void {
+    this.popup?.hide();
+  }
+
+  /** Show the chat button on the screen if it was previously hidden. */
+  // TODO: will this work with the new launcher? it needs to be display flex? will this just change the inline style and leave the stylesheet/style tag alone?
+  show(): void {
+    if (!this.launcher) {
+      return;
+    }
+    this.launcher.style.display = "";
+  }
+
+  /** Hide the chat button from the screen (but don't remove from the DOM). */
+  hide(): void {
+    if (!this.launcher) {
+      return;
+    }
+    this.launcher.style.display = "none";
+  }
+
+  firstUpdated = (): void => {
+    this.initializeInstanceVariables();
+  };
+
+  render(): TemplateResult {
+    installInHouseLauncher();
+
+    return html`
+      <div
+        class=${classMap({
+          inHouseLauncherContainer: true,
+          ["in-house-launcher__mobile"]: this.isMobile,
+          ["in-house-launcher__desktop"]: !this.isMobile,
+          ["meetelise-chat"]: true,
+          launcher: true,
+          shouldBeVisible: true,
+        })}
+      >
+        <in-house-launcher
+          ${ref(this.inHouseLauncherRef)}
+          .isMobile=${this.isMobile}
+          .isFirstMount=${!this.hasMounted}
+          .isMini=${this.useMiniWidget}
+          .buildingId=${this.building?.id ?? 0}
+          phoneNumber="${this.building?.phoneNumber ?? ""}"
+          textColor="${this.theme.chatHeader.textColor}"
+          backgroundColor="${this.theme.chatPaneBackgroundColor}"
+          ?hidden=${this.hideLauncher}
+        >
+        </in-house-launcher>
+      </div>
+    `;
+  }
+
+  private attachOnClickToInHouseLauncher = () => {
+    const inHouseLauncher = this.inHouseLauncherRef.value;
+    if (!inHouseLauncher) {
+      return;
+    }
+
+    inHouseLauncher.onChatTapped = async () => {
+      if (!this.popup) {
+        return;
+      }
+
+      this.popup.show();
+      this.analytics?.ping("open");
+      this.hideLauncher = true;
+      this.hasMounted = true;
+    };
+  };
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "me-chat": MEChat;
+  }
+  interface Window {
+    RCTPCampaign?: { CampaignDetails: { Source: string } };
+  }
+}

package/src/WebComponent/OfficeHours.ts

@@ -0,0 +1,73 @@
+import eachDayOfInterval from "date-fns/eachDayOfInterval";
+import startOfWeek from "date-fns/startOfWeek";
+import endOfWeek from "date-fns/endOfWeek";
+import setHours from "date-fns/setHours";
+import getDay from "date-fns/getDay";
+import axios from "axios";
+
+interface OfficeHourAvailabilityReponse {
+  [dayOfWeek: string]: { start: string; end: string };
+}
+
+const officeHoursCache: {
+  [buildingId: number]: OfficeHourAvailabilityReponse;
+} = {};
+
+export const getRawOfficeHours = async (
+  buildingId: number
+): Promise<OfficeHourAvailabilityReponse> => {
+  if (officeHoursCache[buildingId]) {
+    return officeHoursCache[buildingId];
+  }
+  const url = `https://app.meetelise.com/platformApi/connectors/talk_js/leasing_office_hours/${buildingId}`;
+  const result = await axios.get<OfficeHourAvailabilityReponse>(url);
+  officeHoursCache[buildingId] = result.data;
+  return result.data;
+};
+
+export const getDefaultOfficeHours = (): {
+  startTime: Date;
+  endTime: Date;
+}[] => {
+  return eachDayOfInterval({
+    start: startOfWeek(new Date()),
+    end: endOfWeek(new Date()),
+  })
+    .filter((date) => getDay(date) !== 0 && getDay(date) !== 6)
+    .map((date) => ({
+      startTime: setHours(date, 9),
+      endTime: setHours(date, 17),
+    }));
+};
+
+export const dayNamesInOrder = [
+  "monday",
+  "tuesday",
+  "wednesday",
+  "thursday",
+  "friday",
+  "saturday",
+  "sunday",
+];
+
+/**
+ * Based on the design, we're going with monday as the first day of the week
+ */
+export const getOfficeHourText = async (
+  buildingId: number
+): Promise<
+  (string | { dayOfWeek: string; startTime: string; endTime: string })[]
+> => {
+  const rawOfficeHours = await getRawOfficeHours(buildingId);
+  return dayNamesInOrder.map((dow) => {
+    const officeHourInfo = rawOfficeHours[dow];
+    if (!officeHourInfo) {
+      return dow;
+    }
+    return {
+      dayOfWeek: dow,
+      startTime: officeHourInfo.start,
+      endTime: officeHourInfo.end,
+    };
+  });
+};

package/src/WebComponent/Scheduler/date-picker.ts

@@ -0,0 +1,320 @@
+import { LitElement, html, TemplateResult, css } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import {
+  dayNames,
+  getDaysInMonth,
+  getDaysInPreviousMonth,
+  getMonthEndDay,
+  getMonthStartDay,
+  Month,
+  monthNames,
+} from "../utils";
+
+export class DatePicker extends LitElement {
+  /**
+   * Optional attribute to set the date picker's default month.
+   * The attribute will not be updated if the user changes the month shown.
+   */
+  @property({ attribute: "month", type: String })
+  defaultMonth?: Month;
+
+  /**
+   * Optional attribute to set the date picker's default year.
+   * The attribute will not be updated if the user changes the year shown.
+   */
+  @property({ attribute: "year", type: Number })
+  defaultYear?: number;
+
+  private _selectedDate?: number = undefined;
+  set selectedDate(date: number | undefined) {
+    const old = this._selectedDate;
+    this._selectedDate = date;
+    this.requestUpdate("selectedDate", old);
+    this.dispatchEvent(new Event("change"));
+  }
+
+  @property({ type: Number })
+  get selectedDate(): undefined | number {
+    return this._selectedDate;
+  }
+
+  now = new Date();
+
+  private _monthShown =
+    this.defaultMonth && monthNames.indexOf(this.defaultMonth) !== -1
+      ? monthNames.indexOf(this.defaultMonth)
+      : this.now.getMonth();
+
+  // Make it easy to increment/decrement `this.monthShown` at year boundaries
+  set monthShown(month: number) {
+    const oldMonthShown = this._monthShown;
+    if (month === 12) {
+      this._monthShown = 0;
+      this.yearShown++;
+    } else if (month === -1) {
+      this._monthShown = 11;
+      this.yearShown--;
+    } else {
+      this._monthShown = month;
+    }
+    this.requestUpdate("monthShown", oldMonthShown);
+  }
+
+  /** 0-indexed month, e.g. `0` for January */
+  @state()
+  get monthShown(): number {
+    return this._monthShown;
+  }
+
+  @state()
+  yearShown = this.defaultYear ?? this.now.getFullYear();
+
+  static styles = css`
+    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
+
+    :host {
+      box-sizing: border-box;
+      font-family: "Poppins";
+      color: #202020;
+      font-style: normal;
+    }
+
+    #calendar {
+      display: flex;
+      flex-direction: column;
+      user-select: none;
+      min-width: 206px;
+      width: 206px;
+      background: #e7e7e7;
+      border: 1px solid #ffffff;
+      border-radius: 10px;
+      padding: 15px 12px 10px;
+    }
+
+    #header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 9px;
+    }
+
+    h1 {
+      font-weight: 600;
+      font-size: 12px;
+    }
+
+    #arrows {
+      width: 40.46px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    #rows {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+    }
+
+    .dayNumber,
+    .dayInitial {
+      position: relative;
+      font-size: 12px;
+      text-align: center;
+      flex: 1 1 0px;
+    }
+
+    .dayInitial {
+      font-weight: 400;
+    }
+
+    .dayNumber {
+      font-weight: 600;
+    }
+
+    .dayNumber.selected::after,
+    .dayNumber:not(.selected):hover::after {
+      content: "";
+      height: 23px;
+      aspect-ratio: 1;
+      border-radius: 50%;
+      background-color: #202020;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: -1;
+    }
+    .dayNumber:not(.selected):hover::after {
+      background-color: lightgray;
+    }
+    .dayNumber.selected::after {
+      background-color: #202020;
+    }
+    .dayNumber.selected,
+    .dayNumber:not(.selected):not(.differentMonth):hover {
+      z-index: 1;
+    }
+    .dayNumber.selected {
+      color: white;
+    }
+
+    .dayNumber.differentMonth {
+      color: #84838f;
+    }
+  `;
+
+  render(): TemplateResult {
+    // TODO: check 0 vs. 1-indexing, make sure this works.
+    // TODO: handle year boundaries, e.g. if it's January and last month was last year. also same for next month when switching months.
+    const daysInMonth = getDaysInMonth(this.yearShown, this.monthShown);
+    const monthStartDay =
+      dayNames[getMonthStartDay(this.yearShown, this.monthShown)];
+    const daysInPreviousMonth = getDaysInPreviousMonth(
+      this.yearShown,
+      this.monthShown
+    );
+    const monthEndDay =
+      dayNames[getMonthEndDay(this.yearShown, this.monthShown)];
+    const extraDaysAtBeginningOfMonth = [];
+    if (monthStartDay !== "Sunday") {
+      const numberOfExtraDaysAtBeginningOfMonth =
+        dayNames.indexOf(monthStartDay);
+      for (let i = numberOfExtraDaysAtBeginningOfMonth; i > 0; i--) {
+        extraDaysAtBeginningOfMonth.push(daysInPreviousMonth + 1 - i);
+      }
+    }
+
+    const daysOfMonth = new Array(daysInMonth).fill(null).map((_, i) => i + 1);
+
+    const extraDaysAtEndOfMonth = [];
+    if (monthEndDay !== "Saturday") {
+      const numberOfExtraDaysAtEndOfMonth = [...dayNames]
+        .reverse()
+        .indexOf(monthEndDay);
+      for (let i = 1; i <= numberOfExtraDaysAtEndOfMonth; i++) {
+        extraDaysAtEndOfMonth.push(i);
+      }
+    }
+
+    const dayNums = [
+      ...extraDaysAtBeginningOfMonth,
+      ...daysOfMonth,
+      ...extraDaysAtEndOfMonth,
+    ];
+
+    const dayElements = dayNums.map((dayNumber, index) => {
+      const isDifferentMonth =
+        index < extraDaysAtBeginningOfMonth.length ||
+        index >= extraDaysAtBeginningOfMonth.length + daysOfMonth.length;
+      return html`<span
+        class="dayNumber ${classMap({
+          differentMonth: isDifferentMonth,
+          selected: dayNumber === this.selectedDate && !isDifferentMonth,
+        })}"
+        >${dayNumber}</span
+      >`;
+    });
+    const rows = chunk(7, dayElements);
+
+    return html`
+      <div id="calendar">
+        <div id="header">
+          <h1>${monthNames[this.monthShown]} ${this.yearShown}</h1>
+          <div
+            id="arrows"
+            @click="${(e: MouseEvent) => {
+              // TODO: disable incrementing/decrementing to months with no appointments available
+              if ((e.target as HTMLElement)?.closest("#back")) {
+                this.monthShown--;
+              }
+              if ((e.target as HTMLElement)?.closest("#forward")) {
+                this.monthShown++;
+              }
+            }}"
+            @keydown="${(e: KeyboardEvent) => {
+              if (![" ", "Enter"].includes(e.key)) {
+                return;
+              }
+              if ((e.target as HTMLElement)?.closest("#back")) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.monthShown--;
+              } else if ((e.target as HTMLElement)?.closest("#forward")) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.monthShown++;
+              }
+            }}"
+          >
+            <svg
+              id="back"
+              tabindex="0"
+              width="9"
+              height="16"
+              viewBox="0 0 9 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8.67727 2.34317L7.26305 0.928955L0.192017 8.00001L7.26308 15.0711L8.6773 13.6569L3.02044 8L8.67727 2.34317Z"
+                fill="#83818E"
+              />
+            </svg>
+            <svg
+              id="forward"
+              tabindex="0"
+              width="9"
+              height="16"
+              viewBox="0 0 9 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0.157227 2.34315L1.57144 0.928932L8.64251 8L1.57144 15.0711L0.157227 13.6569L5.81408 8L0.157227 2.34315Z"
+                fill="#83818E"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div
+          id="rows"
+          @click="${(e: MouseEvent) => {
+            const target = e.target as HTMLElement | undefined;
+            if (target?.closest("span.dayNumber:not(.differentMonth)"))
+              this.selectedDate = parseInt(target.innerText);
+          }}"
+        >
+          <div class="row">
+            <span class="dayInitial">S</span>
+            <span class="dayInitial">M</span>
+            <span class="dayInitial">T</span>
+            <span class="dayInitial">W</span>
+            <span class="dayInitial">T</span>
+            <span class="dayInitial">F</span>
+            <span class="dayInitial">S</span>
+          </div>
+          ${rows.map((row) => html`<div class="row">${row}</div>`)}
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define("date-picker", DatePicker);
+
+const chunk = <T>(chunkLength: number, array: T[]) => {
+  const chunks = [];
+  for (let i = 0; i < array.length; i += chunkLength) {
+    chunks.push(array.slice(i, i + chunkLength));
+  }
+  return chunks;
+};