@meetelise/chat 1.34.2 → 1.34.4

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

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

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

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

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

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

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