@meetelise/chat 1.22.2 → 1.22.3

package/src/WebComponent/me-chat.ts

@@ -20,7 +20,12 @@ import fetchBuildingABTestType from "../fetchBuildingABTestType";
 import fetchPhoneNumberFromSource, {
   NumberForSelectedSource,
 } from "../fetchPhoneNumberFromSource";
-import { defaultBrandColor, defaultBackgroundColor } from "../themes";
+import {
+  defaultBrandColor,
+  defaultBackgroundColor,
+  hexToAlmostWhite,
+  shouldUserBrandColorForChatFooter,
+} from "../themes";
 
 import { isMobile } from "../utils";
 import { installLauncher } from "./launcher/Launcher";
@@ -871,38 +876,53 @@ export class MEChat extends LitElement {
     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}
-        .brandColor=${this.brandColor}
-        .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
-        .brandColor=${this.brandColor}
-        .backgroundColor=${this.backgroundColor}
-        .onClick=${() => {
-          this.displayPubnubChat = false;
-          this.showTourNextToChat = false;
-          this.hideLauncher = false;
-          localStorage.setItem("isChatOpen", "false");
-        }}
-      ></minimize-expand-button>
-    </div>`;
+    const triangleDivColor =
+      this.building &&
+      shouldUserBrandColorForChatFooter(
+        this.building.orgId,
+        this.building.id
+      ) &&
+      this.brandColor &&
+      this.brandColor !== defaultBrandColor
+        ? hexToAlmostWhite(this.brandColor, 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}
+          .brandColor=${this.brandColor}
+          .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
+          .brandColor=${this.brandColor}
+          .backgroundColor=${this.backgroundColor}
+          .onClick=${() => {
+            this.displayPubnubChat = false;
+            this.showTourNextToChat = false;
+            this.hideLauncher = false;
+            localStorage.setItem("isChatOpen", "false");
+          }}
+        ></minimize-expand-button>
+      </div>`;
   };
 }
 

package/src/WebComponent/pubnub-chat.ts

@@ -21,6 +21,7 @@ import {
   defaultBrandColor,
   hexToAlmostWhite,
   defaultBackgroundColor,
+  shouldUserBrandColorForChatFooter,
 } from "../themes";
 import { isMobile } from "../utils";
 import { InputStyles } from "./actions/InputStyles";
@@ -533,6 +534,15 @@ export class PubnubChat extends LitElement {
           class=${classMap({
             ["hidden"]: this.needsConsent(),
           })}
+          style=${styleMap({
+            background:
+              shouldUserBrandColorForChatFooter(
+                this.building.orgId,
+                this.building.id
+              ) && this.brandColor !== defaultBrandColor
+                ? hexToAlmostWhite(this.brandColor, 0.6)
+                : undefined,
+          })}
         >
           <textarea
             id="message-input"
@@ -540,6 +550,15 @@ export class PubnubChat extends LitElement {
               ["webchat-font__desktop"]: !isMobile(),
               ["webchat-font__mobile"]: isMobile(),
             })}
+            style=${styleMap({
+              color:
+                shouldUserBrandColorForChatFooter(
+                  this.building.orgId,
+                  this.building.id
+                ) && this.brandColor !== defaultBrandColor
+                  ? "black"
+                  : undefined,
+            })}
             placeholder="Ask a question..."
             @keydown=${(e: KeyboardEvent) => {
               if (
@@ -560,7 +579,12 @@ export class PubnubChat extends LitElement {
             @click=${() => this.sendMessage(this.messageInput.value)}
             ?disabled=${this.myPubnub?.isCurrentlyStreamingMessage}
           >
-            ${SendMessageIconWhite}
+            ${shouldUserBrandColorForChatFooter(
+              this.building.orgId,
+              this.building.id
+            ) && this.brandColor !== defaultBrandColor
+              ? SendMessageIconBlack
+              : SendMessageIconWhite}
           </button>
         </div>
       </div>

package/src/themes.ts

@@ -53,3 +53,13 @@ export const hexToAlmostWhite = (hexColor: string, ratio: number): string => {
     b.toString(16).padStart(2, "0")
   );
 };
+
+export const shouldUserBrandColorForChatFooter = (
+  orgId: number,
+  buildingId: number
+): boolean => {
+  // Some clients are complaining that we are NOT ADA compliant with our black, default chat footer
+  // So we are temporarily adding this flag to allow them to use their brand color for the chat footer
+  // Don't want to suddenly change it for our clients so added this flag
+  return orgId === 2 || buildingId === 70392;
+};