chore: add the support for header and footer

app/javascript/dashboard/components-next/template-preview/TemplatePreview.vue

@@ -7,6 +7,7 @@ import QuickReplyTemplate from 'dashboard/components-next/message/bubbles/Templa
 import CardTemplate from 'dashboard/components-next/message/bubbles/Template/Card.vue';
 import DynamicCallToActionTemplate from './DynamicCallToActionTemplate.vue';
 import DynamicMediaTemplate from './DynamicMediaTemplate.vue';
+import WhatsAppTextTemplate from './WhatsAppTextTemplate.vue';
 
 const props = defineProps({
   template: {
@@ -44,6 +45,7 @@ const processedTemplate = computed(() => {
   let content = '';
   let imageUrl = '';
   let title = '';
+  let footer = '';
 
   if (props.platform === 'whatsapp') {
     // WhatsApp: get text from body component
@@ -62,6 +64,9 @@ const processedTemplate = computed(() => {
         title = normalized.header.text || '';
       }
     }
+
+    // Get footer content
+    footer = normalized.footer?.text || '';
   } else {
     // Twilio: get body directly
     content = normalized.body || '';
@@ -76,6 +81,7 @@ const processedTemplate = computed(() => {
     ...normalized,
     content: processText(content),
     title: processText(title),
+    footer: processText(footer),
     image_url: imageUrl,
     buttons: normalized.buttons || [],
   };
@@ -87,8 +93,8 @@ const previewComponent = computed(() => {
 
   const componentMap = {
     // WhatsApp components
-    'whatsapp-text': TextTemplate,
-    'whatsapp-text-header': TextTemplate,
+    'whatsapp-text': WhatsAppTextTemplate,
+    'whatsapp-text-header': WhatsAppTextTemplate,
     'whatsapp-media-image': DynamicMediaTemplate,
     'whatsapp-media-video': DynamicMediaTemplate,
     'whatsapp-media-document': DynamicMediaTemplate,

app/javascript/dashboard/components-next/template-preview/WhatsAppTextTemplate.vue

@@ -0,0 +1,29 @@
+<script setup>
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="bg-n-alpha-2 text-n-slate-12 rounded-xl p-3 max-w-80 flex flex-col gap-2"
+  >
+    <!-- Header Text -->
+    <div v-if="message.title" class="font-bold text-base">
+      {{ message.title }}
+    </div>
+
+    <!-- Body Content -->
+    <div v-if="message.content" class="prose prose-bubble font-medium text-sm">
+      <span v-dompurify-html="message.content" />
+    </div>
+
+    <!-- Footer Text -->
+    <div v-if="message.footer" class="text-xs text-n-slate-11 opacity-70">
+      {{ message.footer }}
+    </div>
+  </div>
+</template>