@dev.smartpricing/message-composer-layer 1.0.14 → 1.0.15

package/app/components/Composer/BrandList.vue

@@ -142,6 +142,7 @@ defineExpose({ openCreate, openEdit })
         :placeholder="t('pages.brands.search_placeholder')"
         type="search"
       />
+      <slot name="actions"/>
     </div>
 
     <UCard

package/app/components/Composer/EmailComposer.vue

@@ -203,7 +203,11 @@ onUnmounted(() => {
 })
 
 // ── Tracking helpers ──────────────────────────────────────────────
-const trackPrefix = computed(() => (props.mode === 'create' ? 'email_create' : 'email_edit'))
+function track(suffix: string, data: Record<string, unknown>) {
+  const name = props.mode === 'create' ? `email_create.${suffix}` : `email_edit.${suffix}`
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  trackEvent(name as any, data as any)
+}
 
 function getEmailBaseProps() {
   return {
@@ -224,7 +228,7 @@ function getEmailDraftProps() {
 watch(
   () => store.activeTab,
   (tab) => {
-    trackEvent(`${trackPrefix.value}.change_tab`, { ...getEmailBaseProps(), tab })
+    track('change_tab', { ...getEmailBaseProps(), tab })
   },
 )
 
@@ -234,7 +238,7 @@ function syncAllLanguagesBeforeSave() {
 }
 
 async function saveAsDraft() {
-  trackEvent(`${trackPrefix.value}.save_draft`, getEmailDraftProps())
+  track('save_draft', getEmailDraftProps())
   syncAllLanguagesBeforeSave()
 
   if (props.mode === 'create') {
@@ -259,7 +263,7 @@ async function saveAsDraft() {
 }
 
 async function saveTemplate() {
-  trackEvent(`${trackPrefix.value}.save`, getEmailDraftProps())
+  track('save', getEmailDraftProps())
   syncAllLanguagesBeforeSave()
 
   if (props.mode === 'create') {
@@ -359,19 +363,19 @@ async function translateAndSave() {
 
 // ── Tracking event forwarders ─────────────────────────────────────
 function onAddLanguage(lang: string) {
-  trackEvent(`${trackPrefix.value}.add_language`, { ...getEmailBaseProps(), language: lang })
+  track('add_language', { ...getEmailBaseProps(), language: lang })
 }
 
 function onRemoveLanguage(lang: string) {
-  trackEvent(`${trackPrefix.value}.remove_language`, { ...getEmailBaseProps(), language: lang })
+  track('remove_language', { ...getEmailBaseProps(), language: lang })
 }
 
 function onAutoTranslateTracked(lang: string) {
-  trackEvent(`${trackPrefix.value}.auto_translate`, { ...getEmailBaseProps(), language: lang })
+  track('auto_translate', { ...getEmailBaseProps(), language: lang })
 }
 
 function onPreview(lang: string) {
-  trackEvent(`${trackPrefix.value}.preview`, { ...getEmailBaseProps(), language: lang })
+  track('preview', { ...getEmailBaseProps(), language: lang })
 }
 
 function onFiltersChanged(payload: {
@@ -380,11 +384,11 @@ function onFiltersChanged(payload: {
   show_only_missing: boolean
   show_only_changes: boolean
 }) {
-  trackEvent(`${trackPrefix.value}.translations_filters`, { ...getEmailBaseProps(), ...payload })
+  track('translations_filters', { ...getEmailBaseProps(), ...payload })
 }
 
 function onBlockAdded(payload: { type: string; adding_mode: string }) {
-  trackEvent(`${trackPrefix.value}.add_widget`, {
+  track('add_widget', {
     ...getEmailBaseProps(),
     widget_type: payload.type,
     adding_mode: payload.adding_mode,
@@ -392,14 +396,14 @@ function onBlockAdded(payload: { type: string; adding_mode: string }) {
 }
 
 function onBlockDuplicated(payload: { type: string }) {
-  trackEvent(`${trackPrefix.value}.duplicate_widget`, {
+  track('duplicate_widget', {
     ...getEmailBaseProps(),
     widget_type: payload.type,
   })
 }
 
 function onBlockDeleted(payload: { type: string }) {
-  trackEvent(`${trackPrefix.value}.remove_widget`, {
+  track('remove_widget', {
     ...getEmailBaseProps(),
     widget_type: payload.type,
   })
@@ -410,7 +414,7 @@ function onBlockSorted(payload: {
   before_sort_position: number
   new_position: number
 }) {
-  trackEvent(`${trackPrefix.value}.sort_widget`, {
+  track('sort_widget', {
     ...getEmailBaseProps(),
     widget_type: payload.type,
     before_sort_position: payload.before_sort_position,
@@ -419,11 +423,11 @@ function onBlockSorted(payload: {
 }
 
 function onWidgetTabChanged(tab: string) {
-  trackEvent(`${trackPrefix.value}.change_widget_tab`, { ...getEmailBaseProps(), tab })
+  track('change_widget_tab', { ...getEmailBaseProps(), tab })
 }
 
 function onTestSent(payload: { to_recipients: number }, lang?: string) {
-  trackEvent(`${trackPrefix.value}.send_test`, {
+  track('send_test', {
     ...getEmailBaseProps(),
     widgets: emailEditorStore.blocks.map((b) => b.type),
     to_recipients: payload.to_recipients,

package/app/components/Composer/EmailContent.vue

@@ -71,7 +71,7 @@ const testIds = computed(() =>
           :label="$t('common.internal')"
           v-model="store.isInternal"
           color="info"
-          :data-testid="testIds.internalSwitch"
+          :data-testid="templateEmailCreateTestIds.internalSwitch"
         />
       </div>
     </template>
@@ -86,7 +86,10 @@ const testIds = computed(() =>
             @block-duplicated="emit('block-duplicated', $event)"
             @block-sorted="emit('block-sorted', $event)"
             @widget-tab-changed="emit('widget-tab-changed', $event)"
-            @test-sent="(payload, lang) => emit('test-sent', payload, lang)"
+            @test-sent="
+              (payload: { to_recipients: number }, lang?: string) =>
+                emit('test-sent', payload, lang)
+            "
           />
         </div>
       </template>

package/app/components/Composer/WhatsappComposer.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import IncompleteTranslationsDialog from '@/components/Common/IncompleteTranslationsDialog.vue'
-import { computed, ref, watch, onUnmounted } from 'vue'
-import type { WhatsappMessage, PostEntity } from '@dev.smartpricing/message-composer-utils/types'
+import { computed, ref, watch, onUnmounted, type Ref } from 'vue'
+import type {
+  WhatsappMessage,
+  PostEntity,
+  EmailMessage,
+} from '@dev.smartpricing/message-composer-utils/types'
 import { useAppContextStore } from '@/stores/appContext'
 import { useMetaSubmissionStore } from '@/stores/metaSubmission'
 import { useMessageGroupQuery, useLanguagesQuery } from '~/queries'
@@ -54,7 +58,10 @@ if (props.mode === 'edit') {
       // Record original states for change tracking
       for (const message of data.messages) {
         if (message.render_type === 'whatsapp_v1') {
-          changeTracking.recordOriginalState(message.language_id, message as WhatsappMessage)
+          changeTracking.recordOriginalState(
+            message.language_id,
+            message as unknown as WhatsappMessage,
+          )
         }
       }
     },
@@ -73,13 +80,14 @@ if (props.mode === 'create') {
 }
 
 // ── Validation ────────────────────────────────────────────────────
-const messagesRef = computed(() => store.messages)
 const { formState, draftSchema, validationErrors, validateDraft, validateFull, clearErrors } =
   useTemplateFormValidation({
     type: 'whatsapp',
     name: computed(() => store.name),
     category: computed(() => store.category),
-    messages: messagesRef,
+    messages: computed(() => store.messages) as Ref<
+      Record<string, PostEntity<EmailMessage> | WhatsappMessage>
+    >,
   })
 
 // ── Template operations ───────────────────────────────────────────
@@ -131,7 +139,11 @@ onUnmounted(() => {
 })
 
 // ── Tracking helpers ──────────────────────────────────────────────
-const trackPrefix = computed(() => (props.mode === 'create' ? 'wa_create' : 'wa_edit'))
+function track(suffix: string, data: Record<string, unknown>) {
+  const name = props.mode === 'create' ? `wa_create.${suffix}` : `wa_edit.${suffix}`
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  trackEvent(name as any, data as any)
+}
 
 function getWaBaseProps() {
   return { name: store.name, category: store.category }
@@ -153,7 +165,7 @@ function getWaDraftProps() {
 watch(
   () => store.activeTab,
   (tab) => {
-    trackEvent(`${trackPrefix.value}.change_tab`, { ...getWaBaseProps(), tab })
+    track('change_tab', { ...getWaBaseProps(), tab })
   },
 )
 
@@ -173,7 +185,7 @@ if (props.mode === 'edit') {
 
 // ── Save logic ────────────────────────────────────────────────────
 async function saveDraft() {
-  trackEvent(`${trackPrefix.value}.save_draft`, getWaDraftProps())
+  track('save_draft', getWaDraftProps())
 
   if (props.mode === 'create') {
     const result = await createTemplate(
@@ -198,7 +210,7 @@ async function saveDraft() {
 
 async function saveAsNew() {
   if (!store.messageGroupId) return
-  trackEvent(`${trackPrefix.value}.save_as_new`, getWaDraftProps())
+  track('save_as_new', getWaDraftProps())
 
   const cleanedMessages: Record<string, PostEntity<WhatsappMessage>> = {}
   for (const [languageId, message] of Object.entries(store.messages)) {
@@ -223,7 +235,7 @@ async function saveAsNew() {
 }
 
 async function requestApproval() {
-  trackEvent(`${trackPrefix.value}.request_approval`, getWaDraftProps())
+  track('request_approval', getWaDraftProps())
 
   if (props.mode === 'create') {
     const result = await createTemplate(
@@ -332,19 +344,19 @@ async function translateAndSave() {
 
 // ── Tracking event forwarders ─────────────────────────────────────
 function onAddLanguage(lang: string) {
-  trackEvent(`${trackPrefix.value}.add_language`, { ...getWaBaseProps(), language: lang })
+  track('add_language', { ...getWaBaseProps(), language: lang })
 }
 
 function onRemoveLanguage(lang: string) {
-  trackEvent(`${trackPrefix.value}.remove_language`, { ...getWaBaseProps(), language: lang })
+  track('remove_language', { ...getWaBaseProps(), language: lang })
 }
 
 function onAutoTranslateTracked(lang: string) {
-  trackEvent(`${trackPrefix.value}.auto_translate`, { ...getWaBaseProps(), language: lang })
+  track('auto_translate', { ...getWaBaseProps(), language: lang })
 }
 
 function onPreview(lang: string) {
-  trackEvent(`${trackPrefix.value}.preview`, { ...getWaBaseProps(), language: lang })
+  track('preview', { ...getWaBaseProps(), language: lang })
 }
 
 function onFiltersChanged(payload: {
@@ -353,7 +365,7 @@ function onFiltersChanged(payload: {
   show_only_missing: boolean
   show_only_changes: boolean
 }) {
-  trackEvent(`${trackPrefix.value}.translations_filters`, { ...getWaBaseProps(), ...payload })
+  track('translations_filters', { ...getWaBaseProps(), ...payload })
 }
 
 // ── Expose ────────────────────────────────────────────────────────

package/app/components/Composer/WhatsappContent.vue

@@ -59,7 +59,7 @@ const testIds = computed(() =>
           v-model="store.isInternal"
           :label="$t('common.internal')"
           color="info"
-          :data-testid="testIds.internalSwitch"
+          :data-testid="templateWhatsappCreateTestIds.internalSwitch"
         />
       </div>
     </template>
@@ -74,14 +74,14 @@ const testIds = computed(() =>
           }}
         </h2>
         <WhatsappEditorSyncWrapper
-          v-model="store.messages[store.language]"
-          :messages="store.messages"
+          v-model="store.messages[store.language] as WhatsappMessage"
+          :messages="store.messages as Record<string, WhatsappMessage>"
           :main-language-id="store.language"
           :key="store.language"
         />
       </div>
       <div class="col-span-1 overflow-y-auto" v-if="store.currentMessage">
-        <WhatsappPreview :message="store.currentMessage" />
+        <WhatsappPreview :message="store.currentMessage as WhatsappMessage" />
       </div>
     </div>
   </UCard>

package/app/components/Composer/WhatsappTranslations.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import TranslationEditor from '@/components/Whatsapp/TranslationEditor.vue'
 import LanguageList from '@/components/Common/LanguageList.vue'
+import type { WhatsappMessage } from '@dev.smartpricing/message-composer-utils/types'
 
 const props = defineProps<{
   mode: 'create' | 'edit'
@@ -52,9 +53,11 @@ const testIds = computed(() =>
       </div>
       <div class="overflow-y-auto" v-if="store.currentMessage && store.targetMessage">
         <TranslationEditor
-          :base-message="store.messages[store.language] || store.messages['en']"
-          v-model:target-message="store.messages[store.targetLanguage]"
-          :messages="store.messages"
+          :base-message="
+            (store.messages[store.language] || store.messages['en']) as WhatsappMessage
+          "
+          v-model:target-message="store.messages[store.targetLanguage] as WhatsappMessage"
+          :messages="store.messages as Record<string, WhatsappMessage>"
           :current-language="store.targetLanguage"
           :base-language="store.language"
           :message-group-id="store.changeTrackingId"

package/app/composables/useTemplateFormValidation.ts

@@ -19,7 +19,7 @@ interface UseTemplateFormValidationOptions {
 const draftSchema = z.object({
   name: z.string().min(1, 'editor.validation.error.nameRequired'),
   category: z.string().min(1),
-  messages: z.record(z.string(), z.any()).refine((messages) => 'en' in messages, {
+  messages: z.record(z.string(), z.any()).refine((messages) => Object.keys(messages).length > 0, {
     message: 'editor.validation.error.messageRequired',
   }),
 })

package/app/pages/brands.vue

@@ -4,7 +4,7 @@ definePageMeta({
 })
 
 const { t } = useI18n()
-const brandListRef = ref<InstanceType<typeof ComposerBrandList>>()
+const brandListRef = useTemplateRef('brandListRef')
 </script>
 
 <template>

package/app/pages/template/email/[id].vue

@@ -6,7 +6,7 @@ definePageMeta({
 })
 
 const route = useRoute()
-const composerRef = ref<InstanceType<typeof ComposerEmailComposer>>()
+const composerRef = useTemplateRef('composerRef')
 const store = useEmailComposerStore()
 </script>
 

package/app/pages/template/email/create.vue

@@ -5,7 +5,7 @@ definePageMeta({
   channel: 'email',
 })
 
-const composerRef = ref<InstanceType<typeof ComposerEmailComposer>>()
+const composerRef = useTemplateRef('composerRef')
 const store = useEmailComposerStore()
 </script>
 

package/app/pages/template/whatsapp/[id].vue

@@ -6,7 +6,7 @@ definePageMeta({
 })
 
 const route = useRoute()
-const composerRef = ref<InstanceType<typeof ComposerWhatsappComposer>>()
+const composerRef = useTemplateRef('composerRef')
 const store = useWhatsappComposerStore()
 </script>
 

package/app/pages/template/whatsapp/create.vue

@@ -5,7 +5,7 @@ definePageMeta({
   channel: 'whatsapp',
 })
 
-const composerRef = ref<InstanceType<typeof ComposerWhatsappComposer>>()
+const composerRef = useTemplateRef('composerRef')
 const store = useWhatsappComposerStore()
 </script>
 

package/app/stores/whatsappComposer.ts

@@ -106,7 +106,7 @@ export const useWhatsappComposerStore = defineStore('whatsappComposer', () => {
     const msgs: Record<string, WhatsappMessage> = {}
     for (const message of data.messages) {
       if (message.render_type === 'whatsapp_v1') {
-        msgs[message.language_id] = structuredClone(message) as WhatsappMessage
+        msgs[message.language_id] = structuredClone(message) as unknown as WhatsappMessage
       }
     }
     messages.value = msgs

package/i18n/locales/de.ts

@@ -397,7 +397,7 @@ Diese Nachrichten müssen funktional sein, nicht werblich.
         emailRequired: 'Bitte geben Sie eine gültige E-Mail-Adresse ein',
         nameRequired: 'Name ist erforderlich',
         headerMediaRequired: 'Header-Mediendatei ist erforderlich',
-        messageRequired: 'Englische Nachricht ist erforderlich',
+        messageRequired: 'Mindestens eine Sprache ist erforderlich',
         headerTooLong: 'Header-Text überschreitet 60 Zeichen',
         bodyTooLong: 'Text überschreitet 1024 Zeichen',
         footerTooLong: 'Footer-Text überschreitet 60 Zeichen',

package/i18n/locales/en.ts

@@ -390,7 +390,7 @@ These messages must be functional, not promotional.
         emailInvalid: "Invalid email format. Use email format (e.g., example{'@'}example.com)",
         emailRequired: 'Please enter a valid email address',
         nameRequired: 'Name is required',
-        messageRequired: 'English message is required',
+        messageRequired: 'At least one language is required',
         headerTooLong: 'Header text exceeds 60 characters',
         headerMediaRequired: 'Header media file is required',
         bodyTooLong: 'Body text exceeds 1024 characters',

package/i18n/locales/es.ts

@@ -394,7 +394,7 @@ Estos mensajes deben ser funcionales, no promocionales.
           "Formato de correo inválido. Usa el formato de correo (p. ej., example{'@'}example.com)",
         emailRequired: 'Introduce una dirección de correo válida',
         nameRequired: 'Se requiere el nombre',
-        messageRequired: 'Se requiere el mensaje en inglés',
+        messageRequired: 'Se requiere al menos un idioma',
         headerTooLong: 'El texto del encabezado supera los 60 caracteres',
         headerMediaRequired: 'El archivo multimedia del encabezado es obligatorio',
         bodyTooLong: 'El texto supera los 1024 caracteres',

package/i18n/locales/fr.ts

@@ -394,7 +394,7 @@ Ces messages doivent être fonctionnels, et non promotionnels.
           "Format d’e-mail invalide. Utilisez le format e-mail (ex. example{'@'}example.com)",
         emailRequired: 'Veuillez saisir une adresse e-mail valide',
         nameRequired: 'Le nom est requis',
-        messageRequired: 'Le message en anglais est requis',
+        messageRequired: 'Au moins une langue est requise',
         headerMediaRequired: "Le fichier média de l'en-tête est requis",
         headerTooLong: 'Le texte d’en-tête dépasse 60 caractères',
         bodyTooLong: 'Le texte dépasse 1024 caractères',

package/i18n/locales/it.ts

@@ -393,7 +393,7 @@ Questi messaggi devono essere funzionali, non promozionali.
           "Formato email non valido. Usa il formato email (es. example{'@'}example.com)",
         emailRequired: 'Inserisci un indirizzo email valido',
         nameRequired: 'Il nome è obbligatorio',
-        messageRequired: 'Il messaggio in inglese è obbligatorio',
+        messageRequired: 'È richiesta almeno una lingua',
         headerMediaRequired: "Il file multimediale dell'intestazione è obbligatorio",
         headerTooLong: 'Il testo dell’header supera i 60 caratteri',
         bodyTooLong: 'Il testo supera i 1024 caratteri',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev.smartpricing/message-composer-layer",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "private": false,
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -39,14 +39,15 @@
     "vue-router": "^5.0.6",
     "vue3-emoji-picker": "^1.1.8",
     "zod": "^4.4.1",
-    "@dev.smartpricing/message-composer-utils": "3.1.14"
+    "@dev.smartpricing/message-composer-utils": "3.1.15"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",
     "@nuxt/test-utils": "^4.0.3",
     "@playwright/test": "^1.59.1",
     "dotenv": "^17.4.2",
-    "nuxt-ui-layer": "git+ssh://git@github.com:smartpricing/smartness-nuxt-ui#v1.5.4"
+    "nuxt-ui-layer": "git+ssh://git@github.com:smartpricing/smartness-nuxt-ui#v1.5.4",
+    "vue-tsc": "^3.2.8"
   },
   "peerDependencies": {
     "nuxt-ui-layer": ">=1.3.0"