@meetelise/chat 1.24.0 → 1.24.1

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

@@ -0,0 +1,133 @@
+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 triangleDivColor =
+      this.buildingWebchatView &&
+      shouldUsePrimaryColorForChatFooter(
+        this.buildingWebchatView.orgId,
+        this.buildingWebchatView.id
+      ) &&
+      this.primaryColor &&
+      this.primaryColor !== defaultPrimaryColor
+        ? hexToAlmostWhite(this.primaryColor, 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=${this.primaryColor}
+          .backgroundColor=${this.backgroundColor}
+          .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=${this.primaryColor}
+          .backgroundColor=${this.backgroundColor}
+          .onClick=${this.onClose}
+        ></minimize-expand-button>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "chat-additional-actions": ChatAdditionalActions;
+  }
+}

package/src/WebComponent/me-chat.ts

@@ -12,7 +12,6 @@ import Analytics, { logSignal, LogType, sendLoggingEvent } from "../analytics";
 import {
   FeatureFlagsShowDropdown,
   fetchFeatureFlagInsertDNIWebsite,
-  fetchFeatureFlagMaintenanceMode,
   fetchFeatureFlagReplaceScheduleTourCtaWebsite,
   fetchFeatureFlagShowMarketingSourceDropdown,
   fetchFeatureFlagUseApplicationsLinkReplacement,
@@ -23,13 +22,8 @@ import fetchBuildingABTestType from "../fetchBuildingABTestType";
 import fetchPhoneNumberFromSource, {
   NumberForSelectedSource,
 } from "../fetchPhoneNumberFromSource";
-import {
-  defaultPrimaryColor,
-  defaultBackgroundColor,
-  hexToAlmostWhite,
-  shouldUsePrimaryColorForChatFooter,
-} from "../themes";
-
+import { defaultPrimaryColor, defaultBackgroundColor } from "../themes";
+import getShouldShowWebchat from "../getShouldShowWebchat";
 import { isMobile } from "../utils";
 import { installLauncher } from "./launcher/Launcher";
 import parseISO from "date-fns/parseISO";
@@ -68,6 +62,7 @@ import noop from "lodash/noop";
 import { updateRentgrataToken } from "../rentgrata";
 import { WidgetType } from "../main/MEChat";
 import { replaceSelectButtonsWithNewLink } from "../replaceSelectButtonsWithNewLink";
+import "./chat-additional-actions";
 
 @customElement("me-chat")
 export class MEChat extends LitElement {
@@ -94,7 +89,6 @@ export class MEChat extends LitElement {
       justify-content: space-between;
       gap: 32px;
     }
-    #chatAdditionalActionsTalkjs,
     #chatAdditionalActionsPubnub {
       position: fixed;
       box-sizing: border-box;
@@ -107,8 +101,7 @@ export class MEChat extends LitElement {
 
       z-index: 1000000000;
     }
-    #chatAdditionalActionsPubnub::after,
-    #chatAdditionalActionsTalkjs::after {
+    #chatAdditionalActionsPubnub::after {
       content: "";
       position: absolute;
       top: -6px;
@@ -253,110 +246,6 @@ export class MEChat extends LitElement {
 
   firstUpdated = async (): Promise<void> => this.setupWebchat();
 
-  private shouldShowWebchat = async (
-    buildingWebchatView: BuildingWebchatView | null,
-    buildingSlug: string
-  ): Promise<boolean> => {
-    const sampleRateForWebchat = 0.01;
-    if (!buildingWebchatView) {
-      // eslint-disable-next-line no-console
-      console.warn("MeetElise Chat will NOT appear. Building does NOT exist.");
-      logSignal({
-        params: {
-          org_slug: this.orgSlug,
-          building_slug: this.buildingSlug,
-          is_pixel_on_site: true,
-          is_any_webchat_showing: false,
-          extra_data: {
-            webchat_no_show_reason: "building_does_not_exist",
-          },
-        },
-        sampleRate: sampleRateForWebchat,
-      });
-      return false;
-    }
-    if (!buildingWebchatView.launchedDateTime) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        "MeetElise Chat will NOT appear. Building is NOT launched (based on launched date time)."
-      );
-      logSignal({
-        params: {
-          org_slug: this.orgSlug,
-          building_slug: this.buildingSlug,
-          is_pixel_on_site: true,
-          is_any_webchat_showing: false,
-          extra_data: {
-            webchat_no_show_reason: "building_not_launched",
-          },
-        },
-        sampleRate: sampleRateForWebchat,
-      });
-      return false;
-    }
-    if (!buildingWebchatView.active) {
-      // eslint-disable-next-line no-console
-      console.warn("MeetElise Chat will NOT appear. Building is NOT active.");
-      logSignal({
-        params: {
-          org_slug: this.orgSlug,
-          building_slug: this.buildingSlug,
-          is_pixel_on_site: true,
-          is_any_webchat_showing: false,
-          extra_data: {
-            webchat_no_show_reason: "building_not_active",
-          },
-        },
-        sampleRate: sampleRateForWebchat,
-      });
-      return false;
-    }
-    if (!buildingWebchatView.webchatScopeConfigured) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        "MeetElise Chat will NOT appear. Building is NOT webchat scope configured."
-      );
-      logSignal({
-        params: {
-          org_slug: this.orgSlug,
-          building_slug: this.buildingSlug,
-          is_pixel_on_site: true,
-          is_any_webchat_showing: false,
-          extra_data: {
-            webchat_no_show_reason: "building_not_webchat_scope_configured",
-          },
-        },
-        sampleRate: sampleRateForWebchat,
-      });
-      return false;
-    }
-
-    const leasingMaintenanceMode = await fetchFeatureFlagMaintenanceMode(
-      buildingSlug
-    );
-    // https://app.launchdarkly.com/projects/default/flags/webchat-leasing-in-maintenance-mode/targeting?env=production&selected-env=production
-    if (leasingMaintenanceMode) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        "MeetElise Chat will NOT appear. Chat is in maintenance mode."
-      );
-      logSignal({
-        params: {
-          org_slug: this.orgSlug,
-          building_slug: this.buildingSlug,
-          is_pixel_on_site: true,
-          is_any_webchat_showing: false,
-          extra_data: {
-            webchat_no_show_reason: "building_in_maintenance_mode",
-          },
-        },
-        sampleRate: sampleRateForWebchat,
-      });
-      return false;
-    }
-    return true;
-  };
-
   private setupWebchat = async (): Promise<void> => {
     if (!this.buildingSlug || !this.orgSlug) return;
     const buildingWebchatView = await fetchBuildingWebchatView(
@@ -373,9 +262,10 @@ export class MEChat extends LitElement {
       }
     }
 
-    const shouldShowWebchat = await this.shouldShowWebchat(
+    const shouldShowWebchat = await getShouldShowWebchat(
       buildingWebchatView,
-      this.buildingSlug
+      this.buildingSlug,
+      this.orgSlug
     );
     if (!shouldShowWebchat) {
       return;
@@ -924,10 +814,25 @@ export class MEChat extends LitElement {
                   .left=${this.left}
                   .right=${this.right}
                 ></pubnub-chat>
-                ${this.renderChatAdditionalActions(
-                  "chatAdditionalActionsPubnub",
-                  showChatAdditionalActions || this.showTourNextToChat
-                )}
+                <chat-additional-actions
+                  id="chatAdditionalActionsPubnub"
+                  .showChatAdditionalActions=${showChatAdditionalActions ||
+                  this.showTourNextToChat}
+                  .buildingWebchatView=${this.buildingWebchatView}
+                  .primaryColor=${this.primaryColor}
+                  .backgroundColor=${this.backgroundColor}
+                  .enabledChatWidgets=${this.enabledChatWidgets}
+                  .onClickMinimize=${this.onClickMinimize}
+                  .onClickEmailOption=${this.handleContactClicked}
+                  .onClickPhoneOption=${this.handleContactTabClicked}
+                  .onClickSSTOption=${this.handleTourClicked}
+                  .onClose=${() => {
+                    this.displayPubnubChat = false;
+                    this.showTourNextToChat = false;
+                    this.hideLauncher = false;
+                    localStorage.setItem("isChatOpen", "false");
+                  }}
+                ></chat-additional-actions>
               `
             : ""
         }
@@ -1033,61 +938,6 @@ export class MEChat extends LitElement {
       </meta>
     `;
   }
-
-  // These are the action elements the appear under the chat body when it is opened
-  private renderChatAdditionalActions = (
-    id: string,
-    showChatAdditionalActions: boolean
-  ): TemplateResult => {
-    const triangleDivColor =
-      this.buildingWebchatView &&
-      shouldUsePrimaryColorForChatFooter(
-        this.buildingWebchatView.orgId,
-        this.buildingWebchatView.id
-      ) &&
-      this.primaryColor &&
-      this.primaryColor !== defaultPrimaryColor
-        ? hexToAlmostWhite(this.primaryColor, 0.6)
-        : "black";
-
-    return html` <style>
-        #{id}::after {
-          border-right-color: ${triangleDivColor} !important;
-        }
-      </style>
-      <div
-        id=${id}
-        class=${classMap({
-          ["showTab"]: showChatAdditionalActions,
-          ["hideTab"]: !showChatAdditionalActions,
-        })}
-      >
-        <mobile-launcher
-          .onClickMinimize=${this.onClickMinimize}
-          .onClickEmailOption=${this.handleContactClicked}
-          .onClickPhoneOption=${this.handleContactTabClicked}
-          .onClickSSTOption=${this.handleTourClicked}
-          .primaryColor=${this.primaryColor}
-          .backgroundColor=${this.backgroundColor}
-          .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=${this.primaryColor}
-          .backgroundColor=${this.backgroundColor}
-          .onClick=${() => {
-            this.displayPubnubChat = false;
-            this.showTourNextToChat = false;
-            this.hideLauncher = false;
-            localStorage.setItem("isChatOpen", "false");
-          }}
-        ></minimize-expand-button>
-      </div>`;
-  };
 }
 
 declare global {

package/src/getShouldShowWebchat.ts

@@ -0,0 +1,114 @@
+import { logSignal } from "./analytics";
+import { BuildingWebchatView } from "./fetchBuildingWebchatView";
+import { fetchFeatureFlagMaintenanceMode } from "./fetchFeatureFlag";
+import { WebchatNoShowReason } from "./types/webchat-no-show-reason";
+
+const getShouldShowWebchat = async (
+  buildingWebchatView: BuildingWebchatView | null,
+  buildingSlug: string,
+  orgSlug: string
+): Promise<boolean> => {
+  const sampleRateForWebchat = 0.01;
+
+  if (!buildingWebchatView) {
+    // eslint-disable-next-line no-console
+    console.warn("MeetElise Chat will NOT appear. Building does NOT exist.");
+    log(
+      orgSlug,
+      buildingSlug,
+      true,
+      false,
+      "building_does_not_exist",
+      sampleRateForWebchat
+    );
+    return false;
+  }
+  if (!buildingWebchatView.launchedDateTime) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "MeetElise Chat will NOT appear. Building is NOT launched (based on launched date time)."
+    );
+    log(
+      orgSlug,
+      buildingSlug,
+      true,
+      false,
+      "building_not_launched",
+      sampleRateForWebchat
+    );
+    return false;
+  }
+
+  if (!buildingWebchatView.active) {
+    // eslint-disable-next-line no-console
+    console.warn("MeetElise Chat will NOT appear. Building is NOT active.");
+    log(
+      orgSlug,
+      buildingSlug,
+      true,
+      false,
+      "building_not_active",
+      sampleRateForWebchat
+    );
+    return false;
+  }
+  if (!buildingWebchatView.webchatScopeConfigured) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "MeetElise Chat will NOT appear. Building is NOT webchat scope configured."
+    );
+    log(
+      orgSlug,
+      buildingSlug,
+      true,
+      false,
+      "building_not_webchat_scope_configured",
+      sampleRateForWebchat
+    );
+    return false;
+  }
+
+  const leasingMaintenanceMode = await fetchFeatureFlagMaintenanceMode(
+    buildingSlug
+  );
+  // https://app.launchdarkly.com/projects/default/flags/webchat-leasing-in-maintenance-mode/targeting?env=production&selected-env=production
+  if (leasingMaintenanceMode) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "MeetElise Chat will NOT appear. Chat is in maintenance mode."
+    );
+    log(
+      orgSlug,
+      buildingSlug,
+      true,
+      false,
+      "building_in_maintenance_mode",
+      sampleRateForWebchat
+    );
+    return false;
+  }
+  return true;
+};
+
+const log = (
+  orgSlug: string,
+  buildingSlug: string,
+  isPixelOnSite = true,
+  isAnyWebchatShowing = false,
+  webchatNoShowReason: WebchatNoShowReason,
+  sampleRate = 0.01
+) =>
+  logSignal({
+    params: {
+      org_slug: orgSlug,
+      building_slug: buildingSlug,
+      is_pixel_on_site: isPixelOnSite,
+      is_any_webchat_showing: isAnyWebchatShowing,
+      extra_data: {
+        webchat_no_show_reason: webchatNoShowReason,
+      },
+    },
+    sampleRate,
+  });
+
+export default getShouldShowWebchat;

package/src/types/webchat-no-show-reason.ts

@@ -0,0 +1,6 @@
+export type WebchatNoShowReason =
+  | "building_does_not_exist"
+  | "building_not_launched"
+  | "building_not_active"
+  | "building_in_maintenance_mode"
+  | "building_not_webchat_scope_configured";