@meetelise/chat 1.43.5 → 1.43.7

package/src/WebComponent/FeeCalculator/components/addons/addon-table/addon-table.ts

@@ -1,7 +1,7 @@
 import { LitElement, html, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { MarketableFee } from "../../../model/marketable-fee";
 import {
-  BuildingFeeView,
   DesiredAddon,
   DesiredRentableItem,
   RentableItemSummary,
@@ -16,7 +16,6 @@ import styles from "./addon-table-styles";
 
 import "../../../../shared/simple-tooltip";
 import "./table-qty-selectors";
-import "./table-matrix-qty-selector";
 
 type AddonQuantityState = Map<string | number, ItemQuantity[] | number>;
 
@@ -25,7 +24,7 @@ export class AddonTable extends LitElement {
   static styles = styles;
 
   @property({ type: Array })
-  set addons(value: (BuildingFeeView | RentableItemSummary)[]) {
+  set addons(value: (MarketableFee | RentableItemSummary)[]) {
     const oldValue = this._addons;
     this._addons = value;
     if (value !== oldValue) {
@@ -33,10 +32,10 @@ export class AddonTable extends LitElement {
     }
     this.requestUpdate("addons", oldValue);
   }
-  get addons(): (BuildingFeeView | RentableItemSummary)[] {
+  get addons(): (MarketableFee | RentableItemSummary)[] {
     return this._addons;
   }
-  private _addons: (BuildingFeeView | RentableItemSummary)[] = [];
+  private _addons: (MarketableFee | RentableItemSummary)[] = [];
 
   @property({ type: Boolean })
   disabled = false;
@@ -80,38 +79,13 @@ export class AddonTable extends LitElement {
   }
 
   private initializeBuildingFeeQuantity(
-    addon: BuildingFeeView,
+    addon: MarketableFee,
     newQuantities: AddonQuantityState
   ): void {
-    // Simple addon
-    if (!addon.hasMatrix) {
-      const key = addon.unitLabel ?? 0;
-      const existingQuantity = this.preserveExistingQuantity(key, 0);
-      newQuantities.set(key, existingQuantity);
-      return;
-    }
-
-    // Matrix addon
-    const key = addon.id ?? 0;
-    const existingQuantities = this.preserveExistingQuantity(
-      key,
-      null as ItemQuantity[] | null
-    );
-
-    if (existingQuantities && Array.isArray(existingQuantities)) {
-      // Preserve existing matrix quantities
-      newQuantities.set(key, existingQuantities);
-    } else {
-      // Initialize new matrix quantities
-      const initialQuantities = addon.customMatrixData
-        ?.toRuleArray()?.[0]
-        ?.combination?.quantities.map((q: ItemQuantity) => ({
-          ...q,
-          quantity: 0,
-        })) ?? [{ itemType: "default", quantity: 0 }];
-
-      newQuantities.set(key, initialQuantities);
-    }
+    // Simple addon - MarketableFee doesn't have matrix anymore
+    const key = addon.id;
+    const existingQuantity = this.preserveExistingQuantity(key, 0);
+    newQuantities.set(key, existingQuantity);
   }
 
   private initializeQuantities(): void {
@@ -119,7 +93,7 @@ export class AddonTable extends LitElement {
 
     // Process each addon and preserve existing quantities
     this.addons.forEach((addon) => {
-      if (addon instanceof BuildingFeeView) {
+      if (!(addon instanceof RentableItemSummary)) {
         this.initializeBuildingFeeQuantity(addon, newQuantities);
       } else {
         this.initializeRentableItemQuantity(addon, newQuantities);
@@ -152,7 +126,7 @@ export class AddonTable extends LitElement {
     this.requestUpdate("quantities");
 
     const rentableItem = this.addons.find(
-      (a) => !(a instanceof BuildingFeeView) && a.type === change.type
+      (a) => a instanceof RentableItemSummary && a.type === change.type
     ) as RentableItemSummary | undefined;
 
     if (!rentableItem) return;
@@ -209,11 +183,13 @@ export class AddonTable extends LitElement {
     this.requestUpdate("selectedRentableItemIds");
   };
 
-  private getName(addon: BuildingFeeView | RentableItemSummary): string {
-    return addon instanceof BuildingFeeView ? addon.feeName : addon.displayName;
+  private getName(addon: MarketableFee | RentableItemSummary): string {
+    return addon instanceof RentableItemSummary
+      ? addon.displayName
+      : addon.fee_name;
   }
 
-  private getSortedAddons(): (BuildingFeeView | RentableItemSummary)[] {
+  private getSortedAddons(): (MarketableFee | RentableItemSummary)[] {
     return [...this.addons].sort((a, b) => {
       const aName = this.getName(a);
       const bName = this.getName(b);
@@ -222,31 +198,24 @@ export class AddonTable extends LitElement {
   }
 
   private isRentableItemAvailable(
-    addon: BuildingFeeView | RentableItemSummary
+    addon: MarketableFee | RentableItemSummary
   ): boolean {
-    if (addon instanceof BuildingFeeView) return true;
+    if (!(addon instanceof RentableItemSummary)) return true;
     return (addon.allItems?.filter((item) => item.available).length ?? 0) > 0;
   }
 
   private renderQtySelector(
-    addon: BuildingFeeView | RentableItemSummary
+    addon: MarketableFee | RentableItemSummary
   ): TemplateResult {
-    if (addon instanceof BuildingFeeView) {
-      return addon.hasMatrix
-        ? html`
-            <table-matrix-qty-selector
-              .feeItem=${addon}
-              .onQuantityChange=${this.handleAddonQuantityChange}
-              .disabled=${this.disabled}
-            ></table-matrix-qty-selector>
-          `
-        : html`
-            <table-addon-qty-selector
-              .feeItem=${addon}
-              .onQuantityChange=${this.handleAddonQuantityChange}
-              .disabled=${this.disabled}
-            ></table-addon-qty-selector>
-          `;
+    if (!(addon instanceof RentableItemSummary)) {
+      // Render addon selector for MarketableFee
+      return html`
+        <table-addon-qty-selector
+          .feeItem=${addon}
+          .onQuantityChange=${this.handleAddonQuantityChange}
+          .disabled=${this.disabled}
+        ></table-addon-qty-selector>
+      `;
     } else {
       const currentQuantity = (this.quantities.get(addon.type) as number) ?? 0;
       return html`

package/src/WebComponent/FeeCalculator/components/addons/addon-table/index.ts

@@ -1,3 +1,2 @@
 export * from "./addon-table";
 export * from "./table-qty-selectors";
-export * from "./table-matrix-qty-selector";

package/src/WebComponent/FeeCalculator/components/addons/addon-table/table-qty-selectors.ts

@@ -1,10 +1,7 @@
 import { LitElement, html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import {
-  BuildingFeeView,
-  DesiredAddon,
-  RentableItemSummary,
-} from "../../../model";
+import { MarketableFee } from "../../../model/marketable-fee";
+import { DesiredAddon, RentableItemSummary } from "../../../model";
 import { tableQtyStyles } from "./table-qty-selectors-styles";
 
 const DEFAULT_MAX_QUANTITY = 10;
@@ -14,8 +11,8 @@ export class TableAddonQtySelector extends LitElement {
   static styles = tableQtyStyles;
 
   @property({ type: Object })
-  feeItem: BuildingFeeView | null = null;
-  private _previousFeeItemId: number | null = null;
+  feeItem: MarketableFee | null = null;
+  private _previousFeeItemId: string | null = null;
 
   @property()
   onQuantityChange: ((addon: DesiredAddon) => void) | null = null;
@@ -27,7 +24,7 @@ export class TableAddonQtySelector extends LitElement {
   quantity = 0;
 
   private get maxQuantity(): number {
-    return this.feeItem?.maxAmount ?? DEFAULT_MAX_QUANTITY;
+    return this.feeItem?.max_estimate ?? DEFAULT_MAX_QUANTITY;
   }
 
   updated(changedProps: Map<string, unknown>): void {
@@ -56,10 +53,10 @@ export class TableAddonQtySelector extends LitElement {
     if (!this.onQuantityChange || !this.feeItem) return;
 
     this.onQuantityChange({
-      id: this.feeItem.id ?? 0,
+      id: this.feeItem.id,
       quantities: [
         {
-          itemType: this.feeItem.unitLabel ?? "",
+          itemType: this.feeItem.fee_name,
           quantity: this.quantity,
         },
       ],

package/src/WebComponent/FeeCalculator/components/charge-inputs/charge-inputs.ts

@@ -0,0 +1,351 @@
+import { LitElement, html, TemplateResult, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ChargeInputs } from "../../../../services/fees/calculateQuote";
+import { RentableItemSummary } from "../../model/rentable-item-summary";
+import { DesiredRentableItem } from "../../model/desired-rentable-item";
+
+@customElement("charge-inputs")
+export class ChargeInputsComponent extends LitElement {
+  static styles = css`
+    .charge-inputs-container {
+      background: white;
+      border-radius: 8px;
+      padding: 16px;
+      margin-bottom: 16px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .charge-inputs-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #1f2937;
+      margin-bottom: 16px;
+    }
+
+    .section-group {
+      margin-bottom: 16px;
+    }
+
+    .section-group:last-child {
+      margin-bottom: 0;
+    }
+
+    .section-subtitle {
+      font-size: 14px;
+      font-weight: 500;
+      color: #6b7280;
+      margin-bottom: 8px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .charge-input-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 0;
+      border-bottom: 1px solid #f3f4f6;
+    }
+
+    .charge-input-row:last-child {
+      border-bottom: none;
+    }
+
+    .charge-input-label {
+      font-size: 14px;
+      color: #374151;
+      flex: 1;
+    }
+
+    .charge-input-control {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .charge-input-button {
+      width: 24px;
+      height: 24px;
+      border: 1px solid #d1d5db;
+      background: #f9fafb;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: 14px;
+      color: #374151;
+      transition: all 0.2s;
+    }
+
+    .charge-input-button:hover {
+      background: #e5e7eb;
+      border-color: #9ca3af;
+    }
+
+    .charge-input-button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .charge-input-value {
+      min-width: 32px;
+      text-align: center;
+      font-size: 14px;
+      font-weight: 500;
+      color: #1f2937;
+    }
+
+    .rentable-item-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 0;
+      border-bottom: 1px solid #f3f4f6;
+    }
+
+    .rentable-item-row:last-child {
+      border-bottom: none;
+    }
+
+    .rentable-item-info {
+      flex: 1;
+    }
+
+    .rentable-item-label {
+      font-size: 14px;
+      color: #374151;
+      font-weight: 500;
+    }
+
+    .rentable-item-type {
+      font-size: 12px;
+      color: #9ca3af;
+      margin-top: 1px;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.025em;
+    }
+
+    .rentable-item-price {
+      font-size: 12px;
+      color: #6b7280;
+      margin-top: 2px;
+    }
+
+    .rentable-item-checkbox {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+    }
+
+    .rentable-item-checkbox:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  `;
+
+  @property({ type: Object })
+  chargeInputs: ChargeInputs = {
+    base_rent: 0,
+    num_pets: 0,
+    num_vehicles: 0,
+    num_applicants: 1,
+    num_cats: 0,
+    num_dogs: 0,
+    num_other_pets: 0,
+  };
+
+  @property()
+  onChargeInputsChange: ((newInputs: Partial<ChargeInputs>) => void) | null =
+    null;
+
+  @property({ type: Boolean })
+  disabled = false;
+
+  @property({ type: Array })
+  rentableItems: RentableItemSummary[] = [];
+
+  @property({ type: Array })
+  selectedRentableItems: DesiredRentableItem[] = [];
+
+  @property()
+  onRentableItemAdd: ((item: DesiredRentableItem) => void) | null = null;
+
+  @property()
+  onRentableItemRemove: ((item: DesiredRentableItem) => void) | null = null;
+
+  private handleIncrement(field: keyof ChargeInputs): void {
+    const currentValue = this.chargeInputs[field] ?? 0;
+    const newValue = currentValue + 1;
+
+    if (
+      field === "num_cats" ||
+      field === "num_dogs" ||
+      field === "num_other_pets"
+    ) {
+      this.updatePetCount({ [field]: newValue });
+    } else {
+      this.onChargeInputsChange?.({ [field]: newValue });
+    }
+  }
+
+  private handleDecrement(field: keyof ChargeInputs): void {
+    const currentValue = this.chargeInputs[field] ?? 0;
+    const minValue = field === "num_applicants" ? 1 : 0; // Minimum 1 applicant
+    const newValue = Math.max(minValue, currentValue - 1);
+
+    if (
+      field === "num_cats" ||
+      field === "num_dogs" ||
+      field === "num_other_pets"
+    ) {
+      this.updatePetCount({ [field]: newValue });
+    } else {
+      this.onChargeInputsChange?.({ [field]: newValue });
+    }
+  }
+
+  private updatePetCount(petUpdate: Partial<ChargeInputs>): void {
+    const updatedInputs = { ...this.chargeInputs, ...petUpdate };
+    const totalPets =
+      (updatedInputs.num_cats ?? 0) +
+      (updatedInputs.num_dogs ?? 0) +
+      (updatedInputs.num_other_pets ?? 0);
+
+    this.onChargeInputsChange?.({
+      ...petUpdate,
+      num_pets: totalPets,
+    });
+  }
+
+  private handleRentableItemToggle = (item: RentableItemSummary): void => {
+    const isSelected = this.selectedRentableItems.some(
+      (selected) => selected.type === item.type
+    );
+
+    if (isSelected) {
+      const desiredItem = this.selectedRentableItems.find(
+        (selected) => selected.type === item.type
+      );
+      if (desiredItem) {
+        this.onRentableItemRemove?.(desiredItem);
+      }
+    } else {
+      // Select the cheapest available item
+      const cheapestItem = item.minAvailableItem || item.allItems[0];
+      if (cheapestItem) {
+        const desiredItem: DesiredRentableItem = {
+          id: cheapestItem.id,
+          type: item.type,
+        };
+        this.onRentableItemAdd?.(desiredItem);
+      }
+    }
+  };
+
+  private getFieldLabel(field: keyof ChargeInputs): string {
+    const labels: Record<string, string> = {
+      base_rent: "Base Rent ($)",
+      num_pets: "Pets",
+      num_vehicles: "Vehicles",
+      num_applicants: "Applicants",
+      num_cats: "Cats",
+      num_dogs: "Dogs",
+      num_other_pets: "All Other Pets",
+    };
+    return labels[field] || field;
+  }
+
+  private renderRentableItemRow(item: RentableItemSummary): TemplateResult {
+    const isSelected = this.selectedRentableItems.some(
+      (selected) => selected.type === item.type
+    );
+
+    return html`
+      <div class="rentable-item-row">
+        <div class="rentable-item-info">
+          <div class="rentable-item-label">${item.description}</div>
+          <div class="rentable-item-type">${item.type}</div>
+          <div class="rentable-item-price">${item.priceDescription}</div>
+        </div>
+        <input
+          type="checkbox"
+          class="rentable-item-checkbox"
+          .checked=${isSelected}
+          ?disabled=${this.disabled}
+          @change=${() => this.handleRentableItemToggle(item)}
+          aria-label="Select ${item.description} (${item.type})"
+        />
+      </div>
+    `;
+  }
+
+  private renderChargeInputRow(field: keyof ChargeInputs): TemplateResult {
+    const value = this.chargeInputs[field] ?? 0;
+    const minValue = field === "num_applicants" ? 1 : 0;
+
+    return html`
+      <div class="charge-input-row">
+        <div class="charge-input-label">${this.getFieldLabel(field)}</div>
+        <div class="charge-input-control">
+          <button
+            class="charge-input-button"
+            @click=${() => this.handleDecrement(field)}
+            ?disabled=${value <= minValue}
+            aria-label="Decrease ${this.getFieldLabel(field)}"
+          >
+            −
+          </button>
+          <div class="charge-input-value">
+            ${field === "base_rent" ? `$${value}` : value}
+          </div>
+          <button
+            class="charge-input-button"
+            @click=${() => this.handleIncrement(field)}
+            aria-label="Increase ${this.getFieldLabel(field)}"
+          >
+            +
+          </button>
+        </div>
+      </div>
+    `;
+  }
+
+  render(): TemplateResult {
+    const householdFields: (keyof ChargeInputs)[] = [
+      "num_applicants",
+      "num_cats",
+      "num_dogs",
+      "num_other_pets",
+    ];
+
+    return html`
+      <div class="charge-inputs-container">
+        <div class="charge-inputs-title">Customize Your Quote</div>
+
+        <div class="section-group">
+          <div class="section-subtitle">Household Details</div>
+          ${householdFields.map((field) => this.renderChargeInputRow(field))}
+        </div>
+
+        ${this.rentableItems.length > 0
+          ? html`
+              <div class="section-group">
+                <div class="section-subtitle">Rentable Items</div>
+                ${this.rentableItems.map((item) =>
+                  this.renderRentableItemRow(item)
+                )}
+              </div>
+            `
+          : ""}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "charge-inputs": ChargeInputsComponent;
+  }
+}

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

@@ -176,4 +176,30 @@ export default css`
       box-sizing: border-box;
     }
   }
+
+  .total-cost-section {
+    margin-top: 20px;
+    padding: 16px;
+    background-color: #f8f9fa;
+    border-radius: 4px;
+    border: 2px solid #0066cc;
+  }
+
+  .total-cost-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .total-cost-label {
+    font-size: 18px;
+    font-weight: bold;
+    color: #333;
+  }
+
+  .total-cost-amount {
+    font-size: 24px;
+    font-weight: bold;
+    color: #0066cc;
+  }
 `;