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

package/app/components/TemplateList/BaseTable.vue

@@ -18,9 +18,10 @@ const emit = defineEmits<{
   duplicate: [MessageGroupWithMessageSummary]
   publish: [MessageGroupWithMessageSummary]
   unpublish: [MessageGroupWithMessageSummary]
+  saveAsTemplate: [MessageGroupWithMessageSummary]
 }>()
 
-const adminStore = useAdminStore()
+const appContext = useAppContextStore()
 const { trackEvent } = useTracking()
 
 const { t, locale } = useI18n()
@@ -44,7 +45,7 @@ function getLocalizedMessage(row: MessageGroupWithMessageSummary) {
 
 function rowActions(row: MessageGroupWithMessageSummary) {
   const publishAction =
-    adminStore.isAdminModeActive && row.visibility === 'internal'
+    appContext.isAdmin && row.visibility === 'internal'
       ? {
           label: t('common.actions.publish'),
           icon: 'ph:globe',
@@ -52,7 +53,7 @@ function rowActions(row: MessageGroupWithMessageSummary) {
           onSelect: () => emit('publish', row),
           'data-testid': `${templateListTableTestIds.rowPublishAction}-${row.id}`,
         }
-      : adminStore.isAdminModeActive && row.visibility === 'public'
+      : appContext.isAdmin && row.visibility === 'public'
         ? {
             label: t('common.actions.unpublish'),
             icon: 'ph:globe-x',
@@ -76,6 +77,12 @@ function rowActions(row: MessageGroupWithMessageSummary) {
       onSelect: () => emit('duplicate', row),
       'data-testid': `${templateListTableTestIds.rowDuplicateAction}-${row.id}`,
     },
+    {
+      label: t('templates.save_as_template'),
+      icon: 'ph:bookmark-simple',
+      onSelect: () => emit('saveAsTemplate', row),
+      'data-testid': `${templateListTableTestIds.rowSaveAsTemplateAction}-${row.id}`,
+    },
     {
       label: t('common.actions.delete'),
       icon: 'ph:trash',
@@ -158,7 +165,7 @@ const props = defineProps<{
 }>()
 
 const filteredMessageGroups = computed(() => {
-  if (adminStore.isAdminModeActive) return props.messageGroups
+  if (appContext.isAdmin) return props.messageGroups
   return props.messageGroups.filter((mg) => mg.visibility !== 'internal')
 })
 

package/app/composables/composerContext.ts

@@ -13,6 +13,7 @@ export interface ComposerContext {
   default_tags?: Ref<string[]>
   metaWabaId?: Ref<string>
   metaAccessToken?: Ref<string>
+  isAdmin?: Ref<boolean>
 }
 
 export const COMPOSER_CONTEXT_KEY: InjectionKey<ComposerContext> = Symbol.for('composer-context')
@@ -23,7 +24,13 @@ export function defineComposerContext(context: ComposerContext): void {
   useNuxtApp().vueApp.provide(COMPOSER_CONTEXT_KEY, context)
 }
 
+const SERVER_FALLBACK: ComposerContext = {
+  authenticationToken: ref(''),
+}
+
 export function useComposerContext(): ComposerContext {
+  if (import.meta.server) return SERVER_FALLBACK
+
   // runWithContext ensures inject() can reach app-level provides
   // even outside component setup (e.g. Pinia stores, middleware).
   const context = useNuxtApp().vueApp.runWithContext(() => inject(COMPOSER_CONTEXT_KEY))

package/app/composables/useTracking.ts

@@ -1,15 +1,14 @@
 import type { TrackingEventMap } from '~/types/tracking'
 
 export function useTracking() {
-  const { product, mainLanguage } = storeToRefs(useAppContextStore())
-  const { isAdminModeActive } = storeToRefs(useAdminStore())
+  const { product, mainLanguage, isAdmin } = storeToRefs(useAppContextStore())
 
   function getDefaultProperties(): Record<string, unknown> {
     return {
       event_origin: 'message-composer',
       product: product.value,
       main_language: mainLanguage.value,
-      is_admin: isAdminModeActive.value,
+      is_admin: isAdmin.value,
     }
   }
 

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

@@ -5,8 +5,12 @@ definePageMeta({
   channel: 'email',
 })
 
+const route = useRoute()
 const composerRef = useTemplateRef('composerRef')
 const store = useEmailComposerStore()
+
+const fromTemplateId = computed(() => route.query.from_template as string | undefined)
+const brandId = computed(() => route.query.brand_id as string | undefined)
 </script>
 
 <template>
@@ -52,7 +56,12 @@ const store = useEmailComposerStore()
       />
     </template>
 
-    <ComposerEmailComposer ref="composerRef" mode="create">
+    <ComposerEmailComposer
+      ref="composerRef"
+      mode="create"
+      :from-template-id="fromTemplateId"
+      :brand-id="brandId"
+    >
       <template #actions></template>
     </ComposerEmailComposer>
   </LayoutBasePage>

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>