@meetelise/chat 1.20.3 → 1.20.5

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,13 @@ export class MESelect extends LitElement {
     this.isOpen = !this.isOpen;
   };
 
-  setSelectedOption = (option: string, closeSelect = true): void => {
-    this.value = option;
+  setSelectedOption = (option: MeSelectOption, closeSelect = true): void => {
+    if (this.value !== option.value) {
+      this.value = option.value;
+    } else {
+      this.value = undefined;
+    }
+
     if (closeSelect) {
       this.isOpen = !this.isOpen;
       this.activeOption = null;
@@ -103,6 +113,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 +123,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 {
@@ -195,7 +216,10 @@ export class MESelect extends LitElement {
             }
           }}"
         >
-          <span id="selectText">${this.value ?? this.placeholder}</span>
+          <span id="selectText"
+            >${this.options.find((o) => o.value === this.value)?.label ??
+            this.placeholder}</span
+          >
           <svg
             width="10"
             height="6"
@@ -228,7 +252,7 @@ export class MESelect extends LitElement {
                       active: this.activeOption === option,
                     })}"
                   >
-                    ${option}
+                    ${option.label}
                   </li>`
               )}
             </ul>`

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,29 @@ 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
+        ? [this.layoutTypeSelect.value]
+        : null,
+      unit_numbers: this.unitTypeSelect.value
+        ? [this.unitTypeSelect.value]
+        : null,
     };
     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 +383,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 +477,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 +492,7 @@ export class TourScheduler extends LitElement {
       color: #202020;
     }
 
-    #unitChoiceMenu {
+    .unitLayoutChoices {
       grid-row: 5 / 6;
       grid-column: 3;
       align-self: start;
@@ -472,11 +500,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 +616,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 +624,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.
@@ -933,24 +974,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"
@@ -984,11 +1030,58 @@ 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 layout"
+                  .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.filter(
+          (i) =>
+            !this.layoutTypeSelect || i.layout === this.layoutTypeSelect.value
+        ).length > 0
+          ? html`<div class="unitLayoutChoice">
+              <div class="unitLayoutOptions">
+                <me-select
+                  id="unitType"
+                  placeholder="Select unit"
+                  .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 {

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