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

package/app/pages/{template → compose}/whatsapp/create.vue

@@ -5,8 +5,11 @@ definePageMeta({
   channel: 'whatsapp',
 })
 
+const route = useRoute()
 const composerRef = useTemplateRef('composerRef')
 const store = useWhatsappComposerStore()
+
+const fromTemplateId = computed(() => route.query.from_template as string | undefined)
 </script>
 
 <template>
@@ -46,7 +49,7 @@ const store = useWhatsappComposerStore()
       />
     </template>
 
-    <ComposerWhatsappComposer ref="composerRef" mode="create">
+    <ComposerWhatsappComposer ref="composerRef" mode="create" :from-template-id="fromTemplateId">
       <template #actions></template>
     </ComposerWhatsappComposer>
   </LayoutBasePage>

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

@@ -0,0 +1,82 @@
+<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

@@ -0,0 +1,86 @@
+<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

@@ -0,0 +1,244 @@
+<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 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.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>
+  </LayoutBasePage>
+</template>

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

@@ -0,0 +1,82 @@
+<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

@@ -0,0 +1,86 @@
+<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/index.ts

@@ -7,3 +7,4 @@ export * from './meta'
 export * from './compilation'
 export * from './dynamicValues'
 export * from './brands'
+export * from './templates'