From 43367d57a888ce201db3b32e01614951b07acb1a Mon Sep 17 00:00:00 2001
From: Muhsin <muhsinkeramam@gmail.com>
Date: Wed, 29 Oct 2025 19:50:56 +0530
Subject: [PATCH] chore: update button styles

---
 .../DynamicCallToActionTemplate.vue           | 33 +++++++++++++++++++
 .../template-preview/TemplatePreview.vue      |  6 ++--
 .../TemplatePreviewExamples.story.vue         |  2 +-
 3 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/template-preview/DynamicCallToActionTemplate.vue

diff --git a/app/javascript/dashboard/components-next/template-preview/DynamicCallToActionTemplate.vue b/app/javascript/dashboard/components-next/template-preview/DynamicCallToActionTemplate.vue
new file mode 100644
index 000000000..402b73a86
--- /dev/null
+++ b/app/javascript/dashboard/components-next/template-preview/DynamicCallToActionTemplate.vue
@@ -0,0 +1,33 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-2.5 text-n-slate-12 max-w-80">
+    <div class="p-3 rounded-xl bg-n-alpha-2">
+      <span
+        v-dompurify-html="message.content"
+        class="text-sm font-medium prose prose-bubble"
+      />
+    </div>
+    <div
+      v-if="message.buttons && message.buttons.length > 0"
+      class="flex flex-col gap-2"
+    >
+      <Button
+        v-for="(button, index) in message.buttons"
+        :key="index"
+        :label="button.text || 'Button'"
+        slate
+        class="!text-n-blue-text w-full"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/template-preview/TemplatePreview.vue b/app/javascript/dashboard/components-next/template-preview/TemplatePreview.vue
index aa1479bac..838aa0130 100644
--- a/app/javascript/dashboard/components-next/template-preview/TemplatePreview.vue
+++ b/app/javascript/dashboard/components-next/template-preview/TemplatePreview.vue
@@ -4,9 +4,9 @@ import { TemplateNormalizer } from 'dashboard/services/TemplateNormalizer';
 
 import TextTemplate from 'dashboard/components-next/message/bubbles/Template/Text.vue';
 import MediaTemplate from 'dashboard/components-next/message/bubbles/Template/Media.vue';
-import CallToActionTemplate from 'dashboard/components-next/message/bubbles/Template/CallToAction.vue';
 import QuickReplyTemplate from 'dashboard/components-next/message/bubbles/Template/QuickReply.vue';
 import CardTemplate from 'dashboard/components-next/message/bubbles/Template/Card.vue';
+import DynamicCallToActionTemplate from './DynamicCallToActionTemplate.vue';
 
 const props = defineProps({
   template: {
@@ -92,8 +92,8 @@ const previewComponent = computed(() => {
     'whatsapp-media-image': MediaTemplate,
     'whatsapp-media-video': MediaTemplate,
     'whatsapp-media-document': MediaTemplate,
-    'whatsapp-interactive': CallToActionTemplate,
-    'whatsapp-copy-code': CallToActionTemplate,
+    'whatsapp-interactive': DynamicCallToActionTemplate,
+    'whatsapp-copy-code': DynamicCallToActionTemplate,
 
     // Twilio components
     'twilio-text': TextTemplate,
diff --git a/app/javascript/dashboard/components-next/template-preview/TemplatePreviewExamples.story.vue b/app/javascript/dashboard/components-next/template-preview/TemplatePreviewExamples.story.vue
index 972c3e4f0..de802d21d 100644
--- a/app/javascript/dashboard/components-next/template-preview/TemplatePreviewExamples.story.vue
+++ b/app/javascript/dashboard/components-next/template-preview/TemplatePreviewExamples.story.vue
@@ -57,7 +57,7 @@ const whatsAppTemplates = [
         format: 'DOCUMENT',
         example: {
           header_handle: [
-            'https://scontent.whatsapp.net/v/t61.29466-34/521502500_767076162670092_7371147273350347509_n.pdf',
+            'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
           ],
         },
       },