@dev.smartpricing/message-composer-layer 4.0.2-tepmlates.0 → 4.0.2

package/app/pages/templates/email/create.vue

@@ -1,86 +0,0 @@
-<script setup lang="ts">
-import type { EmailMessage, PostEntity } from '@dev.smartpricing/message-composer-utils/types'
-
-definePageMeta({
-  name: 'email-template-create',
-  middleware: ['channel-guard'],
-  channel: 'email',
-})
-
-const composerRef = useTemplateRef('composerRef')
-const store = useEmailComposerStore()
-const toast = useToast()
-const { t } = useI18n()
-const { goBackOrFallback } = useGoBack()
-
-const appContext = useAppContextStore()
-const isSystem = ref(false)
-
-const { mutateAsync: createTemplate } = useCreateTemplateMutation()
-const saving = ref(false)
-
-async function handleSave() {
-  saving.value = true
-  try {
-    const messages = Object.values(store.messages).map((msg) => {
-      const m = msg as PostEntity<EmailMessage>
-      return {
-        language_id: m.language_id,
-        render_type: m.render_type,
-        body: m.body,
-        metadata: m.metadata || {},
-      }
-    })
-
-    await createTemplate({
-      name: store.name,
-      category: store.category,
-      messages,
-      ...(appContext.isAdmin && isSystem.value ? { is_system: true } : {}),
-    })
-
-    toast.add({ title: t('templates.dialogs.save_as_template.success'), color: 'success' })
-    goBackOrFallback()
-  } finally {
-    saving.value = false
-  }
-}
-</script>
-
-<template>
-  <LayoutBasePage
-    :title="$t('templates.create_template')"
-    :tabs="[
-      { label: $t('pages.email.create_message_group.tab_content'), value: 'content' },
-      { label: $t('pages.email.create_message_group.tab_translations'), value: 'translations' },
-    ]"
-    :active-tab="store.activeTab"
-    @tab-change="store.activeTab = $event as 'content' | 'translations'"
-  >
-    <template #actions>
-      <UButton
-        @click="composerRef?.handleCancel()"
-        :label="$t('common.actions.cancel')"
-        color="primary"
-        variant="ghost"
-        :loading="saving || composerRef?.isTranslating"
-      />
-      <UButton
-        @click="handleSave()"
-        :label="$t('common.actions.save')"
-        color="primary"
-        :loading="saving || composerRef?.isTranslating"
-      />
-    </template>
-
-    <ComposerEmailComposer ref="composerRef" mode="create">
-      <template #actions>
-        <UCheckbox
-          v-if="appContext.isAdmin"
-          v-model="isSystem"
-          :label="$t('templates.system_template')"
-        />
-      </template>
-    </ComposerEmailComposer>
-  </LayoutBasePage>
-</template>

package/app/pages/templates/index.vue

@@ -1,245 +0,0 @@
-<script setup lang="ts">
-import type { RenderType } from '@dev.smartpricing/message-composer-utils/types'
-import { SYSTEM_USER_ID } from '@dev.smartpricing/message-composer-utils/types'
-import type { TemplateWithMessageSummary } from '@dev.smartpricing/message-composer-utils/types'
-import { formatDate } from '@dev.smartpricing/message-composer-utils/utils'
-
-definePageMeta({
-  name: 'template-library',
-})
-
-const router = useRouter()
-const { t, locale } = useI18n()
-const toast = useToast()
-const { hasWhatsapp, hasEmail, defaultRenderType, isRenderTypeAllowed } = useChannels()
-const appContext = useAppContextStore()
-
-// Render type with session persistence
-const RENDER_TYPE_KEY = 'template_library_render_type'
-const storedRenderType = sessionStorage.getItem(RENDER_TYPE_KEY) as RenderType | null
-const initialRenderType =
-  storedRenderType && isRenderTypeAllowed(storedRenderType)
-    ? storedRenderType
-    : defaultRenderType.value
-const renderType = ref<RenderType>(initialRenderType)
-
-watch(renderType, (newType) => {
-  sessionStorage.setItem(RENDER_TYPE_KEY, newType)
-})
-
-const scope = ref<'all' | 'mine' | 'system'>('all')
-
-const { data: templates, isPending } = useTemplatesQuery(
-  computed(() => ({
-    renderType: renderType.value,
-    scope: scope.value,
-  })),
-)
-
-const { mutateAsync: deleteTemplate } = useDeleteTemplateMutation()
-const { mutateAsync: publishTemplate } = usePublishTemplateMutation()
-const { mutateAsync: unpublishTemplate } = useUnpublishTemplateMutation()
-
-const tabItems = computed(() => {
-  const items = []
-  if (hasWhatsapp.value) {
-    items.push({
-      label: t('message.render_type.whatsapp_v1'),
-      value: 'whatsapp_v1',
-      slot: 'whatsapp_v1',
-    })
-  }
-  if (hasEmail.value) {
-    items.push({
-      label: t('message.render_type.email_v1'),
-      value: 'email_v1',
-      slot: 'email_v1',
-    })
-  }
-  return items
-})
-
-const scopeItems = [
-  { label: 'All', value: 'all' as const },
-  { label: 'My templates', value: 'mine' as const },
-  { label: 'System', value: 'system' as const },
-]
-
-function getLocalizedPreview(tmpl: TemplateWithMessageSummary) {
-  const msg =
-    tmpl.messages.find((m) => m.language === locale.value) ||
-    tmpl.messages.find((m) => m.language === 'en') ||
-    tmpl.messages[0]
-  return msg?.preview || ''
-}
-
-function channelFromRenderType(rt: RenderType): 'email' | 'whatsapp' {
-  return rt === 'email_v1' ? 'email' : 'whatsapp'
-}
-
-function editTemplate(tmpl: TemplateWithMessageSummary) {
-  const channel = channelFromRenderType(tmpl.messages[0]?.render_type || renderType.value)
-  router.push(`/templates/${channel}/${tmpl.id}`)
-}
-
-async function handleDelete(tmpl: TemplateWithMessageSummary) {
-  await deleteTemplate(tmpl.id)
-  toast.add({ title: t('templates.dialogs.delete.success', { name: tmpl.name }), color: 'success' })
-}
-
-async function handlePublish(tmpl: TemplateWithMessageSummary) {
-  await publishTemplate(tmpl.id)
-  toast.add({
-    title: t('templates.dialogs.publish.success', { name: tmpl.name }),
-    color: 'success',
-  })
-}
-
-async function handleUnpublish(tmpl: TemplateWithMessageSummary) {
-  await unpublishTemplate(tmpl.id)
-  toast.add({
-    title: t('templates.dialogs.unpublish.success', { name: tmpl.name }),
-    color: 'success',
-  })
-}
-
-function handleUse(tmpl: TemplateWithMessageSummary) {
-  const channel = channelFromRenderType(tmpl.messages[0]?.render_type || renderType.value)
-  router.push(`/compose/${channel}/create?from_template=${tmpl.id}`)
-}
-
-function rowActions(tmpl: TemplateWithMessageSummary) {
-  const actions = [
-    {
-      label: t('common.actions.edit'),
-      icon: 'ph:pencil-simple-line',
-      onSelect: () => editTemplate(tmpl),
-    },
-  ]
-
-  if (appContext.isAdmin) {
-    if (tmpl.visibility === 'internal') {
-      actions.push({
-        label: t('common.actions.publish'),
-        icon: 'ph:globe',
-        onSelect: () => handlePublish(tmpl),
-      })
-    } else {
-      actions.push({
-        label: t('common.actions.unpublish'),
-        icon: 'ph:globe-x',
-        onSelect: () => handleUnpublish(tmpl),
-      })
-    }
-  }
-
-  actions.push(
-    { label: t('templates.use_template'), icon: 'ph:arrow-right', onSelect: () => handleUse(tmpl) },
-    { label: t('common.actions.delete'), icon: 'ph:trash', onSelect: () => handleDelete(tmpl) },
-  )
-
-  return actions
-}
-
-function createTemplate() {
-  const channel = channelFromRenderType(renderType.value)
-  router.push(`/templates/${channel}/create`)
-}
-</script>
-
-<template>
-  <LayoutBasePage
-    :title="$t('templates.title')"
-    :tabs="tabItems.length > 1 ? tabItems : undefined"
-    :active-tab="renderType"
-    @tab-change="renderType = $event as RenderType"
-  >
-    <template #actions>
-      <UButton :label="$t('templates.add_template')" color="primary" @click="createTemplate" />
-    </template>
-
-    <div class="flex-1 space-y-2.5 min-h-0 flex flex-col">
-      <div class="flex gap-2">
-        <USelect v-model="scope" :items="scopeItems" class="max-w-48" />
-      </div>
-
-      <UCard
-        :ui="{
-          root: 'flex-1 min-h-0 flex flex-col',
-          body: 'overflow-auto relative flex-1 p-0 sm:p-0',
-        }"
-      >
-        <UTable
-          :loading="isPending"
-          class="flex-1 bg-white"
-          :ui="{ tr: 'hover:bg-muted', root: 'overflow-visible static' }"
-          :data="templates || []"
-          :columns="[
-            { id: 'name', accessorKey: 'name', header: $t('pages.message_library.headers.name') },
-            {
-              id: 'category',
-              accessorKey: 'category',
-              header: $t('pages.message_library.headers.category'),
-            },
-            {
-              id: 'preview',
-              accessorFn: (row: TemplateWithMessageSummary) => getLocalizedPreview(row),
-              header: $t('pages.message_library.headers.preview'),
-            },
-            {
-              id: 'languages',
-              accessorFn: (row: TemplateWithMessageSummary) => `${row.messages.length} lang`,
-              header: 'Languages',
-            },
-            {
-              id: 'updated_at',
-              accessorFn: (row: TemplateWithMessageSummary) => formatDate(row.updated_at),
-              header: $t('pages.message_library.headers.updated_at'),
-            },
-            {
-              id: 'actions',
-              header: '',
-              enableSorting: false,
-              meta: { class: { th: 'w-[66px]', td: 'w-[66px]' } },
-            },
-          ]"
-          sticky
-        >
-          <template #name-cell="{ row }">
-            <div class="flex items-center gap-2">
-              <span>{{ row.original.name }}</span>
-              <UBadge
-                v-if="row.original.user_id === SYSTEM_USER_ID"
-                label="System"
-                size="sm"
-                color="info"
-                variant="soft"
-              />
-              <UBadge
-                v-if="row.original.visibility === 'internal'"
-                :label="$t('common.internal')"
-                size="sm"
-                color="warning"
-                variant="soft"
-              />
-            </div>
-          </template>
-
-          <template #category-cell="{ row }">
-            <UBadge :label="row.original.category" size="md" color="neutral" variant="soft" />
-          </template>
-
-          <template #preview-cell="{ row }">
-            <div class="line-clamp-2 max-w-[200px] truncate">
-              {{ getLocalizedPreview(row.original) }}
-            </div>
-          </template>
-
-          <template #actions-cell="{ row }">
-            <SMoreActions :actions="rowActions(row.original)" />
-          </template>
-        </UTable>
-      </UCard>
-    </div>
-  </LayoutBasePage>
-</template>

package/app/pages/templates/whatsapp/[id].vue

@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import type { WhatsappMessage, PostEntity } from '@dev.smartpricing/message-composer-utils/types'
-
-definePageMeta({
-  name: 'whatsapp-template-edit',
-  middleware: ['channel-guard'],
-  channel: 'whatsapp',
-})
-
-const route = useRoute()
-const composerRef = useTemplateRef('composerRef')
-const store = useWhatsappComposerStore()
-const toast = useToast()
-const { t } = useI18n()
-const { goBackOrFallback } = useGoBack()
-
-const templateId = computed(() => route.params.id as string)
-
-const { mutateAsync: updateTemplate } = useUpdateTemplateMutation()
-const saving = ref(false)
-
-async function handleSave() {
-  saving.value = true
-  try {
-    const messages = Object.values(store.messages).map((msg) => {
-      const m = msg as PostEntity<WhatsappMessage>
-      return {
-        language_id: m.language_id,
-        render_type: m.render_type,
-        body: m.body,
-        metadata: m.metadata || {},
-      }
-    })
-
-    await updateTemplate({
-      id: templateId.value,
-      data: {
-        name: store.name,
-        category: store.category,
-        messages,
-      },
-    })
-
-    toast.add({ title: t('templates.dialogs.save_as_template.success'), color: 'success' })
-    goBackOrFallback()
-  } finally {
-    saving.value = false
-  }
-}
-</script>
-
-<template>
-  <LayoutBasePage
-    :title="$t('templates.edit_template')"
-    :tabs="[
-      { label: $t('pages.whatsapp.tabs.content'), value: 'content' },
-      { label: $t('pages.whatsapp.tabs.translations'), value: 'translations' },
-    ]"
-    :active-tab="store.activeTab"
-    @tab-change="store.activeTab = $event as 'content' | 'translations'"
-  >
-    <template #actions>
-      <UButton
-        @click="composerRef?.handleCancel()"
-        :label="$t('common.actions.cancel')"
-        color="primary"
-        variant="ghost"
-        :loading="saving || composerRef?.isTranslating"
-      />
-      <UButton
-        @click="handleSave()"
-        :label="$t('common.actions.save')"
-        color="primary"
-        :loading="saving || composerRef?.isTranslating"
-      />
-    </template>
-
-    <ComposerWhatsappComposer ref="composerRef" mode="create" :from-template-id="templateId">
-      <template #actions></template>
-    </ComposerWhatsappComposer>
-  </LayoutBasePage>
-</template>

package/app/pages/templates/whatsapp/create.vue

@@ -1,86 +0,0 @@
-<script setup lang="ts">
-import type { WhatsappMessage, PostEntity } from '@dev.smartpricing/message-composer-utils/types'
-
-definePageMeta({
-  name: 'whatsapp-template-create',
-  middleware: ['channel-guard'],
-  channel: 'whatsapp',
-})
-
-const composerRef = useTemplateRef('composerRef')
-const store = useWhatsappComposerStore()
-const toast = useToast()
-const { t } = useI18n()
-const { goBackOrFallback } = useGoBack()
-
-const appContext = useAppContextStore()
-const isSystem = ref(false)
-
-const { mutateAsync: createTemplate } = useCreateTemplateMutation()
-const saving = ref(false)
-
-async function handleSave() {
-  saving.value = true
-  try {
-    const messages = Object.values(store.messages).map((msg) => {
-      const m = msg as PostEntity<WhatsappMessage>
-      return {
-        language_id: m.language_id,
-        render_type: m.render_type,
-        body: m.body,
-        metadata: m.metadata || {},
-      }
-    })
-
-    await createTemplate({
-      name: store.name,
-      category: store.category,
-      messages,
-      ...(appContext.isAdmin && isSystem.value ? { is_system: true } : {}),
-    })
-
-    toast.add({ title: t('templates.dialogs.save_as_template.success'), color: 'success' })
-    goBackOrFallback()
-  } finally {
-    saving.value = false
-  }
-}
-</script>
-
-<template>
-  <LayoutBasePage
-    :title="$t('templates.create_template')"
-    :tabs="[
-      { label: $t('pages.whatsapp.tabs.content'), value: 'content' },
-      { label: $t('pages.whatsapp.tabs.translations'), value: 'translations' },
-    ]"
-    :active-tab="store.activeTab"
-    @tab-change="store.activeTab = $event as 'content' | 'translations'"
-  >
-    <template #actions>
-      <UButton
-        @click="composerRef?.handleCancel()"
-        :label="$t('common.actions.cancel')"
-        color="primary"
-        variant="ghost"
-        :loading="saving || composerRef?.isTranslating"
-      />
-      <UButton
-        @click="handleSave()"
-        :label="$t('common.actions.save')"
-        color="primary"
-        :loading="saving || composerRef?.isTranslating"
-      />
-    </template>
-
-    <ComposerWhatsappComposer ref="composerRef" mode="create">
-      <template #actions>
-        <UCheckbox
-          v-if="appContext.isAdmin"
-          v-model="isSystem"
-          :label="$t('templates.system_template')"
-        />
-      </template>
-    </ComposerWhatsappComposer>
-  </LayoutBasePage>
-</template>

package/app/queries/templates.ts

@@ -1,119 +0,0 @@
-import { useQuery, useMutation, useQueryCache } from '@pinia/colada'
-import type { RenderType } from '@dev.smartpricing/message-composer-utils/types'
-import type {
-  TemplateWithMessageSummary,
-  CreateTemplatePayload,
-  UpdateTemplatePayload,
-} from '@dev.smartpricing/message-composer-utils/types'
-import { templatesApi } from '~/api/templates'
-
-// QUERIES
-
-export function useTemplatesQuery(
-  options?: MaybeRefOrGetter<{
-    renderType?: RenderType
-    scope?: 'system' | 'mine' | 'all'
-    tags?: string[]
-    tagsMode?: 'and' | 'or'
-  }>,
-) {
-  return useQuery({
-    key: () => ['templates', JSON.stringify(toValue(options))],
-    query: () => templatesApi.getAll(toValue(options)),
-    staleTime: 0,
-  })
-}
-
-export function useTemplateQuery(id: MaybeRefOrGetter<string>) {
-  return useQuery({
-    key: () => ['templates', toValue(id)],
-    query: () => templatesApi.getById(toValue(id)),
-    staleTime: 2 * 60 * 1000,
-  })
-}
-
-// MUTATIONS
-
-export function useCreateTemplateMutation() {
-  const queryCache = useQueryCache()
-
-  return useMutation({
-    mutation: (data: CreateTemplatePayload) => templatesApi.create(data),
-    onSuccess: () => {
-      queryCache.invalidateQueries({ key: ['templates'] })
-    },
-  })
-}
-
-export function useUpdateTemplateMutation() {
-  const queryCache = useQueryCache()
-
-  return useMutation({
-    mutation: ({ id, data }: { id: string; data: UpdateTemplatePayload }) =>
-      templatesApi.update(id, data),
-    onSuccess: (_, { id }) => {
-      queryCache.invalidateQueries({ key: ['templates', id] })
-      queryCache.invalidateQueries({ key: ['templates'] })
-    },
-  })
-}
-
-export function useDeleteTemplateMutation() {
-  const queryCache = useQueryCache()
-
-  return useMutation({
-    mutation: templatesApi.delete,
-    onMutate: async (id) => {
-      queryCache.cancelQueries({ key: ['templates'] })
-      const previous = queryCache.getQueryData(['templates'])
-
-      queryCache.setQueryData(['templates'], (old: TemplateWithMessageSummary[] | undefined) =>
-        old?.filter((t) => t.id !== id),
-      )
-
-      return { previous }
-    },
-    onError: (_, __, context) => {
-      if (context?.previous) {
-        queryCache.setQueryData(['templates'], context.previous)
-      }
-    },
-    onSuccess: () => {
-      queryCache.invalidateQueries({ key: ['templates'] })
-    },
-  })
-}
-
-export function usePublishTemplateMutation() {
-  const queryCache = useQueryCache()
-
-  return useMutation({
-    mutation: templatesApi.publish,
-    onSuccess: () => {
-      queryCache.invalidateQueries({ key: ['templates'] })
-    },
-  })
-}
-
-export function useUnpublishTemplateMutation() {
-  const queryCache = useQueryCache()
-
-  return useMutation({
-    mutation: templatesApi.unpublish,
-    onSuccess: () => {
-      queryCache.invalidateQueries({ key: ['templates'] })
-    },
-  })
-}
-
-export function useSaveAsTemplateMutation() {
-  const queryCache = useQueryCache()
-
-  return useMutation({
-    mutation: ({ messageGroupId, name }: { messageGroupId: string; name?: string }) =>
-      templatesApi.saveFromMessageGroup(messageGroupId, name),
-    onSuccess: () => {
-      queryCache.invalidateQueries({ key: ['templates'] })
-    },
-  })
-}