@dev.smartpricing/message-composer-layer 4.0.2-templates.1 → 4.0.2

package/app/components/TemplateList/PromoteModal.vue

@@ -1,69 +0,0 @@
-<script setup lang="ts">
-import type { TemplateWithMessageSummary } from '@dev.smartpricing/message-composer-utils/types'
-
-const props = defineProps<{
-  template: TemplateWithMessageSummary | null
-}>()
-
-const emit = defineEmits<{
-  confirm: [mode: 'clone' | 'convert']
-}>()
-
-const open = defineModel<boolean>('open', { required: true })
-
-const { t } = useI18n()
-const { mutateAsync: promoteTemplate, isPending } = usePromoteTemplateMutation()
-const toast = useToast()
-
-const mode = ref<'clone' | 'convert'>('clone')
-
-const items = computed(() => [
-  {
-    label: t('templates.dialogs.promote.clone_label'),
-    description: t('templates.dialogs.promote.clone_description'),
-    value: 'clone' as const,
-  },
-  {
-    label: t('templates.dialogs.promote.convert_label'),
-    description: t('templates.dialogs.promote.convert_description'),
-    value: 'convert' as const,
-  },
-])
-
-async function handleConfirm() {
-  if (!props.template) return
-  await promoteTemplate({ id: props.template.id, data: { mode: mode.value } })
-  const key = mode.value === 'clone' ? 'success_clone' : 'success_convert'
-  toast.add({
-    title: t(`templates.dialogs.promote.${key}`, { name: props.template.name }),
-    color: 'success',
-  })
-  open.value = false
-}
-
-watch(open, (v) => {
-  if (v) mode.value = 'clone'
-})
-</script>
-
-<template>
-  <UModal
-    v-model:open="open"
-    :title="$t('templates.dialogs.promote.title')"
-    :ui="{ footer: 'justify-end' }"
-  >
-    <template #body>
-      <URadioGroup v-model="mode" :items="items" variant="card" color="secondary" />
-    </template>
-
-    <template #footer>
-      <UButton variant="outline" :label="$t('common.actions.cancel')" @click="open = false" />
-      <UButton
-        color="primary"
-        :label="$t('common.actions.confirm')"
-        :loading="isPending"
-        @click="handleConfirm"
-      />
-    </template>
-  </UModal>
-</template>

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

@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import type { EmailMessage, PostEntity } from '@dev.smartpricing/message-composer-utils/types'
-
-definePageMeta({
-  name: 'email-template-edit',
-  middleware: ['channel-guard'],
-  channel: 'email',
-})
-
-const route = useRoute()
-const composerRef = useTemplateRef('composerRef')
-const store = useEmailComposerStore()
-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<EmailMessage>
-      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.email.edit_message_group.tab_content'), value: 'content' },
-      { label: $t('pages.email.edit_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" :from-template-id="templateId">
-      <template #actions></template>
-    </ComposerEmailComposer>
-  </LayoutBasePage>
-</template>

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

@@ -1,74 +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 { 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,
-    })
-
-    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" />
-  </LayoutBasePage>
-</template>

package/app/pages/templates/index.vue

@@ -1,263 +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 { 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 promoteTarget = ref<TemplateWithMessageSummary | null>(null)
-const isPromoteModalOpen = computed({
-  get: () => promoteTarget.value !== null,
-  set: (v) => {
-    if (!v) promoteTarget.value = null
-  },
-})
-
-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)
-  navigateTo({ name: `${channel}-template-edit`, params: { id: 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)
-  navigateTo({ name: `${channel}-message-create`, query: { 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.user_id !== SYSTEM_USER_ID) {
-      actions.push({
-        label: t('templates.dialogs.promote.title'),
-        icon: 'ph:arrow-fat-up',
-        onSelect: () => {
-          promoteTarget.value = tmpl
-        },
-      })
-    }
-
-    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)
-  navigateTo({ name: `${channel}-template-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>
-
-    <TemplateListPromoteModal v-model:open="isPromoteModalOpen" :template="promoteTarget" />
-  </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,74 +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 { 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,
-    })
-
-    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" />
-  </LayoutBasePage>
-</template>