@meetelise/chat 1.55.0 → 1.55.2

package/src/feeCalculatorPetLimit.test.ts

@@ -0,0 +1,346 @@
+import { expect } from "@esm-bundle/chai";
+import { restore, useFakeXMLHttpRequest } from "sinon/pkg/sinon-esm";
+import "../public/dist/index";
+import type { ChargeInputs } from "./services/fees/calculateQuote";
+import type { Unit } from "./services/fees/fetchBuildingUnits";
+import type { ChargeInputsComponent } from "./WebComponent/FeeCalculator/components/charge-inputs/charge-inputs";
+import type { FeeCalculatorLayout } from "./WebComponent/FeeCalculator/components/fee-calculator-layout/fee-calculator-layout";
+import type { FeeCalculator } from "./WebComponent/FeeCalculator/fee-calculator";
+import {
+  MarketableFeeCategory,
+  MarketableFeeModel,
+} from "./WebComponent/FeeCalculator/model/marketable-fee";
+import {
+  formatPetLimit,
+  getMaxPets,
+} from "./WebComponent/FeeCalculator/utils/pet-limit-utils";
+
+type FakeRequest = XMLHttpRequest & {
+  method: string;
+  requestBody?: string;
+  respond: (
+    status: number,
+    headers?: Record<string, string>,
+    body?: string
+  ) => void;
+  url: string;
+};
+
+const jsonHeaders = { "Content-Type": "application/json" };
+
+const marketableFeesResponse = {
+  fees: [
+    {
+      id: "pet-rent",
+      fee_name: "Pet Rent",
+      category: "PetRent",
+      frequency: "MONTHLY",
+      amount: 40,
+      limit: 2,
+    },
+    {
+      id: "pet-fee",
+      fee_name: "Pet Fee",
+      category: "PetFee",
+      frequency: "ONE_TIME",
+      amount: 400,
+      limit: 2,
+    },
+    {
+      id: "admin-fee",
+      fee_name: "Administrative Fee",
+      category: "Other",
+      frequency: "ONE_TIME",
+      amount: 500,
+      limit: null,
+    },
+  ],
+  rentable_items: [],
+  building_incentives: [],
+};
+
+const unitsResponse = [
+  {
+    id: "u1914038796",
+    unit_number: "2506",
+    number_of_bedrooms: 1,
+    number_of_bathrooms: 1,
+    square_footage: 698,
+    earliest_available: "2026-10-27",
+    starting_price: 2576,
+    max_price: 2598,
+  },
+];
+
+const unit = {
+  id: 1914038796,
+  unitNumber: "2506",
+  startingPrice: 2576,
+  maxPrice: 2598,
+} as Unit;
+
+const captureRequests = (): FakeRequest[] => {
+  const fakeXhr = useFakeXMLHttpRequest();
+  const requests: FakeRequest[] = [];
+  fakeXhr.onCreate = (request: FakeRequest) => requests.push(request);
+  return requests;
+};
+
+const waitFor = async (
+  isReady: () => boolean,
+  description: string
+): Promise<void> => {
+  for (let attempt = 0; attempt < 100; attempt++) {
+    if (isReady()) return;
+    await new Promise((resolve) => setTimeout(resolve, 10));
+  }
+  throw new Error(`Timed out waiting for ${description}`);
+};
+
+const findRequest = (
+  requests: FakeRequest[],
+  path: string
+): FakeRequest | undefined =>
+  requests.find((request) => request.url.includes(path));
+
+const getLayout = (calculator: FeeCalculator): FeeCalculatorLayout | null =>
+  calculator.shadowRoot?.querySelector("fee-calculator-layout") ?? null;
+
+const getChargeInputs = (
+  calculator: FeeCalculator
+): ChargeInputsComponent | null =>
+  getLayout(calculator)?.shadowRoot?.querySelector("charge-inputs") ?? null;
+
+const getButton = (
+  calculator: FeeCalculator,
+  label: string
+): HTMLButtonElement | null =>
+  getChargeInputs(calculator)?.shadowRoot?.querySelector<HTMLButtonElement>(
+    `button[aria-label="${label}"]`
+  ) ?? null;
+
+const getQuoteErrorText = (calculator: FeeCalculator): string | undefined =>
+  getLayout(calculator)
+    ?.shadowRoot?.querySelector(".quote-error-message")
+    ?.textContent?.trim();
+
+const openCalculator = async (
+  requests: FakeRequest[]
+): Promise<FeeCalculator> => {
+  const calculator = document.createElement("fee-calculator") as FeeCalculator;
+  calculator.buildingSlug = "test-building";
+  calculator.orgSlug = "test-org";
+  document.body.appendChild(calculator);
+
+  await waitFor(
+    () =>
+      Boolean(
+        findRequest(requests, "/api/pub/v1/organization/") &&
+          findRequest(requests, "/units") &&
+          findRequest(requests, "/marketable-fees")
+      ),
+    "the calculator setup requests"
+  );
+  findRequest(requests, "/api/pub/v1/organization/")?.respond(
+    200,
+    jsonHeaders,
+    "{}"
+  );
+  findRequest(requests, "/units")?.respond(
+    200,
+    jsonHeaders,
+    JSON.stringify(unitsResponse)
+  );
+  findRequest(requests, "/marketable-fees")?.respond(
+    200,
+    jsonHeaders,
+    JSON.stringify(marketableFeesResponse)
+  );
+  return calculator;
+};
+
+const requestQuote = async (
+  calculator: FeeCalculator,
+  requests: FakeRequest[],
+  pets: Partial<ChargeInputs>
+): Promise<FakeRequest> => {
+  calculator.handleChargeInputsChange(pets);
+  calculator.handleUnitSelect(unit);
+  await waitFor(
+    () => Boolean(findRequest(requests, "/quote/calculate")),
+    "the quote request"
+  );
+  return findRequest(requests, "/quote/calculate") as FakeRequest;
+};
+
+const quoteGeneratedEvents = () =>
+  (window.dataLayer ?? []).filter(
+    (event) => event.event === "feeCalculatorQuoteGenerated"
+  );
+
+const fee = (category: MarketableFeeCategory, limit: number | null) =>
+  new MarketableFeeModel({ category, limit });
+
+afterEach(() => {
+  restore();
+  document.querySelectorAll("fee-calculator").forEach((el) => el.remove());
+  window.dataLayer = [];
+});
+
+it("caps pets at the lowest limit across pet fees", () => {
+  const fees = [
+    fee(MarketableFeeCategory.PetRent, 3),
+    fee(MarketableFeeCategory.PetFee, 2),
+    fee(MarketableFeeCategory.PetDeposit, null),
+    fee(MarketableFeeCategory.Parking, 1),
+  ];
+
+  expect(getMaxPets(fees)).to.equal(2);
+});
+
+it("has no pet cap when no pet fee has a limit", () => {
+  const fees = [
+    fee(MarketableFeeCategory.PetRent, null),
+    fee(MarketableFeeCategory.Parking, 1),
+  ];
+
+  expect(getMaxPets(fees)).to.equal(null);
+  expect(getMaxPets([])).to.equal(null);
+});
+
+it("describes the pet limit", () => {
+  expect(formatPetLimit(1)).to.equal("Up to 1 pet allowed");
+  expect(formatPetLimit(2)).to.equal("Up to 2 pets allowed");
+});
+
+it("stops adding pets at the lowest pet fee limit", async () => {
+  const requests = captureRequests();
+  const calculator = await openCalculator(requests);
+
+  await waitFor(
+    () =>
+      getChargeInputs(calculator)
+        ?.shadowRoot?.querySelector(".charge-input-note")
+        ?.textContent?.trim() === "Up to 2 pets allowed",
+    "the pet limit note"
+  );
+
+  calculator.handleChargeInputsChange({
+    num_cats: 1,
+    num_dogs: 1,
+    num_pets: 2,
+  });
+  await waitFor(
+    () => Boolean(getButton(calculator, "Increase Dogs")?.disabled),
+    "the pet steppers to stop at the limit"
+  );
+  expect(getButton(calculator, "Increase Cats")?.disabled).to.equal(true);
+  expect(getButton(calculator, "Increase All Other Pets")?.disabled).to.equal(
+    true
+  );
+  expect(getButton(calculator, "Increase Applicants")?.disabled).to.equal(
+    false
+  );
+
+  getButton(calculator, "Decrease Dogs")?.click();
+  await waitFor(
+    () => getButton(calculator, "Increase Dogs")?.disabled === false,
+    "the pet steppers to allow another pet"
+  );
+});
+
+it("explains the pet limit when the quote is rejected for too many pets", async () => {
+  const requests = captureRequests();
+  const calculator = await openCalculator(requests);
+  const quoteRequest = await requestQuote(calculator, requests, {
+    num_dogs: 3,
+    num_pets: 3,
+  });
+
+  expect(JSON.parse(quoteRequest.requestBody ?? "{}").charge_inputs).to.include(
+    { num_dogs: 3 }
+  );
+  quoteRequest.respond(
+    422,
+    jsonHeaders,
+    JSON.stringify({
+      detail: [
+        { fee_id: "pet-rent", fee_name: "Pet Rent", item_count: 3, limit: 2 },
+        { fee_id: "pet-fee", fee_name: "Pet Fee", item_count: 3, limit: 2 },
+      ],
+    })
+  );
+
+  await waitFor(
+    () => Boolean(getQuoteErrorText(calculator)),
+    "the pet limit message"
+  );
+  expect(getQuoteErrorText(calculator)).to.equal(
+    "Up to 2 pets allowed. Remove a pet to see your estimate."
+  );
+  expect(quoteGeneratedEvents()).to.have.length(0);
+});
+
+it("shows a general message when the quote fails for another reason", async () => {
+  const requests = captureRequests();
+  const calculator = await openCalculator(requests);
+  const quoteRequest = await requestQuote(calculator, requests, {
+    num_dogs: 1,
+    num_pets: 1,
+  });
+
+  quoteRequest.respond(
+    422,
+    jsonHeaders,
+    JSON.stringify({
+      detail: [
+        {
+          loc: ["body", "move_in_date"],
+          msg: "move_in_date must be in the future",
+          type: "value_error",
+        },
+      ],
+    })
+  );
+
+  await waitFor(
+    () => Boolean(getQuoteErrorText(calculator)),
+    "the quote error message"
+  );
+  expect(getQuoteErrorText(calculator)).to.equal(
+    "We couldn't calculate an estimate. Please adjust your selections or try again later."
+  );
+  expect(quoteGeneratedEvents()).to.have.length(0);
+});
+
+it("shows the quote when it is within the pet limit", async () => {
+  const requests = captureRequests();
+  const calculator = await openCalculator(requests);
+  const quoteRequest = await requestQuote(calculator, requests, {
+    num_dogs: 2,
+    num_pets: 2,
+  });
+
+  quoteRequest.respond(
+    200,
+    jsonHeaders,
+    JSON.stringify({
+      quote: {
+        rent_cost: 2598,
+        fee_quotes: [],
+        total_monthly_cost: { fixed_value: 2682.24 },
+      },
+      pdf_url: "https://example.com/quote.pdf",
+    })
+  );
+
+  await waitFor(
+    () =>
+      getLayout(calculator)
+        ?.shadowRoot?.querySelector(".total-cost-amount")
+        ?.textContent?.trim() === "$2,682.24",
+    "the quote total"
+  );
+  expect(getQuoteErrorText(calculator)).to.equal(undefined);
+  expect(quoteGeneratedEvents()).to.have.length(1);
+});

package/src/globals.ts

@@ -1,5 +1 @@
-import startOfDay from "date-fns/startOfDay";
-
 export const BASE_DOMAIN = "https://app.meetelise.com";
-
-export const TODAY = startOfDay(new Date());

package/src/services/fees/calculateQuote.ts

@@ -26,13 +26,39 @@ type CalculateQuoteRequest = {
   moveInDate: string;
 };
 
+export type FeeLimitViolation = {
+  feeId: string | null;
+  feeName: string;
+  itemCount: number;
+  limit: number;
+};
+
+export type QuoteError =
+  | { type: "feeLimit"; violations: FeeLimitViolation[] }
+  | { type: "unknown" };
+
 export type CalculateQuoteResponse = {
-  quote: Quote;
+  quote: Quote | null;
   pdfUrl?: string;
+  error?: QuoteError;
 };
 
 const BASE_URL = BASE_DOMAIN;
 
+// Request-validation 422s also send a detail list, but only fee limit violations carry a limit.
+const getFeeLimitViolations = (
+  error: AxiosError<{ detail?: unknown }>
+): FeeLimitViolation[] | null => {
+  const detail = error.response?.data?.detail;
+  if (error.response?.status !== 422 || !Array.isArray(detail)) return null;
+
+  const violations = detail.map((item) => camelize<FeeLimitViolation>(item));
+  const isFeeLimitError =
+    violations.length > 0 &&
+    violations.every((violation) => typeof violation.limit === "number");
+  return isFeeLimitError ? violations : null;
+};
+
 export const calculateQuote = async (
   {
     buildingSlug,
@@ -62,7 +88,7 @@ export const calculateQuote = async (
       return data;
     }
   } catch (error) {
-    const err = error as AxiosError;
+    const err = error as AxiosError<{ detail?: unknown }>;
 
     // Canceled requests were initiated by the frontend and are expected
     if (err.code !== "ERR_CANCELED") {
@@ -74,10 +100,19 @@ export const calculateQuote = async (
         error,
       });
     }
+
+    const violations = getFeeLimitViolations(err);
+    return {
+      quote: null,
+      error: violations
+        ? { type: "feeLimit", violations }
+        : { type: "unknown" },
+    };
   }
 
   return {
-    quote: {} as Quote,
+    quote: null,
+    error: { type: "unknown" },
   };
 };