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

会话无订单时的切换; 测试地址; 测试会话;

Browse Source
dev/chat
Lei OT 2 years ago
parent b91314db0f
commit d0ea6c8b7b
8 changed files with 124 additions and 64 deletions
Show Stats Download Patch File Download Diff File

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

@ -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:
};

100
src/stores/Conversations/ConversationContext.js
Unescape Escape View File

@ -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;
useEffect(() => {
console.log('currentConversation', currentConversation);
// const colisn = currentConversation.coli_sn;
// getCustomerProfile(colisn);
// return () => {};
// }, [currentConversation]);
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',
// },
];

9
src/views/Conversations/ChatWindow.jsx
Unescape Escape View File

@ -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 = (() => {
<Layout className='h-full'>
<Header className='ant-layout-sider-light ant-card p-1 h-auto'>
<Flex gap={16}>
<Avatar src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${currentConversation.customer_name}`}>{currentConversation.customer_name}</Avatar>
<Avatar src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${currentConversation.customer_name}`} />
<Flex flex={'1'} justify='space-between'>
<Flex vertical={true} justify='space-between'>
<Typography.Text strong>{currentConversation.customer_name}</Typography.Text>
{/* <Typography.Text>{contact?.phone}</Typography.Text> */}
<Typography.Text>{currentConversation.whatsapp_phone_number}</Typography.Text>
</Flex>
<Flex vertical={true} justify='space-between'>
<Typography.Text>
<LocalTimeClock /> <Typography.Text strong>{order?.location} </Typography.Text>
{/* <LocalTimeClock /> <Typography.Text strong>{order?.location} </Typography.Text> */}
</Typography.Text>
{/* <Typography.Text>{customerDateTime}</Typography.Text> */}
</Flex>

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

@ -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 (
<>
<ChatList className='chat-list' dataSource={chatlist} onClick={(item) => onSwitchConversation(item)} />
<ChatList className='' dataSource={chatlist} onClick={(item) => onSwitchConversation(item)} />
</>
);
});

8
src/views/Conversations/Components/CustomerProfile.jsx
Unescape Escape View File

@ -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';

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

@ -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}>
{/* <Button type="primary">Click me</Button> */}
<Button type='primary' shape='circle' icon={<MessageOutlined />} size={'large'} />
<Button type='primary' shape='circle' icon={<MessageOutlined />} size={'large'} disabled={!talkabled} />
</Popover>
<Input.Search
<Input.Search disabled={!talkabled}
placeholder='Type message here'
enterButton='Send'
size='large'

6
src/views/Conversations/Components/LocalTimeClock.jsx
Unescape Escape View File

@ -1,6 +1,12 @@
import { useEffect, useState } from 'react';
import { Typography } from 'antd';
import { useConversationContext } from '@/stores/Conversations/ConversationContext';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
dayjs.extend(utc);
dayjs.extend(timezone);
const LocalTimeClock = ((props) => {
const { customerOrderProfile: orderInfo } = useConversationContext();

4
src/views/Conversations/ConversationProvider.jsx
Unescape Escape View File

@ -3,7 +3,9 @@ import { ConversationContext, useConversations, } from '@/stores/Conversations/C
import { AuthContext } from '@/stores/AuthContext';
import { RealTimeAPI } from '@/lib/realTimeAPI';
const WS_URL = 'ws://202.103.68.157:8888/whatever/';
// const WS_URL = 'ws://202.103.68.144:8888/whatever/';
// const WS_URL = 'ws://120.79.9.217:10022/whatever/';
const WS_URL = 'wss://p9axztuwd7x8a7.mycht.cn/whatsapp_callback'; // prod:
export const ConversationProvider = ({ children, loginUser, realtimeAPI }) => {

Write Preview
Loading…
Cancel
Save