@dev.smartpricing/message-composer-layer 4.5.1-next.0 → 4.5.1-next.2

package/README.md

@@ -85,7 +85,7 @@ watch(
 )
 ```
 
-**WABA.** The Host does not supply the WABA: the WABAs follow the Organization and the backend resolves them (ADR [0015](../../docs/adr/0015-message-group-waba-fixed-at-first-submission.md)). WhatsApp is configured when the Host's `channels` include `whatsapp` and the Organization has at least one WABA. A Message Group is submitted to one WABA, chosen at its first submission and fixed from then on; with several WABAs the user picks one when requesting approval. `metaWabaId` in the context is optional and is only the preselection in that picker.
+**WABA.** The Host does not supply the WABA: the WABAs follow the Organization and the backend resolves them (ADR [0015](../../docs/adr/0015-message-group-waba-fixed-at-first-submission.md)). WhatsApp is configured when the Host's `channels` include `whatsapp` and the Organization has at least one WABA. A Message Group is submitted to one WABA, chosen at its first submission and fixed from then on; with several WABAs the user picks one when requesting approval. `metaWabaId` in the context is optional and is only the preselection in that picker. A Host that sends from one WABA only also sets `metaWabaLocked: ref(true)`: a new Message Group is then submitted to `metaWabaId` without asking, as long as it is one of the Organization's WABAs.
 
 ### Upgrading to 4.5.0
 

package/app/components/Editor/RichTextEditor.vue

@@ -13,6 +13,7 @@ import {
   convertToWhatsappHeaderText,
   convertToWhatsappMarkdown,
   getTipTapExtensions,
+  isWhatsappHeaderMultiline,
   sanitizeContent,
 } from '@dev.smartpricing/message-composer-utils/utils'
 import EmojiPickerButton from '../Common/EmojiPickerButton.vue'
@@ -278,14 +279,21 @@ const toolbarItems = computed(() => {
 // WhatsApp markdown-aware character count
 // Meta counts the final markdown output (with *bold*, _italic_ marks),
 // so we must display that count instead of TipTap's document-model count.
-const isWhatsapp = computed(() => props.preset === 'whatsapp' || props.preset === 'whatsapp-header')
+const isWhatsappHeader = computed(() => props.preset === 'whatsapp-header')
+const isWhatsapp = computed(() => props.preset === 'whatsapp' || isWhatsappHeader.value)
 const whatsappCharCount = computed(() => {
   if (!isWhatsapp.value || !props.characterLimit || !text.value) return 0
-  return props.preset === 'whatsapp-header'
+  return isWhatsappHeader.value
     ? convertToWhatsappHeaderText(text.value).length
     : convertToWhatsappMarkdown(text.value).length
 })
 
+// A multi-line header is still saved (its lines are joined into one when
+// sent to Meta), so the editor warns instead of raising a validation error.
+const hasHeaderLineBreaks = computed(
+  () => isWhatsappHeader.value && isWhatsappHeaderMultiline(text.value),
+)
+
 // Handlers
 function onSelectEmoji(emoji: EmojiExt) {
   editor.value?.commands.insertContent(emoji.i)
@@ -491,6 +499,10 @@ defineExpose({
       </span>
     </p>
 
+    <p v-if="hasHeaderLineBreaks" class="paragraph-xs text-warning-700 pt-1.5 px-1">
+      {{ $t('editor.validation.header_line_breaks') }}
+    </p>
+
     <!-- AI Generate slideover -->
   </div>
 </template>

package/app/components/TemplateList/BaseTable.vue

@@ -322,6 +322,17 @@ const paginationSummary = computed(() => {
         v-model:sorting="sorting"
         :data-testid="templateListTableTestIds.table"
       >
+        <!-- Shown instead of the "no data" row while a list with no rows is loading. -->
+        <template #loading>
+          <div
+            class="flex items-center justify-center gap-2 text-muted"
+            :data-testid="templateListTableTestIds.loading"
+          >
+            <UIcon name="ph:circle-notch-bold" class="size-4 animate-spin" />
+            <span>{{ t('pages.message_library.loading') }}</span>
+          </div>
+        </template>
+
         <template #name-cell="{ row }">
           <div
             class="flex items-center gap-2"

package/app/components/Whatsapp/Preview.vue

@@ -4,12 +4,10 @@ import type {
   WaButtonTypeV1,
   WhatsappMessage,
 } from '@dev.smartpricing/message-composer-utils/types'
-import { generateHTML } from '@tiptap/vue-3'
 import { computed } from 'vue'
 import {
+  convertToWhatsappHeaderText,
   generateWhatsappHtml,
-  getTipTapExtensions,
-  sanitizeContent,
 } from '@dev.smartpricing/message-composer-utils/utils'
 import { useResolvedParametersQuery } from '~/queries/compilation'
 
@@ -57,15 +55,10 @@ const bodyHtml = computed(() => {
   return replaceMentionsWithValues(html)
 })
 
-const headerHtml = computed(() => {
+// Plain text, exactly as Meta receives it
+const headerText = computed(() => {
   if (props.message.body.header.type !== 'text') return ''
-  if (!props.message.body.header.content) return ''
-  const extensions = getTipTapExtensions({ preset: 'whatsapp-header' })
-  const html = generateHTML(
-    sanitizeContent(props.message.body.header.content, extensions),
-    extensions,
-  ).replaceAll('<p></p>', '<p>&nbsp;</p>')
-  return replaceMentionsWithValues(html)
+  return replaceMentionsWithValues(convertToWhatsappHeaderText(props.message.body.header.content))
 })
 
 const currentTime = computed(() => {
@@ -131,7 +124,7 @@ const getIcon = (type: WaButtonTypeV1) => {
                     v-if="message.body.header.type === 'text'"
                     class="text-sm text-primary-950 break-all"
                   >
-                    <p v-html="headerHtml" />
+                    <p>{{ headerText }}</p>
                   </div>
                   <div v-else-if="message.body.header.type === 'image'" class="mb-2">
                     <img

package/app/components/Whatsapp/Translator/Header.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import type { JSONContent } from '@tiptap/vue-3'
-import { generateHTML } from '@tiptap/vue-3'
-import {
-  getTipTapExtensions,
-  sanitizeContent,
-} from '@dev.smartpricing/message-composer-utils/utils'
+import { convertToWhatsappHeaderText } from '@dev.smartpricing/message-composer-utils/utils'
 import RichTextEditor from '@/components/Editor/RichTextEditor.vue'
 import { useAppContextStore } from '@/stores/appContext'
 import { WA_HEADER_TEXT_MAX_LENGTH } from '@dev.smartpricing/message-composer-utils/types'
@@ -22,26 +18,15 @@ const targetContent = defineModel<JSONContent | undefined>({
 })
 
 const appContext = useAppContextStore()
-
-// Generate HTML for preview of base language with rich text support
-function generatePreviewHtml(content: JSONContent | undefined): string {
-  if (!content) return ''
-  const extensions = getTipTapExtensions({ preset: 'whatsapp-header' })
-  return generateHTML(sanitizeContent(content, extensions), extensions).replaceAll(
-    '<p></p>',
-    '<p>&nbsp;</p>',
-  )
-}
 </script>
 
 <template>
   <div class="flex gap-8 items-start" :data-testid="whatsappTranslatorHeaderTestIds.container">
     <!-- Base language preview (read-only) -->
     <div class="flex-1 min-w-0" :data-testid="whatsappTranslatorHeaderTestIds.basePreview">
-      <div
-        class="paragraph-sm text-primary-700 break-words"
-        v-html="generatePreviewHtml(baseContent)"
-      />
+      <div class="paragraph-sm text-primary-700 break-words">
+        {{ convertToWhatsappHeaderText(baseContent) }}
+      </div>
     </div>
 
     <!-- Translation editor (editable) -->

package/app/composables/composerContext.ts

@@ -22,6 +22,12 @@ export interface ComposerContext {
    * the Organization's (ADR 0015).
    */
   metaWabaId?: Ref<string>
+  /**
+   * The Host works on `metaWabaId` only (Smartconnect): a new Message Group
+   * is submitted to it and the user is not asked. Applies while `metaWabaId`
+   * is one of the Organization's WABAs; otherwise the choice stays the user's.
+   */
+  metaWabaLocked?: Ref<boolean>
   isAdmin?: Ref<boolean>
   organizationData?: Ref<OrganizationData>
 }

package/app/composables/useMessageGroupWaba.ts

@@ -9,7 +9,7 @@ import WabaSelectModal from '~/components/Composer/WabaSelectModal.vue'
  */
 export function useMessageGroupWaba(storedWabaId: MaybeRefOrGetter<string | null | undefined>) {
   const { data: wabas, refresh } = useOrganizationWabasQuery()
-  const { metaWabaId } = storeToRefs(useAppContextStore())
+  const { metaWabaId, metaWabaLocked } = storeToRefs(useAppContextStore())
   const modal = useOverlay().create(WabaSelectModal)
 
   // A submission of one language does not read the Message Group again: its
@@ -45,9 +45,10 @@ export function useMessageGroupWaba(storedWabaId: MaybeRefOrGetter<string | null
   /**
    * The WABA to name in a submission. Asks the user only at the first
    * submission of a Message Group whose Organization has several WABAs;
-   * otherwise names none and the backend resolves it. A lookup that has not
-   * answered yet is waited for; one that failed leaves it to the backend.
-   * Returns null when the user gives up.
+   * otherwise names none and the backend resolves it. A Host that works on
+   * its own WABA only (`metaWabaLocked`) is not asked: that WABA is named.
+   * A lookup that has not answered yet is waited for; one that failed leaves
+   * it to the backend. Returns null when the user gives up.
    */
   async function chooseWaba(): Promise<{ wabaId?: string } | null> {
     if (wabaId.value) return {}
@@ -58,6 +59,8 @@ export function useMessageGroupWaba(storedWabaId: MaybeRefOrGetter<string | null
     const preselected = candidates.some((candidate) => candidate.id === metaWabaId.value)
       ? metaWabaId.value
       : undefined
+    if (preselected && metaWabaLocked.value) return { wabaId: preselected }
+
     const chosen = await modal.open({ wabas: candidates, preselected }).result
 
     return chosen ? { wabaId: chosen } : null

package/app/queries/messageGroups.ts

@@ -56,7 +56,9 @@ export function useMessageGroupListQuery(
     // Never across Organizations: a switch must not show the previous one's rows.
     placeholderData: (previousData, previousEntry) =>
       previousEntry?.key.at(-1) === listOrganizationId() ? previousData : undefined,
-    ...enabledOption(queryOptions.enabled),
+    // Until an Organization is resolved the list waits (pending, so callers
+    // show it as loading) instead of failing into an empty table.
+    enabled: () => toValue(queryOptions.enabled ?? true) && !!listOrganizationId(),
   })
 }
 

package/app/stores/appContext.ts

@@ -25,6 +25,8 @@ export const useAppContextStore = defineStore('appContext', () => {
   const isAdmin = computed(() => ctx.isAdmin?.value ?? false)
   // The Host's preselection among the Organization's WABAs (ADR 0015).
   const metaWabaId = computed(() => ctx.metaWabaId?.value || undefined)
+  // The Host's WABA is the only one it works on: no choice is offered.
+  const metaWabaLocked = computed(() => ctx.metaWabaLocked?.value ?? false)
 
   // Sync i18n locale when mainLanguage changes
   watch(
@@ -58,6 +60,7 @@ export const useAppContextStore = defineStore('appContext', () => {
     default_tags,
     isAdmin,
     metaWabaId,
+    metaWabaLocked,
 
     validationErrors,
   }

package/app/utils/testIds.const.ts

@@ -519,6 +519,7 @@ export const templateListTableTestIds = {
   paginationSummary: 'template-list-table-pagination-summary',
   card: 'template-list-table-card',
   table: 'template-list-table-table',
+  loading: 'template-list-table-loading',
   rowName: 'template-list-table-row-name',
   rowInternalBadge: 'template-list-table-row-internal-badge',
   rowCategoryBadge: 'template-list-table-row-category-badge',

package/i18n/locales/de.ts

@@ -512,6 +512,8 @@ export default {
     },
     validation: {
       character_limit: 'Dieses Feld hat eine Zeichenbegrenzung.',
+      header_line_breaks:
+        'Zeilenumbrüche werden in der Kopfzeile nicht unterstützt: Die Zeilen werden zu einer zusammengefügt.',
       error: {
         atLeastOneBlockRequired: 'Mindestens ein Inhaltsblock ist erforderlich',
         bodyEmpty: 'Nachrichtentext darf nicht leer sein',
@@ -823,6 +825,7 @@ export default {
         status: 'Status',
         updated_at: 'Aktualisiert am',
       },
+      loading: 'Nachrichten werden geladen...',
       pagination_summary: '{from}–{to} von {total}',
       product_placeholder: 'Produkt auswählen',
       render_type_placeholder: 'Render-Typ auswählen',

package/i18n/locales/en.ts

@@ -506,6 +506,8 @@ export default {
     },
     validation: {
       character_limit: 'This field has a character limit.',
+      header_line_breaks:
+        "Line breaks aren't supported in the header: the lines will be joined into one.",
       error: {
         atLeastOneBlockRequired: 'At least one content block is required',
         bodyEmpty: 'Message body cannot be empty',
@@ -812,6 +814,7 @@ export default {
         status: 'Status',
         updated_at: 'Updated at',
       },
+      loading: 'Loading messages...',
       pagination_summary: '{from}–{to} of {total}',
       product_placeholder: 'Select product',
       render_type_placeholder: 'Select render type',

package/i18n/locales/es.ts

@@ -508,6 +508,8 @@ export default {
     },
     validation: {
       character_limit: 'Este campo tiene un límite de caracteres.',
+      header_line_breaks:
+        'Los saltos de línea no se admiten en el encabezado: las líneas se unirán en una sola.',
       error: {
         atLeastOneBlockRequired: 'Se requiere al menos un bloque de contenido',
         bodyEmpty: 'El cuerpo del mensaje no puede estar vacío',
@@ -821,6 +823,7 @@ export default {
         status: 'Estado',
         updated_at: 'Actualizado el',
       },
+      loading: 'Cargando mensajes...',
       pagination_summary: '{from}–{to} de {total}',
       product_placeholder: 'Seleccionar producto',
       render_type_placeholder: 'Seleccionar tipo de renderizado',

package/i18n/locales/fr.ts

@@ -509,6 +509,8 @@ export default {
     },
     validation: {
       character_limit: 'Ce champ a une limite de caractères.',
+      header_line_breaks:
+        "Les sauts de ligne ne sont pas pris en charge dans l'en-tête : les lignes seront fusionnées en une seule.",
       error: {
         atLeastOneBlockRequired: 'Au moins un bloc de contenu est requis',
         bodyEmpty: 'Le corps du message ne peut pas être vide',
@@ -825,6 +827,7 @@ export default {
         status: 'Statut',
         updated_at: 'Mis à jour le',
       },
+      loading: 'Chargement des messages...',
       pagination_summary: '{from}–{to} sur {total}',
       product_placeholder: 'Sélectionner un produit',
       render_type_placeholder: 'Sélectionner le type de rendu',

package/i18n/locales/it.ts

@@ -507,6 +507,8 @@ export default {
     },
     validation: {
       character_limit: 'Questo campo ha un limite di caratteri.',
+      header_line_breaks:
+        "Gli a capo non sono supportati nell'intestazione: le righe verranno unite in una sola.",
       error: {
         atLeastOneBlockRequired: 'È obbligatorio almeno un blocco di contenuto',
         bodyEmpty: 'Il corpo del messaggio non può essere vuoto',
@@ -818,6 +820,7 @@ export default {
         status: 'Stato',
         updated_at: 'Aggiornato il',
       },
+      loading: 'Caricamento dei messaggi...',
       pagination_summary: '{from}–{to} di {total}',
       product_placeholder: 'Seleziona prodotto',
       render_type_placeholder: 'Seleziona tipo di rendering',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev.smartpricing/message-composer-layer",
-  "version": "4.5.1-next.0",
+  "version": "4.5.1-next.2",
   "private": false,
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -35,7 +35,7 @@
     "vue-router": "^5.0.7",
     "vue3-emoji-picker": "^1.1.8",
     "zod": "^4.4.3",
-    "@dev.smartpricing/message-composer-utils": "4.5.1-next.0"
+    "@dev.smartpricing/message-composer-utils": "4.5.1-next.2"
   },
   "devDependencies": {
     "@dev.smartpricing/platform-layer": "^0.0.23",