perf: 新建会话不自动关联订单

老客人推荐WA号码不需要关联订单
1 year ago · 4e325790bc
parent 61b35cebc9
commit 4e325790bc
6 changed files with 64 additions and 42 deletions
--- a/src/hooks/useConversation.js
+++ b/src/hooks/useConversation.js
@ -1,5 +1,5 @@
 import useConversationStore from '@/stores/ConversationStore';
-import { fetchOrderConversationsList } from '@/actions/ConversationActions';
+import { fetchOrderConversationsList, postNewConversationItem } from '@/actions/ConversationActions';
 import { isEmpty } from '@/utils/commons';
 export function useConversationNewItem() {
  const [currentConversation, setCurrentConversation] = useConversationStore((state) => [
@ -8,6 +8,9 @@ export function useConversationNewItem() {
  ]);
  const conversationsList = useConversationStore((state) => state.conversationsList);
  const addToConversationList = useConversationStore((state) => state.addToConversationList);
+  /**
+   * 打开订单的会话, 不存在自动新增
+   */
  const openOrderContactConversation = async (whatsappID) => {
    const { coli_sn, opi_sn } = currentConversation;
    let findCurrentOrderChats = conversationsList.filter(
@ -31,5 +34,18 @@ export function useConversationNewItem() {
    }
    return false;
  };
-  return { openOrderContactConversation };
+
+  /**
+   * 创建新会话
+   * whatsappID, whatsappName
+   */
+  const newConversation = async (whatsappID, whatsappName = '') => {
+    const { opi_sn } = currentConversation;
+    const newChat = { phone_number: whatsappID, remark_name: whatsappName };
+    const createdNew = await postNewConversationItem({ ...newChat, opi_sn: opi_sn });
+    addToConversationList([createdNew]);
+    setCurrentConversation(createdNew);
+  };
+
+  return { openOrderContactConversation, newConversation };
 }
--- a/src/stores/ConversationStore.js
+++ b/src/stores/ConversationStore.js
@ -333,9 +333,9 @@ const messageSlice = (set, get) => ({
          };
    conversationsList.splice(targetIndex, 1);
    conversationsList.unshift(newConversation);
-    console.log('find in list, i:', targetIndex);
-    console.log('find in list, chat updated and Top: \n', JSON.stringify(newConversation, null, 2));
-    console.log('list updated : \n', JSON.stringify(conversationsList, null, 2));
+    // console.log('find in list, i:', targetIndex);
+    // console.log('find in list, chat updated and Top: \n', JSON.stringify(newConversation, null, 2));
+    // console.log('list updated : \n', JSON.stringify(conversationsList, null, 2));
    const isCurrent = Number(targetId) === Number(currentConversation.sn);
    const updatedCurrent = isCurrent
      ? {
--- a/src/views/Conversations/Online/ConversationsList.jsx
+++ b/src/views/Conversations/Online/ConversationsList.jsx
@ -85,7 +85,7 @@ const Conversations = ({ mobile }) => {
    const whatsappID = WHATSAPP_ID || coli_guest_WhatsApp || whatsapp_phone_number || '';
    // let findCurrentOrderChats = conversationsList.filter((item) => `${item.coli_sn}` === `${colisn}`);
    // 使用opisn + whatsappID 判断, 解决订单修改whatsappID号码之后获取新会话, 登录账号此处省略
-    let findCurrentOrderChats = conversationsList.filter((item) => `${item.whatsapp_phone_number}` === `${whatsappID}`);
+    let findCurrentOrderChats = conversationsList.filter((item) => `${item.whatsapp_phone_number}` === `${whatsappID}` && `${item.coli_sn}` === `${colisn}`);
    let findCurrentIndex = isEmpty(findCurrentOrderChats) ? -1 : 0; // findCurrentOrderChats.length-1;
    let findCurrent = findCurrentOrderChats[findCurrentIndex];
    if (findCurrentIndex !== -1) {
@ -171,19 +171,6 @@ const Conversations = ({ mobile }) => {
  }

  const [newChatModalVisible, setNewChatModalVisible] = useState(false);
-  const [newItemLoading, setNewItemLoading] = useState(false);
-  const handleNewChat = async (values) => {
-    // console.log(values);
-    const newChat = { phone_number: values.wa_id, remark_name: values.name };
-    setNewItemLoading(true);
-    const createdNew = await postNewConversationItem({...newChat, opi_sn: userId });
-    // if ( ! isEmpty(newItem)) {
-      addToConversationList([createdNew]);
-      setCurrentConversation(createdNew);
-    // }
-    setNewChatModalVisible(false);
-    setNewItemLoading(false);
-  };

  // const closedVisible = closedConversationsList.length > 0;
  const toggleClosedConversationsList = () => {
@ -328,9 +315,8 @@ const Conversations = ({ mobile }) => {
      <ConversationsNewItem
        initialValues={{ is_current_order: false }}
        open={newChatModalVisible}
-        onCreate={handleNewChat}
+        onCreate={() => setNewChatModalVisible(false)}
        onCancel={() => setNewChatModalVisible(false)}
-        loading={newItemLoading}
      />
    </div>
  );
--- a/src/views/Conversations/Online/ConversationsNewItem.jsx
+++ b/src/views/Conversations/Online/ConversationsNewItem.jsx
@ -3,6 +3,7 @@ import { Form, Input, Modal } from 'antd';
 import { isEmpty, pick } from '@/utils/commons';
 import useConversationStore from '@/stores/ConversationStore';
 import { phoneNumberToWAID } from '@/channel/whatsappUtils';
+import { useConversationNewItem } from '@/hooks/useConversation';

 export const ConversationItemForm = ({ initialValues, onFormInstanceReady }) => {
  const [currentConversation] = useConversationStore((state) => [state.currentConversation]);
@ -66,8 +67,18 @@ export const ConversationItemForm = ({ initialValues, onFormInstanceReady }) =>
    </Form>
  );
 };
-export const ConversationItemFormModal = ({ open, onCreate, onCancel, initialValues, loading }) => {
+/**
+ * 新建会话弹窗
+ * * 订单信息下的WhatsApp号码处点击: 关联此订单
+ * * 消息记录中的号码点击: 不自动关联
+ * * 消息记录中的联系人卡片点击: 不自动关联
+ */
+export const ConversationItemFormModal = ({ open, onCreate, onCancel, initialValues, }) => {
  const [formInstance, setFormInstance] = useState();
+  const [newItemLoading, setNewItemLoading] = useState(false);
+
+  const { newConversation } = useConversationNewItem();
+
  return (
    <Modal
      open={open}
@ -77,7 +88,7 @@ export const ConversationItemFormModal = ({ open, onCreate, onCancel, initialVal
      okButtonProps={{
        autoFocus: true,
      }}
-      confirmLoading={loading}
+      confirmLoading={newItemLoading}
      onCancel={() => {
        onCancel();
        formInstance?.resetFields();
@ -87,7 +98,12 @@ export const ConversationItemFormModal = ({ open, onCreate, onCancel, initialVal
        try {
          const values = await formInstance?.validateFields();
          // formInstance?.resetFields();
-          onCreate(values);
+          setNewItemLoading(true);
+          if (initialValues.is_current_order !== true) newConversation(values.wa_id, values.name);
+          if (typeof onCreate === 'function') {
+            onCreate(values);
+          }
+          setNewItemLoading(false);
        } catch (error) {
          console.log('Failed:', error);
        }
--- a/src/views/Conversations/Online/MessagesList.jsx
+++ b/src/views/Conversations/Online/MessagesList.jsx
@ -5,9 +5,8 @@ import { DownOutlined, LoadingOutlined } from '@ant-design/icons';
 import { useShallow } from 'zustand/react/shallow';
 import useConversationStore from '@/stores/ConversationStore';
 import { groupBy, isEmpty, } from '@/utils/commons';
-import ConversationsNewItem from './ConversationsNewItem';

-const MessagesList = ({ messages, handlePreview, reference, longListLoading, getMoreMessages, shouldScrollBottom, loadNextPage, handleContactClick, ...props }) => {
+const MessagesList = ({ messages, handlePreview, reference, longListLoading, getMoreMessages, shouldScrollBottom, loadNextPage, handleContactClick, setNewChatModalVisible, setNewChatFormValues, ...props }) => {

  const { message: appMessage } = App.useApp()

@ -41,6 +40,11 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get

  useEffect(scrollToBottom, [messages]);

+  const openNewChatModal = ({wa_id, wa_name}) => {
+    setNewChatModalVisible(true);
+    setNewChatFormValues(prev => ({...prev, phone_number: wa_id, name: wa_name }));
+  };
+
  const RenderText = memo(function renderText({ str, className, template }) {

    let headerObj, footerObj, buttonsArr;
@ -90,8 +94,7 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
            );
          } else if (part.type === 'number') {
            return (
-              <a key={`${part.key}${index}`} className='text-sm' onClick={() => {setNewChatModalVisible(true);
-                setNewChatFormValues(prev => ({...prev, phone_number: part.key, is_current_order: true, }))}}>
+              <a key={`${part.key}${index}`} className='text-sm' onClick={() => openNewChatModal({ wa_id: part.key, wa_name: part.key })}>
                {part.key}
              </a>
            );
@ -134,15 +137,6 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
    </div>
  ));

-  const [newChatModalVisible, setNewChatModalVisible] = useState(false);
-  const [newChatFormValues, setNewChatFormValues] = useState({});
-  const handleNewChat = async (values) => {
-    const newContact = { wa_id: values.wa_id };
-    await handleContactClick([newContact]);
-    setNewChatModalVisible(false);
-  }
-
-
  return (
    <div className='relative h-full overflow-y-auto overflow-x-hidden flex flex-1'>
      <div ref={reference} className='relative overflow-y-auto overflow-x-hidden block flex-1'>
@ -208,7 +202,6 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
        ))}
      </div>
      <Button onClick={() => scrollToBottom(true)} ghost type={'dashed'} shape={'circle'} className=' absolute bottom-1 right-4' icon={<DownOutlined />} />
-      <ConversationsNewItem initialValues={newChatFormValues} open={newChatModalVisible} onCreate={handleNewChat} onCancel={() => setNewChatModalVisible(false)} />
    </div>
  );
 };
--- a/src/views/Conversations/Online/MessagesWrapper.jsx
+++ b/src/views/Conversations/Online/MessagesWrapper.jsx
@ -6,7 +6,7 @@ import MessagesList from './MessagesList';
 import { fetchCleanUnreadMsgCount, fetchMessages, MESSAGE_PAGE_SIZE } from '@/actions/ConversationActions';
 import useAuthStore from '@/stores/AuthStore';
 import { useVisibilityState } from '@/hooks/useVisibilityState';
-import { useConversationNewItem } from '@/hooks/useConversation';
+import ConversationNewItem from './ConversationsNewItem';

 const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
  const userId = useAuthStore((state) => state.loginUser.userId);
@ -97,12 +97,16 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
    }
  };

-  const { openOrderContactConversation } = useConversationNewItem();
  const [contactsModalVisible, setContactsModalVisible] = useState(false);
  const [contactListData, setContactListData] = useState([]);
+
+  const [newChatModalVisible, setNewChatModalVisible] = useState(false);
+  const [newChatFormValues, setNewChatFormValues] = useState({});
+
  const handleContactItemClick = (contact) => {
-    openOrderContactConversation(contact.wa_id);
-    setContactsModalVisible(false);
+    setNewChatFormValues(prev => ({...prev, phone_number: contact.wa_id, name: contact.name }));
+    setNewChatModalVisible(true);
+    return ;
  }
  const handleContactListClick = (data) => {
    setContactListData(data);
@ -116,6 +120,7 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
      <MessagesList messages={longList} dataSourceLen={longList.length} {...{
        reference, shouldScrollBottom,
        handlePreview, handleContactClick,
+        setNewChatModalVisible, setNewChatFormValues,
        longListLoading, setLongListLoading, getMoreMessages, loadNextPage: currentConversation?.loadNextPage ?? true
        }}
      />
@ -125,6 +130,12 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
          <Button onClick={() => handleContactItemClick(contact)} type='link' key={contact.id}>{contact.name}: <span>{contact.wa_id}</span></Button>
        ))}
      </Modal>
+      <ConversationNewItem
+        initialValues={{ ...newChatFormValues, is_current_order: false }}
+        open={newChatModalVisible}
+        onCreate={() => { setNewChatModalVisible(false); setContactsModalVisible(false);}}
+        onCancel={() => setNewChatModalVisible(false)}
+        />
    </>
  );
 };