@meetelise/chat 1.20.63 → 1.20.65

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;
   }
@@ -118,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, {
@@ -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/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/index.ts

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