@botonic/react 0.27.1-alpha.0 → 0.27.1

package/src/webchat/message-list/index.tsx

@@ -2,15 +2,15 @@ import React, { useContext, useEffect, useRef, useState } from 'react'
 
 import { ROLES, WEBCHAT } from '../../constants'
 import { WebchatContext } from '../../contexts'
-import { scrollToBottom } from '../../util'
 import { StyledScrollbar } from '../components/styled-scrollbar'
 import { TypingIndicator } from '../components/typing-indicator'
 import { IntroMessage } from './intro-message'
 import { ScrollButton } from './scroll-button'
 import { ContainerMessage } from './styles'
 import { UnreadMessagesBanner } from './unread-messages-banner'
+import { useNotifications } from './use-notifications'
 
-export const WebchatMessageList = props => {
+export const WebchatMessageList = () => {
   const {
     webchatState,
     getThemeProperty,
@@ -25,11 +25,31 @@ export const WebchatMessageList = props => {
 
   const [firstUnreadMessageId, setFirstUnreadMessageId] = useState()
 
-  const lastMessageRef = useRef<HTMLDivElement>(null)
+  const lastMessageBottomRef = useRef<HTMLDivElement>(null)
+
+  const scrollToBottom = () => {
+    setTimeout(() => {
+      lastMessageBottomRef.current?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end',
+      })
+    }, 100)
+  }
 
   const handleScrollToBottom = () => {
     resetUnreadMessages()
-    scrollToBottom({ host: props.host })
+    scrollToBottom()
+  }
+
+  const unreadMessagesBannerRef = useRef<HTMLDivElement>(null)
+
+  const scrollToBanner = () => {
+    setTimeout(() => {
+      unreadMessagesBannerRef.current?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+      })
+    }, 100)
   }
 
   const showUnreadMessagesBanner = (messageComponentId: string) =>
@@ -37,8 +57,6 @@ export const WebchatMessageList = props => {
     messageComponentId === firstUnreadMessageId &&
     webchatState.numUnreadMessages > 0
 
-  const unreadMessagesBannerRef = useRef<HTMLDivElement>(null)
-
   useEffect(() => {
     const firstUnreadMessage = webchatState.messagesComponents.find(
       message => message.props.isUnread
@@ -47,39 +65,39 @@ export const WebchatMessageList = props => {
   }, [webchatState.messagesComponents])
 
   useEffect(() => {
-    if (webchatState.messagesComponents.length > 0 && lastMessageRef.current) {
+    if (
+      webchatState.messagesComponents.length > 0 &&
+      lastMessageBottomRef.current
+    ) {
       const observer = new IntersectionObserver(entries => {
         entries.forEach(entry => {
           setLastMessageVisible(entry.isIntersecting)
         })
       })
-      observer.observe(lastMessageRef.current)
+      observer.observe(lastMessageBottomRef.current)
     }
   }, [webchatState.messagesComponents])
 
+  const { notificationsEnabled } = useNotifications()
+
   useEffect(() => {
-    setTimeout(() => {
-      scrollToBottom({ host: props.host })
-    }, 100)
+    if (!notificationsEnabled) {
+      scrollToBottom()
+      return
+    }
   }, [webchatState.typing])
 
   useEffect(() => {
-    if (firstUnreadMessageId) {
-      if (unreadMessagesBannerRef.current) {
-        unreadMessagesBannerRef.current.scrollIntoView({
-          behavior: 'smooth',
-          block: 'center',
-        })
+    if (notificationsEnabled) {
+      if (webchatState.isWebchatOpen && unreadMessagesBannerRef.current) {
+        scrollToBanner()
         return
       }
-    } else if (lastMessageRef.current) {
-      lastMessageRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'end',
-      })
+
+      scrollToBottom()
       return
     }
-  }, [firstUnreadMessageId])
+  }, [firstUnreadMessageId, webchatState.isWebchatOpen, webchatState.typing])
 
   const showScrollButton =
     webchatState.numUnreadMessages > 0 && !webchatState.isLastMessageVisible
@@ -94,9 +112,7 @@ export const WebchatMessageList = props => {
         scrollbar={scrollbarOptions}
         autoHide={scrollbarOptions.autoHide}
         ismessagescontainer={true.toString()}
-        style={{
-          ...props.style,
-        }}
+        style={{ flex: 1 }}
       >
         <IntroMessage />
         {webchatState.messagesComponents.map((messageComponent, index) => {
@@ -107,11 +123,15 @@ export const WebchatMessageList = props => {
                   unreadMessagesBannerRef={unreadMessagesBannerRef}
                 />
               )}
-
+              {messageComponent}
               {index === webchatState.messagesComponents.length - 1 && (
-                <div ref={lastMessageRef} style={{ content: '' }}></div>
+                <div
+                  ref={lastMessageBottomRef}
+                  style={{
+                    content: '',
+                  }}
+                ></div>
               )}
-              {messageComponent}
             </ContainerMessage>
           )
         })}

package/src/webchat/message-list/intro-message.tsx

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react'
-import Fade from 'react-reveal/Fade'
 
 import { WEBCHAT } from '../../constants'
 import { WebchatContext } from '../../contexts'
+import { Fade } from '../../shared/styles'
 import { resolveImage } from '../../util/environment'
 import { ConditionalWrapper } from '../../util/react'
 import { DefaultIntroImage } from './styles'

package/src/webchat/message-list/scroll-button.tsx

@@ -6,6 +6,7 @@ import { WebchatContext } from '../../contexts'
 import { resolveImage } from '../../util/environment'
 import { ContainerScrollButton } from './styles'
 import { useDebounce } from './use-debounce'
+import { useNotifications } from './use-notifications'
 
 interface ScrollButtonProps {
   handleClick: () => void
@@ -14,20 +15,10 @@ interface ScrollButtonProps {
 export const ScrollButton = ({
   handleClick,
 }: ScrollButtonProps): JSX.Element => {
-  const { getThemeProperty } = useContext(WebchatContext)
+  const { CustomScrollButton, scrollButtonEnabled } = useNotifications()
 
   const show = useDebounce()
 
-  const CustomScrollButton = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.scrollButtonCustom,
-    undefined
-  )
-
-  const scrollButtonEnabled = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.scrollButtonEnabled,
-    CustomScrollButton
-  )
-
   return (
     <>
       {scrollButtonEnabled && show ? (

package/src/webchat/message-list/unread-messages-banner.tsx

@@ -1,10 +1,10 @@
-import React, { useContext, useEffect } from 'react'
+import React, { useContext } from 'react'
 
 import ArrowDown from '../../assets/arrow-down.svg'
-import { WEBCHAT } from '../../constants'
 import { WebchatContext } from '../../contexts'
 import { resolveImage } from '../../util/environment'
 import { ContainerUnreadMessagesBanner } from './styles'
+import { useNotifications } from './use-notifications'
 
 interface UnreadMessagesBannerProps {
   unreadMessagesBannerRef: React.RefObject<HTMLDivElement>
@@ -13,36 +13,10 @@ interface UnreadMessagesBannerProps {
 export const UnreadMessagesBanner = ({
   unreadMessagesBannerRef,
 }: UnreadMessagesBannerProps): JSX.Element => {
-  const { getThemeProperty, webchatState } = useContext(WebchatContext)
+  const { webchatState } = useContext(WebchatContext)
 
-  const CustomUnreadMessagesBanner = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerCustom,
-    undefined
-  )
-
-  const notificationsBannerEnabled = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerEnabled,
-    undefined
-  )
-
-  const notificationsEnabled = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.notificationsEnabled,
-    CustomUnreadMessagesBanner || notificationsBannerEnabled
-  )
-
-  const text = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerText,
-    'unread messages'
-  )
-
-  useEffect(() => {
-    if (webchatState.isWebchatOpen && unreadMessagesBannerRef.current) {
-      unreadMessagesBannerRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-      })
-    }
-  }, [webchatState.isWebchatOpen, unreadMessagesBannerRef])
+  const { notificationsEnabled, CustomUnreadMessagesBanner, bannerText } =
+    useNotifications()
 
   return (
     <>
@@ -53,7 +27,7 @@ export const UnreadMessagesBanner = ({
           ) : (
             <ContainerUnreadMessagesBanner>
               <img src={resolveImage(ArrowDown)} />
-              {webchatState.numUnreadMessages} {text}
+              {webchatState.numUnreadMessages} {bannerText}
             </ContainerUnreadMessagesBanner>
           )}
         </div>

package/src/webchat/message-list/use-notifications.ts

@@ -0,0 +1,46 @@
+import { useContext } from 'react'
+
+import { WEBCHAT } from '../../constants'
+import { WebchatContext } from '../../contexts'
+
+export function useNotifications() {
+  const { getThemeProperty } = useContext(WebchatContext)
+
+  const CustomUnreadMessagesBanner = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerCustom,
+    undefined
+  )
+
+  const notificationsBannerEnabled = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerEnabled,
+    undefined
+  )
+
+  const notificationsEnabled = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.notificationsEnabled,
+    CustomUnreadMessagesBanner || notificationsBannerEnabled
+  )
+
+  const bannerText = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerText,
+    'unread messages'
+  )
+
+  const CustomScrollButton = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.scrollButtonCustom,
+    undefined
+  )
+
+  const scrollButtonEnabled = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.scrollButtonEnabled,
+    CustomScrollButton
+  )
+
+  return {
+    notificationsEnabled,
+    bannerText,
+    CustomUnreadMessagesBanner,
+    CustomScrollButton,
+    scrollButtonEnabled,
+  }
+}

package/src/webchat/webchat.jsx

@@ -753,7 +753,7 @@ export const Webchat = forwardRef((props, ref) => {
               inputRef={textArea}
               name='text'
               onFocus={() => {
-                deviceAdapter.onFocus(host)
+                deviceAdapter.onFocus()
               }}
               onBlur={() => {
                 deviceAdapter.onBlur()
@@ -907,7 +907,7 @@ export const Webchat = forwardRef((props, ref) => {
             </ErrorMessageContainer>
           )}
 
-          <WebchatMessageList style={{ flex: 1 }} host={host} />
+          <WebchatMessageList />
 
           {webchatState.replies &&
             Object.keys(webchatState.replies).length > 0 && (