perf: 切换商业号: 发送内容; 消息上显示

src/channel/bubbleMsgUtils.js

@@ -2,6 +2,50 @@ import { cloneDeep, isEmpty, olog, fixTo2Decimals, pick } from "@/utils/commons"
 import dayjs from "dayjs";
 import { v4 as uuid } from "uuid";
 
+function removeFirstPlus(str) {
+  if (str.startsWith('+')) {
+      return str.slice(1);
+  }
+  return str;
+}
+
+export const WABAccounts = [
+  {
+    "id": "217973041403372",
+    "phoneNumber": "+8618174165365",
+    "wabaId": "190290134156880",
+    "verifiedName": "Global Highlights Multilanguage",
+    "qualityRating": "GREEN",
+    "messagingLimit": "TIER_1K",
+    "isOfficialBusinessAccount": false,
+    "codeVerificationStatus": "EXPIRED",
+    "status": "CONNECTED",
+    "displayPhoneNumber": "+86 181 7416 5365",
+    "nameStatus": "APPROVED",
+    "newNameStatus": "NONE"
+  },
+  {
+    "id": "160079783860667",
+    "phoneNumber": "+8617607730395",
+    "wabaId": "190290134156880",
+    "verifiedName": "Global Highlights",
+    "qualityRating": "GREEN",
+    "messagingLimit": "TIER_1K",
+    "isOfficialBusinessAccount": false,
+    "codeVerificationStatus": "EXPIRED",
+    "status": "CONNECTED",
+    "displayPhoneNumber": "+86 176 0773 0395",
+    "nameStatus": "APPROVED",
+    "newNameStatus": "NONE",
+    "decision": "DEFERRED",
+    "requestedVerifiedName": "Global Highlights",
+    "rejectionReason": "NONE"
+  }
+];
+export const WABAccountsMapped = WABAccounts.reduce((a, c) => ({ ...a, [removeFirstPlus(c.phoneNumber)]: c, [c.phoneNumber]: c }), {})
+console.log(WABAccountsMapped);
+
+
 export const replaceTemplateString = (str, replacements) => {
   let result = str;
   let keys = str.match(/{{(.*?)}}/g).map(key => key.replace(/{{|}}/g, ''));
@@ -40,6 +84,7 @@ const mediaMsg = {
     actionId: msg.id,
     renderId: msg.id,
     to: msg.to,
+    from: msg.from,
     msgcontent: {
       [msg.type]: {
         link: msg.data.dataUri,
@@ -74,6 +119,7 @@ export const sentMsgTypeMapped = {
       actionId: msg.id,
       renderId: msg.id,
       to: msg.to,
+      from: msg.from,
       msgtype: 'text',
       msgcontent: { body: msg.text, preview_url: true, ...(msg.context ? { context: msg.context, message_origin: msg.message_origin?.msgOrigin || msg.message_origin } : {}) },
     }),
@@ -156,6 +202,7 @@ export const sentMsgTypeMapped = {
       actionId: msg.id,
       renderId: msg.id,
       to: msg.to,
+      from: msg.from,
       msgtype: 'template',
       msgcontent: {
         ...msg.template,

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

@@ -7,6 +7,7 @@ import useConversationStore from '@/stores/ConversationStore';
 import { useShallow } from 'zustand/react/shallow';
 import { WABIcon } from '@/components/Icons';
 import ChannelLogo from './ChannelLogo';
+import { WABAccountsMapped } from '@/channel/bubbleMsgUtils';
 
 const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, setNewChatFormValues, scrollToMessage, focusMsg, ...message }) => {
   const { message: appMessage } = App.useApp();
@@ -113,11 +114,10 @@ const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, s
             // styles: { backgroundColor: '#ccd4ae' },
             notchStyle: { fill: '#ccd4ae' }, // todo: channel[WhatsApp] color '#d9fdd3'
             replyButton: ['text', 'document', 'image'].includes(message.whatsapp_msg_type) && message.status !== 'failed' ? true : false,
-            // title: <><WABIcon/>&nbsp;Global Highlights</>, // test: 0
-            title: <><ChannelLogo channel={message.msg_source} />&nbsp;Global Highlights</>,
+            title: <><ChannelLogo channel={message.msg_source} />&nbsp;{WABAccountsMapped[message.from]?.verifiedName}</>,
           }
         : {
-          title: <><ChannelLogo channel={message.msg_source} />{message.title}</>,
+          title: <>&nbsp;<ChannelLogo channel={message.msg_source} />&nbsp;{message.title}</>,
         })}
       className={[
         'whitespace-pre-wrap',

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

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { App, Input, Flex, Button, Image, Tooltip } from 'antd';
+import PropTypes from 'prop-types';
 // import { Input } from 'react-chat-elements';
 import useAuthStore from '@/stores/AuthStore';
 import useConversationStore from '@/stores/ConversationStore';
@@ -25,12 +26,13 @@ const ButtonStyleClsMapped =
 {
   'waba': 'bg-waba shadow shadow-waba-300 hover:!bg-waba-400 active:bg-waba-400 focus:bg-waba-400',
   'whatsapp': 'bg-whatsapp shadow shadow-whatsapp-300 hover:!bg-whatsapp-400 active:bg-whatsapp-400 focus:bg-whatsapp-400',
+  'wa': 'bg-whatsapp shadow shadow-whatsapp-300 hover:!bg-whatsapp-400 active:bg-whatsapp-400 focus:bg-whatsapp-400',
 };
 
-const InputComposer = ({ isWABA, channel }) => {
+const InputComposer = ({ channel }) => {
   const [mobile] = useStyleStore((state) => [state.mobile]);
 
-  const userId = useAuthStore((state) => state.loginUser.userId);
+  const {userId, whatsAppBusiness} = useAuthStore((state) => state.loginUser);
   const [openPaymentDrawer] = useOrderStore((state) => [state.openDrawer])
 
   const websocket = useConversationStore((state) => state.websocket);
@@ -62,6 +64,24 @@ const InputComposer = ({ isWABA, channel }) => {
   ? 'Enter 发送, Shift+Enter 换行'
   : 'Enter 换行';
 
+  const [fromIM, setFromIM] = useState('');
+  useEffect(() => {
+    switch (channel) {
+      case 'waba':
+        setFromIM(whatsAppBusiness)
+        break
+      case 'wa':
+        setFromIM('') // todo: 个人WhatsApp号
+        break
+
+      default:
+        break
+    }
+
+    return () => {}
+  }, [channel, whatsAppBusiness])
+
+
   const textInputRef = useRef(null);
   const [textContent, setTextContent] = useState('');
 
@@ -70,6 +90,7 @@ const InputComposer = ({ isWABA, channel }) => {
       sender: 'me',
       senderName: 'me',
       to: currentConversation.whatsapp_phone_number,
+      from: fromIM,
       date: new Date(),
       status: 'waiting',
       ...(referenceMsg.id ? { context: { message_id: referenceMsg.id }, message_origin: referenceMsg } : {}),
@@ -114,6 +135,7 @@ const InputComposer = ({ isWABA, channel }) => {
       sender: 'me',
       senderName: 'me',
       to: currentConversation.whatsapp_phone_number,
+      from: fromIM,
       date: new Date(),
       status: 'waiting',
       ...(referenceMsg.id ? { context: { message_id: referenceMsg.id }, message_origin: referenceMsg } : {}),
@@ -331,4 +353,6 @@ const InputComposer = ({ isWABA, channel }) => {
   );
 };
 
+InputComposer.PropTypes = { channel: PropTypes.oneOf(['waba', 'wa']) };
+
 export default InputComposer;

src/views/Conversations/Online/ReplyWrapper.jsx

@@ -9,12 +9,8 @@ import { useShallow } from 'zustand/react/shallow';
 import useStyleStore from '@/stores/StyleStore';
 import { isEmpty } from '@/utils/commons';
 import { DEFAULT_CHANNEL } from '@/config';
+import { WABAccounts, WABAccountsMapped } from '@/channel/bubbleMsgUtils';
 
-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}), {});
 /**
  * @ignore
  * 不在此处配置, 在个人档案页面配置
@@ -26,11 +22,11 @@ const WABASwitcher = ({ onSelect, }) => {
     // trigger={['contextMenu', 'hover']}
       selectable
       menu={{
-        items: Wabas,
+        items: WABAccounts.map(ele => ({ key: ele.phoneNumber, label: ele.verifiedName })),
         onClick: ({ key, domEvent, ...x }) => {
           domEvent.stopPropagation();
-          setPickV(Wabas_mapped[key]);
-          onSelect?.(Wabas_mapped[key]);
+          setPickV(WABAccountsMapped[key]);
+          onSelect?.(WABAccountsMapped[key]);
         },
       }}>
       <Space>
@@ -85,4 +81,5 @@ const ReplyWrapper = () => {
     </div>
   );
 };
+
 export default ReplyWrapper;