@meetelise/chat 1.43.30 → 1.43.31

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

@@ -106,7 +106,7 @@ export default css`
     min-height: 300px;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 767px) {
     .fee-calculator-layout {
       flex-direction: column;
       gap: 10px;

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

@@ -118,7 +118,7 @@ const floorPlanSelectorStyles = css`
     }
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 767px) {
     .date-fields {
       gap: 10px;
     }

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

@@ -96,7 +96,7 @@ const floorplanImageCardStyles = css`
     font-weight: 500;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 767px) {
     .floorplan-image-card {
       width: 100%;
       min-width: 18rem;

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

@@ -274,10 +274,11 @@ export const feeCalculatorStyles = css`
     justify-content: center;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 767px) {
     .fee-calculator-container {
       width: 100vw;
       height: 100vh;
+      height: 100svh;
       padding: 8px;
       padding-top: 2px;
       border-radius: 0;

package/src/WebComponent/MEChat.css

@@ -1,4 +1,4 @@
-@media screen and (min-width: 767px) {
+@media screen and (min-width: 768px) {
   .meetelise-chat.pane.launcher__desktop {
     right: -32px;
   }

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

@@ -127,6 +127,12 @@ export class DatePicker extends LitElement {
       padding: 15px 12px 15px;
     }
 
+    @media screen and (max-width: 767px) {
+      #calendar {
+        width: 100%;
+      }
+    }
+
     #header {
       display: flex;
       align-items: center;

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

@@ -143,6 +143,23 @@ export class TimePicker extends LitElement {
         width: 100%;
       }
     }
+
+    @media screen and (max-width: 767px) {
+      #optionContainer {
+        max-width: none;
+        max-height: none;
+        width: 100%;
+        overflow-y: auto;
+        justify-content: flex-start;
+        align-content: flex-start;
+      }
+
+      .option {
+        width: auto;
+        flex: 1 1 0;
+        min-width: 80px;
+      }
+    }
   `;
 
   render(): TemplateResult {

package/src/WebComponent/Scheduler/tourSchedulerStyles.ts

@@ -49,7 +49,8 @@ export const tourSchedulerStyles = css`
     right: 0;
     bottom: 0;
     top: 6px;
-    height: calc(100% - 12px);
+    height: calc(100vh - 12px);
+    height: calc(100svh - 12px);
     width: calc(100% - 12px);
     box-sizing: border-box;
 
@@ -59,8 +60,10 @@ export const tourSchedulerStyles = css`
   }
   #mobile-body-container {
     flex: 1;
+    min-height: 0;
     box-sizing: border-box;
     padding: 24px;
+    overflow-y: auto;
   }
 
   #mobile-next-bttn {
@@ -117,7 +120,9 @@ export const tourSchedulerStyles = css`
   }
   #scheduler-container {
     padding: 24px;
-    height: 500px;
+    max-height: 500px;
+    flex: 1;
+    min-height: 0;
     overflow-y: auto;
     position: relative;
   }
@@ -180,6 +185,20 @@ export const tourSchedulerStyles = css`
     }
   }
 
+  @media screen and (max-width: 767px) {
+    #dateAndTimeMenu {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+
+    #datePicker {
+      flex-direction: column;
+      align-items: stretch;
+      width: 100%;
+    }
+  }
+
   /*
 makes button fit size of SVG:
   https://stackoverflow.com/questions/45423874/button-height-is-greater-than-the-nested-contents-height
@@ -247,7 +266,7 @@ otherwise there's some empty space at the bottom of the button, which interferes
   }
 
   #tour-scheduler-footer {
-    height: 100px;
+    min-height: 64px;
     display: flex;
     justify-content: space-between;
     align-items: center;

package/src/WebComponent/actions/details-window.ts

@@ -1,7 +1,7 @@
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
-import { isMobile } from "../../utils";
+import { isMobile, onMobileChange } from "../../utils";
 
 @customElement("details-window")
 export class DetailsWindow extends LitElement {
@@ -14,6 +14,9 @@ export class DetailsWindow extends LitElement {
 
       border-radius: 10px 0px 0px 10px;
       padding: 49px 18px 24px;
+      max-height: calc(100vh - 40px);
+      max-height: calc(100svh - 40px);
+      overflow-y: auto;
     }
 
     .close-window-button {
@@ -87,20 +90,25 @@ export class DetailsWindow extends LitElement {
   onCloseClick?: (e: MouseEvent) => void;
 
   @state()
-  isMobileSized = false;
+  isMobileSized = isMobile();
 
   @property({ attribute: true })
   useGradientDesign = false;
 
-  async firstUpdated(): Promise<void> {
-    // Give the browser a chance to paint
-    await new Promise((resolve) => setTimeout(resolve, 0));
-    this.isMobileSized = isMobile();
-    window.addEventListener("resize", () => {
-      this.isMobileSized = isMobile();
+  private _cleanupMobileListener?: () => void;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this._cleanupMobileListener = onMobileChange((m) => {
+      this.isMobileSized = m;
     });
   }
 
+  disconnectedCallback(): void {
+    this._cleanupMobileListener?.();
+    super.disconnectedCallback();
+  }
+
   render(): TemplateResult {
     return html`
       <div

package/src/WebComponent/actions/email-us-window.ts

@@ -69,6 +69,8 @@ export class EmailUsWindow extends LitElement {
         width: 100%;
         width: -webkit-fill-available;
         width: -moz-available;
+        min-height: 80px;
+        max-height: 159px;
         height: 159px;
       }
 

package/src/WebComponent/healthchat-styles.ts

@@ -20,6 +20,8 @@ export const healthChatStyles = css`
   .healthchat-container__desktop {
     width: 300px;
     height: 420px;
+    max-height: calc(100vh - 160px);
+    max-height: calc(100svh - 160px);
     border-radius: 10px;
   }
 
@@ -101,7 +103,7 @@ export const healthChatStyles = css`
 
     padding-right: 6px; /* width of the scrollbar */
     box-sizing: border-box;
-    z-index: 1000000000000000000000000001;
+    z-index: 10;
   }
   #healthcare-inner-footer > #message-input:focus {
     outline: none;

package/src/WebComponent/launcher/Launcher.ts

@@ -22,7 +22,7 @@ import {
 import "./mobile-launcher";
 import "../actions/collapse-expand-button";
 import { DesignConcepts } from "../../fetchBuildingWebchatView";
-import { isMobile } from "../../utils";
+import { isMobile, onMobileChange } from "../../utils";
 import classNames from "classnames";
 import LeadSourceClient from "../LeadSourceClient";
 
@@ -212,6 +212,11 @@ export class Launcher extends LitElement {
   @state()
   private leadSourceMultitouchClient: LeadSourceMultitouchClient | null = null;
 
+  @state()
+  _isMobile = isMobile();
+
+  private _cleanupMobileListener?: () => void;
+
   @state()
   isEmailWindowOpen = false;
   @state()
@@ -226,6 +231,18 @@ export class Launcher extends LitElement {
   @state()
   private isMobileFeaturesExpanded = false;
 
+  connectedCallback(): void {
+    super.connectedCallback();
+    this._cleanupMobileListener = onMobileChange((m) => {
+      this._isMobile = m;
+    });
+  }
+
+  disconnectedCallback(): void {
+    this._cleanupMobileListener?.();
+    super.disconnectedCallback();
+  }
+
   getNumCallToActions = (): number => {
     const isEmailEnabled =
       this.hasEmailEnabledDesktop || this.hasEmailEnabledMobile;
@@ -391,11 +408,11 @@ export class Launcher extends LitElement {
 
   renderActionPills = (): TemplateResult => {
     if (
-      isMobile() ||
+      this._isMobile ||
       this.isMinimized ||
       this.designConcept === DesignConcepts.MINIMIZED
     ) {
-      return html` ${this.hasHideMobileFeatures && isMobile()
+      return html` ${this.hasHideMobileFeatures && this._isMobile
           ? html`<collapse-expand-button
               .toExpand=${this.isMobileFeaturesExpanded}
               .primaryColor=${this.primaryColor}
@@ -411,40 +428,40 @@ export class Launcher extends LitElement {
           .onClickApplyNowOption=${this.onClickApplyNowOption}
           .onClickPriceCalculatorOption=${this.onClickPriceCalculatorOption}
           .overrideRentgrata=${this.overrideRentgrata}
-          .isMobileDesign=${isMobile() ||
+          .isMobileDesign=${this._isMobile ||
           this.designConcept === DesignConcepts.MINIMIZED}
           .primaryColor=${this.primaryColor}
           .backgroundColor=${this.backgroundColor}
-          .hasChatEnabled=${!isMobile()
+          .hasChatEnabled=${!this._isMobile
             ? this.hasChatEnabledDesktop
             : this.hasChatEnabledMobile}
-          .hasEmailEnabled=${!isMobile()
+          .hasEmailEnabled=${!this._isMobile
             ? this.hasEmailEnabledDesktop
             : this.hasHideMobileFeatures && !this.isMobileFeaturesExpanded
             ? false
             : this.hasEmailEnabledMobile}
-          .hasCallUsEnabled=${!isMobile()
+          .hasCallUsEnabled=${!this._isMobile
             ? this.phoneNumber && this.hasCallUsEnabledDesktop
             : this.hasHideMobileFeatures && !this.isMobileFeaturesExpanded
             ? false
             : this.hasCallUsEnabledMobile}
-          .hasTextUsEnabled=${!isMobile()
+          .hasTextUsEnabled=${!this._isMobile
             ? this.hasTextUsEnabledDesktop
             : this.hasHideMobileFeatures && !this.isMobileFeaturesExpanded
             ? false
             : this.hasTextUsEnabledMobile}
-          .hasSSTEnabled=${!isMobile()
+          .hasSSTEnabled=${!this._isMobile
             ? this.hasSSTEnabledDesktop
             : this.hasHideMobileFeatures && !this.isMobileFeaturesExpanded
             ? false
             : this.hasSSTEnabledMobile}
-          .hasApplyNowEnabled=${!isMobile()
+          .hasApplyNowEnabled=${!this._isMobile
             ? this.hasApplyNowEnabledDesktop
             : this.hasHideMobileFeatures && !this.isMobileFeaturesExpanded
             ? false
             : this.hasApplyNowEnabledMobile}
           .applicationLink=${this.applicationLink}
-          .hasPricingCalculatorEnabled=${!isMobile()
+          .hasPricingCalculatorEnabled=${!this._isMobile
             ? this.hasPricingCalculatorEnabledDesktop
             : this.hasHideMobileFeatures && !this.isMobileFeaturesExpanded
             ? false
@@ -1174,19 +1191,19 @@ export class Launcher extends LitElement {
     }
     const overrideStyleWindows = {
       top:
-        !isMobile() && this.top !== undefined && !isNaN(this.top)
+        !this._isMobile && this.top !== undefined && !isNaN(this.top)
           ? `${this.top}px`
           : undefined,
       bottom:
-        !isMobile() && this.bottom !== undefined && !isNaN(this.bottom)
+        !this._isMobile && this.bottom !== undefined && !isNaN(this.bottom)
           ? `${this.bottom}px`
           : undefined,
       left:
-        !isMobile() && this.left !== undefined && !isNaN(this.left)
+        !this._isMobile && this.left !== undefined && !isNaN(this.left)
           ? `${this.left}px`
           : undefined,
       right:
-        !isMobile() && this.right !== undefined && !isNaN(this.right)
+        !this._isMobile && this.right !== undefined && !isNaN(this.right)
           ? `${this.right}px`
           : undefined,
     };
@@ -1194,35 +1211,37 @@ export class Launcher extends LitElement {
     return html`
       <div
         class=${classNames({
-          ["launcher__mobile-launcher-wrapper"]: isMobile() || this.isMinimized,
-          ["launcher__mini-launcher-wrapper"]: !isMobile() && !this.isMinimized,
+          ["launcher__mobile-launcher-wrapper"]:
+            this._isMobile || this.isMinimized,
+          ["launcher__mini-launcher-wrapper"]:
+            !this._isMobile && !this.isMinimized,
           ["launcher__mini-elevated"]:
             this.orgSlug.toLowerCase() === "livcor" &&
-            (isMobile() || this.isMinimized),
+            (this._isMobile || this.isMinimized),
         })}
         style=${styleMap({
           ...this.launcherStyles,
           ...this.mobileStyles,
           top:
-            !isMobile() && this.top !== undefined && !isNaN(this.top)
+            !this._isMobile && this.top !== undefined && !isNaN(this.top)
               ? `${this.top - 700}px`
               : this.mobileStyles.top !== undefined
               ? `${this.mobileStyles.top}px`
               : undefined,
           bottom:
-            !isMobile() && this.bottom !== undefined && !isNaN(this.bottom)
+            !this._isMobile && this.bottom !== undefined && !isNaN(this.bottom)
               ? `${this.bottom}px`
               : this.mobileStyles.bottom !== undefined
               ? `${this.mobileStyles.bottom}px`
               : "72px",
           left:
-            !isMobile() && this.left !== undefined && !isNaN(this.left)
+            !this._isMobile && this.left !== undefined && !isNaN(this.left)
               ? `${this.left}px`
               : this.mobileStyles.left !== undefined
               ? `${this.mobileStyles.left}px`
               : undefined,
           right:
-            !isMobile() && this.right !== undefined && !isNaN(this.right)
+            !this._isMobile && this.right !== undefined && !isNaN(this.right)
               ? `${this.right}px`
               : this.mobileStyles.right !== undefined
               ? `${this.mobileStyles.right}px`

package/src/WebComponent/launcher/launcherStyles.ts

@@ -274,7 +274,7 @@ export const launcherStyles = css`
     border-radius: 50%;
   }
 
-  @media screen and (max-width: 768px) {
+  @media screen and (max-width: 767px) {
     .launcher__mini-elevated {
       bottom: 75px;
     }

package/src/WebComponent/leasing-chat-styles.ts

@@ -29,6 +29,8 @@ export const leasingChatStyles = css`
     bottom: 110px;
     width: 340px;
     height: 600px;
+    max-height: calc(100vh - 220px);
+    max-height: calc(100svh - 220px);
     border-radius: 24px 24px 0px 24px;
   }
   #leasing-header {
@@ -106,7 +108,7 @@ export const leasingChatStyles = css`
     background: none;
     padding-right: 6px; /* width of the scrollbar */
     box-sizing: border-box;
-    z-index: 1000000000000000000000000001;
+    z-index: 10;
   }
   #message-input:focus {
     outline: none;

package/src/WebComponent/loaders/skeleton-loader-styles.ts

@@ -77,7 +77,7 @@ export const skeletonCardStyles = css`
     animation: shimmer 2s infinite ease-in-out;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 767px) {
     .skeleton-card {
       margin-bottom: 10px;
     }
@@ -100,7 +100,7 @@ export const skeletonLoaderStyles = css`
     box-sizing: border-box;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 767px) {
     .skeleton-loader {
       width: 100%;
       padding: 0 10px;

package/src/WebComponent/me-chat.ts

@@ -19,7 +19,7 @@ import fetchPhoneNumberFromSource, {
 } from "../fetchPhoneNumberFromSource";
 import { defaultPrimaryColor, defaultBackgroundColor } from "../themes";
 import getShouldShowWebchat from "../getShouldShowWebchat";
-import { isMobile } from "../utils";
+import { isMobile, onMobileChange } from "../utils";
 import { installLauncher } from "./launcher/Launcher";
 import parseISO from "date-fns/parseISO";
 import isPast from "date-fns/isPast";
@@ -98,7 +98,7 @@ export class MEChat extends LitElement {
       padding-top: 0px;
       padding-right: 12px;
 
-      z-index: 1000000000;
+      z-index: 100002;
     }
     #chatAdditionalActionsPubnub::after {
       content: "";
@@ -140,6 +140,11 @@ export class MEChat extends LitElement {
   @property({ type: String })
   private foregroundColorOnSecondaryBackgroundColor: string | null = null;
 
+  @state()
+  private _isMobile = isMobile();
+
+  private _cleanupMobileListener?: () => void;
+
   @state()
   private chatId = "";
   @state()
@@ -711,6 +716,9 @@ export class MEChat extends LitElement {
     super.connectedCallback();
     window.addEventListener("resize", this.adjustPositionChatAdditionalActions);
     window.addEventListener("keydown", this.handleKeydownTab);
+    this._cleanupMobileListener = onMobileChange((m) => {
+      this._isMobile = m;
+    });
   }
 
   private static readonly FOCUSABLE_SELECTOR =
@@ -818,6 +826,7 @@ export class MEChat extends LitElement {
       this.adjustPositionChatAdditionalActions
     );
     window.removeEventListener("keydown", this.handleKeydownTab);
+    this._cleanupMobileListener?.();
 
     super.disconnectedCallback();
   }
@@ -854,7 +863,7 @@ export class MEChat extends LitElement {
   render(): TemplateResult {
     installLauncher();
     const showChatAdditionalActions =
-      this.hideLauncher && !this.isLoading && !isMobile();
+      this.hideLauncher && !this.isLoading && !this._isMobile;
 
     return html`
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -920,8 +929,8 @@ export class MEChat extends LitElement {
         id='meetelise-chat-launcher-container'
           class=${classMap({
             launcherContainer: true,
-            ["launcher__mobile"]: isMobile(),
-            ["launcher__desktop"]: !isMobile(),
+            ["launcher__mobile"]: this._isMobile,
+            ["launcher__desktop"]: !this._isMobile,
             ["meetelise-chat"]: true,
             launcher: true,
             shouldBeVisible: true,
@@ -953,7 +962,7 @@ export class MEChat extends LitElement {
                   .overrideRentgrata=${this.overrideRentgrata}
                   .autoOpenChatWidget=${this.buildingWebchatView
                     ?.autoOpenChat ?? false}
-                  .mobileStyles=${isMobile() || this.isMinimized
+                  .mobileStyles=${this._isMobile || this.isMinimized
                     ? this.mobileStyles
                     : {}}
                   chatCallUsHeader=${this.buildingWebchatView
@@ -971,9 +980,7 @@ export class MEChat extends LitElement {
                   selfGuidedTourEnabled="${this.buildingWebchatView
                     ?.isSelfGuidedTourEnabled}"
                   designConcept="${this.designConcept ?? ""}"
-                  currentLeadSource="${this.LeadSourceClient?.leadSource ??
-                  null ??
-                  ""}"
+                  currentLeadSource="${this.LeadSourceClient?.leadSource ?? ""}"
                   featureFlagShowDropdown="${this.featureFlagShowDropdown}"
                   .leadSources="${this.leadSources ?? []}"
                   escortedToursLink="${this.buildingWebchatView