From 517b67dfd6fee65d91d7de059f6f4e8c564184a4 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Thu, 30 Apr 2026 18:54:34 +0400
Subject: [PATCH] feat: Add rich template preview for WhatsApp & Twilio
 Templates (#13206)

This PR introduces a comprehensive, display-only template preview system
for both WhatsApp and Twilio templates rendering of all supported
template types.

This lays the foundation for rich template previews across:
- Template selection modals
- Campaign creation flows
- Message composer
- Message screen.

<img width="1818" height="2058" alt="template-preview"
src="https://github.com/user-attachments/assets/9833b28c-f824-4568-8f74-6da09ac61f62"
/>

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Muhsin <12408980+muhsin-k@users.noreply.github.com>
---
 .../message/bubbles/Template/CallToAction.vue |  25 --
 .../message/bubbles/Template/ListPicker.vue   |  25 --
 .../message/bubbles/Template/Media.vue        |  20 -
 .../message/bubbles/Template/QuickReply.vue   |  68 ---
 .../stories/Template/CallToAction.story.vue   |  21 -
 .../message/stories/Template/Card.story.vue   |  23 -
 .../stories/Template/ListPicker.story.vue     |  21 -
 .../message/stories/Template/Media.story.vue  |  23 -
 .../stories/Template/QuickReply.story.vue     |  21 -
 .../message/stories/Template/Text.story.vue   |  20 -
 .../CSATTemplate.vue}                         |   0
 .../template-preview/CallToActionTemplate.vue |  33 ++
 .../CardTemplate.vue}                         |  12 +-
 .../template-preview/MediaTemplate.vue        |  67 +++
 .../template-preview/QuickReplyTemplate.vue   |  42 ++
 .../TemplatePreview.story.vue                 | 105 +++++
 .../template-preview/TemplatePreview.vue      | 112 +++++
 .../TemplatePreviewExamples.story.vue         | 199 +++++++++
 .../TextTemplate.vue}                         |   2 +-
 .../template-preview/WhatsAppTextTemplate.vue |  26 ++
 .../components-next/template-preview/index.js |   6 +
 .../templates/twilio-templates.js             | 209 +++++++++
 .../templates/whatsapp-templates.js           | 408 ++++++++++++++++++
 .../settingsPage/CustomerSatisfactionPage.vue |   2 +-
 .../dashboard/services/TemplateConstants.js   |  58 +++
 .../dashboard/services/TemplateNormalizer.js  | 114 +++++
 .../services/TemplateNormalizer.spec.js       | 143 ++++++
 .../services/TemplateTypeDetector.js          |  63 +++
 .../services/TemplateTypeDetector.spec.js     | 106 +++++
 .../modules/specs/inboxes/templateFixtures.js |   4 +-
 theme/icons.js                                |   5 +
 31 files changed, 1706 insertions(+), 277 deletions(-)
 delete mode 100644 app/javascript/dashboard/components-next/message/bubbles/Template/CallToAction.vue
 delete mode 100644 app/javascript/dashboard/components-next/message/bubbles/Template/ListPicker.vue
 delete mode 100644 app/javascript/dashboard/components-next/message/bubbles/Template/Media.vue
 delete mode 100644 app/javascript/dashboard/components-next/message/bubbles/Template/QuickReply.vue
 delete mode 100644 app/javascript/dashboard/components-next/message/stories/Template/CallToAction.story.vue
 delete mode 100644 app/javascript/dashboard/components-next/message/stories/Template/Card.story.vue
 delete mode 100644 app/javascript/dashboard/components-next/message/stories/Template/ListPicker.story.vue
 delete mode 100644 app/javascript/dashboard/components-next/message/stories/Template/Media.story.vue
 delete mode 100644 app/javascript/dashboard/components-next/message/stories/Template/QuickReply.story.vue
 delete mode 100644 app/javascript/dashboard/components-next/message/stories/Template/Text.story.vue
 rename app/javascript/dashboard/components-next/{message/bubbles/Template/CSAT.vue => template-preview/CSATTemplate.vue} (100%)
 create mode 100644 app/javascript/dashboard/components-next/template-preview/CallToActionTemplate.vue
 rename app/javascript/dashboard/components-next/{message/bubbles/Template/Card.vue => template-preview/CardTemplate.vue} (60%)
 create mode 100644 app/javascript/dashboard/components-next/template-preview/MediaTemplate.vue
 create mode 100644 app/javascript/dashboard/components-next/template-preview/QuickReplyTemplate.vue
 create mode 100644 app/javascript/dashboard/components-next/template-preview/TemplatePreview.story.vue
 create mode 100644 app/javascript/dashboard/components-next/template-preview/TemplatePreview.vue
 create mode 100644 app/javascript/dashboard/components-next/template-preview/TemplatePreviewExamples.story.vue
 rename app/javascript/dashboard/components-next/{message/bubbles/Template/Text.vue => template-preview/TextTemplate.vue} (76%)
 create mode 100644 app/javascript/dashboard/components-next/template-preview/WhatsAppTextTemplate.vue
 create mode 100644 app/javascript/dashboard/components-next/template-preview/index.js
 create mode 100644 app/javascript/dashboard/components-next/template-preview/templates/twilio-templates.js
 create mode 100644 app/javascript/dashboard/components-next/template-preview/templates/whatsapp-templates.js
 create mode 100644 app/javascript/dashboard/services/TemplateConstants.js
 create mode 100644 app/javascript/dashboard/services/TemplateNormalizer.js
 create mode 100644 app/javascript/dashboard/services/TemplateNormalizer.spec.js
 create mode 100644 app/javascript/dashboard/services/TemplateTypeDetector.js
 create mode 100644 app/javascript/dashboard/services/TemplateTypeDetector.spec.js

diff --git a/app/javascript/dashboard/components-next/message/bubbles/Template/CallToAction.vue b/app/javascript/dashboard/components-next/message/bubbles/Template/CallToAction.vue
deleted file mode 100644
index 021419065..000000000
--- a/app/javascript/dashboard/components-next/message/bubbles/Template/CallToAction.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup>
-import Button from 'dashboard/components-next/button/Button.vue';
-
-defineProps({
-  message: {
-    type: Object,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <div class="text-n-slate-12 max-w-80 flex flex-col gap-2.5">
-    <div class="p-3 bg-n-alpha-2 rounded-xl">
-      <span
-        v-dompurify-html="message.content"
-        class="prose prose-bubble font-medium text-sm"
-      />
-    </div>
-    <div class="flex gap-2">
-      <Button label="Call us" slate class="!text-n-blue-11 w-full" />
-      <Button label="Visit our website" slate class="!text-n-blue-11 w-full" />
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Template/ListPicker.vue b/app/javascript/dashboard/components-next/message/bubbles/Template/ListPicker.vue
deleted file mode 100644
index 7d9401b80..000000000
--- a/app/javascript/dashboard/components-next/message/bubbles/Template/ListPicker.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup>
-import Button from 'dashboard/components-next/button/Button.vue';
-defineProps({
-  message: {
-    type: Object,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <div
-    class="bg-n-alpha-2 divide-y divide-n-strong text-n-slate-12 rounded-xl max-w-80"
-  >
-    <div class="p-3">
-      <span
-        v-dompurify-html="message.content"
-        class="prose prose-bubble font-medium text-sm"
-      />
-    </div>
-    <div class="p-3 flex items-center justify-center">
-      <Button label="See options" link class="hover:!no-underline" />
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Template/Media.vue b/app/javascript/dashboard/components-next/message/bubbles/Template/Media.vue
deleted file mode 100644
index 24340ab90..000000000
--- a/app/javascript/dashboard/components-next/message/bubbles/Template/Media.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup>
-defineProps({
-  message: {
-    type: Object,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <div
-    class="bg-n-alpha-2 text-n-slate-12 rounded-xl flex flex-col gap-2.5 p-3 max-w-80"
-  >
-    <img :src="message.image_url" class="max-h-44 rounded-lg w-full" />
-    <span
-      v-dompurify-html="message.content"
-      class="prose prose-bubble font-medium text-sm"
-    />
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Template/QuickReply.vue b/app/javascript/dashboard/components-next/message/bubbles/Template/QuickReply.vue
deleted file mode 100644
index 19727578f..000000000
--- a/app/javascript/dashboard/components-next/message/bubbles/Template/QuickReply.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script setup>
-import Button from 'dashboard/components-next/button/Button.vue';
-defineProps({
-  message: {
-    type: Object,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <div
-    class="bg-n-alpha-2 divide-y divide-n-strong text-n-slate-12 rounded-xl max-w-80"
-  >
-    <div class="p-3">
-      <span
-        v-dompurify-html="message.content"
-        class="prose prose-bubble font-medium text-sm"
-      />
-    </div>
-    <div class="p-3 flex items-center justify-center">
-      <Button label="No, that will be all" link class="hover:!no-underline">
-        <template #icon>
-          <svg
-            width="15"
-            height="15"
-            viewBox="0 0 15 15"
-            fill="none"
-            class="stroke-n-blue-text"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M.667 6.654 5.315.667v3.326c7.968 0 8.878 6.46 8.656 10.007l-.005-.027c-.334-1.79-.474-4.658-8.65-4.658v3.327z"
-              stroke-width="1.333"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-        </template>
-      </Button>
-    </div>
-    <div class="p-3 flex items-center justify-center">
-      <Button
-        label="I want to talk to an agents"
-        link
-        class="hover:!no-underline"
-      >
-        <template #icon>
-          <svg
-            width="15"
-            height="15"
-            viewBox="0 0 15 15"
-            fill="none"
-            class="stroke-n-blue-text"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M.667 6.654 5.315.667v3.326c7.968 0 8.878 6.46 8.656 10.007l-.005-.027c-.334-1.79-.474-4.658-8.65-4.658v3.327z"
-              stroke-width="1.333"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-        </template>
-      </Button>
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/Template/CallToAction.story.vue b/app/javascript/dashboard/components-next/message/stories/Template/CallToAction.story.vue
deleted file mode 100644
index 1c2b956a3..000000000
--- a/app/javascript/dashboard/components-next/message/stories/Template/CallToAction.story.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup>
-import CallToAction from '../../bubbles/Template/CallToAction.vue';
-
-const message = {
-  content:
-    'We have super cool products going live! Pre-order and customize products. Contact us for more details',
-};
-</script>
-
-<template>
-  <Story
-    title="Components/Message Bubbles/Template/CallToAction"
-    :layout="{ type: 'grid', width: '600px' }"
-  >
-    <Variant title="Call To Action">
-      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
-        <CallToAction :message="message" />
-      </div>
-    </Variant>
-  </Story>
-</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/Template/Card.story.vue b/app/javascript/dashboard/components-next/message/stories/Template/Card.story.vue
deleted file mode 100644
index caa594bab..000000000
--- a/app/javascript/dashboard/components-next/message/stories/Template/Card.story.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup>
-import Card from '../../bubbles/Template/Card.vue';
-
-const message = {
-  title: 'Two in one cake (1 pound)',
-  content: 'Customize your order for special occasions',
-  image_url:
-    'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500&h=300&fit=crop',
-};
-</script>
-
-<template>
-  <Story
-    title="Components/Message Bubbles/Template/Card"
-    :layout="{ type: 'grid', width: '600px' }"
-  >
-    <Variant title="Card">
-      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
-        <Card :message="message" />
-      </div>
-    </Variant>
-  </Story>
-</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/Template/ListPicker.story.vue b/app/javascript/dashboard/components-next/message/stories/Template/ListPicker.story.vue
deleted file mode 100644
index f1e9dd8b8..000000000
--- a/app/javascript/dashboard/components-next/message/stories/Template/ListPicker.story.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup>
-import ListPicker from '../../bubbles/Template/ListPicker.vue';
-
-const message = {
-  content: `Hey there! Thanks for reaching out to us. Could you let us know
-what you need to help us better assist you? `,
-};
-</script>
-
-<template>
-  <Story
-    title="Components/Message Bubbles/Template/ListPicker"
-    :layout="{ type: 'grid', width: '600px' }"
-  >
-    <Variant title="ListPicker">
-      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
-        <ListPicker :message="message" />
-      </div>
-    </Variant>
-  </Story>
-</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/Template/Media.story.vue b/app/javascript/dashboard/components-next/message/stories/Template/Media.story.vue
deleted file mode 100644
index 67d7fc6b8..000000000
--- a/app/javascript/dashboard/components-next/message/stories/Template/Media.story.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup>
-import Media from '../../bubbles/Template/Media.vue';
-
-const message = {
-  content:
-    'Welcome to our Diwali sale! Get flat 50% off on select items. Hurry now!',
-  image_url:
-    'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500&h=300&fit=crop',
-};
-</script>
-
-<template>
-  <Story
-    title="Components/Message Bubbles/Template/Media"
-    :layout="{ type: 'grid', width: '600px' }"
-  >
-    <Variant title="Image Media">
-      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
-        <Media :message="message" />
-      </div>
-    </Variant>
-  </Story>
-</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/Template/QuickReply.story.vue b/app/javascript/dashboard/components-next/message/stories/Template/QuickReply.story.vue
deleted file mode 100644
index 1d670e07c..000000000
--- a/app/javascript/dashboard/components-next/message/stories/Template/QuickReply.story.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup>
-import QuickReply from '../../bubbles/Template/QuickReply.vue';
-
-const message = {
-  content: `Hey there! Thanks for reaching out to us. Could you let us know
-what you need to help us better assist you?`,
-};
-</script>
-
-<template>
-  <Story
-    title="Components/Message Bubbles/Template/QuickReply"
-    :layout="{ type: 'grid', width: '600px' }"
-  >
-    <Variant title="Quick Replies">
-      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
-        <QuickReply :message="message" />
-      </div>
-    </Variant>
-  </Story>
-</template>
diff --git a/app/javascript/dashboard/components-next/message/stories/Template/Text.story.vue b/app/javascript/dashboard/components-next/message/stories/Template/Text.story.vue
deleted file mode 100644
index cbb6df569..000000000
--- a/app/javascript/dashboard/components-next/message/stories/Template/Text.story.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup>
-import Text from '../../bubbles/Template/Text.vue';
-
-const message = {
-  content: 'Hello John, how may we assist you?',
-};
-</script>
-
-<template>
-  <Story
-    title="Components/Message Bubbles/Template/Text"
-    :layout="{ type: 'grid', width: '600px' }"
-  >
-    <Variant title="Default Text">
-      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
-        <Text :message="message" />
-      </div>
-    </Variant>
-  </Story>
-</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Template/CSAT.vue b/app/javascript/dashboard/components-next/template-preview/CSATTemplate.vue
similarity index 100%
rename from app/javascript/dashboard/components-next/message/bubbles/Template/CSAT.vue
rename to app/javascript/dashboard/components-next/template-preview/CSATTemplate.vue
diff --git a/app/javascript/dashboard/components-next/template-preview/CallToActionTemplate.vue b/app/javascript/dashboard/components-next/template-preview/CallToActionTemplate.vue
new file mode 100644
index 000000000..b4d61d252
--- /dev/null
+++ b/app/javascript/dashboard/components-next/template-preview/CallToActionTemplate.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.title || 'Button'"
+        slate
+        class="!text-n-blue-11 w-full"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Template/Card.vue b/app/javascript/dashboard/components-next/template-preview/CardTemplate.vue
similarity index 60%
rename from app/javascript/dashboard/components-next/message/bubbles/Template/Card.vue
rename to app/javascript/dashboard/components-next/template-preview/CardTemplate.vue
index 9a4f9f19a..e862bc008 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Template/Card.vue
+++ b/app/javascript/dashboard/components-next/template-preview/CardTemplate.vue
@@ -10,22 +10,22 @@ defineProps({
 
 <template>
   <div
-    class="bg-n-alpha-2 divide-y divide-n-strong text-n-slate-12 rounded-xl max-w-80"
+    class="rounded-xl divide-y bg-n-alpha-2 divide-n-strong text-n-slate-12 max-w-80"
   >
     <div class="px-3 py-2.5">
-      <img :src="message.image_url" class="max-h-44 rounded-lg w-full" />
-      <div class="pt-2.5 flex flex-col gap-2">
+      <img :src="message.image_url" class="w-full max-h-44 rounded-lg" />
+      <div class="flex flex-col gap-2 pt-2.5">
         <h6 class="font-semibold">{{ message.title }}</h6>
         <span
           v-dompurify-html="message.content"
-          class="prose prose-bubble text-sm"
+          class="text-sm prose prose-bubble"
         />
       </div>
     </div>
-    <div class="p-3 flex items-center justify-center">
+    <div class="flex justify-center items-center p-3">
       <Button label="Call us to order" link class="hover:!no-underline" />
     </div>
-    <div class="p-3 flex items-center justify-center">
+    <div class="flex justify-center items-center p-3">
       <Button label="Visit our store" link class="hover:!no-underline" />
     </div>
   </div>
diff --git a/app/javascript/dashboard/components-next/template-preview/MediaTemplate.vue b/app/javascript/dashboard/components-next/template-preview/MediaTemplate.vue
new file mode 100644
index 000000000..16e6b08dc
--- /dev/null
+++ b/app/javascript/dashboard/components-next/template-preview/MediaTemplate.vue
@@ -0,0 +1,67 @@
+<script setup>
+import { computed } from 'vue';
+import FileIcon from 'dashboard/components-next/icon/FileIcon.vue';
+
+const props = defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+
+const PDF_EXTENSIONS = ['.pdf', 'pdf'];
+const VIDEO_EXTENSIONS = ['.mp4', '.mov', 'video'];
+const DOC_EXTENSIONS = ['.doc'];
+
+const mediaType = computed(() => {
+  if (props.message.mediaType) return props.message.mediaType;
+
+  const format = props.message.header?.format;
+  if (format) return format.toLowerCase();
+
+  const url = props.message.image_url || '';
+  if (PDF_EXTENSIONS.some(ext => url.includes(ext))) return 'document';
+  if (VIDEO_EXTENSIONS.some(ext => url.includes(ext))) return 'video';
+  return 'image';
+});
+
+const fileType = computed(() => {
+  const url = props.message.image_url || '';
+  return DOC_EXTENSIONS.some(ext => url.includes(ext)) ? 'doc' : 'pdf';
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-2.5 p-3 rounded-xl bg-n-alpha-2 text-n-slate-12 max-w-80"
+  >
+    <img
+      v-if="mediaType === 'image'"
+      :src="message.image_url"
+      class="object-cover w-full max-h-44 rounded-lg"
+      alt="Template media"
+    />
+
+    <div
+      v-else-if="mediaType === 'video'"
+      class="overflow-hidden relative rounded-lg"
+    >
+      <video
+        :src="message.image_url"
+        class="object-cover w-full max-h-44"
+        controls
+        preload="metadata"
+      />
+    </div>
+
+    <div v-else-if="mediaType === 'document'" class="flex items-center">
+      <FileIcon :file-type="fileType" class="text-2xl text-n-slate-12" />
+    </div>
+
+    <span
+      v-if="message.content"
+      v-dompurify-html="message.content"
+      class="text-sm font-medium prose prose-bubble"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/template-preview/QuickReplyTemplate.vue b/app/javascript/dashboard/components-next/template-preview/QuickReplyTemplate.vue
new file mode 100644
index 000000000..c14eb5f37
--- /dev/null
+++ b/app/javascript/dashboard/components-next/template-preview/QuickReplyTemplate.vue
@@ -0,0 +1,42 @@
+<script setup>
+import { computed } from 'vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+
+const actions = computed(() => props.message.actions || []);
+</script>
+
+<template>
+  <div
+    class="rounded-xl divide-y bg-n-alpha-2 divide-n-strong text-n-slate-12 max-w-80"
+  >
+    <div class="p-3">
+      <span
+        v-dompurify-html="message.content"
+        class="text-sm font-medium prose prose-bubble"
+      />
+    </div>
+    <div
+      v-for="(action, index) in actions"
+      :key="index"
+      class="flex justify-center items-center p-3"
+    >
+      <Button
+        :label="action.title || action.text || 'Button'"
+        link
+        class="hover:!no-underline"
+      >
+        <template #icon>
+          <Icon icon="i-woot-quick-reply" class="size-[15px]" />
+        </template>
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/template-preview/TemplatePreview.story.vue b/app/javascript/dashboard/components-next/template-preview/TemplatePreview.story.vue
new file mode 100644
index 000000000..1c04e163b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/template-preview/TemplatePreview.story.vue
@@ -0,0 +1,105 @@
+<script setup>
+import TemplatePreview from './TemplatePreview.vue';
+import {
+  whatsAppTemplates,
+  getWhatsAppVariables,
+} from './templates/whatsapp-templates.js';
+import { twilioTemplates } from './templates/twilio-templates.js';
+
+const findWhatsApp = name => whatsAppTemplates.find(t => t.name === name);
+const findTwilio = name => twilioTemplates.find(t => t.friendly_name === name);
+
+const greet = findWhatsApp('greet');
+const eventInvitation = findWhatsApp('event_invitation_static');
+const orderConfirmation = findWhatsApp('order_confirmation');
+const discountCoupon = findWhatsApp('discount_coupon');
+const trainingVideo = findWhatsApp('training_video');
+
+const twilioGreet = findTwilio('greet');
+const shoeLaunch = findTwilio('shoe_launch');
+const welcomeMessage = findTwilio('welcome_message_new');
+const courseFeeReminder = findTwilio('course_fee_reminder');
+</script>
+
+<template>
+  <Story
+    title="Components/TemplatePreview"
+    :layout="{ type: 'grid', width: 400 }"
+  >
+    <Variant title="WhatsApp - Simple Text">
+      <TemplatePreview
+        :template="greet"
+        :variables="getWhatsAppVariables(greet)"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WhatsApp - Simple Text (No Variables)">
+      <TemplatePreview :template="greet" :variables="{}" platform="whatsapp" />
+    </Variant>
+
+    <Variant title="WhatsApp - Call to Action Buttons">
+      <TemplatePreview
+        :template="eventInvitation"
+        :variables="getWhatsAppVariables(eventInvitation)"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WhatsApp - Image Media">
+      <TemplatePreview
+        :template="orderConfirmation"
+        :variables="getWhatsAppVariables(orderConfirmation)"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WhatsApp - Video Media">
+      <TemplatePreview
+        :template="trainingVideo"
+        :variables="getWhatsAppVariables(trainingVideo)"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WhatsApp - Copy Code">
+      <TemplatePreview
+        :template="discountCoupon"
+        :variables="getWhatsAppVariables(discountCoupon)"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="Twilio - Text">
+      <TemplatePreview
+        :template="twilioGreet"
+        :variables="twilioGreet.variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio - Media">
+      <TemplatePreview
+        :template="shoeLaunch"
+        :variables="shoeLaunch.variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio - Quick Reply">
+      <TemplatePreview
+        :template="welcomeMessage"
+        :variables="welcomeMessage.variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio - Call to Action">
+      <TemplatePreview
+        :template="courseFeeReminder"
+        :variables="courseFeeReminder.variables"
+        platform="twilio"
+      />
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/template-preview/TemplatePreview.vue b/app/javascript/dashboard/components-next/template-preview/TemplatePreview.vue
new file mode 100644
index 000000000..c639da4d5
--- /dev/null
+++ b/app/javascript/dashboard/components-next/template-preview/TemplatePreview.vue
@@ -0,0 +1,112 @@
+<script setup>
+import { computed } from 'vue';
+import { TemplateNormalizer } from 'dashboard/services/TemplateNormalizer';
+import {
+  PLATFORMS,
+  TEMPLATE_TYPES,
+  WA_HEADER_FORMATS,
+  WA_MEDIA_FORMATS,
+} from 'dashboard/services/TemplateConstants';
+
+import CardTemplate from './CardTemplate.vue';
+import CallToActionTemplate from './CallToActionTemplate.vue';
+import MediaTemplate from './MediaTemplate.vue';
+import WhatsAppTextTemplate from './WhatsAppTextTemplate.vue';
+import QuickReplyTemplate from './QuickReplyTemplate.vue';
+
+const props = defineProps({
+  template: {
+    type: Object,
+    required: true,
+  },
+  variables: {
+    type: Object,
+    default: () => ({}),
+  },
+  platform: {
+    type: String,
+    required: true,
+    validator: value => Object.values(PLATFORMS).includes(value),
+  },
+});
+
+const COMPONENT_MAP = {
+  [TEMPLATE_TYPES.WHATSAPP_TEXT]: WhatsAppTextTemplate,
+  [TEMPLATE_TYPES.WHATSAPP_TEXT_HEADER]: WhatsAppTextTemplate,
+  [TEMPLATE_TYPES.WHATSAPP_MEDIA_IMAGE]: MediaTemplate,
+  [TEMPLATE_TYPES.WHATSAPP_MEDIA_VIDEO]: MediaTemplate,
+  [TEMPLATE_TYPES.WHATSAPP_MEDIA_DOCUMENT]: MediaTemplate,
+  [TEMPLATE_TYPES.WHATSAPP_INTERACTIVE]: CallToActionTemplate,
+  [TEMPLATE_TYPES.WHATSAPP_COPY_CODE]: CallToActionTemplate,
+  [TEMPLATE_TYPES.TWILIO_TEXT]: WhatsAppTextTemplate,
+  [TEMPLATE_TYPES.TWILIO_MEDIA]: MediaTemplate,
+  [TEMPLATE_TYPES.TWILIO_QUICK_REPLY]: QuickReplyTemplate,
+  [TEMPLATE_TYPES.TWILIO_CALL_TO_ACTION]: CallToActionTemplate,
+  [TEMPLATE_TYPES.TWILIO_CARD]: CardTemplate,
+};
+
+const substituteVariables = (text, variables) => {
+  if (!text) return '';
+  return text.replace(/\{\{([^}]+)\}\}/g, (match, variable) => {
+    const value = variables[variable];
+    return value !== undefined && value !== '' ? value : `[${variable}]`;
+  });
+};
+
+const processedTemplate = computed(() => {
+  const normalized = TemplateNormalizer.normalize(
+    props.template,
+    props.platform
+  );
+
+  let content = '';
+  let imageUrl = '';
+  let title = '';
+  let footer = '';
+
+  if (props.platform === PLATFORMS.WHATSAPP) {
+    content = normalized.body?.text || '';
+
+    if (normalized.header) {
+      if (WA_MEDIA_FORMATS.includes(normalized.header.format)) {
+        imageUrl = normalized.header.example?.header_handle?.[0] || '';
+      }
+      if (normalized.header.format === WA_HEADER_FORMATS.TEXT) {
+        title = normalized.header.text || '';
+      }
+    }
+
+    footer = normalized.footer?.text || '';
+  } else {
+    content = normalized.body || '';
+
+    if (normalized.media && normalized.media.length > 0) {
+      imageUrl = normalized.media[0];
+    }
+  }
+
+  const buttons = normalized.buttons?.length
+    ? normalized.buttons
+    : normalized.actions || [];
+
+  return {
+    ...normalized,
+    content: substituteVariables(content, props.variables),
+    title: substituteVariables(title, props.variables),
+    footer: substituteVariables(footer, props.variables),
+    image_url: substituteVariables(imageUrl, props.variables),
+    buttons,
+    actions: normalized.actions || [],
+  };
+});
+
+const previewComponent = computed(
+  () => COMPONENT_MAP[processedTemplate.value.type] || WhatsAppTextTemplate
+);
+</script>
+
+<template>
+  <div class="template-preview">
+    <component :is="previewComponent" :message="processedTemplate" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/template-preview/TemplatePreviewExamples.story.vue b/app/javascript/dashboard/components-next/template-preview/TemplatePreviewExamples.story.vue
new file mode 100644
index 000000000..c90dbb62f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/template-preview/TemplatePreviewExamples.story.vue
@@ -0,0 +1,199 @@
+<script setup>
+import TemplatePreview from './TemplatePreview.vue';
+import {
+  whatsAppTemplates,
+  getWhatsAppVariables,
+} from './templates/whatsapp-templates.js';
+import { twilioTemplates } from './templates/twilio-templates.js';
+</script>
+
+<template>
+  <Story
+    title="Components/TemplatePreviewExamples"
+    :layout="{ type: 'grid', width: 400 }"
+  >
+    <Variant title="WA: Event Invitation (Buttons)">
+      <TemplatePreview
+        :template="whatsAppTemplates[0]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[0])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Purchase Receipt (Document)">
+      <TemplatePreview
+        :template="whatsAppTemplates[1]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[1])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Discount Coupon (Copy Code)">
+      <TemplatePreview
+        :template="whatsAppTemplates[2]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[2])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Support Callback (Phone)">
+      <TemplatePreview
+        :template="whatsAppTemplates[3]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[3])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Training Video (Video)">
+      <TemplatePreview
+        :template="whatsAppTemplates[4]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[4])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Order Confirmation (Image)">
+      <TemplatePreview
+        :template="whatsAppTemplates[5]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[5])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Product Launch (Image + Footer)">
+      <TemplatePreview
+        :template="whatsAppTemplates[6]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[6])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Technician Visit (Header + Buttons)">
+      <TemplatePreview
+        :template="whatsAppTemplates[7]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[7])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Greet (Simple Text)">
+      <TemplatePreview
+        :template="whatsAppTemplates[8]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[8])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Hello World (Header + Footer)">
+      <TemplatePreview
+        :template="whatsAppTemplates[9]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[9])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Feedback Request (Button)">
+      <TemplatePreview
+        :template="whatsAppTemplates[10]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[10])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Address Update (Header)">
+      <TemplatePreview
+        :template="whatsAppTemplates[11]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[11])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Delivery Confirmation">
+      <TemplatePreview
+        :template="whatsAppTemplates[12]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[12])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Shoe Launch (Media)">
+      <TemplatePreview
+        :template="twilioTemplates[0]"
+        :variables="twilioTemplates[0].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Product Launch Custom Price (Media)">
+      <TemplatePreview
+        :template="twilioTemplates[1]"
+        :variables="twilioTemplates[1].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Product Launch (Media)">
+      <TemplatePreview
+        :template="twilioTemplates[2]"
+        :variables="twilioTemplates[2].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Greet (Text)">
+      <TemplatePreview
+        :template="twilioTemplates[3]"
+        :variables="twilioTemplates[3].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Order Status (Text)">
+      <TemplatePreview
+        :template="twilioTemplates[4]"
+        :variables="twilioTemplates[4].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Hello World (Text)">
+      <TemplatePreview
+        :template="twilioTemplates[5]"
+        :variables="twilioTemplates[5].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Welcome Message New (Quick Reply)">
+      <TemplatePreview
+        :template="twilioTemplates[6]"
+        :variables="twilioTemplates[6].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: SaaS WhatsApp Question (Quick Reply)">
+      <TemplatePreview
+        :template="twilioTemplates[7]"
+        :variables="twilioTemplates[7].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Welcome Message (Quick Reply)">
+      <TemplatePreview
+        :template="twilioTemplates[8]"
+        :variables="twilioTemplates[8].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Course Fee Reminder (Call to Action)">
+      <TemplatePreview
+        :template="twilioTemplates[9]"
+        :variables="twilioTemplates[9].variables"
+        platform="twilio"
+      />
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Template/Text.vue b/app/javascript/dashboard/components-next/template-preview/TextTemplate.vue
similarity index 76%
rename from app/javascript/dashboard/components-next/message/bubbles/Template/Text.vue
rename to app/javascript/dashboard/components-next/template-preview/TextTemplate.vue
index accefcd9e..68949c3bb 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Template/Text.vue
+++ b/app/javascript/dashboard/components-next/template-preview/TextTemplate.vue
@@ -8,7 +8,7 @@ defineProps({
 </script>
 
 <template>
-  <div class="bg-n-alpha-2 text-n-slate-12 rounded-xl p-3 max-w-80">
+  <div class="p-3 rounded-xl bg-n-alpha-2 text-n-slate-12 max-w-80">
     <span v-dompurify-html="message.content" class="prose prose-bubble" />
   </div>
 </template>
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..5e1d6f2de
--- /dev/null
+++ b/app/javascript/dashboard/components-next/template-preview/WhatsAppTextTemplate.vue
@@ -0,0 +1,26 @@
+<script setup>
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-2 p-3 rounded-xl bg-n-alpha-2 text-n-slate-12 max-w-80"
+  >
+    <div v-if="message.title" class="text-base font-bold">
+      {{ message.title }}
+    </div>
+
+    <div v-if="message.content" class="text-sm font-medium prose prose-bubble">
+      <span v-dompurify-html="message.content" />
+    </div>
+
+    <div v-if="message.footer" class="text-xs opacity-70 text-n-slate-11">
+      {{ message.footer }}
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/template-preview/index.js b/app/javascript/dashboard/components-next/template-preview/index.js
new file mode 100644
index 000000000..b7f1bd6b0
--- /dev/null
+++ b/app/javascript/dashboard/components-next/template-preview/index.js
@@ -0,0 +1,6 @@
+// Main Template Preview Component
+export { default as TemplatePreview } from './TemplatePreview.vue';
+
+// Core Services
+export { TemplateTypeDetector } from 'dashboard/services/TemplateTypeDetector';
+export { TemplateNormalizer } from 'dashboard/services/TemplateNormalizer';
diff --git a/app/javascript/dashboard/components-next/template-preview/templates/twilio-templates.js b/app/javascript/dashboard/components-next/template-preview/templates/twilio-templates.js
new file mode 100644
index 000000000..a7857b27d
--- /dev/null
+++ b/app/javascript/dashboard/components-next/template-preview/templates/twilio-templates.js
@@ -0,0 +1,209 @@
+export const twilioTemplates = [
+  {
+    body: 'Introducing our latest release  the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
+    types: {
+      'twilio/media': {
+        body: 'Introducing our latest release  the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
+        media: ['https://vite-five-phi.vercel.app/jordan-shoes.jpg'],
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {
+      1: 'Jordan',
+      2: '100$',
+    },
+    content_sid: 'HX4b1ff075f097ccdf7f274b6af4d7be02',
+    friendly_name: 'shoe_launch',
+    template_type: 'media',
+  },
+  {
+    body: 'Introducing our latest release  the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
+    types: {
+      'twilio/media': {
+        body: 'Introducing our latest release  the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
+        media: ['https://vite-five-phi.vercel.app/jordan-shoes.jpg'],
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {
+      1: 'Jordan',
+      2: '400$',
+    },
+    content_sid: 'HXd5c1f8f8d68976f841c440d5e4b46c2e',
+    friendly_name: 'product_launch_custom_price',
+    template_type: 'media',
+  },
+  {
+    body: 'Introducing our latest release  the Nike Air Force! Available now for just $129.99',
+    types: {
+      'twilio/media': {
+        body: 'Introducing our latest release  the Nike Air Force! Available now for just $129.99',
+        media: ['https://vite-five-phi.vercel.app/jordan-shoes.jpg'],
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {},
+    content_sid: 'HX25f6e823f2416ca4b34254d98e916fae',
+    friendly_name: 'product_launch',
+    template_type: 'media',
+  },
+  {
+    body: 'Hey {{1}}, how may I help you?',
+    types: {
+      'twilio/text': {
+        body: 'Hey {{1}}, how may I help you?',
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {
+      1: 'John',
+    },
+    content_sid: 'HXee240fd3a8b5045dba057feda5173e55',
+    friendly_name: 'greet',
+    template_type: 'text',
+  },
+  {
+    body: "Hi {{1}} Thanks for placing an order with us. We'll let you know once your order has been processed and delivered. Your order number is {{3}}. Thanks",
+    types: {
+      'twilio/text': {
+        body: "Hi {{1}} Thanks for placing an order with us. We'll let you know once your order has been processed and delivered. Your order number is {{3}}. Thanks",
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {
+      1: 'John',
+      3: '12345',
+    },
+    content_sid: 'HX88291ef8d30d7dcd436cbb9b21c236f4',
+    friendly_name: 'order_status',
+    template_type: 'text',
+  },
+  {
+    body: 'Welcome and congratulations!! This message demonstrates your ability to send a WhatsApp message notification from the Cloud API, hosted by Meta. Thank you for taking the time to test with us.',
+    types: {
+      'twilio/text': {
+        body: 'Welcome and congratulations!! This message demonstrates your ability to send a WhatsApp message notification from the Cloud API, hosted by Meta. Thank you for taking the time to test with us.',
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {},
+    content_sid: 'HXdc6da32d489ee80f67c07d5bb0e7e390',
+    friendly_name: 'hello_world',
+    template_type: 'text',
+  },
+  {
+    body: 'Thanks for reaching out to us. Before we proceed, we would like to get some information from you to assist you better. To whom would you like to connect?',
+    types: {
+      'twilio/quick-reply': {
+        body: 'Thanks for reaching out to us. Before we proceed, we would like to get some information from you to assist you better. To whom would you like to connect?',
+        actions: [
+          {
+            id: 'Sales_payload',
+            title: 'Sales',
+          },
+          {
+            id: 'Support_payload',
+            title: 'Support',
+          },
+        ],
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en_US',
+    variables: {},
+    content_sid: 'HX778677f5867f96175ab4b7efb9a5bee6',
+    friendly_name: 'welcome_message_new',
+    template_type: 'quick_reply',
+  },
+  {
+    body: 'What type of Chatwoot installation are you using? Select "Chatwoot Cloud" if you are using app.chatwoot.com, otherwise select "Self-hosted Chatwoot".',
+    types: {
+      'twilio/quick-reply': {
+        body: 'What type of Chatwoot installation are you using? Select "Chatwoot Cloud" if you are using app.chatwoot.com, otherwise select "Self-hosted Chatwoot".',
+        actions: [
+          {
+            id: 'Chatwoot Cloud_payload',
+            title: 'Chatwoot Cloud',
+          },
+          {
+            id: 'Self-hosted Chatwoot_payload',
+            title: 'Self-hosted Chatwoot',
+          },
+        ],
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en_US',
+    variables: {},
+    content_sid: 'HX3a35e5cd76529fd91d19341deb4ef685',
+    friendly_name: 'saas_whatsapp_question',
+    template_type: 'quick_reply',
+  },
+  {
+    body: 'Thanks for reaching out to us. Happy to help. What are you looking for?',
+    types: {
+      'twilio/quick-reply': {
+        body: 'Thanks for reaching out to us. Happy to help. What are you looking for?',
+        actions: [
+          {
+            id: 'Support_payload',
+            title: 'Support',
+          },
+          {
+            id: 'Sales_payload',
+            title: 'Sales',
+          },
+          {
+            id: 'Demo_payload',
+            title: 'Demo',
+          },
+        ],
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en_US',
+    variables: {},
+    content_sid: 'HX5d8e09f96cee2f7fb7bab223c03cb0a1',
+    friendly_name: 'welcome_message',
+    template_type: 'quick_reply',
+  },
+  {
+    types: {
+      'twilio/call-to-action': {
+        actions: [
+          {
+            id: null,
+            title: 'Pay now',
+            type: 'URL',
+            url: 'https://payments.example.com/pay',
+          },
+        ],
+        body: 'Hello, this is a gentle reminder regarding your course fee.\n\nThe payment is due on {{date}}.\nKindly complete the payment at your convenience',
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {
+      date: '01-Jan-2026',
+    },
+    content_sid: 'HX63e56fc142aad670f320bf400d5bfeb7',
+    friendly_name: 'course_fee_reminder',
+    template_type: 'call_to_action',
+  },
+];
diff --git a/app/javascript/dashboard/components-next/template-preview/templates/whatsapp-templates.js b/app/javascript/dashboard/components-next/template-preview/templates/whatsapp-templates.js
new file mode 100644
index 000000000..fc70e3230
--- /dev/null
+++ b/app/javascript/dashboard/components-next/template-preview/templates/whatsapp-templates.js
@@ -0,0 +1,408 @@
+export const whatsAppTemplates = [
+  {
+    id: '1381151706284063',
+    name: 'event_invitation_static',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        text: "You're invited to {{event_name}} at {{location}}, Join us for an amazing experience!",
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: 'F1',
+              param_name: 'event_name',
+            },
+            {
+              example: 'Dubai',
+              param_name: 'location',
+            },
+          ],
+        },
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            url: 'https://events.example.com/register',
+            text: 'Visit website',
+            type: 'URL',
+          },
+          {
+            url: 'https://maps.app.goo.gl/YoWAzRj1GDuxs6qz8',
+            text: 'Get Directions',
+            type: 'URL',
+          },
+        ],
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+  {
+    id: '767076159336759',
+    name: 'purchase_receipt',
+    status: 'APPROVED',
+    category: 'UTILITY',
+    language: 'en_US',
+    components: [
+      {
+        type: 'HEADER',
+        format: 'DOCUMENT',
+        example: {
+          header_handle: [
+            'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+          ],
+        },
+      },
+      {
+        text: 'Thank you for using your {{1}} card at {{2}}. Your {{3}} is attached as a PDF.',
+        type: 'BODY',
+        example: {
+          body_text: [['credit', 'CS Mutual', 'receipt']],
+        },
+      },
+    ],
+    parameter_format: 'POSITIONAL',
+  },
+  {
+    id: '1469258364071127',
+    name: 'discount_coupon',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        text: 'Special offer for you! Get {{discount_percentage}}% off your next purchase. Use the code below at checkout',
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: '30',
+              param_name: 'discount_percentage',
+            },
+          ],
+        },
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            text: 'Copy offer code',
+            type: 'COPY_CODE',
+            example: ['SAVE1OFF'],
+          },
+        ],
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+  {
+    id: '1075221534579807',
+    name: 'support_callback',
+    status: 'APPROVED',
+    category: 'UTILITY',
+    language: 'en',
+    components: [
+      {
+        text: 'Hello {{name}},  our support team will call you regarding ticket # {{ticket_id}}.',
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: 'muhsin',
+              param_name: 'name',
+            },
+            {
+              example: '232323',
+              param_name: 'ticket_id',
+            },
+          ],
+        },
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            text: 'Call Support',
+            type: 'PHONE_NUMBER',
+            phone_number: '+2112121212',
+          },
+        ],
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+  {
+    id: '1023596726651144',
+    name: 'training_video',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        type: 'HEADER',
+        format: 'VIDEO',
+        example: {
+          header_handle: [
+            'https://scontent.whatsapp.net/v/t61.29466-34/521582686_1023596729984477_1872358575355618432_n.mp4',
+          ],
+        },
+      },
+      {
+        text: "Hi {{name}}, here's your training video. Please watch by{{date}}.",
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: 'john',
+              param_name: 'name',
+            },
+            {
+              example: 'July 31',
+              param_name: 'date',
+            },
+          ],
+        },
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+  {
+    id: '1106685194739985',
+    name: 'order_confirmation',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        type: 'HEADER',
+        format: 'IMAGE',
+        example: {
+          header_handle: ['https://vite-five-phi.vercel.app/vaporfly.png'],
+        },
+      },
+      {
+        text: 'Hi your order {{1}} is confirmed. Please wait for further updates',
+        type: 'BODY',
+        example: {
+          body_text: [['blue canvas shoes']],
+        },
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'POSITIONAL',
+  },
+  {
+    id: '1242180011253003',
+    name: 'product_launch',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        type: 'HEADER',
+        format: 'IMAGE',
+        example: {
+          header_handle: ['https://vite-five-phi.vercel.app/coat.png'],
+        },
+      },
+      {
+        text: 'New arrival! Our stunning coat now available in {{color}} color.',
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: 'blue',
+              param_name: 'color',
+            },
+          ],
+        },
+      },
+      {
+        text: 'Free shipping on orders over $100. Limited time offer.',
+        type: 'FOOTER',
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+  {
+    id: '1449876326175680',
+    name: 'technician_visit',
+    status: 'APPROVED',
+    category: 'UTILITY',
+    language: 'en_US',
+    components: [
+      {
+        text: 'Technician visit',
+        type: 'HEADER',
+        format: 'TEXT',
+      },
+      {
+        text: "Hi {{1}}, we're scheduling a technician visit to {{2}} on {{3}} between {{4}} and {{5}}. Please confirm if this time slot works for you.",
+        type: 'BODY',
+        example: {
+          body_text: [
+            ['John', '123 Maple St', '2025-12-31', '10:00 AM', '2:00 PM'],
+          ],
+        },
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            text: 'Confirm',
+            type: 'QUICK_REPLY',
+          },
+          {
+            text: 'Reschedule',
+            type: 'QUICK_REPLY',
+          },
+        ],
+      },
+    ],
+    parameter_format: 'POSITIONAL',
+  },
+  {
+    id: '997298832221901',
+    name: 'greet',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        text: 'Hey {{customer_name}} how may I help you?',
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: 'John',
+              param_name: 'customer_name',
+            },
+          ],
+        },
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+  {
+    id: '632315222954611',
+    name: 'hello_world',
+    status: 'APPROVED',
+    category: 'UTILITY',
+    language: 'en_US',
+    components: [
+      {
+        text: 'Hello World',
+        type: 'HEADER',
+        format: 'TEXT',
+      },
+      {
+        text: 'Welcome and congratulations!! This message demonstrates your ability to send a WhatsApp message notification from the Cloud API, hosted by Meta. Thank you for taking the time to test with us.',
+        type: 'BODY',
+      },
+      {
+        text: 'WhatsApp Business Platform sample message',
+        type: 'FOOTER',
+      },
+    ],
+    parameter_format: 'POSITIONAL',
+  },
+  {
+    id: '787864066907971',
+    name: 'feedback_request',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        text: "Hey {{name}}, how was your experience with Puma? We'd love your feedback!",
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: 'muhsin',
+              param_name: 'name',
+            },
+          ],
+        },
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            url: 'https://feedback.example.com/survey',
+            text: 'Leave Feedback',
+            type: 'URL',
+          },
+        ],
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+  {
+    id: '1938057163677205',
+    name: 'address_update',
+    status: 'APPROVED',
+    category: 'UTILITY',
+    language: 'en_US',
+    components: [
+      {
+        text: 'Address update',
+        type: 'HEADER',
+        format: 'TEXT',
+      },
+      {
+        text: 'Hi {{1}}, your delivery address has been successfully updated to {{2}}. Contact {{3}} for any inquiries.',
+        type: 'BODY',
+        example: {
+          body_text: [['John', '123 Main St', 'support@telco.com']],
+        },
+      },
+    ],
+    parameter_format: 'POSITIONAL',
+  },
+  {
+    id: '1644094842949394',
+    name: 'delivery_confirmation',
+    status: 'APPROVED',
+    category: 'UTILITY',
+    language: 'en_US',
+    components: [
+      {
+        text: '{{1}}, your order was successfully delivered on {{2}}.\\n\\nThank you for your purchase.\\n',
+        type: 'BODY',
+        example: {
+          body_text: [['John', 'Jan 1, 2024']],
+        },
+      },
+    ],
+    parameter_format: 'POSITIONAL',
+  },
+];
+
+// Helper function to get variable values from examples
+export const getWhatsAppVariables = template => {
+  const variables = {};
+  template.components?.forEach(component => {
+    if (component.example?.body_text_named_params) {
+      component.example.body_text_named_params.forEach(param => {
+        variables[param.param_name] = param.example;
+      });
+    }
+    if (component.example?.body_text) {
+      component.example.body_text[0]?.forEach((value, index) => {
+        variables[(index + 1).toString()] = value;
+      });
+    }
+  });
+  return variables;
+};
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CustomerSatisfactionPage.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CustomerSatisfactionPage.vue
index dc247da6f..d955883eb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CustomerSatisfactionPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CustomerSatisfactionPage.vue
@@ -11,7 +11,7 @@ import Icon from 'dashboard/components-next/icon/Icon.vue';
 import WithLabel from 'v3/components/Form/WithLabel.vue';
 import SettingsToggleSection from 'dashboard/components-next/Settings/SettingsToggleSection.vue';
 import CSATDisplayTypeSelector from './components/CSATDisplayTypeSelector.vue';
-import CSATTemplate from 'dashboard/components-next/message/bubbles/Template/CSAT.vue';
+import CSATTemplate from 'dashboard/components-next/template-preview/CSATTemplate.vue';
 import Editor from 'dashboard/components-next/Editor/Editor.vue';
 import FilterSelect from 'dashboard/components-next/filter/inputs/FilterSelect.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
diff --git a/app/javascript/dashboard/services/TemplateConstants.js b/app/javascript/dashboard/services/TemplateConstants.js
new file mode 100644
index 000000000..6474372c4
--- /dev/null
+++ b/app/javascript/dashboard/services/TemplateConstants.js
@@ -0,0 +1,58 @@
+export const PLATFORMS = {
+  WHATSAPP: 'whatsapp',
+  TWILIO: 'twilio',
+};
+
+export const WA_COMPONENT_TYPES = {
+  HEADER: 'HEADER',
+  BODY: 'BODY',
+  FOOTER: 'FOOTER',
+  BUTTONS: 'BUTTONS',
+};
+
+export const WA_HEADER_FORMATS = {
+  TEXT: 'TEXT',
+  IMAGE: 'IMAGE',
+  VIDEO: 'VIDEO',
+  DOCUMENT: 'DOCUMENT',
+};
+
+export const WA_MEDIA_FORMATS = [
+  WA_HEADER_FORMATS.IMAGE,
+  WA_HEADER_FORMATS.VIDEO,
+  WA_HEADER_FORMATS.DOCUMENT,
+];
+
+export const WA_BUTTON_TYPES = {
+  COPY_CODE: 'COPY_CODE',
+};
+
+export const WA_PARAM_FORMATS = {
+  POSITIONAL: 'POSITIONAL',
+  NAMED: 'NAMED',
+};
+
+export const TWILIO_TYPE_PREFIX = 'twilio/';
+
+export const TWILIO_TYPES = {
+  TEXT: 'text',
+  MEDIA: 'media',
+  QUICK_REPLY: 'quick_reply',
+  CALL_TO_ACTION: 'call_to_action',
+  CATALOG: 'catalog',
+};
+
+export const TEMPLATE_TYPES = {
+  WHATSAPP_TEXT: 'whatsapp-text',
+  WHATSAPP_TEXT_HEADER: 'whatsapp-text-header',
+  WHATSAPP_MEDIA_IMAGE: 'whatsapp-media-image',
+  WHATSAPP_MEDIA_VIDEO: 'whatsapp-media-video',
+  WHATSAPP_MEDIA_DOCUMENT: 'whatsapp-media-document',
+  WHATSAPP_INTERACTIVE: 'whatsapp-interactive',
+  WHATSAPP_COPY_CODE: 'whatsapp-copy-code',
+  TWILIO_TEXT: 'twilio-text',
+  TWILIO_MEDIA: 'twilio-media',
+  TWILIO_QUICK_REPLY: 'twilio-quick-reply',
+  TWILIO_CALL_TO_ACTION: 'twilio-call-to-action',
+  TWILIO_CARD: 'twilio-card',
+};
diff --git a/app/javascript/dashboard/services/TemplateNormalizer.js b/app/javascript/dashboard/services/TemplateNormalizer.js
new file mode 100644
index 000000000..588415815
--- /dev/null
+++ b/app/javascript/dashboard/services/TemplateNormalizer.js
@@ -0,0 +1,114 @@
+import { TemplateTypeDetector } from './TemplateTypeDetector';
+import {
+  PLATFORMS,
+  TWILIO_TYPE_PREFIX,
+  WA_COMPONENT_TYPES,
+  WA_PARAM_FORMATS,
+} from './TemplateConstants';
+
+/**
+ * TemplateNormalizer - Convert platform-specific formats to unified structure
+ */
+export class TemplateNormalizer {
+  static normalizeWhatsApp(template) {
+    const components = template.components || [];
+
+    return {
+      id: template.id,
+      name: template.name,
+      platform: PLATFORMS.WHATSAPP,
+      type: TemplateTypeDetector.detectWhatsAppType(template),
+      parameterFormat: template.parameter_format || WA_PARAM_FORMATS.POSITIONAL,
+      header: components.find(c => c.type === WA_COMPONENT_TYPES.HEADER),
+      body: components.find(c => c.type === WA_COMPONENT_TYPES.BODY),
+      footer: components.find(c => c.type === WA_COMPONENT_TYPES.FOOTER),
+      buttons:
+        components.find(c => c.type === WA_COMPONENT_TYPES.BUTTONS)?.buttons ||
+        [],
+      variables: this.extractWhatsAppVariables(template),
+      category: template.category,
+      language: template.language,
+      originalTemplate: template,
+    };
+  }
+
+  static normalizeTwilio(template) {
+    const typeKey =
+      template.template_type?.replace(TWILIO_TYPE_PREFIX, '') ||
+      Object.keys(template.types || {})
+        .map(key => key.replace(TWILIO_TYPE_PREFIX, ''))
+        .find(key => key);
+
+    const hyphenatedKey = `${TWILIO_TYPE_PREFIX}${(typeKey || '').replace(/_/g, '-')}`;
+    const underscoreKey = `${TWILIO_TYPE_PREFIX}${(typeKey || '').replace(/-/g, '_')}`;
+    const typeData =
+      template.types?.[hyphenatedKey] || template.types?.[underscoreKey] || {};
+
+    return {
+      contentSid: template.content_sid,
+      name: template.friendly_name,
+      platform: PLATFORMS.TWILIO,
+      type: TemplateTypeDetector.detectTwilioType(template),
+      body: template.body || typeData.body,
+      media: typeData.media || [],
+      mediaType: template.media_type || null,
+      actions: typeData.actions || [],
+      variables: template.variables || {},
+      category: template.category || 'utility',
+      language: template.language || 'en',
+      originalTemplate: template,
+    };
+  }
+
+  static extractWhatsAppVariables(template) {
+    const variables = {};
+    const components = template.components || [];
+
+    components.forEach(component => {
+      if (component.text) {
+        const matches = component.text.match(/\{\{([^}]+)\}\}/g) || [];
+        matches.forEach(match => {
+          const variable = match.replace(/[{}]/g, '');
+
+          if (template.parameter_format === WA_PARAM_FORMATS.NAMED) {
+            const example =
+              component.example?.body_text_named_params?.find(
+                p => p.param_name === variable
+              )?.example || '';
+            variables[variable] = example;
+          } else {
+            const position = parseInt(variable, 10) - 1;
+            const example = component.example?.body_text?.[0]?.[position] || '';
+            variables[variable] = example;
+          }
+        });
+      }
+
+      if (component.buttons) {
+        component.buttons.forEach(button => {
+          if (button.url) {
+            const matches = button.url.match(/\{\{([^}]+)\}\}/g) || [];
+            matches.forEach(match => {
+              const variable = match.replace(/[{}]/g, '');
+              const example = button.example?.[0] || '';
+              variables[variable] = example;
+            });
+          }
+        });
+      }
+    });
+
+    return variables;
+  }
+
+  static normalize(template, platform) {
+    switch (platform) {
+      case PLATFORMS.WHATSAPP:
+        return this.normalizeWhatsApp(template);
+      case PLATFORMS.TWILIO:
+        return this.normalizeTwilio(template);
+      default:
+        throw new Error(`Unsupported platform: ${platform}`);
+    }
+  }
+}
diff --git a/app/javascript/dashboard/services/TemplateNormalizer.spec.js b/app/javascript/dashboard/services/TemplateNormalizer.spec.js
new file mode 100644
index 000000000..4b9e2a9e0
--- /dev/null
+++ b/app/javascript/dashboard/services/TemplateNormalizer.spec.js
@@ -0,0 +1,143 @@
+// @vitest-environment node
+
+import { describe, it, expect } from 'vitest';
+
+import { TemplateNormalizer } from './TemplateNormalizer';
+
+describe('TemplateNormalizer', () => {
+  it('normalizes Twilio call-to-action templates with hyphenated keys', () => {
+    const template = {
+      types: {
+        'twilio/call-to-action': {
+          body: 'CTA body for {{date}}',
+          actions: [
+            {
+              id: null,
+              title: 'Pay now',
+              type: 'URL',
+              url: 'https://payments.example.com/pay',
+            },
+          ],
+        },
+      },
+      variables: {
+        date: '01-Jan-2026',
+      },
+      content_sid: 'HX123',
+      friendly_name: 'cta_example',
+      template_type: 'call-to-action',
+    };
+
+    const normalized = TemplateNormalizer.normalizeTwilio(template);
+
+    expect(normalized.type).toBe('twilio-call-to-action');
+    expect(normalized.body).toBe('CTA body for {{date}}');
+    expect(normalized.actions).toHaveLength(1);
+    expect(normalized.variables).toEqual({ date: '01-Jan-2026' });
+  });
+
+  it('normalizes Twilio quick replies', () => {
+    const template = {
+      template_type: 'quick_reply',
+      types: {
+        'twilio/quick-reply': {
+          body: 'Pick an option',
+          actions: [{ id: 'a', title: 'Option A' }],
+        },
+      },
+      variables: {},
+    };
+
+    const normalized = TemplateNormalizer.normalizeTwilio(template);
+
+    expect(normalized.type).toBe('twilio-quick-reply');
+    expect(normalized.body).toBe('Pick an option');
+    expect(normalized.actions).toEqual([{ id: 'a', title: 'Option A' }]);
+  });
+
+  it('normalizes Twilio media templates', () => {
+    const template = {
+      template_type: 'media',
+      body: 'Media body {{1}}',
+      types: {
+        'twilio/media': {
+          body: 'Media body {{1}}',
+          media: ['https://example.com/image.jpg'],
+        },
+      },
+      variables: { 1: 'value' },
+    };
+
+    const normalized = TemplateNormalizer.normalizeTwilio(template);
+
+    expect(normalized.type).toBe('twilio-media');
+    expect(normalized.media).toEqual(['https://example.com/image.jpg']);
+    expect(normalized.body).toBe('Media body {{1}}');
+  });
+
+  it('extracts WhatsApp named variables', () => {
+    const template = {
+      parameter_format: 'NAMED',
+      components: [
+        {
+          type: 'BODY',
+          text: 'Hi {{name}}',
+          example: {
+            body_text_named_params: [{ param_name: 'name', example: 'John' }],
+          },
+        },
+      ],
+    };
+
+    const variables = TemplateNormalizer.extractWhatsAppVariables(template);
+
+    expect(variables).toMatchObject({
+      name: 'John',
+    });
+  });
+
+  it('extracts WhatsApp positional variables', () => {
+    const template = {
+      parameter_format: 'POSITIONAL',
+      components: [
+        {
+          type: 'BODY',
+          text: 'Hi {{1}}',
+          example: {
+            body_text: [['positional']],
+          },
+        },
+      ],
+    };
+
+    const variables = TemplateNormalizer.extractWhatsAppVariables(template);
+
+    expect(variables).toMatchObject({
+      1: 'positional',
+    });
+  });
+
+  it('normalizes WhatsApp media image templates', () => {
+    const template = {
+      id: '1',
+      name: 'order_confirmation',
+      parameter_format: 'POSITIONAL',
+      components: [
+        {
+          type: 'HEADER',
+          format: 'IMAGE',
+          example: { header_handle: ['https://example.com/image.jpg'] },
+        },
+        { type: 'BODY', text: 'Hi {{1}}', example: { body_text: [['John']] } },
+      ],
+      language: 'en',
+    };
+
+    const normalized = TemplateNormalizer.normalizeWhatsApp(template);
+
+    expect(normalized.type).toBe('whatsapp-media-image');
+    expect(normalized.header.format).toBe('IMAGE');
+    expect(normalized.body.text).toBe('Hi {{1}}');
+    expect(normalized.variables).toMatchObject({ 1: 'John' });
+  });
+});
diff --git a/app/javascript/dashboard/services/TemplateTypeDetector.js b/app/javascript/dashboard/services/TemplateTypeDetector.js
new file mode 100644
index 000000000..c7d1859c7
--- /dev/null
+++ b/app/javascript/dashboard/services/TemplateTypeDetector.js
@@ -0,0 +1,63 @@
+import {
+  TEMPLATE_TYPES,
+  TWILIO_TYPE_PREFIX,
+  TWILIO_TYPES,
+  WA_BUTTON_TYPES,
+  WA_COMPONENT_TYPES,
+  WA_HEADER_FORMATS,
+} from './TemplateConstants';
+
+/**
+ * TemplateTypeDetector - Unified service to identify template types across platforms
+ */
+export class TemplateTypeDetector {
+  static detectWhatsAppType(template) {
+    const components = template.components || [];
+    const header = components.find(c => c.type === WA_COMPONENT_TYPES.HEADER);
+    const buttons = components.find(c => c.type === WA_COMPONENT_TYPES.BUTTONS);
+
+    if (header?.format === WA_HEADER_FORMATS.IMAGE)
+      return TEMPLATE_TYPES.WHATSAPP_MEDIA_IMAGE;
+    if (header?.format === WA_HEADER_FORMATS.VIDEO)
+      return TEMPLATE_TYPES.WHATSAPP_MEDIA_VIDEO;
+    if (header?.format === WA_HEADER_FORMATS.DOCUMENT)
+      return TEMPLATE_TYPES.WHATSAPP_MEDIA_DOCUMENT;
+
+    if (buttons) {
+      const hasCopyCode = buttons.buttons?.some(
+        b => b.type === WA_BUTTON_TYPES.COPY_CODE
+      );
+      if (hasCopyCode) return TEMPLATE_TYPES.WHATSAPP_COPY_CODE;
+      return TEMPLATE_TYPES.WHATSAPP_INTERACTIVE;
+    }
+
+    if (header?.format === WA_HEADER_FORMATS.TEXT)
+      return TEMPLATE_TYPES.WHATSAPP_TEXT_HEADER;
+    return TEMPLATE_TYPES.WHATSAPP_TEXT;
+  }
+
+  static detectTwilioType(template) {
+    const typeFromTemplate =
+      template.template_type?.replace(TWILIO_TYPE_PREFIX, '') ||
+      Object.keys(template.types || {})
+        .map(key => key.replace(TWILIO_TYPE_PREFIX, ''))
+        .find(typeKey => typeKey);
+
+    const templateType = (typeFromTemplate || '')
+      .replace(/-/g, '_')
+      .replace(/__/g, '_');
+
+    switch (templateType) {
+      case TWILIO_TYPES.MEDIA:
+        return TEMPLATE_TYPES.TWILIO_MEDIA;
+      case TWILIO_TYPES.QUICK_REPLY:
+        return TEMPLATE_TYPES.TWILIO_QUICK_REPLY;
+      case TWILIO_TYPES.CALL_TO_ACTION:
+        return TEMPLATE_TYPES.TWILIO_CALL_TO_ACTION;
+      case TWILIO_TYPES.CATALOG:
+        return TEMPLATE_TYPES.TWILIO_CARD;
+      default:
+        return TEMPLATE_TYPES.TWILIO_TEXT;
+    }
+  }
+}
diff --git a/app/javascript/dashboard/services/TemplateTypeDetector.spec.js b/app/javascript/dashboard/services/TemplateTypeDetector.spec.js
new file mode 100644
index 000000000..ddf1a7593
--- /dev/null
+++ b/app/javascript/dashboard/services/TemplateTypeDetector.spec.js
@@ -0,0 +1,106 @@
+// @vitest-environment node
+
+import { describe, it, expect } from 'vitest';
+
+import { TemplateTypeDetector } from './TemplateTypeDetector';
+
+describe('TemplateTypeDetector', () => {
+  it('detects Twilio call-to-action from hyphenated template_type', () => {
+    const template = {
+      template_type: 'call-to-action',
+      types: {
+        'twilio/call-to-action': {},
+      },
+    };
+
+    expect(TemplateTypeDetector.detectTwilioType(template)).toBe(
+      'twilio-call-to-action'
+    );
+  });
+
+  it('detects Twilio call-to-action when only types key is present', () => {
+    const template = {
+      types: {
+        'twilio/call_to_action': {},
+      },
+    };
+
+    expect(TemplateTypeDetector.detectTwilioType(template)).toBe(
+      'twilio-call-to-action'
+    );
+  });
+
+  it('detects Twilio quick reply', () => {
+    const template = {
+      template_type: 'quick_reply',
+      types: {
+        'twilio/quick-reply': {},
+      },
+    };
+
+    expect(TemplateTypeDetector.detectTwilioType(template)).toBe(
+      'twilio-quick-reply'
+    );
+  });
+
+  it('detects WhatsApp text-with-header and media', () => {
+    const base = {
+      components: [
+        { type: 'HEADER', format: 'TEXT', text: 'Header' },
+        { type: 'BODY', text: 'Body' },
+      ],
+    };
+
+    expect(TemplateTypeDetector.detectWhatsAppType(base)).toBe(
+      'whatsapp-text-header'
+    );
+
+    const withImage = {
+      ...base,
+      components: [{ type: 'HEADER', format: 'IMAGE' }, base.components[1]],
+    };
+    expect(TemplateTypeDetector.detectWhatsAppType(withImage)).toBe(
+      'whatsapp-media-image'
+    );
+  });
+
+  it('detects WhatsApp copy code vs call-to-action buttons', () => {
+    const copyCode = {
+      components: [
+        { type: 'BODY', text: 'Hi' },
+        {
+          type: 'BUTTONS',
+          buttons: [{ type: 'COPY_CODE', text: 'Copy offer code' }],
+        },
+      ],
+    };
+
+    const callToAction = {
+      components: [
+        { type: 'BODY', text: 'Hi' },
+        {
+          type: 'BUTTONS',
+          buttons: [{ type: 'URL', text: 'Visit website' }],
+        },
+      ],
+    };
+
+    expect(TemplateTypeDetector.detectWhatsAppType(copyCode)).toBe(
+      'whatsapp-copy-code'
+    );
+    expect(TemplateTypeDetector.detectWhatsAppType(callToAction)).toBe(
+      'whatsapp-interactive'
+    );
+  });
+
+  it('detects Twilio media', () => {
+    const template = {
+      template_type: 'media',
+      types: { 'twilio/media': {} },
+    };
+
+    expect(TemplateTypeDetector.detectTwilioType(template)).toBe(
+      'twilio-media'
+    );
+  });
+});
diff --git a/app/javascript/dashboard/store/modules/specs/inboxes/templateFixtures.js b/app/javascript/dashboard/store/modules/specs/inboxes/templateFixtures.js
index c4c6a0b40..093e9ddf5 100644
--- a/app/javascript/dashboard/store/modules/specs/inboxes/templateFixtures.js
+++ b/app/javascript/dashboard/store/modules/specs/inboxes/templateFixtures.js
@@ -368,7 +368,7 @@ export const templates = [
     namespace: 'ed41a221_133a_4558_a1d6_192960e3aee9',
     components: [
       {
-        text: '🎉 Special offer for you! Get {{discount_percentage}}% off your next purchase. Use the code below at checkout',
+        text: 'Special offer for you! Get {{discount_percentage}}% off your next purchase. Use the code below at checkout',
         type: 'BODY',
       },
       {
@@ -400,7 +400,7 @@ export const templates = [
           {
             text: 'Call Support',
             type: 'PHONE_NUMBER',
-            phone_number: '+16506677566',
+            phone_number: '+23232323',
           },
         ],
       },
diff --git a/theme/icons.js b/theme/icons.js
index 8a29e2bda..266c7ddfa 100644
--- a/theme/icons.js
+++ b/theme/icons.js
@@ -423,5 +423,10 @@ export const icons = {
     width: 16,
     height: 16,
   },
+  'quick-reply': {
+    body: `<path d="M.667 6.654 5.315.667v3.326c7.968 0 8.878 6.46 8.656 10.007l-.005-.027c-.334-1.79-.474-4.658-8.65-4.658v3.327z" fill="none" stroke="currentColor" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"/>`,
+    width: 15,
+    height: 15,
+  },
   /** Ends */
 };