@meetelise/chat 1.30.5 → 1.31.0

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

@@ -30,12 +30,12 @@ export class AddonItem extends LitElement {
 
   get atMaxUnits(): boolean {
     const maxUnits =
-      this.feeItem?.blueprint.addOnInfo?.maxUnitsCharged ?? Infinity;
+      this.feeItem?.blueprint.addOnInfo?.maxUnitsAllowed ?? Infinity;
     return this.quantity >= maxUnits;
   }
 
   get atMinUnits(): boolean {
-    const minUnits = this.feeItem?.blueprint.addOnInfo?.minUnitsCharged ?? 0;
+    const minUnits = this.feeItem?.blueprint.addOnInfo?.minUnitsAllowed ?? 0;
     return this.quantity <= minUnits;
   }
 

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

@@ -61,12 +61,13 @@ export default css`
 
   .loading-container {
     display: flex;
-    justify-content: center;
-    align-items: center;
+    justify-content: flex-start;
+    align-items: flex-start;
     width: 100%;
     height: 100%;
     min-height: 300px;
     flex: 1;
+    padding-top: 16px;
   }
 
   .empty-state {
@@ -79,36 +80,38 @@ export default css`
   }
 
   @media (max-width: 768px) {
-    .fee-calculator-layout,
-    .sidepanel,
-    .fees-container,
-    .sidepanel-section {
+    .fee-calculator-layout {
+      flex-direction: column;
+      gap: 10px;
       width: 100%;
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
 
-    .fee-calculator-layout {
-      flex-direction: column;
-      gap: 10px;
-      height: 100%;
-    }
-
     .sidepanel {
       max-width: 100%;
       order: 1;
       flex: none;
+      width: 100%;
+      margin: 0;
+      box-sizing: border-box;
     }
 
     .fees-container {
       order: 2;
       min-height: auto;
+      width: 100%;
+      margin: 0;
+      box-sizing: border-box;
     }
 
     .sidepanel-section {
       border-radius: 0;
       margin: 0 0 8px 0;
+      padding: 16px;
+      width: 100%;
+      box-sizing: border-box;
     }
 
     .loading-container {
@@ -116,11 +119,15 @@ export default css`
       min-height: 100px;
       padding-top: 20px;
       align-items: flex-start;
+      width: 100%;
+      box-sizing: border-box;
     }
 
     .empty-state {
       height: auto;
       min-height: 100px;
+      width: 100%;
+      box-sizing: border-box;
     }
   }
 `;

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

@@ -13,7 +13,7 @@ import {
 import "../floor-plan-selector/floor-plan-selector";
 import "../fee-card/fee-card";
 import "../addon-item/addon-item";
-import "../../../mega-loader";
+import "../../../loaders/skeleton-loader";
 
 @customElement("fee-calculator-layout")
 export class FeeCalculatorLayout extends LitElement {
@@ -149,7 +149,10 @@ export class FeeCalculatorLayout extends LitElement {
         ${this.isLoading
           ? html`
               <div class="loading-container">
-                <mega-loader></mega-loader>
+                <skeleton-loader
+                  .cards=${3}
+                  .rowsPerCard=${[3, 2, 1]}
+                ></skeleton-loader>
               </div>
             `
           : this.renderFeeSections()}

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

@@ -19,19 +19,21 @@ const floorPlanSelectorStyles = css`
 
   .floor-plan-selector-badges {
     display: flex;
-    flex-wrap: wrap;
+    overflow-x: scroll;
     gap: 8px;
     margin-bottom: 12px;
+    scrollbar-width: thin;
   }
 
   .floor-plan-badge {
     padding: 6px 12px;
     border-radius: 16px;
+    min-width: 2rem;
+    text-align: center;
     font-size: 0.9rem;
     cursor: pointer;
     background-color: #f0f0f0;
     border: 1px solid #ddd;
-    transition: all 0.15s ease;
   }
 
   .floor-plan-badge:hover {
@@ -47,12 +49,10 @@ const floorPlanSelectorStyles = css`
   .advanced-section {
     max-height: 0;
     overflow: hidden;
-    transition: max-height 0.15s ease-out;
   }
 
   .advanced-section.open {
     max-height: 800px;
-    transition: max-height 0.2s ease-in;
   }
 
   .date-fields {
@@ -60,7 +60,6 @@ const floorPlanSelectorStyles = css`
     flex-direction: row;
     gap: 16px;
     margin-bottom: 16px;
-    transition: gap 0.15s ease;
   }
 
   .date-field {
@@ -91,16 +90,12 @@ const floorPlanSelectorStyles = css`
     gap: 16px;
     padding: 12px 0;
     scroll-behavior: smooth;
-    transition: flex-direction 0.15s ease, max-height 0.15s ease,
-      width 0.15s ease, overflow-x 0.15s ease;
   }
 
   .unit-selection {
     margin-top: 16px;
     max-height: 16rem;
     overflow-y: auto;
-    transition: max-height 0.15s ease, overflow-y 0.15s ease,
-      overflow-x 0.15s ease;
   }
 
   .unit-label {
@@ -114,6 +109,13 @@ const floorPlanSelectorStyles = css`
     align-items: center;
   }
 
+  @media (max-width: 840px) {
+    .date-fields {
+      flex-direction: column;
+      gap: 12px;
+    }
+  }
+
   @media (max-width: 768px) {
     .date-fields {
       gap: 10px;

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

@@ -11,7 +11,7 @@ import floorPlanSelectorStyles from "./floor-plan-selector-styles";
 import { addMonths, startOfMonth } from "date-fns";
 
 import "../floorplan-image-card/floorplan-image-card";
-import "../../../mega-loader";
+import "../../../loaders/mega-loader";
 
 const FIRST_OF_NEXT_MONTH = startOfMonth(addMonths(new Date(), 1));
 

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

@@ -13,7 +13,8 @@ const floorplanImageCardStyles = css`
     display: flex;
     flex-direction: row;
     background-color: #f8f9fa;
-    width: 18rem;
+    min-width: 18rem;
+    width: 100%;
     padding: 12px;
     gap: 8px;
     border-radius: 4px;
@@ -23,6 +24,7 @@ const floorplanImageCardStyles = css`
 
   .section-left {
     flex: 0 0 auto;
+    position: relative;
   }
 
   .floorplan-image-card.selected {
@@ -59,6 +61,12 @@ const floorplanImageCardStyles = css`
     object-fit: cover;
     border: 1px solid #ddd;
     cursor: pointer;
+    position: relative;
+  }
+
+  img:hover {
+    border-color: var(--primary-color, #646987);
+    box-shadow: 0 0 10px 3px rgba(100, 105, 135, 0.4);
   }
 
   @media (max-width: 768px) {

package/src/WebComponent/FeeCalculator/components/incentive-banner/incentive-banner-styles.ts

@@ -0,0 +1,40 @@
+import { css } from "lit";
+
+export const incentiveBannerStyles = css`
+  :host {
+    display: block;
+  }
+
+  .incentive-banner {
+    width: 100%;
+    background-color: #e8f2ff;
+    padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .incentive-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 3rem;
+    height: 3rem;
+  }
+
+  .incentive-content {
+    flex: 1;
+  }
+
+  .incentive-title {
+    margin: 0;
+    font-size: 1.1rem;
+  }
+
+  .incentive-subtitle {
+    margin: 4px 0 0 0;
+    color: #868e96;
+    font-size: 0.9rem;
+    opacity: 0.9;
+  }
+`;

package/src/WebComponent/FeeCalculator/components/incentive-banner/incentive-banner.ts

@@ -0,0 +1,43 @@
+import { LitElement, html, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { IncentiveV2 } from "../../../../types/incentive-v2";
+import { incentiveBannerStyles } from "./incentive-banner-styles";
+import DollarOutlineIcon from "../../../icons/DollarOutlineIcon";
+
+@customElement("incentive-banner")
+export class IncentiveBanner extends LitElement {
+  static styles = incentiveBannerStyles;
+
+  @property({ type: Object })
+  incentive!: IncentiveV2;
+
+  getFormattedEndDate(incentive: IncentiveV2): string {
+    const endDate = new Date(incentive.endDate);
+    return endDate.toLocaleDateString("en-US", {
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+    });
+  }
+
+  render(): TemplateResult {
+    if (!this.incentive) {
+      return html``;
+    }
+
+    return html`
+      <div class="incentive-banner">
+        <div class="incentive-icon">${DollarOutlineIcon({ size: 32 })}</div>
+        <div class="incentive-content">
+          <h2 class="incentive-title">
+            ${this.incentive.originalIncentiveString}
+          </h2>
+          <p class="incentive-subtitle">
+            Valid through ${this.getFormattedEndDate(this.incentive)} for
+            ${this.incentive.qualifier}
+          </p>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/WebComponent/FeeCalculator/components/incentive-banner/index.ts

@@ -0,0 +1 @@
+export * from "./incentive-banner";

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

@@ -7,19 +7,22 @@ export const feeCalculatorStyles = css`
   }
 
   .fee-calculator-container {
-    background-color: #ffffff;
+    background-color: white;
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     padding: 20px;
+    height: 80vh;
     width: 80vw;
-    max-width: 1200px;
-    margin: 0 auto;
     display: flex;
     flex-direction: column;
-    height: 70vh;
     overflow: hidden;
     transition: width 0.15s ease, height 0.15s ease, padding 0.15s ease,
       margin 0.15s ease;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
   }
 
   .fee-calculator-container.compact {
@@ -37,7 +40,6 @@ export const feeCalculatorStyles = css`
 
   .calculator-header h1 {
     font-size: 1.2rem;
-    font-weight: normal;
     color: #333;
     transition: font-size 0.15s ease;
   }
@@ -45,6 +47,7 @@ export const feeCalculatorStyles = css`
   .calculator-header-right {
     display: flex;
     gap: 10px;
+    align-items: center;
   }
 
   .calculator-header-divider {
@@ -61,10 +64,50 @@ export const feeCalculatorStyles = css`
     transition: padding-top 0.15s ease, width 0.15s ease;
   }
 
+  .incentives-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    margin-bottom: 12px;
+  }
+
+  .incentive-banner {
+    width: 100%;
+    background-color: #e8f2ff;
+    padding: 12px 16px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .incentive-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 3rem;
+    width: 3rem;
+  }
+
+  .incentive-content {
+    flex: 1;
+  }
+
+  .incentive-title {
+    margin: 0;
+    font-size: 1.1rem;
+  }
+
+  .incentive-subtitle {
+    margin: 4px 0 0 0;
+    color: #868e96;
+    font-size: 0.9rem;
+    opacity: 0.9;
+  }
+
   .close-button {
     background: none;
     border: none;
-    color: #6c757d;
     font-size: 24px;
     cursor: pointer;
     padding: 0;
@@ -141,15 +184,6 @@ export const feeCalculatorStyles = css`
     cursor: not-allowed;
   }
 
-  .reset-button {
-    background-color: #6c757d;
-    margin-top: 16px;
-  }
-
-  .reset-button:hover {
-    background-color: #5a6268;
-  }
-
   .calculation-results {
     margin-top: 24px;
     padding-top: 16px;
@@ -199,50 +233,6 @@ export const feeCalculatorStyles = css`
     border-top: 1px solid #e0e0e0;
   }
 
-  .close-circle-button {
-    position: absolute;
-    bottom: -50px;
-    right: 20px;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    background-color: #007bff;
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    border: none;
-    font-size: 24px;
-    z-index: 10;
-  }
-
-  .close-circle-button:hover {
-    background-color: #0069d9;
-  }
-
-  #calculator-additional-actions {
-    position: fixed;
-    box-sizing: border-box;
-    z-index: 1000000;
-    margin-left: -1rem;
-  }
-
-  .hideActions {
-    display: none;
-  }
-
-  .showActions {
-    display: block;
-  }
-
-  .additional-actions-container {
-    display: flex;
-    justify-content: space-around;
-    gap: 10px;
-  }
-
   .action-button {
     flex: 1;
     background-color: #f8f9fa;
@@ -278,15 +268,6 @@ export const feeCalculatorStyles = css`
     background-color: var(--primary-color, #ffffff);
   }
 
-  .mobile-close-button {
-    display: none;
-    background: none;
-    border: none;
-    padding: 8px;
-    cursor: pointer;
-    color: #6c757d;
-  }
-
   @media (max-width: 768px) {
     .fee-calculator-container {
       width: 100vw;
@@ -303,6 +284,7 @@ export const feeCalculatorStyles = css`
       left: 0;
       right: 0;
       bottom: 0;
+      transform: none;
       z-index: 9999;
     }
 
@@ -324,11 +306,5 @@ export const feeCalculatorStyles = css`
     .calculator-header-divider {
       margin: 2px 0;
     }
-
-    .mobile-close-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
   }
 `;

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

@@ -18,10 +18,12 @@ import {
 import { defaultBackgroundColor, defaultPrimaryColor } from "../../themes";
 import debounce from "lodash/debounce";
 import { XOutlineIcon } from "../icons/XOutlineIcon";
+import { IncentiveV2 } from "../../types/incentive-v2";
 
 import "./components";
 import "./components/fee-calculator-layout/fee-calculator-layout";
 import "../chat-additional-actions";
+import "./components/incentive-banner";
 
 @customElement("fee-calculator")
 export class FeeCalculator extends LitElement {
@@ -81,6 +83,9 @@ export class FeeCalculator extends LitElement {
   @state()
   private buildingWebchatView: BuildingWebchatView | null = null;
 
+  @state()
+  private incentives: IncentiveV2[] = [];
+
   @state()
   enabledChatWidgets: {
     callDesktop: boolean;
@@ -131,16 +136,6 @@ export class FeeCalculator extends LitElement {
     return this.buildingWebchatView?.layoutOptions ?? [];
   }
 
-  connectedCallback(): void {
-    super.connectedCallback();
-    window.addEventListener("resize", this.adjustPositionAdditionalActions);
-  }
-
-  disconnectedCallback(): void {
-    window.removeEventListener("resize", this.adjustPositionAdditionalActions);
-    super.disconnectedCallback();
-  }
-
   firstUpdated = async (): Promise<void> => {
     this.style.setProperty("--primary-color", this.primaryColor);
     this.style.setProperty("--background-color", this.backgroundColor);
@@ -151,7 +146,6 @@ export class FeeCalculator extends LitElement {
   setupCalculator = async (): Promise<void> => {
     if (!this.buildingSlug || !this.orgSlug) return;
 
-    // TODO(Leo): Faster async loading
     const [buildingWebchatView, buildingFeeResponse] = await Promise.all([
       fetchBuildingWebchatView(this.orgSlug, this.buildingSlug),
       fetchBuildingFees(this.buildingSlug),
@@ -161,6 +155,7 @@ export class FeeCalculator extends LitElement {
 
     this.buildingWebchatView = buildingWebchatView;
     this.groupedFees = this.groupFees(buildingFeeResponse.fees);
+    this.incentives = buildingFeeResponse.buildingIncentives;
 
     this.enabledChatWidgets = {
       callDesktop: this.buildingWebchatView?.shouldShowPhoneDesktop ?? false,
@@ -179,7 +174,6 @@ export class FeeCalculator extends LitElement {
       this.style.setProperty("--primary-color", this.primaryColor);
       this.style.setProperty("--background-color", this.backgroundColor);
     }
-    this.adjustPositionAdditionalActions();
   }
 
   calculateQuote = async (): Promise<void> => {
@@ -278,33 +272,12 @@ export class FeeCalculator extends LitElement {
     this.selectedLayoutIds = layoutIds;
   };
 
-  adjustPositionAdditionalActions = (): void => {
-    const additionalActionsElement = this.shadowRoot?.getElementById(
-      "calculator-additional-actions"
-    );
-    if (!additionalActionsElement) return;
-
-    const calculatorContainer = this.shadowRoot?.querySelector(
-      ".fee-calculator-container"
-    );
-
-    const containerCoords = calculatorContainer?.getBoundingClientRect();
-    if (!containerCoords) return;
-
-    additionalActionsElement.style.left = `${containerCoords.left}px`;
-    additionalActionsElement.style.top = `${containerCoords.bottom + 10}px`;
-    additionalActionsElement.style.width = `${containerCoords.width}px`;
-  };
-
   render(): TemplateResult {
     const containerClasses = {
       "fee-calculator-container": true,
       compact: this.compactDesign,
     };
 
-    const primaryColorWithFallback = this.primaryColor || "#007bff";
-    const backgroundColorWithFallback = this.backgroundColor || "#ffffff";
-
     return html`
       <div
         class=${classMap(containerClasses)}
@@ -319,10 +292,10 @@ export class FeeCalculator extends LitElement {
             <button class="apply-button">Apply</button>
             <button
               aria-label="Close fee calculator"
-              class="mobile-close-button"
+              class="close-button"
               @click=${this.handleClose}
             >
-              ${XOutlineIcon("black")}
+              ${XOutlineIcon("gray")}
             </button>
           </div>
         </div>
@@ -330,6 +303,20 @@ export class FeeCalculator extends LitElement {
         <div class="calculator-header-divider"></div>
 
         <div class="calculator-content">
+          ${this.incentives.length
+            ? html`
+                <div class="incentives-container">
+                  ${this.incentives.map(
+                    (incentive) => html`
+                      <incentive-banner
+                        .incentive=${incentive}
+                      ></incentive-banner>
+                    `
+                  )}
+                </div>
+              `
+            : ""}
+
           <fee-calculator-layout
             .buildingSlug=${this.buildingSlug}
             .isLoading=${this.isLoading}
@@ -350,20 +337,6 @@ export class FeeCalculator extends LitElement {
           <p>Prices subject to change. Additional fees may apply.</p>
         </div>
       </div>
-
-      <chat-additional-actions
-        id="calculator-additional-actions"
-        .showChatAdditionalActions=${true}
-        .buildingWebchatView=${this.buildingWebchatView}
-        .primaryColor=${primaryColorWithFallback}
-        .backgroundColor=${backgroundColorWithFallback}
-        .enabledChatWidgets=${this.enabledChatWidgets}
-        .onClose=${() => this.handleClose()}
-        .onClickEmailOption=${this.handleClickEmailOption}
-        .onClickPhoneOption=${this.handleClickPhoneOption}
-        .onClickSSTOption=${this.handleClickSSTOption}
-        .onClickTextUsOption=${this.handleClickTextUsOption}
-      ></chat-additional-actions>
     `;
   }
 }

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

@@ -109,6 +109,8 @@ export interface AddOnInfo {
   addOnType: string;
   maxUnitsCharged: number | null;
   minUnitsCharged: number | null;
+  maxUnitsAllowed: number | null;
+  minUnitsAllowed: number | null;
   addOnTypeEmbedding: number[] | null;
 }