@meetelise/chat 1.34.7 → 1.35.1

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

@@ -0,0 +1,243 @@
+import { LitElement, html, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ALL_LAYOUTS_OPTION } from "../../constants";
+import feeCalculatorLayoutStyles from "./fee-calculator-layout-styles";
+import { LayoutOption } from "../../../../fetchBuildingWebchatView";
+import { DesiredAddon, DesiredRentableItem, FeeEstimate } from "../../model";
+import { CalculateQuoteResponse } from "../../../../services/fees/calculateQuote";
+import { Unit } from "../../../../services/fees/fetchBuildingUnits";
+import {
+  BuildingFeeView,
+  BuildingFeeFrequency,
+  RentableItemSummary,
+} from "../../model";
+
+import "../floor-plan-selector/floor-plan-selector";
+import "../fee-card/fee-card";
+import "../addons/addon-item-qty-selector/addon-item-qty-selector";
+import "../addons/rentable-item-qty-selector/rentable-item-qty-selector";
+import "../addons/addon-item-matrix-qty-selector/addon-item-matrix-qty-selector";
+import "../../../loaders/skeleton-loader";
+import "../../../loaders/mega-loader";
+
+@customElement("fee-calculator-layout")
+export class FeeCalculatorLayout extends LitElement {
+  static styles = feeCalculatorLayoutStyles;
+
+  @property({ type: String })
+  buildingSlug = "";
+
+  @property({ type: Boolean })
+  isLoading = false;
+
+  @property({ type: Object })
+  selectedUnit: Unit | null = null;
+
+  @property({ type: Object })
+  quote: CalculateQuoteResponse | null = null;
+
+  @property({ type: Array })
+  layoutOptions: LayoutOption[] = [];
+
+  @property({ type: Array })
+  selectedLayoutIds: number[] = [ALL_LAYOUTS_OPTION];
+
+  @property({ type: Object })
+  groupedFees: Record<BuildingFeeFrequency, BuildingFeeView[]> = {
+    [BuildingFeeFrequency.OneTime]: [],
+    [BuildingFeeFrequency.Monthly]: [],
+    [BuildingFeeFrequency.Quarterly]: [],
+    [BuildingFeeFrequency.Annually]: [],
+    [BuildingFeeFrequency.PerOccurrence]: [],
+  };
+
+  @property({ type: Array })
+  rentableItems: RentableItemSummary[] = [];
+
+  @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;
+
+  @property()
+  onAddonSelect: ((addon: DesiredAddon) => void) | null = null;
+
+  @property()
+  onRentableItemSelect: ((rentableItem: DesiredRentableItem) => void) | null =
+    null;
+
+  get standardFees(): Record<BuildingFeeFrequency, BuildingFeeView[]> {
+    const result: Record<BuildingFeeFrequency, BuildingFeeView[]> =
+      {} as Record<BuildingFeeFrequency, BuildingFeeView[]>;
+
+    Object.entries(this.groupedFees).forEach(([frequency, fees]) => {
+      result[frequency as BuildingFeeFrequency] = fees.filter(
+        (fee) => !fee.isOptional
+      );
+    });
+
+    return result;
+  }
+
+  /**
+   * A "rentable item" is simply a fee which has inventory attached to it.
+   */
+  get addOns(): (BuildingFeeView | RentableItemSummary)[] {
+    const addons = Object.values(this.groupedFees)
+      .flat()
+      .filter((fee) => fee.isOptional);
+
+    return [...addons, ...this.rentableItems];
+  }
+
+  renderRecurrenceFeeSection(
+    title: string,
+    fees: FeeEstimate[]
+  ): TemplateResult | null {
+    if (!fees?.length) return null;
+
+    return html` <fee-card .fees=${fees} title=${title}></fee-card> `;
+  }
+
+  renderFeeSections(): TemplateResult[] {
+    const sections: TemplateResult[] = [];
+
+    const frequencyOrder = [
+      { freq: BuildingFeeFrequency.Annually, title: "Yearly Charges" },
+      { freq: BuildingFeeFrequency.Monthly, title: "Monthly Charges" },
+      { freq: BuildingFeeFrequency.Quarterly, title: "Quarterly Charges" },
+      { freq: BuildingFeeFrequency.OneTime, title: "Prior to Move-In" },
+    ];
+
+    const unitFees =
+      this.quote?.units.find((unit) => unit.unitId === this.selectedUnit?.id)
+        ?.fees ?? [];
+
+    const applicableFees = unitFees.filter((fee) => fee.applicable);
+
+    for (const { freq, title } of frequencyOrder) {
+      if (!applicableFees.length) continue;
+
+      const fees = applicableFees.filter((fee) => fee.frequency === freq);
+      const section = this.renderRecurrenceFeeSection(title, fees);
+      if (section) sections.push(section);
+    }
+
+    return sections;
+  }
+
+  renderFeesContent(): TemplateResult {
+    if (!this.selectedUnit) {
+      return html`
+        <div class="fees-container empty-state">
+          <p>Select a unit to view estimated costs</p>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="fees-container">
+        ${this.isLoading
+          ? html`
+              <div class="loading-container">
+                <skeleton-loader
+                  .cards=${3}
+                  .rowsPerCard=${[3, 2, 1]}
+                ></skeleton-loader>
+              </div>
+            `
+          : this.renderFeeSections()}
+      </div>
+    `;
+  }
+
+  renderAddOns(): TemplateResult | null {
+    if (!this.isLoading && !this.addOns.length) return null;
+
+    const initialLoad = this.isLoading && !this.addOns.length;
+
+    return html`
+      <div class="sidepanel-section">
+        <h5 class="sidepanel-section-title">Add-Ons</h5>
+        ${this.renderAddOnsContent(initialLoad)}
+      </div>
+    `;
+  }
+
+  private renderAddOnsContent(initialLoad: boolean): TemplateResult {
+    if (initialLoad) {
+      return html`
+        <div class="sidepanel-loading-container">
+          <mega-loader size="32"></mega-loader>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="sidepanel-addons-container">
+        ${this.addOns.map((addon) => {
+          if (addon instanceof BuildingFeeView) {
+            return html`
+              ${addon.hasMatrix
+                ? html`
+                    <addon-item-matrix-qty-selector
+                      .feeItem=${addon}
+                      .onQuantityChange=${this.onAddonSelect}
+                    ></addon-item-matrix-qty-selector>
+                  `
+                : html`
+                    <addon-item-qty-selector
+                      .feeItem=${addon}
+                      .onQuantityChange=${this.onAddonSelect}
+                    ></addon-item-qty-selector>
+                  `}
+            `;
+          } else {
+            return html`
+              <rentable-item-qty-selector
+                .rentableItem=${addon}
+                .onSelect=${this.onRentableItemSelect}
+              ></rentable-item-qty-selector>
+            `;
+          }
+        })}
+      </div>
+    `;
+  }
+
+  render(): TemplateResult {
+    return html`
+      <div class="fee-calculator-layout">
+        <div class="sidepanel">
+          <div class="sidepanel-section">
+            <floor-plan-selector
+              .layoutOptions=${this.layoutOptions}
+              .selectedLayoutIds=${this.selectedLayoutIds}
+              .onSelectLayout=${this.onSelectLayout}
+              .onUnitSelect=${this.onUnitSelect}
+              .onMoveInDateChange=${this.onMoveInDateChange}
+              .onLeaseTermChange=${this.onLeaseTermChange}
+              .buildingSlug=${this.buildingSlug}
+            ></floor-plan-selector>
+          </div>
+          ${this.renderAddOns()}
+        </div>
+
+        ${this.renderFeesContent()}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fee-calculator-layout": FeeCalculatorLayout;
+  }
+}

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

@@ -0,0 +1,65 @@
+import { css } from "lit";
+
+const collapsibleFeeSectionStyles = css`
+  .fee-card-section-container {
+    margin: 0 12px;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    background-color: white;
+    overflow: hidden;
+  }
+
+  .fee-card-section-header {
+    margin: 20px 0;
+    padding: 0 12px;
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+  .fee-item-container {
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+  .fee-item-container:last-child {
+    border-bottom: none;
+  }
+
+  .fee-card-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .section-title {
+    font-size: 1.2rem;
+    font-weight: normal;
+  }
+
+  .section-title-addons {
+    margin-top: 8px;
+    margin-left: 20px;
+    font-size: 0.8rem;
+    color: #868e96;
+  }
+
+  .total-amount,
+  .total-label {
+    font-size: 1rem;
+    font-weight: normal;
+    margin: 12px;
+  }
+
+  .footer-container {
+    background-color: #f8f9fa;
+    margin: 20px;
+    border-radius: 4px;
+  }
+
+  .footer {
+    font-size: 0.8rem;
+    display: flex;
+    margin: 12px;
+    justify-content: space-between;
+  }
+`;
+
+export default collapsibleFeeSectionStyles;

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

@@ -0,0 +1,91 @@
+import { LitElement, html, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { formatCurrency } from "../../../../utils";
+import collapsibleFeeSectionStyles from "./fee-card-styles";
+import { FeeEstimate } from "../../model";
+
+import "../fee-item/fee-item";
+
+@customElement("fee-card")
+export class FeeCard extends LitElement {
+  static styles = collapsibleFeeSectionStyles;
+
+  @property({ type: String })
+  title = "Fees";
+
+  @property({ type: Array })
+  fees: FeeEstimate[] = [];
+
+  @property({ type: Number })
+  rent = 0;
+
+  @property({ type: Number })
+  quoteTotal = 0;
+
+  @state()
+  private buildingFeesToQuantity: Record<number, number> = {};
+
+  get totalAmount(): string {
+    if (this.quoteTotal) return formatCurrency(this.quoteTotal);
+
+    const total = this.fees.reduce((acc, fee) => acc + fee.amount, 0);
+    return formatCurrency(total);
+  }
+
+  get standardFees(): FeeEstimate[] {
+    return this.fees.filter((fee) => !fee.isAddOn);
+  }
+
+  get addons(): FeeEstimate[] {
+    return this.fees.filter((fee) => fee.isAddOn);
+  }
+
+  handleQuantityChange = (feeId: number, quantity: number): void => {
+    this.buildingFeesToQuantity[feeId] = quantity;
+    this.requestUpdate();
+  };
+
+  render(): TemplateResult {
+    return html`
+      <div class="fee-card-section-container">
+        <div class="fee-card-section-header">
+          <h1 class="section-title">${this.title}</h1>
+        </div>
+
+        <div class="fee-card-list">
+          ${this.standardFees.map(
+            (item) => html`<div class="fee-item-container">
+              <fee-item .feeItem=${item}></fee-item>
+            </div>`
+          )}
+        </div>
+
+        ${this.addons.length > 0
+          ? html`
+              <div class="fee-card-list">
+                <div class="section-title-addons">Add-Ons</div>
+                ${this.addons.map(
+                  (item) => html`<div class="fee-item-container">
+                    <fee-item .feeItem=${item}></fee-item>
+                  </div>`
+                )}
+              </div>
+            `
+          : ""}
+
+        <div class="footer-container">
+          <div class="footer">
+            <h1 class="total-label">Estimated Total</h1>
+            <h1 class="total-amount">${this.totalAmount}</h1>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fee-card": FeeCard;
+  }
+}

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 "../../model";
+
+import "../addons/addon-item-qty-selector/addon-item-qty-selector";
+
+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,151 @@
+import { css } from "lit";
+
+const floorPlanSelectorStyles = css`
+  :host {
+    display: block;
+    margin-bottom: 16px;
+  }
+
+  .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 {
+    margin-top: 16px;
+    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;