@meetelise/chat 1.12.0 → 1.12.3

package/src/WebComponent/InHouseLauncher.ts

@@ -3,16 +3,19 @@ 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 { inHousLauncherStyles } from "./inHouseLauncherStyles";
+import { inHouseLauncherStyles } from "./inHouseLauncherStyles";
 import { EmailUsWindow, installEmailUsWindow } from "./actions/EmailUsWindow";
 import { installTextUsWindow, TextUsWindow } from "./actions/TextUsWindow";
 import { styleMap } from "lit/directives/style-map.js";
 import { classMap } from "lit/directives/class-map.js";
 import { installCallUsWindow } from "./actions/CallUsWindow";
+import { getRegisteredPhoneNumbers } from "../getRegisteredPhoneNumbers";
+import { TourScheduler } from "./Scheduler/tour-scheduler";
+import { LabeledOption } from "../fetchBuildingInfo";
 
 @customElement("in-house-launcher")
 export class InHouseLauncher extends LitElement {
-  static styles = inHousLauncherStyles;
+  static styles = inHouseLauncherStyles;
 
   @property({ type: Boolean })
   isMobile = false;
@@ -36,9 +39,13 @@ export class InHouseLauncher extends LitElement {
   @property({ type: Boolean })
   hasEmailEnabled = true;
   @property({ type: Boolean })
-  hasSSTEnabled = false;
+  hasSSTEnabled = true;
   @property({ type: Boolean })
-  hasTextUsEnabled = true;
+  hasTextUsEnabled = false;
+  @property({ attribute: false })
+  layoutOptions: LabeledOption[] = [];
+  @property({ attribute: false })
+  tourTypeOptions: LabeledOption[] = [];
   @property({ attribute: false })
   onChatTapped: () => void = () => {
     return;
@@ -64,10 +71,19 @@ export class InHouseLauncher extends LitElement {
 
   emailUsWindowRef: Ref<EmailUsWindow> = createRef();
   textUsWindowRef: Ref<TextUsWindow> = createRef();
+  tourSchedulerRef: Ref<TourScheduler> = createRef();
 
-  updated = (): void => {
+  updated = async (): Promise<void> => {
     this.attachOnClickToEmailUsWindow();
     this.attachOnClickToTextUsWindow();
+    if (this.buildingId) {
+      const registeredPhoneNumbers = await getRegisteredPhoneNumbers(
+        this.buildingId
+      );
+      this.hasTextUsEnabled =
+        registeredPhoneNumbers.length > 0 && this.buildingId !== 4895;
+    }
+    this.attachOnClickToSSTWindow();
   };
 
   attachOnClickToEmailUsWindow = (): void => {
@@ -86,6 +102,14 @@ export class InHouseLauncher extends LitElement {
     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();
@@ -138,7 +162,12 @@ export class InHouseLauncher extends LitElement {
   renderSSTOption = (): TemplateResult => {
     const text = this.getNumCallToActions() > 2 ? "Book" : "Book a tour";
     return html`
-      <div class="in-house-launcher__call-to-action-option">${text}</div>
+      <div
+        class="in-house-launcher__call-to-action-option"
+        @click=${this.onClickSSTOption}
+      >
+        ${text}
+      </div>
     `;
   };
 
@@ -229,6 +258,16 @@ export class InHouseLauncher extends LitElement {
               ></text-us-window>
             </div>`
           : ""}
+        ${this.isSSTWindowOpen
+          ? html`<div class="in-house-launcher__window-wrapper">
+              <tour-scheduler
+                .layoutOptions=${this.layoutOptions}
+                .tourTypeOptions=${this.tourTypeOptions}
+                buildingId=${this.buildingId}
+                ${ref(this.tourSchedulerRef)}
+              ></tour-scheduler>
+            </div>`
+          : ""}
         ${this.isCallUsWindowOpen
           ? html`
               <div class="in-house-launcher__window-wrapper">
@@ -293,7 +332,7 @@ export class InHouseLauncher extends LitElement {
                   />
                 </svg>
               `,
-              undefined,
+              this.onClickSSTOption,
               true
             )
           : ""}
@@ -368,6 +407,16 @@ export class InHouseLauncher extends LitElement {
               ></text-us-window>
             </div>`
           : ""}
+        ${this.isSSTWindowOpen
+          ? html`<div class="in-house-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="in-house-launcher__window-wrapper">

package/src/WebComponent/MEChat.ts

@@ -14,6 +14,7 @@ import { isMobile } from "../utils";
 import { installInHouseLauncher } from "./InHouseLauncher";
 
 import "./MEChat.css";
+import { getRawAvailabilities } from "../getAvailabilities";
 
 export interface Options {
   building: string;
@@ -91,6 +92,7 @@ export class MEChat extends LitElement {
       return;
     }
     this.building = await fetchBuildingInfo(this.orgSlug, this.buildingSlug);
+    getRawAvailabilities(this.building.id); // we're not using this here, just want to cache the result
     this.chatId = getChatID(this.orgSlug, this.buildingSlug);
     this.avatarSrc = this.avatarSrc || this.building.avatarSrc;
     this.theme = getTheme(this.themeId ?? this.building.themeId);
@@ -243,6 +245,8 @@ export class MEChat extends LitElement {
           .isFirstMount=${!this.hasMounted}
           .isMini=${this.useMiniWidget}
           .buildingId=${this.building?.id ?? 0}
+          .layoutOptions=${this.building?.layoutOptions ?? []}
+          .tourTypeOptions=${this.building?.tourTypeOptions ?? []}
           phoneNumber="${this.building?.phoneNumber ?? ""}"
           textColor="${this.theme.chatHeader.textColor}"
           backgroundColor="${this.theme.chatPaneBackgroundColor}"

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

@@ -1,5 +1,10 @@
+import { isSameMonth } from "date-fns";
+import format from "date-fns/format";
+import getDate from "date-fns/getDate";
+import getMonth from "date-fns/getMonth";
+import getYear from "date-fns/getYear";
 import { LitElement, html, TemplateResult, css } from "lit";
-import { property, state } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import {
   dayNames,
@@ -11,6 +16,7 @@ import {
   monthNames,
 } from "../utils";
 
+@customElement("date-picker")
 export class DatePicker extends LitElement {
   /**
    * Optional attribute to set the date picker's default month.
@@ -26,16 +32,26 @@ export class DatePicker extends LitElement {
   @property({ attribute: "year", type: Number })
   defaultYear?: number;
 
-  private _selectedDate?: number = undefined;
-  set selectedDate(date: number | undefined) {
+  @property({ attribute: false })
+  availabilities?: {
+    [day: string]: Date[];
+  };
+
+  private _selectedDate?: Date = undefined;
+  set selectedDate(date: Date | undefined) {
     const old = this._selectedDate;
     this._selectedDate = date;
     this.requestUpdate("selectedDate", old);
-    this.dispatchEvent(new Event("change"));
+    this.dispatchEvent(
+      new Event("change", {
+        composed: true,
+        bubbles: true,
+      })
+    );
   }
 
-  @property({ type: Number })
-  get selectedDate(): undefined | number {
+  @property({ attribute: false })
+  get selectedDate(): undefined | Date {
     return this._selectedDate;
   }
 
@@ -47,6 +63,7 @@ export class DatePicker extends LitElement {
       : this.now.getMonth();
 
   // Make it easy to increment/decrement `this.monthShown` at year boundaries
+  // TODO: `willUpdate` is better: see https://lit.dev/docs/components/properties/ and https://lit.dev/docs/components/lifecycle/#willupdate
   set monthShown(month: number) {
     const oldMonthShown = this._monthShown;
     if (month === 12) {
@@ -71,8 +88,6 @@ export class DatePicker extends LitElement {
   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";
@@ -81,6 +96,7 @@ export class DatePicker extends LitElement {
     }
 
     #calendar {
+      box-sizing: border-box;
       display: flex;
       flex-direction: column;
       user-select: none;
@@ -89,19 +105,21 @@ export class DatePicker extends LitElement {
       background: #e7e7e7;
       border: 1px solid #ffffff;
       border-radius: 10px;
-      padding: 15px 12px 10px;
+      padding: 15px 12px 15px;
     }
 
     #header {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin-bottom: 9px;
+      margin-bottom: 13px;
     }
 
     h1 {
       font-weight: 600;
       font-size: 12px;
+      margin: 0;
+      margin-left: 0.7em;
     }
 
     #arrows {
@@ -153,8 +171,21 @@ export class DatePicker extends LitElement {
       transform: translate(-50%, -50%);
       z-index: -1;
     }
+    .dayNumber.today:not(.selected)::after {
+      content: "";
+      height: 23px;
+      aspect-ratio: 1;
+      border: 1px solid #202020;
+      border-radius: 50%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 1;
+    }
     .dayNumber:not(.selected):hover::after {
       background-color: lightgray;
+      z-index: -1;
     }
     .dayNumber.selected::after {
       background-color: #202020;
@@ -166,15 +197,12 @@ export class DatePicker extends LitElement {
     .dayNumber.selected {
       color: white;
     }
-
-    .dayNumber.differentMonth {
-      color: #84838f;
+    .dayNumber:is(.differentMonth, .past, .noAvailabilities) {
+      opacity: 30%;
     }
   `;
 
   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)];
@@ -212,13 +240,40 @@ export class DatePicker extends LitElement {
     ];
 
     const dayElements = dayNums.map((dayNumber, index) => {
+      const isPast =
+        this.yearShown < this.now.getFullYear() ||
+        (this.yearShown === this.now.getFullYear() &&
+          this.monthShown < this.now.getMonth()) ||
+        (this.yearShown === this.now.getFullYear() &&
+          this.monthShown === this.now.getMonth() &&
+          dayNumber < this.now.getDate());
       const isDifferentMonth =
         index < extraDaysAtBeginningOfMonth.length ||
         index >= extraDaysAtBeginningOfMonth.length + daysOfMonth.length;
+      const isToday =
+        !isDifferentMonth &&
+        this.now.getMonth() === this.monthShown &&
+        this.now.getDate() === dayNumber;
+      const isSelected =
+        !!this.selectedDate &&
+        !isDifferentMonth &&
+        this.monthShown === getMonth(this.selectedDate) &&
+        this.yearShown === getYear(this.selectedDate) &&
+        dayNumber === getDate(this.selectedDate);
+      const dateString = format(
+        new Date(this.yearShown, this.monthShown, dayNumber),
+        "y-MM-dd"
+      );
+      const hasNoAvailabilities =
+        !this.availabilities?.[dateString] ||
+        this.availabilities?.[dateString]?.length === 0;
       return html`<span
         class="dayNumber ${classMap({
+          past: isPast,
           differentMonth: isDifferentMonth,
-          selected: dayNumber === this.selectedDate && !isDifferentMonth,
+          today: isToday,
+          selected: isSelected,
+          noAvailabilities: hasNoAvailabilities,
         })}"
         >${dayNumber}</span
       >`;
@@ -232,8 +287,13 @@ export class DatePicker extends LitElement {
           <div
             id="arrows"
             @click="${(e: MouseEvent) => {
-              // TODO: disable incrementing/decrementing to months with no appointments available
-              if ((e.target as HTMLElement)?.closest("#back")) {
+              if (
+                (e.target as HTMLElement)?.closest("#back") &&
+                !isSameMonth(
+                  this.now,
+                  new Date(this.yearShown, this.monthShown, 1)
+                )
+              ) {
                 this.monthShown--;
               }
               if ((e.target as HTMLElement)?.closest("#forward")) {
@@ -244,7 +304,13 @@ export class DatePicker extends LitElement {
               if (![" ", "Enter"].includes(e.key)) {
                 return;
               }
-              if ((e.target as HTMLElement)?.closest("#back")) {
+              if (
+                (e.target as HTMLElement)?.closest("#back") &&
+                !isSameMonth(
+                  this.now,
+                  new Date(this.yearShown, this.monthShown, 1)
+                )
+              ) {
                 e.preventDefault();
                 e.stopPropagation();
                 this.monthShown--;
@@ -291,7 +357,11 @@ export class DatePicker extends LitElement {
           @click="${(e: MouseEvent) => {
             const target = e.target as HTMLElement | undefined;
             if (target?.closest("span.dayNumber:not(.differentMonth)"))
-              this.selectedDate = parseInt(target.innerText);
+              this.selectedDate = new Date(
+                this.yearShown,
+                this.monthShown,
+                parseInt(target.innerText)
+              );
           }}"
         >
           <div class="row">
@@ -309,7 +379,6 @@ export class DatePicker extends LitElement {
     `;
   }
 }
-customElements.define("date-picker", DatePicker);
 
 const chunk = <T>(chunkLength: number, array: T[]) => {
   const chunks = [];

package/src/WebComponent/Scheduler/me-select.ts

@@ -1,9 +1,8 @@
 import { LitElement, html, TemplateResult, css } from "lit";
-import { property, state, query } from "lit/decorators.js";
+import { property, state, query, customElement } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 
-// TODO: would be nice to mimic the usage of native <select> where the options are children
-
+@customElement("me-select")
 export class MESelect extends LitElement {
   @property({ attribute: false })
   options: string[] = [];
@@ -12,10 +11,7 @@ export class MESelect extends LitElement {
   placeholder?: string = "Select";
 
   @property({ type: String })
-  defaultOption?: string;
-
-  @state()
-  private selected?: string;
+  value?: string;
 
   @state()
   private activeOption: string | null = null;
@@ -23,7 +19,7 @@ export class MESelect extends LitElement {
   @state()
   private isOpen?: boolean = false;
 
-  @query("#select")
+  @query("#select", true)
   meSelect!: HTMLDivElement;
 
   toggleSelect = (): void => {
@@ -34,11 +30,12 @@ export class MESelect extends LitElement {
   };
 
   setSelectedOption = (option: string, closeSelect = true): void => {
-    this.selected = option;
+    this.value = option;
     if (closeSelect) {
       this.isOpen = !this.isOpen;
       this.activeOption = null;
     }
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
   };
 
   handleKeydown = (
@@ -69,8 +66,6 @@ export class MESelect extends LitElement {
   }
 
   static styles = css`
-    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
-
     :host {
       --light-grey: #e3e3e3;
       --active-option-color: #f5f7f9;
@@ -109,6 +104,7 @@ export class MESelect extends LitElement {
       position: absolute;
       min-height: 40px;
       max-width: 400px;
+      width: max-content;
       background-color: white;
       z-index: 20;
       margin-top: 4px;
@@ -199,7 +195,7 @@ export class MESelect extends LitElement {
             }
           }}"
         >
-          <span id="selectText">${this.selected ?? this.placeholder}</span>
+          <span id="selectText">${this.value ?? this.placeholder}</span>
           <svg
             width="10"
             height="6"
@@ -241,4 +237,3 @@ export class MESelect extends LitElement {
     `;
   }
 }
-customElements.define("me-select", MESelect);

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

@@ -5,97 +5,144 @@ import { classMap } from "lit/directives/class-map.js";
 @customElement("time-picker")
 export class TimePicker extends LitElement {
   @property({ attribute: false })
-  // options: string[] = [];
-  options: string[] = [
-    "9:10am",
-    "10:00am",
-    "11:00am",
-    "1:00pm",
-    "3:00pm",
-    "3:30pm",
-    "4:00pm",
-    "4:30pm",
-    "00:00pm",
-  ];
+  options: string[] = [];
+
+  @property({ type: Boolean })
+  selectedDateExists = false;
+
+  @property({ type: Boolean })
+  horizontal = false;
 
   @state()
   private selected?: string;
 
+  @property({ attribute: false })
+  get selectedTime(): undefined | string {
+    return this.selected;
+  }
+
   static styles = css`
     * {
       box-sizing: border-box;
     }
 
+    :host {
+      color: #202020;
+      font-family: "Poppins";
+    }
+
     #optionContainer {
+      display: grid;
+      grid-template-columns: 85px 85px;
+      grid-auto-rows: 40px;
+      align-items: start;
       margin-left: 14px;
-      display: flex;
-      flex-wrap: wrap;
       column-gap: 14px;
       row-gap: 19px;
       min-width: 200px;
+      max-height: 310px;
+      overflow-y: auto;
+    }
+
+    #optionContainer.horizontal {
+      grid-template-columns: unset;
+      grid-auto-rows: unset;
+      max-height: unset;
+      overflow-y: unset;
+      grid-template-rows: 40px 40px;
+      grid-auto-columns: 85px;
+      grid-auto-flow: column;
+      row-gap: 13px;
+      column-gap: 14px;
+      max-width: 90%;
+      overflow-x: auto;
     }
 
     .option {
       position: relative;
-      display: inline-block;
-      /* padding: 11px 14px; */
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
       height: 40px;
-      width: 85px;
-      /* max-width:  */
+      width: max-content;
+      padding: 11px 11px 11px 14px;
       background: #e7e7e7;
       border: 1px solid #ffffff;
       border-radius: 10px;
-      color: #202020;
-      font-family: "Poppins";
       font-style: normal;
-      font-weight: 400;
       font-size: 14px;
-      text-align: center;
       user-select: none;
     }
 
-    .option > span {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-
     .option.selected {
       color: white;
       background: #202020;
-      border: 3px solid #83818e;
+      box-shadow: inset 0px 0px 0px 3px rgb(131 129 142);
       border-radius: 10px;
     }
+
+    #noAvailabilityText {
+      font-size: 12px;
+      margin-left: 20px;
+      line-height: 18px;
+      max-width: 170px;
+    }
+
+    #noAvailabilityText.horizontal {
+      margin-left: 0;
+    }
   `;
   render(): TemplateResult {
-    return html`
-      <div
-        id="optionContainer"
-        @click="${(e: MouseEvent) => {
-          const target = e.target as HTMLElement | undefined;
-          if (target?.closest(".option:not(.selected)"))
-            this.selected = target.innerText;
-        }}"
-        @keydown="${(e: KeyboardEvent) => {
-          const target = e.target as HTMLElement | undefined;
-          if ([" ", "Enter"].includes(e.key) && target?.closest(".option")) {
-            e.preventDefault();
-            this.selected =
-              target.innerText !== this.selected ? target.innerText : undefined;
-          }
-        }}"
-      >
-        ${this.options.map(
-          (option) =>
-            html`<div
-              class="option ${classMap({ selected: this.selected === option })}"
-              tabindex="0"
-            >
-              <span>${option}</span>
-            </div>`
-        )}
-      </div>
-    `;
+    return this.options?.length
+      ? html`
+          <div
+            id="optionContainer"
+            class=${this.horizontal ? "horizontal" : ""}
+            @click="${(e: MouseEvent) => {
+              const target = e.target as HTMLElement | undefined;
+              if (target?.closest(".option:not(.selected)"))
+                this.selected = target.innerText;
+              this.dispatchEvent(
+                new Event("change", { bubbles: true, composed: true })
+              );
+            }}"
+            @keydown="${(e: KeyboardEvent) => {
+              const target = e.target as HTMLElement | undefined;
+              if (
+                [" ", "Enter"].includes(e.key) &&
+                target?.closest(".option")
+              ) {
+                e.preventDefault();
+                this.selected =
+                  target.innerText !== this.selected
+                    ? target.innerText
+                    : undefined;
+                this.dispatchEvent(
+                  new Event("change", { bubbles: true, composed: true })
+                );
+              }
+            }}"
+          >
+            ${this.options.map(
+              (option) =>
+                html`<div
+                  class="option ${classMap({
+                    selected: this.selected === option,
+                  })}"
+                  tabindex="0"
+                >
+                  <span>${option}</span>
+                </div>`
+            )}
+          </div>
+        `
+      : html` <div
+          id="noAvailabilityText"
+          class=${this.horizontal ? "horizontal" : ""}
+        >
+          ${this.selectedDateExists
+            ? html`<p>No available appointments for this day</p>`
+            : html`<p>Select a date</p>`}
+        </div>`;
   }
 }