@meetelise/chat 1.35.0 → 1.35.2

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

@@ -0,0 +1,149 @@
+import { css } from "lit";
+
+const floorPlanSelectorStyles = css`
+  :host {
+    display: block;
+  }
+
+  .floor-plan-selector {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .floor-plan-selector-label {
+    font-size: 1rem;
+    font-weight: normal;
+  }
+
+  .floor-plan-selector-badges {
+    display: flex;
+    flex-direction: row;
+    overflow-x: scroll;
+    max-width: 400px;
+    gap: 8px;
+    margin-bottom: 12px;
+    scrollbar-width: thin;
+  }
+
+  .floor-plan-badge {
+    padding: 6px 12px;
+    border-radius: 16px;
+    min-width: 40px;
+    text-align: center;
+    font-size: 0.9rem;
+    cursor: pointer;
+    background-color: #f0f0f0;
+    border: 1px solid #ddd;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .floor-plan-badge:hover {
+    background-color: #e6e6e6;
+  }
+
+  .floor-plan-badge.selected {
+    background-color: var(--primary-color, #646987);
+    border-color: var(--primary-color, #646987);
+    color: white;
+  }
+
+  .advanced-section {
+    max-height: 0;
+    overflow: hidden;
+  }
+
+  .advanced-section.open {
+    max-height: 800px;
+  }
+
+  .date-fields {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    margin-bottom: 16px;
+  }
+
+  .date-field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1;
+  }
+
+  .date-field label {
+    font-size: 0.9rem;
+  }
+
+  .date-field input {
+    padding: 8px;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+  }
+
+  .date-field-label {
+    font-size: #3a3a3b;
+  }
+
+  .image-carousel {
+    display: flex;
+    flex-direction: column;
+    max-height: 50%;
+    gap: 16px;
+    padding: 12px 0;
+    scroll-behavior: smooth;
+  }
+
+  .unit-selection {
+    max-height: 16rem;
+    overflow-y: auto;
+  }
+
+  .unit-label {
+    font-size: 1rem;
+  }
+
+  .loading-container,
+  .no-floorplans-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  @media (max-width: 840px) {
+    .date-fields {
+      flex-direction: column;
+      gap: 12px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .date-fields {
+      gap: 10px;
+    }
+
+    .image-carousel {
+      flex-direction: row;
+      max-height: none;
+      overflow-x: auto;
+      width: 100%;
+      padding: 12px 0;
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: none; /* Firefox */
+    }
+
+    .image-carousel::-webkit-scrollbar {
+      display: none; /* Chrome, Safari, Opera */
+    }
+
+    .unit-selection {
+      max-height: none;
+      overflow-y: visible;
+      overflow-x: auto;
+    }
+  }
+`;
+
+export default floorPlanSelectorStyles;

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

@@ -0,0 +1,247 @@
+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="loading-container">
+            <mega-loader size="32"></mega-loader>
+          </div>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="unit-selection">
+        <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>
+
+          <div class="unit-label">Select Unit</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

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,43 @@
+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

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

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,39 @@
+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;