@meetelise/chat 1.40.1 → 1.40.2

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

@@ -32,12 +32,15 @@ export class DatePicker extends LitElement {
   @property({ attribute: "year", type: Number })
   defaultYear?: number;
 
+  @property({ attribute: true })
+  defaultDate?: Date;
+
   @property({ attribute: false })
   availabilities?: {
     [day: string]: Date[];
   };
 
-  private _selectedDate?: Date = undefined;
+  private _selectedDate?: Date = this.defaultDate;
   set selectedDate(date: Date | undefined) {
     const old = this._selectedDate;
     this._selectedDate = date;
@@ -55,6 +58,13 @@ export class DatePicker extends LitElement {
     return this._selectedDate;
   }
 
+  protected firstUpdated(): void {
+    if (!this.defaultDate) {
+      return;
+    }
+    this.selectedDate = this.defaultDate;
+  }
+
   now = new Date();
 
   private _monthShown =

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

@@ -31,14 +31,26 @@ export class TimePicker extends LitElement {
   @property({ attribute: true })
   timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
 
+  @property({ attribute: true })
+  defaultSelectedTime?: TimePickerOption | null = null;
+
   @state()
-  private selected?: TimePickerOption;
+  private selected?: TimePickerOption | null = this.defaultSelectedTime;
 
   @property({ attribute: false })
-  get selectedTime(): undefined | TimePickerOption {
+  get selectedTime(): undefined | TimePickerOption | null {
     return this.selected;
   }
 
+  willUpdate(changedProperties: Map<string, unknown>): void {
+    if (
+      changedProperties.has("defaultSelectedTime") &&
+      this.selected === null
+    ) {
+      this.selected = this.defaultSelectedTime;
+    }
+  }
+
   static styles = css`
     * {
       box-sizing: border-box;

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

@@ -10,9 +10,12 @@ import "./date-picker.ts";
 import "./time-picker.ts";
 import "../me-select.ts";
 import {
+  dateStringToDateWithTimeZoneOffset,
+  dateToDateWithTimeZoneOffset,
   DateWithTimeZoneOffset,
   getAvailabilitiesGroupedByDay,
   getExistenceOfAvailabilitiesByTourType,
+  getRawAvailabilities,
   getTimezoneForBuilding,
   resetAvailabilitiesCache,
 } from "../../getAvailabilities";
@@ -46,6 +49,7 @@ import { TourWithAgentIcon } from "../icons/TourWithAgentIcon";
 import { shouldOpenTourLink } from "../../fetchBuildingWebchatView";
 import formatInTimeZone from "date-fns-tz/formatInTimeZone";
 import { getTimezoneAbbreviation } from "../../getTimezoneString";
+import startOfDay from "date-fns/startOfDay";
 
 @customElement("tour-scheduler")
 export class TourScheduler extends LitElement {
@@ -234,6 +238,40 @@ export class TourScheduler extends LitElement {
           }
         }, 0) === 1;
 
+      const availabilities = await getRawAvailabilities(this.buildingId);
+      const highestRankedTourType =
+        availabilities.rankOrderedSupportedTourTypes?.[0];
+      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
+              );
+      }
+
       if (hasOneShowTourType) {
         this.tourType = Object.keys(this.shouldShowTourType).find(
           (key) => this.shouldShowTourType[key as TourType]
@@ -756,6 +794,7 @@ export class TourScheduler extends LitElement {
               this.availabilitiesGroupedByDay,
               (dates) => dates.map((date) => new Date(date.offset))
             )}
+            .defaultDate=${this.selectedDate}
             @change=${(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
@@ -792,6 +831,24 @@ export class TourScheduler extends LitElement {
             <time-picker
               ?selecteddateexists=${!!this.selectedDate}
               .timezone=${this.calendarTimeZone}
+              .defaultSelectedTime=${this.selectedTime
+                ? {
+                    dateWithTimeZoneOffset: this.selectedTime,
+                    displayTime: format(
+                      parseISO(
+                        `${this.selectedTime.datetime}${this.selectedTime.offset}`
+                      ),
+                      "h:mmaaa"
+                    ),
+                    displayTimeZoned: formatInTimeZone(
+                      parseISO(
+                        `${this.selectedTime.datetime}${this.selectedTime.offset}`
+                      ),
+                      this.calendarTimeZone,
+                      "h:mmaaa"
+                    ),
+                  }
+                : null}
               .options=${this.selectedDate
                 ? this.availabilitiesGroupedByDay[
                     format(this.selectedDate, "y-MM-dd")
@@ -1423,6 +1480,15 @@ const tourTypeMap = {
     TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.VirtualShowing,
 };
 
+const rankedOrderTourTypeToTourType = {
+  [TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.WithAgent]:
+    TourType.Guided,
+  [TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.SelfGuided]:
+    TourType.Self,
+  [TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.VirtualShowing]:
+    TourType.Virtual,
+};
+
 const tourTypeForSubmission = {
   [TourType.Guided]: "escorted-tour",
   [TourType.Self]: "self-guided-tour",

package/src/getAvailabilities.ts

@@ -181,9 +181,18 @@ export const getAvailabilitiesGroupedByDay = async (
  * // returns { datetime: '2022-06-27T09:00:00', offset: '-07:00' }
  * dateStringToDateWithTimeZoneOffset('2022-06-27T09:00:00-07:00')
  *  */
-const dateStringToDateWithTimeZoneOffset = (
+export const dateStringToDateWithTimeZoneOffset = (
   dateString: string
 ): DateWithTimeZoneOffset => ({
   datetime: dateString.slice(0, 19),
   offset: dateString.slice(19),
 });
+
+export const dateToDateWithTimeZoneOffset = (
+  date: Date
+): DateWithTimeZoneOffset => {
+  const datetime = format(date, "yyyy-MM-dd'T'HH:mm:ss");
+  const offset = format(date, "xxx");
+
+  return { datetime, offset };
+};