@meetelise/chat 1.4.3 → 1.5.0

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

@@ -4,6 +4,12 @@ object-assign
 @license MIT
 */
 
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
 /** @license React v0.20.2
  * scheduler.production.min.js
  *

package/public/ts-loader-build/InHouseLauncher.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface InHouseLauncherProps {
+    onChatTapped: () => void;
+    mobile: boolean;
+    firstMount: boolean;
+    backgroundColor: string;
+    textColor: string;
+}
+declare const InHouseLauncher: React.FunctionComponent<InHouseLauncherProps>;
+export default InHouseLauncher;

package/public/ts-loader-build/MEChat.d.ts

@@ -46,8 +46,9 @@ export default class MEChat {
     show(): void;
     /** Hide the chat button from the screen (but don't remove from the DOM). */
     hide(): void;
-    /** Show a speech bubble next to the chat button (launcher). Also adds some animations to the button. */
-    private addChatBubble;
+    /** Show a custom launcher designed in-house instead of the default TalkJS launcher. */
+    private mountInHouseLauncher;
+    private getInHouseLauncher;
     private buildingSlug;
     private orgSlug;
     private popup;
@@ -57,6 +58,8 @@ export default class MEChat {
     private chatId;
     private analytics;
     private launchDarklyClient;
+    private useInHouseLauncher;
+    private isMobile;
     private constructor();
 }
 export interface Options {

package/public/ts-loader-build/createConversation.d.ts

@@ -1,4 +1,4 @@
 import Talk from "talkjs";
 import { Building } from "./fetchBuildingInfo";
 import { Theme } from "./resolveTheme";
-export default function createConversation(session: Talk.Session, building: Building, theme: Theme, chatID: string): Talk.ConversationBuilder;
+export default function createConversation(session: Talk.Session, building: Building, theme: Theme, chatID: string, isMobile: boolean): Talk.ConversationBuilder;

package/public/ts-loader-build/fetchBuildingInfo.d.ts

@@ -3,20 +3,13 @@
  */
 export interface Building {
     id: number;
+    themeId: string;
     avatarInitials: string | null;
     avatarSrc: string | null;
     avatarType: "image" | "initials" | null;
-    backgroundColor: string | null;
-    bannerColor: string | null;
-    bannerTextColor: string | null;
     chatSubtitle: string | null;
     chatTitle: string | null;
-    launchButtonColor: string | null;
-    launchButtonIconColor: string | null;
-    launchButtonSize: string | null;
     logoSrc: string | null;
-    messageColor: string | null;
-    messageTextColor: string | null;
     name: string;
     primaryColor: string | null;
     userFirstName: string;
@@ -25,6 +18,14 @@ export interface Building {
     welcomeMessage: string | null;
     conversationMaintenanceMode: boolean;
     orgId: number;
+    backgroundColor: string | null;
+    bannerColor: string | null;
+    bannerTextColor: string | null;
+    launchButtonColor: string | null;
+    launchButtonIconColor: string | null;
+    launchButtonSize: string | null;
+    messageColor: string | null;
+    messageTextColor: string | null;
 }
 /**
  * Load the publicly-available info for a building.

package/public/ts-loader-build/themes.d.ts

@@ -0,0 +1,179 @@
+export declare const white = "#FFFFFF";
+export declare const darkGray = "#202020";
+export declare const lightGray = "#83818E";
+export declare const defaultThemeId: "Light" | "Dark" | "Purple" | "Blue" | "Teal" | "Green" | "Yellow" | "Orange" | "Pink";
+export declare const lightMessage: {
+    user: {
+        textColor: string;
+        backgroundColor: string;
+    };
+    agent: {
+        textColor: string;
+        backgroundColor: string;
+    };
+};
+export declare const darkMessage: {
+    user: {
+        textColor: string;
+        backgroundColor: string;
+    };
+    agent: {
+        textColor: string;
+        backgroundColor: string;
+    };
+};
+export declare const themesById: {
+    Light: {
+        chatHeader: {
+            backgroundColor: string;
+            textColor: string;
+        };
+        chatPaneBackgroundColor: string;
+        message: {
+            user: {
+                textColor: string;
+                backgroundColor: string;
+            };
+            agent: {
+                textColor: string;
+                backgroundColor: string;
+            };
+        };
+    };
+    Dark: {
+        chatHeader: {
+            backgroundColor: string;
+            textColor: string;
+        };
+        chatPaneBackgroundColor: string;
+        message: {
+            user: {
+                textColor: string;
+                backgroundColor: string;
+            };
+            agent: {
+                textColor: string;
+                backgroundColor: string;
+            };
+        };
+    };
+    Purple: {
+        chatHeader: {
+            backgroundColor: string;
+            textColor: string;
+        };
+        chatPaneBackgroundColor: string;
+        message: {
+            user: {
+                textColor: string;
+                backgroundColor: string;
+            };
+            agent: {
+                textColor: string;
+                backgroundColor: string;
+            };
+        };
+    };
+    Blue: {
+        chatHeader: {
+            backgroundColor: string;
+            textColor: string;
+        };
+        chatPaneBackgroundColor: string;
+        message: {
+            user: {
+                textColor: string;
+                backgroundColor: string;
+            };
+            agent: {
+                textColor: string;
+                backgroundColor: string;
+            };
+        };
+    };
+    Teal: {
+        chatHeader: {
+            backgroundColor: string;
+            textColor: string;
+        };
+        chatPaneBackgroundColor: string;
+        message: {
+            user: {
+                textColor: string;
+                backgroundColor: string;
+            };
+            agent: {
+                textColor: string;
+                backgroundColor: string;
+            };
+        };
+    };
+    Green: {
+        chatHeader: {
+            backgroundColor: string;
+            textColor: string;
+        };
+        chatPaneBackgroundColor: string;
+        message: {
+            user: {
+                textColor: string;
+                backgroundColor: string;
+            };
+            agent: {
+                textColor: string;
+                backgroundColor: string;
+            };
+        };
+    };
+    Yellow: {
+        chatHeader: {
+            backgroundColor: string;
+            textColor: string;
+        };
+        chatPaneBackgroundColor: string;
+        message: {
+            user: {
+                textColor: string;
+                backgroundColor: string;
+            };
+            agent: {
+                textColor: string;
+                backgroundColor: string;
+            };
+        };
+    };
+    Orange: {
+        chatHeader: {
+            backgroundColor: string;
+            textColor: string;
+        };
+        chatPaneBackgroundColor: string;
+        message: {
+            user: {
+                textColor: string;
+                backgroundColor: string;
+            };
+            agent: {
+                textColor: string;
+                backgroundColor: string;
+            };
+        };
+    };
+    Pink: {
+        chatHeader: {
+            backgroundColor: string;
+            textColor: string;
+        };
+        chatPaneBackgroundColor: string;
+        message: {
+            user: {
+                textColor: string;
+                backgroundColor: string;
+            };
+            agent: {
+                textColor: string;
+                backgroundColor: string;
+            };
+        };
+    };
+};

package/public/ts-loader-build/utils.d.ts

@@ -1 +1,2 @@
 export declare function useInterval(callback: () => void, delay: number | null): void;
+export declare const isMobile: () => boolean;

package/src/DemoApp.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import { debounce } from "lodash";
 import MEChat from "./MEChat";
@@ -55,6 +55,7 @@ const DemoApp = () => {
     }
   }, []);
 
+  const [showCookieBanner, setShowCookieBanner] = useState(true);
   return (
     <>
       <h1>Example Page</h1>
@@ -80,23 +81,31 @@ const DemoApp = () => {
           name="launchButtonIconColor"
         />
       </form>
-      <div
-        id="bottomBanner"
-        style={{
-          position: "absolute",
-          bottom: 0,
-          left: 0,
-          width: "100%",
-          height: "20vh",
-          backgroundColor: "lightpink",
-          textAlign: "center",
-        }}
-      >
-        <p style={{ marginTop: "5em" }}>
-          Hi, I'm a banner that appears at the bottom of the screen! I eat chat
-          widgets for breakfast and I'll eat yours if you aren't careful!
-        </p>
-      </div>
+      {showCookieBanner && (
+        <div
+          id="bottomBanner"
+          style={{
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            width: "100%",
+            height: "20vh",
+            backgroundColor: "lightpink",
+            textAlign: "center",
+          }}
+        >
+          <p style={{ marginTop: "5em" }}>
+            Hi, I'm a banner that appears at the bottom of the screen! I eat
+            chat widgets for breakfast and I'll eat yours if you aren't careful!
+          </p>
+          <div
+            style={{ position: "absolute", top: "1rem", right: "1rem" }}
+            onClick={() => setShowCookieBanner(false)}
+          >
+            ✕
+          </div>
+        </div>
+      )}
     </>
   );
 };

package/src/InHouseLauncher.module.scss

@@ -0,0 +1,120 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
+
+$glowBarHeight: 0.7rem;
+$enterAnimationDuration: 0.5s;
+$glowBarGif: url("https://s3.us-west-2.amazonaws.com/meetelise.com/horizontalgradient.gif");
+
+.launcher {
+  position: fixed;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  color: #202020;
+  background-color: rgba(white, 0.8);
+  backdrop-filter: blur(10px);
+  font-family: Poppins;
+
+  &:hover {
+    filter: brightness(150%);
+    background: blue;
+  }
+
+  &.mobile {
+    width: 100%;
+    bottom: 0px;
+  }
+
+  &.desktop {
+    width: 17rem;
+    height: 7rem;
+    right: 0px;
+    overflow: hidden;
+    border-radius: 10px 0px 0px 10px;
+    bottom: 40px;
+    z-index: 100000; // on desktop, since the widget is small, it's ok to appear above a cookie banner
+
+    &.firstMount {
+      animation: slideIn $enterAnimationDuration;
+    }
+
+    @keyframes slideIn {
+      from {
+        transform: translateX(100%);
+      }
+      to {
+        transform: translateX(0);
+      }
+    }
+  }
+
+  .glowBar {
+    overflow: hidden;
+    background-image: $glowBarGif;
+    background-position: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: $glowBarHeight;
+    width: 100%;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: calc($glowBarHeight + 8px);
+    margin-bottom: 6px;
+
+    .header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+
+      $borderRadius: 40px;
+
+      .chatButton {
+        position: relative;
+        display: flex;
+        align-items: center;
+        background-color: #202020;
+        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+        border: 2px solid white;
+        border-radius: $borderRadius;
+        color: white;
+        font-weight: 700;
+        font-size: 20px;
+        padding: 2px 15px;
+        margin-right: 7px;
+
+        .chatButtonGlowingBorder {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          z-index: -1;
+          background-image: $glowBarGif;
+          border-radius: $borderRadius;
+          height: 125%;
+          width: 108%;
+        }
+
+        .chatIcon {
+          height: 14px;
+        }
+
+        .chatButtonWord {
+          margin-left: 7px;
+        }
+      }
+      .headerText {
+        font-weight: 600;
+        font-size: 20px;
+      }
+    }
+
+    .subtitle {
+      font-size: 12px;
+      font-weight: 600;
+    }
+  }
+}

package/src/InHouseLauncher.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import classnames from "classnames";
+import styles from "./InHouseLauncher.module.scss";
+
+interface InHouseLauncherProps {
+  onChatTapped: () => void;
+  mobile: boolean;
+  firstMount: boolean;
+  backgroundColor: string;
+  textColor: string;
+}
+const InHouseLauncher: React.FunctionComponent<InHouseLauncherProps> = ({
+  onChatTapped,
+  mobile,
+  firstMount,
+  backgroundColor,
+  textColor,
+}) => {
+  return (
+    <div
+      className={classnames(
+        styles.launcher,
+        mobile ? styles.mobile : styles.desktop,
+        { [styles.firstMount]: firstMount }
+      )}
+      style={{ backgroundColor, color: textColor }}
+      onClick={onChatTapped}
+    >
+      <div className={styles.glowBar}></div>
+      <div className={styles.content}>
+        <div className={styles.header}>
+          <div className={styles.chatButton}>
+            <div className={styles.chatButtonGlowingBorder}></div>
+            <svg
+              className={styles.chatIcon}
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M13.2 10.8H6C5.68174 10.8 5.37652 10.9264 5.15147 11.1515C4.92643 11.3765 4.8 11.6817 4.8 12C4.8 12.3183 4.92643 12.6235 5.15147 12.8485C5.37652 13.0736 5.68174 13.2 6 13.2H13.2C13.5183 13.2 13.8235 13.0736 14.0485 12.8485C14.2736 12.6235 14.4 12.3183 14.4 12C14.4 11.6817 14.2736 11.3765 14.0485 11.1515C13.8235 10.9264 13.5183 10.8 13.2 10.8ZM18 6H6C5.68174 6 5.37652 6.12643 5.15147 6.35147C4.92643 6.57652 4.8 6.88174 4.8 7.2C4.8 7.51826 4.92643 7.82348 5.15147 8.04853C5.37652 8.27357 5.68174 8.4 6 8.4H18C18.3183 8.4 18.6235 8.27357 18.8485 8.04853C19.0736 7.82348 19.2 7.51826 19.2 7.2C19.2 6.88174 19.0736 6.57652 18.8485 6.35147C18.6235 6.12643 18.3183 6 18 6ZM20.4 0H3.6C2.64522 0 1.72955 0.379285 1.05442 1.05442C0.379285 1.72955 0 2.64522 0 3.6V15.6C0 16.5548 0.379285 17.4705 1.05442 18.1456C1.72955 18.8207 2.64522 19.2 3.6 19.2H17.508L21.948 23.652C22.0601 23.7632 22.1931 23.8512 22.3393 23.9109C22.4855 23.9706 22.6421 24.0009 22.8 24C22.9574 24.0041 23.1136 23.9712 23.256 23.904C23.4751 23.814 23.6627 23.6611 23.7951 23.4646C23.9275 23.2682 23.9988 23.0369 24 22.8V3.6C24 2.64522 23.6207 1.72955 22.9456 1.05442C22.2705 0.379285 21.3548 0 20.4 0ZM21.6 19.908L18.852 17.148C18.7399 17.0368 18.6069 16.9488 18.4607 16.8891C18.3145 16.8294 18.1579 16.7991 18 16.8H3.6C3.28174 16.8 2.97652 16.6736 2.75147 16.4485C2.52643 16.2235 2.4 15.9183 2.4 15.6V3.6C2.4 3.28174 2.52643 2.97652 2.75147 2.75147C2.97652 2.52643 3.28174 2.4 3.6 2.4H20.4C20.7183 2.4 21.0235 2.52643 21.2485 2.75147C21.4736 2.97652 21.6 3.28174 21.6 3.6V19.908Z"
+                fill="white"
+              />
+            </svg>
+            <span className={styles.chatButtonWord}>Ask</span>
+          </div>
+          <span className={styles.headerText}>a question</span>
+        </div>
+        <span className={styles.subtitle}>
+          I can also help you schedule a tour.
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default InHouseLauncher;

package/src/MEChat.module.scss

@@ -1,58 +1,23 @@
-.wrapper {
-  position: fixed;
-  display: flex;
-  bottom: 10vh;
-  right: 10vh;
-  z-index: 100000;
-}
-
 :global(#__talkjs_launcher):not(.shouldBeVisible) {
   display: none;
 }
 
-:global(a#__talkjs_launcher) {
-  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.25);
-  background-position: 50% 50%;
-  background-size: 27px 27px;
-}
-
-:global(a#__talkjs_launcher).bouncingLauncherButton {
-  animation-name: bounce;
-  animation-duration: 1s;
-  animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
-}
-
-/* https://css-tricks.com/making-css-animations-feel-natural/ */
-@keyframes bounce {
-  0% {
-    transform: scale(1, 1) translateY(0);
-  }
-  10% {
-    transform: scale(1.1, 0.9) translateY(0);
-  }
-  30% {
-    transform: scale(0.9, 1.1) translateY(-100px);
-  }
-  50% {
-    transform: scale(1.05, 0.95) translateY(0);
-  }
-  57% {
-    transform: scale(1, 1) translateY(-7px);
-  }
-  64% {
-    transform: scale(1, 1) translateY(0);
-  }
-  100% {
-    transform: scale(1, 1) translateY(0);
-  }
-}
-
-.fadeOut {
-  animation: fadeOut 0.5s;
+// This docks the chat panel at the right edge of the screen.
+// The 25px is because .ChatBox is styled by TalkJS with `width: calc(100% - 25px)`.
+:global(.meetelise-chat.pane).desktop {
+  right: -25px;
 }
 
-@keyframes fadeOut {
-  to {
-    opacity: 0;
+.inHouseLauncherContainer {
+  &.desktop {
+    // TODO: fix
+    width: 100px;
+    height: 100px;
+    position: relative;
+    overflow: hidden;
+  }
+  &.mobile {
+    width: 100%;
+    height: 100px;
   }
 }

package/src/MEChat.test.ts

@@ -2,14 +2,25 @@ import { expect } from "@esm-bundle/chai";
 import { stub, restore } from "sinon/pkg/sinon-esm";
 import MEChat from "../public/dist/bundle";
 
+const TIMEOUT = 15000;
+
 const stubResponse = {
   json: stub().resolves({
     id: 42,
-    name: "Unit Test Building",
-    launchButtonColor: "rgb(180, 190, 0)",
-    userFirstName: "Ella",
     userId: 42.1,
     orgId: 42.2,
+    name: "Unit Test Building",
+    themeId: null,
+    avatarSrc: null,
+    avatarType: "",
+    userFirstName: "Ella",
+    userLastName: "",
+    logoSrc:
+      "https://eliseusercontent.meetelise.com/building/3660/test-logo.png",
+    chatTitle: "Elise",
+    chatSubtitle: "Leasing Agent ExtraordinAIre",
+    welcomeMessage:
+      "Welcome, I'm Elise! If you have any questions about Unit Test Building or would like to schedule a tour, I'm happy to help.",
     conversationMaintenanceMode: false,
   }),
 };
@@ -36,7 +47,8 @@ afterEach(() => {
   restore();
 });
 
-it("shows the chat icon", async function () {
+it.skip("shows the launcher", async function (done) {
+  this.timeout(TIMEOUT);
   // Given an API that returns this building theme
   stub(window, "fetch").resolves(stubResponse);
 
@@ -45,16 +57,12 @@ it("shows the chat icon", async function () {
     organization: "unit-test-org",
     building: "unit-test-building",
   });
-  await waitForElementWithSelectorToExist(".__talkjs_launcher");
+  await waitForElementWithSelectorToExist(".meetelise-chat.launcher > div");
 
-  // Then I should see a launcher with the right color
-  const launcher =
-    document.querySelector<HTMLAnchorElement>(".__talkjs_launcher");
-  expect(launcher).to.be.an.instanceof(HTMLAnchorElement);
-  // TODO: temporarily making the launcher always white because the new icon doesn't look good with all colors
-  // const launcherStyle = window.getComputedStyle(launcher);
-  // const launcherBG = launcherStyle.getPropertyValue("background-color");
-  // expect(launcherBG).to.equal("rgb(180, 190, 0)");
+  // Then I should see a launcher
+  const launcher = document.querySelector<HTMLDivElement>(
+    ".meetelise-chat.launcher"
+  ).firstChild as HTMLDivElement;
 
   // And the popup should be hidden
   const popup = document.querySelector<HTMLSpanElement>(".__talkjs_popup");
@@ -70,12 +78,14 @@ it("shows the chat icon", async function () {
   const popupStyle2 = window.getComputedStyle(popup);
   const popupDisplay2 = popupStyle2.getPropertyValue("display");
   expect(popupDisplay2).not.to.equal("none");
-
+  done();
   // Ideally, expect welcome message, but we can't select inside the iframe
   // Ideally, expect theme colors, but we can't select inside the iframe
 });
 
-it("works via the programmatic interface", async () => {
+it.skip("works via the programmatic interface", async function () {
+  this.timeout(TIMEOUT);
+
   // Given an API that returns this building theme
   stub(window, "fetch").resolves(stubResponse);
 
@@ -85,7 +95,7 @@ it("works via the programmatic interface", async () => {
     building: "unit-test-building",
   });
 
-  await waitForElementWithSelectorToExist(".__talkjs_launcher");
+  await waitForElementWithSelectorToExist(".meetelise-chat.launcher");
 
   // Ideally, verify behavior, but this will at least verify nothing throws
   chat.show();