@meetelise/chat 1.20.2 → 1.20.4

package/src/WebComponent/Launcher.ts

@@ -11,7 +11,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { installCallUsWindow } from "./actions/call-us-window";
 import { getRegisteredPhoneNumbers } from "../getRegisteredPhoneNumbers";
 import { TourScheduler } from "./Scheduler/tour-scheduler";
-import { LabeledOption } from "../fetchBuildingInfo";
+import { LabeledOption, UnitV2 } from "../fetchBuildingInfo";
 
 @customElement("meetelise-launcher")
 export class Launcher extends LitElement {
@@ -53,7 +53,9 @@ export class Launcher extends LitElement {
   @property({ type: Boolean })
   hasTextUsEnabled = false;
   @property({ attribute: false })
-  layoutOptions: LabeledOption[] = [];
+  layoutOptions: string[] = [];
+  @property({ attribute: false })
+  unitOptions: UnitV2[] = [];
   @property({ attribute: false })
   tourTypeOptions: LabeledOption[] = [];
   @property({ attribute: false })
@@ -294,6 +296,7 @@ export class Launcher extends LitElement {
                 orgSlug="${this.orgSlug}"
                 buildingSlug="${this.buildingSlug}"
                 .layoutOptions=${this.layoutOptions}
+                .unitOptions=${this.unitOptions}
                 .tourTypeOptions=${this.tourTypeOptions}
                 buildingId=${this.buildingId}
                 ${ref(this.tourSchedulerRef)}

package/src/WebComponent/Scheduler/me-select.ts

@@ -2,10 +2,15 @@ import { LitElement, html, TemplateResult, css } from "lit";
 import { property, state, query, customElement } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 
+type MeSelectOption = {
+  label: string;
+  value: string;
+};
+
 @customElement("me-select")
 export class MESelect extends LitElement {
   @property({ attribute: false })
-  options: string[] = [];
+  options: MeSelectOption[] = [];
 
   @property({ type: String })
   placeholder?: string = "Select";
@@ -14,7 +19,7 @@ export class MESelect extends LitElement {
   value?: string;
 
   @state()
-  private activeOption: string | null = null;
+  private activeOption: MeSelectOption | null = null;
 
   @state()
   private isOpen?: boolean = false;
@@ -29,8 +34,8 @@ export class MESelect extends LitElement {
     this.isOpen = !this.isOpen;
   };
 
-  setSelectedOption = (option: string, closeSelect = true): void => {
-    this.value = option;
+  setSelectedOption = (option: MeSelectOption, closeSelect = true): void => {
+    this.value = option.value;
     if (closeSelect) {
       this.isOpen = !this.isOpen;
       this.activeOption = null;
@@ -103,6 +108,7 @@ export class MESelect extends LitElement {
       overflow-y: scroll;
       position: absolute;
       min-height: 40px;
+      min-width: 144px;
       max-width: 400px;
       width: max-content;
       background-color: white;
@@ -112,7 +118,17 @@ export class MESelect extends LitElement {
       box-sizing: border-box;
       box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.15);
       border-radius: 10px;
-      overflow: hidden;
+    }
+
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+      width: 8px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      background-color: rgba(0, 0, 0, 0.4);
+      -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
     }
 
     .option {
@@ -228,7 +244,7 @@ export class MESelect extends LitElement {
                       active: this.activeOption === option,
                     })}"
                   >
-                    ${option}
+                    ${option.label}
                   </li>`
               )}
             </ul>`

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

@@ -1,11 +1,27 @@
 import { LitElement, html, TemplateResult, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { DateWithTimeZoneOffset } from "../../getAvailabilities";
+
+export type TimePickerOption = {
+  displayTime: string;
+  dateWithTimeZoneOffset: DateWithTimeZoneOffset;
+};
+
+const getDateWithTimezoneOffset = (
+  options: TimePickerOption[],
+  displayTime: string
+) => {
+  return options.reduce(function (map: Record<string, TimePickerOption>, obj) {
+    map[obj.displayTime] = obj;
+    return map;
+  }, {})[displayTime];
+};
 
 @customElement("time-picker")
 export class TimePicker extends LitElement {
   @property({ attribute: false })
-  options: string[] = [];
+  options: TimePickerOption[] = [];
 
   @property({ type: Boolean })
   selectedDateExists = false;
@@ -14,10 +30,10 @@ export class TimePicker extends LitElement {
   horizontal = false;
 
   @state()
-  private selected?: string;
+  private selected?: TimePickerOption;
 
   @property({ attribute: false })
-  get selectedTime(): undefined | string {
+  get selectedTime(): undefined | TimePickerOption {
     return this.selected;
   }
 
@@ -100,8 +116,12 @@ export class TimePicker extends LitElement {
             class=${this.horizontal ? "horizontal" : ""}
             @click="${(e: MouseEvent) => {
               const target = e.target as HTMLElement | undefined;
+
               if (target?.closest(".option:not(.selected)"))
-                this.selected = target.innerText;
+                this.selected = getDateWithTimezoneOffset(
+                  this.options,
+                  target.innerText
+                );
               this.dispatchEvent(
                 new Event("change", { bubbles: true, composed: true })
               );
@@ -114,8 +134,8 @@ export class TimePicker extends LitElement {
               ) {
                 e.preventDefault();
                 this.selected =
-                  target.innerText !== this.selected
-                    ? target.innerText
+                  target.innerText !== this.selected?.displayTime
+                    ? getDateWithTimezoneOffset(this.options, target.innerText)
                     : undefined;
                 this.dispatchEvent(
                   new Event("change", { bubbles: true, composed: true })
@@ -127,11 +147,11 @@ export class TimePicker extends LitElement {
               (option) =>
                 html`<div
                   class="option ${classMap({
-                    selected: this.selected === option,
+                    selected: this.selected?.displayTime === option.displayTime,
                   })}"
                   tabindex="0"
                 >
-                  <span>${option}</span>
+                  <span>${option.displayTime}</span>
                 </div>`
             )}
           </div>

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

@@ -19,17 +19,35 @@ import { format } from "date-fns";
 import { DatePicker } from "./date-picker";
 import { MESelect } from "./me-select";
 import { TimePicker } from "./time-picker";
-import { LabeledOption } from "../../fetchBuildingInfo";
+import { LabeledOption, UnitV2 } from "../../fetchBuildingInfo";
 import { isMobile } from "../../utils";
 import axios from "axios";
 import { mapValues } from "lodash";
 import classnames from "classnames";
 import parseISO from "date-fns/parseISO";
 
+const getHumanReadableLayout = (layout: string) => {
+  if (layout == "studio") return "Studio";
+  return {
+    "1br": "1 bedroom",
+    "2br": "2 bedrooms",
+    "3br": "3 bedrooms",
+    "4br": "4 bedrooms",
+    "5br": "5 bedrooms",
+    "6br": "6 bedrooms",
+    "7br": "7 bedrooms",
+    "8br": "8 bedrooms",
+    "9br": "9 bedrooms",
+    "10br": "10 bedroom",
+  }[layout];
+};
+
 @customElement("tour-scheduler")
 export class TourScheduler extends LitElement {
   @property({ attribute: false })
-  layoutOptions: LabeledOption[] = [];
+  layoutOptions: string[] = [];
+  @property({ attribute: false })
+  unitOptions: UnitV2[] = [];
   @property({ attribute: false })
   tourTypeOptions: LabeledOption[] = [];
   @property({ type: Number })
@@ -69,9 +87,9 @@ export class TourScheduler extends LitElement {
   @state()
   private tourIsBooked = false;
 
-  @query(".inputContainer#firstName input")
+  @query(".nameContainer#firstName input")
   firstNameInput!: HTMLInputElement;
-  @query(".inputContainer#lastName input")
+  @query(".nameContainer#lastName input")
   lastNameInput!: HTMLInputElement;
   @query(".inputContainer#email input")
   emailInput!: HTMLInputElement;
@@ -79,6 +97,8 @@ export class TourScheduler extends LitElement {
   phoneInput!: HTMLInputElement;
   @query("me-select#unitType")
   unitTypeSelect!: MESelect;
+  @query("me-select#layoutType")
+  layoutTypeSelect!: MESelect;
 
   firstUpdated = async (): Promise<void> => {
     this.availabilitiesGroupedByDay = await getAvailabilitiesGroupedByDay(
@@ -312,21 +332,25 @@ export class TourScheduler extends LitElement {
       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"
+      layouts: [this.layoutTypeSelect.value],
+      unit_numbers: [this.unitTypeSelect.value],
     };
     const url = `https://app.meetelise.com/platformApi/state/create/scheduleMe`;
     this.isSubmitting = true;
-    const response = await axios.post(url, data, {
-      headers: {
-        ["building-slug"]: this.buildingSlug,
-        ["X-SecurityKey"]: "JRL8jV4VcSCwOSir5gWkpgNLfKghmhBG",
-        ["org-slug"]: this.orgSlug,
-      },
-    });
-    if (response.status === 200) {
+
+    try {
+      await axios.post(url, data, {
+        headers: {
+          ["building-slug"]: this.buildingSlug,
+          ["X-SecurityKey"]: "JRL8jV4VcSCwOSir5gWkpgNLfKghmhBG",
+          ["org-slug"]: this.orgSlug,
+        },
+      });
       this.isSubmitting = false;
       this.tourIsBooked = true;
-    } else {
-      const message = response.data["detail"] || "Failed to book tour";
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (e: any) {
+      const message = e.response.data["detail"] || "Failed to book tour";
       alert(message);
       this.isSubmitting = false;
       this.tourIsBooked = false;
@@ -355,7 +379,7 @@ export class TourScheduler extends LitElement {
       /* grid stuff */
       display: grid;
       grid-template-columns: 229px 432px 305px;
-      grid-template-rows: 44px 54px 32px 195px 152px 1px;
+      grid-template-rows: 44px 54px 32px 195px 167px 1px;
     }
 
     h1,
@@ -449,7 +473,7 @@ export class TourScheduler extends LitElement {
     }
 
     #yourInformationMenu input {
-      width: 305px;
+      width: 100%;
       height: 49px;
       border: 1px solid #83818e;
       padding: 13px 11px 14px 11px;
@@ -464,7 +488,7 @@ export class TourScheduler extends LitElement {
       color: #202020;
     }
 
-    #unitChoiceMenu {
+    .unitLayoutChoices {
       grid-row: 5 / 6;
       grid-column: 3;
       align-self: start;
@@ -472,11 +496,15 @@ export class TourScheduler extends LitElement {
       flex-direction: column;
     }
 
-    h2#unitChoice {
+    .unitLayoutChoice {
+      margin-bottom: 12px;
+    }
+
+    h2.unitLayoutChoice {
       margin-bottom: 7px;
     }
 
-    #unitOptions {
+    .unitLayoutOptions {
       display: flex;
       flex-direction: column;
       gap: 8px;
@@ -584,10 +612,6 @@ export class TourScheduler extends LitElement {
       width: 205px;
     }
 
-    .tour-scheduler.loading #yourInformationMenu .inputContainer::after {
-      width: 100%;
-    }
-
     .tour-scheduler.loading #yourInformationMenu .inputContainer input {
       visibility: hidden;
     }
@@ -596,6 +620,19 @@ export class TourScheduler extends LitElement {
       display: none;
     }
 
+    #namesWrapper {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .nameContainer {
+      width: 48%;
+    }
+
+    .nameInput {
+      width: 100%;
+    }
+
     @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.
@@ -832,9 +869,15 @@ export class TourScheduler extends LitElement {
             .options=${this.selectedDate
               ? this.availabilitiesGroupedByDay[
                   format(this.selectedDate, "y-MM-dd")
-                ]?.map((date) =>
-                  format(parseISO(`${date.datetime}${date.offset}`), "h:mmaaa")
-                )
+                ]?.map((date) => {
+                  return {
+                    dateWithTimeZoneOffset: date,
+                    displayTime: format(
+                      parseISO(`${date.datetime}${date.offset}`),
+                      "h:mmaaa"
+                    ),
+                  };
+                })
               : []}
             @change=${(e: Event) => {
               if (e.target instanceof TimePicker) {
@@ -844,9 +887,9 @@ export class TourScheduler extends LitElement {
                     format(new Date(this.selectedDate), "y-MM-dd")
                   ];
                 const index = e.target.selectedTime
-                  ? daysAvailabilities
-                      .map((date) => format(new Date(date.datetime), "h:mmaaa"))
-                      .indexOf(e.target.selectedTime)
+                  ? daysAvailabilities.indexOf(
+                      e.target.selectedTime.dateWithTimeZoneOffset
+                    )
                   : null;
                 this.selectedTime =
                   index !== null ? daysAvailabilities[index] : null;
@@ -927,24 +970,29 @@ export class TourScheduler extends LitElement {
   userInfoAndLayoutMenu(): TemplateResult {
     return html`<h2 id="yourInformation">Your information</h2>
       <div id="yourInformationMenu">
-        <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 id="namesWrapper">
+          <div class="nameContainer" id="firstName">
+            <input
+              class="nameInput"
+              type="text"
+              placeholder="First name"
+              name="firstName"
+              autocomplete="given-name"
+              @input=${() => this.requestUpdate()}
+            />
+          </div>
+          <div class="nameContainer" id="lastName">
+            <input
+              class="nameInput"
+              type="text"
+              placeholder="Last name"
+              name="lastName"
+              autocomplete="family-name"
+              @input=${() => this.requestUpdate()}
+            />
+          </div>
         </div>
+
         <div class="inputContainer" id="email">
           <input
             type="email"
@@ -978,20 +1026,64 @@ export class TourScheduler extends LitElement {
           />
         </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
-      --> `;
+      <div class="unitLayoutChoices">
+        ${this.layoutOptions.length > 0
+          ? html`<div class="unitLayoutChoice">
+              <h2 class="unitLayoutChoice">What would you like to view?</h2>
+              <div class="unitLayoutOptions">
+                <me-select
+                  id="layoutType"
+                  placeholder="Select type"
+                  .options="${this.layoutOptions.map((i) => ({
+                    label: getHumanReadableLayout(i),
+                    value: i,
+                  }))}"
+                  defaultOption="Studio"
+                  @change=${() => {
+                    // to revalidate the form
+                    this.requestUpdate();
+                  }}
+                  >Studio
+                </me-select>
+              </div>
+            </div>`
+          : ""}
+        ${this.unitOptions.length > 0
+          ? html`<div class="unitLayoutChoice">
+              <div class="unitLayoutOptions">
+                <me-select
+                  id="unitType"
+                  placeholder="Select type"
+                  .options="${this.unitOptions
+                    .filter(
+                      (i) =>
+                        !this.layoutTypeSelect ||
+                        i.layout === this.layoutTypeSelect.value
+                    )
+                    .map((i) => ({
+                      label: i.name,
+                      value: i.name,
+                    }))}"
+                  defaultOption="Studio"
+                  @change=${() => {
+                    // to revalidate the form
+                    this.requestUpdate();
+                  }}
+                  >Studio
+                </me-select>
+              </div>
+            </div>`
+          : ""}
+      </div> `;
   }
 
   confirmationMessage(): TemplateResult {
     if (!this.selectedDate || !this.selectedTime) return html``;
     // format example: "November 9th, 2022 at 11:00am"
-    const readableDateAndTime = `${format(
-      new Date(this.selectedDate),
-      "MMMM do, y"
-    )} at ${format(new Date(this.selectedTime.datetime), "h:mmaaa")}`;
+    const readableDateAndTime = format(
+      parseISO(`${this.selectedTime.datetime}${this.selectedTime.offset}`),
+      "h:mmaaa"
+    );
     return html`
       <div id="confirmationMessage">
         <svg

package/src/WebComponent/me-chat.ts

@@ -285,7 +285,8 @@ export class MEChat extends LitElement {
               .isFirstMount=${!this.hasMounted}
               .isMini=${this.useMiniWidget}
               .buildingId=${this.building?.id ?? 0}
-              .layoutOptions=${this.building?.layoutOptions ?? []}
+              .layoutOptions=${this.building?.layoutOptionsV2 ?? []}
+              .unitOptions=${this.building?.unitOptionsV2 ?? []}
               .tourTypeOptions=${this.building?.tourTypeOptions ?? []}
               .launcherStyles=${this.launcherStyles}
               chatCallUsHeader=${this.building?.chatCallUsHeader ?? "Call us"}

package/src/fetchBuildingInfo.ts

@@ -21,12 +21,18 @@ export interface Building {
   conversationMaintenanceMode: boolean;
   orgId: number;
   phoneNumber: string;
-  layoutOptions: LabeledOption[];
   tourTypeOptions: LabeledOption[];
   chatWidgets?: string[] | null;
   chatCallUsHeader?: string;
+  unitOptionsV2: UnitV2[];
+  layoutOptionsV2: string[];
 }
 
+export type UnitV2 = {
+  name: string;
+  layout: string;
+};
+
 /**
  * Load the publicly-available info for a building.
  *
@@ -42,5 +48,19 @@ export default async function fetchBuildingInfo(
   const url = `${host}/api/pub/v1/organization/${orgSlug}/building/${buildingSlug}`;
   const response = await fetch(url);
   const building: Building = await response.json();
+
+  // HACK
+  // We will fetch these units/layouts from elise-crm-api and supplement the DTO
+  const unitsResponse = await fetch(
+    `${host}/eliseCrmApi/pub/building/${buildingSlug}/units`
+  );
+  const units: UnitV2[] = await unitsResponse.json();
+  const layoutsResponse = await fetch(
+    `${host}/eliseCrmApi/pub/building/${buildingSlug}/layouts`
+  );
+  const layouts: string[] = await layoutsResponse.json();
+
+  building.unitOptionsV2 = units;
+  building.layoutOptionsV2 = layouts;
   return building;
 }