@meetelise/chat 1.9.1 → 1.12.0

package/src/analytics.ts

@@ -1,3 +1,16 @@
+declare global {
+  interface Window {
+    RCTPCampaign?: { CampaignDetails: { Source: string } };
+  }
+}
+
+export interface CampaignSources {
+  entrataCampaignSource: string | null;
+  yardiCampaignSource: string | null;
+  realpageCampaignSource: string | null;
+  utmCampaignSource: string | null;
+}
+
 /**
  * A connection to the MeetElise API to send analytics events.
  */
@@ -24,24 +37,44 @@ export default class Analytics {
     };
   }
 
+  campaignSources(): CampaignSources {
+    const queryParams = new URL(window.location.href).searchParams;
+    const yardiCampaignSource =
+      window.RCTPCampaign?.CampaignDetails?.Source ?? null;
+    const entrataCampaignSource = queryParams.get("switch_cls[id]");
+    const realpageCampaignSource = queryParams.get("ilm");
+    const utmCampaignSource = queryParams.get("utm_source");
+
+    return {
+      entrataCampaignSource,
+      realpageCampaignSource,
+      utmCampaignSource,
+      yardiCampaignSource,
+    };
+  }
+
   /**
    * Send an event. Takes one argument, the event type name.
    */
   ping(eventType: string): void {
-    fetch("https://api.meetelise.com/api/pub/chat-stats", {
-      method: "POST",
-      credentials: "omit", // Necessary for successful CORS
-      keepalive: true, // Analytics should not abort after browser close
-      headers: { "content-type": "application/json; charset=UTF-8" },
-      body: JSON.stringify({
-        eventType,
-        chatId: this.chatId,
-        url: location.href,
-        org: this.org,
-        building: this.building,
-        referrer: document.referrer,
-        featureFlags: this.featureFlags,
-      }),
-    });
+    fetch(
+      "https://app.meetelise.com/platformApi/connectors/talk_js/analytics",
+      {
+        method: "POST",
+        credentials: "omit", // Necessary for successful CORS
+        keepalive: true, // Analytics should not abort after browser close
+        headers: { "content-type": "application/json; charset=UTF-8" },
+        body: JSON.stringify({
+          eventType,
+          chatId: this.chatId,
+          url: location.href,
+          org: this.org,
+          building: this.building,
+          referrer: document.referrer,
+          featureFlags: this.featureFlags,
+          campaignSources: this.campaignSources(),
+        }),
+      }
+    );
   }
 }

package/src/assetUrls.ts

@@ -0,0 +1,4 @@
+export const glowBarMp4 =
+  "https://s3.us-west-2.amazonaws.com/meetelise.com/HorizontalBar-Shadow.mp4";
+export const glowBarWebm =
+  "https://s3.us-west-2.amazonaws.com/meetelise.com/HorizontalBar-Shadow.webm";

package/src/fetchBuildingInfo.ts

@@ -14,6 +14,7 @@ export interface Building {
   welcomeMessage: string | null;
   conversationMaintenanceMode: boolean;
   orgId: number;
+  phoneNumber: string;
 }
 
 /**

package/src/getAvailabilities.ts

@@ -0,0 +1,71 @@
+import formatISO from "date-fns/formatISO";
+import startOfToday from "date-fns/startOfToday";
+import endOfDay from "date-fns/endOfDay";
+import addDays from "date-fns/addDays";
+import parseISO from "date-fns/parseISO";
+import format from "date-fns/format";
+import axios from "axios";
+
+import {
+  TourAvailabilityResponse,
+  TourAvailabilityResponseRankOrderedSupportedTourTypesEnum,
+  TourTypeAvailability,
+} from "@meetelise/rest-sdk";
+import groupBy from "lodash/groupBy";
+
+const availabilitiesCache: {
+  [buildingId: number]: TourAvailabilityResponse;
+} = {};
+
+export const getRawAvailabilities = async (
+  buildingId: number
+): Promise<TourAvailabilityResponse> => {
+  if (availabilitiesCache[buildingId]) {
+    return availabilitiesCache[buildingId];
+  }
+  const startTime = startOfToday();
+  const endTime = formatISO(endOfDay(addDays(startTime, 30)));
+  const url = `https://app.meetelise.com/api/pub/v1/buildings/${buildingId}/tour/availabilities?startTime=${formatISO(
+    startTime
+  )}&endTime=${endTime}`;
+  const result = await axios.get<TourAvailabilityResponse>(url);
+  availabilitiesCache[buildingId] = result.data;
+  // The endpoint INCORRECTLY states that these are returned as dates. They are, in fact, strings.
+  return result.data;
+};
+
+export const getAvailabilitiesForTourType = async (
+  buildingId: number,
+  tourType: TourAvailabilityResponseRankOrderedSupportedTourTypesEnum
+): Promise<TourTypeAvailability | null> => {
+  // The endpoint INCORRECTLY states that these are returned as dates. They are, in fact, strings.
+  const availabilities = await getRawAvailabilities(buildingId);
+  const availableTimes = availabilities.availability?.[tourType]
+    ? availabilities.availability?.[tourType].availableTourStartTimes?.map(
+        (startTime) => parseISO(startTime as unknown as string)
+      )
+    : [];
+  return availabilities.availability
+    ? {
+        ...availabilities.availability[tourType],
+        availableTourStartTimes: availableTimes,
+      }
+    : null;
+};
+
+export const getAvailabilitiesGroupedByDay = async (
+  buildingId: number,
+  tourType: TourAvailabilityResponseRankOrderedSupportedTourTypesEnum
+): Promise<{ [day: string]: Date[] }> => {
+  const availabilitiesForTourType = await getAvailabilitiesForTourType(
+    buildingId,
+    tourType
+  );
+  if (!availabilitiesForTourType) {
+    return {};
+  }
+  return groupBy(
+    availabilitiesForTourType.availableTourStartTimes ?? [],
+    (startTime) => format(startTime, "yyyy-MM-dd")
+  );
+};

package/src/themes.ts

@@ -1,6 +1,8 @@
 const white = "#FFFFFF";
 const darkGray = "#202020";
 const lightGray = "#83818E";
+const lightBlue = "#1990FF";
+const offBlack = "#1E1E1E";
 
 export const enum ThemeId {
   Light = "Light",
@@ -36,8 +38,8 @@ export interface Theme {
 export const defaultThemeId = ThemeId.Light;
 
 export const lightMessage = {
-  user: { textColor: white, backgroundColor: lightGray },
-  agent: { textColor: darkGray, backgroundColor: white },
+  user: { textColor: white, backgroundColor: lightBlue },
+  agent: { textColor: white, backgroundColor: offBlack },
 };
 export const darkMessage = {
   user: { textColor: white, backgroundColor: lightGray },
@@ -50,7 +52,7 @@ const themesById = {
       textColor: darkGray,
     },
     chatPaneBackgroundColor: "rgba(255, 255, 255, 0.9)",
-    message: darkMessage,
+    message: lightMessage,
   },
   [ThemeId.Dark]: {
     chatHeader: {

package/tsconfig.json

@@ -17,7 +17,7 @@
     // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
     "sourceMap": true /* Generates corresponding '.map' file. */,
     // "outFile": "./",                             /* Concatenate and emit output to single file. */
-    "outDir": "./public/dist" /* Redirect output structure to the directory. */,
+    "outDir": "./dist" /* Redirect output structure to the directory. */,
     // "rootDir": "./",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     // "composite": true,                           /* Enable project compilation */
     // "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
@@ -65,7 +65,8 @@
     // "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
 
     /* Experimental Options */
-    // "experimentalDecorators": true,              /* Enables experimental support for ES7 decorators. */
+    "experimentalDecorators": true /* Required for Lit: https://lit.dev/docs/components/decorators/#decorators-typescript */,
+    "useDefineForClassFields": false /* Required for Lit: https://lit.dev/docs/components/decorators/#decorators-typescript */,
     // "emitDecoratorMetadata": true,               /* Enables experimental support for emitting type metadata for decorators. */
 
     /* Advanced Options */
@@ -73,5 +74,10 @@
     "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
     "plugins": [{ "name": "typescript-plugin-css-modules" }]
   },
-  "include": ["./src/MEChat.tsx", "declarations.d.ts", "index.ts"]
+  "include": [
+    "./src/MEChat.ts",
+    "declarations.d.ts",
+    "index.ts",
+    "./src/WebComponent/"
+  ]
 }

package/web-test-runner.config.js

@@ -6,11 +6,5 @@ export default {
   nodeResolve: { browser: true },
   coverageConfig: {
     exclude: ["talk.js", "node_modules/**"],
-    threshold: {
-      statements: 80,
-      branches: 80,
-      lines: 80,
-      // functions: 80,
-    },
   },
 };

package/webpack.config.cjs

@@ -1,17 +1,16 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
 const Dotenv = require("dotenv-webpack");
 const { EnvironmentPlugin } = require("webpack");
 
-module.exports = (env) => {
+module.exports = () => {
   return {
     devServer: {
       static: "./public/demo",
       hot: true,
       port: 8000,
     },
-    entry: env.isDemoApp ? "./src/DemoApp.tsx" : "./src/MEChat.tsx",
+    entry: "./src/MEChat.ts",
     module: {
       rules: [
         {
@@ -21,13 +20,7 @@ module.exports = (env) => {
         },
         {
           test: /\.(c|sa|sc)ss$/,
-          use: [
-            "style-loader",
-            // Emits TypeScript declaration files matching your CSS Modules
-            "css-modules-typescript-loader",
-            "css-loader",
-            "sass-loader",
-          ],
+          use: ["style-loader", "css-loader"],
         },
       ],
     },
@@ -35,29 +28,19 @@ module.exports = (env) => {
       extensions: [".tsx", ".ts", ".js", ".css", ".scss"],
     },
     experiments: {
-      outputModule: !env.isDemoApp,
+      outputModule: true,
     },
     output: {
       filename: "index.js",
       sourceMapFilename: "index.js.map",
-      ...(env.isDemoApp
-        ? {
-            path: path.resolve(__dirname, "./public/demo/built"),
-          }
-        : {
-            path: path.resolve(__dirname, "public/dist"),
-            library: {
-              type: "module",
-            },
-          }),
+      path: path.resolve(__dirname, "public/dist"),
+      library: {
+        type: "module",
+      },
     },
     plugins: [
-      ...(env.isDemoApp
-        ? [new HtmlWebpackPlugin({ template: "./public/demo/index.html" })]
-        : []),
       new Dotenv(),
       new EnvironmentPlugin({
-        IS_DEMO_APP: !!env.isDemoApp,
         LAUNCHDARKLY_CLIENT_ID: "6119b3a2ceeceb24f45c7e66",
       }),
     ],

package/public/dist/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./src/MEChat";

package/public/dist/src/ChatButton.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-interface ChatButtonProps {
-    text: string;
-    onClick?: React.MouseEventHandler;
-    className?: string;
-    useGlowingBorder?: boolean;
-}
-declare const ChatButton: React.FunctionComponent<ChatButtonProps>;
-export default ChatButton;

package/public/dist/src/ChatIcon.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-interface ChatIconProps {
-    className?: string;
-}
-declare const ChatIcon: React.FunctionComponent<ChatIconProps>;
-export default ChatIcon;

package/public/dist/src/InHouseLauncher.d.ts

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

package/public/dist/src/MEChat.d.ts

@@ -1,73 +0,0 @@
-import Talk from "talkjs";
-import { Theme, ThemeIdString } from "./themes";
-/**
- * The interface to MeetElise chat.
- *
- * To add meetelise chat to the screen, call its static method
- * `start()` with your building and organization slug.
- *
- * @example
- * MEChat.start({
- *   organization: 'the-jacobson-group',
- *   building: 'twin-rivers-pointe'
- * });
- */
-export default class MEChat {
-    static session: Promise<Talk.Session>;
-    /**
-     * Start an instance of MeetElise chat and add to the web page.
-     *
-     * @param opts The organization, building, and theme overrides.
-     * @returns An instance of MeetElise chat.
-     */
-    static start(opts: Options): MEChat;
-    /**
-     * Remove the instance from the screen.
-     *
-     * Chat will be unusable after this. If you just need to hide the
-     * chat button, use {@link MEChat#hide} instead.
-     */
-    remove(): void;
-    /**
-     * Clear all messages from the window and start a new conversation.
-     */
-    restartConversation(): void;
-    /**
-     * Update the theme of the running chat instance.
-     *
-     * @param theme The updated theme
-     */
-    setTheme(newTheme: Partial<Theme>): void;
-    /** Open the messages window */
-    open(): void;
-    /** Close the messages window */
-    close(): void;
-    /** Show the chat button on the screen if it was previously hidden. */
-    show(): void;
-    /** Hide the chat button from the screen (but don't remove from the DOM). */
-    hide(): void;
-    /** Show a custom launcher designed in-house instead of the default TalkJS launcher. */
-    private mountInHouseLauncher;
-    private getInHouseLauncher;
-    private buildingSlug;
-    private orgSlug;
-    private popup;
-    private launcher;
-    private building;
-    private themeId?;
-    private theme;
-    private avatarSrc?;
-    private chatId;
-    private analytics;
-    private useInHouseLauncher;
-    private useMiniWidget;
-    private isMobile;
-    private constructor();
-}
-export interface Options {
-    building: string;
-    organization: string;
-    themeId?: ThemeIdString;
-    avatarSrc?: string;
-    mini?: boolean;
-}

package/public/dist/src/analytics.d.ts

@@ -1,18 +0,0 @@
-/**
- * A connection to the MeetElise API to send analytics events.
- */
-export default class Analytics {
-    private org;
-    private building;
-    private featureFlags?;
-    chatId: string;
-    constructor(org: string, building: string, chatId: string);
-    /**
-     * Store feature flag value(s) on the Analytics object to be sent with future pings. If `featureFlags` object is already present, the argument is merged into it.
-     */
-    setFeatureFlags(featureFlags: Record<string, boolean>): void;
-    /**
-     * Send an event. Takes one argument, the event type name.
-     */
-    ping(eventType: string): void;
-}

package/public/dist/src/chatID.d.ts

@@ -1,11 +0,0 @@
-/**
- * Get or create a UUID that is the same between browser sessions.
- * If the UUID is past its expiration time, create a new one.
- *
- * @returns the chat ID.
- */
-export declare function getChatID(org: string, building: string): string;
-/**
- * Create a new chat ID, discard any old one, and record the time it was issued.
- */
-export declare function createChatID(org: string, building: string): string;

package/public/dist/src/createConversation.d.ts

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

package/public/dist/src/fetchBuildingInfo.d.ts

@@ -1,25 +0,0 @@
-/**
- * The response from the API.
- */
-export interface Building {
-    id: number;
-    themeId: string;
-    avatarSrc: string | null;
-    avatarType: "image" | "initials" | null;
-    chatSubtitle: string | null;
-    chatTitle: string | null;
-    name: string;
-    userFirstName: string;
-    userId: number;
-    welcomeMessage: string | null;
-    conversationMaintenanceMode: boolean;
-    orgId: number;
-}
-/**
- * Load the publicly-available info for a building.
- *
- * @param orgSlug - The org slug, e.g. "big-prop-co"
- * @param buildingSlug - The buidling slug, e.g. "gravity-falls"
- * @returns The building's ID, name, theme, and agent.
- */
-export default function fetchBuildingInfo(orgSlug: string, buildingSlug: string): Promise<Building>;

package/public/dist/src/themes.d.ts

@@ -1,52 +0,0 @@
-export declare const enum ThemeId {
-    Light = "Light",
-    Dark = "Dark",
-    Purple = "Purple",
-    Blue = "Blue",
-    Teal = "Teal",
-    Green = "Green",
-    Yellow = "Yellow",
-    Orange = "Orange",
-    Pink = "Pink"
-}
-export declare type ThemeIdString = `${ThemeId}`;
-export interface Theme {
-    chatHeader: {
-        backgroundColor: string;
-        textColor: string;
-    };
-    chatPaneBackgroundColor: string;
-    message: {
-        user: {
-            textColor: string;
-            backgroundColor: string;
-        };
-        agent: {
-            textColor: string;
-            backgroundColor: string;
-        };
-    };
-}
-export declare const defaultThemeId = ThemeId.Light;
-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;
-    };
-};
-/** If `themeId` is a valid `ThemeId`, returns the corresponding theme. Otherwise returns the default theme. */
-export declare const getTheme: (themeId?: string | undefined) => Theme;

package/public/dist/src/utils.d.ts

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

package/src/ChatButton.module.scss

@@ -1,52 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
-
-$borderRadius: 40px;
-$glowBarGif: url("https://s3.us-west-2.amazonaws.com/meetelise.com/HorizontalBar-Shadow.gif");
-
-.chatButton {
-  //   CSS reset
-  all: unset;
-  /* `all:revert` does stuff to SVG properties that is maybe explained here (https://stackoverflow.com/a/46760690).
-  In our case it prevents the chat icon from being white. */
-  *:not(svg, svg *) {
-    all: revert;
-  }
-
-  font-family: Poppins;
-  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;
-  user-select: none;
-  position: relative;
-}
-
-// TODO: the CSS reset undoes these styles. Figure out a better solution than !important on everything
-// Possibly a specificity issue: things were working before commit 03f8503 split ChatButton out from InHouseLauncher
-.chatButtonGlowingBorder {
-  position: absolute !important;
-  top: 50% !important;
-  left: 50% !important;
-  transform: translate(-50%, -50%) !important;
-  z-index: -1 !important;
-  background-image: $glowBarGif !important;
-  border-radius: $borderRadius !important;
-  height: 125% !important;
-  width: 108% !important;
-}
-
-.chatButtonWord {
-  margin-left: 7px !important;
-}
-
-.headerText {
-  font-weight: 600 !important;
-  font-size: 20px !important;
-}

package/src/ChatButton.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import ChatIcon from "./ChatIcon";
-import styles from "./ChatButton.module.scss";
-import classnames from "classnames";
-
-interface ChatButtonProps {
-  text: string;
-  onClick?: React.MouseEventHandler;
-  className?: string;
-  useGlowingBorder?: boolean;
-}
-
-const ChatButton: React.FunctionComponent<ChatButtonProps> = ({
-  text,
-  onClick,
-  className,
-  useGlowingBorder = false,
-}: ChatButtonProps) => (
-  <div className={classnames(styles.chatButton, className)} onClick={onClick}>
-    {useGlowingBorder && <div className={styles.chatButtonGlowingBorder}></div>}
-    <ChatIcon />
-    <span className={styles.chatButtonWord}>{text}</span>
-  </div>
-);
-
-export default ChatButton;

package/src/ChatIcon.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-
-interface ChatIconProps {
-  className?: string;
-}
-
-const ChatIcon: React.FunctionComponent<ChatIconProps> = ({
-  className,
-}: ChatIconProps) => (
-  <svg
-    className={className}
-    style={{ height: "14px" }}
-    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>
-);
-
-export default ChatIcon;