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

package/app/composables/useMessageGroupList.ts

@@ -0,0 +1,186 @@
+import type { MaybeRefOrGetter } from 'vue'
+import {
+  MESSAGE_GROUP_CATEGORIES,
+  MESSAGE_GROUP_LIST_SORT,
+  MESSAGE_GROUP_LIST_VISIBILITY,
+  MESSAGE_GROUP_PRODUCTS,
+  MESSAGE_STATUS,
+  SORT_ORDER,
+  type MessageGroupCategory,
+  type MessageGroupListSort,
+  type MessageGroupListVisibility,
+  type MessageGroupProduct,
+  type MessageStatus,
+  type RenderType,
+  type SortOrder,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { usePagedMessageGroups } from '~/composables/usePagedMessageGroups'
+import { useAppContextStore } from '~/stores/appContext'
+
+/** Sentinel for "no filter" in the selects; never sent to the server. */
+export const ALL_FILTER = 'all'
+
+export interface MessageGroupListFilters {
+  search: string
+  category: MessageGroupCategory | typeof ALL_FILTER
+  status: MessageStatus | typeof ALL_FILTER
+  product: MessageGroupProduct | typeof ALL_FILTER
+  /** Only admins may ask for `internal` or `all`; non-admins always request `public`. */
+  visibility: MessageGroupListVisibility
+}
+
+export interface MessageGroupListSorting {
+  sort: MessageGroupListSort
+  order: SortOrder
+}
+
+export interface MessageGroupListState extends MessageGroupListFilters, MessageGroupListSorting {
+  page: number
+  perPage: number
+}
+
+const STORAGE_KEY = 'message_library_list_state'
+const PER_PAGE = 25
+
+function isOneOf<T extends string>(values: readonly T[], value: unknown): value is T {
+  return typeof value === 'string' && (values as readonly string[]).includes(value)
+}
+
+type StoredState = Partial<Record<keyof MessageGroupListState | 'contextProduct', unknown>>
+
+/**
+ * Reads the state saved by this composer session. State is scoped to the
+ * context Product it was saved under: after a host Product switch the library
+ * must open prefiltered on the new Product, not on a stale choice.
+ */
+function readStoredState(contextProduct: MessageGroupProduct | undefined): StoredState {
+  try {
+    const raw = sessionStorage.getItem(STORAGE_KEY)
+    const parsed: unknown = raw ? JSON.parse(raw) : null
+    if (!parsed || typeof parsed !== 'object') return {}
+    const stored = parsed as StoredState
+    return stored.contextProduct === contextProduct ? stored : {}
+  } catch {
+    return {}
+  }
+}
+
+/**
+ * Restores the previous list state of this composer session, field by field:
+ * anything missing or no longer valid falls back to the default.
+ */
+function restoreState(
+  defaults: MessageGroupListState,
+  contextProduct: MessageGroupProduct | undefined,
+): MessageGroupListState {
+  const stored = readStoredState(contextProduct)
+  const withAll = <T extends string>(values: readonly T[]) => [...values, ALL_FILTER] as const
+  return {
+    search: typeof stored.search === 'string' ? stored.search : defaults.search,
+    category: isOneOf(withAll(MESSAGE_GROUP_CATEGORIES), stored.category)
+      ? stored.category
+      : defaults.category,
+    status: isOneOf(withAll(MESSAGE_STATUS), stored.status) ? stored.status : defaults.status,
+    product: isOneOf(withAll(MESSAGE_GROUP_PRODUCTS), stored.product)
+      ? stored.product
+      : defaults.product,
+    visibility: isOneOf(MESSAGE_GROUP_LIST_VISIBILITY, stored.visibility)
+      ? stored.visibility
+      : defaults.visibility,
+    sort: isOneOf(MESSAGE_GROUP_LIST_SORT, stored.sort) ? stored.sort : defaults.sort,
+    order: isOneOf(SORT_ORDER, stored.order) ? stored.order : defaults.order,
+    page:
+      Number.isInteger(stored.page) && (stored.page as number) >= 1 ? (stored.page as number) : 1,
+    perPage: defaults.perPage,
+  }
+}
+
+/** A select value of `all` means "no filter": the param is left out. */
+function unlessAll<T extends string>(value: T | typeof ALL_FILTER): T | undefined {
+  return value === ALL_FILTER ? undefined : value
+}
+
+function persistState(
+  state: MessageGroupListState,
+  contextProduct: MessageGroupProduct | undefined,
+) {
+  try {
+    sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ ...state, contextProduct }))
+  } catch {
+    // Storage unavailable (private mode, quota): the list still works, it just won't be restored.
+  }
+}
+
+/**
+ * Owns the library table's state (filters, sorting, page) as component-scoped
+ * reactive state and exposes the server-side paginated query (ADR 0012).
+ *
+ * - The Product filter starts on the context Product and can be widened to all.
+ * - Any filter or sort change lands on page one; search is debounced.
+ * - The previous page stays visible while the next one loads.
+ * - State survives navigating into a group and back within the session, never the host URL.
+ */
+export function useMessageGroupList(renderType: MaybeRefOrGetter<RenderType>) {
+  const appContext = useAppContextStore()
+
+  const defaults: MessageGroupListState = {
+    search: '',
+    category: ALL_FILTER,
+    status: ALL_FILTER,
+    product: appContext.product ?? ALL_FILTER,
+    // Admins keep seeing internal and public groups by default, as before the
+    // server-side list; the select lets them narrow. Non-admins never send this.
+    visibility: appContext.isAdmin ? 'all' : 'public',
+    sort: 'updated_at',
+    order: 'desc',
+    page: 1,
+    perPage: PER_PAGE,
+  }
+
+  const state = reactive<MessageGroupListState>(restoreState(defaults, appContext.product))
+
+  const { rows, meta, loading, query } = usePagedMessageGroups({
+    search: toRef(state, 'search'),
+    page: toRef(state, 'page'),
+    perPage: PER_PAGE,
+    renderType,
+    filters: () => ({
+      category: unlessAll(state.category),
+      status: unlessAll(state.status),
+      product: unlessAll(state.product),
+      visibility: appContext.isAdmin ? state.visibility : 'public',
+      sort: state.sort,
+      order: state.order,
+    }),
+  })
+
+  watch(state, (value) => persistState(value, appContext.product), { deep: true })
+
+  function setFilters(patch: Partial<MessageGroupListFilters>) {
+    Object.assign(state, patch)
+    // Search resets the page only once the debounced value reaches the query.
+    const { search: _search, ...immediate } = patch
+    if (Object.keys(immediate).length > 0) state.page = 1
+  }
+
+  function setSorting(sorting: MessageGroupListSorting) {
+    state.sort = sorting.sort
+    state.order = sorting.order
+    state.page = 1
+  }
+
+  function setPage(page: number) {
+    state.page = page
+  }
+
+  return {
+    state: readonly(state),
+    setFilters,
+    setSorting,
+    setPage,
+    rows,
+    meta,
+    loading,
+    refetch: query.refetch,
+  }
+}

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

@@ -0,0 +1,284 @@
+import { useQuery } from '@pinia/colada'
+import type { MaybeRefOrGetter, Ref } from 'vue'
+import { computed, ref, toValue, watch } from 'vue'
+import type {
+  EmailMessage,
+  MessageStatus,
+  PostEntity,
+  RenderType,
+  SendableMessage,
+  WhatsappMessage,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { compilationApi } from '~/api'
+import { useResolvedParametersQuery } from '~/queries/compilation'
+import { useMessageGroupQuery } from '~/queries/messageGroups'
+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'
+  | 'COMPILE_FAILED'
+
+const BACKEND_CODES = new Set<MessageSendFlowErrorCode>([
+  'TEMPLATE_NOT_SUBMITTED',
+  'TEMPLATE_NOT_APPROVED',
+  'MISSING_PARAMETERS',
+])
+
+export interface MessageSendFlowError {
+  code: MessageSendFlowErrorCode
+  /** The layer's translated text, the same string the inline alert shows. */
+  message: string
+  /** Missing keys (client-side) or the backend error body. */
+  details?: unknown
+}
+
+export interface MessageSendFlowEmits {
+  compiled: [message: SendableMessage]
+  cancel: []
+  error: [error: MessageSendFlowError]
+}
+
+export interface MessageSendFlowLanguage {
+  code: string
+  status: MessageStatus
+  approved: boolean
+}
+
+/** What an operator must fill; `brand_*` keys are baked server-side. */
+export function isOperatorParameter(key: string): boolean {
+  return !key.startsWith('brand_')
+}
+
+/**
+ * Data flow of the Message Send Flow (spec #67): Sendable group → approved
+ * language → parameters → one `/compile` on Confirm. The component owns the
+ * steps and the buttons; the host owns the container and the send.
+ */
+export function useMessageSendFlow(options: {
+  groupId: Ref<string | undefined>
+  renderType: MaybeRefOrGetter<RenderType>
+  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({ organizationId: options.organizationId })
+
+  // --- Group -------------------------------------------------------------
+  const { data: group, isLoading: groupLoading } = useMessageGroupQuery(() => groupId.value ?? '', {
+    enabled: () => !!groupId.value,
+  })
+
+  const messages = computed(() =>
+    (group.value?.messages ?? []).filter((m) => m.render_type === toValue(options.renderType)),
+  )
+
+  const languages = computed<MessageSendFlowLanguage[]>(() =>
+    messages.value.map((m) => ({
+      code: m.language_id,
+      status: m.status,
+      approved: m.status === '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,
+  )
+
+  // --- Language rule: preferred if approved, else first approved -----------
+  const selectedLanguage = ref<string>()
+  watch(
+    [messages, () => toValue(options.preferredLanguage)],
+    ([msgs, preferred]) => {
+      const approved = msgs.filter((m) => m.status === 'approved')
+      const match = approved.find((m) => m.language_id === preferred) ?? approved[0]
+      selectedLanguage.value = match?.language_id
+    },
+    { immediate: true },
+  )
+
+  const selectedMessage = computed(
+    () =>
+      messages.value.find((m) => m.language_id === selectedLanguage.value) as
+        | PostEntity<WhatsappMessage>
+        | PostEntity<EmailMessage>
+        | undefined,
+  )
+
+  // --- Parameters ----------------------------------------------------------
+  const parametersEnabled = () => !!groupId.value && !!selectedLanguage.value
+  const organization = useEffectiveOrganizationStore()
+
+  const { data: parametersData, isLoading: parametersLoading } = useQuery({
+    key: () => [
+      'send-flow',
+      'parameters',
+      groupId.value ?? '',
+      selectedLanguage.value ?? '',
+      organization.organizationId,
+    ],
+    query: () => compilationApi.getParameters(groupId.value ?? '', selectedLanguage.value ?? ''),
+    enabled: parametersEnabled,
+  })
+
+  // Same query as WhatsappPreview, so the Preview step reuses the cached values.
+  const { data: resolvedData } = useResolvedParametersQuery(
+    () => groupId.value ?? '',
+    () => selectedLanguage.value ?? '',
+  )
+
+  const parameterKeys = computed(() =>
+    (parametersData.value?.parameters ?? []).filter(isOperatorParameter),
+  )
+
+  /** Organization-level values, shown as input placeholders. */
+  const placeholders = computed<Record<string, string>>(() => resolvedData.value?.parameters ?? {})
+
+  /**
+   * One entry per visible key; prefill seeds new keys, unknown prefill keys
+   * are ignored. Rebuilt only once the keys are known, so a language switch
+   * keeps what the operator typed while the next list loads.
+   */
+  const parameterValues = ref<Record<string, string>>({})
+  watch(
+    parameterKeys,
+    (keys) => {
+      if (!parametersData.value) return
+      const prefill = toValue(options.prefill) ?? {}
+      const next: Record<string, string> = {}
+      for (const key of keys) next[key] = parameterValues.value[key] ?? prefill[key] ?? ''
+      parameterValues.value = next
+    },
+    { immediate: true },
+  )
+
+  const missing = computed(() =>
+    parameterKeys.value.filter((k) => !parameterValues.value[k]?.trim()),
+  )
+
+  // --- Errors ---------------------------------------------------------------
+  const flowError = ref<MessageSendFlowError>()
+
+  function fail(code: MessageSendFlowErrorCode, details?: unknown) {
+    const error: MessageSendFlowError = {
+      code,
+      message: t(`send_flow.errors.${code}`, { name: group.value?.name ?? '' }),
+      details,
+    }
+    flowError.value = error
+    trackEvent('send_flow.error', { code })
+    emit('error', error)
+  }
+
+  // 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(() => sendable.value && !!selectedMessage.value && !compiling.value)
+
+  async function confirm() {
+    flowError.value = undefined
+    if (!groupId.value || !selectedLanguage.value || !group.value) return
+
+    if (missing.value.length > 0) {
+      fail('MISSING_PARAMETERS', { missing: missing.value })
+      return
+    }
+
+    trackEvent('send_flow.confirm', {
+      message_name: group.value.name,
+      message_category: group.value.category,
+      language: selectedLanguage.value,
+      parameters_count: parameterKeys.value.length,
+    })
+
+    compiling.value = true
+    try {
+      const res = await compilationApi.compile(
+        groupId.value,
+        {
+          language: selectedLanguage.value,
+          parameters: { ...parameterValues.value },
+          strict: true,
+          strict_language: true,
+          brand_id: toValue(options.brandId),
+        },
+        { skipErrorToast: true },
+      )
+      if (!('message' in res)) {
+        fail('COMPILE_FAILED', res)
+        return
+      }
+      emit('compiled', res.message)
+    } catch (e) {
+      const { status, data } = e as { status?: number; data?: { code?: string } }
+      // 401 reaches the host through `composer:auth-error`; nothing to add here.
+      if (status === 401) return
+      const code = data?.code as MessageSendFlowErrorCode | undefined
+      fail(code && BACKEND_CODES.has(code) ? code : 'COMPILE_FAILED', data ?? e)
+    } finally {
+      compiling.value = false
+    }
+  }
+
+  return {
+    group,
+    groupLoading,
+    languages,
+    sendable,
+    selectedLanguage,
+    selectedMessage,
+    parameterKeys,
+    parametersLoading,
+    placeholders,
+    parameterValues,
+    flowError,
+    compiling,
+    canConfirm,
+    confirm,
+    trackEvent,
+  }
+}

package/app/composables/usePagedMessageGroups.ts

@@ -0,0 +1,78 @@
+import type { MaybeRefOrGetter, Ref, WatchSource } from 'vue'
+import type { RenderType } from '@dev.smartpricing/message-composer-utils/types'
+import type { ListMessageGroupsOptions } from '~/api/messageGroups'
+import { useMessageGroupListQuery } from '~/queries/messageGroups'
+
+export const SEARCH_DEBOUNCE_MS = 300
+
+type PagedListFilters = Omit<
+  ListMessageGroupsOptions,
+  'search' | 'page' | 'per_page' | 'render_type'
+>
+
+export interface PagedMessageGroupsOptions {
+  /** Raw search term as typed; it is debounced and trimmed before it reaches the request. */
+  search: Ref<string>
+  /** Current page. Lands on one whenever the search settles or a `resetOn` source changes. */
+  page: Ref<number>
+  perPage: number
+  renderType: MaybeRefOrGetter<RenderType | undefined>
+  /** Remaining filters and sorting, merged into the request as they are. */
+  filters?: MaybeRefOrGetter<PagedListFilters>
+  /** Further sources whose change lands on page one, besides the search and render type. */
+  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>
+}
+
+/**
+ * One server-side paginated Message Group list (ADR 0012) as a reactive source:
+ * debounced search, page reset, request options and the query itself. The
+ * library table and the in-composer picker both build on it and own only what
+ * differs (filters, page size, how rows are shown).
+ */
+export function usePagedMessageGroups(options: PagedMessageGroupsOptions) {
+  const debouncedSearch = refDebounced(options.search, SEARCH_DEBOUNCE_MS)
+
+  const listOptions = computed<ListMessageGroupsOptions>(() => ({
+    ...toValue(options.filters),
+    render_type: toValue(options.renderType),
+    search: debouncedSearch.value.trim() || undefined,
+    page: options.page.value,
+    per_page: options.perPage,
+  }))
+
+  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),
+      // Another Organization is another list: its page N may not exist.
+      () => toValue(options.organizationId) || organization.resolvedOrganizationId,
+      ...(options.resetOn ?? []),
+    ],
+    () => {
+      options.page.value = 1
+    },
+    { flush: 'sync' },
+  )
+
+  return {
+    debouncedSearch,
+    listOptions,
+    query,
+    rows: computed(() => query.data.value?.data ?? []),
+    meta: computed(() => query.data.value?.meta),
+    /** True on the first load and while a new page or filter set is fetching over previous data. */
+    loading: computed(() => query.isPending.value || query.isPlaceholderData.value),
+  }
+}

package/app/composables/useTemplateOperations.ts

@@ -13,6 +13,7 @@ import type {
   MessageStatus,
   MessageGroup,
 } from '@dev.smartpricing/message-composer-utils/types'
+import { useAppContextStore } from '@/stores/appContext'
 
 interface TemplateData<T = Message | PostEntity<Message>> {
   messageGroup: { name: string; category: MessageGroupCategory; brand_id?: string | null }
@@ -27,6 +28,8 @@ interface UseTemplateOperationsOptions {
 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()
@@ -39,9 +42,20 @@ export function useTemplateOperations(options: UseTemplateOperationsOptions = {}
   async function createTemplate(data: TemplateData, status: MessageStatus = 'draft') {
     saving.value = true
     try {
-      const createdMessageGroup = await createMessageGroup(
-        data.messageGroup as PostEntity<MessageGroup>,
-      )
+      // Every Message Group belongs to the context Product (ADR 0011).
+      const product = appContext.product
+      if (!product) {
+        throw new Error(
+          '[message-composer] Cannot create a template: no Product in the composer context',
+        )
+      }
+      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) {
         for (const message of Object.values(data.messages)) {
@@ -102,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