@dev.smartpricing/message-composer-layer 4.3.1 → 4.3.2-chat.0

package/app/composables/useTemplateOperations.ts

@@ -13,6 +13,7 @@ import type {
   MessageStatus,
   MessageGroup,
 } from '@dev.smartpricing/message-composer-utils/types'
+import { useAppContextStore } from '@/stores/appContext'
 
 interface TemplateData<T = Message | PostEntity<Message>> {
   messageGroup: { name: string; category: MessageGroupCategory; brand_id?: string | null }
@@ -27,6 +28,7 @@ interface UseTemplateOperationsOptions {
 export function useTemplateOperations(options: UseTemplateOperationsOptions = {}) {
   const saving = ref(false)
   const saved = ref(false)
+  const appContext = useAppContextStore()
 
   // Hoist composables to setup scope (they use inject() internally)
   const { mutateAsync: createMessageGroup } = useCreateMessageGroupMutation()
@@ -39,9 +41,17 @@ export function useTemplateOperations(options: UseTemplateOperationsOptions = {}
   async function createTemplate(data: TemplateData, status: MessageStatus = 'draft') {
     saving.value = true
     try {
-      const createdMessageGroup = await createMessageGroup(
-        data.messageGroup as PostEntity<MessageGroup>,
-      )
+      // Every Message Group belongs to the context Product (ADR 0011).
+      const product = appContext.product
+      if (!product) {
+        throw new Error(
+          '[message-composer] Cannot create a template: no Product in the composer context',
+        )
+      }
+      const createdMessageGroup = await createMessageGroup({
+        ...data.messageGroup,
+        product,
+      } as PostEntity<MessageGroup>)
 
       if (createdMessageGroup?.id) {
         for (const message of Object.values(data.messages)) {

package/app/layouts/default.vue

@@ -1,5 +1,6 @@
 <template>
   <SNavigationPage :panel-props="{ ui: { body: 'p-0 sm:p-0 gap-0 sm:gap-0 overflow-hidden' } }">
+    <CommonAppContextErrors />
     <slot />
   </SNavigationPage>
 </template>

package/app/queries/dynamicValues.ts

@@ -1,4 +1,5 @@
 import { useQuery } from '@pinia/colada'
+import type { DynamicValuesResponse } from '@dev.smartpricing/message-composer-utils/types'
 import { dynamicValuesApi } from '~/api'
 import { useAppContextStore } from '~/stores/appContext'
 
@@ -6,8 +7,13 @@ export function useDynamicValuesQuery() {
   const { product, mainLanguage } = storeToRefs(useAppContextStore())
 
   return useQuery({
-    key: () => ['dynamic-values', product.value, mainLanguage.value],
-    query: () => dynamicValuesApi.get(product.value || 'browser', mainLanguage.value || 'en'),
+    key: () => ['dynamic-values', product.value ?? '', mainLanguage.value],
+    // No Product, no request: the picker stays empty and the store lists the
+    // missing Product in `validationErrors`.
+    query: () => {
+      if (!product.value) return Promise.resolve<DynamicValuesResponse>({})
+      return dynamicValuesApi.get(product.value, mainLanguage.value || 'en')
+    },
     staleTime: 30 * 60 * 1000,
   })
 }

package/app/queries/messageGroups.ts

@@ -4,36 +4,38 @@ import type {
   MessageGroup,
   MessageGroupWithMessageSummary,
   PostEntity,
-  RenderType,
 } from '@dev.smartpricing/message-composer-utils/types'
 import { messageGroupsApi } from '~/api'
+import type { ListMessageGroupsOptions } from '~/api/messageGroups'
 
 // QUERIES
-export function useMessageGroupsQuery(
-  options?: MaybeRefOrGetter<{
-    renderType?: RenderType
-    tags?: string[]
-    tagsMode?: 'and' | 'or'
-  }>,
-  _queryOptions?: { polling?: boolean },
+/**
+ * One page of the server-side filtered list, in the Laravel envelope (ADR 0012).
+ * The previous page stays as placeholder data while the next one loads, so
+ * paging and filtering never flash an empty table.
+ */
+export function useMessageGroupListQuery(
+  options: MaybeRefOrGetter<ListMessageGroupsOptions>,
+  queryOptions: { enabled?: MaybeRefOrGetter<boolean> } = {},
 ) {
-  const query = useQuery({
+  return useQuery({
     key: () => ['message-groups', JSON.stringify(toValue(options))],
-    query: () => messageGroupsApi.getAll(toValue(options)),
+    query: () => messageGroupsApi.list(toValue(options)),
     staleTime: 0,
+    placeholderData: (previousData) => previousData,
+    enabled: queryOptions.enabled,
   })
-
-  // TODO: Implement polling when Pinia Colada supports it
-  // For now, polling can be done manually in the component using setInterval + refetch
-
-  return query
 }
 
-export function useMessageGroupQuery(id: MaybeRefOrGetter<string>) {
+export function useMessageGroupQuery(
+  id: MaybeRefOrGetter<string>,
+  queryOptions: { enabled?: MaybeRefOrGetter<boolean> } = {},
+) {
   return useQuery({
     key: () => ['message-groups', toValue(id)],
     query: () => messageGroupsApi.getById(toValue(id)),
     staleTime: 2 * 60 * 1000,
+    enabled: queryOptions.enabled,
   })
 }
 

package/app/stores/appContext.ts

@@ -1,7 +1,8 @@
 import { ref, computed, watch } from 'vue'
-import type {
-  AppContextConfig,
-  AppContextState,
+import {
+  MESSAGE_GROUP_PRODUCTS,
+  type AppContextConfig,
+  type AppContextState,
 } from '@dev.smartpricing/message-composer-utils/types'
 
 export const useAppContextStore = defineStore('appContext', () => {
@@ -11,9 +12,10 @@ export const useAppContextStore = defineStore('appContext', () => {
 
   // Proxy from injection with defaults (same interface as before)
   const organization_id = computed(() => ctx.organization_id?.value ?? '')
-  const product = computed<NonNullable<AppContextConfig['product']>>(
-    () => ctx.product?.value ?? 'browser',
-  )
+  // The Product is required by the context type (ADR 0011), but a host can
+  // still omit it at runtime: read defensively and list it in
+  // `validationErrors` rather than crashing or falling back to a fake Product.
+  const product = computed<AppContextConfig['product'] | undefined>(() => ctx.product?.value)
   const strategy = computed<NonNullable<AppContextConfig['strategy']>>(
     () => ctx.strategy?.value ?? 'native',
   )
@@ -59,6 +61,10 @@ export const useAppContextStore = defineStore('appContext', () => {
   const validationErrors = computed<Record<string, string>>(() => {
     const errors: Record<string, string> = {}
 
+    if (!product.value) {
+      errors.product = `Product is required: pass \`product\` (${MESSAGE_GROUP_PRODUCTS.join(' | ')}) in the composer context`
+    }
+
     if (channels.value?.includes('whatsapp') && !metaWabaId.value) {
       errors.metaConfig = 'Meta WABA ID is required for WhatsApp'
     }

package/app/types/tracking.ts

@@ -1,3 +1,5 @@
+import type { MessageGroupProduct } from '@dev.smartpricing/message-composer-utils/types'
+
 export type MessagesKind = 'email' | 'whatsapp'
 
 export interface MessageActionProperties {
@@ -83,6 +85,8 @@ export interface TrackingEventMap {
     search_term: string
     category: string
     status: string
+    /** The Product filter; `all` when not narrowed. */
+    product: MessageGroupProduct | 'all'
     messages_kind: MessagesKind
   }
   change_tab: { messages_kind: MessagesKind }

package/app/utils/testIds.const.ts

@@ -513,11 +513,16 @@ export const templateListTableTestIds = {
   searchInput: 'template-list-table-search-input',
   categorySelect: 'template-list-table-category-select',
   statusSelect: 'template-list-table-status-select',
+  productSelect: 'template-list-table-product-select',
+  visibilitySelect: 'template-list-table-visibility-select',
+  pagination: 'template-list-table-pagination',
+  paginationSummary: 'template-list-table-pagination-summary',
   card: 'template-list-table-card',
   table: 'template-list-table-table',
   rowName: 'template-list-table-row-name',
   rowInternalBadge: 'template-list-table-row-internal-badge',
   rowCategoryBadge: 'template-list-table-row-category-badge',
+  rowProductBadge: 'template-list-table-row-product-badge',
   rowPreview: 'template-list-table-row-preview',
   rowActions: 'template-list-table-row-actions',
   rowEditAction: 'template-list-table-row-edit',
@@ -751,6 +756,7 @@ export const previewByIdTestIds = {
 
 export const messageGroupSelectTestIds = {
   root: 'message-group-select-root',
+  loadMore: 'message-group-select-load-more',
 } as const
 
 /** @deprecated Use `messageGroupSelectTestIds` instead */

package/i18n/locales/de.ts

@@ -18,6 +18,7 @@ export default {
     all: 'Alle',
     copy: 'Kopieren',
     copy_of: 'Kopie von {name}',
+    context_error_title: 'Konfigurationsfehler des Composers',
     desktop: 'Desktop',
     error: 'Fehler',
     errore: 'Fehler',
@@ -58,6 +59,7 @@ export default {
       inactive_tooltip:
         'Diese Nachrichtengruppe enthält nicht genehmigte oder fehlende Nachrichten',
       hide_inactive: 'Inaktive ausblenden',
+      load_more: 'Mehr laden',
     },
     view_less: 'Weniger anzeigen',
     view_more: 'Mehr anzeigen',
@@ -783,20 +785,28 @@ export default {
     },
     message_library: {
       add_message_group: 'Neue Nachricht',
+      all_products: 'Alle Produkte',
       category_placeholder: 'Kategorie auswählen',
       headers: {
         category: 'Kategorie',
         name: 'Name',
         preview: 'Vorschau',
+        product: 'Produkt',
         status: 'Status',
-        tags: 'Tags',
         updated_at: 'Aktualisiert am',
       },
+      pagination_summary: '{from}–{to} von {total}',
+      product_placeholder: 'Produkt auswählen',
       render_type_placeholder: 'Render-Typ auswählen',
       search_placeholder: 'Suchen',
       status_placeholder: 'Status auswählen',
-      tags_placeholder: 'Nach Tags filtern',
       title: 'Nachrichtenbibliothek',
+      visibility: {
+        all: 'Alle',
+        internal: 'Intern',
+        public: 'Öffentlich',
+      },
+      visibility_placeholder: 'Sichtbarkeit auswählen',
     },
     whatsapp: {
       create_message_group: {
@@ -829,6 +839,12 @@ export default {
       },
     },
   },
+  products: {
+    chat: 'Smartchat',
+    connect: 'Smartconnect',
+    pms: 'Smartpms',
+    pricing: 'Smartpricing',
+  },
   public: {
     select_message: {
       choose_language: 'Sprache auswählen...',

package/i18n/locales/en.ts

@@ -18,6 +18,7 @@ export default {
     all: 'All',
     copy: 'Copy',
     copy_of: 'Copy of {name}',
+    context_error_title: 'Composer configuration error',
     desktop: 'Desktop',
     error: 'Error',
     errore: 'Error',
@@ -56,6 +57,7 @@ export default {
     messageGroupSelect: {
       inactive_tooltip: 'This message group has unapproved or missing messages',
       hide_inactive: 'Hide inactive',
+      load_more: 'Load more',
     },
     view_less: 'View less',
     view_more: 'View more',
@@ -772,20 +774,28 @@ export default {
     },
     message_library: {
       add_message_group: 'New message',
+      all_products: 'All products',
       category_placeholder: 'Select category',
       headers: {
         category: 'Category',
         name: 'Name',
         preview: 'Preview',
+        product: 'Product',
         status: 'Status',
-        tags: 'Tags',
         updated_at: 'Updated at',
       },
+      pagination_summary: '{from}–{to} of {total}',
+      product_placeholder: 'Select product',
       render_type_placeholder: 'Select render type',
       search_placeholder: 'Search',
       status_placeholder: 'Select status',
-      tags_placeholder: 'Filter by tags',
       title: 'Messages',
+      visibility: {
+        all: 'All',
+        internal: 'Internal',
+        public: 'Public',
+      },
+      visibility_placeholder: 'Select visibility',
     },
     whatsapp: {
       create_message_group: {
@@ -818,6 +828,12 @@ export default {
       },
     },
   },
+  products: {
+    chat: 'Smartchat',
+    connect: 'Smartconnect',
+    pms: 'Smartpms',
+    pricing: 'Smartpricing',
+  },
   public: {
     select_message: {
       choose_language: 'Choose a language...',

package/i18n/locales/es.ts

@@ -18,6 +18,7 @@ export default {
     all: 'Todos',
     copy: 'Copiar',
     copy_of: 'Copia de {name}',
+    context_error_title: 'Error de configuración del composer',
     desktop: 'Escritorio',
     error: 'Error',
     errore: 'Error',
@@ -57,6 +58,7 @@ export default {
     messageGroupSelect: {
       inactive_tooltip: 'Este grupo de mensajes tiene mensajes no aprobados o faltantes',
       hide_inactive: 'Ocultar inactivos',
+      load_more: 'Cargar más',
     },
     view_less: 'Ver menos',
     view_more: 'Ver más',
@@ -781,20 +783,28 @@ export default {
     },
     message_library: {
       add_message_group: 'Nuevo mensaje',
+      all_products: 'Todos los productos',
       category_placeholder: 'Seleccionar categoría',
       headers: {
         category: 'Categoría',
         name: 'Nombre',
         preview: 'Vista previa',
+        product: 'Producto',
         status: 'Estado',
-        tags: 'Etiquetas',
         updated_at: 'Actualizado el',
       },
+      pagination_summary: '{from}–{to} de {total}',
+      product_placeholder: 'Seleccionar producto',
       render_type_placeholder: 'Seleccionar tipo de renderizado',
       search_placeholder: 'Buscar',
       status_placeholder: 'Seleccionar estado',
-      tags_placeholder: 'Filtrar por etiquetas',
       title: 'Libreria de mensajes',
+      visibility: {
+        all: 'Todas',
+        internal: 'Internas',
+        public: 'Públicas',
+      },
+      visibility_placeholder: 'Seleccionar visibilidad',
     },
     whatsapp: {
       create_message_group: {
@@ -827,6 +837,12 @@ export default {
       },
     },
   },
+  products: {
+    chat: 'Smartchat',
+    connect: 'Smartconnect',
+    pms: 'Smartpms',
+    pricing: 'Smartpricing',
+  },
   public: {
     select_message: {
       choose_language: 'Elige un idioma...',

package/i18n/locales/fr.ts

@@ -18,6 +18,7 @@ export default {
     all: 'Tous',
     copy: 'Copier',
     copy_of: 'Copie de {name}',
+    context_error_title: 'Erreur de configuration du composer',
     desktop: 'Bureau',
     error: 'Erreur',
     errore: 'Erreur',
@@ -57,6 +58,7 @@ export default {
     messageGroupSelect: {
       inactive_tooltip: 'Ce groupe de messages contient des messages non approuvés ou manquants',
       hide_inactive: 'Masquer inactifs',
+      load_more: 'Charger plus',
     },
     view_less: 'Afficher moins',
     view_more: 'Afficher plus',
@@ -785,20 +787,28 @@ export default {
     },
     message_library: {
       add_message_group: 'Nouveau message',
+      all_products: 'Tous les produits',
       category_placeholder: 'Sélectionner une catégorie',
       headers: {
         category: 'Catégorie',
         name: 'Nom',
         preview: 'Aperçu',
+        product: 'Produit',
         status: 'Statut',
-        tags: 'Tags',
         updated_at: 'Mis à jour le',
       },
+      pagination_summary: '{from}–{to} sur {total}',
+      product_placeholder: 'Sélectionner un produit',
       render_type_placeholder: 'Sélectionner le type de rendu',
       search_placeholder: 'Rechercher',
       status_placeholder: 'Sélectionner un statut',
-      tags_placeholder: 'Filtrer par tags',
       title: 'Bibliothèque de messages',
+      visibility: {
+        all: 'Toutes',
+        internal: 'Internes',
+        public: 'Publiques',
+      },
+      visibility_placeholder: 'Sélectionner la visibilité',
     },
     whatsapp: {
       create_message_group: {
@@ -831,6 +841,12 @@ export default {
       },
     },
   },
+  products: {
+    chat: 'Smartchat',
+    connect: 'Smartconnect',
+    pms: 'Smartpms',
+    pricing: 'Smartpricing',
+  },
   public: {
     select_message: {
       choose_language: 'Choisir une langue...',

package/i18n/locales/it.ts

@@ -18,6 +18,7 @@ export default {
     all: 'Tutti',
     copy: 'Copia',
     copy_of: 'Copia di {name}',
+    context_error_title: 'Errore di configurazione del composer',
     desktop: 'Desktop',
     error: 'Errore',
     errore: 'Errore',
@@ -56,6 +57,7 @@ export default {
     messageGroupSelect: {
       inactive_tooltip: 'Questo gruppo di messaggi contiene messaggi non approvati o mancanti',
       hide_inactive: 'Nascondi inattivi',
+      load_more: 'Carica altri',
     },
     view_less: 'Mostra meno',
     view_more: 'Mostra di più',
@@ -778,20 +780,28 @@ export default {
     },
     message_library: {
       add_message_group: 'Nuovo messaggio',
+      all_products: 'Tutti i prodotti',
       category_placeholder: 'Seleziona categoria',
       headers: {
         category: 'Categoria',
         name: 'Nome',
         preview: 'Anteprima',
+        product: 'Prodotto',
         status: 'Stato',
-        tags: 'Tag',
         updated_at: 'Aggiornato il',
       },
+      pagination_summary: '{from}–{to} di {total}',
+      product_placeholder: 'Seleziona prodotto',
       render_type_placeholder: 'Seleziona tipo di rendering',
       search_placeholder: 'Cerca',
       status_placeholder: 'Seleziona stato',
-      tags_placeholder: 'Filtra per tag',
       title: 'Libreria messaggi',
+      visibility: {
+        all: 'Tutte',
+        internal: 'Interne',
+        public: 'Pubbliche',
+      },
+      visibility_placeholder: 'Seleziona visibilità',
     },
     whatsapp: {
       create_message_group: {
@@ -824,6 +834,12 @@ export default {
       },
     },
   },
+  products: {
+    chat: 'Smartchat',
+    connect: 'Smartconnect',
+    pms: 'Smartpms',
+    pricing: 'Smartpricing',
+  },
   public: {
     select_message: {
       choose_language: 'Scegli una lingua...',

package/package.json

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