@meetelise/chat 1.35.0 → 1.35.2

package/src/WebComponent/actions/minimize-expand-button.ts

@@ -0,0 +1,93 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { defaultPrimaryColor } from "../../themes";
+import { ChevronRightIcon } from "../icons/ChevronRightIcon";
+import { XOutlineIcon } from "../icons/XOutlineIcon";
+
+@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 })
+  primaryColor: string = defaultPrimaryColor;
+
+  @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.primaryColor,
+          })}
+        >
+          ${this.toExpand
+            ? html`<div class="chevron-up">${ChevronRightIcon("white")}</div>`
+            : html` <div class="x-icon">${XOutlineIcon("white")}</div>`}
+        </div>
+      </div>
+    `;
+  }
+}

package/src/WebComponent/chat-additional-actions.ts

@@ -0,0 +1,135 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { BuildingWebchatView } from "../fetchBuildingWebchatView";
+import {
+  shouldUsePrimaryColorForChatFooter,
+  hexToAlmostWhite,
+  defaultPrimaryColor,
+} from "../themes";
+
+@customElement("chat-additional-actions")
+export class ChatAdditionalActions extends LitElement {
+  static styles = css`
+    .hideTab {
+      display: none;
+    }
+    .showTab {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 32px;
+    }
+  `;
+
+  @property({ type: String })
+  id = "";
+
+  @property({ type: Boolean })
+  showChatAdditionalActions = false;
+
+  @property({ type: Object })
+  buildingWebchatView: BuildingWebchatView | null = null;
+
+  @property({ type: String })
+  primaryColor: string | null = null;
+
+  @property({ type: String })
+  backgroundColor: string | null = null;
+
+  @property({ type: Object })
+  enabledChatWidgets: {
+    callDesktop: boolean;
+    chatDesktop: boolean;
+    emailDesktop: boolean;
+    textDesktop: boolean;
+    sstDesktop: boolean;
+  } = {
+    callDesktop: false,
+    chatDesktop: false,
+    emailDesktop: false,
+    textDesktop: false,
+    sstDesktop: false,
+  };
+
+  @property({ attribute: true })
+  onClickMinimize: () => void = () => {
+    return;
+  };
+
+  @property({ attribute: true })
+  onClickEmailOption: (e: MouseEvent) => void = () => {
+    return;
+  };
+
+  @property({ attribute: true })
+  onClickPhoneOption: (e: MouseEvent) => void = () => {
+    return;
+  };
+
+  @property({ attribute: true })
+  onClickSSTOption: (e: MouseEvent) => void = () => {
+    return;
+  };
+
+  @property({ attribute: true })
+  onClose: (e: MouseEvent) => void = () => {
+    return;
+  };
+
+  render(): TemplateResult {
+    const primaryColorValue = this.primaryColor || defaultPrimaryColor;
+    const backgroundColorValue = this.backgroundColor || "#ffffff";
+
+    const triangleDivColor =
+      this.buildingWebchatView &&
+      shouldUsePrimaryColorForChatFooter(
+        this.buildingWebchatView.orgId,
+        this.buildingWebchatView.id
+      ) &&
+      primaryColorValue !== defaultPrimaryColor
+        ? hexToAlmostWhite(primaryColorValue, 0.6)
+        : "black";
+
+    return html`
+      <style>
+        #${this.id}::after {
+          border-right-color: ${triangleDivColor} !important;
+        }
+      </style>
+      <div
+        id=${this.id}
+        class=${classMap({
+          ["showTab"]: this.showChatAdditionalActions,
+          ["hideTab"]: !this.showChatAdditionalActions,
+        })}
+      >
+        <mobile-launcher
+          .onClickMinimize=${this.onClickMinimize}
+          .onClickEmailOption=${this.onClickEmailOption}
+          .onClickPhoneOption=${this.onClickPhoneOption}
+          .onClickSSTOption=${this.onClickSSTOption}
+          .primaryColor=${primaryColorValue}
+          .backgroundColor=${backgroundColorValue}
+          .hideChat=${true}
+          .hasCallUsEnabled=${this.enabledChatWidgets.callDesktop}
+          .hasChatEnabled=${this.enabledChatWidgets.chatDesktop}
+          .hasEmailEnabled=${this.enabledChatWidgets.emailDesktop}
+          .hasTextUsEnabled=${this.enabledChatWidgets.textDesktop}
+          .hasSSTEnabled=${this.enabledChatWidgets.sstDesktop}
+        ></mobile-launcher>
+        <minimize-expand-button
+          .primaryColor=${primaryColorValue}
+          .backgroundColor=${backgroundColorValue}
+          .onClick=${this.onClose}
+        ></minimize-expand-button>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "chat-additional-actions": ChatAdditionalActions;
+  }
+}

package/src/WebComponent/health-chat.ts

@@ -0,0 +1,270 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { createRef, Ref } from "lit/directives/ref.js";
+import { Launcher } from "./launcher/Launcher";
+import "./Scheduler/tour-scheduler";
+import { installLauncher } from "./launcher/Launcher";
+
+import "./MEChat.css";
+import MyPubnub from "../MyPubnub";
+
+import "./actions/minimize-expand-button";
+import "./launcher/mobile-launcher";
+import "./pubnub-chat";
+import {
+  clearChatStorageKey,
+  createChatStorageKey,
+  getChatStorageKey,
+  isChatKeyValid,
+} from "../handleChatId";
+import { isMobile } from "../utils";
+import "./simple-launcher/simple-launcher";
+import { WidgetType } from "../main/MEChat";
+
+@customElement("health-chat")
+export class HealthChat extends LitElement {
+  static styles = css`
+    :host {
+      all: initial;
+    }
+
+    #__talkjs_launcher:not(.shouldBeVisible) {
+      display: none;
+    }
+
+    .launcherContainer.launcher__mobile {
+      width: 100%;
+      height: 100px;
+    }
+
+    #typeMobile-bttn {
+      position: fixed;
+      right: 24px;
+      bottom: 24px;
+      width: 80px;
+      height: 80px;
+
+      border: 2px solid #f3f6fc;
+      border-radius: 1000px;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 40px;
+    }
+    #typeMobile-bttn:hover > #typeMobile-inner {
+      background: #eaecf4;
+      cursor: pointer;
+    }
+    #typeMobile-bttn > #typeMobile-inner {
+      width: 72px;
+      height: 72px;
+
+      background: #ffffff;
+      border: 2px solid #f3f6fc;
+      border-radius: 1000px;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+    }
+    #typeMobile-txt {
+      font-family: Poppins, "Open Sans", "Helvetica", sans-serif;
+      box-sizing: border-box;
+      font-weight: 300;
+      line-height: 150%;
+      font-size: 16px;
+    }
+  `;
+
+  @property({ type: String })
+  private healthcareId = "";
+
+  @property({ type: Number })
+  private right = 0;
+
+  @property({ type: Number })
+  private bottom = 0;
+
+  @property({ type: Number })
+  private top = 0;
+
+  @property({ type: Number })
+  private left = 0;
+
+  @state()
+  private launcher: HTMLElement | null = null;
+
+  @state()
+  private currentLeadSource: string | null = null;
+
+  @state()
+  private displayPubnubChat = false;
+
+  @state()
+  private myPubnub: MyPubnub | null = null;
+
+  @state()
+  private requiresConsent = false;
+
+  @state()
+  private privacyPolicyUrl = "http://bit.ly/me_privacy_policy";
+
+  @state()
+  private isLoading = true;
+
+  launcherRef: Ref<Launcher> = createRef();
+
+  firstUpdated = async (): Promise<void> => {
+    const isInMaintenanceMode = false; // TODO: check
+    if (isInMaintenanceMode) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        "MeetElise Chat is in maintenance mode. Chat icon will not appear."
+      );
+      return;
+    }
+    await this.initializeChatVariables();
+  };
+
+  private initializeChatVariables = async (): Promise<void> => {
+    this.isLoading = true;
+
+    // important to distinguish between a user who has never opened the chat and a user who has opened the chat but closed it
+    const currentChatStorageKey = getChatStorageKey(this.healthcareId);
+    const updatedChatStorageKey = isChatKeyValid(
+      this.healthcareId,
+      currentChatStorageKey
+    )
+      ? currentChatStorageKey
+      : createChatStorageKey(this.healthcareId, false);
+
+    if (!updatedChatStorageKey.leadId) {
+      throw new Error("Lead ID is null");
+    }
+
+    this.myPubnub = new MyPubnub(
+      this.healthcareId,
+      null,
+      "",
+      this.currentLeadSource,
+      updatedChatStorageKey.leadId,
+      null,
+      WidgetType.Healthcare
+    );
+
+    if (updatedChatStorageKey.initiatedChat) {
+      await this.myPubnub.initializePubnub(currentChatStorageKey);
+    }
+
+    if (!isMobile()) {
+      this.displayPubnubChat = true;
+    }
+
+    this.attachOnClickToLauncher();
+
+    this.isLoading = false;
+  };
+
+  public async restartConversation(): Promise<void> {
+    this.myPubnub?.handleDisconnect();
+    clearChatStorageKey(this.healthcareId);
+    this.myPubnub = null;
+    this.displayPubnubChat = false;
+    await this.initializeChatVariables();
+  }
+
+  /** Show the chat button on the screen if it was previously hidden. */
+  show(): void {
+    if (!this.launcher) {
+      return;
+    }
+    this.launcher.style.display = "";
+  }
+
+  /** Hide the chat button from the screen (but don't remove from the DOM). */
+  hide(): void {
+    if (!this.launcher) {
+      return;
+    }
+    this.launcher.style.display = "none";
+  }
+
+  disconnectedCallback(): void {
+    this.myPubnub?.handleDisconnect();
+    super.disconnectedCallback();
+  }
+
+  private attachOnClickToLauncher = () => {
+    const launcher = this.launcherRef.value;
+    if (!launcher) {
+      return;
+    }
+    launcher.onChatTapped = async () => {
+      this.displayPubnubChat = true;
+    };
+  };
+
+  render(): TemplateResult {
+    installLauncher();
+
+    if (this.isLoading) return html``;
+    return html`
+   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+      <div id="aria-describe-info" style="display: none;">
+          EliseAI widget that allows you to chat with a virtual assistant, book
+          a tour, contact the leasing office, and more.
+      </div>
+        ${
+          this.displayPubnubChat
+            ? html`
+                <pubnub-chat
+                  id="pubnub-chat"
+                  .widgetType=${WidgetType.Healthcare}
+                  .channel=${this.myPubnub?.channel}
+                  .myPubnub=${this.myPubnub}
+                  .buildingSlug=${this.healthcareId}
+                  .onClickExit=${() => {
+                    this.displayPubnubChat = false;
+                  }}
+                  .requiresConsent=${this.requiresConsent}
+                  .privacyPolicyUrl=${this.privacyPolicyUrl}
+                  .top=${this.top}
+                  .bottom=${this.bottom}
+                  .left=${this.left}
+                  .right=${this.right}
+                ></pubnub-chat>
+              `
+            : html``
+        }
+        <simple-launcher
+          id="healthcare-launcher"
+          .top=${this.top}
+          .bottom=${this.bottom}
+          .left=${this.left}
+          .right=${this.right}
+          .isChatOpen=${this.displayPubnubChat}
+          .onClickCloseChat=${() => {
+            this.displayPubnubChat = false;
+          }}
+          .onClickOpenChat=${() => {
+            this.displayPubnubChat = true;
+          }}
+          
+        ></simple-launcher>
+
+      </meta>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "health-chat": HealthChat;
+  }
+
+  interface Window {
+    RCTPCampaign?: { CampaignDetails: { Source: string } };
+  }
+}

package/src/WebComponent/healthchat-styles.ts

@@ -0,0 +1,119 @@
+import { css } from "lit";
+
+export const healthChatStyles = css`
+  #healthchat-container {
+    position: fixed;
+
+    z-index: 100001;
+    display: flex;
+    align-items: center;
+
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-shadow: -10px 60px 60px 0px #bfbfbf4d;
+
+    box-shadow: 0px 1px 24px 0px #0000001a;
+
+    font-family: Poppins, "Open Sans", "Helvetica", sans-serif;
+  }
+  .healthchat-container__desktop {
+    width: 300px;
+    height: 420px;
+    border-radius: 10px;
+  }
+
+  #healthchat-header {
+    height: 60px;
+    width: 100%;
+    background: white;
+    overflow: hidden;
+
+    box-sizing: border-box;
+
+    display: flex;
+    align-items: center;
+    padding: 24px 16px;
+    justify-content: space-between;
+  }
+
+  #healthchat-header-subtext {
+    font-family: Helvetica;
+    font-size: 8px;
+    font-weight: 300;
+    line-height: 11px;
+    letter-spacing: 0em;
+    text-align: left;
+    color: #737373;
+  }
+
+  .healthcare-conversation-body-backdrop {
+    background: #f1f2f4;
+  }
+
+  @media screen and (max-width: 767px) {
+    #conversation-body {
+      background: #efefef;
+      backdrop-filter: none;
+    }
+  }
+
+  .healthcare-disclaimer-inner {
+    width: 190px;
+    margin: 0 auto;
+  }
+  .healthcare-disclaimer-message {
+    font-size: 10px;
+    color: #737373;
+    line-height: 12px;
+    font-weight: 400;
+    text-align: center;
+  }
+  .healthcare-disclaimer-inner > a {
+    color: #737373;
+  }
+
+  #healthcare-footer {
+    min-height: 60px;
+    width: 100%;
+    background: white;
+    z-index: 100001;
+  }
+  #healthcare-inner-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 16px;
+    gap: 0px;
+  }
+  #healthcare-inner-footer > #message-input {
+    width: 100%;
+    max-height: 100px;
+    overflowy: auto;
+
+    font-family: inherit;
+    box-sizing: border-box;
+    font-weight: light;
+    border: none;
+    color: black;
+    background: none;
+
+    padding-right: 6px; /* width of the scrollbar */
+    box-sizing: border-box;
+    z-index: 1000000000000000000000000001;
+  }
+  #healthcare-inner-footer > #message-input:focus {
+    outline: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+  #healthcare-send-message-bttn {
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+  .health-bttn-allow-access {
+    padding-right: 28px;
+  }
+`;

package/src/WebComponent/icons/ApplyOutlineIcon.ts

@@ -0,0 +1,22 @@
+import { svg, SVGTemplateResult } from "lit";
+
+export const ApplyOutlineIcon = (
+  color = "white"
+): SVGTemplateResult => svg`<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_18382_27345)">
+<g clip-path="url(#clip1_18382_27345)">
+<path d="M9.91666 0.625V3.45833C9.91666 3.6462 9.99128 3.82636 10.1241 3.9592C10.257 4.09204 10.4371 4.16667 10.625 4.16667H13.4583" stroke="${color}" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.0417 13.375H4.95832C4.5826 13.375 4.22227 13.2257 3.95659 12.9601C3.69091 12.6944 3.54166 12.3341 3.54166 11.9583V2.04167C3.54166 1.66594 3.69091 1.30561 3.95659 1.03993C4.22227 0.774255 4.5826 0.625 4.95832 0.625H9.91666L13.4583 4.16667V11.9583C13.4583 12.3341 13.3091 12.6944 13.0434 12.9601C12.7777 13.2257 12.4174 13.375 12.0417 13.375Z" stroke="${color}" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.375 9.125L7.79167 10.5417L10.625 7.70833" stroke="${color}" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_18382_27345">
+<rect width="16" height="14" fill="white"/>
+</clipPath>
+<clipPath id="clip1_18382_27345">
+<rect width="17" height="17" fill="white" transform="translate(0 -1.5)"/>
+</clipPath>
+</defs>
+</svg>
+`;

package/src/WebComponent/icons/BookTourOutlineIcon.ts

@@ -0,0 +1,13 @@
+import { svg, SVGTemplateResult } from "lit";
+
+export const BookTourOutlineIcon = (
+  color = "black"
+): SVGTemplateResult => svg`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18" fill="none">
+<path d="M15.6825 6.11855H0.00653076C0.0588276 4.00052 1.79117 2.30087 3.92226 2.30087H4.41255V3.6083C4.41255 3.88285 4.63481 4.09858 4.90283 4.09858C5.17085 4.09858 5.39311 3.88285 5.39311 3.6083V2.30087H10.2959V3.6083C10.2959 3.88285 10.5182 4.09858 10.7862 4.09858C11.0542 4.09858 11.2765 3.88285 11.2765 3.6083V2.30087H11.7668C13.8979 2.30087 15.6302 4.00052 15.6825 6.11855Z" fill="${color}"/>
+<path d="M15.0641 7.39731V14.0677C15.0641 15.8922 13.5861 17.365 11.7668 17.365H3.92227C2.10298 17.365 0.625 15.8922 0.625 14.0677V7.39731H15.0641Z" fill="transparent" stroke="${color}" stroke-width="1.25"/>
+<path d="M4.90283 1V2.30742" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.7863 1V2.30742" stroke="${color}" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M0 6.11862H0.00653352C-3.5908e-06 6.15131 0 6.19053 0 6.22322V6.11862Z" fill="white"/>
+<path d="M15.689 6.11862V6.22322C15.689 6.19053 15.689 6.15131 15.6825 6.11862H15.689Z" fill="white"/>
+<path d="M4.74594 11.9562L6.56326 13.7735C6.8182 14.0285 7.23004 14.0285 7.48499 13.7735L10.9366 10.3219" stroke="${color}" stroke-miterlimit="10" stroke-linecap="round"/>
+</svg>`;