From ce9cf973f952075740c53c3d75a1e7a14d842cf3 Mon Sep 17 00:00:00 2001
From: baha-a <bhlshrf@gmail.com>
Date: Wed, 12 Jun 2024 16:50:05 +0200
Subject: [PATCH 1/2] Fix waiting time message

---
 .../waiting-time-info-message.tsx             | 21 +++++++++++++++++++
 .../waiting-time-notification.tsx             | 11 ++--------
 2 files changed, 23 insertions(+), 9 deletions(-)
 create mode 100644 src/components/waiting-time-notification/waiting-time-info-message.tsx

diff --git a/src/components/waiting-time-notification/waiting-time-info-message.tsx b/src/components/waiting-time-notification/waiting-time-info-message.tsx
new file mode 100644
index 00000000..d3e0da31
--- /dev/null
+++ b/src/components/waiting-time-notification/waiting-time-info-message.tsx
@@ -0,0 +1,21 @@
+import { useTranslation } from 'react-i18next';
+import formatTime from '../../utils/format-time';
+import NotificationMessage from './notification-message';
+import useChatSelector from '../../hooks/use-chat-selector';
+
+const WaitingTimeInfoMessage = () => {
+  const { t } = useTranslation();
+  const { estimatedWaiting } = useChatSelector();
+  
+  const FORMATTED_TIME = formatTime(estimatedWaiting.durationInSeconds);
+  const timeUnitKey = FORMATTED_TIME > 1 ? 'widget.time.minutes' : 'widget.time.minute';
+  const time = `${FORMATTED_TIME} ${t(timeUnitKey)}`;
+
+  return (
+    <NotificationMessage showIcon={true}>
+      {t('notifications.waiting-time', { time })}
+    </NotificationMessage>
+  );
+}
+
+export default WaitingTimeInfoMessage;
diff --git a/src/components/waiting-time-notification/waiting-time-notification.tsx b/src/components/waiting-time-notification/waiting-time-notification.tsx
index 5bc8c885..1e273fd6 100644
--- a/src/components/waiting-time-notification/waiting-time-notification.tsx
+++ b/src/components/waiting-time-notification/waiting-time-notification.tsx
@@ -2,26 +2,19 @@ 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 WaitingTimeInfoMessage from './waiting-time-info-message';
 import 'overlayscrollbars/css/OverlayScrollbars.css';
 import '../chat-content/os-custom-theme.scss';
 
 const WaitingTimeNotification: React.FC = () => {
   const { t } = useTranslation();
-  const { estimatedWaiting } = useChatSelector();
   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>
+      <WaitingTimeInfoMessage />
       <NotificationMessage showIcon={false}>
         {t('notifications.ask-contact-information')}
       </NotificationMessage>

From ddd9d0df106f6942457bb2595794ac8c4b457a26 Mon Sep 17 00:00:00 2001
From: baha-a <bhlshrf@gmail.com>
Date: Wed, 12 Jun 2024 17:38:20 +0200
Subject: [PATCH 2/2] Handle estimatedWaiting message visibility

---
 src/components/chat-content/chat-content.tsx  | 15 ++++++++-----
 .../waiting-time-info-message.tsx             | 21 -------------------
 .../waiting-time-notification.tsx             | 11 +++++-----
 src/slices/chat-slice.ts                      | 13 ++++++++++++
 src/utils/chat-utils.ts                       |  4 +++-
 5 files changed, 32 insertions(+), 32 deletions(-)
 delete mode 100644 src/components/waiting-time-notification/waiting-time-info-message.tsx

diff --git a/src/components/chat-content/chat-content.tsx b/src/components/chat-content/chat-content.tsx
index ab8380ae..966b2751 100644
--- a/src/components/chat-content/chat-content.tsx
+++ b/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>
diff --git a/src/components/waiting-time-notification/waiting-time-info-message.tsx b/src/components/waiting-time-notification/waiting-time-info-message.tsx
deleted file mode 100644
index d3e0da31..00000000
--- a/src/components/waiting-time-notification/waiting-time-info-message.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import formatTime from '../../utils/format-time';
-import NotificationMessage from './notification-message';
-import useChatSelector from '../../hooks/use-chat-selector';
-
-const WaitingTimeInfoMessage = () => {
-  const { t } = useTranslation();
-  const { estimatedWaiting } = useChatSelector();
-  
-  const FORMATTED_TIME = formatTime(estimatedWaiting.durationInSeconds);
-  const timeUnitKey = FORMATTED_TIME > 1 ? 'widget.time.minutes' : 'widget.time.minute';
-  const time = `${FORMATTED_TIME} ${t(timeUnitKey)}`;
-
-  return (
-    <NotificationMessage showIcon={true}>
-      {t('notifications.waiting-time', { time })}
-    </NotificationMessage>
-  );
-}
-
-export default WaitingTimeInfoMessage;
diff --git a/src/components/waiting-time-notification/waiting-time-notification.tsx b/src/components/waiting-time-notification/waiting-time-notification.tsx
index 1e273fd6..886ca31b 100644
--- a/src/components/waiting-time-notification/waiting-time-notification.tsx
+++ b/src/components/waiting-time-notification/waiting-time-notification.tsx
@@ -4,32 +4,33 @@ import styles from './waiting-time-notification.module.scss';
 import Button, { ButtonColor } from '../button/button';
 import WaitingTimeNotificationForm from './waiting-time-notification-form';
 import NotificationMessage from './notification-message';
-import WaitingTimeInfoMessage from './waiting-time-info-message';
 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 dispatch = useDispatch();
   const [showForm, setShowForm] = useState(false);
 
   return (
     <div className={styles.container}>
-      <WaitingTimeInfoMessage />
       <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>
diff --git a/src/slices/chat-slice.ts b/src/slices/chat-slice.ts
index dce77db5..b262fec4 100644
--- a/src/slices/chat-slice.ts
+++ b/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;
diff --git a/src/utils/chat-utils.ts b/src/utils/chat-utils.ts
index aa5b39cf..0347d967 100644
--- a/src/utils/chat-utils.ts
+++ b/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 [];