@dev.smartpricing/message-composer-layer 1.0.12 → 1.0.14

package/app/middleware/channel-guard.ts

@@ -1,13 +1,10 @@
 export default defineNuxtRouteMiddleware((to) => {
   const { isChannelAllowed } = useChannels()
 
-  // Extract channel from route path: /template/(whatsapp|email)/...
-  const pathMatch = to.path.match(/\/template\/(whatsapp|email)/)
-  if (!pathMatch) return
-
-  const channel = pathMatch[1] as 'whatsapp' | 'email'
+  const channel = to.meta.channel as 'whatsapp' | 'email' | undefined
+  if (!channel) return
 
   if (!isChannelAllowed(channel)) {
-    return navigateTo('/', { replace: true })
+    return navigateTo({ name: 'message-library' }, { replace: true })
   }
 })

package/app/pages/brands.vue

@@ -1,191 +1,22 @@
 <script setup lang="ts">
-import type { BrandFromDb } from '@dev.smartpricing/message-composer-utils/types'
-import { formatDate } from '@dev.smartpricing/message-composer-utils/utils'
-import type { TableColumn } from '#ui/types'
-import { useBrandsQuery, useDeleteBrandMutation } from '~/queries'
-import BrandDrawer from '~/components/Brand/BrandDrawer.vue'
-
 definePageMeta({
   name: 'brands',
 })
 
 const { t } = useI18n()
-const { confirm } = useConfirm()
-
-const { data: brands, isPending } = useBrandsQuery()
-const { mutateAsync: deleteBrand } = useDeleteBrandMutation()
-
-// Drawer state
-const drawerOpen = ref(false)
-const editingBrandId = ref<string | undefined>(undefined)
-
-// Search
-const search = ref('')
-const filteredBrands = computed(() => {
-  if (!brands.value?.length) return []
-  if (!search.value.trim()) return brands.value
-  const query = search.value.toLowerCase()
-  return brands.value.filter((b) => b.name.toLowerCase().includes(query))
-})
-
-// Table config
-const columns: TableColumn<BrandFromDb>[] = [
-  {
-    id: 'logo',
-    header: '',
-    enableSorting: false,
-    meta: {
-      class: {
-        th: 'w-12',
-        td: 'w-12',
-      },
-    },
-  },
-  {
-    accessorKey: 'name',
-    header: (ctx) => getSortableHeader(ctx, t('pages.brands.column_name')),
-  },
-  {
-    accessorKey: 'created_at',
-    header: (ctx) => getSortableHeader(ctx, t('pages.brands.column_created')),
-    cell: ({ row }) => formatDate(row.original.created_at),
-  },
-  {
-    id: 'actions',
-    enableSorting: false,
-    header: '',
-    meta: {
-      class: {
-        th: 'w-[66px]',
-        td: 'w-[66px]',
-      },
-    },
-  },
-]
-
-const columnPinning = ref({
-  right: ['actions'],
-})
-
-const sorting = ref([
-  {
-    id: 'created_at',
-    desc: true,
-  },
-])
-
-function getRowActions(brand: BrandFromDb) {
-  return [
-    {
-      label: t('common.actions.edit'),
-      icon: 'ph:pencil-simple-line',
-      onSelect: () => openEdit(brand),
-    },
-    {
-      label: t('common.actions.delete'),
-      icon: 'ph:trash',
-      color: 'error' as const,
-      onSelect: () => askDelete(brand),
-    },
-  ]
-}
-
-function openCreate() {
-  editingBrandId.value = undefined
-  drawerOpen.value = true
-}
-
-function openEdit(brand: BrandFromDb) {
-  editingBrandId.value = brand.id
-  drawerOpen.value = true
-}
-
-function askDelete(brand: BrandFromDb) {
-  confirm({
-    title: t('pages.brands.delete_confirm_title'),
-    message: t('pages.brands.delete_confirm_message', { name: brand.name }),
-    destructive: true,
-    confirmProps: {
-      label: t('common.actions.delete'),
-    },
-    cancelProps: {
-      label: t('common.actions.cancel'),
-    },
-    action: async () => {
-      await deleteBrand(brand.id)
-      useToast().add({
-        color: 'success',
-        title: t('common.success'),
-        description: t('pages.brands.brand_deleted', { name: brand.name }),
-      })
-    },
-  })
-}
-
-function handleDrawerSaved() {
-  drawerOpen.value = false
-}
+const brandListRef = ref<InstanceType<typeof ComposerBrandList>>()
 </script>
 
 <template>
   <LayoutBasePage :title="t('pages.brands.title')">
     <template #actions>
-      <UButton icon="ph:plus" :label="t('pages.brands.new_brand')" @click="openCreate" />
+      <UButton
+        icon="ph:plus"
+        :label="t('pages.brands.new_brand')"
+        @click="brandListRef?.openCreate()"
+      />
     </template>
 
-    <div class="flex-1 space-y-2.5 relative min-h-0 flex flex-col">
-      <div class="flex gap-2">
-        <UInput
-          v-model="search"
-          class="max-w-xs"
-          leading-icon="ph:magnifying-glass-bold"
-          :placeholder="t('pages.brands.search_placeholder')"
-          type="search"
-        />
-      </div>
-
-      <UCard
-        :ui="{
-          root: 'flex-1 min-h-0 flex flex-col',
-          body: 'overflow-auto relative flex-1 p-0 sm:p-0 relative',
-        }"
-      >
-        <UTable
-          v-model:column-pinning="columnPinning"
-          v-model:sorting="sorting"
-          :data="filteredBrands"
-          :columns="columns"
-          :loading="isPending"
-          :empty="t('pages.brands.no_brands')"
-          sticky
-          class="flex-1 bg-white"
-          :ui="{
-            tr: 'hover:bg-muted',
-            root: 'overflow-visible static',
-          }"
-        >
-          <template #logo-cell="{ row }">
-            <img
-              v-if="row.original.logo_url"
-              :src="row.original.logo_url"
-              :alt="row.original.name"
-              class="h-8 w-8 rounded-full object-cover border border-neutral-200"
-            />
-            <div
-              v-else
-              class="h-8 w-8 rounded-full bg-neutral-200 flex items-center justify-center text-xs font-medium text-neutral-500"
-            >
-              {{ row.original.name.charAt(0).toUpperCase() }}
-            </div>
-          </template>
-
-          <template #actions-cell="{ row }">
-            <SMoreActions :actions="getRowActions(row.original)" />
-          </template>
-        </UTable>
-      </UCard>
-    </div>
-
-    <BrandDrawer v-model="drawerOpen" :brand-id="editingBrandId" @saved="handleDrawerSaved" />
+    <ComposerBrandList ref="brandListRef" />
   </LayoutBasePage>
 </template>

package/app/pages/images.vue

@@ -1,137 +1,13 @@
 <script setup lang="ts">
-import type { MediaFromDb } from '@dev.smartpricing/message-composer-utils/types'
-import { useMediaQuery, useUploadToSmartchatMutation, useDeleteMediaMutation } from '~/queries'
-import { formatDate } from '@dev.smartpricing/message-composer-utils/utils'
+definePageMeta({
+  name: 'images',
+})
 
 const { t } = useI18n()
-
-const { data: media, isPending, refetch } = useMediaQuery()
-const { mutateAsync: uploadToSmartchat } = useUploadToSmartchatMutation()
-const { mutateAsync: deleteMedia } = useDeleteMediaMutation()
-
-const uploadingIds = ref<Set<string>>(new Set())
-const deletingIds = ref<Set<string>>(new Set())
-
-async function handleUploadToSmartchat(item: MediaFromDb) {
-  uploadingIds.value.add(item.id)
-  try {
-    await uploadToSmartchat(item.id)
-    useToast().add({
-      color: 'success',
-      title: t('common.success'),
-      description: t('pages.images.image_synced'),
-    })
-    refetch()
-  } finally {
-    uploadingIds.value.delete(item.id)
-  }
-}
-
-async function handleDelete(item: MediaFromDb) {
-  if (!confirm(t('pages.images.delete_confirm', { name: item.file_name }))) return
-
-  deletingIds.value.add(item.id)
-  try {
-    await deleteMedia(item.id)
-    useToast().add({
-      color: 'success',
-      title: t('common.success'),
-      description: t('pages.images.image_deleted'),
-    })
-    refetch()
-  } finally {
-    deletingIds.value.delete(item.id)
-  }
-}
 </script>
 
 <template>
-  <LayoutBasePage
-    :title="t('pages.images.title')"
-    :test-id="imagesPageTestIds.navbar"
-  >
-    <div v-if="isPending" class="flex justify-center py-12">
-      <UIcon
-        name="i-heroicons-arrow-path"
-        class="animate-spin h-8 w-8"
-        :data-testid="imagesPageTestIds.loadingIcon"
-      />
-    </div>
-
-    <div
-      v-else-if="!media || media.length === 0"
-      class="text-center py-12 text-gray-500"
-      :data-testid="imagesPageTestIds.emptyState"
-    >
-      {{ t('pages.images.no_images_uploaded') }}
-    </div>
-
-    <div
-      v-else
-      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
-      :data-testid="imagesPageTestIds.grid"
-    >
-      <UCard
-        v-for="item in media"
-        :key="item.id"
-        :data-testid="`${imagesPageTestIds.card}-${item.id}`"
-      >
-        <div class="space-y-3">
-          <img
-            :src="item.remote_url"
-            :alt="item.file_name"
-            class="h-40 w-full object-cover rounded"
-            :data-testid="`${imagesPageTestIds.image}-${item.id}`"
-          />
-
-          <div class="space-y-2">
-            <div class="flex items-center justify-between">
-              <span
-                class="text-sm font-medium truncate"
-                :title="item.file_name"
-                :data-testid="`${imagesPageTestIds.fileName}-${item.id}`"
-              >
-                {{ item.file_name }}
-              </span>
-              <UBadge
-                :color="item.smartchat_media_id ? 'success' : 'neutral'"
-                variant="subtle"
-                size="xs"
-                :data-testid="`${imagesPageTestIds.syncBadge}-${item.id}`"
-              >
-                {{
-                  item.smartchat_media_id ? t('pages.images.synced') : t('pages.images.not_synced')
-                }}
-              </UBadge>
-            </div>
-
-            <div class="text-xs text-gray-500 space-y-1">
-              <div>{{ t('pages.images.type_label') }} {{ item.file_type }}</div>
-              <div>{{ t('pages.images.created_label') }} {{ formatDate(item.created_at) }}</div>
-              <div
-                v-if="item.smartchat_media_id"
-                class="font-mono truncate"
-                :title="item.smartchat_media_id"
-              >
-                {{ t('pages.images.media_id_label') }} {{ item.smartchat_media_id }}
-              </div>
-            </div>
-
-            <div v-if="!item.smartchat_media_id" class="flex gap-2 pt-2">
-              <UButton
-                size="xs"
-                color="primary"
-                block
-                :loading="uploadingIds.has(item.id)"
-                :data-testid="`${imagesPageTestIds.syncButton}-${item.id}`"
-                @click="handleUploadToSmartchat(item)"
-              >
-                {{ t('pages.images.sync_to_smartchat') }}
-              </UButton>
-            </div>
-          </div>
-        </div>
-      </UCard>
-    </div>
+  <LayoutBasePage :title="t('pages.images.title')" :test-id="imagesPageTestIds.navbar">
+    <ComposerImageGallery />
   </LayoutBasePage>
 </template>

package/app/pages/index.vue

@@ -3,26 +3,15 @@ definePageMeta({
   name: 'message-library',
 })
 
-import {
-  useMessageGroupsQuery,
-  useDeleteMessageGroupMutation,
-  usePublishMessageGroupMutation,
-  useUnpublishMessageGroupMutation,
-} from '~/queries'
-import type {
-  MessageGroupWithMessageSummary,
-  RenderType,
-} from '@dev.smartpricing/message-composer-utils/types'
-import type { MessageActionProperties, MessagesKind } from '@/types/tracking'
-import { ref, watch, computed } from 'vue'
-import { useRouter } from 'vue-router'
-import BaseTable from '@/components/TemplateList/BaseTable.vue'
+import type { RenderType } from '@dev.smartpricing/message-composer-utils/types'
 import CreateTemplateButton from '@/components/CreateTemplateButton.vue'
+import { ref, watch, computed } from 'vue'
 
 const { hasWhatsapp, hasEmail, defaultRenderType, isRenderTypeAllowed } = useChannels()
 const { trackEvent } = useTracking()
+const { t } = useI18n()
 
-// Load render type from session or default to first allowed
+// Render type with session persistence
 const RENDER_TYPE_KEY = 'template_render_type'
 const storedRenderType = sessionStorage.getItem(RENDER_TYPE_KEY) as RenderType | null
 const initialRenderType =
@@ -31,122 +20,10 @@ const initialRenderType =
     : defaultRenderType.value
 const renderType = ref<RenderType>(initialRenderType)
 
-// Persist render type to session when it changes
 watch(renderType, (newType) => {
   sessionStorage.setItem(RENDER_TYPE_KEY, newType)
   trackEvent('change_tab', { messages_kind: newType === 'email_v1' ? 'email' : 'whatsapp' })
 })
-const {
-  data: messageGroups,
-  isPending: isFetching,
-  refetch: execute,
-} = useMessageGroupsQuery(computed(() => ({ renderType: renderType.value })))
-
-// Manual polling (Pinia Colada doesn't support automatic polling yet)
-const interval = setInterval(() => {
-  execute()
-}, 15000)
-
-onBeforeUnmount(() => {
-  clearInterval(interval)
-})
-
-const { confirm } = useConfirm()
-const { mutateAsync: deleteGroup } = useDeleteMessageGroupMutation()
-const { mutateAsync: publishGroup } = usePublishMessageGroupMutation()
-const { mutateAsync: unpublishGroup } = useUnpublishMessageGroupMutation()
-
-function getMessageTrackingProps(row: MessageGroupWithMessageSummary): MessageActionProperties {
-  return {
-    message_name: row.name,
-    languages: row.messages.map((m) => m.language),
-    message_id: row.id,
-    message_kind: (row.messages[0]?.render_type === 'email_v1'
-      ? 'email'
-      : 'whatsapp') as MessagesKind,
-    message_category: row.category,
-  }
-}
-
-function askDeleteGroup(row: MessageGroupWithMessageSummary) {
-  confirm({
-    title: t('dialogs.delete_message_group.title'),
-    message: t('dialogs.delete_message_group.message', { name: row.name }),
-    destructive: true,
-    confirmLabel: t('common.actions.delete'),
-    cancelLabel: t('common.actions.cancel'),
-    action: async () => {
-      await deleteGroup(row.id)
-      trackEvent('message_delete', getMessageTrackingProps(row))
-      notifyParent('TEMPLATE_DELETED', { id: row.id, name: row.name })
-      useToast().add({
-        title: t('common.success'),
-        description: t('dialogs.delete_message_group.success', { name: row.name }),
-        color: 'success',
-      })
-      execute()
-    },
-  })
-}
-
-function askPublishGroup(row: MessageGroupWithMessageSummary) {
-  confirm({
-    title: t('dialogs.publish_message_group.title'),
-    message: t('dialogs.publish_message_group.message', { name: row.name }),
-    confirmLabel: t('common.actions.publish'),
-    cancelLabel: t('common.actions.cancel'),
-    action: async () => {
-      await publishGroup(row.id)
-      notifyParent('TEMPLATE_PUBLISHED', { id: row.id, name: row.name })
-      useToast().add({
-        title: t('common.success'),
-        description: t('dialogs.publish_message_group.success', { name: row.name }),
-        color: 'success',
-      })
-      execute()
-    },
-  })
-}
-
-function askUnpublishGroup(row: MessageGroupWithMessageSummary) {
-  confirm({
-    title: t('dialogs.unpublish_message_group.title'),
-    message: t('dialogs.unpublish_message_group.message', { name: row.name }),
-    confirmLabel: t('common.actions.unpublish'),
-    cancelLabel: t('common.actions.cancel'),
-    action: async () => {
-      await unpublishGroup(row.id)
-      notifyParent('TEMPLATE_UNPUBLISHED', { id: row.id, name: row.name })
-      useToast().add({
-        title: t('common.success'),
-        description: t('dialogs.unpublish_message_group.success', { name: row.name }),
-        color: 'success',
-      })
-      execute()
-    },
-  })
-}
-
-const { duplicateTemplate } = useTemplateOperations({
-  onSuccess: () => execute(), // Refresh the list
-})
-
-async function handleDuplicate(row: MessageGroupWithMessageSummary) {
-  trackEvent('message_duplicate', getMessageTrackingProps(row))
-  const result = await duplicateTemplate(row.id.toString(), t('common.copy_of', { name: row.name }))
-  if (result) {
-    notifyParent('TEMPLATE_DUPLICATED', { id: result.id, sourceId: row.id, name: result.name })
-  }
-}
-
-const router = useRouter()
-function navigate(row: MessageGroupWithMessageSummary) {
-  trackEvent('message_edit', getMessageTrackingProps(row))
-  const type = row.messages[0]?.render_type === 'email_v1' ? 'email' : 'whatsapp'
-  router.push(`/template/${type}/${row.id}`)
-}
-
-const { t } = useI18n()
 
 const tabItems = computed(() => {
   const items = []
@@ -174,21 +51,12 @@ const tabItems = computed(() => {
     :tabs="tabItems.length > 1 ? tabItems : undefined"
     :active-tab="renderType"
     :test-id="homeTestIds.navbar"
-    @tab-change="renderType = $event"
+    @tab-change="renderType = $event as RenderType"
   >
     <template #actions>
       <CreateTemplateButton />
     </template>
 
-    <BaseTable
-      :loading="isFetching"
-      :message-groups="messageGroups || []"
-      :render-type="renderType"
-      @edit="navigate"
-      @delete="askDeleteGroup"
-      @duplicate="handleDuplicate"
-      @publish="askPublishGroup"
-      @unpublish="askUnpublishGroup"
-    />
+    <ComposerMessageLibrary v-model:render-type="renderType" />
   </LayoutBasePage>
 </template>

package/app/pages/preview/[id].vue

@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n'
 import { useMessageGroupQuery } from '~/queries/messageGroups'
 
 definePageMeta({
+  name: 'message-preview',
   layout: false,
 })