@meetelise/chat 1.20.64 → 1.20.65

package/src/MEChat.ts

@@ -126,7 +126,7 @@ export default class MEChat {
     }
     this.remove();
     const url = window.location.href;
-    const requestUrl = `https://app.meetelise.com/eliseCrmApi/webchat/microsite_slug?uri=${encodeURIComponent(
+    const requestUrl = `https://app.meetelise.com/platformApi/webchat/microsite_slug?uri=${encodeURIComponent(
       url
     )}`;
     const buildingSlug = await axios.get<string | null>(requestUrl, {

package/src/WebComponent/actions/minimize-expand-button.ts

@@ -0,0 +1,92 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { XWhiteOutlineIcon, ChevronIconWhite } from "../../svgIcons";
+import { defaultBrandColor } from "../../themes";
+
+@customElement("minimize-expand-button")
+export class MinimizeExpandButton extends LitElement {
+  static styles = [
+    css`
+      .button-container {
+        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;
+      }
+      .mini {
+        width: 36px;
+        height: 36px;
+      }
+      .inner-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;
+        text-align: center;
+      }
+      .mini > .inner-container {
+        width: 30px;
+        height: 30px;
+      }
+      .x-icon,
+      .chevron-up {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 1000px;
+      }
+      .chevron-up {
+        transform: rotate(-90deg);
+      }
+      .button-container:hover {
+        cursor: pointer;
+        filter: brightness(90%);
+      }
+    `,
+  ];
+
+  @property({ attribute: true })
+  onClick: () => void = () => {
+    return;
+  };
+
+  @property({ attribute: true })
+  brandColor: string = defaultBrandColor;
+
+  @property({ attribute: true })
+  toExpand = false;
+
+  render(): TemplateResult {
+    return html`
+      <div
+        class=${this.toExpand ? "button-container mini" : "button-container"}
+        @click=${this.onClick}
+      >
+        <div
+          class="inner-container"
+          style=${styleMap({
+            background: this.brandColor,
+          })}
+        >
+          ${this.toExpand
+            ? html`<div class="chevron-up">${ChevronIconWhite}</div>`
+            : html` <div class="x-icon">${XWhiteOutlineIcon}</div>`}
+        </div>
+      </div>
+    `;
+  }
+}

package/src/WebComponent/launcher/Launcher.ts

@@ -3,7 +3,6 @@ import { customElement, property, state } from "lit/decorators.js";
 import { createRef, ref, Ref } from "lit/directives/ref.js";
 import { launcherStyles } from "./launcherStyles";
 import { typeEmojiStyles } from "./typeEmojiStyles";
-import { typeMobileStyles } from "./typeMobileStyles";
 import { typeMiniStyles } from "./typeMiniStyles";
 import {
   EmailUsWindow,
@@ -25,24 +24,23 @@ import {
   HeyThereEmoji,
   ChevronIconBlack,
   ChevronIconWhite,
-  XWhiteOutlineIcon,
-  ChatBlackOutlineIcon,
 } from "../../svgIcons";
 import { defaultBrandColor } from "../../themes";
+import { hexToAlmostWhite } from "../../utils";
+import "./mobile-launcher";
 
 @customElement("meetelise-launcher")
 export class Launcher extends LitElement {
   static styles = css`
     ${launcherStyles}
     ${typeEmojiStyles}
-    ${typeMobileStyles}
     ${typeMiniStyles}
   `;
 
   @property({ type: Boolean })
   isMobile = false;
 
-  @property({ type: Boolean })
+  @property({ attribute: true })
   isMinimized = false;
 
   @property({ type: Boolean })
@@ -106,11 +104,16 @@ export class Launcher extends LitElement {
     return;
   };
 
+  @property({ attribute: true })
+  onClickMinimize: (e: MouseEvent) => void = () => {
+    return;
+  };
+
   @property({ attribute: false })
   launcherStyles: StyleInfo = {};
 
   @property({ attribute: true })
-  brandColor: string | null = null;
+  brandColor: string = defaultBrandColor;
 
   @state()
   isEmailWindowOpen = false;
@@ -252,12 +255,6 @@ export class Launcher extends LitElement {
     this.isTextUsWindowOpen = false;
   };
 
-  onClickMinimize = (e: MouseEvent): void => {
-    e.preventDefault();
-    e.stopPropagation();
-    this.isMinimized = !this.isMinimized;
-  };
-
   renderTextUsOption = (): TemplateResult => {
     return html`
       <div
@@ -319,39 +316,15 @@ export class Launcher extends LitElement {
 
   renderActionPills = (): TemplateResult => {
     if (this.isMobile || this.isMinimized) {
-      return html`<div class="typeMobile-list">
-        ${this.isMobile
-          ? ""
-          : html` <button
-              id="minimize-mobile"
-              @click=${this.onClickMinimize}
-              class="minimize-bttn"
-            >
-              <div class="chevron-up">${ChevronIconBlack}</div>
-            </button>`}
-        <ul>
-          <li @click=${this.onClickEmailOption} class="typeMobile-bttn">
-            <div class="typeMobile-inner">
-              <div class="typeMobile-icon">${EmailBlackOutlineIcon}</div>
-            </div>
-          </li>
-          <li @click=${this.onClickPhoneOption} class="typeMobile-bttn">
-            <div class="typeMobile-inner">
-              <div class="typeMobile-icon">${PhoneBlackOutlineIcon}</div>
-            </div>
-          </li>
-          <li @click=${this.onClickSSTOption} class="typeMobile-bttn">
-            <div class="typeMobile-inner">
-              <div class="typeMobile-icon">${BookTourBlackOutlineIcon}</div>
-            </div>
-          </li>
-          <li @click=${this.onChatTapped} class="typeMobile-bttn">
-            <div class="typeMobile-inner">
-              <div class="typeMobile-icon">${ChatBlackOutlineIcon}</div>
-            </div>
-          </li>
-        </ul>
-      </div>`;
+      return html` <mobile-launcher
+        .onClickMinimize=${this.onClickMinimize}
+        .onClickEmailOption=${this.onClickEmailOption}
+        .onClickPhoneOption=${this.onClickPhoneOption}
+        .onClickSSTOption=${this.onClickSSTOption}
+        .onChatTapped=${this.onChatTapped}
+        .isMobile=${this.isMobile}
+        .brandColor=${this.brandColor}
+      ></mobile-launcher>`;
     }
 
     if (this.buildingABTestType === abTestTypes.ConceptEmoji) {
@@ -359,21 +332,17 @@ export class Launcher extends LitElement {
         <div
           class="type-hey__list"
           style=${styleMap({
-            background: this.brandColor ?? defaultBrandColor,
+            background: this.brandColor,
           })}
         >
-          <div class="type-hey__chat-container" @click=${this.onClickMinimize}>
-            <div
-              class="type-hey__inner-chat-container"
-              style=${styleMap({
-                background: this.brandColor ?? defaultBrandColor,
-              })}
-            >
-              <div class="type-hey__chat-icon">${XWhiteOutlineIcon}</div>
-            </div>
+          <div class="type-hey__chat-container">
+            <minimize-expand-button
+              .brandColor=${this.brandColor}
+              .onClick=${this.onClickMinimize}
+            ></minimize-expand-button>
           </div>
 
-          <div class="type-hey__top-section" @click=${this.onChatTapped}>
+          <div class="type-hey__top-section">
             <div class="type-hey__ai-topic">
               <p>AI Assistant</p>
               <div class="type-hey__ai-topic-notch"></div>
@@ -384,26 +353,19 @@ export class Launcher extends LitElement {
             </div>
             ${this.hasChatEnabled
               ? html`
-                  <div class="type-hey__ask-prompt">
-                    <div class="type-hey__ask-prompt-inner">
-                      <div class="type-hey__ask-start">
-                        <h2>Ask me about</h2>
-                        <div class="scroll-container">
-                          <ul>
-                            ${[...Array(4)].map(() => {
-                              // hack fix to prevent animation 'jump'
-                              return html`
-                                <li>booking a tour</li>
-                                <li>our pet policy</li>
-                                <li>our amenities</li>
-                                <li>our availability</li>
-                              `;
-                            })}
-                          </ul>
-                        </div>
-                      </div>
-                      <div>${ChevronIconWhite}</div>
+                  <div
+                    id="type-hey__ask-prompt"
+                    class="type-hey__pill"
+                    @click=${this.onChatTapped}
+                    style=${styleMap({
+                      background: hexToAlmostWhite(this.brandColor, 0.2),
+                    })}
+                  >
+                    <div class="type-hey__pill-left">
+                      <div class="type-hey__icon">${ChatWhiteOutlineIcon}</div>
+                      <div><span class="title-bold">Chat</span> with us</div>
                     </div>
+                    <div class="type-gradient__icon">${ChevronIconWhite}</div>
                   </div>
                 `
               : ""}
@@ -477,11 +439,10 @@ export class Launcher extends LitElement {
       </button>
       ${this.hasChatEnabled
         ? html`
-              <div id="overlay-inner-pill" class="inner-pill-wrapper" style=${styleMap(
-                {
-                  background: this.brandColor ?? defaultBrandColor,
-                }
-              )} @click=${this.onChatTapped}>
+              <div id="overlay-inner-pill" class="inner-pill-wrapper" 
+              style=${styleMap({
+                background: this.brandColor,
+              })} @click=${this.onChatTapped}>
                 <div class="vertical-pill-left">
                   <div class="vertical-pill-icon">${ChatWhiteOutlineIcon}</div>
                   <div class="vertical-pill-title">
@@ -546,82 +507,72 @@ export class Launcher extends LitElement {
     installCallUsWindow();
 
     return html`
-      <div"
-        class=${
-          this.isMobile || this.isMinimized
-            ? "launcher__mobile-launcher-wrapper"
-            : "launcher__mini-launcher-wrapper"
-        }
+      <div
+        class=${this.isMobile || this.isMinimized
+          ? "launcher__mobile-launcher-wrapper"
+          : "launcher__mini-launcher-wrapper"}
         style=${styleMap(this.launcherStyles)}
       >
-        ${
-          this.isEmailWindowOpen
-            ? html`<div class="launcher__window-wrapper">
-                <email-us-window
-                  chatId="${this.chatId}"
-                  .leadSources="${this.leadSources}"
-                  currentLeadSource="${this.currentLeadSource}"
-                  orgSlug="${this.orgSlug}"
-                  buildingSlug="${this.buildingSlug}"
-                  featureFlagShowDropdown="${this.featureFlagShowDropdown}"
-                  ${ref(this.emailUsWindowRef)}
-                  .buildingId=${this.buildingId}
-                >
-                </email-us-window>
-              </div>`
-            : ""
-        }
-        ${
-          this.isTextUsWindowOpen
-            ? html`<div class="launcher__window-wrapper">
-                <text-us-window
-                  orgSlug="${this.orgSlug}"
-                  buildingSlug="${this.buildingSlug}"
-                  ${ref(this.textUsWindowRef)}
+        ${this.isEmailWindowOpen
+          ? html`<div class="launcher__window-wrapper">
+              <email-us-window
+                chatId="${this.chatId}"
+                .leadSources="${this.leadSources}"
+                currentLeadSource="${this.currentLeadSource}"
+                orgSlug="${this.orgSlug}"
+                buildingSlug="${this.buildingSlug}"
+                featureFlagShowDropdown="${this.featureFlagShowDropdown}"
+                ${ref(this.emailUsWindowRef)}
+                .buildingId=${this.buildingId}
+              >
+              </email-us-window>
+            </div>`
+          : ""}
+        ${this.isTextUsWindowOpen
+          ? html`<div class="launcher__window-wrapper">
+              <text-us-window
+                orgSlug="${this.orgSlug}"
+                buildingSlug="${this.buildingSlug}"
+                ${ref(this.textUsWindowRef)}
+                .buildingId=${this.buildingId}
+                currentLeadSource="${this.currentLeadSource}"
+              ></text-us-window>
+            </div>`
+          : ""}
+        ${this.isSSTWindowOpen
+          ? html`<div class="launcher__window-wrapper">
+              <tour-scheduler
+                chatId="${this.chatId}"
+                orgSlug="${this.orgSlug}"
+                buildingSlug="${this.buildingSlug}"
+                sgtUrl="${this.sgtUrl}"
+                escortedToursLink="${this.escortedToursLink}"
+                virtualToursLink="${this.virtualToursLink}"
+                currentLeadSource="${this.currentLeadSource}"
+                .leadSources="${this.leadSources}"
+                .layoutOptions=${this.layoutOptions}
+                .unitOptions=${this.unitOptions}
+                .tourTypeOptions=${this.tourTypeOptions}
+                buildingId=${this.buildingId}
+                featureFlagShowDropdown="${this.featureFlagShowDropdown}"
+                ${ref(this.tourSchedulerRef)}
+              ></tour-scheduler>
+            </div>`
+          : ""}
+        ${this.isCallUsWindowOpen
+          ? html`
+              <div class="launcher__window-wrapper">
+                <call-us-window
+                  .onCloseClicked=${this.onClosePhoneWindow}
+                  phoneNumber="${this.phoneNumber}"
                   .buildingId=${this.buildingId}
+                  chatCallUsHeader="${this.chatCallUsHeader}"
+                  hasTextUsEnabled=${this.hasTextUsEnabled ? true : ""}
                   currentLeadSource="${this.currentLeadSource}"
-                ></text-us-window>
-              </div>`
-            : ""
-        }
-        ${
-          this.isSSTWindowOpen
-            ? html`<div class="launcher__window-wrapper">
-                <tour-scheduler
-                  chatId="${this.chatId}"
-                  orgSlug="${this.orgSlug}"
-                  buildingSlug="${this.buildingSlug}"
-                  sgtUrl="${this.sgtUrl}"
-                  escortedToursLink="${this.escortedToursLink}"
-                  virtualToursLink="${this.virtualToursLink}"
-                  currentLeadSource="${this.currentLeadSource}"
-                  .leadSources="${this.leadSources}"
-                  .layoutOptions=${this.layoutOptions}
-                  .unitOptions=${this.unitOptions}
-                  .tourTypeOptions=${this.tourTypeOptions}
-                  buildingId=${this.buildingId}
-                  featureFlagShowDropdown="${this.featureFlagShowDropdown}"
-                  ${ref(this.tourSchedulerRef)}
-                ></tour-scheduler>
-              </div>`
-            : ""
-        }
-        ${
-          this.isCallUsWindowOpen
-            ? html`
-                <div class="launcher__window-wrapper">
-                  <call-us-window
-                    .onCloseClicked=${this.onClosePhoneWindow}
-                    phoneNumber="${this.phoneNumber}"
-                    .buildingId=${this.buildingId}
-                    chatCallUsHeader="${this.chatCallUsHeader}"
-                    hasTextUsEnabled=${this.hasTextUsEnabled ? true : ""}
-                    currentLeadSource="${this.currentLeadSource}"
-                  ></call-us-window>
-                </div>
-              `
-            : ""
-        }
+                ></call-us-window>
+              </div>
+            `
+          : ""}
         ${!this.isCallToActionWindowOpen() ? this.renderActionPills() : ""}
       </div>
     `;

package/src/WebComponent/launcher/mobile-launcher.ts

@@ -0,0 +1,95 @@
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { typeMobileStyles } from "./typeMobileStyles";
+import {
+  EmailBlackOutlineIcon,
+  BookTourBlackOutlineIcon,
+  PhoneBlackOutlineIcon,
+  ChatBlackOutlineIcon,
+} from "../../svgIcons";
+import { styleMap } from "lit/directives/style-map.js";
+import { defaultBrandColor } from "../../themes";
+
+@customElement("mobile-launcher")
+export class MobileLauncher extends LitElement {
+  static styles = [typeMobileStyles];
+
+  @property({ attribute: true })
+  onClickMinimize: () => void = () => {
+    return;
+  };
+
+  @property({ attribute: true })
+  onClickEmailOption: (e: MouseEvent) => void = () => {
+    return;
+  };
+  @property({ attribute: true })
+  onClickPhoneOption: (e: MouseEvent) => void = () => {
+    return;
+  };
+  @property({ attribute: true })
+  onClickSSTOption: (e: MouseEvent) => void = () => {
+    return;
+  };
+  @property({ attribute: true })
+  onChatTapped: (e: MouseEvent) => void = () => {
+    return;
+  };
+
+  @property({ attribute: true })
+  hideChat = false;
+
+  @property({ attribute: true })
+  isMobile = false;
+
+  @property({ attribute: true })
+  brandColor: string = defaultBrandColor;
+
+  private renderListElement = (
+    onClick: (e: MouseEvent) => void,
+    icon: TemplateResult<2> // is an svg icon in lit
+  ) => {
+    return html` <li
+      @click=${onClick}
+      class="typeMobile-bttn"
+      style=${styleMap({
+        background: `${this.brandColor}`,
+      })}
+    >
+      <div class="typeMobile-inner">
+        <div class="typeMobile-icon">${icon}</div>
+      </div>
+    </li>`;
+  };
+
+  render(): TemplateResult {
+    return html`<div class="typeMobile-list">
+      <ul>
+        ${this.renderListElement(
+          this.onClickEmailOption,
+          EmailBlackOutlineIcon
+        )}
+        ${this.renderListElement(
+          this.onClickPhoneOption,
+          PhoneBlackOutlineIcon
+        )}
+        ${this.renderListElement(
+          this.onClickSSTOption,
+          BookTourBlackOutlineIcon
+        )}
+        ${this.hideChat
+          ? ""
+          : this.renderListElement(this.onChatTapped, ChatBlackOutlineIcon)}
+        ${!this.isMobile && !this.hideChat
+          ? html`
+              <minimize-expand-button
+                .onClick=${this.onClickMinimize}
+                .brandColor=${this.brandColor}
+                .toExpand=${true}
+              ></minimize-expand-button>
+            `
+          : ""}
+      </ul>
+    </div>`;
+  }
+}