@dev.smartpricing/message-composer-layer 4.3.2-fix.1 → 4.5.1-next.0

package/app/components/TemplateList/BaseTable.vue

@@ -1,16 +1,36 @@
 <script setup lang="ts">
 import {
   MESSAGE_GROUP_CATEGORIES,
+  MESSAGE_GROUP_LIST_VISIBILITY,
+  MESSAGE_GROUP_PRODUCTS,
   MESSAGE_STATUS,
+  type MessageGroupListSort,
   type MessageGroupWithMessageSummary,
+  type PaginationMeta,
   type RenderType,
 } from '@dev.smartpricing/message-composer-utils/types'
 import StatusCell from '@/components/TemplateList/StatusCell.vue'
 import { useI18n } from 'vue-i18n'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { formatDate } from '@dev.smartpricing/message-composer-utils/utils'
 import type { TableColumn } from '#ui/types'
 import type { TrackingEventMap } from '@/types/tracking'
+import {
+  ALL_FILTER,
+  type MessageGroupListFilters,
+  type MessageGroupListSorting,
+} from '@/composables/useMessageGroupList'
+
+const props = defineProps<{
+  messageGroups: MessageGroupWithMessageSummary[]
+  /** Envelope meta of the current page; undefined until the first page arrives. */
+  meta?: PaginationMeta
+  loading: boolean
+  renderType: RenderType
+  filters: MessageGroupListFilters
+  sorting: MessageGroupListSorting
+  page: number
+}>()
 
 const emit = defineEmits<{
   edit: [MessageGroupWithMessageSummary]
@@ -18,6 +38,9 @@ const emit = defineEmits<{
   duplicate: [MessageGroupWithMessageSummary]
   publish: [MessageGroupWithMessageSummary]
   unpublish: [MessageGroupWithMessageSummary]
+  'update:filters': [Partial<MessageGroupListFilters>]
+  'update:sorting': [MessageGroupListSorting]
+  'update:page': [number]
 }>()
 
 const appContext = useAppContextStore()
@@ -86,49 +109,40 @@ function rowActions(row: MessageGroupWithMessageSummary) {
   ]
 }
 
+// Column ids of sortable columns are the server's `sort` values (ADR 0012);
+// preview and status are aggregates and stay unsortable.
 const columns: TableColumn<MessageGroupWithMessageSummary>[] = [
   {
-    id: 'name',
+    id: 'name' satisfies MessageGroupListSort,
     accessorKey: 'name',
     header: (ctx) => getSortableHeader(ctx, t('pages.message_library.headers.name')),
   },
   {
-    id: 'category',
+    id: 'category' satisfies MessageGroupListSort,
     accessorKey: 'category',
     header: (ctx) => getSortableHeader(ctx, t('pages.message_library.headers.category')),
-    filterFn: (row, columnId, filterValue) => {
-      if (filterValue === 'all') return true
-      return row.original.category.toLowerCase().includes(filterValue.toLowerCase())
-    },
+  },
+  {
+    id: 'product',
+    accessorKey: 'product',
+    enableSorting: false,
+    header: () => t('pages.message_library.headers.product'),
   },
   {
     id: 'preview',
     accessorFn: (row) => getLocalizedMessage(row)?.preview,
-    header: (ctx) => getSortableHeader(ctx, t('pages.message_library.headers.preview')),
+    enableSorting: false,
+    header: () => t('pages.message_library.headers.preview'),
   },
   {
     id: 'status',
     accessorFn: (row) => row.messages.map((m) => m.status).join(', '),
-    header: (ctx) => getSortableHeader(ctx, t('pages.message_library.headers.status')),
-    filterFn: (row, columnId, filterValue) => {
-      if (filterValue === 'all') return true
-      return row.original.messages.some((m) => m.status === filterValue)
-    },
+    enableSorting: false,
+    header: () => t('pages.message_library.headers.status'),
   },
-  // {
-  //   id: 'tags',
-  //   accessorFn: (row) => row.tags?.join(', ') || '',
-  //   header: (ctx) => getSortableHeader(ctx, t('pages.message_library.headers.tags')),
-  //   filterFn: (row, _columnId, filterValue: string[]) => {
-  //     if (!filterValue || filterValue.length === 0) return true
-  //     const rowTags = row.original.tags || []
-  //     return filterValue.some((tag) => rowTags.includes(tag))
-  //   },
-  // },
   {
-    id: 'updated_at',
+    id: 'updated_at' satisfies MessageGroupListSort,
     accessorFn: (row) => formatDate(row.updated_at),
-    // header: () => t('pages.message_library.headers.updated_at'),
     header: (ctx) => getSortableHeader(ctx, t('pages.message_library.headers.updated_at')),
   },
   {
@@ -144,77 +158,70 @@ const columns: TableColumn<MessageGroupWithMessageSummary>[] = [
   },
 ]
 
-const sorting = ref([
-  {
-    id: 'updated_at',
-    desc: true,
-  },
-])
+// The table's sorting model mirrors the server sort; TanStack never sorts locally (manualSorting).
+function toTableSorting(sorting: MessageGroupListSorting) {
+  return [{ id: sorting.sort, desc: sorting.order === 'desc' }]
+}
 
-const props = defineProps<{
-  messageGroups: MessageGroupWithMessageSummary[]
-  loading: boolean
-  renderType: RenderType
-}>()
+const sorting = ref(toTableSorting(props.sorting))
 
-const filteredMessageGroups = computed(() => {
-  if (appContext.isAdmin) return props.messageGroups
-  return props.messageGroups.filter((mg) => mg.visibility !== 'internal')
-})
+watch(
+  () => props.sorting,
+  (value) => {
+    sorting.value = toTableSorting(value)
+  },
+)
 
-const categoryItems = computed(() => {
-  return [
-    {
-      label: t('common.all'),
-      value: 'all',
-    },
-    ...MESSAGE_GROUP_CATEGORIES.map((category) => ({
-      label: t(`categories.${category}`),
-      value: category,
-    })),
-  ]
+watch(sorting, (val) => {
+  const [first] = val
+  if (!first) return
+  const next: MessageGroupListSorting = {
+    sort: first.id as MessageGroupListSort,
+    order: first.desc ? 'desc' : 'asc',
+  }
+  if (next.sort === props.sorting.sort && next.order === props.sorting.order) return
+  emit('update:sorting', next)
+  trackEvent('table_sorting', {
+    messages_kind: messagesKind.value,
+    sort_column: next.sort,
+  })
 })
 
-const statusItems = computed(() => {
+// Select items: the "all" entry first, then one translated entry per enum value.
+function toSelectItems<T extends string>(
+  values: readonly T[],
+  keyPrefix: string,
+  allLabel: string,
+) {
   return [
-    {
-      label: t('common.all'),
-      value: 'all',
-    },
-
-    ...MESSAGE_STATUS.map((status) => ({
-      label: t(`status.${status}`),
-      value: status,
-    })),
+    { label: allLabel, value: ALL_FILTER },
+    ...values.map((value) => ({ label: t(`${keyPrefix}.${value}`), value })),
   ]
-})
-
-// const tagItems = computed(() => {
-//   const allTags = new Set<string>()
-//   messageGroups.forEach((mg) => mg.tags?.forEach((tag) => allTags.add(tag)))
-//   return [...allTags].sort()
-// })
-
-// const selectedTags = ref<string[]>([])
+}
 
-const table = useTemplateRef('table')
+const categoryItems = computed(() =>
+  toSelectItems(MESSAGE_GROUP_CATEGORIES, 'categories', t('common.all')),
+)
+const statusItems = computed(() => toSelectItems(MESSAGE_STATUS, 'status', t('common.all')))
+const productItems = computed(() =>
+  toSelectItems(MESSAGE_GROUP_PRODUCTS, 'products', t('pages.message_library.all_products')),
+)
+
+const visibilityItems = computed(() =>
+  MESSAGE_GROUP_LIST_VISIBILITY.map((visibility) => ({
+    label: t(`pages.message_library.visibility.${visibility}`),
+    value: visibility,
+  })),
+)
 
 const messagesKind = computed(() => (props.renderType === 'email_v1' ? 'email' : 'whatsapp'))
 
-watch(sorting, (val) => {
-  if (val[0]) {
-    trackEvent('table_sorting', {
-      messages_kind: messagesKind.value,
-      sort_column: val[0].id,
-    })
-  }
-})
-
 function trackFilters(overrides: Partial<TrackingEventMap['change_filters']> = {}) {
   trackEvent('change_filters', {
-    search_term: (table.value?.tableApi?.getColumn('name')?.getFilterValue() as string) || '',
-    category: (table.value?.tableApi?.getColumn('category')?.getFilterValue() as string) || '',
-    status: (table.value?.tableApi?.getColumn('status')?.getFilterValue() as string) || '',
+    search_term: props.filters.search,
+    category: props.filters.category,
+    status: props.filters.status,
+    product: props.filters.product,
     messages_kind: messagesKind.value,
     ...overrides,
   })
@@ -225,19 +232,24 @@ const trackSearchFilter = useDebounceFn((value: string) => {
 }, 500)
 
 function onSearchInput(value: string) {
-  table.value?.tableApi?.getColumn('name')?.setFilterValue(value)
+  emit('update:filters', { search: value })
   trackSearchFilter(value)
 }
 
-function onCategoryFilter(value: string) {
-  table.value?.tableApi?.getColumn('category')?.setFilterValue(value)
-  trackFilters({ category: value })
+// USelect emits the option value as a plain string; the items are built from the typed enums.
+function onFilter(key: Exclude<keyof MessageGroupListFilters, 'search'>, value: string) {
+  emit('update:filters', { [key]: value } as Partial<MessageGroupListFilters>)
+  if (key !== 'visibility') trackFilters({ [key]: value })
 }
 
-function onStatusFilter(value: string) {
-  table.value?.tableApi?.getColumn('status')?.setFilterValue(value)
-  trackFilters({ status: value })
-}
+const paginationSummary = computed(() => {
+  if (!props.meta || props.meta.from === null || props.meta.to === null) return ''
+  return t('pages.message_library.pagination_summary', {
+    from: props.meta.from,
+    to: props.meta.to,
+    total: props.meta.total,
+  })
+})
 </script>
 
 <template>
@@ -247,38 +259,46 @@ function onStatusFilter(value: string) {
   >
     <div class="flex gap-2">
       <UInput
-        :model-value="table?.tableApi?.getColumn('name')?.getFilterValue() as string"
+        :model-value="filters.search"
         class="max-w-xs"
         leading-icon="ph:magnifying-glass-bold"
         :placeholder="t('pages.message_library.search_placeholder')"
         :data-testid="templateListTableTestIds.searchInput"
-        @update:model-value="onSearchInput($event)"
+        @update:model-value="onSearchInput(String($event))"
       />
       <USelect
-        :model-value="table?.tableApi?.getColumn('category')?.getFilterValue() as string"
+        :model-value="filters.category"
         class="max-w-48"
         :placeholder="t('pages.message_library.category_placeholder')"
         :items="categoryItems"
         :data-testid="templateListTableTestIds.categorySelect"
-        @update:model-value="onCategoryFilter($event)"
+        @update:model-value="onFilter('category', $event)"
       />
       <USelect
-        :model-value="table?.tableApi?.getColumn('status')?.getFilterValue() as string"
+        :model-value="filters.status"
         class="max-w-48"
         :placeholder="t('pages.message_library.status_placeholder')"
         :items="statusItems"
         :data-testid="templateListTableTestIds.statusSelect"
-        @update:model-value="onStatusFilter($event)"
+        @update:model-value="onFilter('status', $event)"
+      />
+      <USelect
+        :model-value="filters.product"
+        class="max-w-48"
+        :placeholder="t('pages.message_library.product_placeholder')"
+        :items="productItems"
+        :data-testid="templateListTableTestIds.productSelect"
+        @update:model-value="onFilter('product', $event)"
+      />
+      <USelect
+        v-if="appContext.isAdmin"
+        :model-value="filters.visibility"
+        class="max-w-48"
+        :placeholder="t('pages.message_library.visibility_placeholder')"
+        :items="visibilityItems"
+        :data-testid="templateListTableTestIds.visibilitySelect"
+        @update:model-value="onFilter('visibility', $event)"
       />
-      <!-- <USelectMenu
-            v-if="tagItems.length > 0"
-            v-model="selectedTags"
-            :items="tagItems"
-            multiple
-            class="max-w-48"
-            :placeholder="t('pages.message_library.tags_placeholder')"
-            @update:model-value="table?.tableApi?.getColumn('tags')?.setFilterValue($event)"
-          /> -->
     </div>
 
     <UCard
@@ -295,10 +315,10 @@ function onStatusFilter(value: string) {
           tr: 'hover:bg-muted',
           root: 'overflow-visible static',
         }"
-        :data="filteredMessageGroups"
+        :data="messageGroups"
         :columns="columns"
+        :sorting-options="{ manualSorting: true, enableSortingRemoval: false }"
         sticky
-        ref="table"
         v-model:sorting="sorting"
         :data-testid="templateListTableTestIds.table"
       >
@@ -329,6 +349,16 @@ function onStatusFilter(value: string) {
           />
         </template>
 
+        <template #product-cell="{ row }">
+          <UBadge
+            :label="t(`products.${row.original.product}`)"
+            size="md"
+            color="neutral"
+            variant="outline"
+            :data-testid="`${templateListTableTestIds.rowProductBadge}-${row.original.id}`"
+          />
+        </template>
+
         <template #status-cell="{ row }">
           <StatusCell :items="row.original.messages" />
         </template>
@@ -349,6 +379,24 @@ function onStatusFilter(value: string) {
           />
         </template>
       </UTable>
+
+      <template v-if="meta" #footer>
+        <div class="flex items-center justify-between gap-4">
+          <span
+            class="text-sm text-muted"
+            :data-testid="templateListTableTestIds.paginationSummary"
+          >
+            {{ paginationSummary }}
+          </span>
+          <UPagination
+            :page="page"
+            :total="meta.total"
+            :items-per-page="meta.per_page"
+            :data-testid="templateListTableTestIds.pagination"
+            @update:page="emit('update:page', $event)"
+          />
+        </div>
+      </template>
     </UCard>
   </div>
 </template>

package/app/components/Whatsapp/Preview.vue

@@ -20,6 +20,13 @@ defineOptions({
 const props = defineProps<{
   message: PostEntity<WhatsappMessage>
   messageGroupId: string
+  /**
+   * Parameter values that override the resolved (organization-level) ones,
+   * e.g. what an operator typed in a Message Send Flow. Non-empty values win,
+   * keys not in the map keep the resolved value, an empty string shows the raw
+   * `{{key}}` placeholder (as an empty resolved value always did).
+   */
+  parameters?: Record<string, string>
 }>()
 
 const { data: resolvedParams } = useResolvedParametersQuery(
@@ -28,13 +35,14 @@ const { data: resolvedParams } = useResolvedParametersQuery(
 )
 
 function replaceMentionsWithValues(html: string): string {
-  const dynamicData = resolvedParams.value?.parameters
-  if (!dynamicData) return html
+  const dynamicData = { ...resolvedParams.value?.parameters, ...props.parameters }
 
   let replacedHtml = html
   for (const [key, value] of Object.entries(dynamicData)) {
-    const mentionRegex = new RegExp(`{{${key}}}`, 'g')
-    replacedHtml = replacedHtml.replace(mentionRegex, value || `{{${key}}}`)
+    // Literal match and a replacer function: keys and operator-typed values
+    // must never be read as regex or `$` replacement patterns.
+    const placeholder = `{{${key}}}`
+    replacedHtml = replacedHtml.replaceAll(placeholder, () => value || placeholder)
   }
 
   return replacedHtml

package/app/components/Whatsapp/PreviewPanel.vue

@@ -9,6 +9,8 @@ defineOptions({
 defineProps<{
   message: PostEntity<WhatsappMessage>
   messageGroupId: string
+  /** Forwarded to `WhatsappPreview`: operator-typed values overriding the resolved ones. */
+  parameters?: Record<string, string>
 }>()
 </script>
 
@@ -19,6 +21,10 @@ defineProps<{
       <h3 class="label-lg">{{ $t('common.preview') }}</h3>
     </div>
 
-    <WhatsappPreview :message="message" :message-group-id="messageGroupId" />
+    <WhatsappPreview
+      :message="message"
+      :message-group-id="messageGroupId"
+      :parameters="parameters"
+    />
   </div>
 </template>

package/app/composables/composerContext.ts

@@ -9,18 +9,19 @@ export interface OrganizationData {
 }
 
 export interface ComposerContext {
-  /** @deprecated No longer used — auth is cookie-based via platform layer */
-  authenticationToken?: Ref<string>
   organization_id?: Ref<string>
-  product?: Ref<AppContextConfig['product']>
-  strategy?: Ref<AppContextConfig['strategy']>
+  /** The Product the host embeds the composer in (ADR 0011). Required. */
+  product: Ref<AppContextConfig['product']>
   channels?: Ref<AppContextConfig['channels']>
   languages?: Ref<string[]>
   mainLanguage?: Ref<string>
-  dinamicValues?: Ref<Array<{ value: string; label: string }>>
   default_tags?: Ref<string[]>
+  /**
+   * The WABA the Host works on. Only a preselection: when the user has to
+   * pick the WABA of a Message Group, this one is proposed if it is one of
+   * the Organization's (ADR 0015).
+   */
   metaWabaId?: Ref<string>
-  metaAccessToken?: Ref<string>
   isAdmin?: Ref<boolean>
   organizationData?: Ref<OrganizationData>
 }
@@ -33,7 +34,8 @@ export function defineComposerContext(context: ComposerContext): void {
   useNuxtApp().vueApp.provide(COMPOSER_CONTEXT_KEY, context)
 }
 
-const SERVER_FALLBACK: ComposerContext = {}
+// Server render never reads the context; the store reads every field defensively.
+const SERVER_FALLBACK = {} as ComposerContext
 
 export function useComposerContext(): ComposerContext {
   if (import.meta.server) return SERVER_FALLBACK

package/app/composables/useEffectiveOrganization.ts

@@ -0,0 +1,34 @@
+import type { MaybeRefOrGetter } from 'vue'
+
+/**
+ * Read-only view of the Organization the layer is working with, for the Host:
+ * e.g. to supply per-Organization `organizationData`. On an editor or preview
+ * page it is the Organization of the loaded Message Group, whatever the
+ * selector says. `organizationId` is `null` until `status` is `resolved`.
+ */
+export function useEffectiveOrganization() {
+  const { organizationId, status } = storeToRefs(useEffectiveOrganizationStore())
+  return { organizationId, status }
+}
+
+/**
+ * Makes the Organization of the resource a page views or edits the Effective
+ * Organization for as long as the calling component lives, so every dependent
+ * query (Brands, images, dynamic values) and everything the page creates
+ * follows the resource, not the selector (ADR 0014). Pass the Organization
+ * of the loaded resource; nothing is claimed while it is still loading.
+ */
+export function useResourceOrganization(
+  organizationId: MaybeRefOrGetter<string | null | undefined>,
+) {
+  const store = useEffectiveOrganizationStore()
+  const claimant = Symbol('resource-organization')
+
+  // Sync: whatever the same load triggers next must already see the claim.
+  watch(
+    () => toValue(organizationId),
+    (id) => store.claimResource(claimant, id),
+    { immediate: true, flush: 'sync' },
+  )
+  onScopeDispose(() => store.releaseResource(claimant))
+}