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

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>

package/app/queries/brands.ts

@@ -3,20 +3,32 @@ import type {
   BrandCreateBody,
   BrandUpdateBody,
 } from '@dev.smartpricing/message-composer-utils/types'
-import { brandsApi, propertiesApi } from '~/api'
+import { brandsApi, propertiesApi, type BrandPreviewRequest } from '~/api'
 
 // QUERIES
 export function useBrandsQuery(options?: {
   sort_by?: 'created_at' | 'name'
   direction?: 'asc' | 'desc'
 }) {
+  const organization = useEffectiveOrganizationStore()
+
   return useQuery({
-    key: () => ['brands', options?.sort_by ?? '', options?.direction ?? ''],
-    query: () => brandsApi.getAll(options),
+    key: () => [
+      'brands',
+      options?.sort_by ?? '',
+      options?.direction ?? '',
+      organization.organizationId,
+    ],
+    query: () =>
+      brandsApi.getAll({ ...options, organization_id: organization.requireOrganizationId() }),
     staleTime: 2 * 60 * 1000,
   })
 }
 
+/**
+ * A Brand by id. No Organization in the key: the request names none, it acts
+ * on the Organization of the Brand itself (ADR 0014).
+ */
 export function useBrandQuery(id: MaybeRefOrGetter<string>) {
   return useQuery({
     key: () => ['brands', toValue(id)],
@@ -27,19 +39,24 @@ export function useBrandQuery(id: MaybeRefOrGetter<string>) {
 }
 
 export function usePropertiesQuery() {
+  const organization = useEffectiveOrganizationStore()
+
   return useQuery({
-    key: () => ['properties'],
-    query: () => propertiesApi.getAll(),
+    key: () => ['properties', organization.organizationId],
+    query: () => propertiesApi.getAll(organization.requireOrganizationId()),
     staleTime: 10 * 60 * 1000,
   })
 }
 
 // MUTATIONS
+/** A new Brand names its Organization (ADR 0014): the Effective one. */
 export function useCreateBrandMutation() {
   const queryCache = useQueryCache()
+  const organization = useEffectiveOrganizationStore()
 
   return useMutation({
-    mutation: (data: BrandCreateBody) => brandsApi.create(data),
+    mutation: (data: BrandCreateBody) =>
+      brandsApi.create({ ...data, organization_id: organization.requireOrganizationId() }),
     onSuccess: () => {
       queryCache.invalidateQueries({ key: ['brands'] })
     },
@@ -70,7 +87,10 @@ export function useDeleteBrandMutation() {
 }
 
 export function useBrandPreviewMutation() {
+  const organization = useEffectiveOrganizationStore()
+
   return useMutation({
-    mutation: brandsApi.preview,
+    mutation: (data: BrandPreviewRequest) =>
+      brandsApi.preview({ ...data, organization_id: organization.requireOrganizationId() }),
   })
 }

package/app/queries/compilation.ts

@@ -5,11 +5,18 @@ import { compilationApi } from '~/api'
 import type {
   CompileMessageRequest,
   PreviewMessageRequest,
+  TestEmailRequest,
 } from '@dev.smartpricing/message-composer-utils/types'
 
 export function useSendTestEmailMutation() {
+  const organization = useEffectiveOrganizationStore()
+
   return useMutation({
-    mutation: compilationApi.sendTestEmail,
+    mutation: (data: TestEmailRequest) =>
+      compilationApi.sendTestEmail({
+        ...data,
+        organization_id: organization.requireOrganizationId(),
+      }),
   })
 }
 
@@ -42,7 +49,13 @@ export function useCompileEmailMutation() {
 }
 
 export function usePreviewEmailMutation() {
+  const organization = useEffectiveOrganizationStore()
+
   return useMutation({
-    mutation: (data: PreviewMessageRequest) => compilationApi.previewEmail(data),
+    mutation: (data: PreviewMessageRequest) =>
+      compilationApi.previewEmail({
+        ...data,
+        organization_id: organization.requireOrganizationId(),
+      }),
   })
 }

package/app/queries/dynamicValues.ts

@@ -6,13 +6,24 @@ import { useAppContextStore } from '~/stores/appContext'
 export function useDynamicValuesQuery() {
   const { product, mainLanguage } = storeToRefs(useAppContextStore())
 
+  const organization = useEffectiveOrganizationStore()
+
   return useQuery({
-    key: () => ['dynamic-values', product.value ?? '', mainLanguage.value],
+    key: () => [
+      'dynamic-values',
+      product.value ?? '',
+      mainLanguage.value,
+      organization.organizationId,
+    ],
     // No Product, no request: the picker stays empty and the store lists the
     // missing Product in `validationErrors`.
     query: () => {
       if (!product.value) return Promise.resolve<DynamicValuesResponse>({})
-      return dynamicValuesApi.get(product.value, mainLanguage.value || 'en')
+      return dynamicValuesApi.get(
+        product.value,
+        mainLanguage.value || 'en',
+        organization.requireOrganizationId(),
+      )
     },
     staleTime: 30 * 60 * 1000,
   })

package/app/queries/media.ts

@@ -2,15 +2,20 @@ import { useMutation, useQuery } from '@pinia/colada'
 import { mediaApi } from '~/api'
 
 export function useMediaQuery() {
+  const organization = useEffectiveOrganizationStore()
+
   return useQuery({
-    key: ['media'],
-    query: mediaApi.list,
+    key: () => ['media', organization.organizationId],
+    query: () => mediaApi.list(organization.requireOrganizationId()),
   })
 }
 
+/** An uploaded image names its Organization (ADR 0014): the Effective one. */
 export function useUploadMediaMutation() {
+  const organization = useEffectiveOrganizationStore()
+
   return useMutation({
-    mutation: mediaApi.upload,
+    mutation: (file: File) => mediaApi.upload(file, organization.requireOrganizationId()),
   })
 }
 

package/app/queries/messageGroups.ts

@@ -23,21 +23,47 @@ function enabledOption(enabled?: MaybeRefOrGetter<boolean>) {
 /**
  * One page of the server-side filtered list, in the Laravel envelope (ADR 0012).
  * The previous page stays as placeholder data while the next one loads, so
- * paging and filtering never flash an empty table.
+ * paging and filtering never flash an empty table. The Organization closes
+ * every key, so each Organization has its own cache (ADR 0014). A list is
+ * filtered by the resolved Organization, never by the one an editor page
+ * claimed for its resource, which may still be held while the list mounts.
+ * `organizationId` lists another Organization instead (the Message Send Flow's).
  */
 export function useMessageGroupListQuery(
   options: MaybeRefOrGetter<ListMessageGroupsOptions>,
-  queryOptions: { enabled?: MaybeRefOrGetter<boolean> } = {},
+  queryOptions: {
+    enabled?: MaybeRefOrGetter<boolean>
+    organizationId?: MaybeRefOrGetter<string | undefined>
+  } = {},
 ) {
+  const organization = useEffectiveOrganizationStore()
+  const listOrganizationId = () =>
+    toValue(queryOptions.organizationId) || organization.resolvedOrganizationId
+
   return useQuery({
-    key: () => ['message-groups', JSON.stringify(toValue(options))],
-    query: () => messageGroupsApi.list(toValue(options)),
+    key: () => ['message-groups', JSON.stringify(toValue(options)), listOrganizationId()],
+    query: () => {
+      // No "all Organizations" list in the layer: never ask without the filter.
+      const organization_id = listOrganizationId()
+      if (!organization_id) {
+        throw new Error(
+          '[message-composer] No Organization resolved yet: the list was not requested',
+        )
+      }
+      return messageGroupsApi.list({ ...toValue(options), organization_id })
+    },
     staleTime: 0,
-    placeholderData: (previousData) => previousData,
+    // Never across Organizations: a switch must not show the previous one's rows.
+    placeholderData: (previousData, previousEntry) =>
+      previousEntry?.key.at(-1) === listOrganizationId() ? previousData : undefined,
     ...enabledOption(queryOptions.enabled),
   })
 }
 
+/**
+ * A Message Group by id. No Organization in the key: the request names none,
+ * it acts on the Organization of the Message Group itself (ADR 0014).
+ */
 export function useMessageGroupQuery(
   id: MaybeRefOrGetter<string>,
   queryOptions: { enabled?: MaybeRefOrGetter<boolean> } = {},

package/app/queries/meta.ts

@@ -1,13 +1,18 @@
-import { useMutation, useQueryCache } from '@pinia/colada'
+import { useQuery } from '@pinia/colada'
 import { metaApi } from '~/api'
 
-export function useSubmitToMetaMutation() {
-  const queryCache = useQueryCache()
+/**
+ * The WABAs of the Effective Organization (ADR 0015). Asked only when the
+ * Host's channels include WhatsApp and an Organization is resolved.
+ */
+export function useOrganizationWabasQuery() {
+  const organization = useEffectiveOrganizationStore()
+  const { hasWhatsapp } = useChannels()
 
-  return useMutation({
-    mutation: metaApi.submitGroup,
-    onSuccess: (_, messageGroupId) => {
-      queryCache.invalidateQueries({ key: ['message-groups', messageGroupId] })
-    },
+  return useQuery({
+    key: () => ['organization-wabas', organization.organizationId],
+    query: () => metaApi.getWabas(organization.requireOrganizationId()),
+    enabled: () => hasWhatsapp.value && !!organization.organizationId,
+    staleTime: 5 * 60 * 1000,
   })
 }

package/app/stores/appContext.ts

@@ -1,36 +1,30 @@
-import { ref, computed, watch } from 'vue'
+import { computed, watch } from 'vue'
 import {
   MESSAGE_GROUP_PRODUCTS,
   type AppContextConfig,
-  type AppContextState,
 } from '@dev.smartpricing/message-composer-utils/types'
 
 export const useAppContextStore = defineStore('appContext', () => {
   const ctx = useComposerContext()
 
-  const isInitialized = ref<boolean>(false)
-
-  // Proxy from injection with defaults (same interface as before)
+  // Proxy from injection with defaults
   const organization_id = computed(() => ctx.organization_id?.value ?? '')
+  // A Host that passes the key owns the choice of Organization, even while
+  // the value is still empty (ADR 0014). Fixed for the session, like the key.
+  const hostOwnsOrganization = ctx.organization_id !== undefined
   // The Product is required by the context type (ADR 0011), but a host can
   // still omit it at runtime: read defensively and list it in
   // `validationErrors` rather than crashing or falling back to a fake Product.
   const product = computed<AppContextConfig['product'] | undefined>(() => ctx.product?.value)
-  const strategy = computed<NonNullable<AppContextConfig['strategy']>>(
-    () => ctx.strategy?.value ?? 'native',
-  )
   const channels = computed<NonNullable<AppContextConfig['channels']>>(
     () => ctx.channels?.value ?? ['email', 'whatsapp'],
   )
   const languages = computed<string[]>(() => ctx.languages?.value ?? ['en', 'de', 'fr', 'it', 'es'])
   const mainLanguage = computed(() => ctx.mainLanguage?.value ?? 'en')
-  const dinamicValues = computed<Array<{ value: string; label: string }>>(
-    () => ctx.dinamicValues?.value ?? [],
-  )
   const default_tags = computed<string[]>(() => ctx.default_tags?.value ?? [])
   const isAdmin = computed(() => ctx.isAdmin?.value ?? false)
-  const metaWabaId = computed(() => ctx.metaWabaId?.value ?? '')
-  const metaAccessToken = computed(() => ctx.metaAccessToken?.value ?? '')
+  // The Host's preselection among the Organization's WABAs (ADR 0015).
+  const metaWabaId = computed(() => ctx.metaWabaId?.value || undefined)
 
   // Sync i18n locale when mainLanguage changes
   watch(
@@ -43,20 +37,6 @@ export const useAppContextStore = defineStore('appContext', () => {
     { immediate: true },
   )
 
-  // Computed context object for convenience
-  const context = computed<AppContextState>(() => ({
-    product: product.value,
-    strategy: strategy.value,
-    channels: channels.value,
-    languages: languages.value,
-    mainLanguage: mainLanguage.value,
-    metaWabaId: metaWabaId.value,
-    metaAccessToken: metaAccessToken.value,
-    organization_id: organization_id.value,
-    default_tags: default_tags.value,
-    initializationSource: 'injection',
-  }))
-
   // Validation
   const validationErrors = computed<Record<string, string>>(() => {
     const errors: Record<string, string> = {}
@@ -65,36 +45,20 @@ export const useAppContextStore = defineStore('appContext', () => {
       errors.product = `Product is required: pass \`product\` (${MESSAGE_GROUP_PRODUCTS.join(' | ')}) in the composer context`
     }
 
-    if (channels.value?.includes('whatsapp') && !metaWabaId.value) {
-      errors.metaConfig = 'Meta WABA ID is required for WhatsApp'
-    }
-
     return errors
   })
 
-  // Initialize — parent is responsible for providing valid context
-  async function initialize() {
-    isInitialized.value = true
-  }
-
   return {
     product,
-    strategy,
     channels,
     languages,
     mainLanguage,
-    dinamicValues,
-    metaWabaId,
-    metaAccessToken,
     organization_id,
+    hostOwnsOrganization,
     default_tags,
     isAdmin,
+    metaWabaId,
 
-    isInitialized: computed(() => isInitialized.value),
-
-    context,
     validationErrors,
-
-    initialize,
   }
 })

package/app/stores/effectiveOrganization.ts

@@ -0,0 +1,128 @@
+import type { ReachableOrganization } from '@dev.smartpricing/message-composer-utils/types'
+
+/** Local storage key of the Organization last picked in the selector. */
+const REMEMBERED_ORGANIZATION_KEY = 'message-composer:organization'
+
+/**
+ * - `resolving`: the Reachable Organizations lookup is running, or the Host
+ *   that owns the choice has not supplied its Organization yet
+ * - `resolved`: there is an Organization to work on
+ * - `failed`: the lookup failed, `retry()` runs it again
+ * - `none`: the user reaches no Organization
+ */
+export type OrganizationResolutionStatus = 'resolving' | 'resolved' | 'failed' | 'none'
+
+/**
+ * The Effective Organization (ADR 0014): the Organization of the resource
+ * being viewed or edited while a page claims one, otherwise the resolved one.
+ * A Host that passes `organization_id` owns the choice: the resolved one is
+ * its value, and nothing is resolved until that value arrives. Otherwise it
+ * is the user's only Reachable Organization; else the remembered selection if
+ * still reachable; else the first Reachable Organization.
+ */
+export const useEffectiveOrganizationStore = defineStore('effectiveOrganization', () => {
+  const appContext = useAppContextStore()
+  const { organization_id: hostOrganizationId } = storeToRefs(appContext)
+  const { hostOwnsOrganization } = appContext
+  const remembered = useLocalStorage(REMEMBERED_ORGANIZATION_KEY, '')
+
+  /** Undefined until the lookup has answered. */
+  const reachable = shallowRef<ReachableOrganization[]>()
+  const lookupState = ref<'idle' | 'loading' | 'failed'>('idle')
+
+  async function lookUp() {
+    if (lookupState.value === 'loading') return
+    lookupState.value = 'loading'
+    try {
+      // Imported on demand: the API client reads the runtime config when its
+      // module loads, and this store is reachable from plugins that load
+      // before the Nuxt app exists (same reason as in `useTracking`).
+      const { organizationApi } = await import('~/api/organization')
+      reachable.value = await organizationApi.getReachable()
+      lookupState.value = 'idle'
+    } catch {
+      lookupState.value = 'failed'
+    }
+  }
+
+  // A Host that supplies the Organization needs no lookup, however late its
+  // value arrives: falling back to a Reachable Organization meanwhile would
+  // send requests to one the Host did not mean (PAY-2882). Plain state rather
+  // than a query: the store outlives whichever component first asks for it.
+  if (!hostOwnsOrganization) void lookUp()
+
+  const reachableOrganizations = computed(() => reachable.value ?? [])
+
+  const resolvedOrganizationId = computed<string | null>(() => {
+    if (hostOwnsOrganization) return hostOrganizationId.value || null
+
+    const organizations = reachableOrganizations.value
+    // Reading `remembered` here is what validates it on load: a selection that
+    // is no longer reachable is ignored.
+    const selected =
+      organizations.length > 1 ? organizations.find((o) => o.id === remembered.value) : undefined
+    return (selected ?? organizations[0])?.id ?? null
+  })
+
+  /** The Organization of the resource on screen, and the component that claimed it. */
+  const resourceClaim = shallowRef<{ claimant: symbol; organizationId: string }>()
+
+  const organizationId = computed<string | null>(
+    () => resourceClaim.value?.organizationId ?? resolvedOrganizationId.value,
+  )
+
+  /**
+   * The Effective Organization for a request that has to name it (ADR 0014).
+   * Throws while none is resolved, so a resource request never leaves without
+   * its Organization (PAY-2882): callers wait for it to be resolved.
+   */
+  function requireOrganizationId(): string {
+    if (!organizationId.value) {
+      throw new Error('[message-composer] No Organization resolved yet: the request was not sent')
+    }
+    return organizationId.value
+  }
+
+  /** See `useResourceOrganization`: pages do not call this directly. */
+  function claimResource(claimant: symbol, id: string | null | undefined) {
+    if (id) resourceClaim.value = { claimant, organizationId: id }
+    else releaseResource(claimant)
+  }
+
+  // Only the claimant releases: a page that mounts before the previous one is
+  // gone must not lose its claim to the other's cleanup.
+  function releaseResource(claimant: symbol) {
+    if (resourceClaim.value?.claimant === claimant) resourceClaim.value = undefined
+  }
+
+  const status = computed<OrganizationResolutionStatus>(() => {
+    if (organizationId.value) return 'resolved'
+    if (lookupState.value === 'failed') return 'failed'
+    if (lookupState.value === 'idle' && reachable.value) return 'none'
+    return 'resolving'
+  })
+
+  /** The selector is offered only when the choice is the user's to make. */
+  const isSelectable = computed(
+    () => !hostOwnsOrganization && reachableOrganizations.value.length > 1,
+  )
+
+  function select(id: string) {
+    if (reachableOrganizations.value.some((o) => o.id === id)) {
+      remembered.value = id
+    }
+  }
+
+  return {
+    organizationId,
+    requireOrganizationId,
+    resolvedOrganizationId,
+    reachableOrganizations,
+    status,
+    isSelectable,
+    select,
+    retry: lookUp,
+    claimResource,
+    releaseResource,
+  }
+})

package/app/stores/emailEditor.ts

@@ -199,7 +199,11 @@ export const useEmailEditorStore = defineStore('emailEditor', () => {
     sort_by?: 'created_at' | 'name'
     direction?: 'asc' | 'desc'
   }) {
-    brands.value = await brandsApi.getAll(options)
+    // The Brands of the Effective Organization: the edited Message Group's.
+    brands.value = await brandsApi.getAll({
+      ...options,
+      organization_id: useEffectiveOrganizationStore().requireOrganizationId(),
+    })
     return brands.value
   }