Merge branch 'main' into dev/chat

# Conflicts:
#	src/lib/msgUtils.js

src/actions/ConversationActions.js

@@ -1,5 +1,5 @@
 
-import { groupBy, pick } from '@/utils/utils';
+import { groupBy, pick, sortArrayByOrder } from '@/utils/utils';
 import { fetchJSON, postJSON } from '@/utils/request'
 import { parseRenderMessageList } from '@/lib/msgUtils';
 import { API_HOST } from '@/config';
@@ -11,7 +11,10 @@ export const fetchTemplates = async () => {
   const canUseTemplates = (data?.result?.items || [])
     .filter((_t) => _t.status !== 'REJECTED')
     .map((ele) => ({ ...ele, components_origin: ele.components, components: groupBy(ele.components, (_c) => _c.type.toLowerCase()) }));
-  return canUseTemplates;
+  const topName = ['say_hello_from_trip_advisor', 'free_style_7', 'free_style_2', 'free_style_1', 'free_style_3', 'free_style_4'];
+  const top = sortArrayByOrder( canUseTemplates.filter((_t) => topName.includes(_t.name)), 'name', topName);
+  const raw = canUseTemplates.filter((_t) => !topName.includes(_t.name));
+  return [...top, ...raw];
 };
 
 /**

src/lib/msgUtils.js

@@ -100,7 +100,7 @@ export const sentMsgTypeMapped = {
   photo: {
     type: 'image',
     contentToSend: (msg) => ({
-      ...mediaMsg.contentToSend({...msg, type: 'image'}),
+      ...mediaMsg.contentToSend({ ...msg, type: 'image' }),
       msgtype: 'image',
     }),
     contentToRender: (msg) => ({
@@ -112,7 +112,7 @@ export const sentMsgTypeMapped = {
   sticker: {
     type: 'sticker',
     contentToSend: (msg) => ({
-      ...mediaMsg.contentToSend({...msg, type: 'sticker'}),
+      ...mediaMsg.contentToSend({ ...msg, type: 'sticker' }),
       msgtype: 'sticker',
     }),
     contentToRender: (msg) => ({
@@ -151,7 +151,33 @@ export const sentMsgTypeMapped = {
     }),
   },
   whatsappTemplate: {
-    contentToSend: (msg) => ({ action: 'message', actionId: msg.id, renderId: msg.id, to: msg.to, msgtype: 'template', msgcontent: { ...msg.template, components: msg.template.components.filter(com => com.type.toLowerCase() === 'body') }}), // todo: 其他组件不发送是否可以
+    contentToSend: (msg) => ({
+      action: 'message',
+      actionId: msg.id,
+      renderId: msg.id,
+      to: msg.to,
+      msgtype: 'template',
+      msgcontent: {
+        ...msg.template,
+        components: [
+          ...msg.template.components.filter((com) => !['footer', 'buttons', 'header'].includes(com.type.toLowerCase())),
+          ...(msg.template.components.filter((com) => 'header' === com.type.toLowerCase()).length > 0
+            ? msg.template.components
+                .filter((com) => 'header' === com.type.toLowerCase())
+                .map((ele) => ({ type: 'header', parameters: [{ text: ele.text, type: ele.format.toLowerCase(), [ele.format.toLowerCase()]: { link: ele.example.header_url[0] } }] }))
+            : []),
+          ...(msg.template.components.filter((com) => 'buttons' === com.type.toLowerCase()).length > 0
+            ? msg.template.components
+                .filter((com) => 'buttons' === com.type.toLowerCase())[0]
+                // .buttons.filter((btns) => ! ['phone_number', 'url'].includes( btns.type.toLowerCase()))
+                .buttons.filter((btns) => ! isEmpty(btns.example)) // 静态按钮不发
+                .map((btn, btnI) => ({ type: 'button', sub_type: btn.type.toLowerCase(), index: btnI,
+                // parameters: [{ text: 'lq1FTtA8', type: 'text' }]
+              }))
+            : []),
+        ],
+      },
+    }),
     contentToRender: (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);

src/views/DesktopApp.jsx

@@ -57,7 +57,7 @@ function DesktopApp() {
     <Layout>
       <Header className='header' style={{ position: 'sticky', top: 0, zIndex: 2, width: '100%', background: 'white' }}>
         <Row gutter={{ md: 24 }} align='middle'>
-          <Col flex='300px'>
+          <Col flex='220px'>
             <NavLink to='/'>
               <img src={AppLogo} className='logo' alt='App logo' />
             </NavLink>