@meetelise/chat 1.20.113 → 1.20.115

package/src/themes.ts

@@ -1,164 +1,54 @@
-import { hexToAlmostWhite } from "./utils";
+export const defaultBrandColor = "#636889"; // we have a brand color defined in the BE too, but this is a fallback
 
-const white = "#FFFFFF";
-const darkGray = "#202020";
-const lightGray = "#83818E";
-const lightBlue = "#1990FF";
-const offBlack = "#1E1E1E";
+export const tintColor = (
+  originalColor: string,
+  tintOpacity: number
+): string => {
+  const originalRgb = hexToRgb(originalColor);
+  const tintRgb = { r: 0, g: 0, b: 0 };
 
-export const defaultBrandColor = "#636889";
-
-export const enum ThemeId {
-  Light = "Light",
-  Dark = "Dark",
-  Purple = "Purple",
-  Blue = "Blue",
-  Teal = "Teal",
-  Green = "Green",
-  Yellow = "Yellow",
-  Orange = "Orange",
-  Pink = "Pink",
-  Glass = "Glass",
-}
-export type ThemeIdString = `${ThemeId}`;
-
-export interface Theme {
-  chatHeader: {
-    backgroundColor: string;
-    textColor: string;
+  const newRgb = {
+    r: originalRgb.r + Math.round((tintRgb.r - originalRgb.r) * tintOpacity),
+    g: originalRgb.g + Math.round((tintRgb.g - originalRgb.g) * tintOpacity),
+    b: originalRgb.b + Math.round((tintRgb.b - originalRgb.b) * tintOpacity),
   };
-  chatPaneBackgroundColor: string;
-  message: {
-    user: {
-      textColor: string;
-      backgroundColor: string;
-    };
-    agent: {
-      textColor: string;
-      backgroundColor: string;
-    };
-  };
-}
-
-export const defaultThemeId = ThemeId.Light;
 
-export const lightMessage = {
-  user: { textColor: white, backgroundColor: lightBlue },
-  agent: { textColor: white, backgroundColor: offBlack },
+  return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
 };
-export const darkMessage = {
-  user: { textColor: white, backgroundColor: lightGray },
-  agent: { textColor: white, backgroundColor: darkGray },
+
+const hexToRgb = (hex: string): { r: number; g: number; b: number } => {
+  const r = parseInt(hex.substring(1, 3), 16);
+  const g = parseInt(hex.substring(3, 5), 16);
+  const b = parseInt(hex.substring(5, 7), 16);
+  return { r, g, b };
 };
-const themesById = {
-  [ThemeId.Light]: {
-    chatHeader: {
-      backgroundColor: white,
-      textColor: darkGray,
-    },
-    chatPaneBackgroundColor: "rgba(255, 255, 255, 0.9)",
-    message: lightMessage,
-  },
-  [ThemeId.Dark]: {
-    chatHeader: {
-      backgroundColor: darkGray,
-      textColor: white,
-    },
-    chatPaneBackgroundColor: "rgba(32, 32, 32, 0.9)",
-    message: lightMessage,
-  },
-  [ThemeId.Purple]: {
-    chatHeader: {
-      backgroundColor: "#550098",
-      textColor: white,
-    },
-    chatPaneBackgroundColor: "rgba(85, 0, 152, 0.6)",
-    message: lightMessage,
-  },
-  [ThemeId.Blue]: {
-    chatHeader: {
-      backgroundColor: "#0814E5",
-      textColor: white,
-    },
-    chatPaneBackgroundColor: "rgba(4, 17, 245, 0.6)",
-    message: lightMessage,
-  },
-  [ThemeId.Teal]: {
-    chatHeader: {
-      backgroundColor: "#6EE7ED",
-      textColor: darkGray,
-    },
-    chatPaneBackgroundColor: "rgba(115, 247, 253, 0.8)",
-    message: darkMessage,
-  },
-  [ThemeId.Green]: {
-    chatHeader: {
-      backgroundColor: "#147B0E",
-      textColor: white,
-    },
-    chatPaneBackgroundColor: "rgba(13, 141, 5, 0.6)",
-    message: lightMessage,
-  },
-  [ThemeId.Yellow]: {
-    chatHeader: {
-      backgroundColor: "#F1E54F",
-      textColor: darkGray,
-    },
-    chatPaneBackgroundColor: "rgba(251, 239, 80, 0.9)",
-    message: darkMessage,
-  },
-  [ThemeId.Orange]: {
-    chatHeader: {
-      backgroundColor: "#C06C31",
-      textColor: white,
-    },
-    chatPaneBackgroundColor: "rgba(238, 126, 49, 0.7)",
-    message: lightMessage,
-  },
-  [ThemeId.Pink]: {
-    chatHeader: {
-      backgroundColor: "#A24599",
-      textColor: white,
-    },
-    chatPaneBackgroundColor: "rgba(167, 70, 157, 0.8)",
-    message: lightMessage,
-  },
-  [ThemeId.Glass]: {
-    chatHeader: {
-      backgroundColor: white,
-      textColor: darkGray,
-    },
-    chatPaneBackgroundColor: "rgba(193, 193, 193, 0.5)",
-    message: {
-      user: {
-        textColor: "#FFFFFF",
-        backgroundColor: "#000000",
-      },
-      agent: {
-        textColor: "#000000",
-        backgroundColor: "#FFFFFF",
-      },
-    },
-  },
+
+const rgbToHex = (r: number, g: number, b: number): string => {
+  return (
+    "#" +
+    [r, g, b]
+      .map((c) => {
+        const hex = c.toString(16);
+        return hex.length === 1 ? "0" + hex : hex;
+      })
+      .join("")
+  );
 };
 
-/** If `themeId` is a valid `ThemeId`, returns the corresponding theme. Otherwise returns the default theme. */
-export const getTheme = ({
-  themeId,
-  brandColor,
-}: {
-  themeId?: ThemeId | string;
-  brandColor?: string | null;
-}): Theme => {
-  const theme =
-    themesById[
-      themeId && Object.keys(themesById).includes(themeId)
-        ? (themeId as ThemeIdString)
-        : defaultThemeId
-    ];
-  if (brandColor && brandColor !== defaultBrandColor) {
-    theme.message.user.backgroundColor = brandColor;
-    theme.chatHeader.backgroundColor = hexToAlmostWhite(brandColor, 0.6);
-  }
-  return theme;
+export const hexToAlmostWhite = (hexColor: string, ratio: number): string => {
+  let r = parseInt(hexColor.substr(1, 2), 16);
+  let g = parseInt(hexColor.substr(3, 2), 16);
+  let b = parseInt(hexColor.substr(5, 2), 16);
+
+  // the ratio of white to add (1 = white, 0 = no change)
+  r = Math.round(r * (1 - ratio) + 255 * ratio);
+  g = Math.round(g * (1 - ratio) + 255 * ratio);
+  b = Math.round(b * (1 - ratio) + 255 * ratio);
+
+  return (
+    "#" +
+    r.toString(16).padStart(2, "0") +
+    g.toString(16).padStart(2, "0") +
+    b.toString(16).padStart(2, "0")
+  );
 };

package/src/utils.ts

@@ -49,56 +49,3 @@ export function useInterval(callback: () => void, delay: number | null): void {
 
 export const isMobile = (): boolean =>
   window.matchMedia("(max-width: 767px)").matches;
-
-export const tintColor = (
-  originalColor: string,
-  tintOpacity: number
-): string => {
-  const originalRgb = hexToRgb(originalColor);
-  const tintRgb = { r: 0, g: 0, b: 0 };
-
-  const newRgb = {
-    r: originalRgb.r + Math.round((tintRgb.r - originalRgb.r) * tintOpacity),
-    g: originalRgb.g + Math.round((tintRgb.g - originalRgb.g) * tintOpacity),
-    b: originalRgb.b + Math.round((tintRgb.b - originalRgb.b) * tintOpacity),
-  };
-
-  return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
-};
-
-const hexToRgb = (hex: string): { r: number; g: number; b: number } => {
-  const r = parseInt(hex.substring(1, 3), 16);
-  const g = parseInt(hex.substring(3, 5), 16);
-  const b = parseInt(hex.substring(5, 7), 16);
-  return { r, g, b };
-};
-
-const rgbToHex = (r: number, g: number, b: number): string => {
-  return (
-    "#" +
-    [r, g, b]
-      .map((c) => {
-        const hex = c.toString(16);
-        return hex.length === 1 ? "0" + hex : hex;
-      })
-      .join("")
-  );
-};
-
-export const hexToAlmostWhite = (hexColor: string, ratio: number): string => {
-  let r = parseInt(hexColor.substr(1, 2), 16);
-  let g = parseInt(hexColor.substr(3, 2), 16);
-  let b = parseInt(hexColor.substr(5, 2), 16);
-
-  // the ratio of white to add (1 = white, 0 = no change)
-  r = Math.round(r * (1 - ratio) + 255 * ratio);
-  g = Math.round(g * (1 - ratio) + 255 * ratio);
-  b = Math.round(b * (1 - ratio) + 255 * ratio);
-
-  return (
-    "#" +
-    r.toString(16).padStart(2, "0") +
-    g.toString(16).padStart(2, "0") +
-    b.toString(16).padStart(2, "0")
-  );
-};

package/src/WebComponent/actions/text-us-window.ts

@@ -1,286 +0,0 @@
-import { css, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { createRef, ref, Ref } from "lit/directives/ref.js";
-import { installActionConfirmButton } from "./action-confirm-button";
-import { installDetailsWindow } from "./details-window";
-import {
-  formatToPhoneInput,
-  isModifierKey,
-  isNumericInput,
-} from "./formatPhoneNumber";
-import { InputStyles } from "./InputStyles";
-import axios from "axios";
-import { pushGtmEvent } from "../../gtm";
-
-@customElement("text-us-window")
-export class TextUsWindow extends LitElement {
-  static styles = [
-    css`
-      .text-us-wrapper {
-        margin-top: 33px;
-        color: #202020;
-      }
-      .text-us-window__header {
-        font-family: "Helvetica Neue", Arial;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 140%;
-        font-size: 14px;
-        margin: 0;
-      }
-
-      .text-us-window__input-container {
-        margin-top: 8px;
-        margin-bottom: 8px;
-        width: -webkit-fill-available;
-        position: relative;
-      }
-      .text-us-window__submit-text {
-        position: absolute;
-        top: 14px;
-        right: 6px;
-      }
-      .text-us-window__vertical-spacer {
-        height: 20px;
-      }
-      .text-us-window__description,
-      .text-us-window__error {
-        font-family: "Helvetica Neue", Arial;
-        font-style: normal;
-        font-weight: 400;
-        font-size: 10px;
-        line-height: 14px;
-      }
-
-      .text-us-window__error {
-        color: rgb(255, 49, 3);
-      }
-    `,
-    InputStyles,
-  ];
-
-  @property({ attribute: false })
-  onCloseClicked?: (e: MouseEvent) => void;
-
-  @property({ attribute: false })
-  buildingId = 0;
-  @property({ attribute: true })
-  buildingSlug = "";
-  @property({ attribute: true })
-  orgSlug = "";
-  @property({ attribute: true })
-  inPopup = false;
-
-  phoneNumberInputRef: Ref<HTMLInputElement> = createRef();
-
-  @state()
-  phoneNumber = "";
-  @state()
-  hasSubmittedForm = false;
-  @state()
-  hasPhoneNumberError = false;
-  @state()
-  hasSubmissionError = false;
-  @state()
-  isSubmitting = false;
-
-  @property({ attribute: true })
-  currentLeadSource = "";
-
-  onChangePhoneNumber = (e: Event): void => {
-    if (!e.target || !this.phoneNumberInputRef.value) {
-      return;
-    }
-    if (isModifierKey(e as KeyboardEvent)) {
-      return;
-    }
-    const inputElement = e.target as HTMLInputElement;
-
-    this.phoneNumber = formatToPhoneInput(inputElement.value);
-
-    this.phoneNumberInputRef.value.value = this.phoneNumber;
-  };
-
-  enforceFormat = (e: KeyboardEvent): void => {
-    if (!isNumericInput(e) && !isModifierKey(e)) {
-      e.preventDefault();
-    }
-  };
-
-  validateFormFields = (): void => {
-    this.hasPhoneNumberError = false;
-    this.hasSubmissionError = false;
-    if (!this.phoneNumber || this.phoneNumber.length !== 14) {
-      this.hasPhoneNumberError = true;
-    }
-  };
-
-  onClick = async (): Promise<void> => {
-    this.validateFormFields();
-    if (this.hasPhoneNumberError) {
-      return;
-    }
-    try {
-      this.isSubmitting = true;
-      await createTextWithUs(
-        this.phoneNumber,
-        this.buildingId,
-        this.orgSlug,
-        this.buildingSlug,
-        [
-          ...new Set(
-            this.currentLeadSource
-              ? [this.currentLeadSource, "property-website"]
-              : ["property-website"]
-          ),
-        ]
-      );
-      this.hasSubmittedForm = true;
-      this.isSubmitting = false;
-    } catch (e) {
-      this.isSubmitting = false;
-      this.hasSubmissionError = true;
-    }
-  };
-
-  renderTextUs = (): TemplateResult => {
-    return html` <div class="text-us-wrapper">
-      <h1 class="text-us-window__header">Send Us a Text</h1>
-      <div class="text-us-window__input-container">
-        <input
-          ${ref(this.phoneNumberInputRef)}
-          maxlength="14"
-          type="text"
-          placeholder="Enter phone"
-          inputmode="tel"
-          class="webchat-input text-us-window__input-container"
-          .value=${this.phoneNumber}
-          @keydown=${this.enforceFormat}
-          @keyup=${this.onChangePhoneNumber}
-        />
-        <div class="text-us-window__submit-text">
-          <action-confirm-button
-            .onClick=${this.onClick}
-            .isLoading=${this.isSubmitting}
-            text="SEND"
-          ></action-confirm-button>
-        </div>
-        ${this.hasPhoneNumberError
-          ? html`
-              <div class="text-us-window__error">
-                Enter a valid phone number
-              </div>
-            `
-          : ""}
-      </div>
-
-      <div class="text-us-window__description">
-        By entering your number and selecting Send, you consent to be contacted
-        by our AI Leasing Assistant. Your consent to this process is not a
-        requirement for leasing at our property.
-        <div class="text-us-window__description">
-          Message and data rates may apply.
-        </div>
-      </div>
-    </div>`;
-  };
-
-  renderSubmitted = (): TemplateResult => {
-    return html`
-      <div class="text-us-wrapper">
-        <div class="text-us-window__vertical-spacer"></div>
-        <svg
-          width="20"
-          height="20"
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M4.455 16L0 19.5V1C0 0.734784 0.105357 0.48043 0.292893 0.292893C0.48043 0.105357 0.734784 0 1 0H19C19.2652 0 19.5196 0.105357 19.7071 0.292893C19.8946 0.48043 20 0.734784 20 1V15C20 15.2652 19.8946 15.5196 19.7071 15.7071C19.5196 15.8946 19.2652 16 19 16H4.455ZM2 15.385L3.763 14H18V2H2V15.385ZM10 7V4L14 8L10 12V9H6V7H10Z"
-            fill="#202020"
-          />
-        </svg>
-        <div class="text-us-window__description">
-          Thank you!<br />Look for a text message from our team. We can answer
-          questions and help you book a tour through text.
-        </div>
-        <div class="text-us-window__description">
-          Opt out at anytime by texting “Stop”
-        </div>
-      </div>
-    `;
-  };
-
-  render = (): TemplateResult => {
-    installDetailsWindow();
-    installActionConfirmButton();
-    if (this.inPopup) {
-      if (this.hasSubmittedForm) return this.renderSubmitted();
-      else return this.renderTextUs();
-    }
-    if (this.hasSubmittedForm) {
-      return html`
-        <details-window
-          headerText="Text us"
-          .onCloseClick=${this.onCloseClicked}
-        >
-          ${this.renderSubmitted}
-        </details-window>
-      `;
-    }
-    return html`
-      <details-window headerText="Text us" .onCloseClick=${this.onCloseClicked}>
-        ${this.renderTextUs}
-      </details-window>
-    `;
-  };
-}
-
-export const installTextUsWindow = (): void => {
-  if (!window.customElements.get("text-us-window")) {
-    window.customElements.define("text-us-window", TextUsWindow);
-  }
-};
-
-const createTextWithUs = async (
-  rawPhoneNumber: string,
-  buildingId: number,
-  orgSlug: string,
-  buildingSlug: string,
-  leadSources: string[]
-) => {
-  const formattedPhoneNumber =
-    "+1" +
-    rawPhoneNumber
-      .replace("(", "")
-      .replace(")", "")
-      .replace(" ", "")
-      .replace("-", "");
-  const queryParams = new URLSearchParams(window.location.search);
-  const requestBody = {
-    building_id: buildingId,
-    lead_sources: leadSources,
-    phone_number: formattedPhoneNumber,
-    referrer: document.referrer,
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    query_params: Object.fromEntries(queryParams.entries()),
-  };
-  pushGtmEvent("textUsSubmitted", {
-    phone: formattedPhoneNumber,
-    originatingSource:
-      leadSources.find((i) => i !== "property-website") || null,
-  });
-  await axios.post(
-    "https://app.meetelise.com/platformApi/state/create/textMe",
-    requestBody,
-    {
-      headers: {
-        ["building-slug"]: buildingSlug,
-        ["org-slug"]: orgSlug,
-        ["X-SecurityKey"]: "JRL8jV4VcSCwOSir5gWkpgNLfKghmhBG",
-      },
-    }
-  );
-};

package/src/chatID.ts

@@ -1,64 +0,0 @@
-import { v4 as uuid } from "uuid";
-
-const localStorageNamespacingPrefix = "com.meetelise";
-const chatIdKeyPrefix = `${localStorageNamespacingPrefix}.chatID`;
-const chatIdIssueTimeKeyPrefix = `${localStorageNamespacingPrefix}.chatIDIssueTime`;
-const chatIdTimeToLiveInMilliseconds = 6 * 60 * 60 * 1000; // 6 hours
-
-/**
- * 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 function getChatID(org: string, building: string): string {
-  const key = getChatIdKey(org, building);
-  const existingID = localStorage.getItem(key);
-  if (existingID && !existingChatIdIsExpired(org, building)) return existingID;
-  else return createChatID(org, building);
-}
-
-/**
- * Create a new chat ID, discard any old one, and record the time it was issued.
- */
-export function createChatID(org: string, building: string): string {
-  const chatIdKey = getChatIdKey(org, building);
-  const chatId = uuid();
-  localStorage.setItem(chatIdKey, chatId);
-
-  setIssueTime(org, building);
-
-  return chatId;
-}
-
-function setIssueTime(org: string, building: string): string {
-  const issueTimeKey = getChatIdIssueTimeKey(org, building);
-  const issueTimeString = new Date().toISOString();
-  localStorage.setItem(issueTimeKey, issueTimeString);
-  return issueTimeString;
-}
-
-function getChatIdKey(org: string, building: string): string {
-  return `${chatIdKeyPrefix}-${org}-${building}`;
-}
-
-function getChatIdIssueTimeKey(org: string, building: string): string {
-  return `${chatIdIssueTimeKeyPrefix}-${org}-${building}`;
-}
-
-/**
- * Check if the existing chat ID is expired.
- *
- * If the issue time is missing, set the issue time to the current time.
- * (This will be the case for chat IDs created before the expiration functionality was added.)
- */
-function existingChatIdIsExpired(org: string, building: string): boolean {
-  const issueTimeKey = getChatIdIssueTimeKey(org, building);
-  const existingIdIssueTimeString =
-    localStorage.getItem(issueTimeKey) || setIssueTime(org, building);
-  const existingIdExpiration = new Date(
-    new Date(existingIdIssueTimeString).getTime() +
-      chatIdTimeToLiveInMilliseconds
-  );
-  return new Date() > existingIdExpiration;
-}

package/src/createConversation.ts

@@ -1,57 +0,0 @@
-import Talk from "talkjs";
-import { Building } from "./fetchBuildingInfo";
-import { Theme } from "./themes";
-import { darkMessage } from "./themes";
-
-const defaultAvatarUrl =
-  "https://eliseusercontent.meetelise.com/webchat/looping-gradient.gif";
-
-export default function createConversation(
-  session: Talk.Session,
-  building: Building,
-  theme: Theme,
-  avatarSrc: Building["avatarSrc"],
-  chatID: string,
-  isMobile: boolean
-): Talk.ConversationBuilder {
-  const agent = new Talk.User({
-    id: `building_${building.id}`,
-    name: building.userFirstName,
-    email: null,
-    role: "Default",
-    welcomeMessage: building.welcomeMessage,
-    availabilityText: building.systemWelcomeMessage,
-  });
-  const conversation = session.getOrCreateConversation(chatID);
-  conversation.setParticipant(session.me);
-  conversation.setParticipant(agent);
-  conversation.subject =
-    building.orgId === 16
-      ? "Leasing team" // by AVB request
-      : building.chatTitle ?? building.userFirstName;
-  conversation.custom = {
-    buildingId: building.id.toString(),
-    userId: building.userId.toString(),
-    orgId: building.orgId.toString(),
-    subtitle: building.chatSubtitle,
-    url: location.href,
-    buildingName: building.name,
-    isMobile: isMobile.toString(),
-    chatHeaderBackgroundColor: theme.chatHeader.backgroundColor,
-    chatHeaderTextColor: theme.chatHeader.textColor,
-    chatPaneBackgroundColor: theme.chatPaneBackgroundColor,
-    userMessageTextColor: theme.message.user.textColor,
-    userMessageBackgroundColor: theme.message.user.backgroundColor,
-    agentMessageTextColor: theme.message.agent.textColor,
-    agentMessageBackgroundColor: theme.message.agent.backgroundColor,
-    // it is sometimes helpful to know inside TalkJS if the theme is a light theme (examples: Light, Teal, Yellow) or a dark theme (Dark, Purple, Green)
-    isLightTheme: (theme.message === darkMessage).toString(),
-    avatarUrl:
-      building.avatarType === "image" && building.avatarSrc
-        ? avatarSrc
-        : defaultAvatarUrl,
-    // uncomment the following line to test changes to the default avatar if your test building has its own avatar
-    // avatarUrl: defaultAvatarUrl,
-  };
-  return conversation;
-}