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

package/README.md

@@ -38,11 +38,9 @@ The layer is published on the private Smartpricing npm registry together with `@
    <script setup lang="ts">
    defineComposerContext({
      product: ref('chat'), // 'connect' | 'chat' | 'pms' | 'pricing'
-     organization_id: useAuth().organizationId,
      channels: ref(['whatsapp']),
      mainLanguage: ref('it'),
-     metaWabaId: useAuth().wabaId, // required for the whatsapp channel
-     metaAccessToken: useAuth().metaToken, // required for the whatsapp channel
+     // organization_id: useAuth().organizationId, // only when the Host works on one Organization
    })
 
    useNuxtApp().hook('composer:auth-error', () => {
@@ -53,10 +51,51 @@ The layer is published on the private Smartpricing npm registry together with `@
 
    Auth is cookie-based through platform-layer. The full `ComposerContext` interface lives in `app/composables/composerContext.ts`; the design and the parent/layer contract are in [`docs/nuxt-layer-design.md`](../../docs/nuxt-layer-design.md).
 
+   See "Organization and WABA" below for what `organization_id` and `metaWabaId` do.
+
 4. Tracking is opt-in: set `composer.tracking: true` in the host's `app.config.ts` to have the layer post its events to `POST /tracking/event`.
 
 The layer's pages are mounted at root (`/`, `/template/...`, `/preview/...`, `/brands`, `/images`). Remap them with `pages:extend` if the host already owns those routes.
 
+## Organization and WABA
+
+No request depends on an ambient Organization: every request names the one it is for (ADR [0014](../../docs/adr/0014-organization-explicit-on-every-request.md)). The Host no longer has to know it.
+
+**Organization.** `organization_id` is optional in the context.
+
+- **Given**: the layer works on that Organization and shows no selector. Passing the key is what counts, not its value: it may arrive late (a ref filled after the first render), and until then the layer waits (`status` is `resolving`) and sends no resource request, so a Host does not need to hold the composer back until its Tenant is loaded. A Host that passes the key and never fills it leaves the composer waiting.
+- **Omitted** (the key is not passed at all): the layer asks the backend which Organizations the user can reach (`GET /organizations`). With one, it uses it and looks as before. With several, the Message Group, Brands and images pages show an **Organization selector** in their header: it filters what is listed and decides where new resources are created. The choice is remembered in the browser's local storage and checked against the reachable list on load. There is no "all Organizations" view.
+
+On an editor or preview page the Organization is always the one of the Message Group on screen, whatever the selector says, so a link to a Message Group of any Organization the user can reach works.
+
+**Effective Organization.** `useEffectiveOrganization()` (auto-imported) is the Host's read-only view of the Organization the layer is working on: `organizationId` (`null` until resolved) and `status` (`resolving` | `resolved` | `failed` | `none`). Use it for anything the Host supplies per Organization, such as `organizationData` (the test-email sender addresses and accommodation name):
+
+```ts
+const organizationData = ref<OrganizationData>({ senderEmails: [] })
+defineComposerContext({ product: ref('chat'), organizationData })
+
+// After `defineComposerContext()`: the composable reads the context.
+const { organizationId } = useEffectiveOrganization()
+watch(
+  organizationId,
+  async (id) => {
+    organizationData.value = id ? await loadSenders(id) : { senderEmails: [] }
+  },
+  { immediate: true },
+)
+```
+
+**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.
+
+### 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.
+- **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.
+
 ## Message Send Flow
 
 `MessageSendFlow` walks an operator from "which Message" to "here is what to send", in two steps inside a container the host owns (Smartchat: a modal):
@@ -68,6 +107,8 @@ The preview follows every step in a right panel: the picked Message as the guest
 
 Back and Next move between steps, Cancel is always available, Confirm only on Parameters. The action bar renders under the steps, or wherever `actionsTo` points (a modal footer). The component has no outer padding: the host's container pads it. The component owns no overlay and no send, and it keeps its state after `compiled`: closing the container is the host's decision. There is no reset API; remount it (`:key`) to start over.
 
+The flow works on one Organization and never shows a selector: the `organizationId` prop when the Host gives one (Smartchat: the conversation's), otherwise the one the layer resolved, which is also the one the page's selector is on. With `organizationId` the flow lists and compiles that Organization's Sendable Message Groups whatever the rest of the page is working on. With `wabaId` it offers only the WhatsApp Message Groups on the WABA the Host sends from.
+
 The `/compile` contract (request, response with `message`, error codes) is documented in [`docs/compile-and-send.md`](../../docs/compile-and-send.md).
 
 ### Mount
@@ -90,6 +131,8 @@ function onCompiled(message: SendableMessage) {
     <template #body>
       <MessageSendFlow
         v-model:message-group-id="groupId"
+        :organization-id="conversation.organizationId"
+        :waba-id="conversation.wabaId"
         language="it"
         :parameters="{ guest_name: 'Mario', guest_fullname: 'Mario Rossi' }"
         actions-to="#send-flow-actions"
@@ -115,6 +158,8 @@ function onCompiled(message: SendableMessage) {
 | `language`       | `string`                 | `undefined`     | Preferred language (see the language rule).                                                                                                                  |
 | `parameters`     | `Record<string, string>` | `undefined`     | Editable prefill of the parameter inputs. Keys the chosen Message does not need are ignored.                                                                 |
 | `brandId`        | `string`                 | `undefined`     | Brand override forwarded to `/compile` as `brand_id`; defaults to the group's brand.                                                                         |
+| `organizationId` | `string`                 | `undefined`     | The Organization the flow works on. Unset, the one the layer resolved. A preselected group of another Organization raises `NOT_OFFERED`.                     |
+| `wabaId`         | `string`                 | `undefined`     | The WABA the Host sends from: with `whatsapp_v1`, only Message Groups on it are offered. Unset, the groups of every WABA. Ignored for `email_v1`.            |
 | `actionsTo`      | `string \| HTMLElement`  | `undefined`     | Where the Cancel/Back/Next/Confirm bar renders, e.g. a `UModal` footer element. Unset, it renders under the steps.                                           |
 
 ### Emits
@@ -132,6 +177,7 @@ Types: `SendableMessage` from `@dev.smartpricing/message-composer-utils/types`;
 | Code                     | Raised by | Meaning                                                                                                                             | `details`                     |
 | ------------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
 | `NOT_SENDABLE`           | layer     | The preselected or picked group has no approved Message. The picker stays usable; the alert clears once a Sendable group is picked. | none                          |
+| `NOT_OFFERED`            | layer     | The preselected group belongs to another Organization than `organizationId`, or is not on `wabaId`. The picker stays usable.        | none                          |
 | `MISSING_PARAMETERS`     | layer     | Confirm pressed with an empty required parameter (checked client-side before calling `/compile`).                                   | `{ missing: string[] }`       |
 | `MISSING_PARAMETERS`     | backend   | `/compile` reported a required key as absent.                                                                                       | the backend error body        |
 | `TEMPLATE_NOT_SUBMITTED` | backend   | The WhatsApp template was never submitted to Meta.                                                                                  | the backend error body        |
@@ -146,7 +192,7 @@ The language selected in step 1 is the `language` prop when that Message is appr
 
 ### Reused blocks and their new props
 
-- `MessageGroupSelect` (auto-import `CommonMessageGroupSelect`) gained `eligibility?: 'active' | 'sendable'`. `active` (default, the composer's own picker) selects groups whose every Message is approved; `sendable` selects groups with at least one approved Message. The disabled tooltip and the "hide inactive" filter follow the mode. The send flow uses `sendable`. Details in [`docs/message-group-select-migration.md`](../../docs/message-group-select-migration.md).
+- `MessageGroupSelect` (auto-import `CommonMessageGroupSelect`) gained `eligibility?: 'active' | 'sendable'`. `active` (default, the composer's own picker) selects groups whose every Message is approved; `sendable` selects groups with at least one approved Message. The disabled tooltip and the "hide inactive" filter follow the mode. The send flow uses `sendable`. It also takes `organizationId` (list that Organization instead of the resolved one) and `wabaId` (with `renderType="whatsapp_v1"`, only the groups on that WABA). Details in [`docs/message-group-select-migration.md`](../../docs/message-group-select-migration.md).
 - `WhatsappPreview` gained `parameters?: Record<string, string>`: non-empty values override the organization-level resolved values, keys not in the map keep the resolved mock, an empty string shows the raw `{{key}}` placeholder.
 
 ### Exported blocks
@@ -189,7 +235,7 @@ With tracking enabled the flow reports `send_flow.confirm` (`message_name`, `mes
 
 ### Dev harness
 
-`apps/frontend` (this monorepo's standalone host) has a permanent `/debug/send-flow` page that plays the host: preselect, preferred language, prefill JSON, brand id, inline or modal container, remount, and a log of every emit.
+`apps/frontend` (this monorepo's standalone host) has a permanent `/debug/send-flow` page that plays the host: preselect, preferred language, prefill JSON, brand id, the flow's own Organization and WABA, inline or modal container, remount, and a log of every emit.
 
 ## Development
 

package/app/api/brands.ts

@@ -14,19 +14,27 @@ import { apiClient } from './client'
 export type BrandWithProperties = BrandFromDb & { properties: BrandProperty[] }
 export type BrandCreateResponse = BrandFromDb & { brand_count: number }
 export type BrandDeleteResponse = { brand_count: number }
+export type BrandPreviewRequest = {
+  message: PostEntity<EmailMessage>
+  parameters?: Record<string, unknown>
+  brand?: BrandCascadeData | undefined
+}
 
 export const brandsApi = {
-  getAll: (options?: { sort_by?: 'created_at' | 'name'; direction?: 'asc' | 'desc' }) => {
-    const params = new URLSearchParams()
-    if (options?.sort_by) params.set('sort_by', options.sort_by)
-    if (options?.direction) params.set('direction', options.direction)
-    const query = params.size ? `?${params.toString()}` : ''
-    return apiClient<BrandWithProperties[]>(`/brands${query}`)
+  getAll: (options: {
+    organization_id: string
+    sort_by?: 'created_at' | 'name'
+    direction?: 'asc' | 'desc'
+  }) => {
+    const params = new URLSearchParams({ organization_id: options.organization_id })
+    if (options.sort_by) params.set('sort_by', options.sort_by)
+    if (options.direction) params.set('direction', options.direction)
+    return apiClient<BrandWithProperties[]>(`/brands?${params.toString()}`)
   },
 
   getById: (id: string) => apiClient<BrandWithProperties>(`/brands/${id}`),
 
-  create: (data: BrandCreateBody) =>
+  create: (data: BrandCreateBody & { organization_id: string }) =>
     apiClient<BrandCreateResponse>('/brands', {
       method: 'POST',
       body: data,
@@ -43,11 +51,7 @@ export const brandsApi = {
 
   delete: (id: string) => apiClient<BrandDeleteResponse>(`/brands/${id}`, { method: 'DELETE' }),
 
-  preview: (data: {
-    message: PostEntity<EmailMessage>
-    parameters?: Record<string, unknown>
-    brand?: BrandCascadeData | undefined
-  }) =>
+  preview: (data: BrandPreviewRequest & { organization_id: string }) =>
     apiClient<CompileEmailResponse>('/message-groups/preview', {
       method: 'POST',
       body: data,
@@ -55,5 +59,8 @@ export const brandsApi = {
 }
 
 export const propertiesApi = {
-  getAll: () => apiClient<Property[]>('/properties'),
+  getAll: (organizationId: string) =>
+    apiClient<Property[]>(
+      `/properties?${new URLSearchParams({ organization_id: organizationId })}`,
+    ),
 }

package/app/api/client.ts

@@ -33,15 +33,12 @@ export const apiClient = createApiClient({
       useNuxtApp().callHook('composer:auth-error', { statusCode: 401 })
     },
   },
+  // No Organization header: every request names its Organization itself, in
+  // the query, in the body or through the resource it acts on (ADR 0014).
+  // No WABA header either: a submission names its WABA in the body (ADR 0015).
   onRequest({ options }) {
     const store = useAppContextStore()
 
-    if (store.organization_id) {
-      options.headers.set('sm-organization-id', store.organization_id)
-    }
-    if (store.metaWabaId) {
-      options.headers.set('x-meta-waba-id', store.metaWabaId)
-    }
     if (store.product) {
       options.headers.set('sm-product', store.product)
     }

package/app/api/dynamicValues.ts

@@ -5,10 +5,11 @@ import type {
 import { apiClient } from './client'
 
 export const dynamicValuesApi = {
-  get: (product: MessageGroupProduct, language: string) => {
+  get: (product: MessageGroupProduct, language: string, organizationId: string) => {
     const params = new URLSearchParams()
     params.set('product', product)
     params.set('language', language)
+    params.set('organization_id', organizationId)
     return apiClient<DynamicValuesResponse>(`/dynamic-values?${params.toString()}`)
   },
 }

package/app/api/media.ts

@@ -2,12 +2,15 @@ import type { MediaFromDb } from '@dev.smartpricing/message-composer-utils/types
 import { apiClient } from './client'
 
 export const mediaApi = {
-  list: () => apiClient<MediaFromDb[]>('/media'),
+  list: (organizationId: string) =>
+    apiClient<MediaFromDb[]>(`/media?${new URLSearchParams({ organization_id: organizationId })}`),
 
-  upload: (file: File) => {
+  upload: (file: File, organizationId: string) => {
     const formData = new FormData()
-    formData.append('file', file)
+    // Before the file: the backend reads only the fields that precede it.
+    formData.append('organization_id', organizationId)
     formData.append('fileName', file.name)
+    formData.append('file', file)
     return apiClient<MediaFromDb>('/media/upload', {
       method: 'POST',
       body: formData,

package/app/api/messageGroups.ts

@@ -51,10 +51,14 @@ export const messageGroupsApi = {
   delete: (id: string) => apiClient(`/message-groups/${id}`, { method: 'DELETE' }),
 
   publish: (id: string) =>
-    apiClient<MessageGroupFromDb>(`/message-groups/${id}/publish`, { method: 'PUT' }),
+    apiClient<MessageGroupFromDb>(`/message-groups/${id}/publish`, {
+      method: 'PUT',
+    }),
 
   unpublish: (id: string) =>
-    apiClient<MessageGroupFromDb>(`/message-groups/${id}/unpublish`, { method: 'PUT' }),
+    apiClient<MessageGroupFromDb>(`/message-groups/${id}/unpublish`, {
+      method: 'PUT',
+    }),
 
   validate: (id: string) =>
     apiClient<MessageGroupValidationResponse>(`/message-groups/${id}/validate`),

package/app/api/meta.ts

@@ -1,22 +1,44 @@
 import type {
+  OrganizationWaba,
   SubmissionJob,
   SubmissionJobResponse,
+  SubmitToWabaBody,
 } from '@dev.smartpricing/message-composer-utils/types'
 import { apiClient } from './client'
 
+const submitBody = (wabaId?: string): SubmitToWabaBody => (wabaId ? { waba_id: wabaId } : {})
+
 export const metaApi = {
-  submitGroup: (messageGroupId: string) =>
+  /**
+   * The WABAs of an Organization, empty when it has none (ADR 0015). No error
+   * toast: a failed lookup leaves the WhatsApp configuration unknown, and the
+   * submission itself reports what is wrong.
+   */
+  getWabas: (organizationId: string) => {
+    const params = new URLSearchParams()
+    params.set('organization_id', organizationId)
+    return apiClient<OrganizationWaba[]>(`/integrations/meta/wabas?${params.toString()}`, {
+      _skipErrorToast: true,
+    } as Record<string, unknown>)
+  },
+
+  /**
+   * `wabaId` names the WABA of a first submission, when the user had to pick
+   * one. Left out, the backend uses the Message Group's WABA or the
+   * Organization's only one.
+   */
+  submitGroup: (messageGroupId: string, wabaId?: string) =>
     apiClient<SubmissionJobResponse>(`/integrations/meta/submit-group/${messageGroupId}`, {
       method: 'POST',
-      body: {},
+      body: submitBody(wabaId),
     }),
 
-  submitMessage: (messageId: string) =>
+  submitMessage: (messageId: string, wabaId?: string) =>
     apiClient<{ success: boolean; templateId?: string }>(
       `/integrations/meta/submit-message/${messageId}`,
       {
         method: 'POST',
-        body: {},
+        body: submitBody(wabaId),
       },
     ),
 

package/app/api/organization.ts

@@ -1,5 +1,14 @@
+import type { ReachableOrganization } from '@dev.smartpricing/message-composer-utils/types'
 import { apiClient } from './client'
 
 export const organizationApi = {
-  getData: () => apiClient<Record<string, string>>('/organization/data'),
+  /**
+   * The user's Reachable Organizations: the answer is what resolves the
+   * Effective Organization. No error toast, the Organization gate renders
+   * the failure.
+   */
+  getReachable: () =>
+    apiClient<ReachableOrganization[]>('/organizations', {
+      _skipErrorToast: true,
+    } as Record<string, unknown>),
 }

package/app/api/tracking.ts

@@ -1,9 +1,9 @@
 import { apiClient } from './client'
 
 export const trackingApi = {
-  event: (eventName: string, properties?: Record<string, unknown>) =>
+  event: (eventName: string, organizationId: string, properties?: Record<string, unknown>) =>
     apiClient<{ success: boolean }>('/tracking/event', {
       method: 'POST',
-      body: { eventName, properties },
+      body: { eventName, properties, organization_id: organizationId },
     }),
 }

package/app/components/Common/AppContextErrors.vue

@@ -3,8 +3,8 @@ import { useAppContextStore } from '~/stores/appContext'
 
 /**
  * Host-integration problems reported by the app-context store (missing
- * Product, missing Meta config, ...). Shown persistently: the host has to fix
- * its context, the user cannot.
+ * Product, ...). Shown persistently: the host has to fix its context, the
+ * user cannot.
  */
 const { validationErrors } = storeToRefs(useAppContextStore())
 const messages = computed(() => Object.values(validationErrors.value))

package/app/components/Common/MessageGroupSelect.vue

@@ -60,6 +60,10 @@ const props = withDefaults(
      * follow the mode.
      */
     eligibility?: MessageGroupEligibility
+    /** Lists this Organization's groups instead of the resolved Organization's. */
+    organizationId?: string
+    /** Lists only the WhatsApp groups on this WABA (ADR 0015); needs `renderType: 'whatsapp_v1'`. */
+    wabaId?: string
   }>(),
   {
     placeholder: 'Select a message group',
@@ -88,13 +92,18 @@ const appContext = useAppContextStore()
 
 // Server-side search: the menu's own client filter is off (`ignore-filter`),
 // the typed term reaches the list request once it settles. A new search,
-// render type or context Product starts over from page one.
+// render type, context Product or WABA starts over from page one.
 const searchTerm = ref('')
 const page = ref(1)
 
 // Without a context Product the server would answer with every Product's
 // groups (ADR 0011): never ask. The host's missing Product is already reported
 // by the app-context validation.
+// Only WhatsApp groups are on a WABA: with any other render type the filter would empty the list.
+const wabaFilter = computed(() =>
+  props.renderType === 'whatsapp_v1' ? props.wabaId || undefined : undefined,
+)
+
 const {
   query: { data: envelope, isPlaceholderData },
   loading,
@@ -106,9 +115,11 @@ const {
   filters: () => ({
     product: appContext.product,
     visibility: appContext.isAdmin ? 'all' : 'public',
+    waba_id: wabaFilter.value,
   }),
-  resetOn: [() => appContext.product],
+  resetOn: [() => appContext.product, wabaFilter],
   enabled: () => appContext.product != null,
+  organizationId: () => props.organizationId,
 })
 
 // Pages loaded so far, indexed by page number: page one replaces everything,

package/app/components/Common/OrganizationGate.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+/**
+ * Holds its content back until there is an Organization to work on, so no
+ * resource request leaves before it is resolved (ADR 0014).
+ */
+const organization = useEffectiveOrganizationStore()
+const { t } = useI18n()
+
+const failure = computed(() =>
+  organization.status === 'none'
+    ? {
+        title: t('common.organization.none_title'),
+        description: t('common.organization.none_description'),
+      }
+    : {
+        title: t('common.organization.lookup_failed_title'),
+        description: t('common.organization.lookup_failed_description'),
+      },
+)
+</script>
+
+<template>
+  <slot v-if="organization.status === 'resolved'" />
+
+  <div
+    v-else-if="organization.status === 'resolving'"
+    class="flex flex-1 flex-col items-center justify-center gap-3 py-12 text-muted"
+    role="status"
+  >
+    <UIcon name="i-heroicons-arrow-path" class="animate-spin h-8 w-8" />
+    <span class="text-sm">{{ t('common.organization.resolving') }}</span>
+  </div>
+
+  <div v-else class="p-4">
+    <UAlert
+      color="error"
+      variant="subtle"
+      icon="i-lucide-alert-triangle"
+      :title="failure.title"
+      :description="failure.description"
+      :actions="[
+        {
+          label: t('common.organization.retry'),
+          color: 'error',
+          variant: 'outline',
+          onClick: () => void organization.retry(),
+        },
+      ]"
+    />
+  </div>
+</template>

package/app/components/Common/OrganizationSelect.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+/**
+ * Organization selector of the list pages (Message Groups, Brands, images):
+ * filters what is listed and decides where new resources are created. Renders
+ * nothing when the Host supplied the Organization or the user reaches only one.
+ */
+const organization = useEffectiveOrganizationStore()
+const { t } = useI18n()
+
+const items = computed(() =>
+  organization.reachableOrganizations.map((o) => ({ label: o.name, value: o.id })),
+)
+</script>
+
+<template>
+  <USelectMenu
+    v-if="organization.isSelectable"
+    :model-value="organization.resolvedOrganizationId ?? undefined"
+    :items="items"
+    value-key="value"
+    icon="ph:buildings"
+    :search-input="{ placeholder: t('common.organization.search_placeholder') }"
+    :aria-label="t('common.organization.label')"
+    class="w-56"
+    @update:model-value="organization.select($event)"
+  />
+</template>

package/app/components/Common/WhatsappNotConfigured.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+/**
+ * Tells the user that the Effective Organization has no WABA: its WhatsApp
+ * messages can be drafted but not submitted to Meta. Follows the Organization,
+ * so it comes and goes with the selector and with the resource on screen.
+ */
+const { status } = useWhatsappConfiguration()
+</script>
+
+<template>
+  <UAlert
+    v-if="status === 'not_configured'"
+    color="warning"
+    variant="subtle"
+    icon="i-lucide-message-circle-off"
+    :title="$t('common.whatsapp_not_configured_title')"
+    :description="$t('common.whatsapp_not_configured_description')"
+    class="rounded-none"
+  />
+</template>

package/app/components/Composer/EmailComposer.vue

@@ -39,6 +39,10 @@ const { data: messageGroupData, isPending: isFetching } =
     ? useMessageGroupQuery(props.messageGroupId)
     : { data: ref(null), isPending: ref(false) }
 
+// The editor works on the Organization of the Message Group it loaded, not on
+// the selector's. Claimed before the watcher below loads dependent data.
+useResourceOrganization(() => messageGroupData.value?.organization_id)
+
 // Change tracking (edit mode only)
 const messageGroupIdRef = computed(() => store.messageGroupId ?? '')
 const changeTracking = props.mode === 'edit' ? useChangeTrackingEmail(messageGroupIdRef) : null

package/app/components/Composer/WabaSelectModal.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { OrganizationWaba } from '@dev.smartpricing/message-composer-utils/types'
+
+/**
+ * Asks which WABA a Message Group is submitted to, at its first submission,
+ * when its Organization has several (ADR 0015). Opened through `useOverlay`:
+ * closes with the chosen WABA id, or with nothing when the user gives up.
+ */
+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 items = computed(() =>
+  props.wabas.map((waba) => ({
+    value: waba.id,
+    label: waba.name || waba.id,
+    numbers: waba.phone_numbers.join(', '),
+    // Not `id`: the radio group gives each item one of its own.
+    wabaId: waba.id,
+  })),
+)
+</script>
+
+<template>
+  <UModal
+    :title="$t('dialogs.select_waba.title')"
+    :description="$t('dialogs.select_waba.description')"
+    close-icon="ph:x"
+    :close="{ onClick: () => emit('close') }"
+    :dismissible="false"
+    data-testid="waba-select-modal"
+  >
+    <template #body>
+      <URadioGroup
+        v-model="selected"
+        :items="items"
+        variant="table"
+        class="w-full"
+        :ui="{ item: 'w-full' }"
+        data-testid="waba-select-options"
+      >
+        <template #description="{ item }">
+          <span class="flex flex-col">
+            <span>{{ item.numbers || $t('dialogs.select_waba.no_numbers') }}</span>
+            <span class="text-xs text-dimmed font-mono">{{ item.wabaId }}</span>
+          </span>
+        </template>
+      </URadioGroup>
+    </template>
+
+    <template #footer>
+      <div class="flex gap-2 justify-end w-full">
+        <UButton
+          variant="outline"
+          color="neutral"
+          :label="$t('common.actions.cancel')"
+          data-testid="waba-select-cancel"
+          @click="emit('close')"
+        />
+        <UButton
+          :label="$t('dialogs.select_waba.confirm')"
+          :disabled="!selected"
+          data-testid="waba-select-confirm"
+          @click="emit('close', selected)"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>