todo: 邮件重发

src/actions/EmailActions.js

@@ -17,6 +17,9 @@ export const salesSignature = async (opisn, lgc = 1) => {
   }
 };
 
+/**
+ * 发送邮件
+ */
 export const postSendEmail = async (body) => {
   const { attaList, atta, content, ...bodyData } = body;
   const formData = new FormData();
@@ -30,7 +33,11 @@ export const postSendEmail = async (body) => {
   return result;
 };
 
-export const postResendEmail = async (body) => {
+/**
+ * 重发邮件
+ * @param {object} { mai_sn }
+ */
+export const postResendEmailAction = async (body) => {
   const { attaList, atta, content, ...bodyData } = body;
   const formData = new FormData();
   Object.keys(bodyData).forEach(function (key) {

src/assets/icons/reset-left-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12C22 17.5228 17.5229 22 12 22C6.4772 22 2 17.5228 2 12C2 6.47715 6.4772 2 12 2V4C7.5817 4 4 7.58172 4 12C4 16.4183 7.5817 20 12 20C16.4183 20 20 16.4183 20 12C20 9.53614 18.8862 7.33243 17.1346 5.86492L15 8V2L21 2L18.5535 4.44656C20.6649 6.28002 22 8.9841 22 12Z"></path></svg>

src/assets/icons/reset-left-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12C22 17.5228 17.5229 22 12 22C6.4772 22 2 17.5228 2 12C2 6.47715 6.4772 2 12 2V4C7.5817 4 4 7.58172 4 12C4 16.4183 7.5817 20 12 20C16.4183 20 20 16.4183 20 12C20 9.25022 18.6127 6.82447 16.4998 5.38451L16.5 8H14.5V2L20.5 2V4L18.0008 3.99989C20.4293 5.82434 22 8.72873 22 12Z"></path></svg>

src/assets/icons/restart-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM16.8201 17.0761C18.1628 15.8007 19 13.9981 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C13.0609 19 14.0666 18.764 14.9676 18.3417L13.9928 16.5871C13.3823 16.8527 12.7083 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12H14L16.8201 17.0761Z"></path></svg>

src/assets/icons/restart-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z"></path></svg>

src/components/Icons.jsx

@@ -10,6 +10,8 @@ import InboxSVG from '@/assets/icons/inbox-2-fill.svg?react';
 import MailSendFillSVG from '@/assets/icons/mail-send-fill.svg?react';
 import SendPlaneFillSVG from '@/assets/icons/send-plane-fill.svg?react';
 import SendPlaneLineSVG from '@/assets/icons/send-plane-line.svg?react';
+import ResendLineSVG from '@/assets/icons/reset-left-line.svg?react';
+import EditLineSVG from '@/assets/icons/quill-pen-line.svg?react';
 
 
 export const ReplyIcon = (props) => <Icon component={ReplyLineSVG} {...props} />;
@@ -21,6 +23,8 @@ export const InboxIcon = (props) => <Icon component={InboxSVG} {...props} />;
 export const MailSendIcon = (props) => <Icon component={MailSendFillSVG} {...props} />;
 export const SendPlaneFillIcon = (props) => <Icon component={SendPlaneFillSVG} {...props} />;
 export const SendPlaneLineIcon = (props) => <Icon component={SendPlaneLineSVG} {...props} />;
+export const ResendIcon = (props) => <Icon component={ResendLineSVG} {...props} />;
+export const EditIcon = (props) => <Icon component={EditLineSVG} {...props} />;
 
 const WABSvg = () => (
   <svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' width='16' height='16'>

src/views/Conversations/Online/Components/BubbleEmail.jsx

@@ -3,7 +3,7 @@ import { Button } from 'antd';
 import { MailFilled, MailOutlined, WhatsAppOutlined } from '@ant-design/icons';
 import { MessageBox } from 'react-chat-elements';
 import { groupBy, isEmpty, } from '@/utils/commons';
-import { postResendEmail } from '@/actions/EmailActions';
+// import {  } from '@/actions/EmailActions';
 
 const BubbleEmail = ({ onOpenEditor, onOpenEmail, ...message  }) => {
 
@@ -26,7 +26,7 @@ const BubbleEmail = ({ onOpenEditor, onOpenEmail, ...message  }) => {
   }
 
   const handleResend = async (emailMsgContent) => {
-    const result = await postResendEmail({ id: emailMsgContent.id, actionId: '' });
+    // const result = await postResendEmail({ id: emailMsgContent.id, actionId: emailMsgContent.actionId });
   };
   return (
     <MessageBox
@@ -48,6 +48,8 @@ const BubbleEmail = ({ onOpenEditor, onOpenEmail, ...message  }) => {
       // titleColor={message.sender !== 'me' ? '#4f46e5' : ''} // 600
       notch={false}
       position={message.sender === 'me' ? 'right' : 'left'}
+      // debug: 0 todo: 编辑器无法更新
+      replyButton={false}
       onReplyClick={() => onOpenEditor(message.msgOrigin)}
       onForwardClick={ () => { handleResend(message.msgOrigin); }}
       onOpen={() => handlePreview(message)}

src/views/Conversations/Online/Components/EmailDetail.jsx

@@ -1,12 +1,12 @@
 import { useState, useEffect } from 'react'
 import { Button, Divider, Avatar } from 'antd'
-import { ReplyIcon, ShareForwardIcon } from '@/components/Icons'
+import { EditIcon, ReplyIcon, ResendIcon, ShareForwardIcon } from '@/components/Icons'
 import { isEmpty, stringToColour } from '@/utils/commons'
 import EmailEditorPopup from '../Input/EmailEditorPopup'
 import DnDModal from '@/components/DndModal'
 import useStyleStore from '@/stores/StyleStore'
-import { getEmailDetailAction } from '@/actions/EmailActions'
-import { useEmailDetail } from '@/hooks/useEmail';
+import { useEmailDetail,  } from '@/hooks/useEmail';
+import { postResendEmailAction } from '@/actions/EmailActions';
 
 const TagColorStyle = (tag) => {
   const color = stringToColour(tag)
@@ -20,7 +20,7 @@ const TagColorStyle = (tag) => {
 const EmailDetail = ({ open, setOpen, emailMsg, ...props }) => {
 
   let { conversationid, order_opi } = emailMsg
-  const { mai_sn, id } = emailMsg.msgOrigin?.email || emailMsg.msgOrigin || {} // todo: 发送之后, 复制id, 否则详情打不开
+  const { mai_sn, id } = emailMsg.msgOrigin?.email || emailMsg.msgOrigin || {} // todo: 发送之后, 赋值id, 否则详情打不开
   const mailID = mai_sn || id
   const [initialPosition, setInitialPosition] = useState({})
   const [initialSize, setInitialSize] = useState({})
@@ -38,12 +38,10 @@ const EmailDetail = ({ open, setOpen, emailMsg, ...props }) => {
 
   const [openEmailEditor, setOpenEmailEditor] = useState(false)
   const [fromEmail, setFromEmail] = useState('')
-  const [ReferEmailMsg, setReferEmailMsg] = useState('')
   const onOpenEditor = (msgOrigin, action) => {
     const { from } = msgOrigin
     setOpenEmailEditor(true)
     setFromEmail(from)
-    setReferEmailMsg(msgOrigin)
     setAction(action)
     setOpen(false)
   }
@@ -52,24 +50,66 @@ const EmailDetail = ({ open, setOpen, emailMsg, ...props }) => {
 
   const mailData = useEmailDetail(mailID)
 
-  const ActionBtns = (props) => (
-    <div className={`flex items-center w-full ${props.className || ''}`}>
-      <Button
-        onClick={() => onOpenEditor(emailMsg.msgOrigin, 'reply')}
-        size='small'
-        type='text'
-        icon={<ReplyIcon className='text-indigo-500' />}>
-        回复
-      </Button>
-      <Button
-        onClick={() => onOpenEditor(emailMsg.msgOrigin, 'forward')}
-        size='small'
-        type='text'
-        icon={<ShareForwardIcon className='text-primary' />}>
-        转发
-      </Button>
-    </div>
-  )
+  const handleResend = async () => {
+    if (isEmpty(mai_sn)) {
+      return false
+    }
+    try {
+      const data = await postResendEmailAction({ mai_sn })
+      setOpen(false)
+
+    } catch (err) {}
+
+  }
+
+  /**
+   * 根据状态, 显示操作
+   * * 已保存: []
+   * * 已发送: 回复, 转发
+   * * 失败: 重发
+   */
+  const ActionBtns = (props) => {
+    // const { status } = mailData.info // todo: 1 需要后端返回`状态` [accepted, sent, failed]
+    const { status } = { status: 'failed' } // debug: 0
+
+    const btns = []
+    switch (status) {
+      case 'accepted':
+        break
+      case 'sent':
+        btns.push(
+          <Button onClick={() => onOpenEditor(emailMsg.msgOrigin, 'reply')} size='small' type='text' icon={<ReplyIcon className='text-indigo-500' />}>
+            回复
+          </Button>
+        )
+        btns.push(
+          <Button onClick={() => onOpenEditor(emailMsg.msgOrigin, 'forward')} size='small' type='text' icon={<ShareForwardIcon className='text-primary' />}>
+            转发
+          </Button>
+        )
+        break
+      case 'failed':
+        btns.push(
+          <Button onClick={() => handleResend()} size='small' type='text' icon={<ResendIcon className='text-orange-500' />}>
+            重发
+          </Button>
+        )
+        btns.push(
+          <Button onClick={() => onOpenEditor({...emailMsg.msgOrigin, content: mailData.content}, 'edit')} size='small' type='text' icon={<EditIcon className='text-indigo-500' />}>
+            编辑
+          </Button>
+        )
+        break
+      default:
+        break
+    }
+
+    return (
+      <div className={`flex items-center w-full ${props.className || ''}`}>
+        {btns}
+      </div>
+    )
+}
 
   return (
     <>
@@ -154,7 +194,7 @@ const EmailDetail = ({ open, setOpen, emailMsg, ...props }) => {
         initial={{ ...initialPosition, ...initialSize }}
         mailData={mailData}
         action={action}
-        key={`email-editor-inner-${action}-popup_${ReferEmailMsg.id}`}
+        key={`email-editor-inner-${action}-popup_${mailID}`}
       />
     </>
   )

src/views/Conversations/Online/Input/EmailEditorPopup.jsx

@@ -55,6 +55,11 @@ const generateQuoteContent = (mailData) => `<br><br>
         </p>
         `;
 
+const generateMailContent = (mailData) => `
+  <p>
+  ${mailData.content}
+  </p>`
+
 const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, conversationid, quoteid, initial = {}, mailData: _mailData, action = 'reply', ...props }) => {
   const [mobile] = useStyleStore((state) => [state.mobile]);
   const [userId, username, emailList] = useAuthStore((state) => [state.loginUser.userId, state.loginUser.username, state.loginUser.emailList]);
@@ -120,8 +125,9 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, conversationid,
 
     const preQuoteBody = generateQuoteContent(mailData);
 
-    if ( !isEmpty(mailData.info))
+    if ( !isEmpty(mailData.info) && action !== 'edit') {
       setInitialContent(preQuoteBody);
+    }
 
     const _formValues = {
       to: info?.MAI_From || fromEmail,
@@ -136,6 +142,18 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, conversationid,
     } else if (action === 'forward') {
       form.setFieldsValue(forwardValues);
       setInitialForm(forwardValues);
+    } else if (action === 'edit') {
+      const thisFormValues = {
+        to: info?.MAI_To || '',
+        cc: info?.MAI_CS || '',
+        subject: info?.MAI_Subject || '',
+      };
+      form.setFieldsValue(thisFormValues);
+      setInitialForm(thisFormValues);
+      const thisBody = generateMailContent(mailData);
+      console.log('thisBody', thisBody);
+
+      setInitialContent(thisBody)
     }
 
     return () => {};