@meetelise/chat 1.54.1 → 1.55.1

package/src/WebComponent/FeeCalculator/components/charge-inputs/charge-inputs.ts

@@ -3,6 +3,13 @@ import { customElement, property } from "lit/decorators.js";
 import { ChargeInputs } from "../../../../services/fees/calculateQuote";
 import { RentableItemSummary } from "../../model/rentable-item-summary";
 import { DesiredRentableItem } from "../../model/desired-rentable-item";
+import { formatPetLimit } from "../../utils/pet-limit-utils";
+
+const PET_FIELDS: (keyof ChargeInputs)[] = [
+  "num_cats",
+  "num_dogs",
+  "num_other_pets",
+];
 
 @customElement("charge-inputs")
 export class ChargeInputsComponent extends LitElement {
@@ -96,6 +103,12 @@ export class ChargeInputsComponent extends LitElement {
       color: #1f2937;
     }
 
+    .charge-input-note {
+      font-size: 12px;
+      color: #6b7280;
+      margin-top: 8px;
+    }
+
     .rentable-item-row {
       display: flex;
       justify-content: space-between;
@@ -154,6 +167,9 @@ export class ChargeInputsComponent extends LitElement {
   @property({ type: Boolean })
   disabled = false;
 
+  @property({ type: Number })
+  maxPets: number | null = null;
+
   @property({ type: Array })
   rentableItems: RentableItemSummary[] = [];
 
@@ -166,15 +182,29 @@ export class ChargeInputsComponent extends LitElement {
   @property()
   onRentableItemRemove: ((item: DesiredRentableItem) => void) | null = null;
 
+  private get totalPets(): number {
+    return (
+      (this.chargeInputs.num_cats ?? 0) +
+      (this.chargeInputs.num_dogs ?? 0) +
+      (this.chargeInputs.num_other_pets ?? 0)
+    );
+  }
+
+  private isAtPetLimit(field: keyof ChargeInputs): boolean {
+    return (
+      this.maxPets !== null &&
+      PET_FIELDS.includes(field) &&
+      this.totalPets >= this.maxPets
+    );
+  }
+
   private handleIncrement(field: keyof ChargeInputs): void {
+    if (this.isAtPetLimit(field)) return;
+
     const currentValue = this.chargeInputs[field] ?? 0;
     const newValue = currentValue + 1;
 
-    if (
-      field === "num_cats" ||
-      field === "num_dogs" ||
-      field === "num_other_pets"
-    ) {
+    if (PET_FIELDS.includes(field)) {
       this.updatePetCount({ [field]: newValue });
     } else {
       this.onChargeInputsChange?.({ [field]: newValue });
@@ -186,11 +216,7 @@ export class ChargeInputsComponent extends LitElement {
     const minValue = field === "num_applicants" ? 1 : 0; // Minimum 1 applicant
     const newValue = Math.max(minValue, currentValue - 1);
 
-    if (
-      field === "num_cats" ||
-      field === "num_dogs" ||
-      field === "num_other_pets"
-    ) {
+    if (PET_FIELDS.includes(field)) {
       this.updatePetCount({ [field]: newValue });
     } else {
       this.onChargeInputsChange?.({ [field]: newValue });
@@ -293,6 +319,7 @@ export class ChargeInputsComponent extends LitElement {
           <button
             class="charge-input-button"
             @click=${() => this.handleIncrement(field)}
+            ?disabled=${this.isAtPetLimit(field)}
             aria-label="Increase ${this.getFieldLabel(field)}"
           >
             +
@@ -317,6 +344,13 @@ export class ChargeInputsComponent extends LitElement {
         <div class="section-group">
           <div class="section-subtitle">Household Details</div>
           ${householdFields.map((field) => this.renderChargeInputRow(field))}
+          ${this.maxPets !== null
+            ? html`
+                <div class="charge-input-note">
+                  ${formatPetLimit(this.maxPets)}
+                </div>
+              `
+            : ""}
         </div>
 
         ${this.rentableItems.length > 0

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

@@ -106,6 +106,13 @@ export default css`
     min-height: 300px;
   }
 
+  .quote-error-message {
+    max-width: 360px;
+    margin: 0 24px;
+    text-align: center;
+    line-height: 1.5;
+  }
+
   @media (max-width: 767px) {
     .fee-calculator-layout {
       flex-direction: column;

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

@@ -13,9 +13,13 @@ import { Quote } from "../../model/quote";
 import { FeeQuote } from "../../model/fee-quote";
 import { FeeFrequency, MarketableFeeNew } from "../../model/marketable-fee-new";
 import { AmountRange } from "../../model/amount-range";
-import { ChargeInputs } from "../../../../services/fees/calculateQuote";
+import {
+  ChargeInputs,
+  QuoteError,
+} from "../../../../services/fees/calculateQuote";
 import { DesiredRentableItem } from "../../model/desired-rentable-item";
 import { formatCurrency } from "../../../../utils";
+import { formatPetLimit } from "../../utils/pet-limit-utils";
 
 import "../floor-plan-selector/floor-plan-selector";
 import "../fee-card/fee-card";
@@ -39,6 +43,9 @@ export class FeeCalculatorLayout extends LitElement {
   @property({ type: Object })
   quote: Quote | null = null;
 
+  @property({ type: Object })
+  quoteError: QuoteError | null = null;
+
   @property({ type: Array })
   layoutOptions: LayoutOption[] = [];
 
@@ -93,6 +100,9 @@ export class FeeCalculatorLayout extends LitElement {
   onChargeInputsChange: ((newInputs: Partial<ChargeInputs>) => void) | null =
     null;
 
+  @property({ type: Number })
+  maxPets: number | null = null;
+
   @property({ type: Array })
   selectedRentableItems: DesiredRentableItem[] = [];
 
@@ -244,6 +254,16 @@ export class FeeCalculatorLayout extends LitElement {
     `;
   }
 
+  getQuoteErrorMessage(error: QuoteError): string {
+    if (error.type === "feeLimit") {
+      const limit = Math.min(
+        ...error.violations.map((violation) => violation.limit)
+      );
+      return `${formatPetLimit(limit)}. Remove a pet to see your estimate.`;
+    }
+    return "We couldn't calculate an estimate. Please adjust your selections or try again later.";
+  }
+
   renderFeesContent(): TemplateResult {
     if (!this.selectedUnit) {
       return html`
@@ -253,6 +273,16 @@ export class FeeCalculatorLayout extends LitElement {
       `;
     }
 
+    if (this.quoteError && !this.showSkeletonLoader) {
+      return html`
+        <div class="fees-container empty-state" role="alert">
+          <p class="quote-error-message">
+            ${this.getQuoteErrorMessage(this.quoteError)}
+          </p>
+        </div>
+      `;
+    }
+
     return html`
       <div class="fees-container">
         ${this.showSkeletonLoader
@@ -293,6 +323,7 @@ export class FeeCalculatorLayout extends LitElement {
             <charge-inputs
               .chargeInputs=${this.chargeInputs}
               .onChargeInputsChange=${this.onChargeInputsChange}
+              .maxPets=${this.maxPets}
               .disabled=${!this.selectedUnit}
               .rentableItems=${this.rentableItems}
               .selectedRentableItems=${this.selectedRentableItems}

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

@@ -20,13 +20,14 @@ import { Unit } from "../../services/fees/fetchBuildingUnits";
 import { RentableItemSummary } from "./model/rentable-item-summary";
 import { TODAY } from "../../globals";
 import { MarketableFee, MarketableFeeFrequency } from "./model/marketable-fee";
-import { ChargeInputs } from "../../services/fees/calculateQuote";
+import { ChargeInputs, QuoteError } from "../../services/fees/calculateQuote";
 import { DesiredRentableItem } from "./model/desired-rentable-item";
 import { sendLoggingEvent } from "../../analytics";
 import { LogType } from "../../analytics";
 import { pushGtmEvent } from "../../gtm";
 import fetchBuildingUnits from "../../services/fees/fetchBuildingUnits";
 import { layoutToBedrooms } from "../../services/fees/utils";
+import { getMaxPets } from "./utils/pet-limit-utils";
 
 import "./components";
 import "./components/fee-calculator-layout/fee-calculator-layout";
@@ -112,6 +113,9 @@ export class FeeCalculator extends LitElement {
   @state()
   pdfUrl: string | null = null;
 
+  @state()
+  private quoteError: QuoteError | null = null;
+
   @state()
   private groupedFees: Record<MarketableFeeFrequency, MarketableFee[]> = {
     [MarketableFeeFrequency.ONE_TIME]: [],
@@ -127,6 +131,9 @@ export class FeeCalculator extends LitElement {
   @state()
   private rentableItems: RentableItemSummary[] = [];
 
+  @state()
+  private maxPets: number | null = null;
+
   @state()
   private units: Unit[] = [];
 
@@ -150,13 +157,18 @@ export class FeeCalculator extends LitElement {
     await this.performQuoteCalculation(this.quoteAbortController.signal);
   };
 
+  private clearQuote(): void {
+    this.quote = null;
+    this.pdfUrl = null;
+    this.quoteError = null;
+  }
+
   /**
    * Performs the actual quote calculation API request.
    */
   private async performQuoteCalculation(signal: AbortSignal): Promise<void> {
     if (!this.selectedUnit || !this.moveInDateString) {
-      this.quote = null;
-      this.pdfUrl = null;
+      this.clearQuote();
       this.isCalculatingQuote = false;
       return;
     }
@@ -179,8 +191,11 @@ export class FeeCalculator extends LitElement {
         },
         signal
       );
+      if (signal.aborted) return;
+
       this.quote = res.quote;
       this.pdfUrl = res.pdfUrl || null;
+      this.quoteError = res.error ?? null;
       if (this.quote) {
         pushGtmEvent("feeCalculatorQuoteGenerated", {
           buildingSlug: this.buildingSlug,
@@ -192,6 +207,7 @@ export class FeeCalculator extends LitElement {
       if ((error as DOMException)?.name !== "AbortError") {
         this.quote = null;
         this.pdfUrl = null;
+        this.quoteError = { type: "unknown" };
         this.isCalculatingQuote = false;
         sendLoggingEvent({
           logType: LogType.error,
@@ -242,6 +258,7 @@ export class FeeCalculator extends LitElement {
       (response) => {
         if (!response) return;
         this.groupedFees = this.groupFees(response.fees);
+        this.maxPets = getMaxPets(response.fees);
         this.rentableItems = response.rentableItems;
         // TODO(Leo): Re-enable
         // this.incentives = response.buildingIncentives;
@@ -283,8 +300,7 @@ export class FeeCalculator extends LitElement {
     }
 
     if (!this.selectedUnit || !this.moveInDateString) {
-      this.quote = null;
-      this.pdfUrl = null;
+      this.clearQuote();
       this.isCalculatingQuote = false;
       return;
     }
@@ -319,8 +335,7 @@ export class FeeCalculator extends LitElement {
     this.moveInDateString = dateString;
 
     // Clear old calculation and show loading state immediately
-    this.quote = null;
-    this.pdfUrl = null;
+    this.clearQuote();
 
     await this.fetchUnits();
 
@@ -334,8 +349,7 @@ export class FeeCalculator extends LitElement {
     this.leaseTerm = leaseTerm;
 
     // Clear old calculation and show loading state immediately
-    this.quote = null;
-    this.pdfUrl = null;
+    this.clearQuote();
 
     await this.fetchUnits();
 
@@ -443,8 +457,7 @@ export class FeeCalculator extends LitElement {
 
         if (!isUnitStillAvailable) {
           this.selectedUnit = null;
-          this.quote = null;
-          this.pdfUrl = null;
+          this.clearQuote();
         }
       }
     } finally {
@@ -530,6 +543,7 @@ export class FeeCalculator extends LitElement {
             .groupedFees=${this.groupedFees}
             .rentableItems=${this.rentableItems}
             .quote=${this.quote}
+            .quoteError=${this.quoteError}
             .layoutOptions=${this.layouts}
             .selectedLayoutIds=${this.selectedLayoutIds}
             .units=${this.units}
@@ -541,6 +555,7 @@ export class FeeCalculator extends LitElement {
             .onLeaseTermChange=${this.handleLeaseTermChange}
             .chargeInputs=${this.chargeInputs}
             .onChargeInputsChange=${this.handleChargeInputsChange}
+            .maxPets=${this.maxPets}
             .selectedRentableItems=${this.desiredRentableItems}
             .onRentableItemAdd=${this.handleRentableItemAdd}
             .onRentableItemRemove=${this.handleRentableItemRemove}

package/src/WebComponent/FeeCalculator/model/marketable-fee.ts

@@ -31,6 +31,7 @@ export interface MarketableFee {
   fee_name: string;
   amount?: number;
   amount_display: string;
+  limit?: number | null;
 
   min_estimate?: number;
   max_estimate?: number;
@@ -64,6 +65,7 @@ export class MarketableFeeModel implements MarketableFee {
   fee_name: string;
   amount?: number;
   amount_display: string;
+  limit: number | null;
   min_estimate?: number;
   max_estimate?: number;
   percent_rent?: number;
@@ -90,6 +92,7 @@ export class MarketableFeeModel implements MarketableFee {
     this.fee_name = data.fee_name ?? "";
     this.amount = data.amount;
     this.amount_display = data.amount_display ?? "";
+    this.limit = data.limit ?? null;
     this.min_estimate = data.min_estimate;
     this.max_estimate = data.max_estimate;
     this.percent_rent = data.percent_rent;

package/src/WebComponent/FeeCalculator/utils/pet-limit-utils.ts

@@ -0,0 +1,27 @@
+import { MarketableFee, MarketableFeeCategory } from "../model/marketable-fee";
+
+const PET_FEE_CATEGORIES: MarketableFeeCategory[] = [
+  MarketableFeeCategory.PetFee,
+  MarketableFeeCategory.PetRent,
+  MarketableFeeCategory.PetDeposit,
+];
+
+/**
+ * Gets the most pets a quote can include, or null when no pet fee has a limit.
+ * The quote counts every pet against each pet fee's limit, so the lowest limit caps the total.
+ */
+export function getMaxPets(fees: MarketableFee[]): number | null {
+  const limits = fees
+    .filter((fee) => PET_FEE_CATEGORIES.includes(fee.category))
+    .map((fee) => fee.limit)
+    .filter((limit): limit is number => typeof limit === "number");
+
+  return limits.length ? Math.min(...limits) : null;
+}
+
+/**
+ * Describes a pet limit, for example "Up to 2 pets allowed".
+ */
+export function formatPetLimit(maxPets: number): string {
+  return `Up to ${maxPets} ${maxPets === 1 ? "pet" : "pets"} allowed`;
+}