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

package/app/api/client.ts

@@ -15,7 +15,9 @@ function assertAppError(data: unknown): data is AppError {
 export const apiClient = createApiClient({
   baseURL: useRuntimeConfig().public.COMPOSER_API_URL as string,
   csrf: {
-    cookieName: (useRuntimeConfig().public.ENV_CSRF_COOKIE_NAME as string) || 'smt_csrf',
+    // Same key and derivation as platform-layer's own client: the host sets the
+    // full cookie name (env-suffixed: smt_csrf / smt_csrf_stage / smt_csrf_dev).
+    cookieName: (useRuntimeConfig().public.CSRF_COOKIE_NAME as string) || 'smt_csrf',
   },
   auth: {
     refreshBaseURL:

package/app/api/dynamicValues.ts

@@ -1,11 +1,8 @@
-import type {
-  DynamicValuesResponse,
-  MessageGroupProduct,
-} from '@dev.smartpricing/message-composer-utils/types'
+import type { DynamicValuesResponse } from '@dev.smartpricing/message-composer-utils/types'
 import { apiClient } from './client'
 
 export const dynamicValuesApi = {
-  get: (product: MessageGroupProduct, language: string) => {
+  get: (product: string, language: string) => {
     const params = new URLSearchParams()
     params.set('product', product)
     params.set('language', language)

package/app/api/messageGroups.ts

@@ -1,38 +1,27 @@
 import type {
   MessageGroupFromDb,
-  PaginatedResponse,
   MessageGroupWithMessages,
   MessageGroupWithMessageSummary,
   MessageGroupValidationResponse,
   PostEntity,
   MessageGroup,
+  RenderType,
   DuplicateMessageGroupBody,
-  ListMessageGroupsQuery,
 } from '@dev.smartpricing/message-composer-utils/types'
 import { apiClient } from './client'
 
-/**
- * Query params of `GET /message-groups`, straight from the shared schema
- * (ADR 0007): snake_case, as on the wire. `visibility` other than `public`
- * is admin-only (403 otherwise); every field is optional here, the server
- * applies the defaults.
- */
-export type ListMessageGroupsOptions = Partial<ListMessageGroupsQuery>
-
-function listQueryString(options: ListMessageGroupsOptions = {}): string {
-  const params = new URLSearchParams()
-  for (const [name, value] of Object.entries(options)) {
-    if (value !== undefined && value !== '') params.set(name, String(value))
-  }
-  return params.size ? `?${params.toString()}` : ''
-}
-
 export const messageGroupsApi = {
-  /** One page of the server-side filtered list, in the Laravel envelope (ADR 0012). */
-  list: (options?: ListMessageGroupsOptions) =>
-    apiClient<PaginatedResponse<MessageGroupWithMessageSummary>>(
-      `/message-groups${listQueryString(options)}`,
-    ),
+  getAll: (options?: { renderType?: RenderType; tags?: string[]; tagsMode?: 'and' | 'or' }) => {
+    const params = new URLSearchParams()
+    if (options?.renderType) params.set('render_type', options.renderType)
+    if (options?.tags && options.tags.length > 0) {
+      options.tags.forEach((tag) => params.append('tags', tag))
+    }
+    if (options?.tagsMode) params.set('tags_mode', options.tagsMode)
+
+    const query = params.size ? `?${params.toString()}` : ''
+    return apiClient<MessageGroupWithMessageSummary[]>(`/message-groups${query}`)
+  },
 
   getById: (id: string) => apiClient<MessageGroupWithMessages>(`/message-groups/${id}`),
 

package/app/components/Common/MessageGroupSelect.vue

@@ -1,18 +1,9 @@
 <script setup lang="ts">
-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'
+import type { RenderType, MessageStatus } from '@dev.smartpricing/message-composer-utils/types'
+import { useMessageGroupsQuery } from '~/queries/messageGroups'
 
 defineOptions({ name: 'MessageGroupSelect' })
 
-/**
- * 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
@@ -43,88 +34,11 @@ 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()
 
-// 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 or context Product starts over from page one.
-const searchTerm = ref('')
-const page = ref(1)
-
-// 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.
-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',
-  }),
-  resetOn: [() => appContext.product],
-  enabled: () => appContext.product != null,
-})
-
-// 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 { data: messageGroups, isLoading } = useMessageGroupsQuery(() => ({
+  renderType: props.renderType,
+}))
 
 const hideInactive = ref(false)
 
@@ -133,6 +47,7 @@ function isGroupActive(messages: Array<{ status: MessageStatus }>): boolean {
 }
 
 const items = computed(() => {
+  if (!messageGroups.value) return []
   return messageGroups.value.reduce<
     Array<{
       label: string
@@ -165,21 +80,18 @@ const items = computed(() => {
 
 function handleUpdate(value: string) {
   modelValue.value = value
-  const group = messageGroups.value.find((g) => g.id === value)
-  lastPicked.value = group
+  const group = messageGroups.value?.find((g) => g.id === value)
   emit('select', { id: value, name: group?.name ?? '' })
 }
 </script>
 
 <template>
   <USelectMenu
-    v-model:search-term="searchTerm"
     :model-value="modelValue"
     :items="items"
     value-key="value"
-    :loading="isLoadingFirstPage"
+    :loading="isLoading"
     searchable
-    ignore-filter
     :placeholder="placeholder"
     :search-input="{ placeholder: searchPlaceholder }"
     :data-testid="messageGroupSelectTestIds.root"
@@ -200,18 +112,5 @@ function handleUpdate(value: string) {
         </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>
 </template>

package/app/components/Composer/MessageLibrary.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+  useMessageGroupsQuery,
   useDeleteMessageGroupMutation,
   usePublishMessageGroupMutation,
   useUnpublishMessageGroupMutation,
@@ -9,6 +10,7 @@ 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 })
@@ -24,17 +26,12 @@ const emit = defineEmits<{
 const { trackEvent } = useTracking()
 const { t } = useI18n()
 
-// List state + server-side paginated query (ADR 0012)
+// Query
 const {
-  state: listState,
-  setFilters,
-  setSorting,
-  setPage,
-  rows: messageGroups,
-  meta,
-  loading: isFetching,
+  data: messageGroups,
+  isPending: isFetching,
   refetch: execute,
-} = useMessageGroupList(renderType)
+} = useMessageGroupsQuery(computed(() => ({ renderType: renderType.value })))
 
 // Polling
 const interval = setInterval(() => execute(), 15000)
@@ -147,15 +144,8 @@ defineExpose({ execute })
 <template>
   <BaseTable
     :loading="isFetching"
-    :message-groups="messageGroups"
-    :meta="meta"
+    :message-groups="messageGroups || []"
     :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/Editor/RichTextEditor.vue

@@ -10,6 +10,7 @@ import type {
 } from '@dev.smartpricing/message-composer-utils/types'
 import {
   buildLinkHTMLAttributes,
+  convertToWhatsappHeaderText,
   convertToWhatsappMarkdown,
   getTipTapExtensions,
   sanitizeContent,
@@ -25,7 +26,7 @@ const { t } = useI18n()
 
 const props = withDefaults(
   defineProps<{
-    preset: 'whatsapp' | 'email'
+    preset: 'whatsapp' | 'whatsapp-header' | 'email'
     characterLimit?: number
     dynamicValues?: boolean
     defaultContext?: string
@@ -277,9 +278,12 @@ const toolbarItems = computed(() => {
 // WhatsApp markdown-aware character count
 // Meta counts the final markdown output (with *bold*, _italic_ marks),
 // so we must display that count instead of TipTap's document-model count.
+const isWhatsapp = computed(() => props.preset === 'whatsapp' || props.preset === 'whatsapp-header')
 const whatsappCharCount = computed(() => {
-  if (props.preset !== 'whatsapp' || !props.characterLimit || !text.value) return 0
-  return convertToWhatsappMarkdown(text.value).length
+  if (!isWhatsapp.value || !props.characterLimit || !text.value) return 0
+  return props.preset === 'whatsapp-header'
+    ? convertToWhatsappHeaderText(text.value).length
+    : convertToWhatsappMarkdown(text.value).length
 })
 
 // Handlers
@@ -482,7 +486,7 @@ defineExpose({
         {{ $t('editor.validation.character_limit') }}
       </span>
       <span>
-        {{ preset === 'whatsapp' ? whatsappCharCount : editor.storage.characterCount.characters() }}
+        {{ isWhatsapp ? whatsappCharCount : editor.storage.characterCount.characters() }}
         / {{ characterLimit }}
       </span>
     </p>