@meetelise/chat 1.30.0 → 1.30.2

package/src/WebComponent/FeeCalculator/components/fee-item/fee-item-styles.ts

@@ -0,0 +1,44 @@
+import { css } from "lit";
+
+const feeItemStyles = css`
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .fee-item {
+    display: flex;
+    justify-content: space-between;
+    margin: 8px 20px;
+  }
+
+  .fee-info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1;
+  }
+
+  .required-label {
+    color: #868e96;
+    font-size: 0.8rem;
+    margin-bottom: 8px;
+  }
+
+  .fee-name {
+    font-size: 1rem;
+  }
+
+  .fee-description {
+    color: #868e96;
+    font-size: 0.8rem;
+    margin-top: 4px;
+  }
+
+  .fee-amount {
+    font-size: 1rem;
+    align-self: center;
+  }
+`;
+
+export default feeItemStyles;

package/src/WebComponent/FeeCalculator/components/fee-item/fee-item.ts

@@ -0,0 +1,38 @@
+import { LitElement, html, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { FeeEstimate } from "../../../../services/fees/calculateQuote";
+
+import "../addon-item/addon-item";
+
+import feeItemStyles from "./fee-item-styles";
+
+@customElement("fee-item")
+export class FeeItemComponent extends LitElement {
+  static styles = feeItemStyles;
+
+  @property({ type: Object })
+  feeItem: FeeEstimate | null = null;
+
+  render(): TemplateResult {
+    if (!this.feeItem) return html``;
+
+    return html`
+      <div class="fee-item">
+        <div class="fee-info">
+          ${this.feeItem.required
+            ? html`<div class="required-label">Required</div>`
+            : ""}
+          <div class="fee-name">${this.feeItem.displayName}</div>
+          <div class="fee-description">${this.feeItem.description}</div>
+        </div>
+        <div class="fee-amount">${this.feeItem.displayAmount}</div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fee-item": FeeItemComponent;
+  }
+}

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

@@ -0,0 +1,144 @@
+import { css } from "lit";
+
+const floorPlanSelectorStyles = css`
+  :host {
+    display: block;
+    margin-bottom: 16px;
+  }
+
+  .floor-plan-selector {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .floor-plan-selector-label {
+    font-size: 1rem;
+    font-weight: normal;
+    margin-bottom: 8px;
+  }
+
+  .floor-plan-selector-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+
+  .floor-plan-badge {
+    padding: 6px 12px;
+    border-radius: 16px;
+    font-size: 0.9rem;
+    cursor: pointer;
+    background-color: #f0f0f0;
+    border: 1px solid #ddd;
+    transition: all 0.15s ease;
+  }
+
+  .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;
+    transition: max-height 0.15s ease-out;
+  }
+
+  .advanced-section.open {
+    max-height: 800px;
+    transition: max-height 0.2s ease-in;
+  }
+
+  .date-fields {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    margin-bottom: 16px;
+    transition: gap 0.15s ease;
+  }
+
+  .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;
+    transition: flex-direction 0.15s ease, max-height 0.15s ease,
+      width 0.15s ease, overflow-x 0.15s ease;
+  }
+
+  .unit-selection {
+    margin-top: 16px;
+    max-height: 16rem;
+    overflow-y: auto;
+    transition: max-height 0.15s ease, overflow-y 0.15s ease,
+      overflow-x 0.15s ease;
+  }
+
+  .unit-label {
+    font-size: 1rem;
+  }
+
+  .loading-container,
+  .no-floorplans-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  @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,241 @@
+import { LitElement, html, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { LayoutOption } from "../../../../fetchBuildingWebchatView";
+import { ALL_LAYOUTS_OPTION } from "../../constants";
+
+import fetchBuildingFloorplans, {
+  Floorplan,
+} from "../../../../services/fees/fetchBuildingFloorplans";
+import { layoutToBedrooms } from "../../../../services/fees/utils";
+import floorPlanSelectorStyles from "./floor-plan-selector-styles";
+import { addMonths, startOfMonth } from "date-fns";
+
+import "../floorplan-image-card/floorplan-image-card";
+import "../../../mega-loader";
+
+const FIRST_OF_NEXT_MONTH = startOfMonth(addMonths(new Date(), 1));
+
+@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: ((unitId: number) => void) | null = null;
+
+  @property()
+  onMoveInDateChange: ((moveInDate: Date) => void) | null = null;
+
+  @property()
+  onLeaseTermChange: ((leaseTerm: number) => void) | null = null;
+
+  @state()
+  moveInDate: Date | null = null;
+
+  @state()
+  leaseTerm = "12";
+
+  @state()
+  floorPlans: Floorplan[] = [];
+
+  @state()
+  selectedUnitId: number | 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 fetchFloorplans = async (): Promise<Floorplan[]> => {
+    this.isLoading = true;
+
+    const numBedrooms =
+      this.selectedLayoutIds.length === 1
+        ? layoutToBedrooms(this.selectedLayoutIds[0])
+        : undefined;
+
+    try {
+      const floorplans = await fetchBuildingFloorplans({
+        buildingSlug: this.buildingSlug,
+        moveInDateEarliest: this.moveInDate ? this.moveInDate : undefined,
+        ...(this.selectedLayoutIds.includes(ALL_LAYOUTS_OPTION)
+          ? {}
+          : { numBedrooms }),
+      });
+      return floorplans.filter((floorplan) => !!floorplan.url);
+    } finally {
+      this.isLoading = false;
+    }
+  };
+
+  firstUpdated = async (): Promise<void> => {
+    this.floorPlans = await this.fetchFloorplans();
+
+    // Default move-in is 1st of next month
+    this.moveInDate = FIRST_OF_NEXT_MONTH;
+    this.onMoveInDateChange?.(FIRST_OF_NEXT_MONTH);
+  };
+
+  handleUnitSelect = (unitId: number): void => {
+    this.selectedUnitId = unitId;
+    this.onUnitSelect?.(unitId);
+  };
+
+  handleLayoutChange = async (ids: number[]): Promise<void> => {
+    this.selectedLayoutIds = ids;
+    this.onSelectLayout?.(this.selectedLayoutIds);
+    this.floorPlans = await this.fetchFloorplans();
+  };
+
+  handleMoveInDateChange = async (e: Event): Promise<void> => {
+    const inputValue = (e.target as HTMLInputElement).value;
+    let newMoveIn;
+
+    if (!inputValue) {
+      newMoveIn = FIRST_OF_NEXT_MONTH;
+    } else {
+      newMoveIn = new Date(inputValue);
+    }
+
+    this.moveInDate = newMoveIn;
+    this.onMoveInDateChange?.(newMoveIn);
+    this.floorPlans = await this.fetchFloorplans();
+  };
+
+  handleLeaseTermChange = (e: Event): void => {
+    this.leaseTerm = (e.target as HTMLInputElement).value;
+    this.onLeaseTermChange?.(parseInt(this.leaseTerm));
+  };
+
+  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}
+                @input=${this.handleLeaseTermChange}
+              />
+            </div>
+          </div>
+          <div class="unit-selection">
+            <div class="unit-label">Select Unit</div>
+            <div class="image-carousel">
+              ${this.isLoading
+                ? html`
+                    <div class="loading-container">
+                      <mega-loader size="32"></mega-loader>
+                    </div>
+                  `
+                : ""}
+              ${this.floorPlans?.length === 0
+                ? html`
+                    <div class="no-floorplans-container">
+                      <p>No floorplans found</p>
+                    </div>
+                  `
+                : ""}
+              ${this.floorPlans?.map(
+                (floorplan) => html`
+                  <floorplan-image-card
+                    .floorplan=${floorplan}
+                    .onUnitSelect=${this.handleUnitSelect}
+                    .selected=${this.selectedUnitId === floorplan.unitId}
+                  ></floorplan-image-card>
+                `
+              )}
+            </div>
+          </div>
+        </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,74 @@
+import { css } from "lit";
+
+const floorplanImageCardStyles = css`
+  :host {
+    display: block;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .floorplan-image-card {
+    display: flex;
+    flex-direction: row;
+    background-color: #f8f9fa;
+    width: 18rem;
+    padding: 12px;
+    gap: 8px;
+    border-radius: 4px;
+    border: 2px solid transparent;
+    box-sizing: border-box;
+  }
+
+  .section-left {
+    flex: 0 0 auto;
+  }
+
+  .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;
+  }
+
+  @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,72 @@
+import { LitElement, TemplateResult } from "lit";
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { Floorplan } from "../../../../services/fees/fetchBuildingFloorplans";
+
+import floorplanImageCardStyles from "./floorplan-image-card-styles";
+
+@customElement("floorplan-image-card")
+export class FloorplanImageCard extends LitElement {
+  static styles = floorplanImageCardStyles;
+
+  @property({ type: Object })
+  floorplan: Floorplan = {} as Floorplan;
+
+  @property()
+  onUnitSelect: ((unitId: number) => void) | null = null;
+
+  @property({ type: Boolean })
+  selected = false;
+
+  get bedAndBathText(): string {
+    return `${this.floorplan.bedrooms}bd | ${this.floorplan.bathrooms}ba`;
+  }
+
+  get priceRange(): string {
+    if (this.floorplan.startingPrice === this.floorplan.maxPrice) {
+      return `$${this.floorplan.startingPrice}`;
+    }
+
+    return `$${this.floorplan.startingPrice} - $${this.floorplan.maxPrice}`;
+  }
+
+  handleOnUnitSelect(): void {
+    if (this.selected) return;
+    this.selected = !this.selected;
+    this.onUnitSelect?.(this.floorplan.unitId);
+  }
+
+  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.floorplan.url ?? ""}"
+            alt="${this.floorplan.name}"
+          />
+        </div>
+        <div class="section-right" @click=${this.handleOnUnitSelect}>
+          <p class="image-card-title">
+            ${this.floorplan.name} | ${this.priceRange}
+          </p>
+          <p class="image-card-subtitle">
+            ${this.bedAndBathText} | ${this.floorplan.squareFeet} ft |
+            ${this.floorplan.earliestAvailable}
+          </p>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "floorplan-image-card": FloorplanImageCard;
+  }
+}

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 "./addon-item/addon-item";
+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;

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

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

@@ -0,0 +1,3 @@
+export const ALL_LAYOUTS_OPTION = -1;
+
+export const CALCULATE_DEBOUNCE_MS = 1000;