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

package/app/components/TemplateList/BaseTable.vue

@@ -1,16 +1,36 @@
 <script setup lang="ts">
 import {
   MESSAGE_GROUP_CATEGORIES,
+  MESSAGE_GROUP_LIST_VISIBILITY,
+  MESSAGE_GROUP_PRODUCTS,
   MESSAGE_STATUS,
+  type MessageGroupListSort,
   type MessageGroupWithMessageSummary,
+  type PaginationMeta,
   type RenderType,
 } from '@dev.smartpricing/message-composer-utils/types'
 import StatusCell from '@/components/TemplateList/StatusCell.vue'
 import { useI18n } from 'vue-i18n'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { formatDate } from '@dev.smartpricing/message-composer-utils/utils'
 import type { TableColumn } from '#ui/types'
 import type { TrackingEventMap } from '@/types/tracking'
+import {
+  ALL_FILTER,
+  type MessageGroupListFilters,
+  type MessageGroupListSorting,
+} from '@/composables/useMessageGroupList'
+
+const props = defineProps<{
+  messageGroups: MessageGroupWithMessageSummary[]
+  /** Envelope meta of the current page; undefined until the first page arrives. */
+  meta?: PaginationMeta
+  loading: boolean
+  renderType: RenderType
+  filters: MessageGroupListFilters
+  sorting: MessageGroupListSorting
+  page: number
+}>()
 
 const emit = defineEmits<{
   edit: [MessageGroupWithMessageSummary]
@@ -18,6 +38,9 @@ const emit = defineEmits<{
   duplicate: [MessageGroupWithMessageSummary]
   publish: [MessageGroupWithMessageSummary]
   unpublish: [MessageGroupWithMessageSummary]
+  'update:filters': [Partial<MessageGroupListFilters>]
+  'update:sorting': [MessageGroupListSorting]
+  'update:page': [number]
 }>()
 
 const appContext = useAppContextStore()
@@ -86,49 +109,40 @@ function rowActions(row: MessageGroupWithMessageSummary) {
   ]
 }
 
+// Column ids of sortable columns are the server's `sort` values (ADR 0012);
+// preview and status are aggregates and stay unsortable.
 const columns: TableColumn<MessageGroupWithMessageSummary>[] = [
   {
-    id: 'name',
+    id: 'name' satisfies MessageGroupListSort,
     accessorKey: 'name',
     header: (ctx) => getSortableHeader(ctx, t('pages.message_library.headers.name')),
   },
   {
-    id: 'category',
+    id: 'category' satisfies MessageGroupListSort,
     accessorKey: 'category',
     header: (ctx) => getSortableHeader(ctx, t('pages.message_library.headers.category')),
-    filterFn: (row, columnId, filterValue) => {
-      if (filterValue === 'all') return true
-      return row.original.category.toLowerCase().includes(filterValue.toLowerCase())
-    },
+  },
+  {
+    id: 'product',
+    accessorKey: 'product',
+    enableSorting: false,
+    header: () => t('pages.message_library.headers.product'),
   },
   {
     id: 'preview',
     accessorFn: (row) => getLocalizedMessage(row)?.preview,
-    header: (ctx) => getSortableHeader(ctx, t('pages.message_library.headers.preview')),
+    enableSorting: false,
+    header: () => t('pages.message_library.headers.preview'),
   },
   {
     id: 'status',
     accessorFn: (row) => row.messages.map((m) => m.status).join(', '),
-    header: (ctx) => getSortableHeader(ctx, t('pages.message_library.headers.status')),
-    filterFn: (row, columnId, filterValue) => {
-      if (filterValue === 'all') return true
-      return row.original.messages.some((m) => m.status === filterValue)
-    },
+    enableSorting: false,
+    header: () => t('pages.message_library.headers.status'),
   },
-  // {
-  //   id: 'tags',
-  //   accessorFn: (row) => row.tags?.join(', ') || '',
-  //   header: (ctx) => getSortableHeader(ctx, t('pages.message_library.headers.tags')),
-  //   filterFn: (row, _columnId, filterValue: string[]) => {
-  //     if (!filterValue || filterValue.length === 0) return true
-  //     const rowTags = row.original.tags || []
-  //     return filterValue.some((tag) => rowTags.includes(tag))
-  //   },
-  // },
   {
-    id: 'updated_at',
+    id: 'updated_at' satisfies MessageGroupListSort,
     accessorFn: (row) => formatDate(row.updated_at),
-    // header: () => t('pages.message_library.headers.updated_at'),
     header: (ctx) => getSortableHeader(ctx, t('pages.message_library.headers.updated_at')),
   },
   {
@@ -144,77 +158,70 @@ const columns: TableColumn<MessageGroupWithMessageSummary>[] = [
   },
 ]
 
-const sorting = ref([
-  {
-    id: 'updated_at',
-    desc: true,
-  },
-])
+// The table's sorting model mirrors the server sort; TanStack never sorts locally (manualSorting).
+function toTableSorting(sorting: MessageGroupListSorting) {
+  return [{ id: sorting.sort, desc: sorting.order === 'desc' }]
+}
 
-const props = defineProps<{
-  messageGroups: MessageGroupWithMessageSummary[]
-  loading: boolean
-  renderType: RenderType
-}>()
+const sorting = ref(toTableSorting(props.sorting))
 
-const filteredMessageGroups = computed(() => {
-  if (appContext.isAdmin) return props.messageGroups
-  return props.messageGroups.filter((mg) => mg.visibility !== 'internal')
-})
+watch(
+  () => props.sorting,
+  (value) => {
+    sorting.value = toTableSorting(value)
+  },
+)
 
-const categoryItems = computed(() => {
-  return [
-    {
-      label: t('common.all'),
-      value: 'all',
-    },
-    ...MESSAGE_GROUP_CATEGORIES.map((category) => ({
-      label: t(`categories.${category}`),
-      value: category,
-    })),
-  ]
+watch(sorting, (val) => {
+  const [first] = val
+  if (!first) return
+  const next: MessageGroupListSorting = {
+    sort: first.id as MessageGroupListSort,
+    order: first.desc ? 'desc' : 'asc',
+  }
+  if (next.sort === props.sorting.sort && next.order === props.sorting.order) return
+  emit('update:sorting', next)
+  trackEvent('table_sorting', {
+    messages_kind: messagesKind.value,
+    sort_column: next.sort,
+  })
 })
 
-const statusItems = computed(() => {
+// Select items: the "all" entry first, then one translated entry per enum value.
+function toSelectItems<T extends string>(
+  values: readonly T[],
+  keyPrefix: string,
+  allLabel: string,
+) {
   return [
-    {
-      label: t('common.all'),
-      value: 'all',
-    },
-
-    ...MESSAGE_STATUS.map((status) => ({
-      label: t(`status.${status}`),
-      value: status,
-    })),
+    { label: allLabel, value: ALL_FILTER },
+    ...values.map((value) => ({ label: t(`${keyPrefix}.${value}`), value })),
   ]
-})
-
-// const tagItems = computed(() => {
-//   const allTags = new Set<string>()
-//   messageGroups.forEach((mg) => mg.tags?.forEach((tag) => allTags.add(tag)))
-//   return [...allTags].sort()
-// })
-
-// const selectedTags = ref<string[]>([])
+}
 
-const table = useTemplateRef('table')
+const categoryItems = computed(() =>
+  toSelectItems(MESSAGE_GROUP_CATEGORIES, 'categories', t('common.all')),
+)
+const statusItems = computed(() => toSelectItems(MESSAGE_STATUS, 'status', t('common.all')))
+const productItems = computed(() =>
+  toSelectItems(MESSAGE_GROUP_PRODUCTS, 'products', t('pages.message_library.all_products')),
+)
+
+const visibilityItems = computed(() =>
+  MESSAGE_GROUP_LIST_VISIBILITY.map((visibility) => ({
+    label: t(`pages.message_library.visibility.${visibility}`),
+    value: visibility,
+  })),
+)
 
 const messagesKind = computed(() => (props.renderType === 'email_v1' ? 'email' : 'whatsapp'))
 
-watch(sorting, (val) => {
-  if (val[0]) {
-    trackEvent('table_sorting', {
-      messages_kind: messagesKind.value,
-      sort_column: val[0].id,
-    })
-  }
-})
-
 function trackFilters(overrides: Partial<TrackingEventMap['change_filters']> = {}) {
   trackEvent('change_filters', {
-    search_term: (table.value?.tableApi?.getColumn('name')?.getFilterValue() as string) || '',
-    category: (table.value?.tableApi?.getColumn('category')?.getFilterValue() as string) || '',
-    status: (table.value?.tableApi?.getColumn('status')?.getFilterValue() as string) || '',
+    search_term: props.filters.search,
+    category: props.filters.category,
+    status: props.filters.status,
+    product: props.filters.product,
     messages_kind: messagesKind.value,
     ...overrides,
   })
@@ -225,19 +232,24 @@ const trackSearchFilter = useDebounceFn((value: string) => {
 }, 500)
 
 function onSearchInput(value: string) {
-  table.value?.tableApi?.getColumn('name')?.setFilterValue(value)
+  emit('update:filters', { search: value })
   trackSearchFilter(value)
 }
 
-function onCategoryFilter(value: string) {
-  table.value?.tableApi?.getColumn('category')?.setFilterValue(value)
-  trackFilters({ category: value })
+// USelect emits the option value as a plain string; the items are built from the typed enums.
+function onFilter(key: Exclude<keyof MessageGroupListFilters, 'search'>, value: string) {
+  emit('update:filters', { [key]: value } as Partial<MessageGroupListFilters>)
+  if (key !== 'visibility') trackFilters({ [key]: value })
 }
 
-function onStatusFilter(value: string) {
-  table.value?.tableApi?.getColumn('status')?.setFilterValue(value)
-  trackFilters({ status: value })
-}
+const paginationSummary = computed(() => {
+  if (!props.meta || props.meta.from === null || props.meta.to === null) return ''
+  return t('pages.message_library.pagination_summary', {
+    from: props.meta.from,
+    to: props.meta.to,
+    total: props.meta.total,
+  })
+})
 </script>
 
 <template>
@@ -247,38 +259,46 @@ function onStatusFilter(value: string) {
   >
     <div class="flex gap-2">
       <UInput
-        :model-value="table?.tableApi?.getColumn('name')?.getFilterValue() as string"
+        :model-value="filters.search"
         class="max-w-xs"
         leading-icon="ph:magnifying-glass-bold"
         :placeholder="t('pages.message_library.search_placeholder')"
         :data-testid="templateListTableTestIds.searchInput"
-        @update:model-value="onSearchInput($event)"
+        @update:model-value="onSearchInput(String($event))"
       />
       <USelect
-        :model-value="table?.tableApi?.getColumn('category')?.getFilterValue() as string"
+        :model-value="filters.category"
         class="max-w-48"
         :placeholder="t('pages.message_library.category_placeholder')"
         :items="categoryItems"
         :data-testid="templateListTableTestIds.categorySelect"
-        @update:model-value="onCategoryFilter($event)"
+        @update:model-value="onFilter('category', $event)"
       />
       <USelect
-        :model-value="table?.tableApi?.getColumn('status')?.getFilterValue() as string"
+        :model-value="filters.status"
         class="max-w-48"
         :placeholder="t('pages.message_library.status_placeholder')"
         :items="statusItems"
         :data-testid="templateListTableTestIds.statusSelect"
-        @update:model-value="onStatusFilter($event)"
+        @update:model-value="onFilter('status', $event)"
+      />
+      <USelect
+        :model-value="filters.product"
+        class="max-w-48"
+        :placeholder="t('pages.message_library.product_placeholder')"
+        :items="productItems"
+        :data-testid="templateListTableTestIds.productSelect"
+        @update:model-value="onFilter('product', $event)"
+      />
+      <USelect
+        v-if="appContext.isAdmin"
+        :model-value="filters.visibility"
+        class="max-w-48"
+        :placeholder="t('pages.message_library.visibility_placeholder')"
+        :items="visibilityItems"
+        :data-testid="templateListTableTestIds.visibilitySelect"
+        @update:model-value="onFilter('visibility', $event)"
       />
-      <!-- <USelectMenu
-            v-if="tagItems.length > 0"
-            v-model="selectedTags"
-            :items="tagItems"
-            multiple
-            class="max-w-48"
-            :placeholder="t('pages.message_library.tags_placeholder')"
-            @update:model-value="table?.tableApi?.getColumn('tags')?.setFilterValue($event)"
-          /> -->
     </div>
 
     <UCard
@@ -295,10 +315,10 @@ function onStatusFilter(value: string) {
           tr: 'hover:bg-muted',
           root: 'overflow-visible static',
         }"
-        :data="filteredMessageGroups"
+        :data="messageGroups"
         :columns="columns"
+        :sorting-options="{ manualSorting: true, enableSortingRemoval: false }"
         sticky
-        ref="table"
         v-model:sorting="sorting"
         :data-testid="templateListTableTestIds.table"
       >
@@ -329,6 +349,16 @@ function onStatusFilter(value: string) {
           />
         </template>
 
+        <template #product-cell="{ row }">
+          <UBadge
+            :label="t(`products.${row.original.product}`)"
+            size="md"
+            color="neutral"
+            variant="outline"
+            :data-testid="`${templateListTableTestIds.rowProductBadge}-${row.original.id}`"
+          />
+        </template>
+
         <template #status-cell="{ row }">
           <StatusCell :items="row.original.messages" />
         </template>
@@ -349,6 +379,24 @@ function onStatusFilter(value: string) {
           />
         </template>
       </UTable>
+
+      <template v-if="meta" #footer>
+        <div class="flex items-center justify-between gap-4">
+          <span
+            class="text-sm text-muted"
+            :data-testid="templateListTableTestIds.paginationSummary"
+          >
+            {{ paginationSummary }}
+          </span>
+          <UPagination
+            :page="page"
+            :total="meta.total"
+            :items-per-page="meta.per_page"
+            :data-testid="templateListTableTestIds.pagination"
+            @update:page="emit('update:page', $event)"
+          />
+        </div>
+      </template>
     </UCard>
   </div>
 </template>

package/app/composables/composerContext.ts

@@ -12,7 +12,8 @@ export interface ComposerContext {
   /** @deprecated No longer used — auth is cookie-based via platform layer */
   authenticationToken?: Ref<string>
   organization_id?: Ref<string>
-  product?: Ref<AppContextConfig['product']>
+  /** 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[]>
@@ -33,7 +34,8 @@ export function defineComposerContext(context: ComposerContext): void {
   useNuxtApp().vueApp.provide(COMPOSER_CONTEXT_KEY, context)
 }
 
-const SERVER_FALLBACK: ComposerContext = {}
+// Server render never reads the context; the store reads every field defensively.
+const SERVER_FALLBACK = {} as ComposerContext
 
 export function useComposerContext(): ComposerContext {
   if (import.meta.server) return SERVER_FALLBACK

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/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),
+  }
+}