@botonic/react 0.22.2 → 0.22.3-alpha.0

package/src/webchat/hooks.js

@@ -64,6 +64,7 @@ export const webchatInitialState = {
   lastMessageUpdate: undefined,
   currentAttachment: undefined,
   jwt: null,
+  unreadMessages: 0,
 }
 
 export function useWebchat() {
@@ -71,7 +72,6 @@ export function useWebchat() {
     webchatReducer,
     webchatInitialState
   )
-
   const addMessage = message =>
     webchatDispatch({ type: ADD_MESSAGE, payload: message })
   const addMessageComponent = message =>
@@ -119,11 +119,14 @@ export function useWebchat() {
       type: UPDATE_DEV_SETTINGS,
       payload: settings,
     })
-  const toggleWebchat = toggle =>
+
+  const toggleWebchat = toggle => {
     webchatDispatch({
       type: TOGGLE_WEBCHAT,
       payload: toggle,
     })
+  }
+
   const toggleEmojiPicker = toggle =>
     webchatDispatch({
       type: TOGGLE_EMOJI_PICKER,

package/src/webchat/messages-reducer.js

@@ -12,13 +12,7 @@ export const messagesReducer = (state, action) => {
     case ADD_MESSAGE:
       return addMessageReducer(state, action)
     case ADD_MESSAGE_COMPONENT:
-      return {
-        ...state,
-        messagesComponents: [
-          ...(state.messagesComponents || []),
-          action.payload,
-        ],
-      }
+      return addMessageComponent(action, state)
     case UPDATE_MESSAGE:
       return updateMessageReducer(state, action)
     case UPDATE_REPLIES:
@@ -39,6 +33,21 @@ export const messagesReducer = (state, action) => {
   }
 }
 
+function addMessageComponent(action, state) {
+  const messageComponent = action.payload
+  const isUnreadMessage =
+    !state.isWebchatOpen && messageComponent.props.ack !== 1
+  const unreadMessages = isUnreadMessage
+    ? state.unreadMessages + 1
+    : state.unreadMessages
+
+  return {
+    ...state,
+    messagesComponents: [...(state.messagesComponents || []), messageComponent],
+    unreadMessages,
+  }
+}
+
 function updateMessageReducer(state, action) {
   const msgIndex = state.messagesJSON.map(m => m.id).indexOf(action.payload.id)
   if (msgIndex > -1) {

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

@@ -0,0 +1,71 @@
+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={event => {
+        handleClick(event)
+      }}
+    >
+      {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: #ff426f;
+  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