Haina
/
Global-sales
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

获取消息记录; 模板消息: body: 发送参数填充后的整体内容

Browse Source
dev/mobile
Lei OT 2 years ago
parent fa9fb4ab2c
commit d87a8e0a71
5 changed files with 120 additions and 47 deletions
Show Stats Download Patch File Download Diff File

12
src/actions/ConversationActions.js
Unescape Escape View File

@ -1,6 +1,7 @@
import { groupBy } from '@/utils/utils';
import { fetchJSON, postJSON } from '@/utils/request'
import { parseRenderMessageList } from '@/lib/msgUtils';
const API_HOST = 'https://p9axztuwd7x8a7.mycht.cn/whatsapp_callback';
@ -78,12 +79,16 @@ export const updateMessageItem = (message) => ({
type: NAME_SPACE + 'UPDATE_SENT_MESSAGE_ITEM',
payload: message,
});
export const receivedMessageList = (targetId, data) => ({
type: NAME_SPACE + 'RECEIVED_MESSAGE_LIST',
payload: { targetId, data },
})
export const fetchTemplates = async () => {
const data = await fetchJSON(`${API_HOST}/listtemplates`);
const canUseTemplates = (data?.result?.items || [])
.filter((_t) => _t.status !== 'REJECTED')
.map((ele) => ({ ...ele, components: groupBy(ele.components, (_c) => _c.type.toLowerCase()) }));
.map((ele) => ({ ...ele, components_origin: ele.components, components: groupBy(ele.components, (_c) => _c.type.toLowerCase()) }));
return canUseTemplates;
};
@ -93,6 +98,11 @@ export const fetchConversationsList = async (opisn) => {
return list;
};
export const fetchMessages = async (params) => {
const { result } = await fetchJSON(`${API_HOST}/getcusmessages`, params);
return parseRenderMessageList(result);
}
export const fetchCustomerProfile = async (colisn) => {
const { result } = await fetchJSON(`${API_HOST}/getorderinfo`, { colisn });
const data = result?.[0] || {};

47
src/lib/msgUtils.js
Unescape Escape View File

@ -33,8 +33,8 @@ export const sentMsgTypeMapped = {
contentToRender: (msg) => {
console.log(msg);
const templateDataMapped = msg.template?.components ? msg.template.components.reduce((r, v) => ({...r, [v.type]: v}), {}) : null;
const templateParam = (templateDataMapped?.body?.parameters || []).map(e => e.text);
const fillTemplate = templateParam.length ? replaceTemplateString(msg.template_origin.components.body?.[0]?.text || '', templateParam) : (msg.template_origin.components.body?.[0]?.text || '');
// const templateParam = (templateDataMapped?.body?.parameters || []).map(e => e.text);
// const fillTemplate = templateParam.length ? replaceTemplateString(msg.template_origin.components.body?.[0]?.text || '', templateParam) : (msg.template_origin.components.body?.[0]?.text || '');
// const footer = msg.template_origin.components?.footer?.[0]?.text || '';
return {
...msg,
@ -42,7 +42,7 @@ export const sentMsgTypeMapped = {
conversationid: msg.id.split('.')[0],
type: 'text',
title: msg.template_origin.components.header?.[0]?.text || '',
text: `${fillTemplate}`, // msg.template_origin.components.body?.[0]?.text || '',
text: templateDataMapped?.body?.text || '', // msg.template_origin.components.body?.[0]?.text || '',
};
},
},
@ -116,8 +116,8 @@ export const whatsappMsgTypeMapped = {
data: (msg) => ({ id: msg.wamid, text: msg.errorCode ? msg.errorMessage : msg.text.body }),
},
text: {
type: (msg) => ({ type: msg.errorCode ? 'system' : 'text' }),
data: (msg) => ({ id: msg.wamid, text: msg.errorCode ? msg.errorMessage : msg.text.body }),
type: 'text',
data: (msg) => ({ id: msg.wamid, text: msg.text.body }),
},
image: {
type: 'photo',
@ -171,6 +171,14 @@ export const whatsappMsgTypeMapped = {
// 'contact-card': 'contact-card',
// 'contact-card-with-photo': 'contact-card-with-photo',
// 'contact-card-with-photo-and-label': 'contact-card-with-photo-and-label',
template: {
type: 'text',
data: (msg) => {
const templateDataMapped = msg.template?.components ? msg.template.components.reduce((r, v) => ({...r, [v.type]: v}), {}) : null;
console.log(msg.template.name, templateDataMapped);
return { id: msg.wamid, text: templateDataMapped?.body?.parameters?.[0]?.text || '', title: msg.template.name }
},
},
};
/**
* render received msg
@ -189,15 +197,29 @@ export const parseRenderMessageItem = (msg) => {
// replyButton: true,
};
};
export const parseRenderMessageList = (messages) => {
/**
* 从数据库读取的记录
*/
export const parseRenderMessageList = (messages, conversationid = null) => {
return messages.map((msg) => {
const msgContent = msg.msgtext_AsJOSN;
const msgType = msgContent.type;
// const parseMethod = msgContent.bizType === 'whatsapp' ? cloneDeep(whatsappMsgTypeMapped) : {};
return {
...(whatsappMsgTypeMapped?.[msg.type]?.data(msg) || {}),
...(whatsappMsgTypeMapped?.[msg.type]?.type(msg) || { type: 'text' }), // type: whatsappMsgTypeMapped?.[msg.type]?.type || 'text',
id: msg.id,
sender: msg.from,
...(whatsappMsgTypeMapped?.[msgType]?.data(msgContent) || {}),
type: msgContent.type,
...(typeof whatsappMsgTypeMapped[msgType].type === 'function' ? whatsappMsgTypeMapped[msgType].type(msg) : { type: whatsappMsgTypeMapped[msgType].type || 'text' }),
date: msgContent?.sendTime || msg.msgtime || '',
sender: msgContent.from,
...(msg.msg_direction === 'outbound'
? {
sender: 'me',
status: msgStatusRenderMapped[msgContent?.status || 'failed'],
dateString: msgStatusRenderMapped[msgContent?.status || 'failed'] === 'failed' ? '发送失败 ❌' : '',
}
: {}),
// conversationid: conversationid,
// title: msg.customerProfile.name,
date: msg.sendTime,
};
});
};
@ -206,6 +228,9 @@ export const parseRenderMessageList = (messages) => {
* WhatsApp Templates params
*/
export const whatsappTemplatesParamMapped = {
/** @deprecated */
'asia_highlights_has_receive_your_inquiry': [['customer_name']],
'hello_from_asia_highlights': [['agent_name']], // todo:
'hello_from_china_highlights': [['agent_name']], // todo:
'use_new_whatsapp': [['agent_name']], // todo:
};

7
src/reducers/ConversationReducer.js
Unescape Escape View File

@ -76,6 +76,13 @@ const ConversationReducer = (state = initialState, action) => {
conversationsList: newConversationList,
};
}
case NAME_SPACE + 'RECEIVED_MESSAGE_LIST': {
const { targetId, data } = action.payload;
return {
...state,
activeConversations: { ...state.activeConversations, [String(targetId)]: data },
};
}
case NAME_SPACE + 'SENT_NEW_MESSAGE':
case NAME_SPACE + 'RECEIVED_NEW_MESSAGE': {
const { activeConversations, conversationsList, currentConversation } = state;

46
src/views/Conversations/Components/ConversationsList.jsx
Unescape Escape View File

@ -1,26 +1,33 @@
import { useRef, useEffect, useState } from 'react';
import { useParams, useNavigate } from "react-router-dom";
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, postConversationItemClose } from '@/actions/ConversationActions'
import {
fetchCustomerProfile,
receivedCustomerProfile,
setCurrentConversation,
addConversationList,
postConversationItemClose,
fetchMessages, receivedMessageList,
} from '@/actions/ConversationActions';
import { ChatList } from 'react-chat-elements';
import { isEmpty, pick } from '@/utils/utils';
import { v4 as uuid } from 'uuid';
/**
* []
*/
const Conversations = (() => {
const { order_sn } = useParams();
const Conversations = () => {
const { order_sn } = useParams();
const navigate = useNavigate();
const { loginUser } = useAuthContext();
const { userId } = loginUser;
const {conversationsList} = useConversationState();
const { conversationsList, activeConversations, currentConversation } = useConversationState();
const dispatch = useConversationDispatch();
const [chatlist, setChatlist] = useState([]);
useEffect(() => {
setChatlist(
(conversationsList).map((item) => ({
conversationsList.map((item) => ({
...item,
avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${item.whatsapp_name.trim() || item.whatsapp_phone_number}`,
id: item.sn,
@ -71,8 +78,8 @@ const Conversations = (() => {
// 'opi_sn': 354,
'coli_sn': colisn,
'whatsapp_phone_number': data.contact[0].whatsapp_phone_number,
"last_received_time": '',
"last_send_time": '',
'last_received_time': '',
'last_send_time': '',
'unread_msg_count': 0,
'whatsapp_name': data.contact[0].name,
'customer_name': data.contact[0].name,
@ -81,12 +88,20 @@ const Conversations = (() => {
const newCurrent = pick(newChat, ['sn', 'coli_sn', 'whatsapp_phone_number', 'whatsapp_name', 'customer_name']);
dispatch(setCurrentConversation(newCurrent));
}
}
const switchConversation = (item) => {
};
const switchConversation = async (item) => {
if (currentConversation.sn === item.sn) {
return false;
}
dispatch(setCurrentConversation(item));
if (isEmpty(item.coli_sn) || item.coli_sn === '0') {
dispatch(receivedCustomerProfile({}));
}
const messagesList = activeConversations[`${item.sn}`] || [];
if (isEmpty(messagesList)) {
const data = await fetchMessages({ opisn: userId, whatsappid: item.whatsapp_phone_number });
dispatch(receivedMessageList(item.sn, data));
}
};
const onSwitchConversation = (item) => {
@ -94,16 +109,19 @@ const Conversations = (() => {
navigate(`/order/chat/${item.coli_sn}`, { replace: true });
}
switchConversation(item);
}
};
const handleConversationItemClose = async (item) => {
console.log('invoke close', item);
const data = await postConversationItemClose({ conversationid: item.sn, opisn: userId });
}
};
return (
<>
<ChatList className='' dataSource={chatlist} onClick={(item) => onSwitchConversation(item)}
<ChatList
className=''
dataSource={chatlist}
onClick={(item) => onSwitchConversation(item)}
// onContextMenu={(item, i, e) => {
// console.log(item, i, e);
// return ( <p>ppp</p> )
@ -112,5 +130,5 @@ const Conversations = (() => {
/>
</>
);
});
};
export default Conversations;

55
src/views/Conversations/Components/InputBox.jsx
Unescape Escape View File

@ -7,7 +7,7 @@ import { useAuthContext } from '@/stores/AuthContext';
import { LikeOutlined, MessageOutlined, StarOutlined, SendOutlined, PlusOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { cloneDeep, getNestedValue, isEmpty } from '@/utils/utils';
import { v4 as uuid } from 'uuid';
import { whatsappTemplatesParamMapped, sentMsgTypeMapped } from '@/lib/msgUtils';
import { whatsappTemplatesParamMapped, sentMsgTypeMapped, replaceTemplateString } from '@/lib/msgUtils';
const InputBox = () => {
const { loginUser } = useAuthContext();
@ -21,6 +21,7 @@ const InputBox = () => {
const invokeSendMessage = (msgObj) => {
console.log('sendMessage------------------', msgObj);
const contentToSend = sentMsgTypeMapped[msgObj.type].contentToSend(msgObj);
console.log('content to send-------------------------------------', contentToSend);
websocket.sendMessage({ ...contentToSend, opi_sn: userId, coli_sn: currentConversation.coli_sn });
const contentToRender = sentMsgTypeMapped[msgObj.type].contentToRender(msgObj);
console.log(contentToRender, 'contentToRender sendMessage------------------');
@ -57,26 +58,38 @@ const InputBox = () => {
template: {
name: fromTemplate.name,
language: { code: fromTemplate.language },
...(fromTemplate.components.body[0]?.example?.body_text?.[0]?.length > 0
? {
components: [
{
'type': 'body',
'parameters': whatsappTemplatesParamMapped[fromTemplate.name].map((v) => ({ type: 'text', text: getNestedValue(_conversation, v) || '' })),
// [
// {
// 'type': 'text',
// 'text': getNestedValue(_conversation, whatsappTemplatesParamMapped[fromTemplate.name][0]) ,
// },
// { // debug:
// 'type': 'text',
// 'text': getNestedValue(_conversation, whatsappTemplatesParamMapped[fromTemplate.name]?.[1] || whatsappTemplatesParamMapped[fromTemplate.name][0]) ,
// },
// ],
},
],
}
: {}),
components: fromTemplate.components_origin.map(citem => {
const params = whatsappTemplatesParamMapped[fromTemplate.name].map((v) => ({ type: 'text', text: getNestedValue(_conversation, v) || '' }));
const paramText = params.map((p) => p.text);
const fillTemplate = paramText.length ? replaceTemplateString(citem?.text || '', paramText) : citem?.text || '';
return {
type: citem.type.toLowerCase(),
parameters: params,
text: fillTemplate,
};
}),
// ...(fromTemplate.components.body[0]?.example?.body_text?.[0]?.length > 0
// ? {
// components: [
// {
// 'type': 'body',
// 'text': fromTemplate.components.body[0]?.text,
// 'parameters': whatsappTemplatesParamMapped[fromTemplate.name].map((v) => ({ type: 'text', text: getNestedValue(_conversation, v) || '' })),
// // [
// // {
// // 'type': 'text',
// // 'text': getNestedValue(_conversation, whatsappTemplatesParamMapped[fromTemplate.name][0]) ,
// // },
// // { // debug:
// // 'type': 'text',
// // 'text': getNestedValue(_conversation, whatsappTemplatesParamMapped[fromTemplate.name]?.[1] || whatsappTemplatesParamMapped[fromTemplate.name][0]) ,
// // },
// // ],
// },
// ],
// }
// : {}),
},
template_origin: fromTemplate,
};

Write Preview
Loading…
Cancel
Save