@meetelise/chat 1.32.0 → 1.33.0

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

@@ -10,7 +10,6 @@ export declare class AddonItem extends LitElement {
     get totalCost(): string;
     get atMaxUnits(): boolean;
     get atMinUnits(): boolean;
-    private handleCheckboxClick;
     private handleIncrement;
     private handleDecrement;
     render(): TemplateResult;

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

@@ -5,14 +5,12 @@ export declare class RentableItem extends LitElement {
     static styles: import("lit").CSSResult;
     rentableItem: RentableItemSummary | null;
     onSelect: ((rentableItem: DesiredRentableItem) => void) | null;
-    private isChecked;
     private quantity;
     selectedItemIds: Set<string>;
     get totalAvailableItems(): number;
     get quantityLeft(): number;
     get atMaxUnits(): boolean;
     get atMinUnits(): boolean;
-    private handleCheckboxClick;
     private handleIncrement;
     private handleDecrement;
     private emitChange;

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

@@ -9,6 +9,7 @@ import "../fee-card/fee-card";
 import "../addons/addon-item/addon-item";
 import "../addons/rentable-item/rentable-item";
 import "../../../loaders/skeleton-loader";
+import "../../../loaders/mega-loader";
 export declare class FeeCalculatorLayout extends LitElement {
     static styles: import("lit").CSSResult;
     buildingSlug: string;
@@ -33,6 +34,7 @@ export declare class FeeCalculatorLayout extends LitElement {
     renderRecurrenceFeeSection(title: string, fees: FeeEstimate[]): TemplateResult | null;
     renderFeeSections(): TemplateResult[];
     renderFeesContent(): TemplateResult;
+    renderAddOns(): TemplateResult | null;
     render(): TemplateResult;
 }
 declare global {

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

@@ -24,6 +24,7 @@ export declare class FloorPlanSelector extends LitElement {
     handleLayoutChange: (ids: number[]) => Promise<void>;
     handleMoveInDateChange: (e: Event) => Promise<void>;
     handleLeaseTermChange: (e: Event) => Promise<void>;
+    renderUnitSelection: () => TemplateResult;
     render(): TemplateResult;
 }
 declare global {

package/dist/src/WebComponent/FeeCalculator/fee-calculator.d.ts

@@ -27,13 +27,6 @@ export declare class FeeCalculator extends LitElement {
     private moveInDate;
     private buildingWebchatView;
     private incentives;
-    enabledChatWidgets: {
-        callDesktop: boolean;
-        chatDesktop: boolean;
-        emailDesktop: boolean;
-        textDesktop: boolean;
-        sstDesktop: boolean;
-    };
     quote: CalculateQuoteResponse | null;
     private groupedFees;
     private rentableItems;

package/package.json

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

package/public/dist/index.js

@@ -3382,7 +3382,7 @@ xmlns="http://www.w3.org/2000/svg"
       margin-right: 8px;
     }
   }
-`;var Ao=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 So=class extends oe{constructor(){super(...arguments),this.unit={},this.onUnitSelect=null,this.selected=!1}get bedAndBathText(){return`${this.unit.numberOfBedrooms}bd | ${this.unit.numberOfBathrooms}ba`}get priceRange(){return this.unit.startingPrice===this.unit.maxPrice?`$${this.unit.startingPrice}`:`$${this.unit.startingPrice} - $${this.unit.maxPrice}`}handleOnUnitSelect(){var e;this.selected||(this.selected=!this.selected,null===(e=this.onUnitSelect)||void 0===e||e.call(this,this.unit))}handleOnImgClick(e){const t=e.target;window.open(t.src,"_blank")}render(){var e;return L`
+`;var Ao=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 So=class extends oe{constructor(){super(...arguments),this.unit={},this.onUnitSelect=null,this.selected=!1}get bedAndBathText(){return`${0===this.unit.numberOfBedrooms?"studio":`${this.unit.numberOfBedrooms}bd`} | ${this.unit.numberOfBathrooms}ba`}get priceRange(){return this.unit.startingPrice===this.unit.maxPrice?`$${this.unit.startingPrice}`:`$${this.unit.startingPrice} - $${this.unit.maxPrice}`}handleOnUnitSelect(){var e;this.selected||(this.selected=!this.selected,null===(e=this.onUnitSelect)||void 0===e||e.call(this,this.unit))}handleOnImgClick(e){const t=e.target;window.open(t.src,"_blank")}render(){var e;return L`
       <div class="floorplan-image-card ${this.selected?"selected":""}">
         <div class="section-left">
           <img
@@ -3393,7 +3393,7 @@ xmlns="http://www.w3.org/2000/svg"
         </div>
         <div class="section-right" @click=${this.handleOnUnitSelect}>
           <p class="image-card-title">
-            ${this.unit.floorplanName} | ${this.priceRange}
+            Unit ${this.unit.unitNumber} | ${this.priceRange}
           </p>
           <p class="image-card-subtitle">
             ${this.bedAndBathText} | ${this.unit.squareFootage} ft |
@@ -3419,7 +3419,32 @@ xmlns="http://www.w3.org/2000/svg"
         transform: rotate(360deg);
       }
     }
-  `,ko([le({type:Number})],Eo.prototype,"size",void 0),Eo=ko([ae("mega-loader")],Eo);var To=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 _o=class extends oe{constructor(){super(...arguments),this.buildingSlug="",this.layoutOptions=[],this.selectedLayoutIds=[uo],this.onSelectLayout=null,this.onUnitSelect=null,this.onMoveInDateChange=null,this.onLeaseTermChange=null,this.moveInDate=pi,this.leaseTerm=12,this.units=[],this.selectedUnit=null,this.isLoading=!1,this.fetchUnits=async()=>{this.isLoading=!0;const e=1===this.selectedLayoutIds.length?0===(t=this.selectedLayoutIds[0])?0:Math.floor(t/10):void 0;var t;try{return(await wo({buildingSlug:this.buildingSlug,moveInDateEarliest:this.moveInDate?this.moveInDate:void 0,...this.selectedLayoutIds.includes(uo)?{}:{numBedrooms:e},leaseTermMin:this.leaseTerm})).filter((e=>!!e.floorplanUrl))}finally{this.isLoading=!1}},this.firstUpdated=async()=>{this.units=await this.fetchUnits()},this.handleUnitSelect=e=>{var t;this.selectedUnit=e,null===(t=this.onUnitSelect)||void 0===t||t.call(this,e)},this.handleLayoutChange=async e=>{var t;this.selectedLayoutIds=e,null===(t=this.onSelectLayout)||void 0===t||t.call(this,this.selectedLayoutIds),this.units=await this.fetchUnits()},this.handleMoveInDateChange=async e=>{var t;const i=e.target.value;let n;n=i?new Date(i):pi,this.moveInDate=n,null===(t=this.onMoveInDateChange)||void 0===t||t.call(this,n),this.units=await this.fetchUnits()},this.handleLeaseTermChange=async e=>{var t;this.leaseTerm=parseInt(e.target.value),null===(t=this.onLeaseTermChange)||void 0===t||t.call(this,this.leaseTerm),this.units=await this.fetchUnits()}}get displayOptions(){const e=e=>{let t=e;return Object.entries({zero:"0",one:"1",two:"2",three:"3",four:"4",five:"5",six:"6",seven:"7",eight:"8",nine:"9",ten:"10",eleven:"11",twelve:"12"}).forEach((([e,i])=>{const n=new RegExp(`\\b${e}\\b`,"gi");t=t.replace(n,i)})),t};return[{value:uo,label:"All"},...this.layoutOptions].map((t=>({...t,label:e(t.label.replace(/bedroom/gi,"bd"))}))).sort(((e,t)=>e.value-t.value))}render(){var e,t,i,n;return L`
+  `,ko([le({type:Number})],Eo.prototype,"size",void 0),Eo=ko([ae("mega-loader")],Eo);var To=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 _o=class extends oe{constructor(){super(...arguments),this.buildingSlug="",this.layoutOptions=[],this.selectedLayoutIds=[uo],this.onSelectLayout=null,this.onUnitSelect=null,this.onMoveInDateChange=null,this.onLeaseTermChange=null,this.moveInDate=pi,this.leaseTerm=12,this.units=[],this.selectedUnit=null,this.isLoading=!1,this.fetchUnits=async()=>{this.isLoading=!0;const e=1===this.selectedLayoutIds.length?0===(t=this.selectedLayoutIds[0])?0:Math.floor(t/10):void 0;var t;try{return(await wo({buildingSlug:this.buildingSlug,moveInDateEarliest:this.moveInDate?this.moveInDate:void 0,...this.selectedLayoutIds.includes(uo)?{}:{numBedrooms:e},leaseTermMin:this.leaseTerm})).filter((e=>!!e.floorplanUrl))}finally{this.isLoading=!1}},this.firstUpdated=async()=>{this.units=await this.fetchUnits()},this.handleUnitSelect=e=>{var t;this.selectedUnit=e,null===(t=this.onUnitSelect)||void 0===t||t.call(this,e)},this.handleLayoutChange=async e=>{var t;this.selectedLayoutIds=e,null===(t=this.onSelectLayout)||void 0===t||t.call(this,this.selectedLayoutIds),this.units=await this.fetchUnits()},this.handleMoveInDateChange=async e=>{var t;const i=e.target.value;let n;n=i?new Date(i):pi,this.moveInDate=n,null===(t=this.onMoveInDateChange)||void 0===t||t.call(this,n),this.units=await this.fetchUnits()},this.handleLeaseTermChange=async e=>{var t;this.leaseTerm=parseInt(e.target.value),null===(t=this.onLeaseTermChange)||void 0===t||t.call(this,this.leaseTerm),this.units=await this.fetchUnits()},this.renderUnitSelection=()=>{var e,t;return this.isLoading?L`
+        <div class="unit-selection">
+          <div class="unit-label">Select Unit</div>
+          <div class="loading-container">
+            <mega-loader size="32"></mega-loader>
+          </div>
+        </div>
+      `:L`
+      <div class="unit-selection">
+        <div class="unit-label">Select Unit</div>
+        <div class="image-carousel">
+          ${0===(null===(e=this.units)||void 0===e?void 0:e.length)?L`
+                <div class="no-floorplans-container">
+                  <p>No floorplans found</p>
+                </div>
+              `:""}
+          ${null===(t=this.units)||void 0===t?void 0:t.map((e=>{var t;return L`
+              <floorplan-image-card
+                .unit=${e}
+                .onUnitSelect=${this.handleUnitSelect}
+                .selected=${(null===(t=this.selectedUnit)||void 0===t?void 0:t.id)===e.id}
+              ></floorplan-image-card>
+            `}))}
+        </div>
+      </div>
+    `}}get displayOptions(){const e=e=>{let t=e;return Object.entries({zero:"0",one:"1",two:"2",three:"3",four:"4",five:"5",six:"6",seven:"7",eight:"8",nine:"9",ten:"10",eleven:"11",twelve:"12"}).forEach((([e,i])=>{const n=new RegExp(`\\b${e}\\b`,"gi");t=t.replace(n,i)})),t};return[{value:uo,label:"All"},...this.layoutOptions].map((t=>({...t,label:e(t.label.replace(/bedroom/gi,"bd"))}))).sort(((e,t)=>e.value-t.value))}render(){var e,t;return L`
       <div class="floor-plan-selector">
         <div class="floor-plan-selector-label">Select Floor Plan</div>
         <div class="floor-plan-selector-badges">
@@ -3454,28 +3479,8 @@ xmlns="http://www.w3.org/2000/svg"
               />
             </div>
           </div>
-          <div class="unit-selection">
-            <div class="unit-label">Select Unit</div>
-            <div class="image-carousel">
-              ${this.isLoading?L`
-                    <div class="loading-container">
-                      <mega-loader size="32"></mega-loader>
-                    </div>
-                  `:""}
-              ${this.isLoading||0!==(null===(i=this.units)||void 0===i?void 0:i.length)?"":L`
-                    <div class="no-floorplans-container">
-                      <p>No floorplans found</p>
-                    </div>
-                  `}
-              ${null===(n=this.units)||void 0===n?void 0:n.map((e=>{var t;return L`
-                  <floorplan-image-card
-                    .unit=${e}
-                    .onUnitSelect=${this.handleUnitSelect}
-                    .selected=${(null===(t=this.selectedUnit)||void 0===t?void 0:t.id)===e.id}
-                  ></floorplan-image-card>
-                `}))}
-            </div>
-          </div>
+
+          ${this.renderUnitSelection()}
         </div>
       </div>
     `}};_o.styles=Co,To([le({type:String})],_o.prototype,"buildingSlug",void 0),To([le({type:Array})],_o.prototype,"layoutOptions",void 0),To([le({type:Array})],_o.prototype,"selectedLayoutIds",void 0),To([le()],_o.prototype,"onSelectLayout",void 0),To([le()],_o.prototype,"onUnitSelect",void 0),To([le()],_o.prototype,"onMoveInDateChange",void 0),To([le()],_o.prototype,"onLeaseTermChange",void 0),To([ue()],_o.prototype,"moveInDate",void 0),To([ue()],_o.prototype,"leaseTerm",void 0),To([ue()],_o.prototype,"units",void 0),To([ue()],_o.prototype,"selectedUnit",void 0),To([ue()],_o.prototype,"isLoading",void 0),_o=To([ae("floor-plan-selector")],_o);const Oo=l`
@@ -3543,33 +3548,47 @@ xmlns="http://www.w3.org/2000/svg"
     display: block;
   }
 
+  p {
+    margin: 0;
+  }
+
   .addon-container {
     border: 1px solid #e5e7eb;
     border-radius: 0.375rem;
-    display: flex;
-    padding: 0.5rem;
     align-items: center;
-    justify-content: space-between;
   }
 
-  .addon-left {
+  .addon-inner-container {
     display: flex;
-    flex: 1;
+    flex-direction: column;
+    gap: 8px;
+    margin: 12px;
+  }
+
+  .addon-header {
+    display: flex;
+    justify-content: space-between;
   }
 
-  .addon-info {
-    margin-left: 0.75rem;
+  .addon-header-right {
+    color: #838385;
   }
 
   .addon-title {
     font-size: 0.875rem;
-    font-weight: 500;
     color: #374151;
   }
 
-  .addon-right {
+  .addon-body {
+    width: 100%;
+  }
+
+  .quantity-control {
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid #dee2e6;
+    border-radius: 0.2;
   }
 
   .operator-sign {
@@ -3581,13 +3600,6 @@ xmlns="http://www.w3.org/2000/svg"
     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;
@@ -3610,41 +3622,37 @@ xmlns="http://www.w3.org/2000/svg"
     padding: 0.25rem;
     font-size: 0.875rem;
   }
-
-  .total-cost {
-    display: none;
-  }
-`;var No=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 Io=class extends oe{constructor(){super(...arguments),this.feeItem=null,this.onQuantityChange=null,this.isChecked=!1,this.quantity=0}get totalCost(){var e,t;const i=(null!==(t=null===(e=this.feeItem)||void 0===e?void 0:e.blueprint.transactionAmount)&&void 0!==t?t:0)*this.quantity;return Ci(i)}get atMaxUnits(){var e,t,i;const n=null!==(i=null===(t=null===(e=this.feeItem)||void 0===e?void 0:e.blueprint.addOnInfo)||void 0===t?void 0:t.maxUnitsAllowed)&&void 0!==i?i:1/0;return this.quantity>=n}get atMinUnits(){var e,t,i;const n=null!==(i=null===(t=null===(e=this.feeItem)||void 0===e?void 0:e.blueprint.addOnInfo)||void 0===t?void 0:t.minUnitsAllowed)&&void 0!==i?i:0;return this.quantity<=n}handleCheckboxClick(){if(!this.isChecked)return this.isChecked=!0,void(this.quantity=1);this.isChecked=!1,this.quantity=0}handleIncrement(){var e,t,i,n,o,r;this.atMaxUnits||(this.isChecked=!0,this.quantity+=1,null===(e=this.onQuantityChange)||void 0===e||e.call(this,{id:null!==(i=null===(t=this.feeItem)||void 0===t?void 0:t.id)&&void 0!==i?i:0,quantity:this.quantity,type:null!==(r=null===(o=null===(n=this.feeItem)||void 0===n?void 0:n.blueprint.addOnInfo)||void 0===o?void 0:o.addOnType)&&void 0!==r?r:""}))}handleDecrement(){var e,t,i,n,o,r;this.atMinUnits||(this.quantity=Math.max(0,this.quantity-1),this.isChecked=this.quantity>0,null===(e=this.onQuantityChange)||void 0===e||e.call(this,{id:null!==(i=null===(t=this.feeItem)||void 0===t?void 0:t.id)&&void 0!==i?i:0,quantity:this.quantity,type:null!==(r=null===(o=null===(n=this.feeItem)||void 0===n?void 0:n.blueprint.addOnInfo)||void 0===o?void 0:o.addOnType)&&void 0!==r?r:""}))}render(){return this.feeItem&&this.feeItem.blueprint.addOnInfo?L`
+`;var No=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 Io=class extends oe{constructor(){super(...arguments),this.feeItem=null,this.onQuantityChange=null,this.isChecked=!1,this.quantity=0}get totalCost(){var e,t;const i=(null!==(t=null===(e=this.feeItem)||void 0===e?void 0:e.blueprint.transactionAmount)&&void 0!==t?t:0)*this.quantity;return Ci(i)}get atMaxUnits(){var e,t,i;const n=null!==(i=null===(t=null===(e=this.feeItem)||void 0===e?void 0:e.blueprint.addOnInfo)||void 0===t?void 0:t.maxUnitsAllowed)&&void 0!==i?i:1/0;return this.quantity>=n}get atMinUnits(){var e,t,i;const n=null!==(i=null===(t=null===(e=this.feeItem)||void 0===e?void 0:e.blueprint.addOnInfo)||void 0===t?void 0:t.minUnitsAllowed)&&void 0!==i?i:0;return this.quantity<=n}handleIncrement(){var e,t,i,n,o,r;this.atMaxUnits||(this.quantity+=1,null===(e=this.onQuantityChange)||void 0===e||e.call(this,{id:null!==(i=null===(t=this.feeItem)||void 0===t?void 0:t.id)&&void 0!==i?i:0,quantity:this.quantity,type:null!==(r=null===(o=null===(n=this.feeItem)||void 0===n?void 0:n.blueprint.addOnInfo)||void 0===o?void 0:o.addOnType)&&void 0!==r?r:""}))}handleDecrement(){var e,t,i,n,o,r;this.atMinUnits||(this.quantity=Math.max(0,this.quantity-1),null===(e=this.onQuantityChange)||void 0===e||e.call(this,{id:null!==(i=null===(t=this.feeItem)||void 0===t?void 0:t.id)&&void 0!==i?i:0,quantity:this.quantity,type:null!==(r=null===(o=null===(n=this.feeItem)||void 0===n?void 0:n.blueprint.addOnInfo)||void 0===o?void 0:o.addOnType)&&void 0!==r?r:""}))}render(){return this.feeItem&&this.feeItem.blueprint.addOnInfo?L`
       <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 class="addon-inner-container">
+          <div class="addon-header">
+            <div class="addon-header-left">
+              <p class="addon-title">${this.feeItem.displayName("Add-On")}</p>
+            </div>
+            <!-- TODO(Leo): If we add max_units_allowed, put that here -->
+            <div class="addon-header-right"></div>
           </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>
+          <!-- TODO: Need to create one control per type in matrix -->
+          <div class="addon-body">
+            <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>
@@ -3783,6 +3791,15 @@ xmlns="http://www.w3.org/2000/svg"
     min-height: 300px;
   }
 
+  .sidepanel-loading-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    min-height: 5rem;
+  }
+
   .loading-container {
     display: flex;
     justify-content: flex-start;
@@ -3854,43 +3871,42 @@ xmlns="http://www.w3.org/2000/svg"
       box-sizing: border-box;
     }
   }
-`;var jo=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 Ho=class extends oe{constructor(){super(...arguments),this.rentableItem=null,this.onSelect=null,this.isChecked=!1,this.quantity=0,this.selectedItemIds=new Set}get totalAvailableItems(){var e,t;return null!==(t=null===(e=this.rentableItem)||void 0===e?void 0:e.allItems.filter((e=>e.available)).length)&&void 0!==t?t:0}get quantityLeft(){return this.totalAvailableItems-this.quantity}get atMaxUnits(){return this.quantity>=this.totalAvailableItems}get atMinUnits(){return this.quantity<=0}handleCheckboxClick(){if(!this.isChecked)return this.isChecked=!0,this.quantity=1,void this.emitChange();this.isChecked=!1,this.quantity=0,this.emitChange()}handleIncrement(){this.atMaxUnits||(this.isChecked=!0,this.quantity+=1,this.emitChange())}handleDecrement(){this.atMinUnits||(this.quantity=Math.max(0,this.quantity-1),this.isChecked=this.quantity>0,this.emitChange())}emitChange(){var e;if(!this.rentableItem)return;const t=this.rentableItem.allItems.find((e=>e.available&&!this.selectedItemIds.has(e.id)));t&&(this.selectedItemIds.add(t.id),null===(e=this.onSelect)||void 0===e||e.call(this,{id:parseInt(t.id),type:this.rentableItem.type}))}render(){if(!this.rentableItem)return L``;const e=this.totalAvailableItems>0;return L`
+`;var jo=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 Ho=class extends oe{constructor(){super(...arguments),this.rentableItem=null,this.onSelect=null,this.quantity=0,this.selectedItemIds=new Set}get totalAvailableItems(){var e,t,i;return null!==(i=null===(t=null===(e=this.rentableItem)||void 0===e?void 0:e.allItems)||void 0===t?void 0:t.filter((e=>e.available)).length)&&void 0!==i?i:0}get quantityLeft(){return this.totalAvailableItems-this.quantity}get atMaxUnits(){return this.quantity>=this.totalAvailableItems}get atMinUnits(){return this.quantity<=0}handleIncrement(){this.atMaxUnits||(this.quantity+=1,this.emitChange())}handleDecrement(){this.atMinUnits||(this.quantity=Math.max(0,this.quantity-1),this.emitChange())}emitChange(){var e;if(!this.rentableItem)return;const t=this.rentableItem.allItems.find((e=>e.available&&!this.selectedItemIds.has(e.id)));t&&(this.selectedItemIds.add(t.id),null===(e=this.onSelect)||void 0===e||e.call(this,{id:parseInt(t.id),type:this.rentableItem.type}))}render(){if(!this.rentableItem)return L``;const e=this.totalAvailableItems>0;return L`
       <div class="addon-container">
-        <div class="addon-left">
-          <input
-            type="checkbox"
-            ?checked=${this.isChecked}
-            ?disabled=${!e}
-            @click=${this.handleCheckboxClick}
-          />
-          <div class="addon-info">
-            <p class="addon-title">${this.rentableItem.description}</p>
+        <div class="addon-inner-container">
+          <div class="addon-header">
+            <div class="addon-header-left">
+              <p class="addon-title">${this.rentableItem.type}</p>
+            </div>
+            <div class="addon-header-right">
+              <p>${this.quantityLeft} Max</p>
+            </div>
           </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}
-              ?disabled=${!e||this.atMaxUnits}
-              aria-label="Increase quantity"
-            >
-              <span class="operator-sign">+</span>
-            </button>
+          <div class="addon-body">
+            <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}
+                ?disabled=${!e||this.atMaxUnits}
+                aria-label="Increase quantity"
+              >
+                <span class="operator-sign">+</span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
-    `}};Ho.styles=Po,jo([le({type:Object})],Ho.prototype,"rentableItem",void 0),jo([le({type:Function})],Ho.prototype,"onSelect",void 0),jo([ue()],Ho.prototype,"isChecked",void 0),jo([ue()],Ho.prototype,"quantity",void 0),jo([ue()],Ho.prototype,"selectedItemIds",void 0),Ho=jo([ae("rentable-item")],Ho);const Fo=l`
+    `}};Ho.styles=Po,jo([le({type:Object})],Ho.prototype,"rentableItem",void 0),jo([le({type:Function})],Ho.prototype,"onSelect",void 0),jo([ue()],Ho.prototype,"quantity",void 0),jo([ue()],Ho.prototype,"selectedItemIds",void 0),Ho=jo([ae("rentable-item")],Ho);const Fo=l`
   :host {
     --skeleton-bg-color: #eaeaea;
     --skeleton-highlight-color: #f5f5f5;
@@ -4017,7 +4033,32 @@ xmlns="http://www.w3.org/2000/svg"
         <div class="fees-container empty-state">
           <p>Select a unit to view estimated costs</p>
         </div>
-      `}render(){return L`
+      `}renderAddOns(){return this.isLoading||this.addOns.length?L`
+      <div class="sidepanel-section">
+        <h5 class="sidepanel-section-title">Add-Ons</h5>
+        ${this.isLoading?L`
+              <div class="sidepanel-loading-container">
+                <mega-loader size="32"></mega-loader>
+              </div>
+            `:L`
+              <div class="sidepanel-addons-container">
+                ${this.addOns.map((e=>L`
+                    ${e instanceof no?L`
+                          <add-on-item
+                            .feeItem=${e}
+                            .onQuantityChange=${this.onAddonSelect}
+                          ></add-on-item>
+                        `:L`
+                          <rentable-item
+                            .rentableItem=${e}
+                            .onSelect=${this.onRentableItemSelect}
+                          ></rentable-item>
+                        `}
+                  `))}
+              </div>
+            `}
+      </div>
+    `:null}render(){return L`
       <div class="fee-calculator-layout">
         <div class="sidepanel">
           <div class="sidepanel-section">
@@ -4031,27 +4072,7 @@ xmlns="http://www.w3.org/2000/svg"
               .buildingSlug=${this.buildingSlug}
             ></floor-plan-selector>
           </div>
-
-          ${this.addOns.length?L`
-                <div class="sidepanel-section">
-                  <h5 class="sidepanel-section-title">Add-Ons</h5>
-                  <div class="sidepanel-addons-container">
-                    ${this.addOns.map((e=>L`
-                        ${e instanceof no?L`
-                              <add-on-item
-                                .feeItem=${e}
-                                .onQuantityChange=${this.onAddonSelect}
-                              ></add-on-item>
-                            `:L`
-                              <rentable-item
-                                .rentableItem=${e}
-                                .onSelect=${this.onRentableItemSelect}
-                              ></rentable-item>
-                            `}
-                      `))}
-                  </div>
-                </div>
-              `:""}
+          ${this.renderAddOns()}
         </div>
 
         ${this.renderFeesContent()}
@@ -4146,7 +4167,7 @@ xmlns="http://www.w3.org/2000/svg"
           </p>
         </div>
       </div>
-    `:L``}};er.styles=Zo,Jo([le({type:Object})],er.prototype,"incentive",void 0),er=Jo([ae("incentive-banner")],er);var tr=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 ir=class extends oe{constructor(){super(...arguments),this.buildingSlug="",this.orgSlug="",this.primaryColor=Me,this.backgroundColor=De,this.onCloseClicked=null,this.onClickEmailOption=null,this.onClickPhoneOption=null,this.onClickSSTOption=null,this.onClickTextUsOption=null,this.isLoading=!1,this.selectedLayoutIds=[uo],this.selectedUnit=null,this.desiredAddons=[],this.desiredRentableItems=[],this.leaseTerm=12,this.moveInDate=pi,this.buildingWebchatView=null,this.incentives=[],this.enabledChatWidgets={callDesktop:!1,chatDesktop:!1,emailDesktop:!1,textDesktop:!1,sstDesktop:!1},this.quote=null,this.groupedFees={[oo.OneTime]:[],[oo.Daily]:[],[oo.Weekly]:[],[oo.BiWeekly]:[],[oo.Monthly]:[],[oo.Yearly]:[],[oo.Unknown]:[]},this.rentableItems=[],this.debouncedCalculateQuote=fo()((async()=>{var e;if(!this.selectedUnit||!this.moveInDate)return;const i=this.moveInDate<new Date(this.selectedUnit.earliestAvailable)?this.selectedUnit.earliestAvailable:null===(e=this.moveInDate)||void 0===e?void 0:e.toISOString().split("T")[0];try{this.quote=await(async({buildingSlug:e,unitId:i,addons:n,rentableItems:o,leaseTerm:r,moveInDate:a})=>{try{const s=await t().post(`${hi}/platformApi/webchat/${e}/fees/calculate`,gi({unitId:i,addons:n,rentableItems:o,leaseTerm:r,moveInDate:a}));if(s.data){const e=fi(s.data);return{...e,units:e.units.map((e=>({...e,fees:e.fees.map(ho)})))}}}catch(t){vn({logType:bn.error,buildingSlug:e,logTitle:"[ERROR_CALCULATING_QUOTE]",logData:{error:t}})}return{units:[]}})({buildingSlug:this.buildingSlug,unitId:this.selectedUnit.id,addons:this.desiredAddons,rentableItems:this.desiredRentableItems,leaseTerm:this.leaseTerm,moveInDate:i})}finally{this.isLoading=!1}}),1e3),this.firstUpdated=async()=>{this.style.setProperty("--primary-color",this.primaryColor),this.style.setProperty("--background-color",this.backgroundColor),await this.setupCalculator()},this.setupCalculator=async()=>{var e,t,i,n,o,r,a,s,l,u;if(!this.buildingSlug||!this.orgSlug)return;const[c,d]=await Promise.all([Pn(this.orgSlug,this.buildingSlug),lo(this.buildingSlug)]);c&&d&&(this.buildingWebchatView=c,this.groupedFees=this.groupFees(d.fees),this.rentableItems=d.rentableItems,this.enabledChatWidgets={callDesktop:null!==(t=null===(e=this.buildingWebchatView)||void 0===e?void 0:e.shouldShowPhoneDesktop)&&void 0!==t&&t,chatDesktop:null!==(n=null===(i=this.buildingWebchatView)||void 0===i?void 0:i.shouldShowChatDesktop)&&void 0!==n&&n,emailDesktop:null!==(r=null===(o=this.buildingWebchatView)||void 0===o?void 0:o.shouldShowEmailDesktop)&&void 0!==r&&r,sstDesktop:null!==(s=null===(a=this.buildingWebchatView)||void 0===a?void 0:a.shouldShowSstDesktop)&&void 0!==s&&s,textDesktop:null!==(u=null===(l=this.buildingWebchatView)||void 0===l?void 0:l.shouldShowTextDesktop)&&void 0!==u&&u})},this.calculateQuote=async()=>{this.selectedUnit&&this.moveInDate&&(this.isLoading=!0,this.debouncedCalculateQuote())},this.handleUnitSelect=e=>{this.selectedUnit=e,this.calculateQuote()},this.handleMoveInDateChange=e=>{this.moveInDate=e,this.calculateQuote()},this.handleLeaseTermChange=e=>{this.leaseTerm=e,this.calculateQuote()},this.handleAddonSelect=e=>{const t=this.desiredAddons.some((t=>t.id===e.id));t&&0===e.quantity?this.desiredAddons=this.desiredAddons.filter((t=>t.id!==e.id)):t?this.desiredAddons=this.desiredAddons.map((t=>t.id===e.id?{...t,quantity:e.quantity}:t)):this.desiredAddons.push(e),this.calculateQuote()},this.handleRentableItemSelect=e=>{this.desiredRentableItems.some((t=>t.id===e.id))?this.desiredRentableItems=this.desiredRentableItems.filter((t=>t.id!==e.id)):this.desiredRentableItems.push(e),this.calculateQuote()},this.groupFees=e=>e.reduce(((e,t)=>{var i,n;const o=null==t.layoutIds,r=this.selectedLayoutIds.includes(uo);if(!o&&!r&&!(null===(i=t.layoutIds)||void 0===i?void 0:i.some((e=>this.selectedLayoutIds.includes(e)))))return e;const a=(null===(n=t.blueprint.recurrenceInfo)||void 0===n?void 0:n.frequency)||oo.Unknown;return e[a]=[...e[a]||[],t],e}),{}),this.handleClickEmailOption=e=>{this.handleClose(),this.onClickEmailOption&&this.onClickEmailOption(e)},this.handleClickPhoneOption=e=>{this.handleClose(),this.onClickPhoneOption&&this.onClickPhoneOption(e)},this.handleClickSSTOption=e=>{this.handleClose(),this.onClickSSTOption&&this.onClickSSTOption(e)},this.handleClickTextUsOption=e=>{this.handleClose(),this.onClickTextUsOption&&this.onClickTextUsOption(e)},this.handleClose=()=>{var e;null===(e=this.onCloseClicked)||void 0===e||e.call(this)},this.handleSelectLayout=e=>{this.selectedLayoutIds=e}}get layouts(){var e,t;return null!==(t=null===(e=this.buildingWebchatView)||void 0===e?void 0:e.layoutOptions)&&void 0!==t?t:[]}updated(e){(e.has("primaryColor")||e.has("backgroundColor"))&&(this.style.setProperty("--primary-color",this.primaryColor),this.style.setProperty("--background-color",this.backgroundColor))}render(){return L`
+    `:L``}};er.styles=Zo,Jo([le({type:Object})],er.prototype,"incentive",void 0),er=Jo([ae("incentive-banner")],er);var tr=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 ir=class extends oe{constructor(){super(...arguments),this.buildingSlug="",this.orgSlug="",this.primaryColor=Me,this.backgroundColor=De,this.onCloseClicked=null,this.onClickEmailOption=null,this.onClickPhoneOption=null,this.onClickSSTOption=null,this.onClickTextUsOption=null,this.isLoading=!1,this.selectedLayoutIds=[uo],this.selectedUnit=null,this.desiredAddons=[],this.desiredRentableItems=[],this.leaseTerm=12,this.moveInDate=pi,this.buildingWebchatView=null,this.incentives=[],this.quote=null,this.groupedFees={[oo.OneTime]:[],[oo.Daily]:[],[oo.Weekly]:[],[oo.BiWeekly]:[],[oo.Monthly]:[],[oo.Yearly]:[],[oo.Unknown]:[]},this.rentableItems=[],this.debouncedCalculateQuote=fo()((async()=>{var e;if(!this.selectedUnit||!this.moveInDate)return;const i=this.moveInDate<new Date(this.selectedUnit.earliestAvailable)?this.selectedUnit.earliestAvailable:null===(e=this.moveInDate)||void 0===e?void 0:e.toISOString().split("T")[0];try{this.quote=await(async({buildingSlug:e,unitId:i,addons:n,rentableItems:o,leaseTerm:r,moveInDate:a})=>{try{const s=await t().post(`${hi}/platformApi/webchat/${e}/fees/calculate`,gi({unitId:i,addons:n,rentableItems:o,leaseTerm:r,moveInDate:a}));if(s.data){const e=fi(s.data);return{...e,units:e.units.map((e=>({...e,fees:e.fees.map(ho)})))}}}catch(t){vn({logType:bn.error,buildingSlug:e,logTitle:"[ERROR_CALCULATING_QUOTE]",logData:{error:t}})}return{units:[]}})({buildingSlug:this.buildingSlug,unitId:this.selectedUnit.id,addons:this.desiredAddons,rentableItems:this.desiredRentableItems,leaseTerm:this.leaseTerm,moveInDate:i})}finally{this.isLoading=!1}}),1e3),this.firstUpdated=async()=>{this.style.setProperty("--primary-color",this.primaryColor),this.style.setProperty("--background-color",this.backgroundColor),await this.setupCalculator()},this.setupCalculator=async()=>{if(!this.buildingSlug||!this.orgSlug)return;this.isLoading=!0;const[e,t]=await Promise.all([Pn(this.orgSlug,this.buildingSlug),lo(this.buildingSlug)]);e&&t&&(this.buildingWebchatView=e,this.groupedFees=this.groupFees(t.fees),this.rentableItems=t.rentableItems,this.isLoading=!1)},this.calculateQuote=async()=>{this.selectedUnit&&this.moveInDate&&(this.isLoading=!0,this.debouncedCalculateQuote())},this.handleUnitSelect=e=>{this.selectedUnit=e,this.calculateQuote()},this.handleMoveInDateChange=e=>{this.moveInDate=e,this.calculateQuote()},this.handleLeaseTermChange=e=>{this.leaseTerm=e,this.calculateQuote()},this.handleAddonSelect=e=>{const t=this.desiredAddons.some((t=>t.id===e.id));t&&0===e.quantity?this.desiredAddons=this.desiredAddons.filter((t=>t.id!==e.id)):t?this.desiredAddons=this.desiredAddons.map((t=>t.id===e.id?{...t,quantity:e.quantity}:t)):this.desiredAddons.push(e),this.calculateQuote()},this.handleRentableItemSelect=e=>{this.desiredRentableItems.some((t=>t.id===e.id))?this.desiredRentableItems=this.desiredRentableItems.filter((t=>t.id!==e.id)):this.desiredRentableItems.push(e),this.calculateQuote()},this.groupFees=e=>e.reduce(((e,t)=>{var i,n;const o=null==t.layoutIds,r=this.selectedLayoutIds.includes(uo);if(!o&&!r&&!(null===(i=t.layoutIds)||void 0===i?void 0:i.some((e=>this.selectedLayoutIds.includes(e)))))return e;const a=(null===(n=t.blueprint.recurrenceInfo)||void 0===n?void 0:n.frequency)||oo.Unknown;return e[a]=[...e[a]||[],t],e}),{}),this.handleClickEmailOption=e=>{this.handleClose(),this.onClickEmailOption&&this.onClickEmailOption(e)},this.handleClickPhoneOption=e=>{this.handleClose(),this.onClickPhoneOption&&this.onClickPhoneOption(e)},this.handleClickSSTOption=e=>{this.handleClose(),this.onClickSSTOption&&this.onClickSSTOption(e)},this.handleClickTextUsOption=e=>{this.handleClose(),this.onClickTextUsOption&&this.onClickTextUsOption(e)},this.handleClose=()=>{var e;null===(e=this.onCloseClicked)||void 0===e||e.call(this)},this.handleSelectLayout=e=>{this.selectedLayoutIds=e}}get layouts(){var e,t;return null!==(t=null===(e=this.buildingWebchatView)||void 0===e?void 0:e.layoutOptions)&&void 0!==t?t:[]}updated(e){(e.has("primaryColor")||e.has("backgroundColor"))&&(this.style.setProperty("--primary-color",this.primaryColor),this.style.setProperty("--background-color",this.backgroundColor))}render(){return L`
       <div
         class="fee-calculator-container"
         @keydown=${e=>e.stopPropagation()}
@@ -4156,8 +4177,9 @@ xmlns="http://www.w3.org/2000/svg"
           <h1>Estimated Cost Calculator</h1>
 
           <div class="calculator-header-right">
-            <button class="share-button">Share</button>
-            <button class="apply-button">Apply</button>
+            <!-- TODO(Leo): Return once reqs are clear; also need apps link -->
+            <!-- <button class="share-button">Share</button> -->
+            <!-- <button class="apply-button">Apply</button> -->
             <button
               aria-label="Close fee calculator"
               class="close-button"
@@ -4203,7 +4225,7 @@ xmlns="http://www.w3.org/2000/svg"
           <p>Prices subject to change. Additional fees may apply.</p>
         </div>
       </div>
-    `}};ir.styles=io,tr([le({attribute:!0})],ir.prototype,"buildingSlug",void 0),tr([le({attribute:!0})],ir.prototype,"orgSlug",void 0),tr([le({type:String})],ir.prototype,"primaryColor",void 0),tr([le({type:String})],ir.prototype,"backgroundColor",void 0),tr([le()],ir.prototype,"onCloseClicked",void 0),tr([le()],ir.prototype,"onClickEmailOption",void 0),tr([le()],ir.prototype,"onClickPhoneOption",void 0),tr([le()],ir.prototype,"onClickSSTOption",void 0),tr([le()],ir.prototype,"onClickTextUsOption",void 0),tr([ue()],ir.prototype,"isLoading",void 0),tr([ue()],ir.prototype,"selectedLayoutIds",void 0),tr([ue()],ir.prototype,"selectedUnit",void 0),tr([ue()],ir.prototype,"desiredAddons",void 0),tr([ue()],ir.prototype,"desiredRentableItems",void 0),tr([ue()],ir.prototype,"leaseTerm",void 0),tr([ue()],ir.prototype,"moveInDate",void 0),tr([ue()],ir.prototype,"buildingWebchatView",void 0),tr([ue()],ir.prototype,"incentives",void 0),tr([ue()],ir.prototype,"enabledChatWidgets",void 0),tr([ue()],ir.prototype,"quote",void 0),tr([ue()],ir.prototype,"groupedFees",void 0),tr([ue()],ir.prototype,"rentableItems",void 0),ir=tr([ae("fee-calculator")],ir);const nr=l`
+    `}};ir.styles=io,tr([le({attribute:!0})],ir.prototype,"buildingSlug",void 0),tr([le({attribute:!0})],ir.prototype,"orgSlug",void 0),tr([le({type:String})],ir.prototype,"primaryColor",void 0),tr([le({type:String})],ir.prototype,"backgroundColor",void 0),tr([le()],ir.prototype,"onCloseClicked",void 0),tr([le()],ir.prototype,"onClickEmailOption",void 0),tr([le()],ir.prototype,"onClickPhoneOption",void 0),tr([le()],ir.prototype,"onClickSSTOption",void 0),tr([le()],ir.prototype,"onClickTextUsOption",void 0),tr([ue()],ir.prototype,"isLoading",void 0),tr([ue()],ir.prototype,"selectedLayoutIds",void 0),tr([ue()],ir.prototype,"selectedUnit",void 0),tr([ue()],ir.prototype,"desiredAddons",void 0),tr([ue()],ir.prototype,"desiredRentableItems",void 0),tr([ue()],ir.prototype,"leaseTerm",void 0),tr([ue()],ir.prototype,"moveInDate",void 0),tr([ue()],ir.prototype,"buildingWebchatView",void 0),tr([ue()],ir.prototype,"incentives",void 0),tr([ue()],ir.prototype,"quote",void 0),tr([ue()],ir.prototype,"groupedFees",void 0),tr([ue()],ir.prototype,"rentableItems",void 0),ir=tr([ae("fee-calculator")],ir);const nr=l`
   #minimize-mobile {
     position: absolute;
     top: -12px;

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

@@ -39,19 +39,8 @@ export class AddonItem extends LitElement {
     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,
@@ -63,7 +52,6 @@ export class AddonItem extends LitElement {
   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,
@@ -76,35 +64,35 @@ export class AddonItem extends LitElement {
 
     return html`
       <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 class="addon-inner-container">
+          <div class="addon-header">
+            <div class="addon-header-left">
+              <p class="addon-title">${this.feeItem.displayName("Add-On")}</p>
+            </div>
+            <!-- TODO(Leo): If we add max_units_allowed, put that here -->
+            <div class="addon-header-right"></div>
           </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>
+          <!-- TODO: Need to create one control per type in matrix -->
+          <div class="addon-body">
+            <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>

package/src/WebComponent/FeeCalculator/components/addons/common-addon-styles.ts

@@ -5,33 +5,47 @@ export default css`
     display: block;
   }
 
+  p {
+    margin: 0;
+  }
+
   .addon-container {
     border: 1px solid #e5e7eb;
     border-radius: 0.375rem;
-    display: flex;
-    padding: 0.5rem;
     align-items: center;
-    justify-content: space-between;
   }
 
-  .addon-left {
+  .addon-inner-container {
     display: flex;
-    flex: 1;
+    flex-direction: column;
+    gap: 8px;
+    margin: 12px;
   }
 
-  .addon-info {
-    margin-left: 0.75rem;
+  .addon-header {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .addon-header-right {
+    color: #838385;
   }
 
   .addon-title {
     font-size: 0.875rem;
-    font-weight: 500;
     color: #374151;
   }
 
-  .addon-right {
+  .addon-body {
+    width: 100%;
+  }
+
+  .quantity-control {
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid #dee2e6;
+    border-radius: 0.2;
   }
 
   .operator-sign {
@@ -43,13 +57,6 @@ export default css`
     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;
@@ -72,8 +79,4 @@ export default css`
     padding: 0.25rem;
     font-size: 0.875rem;
   }
-
-  .total-cost {
-    display: none;
-  }
 `;

package/src/WebComponent/FeeCalculator/components/addons/rentable-item/rentable-item.ts

@@ -15,9 +15,6 @@ export class RentableItem extends LitElement {
   @property({ type: Function })
   onSelect: ((rentableItem: DesiredRentableItem) => void) | null = null;
 
-  @state()
-  private isChecked = false;
-
   @state()
   private quantity = 0;
 
@@ -26,7 +23,7 @@ export class RentableItem extends LitElement {
 
   get totalAvailableItems(): number {
     return (
-      this.rentableItem?.allItems.filter((item) => item.available).length ?? 0
+      this.rentableItem?.allItems?.filter((item) => item.available).length ?? 0
     );
   }
 
@@ -42,21 +39,8 @@ export class RentableItem extends LitElement {
     return this.quantity <= 0;
   }
 
-  private handleCheckboxClick(): void {
-    if (!this.isChecked) {
-      this.isChecked = true;
-      this.quantity = 1;
-      this.emitChange();
-      return;
-    }
-    this.isChecked = false;
-    this.quantity = 0;
-    this.emitChange();
-  }
-
   private handleIncrement(): void {
     if (this.atMaxUnits) return;
-    this.isChecked = true;
     this.quantity += 1;
     this.emitChange();
   }
@@ -64,7 +48,6 @@ export class RentableItem extends LitElement {
   private handleDecrement(): void {
     if (this.atMinUnits) return;
     this.quantity = Math.max(0, this.quantity - 1);
-    this.isChecked = this.quantity > 0;
     this.emitChange();
   }
 
@@ -93,37 +76,36 @@ export class RentableItem extends LitElement {
 
     return html`
       <div class="addon-container">
-        <div class="addon-left">
-          <input
-            type="checkbox"
-            ?checked=${this.isChecked}
-            ?disabled=${!hasAvailableItems}
-            @click=${this.handleCheckboxClick}
-          />
-          <div class="addon-info">
-            <p class="addon-title">${this.rentableItem.description}</p>
+        <div class="addon-inner-container">
+          <div class="addon-header">
+            <div class="addon-header-left">
+              <p class="addon-title">${this.rentableItem.type}</p>
+            </div>
+            <div class="addon-header-right">
+              <p>${this.quantityLeft} Max</p>
+            </div>
           </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}
-              ?disabled=${!hasAvailableItems || this.atMaxUnits}
-              aria-label="Increase quantity"
-            >
-              <span class="operator-sign">+</span>
-            </button>
+          <div class="addon-body">
+            <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}
+                ?disabled=${!hasAvailableItems || this.atMaxUnits}
+                aria-label="Increase quantity"
+              >
+                <span class="operator-sign">+</span>
+              </button>
+            </div>
           </div>
         </div>
       </div>

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

@@ -59,6 +59,15 @@ export default css`
     min-height: 300px;
   }
 
+  .sidepanel-loading-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    min-height: 5rem;
+  }
+
   .loading-container {
     display: flex;
     justify-content: flex-start;

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

@@ -18,6 +18,7 @@ import "../fee-card/fee-card";
 import "../addons/addon-item/addon-item";
 import "../addons/rentable-item/rentable-item";
 import "../../../loaders/skeleton-loader";
+import "../../../loaders/mega-loader";
 
 @customElement("fee-calculator-layout")
 export class FeeCalculatorLayout extends LitElement {
@@ -176,6 +177,43 @@ export class FeeCalculatorLayout extends LitElement {
     `;
   }
 
+  renderAddOns(): TemplateResult | null {
+    if (!this.isLoading && !this.addOns.length) return null;
+
+    return html`
+      <div class="sidepanel-section">
+        <h5 class="sidepanel-section-title">Add-Ons</h5>
+        ${this.isLoading
+          ? html`
+              <div class="sidepanel-loading-container">
+                <mega-loader size="32"></mega-loader>
+              </div>
+            `
+          : html`
+              <div class="sidepanel-addons-container">
+                ${this.addOns.map((addon) => {
+                  return html`
+                    ${addon instanceof BuildingFee
+                      ? html`
+                          <add-on-item
+                            .feeItem=${addon}
+                            .onQuantityChange=${this.onAddonSelect}
+                          ></add-on-item>
+                        `
+                      : html`
+                          <rentable-item
+                            .rentableItem=${addon}
+                            .onSelect=${this.onRentableItemSelect}
+                          ></rentable-item>
+                        `}
+                  `;
+                })}
+              </div>
+            `}
+      </div>
+    `;
+  }
+
   render(): TemplateResult {
     return html`
       <div class="fee-calculator-layout">
@@ -191,33 +229,7 @@ export class FeeCalculatorLayout extends LitElement {
               .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) => {
-                      return html`
-                        ${addon instanceof BuildingFee
-                          ? html`
-                              <add-on-item
-                                .feeItem=${addon}
-                                .onQuantityChange=${this.onAddonSelect}
-                              ></add-on-item>
-                            `
-                          : html`
-                              <rentable-item
-                                .rentableItem=${addon}
-                                .onSelect=${this.onRentableItemSelect}
-                              ></rentable-item>
-                            `}
-                      `;
-                    })}
-                  </div>
-                </div>
-              `
-            : ""}
+          ${this.renderAddOns()}
         </div>
 
         ${this.renderFeesContent()}

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

@@ -154,6 +154,43 @@ export class FloorPlanSelector extends LitElement {
     this.units = await this.fetchUnits();
   };
 
+  renderUnitSelection = (): TemplateResult => {
+    if (this.isLoading) {
+      return html`
+        <div class="unit-selection">
+          <div class="unit-label">Select Unit</div>
+          <div class="loading-container">
+            <mega-loader size="32"></mega-loader>
+          </div>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="unit-selection">
+        <div class="unit-label">Select Unit</div>
+        <div class="image-carousel">
+          ${this.units?.length === 0
+            ? html`
+                <div class="no-floorplans-container">
+                  <p>No floorplans found</p>
+                </div>
+              `
+            : ""}
+          ${this.units?.map(
+            (unit) => html`
+              <floorplan-image-card
+                .unit=${unit}
+                .onUnitSelect=${this.handleUnitSelect}
+                .selected=${this.selectedUnit?.id === unit.id}
+              ></floorplan-image-card>
+            `
+          )}
+        </div>
+      </div>
+    `;
+  };
+
   render(): TemplateResult {
     return html`
       <div class="floor-plan-selector">
@@ -196,34 +233,8 @@ export class FloorPlanSelector extends LitElement {
               />
             </div>
           </div>
-          <div class="unit-selection">
-            <div class="unit-label">Select Unit</div>
-            <div class="image-carousel">
-              ${this.isLoading
-                ? html`
-                    <div class="loading-container">
-                      <mega-loader size="32"></mega-loader>
-                    </div>
-                  `
-                : ""}
-              ${!this.isLoading && this.units?.length === 0
-                ? html`
-                    <div class="no-floorplans-container">
-                      <p>No floorplans found</p>
-                    </div>
-                  `
-                : ""}
-              ${this.units?.map(
-                (unit) => html`
-                  <floorplan-image-card
-                    .unit=${unit}
-                    .onUnitSelect=${this.handleUnitSelect}
-                    .selected=${this.selectedUnit?.id === unit.id}
-                  ></floorplan-image-card>
-                `
-              )}
-            </div>
-          </div>
+
+          ${this.renderUnitSelection()}
         </div>
       </div>
     `;

package/src/WebComponent/FeeCalculator/components/floorplan-image-card/floorplan-image-card.ts

@@ -19,7 +19,11 @@ export class FloorplanImageCard extends LitElement {
   selected = false;
 
   get bedAndBathText(): string {
-    return `${this.unit.numberOfBedrooms}bd | ${this.unit.numberOfBathrooms}ba`;
+    const bedRooms =
+      this.unit.numberOfBedrooms === 0
+        ? "studio"
+        : `${this.unit.numberOfBedrooms}bd`;
+    return `${bedRooms} | ${this.unit.numberOfBathrooms}ba`;
   }
 
   get priceRange(): string {
@@ -53,7 +57,7 @@ export class FloorplanImageCard extends LitElement {
         </div>
         <div class="section-right" @click=${this.handleOnUnitSelect}>
           <p class="image-card-title">
-            ${this.unit.floorplanName} | ${this.priceRange}
+            Unit ${this.unit.unitNumber} | ${this.priceRange}
           </p>
           <p class="image-card-subtitle">
             ${this.bedAndBathText} | ${this.unit.squareFootage} ft |

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

@@ -90,21 +90,6 @@ export class FeeCalculator extends LitElement {
   @state()
   private incentives: IncentiveV2[] = [];
 
-  @state()
-  enabledChatWidgets: {
-    callDesktop: boolean;
-    chatDesktop: boolean;
-    emailDesktop: boolean;
-    textDesktop: boolean;
-    sstDesktop: boolean;
-  } = {
-    callDesktop: false,
-    chatDesktop: false,
-    emailDesktop: false,
-    textDesktop: false,
-    sstDesktop: false,
-  };
-
   @state()
   quote: CalculateQuoteResponse | null = null;
 
@@ -160,6 +145,7 @@ export class FeeCalculator extends LitElement {
   setupCalculator = async (): Promise<void> => {
     if (!this.buildingSlug || !this.orgSlug) return;
 
+    this.isLoading = true;
     const [buildingWebchatView, buildingFeeResponse] = await Promise.all([
       fetchBuildingWebchatView(this.orgSlug, this.buildingSlug),
       fetchBuildingFees(this.buildingSlug),
@@ -170,17 +156,9 @@ export class FeeCalculator extends LitElement {
     this.buildingWebchatView = buildingWebchatView;
     this.groupedFees = this.groupFees(buildingFeeResponse.fees);
     this.rentableItems = buildingFeeResponse.rentableItems;
-
     // TODO(Leo): Re-enable
     // this.incentives = buildingFeeResponse.buildingIncentives;
-
-    this.enabledChatWidgets = {
-      callDesktop: this.buildingWebchatView?.shouldShowPhoneDesktop ?? false,
-      chatDesktop: this.buildingWebchatView?.shouldShowChatDesktop ?? false,
-      emailDesktop: this.buildingWebchatView?.shouldShowEmailDesktop ?? false,
-      sstDesktop: this.buildingWebchatView?.shouldShowSstDesktop ?? false,
-      textDesktop: this.buildingWebchatView?.shouldShowTextDesktop ?? false,
-    };
+    this.isLoading = false;
   };
 
   updated(changedProperties: Map<string, unknown>): void {
@@ -309,8 +287,9 @@ export class FeeCalculator extends LitElement {
           <h1>Estimated Cost Calculator</h1>
 
           <div class="calculator-header-right">
-            <button class="share-button">Share</button>
-            <button class="apply-button">Apply</button>
+            <!-- TODO(Leo): Return once reqs are clear; also need apps link -->
+            <!-- <button class="share-button">Share</button> -->
+            <!-- <button class="apply-button">Apply</button> -->
             <button
               aria-label="Close fee calculator"
               class="close-button"