@meetelise/chat 1.31.0 → 1.32.0

package/src/WebComponent/FeeCalculator/fee-calculator.ts

@@ -1,14 +1,19 @@
 import { LitElement, html, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
 import { feeCalculatorStyles } from "./fee-calculator-styles";
 import fetchBuildingWebchatView, {
   BuildingWebchatView,
   LayoutOption,
 } from "../../fetchBuildingWebchatView";
 import { BuildingFee, RecurrenceFrequency } from "./model/building-fee";
-import fetchBuildingFees from "../../services/fees/fetchBuildingFees";
-import { ALL_LAYOUTS_OPTION, CALCULATE_DEBOUNCE_MS } from "./constants";
+import fetchBuildingFees, {
+  RentableItemSummary,
+} from "../../services/fees/fetchBuildingFees";
+import {
+  ALL_LAYOUTS_OPTION,
+  CALCULATE_DEBOUNCE_MS,
+  DEFAULT_LEASE_TERM,
+} from "./constants";
 import {
   calculateQuote,
   CalculateQuoteResponse,
@@ -19,6 +24,8 @@ import { defaultBackgroundColor, defaultPrimaryColor } from "../../themes";
 import debounce from "lodash/debounce";
 import { XOutlineIcon } from "../icons/XOutlineIcon";
 import { IncentiveV2 } from "../../types/incentive-v2";
+import { Unit } from "../../services/fees/fetchBuildingUnits";
+import { TODAY } from "../../globals";
 
 import "./components";
 import "./components/fee-calculator-layout/fee-calculator-layout";
@@ -41,9 +48,6 @@ export class FeeCalculator extends LitElement {
   @property({ type: String })
   private backgroundColor: string = defaultBackgroundColor;
 
-  @property({ attribute: true, type: Boolean })
-  compactDesign = false;
-
   @property()
   onCloseClicked: (() => void) | null = null;
 
@@ -66,7 +70,7 @@ export class FeeCalculator extends LitElement {
   private selectedLayoutIds: number[] = [ALL_LAYOUTS_OPTION];
 
   @state()
-  private selectedUnitId: number | null = null;
+  private selectedUnit: Unit | null = null;
 
   @state()
   private desiredAddons: DesiredAddon[] = [];
@@ -75,10 +79,10 @@ export class FeeCalculator extends LitElement {
   private desiredRentableItems: DesiredRentableItem[] = [];
 
   @state()
-  private leaseTerm = 12;
+  private leaseTerm = DEFAULT_LEASE_TERM;
 
   @state()
-  private moveInDate: Date | null = null;
+  private moveInDate: Date | null = TODAY;
 
   @state()
   private buildingWebchatView: BuildingWebchatView | null = null;
@@ -115,17 +119,27 @@ export class FeeCalculator extends LitElement {
     [RecurrenceFrequency.Unknown]: [],
   };
 
+  @state()
+  private rentableItems: RentableItemSummary[] = [];
+
   private debouncedCalculateQuote = debounce(async (): Promise<void> => {
-    if (!this.selectedUnitId || !this.moveInDate) return;
+    if (!this.selectedUnit || !this.moveInDate) return;
+
+    // If lead's desired move in date is before the their selected unit's earliest available date
+    // use the unit's earliest available date (otherwise pricing will be incorrect)
+    const moveInDate =
+      this.moveInDate < new Date(this.selectedUnit.earliestAvailable)
+        ? this.selectedUnit.earliestAvailable
+        : this.moveInDate?.toISOString().split("T")[0];
 
     try {
       this.quote = await calculateQuote({
         buildingSlug: this.buildingSlug,
-        unitId: this.selectedUnitId,
+        unitId: this.selectedUnit.id,
         addons: this.desiredAddons,
         rentableItems: this.desiredRentableItems,
         leaseTerm: this.leaseTerm,
-        moveInDate: this.moveInDate.toISOString().split("T")[0],
+        moveInDate,
       });
     } finally {
       this.isLoading = false;
@@ -155,7 +169,10 @@ export class FeeCalculator extends LitElement {
 
     this.buildingWebchatView = buildingWebchatView;
     this.groupedFees = this.groupFees(buildingFeeResponse.fees);
-    this.incentives = buildingFeeResponse.buildingIncentives;
+    this.rentableItems = buildingFeeResponse.rentableItems;
+
+    // TODO(Leo): Re-enable
+    // this.incentives = buildingFeeResponse.buildingIncentives;
 
     this.enabledChatWidgets = {
       callDesktop: this.buildingWebchatView?.shouldShowPhoneDesktop ?? false,
@@ -177,14 +194,14 @@ export class FeeCalculator extends LitElement {
   }
 
   calculateQuote = async (): Promise<void> => {
-    if (!this.selectedUnitId || !this.moveInDate) return;
+    if (!this.selectedUnit || !this.moveInDate) return;
 
     this.isLoading = true;
     this.debouncedCalculateQuote();
   };
 
-  handleUnitSelect = (unitId: number): void => {
-    this.selectedUnitId = unitId;
+  handleUnitSelect = (unit: Unit): void => {
+    this.selectedUnit = unit;
     this.calculateQuote();
   };
 
@@ -216,9 +233,18 @@ export class FeeCalculator extends LitElement {
   };
 
   handleRentableItemSelect = (rentableItem: DesiredRentableItem): void => {
-    this.desiredRentableItems = this.desiredRentableItems.filter(
-      (item) => item.id !== rentableItem.id
+    const isExistingRentableItem = this.desiredRentableItems.some(
+      (item) => item.id === rentableItem.id
     );
+
+    if (isExistingRentableItem) {
+      this.desiredRentableItems = this.desiredRentableItems.filter(
+        (item) => item.id !== rentableItem.id
+      );
+    } else {
+      this.desiredRentableItems.push(rentableItem);
+    }
+
     this.calculateQuote();
   };
 
@@ -273,14 +299,9 @@ export class FeeCalculator extends LitElement {
   };
 
   render(): TemplateResult {
-    const containerClasses = {
-      "fee-calculator-container": true,
-      compact: this.compactDesign,
-    };
-
     return html`
       <div
-        class=${classMap(containerClasses)}
+        class="fee-calculator-container"
         @keydown=${(e: KeyboardEvent) => e.stopPropagation()}
         @keyup=${(e: KeyboardEvent) => e.stopPropagation()}
       >
@@ -320,8 +341,9 @@ export class FeeCalculator extends LitElement {
           <fee-calculator-layout
             .buildingSlug=${this.buildingSlug}
             .isLoading=${this.isLoading}
-            .selectedUnitId=${this.selectedUnitId}
+            .selectedUnit=${this.selectedUnit}
             .groupedFees=${this.groupedFees}
+            .rentableItems=${this.rentableItems}
             .quote=${this.quote}
             .layoutOptions=${this.layouts}
             .selectedLayoutIds=${this.selectedLayoutIds}
@@ -330,6 +352,7 @@ export class FeeCalculator extends LitElement {
             .onMoveInDateChange=${this.handleMoveInDateChange}
             .onLeaseTermChange=${this.handleLeaseTermChange}
             .onAddonSelect=${this.handleAddonSelect}
+            .onRentableItemSelect=${this.handleRentableItemSelect}
           ></fee-calculator-layout>
         </div>
 

package/src/WebComponent/actions/call-us-window.ts

@@ -300,16 +300,38 @@ export class CallUsWindow extends LitElement {
       </div>
 
       <div class="text-us-window__description">
-        By providing your number and clicking send, you consent to receive
-        recurring marketing calls and voice and text messages from or on behalf
-        of ${this.orgLegalName} at this number using artificial voice or an
-        autodialer system. Messages may be AI or human generated. This consent
-        is not required to lease at this property. Msg & Data rates may apply.
-        You consent to this
-        <a target="_blank" href="http://bit.ly/me_privacy_policy"
-          >privacy policy</a
-        >, including having your number and communications recorded and used by
-        a third party.
+        ${this.orgSlug === "greystar"
+          ? html`By providing your phone number and clicking send, you consent
+              to receive recurring marketing calls and voice and text messages
+              from Greystar or on its behalf at this number using artificial
+              voice and/or an autodialer. Messages may be AI or human-generated.
+              Your phone number and communications are shared with and recorded
+              and used by EliseAI. You are not required to provide your phone
+              number or consent to these terms to lease at this property. Msg &
+              Data rates may apply. You consent to
+              <a
+                href="https://www.greystar.com/privacy"
+                target="_blank"
+                rel="noopener noreferrer"
+                >Greystar's Global Privacy Policy</a
+              >
+              and
+              <a
+                href="http://bit.ly/me_privacy_policy"
+                target="_blank"
+                rel="noopener noreferrer"
+                >EliseAI's Privacy Policy</a
+              >.`
+          : html`By providing your number and clicking send, you consent to
+              receive recurring marketing calls and voice and text messages from
+              or on behalf of ${this.orgLegalName} at this number using
+              artificial voice or an autodialer system. Messages may be AI or
+              human generated. This consent is not required to lease at this
+              property. Msg & Data rates may apply. You consent to this
+              <a target="_blank" href="http://bit.ly/me_privacy_policy"
+                >privacy policy</a
+              >, including having your number and communications recorded and
+              used by a third party.`}
       </div>
     </div>`;
   };

package/src/WebComponent/launcher/Launcher.ts

@@ -1260,7 +1260,6 @@ export class Launcher extends LitElement {
                   orgSlug="${this.orgSlug}"
                   primaryColor="${this.primaryColor}"
                   backgroundColor="${this.backgroundColor}"
-                  .compactDesign=${this.showTourNextToChat}
                   .onCloseClicked=${this.onCloseCalculatorWindow}
                   .onClickEmailOption=${this.onClickEmailOption}
                   .onClickPhoneOption=${this.onClickPhoneOption}

package/src/WebComponent/me-chat.ts

@@ -24,7 +24,7 @@ import fetchPhoneNumberFromSource, {
 } from "../fetchPhoneNumberFromSource";
 import { defaultPrimaryColor, defaultBackgroundColor } from "../themes";
 import getShouldShowWebchat from "../getShouldShowWebchat";
-import { isMobile, isTestEnv } from "../utils";
+import { isMobile } from "../utils";
 import { installLauncher } from "./launcher/Launcher";
 import parseISO from "date-fns/parseISO";
 import isPast from "date-fns/isPast";
@@ -117,6 +117,7 @@ export class MEChat extends LitElement {
       bottom: 0;
     }
   `;
+
   @property({ type: String })
   private buildingSlug = "";
   @property({ type: String })
@@ -356,13 +357,9 @@ export class MEChat extends LitElement {
       : await getBuildingPhoneNumber(this.buildingSlug);
 
     const shouldShowCalcDesktop =
-      (this.buildingWebchatView?.shouldShowPricingCalculatorDesktop &&
-        isTestEnv()) ??
-      false;
+      this.buildingWebchatView?.shouldShowPricingCalculatorDesktop ?? false;
     const shouldShowCalcMobile =
-      (this.buildingWebchatView?.shouldShowPricingCalculatorMobile &&
-        isTestEnv()) ??
-      false;
+      this.buildingWebchatView?.shouldShowPricingCalculatorMobile ?? false;
 
     this.enabledChatWidgets = {
       callDesktop: this.buildingWebchatView?.shouldShowPhoneDesktop ?? false,

package/src/globals.ts

@@ -1 +1,3 @@
 export const BASE_DOMAIN = "https://app.meetelise.com";
+
+export const TODAY = new Date();

package/src/services/fees/calculateQuote.ts

@@ -27,7 +27,6 @@ export type DesiredAddon = {
 
 export type DesiredRentableItem = {
   id: number;
-  quantity: number;
   type: string;
 };
 

package/src/services/fees/fetchBuildingUnits.ts

@@ -0,0 +1,84 @@
+import axios from "axios";
+import { LogType, sendLoggingEvent } from "../../analytics";
+import { BASE_DOMAIN } from "../../globals";
+import { camelize } from "../../utils";
+import QueryParamBuilder from "../../utils/queryParamBuilder";
+
+export type Unit = {
+  /**
+   * ID comes back in the format "u1234567890" - we strip the "u"
+   */
+  id: number;
+  unitNumber: string;
+  layout: number;
+  externalFloorPlanDescriptionId: string;
+  numberOfBedrooms: number;
+  numberOfBathrooms: number;
+  squareFootage: number;
+  floor: number;
+  floorplanName: string;
+  floorplanUrl: string;
+  availabilityStage: string;
+  earliestAvailable: string;
+  latestAvailable: string;
+  startingPrice: number;
+  maxPrice: number;
+};
+
+type FetchPropertyUnitsParams = {
+  buildingSlug: string;
+  numBedrooms?: number;
+  moveInDateEarliest?: Date;
+  moveInDateLatest?: Date;
+  leaseTermMin?: number;
+};
+
+const fetchBuildingUnits = async ({
+  buildingSlug,
+  numBedrooms,
+  moveInDateEarliest,
+  moveInDateLatest,
+  leaseTermMin,
+}: FetchPropertyUnitsParams): Promise<Unit[]> => {
+  try {
+    const queryParamBuilder = new QueryParamBuilder();
+    queryParamBuilder
+      .addSingle("num_bedrooms", numBedrooms?.toString())
+      .addSingle(
+        "move_in_date_earliest",
+        moveInDateEarliest?.toISOString().split("T")[0]
+      )
+      .addSingle(
+        "move_in_date_latest",
+        moveInDateLatest?.toISOString().split("T")[0]
+      )
+      .addSingle("lease_term_min", leaseTermMin?.toString());
+
+    const queryString = queryParamBuilder.build();
+    const propertyUnitsResponse = await axios.get(
+      `${BASE_DOMAIN}/platformApi/webchat/${buildingSlug}/units${queryString}`
+    );
+
+    if (propertyUnitsResponse.data) {
+      const camelizedUnits = camelize<Unit[]>(propertyUnitsResponse.data);
+      return camelizedUnits.map((unit) => ({
+        ...unit,
+        id: parseInt(unit.id.toString().substring(1)),
+      }));
+    }
+  } catch (error) {
+    sendLoggingEvent({
+      logType: LogType.error,
+      buildingSlug,
+      logTitle: "[ERROR_GETTING_UNITS]",
+      logData: {
+        error,
+        params: { numBedrooms, moveInDateEarliest, moveInDateLatest },
+      },
+    });
+  }
+
+  return [];
+};
+
+export default fetchBuildingUnits;

package/src/utils/queryParamBuilder.ts

@@ -0,0 +1,28 @@
+class QueryParamBuilder {
+  private params: URLSearchParams;
+
+  constructor() {
+    this.params = new URLSearchParams();
+  }
+
+  addSingle(key: string, value?: string): QueryParamBuilder {
+    if (!value) return this;
+    this.params.append(key, value);
+    return this;
+  }
+
+  addArray(key: string, values?: string[]): QueryParamBuilder {
+    if (!values) return this;
+    values.forEach((value) => {
+      if (!value) return;
+      this.params.append(`${key}[]`, value);
+    });
+    return this;
+  }
+
+  build(): string {
+    return this.params.toString() ? `?${this.params.toString()}` : "";
+  }
+}
+
+export default QueryParamBuilder;

package/dist/src/WebComponent/FeeCalculator/components/addon-item/index.d.ts

@@ -1 +0,0 @@
-export * from "./addon-item";

package/dist/src/services/fees/fetchBuildingFloorplans.d.ts

@@ -1,21 +0,0 @@
-export declare type Floorplan = {
-    unitId: number;
-    name: string;
-    bedrooms: number;
-    bathrooms: number;
-    numAvailable: number;
-    startingPrice: number;
-    maxPrice: number;
-    earliestAvailable: string;
-    latestAvailable: string;
-    squareFeet: number;
-    url: string | null;
-};
-declare type FetchFloorplansParams = {
-    buildingSlug: string;
-    numBedrooms?: number;
-    moveInDateEarliest?: Date;
-    moveInDateLatest?: Date;
-};
-declare const fetchBuildingFloorplans: ({ buildingSlug, numBedrooms, moveInDateEarliest, moveInDateLatest, }: FetchFloorplansParams) => Promise<Floorplan[]>;
-export default fetchBuildingFloorplans;

package/src/WebComponent/FeeCalculator/components/addon-item/index.ts

@@ -1 +0,0 @@
-export * from "./addon-item";