@meetelise/chat 1.29.0 → 1.30.1

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

@@ -0,0 +1,79 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+  }
+
+  .addon-container {
+    border: 1px solid #e5e7eb;
+    border-radius: 0.375rem;
+    display: flex;
+    padding: 0.5rem;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .addon-left {
+    display: flex;
+    flex: 1;
+  }
+
+  .addon-info {
+    margin-left: 0.75rem;
+  }
+
+  .addon-title {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #374151;
+  }
+
+  .addon-right {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .operator-sign {
+    display: inline-block;
+    line-height: 1;
+    position: relative;
+    transform: translateY(2px);
+    width: 1rem;
+    text-align: center;
+  }
+
+  .quantity-control {
+    display: flex;
+    align-items: center;
+    border: 1px solid #dee2e6;
+    border-radius: 0.2;
+  }
+
+  .quantity-button {
+    font-size: 1.2rem;
+    padding: 0.5rem;
+    background: none;
+    border: none;
+    color: #347ff7;
+    cursor: pointer;
+  }
+
+  .quantity-button:hover {
+    background-color: #f3f4f6;
+  }
+
+  .quantity-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .quantity-value {
+    padding: 0.25rem;
+    font-size: 0.875rem;
+  }
+
+  .total-cost {
+    display: none;
+  }
+`;

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

@@ -0,0 +1,121 @@
+import { LitElement, html, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { BuildingFee } from "../../model/building-fee";
+import { formatCurrency } from "../../../../utils";
+
+import addonItemStyles from "./addon-item-styles";
+import { DesiredAddon } from "../../../../services/fees/calculateQuote";
+
+@customElement("add-on-item")
+export class AddonItem extends LitElement {
+  static styles = addonItemStyles;
+
+  @property({ type: Object })
+  feeItem: BuildingFee | null = null;
+
+  @property()
+  onQuantityChange: ((addon: DesiredAddon) => void) | null = null;
+
+  @state()
+  private isChecked = false;
+
+  @state()
+  private quantity = 0;
+
+  get totalCost(): string {
+    const amt = this.feeItem?.blueprint.transactionAmount ?? 0;
+    const cost = amt * this.quantity;
+    return formatCurrency(cost);
+  }
+
+  get atMaxUnits(): boolean {
+    const maxUnits =
+      this.feeItem?.blueprint.addOnInfo?.maxUnitsCharged ?? Infinity;
+    return this.quantity >= maxUnits;
+  }
+
+  get atMinUnits(): boolean {
+    const minUnits = this.feeItem?.blueprint.addOnInfo?.minUnitsCharged ?? 0;
+    return this.quantity <= minUnits;
+  }
+
+  private handleCheckboxClick(): void {
+    if (!this.isChecked) {
+      this.isChecked = true;
+      this.quantity = 1;
+      return;
+    }
+    this.isChecked = false;
+    this.quantity = 0;
+  }
+
+  private handleIncrement(): void {
+    if (this.atMaxUnits) return;
+    this.isChecked = true;
+    this.quantity += 1;
+    this.onQuantityChange?.({
+      id: this.feeItem?.id ?? 0,
+      quantity: this.quantity,
+      type: this.feeItem?.blueprint.addOnInfo?.addOnType ?? "",
+    });
+  }
+
+  private handleDecrement(): void {
+    if (this.atMinUnits) return;
+    this.quantity = Math.max(0, this.quantity - 1);
+    this.isChecked = this.quantity > 0;
+    this.onQuantityChange?.({
+      id: this.feeItem?.id ?? 0,
+      quantity: this.quantity,
+      type: this.feeItem?.blueprint.addOnInfo?.addOnType ?? "",
+    });
+  }
+
+  render(): TemplateResult {
+    if (!this.feeItem || !this.feeItem.blueprint.addOnInfo) return html``;
+
+    return html`
+      <div>
+        <div class="addon-container">
+          <div class="addon-left">
+            <input
+              type="checkbox"
+              ?checked=${this.isChecked}
+              @click=${this.handleCheckboxClick}
+            />
+            <div class="addon-info">
+              <p class="addon-title">${this.feeItem.displayName("Add-On")}</p>
+            </div>
+          </div>
+
+          <div class="addon-right">
+            <div class="quantity-control">
+              <button
+                class="quantity-button"
+                @click=${this.handleDecrement}
+                ?disabled=${this.quantity <= 0}
+                aria-label="Decrease quantity"
+              >
+                <span class="operator-sign">&minus;</span>
+              </button>
+              <span class="quantity-value">${this.quantity}</span>
+              <button
+                class="quantity-button"
+                @click=${this.handleIncrement}
+                aria-label="Increase quantity"
+              >
+                <span class="operator-sign">+</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "addon-item": AddonItem;
+  }
+}

package/src/WebComponent/FeeCalculator/components/addon-item/index.ts

@@ -0,0 +1 @@
+export * from "./addon-item";

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

@@ -0,0 +1,127 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    --transition-timing: 0.2s ease;
+  }
+
+  .fee-calculator-layout {
+    display: flex;
+    margin-top: 20px;
+    gap: 20px;
+    transition: margin-top var(--transition-timing),
+      padding var(--transition-timing), gap var(--transition-timing),
+      width var(--transition-timing), height var(--transition-timing);
+  }
+
+  .sidepanel {
+    flex: 0 0 300px;
+    display: flex;
+    margin-left: 20px;
+    background-color: white;
+    flex-direction: column;
+    max-width: 50%;
+    gap: 20px;
+    transition: width var(--transition-timing),
+      max-width var(--transition-timing), margin var(--transition-timing);
+  }
+
+  .sidepanel-section {
+    padding: 16px;
+    border-radius: 4px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    background-color: white;
+    transition: border-radius var(--transition-timing),
+      width var(--transition-timing), margin var(--transition-timing);
+  }
+
+  .sidepanel-section-title {
+    margin-top: 0;
+    margin-bottom: 12px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+  }
+
+  .sidepanel-addons-container {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .fees-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background-color: #f8f9fa;
+    gap: 16px;
+    transition: width var(--transition-timing), margin var(--transition-timing),
+      padding var(--transition-timing);
+    min-height: 300px;
+  }
+
+  .loading-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    min-height: 300px;
+    flex: 1;
+  }
+
+  .empty-state {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    height: 100%;
+    min-height: 300px;
+  }
+
+  @media (max-width: 768px) {
+    .fee-calculator-layout,
+    .sidepanel,
+    .fees-container,
+    .sidepanel-section {
+      width: 100%;
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    .fee-calculator-layout {
+      flex-direction: column;
+      gap: 10px;
+      height: 100%;
+    }
+
+    .sidepanel {
+      max-width: 100%;
+      order: 1;
+      flex: none;
+    }
+
+    .fees-container {
+      order: 2;
+      min-height: auto;
+    }
+
+    .sidepanel-section {
+      border-radius: 0;
+      margin: 0 0 8px 0;
+    }
+
+    .loading-container {
+      height: auto;
+      min-height: 100px;
+      padding-top: 20px;
+      align-items: flex-start;
+    }
+
+    .empty-state {
+      height: auto;
+      min-height: 100px;
+    }
+  }
+`;

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

@@ -0,0 +1,191 @@
+import { LitElement, html, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { BuildingFee, RecurrenceFrequency } from "../../model/building-fee";
+import { ALL_LAYOUTS_OPTION } from "../../constants";
+import feeCalculatorLayoutStyles from "./fee-calculator-layout-styles";
+import { LayoutOption } from "../../../../fetchBuildingWebchatView";
+import {
+  CalculateQuoteResponse,
+  DesiredAddon,
+  FeeEstimate,
+} from "../../../../services/fees/calculateQuote";
+
+import "../floor-plan-selector/floor-plan-selector";
+import "../fee-card/fee-card";
+import "../addon-item/addon-item";
+import "../../../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: Number })
+  selectedUnitId: number | 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<RecurrenceFrequency, BuildingFee[]> = {
+    [RecurrenceFrequency.OneTime]: [],
+    [RecurrenceFrequency.Daily]: [],
+    [RecurrenceFrequency.Weekly]: [],
+    [RecurrenceFrequency.BiWeekly]: [],
+    [RecurrenceFrequency.Monthly]: [],
+    [RecurrenceFrequency.Yearly]: [],
+    [RecurrenceFrequency.Unknown]: [],
+  };
+
+  @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;
+
+  @property()
+  onAddonSelect: ((addon: DesiredAddon) => void) | null = null;
+
+  get standardFees(): Record<RecurrenceFrequency, BuildingFee[]> {
+    const result: Record<RecurrenceFrequency, BuildingFee[]> = {} as Record<
+      RecurrenceFrequency,
+      BuildingFee[]
+    >;
+
+    Object.entries(this.groupedFees).forEach(([frequency, fees]) => {
+      result[frequency as RecurrenceFrequency] = fees.filter(
+        (fee) => !fee.isAddOn
+      );
+    });
+
+    return result;
+  }
+
+  get addOns(): BuildingFee[] {
+    return Object.values(this.groupedFees)
+      .flat()
+      .filter((fee) => fee.isAddOn);
+  }
+
+  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: RecurrenceFrequency.Yearly, title: "Yearly Charges" },
+      { freq: RecurrenceFrequency.Monthly, title: "Monthly Charges" },
+      { freq: RecurrenceFrequency.BiWeekly, title: "Bi-Weekly Charges" },
+      { freq: RecurrenceFrequency.Weekly, title: "Weekly Charges" },
+      { freq: RecurrenceFrequency.Daily, title: "Daily Charges" },
+      { freq: RecurrenceFrequency.Unknown, title: "Other Charges" },
+      { freq: RecurrenceFrequency.OneTime, title: "Prior to Move-In" },
+    ];
+
+    const unitFees =
+      this.quote?.units.find((unit) => unit.unitId === this.selectedUnitId)
+        ?.fees ?? [];
+
+    for (const { freq, title } of frequencyOrder) {
+      if (!unitFees.length) continue;
+
+      const fees = unitFees.filter((fee) => fee.frequency === freq);
+      const section = this.renderRecurrenceFeeSection(title, fees);
+      if (section) sections.push(section);
+    }
+
+    return sections;
+  }
+
+  renderFeesContent(): TemplateResult {
+    if (!this.selectedUnitId) {
+      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">
+                <mega-loader></mega-loader>
+              </div>
+            `
+          : this.renderFeeSections()}
+      </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.addOns.length
+            ? html`
+                <div class="sidepanel-section">
+                  <h5 class="sidepanel-section-title">Add-Ons</h5>
+                  <div class="sidepanel-addons-container">
+                    ${this.addOns.map(
+                      (addon) => html`
+                        <add-on-item
+                          .feeItem=${addon}
+                          .onQuantityChange=${this.onAddonSelect}
+                        ></add-on-item>
+                      `
+                    )}
+                  </div>
+                </div>
+              `
+            : ""}
+        </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 "../../../../services/fees/calculateQuote";
+
+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;
+  }
+}