@meetelise/chat 1.14.0 → 1.15.2

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

@@ -11,8 +11,7 @@ import "./time-picker.ts";
 import "./me-select.ts";
 import {
   DateWithTimeZoneOffset,
-  getAvailabilitiesGroupedByDay,
-  getExistenceOfAvailabilitiesByTourType,
+  getAvailabilitiesGroupedByDayCached,
 } from "../../getAvailabilities";
 import { TourAvailabilityResponseRankOrderedSupportedTourTypesEnum } from "@meetelise/rest-sdk";
 import { format } from "date-fns";
@@ -38,12 +37,6 @@ export class TourScheduler extends LitElement {
   @state()
   private tourType = TourType.Guided;
   @state()
-  private shouldShowTourType = {
-    [TourType.Guided]: true,
-    [TourType.Self]: true,
-    [TourType.Virtual]: true,
-  };
-  @state()
   private email = "";
   @state()
   private phoneNumber = "";
@@ -60,10 +53,8 @@ export class TourScheduler extends LitElement {
   @state()
   private tourIsBooked = false;
 
-  @query("input#firstName")
-  firstNameInput!: HTMLInputElement;
-  @query("input#lastName")
-  lastNameInput!: HTMLInputElement;
+  @query("input#name")
+  nameInput!: HTMLInputElement;
   @query("input#email")
   emailInput!: HTMLInputElement;
   @query("input#phone")
@@ -72,25 +63,9 @@ export class TourScheduler extends LitElement {
   unitTypeSelect!: MESelect;
 
   firstUpdated = async (): Promise<void> => {
-    this.availabilitiesGroupedByDay = await getAvailabilitiesGroupedByDay(
+    this.availabilitiesGroupedByDay = await getAvailabilitiesGroupedByDayCached(
       tourTypeMap[this.tourType]
     );
-
-    // Show a tour type only if it is supported by the building and has
-    // time slots available.
-    const availabilitiesExistForTourType =
-      await getExistenceOfAvailabilitiesByTourType();
-    this.shouldShowTourType = {
-      [TourType.Guided]:
-        this.tourTypeOptions.map((o) => o.value).includes("WITH_AGENT") &&
-        availabilitiesExistForTourType[TourType.Guided],
-      [TourType.Self]:
-        this.tourTypeOptions.map((o) => o.value).includes("SELF_GUIDED") &&
-        availabilitiesExistForTourType[TourType.Self],
-      [TourType.Virtual]:
-        this.tourTypeOptions.map((o) => o.value).includes("VIRTUAL_SHOWING") &&
-        availabilitiesExistForTourType[TourType.Virtual],
-    };
   };
 
   protected willUpdate = async (
@@ -99,9 +74,8 @@ export class TourScheduler extends LitElement {
       | Map<PropertyKey, unknown>
   ): Promise<void> => {
     if (_changedProperties.has("tourType")) {
-      this.availabilitiesGroupedByDay = await getAvailabilitiesGroupedByDay(
-        tourTypeMap[this.tourType]
-      );
+      this.availabilitiesGroupedByDay =
+        await getAvailabilitiesGroupedByDayCached(tourTypeMap[this.tourType]);
     }
   };
 
@@ -261,7 +235,7 @@ export class TourScheduler extends LitElement {
     dateAndTime: (): boolean => !!this.selectedDate && !!this.selectedTime,
     leadInfo: (): boolean => {
       return (
-        (!!this.firstNameInput?.value || !!this.lastNameInput?.value) &&
+        !!this.nameInput?.value &&
         this.emailInput?.value.includes("@") &&
         // TODO: deleting phone number doesn't cause validation to fail, at least on mobile
         !!this.phoneNumber &&
@@ -298,8 +272,9 @@ export class TourScheduler extends LitElement {
       email_address: this.email,
       phone_number: `+1${this.phoneNumber.match(/\d/g)?.join("")}`, // e.g. +12125555555
       building_id: this.buildingId,
-      first_name: this.firstNameInput.value,
-      last_name: this.lastNameInput.value,
+      // TODO: this is very bad dumb name-splitting logic! I'm only doing it because the design had one name field and the backend expects two
+      first_name: this.nameInput.value.split(" ")[0],
+      last_name: this.nameInput.value.split(" ").slice(1).join(" "),
       tour_type: tourTypeForSubmission[this.tourType],
       tour_time: `${this.selectedTime.datetime}${this.selectedTime.offset}`, // e.g., "2022-06-27T09:00:00-07:00"
     };
@@ -499,15 +474,6 @@ export class TourScheduler extends LitElement {
       box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
     }
 
-    button#schedule:not(:disabled):hover {
-      opacity: 0.7;
-    }
-
-    button#schedule:not(:disabled):active {
-      box-shadow: none;
-      opacity: 1;
-    }
-
     button#schedule:disabled {
       background: #e7e7e7;
       box-shadow: none;
@@ -638,8 +604,9 @@ export class TourScheduler extends LitElement {
   tourTypeMenu(): TemplateResult {
     return html`<h2 id="tourType">Tour Type</h2>
       <div id="tourTypeMenu">
-        ${this.shouldShowTourType[TourType.Guided]
+        ${this.tourTypeOptions.map((o) => o.value).includes("WITH_AGENT")
           ? html` <tour-type-option
+              tourtype="guided"
               heading="Guided tour"
               subtitle="with an agent"
               @click="${() => {
@@ -670,8 +637,9 @@ export class TourScheduler extends LitElement {
               </svg>
             </tour-type-option>`
           : ""}
-        ${this.shouldShowTourType[TourType.Self]
+        ${this.tourTypeOptions.map((o) => o.value).includes("SELF_GUIDED")
           ? html`<tour-type-option
+              tourtype="self"
               heading="Take a tour"
               subtitle="on your own"
               @click="${() => {
@@ -702,8 +670,9 @@ export class TourScheduler extends LitElement {
               </svg>
             </tour-type-option>`
           : ""}
-        ${this.shouldShowTourType[TourType.Virtual]
+        ${this.tourTypeOptions.map((o) => o.value).includes("SELF_GUIDED")
           ? html`<tour-type-option
+              tourtype="guided"
               heading="Virtual tour"
               subtitle="over video"
               @click="${() => {
@@ -772,8 +741,7 @@ export class TourScheduler extends LitElement {
                       .map((date) => format(new Date(date.datetime), "h:mmaaa"))
                       .indexOf(e.target.selectedTime)
                   : null;
-                this.selectedTime =
-                  index !== null ? daysAvailabilities[index] : null;
+                this.selectedTime = index ? daysAvailabilities[index] : null; // this.selectedAvailabilityString ?
               }
             }}
           ></time-picker>
@@ -843,14 +811,8 @@ export class TourScheduler extends LitElement {
       <div id="yourInformationMenu">
         <input
           type="text"
-          placeholder="First name"
-          id="firstName"
-          @input=${() => this.requestUpdate()}
-        />
-        <input
-          type="text"
-          placeholder="Last name"
-          id="lastName"
+          placeholder="Name"
+          id="name"
           @input=${() => this.requestUpdate()}
         />
         <input
@@ -880,11 +842,25 @@ export class TourScheduler extends LitElement {
           }}
         />
       </div>
-      <!--
-        Layout dropdown would go here, but has been removed pending backend support.
-        Here is the code to add it back:
-        https://github.com/MeetElise/chat-ui/blob/e17aca8b39a0eed9430f22c182f2ebcdfb796417/src/WebComponent/Scheduler/tour-scheduler.ts#L846-L863
-      --> `;
+
+      ${this.layoutOptions.length > 0
+        ? html`<div id="unitChoiceMenu">
+            <h2 id="unitChoice">What would you like to view?</h2>
+            <div id="unitOptions">
+              <me-select
+                id="unitType"
+                placeholder="Select type"
+                .options="${this.layoutOptions.map((o) => o.label)}"
+                defaultOption="Studio"
+                @change=${() => {
+                  // to revalidate the form
+                  this.requestUpdate();
+                }}
+                >Studio
+              </me-select>
+            </div>
+          </div>`
+        : ""} `;
   }
 
   confirmationMessage(): TemplateResult {
@@ -911,13 +887,7 @@ export class TourScheduler extends LitElement {
         <p>
           Thank you!
           <br />
-          Your
-          ${{
-            [TourType.Guided]: "guided",
-            [TourType.Self]: "self-guided",
-            [TourType.Virtual]: "virtual",
-          }[this.tourType]}
-          tour is scheduled for ${readableDateAndTime}.
+          Your guided tour is scheduled for ${readableDateAndTime}.
         </p>
         <p>
           Look for an email confirmation along with instructions and directions.
@@ -985,6 +955,8 @@ export enum TourType {
   Virtual,
 }
 
+// TODO: we have three UI options and five TourAvailabilityResponseRankOrderedSupportedTourTypesEnum values
+// how should they map?
 const tourTypeMap = {
   [TourType.Guided]:
     TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.WithAgent,

package/src/WebComponent/Scheduler/tour-type-option.ts

@@ -1,16 +1,20 @@
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { TourType } from "./tour-scheduler";
 
 @customElement("tour-type-option")
 export class TourTypeOption extends LitElement {
+  @property({ type: String })
+  tourtype = "";
   @property({ type: String })
   heading = "";
   @property({ type: String })
   subtitle = "";
   @property({ type: Boolean })
   selected = false;
+
   @property({ attribute: false })
-  onClick?: () => void;
+  onClick?: (tourType: TourType) => void;
 
   static styles = [
     css`

package/src/WebComponent/me-chat.ts

@@ -136,6 +136,8 @@ export class MEChat extends LitElement {
     await this.configureTalkJSPopup(building, theme, session, avatarSrc);
     this.configureLauncherElement();
 
+    this.analytics?.ping("load");
+
     this.yardiDNIScriptInterval = setInterval(
       () => this.pollForYardiCampaignSource(),
       1000
@@ -263,7 +265,7 @@ export class MEChat extends LitElement {
   };
 
   render(): TemplateResult {
-    if (this.building?.orgId === 182 || this.building?.id === 4930) {
+    if (this.building?.id === 4930) {
       return html``;
     }
     installLauncher();
@@ -321,6 +323,7 @@ declare global {
   interface HTMLElementTagNameMap {
     "me-chat": MEChat;
   }
+
   interface Window {
     RCTPCampaign?: { CampaignDetails: { Source: string } };
   }

package/src/createConversation.ts

@@ -46,7 +46,7 @@ export default function createConversation(
       building.avatarType === "image" && building.avatarSrc
         ? avatarSrc
         : defaultAvatarUrl,
-    // uncomment the following line to test changes to the default avatar if your test building has its own avatar
+    // uncomment this to test changes to the default avatar if your test building has its own avatar
     // avatarUrl: defaultAvatarUrl,
   };
   return conversation;

package/src/getAvailabilities.ts

@@ -10,49 +10,31 @@ import {
   TourAvailabilityResponseRankOrderedSupportedTourTypesEnum,
 } from "@meetelise/rest-sdk";
 import groupBy from "lodash/groupBy";
-import { TourType } from "./WebComponent/Scheduler/tour-scheduler";
 
 const availabilitiesCache: {
-  buildingId?: number | null;
-  availabilities: { [buildingId: number]: TourAvailabilityResponse };
-} = { buildingId: null, availabilities: {} };
+  [buildingId: number]: TourAvailabilityResponse;
+} = {};
 
-/**
- * Returns the raw availabilities.
- *
- * If no `buildingId` is provided, it will use a cached buildingId from the previous call.
- * If there is none cached, it will throw an error.
- */
 export const getRawAvailabilities = async (
-  buildingId?: number
+  buildingId: number
 ): Promise<TourAvailabilityResponse> => {
-  if (buildingId) {
-    availabilitiesCache.buildingId = buildingId;
-  }
-  const buildingIdToUse = availabilitiesCache.buildingId;
-  if (!buildingIdToUse) {
-    throw new Error(
-      "No buildingId was provided to getRawAvailabilities and there is no buildingId cached."
-    );
-  }
-  const availabilities = availabilitiesCache.availabilities;
-  if (availabilities[buildingIdToUse]) {
-    return availabilities[buildingIdToUse];
+  if (availabilitiesCache[buildingId]) {
+    return availabilitiesCache[buildingId];
   }
   const startTime = startOfToday();
   const endTime = formatISO(endOfDay(addDays(startTime, 30)));
-  const url = `https://app.meetelise.com/api/pub/v1/buildings/${buildingIdToUse}/tour/availabilities?startTime=${formatISO(
+  const url = `https://app.meetelise.com/api/pub/v1/buildings/${buildingId}/tour/availabilities?startTime=${formatISO(
     startTime
   )}&endTime=${endTime}`;
   const result = await axios.get<TourAvailabilityResponse>(url);
-  availabilitiesCache.availabilities[buildingIdToUse] = result.data;
+  availabilitiesCache[buildingId] = result.data;
   // The endpoint INCORRECTLY states that these are returned as dates. They are, in fact, strings.
   return result.data;
 };
 
 export const getAvailabilitiesForTourType = async (
-  tourType: TourAvailabilityResponseRankOrderedSupportedTourTypesEnum,
-  buildingId?: number
+  buildingId: number,
+  tourType: TourAvailabilityResponseRankOrderedSupportedTourTypesEnum
 ): Promise<{
   /**
    *
@@ -86,46 +68,13 @@ export interface DateWithTimeZoneOffset {
   offset: string;
 }
 
-/**
- * Returns an object that reveals whether each tour type supported by
- * `tour-scheduler` has availabilities (time slots available for scheduling) in
- * the time window of interest.
- *
- * Note that the existence of current availabilities is distinct from the
- * question of whether the community supports the tour type at all. The first
- * implies the second but not vice versa.
- */
-export const getExistenceOfAvailabilitiesByTourType = async (): Promise<{
-  [TourType.Guided]: boolean;
-  [TourType.Self]: boolean;
-  [TourType.Virtual]: boolean;
-}> => {
-  return {
-    [TourType.Guided]: !!(
-      await getAvailabilitiesForTourType(
-        TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.WithAgent
-      )
-    )?.availableTourStartTimes?.length,
-    [TourType.Self]: !!(
-      await getAvailabilitiesForTourType(
-        TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.SelfGuided
-      )
-    )?.availableTourStartTimes?.length,
-    [TourType.Virtual]: !!(
-      await getAvailabilitiesForTourType(
-        TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.VirtualShowing
-      )
-    )?.availableTourStartTimes?.length,
-  };
-};
-
 export const getAvailabilitiesGroupedByDay = async (
-  tourType: TourAvailabilityResponseRankOrderedSupportedTourTypesEnum,
-  buildingId?: number
+  buildingId: number,
+  tourType: TourAvailabilityResponseRankOrderedSupportedTourTypesEnum
 ): Promise<{ [day: string]: DateWithTimeZoneOffset[] }> => {
   const availabilitiesForTourTypeRaw = await getAvailabilitiesForTourType(
-    tourType,
-    buildingId
+    buildingId,
+    tourType
   );
   if (!availabilitiesForTourTypeRaw) {
     return {};
@@ -148,6 +97,16 @@ export const getAvailabilitiesGroupedByDay = async (
   );
 };
 
+// TODO: if cache is empty, observe it and wait for it to be filled in.
+// 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]: 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.