@meetelise/chat 1.13.11 → 1.14.0

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

@@ -12,6 +12,7 @@ import "./me-select.ts";
 import {
   DateWithTimeZoneOffset,
   getAvailabilitiesGroupedByDay,
+  getExistenceOfAvailabilitiesByTourType,
 } from "../../getAvailabilities";
 import { TourAvailabilityResponseRankOrderedSupportedTourTypesEnum } from "@meetelise/rest-sdk";
 import { format } from "date-fns";
@@ -37,6 +38,12 @@ 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 = "";
@@ -68,6 +75,22 @@ export class TourScheduler extends LitElement {
     this.availabilitiesGroupedByDay = await getAvailabilitiesGroupedByDay(
       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 (
@@ -476,6 +499,15 @@ 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;
@@ -606,7 +638,7 @@ export class TourScheduler extends LitElement {
   tourTypeMenu(): TemplateResult {
     return html`<h2 id="tourType">Tour Type</h2>
       <div id="tourTypeMenu">
-        ${this.tourTypeOptions.map((o) => o.value).includes("WITH_AGENT")
+        ${this.shouldShowTourType[TourType.Guided]
           ? html` <tour-type-option
               heading="Guided tour"
               subtitle="with an agent"
@@ -638,7 +670,7 @@ export class TourScheduler extends LitElement {
               </svg>
             </tour-type-option>`
           : ""}
-        ${this.tourTypeOptions.map((o) => o.value).includes("SELF_GUIDED")
+        ${this.shouldShowTourType[TourType.Self]
           ? html`<tour-type-option
               heading="Take a tour"
               subtitle="on your own"
@@ -670,7 +702,7 @@ export class TourScheduler extends LitElement {
               </svg>
             </tour-type-option>`
           : ""}
-        ${this.tourTypeOptions.map((o) => o.value).includes("VIRTUAL_SHOWING")
+        ${this.shouldShowTourType[TourType.Virtual]
           ? html`<tour-type-option
               heading="Virtual tour"
               subtitle="over video"
@@ -879,7 +911,13 @@ export class TourScheduler extends LitElement {
         <p>
           Thank you!
           <br />
-          Your guided tour is scheduled for ${readableDateAndTime}.
+          Your
+          ${{
+            [TourType.Guided]: "guided",
+            [TourType.Self]: "self-guided",
+            [TourType.Virtual]: "virtual",
+          }[this.tourType]}
+          tour is scheduled for ${readableDateAndTime}.
         </p>
         <p>
           Look for an email confirmation along with instructions and directions.
@@ -947,8 +985,6 @@ 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/getAvailabilities.ts

@@ -10,6 +10,7 @@ import {
   TourAvailabilityResponseRankOrderedSupportedTourTypesEnum,
 } from "@meetelise/rest-sdk";
 import groupBy from "lodash/groupBy";
+import { TourType } from "./WebComponent/Scheduler/tour-scheduler";
 
 const availabilitiesCache: {
   buildingId?: number | null;
@@ -85,6 +86,39 @@ 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