@meetelise/chat 1.13.10 → 1.15.0

package/src/WebComponent/Launcher.ts

@@ -50,7 +50,7 @@ export class Launcher extends LitElement {
   onChatTapped: () => void = () => {
     return;
   };
-  @property()
+  @property({ attribute: false })
   launcherStyles: StyleInfo = {};
 
   @state()
@@ -85,7 +85,13 @@ export class Launcher extends LitElement {
       );
       this.hasTextUsEnabled =
         registeredPhoneNumbers.length > 0 && this.buildingId !== 4895;
-      if (this.buildingId === 3660) {
+      // TODO: replace this with a real API call once the endpoint exists
+      const schedulingIsEnabled = await (async function putApiCallHere(
+        buildingId: number
+      ) {
+        return !!buildingId;
+      })(this.buildingId);
+      if (this.buildingId === 3660 && schedulingIsEnabled) {
         this.hasSSTEnabled = true;
       }
     }

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";
@@ -22,6 +23,7 @@ import { LabeledOption } from "../../fetchBuildingInfo";
 import { isMobile } from "../../utils";
 import axios from "axios";
 import { mapValues } from "lodash";
+import classnames from "classnames";
 
 @customElement("tour-scheduler")
 export class TourScheduler extends LitElement {
@@ -37,6 +39,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 = "";
@@ -45,6 +53,8 @@ export class TourScheduler extends LitElement {
     [day: string]: DateWithTimeZoneOffset[];
   } = {};
   @state()
+  private waitingForAvailabilities = true;
+  @state()
   private selectedDate?: Date;
   @state()
   private selectedTime?: DateWithTimeZoneOffset | null;
@@ -53,11 +63,13 @@ export class TourScheduler extends LitElement {
   @state()
   private tourIsBooked = false;
 
-  @query("input#name")
-  nameInput!: HTMLInputElement;
-  @query("input#email")
+  @query(".inputContainer#firstName input")
+  firstNameInput!: HTMLInputElement;
+  @query(".inputContainer#lastName input")
+  lastNameInput!: HTMLInputElement;
+  @query(".inputContainer#email input")
   emailInput!: HTMLInputElement;
-  @query("input#phone")
+  @query(".inputContainer#phone input")
   phoneInput!: HTMLInputElement;
   @query("me-select#unitType")
   unitTypeSelect!: MESelect;
@@ -66,6 +78,23 @@ export class TourScheduler extends LitElement {
     this.availabilitiesGroupedByDay = await getAvailabilitiesGroupedByDay(
       tourTypeMap[this.tourType]
     );
+    this.waitingForAvailabilities = false;
+
+    // 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 (
@@ -236,7 +265,7 @@ export class TourScheduler extends LitElement {
     dateAndTime: (): boolean => !!this.selectedDate && !!this.selectedTime,
     leadInfo: (): boolean => {
       return (
-        !!this.nameInput?.value &&
+        (!!this.firstNameInput?.value || !!this.lastNameInput?.value) &&
         this.emailInput?.value.includes("@") &&
         // TODO: deleting phone number doesn't cause validation to fail, at least on mobile
         !!this.phoneNumber &&
@@ -273,9 +302,8 @@ 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! 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(" "),
+      first_name: this.firstNameInput.value,
+      last_name: this.lastNameInput.value,
       tour_type: tourTypeForSubmission[this.tourType],
       tour_time: `${this.selectedTime.datetime}${this.selectedTime.offset}`, // e.g., "2022-06-27T09:00:00-07:00"
     };
@@ -403,7 +431,7 @@ export class TourScheduler extends LitElement {
       gap: 12px;
     }
 
-    #yourInformationMenu > input {
+    #yourInformationMenu input {
       width: 305px;
       height: 49px;
       border: 1px solid #83818e;
@@ -415,7 +443,7 @@ export class TourScheduler extends LitElement {
       color: #202020;
     }
 
-    #yourInformationMenu > input::placeholder {
+    #yourInformationMenu input::placeholder {
       color: #202020;
     }
 
@@ -475,6 +503,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;
@@ -489,6 +526,81 @@ export class TourScheduler extends LitElement {
       font-size: 18px;
     }
 
+    /* Loading styles: pulsing gray overlay on all the form elements */
+
+    @keyframes spin {
+      0% {
+        transform: none;
+      }
+      50% {
+        transform: rotateZ(180deg);
+      }
+      100% {
+        transform: rotateZ(360deg);
+      }
+    }
+
+    svg#loadingIcon {
+      animation: spin 2s infinite linear;
+    }
+
+    .tour-scheduler.loading #scheduleATour {
+      display: flex;
+      gap: 10px;
+    }
+
+    @keyframes loadingPulse {
+      0% {
+        background-color: #e7e7e7;
+      }
+      50% {
+        background-color: white;
+      }
+      100% {
+        background-color: #e7e7e7;
+      }
+    }
+
+    tour-type-option,
+    date-picker,
+    #yourInformationMenu .inputContainer {
+      position: relative;
+    }
+
+    .tour-scheduler.loading
+      :is(tour-type-option, date-picker, #yourInformationMenu
+        .inputContainer)::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      z-index: 1;
+      animation: loadingPulse 2s infinite;
+    }
+
+    .tour-scheduler.loading tour-type-option::after {
+      border-radius: 10px;
+      width: 200px;
+    }
+
+    .tour-scheduler.loading date-picker::after {
+      border-radius: 10px;
+      width: 205px;
+    }
+
+    .tour-scheduler.loading #yourInformationMenu .inputContainer::after {
+      width: 100%;
+    }
+
+    .tour-scheduler.loading #yourInformationMenu .inputContainer input {
+      visibility: hidden;
+    }
+
+    .tour-scheduler.loading time-picker {
+      display: none;
+    }
+
     @media (max-width: 767px) {
       /* TODO: separate styles into general, desktop-specific, and mobile-specific.
       basically everything I have "unset" or "initial" on should become desktop-specific. the grid layout is only for desktop.
@@ -605,7 +717,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"
@@ -637,7 +749,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"
@@ -669,7 +781,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"
@@ -739,7 +851,8 @@ export class TourScheduler extends LitElement {
                       .map((date) => format(new Date(date.datetime), "h:mmaaa"))
                       .indexOf(e.target.selectedTime)
                   : null;
-                this.selectedTime = index ? daysAvailabilities[index] : null; // this.selectedAvailabilityString ?
+                this.selectedTime =
+                  index !== null ? daysAvailabilities[index] : null;
               }
             }}
           ></time-picker>
@@ -807,38 +920,56 @@ 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=${() => this.requestUpdate()}
-        />
-        <input
-          type="email"
-          inputmode="email"
-          placeholder="Email"
-          id="email"
-          .value=${this.email}
-          @input=${this.onChangeEmail}
-        />
-        <input
-          type="tel"
-          inputmode="tel"
-          placeholder="Phone"
-          id="phone"
-          maxlength="14"
-          .value=${this.phoneNumber}
-          @keydown=${this.handlePhoneKeydown}
-          @keyup=${this.handlePhoneKeyup}
-          @input=${(e: Event) => {
-            if (!e.target) {
-              return;
-            }
-            this.phoneNumber = formatToPhone(
-              (e.target as HTMLInputElement).value
-            );
-          }}
-        />
+        <div class="inputContainer" id="firstName">
+          <input
+            type="text"
+            placeholder="First name"
+            name="firstName"
+            autocomplete="given-name"
+            @input=${() => this.requestUpdate()}
+          />
+        </div>
+        <div class="inputContainer" id="lastName">
+          <input
+            type="text"
+            placeholder="Last name"
+            name="lastName"
+            autocomplete="family-name"
+            @input=${() => this.requestUpdate()}
+          />
+        </div>
+        <div class="inputContainer" id="email">
+          <input
+            type="email"
+            inputmode="email"
+            placeholder="Email"
+            name="email"
+            autocomplete="email"
+            .value=${this.email}
+            @input=${this.onChangeEmail}
+          />
+        </div>
+        <div class="inputContainer" id="phone">
+          <input
+            type="tel"
+            inputmode="tel"
+            placeholder="Phone"
+            name="phone"
+            autocomplete="tel-national"
+            maxlength="14"
+            .value=${this.phoneNumber}
+            @keydown=${this.handlePhoneKeydown}
+            @keyup=${this.handlePhoneKeyup}
+            @input=${(e: Event) => {
+              if (!e.target) {
+                return;
+              }
+              this.phoneNumber = formatToPhone(
+                (e.target as HTMLInputElement).value
+              );
+            }}
+          />
+        </div>
       </div>
       <!--
         Layout dropdown would go here, but has been removed pending backend support.
@@ -871,7 +1002,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.
@@ -881,11 +1018,35 @@ export class TourScheduler extends LitElement {
     `;
   }
 
+  loadingIcon(): TemplateResult {
+    return html`<svg
+      id="loadingIcon"
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17.835 13.1045C18.4839 11.5628 18.6332 9.85647 18.2621 8.22548C17.8909 6.5945 17.018 5.12084 15.7659 4.0117C14.5139 2.90256 12.9457 2.21372 11.2818 2.04201C9.618 1.87031 7.94218 2.22438 6.49 3.05445L5.498 1.31745C7.01563 0.450066 8.73419 -0.00418222 10.4822 2.90165e-05C12.2302 0.00424025 13.9466 0.466764 15.46 1.34145C19.95 3.93345 21.67 9.48345 19.577 14.1115L20.919 14.8855L16.754 17.0995L16.589 12.3855L17.835 13.1045ZM3.085 6.89845C2.43614 8.44015 2.28678 10.1464 2.65792 11.7774C3.02905 13.4084 3.90201 14.8821 5.15407 15.9912C6.40613 17.1003 7.97432 17.7892 9.63816 17.9609C11.302 18.1326 12.9778 17.7785 14.43 16.9485L15.422 18.6855C13.9044 19.5528 12.1858 20.0071 10.4378 20.0029C8.68979 19.9987 6.97344 19.5361 5.46 18.6615C0.97 16.0695 -0.75 10.5195 1.343 5.89145L0 5.11845L4.165 2.90445L4.33 7.61845L3.084 6.89945L3.085 6.89845Z"
+        fill="#1E1E1E"
+      />
+    </svg>`;
+  }
+
   render(): TemplateResult {
     if (!isMobile()) {
       return html`
-        <div class="tour-scheduler">
-          <h1 id="scheduleATour">Schedule a tour</h1>
+        <div
+          class="${classnames("tour-scheduler", {
+            loading: this.waitingForAvailabilities,
+          })}"
+        >
+          <h1 id="scheduleATour">
+            ${this.waitingForAvailabilities
+              ? html`${this.loadingIcon()} Searching availabilities...`
+              : "Schedule a tour"}
+          </h1>
           ${this.closeButton()}
           ${this.tourIsBooked
             ? html`
@@ -910,9 +1071,17 @@ export class TourScheduler extends LitElement {
     } else {
       const currentPage = this.mobilePages[this.mobilePageIndex];
       return html`
-        <div class="tour-scheduler">
+        <div
+          class="${classnames("tour-scheduler", {
+            loading: this.waitingForAvailabilities,
+          })}"
+        >
           <div id="topControls">
-            <h1 id="scheduleATour">Schedule a tour</h1>
+            <h1 id="scheduleATour">
+              ${this.waitingForAvailabilities
+                ? html`${this.loadingIcon()} Searching availabilities...`
+                : "Schedule a tour"}
+            </h1>
             ${this.closeButton()}
           </div>
           ${this.tourIsBooked
@@ -922,7 +1091,9 @@ export class TourScheduler extends LitElement {
                   id="next"
                   @click=${currentPage.nextButtonAction}
                   ?disabled=${(() => {
-                    return !currentPage.validate();
+                    return (
+                      !currentPage.validate() || this.waitingForAvailabilities
+                    );
                   })()}
                 >
                   ${currentPage.nextButtonText}
@@ -939,8 +1110,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