From 591969be406acbc8c51333ad861b784ec12f65c6 Mon Sep 17 00:00:00 2001 From: Lei OT Date: Thu, 1 Feb 2024 15:09:00 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E6=B6=88=E6=81=AF:=20body:?= =?UTF-8?q?=20=E5=8F=91=E9=80=81=E5=8F=82=E6=95=B0=E5=A1=AB=E5=85=85?= =?UTF-8?q?=E5=90=8E=E7=9A=84=E6=95=B4=E4=BD=93=E5=86=85=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/actions/ConversationActions.js | 2 +- src/lib/msgUtils.js | 31 ++++++++--- .../Conversations/Components/InputBox.jsx | 55 ++++++++++++------- 3 files changed, 58 insertions(+), 30 deletions(-) diff --git a/src/actions/ConversationActions.js b/src/actions/ConversationActions.js index 7ae7781..b44fd84 100644 --- a/src/actions/ConversationActions.js +++ b/src/actions/ConversationActions.js @@ -88,7 +88,7 @@ export const fetchTemplates = async () => { const data = await fetchJSON(`${API_HOST}/listtemplates`); const canUseTemplates = (data?.result?.items || []) .filter((_t) => _t.status !== 'REJECTED') - .map((ele) => ({ ...ele, components: groupBy(ele.components, (_c) => _c.type.toLowerCase()) })); + .map((ele) => ({ ...ele, components_origin: ele.components, components: groupBy(ele.components, (_c) => _c.type.toLowerCase()) })); return canUseTemplates; }; diff --git a/src/lib/msgUtils.js b/src/lib/msgUtils.js index ce334dd..dcd2b7e 100644 --- a/src/lib/msgUtils.js +++ b/src/lib/msgUtils.js @@ -33,8 +33,8 @@ export const sentMsgTypeMapped = { contentToRender: (msg) => { console.log(msg); const templateDataMapped = msg.template?.components ? msg.template.components.reduce((r, v) => ({...r, [v.type]: v}), {}) : null; - const templateParam = (templateDataMapped?.body?.parameters || []).map(e => e.text); - const fillTemplate = templateParam.length ? replaceTemplateString(msg.template_origin.components.body?.[0]?.text || '', templateParam) : (msg.template_origin.components.body?.[0]?.text || ''); + // const templateParam = (templateDataMapped?.body?.parameters || []).map(e => e.text); + // const fillTemplate = templateParam.length ? replaceTemplateString(msg.template_origin.components.body?.[0]?.text || '', templateParam) : (msg.template_origin.components.body?.[0]?.text || ''); // const footer = msg.template_origin.components?.footer?.[0]?.text || ''; return { ...msg, @@ -42,7 +42,7 @@ export const sentMsgTypeMapped = { conversationid: msg.id.split('.')[0], type: 'text', title: msg.template_origin.components.header?.[0]?.text || '', - text: `${fillTemplate}`, // msg.template_origin.components.body?.[0]?.text || '', + text: templateDataMapped?.body?.text || '', // msg.template_origin.components.body?.[0]?.text || '', }; }, }, @@ -171,6 +171,14 @@ export const whatsappMsgTypeMapped = { // 'contact-card': 'contact-card', // 'contact-card-with-photo': 'contact-card-with-photo', // 'contact-card-with-photo-and-label': 'contact-card-with-photo-and-label', + template: { + type: 'text', + data: (msg) => { + const templateDataMapped = msg.template?.components ? msg.template.components.reduce((r, v) => ({...r, [v.type]: v}), {}) : null; + console.log(msg.template.name, templateDataMapped); + return { id: msg.wamid, text: templateDataMapped?.body?.parameters?.[0]?.text || '', title: msg.template.name } + }, + }, }; /** * render received msg @@ -200,12 +208,18 @@ export const parseRenderMessageList = (messages, conversationid = null) => { return { ...(whatsappMsgTypeMapped?.[msgType]?.data(msgContent) || {}), type: msgContent.type, - sender: msg.msg_direction === 'outbound' ? 'me' : msgContent.from, - // title: msg.customerProfile.name, + ...(typeof whatsappMsgTypeMapped[msgType].type === 'function' ? whatsappMsgTypeMapped[msgType].type(msg) : { type: whatsappMsgTypeMapped[msgType].type || 'text' }), date: msgContent?.sendTime || msg.msgtime || '', + sender: msgContent.from, + ...(msg.msg_direction === 'outbound' + ? { + sender: 'me', + status: msgStatusRenderMapped[msgContent?.status || 'failed'], + dateString: msgStatusRenderMapped[msgContent?.status || 'failed'] === 'failed' ? '发送失败 ❌' : '', + } + : {}), // conversationid: conversationid, - status: msg.msg_direction === 'outbound' ? msgStatusRenderMapped[(msgContent?.status || 'failed')] : '', - dateString: msgStatusRenderMapped[(msgContent?.status || 'failed')] === 'failed' ? '发送失败 ❌' : '', + // title: msg.customerProfile.name, }; }); }; @@ -214,7 +228,8 @@ export const parseRenderMessageList = (messages, conversationid = null) => { * WhatsApp Templates params */ export const whatsappTemplatesParamMapped = { - // 'asia_highlights_has_receive_your_inquiry': [['customer_name']], + /** @deprecated */ + 'asia_highlights_has_receive_your_inquiry': [['customer_name']], 'hello_from_asia_highlights': [['agent_name']], // todo: 'hello_from_china_highlights': [['agent_name']], // todo: 'use_new_whatsapp': [['agent_name']], // todo: diff --git a/src/views/Conversations/Components/InputBox.jsx b/src/views/Conversations/Components/InputBox.jsx index f5466ec..19ee899 100644 --- a/src/views/Conversations/Components/InputBox.jsx +++ b/src/views/Conversations/Components/InputBox.jsx @@ -7,7 +7,7 @@ import { useAuthContext } from '@/stores/AuthContext'; import { LikeOutlined, MessageOutlined, StarOutlined, SendOutlined, PlusOutlined, PlusCircleOutlined } from '@ant-design/icons'; import { cloneDeep, getNestedValue, isEmpty } from '@/utils/utils'; import { v4 as uuid } from 'uuid'; -import { whatsappTemplatesParamMapped, sentMsgTypeMapped } from '@/lib/msgUtils'; +import { whatsappTemplatesParamMapped, sentMsgTypeMapped, replaceTemplateString } from '@/lib/msgUtils'; const InputBox = () => { const { loginUser } = useAuthContext(); @@ -21,6 +21,7 @@ const InputBox = () => { const invokeSendMessage = (msgObj) => { console.log('sendMessage------------------', msgObj); const contentToSend = sentMsgTypeMapped[msgObj.type].contentToSend(msgObj); + console.log('content to send-------------------------------------', contentToSend); websocket.sendMessage({ ...contentToSend, opi_sn: userId, coli_sn: currentConversation.coli_sn }); const contentToRender = sentMsgTypeMapped[msgObj.type].contentToRender(msgObj); console.log(contentToRender, 'contentToRender sendMessage------------------'); @@ -57,26 +58,38 @@ const InputBox = () => { template: { name: fromTemplate.name, language: { code: fromTemplate.language }, - ...(fromTemplate.components.body[0]?.example?.body_text?.[0]?.length > 0 - ? { - components: [ - { - 'type': 'body', - 'parameters': whatsappTemplatesParamMapped[fromTemplate.name].map((v) => ({ type: 'text', text: getNestedValue(_conversation, v) || '' })), - // [ - // { - // 'type': 'text', - // 'text': getNestedValue(_conversation, whatsappTemplatesParamMapped[fromTemplate.name][0]) , - // }, - // { // debug: - // 'type': 'text', - // 'text': getNestedValue(_conversation, whatsappTemplatesParamMapped[fromTemplate.name]?.[1] || whatsappTemplatesParamMapped[fromTemplate.name][0]) , - // }, - // ], - }, - ], - } - : {}), + components: fromTemplate.components_origin.map(citem => { + const params = whatsappTemplatesParamMapped[fromTemplate.name].map((v) => ({ type: 'text', text: getNestedValue(_conversation, v) || '' })); + const paramText = params.map((p) => p.text); + const fillTemplate = paramText.length ? replaceTemplateString(citem?.text || '', paramText) : citem?.text || ''; + + return { + type: citem.type.toLowerCase(), + parameters: params, + text: fillTemplate, + }; + }), + // ...(fromTemplate.components.body[0]?.example?.body_text?.[0]?.length > 0 + // ? { + // components: [ + // { + // 'type': 'body', + // 'text': fromTemplate.components.body[0]?.text, + // 'parameters': whatsappTemplatesParamMapped[fromTemplate.name].map((v) => ({ type: 'text', text: getNestedValue(_conversation, v) || '' })), + // // [ + // // { + // // 'type': 'text', + // // 'text': getNestedValue(_conversation, whatsappTemplatesParamMapped[fromTemplate.name][0]) , + // // }, + // // { // debug: + // // 'type': 'text', + // // 'text': getNestedValue(_conversation, whatsappTemplatesParamMapped[fromTemplate.name]?.[1] || whatsappTemplatesParamMapped[fromTemplate.name][0]) , + // // }, + // // ], + // }, + // ], + // } + // : {}), }, template_origin: fromTemplate, };