@meetelise/chat 1.40.1 → 1.40.3

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,13 +10,19 @@ import "./date-picker.ts";
 import "./time-picker.ts";
 import "../me-select.ts";
 import {
+  dateStringToDateWithTimeZoneOffset,
+  dateToDateWithTimeZoneOffset,
   DateWithTimeZoneOffset,
   getAvailabilitiesGroupedByDay,
   getExistenceOfAvailabilitiesByTourType,
+  getRawAvailabilities,
   getTimezoneForBuilding,
   resetAvailabilitiesCache,
 } from "../../getAvailabilities";
-import { TourAvailabilityResponseRankOrderedSupportedTourTypesEnum } from "../../types/rest-sdk.types";
+import {
+  TourAvailabilityResponse,
+  TourAvailabilityResponseRankOrderedSupportedTourTypesEnum,
+} from "../../types/rest-sdk.types";
 import { format } from "date-fns";
 import { DatePicker } from "./date-picker";
 import { MESelect } from "../me-select";
@@ -46,6 +52,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 {
@@ -66,6 +73,8 @@ export class TourScheduler extends LitElement {
   @property({ attribute: true })
   escortedToursLink = "";
   @property({ attribute: true })
+  escortedToursTypeOffered = "";
+  @property({ attribute: true })
   virtualToursLink = "";
   @property({ attribute: true })
   virtualToursTypeOffered = "";
@@ -234,6 +243,40 @@ 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
+              );
+      }
+
       if (hasOneShowTourType) {
         this.tourType = Object.keys(this.shouldShowTourType).find(
           (key) => this.shouldShowTourType[key as TourType]
@@ -271,6 +314,56 @@ export class TourScheduler extends LitElement {
     }
   };
 
+  _getHighestRankedTourType = (
+    availabilities: TourAvailabilityResponse
+  ): TourAvailabilityResponseRankOrderedSupportedTourTypesEnum => {
+    const rankedTourTypeToAvailabilities = (
+      availabilities.rankOrderedSupportedTourTypes ?? []
+    )
+      .map((tt) => {
+        return {
+          tourType: tt,
+          availabilities:
+            availabilities.availability?.[tt]?.availableTourStartTimes,
+        };
+      })
+      .filter((rtt) => {
+        if (
+          rtt.tourType ===
+            TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.Unknown ||
+          rtt.tourType ===
+            TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.MediaTour
+        ) {
+          return false;
+        }
+        const convertedTourType = rankedOrderTourTypeToTourType[rtt.tourType];
+        const tourTypeOffered = this._getTourTypeOffered(convertedTourType);
+
+        if (!tourTypeOffered) {
+          return false;
+        }
+        return (
+          !shouldOpenTourLink(convertedTourType, tourTypeOffered) &&
+          rtt.availabilities &&
+          rtt.availabilities.length > 0
+        );
+      });
+
+    const highestRankedTourType = rankedTourTypeToAvailabilities[0];
+    return highestRankedTourType.tourType;
+  };
+
+  _getTourTypeOffered = (tourType: TourType): string | null => {
+    if (tourType === TourType.Guided) {
+      return this.escortedToursTypeOffered;
+    } else if (tourType === TourType.Self) {
+      return this.selfGuidedToursTypeOffered;
+    } else if (tourType === TourType.Virtual) {
+      return this.virtualToursTypeOffered;
+    }
+    return null;
+  };
+
   firstUpdated = async (): Promise<void> => {
     await this._setAvailabilities();
   };
@@ -756,6 +849,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 +886,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 +1535,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/WebComponent/launcher/Launcher.ts

@@ -99,6 +99,8 @@ export class Launcher extends LitElement {
   @property({ attribute: true })
   escortedToursLink = "";
   @property({ attribute: true })
+  escortedToursTypeOffered = "";
+  @property({ attribute: true })
   virtualToursLink = "";
   @property({ attribute: true })
   virtualToursTypeOffered = "";
@@ -1201,6 +1203,7 @@ export class Launcher extends LitElement {
                 selfGuidedTourEnabled="${this.selfGuidedTourEnabled}"
                 selfGuidedToursTypeOffered="${this.selfGuidedToursTypeOffered}"
                 escortedToursLink="${this.escortedToursLink}"
+                .escortedToursTypeOffered="${this.escortedToursTypeOffered}"
                 virtualToursLink="${this.virtualToursLink}"
                 virtualToursTypeOffered="${this.virtualToursTypeOffered}"
                 currentLeadSource="${this.currentLeadSource}"

package/src/WebComponent/me-chat.ts

@@ -924,6 +924,8 @@ export class MEChat extends LitElement {
                   .leadSources="${this.leadSources ?? []}"
                   escortedToursLink="${this.buildingWebchatView
                     ?.escortedToursLink ?? ""}"
+                  .escortedToursTypeOffered="${this.buildingWebchatView
+                    .escortedToursTypeOffered}"
                   virtualToursLink="${this.buildingWebchatView
                     ?.virtualToursLink ?? ""}"
                   virtualToursTypeOffered="${this.buildingWebchatView

package/src/fetchBuildingWebchatView.ts

@@ -45,7 +45,7 @@ export const shouldOpenTourLink = (
     return !shouldntOpenTourTypesOffered.includes(tourTypeOffered);
   }
 
-  return true;
+  return false;
 };
 
 export interface LayoutOption {

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 };
+};