@dev.smartpricing/message-composer-layer 4.5.1-next.1 → 4.5.1-next.3

package/README.md

@@ -85,14 +85,14 @@ 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 have to 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 it is the `metaWabaId` the Host passed, when that is one of them, and otherwise the user picks one when requesting approval. `metaWabaId` in the context is optional.
 
 ### Upgrading to 4.5.0
 
 Nothing is required: a Host that keeps passing `organization_id` and `metaWabaId` behaves as before.
 
 - **Removed** from `ComposerContext` and from `AppContextConfig` in utils (no code read them): `authenticationToken`, `strategy`, `metaAccessToken`, `dinamicValues`. Remove them from the `defineComposerContext()` call. The utils types `AppContextState` and `ContextSource` are gone too.
-- **Changed**: `metaWabaId` no longer decides where a WhatsApp submission goes and is no longer required for the WhatsApp channel; it preselects the WABA when the user has to pick one.
+- **Changed**: `metaWabaId` no longer decides where a WhatsApp submission goes and is no longer required for the WhatsApp channel; with several WABAs on the Organization it names the one a new Message Group is submitted to, and the user is asked only without it.
 - **Deprecated**, removed in 5.0.0: the `sm-organization-id` and `x-meta-waba-id` request headers. The layer no longer sends them; the backend still accepts them from Hosts on an older layer.
 - **New**: `organization_id` is optional, the Organization selector, `useEffectiveOrganization()`, and the `organizationId` and `wabaId` props of the Message Send Flow.
 

package/app/components/Composer/WabaSelectModal.vue

@@ -8,13 +8,11 @@ import type { OrganizationWaba } from '@dev.smartpricing/message-composer-utils/
  */
 const props = defineProps<{
   wabas: OrganizationWaba[]
-  /** The Host's WABA, already checked to be one of `wabas`. */
-  preselected?: string
 }>()
 
 const emit = defineEmits<{ close: [wabaId?: string] }>()
 
-const selected = ref<string | undefined>(props.preselected)
+const selected = ref<string>()
 
 const items = computed(() =>
   props.wabas.map((waba) => ({

package/app/components/TemplateList/BaseTable.vue

@@ -5,6 +5,7 @@ import {
   MESSAGE_GROUP_PRODUCTS,
   MESSAGE_STATUS,
   type MessageGroupListSort,
+  type MessageGroupProduct,
   type MessageGroupWithMessageSummary,
   type PaginationMeta,
   type RenderType,
@@ -203,8 +204,17 @@ const categoryItems = computed(() =>
   toSelectItems(MESSAGE_GROUP_CATEGORIES, 'categories', t('common.all')),
 )
 const statusItems = computed(() => toSelectItems(MESSAGE_STATUS, 'status', t('common.all')))
+// Only the Products that have Message Groups today. The Host's own Product
+// is always offered, since the filter starts on it.
+const PRODUCTS_WITH_MESSAGES: readonly MessageGroupProduct[] = ['connect', 'chat']
 const productItems = computed(() =>
-  toSelectItems(MESSAGE_GROUP_PRODUCTS, 'products', t('pages.message_library.all_products')),
+  toSelectItems(
+    MESSAGE_GROUP_PRODUCTS.filter(
+      (product) => PRODUCTS_WITH_MESSAGES.includes(product) || product === appContext.product,
+    ),
+    'products',
+    t('pages.message_library.all_products'),
+  ),
 )
 
 const visibilityItems = computed(() =>
@@ -322,6 +332,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/composables/composerContext.ts

@@ -17,9 +17,9 @@ export interface ComposerContext {
   mainLanguage?: Ref<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).
+   * The WABA the Host works on. A new Message Group is submitted to it and
+   * the user is not asked, as long as it is one of the Organization's
+   * (ADR 0015). Without it the user picks when there are several.
    */
   metaWabaId?: Ref<string>
   isAdmin?: Ref<boolean>

package/app/composables/useMessageGroupWaba.ts

@@ -43,9 +43,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
+   * The WABA to name in a submission. At the first submission of a Message
+   * Group whose Organization has several WABAs, it is the Host's when the
+   * Host passed one of them, otherwise the user is asked. In every other
+   * case none is named 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.
    */
@@ -55,10 +56,12 @@ export function useMessageGroupWaba(storedWabaId: MaybeRefOrGetter<string | null
     const candidates = wabas.value
     if (!candidates || candidates.length < 2) return {}
 
-    const preselected = candidates.some((candidate) => candidate.id === metaWabaId.value)
-      ? metaWabaId.value
-      : undefined
-    const chosen = await modal.open({ wabas: candidates, preselected }).result
+    const hostWabaId = metaWabaId.value
+    if (hostWabaId && candidates.some((candidate) => candidate.id === hostWabaId)) {
+      return { wabaId: hostWabaId }
+    }
+
+    const chosen = await modal.open({ wabas: candidates }).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

@@ -23,7 +23,7 @@ export const useAppContextStore = defineStore('appContext', () => {
   const mainLanguage = computed(() => ctx.mainLanguage?.value ?? 'en')
   const default_tags = computed<string[]>(() => ctx.default_tags?.value ?? [])
   const isAdmin = computed(() => ctx.isAdmin?.value ?? false)
-  // The Host's preselection among the Organization's WABAs (ADR 0015).
+  // The WABA the Host works on: the target of a new Message Group (ADR 0015).
   const metaWabaId = computed(() => ctx.metaWabaId?.value || undefined)
 
   // Sync i18n locale when mainLanguage changes

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

@@ -825,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

@@ -814,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

@@ -823,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

@@ -827,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

@@ -820,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.1",
+  "version": "4.5.1-next.3",
   "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.1"
+    "@dev.smartpricing/message-composer-utils": "4.5.1-next.3"
   },
   "devDependencies": {
     "@dev.smartpricing/platform-layer": "^0.0.23",