From 00b8f940dc0ae0e8781607632b99e53f471f9941 Mon Sep 17 00:00:00 2001 From: Lei OT Date: Mon, 23 Sep 2024 16:38:22 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=82=AE=E4=BB=B6=E9=98=85=E8=AF=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/archive-fill.svg | 1 + src/assets/icons/archive-line.svg | 1 + src/assets/icons/attachment-fill.svg | 1 + src/assets/icons/attachment-line.svg | 1 + src/assets/icons/flag-2-fill.svg | 1 + src/assets/icons/flag-2-line.svg | 1 + src/assets/icons/mail-line.svg | 1 + src/assets/icons/mail-open-line.svg | 1 + src/assets/icons/price-tag-3-fill.svg | 1 + src/assets/icons/price-tag-3-line.svg | 1 + src/assets/icons/reply-all-fill.svg | 1 + src/assets/icons/reply-all-line.svg | 1 + src/assets/icons/reply-fill.svg | 1 + src/assets/icons/reply-line.svg | 1 + src/assets/icons/share-forward-fill.svg | 1 + src/assets/icons/share-forward-line.svg | 1 + src/components/Icons.jsx | 15 +++ src/components/LexicalEditor/styles.css | 7 + src/utils/commons.js | 3 +- .../Online/Components/BubbleEmail.jsx | 7 +- .../Online/Components/emailRe.json | 2 +- .../Online/Input/EmailDetail.jsx | 125 ++++++++++++++++++ .../Conversations/Online/MessagesList.jsx | 2 +- .../Conversations/Online/MessagesWrapper.jsx | 11 ++ tailwind.config.js | 1 + vite.config.js | 2 +- 26 files changed, 184 insertions(+), 7 deletions(-) create mode 100644 src/assets/icons/archive-fill.svg create mode 100644 src/assets/icons/archive-line.svg create mode 100644 src/assets/icons/attachment-fill.svg create mode 100644 src/assets/icons/attachment-line.svg create mode 100644 src/assets/icons/flag-2-fill.svg create mode 100644 src/assets/icons/flag-2-line.svg create mode 100644 src/assets/icons/mail-line.svg create mode 100644 src/assets/icons/mail-open-line.svg create mode 100644 src/assets/icons/price-tag-3-fill.svg create mode 100644 src/assets/icons/price-tag-3-line.svg create mode 100644 src/assets/icons/reply-all-fill.svg create mode 100644 src/assets/icons/reply-all-line.svg create mode 100644 src/assets/icons/reply-fill.svg create mode 100644 src/assets/icons/reply-line.svg create mode 100644 src/assets/icons/share-forward-fill.svg create mode 100644 src/assets/icons/share-forward-line.svg create mode 100644 src/views/Conversations/Online/Input/EmailDetail.jsx diff --git a/src/assets/icons/archive-fill.svg b/src/assets/icons/archive-fill.svg new file mode 100644 index 0000000..7075ffe --- /dev/null +++ b/src/assets/icons/archive-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/archive-line.svg b/src/assets/icons/archive-line.svg new file mode 100644 index 0000000..e063d6f --- /dev/null +++ b/src/assets/icons/archive-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/attachment-fill.svg b/src/assets/icons/attachment-fill.svg new file mode 100644 index 0000000..d76c534 --- /dev/null +++ b/src/assets/icons/attachment-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/attachment-line.svg b/src/assets/icons/attachment-line.svg new file mode 100644 index 0000000..1043644 --- /dev/null +++ b/src/assets/icons/attachment-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/flag-2-fill.svg b/src/assets/icons/flag-2-fill.svg new file mode 100644 index 0000000..2fc5b4e --- /dev/null +++ b/src/assets/icons/flag-2-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/flag-2-line.svg b/src/assets/icons/flag-2-line.svg new file mode 100644 index 0000000..10807cd --- /dev/null +++ b/src/assets/icons/flag-2-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/mail-line.svg b/src/assets/icons/mail-line.svg new file mode 100644 index 0000000..63fdbac --- /dev/null +++ b/src/assets/icons/mail-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/mail-open-line.svg b/src/assets/icons/mail-open-line.svg new file mode 100644 index 0000000..b6b1027 --- /dev/null +++ b/src/assets/icons/mail-open-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/price-tag-3-fill.svg b/src/assets/icons/price-tag-3-fill.svg new file mode 100644 index 0000000..c42d21d --- /dev/null +++ b/src/assets/icons/price-tag-3-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/price-tag-3-line.svg b/src/assets/icons/price-tag-3-line.svg new file mode 100644 index 0000000..1d0485c --- /dev/null +++ b/src/assets/icons/price-tag-3-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/reply-all-fill.svg b/src/assets/icons/reply-all-fill.svg new file mode 100644 index 0000000..7956f37 --- /dev/null +++ b/src/assets/icons/reply-all-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/reply-all-line.svg b/src/assets/icons/reply-all-line.svg new file mode 100644 index 0000000..1784225 --- /dev/null +++ b/src/assets/icons/reply-all-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/reply-fill.svg b/src/assets/icons/reply-fill.svg new file mode 100644 index 0000000..c253dd0 --- /dev/null +++ b/src/assets/icons/reply-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/reply-line.svg b/src/assets/icons/reply-line.svg new file mode 100644 index 0000000..6b51857 --- /dev/null +++ b/src/assets/icons/reply-line.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/share-forward-fill.svg b/src/assets/icons/share-forward-fill.svg new file mode 100644 index 0000000..a39019d --- /dev/null +++ b/src/assets/icons/share-forward-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/share-forward-line.svg b/src/assets/icons/share-forward-line.svg new file mode 100644 index 0000000..1514fca --- /dev/null +++ b/src/assets/icons/share-forward-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Icons.jsx b/src/components/Icons.jsx index 1ad9232..db668be 100644 --- a/src/components/Icons.jsx +++ b/src/components/Icons.jsx @@ -1,4 +1,19 @@ import Icon from '@ant-design/icons'; + +import ReplyLineSVG from '@/assets/icons/reply-line.svg?react'; +import ReplyAllLineSVG from '@/assets/icons/reply-all-line.svg?react'; +import AttachmentLineSVG from '@/assets/icons/attachment-line.svg?react'; +import AttachmentFillSVG from '@/assets/icons/attachment-fill.svg?react'; +// import ShareForwardFillSVG from '@/assets/icons/share-forward-fill.svg?react'; +import ShareForwardLineSVG from '@/assets/icons/share-forward-line.svg?react'; + + +export const ReplyIcon = (props) => ; +export const ReplyAllIcon = (props) => ; +export const AttachmentIcon = (props) => ; +export const AttachmentFillIcon = (props) => ; +export const ShareForwardIcon = (props) => ; + const WABSvg = () => ( return result; }; -export const stringToColour = (str, withFlag = true) => { +export const stringToColour = (str='', withFlag = true) => { var hash = 0 + if (str.length === 0) return hash; for (let i = 0; i < str.length; i++) { hash = str.charCodeAt(i) + ((hash << 5) - hash) } diff --git a/src/views/Conversations/Online/Components/BubbleEmail.jsx b/src/views/Conversations/Online/Components/BubbleEmail.jsx index 19fd751..5b0a93c 100644 --- a/src/views/Conversations/Online/Components/BubbleEmail.jsx +++ b/src/views/Conversations/Online/Components/BubbleEmail.jsx @@ -4,7 +4,7 @@ import { MailFilled, MailOutlined, WhatsAppOutlined } from '@ant-design/icons'; import { MessageBox } from 'react-chat-elements'; import { groupBy, isEmpty, } from '@/utils/commons'; -const ChatboxEmail = ({ onOpenEditor, ...message }) => { +const ChatboxEmail = ({ onOpenEditor, onOpenEmail, ...message }) => { const RenderText = memo(function renderText({ className, email, sender }) { return ( @@ -19,8 +19,9 @@ const ChatboxEmail = ({ onOpenEditor, ...message }) => { }); const handlePreview = (message) => { console.log('handlePreview'); - - alert('on click: open email') + if (typeof onOpenEmail === 'function') { + onOpenEmail(message); + } } return ( We are offering US$50 voucher per person for our guests to join our Highlights Travel Family loyalty group on Facebook: https://www.facebook.com/groups/ghloyaltyclub .  If you two joined the group, you can save USD$ 100.  The discount will be cut from the balance later.

", "abstract": "阿坝州九寨岷江国际旅行社有限责任公司……", "replyToEmail": "ycc@hainatravel.com", "replyToName": "YCC", diff --git a/src/views/Conversations/Online/Input/EmailDetail.jsx b/src/views/Conversations/Online/Input/EmailDetail.jsx new file mode 100644 index 0000000..5168e8a --- /dev/null +++ b/src/views/Conversations/Online/Input/EmailDetail.jsx @@ -0,0 +1,125 @@ +import { createContext, useEffect, useState } from 'react'; +import { Button, Divider, Avatar } from 'antd'; +import { DeleteOutlined } from '@ant-design/icons'; +import Modal from '@dckj/react-better-modal'; +import { Avatar as Avatar1 } from 'react-chat-elements'; +import { ReplyIcon, ShareForwardIcon } from '@/components/Icons'; +import { isEmpty, olog, stringToColour } from '@/utils/commons'; + +const TagColorStyle = (tag) => { + const color = stringToColour(tag); + return { color: `${color}`, borderColor: `${color}66`, backgroundColor: `${color}0D` }; +}; +const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => { + let { emailOrigin } = emailDetail; + emailOrigin = emailOrigin || {}; + // const [open, setOpen] = useState(false); + function onHandleMove(e) { + console.log(e, '--->>> onHandleMove'); + } + function onHandleResize(e) { + console.log(e, '--->>> onHandleResize'); + } + + function onHandleOk() { + console.log('onOk callback'); + } + + function onHandleCancel() { + console.log('onCancel callback'); + setOpen(false); + } + function onStageChange({ state }) { + console.log(state); + } + return ( + <> + } + onMove={onHandleMove} + onResize={onHandleResize} + onCancel={onHandleCancel} + // onOk={onHandleOk} + onStageChange={onStageChange} + footer={null}> + {/* email toolbar */} +
+ {/*
+ +
*/} + {/*
{emailOrigin.subject}
*/} +
+
+
+ + {(emailOrigin.fromName || '').substring(0, 1)} + + {emailOrigin.fromName} + <{emailOrigin.fromEmail}> +
+
+
+ + +
+ {/*
{emailDetail.dateText}
*/} +
{emailDetail.localDate}
+
+
+
+ 收件人: + {emailOrigin.toName} +   <{emailOrigin.toEmail}> +
+ {emailOrigin.cc && ( +
+ 抄送: + {emailOrigin.cc} +
+ )} + {emailOrigin.bcc && ( +
+ 密送: + {emailOrigin.bcc} +
+ )} + {/*
+ 主题: + {emailOrigin.subject} +
*/} + + {/*
{emailOrigin.body}
*/} +
+ {/*
{emailOrigin.attachments.map(attachment =>
{attachment.name}
)}
*/} +
+
+ + + ); +}; +export default EmailDetail; diff --git a/src/views/Conversations/Online/MessagesList.jsx b/src/views/Conversations/Online/MessagesList.jsx index 7c3bf32..3c71925 100644 --- a/src/views/Conversations/Online/MessagesList.jsx +++ b/src/views/Conversations/Online/MessagesList.jsx @@ -46,7 +46,7 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
{props.whatsapp_msg_type && } - {props.type === 'email' && } + {props.type === 'email' && }
)); diff --git a/src/views/Conversations/Online/MessagesWrapper.jsx b/src/views/Conversations/Online/MessagesWrapper.jsx index d4655ac..2ad4bab 100644 --- a/src/views/Conversations/Online/MessagesWrapper.jsx +++ b/src/views/Conversations/Online/MessagesWrapper.jsx @@ -11,6 +11,7 @@ import emailItem from './Components/emailSent.json'; import emailReItem from './Components/emailRe.json'; import EmailEditor from './Input/EmailEditor'; import EmailEditorPopup from './Input/EmailEditorPopup'; +import EmailDetail from './Input/EmailDetail'; const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => { const userId = useAuthStore((state) => state.loginUser.userId); @@ -133,6 +134,14 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => { setOpenEmailEditor(true); setFromEmail(email_addr); }; + + const [openEmailDetail, setOpenEmailDetail] = useState(false); + const [emailDetail, setEmailDetail] = useState({}); + const onOpenEmail = (email_detail) => { + setOpenEmailDetail(true); + setEmailDetail(email_detail); + } + return ( <> { loadNextPage: currentConversation?.loadNextPage ?? true, onOpenEditor, setRefernce: setReferEmailMsg, + onOpenEmail, }} /> { /> {/* */} + ); }; diff --git a/tailwind.config.js b/tailwind.config.js index d7d5084..63ceb29 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -30,6 +30,7 @@ export default { // 'responsive':repeat(autofill,minmax('300px',1fr)) // } boxShadow: { + '1md': '0 0 4px 2px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', 'heavy': '0 1px 7px 1px rgba(0, 0, 0, 0.3)', '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)', } diff --git a/vite.config.js b/vite.config.js index 5afb2c9..b3776a5 100644 --- a/vite.config.js +++ b/vite.config.js @@ -146,7 +146,7 @@ export default defineConfig({ __BUILD_DATE__: JSON.stringify(`${today}`), __BUILD_VERSION__: JSON.stringify(`${packageJson.version}`), }, - plugins: [react(), WindiCSS(), buildDatePlugin(), VitePWA(manifestForPWAPlugIn), svgr()], + plugins: [ svgr(), react(), WindiCSS(), buildDatePlugin(), VitePWA(manifestForPWAPlugIn), ], server: { host: '0.0.0.0', },