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

package/app/components/Composer/WhatsappComposer.vue

@@ -27,8 +27,33 @@ const { mainLanguage } = storeToRefs(useAppContextStore())
 const { trackEvent } = useTracking()
 const { goBackOrFallback } = useGoBack()
 const { submitToMeta, submitMessageToMeta } = useMetaSubmissionStore()
+const { status: whatsappConfiguration } = useWhatsappConfiguration()
 const { confirm } = useConfirm()
 const { t } = useI18n()
+const toast = useToast()
+
+/**
+ * A submission needs a WABA of the Message Group's Organization: when it is
+ * known to have none, or the Message Group is on one the Organization no
+ * longer has, say so before anything is saved on the way to the submission.
+ * While that is not known (lookup running or failed) the submission goes
+ * ahead and the backend decides.
+ */
+function canSubmitToMeta(): boolean {
+  const reason =
+    whatsappConfiguration.value === 'not_configured'
+      ? 'whatsapp_not_configured'
+      : isWabaDetached.value
+        ? 'whatsapp_waba_detached'
+        : null
+  if (!reason) return true
+  toast.add({
+    color: 'error',
+    title: t(`common.${reason}_title`),
+    description: t(`common.${reason}_description`),
+  })
+  return false
+}
 
 // ── Init ──────────────────────────────────────────────────────────
 if (props.mode === 'create') {
@@ -41,6 +66,19 @@ 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)
+
+// The WABA the Message Group is on, and the choice of one at its first
+// submission (ADR 0015).
+const {
+  waba: messageGroupWaba,
+  isDetached: isWabaDetached,
+  chooseWaba,
+  markSubmitted,
+} = useMessageGroupWaba(() => messageGroupData.value?.waba_id)
+
 // ── Change tracking ───────────────────────────────────────────────
 const changeTracking = useChangeTracking(computed(() => store.changeTrackingId))
 
@@ -238,6 +276,10 @@ async function saveAsNew() {
 }
 
 async function requestApproval() {
+  // Asked before anything is saved: giving up leaves the editor as it was.
+  const choice = await chooseWaba()
+  if (!choice) return
+
   track('request_approval', getWaDraftProps())
 
   if (props.mode === 'create') {
@@ -246,7 +288,7 @@ async function requestApproval() {
       'draft',
     )
     if (result) {
-      await submitToMeta(result.id.toString())
+      await submitToMeta(result.id.toString(), choice.wabaId)
       emit('saved', { id: result.id, name: result.name })
       notifyParent('TEMPLATE_APPROVAL_REQUESTED', { id: result.id, name: result.name })
     }
@@ -256,7 +298,7 @@ async function requestApproval() {
       messageGroup: store.messageGroupUpdateData,
       messages: store.messages,
     })
-    await submitToMeta(store.messageGroupId)
+    await submitToMeta(store.messageGroupId, choice.wabaId)
     emit('saved', { id: store.messageGroupId, name: store.name })
     notifyParent('TEMPLATE_APPROVAL_REQUESTED', { id: store.messageGroupId, name: store.name })
     goBackOrFallback()
@@ -267,6 +309,10 @@ async function requestApproval() {
 async function onRequestReview(languageId: string) {
   const message = store.messages[languageId] as (WhatsappMessage & { id?: string }) | undefined
   if (!message?.id) return
+  if (!canSubmitToMeta()) return
+
+  const choice = await chooseWaba()
+  if (!choice) return
 
   const languageName = languages.value?.find((l) => l.id === languageId)?.name ?? languageId
 
@@ -278,7 +324,8 @@ async function onRequestReview(languageId: string) {
     action: async () => {
       // Decision C: persist only this language's current edits, then submit it.
       await messagesApi.update(message.id!, message)
-      await submitMessageToMeta(message.id!)
+      await submitMessageToMeta(message.id!, choice.wabaId)
+      markSubmitted(choice.wabaId)
       // Reflect pending locally instead of refetching the group, so unsaved
       // edits in other languages are preserved.
       store.messages[languageId] = { ...message, status: 'pending' }
@@ -312,6 +359,7 @@ async function handleSaveAsNew() {
 }
 
 async function handleRequestApproval() {
+  if (!canSubmitToMeta()) return
   if (!(await validateFull())) return
   if (hasIncompleteTranslations.value) {
     pendingAction.value = 'request_approval'
@@ -409,6 +457,7 @@ defineExpose({
   validationErrors,
   isPending: store.isPending,
   isApproved: store.isApproved,
+  isWabaDetached,
 })
 </script>
 
@@ -439,6 +488,32 @@ defineExpose({
       </UAlert>
     </div>
 
+    <UAlert
+      v-if="isWabaDetached"
+      color="warning"
+      variant="subtle"
+      icon="i-lucide-unplug"
+      :title="$t('common.whatsapp_waba_detached_title')"
+      :description="$t('common.whatsapp_waba_detached_description')"
+      class="rounded-none"
+      data-testid="whatsapp-waba-detached"
+    />
+    <div
+      v-if="messageGroupWaba"
+      class="flex items-center gap-2 px-6 py-2 text-sm text-muted border-b border-default"
+      data-testid="whatsapp-message-group-waba"
+    >
+      <UIcon name="i-lucide-building-2" class="size-4 shrink-0" />
+      <span>{{ $t('common.whatsapp_waba_label') }}</span>
+      <span v-if="messageGroupWaba.name" class="font-medium text-default">
+        {{ messageGroupWaba.name }}
+      </span>
+      <span v-if="messageGroupWaba.phone_numbers.length">
+        {{ messageGroupWaba.phone_numbers.join(', ') }}
+      </span>
+      <span class="text-xs text-dimmed font-mono">{{ messageGroupWaba.id }}</span>
+    </div>
+
     <ComposerWhatsappContent
       v-if="store.activeTab === 'content'"
       :mode="mode"

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/MessageSendFlow/EmailPreview.vue

@@ -22,6 +22,8 @@ const props = defineProps<{
 // The panel follows the form live; one compile per pause, not per keystroke.
 const debouncedParameters = refDebounced(toRef(props, 'parameters'), 300)
 
+const organization = useEffectiveOrganizationStore()
+
 const { data, isPending, isLoading, error } = useQuery({
   key: () => [
     'send-flow',
@@ -30,6 +32,7 @@ const { data, isPending, isLoading, error } = useQuery({
     props.language,
     props.brandId ?? '',
     JSON.stringify(debouncedParameters.value),
+    organization.organizationId,
   ],
   query: () =>
     compilationApi.compile(

package/app/components/MessageSendFlow/MessageSendFlow.vue

@@ -12,7 +12,6 @@ import EmailPreview from './EmailPreview.vue'
 import LanguageSelect from './LanguageSelect.vue'
 import ParametersForm from './ParametersForm.vue'
 import { useMessageSendFlow, type MessageSendFlowEmits } from '~/composables/useMessageSendFlow'
-import { useTracking } from '~/composables/useTracking'
 import type { MessageSendFlowStep } from '~/types/tracking'
 import { messageSendFlowTestIds } from '~/utils/testIds.const'
 
@@ -39,6 +38,16 @@ const props = withDefaults(
     parameters?: Record<string, string>
     /** Brand override passed to `/compile`. */
     brandId?: string
+    /**
+     * The Organization the flow works on (ADR 0014), e.g. the conversation's.
+     * Unset, the one the layer resolved. The flow never shows a selector.
+     */
+    organizationId?: string
+    /**
+     * The WABA the Host sends from: only WhatsApp groups on it are offered
+     * (ADR 0015). Unset, the groups of every WABA of the Organization.
+     */
+    wabaId?: string
     /**
      * Where to render the action bar (Cancel, Back, Next, Confirm): a selector
      * or element in the host's container, e.g. a `UModal` footer. Unset, the
@@ -53,7 +62,6 @@ const groupId = defineModel<string>('messageGroupId')
 const emit = defineEmits<MessageSendFlowEmits>()
 
 const { t } = useI18n()
-const { trackEvent } = useTracking()
 
 const {
   group,
@@ -70,12 +78,15 @@ const {
   compiling,
   canConfirm,
   confirm,
+  trackEvent,
 } = useMessageSendFlow({
   groupId,
   renderType: () => props.renderType,
   preferredLanguage: () => props.language,
   prefill: () => props.parameters,
   brandId: () => props.brandId,
+  organizationId: () => props.organizationId,
+  wabaId: () => props.wabaId,
   emit,
 })
 
@@ -152,6 +163,8 @@ function cancel() {
               <MessageGroupSelect
                 v-model="groupId"
                 :render-type="renderType"
+                :organization-id="organizationId"
+                :waba-id="wabaId"
                 eligibility="sendable"
                 class="w-full"
               />

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

@@ -9,19 +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>
   /** The Product the host embeds the composer in (ADR 0011). Required. */
   product: Ref<AppContextConfig['product']>
-  strategy?: Ref<AppContextConfig['strategy']>
   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>
 }

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))
+}

package/app/composables/useMessageGroupWaba.ts

@@ -0,0 +1,73 @@
+import type { OrganizationWaba } from '@dev.smartpricing/message-composer-utils/types'
+import WabaSelectModal from '~/components/Composer/WabaSelectModal.vue'
+
+/**
+ * The WABA of the Message Group in the WhatsApp editor (ADR 0015): chosen at
+ * the first submission and fixed from then on.
+ *
+ * `storedWabaId` is the WABA the loaded Message Group is on, if any.
+ */
+export function useMessageGroupWaba(storedWabaId: MaybeRefOrGetter<string | null | undefined>) {
+  const { data: wabas, refresh } = useOrganizationWabasQuery()
+  const { metaWabaId } = storeToRefs(useAppContextStore())
+  const modal = useOverlay().create(WabaSelectModal)
+
+  // A submission of one language does not read the Message Group again: its
+  // WABA is remembered here until it does.
+  const submittedWabaId = ref<string>()
+
+  const wabaId = computed(() => toValue(storedWabaId) ?? submittedWabaId.value ?? null)
+
+  /** The WABA the Message Group is on, by id alone when it is not listed. */
+  const waba = computed<OrganizationWaba | null>(() => {
+    if (!wabaId.value) return null
+    return (
+      wabas.value?.find((candidate) => candidate.id === wabaId.value) ?? {
+        id: wabaId.value,
+        name: '',
+        phone_numbers: [],
+      }
+    )
+  })
+
+  /**
+   * The Message Group is on a WABA that is no longer one of its
+   * Organization's: it cannot be submitted any more. Never true while the
+   * lookup is running or failed.
+   */
+  const isDetached = computed(
+    () =>
+      !!wabaId.value &&
+      !!wabas.value &&
+      !wabas.value.some((candidate) => candidate.id === wabaId.value),
+  )
+
+  /**
+   * 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.
+   */
+  async function chooseWaba(): Promise<{ wabaId?: string } | null> {
+    if (wabaId.value) return {}
+    if (!wabas.value) await refresh()
+    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
+
+    return chosen ? { wabaId: chosen } : null
+  }
+
+  /** After a submission went through, with the WABA it named, if any. */
+  function markSubmitted(chosen?: string) {
+    if (wabaId.value) return
+    submittedWabaId.value = chosen ?? (wabas.value?.length === 1 ? wabas.value[0]!.id : undefined)
+  }
+
+  return { waba, isDetached, chooseWaba, markSubmitted }
+}

package/app/composables/useMessageSendFlow.ts

@@ -17,6 +17,7 @@ import { useTracking } from '~/composables/useTracking'
 /** Codes a host receives on `error`; the backend ones pass through unchanged. */
 export type MessageSendFlowErrorCode =
   | 'NOT_SENDABLE'
+  | 'NOT_OFFERED'
   | 'MISSING_PARAMETERS'
   | 'TEMPLATE_NOT_SUBMITTED'
   | 'TEMPLATE_NOT_APPROVED'
@@ -64,11 +65,15 @@ export function useMessageSendFlow(options: {
   preferredLanguage: MaybeRefOrGetter<string | undefined>
   prefill: MaybeRefOrGetter<Record<string, string> | undefined>
   brandId: MaybeRefOrGetter<string | undefined>
+  /** The Organization the flow works on; unset, the one the layer resolved. */
+  organizationId?: MaybeRefOrGetter<string | undefined>
+  /** The WABA the Host sends from: only WhatsApp groups on it are offered (ADR 0015). */
+  wabaId?: MaybeRefOrGetter<string | undefined>
   emit: <K extends keyof MessageSendFlowEmits>(event: K, ...args: MessageSendFlowEmits[K]) => void
 }) {
   const { groupId, emit } = options
   const { t } = useI18n()
-  const { trackEvent } = useTracking()
+  const { trackEvent } = useTracking({ organizationId: options.organizationId })
 
   // --- Group -------------------------------------------------------------
   const { data: group, isLoading: groupLoading } = useMessageGroupQuery(() => groupId.value ?? '', {
@@ -87,7 +92,23 @@ export function useMessageSendFlow(options: {
     })),
   )
 
-  const sendable = computed(() => languages.value.some((l) => l.approved))
+  // A group reaches the flow by id too (the Host's preselection): one of
+  // another Organization, or on another WABA, is not the picker's to offer.
+  const offered = computed(() => {
+    if (!group.value) return true
+    const organizationId = toValue(options.organizationId)
+    if (
+      organizationId &&
+      group.value.organization_id?.toLowerCase() !== organizationId.toLowerCase()
+    )
+      return false
+    const wabaId = toValue(options.wabaId)
+    return (
+      !wabaId || toValue(options.renderType) !== 'whatsapp_v1' || group.value.waba_id === wabaId
+    )
+  })
+
+  const sendable = computed(() => offered.value && languages.value.some((l) => l.approved))
   const notSendable = computed(
     () => !!groupId.value && !!group.value && !groupLoading.value && !sendable.value,
   )
@@ -114,9 +135,16 @@ export function useMessageSendFlow(options: {
 
   // --- Parameters ----------------------------------------------------------
   const parametersEnabled = () => !!groupId.value && !!selectedLanguage.value
+  const organization = useEffectiveOrganizationStore()
 
   const { data: parametersData, isLoading: parametersLoading } = useQuery({
-    key: () => ['send-flow', 'parameters', groupId.value ?? '', selectedLanguage.value ?? ''],
+    key: () => [
+      'send-flow',
+      'parameters',
+      groupId.value ?? '',
+      selectedLanguage.value ?? '',
+      organization.organizationId,
+    ],
     query: () => compilationApi.getParameters(groupId.value ?? '', selectedLanguage.value ?? ''),
     enabled: parametersEnabled,
   })
@@ -170,17 +198,26 @@ export function useMessageSendFlow(options: {
     emit('error', error)
   }
 
-  watch(notSendable, (value) => {
-    if (value) {
-      fail('NOT_SENDABLE')
-    } else if (flowError.value?.code === 'NOT_SENDABLE') {
+  // The reason a picked group cannot enter the flow. Watched with the group,
+  // so another group, or another reason for the same one, is reported anew.
+  const groupError = computed<MessageSendFlowErrorCode | undefined>(() => {
+    if (!notSendable.value) return undefined
+    return offered.value ? 'NOT_SENDABLE' : 'NOT_OFFERED'
+  })
+  watch([groupError, () => group.value?.id], ([code]) => {
+    if (code) {
+      fail(code)
+    } else if (
+      flowError.value?.code === 'NOT_SENDABLE' ||
+      flowError.value?.code === 'NOT_OFFERED'
+    ) {
       flowError.value = undefined
     }
   })
 
   // --- Compile (once, on Confirm) --------------------------------------------
   const compiling = ref(false)
-  const canConfirm = computed(() => !!selectedMessage.value && !compiling.value)
+  const canConfirm = computed(() => sendable.value && !!selectedMessage.value && !compiling.value)
 
   async function confirm() {
     flowError.value = undefined
@@ -242,5 +279,6 @@ export function useMessageSendFlow(options: {
     compiling,
     canConfirm,
     confirm,
+    trackEvent,
   }
 }

package/app/composables/usePagedMessageGroups.ts

@@ -23,6 +23,8 @@ export interface PagedMessageGroupsOptions {
   resetOn?: WatchSource[]
   /** When false no request is made (the query stays pending). */
   enabled?: MaybeRefOrGetter<boolean>
+  /** Lists this Organization instead of the resolved one. */
+  organizationId?: MaybeRefOrGetter<string | undefined>
 }
 
 /**
@@ -42,12 +44,22 @@ export function usePagedMessageGroups(options: PagedMessageGroupsOptions) {
     per_page: options.perPage,
   }))
 
-  const query = useMessageGroupListQuery(listOptions, { enabled: options.enabled })
+  const query = useMessageGroupListQuery(listOptions, {
+    enabled: options.enabled,
+    organizationId: options.organizationId,
+  })
 
   // The reset happens in the same tick as the change (sync flush) so the query
   // sees one key change, not two, and the user never opens an empty page.
+  const organization = useEffectiveOrganizationStore()
   watch(
-    [debouncedSearch, () => toValue(options.renderType), ...(options.resetOn ?? [])],
+    [
+      debouncedSearch,
+      () => toValue(options.renderType),
+      // Another Organization is another list: its page N may not exist.
+      () => toValue(options.organizationId) || organization.resolvedOrganizationId,
+      ...(options.resetOn ?? []),
+    ],
     () => {
       options.page.value = 1
     },

package/app/composables/useTemplateOperations.ts

@@ -29,6 +29,7 @@ export function useTemplateOperations(options: UseTemplateOperationsOptions = {}
   const saving = ref(false)
   const saved = ref(false)
   const appContext = useAppContextStore()
+  const organization = useEffectiveOrganizationStore()
 
   // Hoist composables to setup scope (they use inject() internally)
   const { mutateAsync: createMessageGroup } = useCreateMessageGroupMutation()
@@ -51,6 +52,9 @@ export function useTemplateOperations(options: UseTemplateOperationsOptions = {}
       const createdMessageGroup = await createMessageGroup({
         ...data.messageGroup,
         product,
+        // The Effective Organization (ADR 0014): the selected one, or the
+        // edited group's on "save as new".
+        organization_id: organization.requireOrganizationId(),
       } as PostEntity<MessageGroup>)
 
       if (createdMessageGroup?.id) {
@@ -112,7 +116,12 @@ export function useTemplateOperations(options: UseTemplateOperationsOptions = {}
     try {
       const result = await duplicateMessageGroup({
         id: sourceId,
-        data: newName ? { name: newName } : undefined,
+        data: {
+          ...(newName && { name: newName }),
+          // The Effective Organization (ADR 0014): the selected one, or the
+          // edited group's on "save as new".
+          organization_id: organization.requireOrganizationId(),
+        },
       })
 
       saved.value = true