From 775325ca0473b07a50c6d808bae34d54d3dec845 Mon Sep 17 00:00:00 2001
From: Lei OT <lyt@hainatravel.com>
Date: Tue, 14 May 2024 17:12:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=90=88=E5=B9=B6=E4=BC=9A=E8=AF=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/actions/ConversationActions.js            |   8 ++
 .../History/MergeConversationTo.jsx           | 126 ++++++++++++++++++
 .../Conversations/History/MessagesList.jsx    |   6 +-
 3 files changed, 139 insertions(+), 1 deletion(-)
 create mode 100644 src/views/Conversations/History/MergeConversationTo.jsx

diff --git a/src/actions/ConversationActions.js b/src/actions/ConversationActions.js
index 06618fa..3f849e8 100644
--- a/src/actions/ConversationActions.js
+++ b/src/actions/ConversationActions.js
@@ -153,6 +153,14 @@ export const fetchMessagesHistory = async (params) => {
   return parseRenderMessageList(data);
 }
 
+/**
+ * @param {object} params { opisn, phone_number_from, phone_number_mergeto }
+ */
+export const fetchConversationMerge = async (params) => {
+  const { errcode, result } = await fetchJSON(`${API_HOST}/merge_session`, params);
+  return errcode !== 0 ? {} : result;
+};
+
 /**
  * ------------------------------------------------------------------------------------------------
  * 未分配
diff --git a/src/views/Conversations/History/MergeConversationTo.jsx b/src/views/Conversations/History/MergeConversationTo.jsx
new file mode 100644
index 0000000..c28941a
--- /dev/null
+++ b/src/views/Conversations/History/MergeConversationTo.jsx
@@ -0,0 +1,126 @@
+import { useEffect, useState } from 'react';
+import { Button, Form, Input, Radio, Modal } from 'antd';
+import { MergeCellsOutlined } from '@ant-design/icons';
+import { fetchConversationMerge } from '@/actions/ConversationActions';
+import useAuthStore from '@/stores/AuthStore';
+
+export const MergeToForm = ({ currentWAID, initialValues, onFormInstanceReady }) => {
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    onFormInstanceReady(form);
+  }, []);
+
+  const [mergeDir, setMergeDir] = useState(initialValues.direction);
+
+  useEffect(() => {
+    if (mergeDir === 'mergeto') {
+      form.setFieldValue('phone_number_from', currentWAID);
+      form.setFieldValue('phone_number_mergeto', '');
+    } else {
+      form.setFieldValue('phone_number_from', '');
+      form.setFieldValue('phone_number_mergeto', currentWAID);
+    }
+
+    return () => {};
+  }, [mergeDir]);
+
+  const onValuesChange = (changeValues, allValues) => {
+    if ('direction' in changeValues) {
+      setMergeDir(changeValues.direction);
+    }
+  };
+
+  return (
+    <Form layout='horizontal' form={form} name='mergeto' initialValues={{ ...initialValues }} onValuesChange={onValuesChange}>
+      <Form.Item name={'direction'}>
+        <Radio.Group
+          options={[
+            { label: 'Merge To', value: 'mergeto' },
+            { label: 'Merge From', value: 'mergefrom' },
+          ]}
+          optionType='button'
+          buttonStyle='solid'
+        />
+      </Form.Item>
+      <Form.Item name={'phone_number_mergeto'} label='清空当前会话, 合并到' hidden={mergeDir === 'mergefrom'} rules={[{ required: true, message: '请输入目标会话的号码' }]}>
+        <Input placeholder='请输入目标会话的号码' />
+      </Form.Item>
+      <Form.Item
+        name={'phone_number_from'}
+        label='清空会话'
+        hidden={mergeDir === 'mergeto'}
+        validateStatus={'warning'}
+        help={`合并到当前: ${currentWAID}`}
+        rules={[{ required: true, message: '请输入需要合并的会话的号码' }]}>
+        <Input placeholder='请输入需要合并的会话的号码' />
+      </Form.Item>
+      {/* hidden */}
+      <Form.Item hidden name={'opi_sn'}>
+        <Input />
+      </Form.Item>
+      <Form.Item noStyle dependencies={['phone_number_from', 'phone_number_mergeto']}>
+        {() => (
+          <div>
+            <span>{form.getFieldValue('phone_number_from')}</span>
+            <span className='px-1'>➡</span>
+            <span>{form.getFieldValue('phone_number_mergeto')}</span>
+          </div>
+        )}
+      </Form.Item>
+    </Form>
+  );
+};
+
+const MergeConversationTo = ({ currentWAID, opi_sn, ...props }) => {
+  const userId = useAuthStore((state) => state.loginUser.userId);
+  const [open, setOpen] = useState(false);
+  const [formInstance, setFormInstance] = useState();
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (values) => {
+    setLoading(true);
+    await fetchConversationMerge({ ...values, opi_sn });
+    setLoading(false);
+    setOpen(false);
+  };
+  return (
+    <>
+      {['404', '383', '227'].includes(userId) && <Button icon={<MergeCellsOutlined />} type='link' onClick={setOpen} />}
+      <Modal
+        open={open}
+        title='合并会话'
+        okText='确认'
+        // cancelText='Cancel'
+        okButtonProps={{
+          autoFocus: true,
+        }}
+        confirmLoading={loading}
+        onCancel={() => {
+          // onCancel();
+          setOpen(false);
+          formInstance?.resetFields();
+        }}
+        destroyOnClose
+        onOk={async () => {
+          try {
+            const values = await formInstance?.validateFields();
+            await handleSubmit(values);
+            formInstance?.resetFields();
+          } catch (error) {
+            console.log('Failed:', error);
+          }
+        }}>
+        <MergeToForm
+          currentWAID={currentWAID}
+          initialValues={{ opi_sn, direction: 'mergeto' }}
+          onFormInstanceReady={(instance) => {
+            setFormInstance(instance);
+          }}
+        />
+      </Modal>
+    </>
+  );
+};
+
+export default MergeConversationTo;
diff --git a/src/views/Conversations/History/MessagesList.jsx b/src/views/Conversations/History/MessagesList.jsx
index 5c71a94..791cb85 100644
--- a/src/views/Conversations/History/MessagesList.jsx
+++ b/src/views/Conversations/History/MessagesList.jsx
@@ -6,6 +6,7 @@ import { MESSAGE_PAGE_SIZE, fetchMessagesHistory } from '@/actions/ConversationA
 import useFormStore from '@/stores/FormStore';
 import { isEmpty, stringToColour, groupBy, isNotEmpty } from '@/utils/commons';
 import { useShallow } from 'zustand/react/shallow';
+import MergeConversationTo from './MergeConversationTo';
 
 const BIG_PAGE_SIZE = MESSAGE_PAGE_SIZE * 100;
 const MessagesList = ({ ...props }) => {
@@ -208,9 +209,12 @@ const MessagesList = ({ ...props }) => {
   return (
     <>
       <Flex vertical className='flex-1'>
-        <div className='px-2 py-1 text-primary bg-white border-0 border-b border-slate-200'>
+        <Flex className='bg-white border-0 border-b border-slate-200' gap={8} justify={'space-between'}>
+        <div className='px-2 py-1 text-primary '>
           {selectedConversation.whatsapp_name} {selectedConversation.whatsapp_phone_number}
         </div>
+        {selectedConversation.whatsapp_phone_number && <MergeConversationTo currentWAID={selectedConversation.whatsapp_phone_number} opi_sn={selectedConversation.opi_sn} />}
+        </Flex>
 
         <div style={{ height: 'calc(100% - 30px)' }} className='h-full flex-auto relative  border-dashed border-y-0 border-r-0 border-l border-slate-200' ref={messagesEndRef}>
           <List