perf: 模板: 头部参数

src/channel/whatsappUtils.js

@@ -160,20 +160,18 @@ export const sentMsgTypeMapped = {
       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) => !['footer', 'buttons'].includes(com.type.toLowerCase())),
           ...(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' }]
-              }))
+                .buttons.filter((btns) => !isEmpty(btns.example)) // 静态按钮不发
+                .map((btn, btnI) => ({
+                  type: 'button',
+                  sub_type: btn.type.toLowerCase(),
+                  index: btnI,
+                  // parameters: [{ text: 'lq1FTtA8', type: 'text' }]
+                }))
             : []),
         ],
       },
@@ -188,20 +186,18 @@ export const sentMsgTypeMapped = {
         template: {
           ...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) => !['footer', 'buttons'].includes(com.type.toLowerCase())),
             ...(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' }]
-                }))
+                  .buttons.filter((btns) => !isEmpty(btns.example)) // 静态按钮不发
+                  .map((btn, btnI) => ({
+                    type: 'button',
+                    sub_type: btn.type.toLowerCase(),
+                    index: btnI,
+                    // parameters: [{ text: 'lq1FTtA8', type: 'text' }]
+                  }))
               : []),
           ],
         },

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

@@ -68,10 +68,15 @@ const InputTemplate = ({ mobile, disabled = false, invokeSendMessage }) => {
         components: sortArrayByOrder(fromTemplate.components_origin.map((citem) => {
           const keys = ((citem?.text || '').match(/{{(.*?)}}/g) || []).map((key) => key.replace(/{{|}}/g, ''));
           const params = keys.map((v) => ({ type: 'text', text: getNestedValue(mergeInput, [v]) }));
-          const paramText = params.map((p) => p.text);
+
+          if (citem.type.toLowerCase() === 'header' && (citem?.format || 'text').toLowerCase() !== 'text') {
+            params[0] = { type: citem.format.toLowerCase(), [citem.format.toLowerCase()]: { link: citem.example.header_url[0] } };
+          }
+
+          const paramText = keys.length ? params.map((p) => p.text) : [];
           const fillTemplate = paramText.length ? replaceTemplateString(citem?.text || '', paramText) : citem?.text || '';
           valid = keys.length !== paramText.filter((s) => s).length ? false : valid;
-          return citem.type.toLowerCase() === 'body' ? {
+          return ['body', 'header'].includes(citem.type.toLowerCase()) ? {
             type: citem.type.toLowerCase(),
             parameters: params,
             text: fillTemplate,
@@ -110,7 +115,7 @@ const InputTemplate = ({ mobile, disabled = false, invokeSendMessage }) => {
     const headerObj = tempItem.components.header[0];
     return (
       <div className='pb-1'>
-        {'text' === headerObj.format.toLowerCase() && <div>{headerObj.text}</div>}
+        {'text' === headerObj.format.toLowerCase() && <div>{renderForm({ tempItem }, 'header')}</div>}
         {'image' === headerObj.format.toLowerCase() && <img src={headerObj.example.header_url} height={100}></img>}
         {['document', 'video'].includes(headerObj.format.toLowerCase()) && (
           <a href={headerObj.example.header_url} target='_blank' key={headerObj.format} rel='noreferrer' className='text-sm'>
@@ -146,8 +151,8 @@ const InputTemplate = ({ mobile, disabled = false, invokeSendMessage }) => {
     );
   }
 
-  const renderForm = ({ tempItem }) => {
-    const templateText = tempItem.components.body?.[0]?.text || '';
+  const renderForm = ({ tempItem }, key = 'body') => {
+    const templateText = tempItem.components?.[key]?.[0]?.text || '';
     const tempArr = splitTemplate(templateText);
     const keys = (templateText.match(/{{(.*?)}}/g) || []).map((key) => key.replace(/{{|}}/g, ''));
     const paramsVal = keys.reduce((r, k) => ({ ...r, [k]: getNestedValue(valueMapped, [k]) }), {});