From 078325c87ab140375d89444ec1faba61becc837d Mon Sep 17 00:00:00 2001 From: Lei OT Date: Tue, 26 Nov 2024 15:23:43 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E5=88=87=E6=8D=A2=E5=95=86=E4=B8=9A?= =?UTF-8?q?=E5=8F=B7:=20=E5=8F=91=E9=80=81=E5=86=85=E5=AE=B9;=20=E6=B6=88?= =?UTF-8?q?=E6=81=AF=E4=B8=8A=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/channel/bubbleMsgUtils.js | 47 +++++++++++++++++++ .../Online/Components/BubbleIM.jsx | 6 +-- .../Online/Input/InputComposer.jsx | 28 ++++++++++- .../Conversations/Online/ReplyWrapper.jsx | 13 ++--- 4 files changed, 81 insertions(+), 13 deletions(-) diff --git a/src/channel/bubbleMsgUtils.js b/src/channel/bubbleMsgUtils.js index 1d20635..c23303f 100644 --- a/src/channel/bubbleMsgUtils.js +++ b/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, diff --git a/src/views/Conversations/Online/Components/BubbleIM.jsx b/src/views/Conversations/Online/Components/BubbleIM.jsx index b7d54a0..46fd9e0 100644 --- a/src/views/Conversations/Online/Components/BubbleIM.jsx +++ b/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: <> Global Highlights, // test: 0 - title: <> Global Highlights, + title: <> {WABAccountsMapped[message.from]?.verifiedName}, } : { - title: <>{message.title}, + title: <>  {message.title}, })} className={[ 'whitespace-pre-wrap', diff --git a/src/views/Conversations/Online/Input/InputComposer.jsx b/src/views/Conversations/Online/Input/InputComposer.jsx index 37f120b..8e75df4 100644 --- a/src/views/Conversations/Online/Input/InputComposer.jsx +++ b/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; diff --git a/src/views/Conversations/Online/ReplyWrapper.jsx b/src/views/Conversations/Online/ReplyWrapper.jsx index a964e08..d59101f 100644 --- a/src/views/Conversations/Online/ReplyWrapper.jsx +++ b/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]); }, }}> @@ -85,4 +81,5 @@ const ReplyWrapper = () => { ); }; + export default ReplyWrapper;