@meetelise/chat 1.43.37 → 1.43.39

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

@@ -66,6 +66,9 @@ export class FeeCalculatorLayout extends LitElement {
   @property({ type: Boolean })
   isLoadingUnits = false;
 
+  @property({ type: Boolean })
+  isLoadingLayouts = false;
+
   @property()
   onSelectLayout: ((layoutIds: number[]) => void) | null = null;
 
@@ -277,6 +280,7 @@ export class FeeCalculatorLayout extends LitElement {
               .selectedLayoutIds=${this.selectedLayoutIds}
               .units=${this.units}
               .isLoading=${this.isLoadingUnits}
+              .isLoadingLayouts=${this.isLoadingLayouts}
               .onSelectLayout=${this.onSelectLayout}
               .onUnitSelect=${this.onUnitSelect}
               .onMoveInDateChange=${this.onMoveInDateChange}

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

@@ -35,6 +35,13 @@ const feeItemStyles = css`
     margin-top: 4px;
   }
 
+  .fee-additional-info {
+    color: #868e96;
+    font-size: 0.8rem;
+    margin-top: 2px;
+    font-style: italic;
+  }
+
   .fee-amount {
     font-size: 1rem;
     align-self: center;

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

@@ -32,6 +32,10 @@ export class FeeItemComponent extends LitElement {
     return this.feeQuote?.marketableFee?.description ?? "";
   }
 
+  get additionalInfo(): string {
+    return this.feeQuote?.marketableFee?.additionalInfo ?? "";
+  }
+
   get triggeredEvent(): string {
     const event = this.feeQuote?.marketableFee?.triggeredByEvent;
     if (!event) return "";
@@ -61,7 +65,14 @@ export class FeeItemComponent extends LitElement {
       <div class="fee-item">
         <div class="fee-info">
           <div class="fee-name">${this.name}</div>
-          <div class="fee-description">${this.description}</div>
+          ${this.description
+            ? html`<div class="fee-description">${this.description}</div>`
+            : ""}
+          ${this.additionalInfo
+            ? html`<div class="fee-additional-info">
+                ${this.additionalInfo}
+              </div>`
+            : ""}
           ${this.triggeredEvent
             ? html`<div class="fee-triggered-event">
                 ${this.triggeredEvent}

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

@@ -49,6 +49,40 @@ const floorPlanSelectorStyles = css`
     color: white;
   }
 
+  .floor-plan-badge.skeleton {
+    cursor: default;
+    width: 56px;
+    height: 18px;
+    padding: 0;
+    border: 1px solid #eaeaea;
+  }
+
+  .unit-card-skeleton {
+    display: flex;
+    min-width: 18rem;
+    width: 100%;
+    height: 4.75rem;
+    border-radius: 4px;
+    border: 2px solid transparent;
+    background-color: #f8f9fa;
+    box-sizing: border-box;
+  }
+
+  .shimmer {
+    background: linear-gradient(90deg, #eaeaea 25%, #f5f5f5 50%, #eaeaea 75%);
+    background-size: 400px 100%;
+    animation: shimmer 1.4s ease-in-out infinite;
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: -200px 0;
+    }
+    100% {
+      background-position: 200px 0;
+    }
+  }
+
   .advanced-section {
     max-height: 0;
     overflow: hidden;

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

@@ -7,7 +7,9 @@ import floorPlanSelectorStyles from "./floor-plan-selector-styles";
 import { TODAY } from "../../../../globals";
 
 import "../floorplan-image-card/floorplan-image-card";
-import "../../../loaders/mega-loader";
+
+const SKELETON_BADGE_COUNT = 4;
+const SKELETON_UNIT_COUNT = 3;
 
 @customElement("floor-plan-selector")
 export class FloorPlanSelector extends LitElement {
@@ -28,6 +30,9 @@ export class FloorPlanSelector extends LitElement {
   @property({ type: Boolean })
   isLoading = false;
 
+  @property({ type: Boolean })
+  isLoadingLayouts = false;
+
   @property()
   onSelectLayout: ((layoutIds: number[]) => void) | null = null;
 
@@ -141,8 +146,11 @@ export class FloorPlanSelector extends LitElement {
     if (this.isLoading) {
       return html`
         <div class="unit-selection">
-          <div class="loading-container">
-            <mega-loader size="32"></mega-loader>
+          <div class="image-carousel">
+            ${Array.from(
+              { length: SKELETON_UNIT_COUNT },
+              () => html`<div class="unit-card-skeleton shimmer"></div>`
+            )}
           </div>
         </div>
       `;
@@ -151,7 +159,7 @@ export class FloorPlanSelector extends LitElement {
     return html`
       <div class="unit-selection">
         <div class="image-carousel">
-          ${!this.isLoading && this.units?.length === 0
+          ${this.units?.length === 0
             ? html`
                 <div class="no-floorplans-container">
                   <p>No floorplans found</p>
@@ -173,6 +181,17 @@ export class FloorPlanSelector extends LitElement {
   };
 
   renderBadges = (): TemplateResult => {
+    if (this.isLoadingLayouts) {
+      return html`
+        <div class="floor-plan-selector-badges">
+          ${Array.from(
+            { length: SKELETON_BADGE_COUNT },
+            () => html`<div class="floor-plan-badge skeleton shimmer"></div>`
+          )}
+        </div>
+      `;
+    }
+
     return html`
       <div class="floor-plan-selector-badges">
         ${this.displayOptions.map(

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

@@ -268,12 +268,6 @@ export const feeCalculatorStyles = css`
     background-color: var(--primary-color, #ffffff);
   }
 
-  .recalculating-loader {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
   @media (max-width: 767px) {
     .fee-calculator-container {
       width: 100vw;

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

@@ -68,10 +68,10 @@ export class FeeCalculator extends LitElement {
   onClickTextUsOption: ((e: MouseEvent) => void) | null = null;
 
   @state()
-  private isFirstCalculation = true;
+  private isCalculatingQuote = false;
 
   @state()
-  private isCalculatingQuote = false;
+  private isLoadingLayouts = true;
 
   @state()
   private isExporting = false;
@@ -212,7 +212,6 @@ export class FeeCalculator extends LitElement {
     } finally {
       if (!signal.aborted) {
         this.isCalculatingQuote = false;
-        this.isFirstCalculation = false;
       }
     }
   }
@@ -226,26 +225,38 @@ export class FeeCalculator extends LitElement {
     this.style.setProperty("--primary-color", this.primaryColor);
     this.style.setProperty("--background-color", this.backgroundColor);
 
-    await this.setupCalculator();
-    await this.fetchUnits();
+    await Promise.allSettled([this.setupCalculator(), this.fetchUnits()]);
   };
 
   setupCalculator = async (): Promise<void> => {
-    if (!this.buildingSlug || !this.orgSlug) return;
-
-    const [buildingWebchatView, buildingFeeResponse] = await Promise.all([
-      fetchBuildingWebchatView(this.orgSlug, this.buildingSlug),
-      fetchBuildingFeesV2(this.buildingSlug),
-    ]);
+    if (!this.buildingSlug || !this.orgSlug) {
+      this.isLoadingLayouts = false;
+      return;
+    }
 
-    if (!buildingWebchatView || !buildingFeeResponse) return;
+    // Resolve independently — /marketable-fees can be slow and shouldn't gate the layout selector.
+    const layoutsPromise = fetchBuildingWebchatView(
+      this.orgSlug,
+      this.buildingSlug
+    )
+      .then((view) => {
+        if (view) this.buildingWebchatView = view;
+      })
+      .finally(() => {
+        this.isLoadingLayouts = false;
+      });
 
-    this.buildingWebchatView = buildingWebchatView;
-    this.groupedFees = this.groupFees(buildingFeeResponse.fees);
-    this.rentableItems = buildingFeeResponse.rentableItems;
+    const feesPromise = fetchBuildingFeesV2(this.buildingSlug).then(
+      (response) => {
+        if (!response) return;
+        this.groupedFees = this.groupFees(response.fees);
+        this.rentableItems = response.rentableItems;
+        // TODO(Leo): Re-enable
+        // this.incentives = response.buildingIncentives;
+      }
+    );
 
-    // TODO(Leo): Re-enable
-    // this.incentives = buildingFeeResponse.buildingIncentives;
+    await Promise.allSettled([layoutsPromise, feesPromise]);
   };
 
   updated(changedProperties: Map<string, unknown>): void {
@@ -294,7 +305,6 @@ export class FeeCalculator extends LitElement {
 
   handleUnitSelect = (unit: Unit): void => {
     const isInitialSelection = !this.selectedUnit;
-    this.isFirstCalculation = true; // Reset flag to show skeleton loader
     this.selectedUnit = unit;
 
     if (isInitialSelection) {
@@ -451,9 +461,6 @@ export class FeeCalculator extends LitElement {
   };
 
   render(): TemplateResult {
-    const showLoader =
-      this.isCalculatingQuote && !this.isExporting && !this.isFirstCalculation;
-
     const exportDisabled =
       this.isExporting ||
       this.isCalculatingQuote ||
@@ -471,12 +478,6 @@ export class FeeCalculator extends LitElement {
           <h1>Estimated Cost Calculator</h1>
 
           <div class="calculator-header-right">
-            ${showLoader
-              ? html`<div class="recalculating-loader">
-                  <mega-loader .size=${16} .spinSpeed=${0.54}></mega-loader>
-                </div>`
-              : ""}
-
             <button
               class="share-button"
               @click=${this.handleShare}
@@ -498,7 +499,8 @@ export class FeeCalculator extends LitElement {
                   "noopener,noreferrer"
                 );
               }}
-              ?disabled=${!this.quote?.applicationLink}
+              ?disabled=${this.isCalculatingQuote ||
+              !this.quote?.applicationLink}
             >
               Apply
             </button>
@@ -531,7 +533,7 @@ export class FeeCalculator extends LitElement {
 
           <fee-calculator-layout
             .buildingSlug=${this.buildingSlug}
-            .showSkeletonLoader=${this.isFirstCalculation}
+            .showSkeletonLoader=${this.isCalculatingQuote}
             .selectedUnit=${this.selectedUnit}
             .groupedFees=${this.groupedFees}
             .rentableItems=${this.rentableItems}
@@ -540,6 +542,7 @@ export class FeeCalculator extends LitElement {
             .selectedLayoutIds=${this.selectedLayoutIds}
             .units=${this.units}
             .isLoadingUnits=${this.isLoadingUnits}
+            .isLoadingLayouts=${this.isLoadingLayouts}
             .onSelectLayout=${this.handleSelectLayout}
             .onUnitSelect=${this.handleUnitSelect}
             .onMoveInDateChange=${this.handleMoveInDateChange}

package/src/WebComponent/Scheduler/date-picker.ts

@@ -140,7 +140,7 @@ export class DatePicker extends LitElement {
       margin-bottom: 13px;
     }
 
-    h1 {
+    h2 {
       font-weight: 600;
       font-size: 12px;
       margin: 0;
@@ -154,6 +154,23 @@ export class DatePicker extends LitElement {
       align-items: center;
     }
 
+    #arrows button {
+      background: none;
+      border: none;
+      padding: 0;
+      margin: 0;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: inherit;
+    }
+
+    #arrows button:disabled {
+      cursor: default;
+      opacity: 0.4;
+    }
+
     #rows {
       display: flex;
       flex-direction: column;
@@ -324,7 +341,9 @@ export class DatePicker extends LitElement {
     return html`
       <div id="calendar">
         <div id="header">
-          <h1>${monthNames[this.monthShown]} ${this.yearShown}</h1>
+          <h2 aria-live="polite" aria-atomic="true">
+            ${monthNames[this.monthShown]} ${this.yearShown}
+          </h2>
           <div
             id="arrows"
             @click="${(e: MouseEvent) => {
@@ -341,55 +360,47 @@ export class DatePicker extends LitElement {
                 this.monthShown++;
               }
             }}"
-            @keydown="${(e: KeyboardEvent) => {
-              if (![" ", "Enter"].includes(e.key)) {
-                return;
-              }
-              if (
-                (e.target as HTMLElement)?.closest("#back") &&
-                !isSameMonth(
-                  this.now,
-                  new Date(this.yearShown, this.monthShown, 1)
-                )
-              ) {
-                e.preventDefault();
-                e.stopPropagation();
-                this.monthShown--;
-              } else if ((e.target as HTMLElement)?.closest("#forward")) {
-                e.preventDefault();
-                e.stopPropagation();
-                this.monthShown++;
-              }
-            }}"
           >
-            <svg
+            <button
               id="back"
-              tabindex="0"
-              width="9"
-              height="16"
-              viewBox="0 0 9 16"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M8.67727 2.34317L7.26305 0.928955L0.192017 8.00001L7.26308 15.0711L8.6773 13.6569L3.02044 8L8.67727 2.34317Z"
-                fill="#83818E"
-              />
-            </svg>
-            <svg
-              id="forward"
-              tabindex="0"
-              width="9"
-              height="16"
-              viewBox="0 0 9 16"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
+              type="button"
+              aria-label="Previous month"
+              ?disabled=${isSameMonth(
+                this.now,
+                new Date(this.yearShown, this.monthShown, 1)
+              )}
             >
-              <path
-                d="M0.157227 2.34315L1.57144 0.928932L8.64251 8L1.57144 15.0711L0.157227 13.6569L5.81408 8L0.157227 2.34315Z"
-                fill="#83818E"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                width="9"
+                height="16"
+                viewBox="0 0 9 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M8.67727 2.34317L7.26305 0.928955L0.192017 8.00001L7.26308 15.0711L8.6773 13.6569L3.02044 8L8.67727 2.34317Z"
+                  fill="#83818E"
+                />
+              </svg>
+            </button>
+            <button id="forward" type="button" aria-label="Next month">
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                width="9"
+                height="16"
+                viewBox="0 0 9 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M0.157227 2.34315L1.57144 0.928932L8.64251 8L1.57144 15.0711L0.157227 13.6569L5.81408 8L0.157227 2.34315Z"
+                  fill="#83818E"
+                />
+              </svg>
+            </button>
           </div>
         </div>
 

package/src/WebComponent/launcher/Launcher.ts

@@ -797,9 +797,11 @@ export class Launcher extends LitElement {
     const verticalPillListItems: {
       pillKey: string;
       pill: TemplateResult | null;
+      optionLabel: string;
     }[] = [
       {
         pillKey: "Chat",
+        optionLabel: "Chat with us",
         pill: this.hasChatEnabledDesktop
           ? html`
               <button
@@ -844,6 +846,7 @@ export class Launcher extends LitElement {
       },
       {
         pillKey: "Price Calculator",
+        optionLabel: "Calculate cost",
         pill: this.hasPricingCalculatorEnabledDesktop
           ? html`
               <button
@@ -875,6 +878,7 @@ export class Launcher extends LitElement {
       },
       {
         pillKey: "SST",
+        optionLabel: "Book a tour",
         pill: this.hasSSTEnabledDesktop
           ? html`
               <button
@@ -921,6 +925,7 @@ export class Launcher extends LitElement {
       },
       {
         pillKey: "Email",
+        optionLabel: "Email an agent",
         pill: this.hasEmailEnabledDesktop
           ? html`
               <button
@@ -958,6 +963,12 @@ export class Launcher extends LitElement {
       },
       {
         pillKey: "Phone",
+        optionLabel:
+          this.hasCallUsEnabledDesktop && this.hasTextUsEnabledDesktop
+            ? "Call or text us"
+            : this.hasCallUsEnabledDesktop
+            ? "Call us"
+            : "Text us",
         pill:
           this.phoneNumber &&
           (this.hasCallUsEnabledDesktop || this.hasTextUsEnabledDesktop)
@@ -1036,6 +1047,7 @@ export class Launcher extends LitElement {
       },
       {
         pillKey: "Apply",
+        optionLabel: "Apply now",
         pill:
           this.applicationLink && this.hasApplyNowEnabledDesktop
             ? html`
@@ -1081,8 +1093,15 @@ export class Launcher extends LitElement {
         pills.unshift(sstPill);
       }
     }
+    const optionLabels = pills.map((p) => p.optionLabel);
+    if (this.overrideRentgrata && hasRentgrata()) {
+      optionLabels.push("Contact a resident");
+    }
+    const navAriaLabel = optionLabels.length
+      ? `EliseAI options: ${optionLabels.join(", ")}`
+      : "EliseAI options";
     return html`
-      <div class="vertical-pill-list">
+      <nav class="vertical-pill-list" aria-label=${navAriaLabel}>
         <div class="vertical-pill-list">
           ${this.hasChatEnabledDesktop
             ? html`<button
@@ -1119,7 +1138,7 @@ export class Launcher extends LitElement {
               </button>`
             : ""}
         </div>
-      </div>
+      </nav>
     `;
   };
 

package/src/main/MEChat.ts

@@ -65,10 +65,9 @@ export default class MEChat {
     installFont();
     const healthChat = document.createElement("health-chat");
     healthChat.setAttribute("class", "health-chat");
-    healthChat.setAttribute("role", "dialog");
+    healthChat.setAttribute("role", "region");
     healthChat.setAttribute("aria-label", "EliseAI Healthcare Widget");
     healthChat.setAttribute("aria-describedby", "aria-describe-info");
-    healthChat.setAttribute("aria-modal", "true");
     healthChat.setAttribute("healthcareId", opts.id);
 
     healthChat.setAttribute("right", opts.right?.toString() || "unset");
@@ -140,10 +139,9 @@ export default class MEChat {
       opts.widgetType || WidgetType.Default
     );
     meChatElement.setAttribute("class", "meetelise-chat");
-    meChatElement.setAttribute("role", "dialog");
+    meChatElement.setAttribute("role", "region");
     meChatElement.setAttribute("aria-label", "EliseAI Widget");
     meChatElement.setAttribute("aria-describedby", "aria-describe-info");
-    meChatElement.setAttribute("aria-modal", "true");
 
     if (opts.brandColor) {
       this.brandColor = opts.brandColor;