From 11fb464501c888fdb6c48a000008b16e27d8591c Mon Sep 17 00:00:00 2001
From: Muhsin <muhsinkeramam@gmail.com>
Date: Wed, 29 Oct 2025 23:43:05 +0530
Subject: [PATCH] chore: add dynamic templates

---
 .../DynamicQuickReplyTemplate.vue             | 52 +++++++++++++++++++
 .../template-preview/TemplatePreview.vue      |  5 +-
 .../TemplatePreviewExamples.story.vue         |  5 +-
 .../dashboard/services/TemplateNormalizer.js  |  5 +-
 4 files changed, 60 insertions(+), 7 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/template-preview/DynamicQuickReplyTemplate.vue

diff --git a/app/javascript/dashboard/components-next/template-preview/DynamicQuickReplyTemplate.vue b/app/javascript/dashboard/components-next/template-preview/DynamicQuickReplyTemplate.vue
new file mode 100644
index 000000000..acb22c626
--- /dev/null
+++ b/app/javascript/dashboard/components-next/template-preview/DynamicQuickReplyTemplate.vue
@@ -0,0 +1,52 @@
+<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
+      v-for="(action, index) in message.actions"
+      :key="index"
+      class="p-3 flex items-center justify-center"
+    >
+      <Button
+        :label="action.title || action.text || 'Button'"
+        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/template-preview/TemplatePreview.vue b/app/javascript/dashboard/components-next/template-preview/TemplatePreview.vue
index efe920829..4a7296a9a 100644
--- a/app/javascript/dashboard/components-next/template-preview/TemplatePreview.vue
+++ b/app/javascript/dashboard/components-next/template-preview/TemplatePreview.vue
@@ -3,11 +3,11 @@ import { computed } from 'vue';
 import { TemplateNormalizer } from 'dashboard/services/TemplateNormalizer';
 
 import TextTemplate from 'dashboard/components-next/message/bubbles/Template/Text.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';
 import DynamicMediaTemplate from './DynamicMediaTemplate.vue';
 import WhatsAppTextTemplate from './WhatsAppTextTemplate.vue';
+import DynamicQuickReplyTemplate from './DynamicQuickReplyTemplate.vue';
 
 const props = defineProps({
   template: {
@@ -84,6 +84,7 @@ const processedTemplate = computed(() => {
     footer: processText(footer),
     image_url: imageUrl,
     buttons: normalized.buttons || [],
+    actions: normalized.actions || [],
   };
 });
 
@@ -104,7 +105,7 @@ const previewComponent = computed(() => {
     // Twilio components
     'twilio-text': TextTemplate,
     'twilio-media': DynamicMediaTemplate,
-    'twilio-quick-reply': QuickReplyTemplate,
+    'twilio-quick-reply': DynamicQuickReplyTemplate,
     'twilio-card': CardTemplate,
   };
 
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 b399fbb83..19ab84012 100644
--- a/app/javascript/dashboard/components-next/template-preview/TemplatePreviewExamples.story.vue
+++ b/app/javascript/dashboard/components-next/template-preview/TemplatePreviewExamples.story.vue
@@ -428,7 +428,6 @@ const twilioTemplates = [
     variables: {
       1: 'Jordan',
       2: '400$',
-      3: 'jordan-shoes.jpg',
     },
     content_sid: 'HXd5c1f8f8d68976f841c440d5e4b46c2e',
     friendly_name: 'product_launch_custom_price',
@@ -445,9 +444,7 @@ const twilioTemplates = [
     status: 'approved',
     category: 'utility',
     language: 'en',
-    variables: {
-      3: 'jordan-shoes.jpg',
-    },
+    variables: {},
     content_sid: 'HX25f6e823f2416ca4b34254d98e916fae',
     friendly_name: 'product_launch',
     template_type: 'media',
diff --git a/app/javascript/dashboard/services/TemplateNormalizer.js b/app/javascript/dashboard/services/TemplateNormalizer.js
index 7ff69a44e..65e8abe5a 100644
--- a/app/javascript/dashboard/services/TemplateNormalizer.js
+++ b/app/javascript/dashboard/services/TemplateNormalizer.js
@@ -35,7 +35,10 @@ export class TemplateNormalizer {
    * @returns {Object} - Normalized template
    */
   static normalizeTwilio(template) {
-    const typeData = template.types?.[`twilio/${template.template_type}`] || {};
+    // Convert template_type to match the keys used in the types object
+    const normalizedType = template.template_type.replace('_', '-');
+    const lookupKey = `twilio/${normalizedType}`;
+    const typeData = template.types?.[lookupKey] || {};
 
     return {
       contentSid: template.content_sid,