@botonic/react 0.22.2 → 0.22.6

package/src/webchat/trigger-button/index.tsx

@@ -0,0 +1,67 @@
+import React, { useContext } from 'react'
+
+import { ROLES, WEBCHAT } from '../../constants'
+import { WebchatContext } from '../../contexts'
+import { resolveImage } from '../../util/environment'
+import {
+  StyledTriggerButton,
+  TriggerImage,
+  UnreadMessagesCounter,
+} from './styles'
+
+export const TriggerButton = (): JSX.Element => {
+  const { webchatState, getThemeProperty, toggleWebchat } =
+    useContext(WebchatContext)
+
+  const getTriggerImage = () => {
+    const image = getThemeProperty(
+      WEBCHAT.CUSTOM_PROPERTIES.triggerButtonImage,
+      undefined
+    )
+
+    if (!image) {
+      webchatState.theme.triggerButtonImage = WEBCHAT.DEFAULTS.LOGO
+      return null
+    }
+    return image
+  }
+
+  const triggerButtonImage = getTriggerImage()
+
+  const triggerButtonStyle = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.triggerButtonStyle
+  )
+
+  const CustomTriggerButton = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.customTrigger,
+    undefined
+  )
+
+  const handleClick = (event: any) => {
+    toggleWebchat(true)
+    event.preventDefault()
+  }
+
+  return (
+    <div onClick={handleClick}>
+      {webchatState.unreadMessages !== 0 && (
+        <UnreadMessagesCounter className='trigger-notifications'>
+          {webchatState.unreadMessages}
+        </UnreadMessagesCounter>
+      )}
+      {CustomTriggerButton ? (
+        //@ts-ignore
+        <CustomTriggerButton />
+      ) : (
+        <StyledTriggerButton
+          role={ROLES.TRIGGER_BUTTON}
+          style={triggerButtonStyle}
+        >
+          {triggerButtonImage && (
+            <TriggerImage src={resolveImage(triggerButtonImage)} />
+          )}
+        </StyledTriggerButton>
+      )}
+    </div>
+  )
+}

package/src/webchat/trigger-button/styles.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components'
+
+import { COLORS } from '../../constants'
+
+export const StyledTriggerButton = styled.div`
+  cursor: pointer;
+  position: fixed;
+  background: ${COLORS.SOLID_WHITE};
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  width: 65px;
+  height: 65px;
+  bottom: 20px;
+  right: 10px;
+  padding: 8px;
+`
+
+export const UnreadMessagesCounter = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  position: absolute;
+  right: 20px;
+  bottom: 80px;
+  width: 24px;
+  height: 24px;
+  background-color: ${COLORS.RED_NOTIFICATIONS};
+  color: white;
+  z-index: 10;
+`
+
+export const TriggerImage = styled.img`
+  max-width: 100%;
+  max-height: 100%;
+`

package/src/webchat/webchat-reducer.js

@@ -35,8 +35,14 @@ export function webchatReducer(state, action) {
       }
     case UPDATE_HANDOFF:
       return { ...state, handoff: action.payload }
-    case TOGGLE_WEBCHAT:
-      return { ...state, isWebchatOpen: action.payload }
+    case TOGGLE_WEBCHAT: {
+      const isWebchatOpen = action.payload
+      return {
+        ...state,
+        isWebchatOpen,
+        unreadMessages: isWebchatOpen ? 0 : state.unreadMessages,
+      }
+    }
     case TOGGLE_EMOJI_PICKER:
       return { ...state, isEmojiPickerOpen: action.payload }
     case TOGGLE_PERSISTENT_MENU:

package/src/webchat/webchat.jsx

@@ -37,7 +37,7 @@ import {
 } from '../message-utils'
 import { msgToBotonic } from '../msg-to-botonic'
 import { scrollToBottom } from '../util/dom'
-import { isDev, resolveImage } from '../util/environment'
+import { isDev } from '../util/environment'
 import { deserializeRegex, stringifyWithRegexs } from '../util/regexs'
 import {
   _getThemeProperty,
@@ -63,6 +63,7 @@ import {
 } from './hooks'
 import { WebchatMessageList } from './message-list'
 import { WebchatReplies } from './replies'
+import { TriggerButton } from './trigger-button'
 import { useStorageState } from './use-storage-state-hook'
 import { WebviewContainer } from './webview'
 
@@ -86,22 +87,6 @@ const StyledWebchat = styled.div`
   flex-direction: column;
 `
 
-const StyledTriggerButton = styled.div`
-  cursor: pointer;
-  position: fixed;
-  background: ${COLORS.SOLID_WHITE};
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  width: 65px;
-  height: 65px;
-  bottom: 20px;
-  right: 10px;
-  padding: 8px;
-`
-
 const UserInputContainer = styled.div`
   min-height: 52px;
   position: relative;
@@ -120,11 +105,6 @@ const TextAreaContainer = styled.div`
   align-items: center;
 `
 
-const TriggerImage = styled.img`
-  max-width: 100%;
-  max-height: 100%;
-`
-
 const ErrorMessageContainer = styled.div`
   position: relative;
   display: flex;
@@ -448,6 +428,7 @@ export const Webchat = forwardRef((props, ref) => {
     }
     return false
   }
+
   const closeMenu = () => {
     togglePersistentMenu(false)
   }
@@ -711,43 +692,6 @@ export const Webchat = forwardRef((props, ref) => {
     }
   }, [webchatState.isWebchatOpen])
 
-  const getTriggerImage = () => {
-    const triggerImage = getThemeProperty(
-      WEBCHAT.CUSTOM_PROPERTIES.triggerButtonImage,
-      null
-    )
-    if (triggerImage === null) {
-      webchatState.theme.triggerButtonImage = WEBCHAT.DEFAULTS.LOGO
-      return null
-    }
-    return triggerImage
-  }
-
-  const triggerButtonStyle = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.triggerButtonStyle
-  )
-
-  const CustomTriggerButton = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.customTrigger,
-    undefined
-  )
-
-  const triggerButton = () => {
-    if (CustomTriggerButton) {
-      return <CustomTriggerButton />
-    }
-    return (
-      <StyledTriggerButton
-        role={ROLES.TRIGGER_BUTTON}
-        style={{ ...triggerButtonStyle }}
-      >
-        {getTriggerImage() && (
-          <TriggerImage src={resolveImage(getTriggerImage())} />
-        )}
-      </StyledTriggerButton>
-    )
-  }
-
   const webchatMessageList = () => (
     <WebchatMessageList style={{ flex: 1 }}>
       {webchatState.typing && <TypingIndicator />}
@@ -917,16 +861,7 @@ export const Webchat = forwardRef((props, ref) => {
         updateWebchatDevSettings: updateWebchatDevSettings,
       }}
     >
-      {!webchatState.isWebchatOpen && (
-        <div
-          onClick={event => {
-            toggleWebchat(true)
-            event.preventDefault()
-          }}
-        >
-          {triggerButton()}
-        </div>
-      )}
+      {!webchatState.isWebchatOpen && <TriggerButton />}
 
       {webchatState.isWebchatOpen && (
         <StyledWebchat