@meetelise/chat 1.35.1 → 1.35.2

package/src/WebComponent/FeeCalculator/components/addons/addon-item-matrix-qty-selector/addon-item-matrix-qty-selector-styles.ts

@@ -6,11 +6,12 @@ export default [
   css`
     .quantity-controls-container {
       display: flex;
+      flex-direction: column;
       gap: 12px;
     }
 
     .quantity-control {
-      flex: 1;
+      width: 100%;
       display: flex;
       align-items: center;
       border: 1px solid #dee2e6;
@@ -30,6 +31,9 @@ export default [
       text-align: center;
       font-size: 0.875rem;
       color: #374151;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   `,
 ];

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

@@ -3,6 +3,7 @@ import { css } from "lit";
 export default css`
   :host {
     display: block;
+    height: 100%;
   }
 
   p {
@@ -13,6 +14,8 @@ export default css`
     border: 1px solid #e5e7eb;
     border-radius: 0.375rem;
     align-items: center;
+    height: 100%;
+    display: flex;
   }
 
   .addon-inner-container {
@@ -20,6 +23,7 @@ export default css`
     flex-direction: column;
     gap: 8px;
     margin: 12px;
+    width: 100%;
   }
 
   .addon-header {
@@ -48,6 +52,12 @@ export default css`
     border-radius: 0.2;
   }
 
+  .quantity-control.unavailable {
+    background-color: #f9f9f9;
+    border-color: #e0e0e0;
+    cursor: not-allowed;
+  }
+
   .operator-sign {
     display: inline-block;
     line-height: 1;
@@ -79,4 +89,10 @@ export default css`
     padding: 0.25rem;
     font-size: 0.875rem;
   }
+
+  .unavailable-text {
+    color: #9ca3af;
+    font-style: italic;
+    cursor: not-allowed;
+  }
 `;

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

@@ -4,6 +4,8 @@ import { DesiredRentableItem, RentableItemSummary } from "../../../model";
 
 import commonAddonStyles from "../common-addon-styles";
 
+const DEFAULT_MAX_QUANTITY = 10;
+
 @customElement("rentable-item-qty-selector")
 export class RentableItemQtySelector extends LitElement {
   static styles = commonAddonStyles;
@@ -27,7 +29,10 @@ export class RentableItemQtySelector extends LitElement {
   }
 
   get quantityLeft(): number {
-    return this.totalAvailableItems - this.quantity;
+    return Math.min(
+      this.totalAvailableItems - this.quantity,
+      DEFAULT_MAX_QUANTITY
+    );
   }
 
   get atMaxUnits(): boolean {
@@ -53,7 +58,6 @@ export class RentableItemQtySelector extends LitElement {
   private emitChange(): void {
     if (!this.rentableItem) return;
 
-    // Find first item that is available
     const firstAvailableItem = this.rentableItem.allItems.find(
       (item) => item.available && !this.selectedItemIds.has(item.id)
     );
@@ -63,7 +67,7 @@ export class RentableItemQtySelector extends LitElement {
     this.selectedItemIds.add(firstAvailableItem.id);
 
     this.onSelect?.({
-      id: parseInt(firstAvailableItem.id),
+      id: firstAvailableItem.id,
       type: this.rentableItem.type,
     });
   }
@@ -78,7 +82,7 @@ export class RentableItemQtySelector extends LitElement {
         <div class="addon-inner-container">
           <div class="addon-header">
             <div class="addon-header-left">
-              <p class="addon-title">${this.rentableItem.type}</p>
+              <p class="addon-title">${this.rentableItem.displayName}</p>
             </div>
 
             ${this.quantityLeft > 0
@@ -91,7 +95,11 @@ export class RentableItemQtySelector extends LitElement {
           </div>
 
           <div class="addon-body">
-            <div class="quantity-control">
+            <div
+              class="quantity-control ${!hasAvailableItems
+                ? "unavailable"
+                : ""}"
+            >
               <button
                 class="quantity-button"
                 @click=${this.handleDecrement}
@@ -100,7 +108,11 @@ export class RentableItemQtySelector extends LitElement {
               >
                 <span class="operator-sign">&minus;</span>
               </button>
-              <span class="quantity-value">${this.quantity}</span>
+              ${hasAvailableItems
+                ? html`<span class="quantity-value">${this.quantity}</span>`
+                : html`<span class="quantity-value unavailable-text"
+                    >Not available</span
+                  >`}
               <button
                 class="quantity-button"
                 @click=${this.handleIncrement}

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

@@ -9,17 +9,18 @@ export default css`
     display: flex;
     margin-top: 20px;
     gap: 20px;
+    max-height: 95%;
     transition: margin-top var(--transition-timing),
       padding var(--transition-timing), gap var(--transition-timing),
       width var(--transition-timing), height var(--transition-timing);
   }
 
   .sidepanel {
-    flex: 0 0 300px;
     display: flex;
-    margin-left: 20px;
     flex-direction: column;
-    max-width: 50%;
+    margin-left: 20px;
+    max-width: 60%;
+    width: 500px;
     gap: 20px;
     transition: width var(--transition-timing),
       max-width var(--transition-timing), margin var(--transition-timing);
@@ -43,9 +44,11 @@ export default css`
   }
 
   .sidepanel-addons-container {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
     gap: 12px;
+    max-height: 22rem;
+    overflow-y: auto;
   }
 
   .fees-container {
@@ -100,9 +103,9 @@ export default css`
 
     .sidepanel {
       max-width: 100%;
+      width: 100%;
       order: 1;
       flex: none;
-      width: 100%;
       margin: 0;
       box-sizing: border-box;
     }
@@ -123,6 +126,12 @@ export default css`
       box-sizing: border-box;
     }
 
+    .sidepanel-addons-container {
+      display: flex;
+      flex-direction: column;
+      grid-template-columns: 1fr;
+    }
+
     .loading-container {
       height: auto;
       min-height: 100px;

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

@@ -94,7 +94,25 @@ export class FeeCalculatorLayout extends LitElement {
       .flat()
       .filter((fee) => fee.isOptional);
 
-    return [...addons, ...this.rentableItems];
+    // Sort to prioritize available rentable items and move unavailable ones to the end
+    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;
+    });
   }
 
   renderRecurrenceFeeSection(

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

@@ -3,7 +3,6 @@ import { css } from "lit";
 const floorPlanSelectorStyles = css`
   :host {
     display: block;
-    margin-bottom: 16px;
   }
 
   .floor-plan-selector {
@@ -98,7 +97,6 @@ const floorPlanSelectorStyles = css`
   }
 
   .unit-selection {
-    margin-top: 16px;
     max-height: 16rem;
     overflow-y: auto;
   }

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

@@ -158,7 +158,6 @@ export class FloorPlanSelector extends LitElement {
     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>
@@ -168,7 +167,6 @@ export class FloorPlanSelector extends LitElement {
 
     return html`
       <div class="unit-selection">
-        <div class="unit-label">Select Unit</div>
         <div class="image-carousel">
           ${this.units?.length === 0
             ? html`
@@ -234,6 +232,7 @@ export class FloorPlanSelector extends LitElement {
             </div>
           </div>
 
+          <div class="unit-label">Select Unit</div>
           ${this.renderUnitSelection()}
         </div>
       </div>

package/src/WebComponent/FeeCalculator/model/desired-rentable-item.ts

@@ -1,4 +1,4 @@
 export type DesiredRentableItem = {
-  id: number;
+  id: string;
   type: string;
 };

package/src/WebComponent/FeeCalculator/model/rentable-item-summary.ts

@@ -1,10 +1,34 @@
 import { RentableItem } from "./rentable-item";
 
-export interface RentableItemSummary {
+export class RentableItemSummary {
   description: string;
   type: string;
   minAvailableItem?: RentableItem;
   maxAvailableItem?: RentableItem;
   allItems: RentableItem[];
-  rent?: number;
+  rent: number;
+  priceDescription: string;
+
+  constructor(data: Partial<RentableItemSummary> = {}) {
+    this.description = data.description ?? "";
+    this.type = data.type ?? "";
+    this.minAvailableItem = data.minAvailableItem
+      ? new RentableItem(data.minAvailableItem)
+      : undefined;
+    this.maxAvailableItem = data.maxAvailableItem
+      ? new RentableItem(data.maxAvailableItem)
+      : undefined;
+    this.allItems = (data.allItems ?? []).map((item) => new RentableItem(item));
+    this.rent = data.rent ?? 0;
+    this.priceDescription = data.priceDescription ?? "";
+  }
+
+  get displayName(): string {
+    return this.description;
+  }
+
+  get itemDescription(): string {
+    if (this.allItems.length === 0) return "";
+    return this.allItems[0].description;
+  }
 }

package/src/WebComponent/FeeCalculator/model/rentable-item.ts

@@ -1,10 +1,21 @@
 import { RentFrequency } from "./rent-frequency";
 
-export interface RentableItem {
+export class RentableItem {
   id: string;
   description: string;
   rent: number;
   rentFrequency: RentFrequency;
   available: boolean;
   reservedUntil?: Date;
+
+  constructor(data: Partial<RentableItem> = {}) {
+    this.id = data.id ?? "";
+    this.description = data.description ?? "";
+    this.rent = data.rent ?? 0;
+    this.rentFrequency = data.rentFrequency ?? "monthly";
+    this.available = data.available ?? false;
+    this.reservedUntil = data.reservedUntil
+      ? new Date(data.reservedUntil)
+      : undefined;
+  }
 }

package/src/WebComponent/icons/CalculatorOutlineIcon.ts

@@ -1,22 +1,80 @@
 import { svg, SVGTemplateResult } from "lit";
 
 export const CalculatorOutlineIcon = (
-  color = "white"
-): SVGTemplateResult => svg`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Frame" clip-path="url(#clip0_14068_170001)">
-<path id="Vector" d="M3.33301 4.16667C3.33301 3.72464 3.5086 3.30072 3.82116 2.98816C4.13372 2.67559 4.55765 2.5 4.99967 2.5H14.9997C15.4417 2.5 15.8656 2.67559 16.1782 2.98816C16.4907 3.30072 16.6663 3.72464 16.6663 4.16667V15.8333C16.6663 16.2754 16.4907 16.6993 16.1782 17.0118C15.8656 17.3244 15.4417 17.5 14.9997 17.5H4.99967C4.55765 17.5 4.13372 17.3244 3.82116 17.0118C3.5086 16.6993 3.33301 16.2754 3.33301 15.8333V4.16667Z" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_2" d="M6.66699 6.66634C6.66699 6.44533 6.75479 6.23337 6.91107 6.07709C7.06735 5.92081 7.27931 5.83301 7.50033 5.83301H12.5003C12.7213 5.83301 12.9333 5.92081 13.0896 6.07709C13.2459 6.23337 13.3337 6.44533 13.3337 6.66634V7.49967C13.3337 7.72069 13.2459 7.93265 13.0896 8.08893C12.9333 8.24521 12.7213 8.33301 12.5003 8.33301H7.50033C7.27931 8.33301 7.06735 8.24521 6.91107 8.08893C6.75479 7.93265 6.66699 7.72069 6.66699 7.49967V6.66634Z" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_3" d="M6.66699 11.667V11.6753" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_4" d="M10 11.667V11.6753" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_5" d="M13.333 11.667V11.6753" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_6" d="M6.66699 14.167V14.1753" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_7" d="M10 14.167V14.1753" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_8" d="M13.333 14.167V14.1753" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_14068_170001">
-<rect width="20" height="20" fill="white"/>
-</clipPath>
-</defs>
-</svg>
+  color = "white",
+  size = 20,
+  shiftX = -2
+): SVGTemplateResult => svg`
+  <svg
+    width="${size}"
+    height="${size}"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    transform="translate(${shiftX}, 0)"
+  >
+    <g id="Frame" clip-path="url(#clip0_14068_170001)">
+      <path
+        id="Vector"
+        d="M3.33301 4.16667C3.33301 3.72464 3.5086 3.30072 3.82116 2.98816C4.13372 2.67559 4.55765 2.5 4.99967 2.5H14.9997C15.4417 2.5 15.8656 2.67559 16.1782 2.98816C16.4907 3.30072 16.6663 3.72464 16.6663 4.16667V15.8333C16.6663 16.2754 16.4907 16.6993 16.1782 17.0118C15.8656 17.3244 15.4417 17.5 14.9997 17.5H4.99967C4.55765 17.5 4.13372 17.3244 3.82116 17.0118C3.5086 16.6993 3.33301 16.2754 3.33301 15.8333V4.16667Z"
+        stroke=${color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        id="Vector_2"
+        d="M6.66699 6.66634C6.66699 6.44533 6.75479 6.23337 6.91107 6.07709C7.06735 5.92081 7.27931 5.83301 7.50033 5.83301H12.5003C12.7213 5.83301 12.9333 5.92081 13.0896 6.07709C13.2459 6.23337 13.3337 6.44533 13.3337 6.66634V7.49967C13.3337 7.72069 13.2459 7.93265 13.0896 8.08893C12.9333 8.24521 12.7213 8.33301 12.5003 8.33301H7.50033C7.27931 8.33301 7.06735 8.24521 6.91107 8.08893C6.75479 7.93265 6.66699 7.72069 6.66699 7.49967V6.66634Z"
+        stroke=${color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        id="Vector_3"
+        d="M6.66699 11.667V11.6753"
+        stroke=${color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        id="Vector_4"
+        d="M10 11.667V11.6753"
+        stroke=${color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        id="Vector_5"
+        d="M13.333 11.667V11.6753"
+        stroke=${color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        id="Vector_6"
+        d="M6.66699 14.167V14.1753"
+        stroke=${color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        id="Vector_7"
+        d="M10 14.167V14.1753"
+        stroke=${color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        id="Vector_8"
+        d="M13.333 14.167V14.1753"
+        stroke=${color}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_14068_170001">
+        <rect width="20" height="20" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
 `;

package/src/WebComponent/launcher/Launcher.ts

@@ -782,7 +782,7 @@ export class Launcher extends LitElement {
                       this.foregroundColorOnSecondaryBackgroundColor
                     )}
                   </div>
-                  <div class="vertical-pill-title">
+                  <div class="vertical-pill-title" style="margin-left: -2px;">
                     <span class="vertical-pill-bold">Calculate</span> Cost
                   </div>
                 </div>

package/src/services/fees/fetchBuildingFeesV2.ts

@@ -31,7 +31,7 @@ const fetchBuildingFeesV2 = async (
       const data = camelize<BuildingFeeResponse>(feesResponse.data);
       return {
         fees: data.fees.map(toBuildingFeeClass),
-        rentableItems: data.rentableItems,
+        rentableItems: data.rentableItems.map(toRentableItemSummary),
         buildingIncentives: data.buildingIncentives,
       };
     }
@@ -53,4 +53,7 @@ const fetchBuildingFeesV2 = async (
 
 const toBuildingFeeClass = (fee: BuildingFeeView) => new BuildingFeeView(fee);
 
+const toRentableItemSummary = (item: RentableItemSummary) =>
+  new RentableItemSummary(item);
+
 export default fetchBuildingFeesV2;