@meetelise/chat 1.42.0 → 1.42.2

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

@@ -15,6 +15,7 @@ import {
   Month,
   monthNames,
 } from "../utils";
+import isSameDay from "date-fns/isSameDay";
 
 @customElement("date-picker")
 export class DatePicker extends LitElement {
@@ -58,11 +59,19 @@ export class DatePicker extends LitElement {
     return this._selectedDate;
   }
 
-  protected firstUpdated(): void {
-    if (!this.defaultDate) {
-      return;
+  protected updated(
+    changedProperties: Map<string | number | symbol, unknown>
+  ): void {
+    if (changedProperties.has("defaultDate")) {
+      const previousDate = changedProperties.get("defaultDate") as Date | null;
+      if (!this.defaultDate) {
+        this.selectedDate = undefined;
+        return;
+      }
+      if (!previousDate || !isSameDay(this.defaultDate, previousDate)) {
+        this.selectedDate = this.defaultDate;
+      }
     }
-    this.selectedDate = this.defaultDate;
   }
 
   now = new Date();

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

@@ -42,12 +42,29 @@ export class TimePicker extends LitElement {
     return this.selected;
   }
 
-  willUpdate(changedProperties: Map<string, unknown>): void {
-    if (
-      changedProperties.has("defaultSelectedTime") &&
-      this.selected === null
-    ) {
-      this.selected = this.defaultSelectedTime;
+  protected updated(
+    changedProperties: Map<string | number | symbol, unknown>
+  ): void {
+    if (changedProperties.has("defaultSelectedTime")) {
+      const previouslySelectedTime = changedProperties.get(
+        "defaultSelectedTime"
+      ) as TimePickerOption | null;
+      if (!this.selected && this.defaultSelectedTime) {
+        this.selected = this.defaultSelectedTime;
+        return;
+      }
+      if (!this.defaultSelectedTime) {
+        this.selected = undefined;
+        return;
+      }
+      if (
+        !previouslySelectedTime ||
+        this.defaultSelectedTime.displayTimeZoned !==
+          previouslySelectedTime.displayTimeZoned
+      ) {
+        this.selected = this.defaultSelectedTime;
+        return;
+      }
     }
   }
 

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

@@ -53,6 +53,7 @@ import { shouldOpenTourLink } from "../../fetchBuildingWebchatView";
 import formatInTimeZone from "date-fns-tz/formatInTimeZone";
 import { getTimezoneAbbreviation } from "../../getTimezoneString";
 import startOfDay from "date-fns/startOfDay";
+import isSameDay from "date-fns/isSameDay";
 
 @customElement("tour-scheduler")
 export class TourScheduler extends LitElement {
@@ -243,40 +244,7 @@ export class TourScheduler extends LitElement {
           }
         }, 0) === 1;
 
-      const availabilities = await getRawAvailabilities(this.buildingId);
-      const highestRankedTourType =
-        this._getHighestRankedTourType(availabilities);
-      const availableTimesForHighestRankedTourType = highestRankedTourType
-        ? availabilities.availability?.[highestRankedTourType]
-            ?.availableTourStartTimes
-        : [];
-      const firstAvailableTimeSlotForHighestRankedTourType =
-        availableTimesForHighestRankedTourType?.[0];
-      if (
-        highestRankedTourType &&
-        firstAvailableTimeSlotForHighestRankedTourType &&
-        highestRankedTourType !==
-          TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.Unknown &&
-        highestRankedTourType !==
-          TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.MediaTour
-      ) {
-        this.selectedDate =
-          typeof firstAvailableTimeSlotForHighestRankedTourType === "string"
-            ? startOfDay(
-                parseISO(firstAvailableTimeSlotForHighestRankedTourType)
-              )
-            : startOfDay(firstAvailableTimeSlotForHighestRankedTourType);
-        this.tourType = rankedOrderTourTypeToTourType[highestRankedTourType];
-        this.selectedTime =
-          typeof firstAvailableTimeSlotForHighestRankedTourType === "string"
-            ? dateStringToDateWithTimeZoneOffset(
-                firstAvailableTimeSlotForHighestRankedTourType
-              )
-            : dateToDateWithTimeZoneOffset(
-                firstAvailableTimeSlotForHighestRankedTourType
-              );
-      }
-
+      this._setDefaultSelectedDateAndTimes();
       if (hasOneShowTourType) {
         this.tourType = Object.keys(this.shouldShowTourType).find(
           (key) => this.shouldShowTourType[key as TourType]
@@ -314,6 +282,51 @@ export class TourScheduler extends LitElement {
     }
   };
 
+  _setDefaultSelectedDateAndTimes = async (
+    tourType?: TourAvailabilityResponseRankOrderedSupportedTourTypesEnum,
+    date?: Date
+  ): Promise<void> => {
+    const availabilities = await getRawAvailabilities(this.buildingId);
+    const highestRankedTourType =
+      tourType ?? this._getHighestRankedTourType(availabilities);
+    const availableTimesForHighestRankedTourType = highestRankedTourType
+      ? availabilities.availability?.[
+          highestRankedTourType
+        ]?.availableTourStartTimes?.filter((time) => {
+          if (!date) {
+            return true;
+          }
+          const timeDate = typeof time === "string" ? parseISO(time) : time;
+          return isSameDay(timeDate, date);
+        })
+      : [];
+    const firstAvailableTimeSlotForHighestRankedTourType =
+      availableTimesForHighestRankedTourType?.[0];
+
+    if (
+      highestRankedTourType &&
+      firstAvailableTimeSlotForHighestRankedTourType &&
+      highestRankedTourType !==
+        TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.Unknown &&
+      highestRankedTourType !==
+        TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.MediaTour
+    ) {
+      this.selectedDate =
+        typeof firstAvailableTimeSlotForHighestRankedTourType === "string"
+          ? startOfDay(parseISO(firstAvailableTimeSlotForHighestRankedTourType))
+          : startOfDay(firstAvailableTimeSlotForHighestRankedTourType);
+      this.tourType = rankedOrderTourTypeToTourType[highestRankedTourType];
+      this.selectedTime =
+        typeof firstAvailableTimeSlotForHighestRankedTourType === "string"
+          ? dateStringToDateWithTimeZoneOffset(
+              firstAvailableTimeSlotForHighestRankedTourType
+            )
+          : dateToDateWithTimeZoneOffset(
+              firstAvailableTimeSlotForHighestRankedTourType
+            );
+    }
+  };
+
   _getHighestRankedTourType = (
     availabilities: TourAvailabilityResponse
   ): TourAvailabilityResponseRankOrderedSupportedTourTypesEnum | null => {
@@ -736,6 +749,9 @@ export class TourScheduler extends LitElement {
                   await getAvailabilitiesGroupedByDay(
                     tourTypeMap[TourType.Self]
                   );
+                this._setDefaultSelectedDateAndTimes(
+                  tourTypeMap[TourType.Self]
+                );
               }}"
               @keydown="${(e: KeyboardEvent) => {
                 if ([" ", "Enter"].includes(e.key)) {
@@ -772,6 +788,9 @@ export class TourScheduler extends LitElement {
                   await getAvailabilitiesGroupedByDay(
                     tourTypeMap[TourType.Guided]
                   );
+                this._setDefaultSelectedDateAndTimes(
+                  tourTypeMap[TourType.Guided]
+                );
               }}"
               @keydown="${(e: KeyboardEvent) => {
                 if ([" ", "Enter"].includes(e.key)) {
@@ -809,6 +828,9 @@ export class TourScheduler extends LitElement {
                   await getAvailabilitiesGroupedByDay(
                     tourTypeMap[TourType.Virtual]
                   );
+                this._setDefaultSelectedDateAndTimes(
+                  tourTypeMap[TourType.Virtual]
+                );
               }}"
               @keydown="${(e: KeyboardEvent) => {
                 if ([" ", "Enter"].includes(e.key)) {
@@ -853,7 +875,7 @@ export class TourScheduler extends LitElement {
               (dates) => dates.map((date) => new Date(date.offset))
             )}
             .defaultDate=${this.selectedDate}
-            @change=${(e: Event) => {
+            @change=${async (e: Event) => {
               // if the user clicked a tour type that is suppose to redirect, we redirect that use when they select a date
               //  This can happen if the user clicks, is redirect, and then comes back to the webchat
               if (
@@ -881,7 +903,22 @@ export class TourScheduler extends LitElement {
               }
 
               if (e.target instanceof DatePicker) {
+                const previousDate = this.selectedDate;
                 this.selectedDate = e.target.selectedDate;
+                if (!this.tourType) {
+                  return;
+                }
+                if (
+                  previousDate &&
+                  e.target.selectedDate &&
+                  isSameDay(previousDate, e.target.selectedDate)
+                ) {
+                  return;
+                }
+                this._setDefaultSelectedDateAndTimes(
+                  tourTypeMap[this.tourType],
+                  e.target.selectedDate
+                );
               }
             }}
           ></date-picker>

package/src/fetchPhoneNumberFromSource.ts

@@ -14,7 +14,12 @@ export default async function fetchPhoneNumberFromSource(
   const host = "https://app.meetelise.com";
   try {
     const phoneNumberResponse = await axios.get(
-      `${host}/platformApi/webchat/${buildingSlug}/phone-number-by-source?source=${source}`
+      `${host}/platformApi/webchat/${buildingSlug}/phone-number-by-source`,
+      {
+        params: {
+          source,
+        },
+      }
     );
     if (phoneNumberResponse.data) {
       return {