@meetelise/chat 1.43.42 → 1.45.0

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

@@ -29,6 +29,7 @@ import { DatePicker } from "./date-picker";
 import { MESelect } from "../me-select";
 import { TimePicker } from "./time-picker";
 import { LabeledOption } from "../../fetchBuildingInfo";
+import { LayoutOption } from "../../fetchBuildingWebchatView";
 import {
   isMobile,
   isValidEmail,
@@ -61,6 +62,9 @@ import { getTimezoneAbbreviation } from "../../getTimezoneString";
 import startOfDay from "date-fns/startOfDay";
 import isSameDay from "date-fns/isSameDay";
 import { LeadSourceMultitouchClient } from "../LeadSourceMultitouchClient";
+import fetchBuildingUnitsSummary, {
+  UnitSummary,
+} from "../../fetchBuildingUnitsSummary";
 
 @customElement("tour-scheduler")
 export class TourScheduler extends LitElement {
@@ -79,6 +83,8 @@ export class TourScheduler extends LitElement {
 
   @property({ attribute: false })
   tourTypeOptions: LabeledOption[] = [];
+  @property({ attribute: false })
+  layoutOptions: LayoutOption[] = [];
   @property({ attribute: true })
   chatId = "";
   @property({ type: Number })
@@ -191,6 +197,10 @@ export class TourScheduler extends LitElement {
   phoneInput!: HTMLInputElement;
   @query("me-select#leadSource")
   selectedLeadSource!: MESelect;
+  @query("me-select#layout")
+  selectedLayoutEl?: MESelect;
+  @query("me-select#unit")
+  selectedUnitEl?: MESelect;
 
   @state()
   firstNameInputValue = "";
@@ -198,6 +208,14 @@ export class TourScheduler extends LitElement {
   lastNameInputValue = "";
   @state()
   leadSourceInputValue = "";
+  @state()
+  selectedLayoutValue = "";
+  @state()
+  selectedUnitValue = "";
+  @state()
+  private units: UnitSummary[] = [];
+  @state()
+  private allowOccupiedUnitTours = false;
 
   @state()
   errorGettingAvailabilities = false;
@@ -403,8 +421,51 @@ export class TourScheduler extends LitElement {
     return null;
   };
 
+  _getUnitOptions = (): { label: string; value: string }[] => {
+    const visible = this.selectedLayoutValue
+      ? this.units.filter(
+          (u) =>
+            layoutValueToCanonical(u.numberOfBedrooms * 10) ===
+            this.selectedLayoutValue
+        )
+      : this.units;
+    const unitOptions = visible.map((u) => ({
+      label: u.unitNumber,
+      value: u.unitNumber,
+    }));
+    return unitOptions;
+  };
+
+  _fetchUnits = async (): Promise<void> => {
+    if (!this.buildingSlug) return;
+    try {
+      this.units = await fetchBuildingUnitsSummary({
+        buildingSlug: this.buildingSlug,
+      });
+    } catch (e) {
+      this.units = [];
+      sendLoggingEvent({
+        logTitle: "ERROR_LOADING_UNITS_FOR_TOUR_SCHEDULER",
+        logData: { error: e },
+        logType: LogType.error,
+        buildingSlug: this.buildingSlug,
+        orgSlug: this.orgSlug,
+      });
+    }
+  };
+
   firstUpdated = async (): Promise<void> => {
-    await this._setAvailabilities();
+    await Promise.all([
+      this._setAvailabilities().then(async () => {
+        try {
+          const rawAvailabilities = await getRawAvailabilities(this.buildingId);
+          this.allowOccupiedUnitTours = !!rawAvailabilities.allowOccupiedUnitTours;
+        } catch (e) {
+          this.allowOccupiedUnitTours = false;
+        }
+      }),
+      this._fetchUnits(),
+    ]);
   };
 
   protected willUpdate = async (
@@ -643,6 +704,10 @@ export class TourScheduler extends LitElement {
       this.lastNameInputValue = this.lastNameInput.value;
     }
     this.leadSourceInputValue = parsedLeadSource;
+    const selectedLayout =
+      this.selectedLayoutEl?.value || this.selectedLayoutValue || null;
+    const selectedUnit =
+      this.selectedUnitEl?.value || this.selectedUnitValue || null;
     pushGtmEvent("scheduleTourSubmitted", {
       email: this.email,
       phone: `+1${this.phoneNumber.match(/\d/g)?.join("")}`,
@@ -652,6 +717,8 @@ export class TourScheduler extends LitElement {
       tourTime: `${this.selectedTime.datetime}${this.selectedTime.offset}`,
       originatingSource:
         leadSources.find((i) => i !== "property-website") || null,
+      layout: selectedLayout,
+      unit: selectedUnit,
     });
     const data = {
       referrer: document.referrer,
@@ -672,6 +739,8 @@ export class TourScheduler extends LitElement {
       ],
       query_params: Object.fromEntries(queryParams.entries()),
       conversation_tracking_id: this.leadSourceClient?.chatId,
+      layouts: selectedLayout ? [selectedLayout] : undefined,
+      unit_numbers: selectedUnit ? [selectedUnit] : undefined,
       lead_sources_with_timestamps: (
         this.leadSourceMultitouchClient?.getSafeLeadSourceTouchpointsWithDefault(
           {
@@ -1225,6 +1294,61 @@ export class TourScheduler extends LitElement {
             ? html`<p class="error-message">Invalid phone number</p>`
             : ""}
         </div>
+        ${this.layoutOptions.length > 0
+          ? html` <me-select
+              id="layout"
+              placeholder="Bedroom preference (optional)"
+              .options="${this.layoutOptions.map((o) => ({
+                label: o.label,
+                value: layoutValueToCanonical(o.value),
+              }))}"
+              @change=${() => {
+                const v = this.selectedLayoutEl?.value || "";
+                this.selectedLayoutValue = v;
+                // Clear unit selection if it no longer matches the new layout.
+                if (v && this.selectedUnitValue) {
+                  const unit = this.units.find(
+                    (u) => u.unitNumber === this.selectedUnitValue
+                  );
+                  if (
+                    unit &&
+                    layoutValueToCanonical(unit.numberOfBedrooms * 10) !== v
+                  ) {
+                    this.selectedUnitValue = "";
+                    if (this.selectedUnitEl) {
+                      this.selectedUnitEl.value = undefined;
+                    }
+                  }
+                }
+                if (v) {
+                  pushGtmEvent("tourLayoutSelected", {
+                    layout: v,
+                    buildingId: this.buildingId,
+                  });
+                }
+              }}
+            >
+            </me-select>`
+          : ""}
+        ${this.allowOccupiedUnitTours && this._getUnitOptions().length > 0
+          ? html` <me-select
+              id="unit"
+              placeholder="Unit preference (optional)"
+              .value=${this.selectedUnitValue}
+              .options="${this._getUnitOptions()}"
+              @change=${() => {
+                const v = this.selectedUnitEl?.value || "";
+                this.selectedUnitValue = v;
+                if (v) {
+                  pushGtmEvent("tourUnitSelected", {
+                    unit: v,
+                    buildingId: this.buildingId,
+                  });
+                }
+              }}
+            >
+            </me-select>`
+          : ""}
         ${this.leadSources.length > 0 &&
         (this.featureFlagShowDropdown === FeatureFlagsShowDropdown.always ||
           (this.featureFlagShowDropdown ===
@@ -1678,3 +1802,9 @@ const tourTypeForSubmission = {
   [TourType.Self]: "self-guided-tour",
   [TourType.Virtual]: "live-virtual-tour",
 };
+
+// LayoutOption.value is bedrooms * 10; EliseAI classifier expects `studio` / `Nbr`.
+function layoutValueToCanonical(value: number): string {
+  const bedrooms = Math.round(value / 10);
+  return bedrooms === 0 ? "studio" : `${bedrooms}br`;
+}

package/src/WebComponent/launcher/Launcher.ts

@@ -21,7 +21,7 @@ import {
 } from "../../themes";
 import "./mobile-launcher";
 import "../actions/collapse-expand-button";
-import { DesignConcepts } from "../../fetchBuildingWebchatView";
+import { DesignConcepts, LayoutOption } from "../../fetchBuildingWebchatView";
 import { isMobile, onMobileChange } from "../../utils";
 import classNames from "classnames";
 import LeadSourceClient from "../LeadSourceClient";
@@ -141,6 +141,9 @@ export class Launcher extends LitElement {
 
   @property({ attribute: false })
   tourTypeOptions: LabeledOption[] = [];
+
+  @property({ attribute: false })
+  layoutOptions: LayoutOption[] = [];
   @property({ attribute: true })
   hasDynamicSchedulingEnabled = false;
 
@@ -1299,6 +1302,7 @@ export class Launcher extends LitElement {
                 .hasDynamicSchedulingEnabled=${this.hasDynamicSchedulingEnabled}
                 .leadSources="${this.leadSources}"
                 .tourTypeOptions=${this.tourTypeOptions}
+                .layoutOptions=${this.layoutOptions}
                 .orgLegalName=${this.orgLegalName}
                 buildingId=${this.buildingId}
                 featureFlagShowDropdown="${this.featureFlagShowDropdown}"

package/src/WebComponent/me-chat.ts

@@ -1005,6 +1005,8 @@ export class MEChat extends LitElement {
                   .orgLegalName=${this.buildingWebchatView?.orgLegalName ?? ""}
                   .tourTypeOptions=${this.buildingWebchatView
                     ?.tourTypeOptions ?? []}
+                  .layoutOptions=${this.buildingWebchatView?.layoutOptions ??
+                  []}
                   .launcherStyles=${this.launcherStyles}
                   .primaryColor=${this.primaryColor}
                   .backgroundColor=${this.backgroundColor}

package/src/fetchBuildingUnitsSummary.ts

@@ -0,0 +1,37 @@
+import axios from "axios";
+import { LogType, sendLoggingEvent } from "./analytics";
+import { BASE_DOMAIN } from "./globals";
+import { camelize } from "./utils";
+
+export type UnitSummary = {
+  id: string;
+  unitNumber: string;
+  numberOfBedrooms: number;
+};
+
+type FetchBuildingUnitsSummaryParams = {
+  buildingSlug: string;
+};
+
+const fetchBuildingUnitsSummary = async ({
+  buildingSlug,
+}: FetchBuildingUnitsSummaryParams): Promise<UnitSummary[]> => {
+  try {
+    const response = await axios.get(
+      `${BASE_DOMAIN}/platformApi/webchat/${buildingSlug}/units/summary`
+    );
+    if (response.data) {
+      return camelize<UnitSummary[]>(response.data);
+    }
+  } catch (error) {
+    sendLoggingEvent({
+      logType: LogType.error,
+      buildingSlug,
+      logTitle: "[ERROR_GETTING_UNITS_SUMMARY]",
+      logData: { error },
+    });
+  }
+  return [];
+};
+
+export default fetchBuildingUnitsSummary;

package/src/types/rest-sdk.types.ts

@@ -10,4 +10,8 @@ export enum TourAvailabilityResponseRankOrderedSupportedTourTypesEnum {
 }
 
 // Types are safe to re-export as they are not included in runtime code.
-export type { TourAvailabilityResponse } from "@meetelise/rest-sdk";
+import type { TourAvailabilityResponse as SdkTourAvailabilityResponse } from "@meetelise/rest-sdk";
+
+export type TourAvailabilityResponse = SdkTourAvailabilityResponse & {
+  allowOccupiedUnitTours?: boolean;
+};