From d28cdf050e968c5afd5e059dbf9c11c662fb29c7 Mon Sep 17 00:00:00 2001
From: Sylvain Perron <1315508+slvnperron@users.noreply.github.com>
Date: Fri, 9 Jun 2023 16:34:58 -0400
Subject: [PATCH] Sp hide triggers (#599)

* fix(triggers): hide triggers

* fix(webchat): unread count

* init the chat

* doesn't fail on sound play failure

* classNames

* consple

* gfdg

* added custom events

* cleanup
---
 .../src/components/messages/Message.tsx       | 10 ++++--
 packages/webchat/src/main.tsx                 | 35 +++++++++++++++++--
 packages/webchat/src/typings.ts               | 18 ++++++++++
 3 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/packages/webchat/src/components/messages/Message.tsx b/packages/webchat/src/components/messages/Message.tsx
index 5309d1c70..207aeabeb 100644
--- a/packages/webchat/src/components/messages/Message.tsx
+++ b/packages/webchat/src/components/messages/Message.tsx
@@ -88,7 +88,7 @@ class Message extends Component<MessageProps> {
     if (this.props.noBubble || this.props.payload?.wrapped?.noBubble) {
       return (
         <div
-          className={classnames(this.props.className, wrappedClass, messageSelectedClass)}
+          className={classnames(this.props.className, wrappedClass, messageSelectedClass, this.props.payload.className)}
           style={additionalStyle}
           onClick={this.onMessageClick}
         >
@@ -99,7 +99,13 @@ class Message extends Component<MessageProps> {
 
     return (
       <div
-        className={classnames(this.props.className, wrappedClass, 'bpw-chat-bubble', `bpw-bubble-${type}`)}
+        className={classnames(
+          this.props.className,
+          wrappedClass,
+          'bpw-chat-bubble',
+          `bpw-bubble-${type}`,
+          this.props.payload.className
+        )}
         data-from={this.props.fromLabel}
         tabIndex={-1}
         style={additionalStyle}
diff --git a/packages/webchat/src/main.tsx b/packages/webchat/src/main.tsx
index f3218694a..e859092ce 100644
--- a/packages/webchat/src/main.tsx
+++ b/packages/webchat/src/main.tsx
@@ -11,7 +11,7 @@ import constants from './core/constants'
 import BpSocket from './core/socket'
 import ChatIcon from './icons/Chat'
 import { RootStore, StoreDef } from './store'
-import { Config, Message } from './typings'
+import { Config, Message, Trigger } from './typings'
 import { isIE } from './utils'
 import { initializeAnalytics, trackMessage, trackWebchatState } from './utils/analytics'
 import { postMessageToParent } from './utils/webchatEvents'
@@ -229,9 +229,18 @@ class Web extends React.Component<MainProps> {
       return
     }
 
+    if (event.payload?.type === 'trigger') {
+      //
+      const { trigger } = event.payload
+      if (typeof trigger?.type === 'string') {
+        await this.handleTrigger(trigger)
+        return
+      }
+    }
+
     if (this.props.currentConversation?.userId !== event.authorId) {
       trackMessage('received')
-      postMessageToParent('MESSAGE.RECEIVED', event, this.props.config!.chatId)
+      postMessageToParent('MESSAGE.RECEIVED', event, this.config.chatId)
 
       // This is to handle a special case for the emulator, setting the selected css class to the last message group
       // This needs a rethinking
@@ -259,6 +268,28 @@ class Web extends React.Component<MainProps> {
     await this.props.updateTyping!(event)
   }
 
+  handleTrigger = async (trigger: Trigger.CustomEvent | Trigger.WebchatVisibility | Trigger.WebchatConfig) => {
+    if (trigger.type === 'webchat-visibility') {
+      if (trigger.visibility === 'hide') {
+        this.props.hideChat!()
+      } else if (trigger.visibility === 'show') {
+        this.props.showChat!()
+      } else if (trigger.visibility === 'toggle') {
+        this.props.displayWidgetView ? this.props.showChat!() : this.props.hideChat!()
+      }
+    }
+
+    if (trigger.type === 'webchat-config') {
+      await this.handleIframeApi({
+        data: { action: 'mergeConfig', payload: { ...this.config, ...(trigger.config ?? {}) } }
+      })
+    }
+
+    if (trigger.type === 'custom-event') {
+      postMessageToParent('TRIGGER', trigger.event, this.props.config!.chatId)
+    }
+  }
+
   playSound = debounce(async () => {
     const disableNotificationSound = this.config.disableNotificationSound || this.props.config?.disableNotificationSound
     if (disableNotificationSound || this.audio.readyState < 2) {
diff --git a/packages/webchat/src/typings.ts b/packages/webchat/src/typings.ts
index d35e17327..dfec11fc9 100644
--- a/packages/webchat/src/typings.ts
+++ b/packages/webchat/src/typings.ts
@@ -18,6 +18,23 @@ declare global {
   }
 }
 
+export namespace Trigger {
+  export interface WebchatVisibility {
+    type: 'webchat-visibility'
+    visibility: 'show' | 'hide' | 'toggle'
+  }
+
+  export interface WebchatConfig {
+    type: 'webchat-config'
+    config: Partial<Config>
+  }
+
+  export interface CustomEvent {
+    type: 'custom-event'
+    event: any
+  }
+}
+
 export namespace Renderer {
   export interface Message {
     type?: string
@@ -168,6 +185,7 @@ export type WebchatEventType =
   | 'MESSAGE.RECEIVED'
   | 'MESSAGE.SELECTED'
   | 'USER.CONNECTED'
+  | 'TRIGGER'
 
 export interface WebchatEvent {
   type: WebchatEventType