@meetelise/chat 1.44.0 → 1.45.0

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

@@ -62,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 {
@@ -196,6 +199,8 @@ export class TourScheduler extends LitElement {
   selectedLeadSource!: MESelect;
   @query("me-select#layout")
   selectedLayoutEl?: MESelect;
+  @query("me-select#unit")
+  selectedUnitEl?: MESelect;
 
   @state()
   firstNameInputValue = "";
@@ -205,6 +210,12 @@ export class TourScheduler extends LitElement {
   leadSourceInputValue = "";
   @state()
   selectedLayoutValue = "";
+  @state()
+  selectedUnitValue = "";
+  @state()
+  private units: UnitSummary[] = [];
+  @state()
+  private allowOccupiedUnitTours = false;
 
   @state()
   errorGettingAvailabilities = false;
@@ -410,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 (
@@ -652,6 +706,8 @@ export class TourScheduler extends LitElement {
     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("")}`,
@@ -662,6 +718,7 @@ export class TourScheduler extends LitElement {
       originatingSource:
         leadSources.find((i) => i !== "property-website") || null,
       layout: selectedLayout,
+      unit: selectedUnit,
     });
     const data = {
       referrer: document.referrer,
@@ -683,6 +740,7 @@ 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(
           {
@@ -1247,6 +1305,21 @@ export class TourScheduler extends LitElement {
               @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,
@@ -1257,6 +1330,25 @@ export class TourScheduler extends LitElement {
             >
             </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 ===

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