@meetelise/chat 1.15.1 → 1.17.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 the real API call once the endpoint exists
+      const schedulingIsEnabled = await (async function putApiCallHere(
+        buildingId: number
+      ) {
+        return !!buildingId;
+      })(this.buildingId);
+      if (schedulingIsEnabled) {
         this.hasSSTEnabled = true;
       }
     }

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

@@ -11,7 +11,8 @@ import "./time-picker.ts";
 import "./me-select.ts";
 import {
   DateWithTimeZoneOffset,
-  getAvailabilitiesGroupedByDayCached,
+  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,27 +53,50 @@ export class TourScheduler extends LitElement {
     [day: string]: DateWithTimeZoneOffset[];
   } = {};
   @state()
+  private waitingForAvailabilities = true;
+  @state()
   private selectedDate?: Date;
   @state()
   private selectedTime?: DateWithTimeZoneOffset | null;
   @state()
   private mobilePageIndex = 0;
   @state()
+  private isSubmitting = false;
+  @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;
 
   firstUpdated = async (): Promise<void> => {
-    this.availabilitiesGroupedByDay = await getAvailabilitiesGroupedByDayCached(
+    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 (
@@ -74,8 +105,9 @@ export class TourScheduler extends LitElement {
       | Map<PropertyKey, unknown>
   ): Promise<void> => {
     if (_changedProperties.has("tourType")) {
-      this.availabilitiesGroupedByDay =
-        await getAvailabilitiesGroupedByDayCached(tourTypeMap[this.tourType]);
+      this.availabilitiesGroupedByDay = await getAvailabilitiesGroupedByDay(
+        tourTypeMap[this.tourType]
+      );
     }
   };
 
@@ -235,7 +267,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 &&
@@ -272,17 +304,18 @@ 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! I'm only doing it because the design had one name field and the backend expects two
-      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"
     };
     const url = `https://app.meetelise.com/platformApi/state/create/scheduleMe`;
+    this.isSubmitting = true;
     const response = await axios.post(url, data, {
       headers: { ["X-SecurityKey"]: "JRL8jV4VcSCwOSir5gWkpgNLfKghmhBG" },
     });
     if (response.status === 200) {
+      this.isSubmitting = false;
       this.tourIsBooked = true;
     }
   };
@@ -402,7 +435,7 @@ export class TourScheduler extends LitElement {
       gap: 12px;
     }
 
-    #yourInformationMenu > input {
+    #yourInformationMenu input {
       width: 305px;
       height: 49px;
       border: 1px solid #83818e;
@@ -414,7 +447,7 @@ export class TourScheduler extends LitElement {
       color: #202020;
     }
 
-    #yourInformationMenu > input::placeholder {
+    #yourInformationMenu input::placeholder {
       color: #202020;
     }
 
@@ -456,27 +489,14 @@ export class TourScheduler extends LitElement {
       padding-top: 32px;
     }
 
-    button#schedule {
+    #schedule {
       width: 145px;
       height: 50px;
-      background: #202020;
-      border: 1px solid #ffffff;
-      border-radius: 10px;
       grid-row: 7;
       grid-column: 3;
       justify-self: end;
       align-self: start;
       margin-top: 18px;
-      font-family: "Poppins";
-      font-weight: 700;
-      font-size: 14px;
-      color: #ffffff;
-      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
-    }
-
-    button#schedule:disabled {
-      background: #e7e7e7;
-      box-shadow: none;
     }
 
     #confirmationMessage {
@@ -488,6 +508,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.
@@ -604,9 +699,8 @@ 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
-              tourtype="guided"
               heading="Guided tour"
               subtitle="with an agent"
               @click="${() => {
@@ -637,9 +731,8 @@ 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
-              tourtype="self"
               heading="Take a tour"
               subtitle="on your own"
               @click="${() => {
@@ -670,9 +763,8 @@ export class TourScheduler extends LitElement {
               </svg>
             </tour-type-option>`
           : ""}
-        ${this.tourTypeOptions.map((o) => o.value).includes("SELF_GUIDED")
+        ${this.shouldShowTourType[TourType.Virtual]
           ? html`<tour-type-option
-              tourtype="guided"
               heading="Virtual tour"
               subtitle="over video"
               @click="${() => {
@@ -741,7 +833,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>
@@ -798,8 +891,18 @@ export class TourScheduler extends LitElement {
     },
     {
       validate: (): boolean => this.validators.leadInfo(),
-      nextButtonText: "Schedule tour",
-      nextButtonAction: this.submit,
+      // last page gets <action-confirm-button> instead of the regular button
+      nextButtonText: null,
+      renderNextButton: (): TemplateResult => html`<action-confirm-button
+        id="schedule"
+        .onClick=${this.submit}
+        .isLoading=${this.isSubmitting}
+        height="50px"
+        width="145px"
+        text="Schedule tour"
+        ?disabled=${!this.formIsValidForSubmission()}
+      ></action-confirm-button>`,
+      nextButtonAction: null,
       render: (): TemplateResult => {
         return html`${this.userInfoAndLayoutMenu()}`;
       },
@@ -809,58 +912,62 @@ 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>
-
-      ${this.layoutOptions.length > 0
-        ? html`<div id="unitChoiceMenu">
-            <h2 id="unitChoice">What would you like to view?</h2>
-            <div id="unitOptions">
-              <me-select
-                id="unitType"
-                placeholder="Select type"
-                .options="${this.layoutOptions.map((o) => o.label)}"
-                defaultOption="Studio"
-                @change=${() => {
-                  // to revalidate the form
-                  this.requestUpdate();
-                }}
-                >Studio
-              </me-select>
-            </div>
-          </div>`
-        : ""} `;
+      <!--
+        Layout dropdown would go here, but has been removed pending backend support.
+        Here is the code to add it back:
+        https://github.com/MeetElise/chat-ui/blob/e17aca8b39a0eed9430f22c182f2ebcdfb796417/src/WebComponent/Scheduler/tour-scheduler.ts#L846-L863
+      --> `;
   }
 
   confirmationMessage(): TemplateResult {
@@ -887,7 +994,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.
@@ -897,11 +1010,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`
@@ -914,35 +1051,49 @@ export class TourScheduler extends LitElement {
                   We’ll send a confirmation and any follow-ups to your email
                   address.
                 </p>
-                <button
+                <action-confirm-button
                   id="schedule"
+                  .onClick=${this.submit}
+                  .isLoading=${this.isSubmitting}
+                  height="50px"
+                  width="145px"
+                  text="Schedule tour"
                   ?disabled=${!this.formIsValidForSubmission()}
-                  @click=${this.submit}
-                >
-                  Schedule tour
-                </button>`}
+                ></action-confirm-button>`}
         </div>
       `;
     } 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
             ? this.confirmationMessage()
-            : html`${currentPage.render()}
-                <button
-                  id="next"
-                  @click=${currentPage.nextButtonAction}
-                  ?disabled=${(() => {
-                    return !currentPage.validate();
-                  })()}
-                >
-                  ${currentPage.nextButtonText}
-                </button>`}
+            : html` ${currentPage.render()}
+              ${!currentPage.renderNextButton
+                ? html` <button
+                    id="next"
+                    @click=${currentPage.nextButtonAction}
+                    ?disabled=${(() => {
+                      return (
+                        !currentPage.validate() || this.waitingForAvailabilities
+                      );
+                    })()}
+                  >
+                    ${currentPage.nextButtonText}
+                  </button>`
+                : currentPage.renderNextButton()}`}
         </div>
       `;
     }
@@ -955,8 +1106,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/WebComponent/Scheduler/tour-type-option.ts

@@ -1,20 +1,16 @@
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { TourType } from "./tour-scheduler";
 
 @customElement("tour-type-option")
 export class TourTypeOption extends LitElement {
-  @property({ type: String })
-  tourtype = "";
   @property({ type: String })
   heading = "";
   @property({ type: String })
   subtitle = "";
   @property({ type: Boolean })
   selected = false;
-
   @property({ attribute: false })
-  onClick?: (tourType: TourType) => void;
+  onClick?: () => void;
 
   static styles = [
     css`

package/src/WebComponent/actions/action-confirm-button.ts

@@ -1,3 +1,4 @@
+import classnames from "classnames";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -6,6 +7,9 @@ export class ActionConfirmButton extends LitElement {
   static styles = [
     css`
       .action-confirm-button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
         background: #1e1e1e;
         border: 2px solid #ffffff;
         box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
@@ -23,11 +27,24 @@ export class ActionConfirmButton extends LitElement {
         cursor: pointer;
       }
 
-      .action-confirm-button:active {
+      .action-confirm-button:disabled {
+        background: #e7e7e7;
+        box-shadow: none;
+        cursor: initial;
+      }
+      .action-confirm-button:not(:is(:disabled, .loading)):active {
         transform: translateY(2px);
         box-shadow: 0px 0px 0px rgba(36, 53, 141, 0.25);
       }
 
+      .action-confirm-button:not(:is(:active, :disabled, .loading)):hover {
+        opacity: 0.7;
+      }
+
+      .loading {
+        cursor: initial;
+      }
+
       .lds-ring {
         display: inline-block;
         position: relative;
@@ -71,9 +88,20 @@ export class ActionConfirmButton extends LitElement {
   text = "Submit";
   @property({ attribute: false })
   isLoading = false;
+  @property({ type: Boolean })
+  disabled = false;
+  @property({ type: String })
+  height = "initial";
+  @property({ type: String })
+  width = "initial";
 
   render = (): TemplateResult => {
-    return html`<button class="action-confirm-button" @click=${this.onClick}>
+    return html`<button
+      class=${classnames("action-confirm-button", { loading: this.isLoading })}
+      @click=${!this.isLoading ? this.onClick : null}
+      ?disabled=${this.disabled}
+      style=${`height: ${this.height}; width: ${this.width};`}
+    >
       ${!this.isLoading
         ? this.text
         : html`<div class="lds-ring">

package/src/WebComponent/me-chat.ts

@@ -136,6 +136,8 @@ export class MEChat extends LitElement {
     await this.configureTalkJSPopup(building, theme, session, avatarSrc);
     this.configureLauncherElement();
 
+    this.analytics?.ping("load");
+
     this.yardiDNIScriptInterval = setInterval(
       () => this.pollForYardiCampaignSource(),
       1000

package/src/createConversation.ts

@@ -46,7 +46,7 @@ export default function createConversation(
       building.avatarType === "image" && building.avatarSrc
         ? avatarSrc
         : defaultAvatarUrl,
-    // uncomment this to test changes to the default avatar if your test building has its own avatar
+    // uncomment the following line to test changes to the default avatar if your test building has its own avatar
     // avatarUrl: defaultAvatarUrl,
   };
   return conversation;