From 43395be4d4967e4d105d66fe61d45f3dbb955157 Mon Sep 17 00:00:00 2001
From: Muhsin <muhsinkeramam@gmail.com>
Date: Wed, 29 Oct 2025 21:06:20 +0530
Subject: [PATCH] chore: add the support for header and footer

---
 .../template-preview/TemplatePreview.vue      | 10 +++++--
 .../template-preview/WhatsAppTextTemplate.vue | 29 +++++++++++++++++++
 2 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/template-preview/WhatsAppTextTemplate.vue

diff --git a/app/javascript/dashboard/components-next/template-preview/TemplatePreview.vue b/app/javascript/dashboard/components-next/template-preview/TemplatePreview.vue
index 2091260d1..efe920829 100644
--- a/app/javascript/dashboard/components-next/template-preview/TemplatePreview.vue
+++ b/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,
diff --git a/app/javascript/dashboard/components-next/template-preview/WhatsAppTextTemplate.vue b/app/javascript/dashboard/components-next/template-preview/WhatsAppTextTemplate.vue
new file mode 100644
index 000000000..078465dbb
--- /dev/null
+++ b/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>