@dev.smartpricing/message-composer-layer 4.0.3 → 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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev.smartpricing/message-composer-layer",
-  "version": "4.0.3",
+  "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.4"
+    "@dev.smartpricing/message-composer-utils": "4.0.5"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",