对话窗口; 发送文本; 解析WhatsApp信息各类型
Lei OT
2 years ago
parent
ab124d9be3
commit
70fbcae715
@ -0,0 +1,111 @@
|
||||
export const sentMsgTypeMapped = {
|
||||
text: {
|
||||
type: 'text',
|
||||
contentToSend: (msg) => ({ type: 'text', from: '+8617607730395', to: '', text: { body: msg.text } }),
|
||||
contentToRender: (msg) => ({...msg}),
|
||||
},
|
||||
whatsappTemplate: {
|
||||
type: 'template',
|
||||
contentToSend: (msg) => ({
|
||||
template: {
|
||||
namespace: msg.whatsappTemplate.namespace,
|
||||
language: msg.whatsappTemplate.language,
|
||||
type: msg.whatsappTemplate.type,
|
||||
components: msg.whatsappTemplate.components,
|
||||
},
|
||||
}),
|
||||
},
|
||||
};
|
||||
export const whatsappMsgMapped = {
|
||||
'whatsapp.inbound_message.received': {
|
||||
getMsg: (result) => {
|
||||
console.log('whatsapp.inbound_message.received', result);
|
||||
return result?.whatsappInboundMessage || null;
|
||||
},
|
||||
contentToRender: (result) => {
|
||||
console.log( 'whatsapp.inbound_message.received', result);
|
||||
const contentObj = result?.whatsappInboundMessage || result; // debug:
|
||||
return parseRenderMessageItem(contentObj);
|
||||
},
|
||||
},
|
||||
};
|
||||
export const whatsappMsgTypeMapped = {
|
||||
text: { type: 'text', data: (msg) => ({ text: msg.text.body }) },
|
||||
image: {
|
||||
type: 'photo',
|
||||
data: (msg) => ({
|
||||
data: {
|
||||
uri: msg.image.link,
|
||||
width: 200,
|
||||
height: 200,
|
||||
alt: '',
|
||||
},
|
||||
onOpen: () => {
|
||||
console.log('Open image', msg.image.link);
|
||||
},
|
||||
}),
|
||||
},
|
||||
sticker: {
|
||||
type: 'photo',
|
||||
data: (msg) => ({
|
||||
data: {
|
||||
uri: msg.sticker.link,
|
||||
width: 150,
|
||||
height: 120,
|
||||
alt: '',
|
||||
},
|
||||
}),
|
||||
},
|
||||
video: {
|
||||
type: 'video',
|
||||
data: (msg) => ({
|
||||
data: {
|
||||
videoURL: msg.video.link,
|
||||
status: {
|
||||
click: true,
|
||||
loading: 0,
|
||||
download: true,
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
audio: {
|
||||
type: 'audio',
|
||||
data: (msg) => ({
|
||||
data: {
|
||||
audioURL: msg.audio.link,
|
||||
},
|
||||
}),
|
||||
},
|
||||
'unsupported': { type: 'system', data: (msg) => ({ text: 'Message type is currently not supported.' }) },
|
||||
// 'unsupported': { type: 'text', data: (msg) => ({ text: 'Message type is currently not supported.' }) }
|
||||
// file: 'file',
|
||||
// location: 'location',
|
||||
// contact: 'contact',
|
||||
// 'contact-card': 'contact-card',
|
||||
// 'contact-card-with-photo': 'contact-card-with-photo',
|
||||
// 'contact-card-with-photo-and-label': 'contact-card-with-photo-and-label',
|
||||
};
|
||||
export const parseRenderMessageItem = (msg) => {
|
||||
console.log(msg, '[[[[');
|
||||
return {
|
||||
...(whatsappMsgTypeMapped?.[msg.type]?.data(msg) || {}),
|
||||
id: msg.id,
|
||||
sender: msg.from,
|
||||
type: whatsappMsgTypeMapped?.[msg.type]?.type || 'text',
|
||||
// title: msg.customerProfile.name,
|
||||
date: msg.sendTime,
|
||||
};
|
||||
};
|
||||
export const parseRenderMessageList = (messages) => {
|
||||
return messages.map((msg) => {
|
||||
return {
|
||||
...(whatsappMsgTypeMapped?.[msg.type]?.data(msg) || {}),
|
||||
id: msg.id,
|
||||
sender: msg.from,
|
||||
type: whatsappMsgTypeMapped?.[msg.type]?.type || 'text',
|
||||
// title: msg.customerProfile.name,
|
||||
date: msg.sendTime,
|
||||
};
|
||||
});
|
||||
};
|
||||
@ -0,0 +1,33 @@
|
||||
import { createContext, useContext, useEffect, useState } from 'react';
|
||||
import { observer } from "mobx-react";
|
||||
import { Popover, Flex, Button } from 'antd';
|
||||
|
||||
const CreatePayment = observer((props) => {
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpenChange = (newOpen) => {
|
||||
setOpen(newOpen);
|
||||
};
|
||||
const onSend = () => {
|
||||
setOpen(false);
|
||||
// todo: send
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Popover
|
||||
// content={<a onClick={hide}>Close</a>}
|
||||
content={
|
||||
<Flex></Flex>
|
||||
}
|
||||
title='🔗付款链接'
|
||||
trigger='click'
|
||||
open={open}
|
||||
onOpenChange={handleOpenChange}>
|
||||
{/* <Button type="primary">Click me</Button> */}
|
||||
{/* <Button type='primary' shape='circle' icon={<></>} size={'large'} /> */}
|
||||
<Button size={'small'}>Book</Button>
|
||||
</Popover>
|
||||
</>
|
||||
);
|
||||
});
|
||||
export default CreatePayment;
|
||||
@ -0,0 +1,39 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Typography } from 'antd';
|
||||
import { useConversationContext } from '@/stores/ConversationContext';
|
||||
|
||||
const LocalTimeClock = observer((props) => {
|
||||
const { customerOrderProfile: orderInfo } = useConversationContext();
|
||||
|
||||
const [customerDateTime, setCustomerDateTime] = useState();
|
||||
|
||||
// todo: 用dayjs 显示指定时区的时间
|
||||
useEffect(() => {
|
||||
const intervalId = setInterval(() => {
|
||||
// if (customerProfile && customerProfile.timezone) {
|
||||
const date = new Date();
|
||||
const options = {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: 'numeric',
|
||||
second: 'numeric',
|
||||
hour12: true,
|
||||
};
|
||||
const formatter = new Intl.DateTimeFormat('cn-ZH', options); // todo:
|
||||
setCustomerDateTime(formatter.format(date));
|
||||
// }
|
||||
}, 1000); // Update every second
|
||||
|
||||
// Cleanup function to clear the interval when the component is unmounted
|
||||
return () => clearInterval(intervalId);
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<Typography.Text>{customerDateTime}</Typography.Text>
|
||||
</>
|
||||
);
|
||||
});
|
||||
export default LocalTimeClock;
|
||||
@ -0,0 +1,63 @@
|
||||
import { createContext, useContext, useEffect, useState } from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Popover, Flex, Button, List, Popconfirm } from 'antd';
|
||||
|
||||
const CreatePayment = observer((props) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpenChange = (newOpen) => {
|
||||
setOpen(newOpen);
|
||||
};
|
||||
const onSend = () => {
|
||||
setOpen(false);
|
||||
// todo: send
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Popover
|
||||
// content={<a onClick={hide}>Close</a>}
|
||||
content={
|
||||
<List
|
||||
className='w-96 h-4/6 overflow-y-auto text-slate-900'
|
||||
itemLayout='horizontal'
|
||||
dataSource={[
|
||||
{ key: 1, title: 'XXX' },
|
||||
{ key: 11, title: 'ZZZZ' },
|
||||
]}
|
||||
renderItem={(item, index) => (
|
||||
<List.Item className=''>
|
||||
<List.Item.Meta
|
||||
className=' text-neutral-800'
|
||||
title={item.title}
|
||||
description={
|
||||
<Flex justify='space-between'>
|
||||
<Button onClick={onSend} size={'small'} type='link' key={'send'}>
|
||||
详细报价
|
||||
</Button>
|
||||
<Flex gap={8}>
|
||||
<Popconfirm title='删除报价信' description='确认要删除报价信吗?' onConfirm={() => {}} onCancel={onSend} okText='Yes' cancelText='No'>
|
||||
<Button size={'small'} type='link' danger key={'send'}>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
<Button onClick={onSend} size={'small'} type='link' key={'send'}>
|
||||
复制
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
}
|
||||
/>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
title='📜报价信历史'
|
||||
trigger='click'
|
||||
placement={'left'}
|
||||
open={open}
|
||||
onOpenChange={handleOpenChange}>
|
||||
<Button size={'small'}>报价历史</Button>
|
||||
</Popover>
|
||||
</>
|
||||
);
|
||||
});
|
||||
export default CreatePayment;
|
||||
Loading…
Reference in New Issue