@meetelise/chat 1.13.7 → 1.13.10

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

@@ -11,7 +11,7 @@ import "./time-picker.ts";
 import "./me-select.ts";
 import {
   DateWithTimeZoneOffset,
-  getAvailabilitiesGroupedByDayCached,
+  getAvailabilitiesGroupedByDay,
 } from "../../getAvailabilities";
 import { TourAvailabilityResponseRankOrderedSupportedTourTypesEnum } from "@meetelise/rest-sdk";
 import { format } from "date-fns";
@@ -63,7 +63,7 @@ export class TourScheduler extends LitElement {
   unitTypeSelect!: MESelect;
 
   firstUpdated = async (): Promise<void> => {
-    this.availabilitiesGroupedByDay = await getAvailabilitiesGroupedByDayCached(
+    this.availabilitiesGroupedByDay = await getAvailabilitiesGroupedByDay(
       tourTypeMap[this.tourType]
     );
   };
@@ -74,8 +74,9 @@ export class TourScheduler extends LitElement {
       | Map<PropertyKey, unknown>
   ): Promise<void> => {
     if (_changedProperties.has("tourType")) {
-      this.availabilitiesGroupedByDay =
-        await getAvailabilitiesGroupedByDayCached(tourTypeMap[this.tourType]);
+      this.availabilitiesGroupedByDay = await getAvailabilitiesGroupedByDay(
+        tourTypeMap[this.tourType]
+      );
     }
   };
 
@@ -185,6 +186,9 @@ export class TourScheduler extends LitElement {
   };
 
   handlePhoneKeyup = (e: KeyboardEvent): void => {
+    if (!e.key) {
+      return;
+    }
     // After formatting, place the cursor where it was before, defined as "before the digit that followed it before formatting, if any, otherwise at the end".
     // (We never want the cursor to be before a punctuation mark because the next digit typed will appear after the punctuation mark, not before.)
     // If we don't do this, the cursor automatically goes to the end when we set `this.phoneNumber`.
@@ -230,12 +234,15 @@ export class TourScheduler extends LitElement {
   validators = {
     tourType: (): boolean => !isNaN(this.tourType),
     dateAndTime: (): boolean => !!this.selectedDate && !!this.selectedTime,
-    leadInfo: (): boolean =>
-      !!this.nameInput?.value &&
-      this.emailInput?.value.includes("@") &&
-      // TODO: deleting phone number doesn't cause validation to fail, at least on mobile
-      !!this.phoneNumber &&
-      this.phoneNumber.length === 14,
+    leadInfo: (): boolean => {
+      return (
+        !!this.nameInput?.value &&
+        this.emailInput?.value.includes("@") &&
+        // TODO: deleting phone number doesn't cause validation to fail, at least on mobile
+        !!this.phoneNumber &&
+        this.phoneNumber.length === 14
+      );
+    },
   };
 
   formIsValidForSubmission = (): boolean => {
@@ -266,7 +273,7 @@ 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,
-      // 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
+      // TODO: this is very bad dumb name-splitting logic! Instead, split the name input into first and last name.
       first_name: this.nameInput.value.split(" ")[0],
       last_name: this.nameInput.value.split(" ").slice(1).join(" "),
       tour_type: tourTypeForSubmission[this.tourType],
@@ -600,7 +607,6 @@ export class TourScheduler extends LitElement {
       <div id="tourTypeMenu">
         ${this.tourTypeOptions.map((o) => o.value).includes("WITH_AGENT")
           ? html` <tour-type-option
-              tourtype="guided"
               heading="Guided tour"
               subtitle="with an agent"
               @click="${() => {
@@ -633,7 +639,6 @@ export class TourScheduler extends LitElement {
           : ""}
         ${this.tourTypeOptions.map((o) => o.value).includes("SELF_GUIDED")
           ? html`<tour-type-option
-              tourtype="self"
               heading="Take a tour"
               subtitle="on your own"
               @click="${() => {
@@ -664,9 +669,8 @@ export class TourScheduler extends LitElement {
               </svg>
             </tour-type-option>`
           : ""}
-        ${this.tourTypeOptions.map((o) => o.value).includes("SELF_GUIDED")
+        ${this.tourTypeOptions.map((o) => o.value).includes("VIRTUAL_SHOWING")
           ? html`<tour-type-option
-              tourtype="guided"
               heading="Virtual tour"
               subtitle="over video"
               @click="${() => {
@@ -803,14 +807,19 @@ export class TourScheduler extends LitElement {
   userInfoAndLayoutMenu(): TemplateResult {
     return html`<h2 id="yourInformation">Your information</h2>
       <div id="yourInformationMenu">
-        <input type="text" placeholder="Name" id="name" />
+        <input
+          type="text"
+          placeholder="Name"
+          id="name"
+          @input=${() => this.requestUpdate()}
+        />
         <input
           type="email"
           inputmode="email"
           placeholder="Email"
           id="email"
           .value=${this.email}
-          @keyup=${this.onChangeEmail}
+          @input=${this.onChangeEmail}
         />
         <input
           type="tel"
@@ -821,28 +830,21 @@ export class TourScheduler extends LitElement {
           .value=${this.phoneNumber}
           @keydown=${this.handlePhoneKeydown}
           @keyup=${this.handlePhoneKeyup}
-          @change=${() => this.requestUpdate()}
+          @input=${(e: Event) => {
+            if (!e.target) {
+              return;
+            }
+            this.phoneNumber = formatToPhone(
+              (e.target as HTMLInputElement).value
+            );
+          }}
         />
       </div>
-
-      ${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>`
-        : ""} `;
+      <!--
+        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
+      --> `;
   }
 
   confirmationMessage(): TemplateResult {

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

@@ -1,20 +1,16 @@
 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?: (tourType: TourType) => void;
+  onClick?: () => void;
 
   static styles = [
     css`

package/src/createConversation.ts

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

package/src/getAvailabilities.ts

@@ -12,29 +12,46 @@ import {
 import groupBy from "lodash/groupBy";
 
 const availabilitiesCache: {
-  [buildingId: number]: TourAvailabilityResponse;
-} = {};
+  buildingId?: number | null;
+  availabilities: { [buildingId: number]: TourAvailabilityResponse };
+} = { buildingId: null, availabilities: {} };
 
+/**
+ * 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 (availabilitiesCache[buildingId]) {
-    return availabilitiesCache[buildingId];
+  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];
   }
   const startTime = startOfToday();
   const endTime = formatISO(endOfDay(addDays(startTime, 30)));
-  const url = `https://app.meetelise.com/api/pub/v1/buildings/${buildingId}/tour/availabilities?startTime=${formatISO(
+  const url = `https://app.meetelise.com/api/pub/v1/buildings/${buildingIdToUse}/tour/availabilities?startTime=${formatISO(
     startTime
   )}&endTime=${endTime}`;
   const result = await axios.get<TourAvailabilityResponse>(url);
-  availabilitiesCache[buildingId] = result.data;
+  availabilitiesCache.availabilities[buildingIdToUse] = result.data;
   // The endpoint INCORRECTLY states that these are returned as dates. They are, in fact, strings.
   return result.data;
 };
 
 export const getAvailabilitiesForTourType = async (
-  buildingId: number,
-  tourType: TourAvailabilityResponseRankOrderedSupportedTourTypesEnum
+  tourType: TourAvailabilityResponseRankOrderedSupportedTourTypesEnum,
+  buildingId?: number
 ): Promise<{
   /**
    *
@@ -69,12 +86,12 @@ export interface DateWithTimeZoneOffset {
 }
 
 export const getAvailabilitiesGroupedByDay = async (
-  buildingId: number,
-  tourType: TourAvailabilityResponseRankOrderedSupportedTourTypesEnum
+  tourType: TourAvailabilityResponseRankOrderedSupportedTourTypesEnum,
+  buildingId?: number
 ): Promise<{ [day: string]: DateWithTimeZoneOffset[] }> => {
   const availabilitiesForTourTypeRaw = await getAvailabilitiesForTourType(
-    buildingId,
-    tourType
+    tourType,
+    buildingId
   );
   if (!availabilitiesForTourTypeRaw) {
     return {};
@@ -97,16 +114,6 @@ 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.