@meetelise/chat 1.39.0 → 1.39.1

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

@@ -3,6 +3,9 @@ import { FeeQuote } from "../../model/fee-quote";
 export declare class FeeItemComponent extends LitElement {
     static styles: import("lit").CSSResult;
     feeQuote: FeeQuote | null;
+    get name(): string;
+    get isRequired(): boolean;
+    get description(): string;
     render(): TemplateResult;
 }
 declare global {

package/dist/src/WebComponent/FeeCalculator/model/building-fee-view.d.ts

@@ -29,6 +29,7 @@ export declare class BuildingFeeView {
     pricingType: "fixed" | "per-item" | "usage-based" | "percent-rent" | "custom";
     frequency: BuildingFeeFrequency;
     nlpPricing?: string;
+    isAddon: boolean;
     amount?: number;
     percentRent?: number;
     unitLabel?: string;

package/dist/src/WebComponent/FeeCalculator/model/fee-quote.d.ts

@@ -1,8 +1,11 @@
 import { SourceFee } from "./source-fee";
 import { AmountRange } from "./amount-range";
 import { ItemCombination } from "./item-combination";
+import { RentableItem } from "./rentable-item";
 export interface FeeQuote {
-    sourceFee: SourceFee;
+    sourceFee?: SourceFee;
+    sourceRentableItem?: RentableItem | null;
+    isAddon: boolean | null;
     amountRange: AmountRange;
     itemCombination: ItemCombination;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meetelise/chat",
-  "version": "1.39.0",
+  "version": "1.39.1",
   "description": "",
   "keywords": [],
   "homepage": "https://github.com/MeetElise/chat-ui#readme",

package/public/dist/index.js

@@ -3286,7 +3286,7 @@ xmlns="http://www.w3.org/2000/svg"
       margin: 2px 0;
     }
   }
-`;class Qo{constructor(e={}){var t,i,n,o,r;this.id=null!==(t=e.id)&&void 0!==t?t:"",this.description=null!==(i=e.description)&&void 0!==i?i:"",this.rent=null!==(n=e.rent)&&void 0!==n?n:0,this.rentFrequency=null!==(o=e.rentFrequency)&&void 0!==o?o:"monthly",this.available=null!==(r=e.available)&&void 0!==r&&r,this.reservedUntil=e.reservedUntil?new Date(e.reservedUntil):void 0}}class Go{constructor(e={}){var t,i,n,o,r;this.description=null!==(t=e.description)&&void 0!==t?t:"",this.type=null!==(i=e.type)&&void 0!==i?i:"",this.minAvailableItem=e.minAvailableItem?new Qo(e.minAvailableItem):void 0,this.maxAvailableItem=e.maxAvailableItem?new Qo(e.maxAvailableItem):void 0,this.allItems=(null!==(n=e.allItems)&&void 0!==n?n:[]).map((e=>new Qo(e))),this.rent=null!==(o=e.rent)&&void 0!==o?o:0,this.priceDescription=null!==(r=e.priceDescription)&&void 0!==r?r:""}get displayName(){return this.description}get itemDescription(){return 0===this.allItems.length?"":this.allItems[0].description}}class qo{constructor(e=[]){this.quantities=e}toKey(){return this.quantities.sort(((e,t)=>e.itemType.localeCompare(t.itemType))).map((e=>`${e.itemType}:${e.quantity}`)).join(",")}}class Wo{constructor(e={}){var t;this.rules=new Map,(null!==(t=e.pricingRules)&&void 0!==t?t:[]).forEach((e=>this.addRule(e)))}addRule(e){const t=e.combination.toKey();this.rules.set(t,e)}getPrice(e){const t=e.toKey(),i=this.rules.get(t);return null==i?void 0:i.price}toRuleArray(){return Array.from(this.rules.values())}toJSON(){return{pricingRules:this.toRuleArray()}}static fromJSON(e){var t;return new Wo({pricingRules:null===(t=e.pricingRules)||void 0===t?void 0:t.map((e=>({...e,combination:new qo(e.combination.quantities)})))})}}var Vo;!function(e){e.OneTime="One Time",e.Monthly="Monthly",e.Quarterly="Quarterly",e.Annually="Annually",e.PerOccurrence="Per Occurrence"}(Vo||(Vo={}));class Yo{constructor(e={}){var t,i,n,o,r,a,s,l,u;this.category="Other",this.syncActive=!0,this.refundable=!1,this.publicFacing=!0,this.id=e.id,this.buildingId=null!==(t=e.buildingId)&&void 0!==t?t:0,this.feeName=null!==(i=e.feeName)&&void 0!==i?i:"",this.description=e.description,this.category=null!==(n=e.category)&&void 0!==n?n:"Other",this.unitIds=e.unitIds,this.layoutIds=e.layoutIds,this.startDate=e.startDate,this.endDate=e.endDate,this.source=e.source,this.externalKey=e.externalKey,this.syncActive=null===(o=e.syncActive)||void 0===o||o,this.hiddenReason=e.hiddenReason,this.refundable=null!==(r=e.refundable)&&void 0!==r&&r,this.bundleKey=e.bundleKey,this.publicFacing=null===(a=e.publicFacing)||void 0===a||a,this.chargeCode=e.chargeCode,this.prorated=e.prorated,this.pricingCategory=null!==(s=e.pricingCategory)&&void 0!==s?s:"mandatory",this.pricingType=null!==(l=e.pricingType)&&void 0!==l?l:"fixed",this.frequency=null!==(u=e.frequency)&&void 0!==u?u:Vo.OneTime,this.nlpPricing=e.nlpPricing,void 0!==e.amount&&(this.amount=e.amount),void 0!==e.percentRent&&(this.percentRent=e.percentRent),void 0!==e.unitLabel&&(this.unitLabel=e.unitLabel),void 0!==e.minAmount&&(this.minAmount=e.minAmount),void 0!==e.maxAmount&&(this.maxAmount=e.maxAmount);const c=e.customMatrixData;var d;c instanceof Wo?this.customMatrixData=c:(d=c)&&"object"==typeof d&&"pricingRules"in d&&Array.isArray(d.pricingRules)&&(this.customMatrixData=Wo.fromJSON(c))}get isOptional(){return"situational"===this.pricingCategory}get hasMatrix(){return!("custom"!==this.pricingType||!this.customMatrixData)}}const Ko=class{constructor(){this.params=new URLSearchParams}addSingle(e,t){return t?(this.params.append(e,t),this):this}addArray(e,t){return t?(t.forEach((t=>{t&&this.params.append(`${e}[]`,t)})),this):this}build(){return this.params.toString()?`?${this.params.toString()}`:""}},Xo=e=>new Yo(e),Zo=e=>new Go(e),Jo=async(e,i)=>{try{const n=(new Ko).addArray("layout_ids",null==i?void 0:i.map((e=>e.toString()))),o=await t().get(`https://app.meetelise.com/platformApi/webchat/${e}/fees?${n.build()}`);if(o.data){const e=fi(o.data);return{fees:e.fees.map(Xo),rentableItems:e.rentableItems.map(Zo),buildingIncentives:e.buildingIncentives}}}catch(t){xn({logType:Cn.error,buildingSlug:e,logTitle:"[ERROR_GETTING_FEES]",logData:{error:t}})}return{fees:[],rentableItems:[],buildingIncentives:[]}},er=(e="black")=>B`<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
+`;class Qo{constructor(e={}){var t,i,n,o,r;this.id=null!==(t=e.id)&&void 0!==t?t:"",this.description=null!==(i=e.description)&&void 0!==i?i:"",this.rent=null!==(n=e.rent)&&void 0!==n?n:0,this.rentFrequency=null!==(o=e.rentFrequency)&&void 0!==o?o:"monthly",this.available=null!==(r=e.available)&&void 0!==r&&r,this.reservedUntil=e.reservedUntil?new Date(e.reservedUntil):void 0}}class Go{constructor(e={}){var t,i,n,o,r;this.description=null!==(t=e.description)&&void 0!==t?t:"",this.type=null!==(i=e.type)&&void 0!==i?i:"",this.minAvailableItem=e.minAvailableItem?new Qo(e.minAvailableItem):void 0,this.maxAvailableItem=e.maxAvailableItem?new Qo(e.maxAvailableItem):void 0,this.allItems=(null!==(n=e.allItems)&&void 0!==n?n:[]).map((e=>new Qo(e))),this.rent=null!==(o=e.rent)&&void 0!==o?o:0,this.priceDescription=null!==(r=e.priceDescription)&&void 0!==r?r:""}get displayName(){return this.description}get itemDescription(){return 0===this.allItems.length?"":this.allItems[0].description}}class qo{constructor(e=[]){this.quantities=e}toKey(){return this.quantities.sort(((e,t)=>e.itemType.localeCompare(t.itemType))).map((e=>`${e.itemType}:${e.quantity}`)).join(",")}}class Wo{constructor(e={}){var t;this.rules=new Map,(null!==(t=e.pricingRules)&&void 0!==t?t:[]).forEach((e=>this.addRule(e)))}addRule(e){const t=e.combination.toKey();this.rules.set(t,e)}getPrice(e){const t=e.toKey(),i=this.rules.get(t);return null==i?void 0:i.price}toRuleArray(){return Array.from(this.rules.values())}toJSON(){return{pricingRules:this.toRuleArray()}}static fromJSON(e){var t;return new Wo({pricingRules:null===(t=e.pricingRules)||void 0===t?void 0:t.map((e=>({...e,combination:new qo(e.combination.quantities)})))})}}var Vo;!function(e){e.OneTime="One Time",e.Monthly="Monthly",e.Quarterly="Quarterly",e.Annually="Annually",e.PerOccurrence="Per Occurrence"}(Vo||(Vo={}));class Yo{constructor(e={}){var t,i,n,o,r,a,s,l,u,c;this.category="Other",this.syncActive=!0,this.refundable=!1,this.publicFacing=!0,this.id=e.id,this.buildingId=null!==(t=e.buildingId)&&void 0!==t?t:0,this.feeName=null!==(i=e.feeName)&&void 0!==i?i:"",this.description=e.description,this.category=null!==(n=e.category)&&void 0!==n?n:"Other",this.unitIds=e.unitIds,this.layoutIds=e.layoutIds,this.startDate=e.startDate,this.endDate=e.endDate,this.source=e.source,this.externalKey=e.externalKey,this.syncActive=null===(o=e.syncActive)||void 0===o||o,this.hiddenReason=e.hiddenReason,this.refundable=null!==(r=e.refundable)&&void 0!==r&&r,this.bundleKey=e.bundleKey,this.publicFacing=null===(a=e.publicFacing)||void 0===a||a,this.chargeCode=e.chargeCode,this.prorated=e.prorated,this.pricingCategory=null!==(s=e.pricingCategory)&&void 0!==s?s:"mandatory",this.pricingType=null!==(l=e.pricingType)&&void 0!==l?l:"fixed",this.frequency=null!==(u=e.frequency)&&void 0!==u?u:Vo.OneTime,this.nlpPricing=e.nlpPricing,this.isAddon=null!==(c=e.isAddon)&&void 0!==c&&c,void 0!==e.amount&&(this.amount=e.amount),void 0!==e.percentRent&&(this.percentRent=e.percentRent),void 0!==e.unitLabel&&(this.unitLabel=e.unitLabel),void 0!==e.minAmount&&(this.minAmount=e.minAmount),void 0!==e.maxAmount&&(this.maxAmount=e.maxAmount);const d=e.customMatrixData;var h;d instanceof Wo?this.customMatrixData=d:(h=d)&&"object"==typeof h&&"pricingRules"in h&&Array.isArray(h.pricingRules)&&(this.customMatrixData=Wo.fromJSON(d))}get isOptional(){return"situational"===this.pricingCategory}get hasMatrix(){return!("custom"!==this.pricingType||!this.customMatrixData)}}const Ko=class{constructor(){this.params=new URLSearchParams}addSingle(e,t){return t?(this.params.append(e,t),this):this}addArray(e,t){return t?(t.forEach((t=>{t&&this.params.append(`${e}[]`,t)})),this):this}build(){return this.params.toString()?`?${this.params.toString()}`:""}},Xo=e=>new Yo(e),Zo=e=>new Go(e),Jo=async(e,i)=>{try{const n=(new Ko).addArray("layout_ids",null==i?void 0:i.map((e=>e.toString()))),o=await t().get(`https://app.meetelise.com/platformApi/webchat/${e}/fees?${n.build()}`);if(o.data){const e=fi(o.data);return{fees:e.fees.map(Xo),rentableItems:e.rentableItems.map(Zo),buildingIncentives:e.buildingIncentives}}}catch(t){xn({logType:Cn.error,buildingSlug:e,logTitle:"[ERROR_GETTING_FEES]",logData:{error:t}})}return{fees:[],rentableItems:[],buildingIncentives:[]}},er=(e="black")=>B`<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
 <line x1="1.70782" y1="13.2254" x2="13.2376" y2="1.69554" stroke="${e}" stroke-width="2.13401"/>
 <path d="M2.00929 1.99996L13.3328 13.3421" stroke="${e}" stroke-width="2.13401"/>
 </svg>`,tr=({color:e="#347FF7",size:t=24}={})=>B`
@@ -3706,14 +3706,12 @@ xmlns="http://www.w3.org/2000/svg"
     font-size: 1rem;
     align-self: center;
   }
-`;var fr=function(e,t,i,n){var o,r=arguments.length,a=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,n);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(r<3?o(a):r>3?o(t,i,a):o(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};let gr=class extends oe{constructor(){super(...arguments),this.feeQuote=null}render(){var e;return this.feeQuote?R`
+`;var fr=function(e,t,i,n){var o,r=arguments.length,a=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,n);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(r<3?o(a):r>3?o(t,i,a):o(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};let gr=class extends oe{constructor(){super(...arguments),this.feeQuote=null}get name(){var e,t,i,n;return(null===(e=this.feeQuote)||void 0===e?void 0:e.sourceRentableItem)?this.feeQuote.sourceRentableItem.description:null!==(n=null===(i=null===(t=this.feeQuote)||void 0===t?void 0:t.sourceFee)||void 0===i?void 0:i.name)&&void 0!==n?n:""}get isRequired(){var e;return!!(null===(e=this.feeQuote)||void 0===e?void 0:e.sourceFee)&&"MANDATORY"===this.feeQuote.sourceFee.pricingMetadata.pricingCategory}get description(){var e,t,i,n;return(null===(e=this.feeQuote)||void 0===e?void 0:e.sourceRentableItem)?"":null!==(n=null===(i=null===(t=this.feeQuote)||void 0===t?void 0:t.sourceFee)||void 0===i?void 0:i.description)&&void 0!==n?n:""}render(){var e;return this.feeQuote?R`
       <div class="fee-item">
         <div class="fee-info">
-          ${"MANDATORY"===this.feeQuote.sourceFee.pricingMetadata.pricingCategory?R`<div class="required-label">Required</div>`:""}
-          <div class="fee-name">${this.feeQuote.sourceFee.name}</div>
-          <div class="fee-description">
-            ${this.feeQuote.sourceFee.description}
-          </div>
+          ${this.isRequired?R`<div class="required-label">Required</div>`:""}
+          <div class="fee-name">${this.name}</div>
+          <div class="fee-description">${this.description}</div>
         </div>
         <div class="fee-amount">
           ${wi(null!==(e=this.feeQuote.amountRange.fixedValue)&&void 0!==e?e:0)}
@@ -3779,7 +3777,7 @@ xmlns="http://www.w3.org/2000/svg"
     margin: 12px;
     justify-content: space-between;
   }
-`;var br=function(e,t,i,n){var o,r=arguments.length,a=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,n);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(r<3?o(a):r>3?o(t,i,a):o(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};let vr=class extends oe{constructor(){super(...arguments),this.title="Fees",this.fees=[],this.buildingFeesToQuantity={},this.handleQuantityChange=(e,t)=>{this.buildingFeesToQuantity[e]=t,this.requestUpdate()}}get totalAmount(){const e=this.fees.reduce(((e,t)=>{var i;return e+(null!==(i=t.amountRange.fixedValue)&&void 0!==i?i:0)}),0);return wi(e)}get standardFees(){return this.fees}get addons(){return[]}render(){return R`
+`;var br=function(e,t,i,n){var o,r=arguments.length,a=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,n);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(r<3?o(a):r>3?o(t,i,a):o(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};let vr=class extends oe{constructor(){super(...arguments),this.title="Fees",this.fees=[],this.buildingFeesToQuantity={},this.handleQuantityChange=(e,t)=>{this.buildingFeesToQuantity[e]=t,this.requestUpdate()}}get totalAmount(){const e=this.fees.reduce(((e,t)=>{var i;return e+(null!==(i=t.amountRange.fixedValue)&&void 0!==i?i:0)}),0);return wi(e)}get standardFees(){return this.fees.filter((e=>!e.isAddon))}get addons(){return this.fees.filter((e=>e.isAddon))}render(){return R`
       <div class="fee-card-section-container">
         <div class="fee-card-section-header">
           <h1 class="section-title">${this.title}</h1>
@@ -3795,7 +3793,7 @@ xmlns="http://www.w3.org/2000/svg"
               <div class="fee-card-list">
                 <div class="section-title-addons">Add-Ons</div>
                 ${this.addons.map((e=>R`<div class="fee-item-container">
-                    <fee-item .feeItem=${e}></fee-item>
+                    <fee-item .feeQuote=${e}></fee-item>
                   </div>`))}
               </div>
             `:""}
@@ -4465,7 +4463,7 @@ xmlns="http://www.w3.org/2000/svg"
       <div class="skeleton-loader">
         ${Array.from({length:this.cards},((e,t)=>{const i=Array.isArray(this.rowsPerCard)?this.rowsPerCard[t]||2:this.rowsPerCard;return R`<skeleton-card .rows=${i}></skeleton-card>`}))}
       </div>
-    `}};zr.styles=jr,$r([le({type:Number})],zr.prototype,"cards",void 0),$r([le({type:Array})],zr.prototype,"rowsPerCard",void 0),zr=$r([ae("skeleton-loader")],zr);var Qr=function(e,t,i,n){var o,r=arguments.length,a=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,n);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(r<3?o(a):r>3?o(t,i,a):o(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};let Gr=class extends oe{constructor(){super(...arguments),this.buildingSlug="",this.showSkeletonLoader=!1,this.selectedUnit=null,this.quote=null,this.layoutOptions=[],this.selectedLayoutIds=[-1],this.groupedFees={[Vo.OneTime]:[],[Vo.Monthly]:[],[Vo.Quarterly]:[],[Vo.Annually]:[],[Vo.PerOccurrence]:[]},this.rentableItems=[],this.onSelectLayout=null,this.onUnitSelect=null,this.onMoveInDateChange=null,this.onLeaseTermChange=null,this.onAddonSelect=null,this.onRentableItemSelect=null}get addOns(){return[...Object.values(this.groupedFees).flat().filter((e=>e.isOptional)),...this.rentableItems].sort(((e,t)=>{var i,n,o,r;const a=e instanceof Go,s=t instanceof Go;if(!a&&!s)return 0;const l=!a||null!==(n=null===(i=e.allItems)||void 0===i?void 0:i.some((e=>e.available)))&&void 0!==n&&n;return l===(!s||null!==(r=null===(o=t.allItems)||void 0===o?void 0:o.some((e=>e.available)))&&void 0!==r&&r)?0:l?-1:1}))}get rentAsFeeQuote(){var e,t;return(null===(e=this.quote)||void 0===e?void 0:e.rentCost)?{sourceFee:{name:"Rent",description:`Unit ${null===(t=this.selectedUnit)||void 0===t?void 0:t.unitNumber}`,frequency:Sr.MONTHLY,pricingMetadata:{pricingCategory:"MANDATORY"}},amountRange:{fixedValue:this.quote.rentCost,minValue:null,maxValue:null},itemCombination:{quantities:[],toKey:()=>"rent"}}:null}renderRecurringFeeSection(e,t){return(null==t?void 0:t.length)?R` <fee-card .fees=${t} title=${e}></fee-card> `:null}renderFeeSections(){var e,t;const i=[],n=[{freq:Sr.ANNUALLY,title:"Yearly Charges"},{freq:Sr.MONTHLY,title:"Monthly Charges"},{freq:Sr.BI_WEEKLY,title:"Bi-Weekly Charges"},{freq:Sr.WEEKLY,title:"Weekly Charges"},{freq:Sr.DAILY,title:"Daily Charges"},{freq:Sr.ONE_TIME,title:"Prior to Move-In"},{freq:Sr.NEVER,title:"No Charges"}],o=null===(e=this.quote)||void 0===e?void 0:e.feeQuotes;for(const{freq:e,title:r}of n){if(!(null==o?void 0:o.length)&&e!==Sr.MONTHLY)continue;let n=null!==(t=null==o?void 0:o.filter((t=>{var i;return(null===(i=t.sourceFee)||void 0===i?void 0:i.frequency)===e})))&&void 0!==t?t:[];if(e===Sr.MONTHLY){const e=this.rentAsFeeQuote;e&&(n=[e,...n])}const a=this.renderRecurringFeeSection(r,n);a&&i.push(a)}return i}renderFeesContent(){return this.selectedUnit?R`
+    `}};zr.styles=jr,$r([le({type:Number})],zr.prototype,"cards",void 0),$r([le({type:Array})],zr.prototype,"rowsPerCard",void 0),zr=$r([ae("skeleton-loader")],zr);var Qr=function(e,t,i,n){var o,r=arguments.length,a=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,n);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(r<3?o(a):r>3?o(t,i,a):o(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};let Gr=class extends oe{constructor(){super(...arguments),this.buildingSlug="",this.showSkeletonLoader=!1,this.selectedUnit=null,this.quote=null,this.layoutOptions=[],this.selectedLayoutIds=[-1],this.groupedFees={[Vo.OneTime]:[],[Vo.Monthly]:[],[Vo.Quarterly]:[],[Vo.Annually]:[],[Vo.PerOccurrence]:[]},this.rentableItems=[],this.onSelectLayout=null,this.onUnitSelect=null,this.onMoveInDateChange=null,this.onLeaseTermChange=null,this.onAddonSelect=null,this.onRentableItemSelect=null}get addOns(){return[...Object.values(this.groupedFees).flat().filter((e=>e.isAddon)),...this.rentableItems].sort(((e,t)=>{var i,n,o,r;const a=e instanceof Go,s=t instanceof Go;if(!a&&!s)return 0;const l=!a||null!==(n=null===(i=e.allItems)||void 0===i?void 0:i.some((e=>e.available)))&&void 0!==n&&n;return l===(!s||null!==(r=null===(o=t.allItems)||void 0===o?void 0:o.some((e=>e.available)))&&void 0!==r&&r)?0:l?-1:1}))}get rentAsFeeQuote(){var e,t;return(null===(e=this.quote)||void 0===e?void 0:e.rentCost)?{sourceFee:{name:"Rent",description:`Unit ${null===(t=this.selectedUnit)||void 0===t?void 0:t.unitNumber}`,frequency:Sr.MONTHLY,pricingMetadata:{pricingCategory:"MANDATORY"}},amountRange:{fixedValue:this.quote.rentCost,minValue:null,maxValue:null},itemCombination:{quantities:[],toKey:()=>"rent"},isAddon:!1}:null}renderRecurringFeeSection(e,t){return(null==t?void 0:t.length)?R` <fee-card .fees=${t} title=${e}></fee-card> `:null}renderFeeSections(){var e,t;const i=[],n=[{freq:Sr.ANNUALLY,title:"Yearly Charges"},{freq:Sr.MONTHLY,title:"Monthly Charges"},{freq:Sr.BI_WEEKLY,title:"Bi-Weekly Charges"},{freq:Sr.WEEKLY,title:"Weekly Charges"},{freq:Sr.DAILY,title:"Daily Charges"},{freq:Sr.ONE_TIME,title:"Prior to Move-In"},{freq:Sr.NEVER,title:"No Charges"}],o=null===(e=this.quote)||void 0===e?void 0:e.feeQuotes;for(const{freq:e,title:r}of n){if(!(null==o?void 0:o.length)&&e!==Sr.MONTHLY)continue;let n=null!==(t=null==o?void 0:o.filter((t=>{var i;return(null===(i=t.sourceFee)||void 0===i?void 0:i.frequency)===e||!!t.sourceRentableItem&&("monthly"===t.sourceRentableItem.rentFrequency&&e===Sr.MONTHLY||"annually"===t.sourceRentableItem.rentFrequency&&e===Sr.ANNUALLY)})))&&void 0!==t?t:[];if(e===Sr.MONTHLY){const e=this.rentAsFeeQuote;e&&(n=[e,...n])}const a=this.renderRecurringFeeSection(r,n);a&&i.push(a)}return i}renderFeesContent(){return this.selectedUnit?R`
       <div class="fees-container">
         ${this.showSkeletonLoader?R`
               <div class="loading-container">

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

@@ -80,7 +80,7 @@ export class FeeCalculatorLayout extends LitElement {
   get addOns(): (BuildingFeeView | RentableItemSummary)[] {
     const addons = Object.values(this.groupedFees)
       .flat()
-      .filter((fee) => fee.isOptional);
+      .filter((fee) => fee.isAddon);
 
     return [...addons, ...this.rentableItems].sort((a, b) => {
       const aIsRentable = a instanceof RentableItemSummary;
@@ -118,6 +118,7 @@ export class FeeCalculatorLayout extends LitElement {
         maxValue: null,
       } as AmountRange,
       itemCombination: { quantities: [], toKey: () => "rent" },
+      isAddon: false,
     } as FeeQuote;
   }
 
@@ -148,7 +149,20 @@ export class FeeCalculatorLayout extends LitElement {
       if (!feeQuotes?.length && freq !== FeeFrequency.MONTHLY) continue;
 
       let feesByFreq =
-        feeQuotes?.filter((fq) => fq.sourceFee?.frequency === freq) ?? [];
+        feeQuotes?.filter((fq) => {
+          if (fq.sourceFee?.frequency === freq) return true;
+
+          if (fq.sourceRentableItem) {
+            return (
+              (fq.sourceRentableItem.rentFrequency === "monthly" &&
+                freq === FeeFrequency.MONTHLY) ||
+              (fq.sourceRentableItem.rentFrequency === "annually" &&
+                freq === FeeFrequency.ANNUALLY)
+            );
+          }
+
+          return false;
+        }) ?? [];
 
       // Add rent as a monthly "fee"
       if (freq === FeeFrequency.MONTHLY) {

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

@@ -28,11 +28,11 @@ export class FeeCard extends LitElement {
   }
 
   get standardFees(): FeeQuote[] {
-    return this.fees;
+    return this.fees.filter((fee) => !fee.isAddon);
   }
 
   get addons(): FeeQuote[] {
-    return [];
+    return this.fees.filter((fee) => fee.isAddon);
   }
 
   handleQuantityChange = (feeId: number, quantity: number): void => {
@@ -61,7 +61,7 @@ export class FeeCard extends LitElement {
                 <div class="section-title-addons">Add-Ons</div>
                 ${this.addons.map(
                   (item) => html`<div class="fee-item-container">
-                    <fee-item .feeItem=${item}></fee-item>
+                    <fee-item .feeQuote=${item}></fee-item>
                   </div>`
                 )}
               </div>

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

@@ -1,9 +1,9 @@
 import { LitElement, html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { FeeQuote } from "../../model/fee-quote";
+import { formatCurrency } from "../../../../utils";
 
 import feeItemStyles from "./fee-item-styles";
-import { formatCurrency } from "../../../../utils";
 
 @customElement("fee-item")
 export class FeeItemComponent extends LitElement {
@@ -12,20 +12,36 @@ export class FeeItemComponent extends LitElement {
   @property({ type: Object })
   feeQuote: FeeQuote | null = null;
 
+  get name(): string {
+    if (this.feeQuote?.sourceRentableItem) {
+      return this.feeQuote.sourceRentableItem.description;
+    }
+    return this.feeQuote?.sourceFee?.name ?? "";
+  }
+
+  get isRequired(): boolean {
+    if (!this.feeQuote?.sourceFee) return false;
+    return (
+      this.feeQuote.sourceFee.pricingMetadata.pricingCategory === "MANDATORY"
+    );
+  }
+
+  get description(): string {
+    if (this.feeQuote?.sourceRentableItem) return "";
+    return this.feeQuote?.sourceFee?.description ?? "";
+  }
+
   render(): TemplateResult {
     if (!this.feeQuote) return html``;
 
     return html`
       <div class="fee-item">
         <div class="fee-info">
-          ${this.feeQuote.sourceFee.pricingMetadata.pricingCategory ===
-          "MANDATORY"
+          ${this.isRequired
             ? html`<div class="required-label">Required</div>`
             : ""}
-          <div class="fee-name">${this.feeQuote.sourceFee.name}</div>
-          <div class="fee-description">
-            ${this.feeQuote.sourceFee.description}
-          </div>
+          <div class="fee-name">${this.name}</div>
+          <div class="fee-description">${this.description}</div>
         </div>
         <div class="fee-amount">
           ${formatCurrency(this.feeQuote.amountRange.fixedValue ?? 0)}

package/src/WebComponent/FeeCalculator/model/building-fee-view.ts

@@ -44,6 +44,7 @@ export class BuildingFeeView {
   pricingType: "fixed" | "per-item" | "usage-based" | "percent-rent" | "custom";
   frequency: BuildingFeeFrequency;
   nlpPricing?: string;
+  isAddon: boolean;
 
   // Optional fields that depend on fee type
   amount?: number;
@@ -76,6 +77,7 @@ export class BuildingFeeView {
     this.pricingType = data.pricingType ?? "fixed";
     this.frequency = data.frequency ?? BuildingFeeFrequency.OneTime;
     this.nlpPricing = data.nlpPricing;
+    this.isAddon = data.isAddon ?? false;
 
     // Optional fields
     if (data.amount !== undefined) this.amount = data.amount;

package/src/WebComponent/FeeCalculator/model/fee-quote.ts

@@ -1,9 +1,12 @@
 import { SourceFee } from "./source-fee";
 import { AmountRange } from "./amount-range";
 import { ItemCombination } from "./item-combination";
+import { RentableItem } from "./rentable-item";
 
 export interface FeeQuote {
-  sourceFee: SourceFee;
+  sourceFee?: SourceFee;
+  sourceRentableItem?: RentableItem | null;
+  isAddon: boolean | null;
   amountRange: AmountRange;
   itemCombination: ItemCombination;
 }