From d0ea6c8b7bec8502883e6f467c0c47e99d7c34dc Mon Sep 17 00:00:00 2001 From: Lei OT Date: Tue, 30 Jan 2024 10:39:47 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=9A=E8=AF=9D=E6=97=A0=E8=AE=A2=E5=8D=95?= =?UTF-8?q?=E6=97=B6=E7=9A=84=E5=88=87=E6=8D=A2;=20=E6=B5=8B=E8=AF=95?= =?UTF-8?q?=E5=9C=B0=E5=9D=80;=20=E6=B5=8B=E8=AF=95=E4=BC=9A=E8=AF=9D;?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/msgUtils.js | 6 +- .../Conversations/ConversationContext.js | 102 +++++++++++++----- src/views/Conversations/ChatWindow.jsx | 9 +- .../Components/ConversationsList.jsx | 20 ++-- .../Components/CustomerProfile.jsx | 8 +- .../Conversations/Components/InputBox.jsx | 33 +++--- .../Components/LocalTimeClock.jsx | 6 ++ .../Conversations/ConversationProvider.jsx | 4 +- 8 files changed, 124 insertions(+), 64 deletions(-) diff --git a/src/lib/msgUtils.js b/src/lib/msgUtils.js index 2efdb4f..1d93a3d 100644 --- a/src/lib/msgUtils.js +++ b/src/lib/msgUtils.js @@ -82,7 +82,7 @@ const whatsappMsgMapped = { // console.log('_r', _r); // return parseRenderMessageItem(contentObj); }, - contentToUpdate: (msgcontent) => ({ ...msgcontent, id: msgcontent.id, status: msgcontent.status }), + contentToUpdate: (msgcontent) => ({ ...msgcontent, id: msgcontent.wamid, status: msgcontent.status }), }, }; export const receivedMsgTypeMapped = { @@ -199,6 +199,6 @@ export const parseRenderMessageList = (messages) => { * WhatsApp Templates params */ export const whatsappTemplatesParamMapped = { - 'say_hello': [['customer_name']], - 'asia_highlights_has_receive_your_inquiry': [['agent_name']], + 'asia_highlights_has_receive_your_inquiry': [['customer_name']], + 'hello_from_asia_highlights': [['agent_name']], // todo: }; diff --git a/src/stores/Conversations/ConversationContext.js b/src/stores/Conversations/ConversationContext.js index faaf99e..b1079fd 100644 --- a/src/stores/Conversations/ConversationContext.js +++ b/src/stores/Conversations/ConversationContext.js @@ -18,7 +18,8 @@ export async function fetchJSON(url, data) { return await response.json(); } -const API_HOST = 'http://202.103.68.144:8888'; +// const API_HOST = 'http://202.103.68.144:8888'; +const API_HOST = 'https://p9axztuwd7x8a7.mycht.cn/whatsapp_callback'; export const useConversations = ({loginUser, realtimeAPI}) => { const { userId } = loginUser; @@ -28,7 +29,7 @@ export const useConversations = ({loginUser, realtimeAPI}) => { const [activeConversations, setActiveConversations] = useState({}); // all active conversation const [currentID, setCurrentID] = useState(); const [conversationsList, setConversationsList] = useState([]); // open conversations - const [currentConversation, setCurrentConversation] = useState({ id: '', customer_name: '', order_sn: '' }); + const [currentConversation, setCurrentConversation] = useState({ sn: '', customer_name: '', coli_sn: '' }); const currentConversationRef = useRef(currentConversation); useEffect(() => { currentConversationRef.current = currentConversation; @@ -67,13 +68,16 @@ export const useConversations = ({loginUser, realtimeAPI}) => { const getConversationsList = async () => { - const data = await fetchJSON('http://127.0.0.1:4523/m2/3888351-0-default/142426823'); - const dataMapped = data.reduce((r, v) => ({ ...r, [v.id]: [] }), {}); - setConversationsList(data); + const { result: data } = await fetchJSON(`${API_HOST}/getconversations`, { opisn: userId }); + // const _data = []; + const _data = testConversations; + const list = [..._data, ...data]; + const dataMapped = list.reduce((r, v) => ({ ...r, [v.sn]: [] }), {}); + setConversationsList(list); setActiveConversations({...dataMapped, ...activeConversations}); - console.log(data, dataMapped); - if (data && data.length) { - switchConversation(data[0]); + console.log(list, dataMapped); + if (list && list.length) { + switchConversation(list[0]); } }; @@ -88,28 +92,43 @@ export const useConversations = ({loginUser, realtimeAPI}) => { const [customerOrderProfile, setCustomerProfile] = useState({}); const getCustomerProfile = async (colisn) => { - const data = await fetchJSON(`${API_HOST}/getorderinfo`, { colisn }); - setCustomerProfile(data.result?.[0] || {}); + const { result } = await fetchJSON(`${API_HOST}/getorderinfo`, { colisn }); + const data = result?.[0] || {}; + setCustomerProfile(data); + + if (!isEmpty(data.conversation)) { + setConversationsList((pre) => [...data.conversations, ...pre]); + setCurrentConversation(data.conversation[0]); + const thisCMapped = data.conversation.reduce((r, v) => ({ ...r, [v.sn]: [] }), {}); + setActiveConversations((pre) => ({ ...pre, ...thisCMapped })); + setMessages([]); // todo: 获取当前会话的历史消息 + } else { + // reset chat window + setMessages([]); + setCurrentConversation({ sn: '', customer_name: '', coli_sn: '' }); + // todo: 加入新会话 + } }; const switchConversation = (cc) => { - setCurrentID(cc.id); - setCurrentConversation(cc); - // const _all = []; - const _all = all.map((ele) => receivedMsgTypeMapped['whatsapp.inbound_message.received'].contentToRender(ele)); // debug: 0 - // todo: update msg status - // const _all = all2.map((ele) => receivedMsgTypeMapped['whatsapp.message.updated'].contentToRender(ele)); // debug: 0 - setMessages([..._all, ...(activeConversations[cc.id] || [])]); + setCurrentID(cc.sn); + setCurrentConversation({...cc, id: cc.sn, customer_name: cc.whatsapp_name}); // Get customer profile when switching conversation // getCustomerProfile(??); }; // Get customer profile when switching conversation - // useEffect(() => { - // const colisn = currentConversation.order_sn; - // getCustomerProfile(colisn); - // return () => {}; - // }, [currentConversation]); + useEffect(() => { + console.log('currentConversation', currentConversation); + // const colisn = currentConversation.coli_sn; + // getCustomerProfile(colisn); + const _all = []; + // const _all = all.map((ele) => receivedMsgTypeMapped['whatsapp.inbound_message.received'].contentToRender(ele)); // debug: 0 + // todo: update msg status + // const _all = all2.map((ele) => receivedMsgTypeMapped['whatsapp.message.updated'].contentToRender(ele)); // debug: 0 + setMessages([..._all, ...(activeConversations[currentID] || [])]); + return () => {}; + }, [currentConversation]); /** * ***************************************************************************************************** @@ -149,7 +168,7 @@ export const useConversations = ({loginUser, realtimeAPI}) => { const addMessage = (message) => { setMessages((prevMessages) => [...prevMessages, message]); - addMessageToConversations(currentConversationRef.current.id, message); + addMessageToConversations(currentConversationRef.current.sn, message); }; const updateMessage = (message) => { @@ -164,7 +183,7 @@ export const useConversations = ({loginUser, realtimeAPI}) => { return targetMsgs; }); // 更新会话中的消息 - const targetId = currentConversationRef.current.id; + const targetId = currentConversationRef.current.sn; setActiveConversations((prevList) => ({ ...prevList, [targetId]: targetMsgs, @@ -565,3 +584,38 @@ const AllTemplates = [ 'statusUpdateEvent': 'APPROVED', }, ]; + +const testConversations = [ + { + 'sn': 3001, + 'opi_sn': 354, + 'coli_sn': 0, + 'whatsapp_phone_number': '+8618777396951', + "last_received_time": new Date().toDateString(), + "last_send_time": new Date().toDateString(), + 'unread_msg_count': Math.floor(Math.random() * (100 - 2 + 1) + 2), + 'whatsapp_name': 'LiaoYijun', + 'customer_name': 'LiaoYijun', + }, + { + 'sn': 3002, + 'opi_sn': 354, + 'coli_sn': 0, + 'whatsapp_phone_number': '+8613317835586', + "last_received_time": new Date().toDateString(), + "last_send_time": new Date().toDateString(), + 'unread_msg_count': Math.floor(Math.random() * (100 - 2 + 1) + 2), + 'whatsapp_name': 'QinQianSheng', + 'customer_name': 'QinQianSheng', + }, + // { + // 'sn': 3003, + // 'opi_sn': 354, + // 'coli_sn': 240129003, + // 'whatsapp_phone_number': '+8618777396951', + // "last_received_time": new Date().toDateString(), + // "last_send_time": new Date().toDateString(), + // 'unread_msg_count': Math.floor(Math.random() * (100 - 2 + 1) + 2), + // 'whatsapp_name': 'LeiYuanTing', + // }, +]; diff --git a/src/views/Conversations/ChatWindow.jsx b/src/views/Conversations/ChatWindow.jsx index b7be945..e121bcd 100644 --- a/src/views/Conversations/ChatWindow.jsx +++ b/src/views/Conversations/ChatWindow.jsx @@ -11,9 +11,6 @@ import { useConversationContext } from '@/stores/Conversations/ConversationConte import './Conversations.css'; import { useAuthContext } from '@/stores/AuthContext.js'; -import dayjs from 'dayjs'; -import utc from 'dayjs-plugin-utc'; -dayjs.extend(utc); const { Sider, Content, Header, Footer } = Layout; @@ -47,15 +44,15 @@ const ChatWindow = (() => {
- {currentConversation.customer_name} + {currentConversation.customer_name} - {/* {contact?.phone} */} + {currentConversation.whatsapp_phone_number} - {order?.location} + {/* {order?.location} */} {/* {customerDateTime} */} diff --git a/src/views/Conversations/Components/ConversationsList.jsx b/src/views/Conversations/Components/ConversationsList.jsx index 203bcbd..a8fe23c 100644 --- a/src/views/Conversations/Components/ConversationsList.jsx +++ b/src/views/Conversations/Components/ConversationsList.jsx @@ -16,12 +16,14 @@ const Conversations = (() => { setChatlist( (conversationsList || []).map((item) => ({ ...item, - avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${item.customer_name}`, - alt: item.customer_name, - title: item.customer_name, - subtitle: item.lastMessage, - date: item.last_time, - unread: item.new_msgs, + avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${item.whatsapp_name}`, + alt: item.whatsapp_name, + id: item.sn, + title: item.whatsapp_name, + subtitle: item.whatsapp_phone_number, + // subtitle: item.lastMessage, + date: item.last_received_time, // last_send_time + unread: item.unread_msg_count, })) ); @@ -30,12 +32,14 @@ const Conversations = (() => { const onSwitchConversation = (item) => { switchConversation(item); - navigate(`/order/chat/${item.order_sn}`, { replace: true }); + if (item.coli_sn) { + navigate(`/order/chat/${item.coli_sn}`, { replace: true }); + } } return ( <> - onSwitchConversation(item)} /> + onSwitchConversation(item)} /> ); }); diff --git a/src/views/Conversations/Components/CustomerProfile.jsx b/src/views/Conversations/Components/CustomerProfile.jsx index b52699e..c61638d 100644 --- a/src/views/Conversations/Components/CustomerProfile.jsx +++ b/src/views/Conversations/Components/CustomerProfile.jsx @@ -1,13 +1,7 @@ import { Card, Flex, Avatar, Typography, Radio, Button, Table } from 'antd'; import { useAuthContext } from '@/stores/AuthContext.js'; import { useConversationContext } from '@/stores/Conversations/ConversationContext'; -import { - HomeOutlined, - LoadingOutlined, - SettingFilled, - SmileOutlined, - SyncOutlined,PhoneOutlined,MailOutlined -} from '@ant-design/icons'; +import { HomeOutlined, LoadingOutlined, SettingFilled, SmileOutlined, SyncOutlined, PhoneOutlined, MailOutlined } from '@ant-design/icons'; import CreatePayment from './CreatePayment'; import QuotesHistory from './QuotesHistory'; diff --git a/src/views/Conversations/Components/InputBox.jsx b/src/views/Conversations/Components/InputBox.jsx index cfbb65b..55249ed 100644 --- a/src/views/Conversations/Components/InputBox.jsx +++ b/src/views/Conversations/Components/InputBox.jsx @@ -11,13 +11,15 @@ const InputBox = (({ onSend }) => { const { currentConversation, templates } = useConversationContext(); const [textContent, setTextContent] = useState(''); + const talkabled = ! isEmpty( currentConversation.sn); + const handleSendText = () => { if (typeof onSend === 'function' && textContent.trim() !== '') { const msgObj = { type: 'text', text: textContent, sender: 'me', - to: currentConversation.channel_id, + to: currentConversation.whatsapp_phone_number, id: `${currentConversation.id}.${uuid()}`, // Date.now().toString(16), date: new Date(), status: 'waiting', @@ -33,7 +35,7 @@ const InputBox = (({ onSend }) => { const _conversation = {...cloneDeep(currentConversation), }; const msgObj = { type: 'whatsappTemplate', - to: currentConversation.channel_id, + to: currentConversation.whatsapp_phone_number, id: `${currentConversation.id}.${uuid()}`, date: new Date(), status: 'waiting', @@ -46,16 +48,17 @@ const InputBox = (({ onSend }) => { ? { components: [ { 'type': 'body', - 'parameters': [ - { - 'type': 'text', - 'text': getNestedValue(_conversation, whatsappTemplatesParamMapped[fromTemplate.name][0]) , - }, - { // debug: - 'type': 'text', - 'text': getNestedValue(_conversation, whatsappTemplatesParamMapped[fromTemplate.name]?.[1] || whatsappTemplatesParamMapped[fromTemplate.name][0]) , - }, - ], + '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]) , + // }, + // ], }, ], } : {}), @@ -92,14 +95,14 @@ const InputBox = (({ onSend }) => { )} /> } - title='📋模板消息' + title='🙋打招呼' trigger='click' open={openTemplates} onOpenChange={handleOpenChange}> {/* */} -