@dev.smartpricing/message-composer-layer 4.0.2 → 4.0.4

package/app/api/compilation.ts

@@ -2,6 +2,7 @@ import type {
   TestEmailRequest,
   CompileAndSendResponse,
   GetMessageParametersResponse,
+  GetResolvedParametersResponse,
   CompileMessageRequest,
   CompileEmailResponse,
   PreviewMessageRequest,
@@ -20,6 +21,11 @@ export const compilationApi = {
       `/message-groups/${messageGroupId}/parameters?language=${language}`,
     ),
 
+  getResolvedParameters: (messageGroupId: string, language: string) =>
+    apiClient<GetResolvedParametersResponse>(
+      `/message-groups/${messageGroupId}/parameters/resolved?language=${language}`,
+    ),
+
   compileEmail: (messageGroupId: string, data: CompileMessageRequest) =>
     apiClient<CompileEmailResponse>(`/message-groups/${messageGroupId}/compile`, {
       method: 'POST',

package/app/api/messageGroups.ts

@@ -6,6 +6,7 @@ import type {
   PostEntity,
   MessageGroup,
   RenderType,
+  DuplicateMessageGroupBody,
 } from '@dev.smartpricing/message-composer-utils/types'
 import { apiClient } from './client'
 
@@ -46,4 +47,10 @@ export const messageGroupsApi = {
 
   validate: (id: string) =>
     apiClient<MessageGroupValidationResponse>(`/message-groups/${id}/validate`),
+
+  duplicate: (id: string, data?: DuplicateMessageGroupBody) =>
+    apiClient<MessageGroupFromDb & { tags: string[] }>(`/message-groups/${id}/duplicate`, {
+      method: 'POST',
+      body: data,
+    }),
 }

package/app/components/Common/MessagePreviewSlideover.vue

@@ -13,12 +13,10 @@ import { useEmailEditorStore } from '~/stores/emailEditor'
 
 interface Props {
   message: PostEntity<Message> | MessageFromDb | null | undefined
-  dynamicData?: Record<string, any>
+  messageGroupId?: string
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  dynamicData: () => ({}),
-})
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
   opened: []
@@ -71,9 +69,9 @@ const isEmail = computed(() => renderType.value === 'email_v1')
     <template #body>
       <!-- WhatsApp Preview -->
       <WhatsappPreview
-        v-if="isWhatsapp"
+        v-if="isWhatsapp && messageGroupId"
         :message="message as WhatsappMessage"
-        :dynamic-data="dynamicData"
+        :message-group-id="messageGroupId"
       />
 
       <!-- Email Inline Preview (client-driven, reflects unsaved changes) -->

package/app/components/Common/PreviewById.vue

@@ -9,7 +9,6 @@ const props = withDefaults(
     id: string
     showSubject?: boolean
     view?: 'desktop' | 'mobile'
-    dynamicData?: Record<string, string>
     brandId?: string
   }>(),
   { showSubject: false, view: 'desktop' },
@@ -46,14 +45,13 @@ const isEmail = computed(() => selectedMessage.value?.render_type === 'email_v1'
       :message-group-id="id"
       :show-subject="showSubject"
       :view="view"
-      :dynamic-data="dynamicData"
       :brand-id="brandId"
     />
 
     <WhatsappPreview
       v-else-if="isWhatsapp && selectedMessage"
       :message="selectedMessage as unknown as WhatsappMessage"
-      :dynamic-data="dynamicData"
+      :message-group-id="id"
     />
   </div>
 </template>

package/app/components/Common/TranslationActionBar.vue

@@ -133,6 +133,7 @@ const handleAutoTranslate = () => {
     <MessagePreviewSlideover
       v-if="messages[currentLanguage]"
       :message="messages[currentLanguage]"
+      :message-group-id="String(messageGroupId ?? '')"
       @opened="emit('preview')"
     />
   </div>

package/app/components/Composer/WhatsappContent.vue

@@ -81,7 +81,10 @@ const testIds = computed(() =>
         />
       </div>
       <div class="col-span-1 overflow-y-auto" v-if="store.currentMessage">
-        <WhatsappPreview :message="store.currentMessage as WhatsappMessage" />
+        <WhatsappPreview
+          :message="store.currentMessage as WhatsappMessage"
+          :message-group-id="store.messageGroupId ?? ''"
+        />
       </div>
     </div>
   </UCard>

package/app/components/Email/Preview.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import type { EmailMessage, PostEntity } from '@dev.smartpricing/message-composer-utils/types'
-import { extractEmailParameters } from '@dev.smartpricing/message-composer-utils/utils'
-import { ref, computed, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { useDebounceFn } from '@vueuse/core'
 import HtmlPreviewIframe from '@/components/Common/HtmlPreviewIframe.vue'
-import { useCompileEmailMutation } from '~/queries/compilation'
+import { useCompileEmailMutation, useResolvedParametersQuery } from '~/queries/compilation'
 
 defineOptions({ name: 'EmailPreview' })
 
@@ -12,7 +11,6 @@ const props = withDefaults(
   defineProps<{
     message: PostEntity<EmailMessage> | EmailMessage
     messageGroupId: string
-    dynamicData?: Record<string, string>
     view?: 'desktop' | 'mobile'
     showSubject?: boolean
     brandId?: string
@@ -24,38 +22,28 @@ const iframeWidth = computed(() => {
   return props.view === 'mobile' ? '400px' : '800px'
 })
 
-// Extract parameters directly from message
-const parameters = computed(() => extractEmailParameters(props.message))
+const { data: resolvedParams } = useResolvedParametersQuery(
+  () => props.messageGroupId,
+  () => props.message.language_id,
+)
 
-// Initialize parameter values
-const parameterValues = ref<Record<string, string>>({})
 const { mutate: compile, data: compiled, isLoading: isCompiling } = useCompileEmailMutation()
 
 const compileEmail = useDebounceFn(() => {
+  if (!resolvedParams.value) return
   compile({
     messageGroupId: props.messageGroupId,
     data: {
       language: props.message.language_id,
-      parameters: parameterValues.value,
+      parameters: resolvedParams.value.parameters,
       brand_id: props.brandId,
     },
   })
 }, 0)
 
 watch(
-  parameters,
-  (params) => {
-    const defaults = props.dynamicData || {}
-    parameterValues.value = params.reduce(
-      (acc, param) => {
-        acc[param] = defaults[param] || `Sample ${param}`
-        return acc
-      },
-      {} as Record<string, string>,
-    )
-
-    compileEmail()
-  },
+  () => resolvedParams.value,
+  () => compileEmail(),
   { immediate: true },
 )
 

package/app/components/Email/PreviewPanel.vue

@@ -10,7 +10,6 @@ defineOptions({ name: 'EmailPreviewPanel' })
 defineProps<{
   message: PostEntity<EmailMessage> | EmailMessage
   messageGroupId: string
-  dynamicData?: Record<string, string>
 }>()
 
 const emit = defineEmits<{
@@ -47,11 +46,6 @@ const currentView = ref<'desktop' | 'mobile'>('desktop')
       </div>
     </div>
 
-    <EmailPreview
-      :message="message"
-      :message-group-id="messageGroupId"
-      :dynamic-data="dynamicData"
-      :view="currentView"
-    />
+    <EmailPreview :message="message" :message-group-id="messageGroupId" :view="currentView" />
   </div>
 </template>

package/app/components/Whatsapp/Preview.vue

@@ -7,6 +7,7 @@ import type {
 import { generateHTML } from '@tiptap/vue-3'
 import { computed } from 'vue'
 import { getTipTapExtensions } from '@dev.smartpricing/message-composer-utils/utils'
+import { useResolvedParametersQuery } from '~/queries/compilation'
 
 defineOptions({
   name: 'WhatsappPreview',
@@ -14,14 +15,20 @@ defineOptions({
 
 const props = defineProps<{
   message: PostEntity<WhatsappMessage>
-  dynamicData?: Record<string, any>
+  messageGroupId: string
 }>()
 
+const { data: resolvedParams } = useResolvedParametersQuery(
+  () => props.messageGroupId,
+  () => props.message.language_id,
+)
+
 function replaceMentionsWithValues(html: string): string {
-  if (!props.dynamicData) return html
+  const dynamicData = resolvedParams.value?.parameters
+  if (!dynamicData) return html
 
   let replacedHtml = html
-  for (const [key, value] of Object.entries(props.dynamicData)) {
+  for (const [key, value] of Object.entries(dynamicData)) {
     const mentionRegex = new RegExp(`{{${key}}}`, 'g')
     replacedHtml = replacedHtml.replace(mentionRegex, value || `{{${key}}}`)
   }

package/app/components/Whatsapp/PreviewPanel.vue

@@ -8,7 +8,7 @@ defineOptions({
 
 defineProps<{
   message: PostEntity<WhatsappMessage>
-  dynamicData?: Record<string, any>
+  messageGroupId: string
 }>()
 </script>
 
@@ -19,6 +19,6 @@ defineProps<{
       <h3 class="label-lg">{{ $t('common.preview') }}</h3>
     </div>
 
-    <WhatsappPreview :message="message" :dynamic-data="dynamicData" />
+    <WhatsappPreview :message="message" :message-group-id="messageGroupId" />
   </div>
 </template>

package/app/composables/useTemplateOperations.ts

@@ -4,10 +4,9 @@ import {
   useUpdateMessageGroupMutation,
   useCreateMessageMutation,
   useUpdateMessageMutation,
+  useDuplicateMessageGroupMutation,
 } from '~/queries'
-import { messageGroupsApi } from '~/api'
 import type {
-  MessageFromDb,
   MessageGroupCategory,
   Message,
   PostEntity,
@@ -25,24 +24,7 @@ interface UseTemplateOperationsOptions {
   onError?: (error: Error) => void
 }
 
-function transformMessagesForCreation(
-  messages: MessageFromDb[],
-): Record<string, PostEntity<Message>> {
-  return messages.reduce(
-    (acc, message) => {
-      // Remove DB-specific fields, keep message group content
-
-      const { id, message_group_id, created_at, updated_at, ...messageGroupMessage } = message
-      acc[message.language_id] = { ...messageGroupMessage, message_group_id: '', metadata: {} }
-
-      return acc
-    },
-    {} as Record<string, PostEntity<Message>>,
-  )
-}
-
 export function useTemplateOperations(options: UseTemplateOperationsOptions = {}) {
-  const { t } = useI18n()
   const saving = ref(false)
   const saved = ref(false)
 
@@ -51,6 +33,7 @@ export function useTemplateOperations(options: UseTemplateOperationsOptions = {}
   const { mutateAsync: createMessage } = useCreateMessageMutation()
   const { mutateAsync: updateMessageGroup } = useUpdateMessageGroupMutation()
   const { mutateAsync: updateMessage } = useUpdateMessageMutation()
+  const { mutateAsync: duplicateMessageGroup } = useDuplicateMessageGroupMutation()
 
   // Create new message group(used by Create + Duplicate)
   async function createTemplate(data: TemplateData, status: MessageStatus = 'draft') {
@@ -117,26 +100,19 @@ export function useTemplateOperations(options: UseTemplateOperationsOptions = {}
   async function duplicateTemplate(sourceId: string, newName?: string) {
     saving.value = true
     try {
-      const sourceTemplate = await messageGroupsApi.getById(sourceId)
-
-      if (!sourceTemplate) {
-        throw new Error('Source message group not found')
-      }
+      const result = await duplicateMessageGroup({
+        id: sourceId,
+        data: newName ? { name: newName } : undefined,
+      })
 
-      const templateData: TemplateData = {
-        messageGroup: {
-          name: newName || t('common.copy_of', { name: sourceTemplate.name }),
-          category: sourceTemplate.category,
-          brand_id: sourceTemplate.brand_id,
-        },
-        messages: transformMessagesForCreation(sourceTemplate.messages),
-      }
-
-      const result = await createTemplate(templateData, 'draft')
+      saved.value = true
+      options.onSuccess?.()
       return result
     } catch (error) {
       options.onError?.(error as Error)
       throw error
+    } finally {
+      saving.value = false
     }
   }
 

package/app/pages/preview/[id].vue

@@ -39,7 +39,11 @@ const isEmail = computed(() => selectedMessage.value?.render_type === 'email_v1'
 
 <template>
   <div :data-testid="previewPageTestIds.page" class="w-full overflow-y-auto">
-    <WhatsappPreview v-if="isWhatsapp && selectedMessage" :message="selectedMessage as any" />
+    <WhatsappPreview
+      v-if="isWhatsapp && selectedMessage"
+      :message="selectedMessage as any"
+      :message-group-id="route.params.id as string"
+    />
 
     <EmailPreview
       v-else-if="isEmail && selectedMessage"

package/app/queries/compilation.ts

@@ -23,6 +23,17 @@ export function useEmailParametersQuery(
   })
 }
 
+export function useResolvedParametersQuery(
+  messageGroupId: MaybeRefOrGetter<string>,
+  language: MaybeRefOrGetter<string>,
+) {
+  return useQuery({
+    key: () => ['resolved-parameters', toValue(messageGroupId), toValue(language)],
+    query: () => compilationApi.getResolvedParameters(toValue(messageGroupId), toValue(language)),
+    enabled: () => !!toValue(messageGroupId) && !!toValue(language),
+  })
+}
+
 export function useCompileEmailMutation() {
   return useMutation({
     mutation: ({ messageGroupId, data }: { messageGroupId: string; data: CompileMessageRequest }) =>

package/app/queries/messageGroups.ts

@@ -1,5 +1,6 @@
 import { useQuery, useMutation, useQueryCache } from '@pinia/colada'
 import type {
+  DuplicateMessageGroupBody,
   MessageGroup,
   MessageGroupWithMessageSummary,
   PostEntity,
@@ -82,6 +83,18 @@ export function useUnpublishMessageGroupMutation() {
   })
 }
 
+export function useDuplicateMessageGroupMutation() {
+  const queryCache = useQueryCache()
+
+  return useMutation({
+    mutation: ({ id, data }: { id: string; data?: DuplicateMessageGroupBody }) =>
+      messageGroupsApi.duplicate(id, data),
+    onSuccess: () => {
+      queryCache.invalidateQueries({ key: ['message-groups'] })
+    },
+  })
+}
+
 export function useDeleteMessageGroupMutation() {
   const queryCache = useQueryCache()
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev.smartpricing/message-composer-layer",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "private": false,
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -38,7 +38,7 @@
     "vue-router": "^5.0.7",
     "vue3-emoji-picker": "^1.1.8",
     "zod": "^4.4.3",
-    "@dev.smartpricing/message-composer-utils": "4.0.3"
+    "@dev.smartpricing/message-composer-utils": "4.0.5"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",