@meetelise/chat 1.31.0 → 1.32.0

package/src/WebComponent/FeeCalculator/components/{addon-item → addons/addon-item}/addon-item.ts

@@ -1,14 +1,14 @@
 import { LitElement, html, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import { BuildingFee } from "../../model/building-fee";
-import { formatCurrency } from "../../../../utils";
+import { BuildingFee } from "../../../model/building-fee";
+import { formatCurrency } from "../../../../../utils";
+import { DesiredAddon } from "../../../../../services/fees/calculateQuote";
 
-import addonItemStyles from "./addon-item-styles";
-import { DesiredAddon } from "../../../../services/fees/calculateQuote";
+import commonAddonStyles from "../common-addon-styles";
 
 @customElement("add-on-item")
 export class AddonItem extends LitElement {
-  static styles = addonItemStyles;
+  static styles = commonAddonStyles;
 
   @property({ type: Object })
   feeItem: BuildingFee | null = null;
@@ -75,38 +75,36 @@ export class AddonItem extends LitElement {
     if (!this.feeItem || !this.feeItem.blueprint.addOnInfo) return html``;
 
     return html`
-      <div>
-        <div class="addon-container">
-          <div class="addon-left">
-            <input
-              type="checkbox"
-              ?checked=${this.isChecked}
-              @click=${this.handleCheckboxClick}
-            />
-            <div class="addon-info">
-              <p class="addon-title">${this.feeItem.displayName("Add-On")}</p>
-            </div>
+      <div class="addon-container">
+        <div class="addon-left">
+          <input
+            type="checkbox"
+            ?checked=${this.isChecked}
+            @click=${this.handleCheckboxClick}
+          />
+          <div class="addon-info">
+            <p class="addon-title">${this.feeItem.displayName("Add-On")}</p>
           </div>
+        </div>
 
-          <div class="addon-right">
-            <div class="quantity-control">
-              <button
-                class="quantity-button"
-                @click=${this.handleDecrement}
-                ?disabled=${this.quantity <= 0}
-                aria-label="Decrease quantity"
-              >
-                <span class="operator-sign">&minus;</span>
-              </button>
-              <span class="quantity-value">${this.quantity}</span>
-              <button
-                class="quantity-button"
-                @click=${this.handleIncrement}
-                aria-label="Increase quantity"
-              >
-                <span class="operator-sign">+</span>
-              </button>
-            </div>
+        <div class="addon-right">
+          <div class="quantity-control">
+            <button
+              class="quantity-button"
+              @click=${this.handleDecrement}
+              ?disabled=${this.quantity <= 0}
+              aria-label="Decrease quantity"
+            >
+              <span class="operator-sign">&minus;</span>
+            </button>
+            <span class="quantity-value">${this.quantity}</span>
+            <button
+              class="quantity-button"
+              @click=${this.handleIncrement}
+              aria-label="Increase quantity"
+            >
+              <span class="operator-sign">+</span>
+            </button>
           </div>
         </div>
       </div>

package/src/WebComponent/FeeCalculator/components/addons/rentable-item/rentable-item-styles.ts

@@ -0,0 +1,9 @@
+import { css } from "lit";
+
+const rentableItemStyles = css`
+  :host {
+    display: block;
+  }
+`;
+
+export default rentableItemStyles;

package/src/WebComponent/FeeCalculator/components/addons/rentable-item/rentable-item.ts

@@ -0,0 +1,138 @@
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { RentableItemSummary } from "../../../../../services/fees/fetchBuildingFees";
+import { DesiredRentableItem } from "../../../../../services/fees/calculateQuote";
+
+import commonAddonStyles from "../common-addon-styles";
+
+@customElement("rentable-item")
+export class RentableItem extends LitElement {
+  static styles = commonAddonStyles;
+
+  @property({ type: Object })
+  rentableItem: RentableItemSummary | null = null;
+
+  @property({ type: Function })
+  onSelect: ((rentableItem: DesiredRentableItem) => void) | null = null;
+
+  @state()
+  private isChecked = false;
+
+  @state()
+  private quantity = 0;
+
+  @state()
+  selectedItemIds: Set<string> = new Set();
+
+  get totalAvailableItems(): number {
+    return (
+      this.rentableItem?.allItems.filter((item) => item.available).length ?? 0
+    );
+  }
+
+  get quantityLeft(): number {
+    return this.totalAvailableItems - this.quantity;
+  }
+
+  get atMaxUnits(): boolean {
+    return this.quantity >= this.totalAvailableItems;
+  }
+
+  get atMinUnits(): boolean {
+    return this.quantity <= 0;
+  }
+
+  private handleCheckboxClick(): void {
+    if (!this.isChecked) {
+      this.isChecked = true;
+      this.quantity = 1;
+      this.emitChange();
+      return;
+    }
+    this.isChecked = false;
+    this.quantity = 0;
+    this.emitChange();
+  }
+
+  private handleIncrement(): void {
+    if (this.atMaxUnits) return;
+    this.isChecked = true;
+    this.quantity += 1;
+    this.emitChange();
+  }
+
+  private handleDecrement(): void {
+    if (this.atMinUnits) return;
+    this.quantity = Math.max(0, this.quantity - 1);
+    this.isChecked = this.quantity > 0;
+    this.emitChange();
+  }
+
+  private emitChange(): void {
+    if (!this.rentableItem) return;
+
+    // Find first item that is available
+    const firstAvailableItem = this.rentableItem.allItems.find(
+      (item) => item.available && !this.selectedItemIds.has(item.id)
+    );
+
+    if (!firstAvailableItem) return;
+
+    this.selectedItemIds.add(firstAvailableItem.id);
+
+    this.onSelect?.({
+      id: parseInt(firstAvailableItem.id),
+      type: this.rentableItem.type,
+    });
+  }
+
+  render(): TemplateResult {
+    if (!this.rentableItem) return html``;
+
+    const hasAvailableItems = this.totalAvailableItems > 0;
+
+    return html`
+      <div class="addon-container">
+        <div class="addon-left">
+          <input
+            type="checkbox"
+            ?checked=${this.isChecked}
+            ?disabled=${!hasAvailableItems}
+            @click=${this.handleCheckboxClick}
+          />
+          <div class="addon-info">
+            <p class="addon-title">${this.rentableItem.description}</p>
+          </div>
+        </div>
+
+        <div class="addon-right">
+          <div class="quantity-control">
+            <button
+              class="quantity-button"
+              @click=${this.handleDecrement}
+              ?disabled=${this.quantity <= 0}
+              aria-label="Decrease quantity"
+            >
+              <span class="operator-sign">&minus;</span>
+            </button>
+            <span class="quantity-value">${this.quantity}</span>
+            <button
+              class="quantity-button"
+              @click=${this.handleIncrement}
+              ?disabled=${!hasAvailableItems || this.atMaxUnits}
+              aria-label="Increase quantity"
+            >
+              <span class="operator-sign">+</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rentable-item": RentableItem;
+  }
+}

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

@@ -7,12 +7,16 @@ import { LayoutOption } from "../../../../fetchBuildingWebchatView";
 import {
   CalculateQuoteResponse,
   DesiredAddon,
+  DesiredRentableItem,
   FeeEstimate,
 } from "../../../../services/fees/calculateQuote";
+import { RentableItemSummary } from "../../../../services/fees/fetchBuildingFees";
+import { Unit } from "../../../../services/fees/fetchBuildingUnits";
 
 import "../floor-plan-selector/floor-plan-selector";
 import "../fee-card/fee-card";
-import "../addon-item/addon-item";
+import "../addons/addon-item/addon-item";
+import "../addons/rentable-item/rentable-item";
 import "../../../loaders/skeleton-loader";
 
 @customElement("fee-calculator-layout")
@@ -25,8 +29,8 @@ export class FeeCalculatorLayout extends LitElement {
   @property({ type: Boolean })
   isLoading = false;
 
-  @property({ type: Number })
-  selectedUnitId: number | null = null;
+  @property({ type: Object })
+  selectedUnit: Unit | null = null;
 
   @property({ type: Object })
   quote: CalculateQuoteResponse | null = null;
@@ -48,11 +52,14 @@ export class FeeCalculatorLayout extends LitElement {
     [RecurrenceFrequency.Unknown]: [],
   };
 
+  @property({ type: Array })
+  rentableItems: RentableItemSummary[] = [];
+
   @property()
   onSelectLayout: ((layoutIds: number[]) => void) | null = null;
 
   @property()
-  onUnitSelect: ((unitId: number) => void) | null = null;
+  onUnitSelect: ((unit: Unit) => void) | null = null;
 
   @property()
   onMoveInDateChange: ((moveInDate: Date) => void) | null = null;
@@ -63,6 +70,10 @@ export class FeeCalculatorLayout extends LitElement {
   @property()
   onAddonSelect: ((addon: DesiredAddon) => void) | null = null;
 
+  @property()
+  onRentableItemSelect: ((rentableItem: DesiredRentableItem) => void) | null =
+    null;
+
   get standardFees(): Record<RecurrenceFrequency, BuildingFee[]> {
     const result: Record<RecurrenceFrequency, BuildingFee[]> = {} as Record<
       RecurrenceFrequency,
@@ -78,15 +89,18 @@ export class FeeCalculatorLayout extends LitElement {
     return result;
   }
 
-  get addOns(): BuildingFee[] {
-    return Object.values(this.groupedFees)
+  /**
+   * A "rentable item" is simply a fee which has inventory attached to it.
+   */
+  get addOns(): (BuildingFee | RentableItemSummary)[] {
+    const addons = Object.values(this.groupedFees)
       .flat()
       .filter((fee) => {
         if (!fee.isAddOn) return false;
         if (!this.quote) return true;
 
         const unitLayout = this.quote?.units.find(
-          (unit) => unit.unitId === this.selectedUnitId
+          (unit) => unit.unitId === this.selectedUnit?.id
         )?.unitLayout;
 
         // Let the addon through if it's not layout specific
@@ -94,6 +108,8 @@ export class FeeCalculatorLayout extends LitElement {
 
         return fee.layoutIds.includes(unitLayout);
       });
+
+    return [...addons, ...this.rentableItems];
   }
 
   renderRecurrenceFeeSection(
@@ -119,7 +135,7 @@ export class FeeCalculatorLayout extends LitElement {
     ];
 
     const unitFees =
-      this.quote?.units.find((unit) => unit.unitId === this.selectedUnitId)
+      this.quote?.units.find((unit) => unit.unitId === this.selectedUnit?.id)
         ?.fees ?? [];
 
     const applicableFees = unitFees.filter((fee) => fee.applicable);
@@ -136,7 +152,7 @@ export class FeeCalculatorLayout extends LitElement {
   }
 
   renderFeesContent(): TemplateResult {
-    if (!this.selectedUnitId) {
+    if (!this.selectedUnit) {
       return html`
         <div class="fees-container empty-state">
           <p>Select a unit to view estimated costs</p>
@@ -181,14 +197,23 @@ export class FeeCalculatorLayout extends LitElement {
                 <div class="sidepanel-section">
                   <h5 class="sidepanel-section-title">Add-Ons</h5>
                   <div class="sidepanel-addons-container">
-                    ${this.addOns.map(
-                      (addon) => html`
-                        <add-on-item
-                          .feeItem=${addon}
-                          .onQuantityChange=${this.onAddonSelect}
-                        ></add-on-item>
-                      `
-                    )}
+                    ${this.addOns.map((addon) => {
+                      return html`
+                        ${addon instanceof BuildingFee
+                          ? html`
+                              <add-on-item
+                                .feeItem=${addon}
+                                .onQuantityChange=${this.onAddonSelect}
+                              ></add-on-item>
+                            `
+                          : html`
+                              <rentable-item
+                                .rentableItem=${addon}
+                                .onSelect=${this.onRentableItemSelect}
+                              ></rentable-item>
+                            `}
+                      `;
+                    })}
                   </div>
                 </div>
               `

package/src/WebComponent/FeeCalculator/components/fee-item/fee-item.ts

@@ -2,7 +2,7 @@ import { LitElement, html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { FeeEstimate } from "../../../../services/fees/calculateQuote";
 
-import "../addon-item/addon-item";
+import "../addons/addon-item/addon-item";
 
 import feeItemStyles from "./fee-item-styles";
 

package/src/WebComponent/FeeCalculator/components/floor-plan-selector/floor-plan-selector-styles.ts

@@ -14,7 +14,6 @@ const floorPlanSelectorStyles = css`
   .floor-plan-selector-label {
     font-size: 1rem;
     font-weight: normal;
-    margin-bottom: 8px;
   }
 
   .floor-plan-selector-badges {

package/src/WebComponent/FeeCalculator/components/floor-plan-selector/floor-plan-selector.ts

@@ -1,20 +1,18 @@
 import { LitElement, html, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { LayoutOption } from "../../../../fetchBuildingWebchatView";
-import { ALL_LAYOUTS_OPTION } from "../../constants";
+import { ALL_LAYOUTS_OPTION, DEFAULT_LEASE_TERM } from "../../constants";
 
-import fetchBuildingFloorplans, {
-  Floorplan,
-} from "../../../../services/fees/fetchBuildingFloorplans";
+import fetchBuildingUnits, {
+  Unit,
+} from "../../../../services/fees/fetchBuildingUnits";
 import { layoutToBedrooms } from "../../../../services/fees/utils";
 import floorPlanSelectorStyles from "./floor-plan-selector-styles";
-import { addMonths, startOfMonth } from "date-fns";
+import { TODAY } from "../../../../globals";
 
 import "../floorplan-image-card/floorplan-image-card";
 import "../../../loaders/mega-loader";
 
-const FIRST_OF_NEXT_MONTH = startOfMonth(addMonths(new Date(), 1));
-
 @customElement("floor-plan-selector")
 export class FloorPlanSelector extends LitElement {
   static styles = floorPlanSelectorStyles;
@@ -32,7 +30,7 @@ export class FloorPlanSelector extends LitElement {
   onSelectLayout: ((layoutIds: number[]) => void) | null = null;
 
   @property()
-  onUnitSelect: ((unitId: number) => void) | null = null;
+  onUnitSelect: ((unit: Unit) => void) | null = null;
 
   @property()
   onMoveInDateChange: ((moveInDate: Date) => void) | null = null;
@@ -41,16 +39,16 @@ export class FloorPlanSelector extends LitElement {
   onLeaseTermChange: ((leaseTerm: number) => void) | null = null;
 
   @state()
-  moveInDate: Date | null = null;
+  moveInDate: Date | null = TODAY;
 
   @state()
-  leaseTerm = "12";
+  leaseTerm = DEFAULT_LEASE_TERM;
 
   @state()
-  floorPlans: Floorplan[] = [];
+  units: Unit[] = [];
 
   @state()
-  selectedUnitId: number | null = null;
+  selectedUnit: Unit | null = null;
 
   @state()
   isLoading = false;
@@ -97,7 +95,7 @@ export class FloorPlanSelector extends LitElement {
       .sort((a, b) => a.value - b.value);
   }
 
-  private fetchFloorplans = async (): Promise<Floorplan[]> => {
+  private fetchUnits = async (): Promise<Unit[]> => {
     this.isLoading = true;
 
     const numBedrooms =
@@ -106,36 +104,33 @@ export class FloorPlanSelector extends LitElement {
         : undefined;
 
     try {
-      const floorplans = await fetchBuildingFloorplans({
+      const units = await fetchBuildingUnits({
         buildingSlug: this.buildingSlug,
         moveInDateEarliest: this.moveInDate ? this.moveInDate : undefined,
         ...(this.selectedLayoutIds.includes(ALL_LAYOUTS_OPTION)
           ? {}
           : { numBedrooms }),
+        leaseTermMin: this.leaseTerm,
       });
-      return floorplans.filter((floorplan) => !!floorplan.url);
+      return units.filter((unit) => !!unit.floorplanUrl);
     } finally {
       this.isLoading = false;
     }
   };
 
   firstUpdated = async (): Promise<void> => {
-    this.floorPlans = await this.fetchFloorplans();
-
-    // Default move-in is 1st of next month
-    this.moveInDate = FIRST_OF_NEXT_MONTH;
-    this.onMoveInDateChange?.(FIRST_OF_NEXT_MONTH);
+    this.units = await this.fetchUnits();
   };
 
-  handleUnitSelect = (unitId: number): void => {
-    this.selectedUnitId = unitId;
-    this.onUnitSelect?.(unitId);
+  handleUnitSelect = (unit: Unit): void => {
+    this.selectedUnit = unit;
+    this.onUnitSelect?.(unit);
   };
 
   handleLayoutChange = async (ids: number[]): Promise<void> => {
     this.selectedLayoutIds = ids;
     this.onSelectLayout?.(this.selectedLayoutIds);
-    this.floorPlans = await this.fetchFloorplans();
+    this.units = await this.fetchUnits();
   };
 
   handleMoveInDateChange = async (e: Event): Promise<void> => {
@@ -143,19 +138,20 @@ export class FloorPlanSelector extends LitElement {
     let newMoveIn;
 
     if (!inputValue) {
-      newMoveIn = FIRST_OF_NEXT_MONTH;
+      newMoveIn = TODAY;
     } else {
       newMoveIn = new Date(inputValue);
     }
 
     this.moveInDate = newMoveIn;
     this.onMoveInDateChange?.(newMoveIn);
-    this.floorPlans = await this.fetchFloorplans();
+    this.units = await this.fetchUnits();
   };
 
-  handleLeaseTermChange = (e: Event): void => {
-    this.leaseTerm = (e.target as HTMLInputElement).value;
-    this.onLeaseTermChange?.(parseInt(this.leaseTerm));
+  handleLeaseTermChange = async (e: Event): Promise<void> => {
+    this.leaseTerm = parseInt((e.target as HTMLInputElement).value);
+    this.onLeaseTermChange?.(this.leaseTerm);
+    this.units = await this.fetchUnits();
   };
 
   render(): TemplateResult {
@@ -195,7 +191,7 @@ export class FloorPlanSelector extends LitElement {
               <input
                 type="number"
                 placeholder="Lease term (months)"
-                .value=${this.leaseTerm}
+                .value=${this.leaseTerm.toString()}
                 @input=${this.handleLeaseTermChange}
               />
             </div>
@@ -210,19 +206,19 @@ export class FloorPlanSelector extends LitElement {
                     </div>
                   `
                 : ""}
-              ${this.floorPlans?.length === 0
+              ${!this.isLoading && this.units?.length === 0
                 ? html`
                     <div class="no-floorplans-container">
                       <p>No floorplans found</p>
                     </div>
                   `
                 : ""}
-              ${this.floorPlans?.map(
-                (floorplan) => html`
+              ${this.units?.map(
+                (unit) => html`
                   <floorplan-image-card
-                    .floorplan=${floorplan}
+                    .unit=${unit}
                     .onUnitSelect=${this.handleUnitSelect}
-                    .selected=${this.selectedUnitId === floorplan.unitId}
+                    .selected=${this.selectedUnit?.id === unit.id}
                   ></floorplan-image-card>
                 `
               )}

package/src/WebComponent/FeeCalculator/components/floorplan-image-card/floorplan-image-card.ts

@@ -1,7 +1,7 @@
 import { LitElement, TemplateResult } from "lit";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { Floorplan } from "../../../../services/fees/fetchBuildingFloorplans";
+import { Unit } from "../../../../services/fees/fetchBuildingUnits";
 
 import floorplanImageCardStyles from "./floorplan-image-card-styles";
 
@@ -10,30 +10,30 @@ export class FloorplanImageCard extends LitElement {
   static styles = floorplanImageCardStyles;
 
   @property({ type: Object })
-  floorplan: Floorplan = {} as Floorplan;
+  unit: Unit = {} as Unit;
 
   @property()
-  onUnitSelect: ((unitId: number) => void) | null = null;
+  onUnitSelect: ((unit: Unit) => void) | null = null;
 
   @property({ type: Boolean })
   selected = false;
 
   get bedAndBathText(): string {
-    return `${this.floorplan.bedrooms}bd | ${this.floorplan.bathrooms}ba`;
+    return `${this.unit.numberOfBedrooms}bd | ${this.unit.numberOfBathrooms}ba`;
   }
 
   get priceRange(): string {
-    if (this.floorplan.startingPrice === this.floorplan.maxPrice) {
-      return `$${this.floorplan.startingPrice}`;
+    if (this.unit.startingPrice === this.unit.maxPrice) {
+      return `$${this.unit.startingPrice}`;
     }
 
-    return `$${this.floorplan.startingPrice} - $${this.floorplan.maxPrice}`;
+    return `$${this.unit.startingPrice} - $${this.unit.maxPrice}`;
   }
 
   handleOnUnitSelect(): void {
     if (this.selected) return;
     this.selected = !this.selected;
-    this.onUnitSelect?.(this.floorplan.unitId);
+    this.onUnitSelect?.(this.unit);
   }
 
   handleOnImgClick(event: Event): void {
@@ -47,17 +47,17 @@ export class FloorplanImageCard extends LitElement {
         <div class="section-left">
           <img
             @click=${this.handleOnImgClick}
-            src="${this.floorplan.url ?? ""}"
-            alt="${this.floorplan.name}"
+            src="${this.unit.floorplanUrl ?? ""}"
+            alt="${this.unit.floorplanName}"
           />
         </div>
         <div class="section-right" @click=${this.handleOnUnitSelect}>
           <p class="image-card-title">
-            ${this.floorplan.name} | ${this.priceRange}
+            ${this.unit.floorplanName} | ${this.priceRange}
           </p>
           <p class="image-card-subtitle">
-            ${this.bedAndBathText} | ${this.floorplan.squareFeet} ft |
-            ${this.floorplan.earliestAvailable}
+            ${this.bedAndBathText} | ${this.unit.squareFootage} ft |
+            ${this.unit.earliestAvailable}
           </p>
         </div>
       </div>

package/src/WebComponent/FeeCalculator/components/index.ts

@@ -1,5 +1,5 @@
 export * from "./promo-card/promo-card";
 export * from "./floor-plan-selector/floor-plan-selector";
 export * from "./fee-card/fee-card";
-export * from "./addon-item/addon-item";
+export * from "./addons/addon-item/addon-item";
 export * from "./fee-calculator-layout/fee-calculator-layout";

package/src/WebComponent/FeeCalculator/constants.ts

@@ -1,3 +1,5 @@
 export const ALL_LAYOUTS_OPTION = -1;
 
 export const CALCULATE_DEBOUNCE_MS = 1000;
+
+export const DEFAULT_LEASE_TERM = 12;