@dev.smartpricing/message-composer-layer 4.3.2-fix.1 → 4.4.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/useMessageSendFlow.ts

@@ -0,0 +1,246 @@
+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'
+  | '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>
+  emit: <K extends keyof MessageSendFlowEmits>(event: K, ...args: MessageSendFlowEmits[K]) => void
+}) {
+  const { groupId, emit } = options
+  const { t } = useI18n()
+  const { trackEvent } = useTracking()
+
+  // --- 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',
+    })),
+  )
+
+  const sendable = computed(() => 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 { data: parametersData, isLoading: parametersLoading } = useQuery({
+    key: () => ['send-flow', 'parameters', groupId.value ?? '', selectedLanguage.value ?? ''],
+    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)
+  }
+
+  watch(notSendable, (value) => {
+    if (value) {
+      fail('NOT_SENDABLE')
+    } else if (flowError.value?.code === 'NOT_SENDABLE') {
+      flowError.value = undefined
+    }
+  })
+
+  // --- Compile (once, on Confirm) --------------------------------------------
+  const compiling = ref(false)
+  const canConfirm = computed(() => !!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,
+  }
+}

package/app/composables/usePagedMessageGroups.ts

@@ -0,0 +1,66 @@
+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>
+}
+
+/**
+ * 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 })
+
+  // 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.
+  watch(
+    [debouncedSearch, () => toValue(options.renderType), ...(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,7 @@ interface UseTemplateOperationsOptions {
 export function useTemplateOperations(options: UseTemplateOperationsOptions = {}) {
   const saving = ref(false)
   const saved = ref(false)
+  const appContext = useAppContextStore()
 
   // Hoist composables to setup scope (they use inject() internally)
   const { mutateAsync: createMessageGroup } = useCreateMessageGroupMutation()
@@ -39,9 +41,17 @@ 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,
+      } as PostEntity<MessageGroup>)
 
       if (createdMessageGroup?.id) {
         for (const message of Object.values(data.messages)) {

package/app/layouts/default.vue

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

package/app/queries/compilation.ts

@@ -37,7 +37,7 @@ export function useResolvedParametersQuery(
 export function useCompileEmailMutation() {
   return useMutation({
     mutation: ({ messageGroupId, data }: { messageGroupId: string; data: CompileMessageRequest }) =>
-      compilationApi.compileEmail(messageGroupId, data),
+      compilationApi.compile(messageGroupId, data),
   })
 }
 

package/app/queries/dynamicValues.ts

@@ -1,4 +1,5 @@
 import { useQuery } from '@pinia/colada'
+import type { DynamicValuesResponse } from '@dev.smartpricing/message-composer-utils/types'
 import { dynamicValuesApi } from '~/api'
 import { useAppContextStore } from '~/stores/appContext'
 
@@ -6,8 +7,13 @@ export function useDynamicValuesQuery() {
   const { product, mainLanguage } = storeToRefs(useAppContextStore())
 
   return useQuery({
-    key: () => ['dynamic-values', product.value, mainLanguage.value],
-    query: () => dynamicValuesApi.get(product.value || 'browser', mainLanguage.value || 'en'),
+    key: () => ['dynamic-values', product.value ?? '', mainLanguage.value],
+    // 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')
+    },
     staleTime: 30 * 60 * 1000,
   })
 }

package/app/queries/messageGroups.ts

@@ -1,39 +1,52 @@
 import { useQuery, useMutation, useQueryCache } from '@pinia/colada'
+import type { MaybeRefOrGetter } from 'vue'
 import type {
   DuplicateMessageGroupBody,
   MessageGroup,
   MessageGroupWithMessageSummary,
   PostEntity,
-  RenderType,
 } from '@dev.smartpricing/message-composer-utils/types'
 import { messageGroupsApi } from '~/api'
+import type { ListMessageGroupsOptions } from '~/api/messageGroups'
 
 // QUERIES
-export function useMessageGroupsQuery(
-  options?: MaybeRefOrGetter<{
-    renderType?: RenderType
-    tags?: string[]
-    tagsMode?: 'and' | 'or'
-  }>,
-  _queryOptions?: { polling?: boolean },
+
+/**
+ * Colada merges `{ ...defaults, ...options }`, so forwarding `enabled: undefined`
+ * overrides its default `true` and silently disables the query: it then only
+ * runs on an explicit `refetch` (the library's 15 s poll, mutation invalidations).
+ * Forward `enabled` only when the caller set it.
+ */
+function enabledOption(enabled?: MaybeRefOrGetter<boolean>) {
+  return enabled === undefined ? {} : { enabled }
+}
+/**
+ * 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.
+ */
+export function useMessageGroupListQuery(
+  options: MaybeRefOrGetter<ListMessageGroupsOptions>,
+  queryOptions: { enabled?: MaybeRefOrGetter<boolean> } = {},
 ) {
-  const query = useQuery({
+  return useQuery({
     key: () => ['message-groups', JSON.stringify(toValue(options))],
-    query: () => messageGroupsApi.getAll(toValue(options)),
+    query: () => messageGroupsApi.list(toValue(options)),
     staleTime: 0,
+    placeholderData: (previousData) => previousData,
+    ...enabledOption(queryOptions.enabled),
   })
-
-  // TODO: Implement polling when Pinia Colada supports it
-  // For now, polling can be done manually in the component using setInterval + refetch
-
-  return query
 }
 
-export function useMessageGroupQuery(id: MaybeRefOrGetter<string>) {
+export function useMessageGroupQuery(
+  id: MaybeRefOrGetter<string>,
+  queryOptions: { enabled?: MaybeRefOrGetter<boolean> } = {},
+) {
   return useQuery({
     key: () => ['message-groups', toValue(id)],
     query: () => messageGroupsApi.getById(toValue(id)),
     staleTime: 2 * 60 * 1000,
+    ...enabledOption(queryOptions.enabled),
   })
 }
 

package/app/stores/appContext.ts

@@ -1,7 +1,8 @@
 import { ref, computed, watch } from 'vue'
-import type {
-  AppContextConfig,
-  AppContextState,
+import {
+  MESSAGE_GROUP_PRODUCTS,
+  type AppContextConfig,
+  type AppContextState,
 } from '@dev.smartpricing/message-composer-utils/types'
 
 export const useAppContextStore = defineStore('appContext', () => {
@@ -11,9 +12,10 @@ export const useAppContextStore = defineStore('appContext', () => {
 
   // Proxy from injection with defaults (same interface as before)
   const organization_id = computed(() => ctx.organization_id?.value ?? '')
-  const product = computed<NonNullable<AppContextConfig['product']>>(
-    () => ctx.product?.value ?? 'browser',
-  )
+  // 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',
   )
@@ -59,6 +61,10 @@ export const useAppContextStore = defineStore('appContext', () => {
   const validationErrors = computed<Record<string, string>>(() => {
     const errors: Record<string, string> = {}
 
+    if (!product.value) {
+      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'
     }