@meetelise/chat 1.55.1 → 1.55.2

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

@@ -1,10 +1,12 @@
+import isBefore from "date-fns/isBefore";
+import startOfToday from "date-fns/startOfToday";
 import { LitElement, html, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { LayoutOption } from "../../../../fetchBuildingWebchatView";
 import { ALL_LAYOUTS_OPTION, DEFAULT_LEASE_TERM } from "../../constants";
 import { Unit } from "../../../../services/fees/fetchBuildingUnits";
 import floorPlanSelectorStyles from "./floor-plan-selector-styles";
-import { TODAY } from "../../../../globals";
+import { formatLocalDate, getTodayString } from "../../utils/date-utils";
 
 import "../floorplan-image-card/floorplan-image-card";
 
@@ -46,7 +48,7 @@ export class FloorPlanSelector extends LitElement {
   onLeaseTermChange: ((leaseTerm: number) => void) | null = null;
 
   @state()
-  moveInDate: Date | null = TODAY;
+  moveInDate: Date | null = startOfToday();
 
   @state()
   leaseTerm = DEFAULT_LEASE_TERM;
@@ -126,15 +128,20 @@ export class FloorPlanSelector extends LitElement {
   handleMoveInDateChange = (e: Event): void => {
     const inputElement = e.target as HTMLInputElement;
     const inputValue = inputElement.value;
+    const today = startOfToday();
 
     if (!inputValue) {
-      this.moveInDate = TODAY;
+      this.moveInDate = today;
     } else {
       const [year, month, day] = inputValue.split("-").map(Number);
-      this.moveInDate = new Date(year, month - 1, day);
+      const moveInDate = new Date(year, month - 1, day);
+      // Typing skips `min`, and Chrome reports each digit of a typed year (0002, 0020...) as a date.
+      // Ignore past dates instead of resetting the input mid-typing.
+      if (isBefore(moveInDate, today)) return;
+      this.moveInDate = moveInDate;
     }
 
-    this.onMoveInDateChange?.(inputValue || TODAY.toISOString().split("T")[0]);
+    this.onMoveInDateChange?.(inputValue || formatLocalDate(today));
   };
 
   handleLeaseTermChange = (e: Event): void => {
@@ -225,7 +232,10 @@ export class FloorPlanSelector extends LitElement {
               <input
                 type="date"
                 placeholder="Select move in date"
-                .value=${this.moveInDate?.toISOString().split("T")[0] ?? ""}
+                min=${getTodayString()}
+                .value=${this.moveInDate
+                  ? formatLocalDate(this.moveInDate)
+                  : ""}
                 @input=${this.handleMoveInDateChange}
               />
             </div>

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

@@ -18,7 +18,7 @@ import { XOutlineIcon } from "../icons/XOutlineIcon";
 import { IncentiveV2 } from "../../types/incentive-v2";
 import { Unit } from "../../services/fees/fetchBuildingUnits";
 import { RentableItemSummary } from "./model/rentable-item-summary";
-import { TODAY } from "../../globals";
+import { getTodayString } from "./utils/date-utils";
 import { MarketableFee, MarketableFeeFrequency } from "./model/marketable-fee";
 import { ChargeInputs, QuoteError } from "../../services/fees/calculateQuote";
 import { DesiredRentableItem } from "./model/desired-rentable-item";
@@ -96,7 +96,7 @@ export class FeeCalculator extends LitElement {
   private desiredRentableItems: DesiredRentableItem[] = [];
 
   @state()
-  private moveInDateString: string = TODAY.toISOString().split("T")[0];
+  private moveInDateString: string = getTodayString();
 
   @state()
   private leaseTerm = DEFAULT_LEASE_TERM;

package/src/WebComponent/FeeCalculator/utils/date-utils.ts

@@ -0,0 +1,17 @@
+import format from "date-fns/format";
+import startOfToday from "date-fns/startOfToday";
+
+/**
+ * Formats a date as its local `yyyy-MM-dd` calendar date, the value format of a date input.
+ * `toISOString()` gives the UTC date instead, which can be a day off.
+ */
+export function formatLocalDate(date: Date): string {
+  return format(date, "yyyy-MM-dd");
+}
+
+/**
+ * Gets the prospect's local date today as `yyyy-MM-dd`.
+ */
+export function getTodayString(): string {
+  return formatLocalDate(startOfToday());
+}

package/src/feeCalculatorMoveInDate.test.ts

@@ -0,0 +1,113 @@
+import { expect } from "@esm-bundle/chai";
+import {
+  restore,
+  useFakeTimers,
+  useFakeXMLHttpRequest,
+} from "sinon/pkg/sinon-esm";
+import "../public/dist/index";
+import type { FloorPlanSelector } from "./WebComponent/FeeCalculator/components/floor-plan-selector/floor-plan-selector";
+import type { FeeCalculator } from "./WebComponent/FeeCalculator/fee-calculator";
+import { formatLocalDate } from "./WebComponent/FeeCalculator/utils/date-utils";
+
+type FakeRequest = XMLHttpRequest & { url: string };
+
+// Late evening, and far from the real date, so a date read at module load cannot match.
+const NOW = new Date(2030, 4, 20, 23, 30);
+const TODAY = "2030-05-20";
+
+const waitFor = async <T>(
+  find: () => T | undefined,
+  description: string
+): Promise<T> => {
+  for (let attempt = 0; attempt < 100; attempt++) {
+    const found = find();
+    if (found) return found;
+    await new Promise((resolve) => setTimeout(resolve, 10));
+  }
+  throw new Error(`Timed out waiting for ${description}`);
+};
+
+beforeEach(() => {
+  useFakeTimers({ now: NOW, toFake: ["Date"] });
+});
+
+afterEach(() => {
+  restore();
+});
+
+it("formats the local calendar date at both ends of the day", () => {
+  expect(formatLocalDate(new Date(2030, 4, 20, 0, 0))).to.equal(TODAY);
+  expect(formatLocalDate(new Date(2030, 4, 20, 23, 59))).to.equal(TODAY);
+});
+
+describe("floor-plan-selector move-in date", () => {
+  let selector: FloorPlanSelector;
+  let sentDates: string[];
+
+  const getDateInput = (): HTMLInputElement => {
+    const input =
+      selector.shadowRoot?.querySelector<HTMLInputElement>(
+        'input[type="date"]'
+      );
+    if (!input) throw new Error("Expected move-in date input");
+    return input;
+  };
+
+  const enterDate = async (value: string): Promise<void> => {
+    const input = getDateInput();
+    input.value = value;
+    input.dispatchEvent(new Event("input"));
+    await selector.updateComplete;
+  };
+
+  beforeEach(async () => {
+    sentDates = [];
+    selector = document.createElement(
+      "floor-plan-selector"
+    ) as FloorPlanSelector;
+    selector.onMoveInDateChange = (date) => sentDates.push(date);
+    document.body.appendChild(selector);
+    await selector.updateComplete;
+  });
+
+  afterEach(() => {
+    selector.remove();
+  });
+
+  it("starts on today and does not allow earlier dates", () => {
+    expect(getDateInput().value).to.equal(TODAY);
+    expect(getDateInput().min).to.equal(TODAY);
+  });
+
+  it("shows and sends the date the prospect picks", async () => {
+    await enterDate("2030-06-01");
+
+    expect(getDateInput().value).to.equal("2030-06-01");
+    expect(sentDates).to.deep.equal(["2030-06-01"]);
+  });
+
+  it("ignores typed dates before today", async () => {
+    // Chrome reports each digit of a typed year as a date, for example 0002-06-01.
+    await enterDate("2030-05-19");
+    await enterDate("0002-06-01");
+
+    expect(sentDates).to.deep.equal([]);
+  });
+});
+
+it("requests units for today's local date by default", async () => {
+  const fakeXhr = useFakeXMLHttpRequest();
+  const requests: FakeRequest[] = [];
+  fakeXhr.onCreate = (request: FakeRequest) => requests.push(request);
+  const calculator = document.createElement("fee-calculator") as FeeCalculator;
+  calculator.buildingSlug = "test-building";
+  document.body.appendChild(calculator);
+
+  const unitsRequest = await waitFor(
+    () => requests.find((request) => request.url.includes("/units")),
+    "the units request"
+  );
+
+  expect(unitsRequest.url).to.include(`move_in_date_earliest=${TODAY}`);
+  calculator.remove();
+});

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());