Handle estimatedWaiting message visibility

src/components/chat-content/chat-content.tsx

@@ -35,14 +35,19 @@ const ChatContent = (): JSX.Element => {
             scrollbars: { visibility: 'auto', autoHide: 'leave' },
           }}
         >
-          {messages.map((message) => 
-            message.chatId === 'estimatedWaiting' 
-            ? <WaitingTimeNotification key={message.authorTimestamp} />
-            : <ChatMessage 
+          {messages.map((message) => {
+            if(message.id === "estimatedWaiting" && message.content === "hidden")
+              return <></>;
+            if(message.id === "estimatedWaiting")
+              return <WaitingTimeNotification key={message.authorTimestamp} />;
+
+            return (
+              <ChatMessage 
                 message={message}
                 key={`${message.authorTimestamp}-${message.created}-${message.id}`}
               />
-          )}
+            );
+          })}
         </OverlayScrollbarsComponent>
       </div>
     </AnimatePresence>

src/components/waiting-time-notification/waiting-time-notification.tsx

@@ -2,41 +2,35 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styles from './waiting-time-notification.module.scss';
 import Button, { ButtonColor } from '../button/button';
-import formatTime from '../../utils/format-time';
 import WaitingTimeNotificationForm from './waiting-time-notification-form';
 import NotificationMessage from './notification-message';
-import useChatSelector from '../../hooks/use-chat-selector';
 import 'overlayscrollbars/css/OverlayScrollbars.css';
 import '../chat-content/os-custom-theme.scss';
+import { useDispatch } from 'react-redux';
+import { removeEstimatedWaitingMessage } from '../../slices/chat-slice';
 
 const WaitingTimeNotification: React.FC = () => {
   const { t } = useTranslation();
-  const { estimatedWaiting } = useChatSelector();
+  const dispatch = useDispatch();
   const [showForm, setShowForm] = useState(false);
 
-  const FORMATTED_TIME = formatTime(estimatedWaiting.durationInSeconds);
-
   return (
     <div className={styles.container}>
-      <NotificationMessage showIcon={true}>
-        {t('notifications.waiting-time')}{' '}
-        {FORMATTED_TIME > 0 ? `${FORMATTED_TIME} ${t('widget.time.minutes')}` : `${FORMATTED_TIME} ${t('widget.time.minute')}`}
-      </NotificationMessage>
       <NotificationMessage showIcon={false}>
         {t('notifications.ask-contact-information')}
       </NotificationMessage>
       <div className={styles.action}>
         <Button
           title={t('widget.action.yes')}
-          color={ButtonColor.BLUE}
+          color={showForm ? ButtonColor.GRAY : ButtonColor.BLUE}
           onClick={() => setShowForm(true)}
         >
           {t('widget.action.yes')}
         </Button>
         <Button
           title={t('widget.action.no')}
-          color={showForm === false ? ButtonColor.BLUE : ButtonColor.GRAY}
-          onClick={() => setShowForm(false)}
+          color={ButtonColor.BLUE}
+          onClick={() => dispatch(removeEstimatedWaitingMessage())}
         >
           {t('widget.action.no')}
         </Button>

src/slices/chat-slice.ts

@@ -489,6 +489,12 @@ export const chatSlice = createSlice({
         }
       });
     },
+    removeEstimatedWaitingMessage: (state) => {
+      const estimatedMsgIndex = state.messages.findIndex(msg => msg.id === "estimatedWaiting");
+      if(estimatedMsgIndex === -1)
+        return;
+      state.messages[estimatedMsgIndex].content = 'hidden';
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(initChat.pending, (state) => {
@@ -556,7 +562,13 @@ export const chatSlice = createSlice({
     });
     builder.addCase(getEstimatedWaitingTime.fulfilled, (state, action) => {
       state.estimatedWaiting = action.payload;
+
+      const estimatedMsg = state.messages.find((msg) => msg.id === "estimatedWaiting");
+      if(estimatedMsg) 
+        return;
+
       state.messages.push({
+        id: "estimatedWaiting",
         chatId: "estimatedWaiting",
         authorTimestamp: new Date().toISOString(),
       });
@@ -620,6 +632,7 @@ export const {
   addMessagesToDisplay,
   handleStateChangingEventMessages,
   resetStateWithValue,
+  removeEstimatedWaitingMessage,
 } = chatSlice.actions;
 
 export default chatSlice.reducer;

src/utils/chat-utils.ts

@@ -4,7 +4,9 @@ import { EndUserContacts } from "../slices/chat-slice";
 
 export const parseButtons = (message: Message): MessageButton[] => {
   try {
-    return JSON.parse(decodeURIComponent(message?.buttons ?? '[]')) as MessageButton[];
+    if(!message?.buttons || message.buttons === '')
+      return [];
+    return JSON.parse(decodeURIComponent(message.buttons)) as MessageButton[];
   } catch(e) {
     console.error(e);
     return [];