@meetelise/chat 1.20.64 → 1.20.65

package/src/WebComponent/launcher/typeEmojiStyles.ts

@@ -1,134 +1,30 @@
 import { css } from "lit";
 
-// hacky way to get the animation to not jump after loop.
-const elementsInScrollList = 16; // 4 elements in list, looped over 4 times
-const emojiListAnimation = css`
-  .scroll-container {
-    height: 32px;
-    position: relative;
-    overflow: hidden;
-  }
-  .scroll-container > ul {
-    display: flex;
-    flex-direction: column;
-    animation: move calc(3s * ${elementsInScrollList})
-      steps(${elementsInScrollList}) infinite;
-    list-style: none;
-    padding: 0;
-    margin-top: 25px;
-
-    -webkit-transition: 1.5s;
-    -moz-transition: 1.5s;
-    transition: 1.5s;
-
-    -webkit-transition-timing-function: linear;
-    -moz-transition-timing-function: linear;
-    transition-timing-function: linear;
-  }
-  .scroll-container > ul li {
-    width: 100%;
-    animation: liMove calc(3s) infinite;
-    display: flex;
-    align-items: center;
-    height: 18px;
-
-    font-family: "Helvetica Neue", Arial;
-    font-style: normal;
-    font-size: 12px;
-    font-weight: 700;
-    color: #ffffff;
-
-    -webkit-transition: 1.5s;
-    -moz-transition: 1.5s;
-    transition: 1.5s;
-
-    -webkit-transition-timing-function: linear;
-    -moz-transition-timing-function: linear;
-    transition-timing-function: linear;
-  }
-  @keyframes move {
-    0% {
-      transform: translate(0, 0);
-    }
-    100% {
-      transform: translate(
-        0,
-        calc(${elementsInScrollList} * 18 * -1px)
-      ); // 18 is the height of each list item
-    }
-  }
-  @keyframes liMove {
-    0% {
-      transform: translate(0, 0);
-    }
-    80%,
-    100% {
-      transform: translate(0, calc(18 * -1px));
-    }
-  }
-`;
-
 export const typeEmojiStyles = css`
   .type-hey__list {
     width: 280px;
     height: 300px;
     margin-right: 4px;
 
-    border: 2px solid #a6b4ff;
-
     border-radius: 16px;
     display: flex;
     flex-direction: column;
     align-items: center;
     position: relative;
+    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
   }
   .type-hey__top-section {
     width: 100%;
     border-radius: 16px;
     height: calc(100% + 56px);
   }
-  .type-hey__top-section:hover {
-    cursor: pointer;
-    background: rgba(0, 0, 0, 0.6);
+  #type-hey__ask-prompt:hover {
+    filter: brightness(0.9);
   }
   .type-hey__chat-container {
     position: absolute;
     bottom: -72px;
     right: 0px;
-
-    width: 56px;
-    height: 56px;
-
-    background: #ffffff;
-    border: 1px solid rgba(95, 95, 95, 0.2);
-    border-radius: 1000px;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .type-hey__inner-chat-container {
-    width: 46px;
-    height: 46px;
-
-    border-radius: 1000px;
-    border: 1px solid rgba(255, 255, 255, 0.7);
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .type-hey__chat-icon {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 1000px;
-  }
-  .type-hey__chat-icon:hover {
-    cursor: pointer;
-    background: rgba(0, 0, 0, 0.6);
   }
 
   .type-hey__bottom-section {
@@ -238,50 +134,15 @@ export const typeEmojiStyles = css`
     color: #ffffff;
   }
 
-  .type-hey__ask-prompt {
+  #type-hey__ask-prompt {
     margin: auto;
     margin-top: 9px;
     margin-bottom: 24px;
 
-    width: 220px;
-    height: 32px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-
-    background: linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.55) -6.25%,
-      rgba(255, 255, 255, 0) 35.46%,
-      rgba(255, 255, 255, 0) 72.81%,
-      #ffffff 104.69%
-    );
-    border-radius: 4px;
-    cursor: pointer;
-  }
-  .type-hey__ask-prompt-inner {
-    width: calc(100% - 30px); // 30px for padding
-    height: 100%;
+    border: 1px solid rgba(255, 255, 255, 0.8);
+    box-shadow: 0px 12px 10px rgba(0, 0, 0, 0.1);
 
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-left: 15px;
-    padding-right: 15px;
-    position: relative;
-    z-index: 10000000000000000000000000000000000000000000000000000000;
-  }
-  .type-hey__ask-start {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .type-hey__ask-start > h2 {
-    font-family: "Helvetica Neue", Arial;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 18px;
     color: #ffffff;
-    margin: 0;
   }
 
   .type-hey__bottom-info {
@@ -297,5 +158,4 @@ export const typeEmojiStyles = css`
   .title-bold {
     font-weight: 700;
   }
-  ${emojiListAnimation}
 `;

package/src/WebComponent/launcher/typeMobileStyles.ts

@@ -21,7 +21,6 @@ export const typeMobileStyles = css`
     gap: 3px;
   }
   .typeMobile-bttn {
-    background: #c4c4c4;
     width: 54px;
     height: 54px;
 

package/src/WebComponent/me-chat.ts

@@ -14,12 +14,13 @@ import {
   fetchFeatureFlagShowMarketingSourceDropdown,
   fetchFeatureFlagUsePhoneNumberBySource,
 } from "../fetchFeatureFlag";
+import fetchWebchatPreferences from "../fetchWebchatPreferences";
 import fetchBuildingABTestType from "../fetchBuildingABTestType";
 import fetchCurrentParsedLeadSource from "../fetchCurrentParsedLeadSource";
 import fetchPhoneNumberFromSource, {
   NumberForSelectedSource,
 } from "../fetchPhoneNumberFromSource";
-import { getTheme, Theme } from "../themes";
+import { defaultBrandColor, getTheme, Theme } from "../themes";
 import { isMobile } from "../utils";
 import { installLauncher } from "./launcher/Launcher";
 import parseISO from "date-fns/parseISO";
@@ -33,6 +34,9 @@ import formatISO from "date-fns/formatISO";
 import fetchLeadSources from "../fetchLeadSources";
 import { formatPhoneNumber } from "./actions/formatPhoneNumber";
 
+import "./actions/minimize-expand-button";
+import "./launcher/mobile-launcher";
+
 @customElement("me-chat")
 export class MEChat extends LitElement {
   static styles = css`
@@ -55,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(() => {
@@ -117,8 +110,11 @@ export class MEChat extends LitElement {
   @property({ type: Object })
   launcherStyles: StyleInfo = {};
 
+  @property({ type: Boolean })
+  isMinimized = false;
+
   @property({ type: String })
-  private brandColor = null;
+  private brandColor: string | null = null;
 
   @state()
   private popup: Talk.Popup | null = null;
@@ -178,6 +174,7 @@ export class MEChat extends LitElement {
       currentLeadSource,
       featureFlagShowDropdown,
       featureFlagUseDNI,
+      webchatPreferences,
     ] = await Promise.all([
       fetchBuildingInfo(this.orgSlug, this.buildingSlug),
       fetchBuildingABTestType(this.buildingSlug),
@@ -185,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);
@@ -194,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(
@@ -346,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;
@@ -431,9 +436,44 @@ export class MEChat extends LitElement {
     this.launcherRef.value?.onClickPhoneOption(e);
   };
 
+  // Talkjs is very limiting with changing it's design and working around it.
+  //  For the top header contact, we change its pos based on the current x and y
+  //  of the talkjs popup - so we must adjust its coords on resize and mount
+  adjustTopHeaderContactCoords = (): void => {
+    if (this.talkjsPopupElement) {
+      const talkjsPopupCoords = this.talkjsPopupElement.getBoundingClientRect();
+      const headerRef = this.shadowRoot?.getElementById(
+        "chatAdditionalActions"
+      );
+      if (!headerRef) return;
+      headerRef.style.left = `${talkjsPopupCoords.left + 20}px`;
+      headerRef.style.top = `${talkjsPopupCoords.bottom - 24}px`;
+    }
+  };
+  connectedCallback(): void {
+    super.connectedCallback();
+    window.addEventListener("resize", this.adjustTopHeaderContactCoords);
+  }
+  disconnectedCallback(): void {
+    window.removeEventListener("resize", this.adjustTopHeaderContactCoords);
+    super.disconnectedCallback();
+  }
+  updated(): void {
+    this.adjustTopHeaderContactCoords();
+  }
+
+  onClickMinimize = (e: MouseEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.isMinimized = !this.isMinimized;
+  };
+
   render(): TemplateResult {
     installLauncher();
 
+    const showChatAdditionalActions =
+      this.hideLauncher && !this.isLoading && !this.isMobile;
+
     return html`
     <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=1">
       <div id="aria-describe-info" style="display: none;">
@@ -464,6 +504,8 @@ export class MEChat extends LitElement {
                   .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 ?? ""}
@@ -502,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>
     `;

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;
+  }
+}

package/src/themes.ts

@@ -1,3 +1,5 @@
+import { hexToAlmostWhite } from "./utils";
+
 const white = "#FFFFFF";
 const darkGray = "#202020";
 const lightGray = "#83818E";
@@ -126,7 +128,7 @@ const themesById = {
       backgroundColor: white,
       textColor: darkGray,
     },
-    chatPaneBackgroundColor: "rgba(193, 193, 193, 0.3)",
+    chatPaneBackgroundColor: "rgba(193, 193, 193, 0.5)",
     message: {
       user: {
         textColor: "#FFFFFF",
@@ -154,8 +156,9 @@ export const getTheme = ({
         ? (themeId as ThemeIdString)
         : defaultThemeId
     ];
-  if (brandColor) {
+  if (brandColor && brandColor !== defaultBrandColor) {
     theme.message.user.backgroundColor = brandColor;
+    theme.chatHeader.backgroundColor = hexToAlmostWhite(brandColor, 0.6);
   }
   return theme;
 };

package/src/utils.ts

@@ -30,11 +30,9 @@ export const tintColor = (
   originalColor: string,
   tintOpacity: number
 ): string => {
-  // Convert the original color and tint color to RGB values
   const originalRgb = hexToRgb(originalColor);
   const tintRgb = { r: 0, g: 0, b: 0 };
 
-  // Calculate the new color with tint added
   const newRgb = {
     r: originalRgb.r + Math.round((tintRgb.r - originalRgb.r) * tintOpacity),
     g: originalRgb.g + Math.round((tintRgb.g - originalRgb.g) * tintOpacity),
@@ -62,3 +60,21 @@ const rgbToHex = (r: number, g: number, b: number): string => {
       .join("")
   );
 };
+
+export const hexToAlmostWhite = (hexColor: string, ratio: number): string => {
+  let r = parseInt(hexColor.substr(1, 2), 16);
+  let g = parseInt(hexColor.substr(3, 2), 16);
+  let b = parseInt(hexColor.substr(5, 2), 16);
+
+  // the ratio of white to add (1 = white, 0 = no change)
+  r = Math.round(r * (1 - ratio) + 255 * ratio);
+  g = Math.round(g * (1 - ratio) + 255 * ratio);
+  b = Math.round(b * (1 - ratio) + 255 * ratio);
+
+  return (
+    "#" +
+    r.toString(16).padStart(2, "0") +
+    g.toString(16).padStart(2, "0") +
+    b.toString(16).padStart(2, "0")
+  );
+};