feat: refine handoff information banner

Author: vanbasten17

packages/botonic-react/src/webchat/chat-area/index.tsx

@@ -2,7 +2,6 @@ import React, { useContext, useEffect, useState } from 'react'
 
 import { BotonicContainerId } from '../constants'
 import { WebchatContext } from '../context'
-import { HandoffInformationBanner } from '../handoff'
 import { useWebchatDimensions } from '../hooks'
 import { WebchatMessageList } from '../message-list'
 import { WebchatReplies } from '../replies'
@@ -25,9 +24,6 @@ export const ChatArea = () => {
       height={chatAreaHeight}
     >
       <WebchatMessageList />
-      {webchatState.isWebchatOpen && webchatState.handoffState.isHandoff && (
-        <HandoffInformationBanner />
-      )}
       {webchatState.replies && webchatState.replies.length > 0 && (
         <WebchatReplies />
       )}

packages/botonic-react/src/webchat/handoff/handoff-information-banner.tsx

@@ -1,13 +1,43 @@
+import { CASE_STATUS } from '@botonic/core'
 import React, { useContext } from 'react'
 
 import { WebchatContext } from '../context'
+import { BannerContainer, BannerText, BannerTextStrong } from './styles'
 
-interface PositionInQueueProps {}
+interface HandoffInformationBannerProps {}
 
-export function HandoffInformationBanner({}: PositionInQueueProps) {
+export function HandoffInformationBanner({}: HandoffInformationBannerProps) {
   const { webchatState } = useContext(WebchatContext)
 
   const handoffState = webchatState.handoffState
 
-  return <div>PositionInQueue: {handoffState.currentQueuePosition}</div>
+  console.log('handoffState', handoffState)
+
+  if (
+    handoffState.previousStatus === CASE_STATUS.WAITING &&
+    handoffState.nextStatus === CASE_STATUS.ATTENDING
+  ) {
+    return (
+      <BannerContainer>
+        <BannerText>An agent has joined the conversation</BannerText>
+      </BannerContainer>
+    )
+  }
+
+  if (handoffState.previousStatus === CASE_STATUS.ATTENDING) {
+    return (
+      <BannerContainer>
+        <BannerText>Chat with agent has ended</BannerText>
+      </BannerContainer>
+    )
+  }
+
+  return (
+    <BannerContainer>
+      <BannerText>
+        Position in queue{' '}
+        <BannerTextStrong>{handoffState.currentQueuePosition}</BannerTextStrong>
+      </BannerText>
+    </BannerContainer>
+  )
 }

packages/botonic-react/src/webchat/handoff/styles.ts

@@ -0,0 +1,20 @@
+import styled from 'styled-components'
+
+import { COLORS } from '../../constants'
+
+export const BannerContainer = styled.div`
+  color: ${COLORS.GRAY};
+  background-color: white;
+  padding: 10px;
+  border-radius: 5px;
+  text-align: center;
+`
+
+export const BannerText = styled.p`
+  margin: 0;
+`
+
+export const BannerTextStrong = styled.strong`
+  color: ${COLORS.GRAY};
+  font-weight: 600;
+`

packages/botonic-react/src/webchat/message-list/index.tsx

@@ -3,6 +3,7 @@ import React, { useContext, useEffect, useRef, useState } from 'react'
 import { ROLES } from '../../constants'
 import { WebchatContext } from '../../webchat/context'
 import { BotonicContainerId } from '../constants'
+import { HandoffInformationBanner } from '../handoff'
 import TypingIndicator from '../typing-indicator'
 import { IntroMessage } from './intro-message'
 import { ScrollButton } from './scroll-button'
@@ -149,11 +150,14 @@ export const WebchatMessageList = () => {
                   style={{
                     content: '',
                   }}
-                ></div>
+                />
               )}
             </React.Fragment>
           )
         })}
+        {webchatState.isWebchatOpen && webchatState.handoffState.isHandoff && (
+          <HandoffInformationBanner />
+        )}
         {webchatState.typing && <TypingIndicator ref={typingRef} />}
       </ScrollableMessageList>
       {showScrollButton && <ScrollButton handleClick={handleScrollToBottom} />}

packages/botonic-react/src/webchat/webchat.tsx

@@ -71,7 +71,6 @@ import { TriggerButton } from './trigger-button'
 import { useStorageState } from './use-storage-state-hook'
 import { getParsedAction } from './utils'
 import { WebviewContainer } from './webview/index'
-import { HandoffInformationBanner } from './handoff'
 
 // eslint-disable-next-line complexity, react/display-name
 const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {