@meetelise/chat 1.20.84 → 1.20.86

package/src/WebComponent/me-chat.ts

@@ -13,6 +13,7 @@ import {
   FeatureFlagsShowDropdown,
   fetchFeatureFlagShowMarketingSourceDropdown,
   fetchFeatureFlagUsePhoneNumberBySource,
+  fetchFeatureFlagUsePubnub,
 } from "../fetchFeatureFlag";
 import fetchWebchatPreferences, {
   DesignConcepts,
@@ -37,10 +38,16 @@ import addMinutes from "date-fns/addMinutes";
 import formatISO from "date-fns/formatISO";
 import fetchLeadSources from "../fetchLeadSources";
 import { formatPhoneNumber } from "./actions/formatPhoneNumber";
+import MyPubnub from "../MyPubnub";
 
 import "./actions/minimize-expand-button";
 import "./launcher/mobile-launcher";
+import "./pubnub-chat";
 
+enum ChatProviders {
+  TALKJS = "talkjs",
+  PUBNUB = "pubnub",
+}
 @customElement("me-chat")
 export class MEChat extends LitElement {
   static styles = css`
@@ -66,7 +73,8 @@ export class MEChat extends LitElement {
       justify-content: space-between;
       gap: 32px;
     }
-    #chatAdditionalActions {
+    #chatAdditionalActionsTalkjs,
+    #chatAdditionalActionsPubnub {
       position: fixed;
       box-sizing: border-box;
 
@@ -78,7 +86,8 @@ export class MEChat extends LitElement {
 
       z-index: 1000000000;
     }
-    #chatAdditionalActions::after {
+    #chatAdditionalActionsPubnub::after,
+    #chatAdditionalActionsTalkjs::after {
       content: "";
       position: absolute;
       top: -6px;
@@ -88,6 +97,10 @@ export class MEChat extends LitElement {
       border-bottom: 22px solid transparent;
       border-right: 30px solid black;
     }
+    #pubnub-bottom {
+      position: fixed;
+      bottom: 0;
+    }
   `;
   @property({ type: String })
   private buildingSlug = "";
@@ -147,6 +160,15 @@ export class MEChat extends LitElement {
   @state()
   private talkjsPopupElement: Element | null = null;
 
+  @state()
+  private chatProvider: ChatProviders = ChatProviders.TALKJS;
+
+  @state()
+  private displayPubnubChat = false;
+
+  @state()
+  private myPubnub: MyPubnub | null = null;
+
   private yardiDNIScriptInterval: NodeJS.Timer | null = null;
   launcherRef: Ref<Launcher> = createRef();
 
@@ -378,22 +400,35 @@ export class MEChat extends LitElement {
     (talkjsPopupElement as HTMLElement).style.zIndex = "99999999999";
     this.popup = popup;
 
-    const autoOpenedTimestamp = sessionStorage.getItem("autoOpenedTimestamp");
-    const shouldAutoOpen =
-      !autoOpenedTimestamp ||
-      (autoOpenedTimestamp && isPast(parseISO(autoOpenedTimestamp)));
-    if (building.autoOpenChatWidget && shouldAutoOpen && !isMobile()) {
+    if (this.shouldAutoOpenChat(building.autoOpenChatWidget)) {
       this.popup.show();
       this.hideLauncher = true;
       this.hasMounted = true;
-      sessionStorage.setItem(
-        "autoOpenedTimestamp",
-        formatISO(addMinutes(new Date(), 15))
-      );
+      this.updateAlreadyAutoOpenedTimestamp();
       this.analytics?.ping("autoOpen");
     }
   };
 
+  private shouldAutoOpenChat = (buildingHasAutoOpen: boolean): boolean => {
+    const alreadyAutoOpenedTimestamp = sessionStorage.getItem(
+      "alreadyAutoOpenedTimestamp"
+    ); // we dont want to autoopen on EVERY single page load, so we'll only do it once every 15 minutes max
+    const shouldAutoOpen =
+      !alreadyAutoOpenedTimestamp ||
+      !(
+        alreadyAutoOpenedTimestamp &&
+        !isPast(parseISO(alreadyAutoOpenedTimestamp))
+      );
+    return !!buildingHasAutoOpen && !!shouldAutoOpen && !isMobile();
+  };
+
+  private updateAlreadyAutoOpenedTimestamp = (): void => {
+    sessionStorage.setItem(
+      "alreadyAutoOpenedTimestamp",
+      formatISO(addMinutes(new Date(), 15))
+    );
+  };
+
   /**
    * Remove the instance from the screen.
    *
@@ -432,26 +467,64 @@ export class MEChat extends LitElement {
     this.launcher.style.display = "none";
   }
 
-  firstUpdated = (): void => {
-    this.initializeInstanceVariables();
+  firstUpdated = async (): Promise<void> => {
+    const usePubnubProviderFlag = await fetchFeatureFlagUsePubnub(
+      this.buildingSlug
+    );
+
+    if (usePubnubProviderFlag) {
+      this.chatProvider = ChatProviders.PUBNUB;
+      this.initializePubnubVariables();
+    } else {
+      this.initializeInstanceVariables();
+    }
+  };
+
+  initializePubnubVariables = async (): Promise<void> => {
+    await this.setBuildingDerivedInfo();
+    if (!this.building) return;
+
+    this.myPubnub = new MyPubnub(this.buildingSlug, this.building);
+    if (this.myPubnub.isChatKeyValid(this.myPubnub.getChatStorageKey())) {
+      await this.myPubnub.initializePubnub();
+    }
+    this.attachOnClickToLauncher();
+    if (this.shouldAutoOpenChat(this.building.autoOpenChatWidget)) {
+      this.displayPubnubChat = true;
+      this.hideLauncher = true;
+      this.hasMounted = true;
+      this.updateAlreadyAutoOpenedTimestamp();
+    }
+    this.isLoading = false;
   };
 
   handleContactClicked = (e: MouseEvent): void => {
-    this.popup?.hide();
+    if (this.chatProvider === ChatProviders.TALKJS) {
+      this.popup?.hide();
+    } else if (this.chatProvider === ChatProviders.PUBNUB) {
+      this.displayPubnubChat = false;
+    }
     this.hideLauncher = false;
 
     this.launcherRef.value?.onClickEmailOption(e);
   };
 
   handleTourClicked = (e: MouseEvent): void => {
-    this.popup?.hide();
+    if (this.chatProvider === ChatProviders.TALKJS) {
+      this.popup?.hide();
+    } else if (this.chatProvider === ChatProviders.PUBNUB) {
+      this.displayPubnubChat = false;
+    }
     this.hideLauncher = false;
-
     this.launcherRef.value?.onClickSSTOption(e);
   };
 
   handleContactTabClicked = (e: MouseEvent): void => {
-    this.popup?.hide();
+    if (this.chatProvider === ChatProviders.TALKJS) {
+      this.popup?.hide();
+    } else if (this.chatProvider === ChatProviders.PUBNUB) {
+      this.displayPubnubChat = false;
+    }
     this.hideLauncher = false;
 
     this.launcherRef.value?.onClickPhoneOption(e);
@@ -461,14 +534,25 @@ export class MEChat extends LitElement {
   //  For the top header contact, we change its pos based on the current x and y
   //  of the talkjs popup - so we must adjust its coords on resize and mount
   adjustTopHeaderContactCoords = (): void => {
-    if (this.talkjsPopupElement) {
+    const headerRef = this.shadowRoot?.getElementById(
+      this.chatProvider === ChatProviders.TALKJS
+        ? "chatAdditionalActionsTalkjs"
+        : "chatAdditionalActionsPubnub"
+    );
+    if (!headerRef) return;
+    if (this.chatProvider === ChatProviders.TALKJS && this.talkjsPopupElement) {
       const talkjsPopupCoords = this.talkjsPopupElement.getBoundingClientRect();
-      const headerRef = this.shadowRoot?.getElementById(
-        "chatAdditionalActions"
-      );
-      if (!headerRef) return;
       headerRef.style.left = `${talkjsPopupCoords.left + 20}px`;
       headerRef.style.top = `${talkjsPopupCoords.bottom - 24}px`;
+    } else if (this.chatProvider === ChatProviders.PUBNUB) {
+      const pubnubContainerElement = this.shadowRoot
+        ?.getElementById("pubnub-chat")
+        ?.shadowRoot?.getElementById("pubnub-chat-container");
+
+      const pubnubPopupCoords = pubnubContainerElement?.getBoundingClientRect();
+      if (!pubnubPopupCoords) return;
+      headerRef.style.left = `${pubnubPopupCoords.left}px`;
+      headerRef.style.top = `${pubnubPopupCoords.bottom}px`;
     }
   };
   connectedCallback(): void {
@@ -476,6 +560,7 @@ export class MEChat extends LitElement {
     window.addEventListener("resize", this.adjustTopHeaderContactCoords);
   }
   disconnectedCallback(): void {
+    this.myPubnub?.removeChatListeners();
     window.removeEventListener("resize", this.adjustTopHeaderContactCoords);
     super.disconnectedCallback();
   }
@@ -501,6 +586,33 @@ export class MEChat extends LitElement {
           EliseAI widget that allows you to chat with a virtual assistant, book
           a tour, contact the leasing office, and more.
         </div>
+
+        ${
+          this.chatProvider === ChatProviders.PUBNUB && this.displayPubnubChat
+            ? html`
+                <pubnub-chat
+                  id="pubnub-chat"
+                  .channel=${this.myPubnub?.channel}
+                  .myPubnub=${this.myPubnub}
+                  .buildingSlug=${this.buildingSlug}
+                  .building=${this.building}
+                  .brandColor=${this.brandColor}
+                  .onClickExit=${() => {
+                    this.displayPubnubChat = false;
+                    this.hideLauncher = false;
+                  }}
+                  .onMount=${() => {
+                    this.adjustTopHeaderContactCoords();
+                  }}
+                  .isMobile=${this.isMobile}
+                ></pubnub-chat>
+                ${this.renderChatAdditionalActions(
+                  "chatAdditionalActionsPubnub",
+                  showChatAdditionalActions
+                )}
+              `
+            : ""
+        }
         <div
           class=${classMap({
             launcherContainer: true,
@@ -568,54 +680,65 @@ export class MEChat extends LitElement {
           }
           
         </div>
-        <div
-          id="chatAdditionalActions"
-          class=${classMap({
-            ["showTab"]: showChatAdditionalActions,
-            ["hideTab"]: !showChatAdditionalActions,
-          })}
-        >
-          <mobile-launcher
-          .onClickMinimize=${this.onClickMinimize}
-          .onClickEmailOption=${this.handleContactClicked}
-          .onClickPhoneOption=${this.handleContactTabClicked}
-          .onClickSSTOption=${this.handleTourClicked}
-          .isMobile=${this.isMobile}
-          .brandColor=${this.brandColor}
-          .hideChat=${true}
-          .hasChatEnabled=${
-            !this.building?.chatWidgets
-              ? true
-              : this.building?.chatWidgets.includes("CHAT")
-          }
-          .hasEmailEnabled=${
-            !this.building?.chatWidgets
-              ? true
-              : this.building?.chatWidgets.includes("EMAIL")
-          }
-          .hasCallUsEnabled=${
-            !this.building?.chatWidgets
-              ? true
-              : this.building?.chatWidgets.includes("CALL")
-          }
-          .hasSSTEnabled=${
-            !this.building?.chatWidgets
-              ? true
-              : this.building?.chatWidgets.includes("SST")
-          }
-        ></mobile-launcher>
-         <minimize-expand-button 
-          .brandColor=${this.brandColor}
-          .onClick=${() => {
-            this.popup?.hide();
-            this.hideLauncher = false;
-          }}
-         ></minimize-expand-button>
-        </div>
+        ${
+          this.chatProvider === ChatProviders.TALKJS
+            ? this.renderChatAdditionalActions(
+                "chatAdditionalActionsTalkjs",
+                showChatAdditionalActions
+              )
+            : ""
+        }
+        
       </meta>
     `;
   }
 
+  private renderChatAdditionalActions = (
+    id: string,
+    showChatAdditionalActions: boolean
+  ): TemplateResult => {
+    return html` <div
+      id=${id}
+      class=${classMap({
+        ["showTab"]: showChatAdditionalActions,
+        ["hideTab"]: !showChatAdditionalActions,
+      })}
+    >
+      <mobile-launcher
+        .onClickMinimize=${this.onClickMinimize}
+        .onClickEmailOption=${this.handleContactClicked}
+        .onClickPhoneOption=${this.handleContactTabClicked}
+        .onClickSSTOption=${this.handleTourClicked}
+        .isMobile=${this.isMobile}
+        .brandColor=${this.brandColor}
+        .hideChat=${true}
+        .hasChatEnabled=${!this.building?.chatWidgets
+          ? true
+          : this.building?.chatWidgets.includes("CHAT")}
+        .hasEmailEnabled=${!this.building?.chatWidgets
+          ? true
+          : this.building?.chatWidgets.includes("EMAIL")}
+        .hasCallUsEnabled=${!this.building?.chatWidgets
+          ? true
+          : this.building?.chatWidgets.includes("CALL")}
+        .hasSSTEnabled=${!this.building?.chatWidgets
+          ? true
+          : this.building?.chatWidgets.includes("SST")}
+      ></mobile-launcher>
+      <minimize-expand-button
+        .brandColor=${this.brandColor}
+        .onClick=${() => {
+          if (this.chatProvider === ChatProviders.PUBNUB) {
+            this.displayPubnubChat = false;
+          } else if (this.chatProvider === ChatProviders.TALKJS) {
+            this.popup?.hide();
+          }
+          this.hideLauncher = false;
+        }}
+      ></minimize-expand-button>
+    </div>`;
+  };
+
   private attachOnClickToLauncher = () => {
     const launcher = this.launcherRef.value;
     if (!launcher) {
@@ -623,12 +746,13 @@ export class MEChat extends LitElement {
     }
 
     launcher.onChatTapped = async () => {
-      if (!this.popup) {
-        return;
+      if (this.chatProvider === ChatProviders.PUBNUB) {
+        this.displayPubnubChat = true;
+      } else if (this.chatProvider === ChatProviders.TALKJS) {
+        if (!this.popup) return;
+        this.popup.show();
+        this.analytics?.ping("open");
       }
-
-      this.popup.show();
-      this.analytics?.ping("open");
       this.hideLauncher = true;
       this.hasMounted = true;
     };

package/src/WebComponent/pubnub-chat-styles.ts

@@ -0,0 +1,185 @@
+import { css } from "lit";
+
+export const pubnubChatStyles = css`
+  #pubnub-chat-container {
+    position: fixed;
+
+    z-index: 100000;
+    display: flex;
+    align-items: center;
+
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
+      rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+
+    font-family: Poppins, "Open Sans", "Helvetica", sans-serif;
+  }
+  .pubnub-container__mobile {
+    right: 0px;
+    bottom: 0px;
+    width: 100%;
+    height: 100%;
+    border-radius: 0px;
+  }
+  .pubnub-container__desktop {
+    right: 0px;
+    bottom: 110px;
+    width: 340px;
+    height: 600px;
+    border-radius: 24px 24px 0px 24px;
+  }
+  #header {
+    height: 70px;
+    width: 100%;
+    background: white;
+    overflow: hidden;
+
+    box-sizing: border-box;
+
+    display: flex;
+    align-items: center;
+    padding: 24px;
+    justify-content: space-between;
+  }
+
+  #header-text {
+    font-size: 14px;
+    font-weight: bold;
+  }
+  #exit-chat-bttn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+
+  #conversation-body {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    background: rgba(193, 193, 193, 0.5);
+    backdrop-filter: blur(4px);
+    overflow-y: scroll;
+
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  }
+
+  #message-thread-list {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: 0px 16px;
+    gap: 16px;
+    list-style: none;
+  }
+
+  .disclaimer-message {
+    font-size: 12px;
+  }
+
+  .message-container {
+    display: flex;
+    padding: 6px;
+    width: fit-content;
+    max-width: calc(100% - 60px);
+    box-sizing: border-box;
+  }
+
+  .lead-message {
+    background: black;
+    border-radius: 8px 8px 0px 8px;
+
+    align-self: flex-end;
+    color: white;
+  }
+  .ai-message {
+    background: white;
+    border-radius: 10px 10px 10px 0px;
+    color: black;
+  }
+  .message-text {
+    font-size: 14px;
+    word-break: break-word;
+    margin: 0;
+    padding: 6px 12px;
+    line-height: 130%;
+  }
+
+  .loading-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    margin: 5px;
+    animation: pulse 4s linear infinite;
+  }
+
+  .dot-1 {
+    background-color: #7d7d7d;
+    animation-delay: 0s;
+  }
+
+  .dot-2 {
+    background-color: #7d7d7d;
+    animation-delay: 1s;
+  }
+
+  .dot-3 {
+    background-color: #7d7d7d;
+    animation-delay: 2s;
+  }
+
+  @keyframes pulse {
+    0% {
+      background-color: #7d7d7d;
+      transform: scale(1);
+    }
+    50% {
+      background-color: #c7c7c7;
+      transform: scale(2);
+    }
+    100% {
+      background-color: #7d7d7d;
+      transform: scale(1);
+    }
+  }
+
+  #footer {
+    height: 70px;
+    width: 100%;
+    background: black;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    gap: 16px;
+    padding: 24px;
+  }
+  #message-input {
+    height: 40px;
+    width: 100%;
+    box-sizing: border-box;
+    font-weight: 300;
+    font-size: 14px;
+    line-height: 150%;
+    border: none;
+    color: white;
+    background: none;
+  }
+  #message-input:focus {
+    outline: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+  #send-message-bttn {
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+`;