发送的消息的状态; 切换会话,获取相应的订单信息, 再影响到会话;

src/actions/ConversationActions.js

@@ -50,19 +50,22 @@ export const receivedConversationList = (data) => {
 };
 export const addConversationList = (data) => {
   return {
-    type: NAME_SPACE + 'ADD_CONVERSATIONS',
+    type: NAME_SPACE + 'ADD_TO_CONVERSATIONS_LIST',
     payload: data,
   };
 };
-export const updateConversationListItemNew = (message) => ({
-  type: NAME_SPACE + 'UPDATE_CONVERSATION_LIST_ITEM_NEW',
-  payload: message,
-});
+// export const updateConversationListItemNew = (message) => ({
+//   type: NAME_SPACE + 'UPDATE_CONVERSATION_LIST_ITEM_NEW',
+//   payload: message,
+// });
 
 export const receivedCustomerProfile = (data) => ({
   type: NAME_SPACE + 'SET_CUSTOMER_ORDER_PROFILE',
   payload: data,
 });
+/**
+ * @deprecated 在更新list时操作
+ */
 export const setActiveConversations = (obj) => ({
   type: NAME_SPACE + 'SET_ACTIVE_CONVERSATIONS',
   payload: obj,

src/lib/msgUtils.js

@@ -65,12 +65,25 @@ const whatsappMsgMapped = {
       console.log('getMsg', result);
       return isEmpty(result?.whatsappMessage) ? null : { ...result.whatsappMessage, conversationid: result.conversationid };
     },
-    contentToRender: () => null, // * 仅更新消息状态, 没有输出
-    contentToUpdate: (msgcontent) => ({ ...msgcontent, id: msgcontent.wamid, status: msgStatusRenderMapped[(msgcontent?.status || 'failed')] }),
+    contentToRender: (contentObj) => {
+      if ((contentObj?.status === 'failed' )) {
+        contentObj = {
+          ...contentObj,
+          type: 'error',
+          text: {body: `❌ Message failed to send.` }, // contentObj.errorMessage
+          id: contentObj.id,
+          wamid: contentObj.id,
+        };
+        return parseRenderMessageItem(contentObj);
+      }
+      // * 仅更新消息状态, 没有输出
+      return null;
+    },
+    contentToUpdate: (msgcontent) => ({ ...msgcontent, id: msgcontent.wamid, status: msgStatusRenderMapped[(msgcontent?.status || 'failed')], dateString: msgcontent.status==='failed' ? '发送失败 ❌' : '', }),
   },
 };
 export const msgStatusRenderMapped = {
-  'accepted': 'sent',
+  'accepted': 'waiting', // 'sent', // 接口的发送请求
   'sent': 'sent',
   'delivered': 'received',
   'read': 'read',
@@ -87,7 +100,7 @@ export const receivedMsgTypeMapped = {
       actionId: msgcontent.actionId,
       id: msgcontent.wamid,
       status: msgStatusRenderMapped[(msgcontent?.status || 'failed')],
-      conversationid: msgcontent.actionId.split('.')[0], // msgcontent.conversation.id,
+      conversationid: msgcontent.actionId.split('.')[0], // msgcontent.conversation.sn,
     }),
   },
   'error': {

src/reducers/ConversationReducer.js

@@ -7,10 +7,22 @@ const ConversationReducer = (state = initialState, action) => {
     case NAME_SPACE + 'INIT_WEBSOCKET':
       return { ...state, websocket: action.payload };
 
-    case NAME_SPACE + 'SET_CONVERSATION_LIST':
-      return { ...state, conversationsList: action.payload };
-    case NAME_SPACE + 'ADD_CONVERSATIONS':
-      return { ...state, conversationsList: [...action.payload, ...state.conversationsList] };
+    case NAME_SPACE + 'SET_CONVERSATION_LIST':{
+      const conversationsMapped = action.payload.reduce((r, v) => ({ ...r, [`${v.sn}`]: [] }), {});
+      return { ...state, conversationsList: action.payload, activeConversations: conversationsMapped };
+    }
+    case NAME_SPACE + 'ADD_TO_CONVERSATIONS_LIST':{
+      const { activeConversations } = state;
+      const conversationsIds = Object.keys(activeConversations);
+      const newConversations = action.payload.filter((conversation) => !conversationsIds.includes(`${conversation.sn}`));
+      const newConversationsMapped = newConversations.reduce((r, v) => ({ ...r, [`${v.sn}`]: [] }), {});
+
+      return {
+        ...state,
+        conversationsList: [...newConversations, ...state.conversationsList],
+        activeConversations: { ...activeConversations, ...newConversationsMapped },
+      };
+    }
 
     case NAME_SPACE + 'SET_TEMPLATE_LIST':
       return { ...state, templates: action.payload };

src/views/Conversations/Components/ConversationsList.jsx

@@ -3,7 +3,7 @@ import { useParams, useNavigate } from "react-router-dom";
 import { List, Avatar, Flex } from 'antd';
 import { useAuthContext } from '@/stores/AuthContext';
 import { useConversationState, useConversationDispatch } from '@/stores/ConversationContext';
-import { fetchCustomerProfile, receivedCustomerProfile, setCurrentConversation, addConversationList, setActiveConversations, postConversationItemClose } from '@/actions/ConversationActions'
+import { fetchCustomerProfile, receivedCustomerProfile, setCurrentConversation, addConversationList, postConversationItemClose } from '@/actions/ConversationActions'
 import { ChatList } from 'react-chat-elements';
 import { isEmpty, pick } from '@/utils/utils';
 import { v4 as uuid } from 'uuid';
@@ -56,11 +56,9 @@ const Conversations = (() => {
     if (isEmpty(data)) {
       return false;
     }
-    if (!isEmpty(data.conversation)) {
+    if (!isEmpty(data.conversations)) {
       dispatch(addConversationList(data.conversations));
-      dispatch(setCurrentConversation(data.conversation[0]));
-      const thisCMapped = data.conversation.reduce((r, v) => ({ ...r, [`${v.sn}`]: [] }), {});
-      dispatch(setActiveConversations(thisCMapped));
+      dispatch(setCurrentConversation(data.conversations[0]));
     } else {
       // reset chat window
       if (isEmpty(data.contact?.[0]?.whatsapp_phone_number)) {
@@ -80,7 +78,6 @@ const Conversations = (() => {
         'customer_name': data.contact[0].name,
       };
       dispatch(addConversationList([newChat]));
-      dispatch(setActiveConversations({ [`${newChat.sn}`]: []}));
       const newCurrent = pick(newChat, ['sn', 'coli_sn', 'whatsapp_phone_number', 'whatsapp_name', 'customer_name']);
       dispatch(setCurrentConversation(newCurrent));
     }
@@ -93,10 +90,10 @@ const Conversations = (() => {
   };
 
   const onSwitchConversation = (item) => {
-    switchConversation(item);
     if (item.coli_sn) {
       navigate(`/order/chat/${item.coli_sn}`, { replace: true });
     }
+    switchConversation(item);
   }
 
   const handleConversationItemClose = async (item) => {

src/views/Conversations/Components/InputBox.jsx

@@ -34,7 +34,7 @@ const InputBox = () => {
         text: textContent,
         sender: 'me',
         to: currentConversation.whatsapp_phone_number,
-        id: `${currentConversation.id}.${uuid()}`, // Date.now().toString(16),
+        id: `${currentConversation.sn}.${uuid()}`, // Date.now().toString(16),
         date: new Date(),
         status: 'waiting',
       };
@@ -49,7 +49,7 @@ const InputBox = () => {
       const msgObj = {
         type: 'whatsappTemplate',
         to: currentConversation.whatsapp_phone_number,
-        id: `${currentConversation.id}.${uuid()}`,
+        id: `${currentConversation.sn}.${uuid()}`,
         date: new Date(),
         status: 'waiting',
         statusTitle: 'Ready to send',

src/views/Conversations/ConversationProvider.jsx

@@ -8,7 +8,6 @@ import {
   fetchTemplates,
   receivedConversationList,
   receivedTemplates,
-  setActiveConversations,
   updateMessageItem,
   receivedNewMessage,
 } from '@/actions/ConversationActions';
@@ -50,9 +49,7 @@ const ConversationProvider = ({ children }) => {
   useEffect(() => {
     fetchConversationsList(userId).then((data) => {
       console.log(data, 'llllllllllllllllllllllll');
-      const dataMapped = data.reduce((r, v) => ({ ...r, [`${v.sn}`]: [] }), {});
       dispatch(receivedConversationList(data));
-      dispatch(setActiveConversations(dataMapped));
     }); // todo: 和刷新订单会话页面有冲突
 
     fetchTemplates().then((data) => dispatch(receivedTemplates(data)));