@meetelise/chat 1.20.63 → 1.20.65

package/src/WebComponent/me-chat.ts

@@ -3,7 +3,7 @@ import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { createRef, ref, Ref } from "lit/directives/ref.js";
 import Talk from "talkjs";
-import { Launcher } from "./Launcher";
+import { Launcher } from "./launcher/Launcher";
 import "./Scheduler/tour-scheduler";
 import Analytics from "../analytics";
 import { createChatID, getChatID } from "../chatID";
@@ -14,16 +14,15 @@ import {
   fetchFeatureFlagShowMarketingSourceDropdown,
   fetchFeatureFlagUsePhoneNumberBySource,
 } from "../fetchFeatureFlag";
-import fetchBuildingABTestType, {
-  abTestTypes,
-} from "../fetchBuildingABTestType";
+import fetchWebchatPreferences from "../fetchWebchatPreferences";
+import fetchBuildingABTestType from "../fetchBuildingABTestType";
 import fetchCurrentParsedLeadSource from "../fetchCurrentParsedLeadSource";
 import fetchPhoneNumberFromSource, {
   NumberForSelectedSource,
 } from "../fetchPhoneNumberFromSource";
-import { getTheme, Theme, ThemeIdString } from "../themes";
+import { defaultBrandColor, getTheme, Theme } from "../themes";
 import { isMobile } from "../utils";
-import { installLauncher } from "./Launcher";
+import { installLauncher } from "./launcher/Launcher";
 import parseISO from "date-fns/parseISO";
 import isPast from "date-fns/isPast";
 
@@ -33,20 +32,10 @@ import { StyleInfo } from "lit/directives/style-map";
 import addMinutes from "date-fns/addMinutes";
 import formatISO from "date-fns/formatISO";
 import fetchLeadSources from "../fetchLeadSources";
-import {
-  ChevronIconWhite,
-  TabletWhiteStrokeIcon,
-  WhiteStrokeTourIcon,
-} from "../svgIcons";
 import { formatPhoneNumber } from "./actions/formatPhoneNumber";
 
-export interface Options {
-  building: string;
-  organization: string;
-  themeId?: ThemeIdString;
-  avatarSrc?: string;
-  mini?: boolean;
-}
+import "./actions/minimize-expand-button";
+import "./launcher/mobile-launcher";
 
 @customElement("me-chat")
 export class MEChat extends LitElement {
@@ -70,41 +59,30 @@ export class MEChat extends LitElement {
     .showTab {
       display: flex;
       align-items: center;
-      justify-content: flex-start;
+      justify-content: space-between;
       gap: 32px;
     }
-    #contactTabPopup {
+    #chatAdditionalActions {
       position: fixed;
-      width: 300px;
-      padding-left: 20px;
-      padding-right: 20px;
-      padding-bottom: 24px;
+      box-sizing: border-box;
+
+      box-sizing: border-box;
+      width: 340px;
+
+      padding-top: 0px;
+      padding-right: 12px;
+
       z-index: 1000000000;
-      background: #000000;
-      border-radius: 10px 0px 0px 0px;
-      border-width: 1px 0px 0px 1px;
-      border-style: solid;
-      border-color: #ffffff;
     }
-    .actionTabBttn {
-      font-family: "Helvetica Neue", Arial;
-      font-style: normal;
-      font-size: 14px;
-      line-height: 18px;
-      color: #ffffff;
-      border: none;
-      background: none;
-      padding: 0;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .actionTabBttn:hover {
-      cursor: pointer;
-      color: #f0f0f0;
-    }
-    .heavyLabel {
-      font-weight: bold;
+    #chatAdditionalActions::after {
+      content: "";
+      position: absolute;
+      top: -6px;
+      right: 0;
+      width: 0;
+      height: 0;
+      border-bottom: 22px solid transparent;
+      border-right: 30px solid black;
     }
   `;
   static session: Promise<Talk.Session> = Talk.ready.then(() => {
@@ -132,10 +110,19 @@ export class MEChat extends LitElement {
   @property({ type: Object })
   launcherStyles: StyleInfo = {};
 
+  @property({ type: Boolean })
+  isMinimized = false;
+
+  @property({ type: String })
+  private brandColor: string | null = null;
+
   @state()
   private popup: Talk.Popup | null = null;
   @state()
-  private theme: Theme = getTheme();
+  private theme: Theme = getTheme({
+    themeId: this.themeId,
+    brandColor: this.brandColor,
+  });
   @state()
   private chatId = "";
   @state()
@@ -187,6 +174,7 @@ export class MEChat extends LitElement {
       currentLeadSource,
       featureFlagShowDropdown,
       featureFlagUseDNI,
+      webchatPreferences,
     ] = await Promise.all([
       fetchBuildingInfo(this.orgSlug, this.buildingSlug),
       fetchBuildingABTestType(this.buildingSlug),
@@ -194,6 +182,7 @@ export class MEChat extends LitElement {
       fetchCurrentParsedLeadSource(this.buildingSlug, document.referrer),
       fetchFeatureFlagShowMarketingSourceDropdown(this.buildingSlug),
       fetchFeatureFlagUsePhoneNumberBySource(this.buildingSlug),
+      fetchWebchatPreferences(this.buildingSlug),
     ]);
 
     building.phoneNumber = formatPhoneNumber(building.phoneNumber);
@@ -203,6 +192,19 @@ export class MEChat extends LitElement {
     this.currentLeadSource = currentLeadSource;
     this.featureFlagShowDropdown = featureFlagShowDropdown;
 
+    if (webchatPreferences) {
+      if (this.brandColor === null) {
+        this.brandColor = webchatPreferences.primaryColor ?? null;
+      }
+      if (this.buildingABTestType === null) {
+        this.buildingABTestType = webchatPreferences.designConcept ?? null;
+      }
+    }
+
+    if (this.brandColor === null) {
+      this.brandColor = defaultBrandColor;
+    }
+
     let phoneNumberForSource = null;
     if (featureFlagUseDNI) {
       phoneNumberForSource = await fetchPhoneNumberFromSource(
@@ -230,7 +232,10 @@ export class MEChat extends LitElement {
     getRawAvailabilities(this.building.id); // we're not using this here, just want to cache the result
     this.chatId = getChatID(this.orgSlug, this.buildingSlug);
     this.avatarSrc = this.avatarSrc || this.building.avatarSrc;
-    this.theme = getTheme(this.themeId ?? this.building.themeId);
+    this.theme = getTheme({
+      themeId: this.themeId ?? this.building.themeId,
+      brandColor: this.brandColor,
+    });
     this.analytics = new Analytics(
       this.orgSlug,
       this.buildingSlug,
@@ -352,17 +357,11 @@ export class MEChat extends LitElement {
     (talkjsPopupElement as HTMLElement).style.zIndex = "99999999999";
     this.popup = popup;
 
-    const forceClose = true; // if we want to always keep the widget in the closed state
     const autoOpenedTimestamp = sessionStorage.getItem("autoOpenedTimestamp");
     const shouldAutoOpen =
       !autoOpenedTimestamp ||
       (autoOpenedTimestamp && isPast(parseISO(autoOpenedTimestamp)));
-    if (
-      !forceClose &&
-      building.autoOpenChatWidget &&
-      shouldAutoOpen &&
-      !isMobile()
-    ) {
+    if (building.autoOpenChatWidget && shouldAutoOpen && !isMobile()) {
       this.popup.show();
       this.hideLauncher = true;
       this.hasMounted = true;
@@ -442,11 +441,13 @@ export class MEChat extends LitElement {
   //  of the talkjs popup - so we must adjust its coords on resize and mount
   adjustTopHeaderContactCoords = (): void => {
     if (this.talkjsPopupElement) {
-      const currentHeaderCoords = getOffset(this.talkjsPopupElement);
-      const headerRef = this.shadowRoot?.getElementById("contactTabPopup");
+      const talkjsPopupCoords = this.talkjsPopupElement.getBoundingClientRect();
+      const headerRef = this.shadowRoot?.getElementById(
+        "chatAdditionalActions"
+      );
       if (!headerRef) return;
-      headerRef.style.left = `${currentHeaderCoords.left + 20}px`;
-      headerRef.style.top = `${currentHeaderCoords.top - 50}px`;
+      headerRef.style.left = `${talkjsPopupCoords.left + 20}px`;
+      headerRef.style.top = `${talkjsPopupCoords.bottom - 24}px`;
     }
   };
   connectedCallback(): void {
@@ -461,14 +462,17 @@ export class MEChat extends LitElement {
     this.adjustTopHeaderContactCoords();
   }
 
+  onClickMinimize = (e: MouseEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.isMinimized = !this.isMinimized;
+  };
+
   render(): TemplateResult {
     installLauncher();
-    const hideTopContactTab =
-      !this.hideLauncher ||
-      this.isLoading ||
-      (this.buildingABTestType !== abTestTypes.ConceptBlueBlack &&
-        this.buildingABTestType !== abTestTypes.ConceptBlueWhite) ||
-      this.isMobile;
+
+    const showChatAdditionalActions =
+      this.hideLauncher && !this.isLoading && !this.isMobile;
 
     return html`
     <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=1">
@@ -476,24 +480,6 @@ export class MEChat extends LitElement {
           EliseAI widget that allows you to chat with a virtual assistant, book
           a tour, contact the leasing office, and more.
         </div>
-        <div
-          id="contactTabPopup"
-          class=${classMap({
-            ["showTab"]: !hideTopContactTab,
-            ["hideTab"]: hideTopContactTab,
-          })}
-        >
-          <button class="actionTabBttn" @click=${this.handleTourClicked}>
-            ${WhiteStrokeTourIcon}
-            <p><span class="heavyLabel">Book</span> a tour</p>
-            ${ChevronIconWhite}
-          </button>
-          <button class="actionTabBttn" @click=${this.handleContactTabClicked}>
-            ${TabletWhiteStrokeIcon}
-            <p><span class="heavyLabel">Contact</span> us</p>
-            ${ChevronIconWhite}
-          </button>
-        </div>
         <div
           class=${classMap({
             launcherContainer: true,
@@ -517,6 +503,9 @@ export class MEChat extends LitElement {
                   .unitOptions=${this.building?.unitOptionsV2 ?? []}
                   .tourTypeOptions=${this.building?.tourTypeOptions ?? []}
                   .launcherStyles=${this.launcherStyles}
+                  .brandColor=${this.brandColor}
+                  .isMinimized=${this.isMinimized}
+                  .onClickMinimize=${this.onClickMinimize}
                   .autoOpenChatWidget=${this.building.autoOpenChatWidget ??
                   false}
                   chatCallUsHeader=${this.building?.chatCallUsHeader ?? ""}
@@ -555,6 +544,31 @@ export class MEChat extends LitElement {
                 </meetelise-launcher>`
               : ""
           }
+          
+        </div>
+        <div
+          id="chatAdditionalActions"
+          class=${classMap({
+            ["showTab"]: showChatAdditionalActions,
+            ["hideTab"]: !showChatAdditionalActions,
+          })}
+        >
+          <mobile-launcher
+          .onClickMinimize=${this.onClickMinimize}
+          .onClickEmailOption=${this.handleContactClicked}
+          .onClickPhoneOption=${this.handleContactTabClicked}
+          .onClickSSTOption=${this.handleTourClicked}
+          .isMobile=${this.isMobile}
+          .brandColor=${this.brandColor}
+          .hideChat=${true}
+        ></mobile-launcher>
+         <minimize-expand-button 
+          .brandColor=${this.brandColor}
+          .onClick=${() => {
+            this.popup?.hide();
+            this.hideLauncher = false;
+          }}
+         ></minimize-expand-button>
         </div>
       </meta>
     `;
@@ -588,11 +602,3 @@ declare global {
     RCTPCampaign?: { CampaignDetails: { Source: string } };
   }
 }
-
-function getOffset(el: Element) {
-  const rect = el.getBoundingClientRect();
-  return {
-    left: rect.left,
-    top: rect.top,
-  };
-}

package/src/WebComponent/me-select.ts

@@ -119,6 +119,10 @@ export class MESelect extends LitElement {
         align-items: center;
         justify-content: space-between;
         color: rgba(32, 32, 32, 0.5);
+
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       ::-webkit-scrollbar {

package/src/fetchBuildingABTestType.ts

@@ -3,8 +3,7 @@ interface BuildingABType {
   abTestType: string;
 }
 export enum abTestTypes {
-  "ConceptBlueBlack" = "Concept 1 (Blue/Black)",
-  "ConceptBlueWhite" = "Concept 2 (Blue/White)",
+  "ConceptEmoji" = "Concept 2 (Blue/White)",
 }
 export default async function fetchBuildingABTestType(
   buildingSlug: string
@@ -14,6 +13,7 @@ export default async function fetchBuildingABTestType(
     const abTestTypeResponse = await axios.get(
       `${host}/platformApi/webchat/${buildingSlug}/ab-test-type`
     );
+    //return { abTestType: "Concept 2 (Blue/White)" };
     return abTestTypeResponse.data;
   } catch (_) {
     return null;

package/src/fetchWebchatPreferences.ts

@@ -0,0 +1,28 @@
+import axios from "axios";
+
+export interface WebchatPreferences {
+  primaryColor: string;
+  designConcept: string;
+  delayOpen: number;
+}
+
+export default async function fetchWebchatPreferences(
+  buildingSlug: string
+): Promise<WebchatPreferences | null> {
+  const host = "https://app.meetelise.com";
+  try {
+    const webchatPreferencesResponse = await axios.get(
+      `${host}/platformApi/webchat/${buildingSlug}/customization`
+    );
+    if (webchatPreferencesResponse.data) {
+      return {
+        primaryColor: webchatPreferencesResponse.data["primaryColor"],
+        designConcept: webchatPreferencesResponse.data["designConcept"],
+        delayOpen: +webchatPreferencesResponse.data["delayOpen"],
+      };
+    }
+    return null;
+  } catch (_) {
+    return null;
+  }
+}