@meetelise/chat 1.43.5 → 1.43.7

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

@@ -3,21 +3,23 @@ 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 } from "../../model";
 import { Unit } from "../../../../services/fees/fetchBuildingUnits";
 import {
-  BuildingFeeView,
-  BuildingFeeFrequency,
-  RentableItemSummary,
-} from "../../model";
+  MarketableFee,
+  MarketableFeeFrequency,
+} from "../../model/marketable-fee";
+import { RentableItemSummary } from "../../model";
 import { Quote } from "../../model/quote";
 import { FeeQuote } from "../../model/fee-quote";
-import { FeeFrequency, SourceFee } from "../../model/source-fee";
+import { FeeFrequency, MarketableFeeNew } from "../../model/marketable-fee-new";
 import { AmountRange } from "../../model/amount-range";
+import { ChargeInputs } from "../../../../services/fees/calculateQuote";
+import { DesiredRentableItem } from "../../model/desired-rentable-item";
+import { formatCurrency } from "../../../../utils";
 
 import "../floor-plan-selector/floor-plan-selector";
 import "../fee-card/fee-card";
-import "../addons/addon-table/addon-table";
+import "../charge-inputs/charge-inputs";
 import "../../../loaders/skeleton-loader";
 import "../../../loaders/mega-loader";
 
@@ -44,12 +46,15 @@ export class FeeCalculatorLayout extends LitElement {
   selectedLayoutIds: number[] = [ALL_LAYOUTS_OPTION];
 
   @property({ type: Object })
-  groupedFees: Record<BuildingFeeFrequency, BuildingFeeView[]> = {
-    [BuildingFeeFrequency.OneTime]: [],
-    [BuildingFeeFrequency.Monthly]: [],
-    [BuildingFeeFrequency.Quarterly]: [],
-    [BuildingFeeFrequency.Annually]: [],
-    [BuildingFeeFrequency.PerOccurrence]: [],
+  groupedFees: Record<MarketableFeeFrequency, MarketableFee[]> = {
+    [MarketableFeeFrequency.ONE_TIME]: [],
+    [MarketableFeeFrequency.MONTHLY]: [],
+    [MarketableFeeFrequency.WEEKLY]: [],
+    [MarketableFeeFrequency.BI_WEEKLY]: [],
+    [MarketableFeeFrequency.ANNUALLY]: [],
+    [MarketableFeeFrequency.DAILY]: [],
+    [MarketableFeeFrequency.AS_NEEDED]: [],
+    [MarketableFeeFrequency.NEVER]: [],
   };
 
   @property({ type: Array })
@@ -73,61 +78,78 @@ export class FeeCalculatorLayout extends LitElement {
   @property()
   onLeaseTermChange: ((leaseTerm: number) => void) | null = null;
 
-  @property()
-  onAddonSelect: ((addon: DesiredAddon) => void) | null = null;
+  @property({ type: Object })
+  chargeInputs: ChargeInputs = {
+    base_rent: 0,
+    num_pets: 0,
+    num_vehicles: 0,
+    num_applicants: 1,
+  };
 
-  @property({ attribute: false })
-  onRentableItemAdd: ((rentableItem: DesiredRentableItem) => void) | null =
+  @property()
+  onChargeInputsChange: ((newInputs: Partial<ChargeInputs>) => void) | null =
     null;
 
-  @property({ attribute: false })
-  onRentableItemRemove: ((rentableItem: DesiredRentableItem) => void) | null =
-    null;
+  @property({ type: Array })
+  selectedRentableItems: DesiredRentableItem[] = [];
 
-  /**
-   * 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.isAddon);
-
-    return [...addons, ...this.rentableItems].sort((a, b) => {
-      const aIsRentable = a instanceof RentableItemSummary;
-      const bIsRentable = b instanceof RentableItemSummary;
-
-      if (!aIsRentable && !bIsRentable) return 0;
-
-      const aAvailable = aIsRentable
-        ? (a as RentableItemSummary).allItems?.some((item) => item.available) ??
-          false
-        : true;
-      const bAvailable = bIsRentable
-        ? (b as RentableItemSummary).allItems?.some((item) => item.available) ??
-          false
-        : true;
-
-      // Sort unavailable rentable items to the end
-      return aAvailable === bAvailable ? 0 : aAvailable ? -1 : 1;
-    });
-  }
+  @property()
+  onRentableItemAdd: ((item: DesiredRentableItem) => void) | null = null;
+
+  @property()
+  onRentableItemRemove: ((item: DesiredRentableItem) => void) | null = null;
 
   get rentAsFeeQuote(): FeeQuote | null {
     if (!this.quote?.rentCost) return null;
 
     return {
-      sourceFee: {
-        name: "Rent",
-        description: `Unit ${this.selectedUnit?.unitNumber}`,
+      marketableFee: {
+        id: "rent",
+        buildingId: this.quote.buildingId || 0,
+        feeName: "Rent",
+        amount: this.quote.rentCost,
+        amountDisplay: formatCurrency(this.quote.rentCost, 2),
+        minEstimate: null,
+        maxEstimate: null,
+        percentRentMin: null,
+        percentRentMax: null,
+        percentRent: null,
         frequency: FeeFrequency.MONTHLY,
-        pricingMetadata: { pricingCategory: "MANDATORY" },
-      } as SourceFee,
+        category: "Rent",
+        hiddenReason: null,
+        description: `Unit ${this.selectedUnit?.unitNumber}`,
+        additionalInfo: null,
+        refundable: false,
+        unitIds: null,
+        layoutIds: null,
+        startDate: null,
+        endDate: null,
+        triggeredByEvent: null,
+        externalKey: null,
+        chargeCode: null,
+        bundleKey: null,
+        source: null,
+        publicFacing: true,
+        perApplicant: false,
+        prorated: null,
+        syncActive: true,
+      } as MarketableFeeNew,
       amountRange: {
         fixedValue: this.quote.rentCost,
         minValue: null,
         maxValue: null,
       } as AmountRange,
-      itemCombination: { quantities: [], toKey: () => "rent" },
+      chargeInputs: {
+        baseRent: this.quote.rentCost,
+        numPets: 0,
+        numDogs: 0,
+        numCats: 0,
+        numOtherPets: 0,
+        numVehicles: 0,
+        numApplicants: 1,
+        unitId: this.quote.unitId,
+        layoutId: null,
+      },
       isAddon: false,
     } as FeeQuote;
   }
@@ -149,7 +171,7 @@ export class FeeCalculatorLayout extends LitElement {
       { freq: FeeFrequency.BI_WEEKLY, title: "Bi-Weekly Charges" },
       { freq: FeeFrequency.WEEKLY, title: "Weekly Charges" },
       { freq: FeeFrequency.DAILY, title: "Daily Charges" },
-      { freq: FeeFrequency.ONE_TIME, title: "Prior to Move-In" },
+      { freq: FeeFrequency.ONE_TIME, title: "One-Time" },
       { freq: FeeFrequency.NEVER, title: "No Charges" },
     ];
 
@@ -160,7 +182,21 @@ export class FeeCalculatorLayout extends LitElement {
 
       let feesByFreq =
         feeQuotes?.filter((fq) => {
-          if (fq.sourceFee?.frequency === freq) return true;
+          if (fq.marketableFee?.frequency === freq) {
+            // For ONE_TIME fees, only show if they have specific triggered_by_event values
+            if (freq === FeeFrequency.ONE_TIME) {
+              const allowedEvents = [
+                "APPLICATION_SUBMISSION",
+                "APPLICATION_APPROVAL",
+                "LEASE_SIGNING",
+                "MOVE_IN",
+              ];
+              return allowedEvents.includes(
+                fq.marketableFee?.triggeredByEvent || ""
+              );
+            }
+            return true;
+          }
 
           if (fq.sourceRentableItem) {
             return (
@@ -189,6 +225,22 @@ export class FeeCalculatorLayout extends LitElement {
     return sections;
   }
 
+  renderTotalCost(): TemplateResult | null {
+    if (!this.quote?.totalMonthlyCost) return null;
+
+    const totalCost = this.quote.totalMonthlyCost.fixedValue;
+    if (!totalCost) return null;
+
+    return html`
+      <div class="total-cost-section">
+        <div class="total-cost-row">
+          <span class="total-cost-label">Total Monthly Cost:</span>
+          <span class="total-cost-amount">${formatCurrency(totalCost, 2)}</span>
+        </div>
+      </div>
+    `;
+  }
+
   renderFeesContent(): TemplateResult {
     if (!this.selectedUnit) {
       return html`
@@ -209,36 +261,7 @@ export class FeeCalculatorLayout extends LitElement {
                 ></skeleton-loader>
               </div>
             `
-          : this.renderFeeSections()}
-      </div>
-    `;
-  }
-
-  renderAddOns(): TemplateResult | null {
-    if (!this.showSkeletonLoader && !this.addOns.length) return null;
-
-    // Keep showing loader for addons section only if it's the initial loader
-    // otherwise let the parent handle the header loader for recalculations.
-    const showAddonLoader = this.showSkeletonLoader && !this.addOns.length;
-
-    return html`
-      <div class="sidepanel-section">
-        ${showAddonLoader
-          ? html`
-              <h5 class="sidepanel-section-title">Add-Ons</h5>
-              <div class="sidepanel-loading-container">
-                <mega-loader size="32"></mega-loader>
-              </div>
-            `
-          : html`
-              <addon-table
-                .addons=${this.addOns}
-                .disabled=${!this.selectedUnit}
-                .onAddonSelect=${this.onAddonSelect}
-                .onRentableItemAdd=${this.onRentableItemAdd}
-                .onRentableItemRemove=${this.onRentableItemRemove}
-              ></addon-table>
-            `}
+          : html` ${this.renderFeeSections()} ${this.renderTotalCost()} `}
       </div>
     `;
   }
@@ -261,7 +284,18 @@ export class FeeCalculatorLayout extends LitElement {
               .buildingSlug=${this.buildingSlug}
             ></floor-plan-selector>
           </div>
-          ${this.renderAddOns()}
+
+          <div class="sidepanel-section">
+            <charge-inputs
+              .chargeInputs=${this.chargeInputs}
+              .onChargeInputsChange=${this.onChargeInputsChange}
+              .disabled=${!this.selectedUnit}
+              .rentableItems=${this.rentableItems}
+              .selectedRentableItems=${this.selectedRentableItems}
+              .onRentableItemAdd=${this.onRentableItemAdd}
+              .onRentableItemRemove=${this.onRentableItemRemove}
+            ></charge-inputs>
+          </div>
         </div>
 
         ${this.renderFeesContent()}

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

@@ -25,7 +25,7 @@ export class FeeCard extends LitElement {
       (acc, fee) => acc + (fee.amountRange.fixedValue ?? 0),
       0
     );
-    return formatCurrency(total);
+    return formatCurrency(total, 2);
   }
 
   get groupedRentableItems(): Record<string, FeeQuote[]> {
@@ -67,19 +67,24 @@ export class FeeCard extends LitElement {
         </div>
 
         <div class="fee-card-list">
-          ${this.nonRentableItems.map(
-            (item) => html`<div class="fee-item-container">
-              <fee-item .feeQuote=${item}></fee-item>
-            </div>`
-          )}
-          ${Object.entries(this.groupedRentableItems).map(
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            ([_type, quotes]) => html`<div class="fee-item-container">
-              <grouped-rentable-item
-                .feeQuotes=${quotes}
-              ></grouped-rentable-item>
-            </div>`
-          )}
+          ${this.nonRentableItems
+            .filter((item) => (item.amountRange.fixedValue ?? 0) > 0)
+            .map(
+              (item) => html`<div class="fee-item-container">
+                <fee-item .feeQuote=${item}></fee-item>
+              </div>`
+            )}
+          ${Object.entries(this.groupedRentableItems)
+            .filter(([, quotes]) =>
+              quotes.some((quote) => (quote.amountRange.fixedValue ?? 0) > 0)
+            )
+            .map(
+              ([, quotes]) => html`<div class="fee-item-container">
+                <grouped-rentable-item
+                  .feeQuotes=${quotes}
+                ></grouped-rentable-item>
+              </div>`
+            )}
         </div>
 
         <div class="footer-container">

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

@@ -18,8 +18,10 @@ export class FeeItemComponent extends LitElement {
         this.feeQuote.sourceRentableItem.description || ""
       );
     }
-    const sourceFee = this.feeQuote?.sourceFee;
-    return sourceFee?.name ? sentenceTitleCase(sourceFee.name) : "";
+    const marketableFee = this.feeQuote?.marketableFee;
+    return marketableFee?.feeName
+      ? sentenceTitleCase(marketableFee.feeName)
+      : "";
   }
 
   get description(): string {
@@ -27,21 +29,28 @@ export class FeeItemComponent extends LitElement {
       const item = this.feeQuote.sourceRentableItem;
       return `${item.id}`;
     }
-    return this.feeQuote?.sourceFee?.description ?? "";
+    return this.feeQuote?.marketableFee?.description ?? "";
   }
 
-  get isRequired(): boolean {
-    if (!this.feeQuote?.sourceFee) return false;
-    return (
-      this.feeQuote.sourceFee.pricingMetadata.pricingCategory === "MANDATORY"
-    );
+  get triggeredEvent(): string {
+    const event = this.feeQuote?.marketableFee?.triggeredByEvent;
+    if (!event) return "";
+
+    const eventLabels: Record<string, string> = {
+      APPLICATION_SUBMISSION: "Due at Application Submission",
+      APPLICATION_APPROVAL: "Due at Application Approval",
+      LEASE_SIGNING: "Due at Lease Signing",
+      MOVE_IN: "Due at Move-In",
+    };
+
+    return eventLabels[event] || event;
   }
 
   get amount(): string | null {
     if (!this.feeQuote) return null;
     const amt = this.feeQuote.amountRange.fixedValue ?? 0;
     if (amt === 0) return null;
-    return formatCurrency(amt);
+    return formatCurrency(amt, 2);
   }
 
   render(): TemplateResult {
@@ -51,11 +60,13 @@ export class FeeItemComponent extends LitElement {
     return html`
       <div class="fee-item">
         <div class="fee-info">
-          ${this.isRequired
-            ? html`<div class="required-label">Required</div>`
-            : ""}
           <div class="fee-name">${this.name}</div>
           <div class="fee-description">${this.description}</div>
+          ${this.triggeredEvent
+            ? html`<div class="fee-triggered-event">
+                ${this.triggeredEvent}
+              </div>`
+            : ""}
         </div>
         <div class="fee-amount">${this.amount}</div>
       </div>

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

@@ -45,14 +45,7 @@ export class GroupedRentableItemComponent extends LitElement {
       (acc, quote) => acc + (quote.amountRange.fixedValue ?? 0),
       0
     );
-    return formatCurrency(total);
-  }
-
-  get isRequired(): boolean {
-    return this.feeQuotes.some(
-      (quote) =>
-        quote.sourceFee?.pricingMetadata?.pricingCategory === "MANDATORY"
-    );
+    return formatCurrency(total, 2);
   }
 
   get priceBreakdown(): string {
@@ -67,7 +60,7 @@ export class GroupedRentableItemComponent extends LitElement {
           `${group.count} ${pluralize(
             unitName,
             group.count
-          )} @ ${formatCurrency(group.price)}/month`
+          )} @ ${formatCurrency(group.price, 2)}/month`
       )
       .join(" + ");
   }
@@ -79,16 +72,13 @@ export class GroupedRentableItemComponent extends LitElement {
   }
 
   render(): TemplateResult {
-    if (!this.feeQuotes.length || this.totalAmount === formatCurrency(0)) {
+    if (!this.feeQuotes.length || this.totalAmount === formatCurrency(0, 2)) {
       return html``;
     }
 
     return html`
       <div class="fee-item">
         <div class="fee-info">
-          ${this.isRequired
-            ? html`<div class="required-label">Required</div>`
-            : ""}
           <div class="fee-name">${this.itemType}</div>
           <div class="fee-description">${this.priceBreakdown}</div>
         </div>

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

@@ -151,7 +151,7 @@ export class FloorPlanSelector extends LitElement {
     return html`
       <div class="unit-selection">
         <div class="image-carousel">
-          ${this.units?.length === 0
+          ${!this.isLoading && this.units?.length === 0
             ? html`
                 <div class="no-floorplans-container">
                   <p>No floorplans found</p>

package/src/WebComponent/FeeCalculator/components/index.ts

@@ -3,3 +3,4 @@ export * from "./floor-plan-selector/floor-plan-selector";
 export * from "./fee-card/fee-card";
 export * from "./fee-calculator-layout/fee-calculator-layout";
 export * from "./addons/addon-table/addon-table";
+export * from "./charge-inputs/charge-inputs";