Disable page scroll if user opens floating modal

src/components/chat/ChatFloatingModal.tsx

@@ -7,6 +7,7 @@ import { useSendEvent } from 'src/providers/AnalyticContext'
 import { useChatOpenState } from 'src/rtk/app/hooks'
 import { useAppSelector } from 'src/rtk/app/store'
 import { ChatEntity } from 'src/rtk/features/chat/chatSlice'
+import { disablePageScroll, enablePageScroll } from 'src/utils/window'
 import { useResponsiveSize } from '../responsive'
 import styles from './ChatFloatingModal.module.sass'
 import ChatIframe from './ChatIframe'
@@ -16,6 +17,7 @@ export default function ChatFloatingModal() {
   const sendEvent = useSendEvent()
   const [isOpen, setIsOpen] = useChatOpenState()
   const entity = useAppSelector(state => state.chat.entity)
+  const totalMessageCount = useAppSelector(state => state.chat.totalMessageCount)
 
   const [unreadCount, setUnreadCount] = useState(0)
 
@@ -40,6 +42,9 @@ export default function ChatFloatingModal() {
     }
     sendEvent(event)
 
+    if (!isOpen) disablePageScroll()
+    else enablePageScroll()
+
     setIsOpen(!isOpen)
     hasOpened.current = true
   }
@@ -77,7 +82,7 @@ export default function ChatFloatingModal() {
         <div className={styles.ChatFloatingWrapper}>
           <Button className={styles.ChatFloatingButton} onClick={toggleChat}>
             <img src='/images/grillchat.svg' alt='GrillChat' />
-            <span>Comment article</span>
+            <span>Comments {totalMessageCount ? `(${totalMessageCount})` : ''}</span>
           </Button>
           {!!unreadCount && <span className={styles.ChatUnreadCount}>{unreadCount}</span>}
         </div>,

src/utils/window.ts

@@ -0,0 +1,6 @@
+export function disablePageScroll() {
+  document.body.style.overflow = 'hidden'
+}
+export function enablePageScroll() {
+  document.body.style.overflow = 'auto'
+}