@meetelise/chat 1.20.62 → 1.20.64

package/public/dist/index.js.LICENSE.txt

@@ -22,12 +22,6 @@ object-assign
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
 /**
  * @license
  * Copyright 2020 Google LLC

package/src/MEChat.ts

@@ -1,6 +1,7 @@
 import axios from "axios";
 import { StyleInfo } from "lit/directives/style-map";
 import { ThemeIdString } from "./themes";
+import { tintColor } from "./utils";
 import "./WebComponent/me-chat";
 import { MEChat as MEChatLitElement } from "./WebComponent/me-chat";
 
@@ -22,6 +23,7 @@ export default class MEChat {
   static mutationObserver: MutationObserver | null = null;
   static previousUrl = "";
   static hasBuildingSlug: boolean | null = null;
+  static brandColor = "";
 
   static start(opts: Options, isInitialStart = true): void {
     // If clients are Yardi and have a resident portal with rentcafe,
@@ -58,6 +60,12 @@ export default class MEChat {
     if (opts.launcherStyles) {
       meChat.launcherStyles = opts.launcherStyles;
     }
+    if (opts.brandColor) {
+      this.brandColor = opts.brandColor;
+
+      // we must tint the brand color, to ensure it is visible
+      meChat.setAttribute("brandColor", tintColor(opts.brandColor, 0.3));
+    }
     document.body.appendChild(meChat);
     MEChat.meChat = meChat;
   }
@@ -130,6 +138,7 @@ export default class MEChat {
     const opts = {
       organization: this.orgSlug,
       building: buildingSlug.data,
+      brandColor: this.brandColor,
     };
     this.start(opts, false);
   }
@@ -142,6 +151,7 @@ export interface Options {
   avatarSrc?: string;
   mini?: boolean;
   launcherStyles?: StyleInfo;
+  brandColor?: string;
 }
 
 /** You can't install a font from CSS in a shadow DOM, so we use JS to do it here in the regular DOM. */

package/src/WebComponent/Scheduler/tour-scheduler.ts

@@ -1193,26 +1193,28 @@ export class TourScheduler extends LitElement {
                 i.layout === this.layoutTypeSelect.value
             ).length > 0
               ? html`
-                  <me-select
-                    id="unitType"
-                    placeholder="Select unit"
-                    .options="${this.unitOptions
-                      .filter(
-                        (i) =>
-                          !this.layoutTypeSelect ||
-                          i.layout === this.layoutTypeSelect.value
-                      )
-                      .map((i) => ({
-                        label: i.name,
-                        value: i.name,
-                      }))}"
-                    defaultOption="Studio"
-                    @change=${() => {
-                      // to revalidate the form
-                      this.requestUpdate();
-                    }}
-                    >Studio
-                  </me-select>
+                  <div class="unitLayoutChoice">
+                    <me-select
+                      id="unitType"
+                      placeholder="Select unit"
+                      .options="${this.unitOptions
+                        .filter(
+                          (i) =>
+                            !this.layoutTypeSelect ||
+                            i.layout === this.layoutTypeSelect.value
+                        )
+                        .map((i) => ({
+                          label: i.name,
+                          value: i.name,
+                        }))}"
+                      defaultOption="Studio"
+                      @change=${() => {
+                        // to revalidate the form
+                        this.requestUpdate();
+                      }}
+                      >Studio
+                    </me-select>
+                  </div>
                 `
               : ""
           }

package/src/WebComponent/index.ts

@@ -1,2 +1,2 @@
-export { Launcher } from "./Launcher";
+export { Launcher } from "./launcher/Launcher";
 import "./me-chat";

package/src/WebComponent/{Launcher.ts → launcher/Launcher.ts}

@@ -1,37 +1,43 @@
-import { html, LitElement, TemplateResult } from "lit";
+import { html, LitElement, TemplateResult, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { createRef, ref, Ref } from "lit/directives/ref.js";
-import { glowBackgroundMp4 } from "../assetUrls";
 import { launcherStyles } from "./launcherStyles";
-import { EmailUsWindow, installEmailUsWindow } from "./actions/email-us-window";
-import { installTextUsWindow, TextUsWindow } from "./actions/text-us-window";
+import { typeEmojiStyles } from "./typeEmojiStyles";
+import { typeMobileStyles } from "./typeMobileStyles";
+import { typeMiniStyles } from "./typeMiniStyles";
+import {
+  EmailUsWindow,
+  installEmailUsWindow,
+} from "../actions/email-us-window";
+import { installTextUsWindow, TextUsWindow } from "../actions/text-us-window";
 import { StyleInfo, styleMap } from "lit/directives/style-map.js";
 import { classMap } from "lit/directives/class-map.js";
-import { installCallUsWindow } from "./actions/call-us-window";
-import { getRegisteredPhoneNumbers } from "../getRegisteredPhoneNumbers";
-import { TourScheduler } from "./Scheduler/tour-scheduler";
-import { LabeledOption, UnitV2 } from "../fetchBuildingInfo";
-import { abTestTypes } from "../fetchBuildingABTestType";
+import { installCallUsWindow } from "../actions/call-us-window";
+import { getRegisteredPhoneNumbers } from "../../getRegisteredPhoneNumbers";
+import { TourScheduler } from "../Scheduler/tour-scheduler";
+import { LabeledOption, UnitV2 } from "../../fetchBuildingInfo";
+import { abTestTypes } from "../../fetchBuildingABTestType";
 import {
-  FilledChatIcon,
-  FilledEmailIcon,
-  FilledPhoneIcon,
-  FilledTourIcon,
-  ChevronIconWhite,
+  EmailBlackOutlineIcon,
+  ChatWhiteOutlineIcon,
+  BookTourBlackOutlineIcon,
+  PhoneBlackOutlineIcon,
   HeyThereEmoji,
-  EmailBlackStrokeIcon,
-  PhoneBlackStrokeIcon,
-  ChatWhiteStrokeIcon,
-  EmailWhiteStrokeIcon,
-  TabletWhiteStrokeIcon,
-  ChatBlueBttnIcon,
-  PhoneWhiteStrokeIcon,
   ChevronIconBlack,
-} from "../svgIcons";
+  ChevronIconWhite,
+  XWhiteOutlineIcon,
+  ChatBlackOutlineIcon,
+} from "../../svgIcons";
+import { defaultBrandColor } from "../../themes";
 
 @customElement("meetelise-launcher")
 export class Launcher extends LitElement {
-  static styles = launcherStyles;
+  static styles = css`
+    ${launcherStyles}
+    ${typeEmojiStyles}
+    ${typeMobileStyles}
+    ${typeMiniStyles}
+  `;
 
   @property({ type: Boolean })
   isMobile = false;
@@ -88,7 +94,7 @@ export class Launcher extends LitElement {
   @property({ type: Boolean })
   hasSSTEnabled = false;
   @property({ type: Boolean })
-  hasTextUsEnabled = true;
+  hasTextUsEnabled = false;
   @property({ attribute: false })
   layoutOptions: string[] = [];
   @property({ attribute: false })
@@ -99,9 +105,13 @@ export class Launcher extends LitElement {
   onChatTapped: () => void = () => {
     return;
   };
+
   @property({ attribute: false })
   launcherStyles: StyleInfo = {};
 
+  @property({ attribute: true })
+  brandColor: string | null = null;
+
   @state()
   isEmailWindowOpen = false;
   @state()
@@ -306,189 +316,158 @@ export class Launcher extends LitElement {
       </div>
     `;
   };
-  renderPillVertical = (
-    content: TemplateResult,
-    onClick: (e: MouseEvent) => void
-  ): TemplateResult => {
-    return html`
-      <div @click=${onClick} class="inner-pill-wrapper">${content}</div>
-    `;
-  };
 
   renderActionPills = (): TemplateResult => {
     if (this.isMobile || this.isMinimized) {
       return html`<div class="typeMobile-list">
         ${this.isMobile
           ? ""
-          : html` <button @click=${this.onClickMinimize} class="minimize-bttn">
+          : html` <button
+              id="minimize-mobile"
+              @click=${this.onClickMinimize}
+              class="minimize-bttn"
+            >
               <div class="chevron-up">${ChevronIconBlack}</div>
             </button>`}
         <ul>
-          <li @click=${this.onChatTapped} class="typeMobile-bttn">
+          <li @click=${this.onClickEmailOption} class="typeMobile-bttn">
             <div class="typeMobile-inner">
-              <div class="typeMobile-icon">${ChatWhiteStrokeIcon}</div>
+              <div class="typeMobile-icon">${EmailBlackOutlineIcon}</div>
             </div>
           </li>
-          <li @click=${this.onClickEmailOption} class="typeMobile-bttn">
+          <li @click=${this.onClickPhoneOption} class="typeMobile-bttn">
             <div class="typeMobile-inner">
-              <div class="typeMobile-icon">${EmailWhiteStrokeIcon}</div>
+              <div class="typeMobile-icon">${PhoneBlackOutlineIcon}</div>
             </div>
           </li>
-          <li @click=${this.onClickPhoneOption} class="typeMobile-bttn">
+          <li @click=${this.onClickSSTOption} class="typeMobile-bttn">
             <div class="typeMobile-inner">
-              <div class="typeMobile-icon">${PhoneWhiteStrokeIcon}</div>
+              <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>`;
     }
 
-    if (this.buildingABTestType === abTestTypes.ConceptBlueBlack) {
-      return html` <div class="type-gradient__list">
-        <button @click=${this.onClickMinimize} class="minimize-bttn">
-          <div class="chevron-down">${ChevronIconBlack}</div>
-        </button>
-        ${this.hasChatEnabled
-          ? html`
-              <div
-                class="type-gradient__top-container"
-                @click=${this.onChatTapped}
-              >
-                <video class="glowBackground" autoplay loop muted playsinline>
-                  <source src="${glowBackgroundMp4}" type="video/mp4" />
-                </video>
-                <div class="type-gradient__scroll-info">
-                  ${ChatWhiteStrokeIcon}
-                  <div class="type-gradient__chat-container">
-                    <div class="type-gradient__chat-header">
-                      <span class="title-bold">Chat</span> with us
-                    </div>
-                    ${ChevronIconWhite}
-                  </div>
-                  <ul class="type-gradient__description">
-                    <li>our apartments</li>
-                    <li>unit availability</li>
-                    <li>tour bookings</li>
-                    <li>our amenities</li>
-                    <li>neighborhood</li>
-                  </ul>
-                </div>
-              </div>
-            `
-          : ""}
-        ${this.hasEmailEnabled
-          ? html` <div class="type-gradient__email type-gradient__bottom-tab" @click=${this.onClickEmailOption}>
-          <div class="type-gradient__icon">${EmailWhiteStrokeIcon}</div>
-          <div class="type-gradient__inner-txt">
-            <span class="title-bold">Email</span> an agent
+    if (this.buildingABTestType === abTestTypes.ConceptEmoji) {
+      return html`
+        <div
+          class="type-hey__list"
+          style=${styleMap({
+            background: this.brandColor ?? defaultBrandColor,
+          })}
+        >
+          <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-gradient__icon">${ChevronIconWhite}</div>
           </div>
-          </div>`
-          : ""}
-        ${this.phoneNumber && this.hasCallUsEnabled
-          ? html`
-              <div class="type-gradient__contact type-gradient__bottom-tab" @click=${
-                this.onClickPhoneOption
-              }> 
-              <div class="type-gradient__icon">${TabletWhiteStrokeIcon}</div>
-              <div class="type-gradient__inner-txt">
-                <span class="title-bold">Call</span>
-                ${
-                  this.hasTextUsEnabled
-                    ? html`or <span class="title-bold">text</span> us`
-                    : "us"
-                }
-                </div>
-              <div class="type-gradient__icon">${ChevronIconWhite}</div>
-              </div>
-              </div>
-              `
-          : ""}
-      </div>`;
-    }
 
-    if (this.buildingABTestType === abTestTypes.ConceptBlueWhite) {
-      return html`
-      
-      <div class="type-hey__list">
-      <button @click=${this.onClickMinimize} class="minimize-bttn">
-        <div class="chevron-down">${ChevronIconBlack}</div>
-      </button>
-        <div class="type-hey__top-section">
-          <div class="type-hey__ai-topic">
-            <p>AI Assistant</p>
-            <div class="type-hey__ai-topic-notch"></div>
-          </div>
-          <div class="type-hey__greeting">
-            <h1>Hey there!</h1>
-            <div>${HeyThereEmoji}</div>
-          </div>
-          ${
-            this.hasChatEnabled
+          <div class="type-hey__top-section" @click=${this.onChatTapped}>
+            <div class="type-hey__ai-topic">
+              <p>AI Assistant</p>
+              <div class="type-hey__ai-topic-notch"></div>
+            </div>
+            <div class="type-hey__greeting">
+              <h1>Hey there!</h1>
+              <div>${HeyThereEmoji}</div>
+            </div>
+            ${this.hasChatEnabled
               ? html`
-                <div class="type-hey__ask-prompt" @click=${this.onChatTapped}>
-                <div class="type-hey__ask-prompt-inner">
-                  <div class="type-hey__ask-start">
-                    <h2>Ask me about</h2>
-                    <div class="scroll-container">
-                        <ul>
-                          <li>booking a tour</li>
-                          <li>our pet policy</li>
-                          <li>our amenities</li>
-                          <li>our availability</li>
-                        </ul>
+                  <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>
                   </div>
-                    <div>${ChevronIconWhite}</div>
-                  </div>
-                  </div>
-                </div>
-              `
-              : ""
-          }
-        </div>
+                `
+              : ""}
+          </div>
 
-        <div class="type-hey__bottom-section">
-          ${
-            this.hasEmailEnabled
-              ? html` <div class="type-hey__email" @click=${this.onClickEmailOption}>
-          <div class="type-hey__icon">${EmailBlackStrokeIcon}</div>
-          <div>
-            <span class="title-bold">Email</span> an agent
+          <div class="type-hey__bottom-section">
+            <div class="type-hey__botton-section-pills">
+              ${this.hasEmailEnabled
+                ? html` <div
+                    class="type-hey__pill"
+                    @click=${this.onClickEmailOption}
+                  >
+                    <div class="type-hey__pill-left">
+                      <div class="type-hey__icon">${EmailBlackOutlineIcon}</div>
+                      <div><span class="title-bold">Email</span> an agent</div>
+                    </div>
+                    <div class="type-gradient__icon">${ChevronIconBlack}</div>
+                    </div>
+                  </div>`
+                : ""}
+              ${this.phoneNumber && this.hasCallUsEnabled
+                ? html`
+                    <div class="type-hey__pill" @click=${
+                      this.onClickPhoneOption
+                    }>
+                    <div class="type-hey__pill-left">
+                      <div class="type-hey__icon">${PhoneBlackOutlineIcon}</div>
+                        <div>
+                          <span class="title-bold">Call</span>
+                            ${
+                              this.hasTextUsEnabled
+                                ? html`or
+                                    <span class="title-bold">text</span> us`
+                                : "us"
+                            }
+                        </div>
+                      </div>
+                      <div class="type-gradient__icon">${ChevronIconBlack}</div>
+                    </div>
+                  </div>`
+                : ""}
+              ${this.hasSSTEnabled
+                ? html` 
+                    <div class="type-hey__pill" @click=${this.onClickSSTOption}>
+                      <div class="type-hey__pill-left">
+                        <div class="type-hey__icon">${BookTourBlackOutlineIcon}</div>
+                          <div>
+                            <span class="title-bold">Book</span> a tour
+                          </div>
+                      </div>
+                      <div class="type-gradient__icon">${ChevronIconBlack}</div>
+                      </div>
+                    </div>`
+                : ""}
             </div>
-            <div class="type-gradient__icon">${ChevronIconWhite}</div>
-          </div>
-          </div>`
-              : ""
-          }
-          ${
-            this.phoneNumber && this.hasCallUsEnabled
-              ? html`
-              <div class="type-hey__contact" @click=${this.onClickPhoneOption}> 
-              <div class="type-hey__icon">${PhoneBlackStrokeIcon}</div>
-                <div>
-                <span class="title-bold">Call</span>
-                ${
-                  this.hasTextUsEnabled
-                    ? html`or <span class="title-bold">text</span> us`
-                    : "us"
-                }
-                </div>
-                <div class="type-gradient__icon">${ChevronIconWhite}</div>
-              </div>
+
+            <div class="type-hey__bottom-info">
+              <div class="type-hey__bottom-info-inner">
+                Online <span class="title-bold">24 hours</span> a day,
+                <span class="title-bold">7</span> days a week
               </div>
-              `
-              : ""
-          }
-          <div class="type-hey__bottom-info">
-            Online <span class="heavy-blue">24 hours</span> a day, <span class="heavy-blue">7</span> days a week</div>
+            </div>
           </div>
         </div>
-        <div class="type-hey__chat-container" @click=${
-          this.onChatTapped
-        }>${ChatBlueBttnIcon}</div>
-      </div>
       `;
     }
 
@@ -496,52 +475,67 @@ export class Launcher extends LitElement {
       <button @click=${this.onClickMinimize} class="minimize-bttn">
         <div class="chevron-down">${ChevronIconBlack}</div>
       </button>
-      ${this.hasEmailEnabled
-        ? this.renderPillVertical(
-            html`
-              <div class="vertical-pill-icon">${FilledEmailIcon}</div>
-              <div class="vertical-pill-title">
-                <span class="vertical-pill-bold">Email</span> an agent
-              </div>
-            `,
-            this.onClickEmailOption
-          )
-        : ""}
       ${this.hasChatEnabled
-        ? this.renderPillVertical(
-            html`
-              <div class="vertical-pill-icon">${FilledChatIcon}</div>
-              <div class="vertical-pill-title">
-                <span class="vertical-pill-bold">Chat</span> with us
+        ? html`
+              <div id="overlay-inner-pill" class="inner-pill-wrapper" style=${styleMap(
+                {
+                  background: this.brandColor ?? defaultBrandColor,
+                }
+              )} @click=${this.onChatTapped}>
+                <div class="vertical-pill-left">
+                  <div class="vertical-pill-icon">${ChatWhiteOutlineIcon}</div>
+                  <div class="vertical-pill-title">
+                    <span class="vertical-pill-bold">Chat</span> with us
+                  </div>
+                </div>
+                <div class="chevron-right">${ChevronIconWhite}</div>
               </div>
-            `,
-            this.onChatTapped
-          )
+            </div>
+          `
         : ""}
-      ${this.hasSSTEnabled
-        ? this.renderPillVertical(
-            html`
-              <div class="vertical-pill-icon">${FilledTourIcon}</div>
-              <div class="vertical-pill-title">
-                <span class="vertical-pill-bold">Book</span> a tour
+      ${this.hasEmailEnabled
+        ? html`
+            <div @click=${this.onClickEmailOption} class="inner-pill-wrapper">
+              <div class="vertical-pill-left">
+                <div class="vertical-pill-icon">${EmailBlackOutlineIcon}</div>
+                <div class="vertical-pill-title">
+                  <span class="vertical-pill-bold">Email</span> an agent
+                </div>
               </div>
-            `,
-            this.onClickSSTOption
-          )
+              <div class="chevron-right">${ChevronIconBlack}</div>
+            </div>
+          `
         : ""}
       ${this.phoneNumber && this.hasCallUsEnabled
-        ? this.renderPillVertical(
-            html`
-              <div class="vertical-pill-icon">${FilledPhoneIcon}</div>
-              <div class="vertical-pill-title">
-                <span class="vertical-pill-bold">Call</span>
-                ${this.hasTextUsEnabled
-                  ? html`or <span class="vertical-pill-bold">text</span> us`
-                  : "us"}
+        ? html`
+            <div @click=${this.onClickPhoneOption} class="inner-pill-wrapper">
+              <div class="vertical-pill-left">
+                <div class="vertical-pill-icon">${PhoneBlackOutlineIcon}</div>
+                <div class="vertical-pill-title">
+                  <span class="vertical-pill-bold">Call</span>
+                  ${this.hasTextUsEnabled
+                    ? html`or <span class="vertical-pill-bold">text</span> us`
+                    : "us"}
+                </div>
+              </div>
+              <div class="chevron-right">${ChevronIconBlack}</div>
+            </div>
+          `
+        : ""}
+      ${this.hasSSTEnabled
+        ? html`
+            <div @click=${this.onClickSSTOption} class="inner-pill-wrapper">
+              <div class="vertical-pill-left">
+                <div class="vertical-pill-icon">
+                  ${BookTourBlackOutlineIcon}
+                </div>
+                <div class="vertical-pill-title">
+                  <span class="vertical-pill-bold">Book</span> a tour
+                </div>
               </div>
-            `,
-            this.onClickPhoneOption
-          )
+              <div class="chevron-right">${ChevronIconBlack}</div>
+            </div>
+          `
         : ""}
     </div>`;
   };