chore: update button styles

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>

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,

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',
           ],
         },
       },