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

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/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/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

package/app/composables/useTracking.ts

@@ -1,7 +1,15 @@
+import type { MaybeRefOrGetter } from 'vue'
 import type { TrackingEventMap } from '~/types/tracking'
 
-export function useTracking() {
+/** `organizationId` names the Organization of the events instead of the Effective one. */
+export function useTracking(
+  options: { organizationId?: MaybeRefOrGetter<string | undefined> } = {},
+) {
   const { product, mainLanguage, isAdmin } = storeToRefs(useAppContextStore())
+  const effectiveOrganization = useEffectiveOrganizationStore()
+  const organizationId = computed(
+    () => toValue(options.organizationId) || effectiveOrganization.organizationId,
+  )
 
   function getDefaultProperties(): Record<string, unknown> {
     return {
@@ -17,12 +25,13 @@ export function useTracking() {
     properties?: TrackingEventMap[T],
   ): Promise<void> {
     if (!useAppConfig().composer?.tracking) return
+    const payload = { ...getDefaultProperties(), ...properties }
     try {
+      // The tracking route needs an Organization: an event fired while it is
+      // still being resolved (the first page view) waits instead of being lost.
+      const organization = await until(organizationId).toBeTruthy()
       const { trackingApi } = await import('@/api/tracking')
-      await trackingApi.event(eventName, {
-        ...getDefaultProperties(),
-        ...properties,
-      })
+      await trackingApi.event(eventName, organization, payload)
     } catch {
       if (import.meta.dev) {
         console.warn(`[Tracking] Failed to track "${eventName}"`, properties)

package/app/composables/useWhatsappConfiguration.ts

@@ -0,0 +1,32 @@
+/**
+ * - `unavailable`: the Host's channels do not include WhatsApp
+ * - `checking`: the WABA lookup of the Effective Organization is running
+ * - `configured`: the Effective Organization has at least one WABA
+ * - `not_configured`: the lookup answered, the Organization has no WABA
+ * - `failed`: the lookup failed, so whether there is a WABA is not known
+ */
+export type WhatsappConfigurationStatus =
+  | 'unavailable'
+  | 'checking'
+  | 'configured'
+  | 'not_configured'
+  | 'failed'
+
+/**
+ * Whether WhatsApp is configured: the Host's channels include WhatsApp and
+ * the Effective Organization has at least one WABA (ADR 0015). The WABAs
+ * follow the Organization, so the answer changes with it.
+ * A lookup still running or failed is never read as "no WABA".
+ */
+export function useWhatsappConfiguration() {
+  const { hasWhatsapp } = useChannels()
+  const { data, status: lookupStatus } = useOrganizationWabasQuery()
+
+  const status = computed<WhatsappConfigurationStatus>(() => {
+    if (!hasWhatsapp.value) return 'unavailable'
+    if (data.value) return data.value.length > 0 ? 'configured' : 'not_configured'
+    return lookupStatus.value === 'error' ? 'failed' : 'checking'
+  })
+
+  return { status }
+}

package/app/layouts/default.vue

@@ -1,6 +1,9 @@
 <template>
   <SNavigationPage :panel-props="{ ui: { body: 'p-0 sm:p-0 gap-0 sm:gap-0 overflow-hidden' } }">
     <CommonAppContextErrors />
-    <slot />
+    <CommonWhatsappNotConfigured />
+    <CommonOrganizationGate>
+      <slot />
+    </CommonOrganizationGate>
   </SNavigationPage>
 </template>

package/app/pages/brands.vue

@@ -10,6 +10,7 @@ const brandListRef = useTemplateRef('brandListRef')
 <template>
   <LayoutBasePage :title="t('pages.brands.title')">
     <template #actions>
+      <CommonOrganizationSelect />
       <UButton
         icon="ph:plus"
         :label="t('pages.brands.new_brand')"

package/app/pages/images.vue

@@ -8,6 +8,10 @@ const { t } = useI18n()
 
 <template>
   <LayoutBasePage :title="t('pages.images.title')" :test-id="imagesPageTestIds.navbar">
+    <template #actions>
+      <CommonOrganizationSelect />
+    </template>
+
     <ComposerImageGallery />
   </LayoutBasePage>
 </template>

package/app/pages/index.vue

@@ -54,6 +54,7 @@ const tabItems = computed(() => {
     @tab-change="renderType = $event as RenderType"
   >
     <template #actions>
+      <CommonOrganizationSelect />
       <CreateTemplateButton />
     </template>
 

package/app/pages/preview/[id].vue

@@ -13,6 +13,8 @@ definePageMeta({
 const route = useRoute()
 const { locale } = useI18n()
 const { data: messageGroup } = useMessageGroupQuery(() => route.params.id as string)
+// The preview works on the Organization of the Message Group it shows.
+useResourceOrganization(() => messageGroup.value?.organization_id)
 
 const selectedMessage = computed(() => {
   if (!messageGroup.value?.messages.length) return undefined

package/app/pages/template/whatsapp/[id].vue

@@ -55,6 +55,7 @@ const store = useWhatsappComposerStore()
           :label="$t('pages.whatsapp.create_message_group.request_approval')"
           color="primary"
           :loading="composerRef?.saving || composerRef?.isTranslating"
+          :disabled="composerRef?.isWabaDetached"
           :data-testid="templateWhatsappEditTestIds.requestApprovalButton"
         />
       </template>