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

package/app/components/Common/AppContextErrors.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useAppContextStore } from '~/stores/appContext'
+
+/**
+ * Host-integration problems reported by the app-context store (missing
+ * Product, ...). Shown persistently: the host has to fix its context, the
+ * user cannot.
+ */
+const { validationErrors } = storeToRefs(useAppContextStore())
+const messages = computed(() => Object.values(validationErrors.value))
+</script>
+
+<template>
+  <UAlert
+    v-if="messages.length"
+    color="error"
+    variant="subtle"
+    icon="i-lucide-alert-triangle"
+    :title="$t('common.context_error_title')"
+    class="rounded-none"
+  >
+    <template #description>
+      <ul class="list-disc pl-4 space-y-1">
+        <li v-for="message in messages" :key="message">
+          {{ message }}
+        </li>
+      </ul>
+    </template>
+  </UAlert>
+</template>

package/app/components/Common/HtmlPreviewIframe.vue

@@ -17,6 +17,8 @@ const props = withDefaults(
 
 const iframeRef = useTemplateRef<HTMLIFrameElement>('iframe')
 const measuredHeight = ref(0)
+// The first document comes from `srcdoc`; later ones are written in place (see the watch).
+const initialHtml = props.html
 
 const heightStyle = computed(() => {
   if (!measuredHeight.value) return `${props.minHeight}px`
@@ -44,10 +46,22 @@ function onLoad() {
   observeContent()
 }
 
+/**
+ * Replace the document in place instead of re-binding `srcdoc`: a `srcdoc`
+ * change is a navigation, which blanks the frame and drops the height for a
+ * few frames. Writing keeps the frame painted and the last measured height
+ * until the new content is measured.
+ */
 watch(
   () => props.html,
-  () => {
-    measuredHeight.value = 0
+  (html) => {
+    const doc = iframeRef.value?.contentDocument
+    if (!doc) return
+    doc.open()
+    doc.write(html)
+    doc.close()
+    fitToContent()
+    observeContent()
   },
 )
 
@@ -59,7 +73,7 @@ onBeforeUnmount(() => {
 <template>
   <iframe
     ref="iframe"
-    :srcdoc="html"
+    :srcdoc="initialHtml"
     :title="title"
     sandbox="allow-same-origin"
     :style="{ height: heightStyle }"

package/app/components/Common/MessageGroupSelect.vue

@@ -1,9 +1,41 @@
 <script setup lang="ts">
-import type { RenderType, MessageStatus } from '@dev.smartpricing/message-composer-utils/types'
-import { useMessageGroupsQuery } from '~/queries/messageGroups'
+import type { MessageStatus, RenderType } from '@dev.smartpricing/message-composer-utils/types'
+import { usePagedMessageGroups } from '~/composables/usePagedMessageGroups'
+import { useMessageGroupQuery } from '~/queries/messageGroups'
+import { useAppContextStore } from '~/stores/appContext'
 
 defineOptions({ name: 'MessageGroupSelect' })
 
+type MessageGroupEligibility = 'active' | 'sendable'
+
+/** Per mode: the selectability rule and the copy shown for groups that fail it. */
+const ELIGIBILITY_RULES: Record<
+  MessageGroupEligibility,
+  {
+    isEligible: (messages: Array<{ status: MessageStatus }>) => boolean
+    tooltipKey: string
+    hideFilterKey: string
+  }
+> = {
+  active: {
+    isEligible: (messages) => messages.length > 0 && messages.every((m) => m.status === 'approved'),
+    tooltipKey: 'common.messageGroupSelect.inactive_tooltip',
+    hideFilterKey: 'common.messageGroupSelect.hide_inactive',
+  },
+  sendable: {
+    isEligible: (messages) => messages.some((m) => m.status === 'approved'),
+    tooltipKey: 'common.messageGroupSelect.not_sendable_tooltip',
+    hideFilterKey: 'common.messageGroupSelect.hide_not_sendable',
+  },
+}
+
+/**
+ * In-composer Message Group picker (ADR 0012). Always lists the context
+ * Product's groups only: search is server-side, debounced and bound to the
+ * menu's search input; pages of 100 load on demand through "Load more".
+ * The selected group stays in the menu even when the loaded pages no longer
+ * contain it (search cleared, paging reset, or preselected beyond page one).
+ */
 const props = withDefaults(
   defineProps<{
     renderType?: RenderType
@@ -21,10 +53,22 @@ const props = withDefaults(
     disabledGroupReasons?: Record<string, string>
     /** Overrides the "hide inactive" filter label. Defaults to the built-in translation. */
     hideFilterLabel?: string
+    /**
+     * Which groups are selectable: `active` (every Message approved, the
+     * composer's own rule) or `sendable` (at least one approved Message, the
+     * Message Send Flow's rule). The disabled tooltip and the hide filter
+     * follow the mode.
+     */
+    eligibility?: MessageGroupEligibility
+    /** Lists this Organization's groups instead of the resolved Organization's. */
+    organizationId?: string
+    /** Lists only the WhatsApp groups on this WABA (ADR 0015); needs `renderType: 'whatsapp_v1'`. */
+    wabaId?: string
   }>(),
   {
     placeholder: 'Select a message group',
     searchPlaceholder: 'Search...',
+    eligibility: 'active',
   },
 )
 
@@ -34,20 +78,102 @@ const emit = defineEmits<{
   select: [item: { id: string; name: string }]
 }>()
 
+/** What the picker needs from a group, whichever endpoint it came from. */
+interface PickerGroup {
+  id: string
+  name: string
+  messages: Array<{ status: MessageStatus }>
+}
+
+const PER_PAGE = 100
+
 const { t } = useI18n()
+const appContext = useAppContextStore()
 
-const { data: messageGroups, isLoading } = useMessageGroupsQuery(() => ({
-  renderType: props.renderType,
-}))
+// Server-side search: the menu's own client filter is off (`ignore-filter`),
+// the typed term reaches the list request once it settles. A new search,
+// render type, context Product or WABA starts over from page one.
+const searchTerm = ref('')
+const page = ref(1)
 
-const hideInactive = ref(false)
+// Without a context Product the server would answer with every Product's
+// groups (ADR 0011): never ask. The host's missing Product is already reported
+// by the app-context validation.
+// Only WhatsApp groups are on a WABA: with any other render type the filter would empty the list.
+const wabaFilter = computed(() =>
+  props.renderType === 'whatsapp_v1' ? props.wabaId || undefined : undefined,
+)
 
-function isGroupActive(messages: Array<{ status: MessageStatus }>): boolean {
-  return messages.length > 0 && messages.every((m) => m.status === 'approved')
-}
+const {
+  query: { data: envelope, isPlaceholderData },
+  loading,
+} = usePagedMessageGroups({
+  search: searchTerm,
+  page,
+  perPage: PER_PAGE,
+  renderType: () => props.renderType,
+  filters: () => ({
+    product: appContext.product,
+    visibility: appContext.isAdmin ? 'all' : 'public',
+    waba_id: wabaFilter.value,
+  }),
+  resetOn: [() => appContext.product, wabaFilter],
+  enabled: () => appContext.product != null,
+  organizationId: () => props.organizationId,
+})
+
+// Pages loaded so far, indexed by page number: page one replaces everything,
+// later pages slot in at their index (a refetch replaces, never duplicates).
+const pages = shallowRef<PickerGroup[][]>([])
+watch(
+  envelope,
+  (value) => {
+    if (!value) return
+    const index = value.meta.current_page - 1
+    pages.value = index === 0 ? [value.data] : [...pages.value.slice(0, index), value.data]
+  },
+  { immediate: true },
+)
+const loadedGroups = computed(() => pages.value.flat())
+
+// The selected group is pinned on top of the loaded pages when they do not
+// contain it: remembered from the last pick, or fetched by id when preselected.
+const lastPicked = shallowRef<PickerGroup>()
+const missingSelectedId = computed(() => {
+  const id = modelValue.value
+  if (!id || loadedGroups.value.some((g) => g.id === id)) return undefined
+  return lastPicked.value?.id === id ? undefined : id
+})
+const { data: fetchedSelected } = useMessageGroupQuery(() => missingSelectedId.value ?? '', {
+  enabled: () => missingSelectedId.value != null,
+})
+const messageGroups = computed<PickerGroup[]>(() => {
+  const id = modelValue.value
+  if (!id || loadedGroups.value.some((g) => g.id === id)) return loadedGroups.value
+  const pinned =
+    lastPicked.value?.id === id
+      ? lastPicked.value
+      : fetchedSelected.value?.id === id
+        ? fetchedSelected.value
+        : undefined
+  return pinned ? [pinned, ...loadedGroups.value] : loadedGroups.value
+})
+
+const hasMore = computed(
+  () =>
+    !isPlaceholderData.value &&
+    envelope.value != null &&
+    envelope.value.meta.current_page < envelope.value.meta.last_page,
+)
+const isLoadingFirstPage = computed(() => page.value === 1 && loading.value)
+const isLoadingMore = computed(() => page.value > 1 && loading.value)
+
+const hideIneligible = ref(false)
+
+const rule = computed(() => ELIGIBILITY_RULES[props.eligibility])
+const hideFilterLabel = computed(() => props.hideFilterLabel ?? t(rule.value.hideFilterKey))
 
 const items = computed(() => {
-  if (!messageGroups.value) return []
   return messageGroups.value.reduce<
     Array<{
       label: string
@@ -58,20 +184,18 @@ const items = computed(() => {
     }>
   >((acc, group) => {
     const externalReason = props.disabledGroupReasons?.[group.id]
-    const externallyUsed = externalReason != null
-    const active = isGroupActive(group.messages)
-    const disabled = !active || externallyUsed
-    if (hideInactive.value && disabled) return acc
+    const eligible = rule.value.isEligible(group.messages)
+    const disabled = !eligible || externalReason != null
+    if (hideIneligible.value && disabled) return acc
+    // External reason wins over the mode's own tooltip when both apply.
+    let tooltip: string | undefined
+    if (externalReason != null) tooltip = externalReason
+    else if (!eligible) tooltip = t(rule.value.tooltipKey)
     acc.push({
       label: group.name,
       value: group.id,
       disabled,
-      // External reason wins over the inactive tooltip when both apply.
-      tooltip: externallyUsed
-        ? externalReason
-        : !active
-          ? t('common.messageGroupSelect.inactive_tooltip')
-          : undefined,
+      tooltip,
       chip: { color: disabled ? 'neutral' : 'success' },
     })
     return acc
@@ -80,18 +204,21 @@ const items = computed(() => {
 
 function handleUpdate(value: string) {
   modelValue.value = value
-  const group = messageGroups.value?.find((g) => g.id === value)
+  const group = messageGroups.value.find((g) => g.id === value)
+  lastPicked.value = group
   emit('select', { id: value, name: group?.name ?? '' })
 }
 </script>
 
 <template>
   <USelectMenu
+    v-model:search-term="searchTerm"
     :model-value="modelValue"
     :items="items"
     value-key="value"
-    :loading="isLoading"
+    :loading="isLoadingFirstPage"
     searchable
+    ignore-filter
     :placeholder="placeholder"
     :search-input="{ placeholder: searchPlaceholder }"
     :data-testid="messageGroupSelectTestIds.root"
@@ -106,10 +233,21 @@ function handleUpdate(value: string) {
 
     <template #content-top>
       <div class="flex items-center gap-2 px-2 py-1.5 border-b border-default">
-        <USwitch v-model="hideInactive" size="xs" />
-        <span class="text-xs text-muted">
-          {{ hideFilterLabel ?? t('common.messageGroupSelect.hide_inactive') }}
-        </span>
+        <USwitch v-model="hideIneligible" size="xs" />
+        <span class="text-xs text-muted">{{ hideFilterLabel }}</span>
+      </div>
+    </template>
+
+    <template v-if="hasMore || isLoadingMore" #content-bottom>
+      <div class="flex justify-center px-2 py-1.5 border-t border-default">
+        <UButton
+          variant="link"
+          size="xs"
+          :loading="isLoadingMore"
+          :label="t('common.messageGroupSelect.load_more')"
+          :data-testid="messageGroupSelectTestIds.loadMore"
+          @click="page++"
+        />
       </div>
     </template>
   </USelectMenu>

package/app/components/Common/MessagePreviewSlideover.vue

@@ -14,6 +14,8 @@ import { useEmailEditorStore } from '~/stores/emailEditor'
 interface Props {
   message: PostEntity<Message> | MessageFromDb | null | undefined
   messageGroupId?: string
+  /** WhatsApp only, forwarded to `WhatsappPreview`: operator-typed values overriding the resolved ones. No effect on the email preview. */
+  parameters?: Record<string, string>
 }
 
 const props = defineProps<Props>()
@@ -72,6 +74,7 @@ const isEmail = computed(() => renderType.value === 'email_v1')
         v-if="isWhatsapp && messageGroupId"
         :message="message as WhatsappMessage"
         :message-group-id="messageGroupId"
+        :parameters="parameters"
       />
 
       <!-- Email Inline Preview (client-driven, reflects unsaved changes) -->

package/app/components/Common/OrganizationGate.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+/**
+ * Holds its content back until there is an Organization to work on, so no
+ * resource request leaves before it is resolved (ADR 0014).
+ */
+const organization = useEffectiveOrganizationStore()
+const { t } = useI18n()
+
+const failure = computed(() =>
+  organization.status === 'none'
+    ? {
+        title: t('common.organization.none_title'),
+        description: t('common.organization.none_description'),
+      }
+    : {
+        title: t('common.organization.lookup_failed_title'),
+        description: t('common.organization.lookup_failed_description'),
+      },
+)
+</script>
+
+<template>
+  <slot v-if="organization.status === 'resolved'" />
+
+  <div
+    v-else-if="organization.status === 'resolving'"
+    class="flex flex-1 flex-col items-center justify-center gap-3 py-12 text-muted"
+    role="status"
+  >
+    <UIcon name="i-heroicons-arrow-path" class="animate-spin h-8 w-8" />
+    <span class="text-sm">{{ t('common.organization.resolving') }}</span>
+  </div>
+
+  <div v-else class="p-4">
+    <UAlert
+      color="error"
+      variant="subtle"
+      icon="i-lucide-alert-triangle"
+      :title="failure.title"
+      :description="failure.description"
+      :actions="[
+        {
+          label: t('common.organization.retry'),
+          color: 'error',
+          variant: 'outline',
+          onClick: () => void organization.retry(),
+        },
+      ]"
+    />
+  </div>
+</template>

package/app/components/Common/OrganizationSelect.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+/**
+ * Organization selector of the list pages (Message Groups, Brands, images):
+ * filters what is listed and decides where new resources are created. Renders
+ * nothing when the Host supplied the Organization or the user reaches only one.
+ */
+const organization = useEffectiveOrganizationStore()
+const { t } = useI18n()
+
+const items = computed(() =>
+  organization.reachableOrganizations.map((o) => ({ label: o.name, value: o.id })),
+)
+</script>
+
+<template>
+  <USelectMenu
+    v-if="organization.isSelectable"
+    :model-value="organization.resolvedOrganizationId ?? undefined"
+    :items="items"
+    value-key="value"
+    icon="ph:buildings"
+    :search-input="{ placeholder: t('common.organization.search_placeholder') }"
+    :aria-label="t('common.organization.label')"
+    class="w-56"
+    @update:model-value="organization.select($event)"
+  />
+</template>

package/app/components/Common/WhatsappNotConfigured.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+/**
+ * Tells the user that the Effective Organization has no WABA: its WhatsApp
+ * messages can be drafted but not submitted to Meta. Follows the Organization,
+ * so it comes and goes with the selector and with the resource on screen.
+ */
+const { status } = useWhatsappConfiguration()
+</script>
+
+<template>
+  <UAlert
+    v-if="status === 'not_configured'"
+    color="warning"
+    variant="subtle"
+    icon="i-lucide-message-circle-off"
+    :title="$t('common.whatsapp_not_configured_title')"
+    :description="$t('common.whatsapp_not_configured_description')"
+    class="rounded-none"
+  />
+</template>

package/app/components/Composer/EmailComposer.vue

@@ -39,6 +39,10 @@ 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)
+
 // Change tracking (edit mode only)
 const messageGroupIdRef = computed(() => store.messageGroupId ?? '')
 const changeTracking = props.mode === 'edit' ? useChangeTrackingEmail(messageGroupIdRef) : null

package/app/components/Composer/MessageLibrary.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {
-  useMessageGroupsQuery,
   useDeleteMessageGroupMutation,
   usePublishMessageGroupMutation,
   useUnpublishMessageGroupMutation,
@@ -10,7 +9,6 @@ import type {
   RenderType,
 } from '@dev.smartpricing/message-composer-utils/types'
 import type { MessageActionProperties, MessagesKind } from '@/types/tracking'
-import { computed } from 'vue'
 import BaseTable from '@/components/TemplateList/BaseTable.vue'
 
 const renderType = defineModel<RenderType>('renderType', { required: true })
@@ -26,12 +24,17 @@ const emit = defineEmits<{
 const { trackEvent } = useTracking()
 const { t } = useI18n()
 
-// Query
+// List state + server-side paginated query (ADR 0012)
 const {
-  data: messageGroups,
-  isPending: isFetching,
+  state: listState,
+  setFilters,
+  setSorting,
+  setPage,
+  rows: messageGroups,
+  meta,
+  loading: isFetching,
   refetch: execute,
-} = useMessageGroupsQuery(computed(() => ({ renderType: renderType.value })))
+} = useMessageGroupList(renderType)
 
 // Polling
 const interval = setInterval(() => execute(), 15000)
@@ -144,8 +147,15 @@ defineExpose({ execute })
 <template>
   <BaseTable
     :loading="isFetching"
-    :message-groups="messageGroups || []"
+    :message-groups="messageGroups"
+    :meta="meta"
     :render-type="renderType"
+    :filters="listState"
+    :sorting="listState"
+    :page="listState.page"
+    @update:filters="setFilters"
+    @update:sorting="setSorting"
+    @update:page="setPage"
     @edit="navigate"
     @delete="askDeleteGroup"
     @duplicate="handleDuplicate"

package/app/components/Composer/WabaSelectModal.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { OrganizationWaba } from '@dev.smartpricing/message-composer-utils/types'
+
+/**
+ * Asks which WABA a Message Group is submitted to, at its first submission,
+ * when its Organization has several (ADR 0015). Opened through `useOverlay`:
+ * closes with the chosen WABA id, or with nothing when the user gives up.
+ */
+const props = defineProps<{
+  wabas: OrganizationWaba[]
+  /** The Host's WABA, already checked to be one of `wabas`. */
+  preselected?: string
+}>()
+
+const emit = defineEmits<{ close: [wabaId?: string] }>()
+
+const selected = ref<string | undefined>(props.preselected)
+
+const items = computed(() =>
+  props.wabas.map((waba) => ({
+    value: waba.id,
+    label: waba.name || waba.id,
+    numbers: waba.phone_numbers.join(', '),
+    // Not `id`: the radio group gives each item one of its own.
+    wabaId: waba.id,
+  })),
+)
+</script>
+
+<template>
+  <UModal
+    :title="$t('dialogs.select_waba.title')"
+    :description="$t('dialogs.select_waba.description')"
+    close-icon="ph:x"
+    :close="{ onClick: () => emit('close') }"
+    :dismissible="false"
+    data-testid="waba-select-modal"
+  >
+    <template #body>
+      <URadioGroup
+        v-model="selected"
+        :items="items"
+        variant="table"
+        class="w-full"
+        :ui="{ item: 'w-full' }"
+        data-testid="waba-select-options"
+      >
+        <template #description="{ item }">
+          <span class="flex flex-col">
+            <span>{{ item.numbers || $t('dialogs.select_waba.no_numbers') }}</span>
+            <span class="text-xs text-dimmed font-mono">{{ item.wabaId }}</span>
+          </span>
+        </template>
+      </URadioGroup>
+    </template>
+
+    <template #footer>
+      <div class="flex gap-2 justify-end w-full">
+        <UButton
+          variant="outline"
+          color="neutral"
+          :label="$t('common.actions.cancel')"
+          data-testid="waba-select-cancel"
+          @click="emit('close')"
+        />
+        <UButton
+          :label="$t('dialogs.select_waba.confirm')"
+          :disabled="!selected"
+          data-testid="waba-select-confirm"
+          @click="emit('close', selected)"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>