@meetelise/chat 1.44.0 → 1.46.0

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

@@ -57,11 +57,18 @@ import { TourVirtuallyIcon } from "../icons/TourVirtuallyIcon";
 import { TourSelfGuidedIcon } from "../icons/TourSelfGuidedIcon";
 import { TourWithAgentIcon } from "../icons/TourWithAgentIcon";
 import { shouldOpenTourLink } from "../../fetchBuildingWebchatView";
+import fetchBuildingWebchatView from "../../fetchBuildingWebchatView";
+import fetchCentralConvoBuildings, {
+  CentralConvoBuilding,
+} from "../../fetchCentralConvoBuildings";
 import formatInTimeZone from "date-fns-tz/formatInTimeZone";
 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 +203,8 @@ export class TourScheduler extends LitElement {
   selectedLeadSource!: MESelect;
   @query("me-select#layout")
   selectedLayoutEl?: MESelect;
+  @query("me-select#unit")
+  selectedUnitEl?: MESelect;
 
   @state()
   firstNameInputValue = "";
@@ -205,10 +214,23 @@ export class TourScheduler extends LitElement {
   leadSourceInputValue = "";
   @state()
   selectedLayoutValue = "";
+  @state()
+  selectedUnitValue = "";
+  @state()
+  private units: UnitSummary[] = [];
+  @state()
+  private allowOccupiedUnitTours = false;
 
   @state()
   errorGettingAvailabilities = false;
 
+  @state()
+  private centralConvoBuildings: CentralConvoBuilding[] = [];
+  @query("me-select#building")
+  selectedBuildingEl?: MESelect;
+  @state()
+  private statusMessage = "";
+
   _setAvailabilities = async (): Promise<void> => {
     try {
       const [allowScheduling, availabilitiesExistForTourType] =
@@ -410,10 +432,151 @@ 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();
+    this._fetchCentralConvoBuildings();
+    await this._loadForCurrentBuilding();
+  };
+
+  private _loadForCurrentBuilding = async (): Promise<void> => {
+    try {
+      await getRawAvailabilities(this.buildingId);
+    } catch (e) {
+      // noop
+    }
+    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(),
+    ]);
+  };
+
+  private _fetchCentralConvoBuildings = async (): Promise<void> => {
+    if (!this.orgSlug || !this.buildingSlug) return;
+    try {
+      this.centralConvoBuildings = await fetchCentralConvoBuildings(
+        this.orgSlug,
+        this.buildingSlug
+      );
+    } catch (e) {
+      this.centralConvoBuildings = [];
+    }
   };
 
+  private _onBuildingChange = async (): Promise<void> => {
+    const slug = this.selectedBuildingEl?.value;
+    if (!slug || slug === this.buildingSlug) return;
+    const building = this.centralConvoBuildings.find((b) => b.slug === slug);
+    if (!building) return;
+
+    this.waitingForAvailabilities = true;
+    this.errorGettingAvailabilities = false;
+    this.tourType = null;
+    this.selectedDate = undefined;
+    this.selectedTime = undefined;
+    this.availabilitiesGroupedByDay = {};
+    this.mobilePageIndex = 0;
+    this.units = [];
+    this.selectedLayoutValue = "";
+    this.selectedUnitValue = "";
+
+    this.buildingId = building.building_id;
+    this.buildingSlug = building.slug;
+    this.buildingName = building.name;
+    this.statusMessage = `Loading tours for ${building.name}…`;
+
+    pushGtmEvent("tourBuildingSelected", {
+      buildingId: building.building_id,
+    });
+
+    try {
+      const view = await fetchBuildingWebchatView(this.orgSlug, building.slug);
+      this.sgtUrl = view.sgtUrl;
+      this.selfGuidedToursTypeOffered = view.selfGuidedToursTypeOffered;
+      this.selfGuidedTourEnabled = view.isSelfGuidedTourEnabled;
+      this.escortedToursLink = view.escortedToursLink;
+      this.escortedToursTypeOffered = view.escortedToursTypeOffered;
+      this.virtualToursLink = view.virtualToursLink;
+      this.virtualToursTypeOffered = view.virtualToursTypeOffered;
+      this.tourTypeOptions = view.tourTypeOptions.map((o) => ({
+        label: o.label,
+        value: o.value,
+      }));
+      this.hasDynamicSchedulingEnabled = view.usesDynamicScheduling;
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error("Failed to load building config for selection", e);
+    }
+
+    await this._loadForCurrentBuilding();
+
+    if (!this.shouldAllowScheduling || this.errorGettingAvailabilities) {
+      this.statusMessage = `No tour availabilities for ${building.name}.`;
+    } else {
+      const count = Object.values(this.shouldShowTourType).filter(
+        Boolean
+      ).length;
+      this.statusMessage = `Showing tours for ${
+        building.name
+      }. ${count} tour type${count === 1 ? "" : "s"} available.`;
+    }
+  };
+
+  buildingSelector(): TemplateResult | string {
+    if (this.centralConvoBuildings.length <= 1) return "";
+    return html`<h2 class="journey-header">Building</h2>
+      <me-select
+        id="building"
+        placeholder="Select a property"
+        .value=${this.buildingSlug}
+        .options="${this.centralConvoBuildings.map((b) => ({
+          label: b.name,
+          value: b.slug,
+        }))}"
+        @change=${this._onBuildingChange}
+      >
+      </me-select>`;
+  }
+
   protected willUpdate = async (
     _changedProperties:
       | PropertyValueMap<{ tourType: TourType }>
@@ -652,6 +815,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 +827,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 +849,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(
           {
@@ -773,7 +940,8 @@ export class TourScheduler extends LitElement {
   static styles = [tourSchedulerStyles, InputStyles];
 
   tourTypeMenu(): TemplateResult {
-    return html`<h2 id="tour-type-heading" class="journey-header">Tour Type</h2>
+    return html`${this.buildingSelector()}
+      <h2 id="tour-type-heading" class="journey-header">Tour Type</h2>
       <div
         id="tour-type-menu"
         role="radiogroup"
@@ -1247,6 +1415,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 +1440,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 ===
@@ -1368,6 +1570,15 @@ export class TourScheduler extends LitElement {
   }
 
   render(): TemplateResult {
+    return html`
+      <div class="sr-only" role="status" aria-live="polite">
+        ${this.statusMessage}
+      </div>
+      ${this.renderBody()}
+    `;
+  }
+
+  private renderBody(): TemplateResult {
     const isLoading =
       this.waitingForAvailabilities || this.shouldAllowScheduleLoading;
     if (!this.shouldAllowScheduling && !isLoading) {

package/src/WebComponent/Scheduler/tourSchedulerStyles.ts

@@ -111,6 +111,17 @@ export const tourSchedulerStyles = css`
     font-size: 14px;
     font-weight: 600;
   }
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
   #close-button {
     background: none;
     border: none;
@@ -138,6 +149,11 @@ export const tourSchedulerStyles = css`
     padding-bottom: 12px;
   }
 
+  me-select#building {
+    display: block;
+    margin-bottom: 20px;
+  }
+
   #tour-type-menu-outer-container {
     width: 220px;
   }

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/fetchCentralConvoBuildings.ts

@@ -0,0 +1,32 @@
+import axios from "axios";
+
+export interface CentralConvoBuilding {
+  building_id: number;
+  name: string;
+  slug: string;
+}
+
+/**
+ * Fetch the buildings that belong to the same central conversation group as the
+ * current building. Returns an empty array when the building is not part of a
+ * central conversation group (in which case no building selector is shown).
+ *
+ * @param orgSlug - The org slug, e.g. "big-prop-co"
+ * @param buildingSlug - The current building's slug, e.g. "gravity-falls"
+ */
+export default async function fetchCentralConvoBuildings(
+  orgSlug: string,
+  buildingSlug: string
+): Promise<CentralConvoBuilding[]> {
+  const host = "https://app.meetelise.com";
+  const url = `${host}/platformApi/webchat/central-convo-buildings`;
+
+  const response = await axios.get<CentralConvoBuilding[]>(url, {
+    headers: {
+      ["building-slug"]: buildingSlug,
+      ["org-slug"]: orgSlug,
+    },
+  });
+
+  return response.data ?? [];
+}

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