@meetelise/chat 1.34.1 → 1.34.3

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

@@ -1,248 +0,0 @@
-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 fetchBuildingUnits, {
-  Unit,
-} from "../../../../services/fees/fetchBuildingUnits";
-import { layoutToBedrooms } from "../../../../services/fees/utils";
-import floorPlanSelectorStyles from "./floor-plan-selector-styles";
-import { TODAY } from "../../../../globals";
-
-import "../floorplan-image-card/floorplan-image-card";
-import "../../../loaders/mega-loader";
-
-@customElement("floor-plan-selector")
-export class FloorPlanSelector extends LitElement {
-  static styles = floorPlanSelectorStyles;
-
-  @property({ type: String })
-  buildingSlug = "";
-
-  @property({ type: Array })
-  layoutOptions: LayoutOption[] = [];
-
-  @property({ type: Array })
-  selectedLayoutIds: number[] = [ALL_LAYOUTS_OPTION];
-
-  @property()
-  onSelectLayout: ((layoutIds: number[]) => void) | null = null;
-
-  @property()
-  onUnitSelect: ((unit: Unit) => void) | null = null;
-
-  @property()
-  onMoveInDateChange: ((moveInDate: Date) => void) | null = null;
-
-  @property()
-  onLeaseTermChange: ((leaseTerm: number) => void) | null = null;
-
-  @state()
-  moveInDate: Date | null = TODAY;
-
-  @state()
-  leaseTerm = DEFAULT_LEASE_TERM;
-
-  @state()
-  units: Unit[] = [];
-
-  @state()
-  selectedUnit: Unit | null = null;
-
-  @state()
-  isLoading = false;
-
-  private get displayOptions(): LayoutOption[] {
-    const allOption: LayoutOption = {
-      value: ALL_LAYOUTS_OPTION,
-      label: "All",
-    };
-
-    const convertNumberWordsToNumeric = (text: string): string => {
-      const numberMap: Record<string, string> = {
-        zero: "0",
-        one: "1",
-        two: "2",
-        three: "3",
-        four: "4",
-        five: "5",
-        six: "6",
-        seven: "7",
-        eight: "8",
-        nine: "9",
-        ten: "10",
-        eleven: "11",
-        twelve: "12",
-      };
-
-      let result = text;
-      Object.entries(numberMap).forEach(([word, number]) => {
-        const regex = new RegExp(`\\b${word}\\b`, "gi");
-        result = result.replace(regex, number);
-      });
-
-      return result;
-    };
-
-    return [allOption, ...this.layoutOptions]
-      .map((opt: LayoutOption) => ({
-        ...opt,
-        label: convertNumberWordsToNumeric(
-          opt.label.replace(/bedroom/gi, "bd")
-        ),
-      }))
-      .sort((a, b) => a.value - b.value);
-  }
-
-  private fetchUnits = async (): Promise<Unit[]> => {
-    this.isLoading = true;
-
-    const numBedrooms =
-      this.selectedLayoutIds.length === 1
-        ? layoutToBedrooms(this.selectedLayoutIds[0])
-        : undefined;
-
-    try {
-      const units = await fetchBuildingUnits({
-        buildingSlug: this.buildingSlug,
-        moveInDateEarliest: this.moveInDate ? this.moveInDate : undefined,
-        ...(this.selectedLayoutIds.includes(ALL_LAYOUTS_OPTION)
-          ? {}
-          : { numBedrooms }),
-        leaseTermMin: this.leaseTerm,
-      });
-      return units.filter((unit) => !!unit.floorplanUrl);
-    } finally {
-      this.isLoading = false;
-    }
-  };
-
-  firstUpdated = async (): Promise<void> => {
-    this.units = await this.fetchUnits();
-  };
-
-  handleUnitSelect = (unit: Unit): void => {
-    this.selectedUnit = unit;
-    this.onUnitSelect?.(unit);
-  };
-
-  handleLayoutChange = async (ids: number[]): Promise<void> => {
-    this.selectedLayoutIds = ids;
-    this.onSelectLayout?.(this.selectedLayoutIds);
-    this.units = await this.fetchUnits();
-  };
-
-  handleMoveInDateChange = async (e: Event): Promise<void> => {
-    const inputValue = (e.target as HTMLInputElement).value;
-    let newMoveIn;
-
-    if (!inputValue) {
-      newMoveIn = TODAY;
-    } else {
-      newMoveIn = new Date(inputValue);
-    }
-
-    this.moveInDate = newMoveIn;
-    this.onMoveInDateChange?.(newMoveIn);
-    this.units = await this.fetchUnits();
-  };
-
-  handleLeaseTermChange = async (e: Event): Promise<void> => {
-    this.leaseTerm = parseInt((e.target as HTMLInputElement).value);
-    this.onLeaseTermChange?.(this.leaseTerm);
-    this.units = await this.fetchUnits();
-  };
-
-  renderUnitSelection = (): TemplateResult => {
-    if (this.isLoading) {
-      return html`
-        <div class="unit-selection">
-          <div class="unit-label">Select Unit</div>
-          <div class="loading-container">
-            <mega-loader size="32"></mega-loader>
-          </div>
-        </div>
-      `;
-    }
-
-    return html`
-      <div class="unit-selection">
-        <div class="unit-label">Select Unit</div>
-        <div class="image-carousel">
-          ${this.units?.length === 0
-            ? html`
-                <div class="no-floorplans-container">
-                  <p>No floorplans found</p>
-                </div>
-              `
-            : ""}
-          ${this.units?.map(
-            (unit) => html`
-              <floorplan-image-card
-                .unit=${unit}
-                .onUnitSelect=${this.handleUnitSelect}
-                .selected=${this.selectedUnit?.id === unit.id}
-              ></floorplan-image-card>
-            `
-          )}
-        </div>
-      </div>
-    `;
-  };
-
-  render(): TemplateResult {
-    return html`
-      <div class="floor-plan-selector">
-        <div class="floor-plan-selector-label">Select Floor Plan</div>
-        <div class="floor-plan-selector-badges">
-          ${this.displayOptions.map(
-            (opt) => html`
-              <div
-                class="floor-plan-badge ${this.selectedLayoutIds.includes(
-                  opt.value
-                )
-                  ? "selected"
-                  : ""}"
-                @click=${() => this.handleLayoutChange([opt.value])}
-              >
-                ${opt.label}
-              </div>
-            `
-          )}
-        </div>
-
-        <div>
-          <div class="date-fields">
-            <div class="date-field">
-              <label class="date-field-label">Move in date</label>
-              <input
-                type="date"
-                placeholder="Select move in date"
-                .value=${this.moveInDate?.toISOString().split("T")[0] ?? ""}
-                @input=${this.handleMoveInDateChange}
-              />
-            </div>
-            <div class="date-field">
-              <label class="date-field-label">Lease Term</label>
-              <input
-                type="number"
-                placeholder="Lease term (months)"
-                .value=${this.leaseTerm.toString()}
-                @input=${this.handleLeaseTermChange}
-              />
-            </div>
-          </div>
-
-          ${this.renderUnitSelection()}
-        </div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "floor-plan-selector": FloorPlanSelector;
-  }
-}

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

@@ -1,82 +0,0 @@
-import { css } from "lit";
-
-const floorplanImageCardStyles = css`
-  :host {
-    display: block;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  .floorplan-image-card {
-    display: flex;
-    flex-direction: row;
-    background-color: #f8f9fa;
-    min-width: 18rem;
-    width: 100%;
-    padding: 12px;
-    gap: 8px;
-    border-radius: 4px;
-    border: 2px solid transparent;
-    box-sizing: border-box;
-  }
-
-  .section-left {
-    flex: 0 0 auto;
-    position: relative;
-  }
-
-  .floorplan-image-card.selected {
-    border-color: var(--primary-color, #646987);
-    box-shadow: 0 0 8px
-      color-mix(in srgb, var(--primary-color, #646987) 50%, transparent);
-    transition: box-shadow 0.1s ease-in-out, background-color 0.1s ease-in-out,
-      border-color 0.1s ease-in-out;
-    background-color: #f0f7ff;
-  }
-
-  .section-right {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    cursor: pointer;
-  }
-
-  .image-card-title {
-    font-size: 1rem;
-  }
-
-  .image-card-subtitle {
-    font-size: 0.8rem;
-    color: #868e96;
-  }
-
-  img {
-    border-radius: 8px;
-    flex: 0 0 auto;
-    height: 4rem;
-    width: 4rem;
-    object-fit: cover;
-    border: 1px solid #ddd;
-    cursor: pointer;
-    position: relative;
-  }
-
-  img:hover {
-    border-color: var(--primary-color, #646987);
-    box-shadow: 0 0 10px 3px rgba(100, 105, 135, 0.4);
-  }
-
-  @media (max-width: 768px) {
-    .floorplan-image-card {
-      width: 100%;
-      min-width: 18rem;
-      flex-shrink: 0;
-      margin-right: 8px;
-    }
-  }
-`;
-
-export default floorplanImageCardStyles;

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

@@ -1,76 +0,0 @@
-import { LitElement, TemplateResult } from "lit";
-import { html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { Unit } from "../../../../services/fees/fetchBuildingUnits";
-
-import floorplanImageCardStyles from "./floorplan-image-card-styles";
-
-@customElement("floorplan-image-card")
-export class FloorplanImageCard extends LitElement {
-  static styles = floorplanImageCardStyles;
-
-  @property({ type: Object })
-  unit: Unit = {} as Unit;
-
-  @property()
-  onUnitSelect: ((unit: Unit) => void) | null = null;
-
-  @property({ type: Boolean })
-  selected = false;
-
-  get bedAndBathText(): string {
-    const bedRooms =
-      this.unit.numberOfBedrooms === 0
-        ? "studio"
-        : `${this.unit.numberOfBedrooms}bd`;
-    return `${bedRooms} | ${this.unit.numberOfBathrooms}ba`;
-  }
-
-  get priceRange(): string {
-    if (this.unit.startingPrice === this.unit.maxPrice) {
-      return `$${this.unit.startingPrice}`;
-    }
-
-    return `$${this.unit.startingPrice} - $${this.unit.maxPrice}`;
-  }
-
-  handleOnUnitSelect(): void {
-    if (this.selected) return;
-    this.selected = !this.selected;
-    this.onUnitSelect?.(this.unit);
-  }
-
-  handleOnImgClick(event: Event): void {
-    const img = event.target as HTMLImageElement;
-    window.open(img.src, "_blank");
-  }
-
-  render(): TemplateResult {
-    return html`
-      <div class="floorplan-image-card ${this.selected ? "selected" : ""}">
-        <div class="section-left">
-          <img
-            @click=${this.handleOnImgClick}
-            src="${this.unit.floorplanUrl ?? ""}"
-            alt="${this.unit.floorplanName}"
-          />
-        </div>
-        <div class="section-right" @click=${this.handleOnUnitSelect}>
-          <p class="image-card-title">
-            Unit ${this.unit.unitNumber} | ${this.priceRange}
-          </p>
-          <p class="image-card-subtitle">
-            ${this.bedAndBathText} | ${this.unit.squareFootage} ft |
-            ${this.unit.earliestAvailable}
-          </p>
-        </div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "floorplan-image-card": FloorplanImageCard;
-  }
-}

package/src/WebComponent/FeeCalculator/components/incentive-banner/incentive-banner-styles.ts

@@ -1,40 +0,0 @@
-import { css } from "lit";
-
-export const incentiveBannerStyles = css`
-  :host {
-    display: block;
-  }
-
-  .incentive-banner {
-    width: 100%;
-    background-color: #e8f2ff;
-    padding: 8px 12px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .incentive-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 3rem;
-    height: 3rem;
-  }
-
-  .incentive-content {
-    flex: 1;
-  }
-
-  .incentive-title {
-    margin: 0;
-    font-size: 1.1rem;
-  }
-
-  .incentive-subtitle {
-    margin: 4px 0 0 0;
-    color: #868e96;
-    font-size: 0.9rem;
-    opacity: 0.9;
-  }
-`;

package/src/WebComponent/FeeCalculator/components/incentive-banner/incentive-banner.ts

@@ -1,43 +0,0 @@
-import { LitElement, html, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { IncentiveV2 } from "../../../../types/incentive-v2";
-import { incentiveBannerStyles } from "./incentive-banner-styles";
-import DollarOutlineIcon from "../../../icons/DollarOutlineIcon";
-
-@customElement("incentive-banner")
-export class IncentiveBanner extends LitElement {
-  static styles = incentiveBannerStyles;
-
-  @property({ type: Object })
-  incentive!: IncentiveV2;
-
-  getFormattedEndDate(incentive: IncentiveV2): string {
-    const endDate = new Date(incentive.endDate);
-    return endDate.toLocaleDateString("en-US", {
-      month: "long",
-      day: "numeric",
-      year: "numeric",
-    });
-  }
-
-  render(): TemplateResult {
-    if (!this.incentive) {
-      return html``;
-    }
-
-    return html`
-      <div class="incentive-banner">
-        <div class="incentive-icon">${DollarOutlineIcon({ size: 32 })}</div>
-        <div class="incentive-content">
-          <h2 class="incentive-title">
-            ${this.incentive.originalIncentiveString}
-          </h2>
-          <p class="incentive-subtitle">
-            Valid through ${this.getFormattedEndDate(this.incentive)} for
-            ${this.incentive.qualifier}
-          </p>
-        </div>
-      </div>
-    `;
-  }
-}

package/src/WebComponent/FeeCalculator/components/incentive-banner/index.ts

@@ -1 +0,0 @@
-export * from "./incentive-banner";

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

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

package/src/WebComponent/FeeCalculator/components/promo-card/promo-card-styles.ts

@@ -1,39 +0,0 @@
-import { css } from "lit";
-
-const promoCardStyles = css`
-  :host {
-    display: block;
-    margin-bottom: 20px;
-  }
-
-  .promo-card {
-    background-color: #e6f2ff;
-    border-radius: 8px;
-    padding: 16px;
-    display: flex;
-    align-items: center;
-  }
-
-  .icon-container {
-    display: flex;
-    justify-content: center;
-    margin-right: 16px;
-  }
-
-  .content-container {
-    flex: 1;
-  }
-
-  .promo-heading {
-    font-size: 1.2rem;
-    font-weight: normal;
-    margin: 0 0 4px 0;
-  }
-
-  .promo-subtitle {
-    color: #868e96;
-    font-size: 0.8rem;
-  }
-`;
-
-export default promoCardStyles;

package/src/WebComponent/FeeCalculator/components/promo-card/promo-card.ts

@@ -1,39 +0,0 @@
-import { LitElement, html, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import DollarOutlineIcon from "../../../icons/DollarOutlineIcon";
-
-import promoCardStyles from "./promo-card-styles";
-
-@customElement("promo-card")
-export class PromoCard extends LitElement {
-  static styles = promoCardStyles;
-
-  @property({ type: String })
-  promoAmount = "0";
-
-  @property({ type: String })
-  promoDescription = "";
-
-  @property({ type: String })
-  promoValidity = "";
-
-  render(): TemplateResult {
-    return html`
-      <div class="promo-card">
-        <div class="icon-container">${DollarOutlineIcon()}</div>
-        <div class="content-container">
-          <h2 class="promo-heading">
-            ${this.promoAmount} ${this.promoDescription}
-          </h2>
-          <div class="promo-subtitle">${this.promoValidity}</div>
-        </div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "promo-card": PromoCard;
-  }
-}

package/src/WebComponent/FeeCalculator/constants.ts

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