Merge pull request #231 from nakahara-luiz/feature/636751-active-mess…

…age-card-default-media-icon Feature/636751 active message card default media icon
takenet · May 16, 2024 · 7a21959 · 7a21959
2 parents c7cbe56 + 64797c5
commit 7a21959
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 26 deletions.
diff --git a/src/commandExamples.js b/src/commandExamples.js
@@ -1594,6 +1594,16 @@ export const commandExamples = [
           name: 'test_button_website_with_variable',
           language: 'pt_BR',
           components: [
+            {
+              parameters: [
+                {
+                  image: {
+                  },
+                  type: 'image'
+                }
+              ],
+              type: 'header'
+            },
             {
               type: 'BODY',
               text: 'Olá! Cosme\\n\\nCompre castanha de caju direto da fábrica!\\nSomos o parceiro que faltava no fornecimento de castanha de caju orgânica de qualidade para o seu negócio.\\n\\nEsta podendo falar?\\n\\nhttps://url-link.com/p/ifCeg3.mp4'
@@ -1663,6 +1673,21 @@ export const commandExamples = [
           name: 'test_button_website_with_variable',
           language: 'pt_BR',
           components: [
+            {
+              example: {
+                header_handle: [
+                  'https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png'
+                ]
+              },
+              parameters: [
+                {
+                  image: {
+                  },
+                  type: 'image'
+                }
+              ],
+              type: 'header'
+            },
             {
               type: 'BODY',
               text: 'Olá! Cosme\\n\\nCompre castanha de caju direto da fábrica!\\nSomos o parceiro que faltava no fornecimento de castanha de caju orgânica de qualidade para o seu negócio.\\n\\nEsta podendo falar?\\n\\nhttps://url-link.com/p/ifCeg3.mp4'
@@ -1798,6 +1823,22 @@ export const commandExamples = [
           name: 'test_button_website_with_variable',
           language: 'pt_BR',
           components: [
+            {
+              parameters: [
+                {
+                  video: {
+                  },
+                  type: 'video/mp4'
+                }
+              ],
+              type: 'header',
+              format: 'VIDEO',
+              example: {
+                header_handle: [
+                  'https://scontent.whatsapp.net/v/t61.29466-34/415186706_1118259036204921_4104792501709373004_n.mp4?ccb=1-7&_nc_sid=8b1bef&_nc_ohc=8qg7w2_IGNsQ7kNvgF3gloy&_nc_ht=scontent.whatsapp.net&edm=AH51TzQEAAAA&oh=01_Q5AaIOBNt_miEc8H-gArJ7WiSP8sp3uQcqCUfotr9WbnyABj&oe=6660878F'
+                ]
+              }
+            },
             {
               type: 'BODY',
               text: 'Olá! Cosme\\n\\nCompre castanha de caju direto da fábrica!\\nSomos o parceiro que faltava no fornecimento de castanha de caju orgânica de qualidade para o seu negócio.\\n\\nEsta podendo falar?\\n\\nhttps://url-link.com/p/ifCeg3.mp4'
@@ -1862,6 +1903,16 @@ export const commandExamples = [
           name: 'test_button_website_with_variable',
           language: 'pt_BR',
           components: [
+            {
+              parameters: [
+                {
+                  video: {
+                  },
+                  type: 'video/mp4'
+                }
+              ],
+              type: 'header'
+            },
             {
               type: 'BODY',
               text: 'Olá! Cosme\\n\\nCompre castanha de caju direto da fábrica!\\nSomos o parceiro que faltava no fornecimento de castanha de caju orgânica de qualidade para o seu negócio.\\n\\nEsta podendo falar?\\n\\nhttps://url-link.com/p/ifCeg3.mp4'
@@ -2188,6 +2239,15 @@ export const commandExamples = [
           name: 'test_button_website_with_variable',
           language: 'pt_BR',
           components: [
+            {
+              parameters: [
+                {
+                  document: {},
+                  type: 'document'
+                }
+              ],
+              type: 'header'
+            },
             {
               type: 'BODY',
               text: 'Olá! Cosme\\n\\nCompre castanha de caju direto da fábrica!\\nSomos o parceiro que faltava no fornecimento de castanha de caju orgânica de qualidade para o seu negócio.\\n\\nEsta podendo falar?\\n\\nhttps://url-link.com/p/ifCeg3.mp4'
@@ -2257,6 +2317,21 @@ export const commandExamples = [
           name: 'test_button_website_with_variable',
           language: 'pt_BR',
           components: [
+            {
+              parameters: [
+                {
+                  document: {},
+                  type: 'document'
+                }
+              ],
+              example: {
+                header_handle: [
+                  'https://scontent.whatsapp.net/v/t61.29466-34/357690658_1023043205501498_318227860433953620_n.pdf?ccb=1-7&_nc_sid=8b1bef&_nc_ohc=UaDwzdYW0TMQ7kNvgEH_wBg&_nc_ht=scontent.whatsapp.net&edm=AH51TzQEAAAA&oh=01_Q5AaIBjwSXFKbFTUryBh1kjVrM-fmG6haTzpT-rz4IB3wEnK&oe=66607EA6'
+                ]
+              },
+              format: 'DOCUMENT',
+              type: 'header'
+            },
             {
               type: 'BODY',
               text: 'Olá! Cosme\\n\\nCompre castanha de caju direto da fábrica!\\nSomos o parceiro que faltava no fornecimento de castanha de caju orgânica de qualidade para o seu negócio.\\n\\nEsta podendo falar?\\n\\nhttps://url-link.com/p/ifCeg3.mp4'

diff --git a/src/components/TemplateContent/MediaContent/MediaContent.vue b/src/components/TemplateContent/MediaContent/MediaContent.vue
@@ -3,12 +3,14 @@
     id="blip-container">
     <div id='media-content' class="media-content">
       <media-image v-if="docType.includes('image')"
-        :componentImage="componentImage" />
+        :componentImage="componentImage"
+        :emptyMediaMessage="defaultMediaMessage" />
 
       <media-video v-else-if="docType.includes('video')"
         :componentVideo="componentVideo"
         :onVideoValidateUri="onAudioValidateUri"
-        :async-fetch-media="asyncFetchMedia"></media-video>
+        :async-fetch-media="asyncFetchMedia"
+        :emptyMediaMessage="defaultMediaMessage"></media-video>
 
       <media-audio v-else-if="docType.includes('audio')"
         :class="'padding-control'"
@@ -19,11 +21,12 @@
       <media-file v-else-if="docType.includes('document')"
         :componentDocument="componentDocument"
         :position="position"
-        :async-fetch-media="asyncFetchMedia"></media-file>
+        :async-fetch-media="asyncFetchMedia"
+        :emptyMediaMessage="defaultMediaMessage"></media-file>
     </div>
   </div>
 </template>
-  
+
 <script>
 
 import MediaImage from './MediaImage'
@@ -72,29 +75,31 @@ export default {
       componentVideo: undefined,
       componentDocument: undefined,
       componentAudio: undefined,
-      docType: ''
+      docType: '',
+      defaultMediaMessage: ''
     }
   },
   mixins: [
     base
   ],
   created() {
     this.docType = (this.document &&
-      this.document.template &&
-      this.document.template.components &&
-      this.document.template.components[0] &&
-      validateTextHasValue(this.document.template.components[0].type, 'header') &&
-      this.document.template.components[0].format)
-      ? this.document.template.components[0].format
+      this.document.templateContent &&
+      this.document.templateContent.components &&
+      this.document.templateContent.components[0] &&
+      validateTextHasValue(this.document.templateContent.components[0].type, 'header') &&
+      this.document.templateContent.components[0].format)
+      ? this.document.templateContent.components[0].format
       : (this.document &&
-      this.document.template &&
-      this.document.template.components &&
-      this.document.template.components[0] &&
-      this.document.template.components[0].parameters &&
-      this.document.template.components[0].parameters[0])
-      ? this.document.template.components[0].parameters[0].type
+      this.document.templateContent &&
+      this.document.templateContent.components &&
+      this.document.templateContent.components[0] &&
+      this.document.templateContent.components[0].parameters &&
+      this.document.templateContent.components[0].parameters[0])
+      ? this.document.templateContent.components[0].parameters[0].type
       : ''
 
+    this.defaultMediaMessage = this.document.emptyMediaMessage
     this.docType = this.docType.toLowerCase()
 
     if (this.docType.includes('image')) {

diff --git a/src/components/TemplateContent/MediaContent/MediaFile.vue b/src/components/TemplateContent/MediaContent/MediaFile.vue
@@ -6,7 +6,7 @@
         <bds-icon name="file-name-doc" color="var(--$color-content-ghost, #8C8C8C)" />
       </div>
       <bds-typo class="typo" tag="p" variant="fs-12" bold="regular">
-        {{ defaultDocumentMessage }}
+        {{ emptyMediaMessage }}
       </bds-typo>
     </div>
     <div v-else-if="componentDocument !== undefined"
@@ -39,7 +39,7 @@ export default {
     asyncFetchMedia: {
       type: Function
     },
-    defaultDocumentMessage: {
+    emptyMediaMessage: {
       type: String,
       default: 'Insira um documento em “Mídia“'
     }

diff --git a/src/components/TemplateContent/MediaContent/MediaImage.vue b/src/components/TemplateContent/MediaContent/MediaImage.vue
@@ -9,7 +9,7 @@
       <bds-icon name="file-image" color="var(--$color-content-ghost, #8C8C8C)" />
     </div>
     <bds-typo class="typo" tag="p" variant="fs-12" bold="regular">
-      {{ defaultImageMessage }}
+      {{ emptyMediaMessage }}
     </bds-typo>
   </div>
 </template>
@@ -23,9 +23,9 @@ export default {
     asyncFetchMedia: {
       type: Function
     },
-    defaultImageMessage: {
+    emptyMediaMessage: {
       type: String,
-      default: 'Insira uma imagem em “Mídia“'
+      default: 'Insira um imagem em "Mídia"'
     }
   },
   methods: {

diff --git a/src/components/TemplateContent/MediaContent/MediaVideo.vue b/src/components/TemplateContent/MediaContent/MediaVideo.vue
@@ -5,7 +5,7 @@
       <bds-icon name="video" color="var(--$color-content-ghost, #8C8C8C)" />
     </div>
     <bds-typo class="typo" tag="p" variant="fs-12" bold="regular">
-      {{ defaultVideoMessage }}
+      {{ emptyMediaMessage }}
     </bds-typo>
   </div>
   <blip-video v-else
@@ -31,7 +31,7 @@ export default {
     asyncFetchMedia: {
       type: Function
     },
-    defaultVideoMessage: {
+    emptyMediaMessage: {
       type: String,
       default: 'Insira um vídeo em “Mídia“'
     }

diff --git a/src/components/TemplateContent/TemplateContent.vue b/src/components/TemplateContent/TemplateContent.vue
@@ -157,8 +157,8 @@ export default {
           bodyFilledVariables = bodyFilledVariables[0].parameters
           const regexFindVariablesInText = /\{\{(\d+)\}\}/g
           componentTemplateBody = componentTemplateBody.replace(regexFindVariablesInText, (match, index) => {
-            const value = bodyFilledVariables[index - 1].text
-            return value !== undefined ? value : match
+            const variable = bodyFilledVariables[index - 1]
+            return variable ? variable.text : match
           })
         }
       }