From 7d951c037a0907a9aee55adfed56d43db356bd62 Mon Sep 17 00:00:00 2001
From: Lei OT <lyt@hainatravel.com>
Date: Tue, 8 Oct 2024 15:52:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20WABA=20=E5=88=87=E6=8D=A2=E8=B4=A6?=
 =?UTF-8?q?=E6=88=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Conversations/Online/ReplyWrapper.jsx     | 37 +++++++++++++++++--
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/views/Conversations/Online/ReplyWrapper.jsx b/src/views/Conversations/Online/ReplyWrapper.jsx
index fdbff58..3eccb85 100644
--- a/src/views/Conversations/Online/ReplyWrapper.jsx
+++ b/src/views/Conversations/Online/ReplyWrapper.jsx
@@ -1,6 +1,6 @@
 import { Children, createContext, useEffect, useState } from 'react';
-import { Tabs } from 'antd';
-import { MailFilled, MailOutlined, WhatsAppOutlined } from '@ant-design/icons';
+import { Dropdown, Space, Tabs } from 'antd';
+import { MailFilled, MailOutlined, WhatsAppOutlined, DownOutlined } from '@ant-design/icons';
 import InputComposer from './Input/InputComposer';
 import EmailComposer from './Input/EmailChannelTab';
 import { WABIcon } from '@/components/Icons';
@@ -8,8 +8,36 @@ import useConversationStore from '@/stores/ConversationStore';
 import { useShallow } from 'zustand/react/shallow';
 
 const DEFAULT_CHANNEL = 'waba';
+const Wabas = [
+  { key: 'Global Highlights', label: 'Global Highlights' },
+  { key: 'Global Highlights-Multi', label: 'Global Highlights-Multi' },
+];
+const Wabas_mapped = Wabas.reduce((acc, cur) => ({...acc, [cur.key]: cur}), {});
 
-const ReplyWrapper = ({ ...props }) => {
+const WABASwitcher = ({ onSelect, }) => {
+  const [pickV, setPickV] = useState({}); // todo: 全局管理? 后端管理?
+  return (
+    <Dropdown
+    // trigger={['contextMenu', 'hover']}
+      selectable
+      menu={{
+        items: Wabas,
+        onClick: ({ key, domEvent, ...x }) => {
+          domEvent.stopPropagation();
+          setPickV(Wabas_mapped[key]);
+          onSelect?.(Wabas_mapped[key]);
+        },
+      }}>
+      <Space>
+        <WABIcon />
+        {pickV.label || 'WABA'}
+        <DownOutlined />
+      </Space>
+    </Dropdown>
+  );
+};
+
+const ReplyWrapper = () => {
   const [activeChannel, setActiveChannel] = useState(DEFAULT_CHANNEL);
   const onChannelTabsChange = (activeKey) => {
     setActiveChannel(activeKey);
@@ -26,7 +54,8 @@ const ReplyWrapper = ({ ...props }) => {
   }, [activeMessages]);
 
   const replyTypes = [
-    { key: 'waba', label: 'WABA-Global Highlights', icon: <WABIcon />, children: <InputComposer isWABA channel={'waba'} /> },
+    { key: 'waba0', label: (<WABASwitcher />), children: <InputComposer isWABA channel={'waba'} /> },
+    // { key: 'waba', label: 'WABA-Global Highlights', icon: <WABIcon />, children: <InputComposer isWABA channel={'waba'} /> },
     { key: 'email', label: 'Email', icon: <MailOutlined className='text-indigo-500' />, children: <EmailComposer /> },
     { key: 'whatsapp', label: 'WhatsApp', icon: <WhatsAppOutlined className='text-whatsapp' />, children: <InputComposer channel={'whatsapp'} /> },
   ];