@meetelise/chat 1.12.13 → 1.13.0

package/public/dist/index.js.LICENSE.txt

@@ -40,6 +40,15 @@ object-assign
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
 /** @license React v17.0.2
  * react.production.min.js
  *

package/src/WebComponent/Launcher.ts

@@ -1,5 +1,3 @@
-// TODO: remove this when sst fixed
-/* eslint-disable lit/binding-positions */
 import classnames from "classnames";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -41,8 +39,6 @@ export class Launcher extends LitElement {
   @property({ type: Boolean })
   hasEmailEnabled = true;
   @property({ type: Boolean })
-  // TODO: re-enable
-  // hasSSTEnabled = true;
   hasSSTEnabled = false;
   @property({ type: Boolean })
   hasTextUsEnabled = false;
@@ -70,8 +66,7 @@ export class Launcher extends LitElement {
     return [
       this.hasEmailEnabled,
       !!this.phoneNumber,
-      // TODO: re-enable
-      // this.hasSSTEnabled,
+      this.hasSSTEnabled,
       this.hasTextUsEnabled,
     ].filter((v) => v).length;
   };
@@ -90,6 +85,9 @@ export class Launcher extends LitElement {
       );
       this.hasTextUsEnabled =
         registeredPhoneNumbers.length > 0 && this.buildingId !== 4895;
+      if (this.buildingId === 3660) {
+        this.hasSSTEnabled = true;
+      }
     }
   };
 
@@ -207,8 +205,7 @@ export class Launcher extends LitElement {
         ${this.hasEmailEnabled ? this.renderEmailOption() : ""}
         ${this.phoneNumber ? this.renderCallUsOption() : ""}
         ${this.hasTextUsEnabled ? this.renderTextUsOption() : ""}
-        <!-- TODO: re-enable -->
-        <!-- ${this.hasSSTEnabled ? this.renderSSTOption() : ""} -->
+        ${this.hasSSTEnabled ? this.renderSSTOption() : ""}
       </div>
     `;
   };
@@ -326,8 +323,7 @@ export class Launcher extends LitElement {
               true
             )
           : ""}
-        <!-- TODO: re-enable -->
-        <!-- ${this.hasSSTEnabled && !this.isCallToActionWindowOpen()
+        ${this.hasSSTEnabled && !this.isCallToActionWindowOpen()
           ? this.renderMiniOption(
               html`
                 <svg
@@ -346,7 +342,7 @@ export class Launcher extends LitElement {
               this.onClickSSTOption,
               true
             )
-          : ""} -->
+          : ""}
         ${this.phoneNumber && !this.isCallToActionWindowOpen()
           ? this.renderMiniOption(
               html`

package/src/WebComponent/Scheduler/tour-scheduler.ts

@@ -9,7 +9,10 @@ import "./tour-type-option.ts";
 import "./date-picker.ts";
 import "./time-picker.ts";
 import "./me-select.ts";
-import { getAvailabilitiesGroupedByDayCached } from "../../getAvailabilities";
+import {
+  DateWithTimeZoneOffset,
+  getAvailabilitiesGroupedByDayCached,
+} from "../../getAvailabilities";
 import { TourAvailabilityResponseRankOrderedSupportedTourTypesEnum } from "@meetelise/rest-sdk";
 import { format } from "date-fns";
 import { DatePicker } from "./date-picker";
@@ -18,6 +21,7 @@ import { TimePicker } from "./time-picker";
 import { LabeledOption } from "../../fetchBuildingInfo";
 import { isMobile } from "../../utils";
 import axios from "axios";
+import { mapValues } from "lodash";
 
 @customElement("tour-scheduler")
 export class TourScheduler extends LitElement {
@@ -37,11 +41,13 @@ export class TourScheduler extends LitElement {
   @state()
   private phoneNumber = "";
   @state()
-  private availabilitiesGroupedByDay: { [day: string]: Date[] } = {};
+  private availabilitiesGroupedByDay: {
+    [day: string]: DateWithTimeZoneOffset[];
+  } = {};
   @state()
   private selectedDate?: Date;
   @state()
-  private selectedTime?: string;
+  private selectedTime?: DateWithTimeZoneOffset | null;
   @state()
   private mobilePageIndex = 0;
   @state()
@@ -256,12 +262,6 @@ export class TourScheduler extends LitElement {
 
   submit = async (): Promise<void> => {
     if (!this.selectedDate || !this.selectedTime) return;
-    const [hours, minutes] = this.timeStringToHoursAndMinutes(
-      this.selectedTime
-    );
-    const tourTime = new Date(this.selectedDate.getTime());
-    tourTime.setHours(hours, minutes);
-    const tourTimeString = tourTime.toISOString();
     const data = {
       email_address: this.email,
       phone_number: `+1${this.phoneNumber.match(/\d/g)?.join("")}`, // e.g. +12125555555
@@ -270,7 +270,7 @@ export class TourScheduler extends LitElement {
       first_name: this.nameInput.value.split(" ")[0],
       last_name: this.nameInput.value.split(" ").slice(1).join(" "),
       tour_type: tourTypeForSubmission[this.tourType],
-      tour_time: tourTimeString,
+      tour_time: `${this.selectedTime.datetime}${this.selectedTime.offset}`, // e.g., "2022-06-27T09:00:00-07:00"
     };
     const url = `https://app.meetelise.com/platformApi/state/create/scheduleMe`;
     const response = await axios.post(url, data, {
@@ -705,7 +705,10 @@ export class TourScheduler extends LitElement {
       <div id="dateAndTimeMenu">
         <div id="datePicker">
           <date-picker
-            .availabilities=${this.availabilitiesGroupedByDay}
+            .availabilities=${mapValues(
+              this.availabilitiesGroupedByDay,
+              (dates) => dates.map((date) => new Date(date.offset))
+            )}
             @change=${(e: Event) => {
               if (e.target instanceof DatePicker) {
                 this.selectedDate = e.target.selectedDate;
@@ -718,11 +721,21 @@ export class TourScheduler extends LitElement {
             .options=${this.selectedDate
               ? this.availabilitiesGroupedByDay[
                   format(this.selectedDate, "y-MM-dd")
-                ]?.map((date) => format(date, "h:mmaaa"))
+                ]?.map((date) => format(new Date(date.datetime), "h:mmaaa"))
               : []}
             @change=${(e: Event) => {
               if (e.target instanceof TimePicker) {
-                this.selectedTime = e.target.selectedTime;
+                if (!this.selectedDate) return;
+                const daysAvailabilities =
+                  this.availabilitiesGroupedByDay[
+                    format(new Date(this.selectedDate), "y-MM-dd")
+                  ];
+                const index = e.target.selectedTime
+                  ? daysAvailabilities
+                      .map((date) => format(new Date(date.datetime), "h:mmaaa"))
+                      .indexOf(e.target.selectedTime)
+                  : null;
+                this.selectedTime = index ? daysAvailabilities[index] : null; // this.selectedAvailabilityString ?
               }
             }}
           ></time-picker>
@@ -833,12 +846,12 @@ export class TourScheduler extends LitElement {
   }
 
   confirmationMessage(): TemplateResult {
-    if (!this.selectedDate) return html``;
+    if (!this.selectedDate || !this.selectedTime) return html``;
     // format example: "November 9th, 2022 at 11:00am"
     const readableDateAndTime = `${format(
-      this.selectedDate,
-      "MMMM Lo, y"
-    )} at ${this.selectedTime}`;
+      new Date(this.selectedDate),
+      "MMMM do, y"
+    )} at ${format(new Date(this.selectedTime.datetime), "h:mmaaa")}`;
     return html`
       <div id="confirmationMessage">
         <svg

package/src/WebComponent/actions/InputStyles.ts

@@ -4,10 +4,9 @@ export const InputStyles = css`
   .webchat-input {
     border: 1px solid #83818e;
     outline: none;
-    font-size: 14px;
     color: #202020;
     font-weight: 400;
-    font-size: 14px;
+    font-size: 16px;
     line-height: 22px;
     font-family: "Poppins";
     padding-left: 12px;
@@ -25,6 +24,6 @@ export const InputStyles = css`
   .webchat-input::placeholder {
     color: #202020;
     font-family: "Poppins";
-    font-size: 14px;
+    font-size: 16px;
   }
 `;

package/src/WebComponent/me-chat.ts

@@ -103,6 +103,11 @@ export class MEChat extends LitElement {
     this.chatId = getChatID(this.orgSlug, this.buildingSlug);
     this.avatarSrc = this.avatarSrc || this.building.avatarSrc;
     this.theme = getTheme(this.themeId ?? this.building.themeId);
+    this.analytics = new Analytics(
+      this.orgSlug,
+      this.buildingSlug,
+      this.chatId
+    );
   };
 
   private initializeLaunchJS = async () => {
@@ -153,7 +158,6 @@ export class MEChat extends LitElement {
       !this.analytics ||
       !this.analytics.chatId ||
       !this.building ||
-      !this.theme ||
       !this.popup ||
       !MEChat.session
     ) {

package/src/getAvailabilities.ts

@@ -2,14 +2,12 @@ import formatISO from "date-fns/formatISO";
 import startOfToday from "date-fns/startOfToday";
 import endOfDay from "date-fns/endOfDay";
 import addDays from "date-fns/addDays";
-import parseISO from "date-fns/parseISO";
 import format from "date-fns/format";
 import axios from "axios";
 
 import {
   TourAvailabilityResponse,
   TourAvailabilityResponseRankOrderedSupportedTourTypesEnum,
-  TourTypeAvailability,
 } from "@meetelise/rest-sdk";
 import groupBy from "lodash/groupBy";
 
@@ -37,13 +35,25 @@ export const getRawAvailabilities = async (
 export const getAvailabilitiesForTourType = async (
   buildingId: number,
   tourType: TourAvailabilityResponseRankOrderedSupportedTourTypesEnum
-): Promise<TourTypeAvailability | null> => {
+): Promise<{
+  /**
+   *
+   * @type {number}
+   * @memberof TourTypeAvailability
+   */
+  tourDurationInMinutes?: number;
+  /**
+   *
+   * @type {Array<string>}
+   * @memberof TourTypeAvailability
+   */
+  availableTourStartTimes?: Array<string>;
+} | null> => {
   // The endpoint INCORRECTLY states that these are returned as dates. They are, in fact, strings.
   const availabilities = await getRawAvailabilities(buildingId);
   const availableTimes = availabilities.availability?.[tourType]
-    ? availabilities.availability?.[tourType].availableTourStartTimes?.map(
-        (startTime) => parseISO(startTime as unknown as string)
-      )
+    ? (availabilities.availability?.[tourType]
+        .availableTourStartTimes as unknown as string[])
     : [];
   return availabilities.availability
     ? {
@@ -53,20 +63,37 @@ export const getAvailabilitiesForTourType = async (
     : null;
 };
 
+export interface DateWithTimeZoneOffset {
+  datetime: string;
+  offset: string;
+}
+
 export const getAvailabilitiesGroupedByDay = async (
   buildingId: number,
   tourType: TourAvailabilityResponseRankOrderedSupportedTourTypesEnum
-): Promise<{ [day: string]: Date[] }> => {
-  const availabilitiesForTourType = await getAvailabilitiesForTourType(
+): Promise<{ [day: string]: DateWithTimeZoneOffset[] }> => {
+  const availabilitiesForTourTypeRaw = await getAvailabilitiesForTourType(
     buildingId,
     tourType
   );
-  if (!availabilitiesForTourType) {
+  if (!availabilitiesForTourTypeRaw) {
     return {};
   }
+  // Specify offset for each datetime in case availabilities span a daylight savings boundary, when offset will change.
+  // Cast availableTourStartTimes to string[], since the Date[] typing of the API is incorrect
+  const availabilitiesForTourType: {
+    availableTourStartTimes: DateWithTimeZoneOffset[] | undefined;
+  } = {
+    availableTourStartTimes:
+      (availabilitiesForTourTypeRaw.availableTourStartTimes
+        ? (availabilitiesForTourTypeRaw.availableTourStartTimes as unknown as string[])
+        : []
+      )?.map((dateString) => dateStringToDateWithTimeZoneOffset(dateString)),
+  };
+
   return groupBy(
     availabilitiesForTourType.availableTourStartTimes ?? [],
-    (startTime) => format(startTime, "yyyy-MM-dd")
+    (startTime) => format(new Date(startTime.datetime), "yyyy-MM-dd")
   );
 };
 
@@ -74,8 +101,23 @@ export const getAvailabilitiesGroupedByDay = async (
 // TODO: alternative to this: cache the building id when getRawAvailabilities is called. Then I can call the normal methods.
 export const getAvailabilitiesGroupedByDayCached = async (
   tourType: TourAvailabilityResponseRankOrderedSupportedTourTypesEnum
-): Promise<{ [day: string]: Date[] }> =>
+): Promise<{ [day: string]: DateWithTimeZoneOffset[] }> =>
   getAvailabilitiesGroupedByDay(
     Object.keys(availabilitiesCache).map(Number)[0],
     tourType
   );
+
+/**
+ * Takes an ISO 8601 date string with time zone offset and returns
+ * an object of our custom type DateWithTimeZoneOffset.
+ *
+ * @example
+ * // returns { datetime: '2022-06-27T09:00:00', offset: '-07:00' }
+ * dateStringToDateWithTimeZoneOffset('2022-06-27T09:00:00-07:00')
+ *  */
+const dateStringToDateWithTimeZoneOffset = (
+  dateString: string
+): DateWithTimeZoneOffset => ({
+  datetime: dateString.slice(0, 19),
+  offset: dateString.slice(19),
+});