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

package/app/api/index.ts

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

package/app/api/templates.ts

@@ -0,0 +1,55 @@
+import type { TemplateFromDb, RenderType } from '@dev.smartpricing/message-composer-utils/types'
+import type {
+  TemplateWithMessages,
+  TemplateWithMessageSummary,
+  CreateTemplatePayload,
+  UpdateTemplatePayload,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { apiClient } from './client'
+
+export const templatesApi = {
+  getAll: (options?: {
+    renderType?: RenderType
+    scope?: 'system' | 'mine' | 'all'
+    tags?: string[]
+    tagsMode?: 'and' | 'or'
+  }) => {
+    const params = new URLSearchParams()
+    if (options?.renderType) params.set('render_type', options.renderType)
+    if (options?.scope) params.set('scope', options.scope)
+    if (options?.tags && options.tags.length > 0) {
+      options.tags.forEach((tag) => params.append('tags', tag))
+    }
+    if (options?.tagsMode) params.set('tags_mode', options.tagsMode)
+
+    const query = params.size ? `?${params.toString()}` : ''
+    return apiClient<TemplateWithMessageSummary[]>(`/templates${query}`)
+  },
+
+  getById: (id: string) => apiClient<TemplateWithMessages>(`/templates/${id}`),
+
+  create: (data: CreateTemplatePayload) =>
+    apiClient<TemplateFromDb & { tags: string[] }>('/templates', {
+      method: 'POST',
+      body: data,
+    }),
+
+  update: (id: string, data: UpdateTemplatePayload) =>
+    apiClient<TemplateFromDb>(`/templates/${id}`, {
+      method: 'PUT',
+      body: data,
+    }),
+
+  delete: (id: string) => apiClient(`/templates/${id}`, { method: 'DELETE' }),
+
+  publish: (id: string) => apiClient<TemplateFromDb>(`/templates/${id}/publish`, { method: 'PUT' }),
+
+  unpublish: (id: string) =>
+    apiClient<TemplateFromDb>(`/templates/${id}/unpublish`, { method: 'PUT' }),
+
+  saveFromMessageGroup: (messageGroupId: string, name?: string) =>
+    apiClient<TemplateFromDb>(`/message-groups/${messageGroupId}/save-as-template`, {
+      method: 'POST',
+      body: { name },
+    }),
+}

package/app/components/Common/NewMessageModal.vue

@@ -0,0 +1,274 @@
+<script setup lang="ts">
+import { SYSTEM_USER_ID } from '@dev.smartpricing/message-composer-utils/types'
+import type {
+  RenderType,
+  TemplateWithMessageSummary,
+  PostEntity,
+  WhatsappMessage,
+  EmailMessage,
+  BrandFromDb,
+} from '@dev.smartpricing/message-composer-utils/types'
+import type { TemplateWithMessages } from '@dev.smartpricing/message-composer-utils/types'
+import { getEmailEmpty, getWhatsappEmpty } from '@dev.smartpricing/message-composer-utils/utils'
+import { templatesApi } from '~/api/templates'
+
+const isOpen = defineModel<boolean>('open', { required: true })
+
+const { t, locale } = useI18n()
+const { mainLanguage } = storeToRefs(useAppContextStore())
+const { allowedRenderTypes, defaultRenderType } = useChannels()
+
+const renderType = ref<RenderType>(defaultRenderType.value)
+const selectedId = ref<string>() // undefined = "start from scratch"
+const selectedTemplateData = ref<TemplateWithMessages>()
+const loadingPreview = ref(false)
+const brand = ref<BrandFromDb>()
+
+const isFromScratch = computed(() => selectedId.value == null)
+const isEmail = computed(() => renderType.value === 'email_v1')
+
+const channelItems = computed(() =>
+  allowedRenderTypes.value.map((rt) => ({ label: t(`message.render_type.${rt}`), value: rt })),
+)
+
+function renderTypeToChannel(rt: RenderType): 'email' | 'whatsapp' {
+  return rt === 'email_v1' ? 'email' : 'whatsapp'
+}
+
+// Brands query (for email brand selector)
+const { data: brands } = useBrandsQuery()
+
+// Templates query
+const { data: templates, isPending: templatesLoading } = useTemplatesQuery(
+  computed(() => ({ renderType: renderType.value })),
+)
+
+const systemTemplates = computed(() =>
+  (templates.value || []).filter((t) => t.user_id === SYSTEM_USER_ID),
+)
+
+const myTemplates = computed(() =>
+  (templates.value || []).filter((t) => t.user_id !== SYSTEM_USER_ID),
+)
+
+// Default empty message for "Start from scratch" preview
+const scratchMessage = computed(() => {
+  if (isEmail.value) {
+    return getEmailEmpty(mainLanguage.value)
+  }
+  return getWhatsappEmpty(mainLanguage.value)
+})
+
+// Preview message: scratch or selected template
+const previewMessage = computed<PostEntity<EmailMessage> | PostEntity<WhatsappMessage> | undefined>(
+  () => {
+    if (isFromScratch.value) {
+      return scratchMessage.value
+    }
+
+    if (!selectedTemplateData.value?.messages?.length) return undefined
+    const msgs = selectedTemplateData.value.messages
+    const msg =
+      msgs.find((m) => m.language_id === locale.value) ||
+      msgs.find((m) => m.language_id === 'en') ||
+      msgs[0]
+    if (!msg) return undefined
+    return {
+      render_type: msg.render_type,
+      body: msg.body,
+      metadata: msg.metadata || {},
+      language_id: msg.language_id,
+      message_group_id: '',
+      status: 'draft' as const,
+      owner: '',
+      user_id: '',
+    } as PostEntity<EmailMessage> | PostEntity<WhatsappMessage>
+  },
+)
+
+// Footer button label
+const actionLabel = computed(() =>
+  isFromScratch.value ? t('templates.start_from_scratch') : t('templates.use_template'),
+)
+
+// Reset on open — pre-select "Start from scratch"
+watch(isOpen, (open) => {
+  if (open) {
+    selectedId.value = undefined
+    selectedTemplateData.value = undefined
+    brand.value = undefined
+    renderType.value = defaultRenderType.value
+  }
+})
+
+// Reset selection when render type changes
+watch(renderType, () => {
+  selectedId.value = undefined
+  selectedTemplateData.value = undefined
+  brand.value = undefined
+})
+
+// Fetch full template when selected
+watch(selectedId, async (id) => {
+  if (!id) {
+    selectedTemplateData.value = undefined
+    return
+  }
+  loadingPreview.value = true
+  try {
+    selectedTemplateData.value = await templatesApi.getById(id)
+  } finally {
+    loadingPreview.value = false
+  }
+})
+
+function selectScratch() {
+  selectedId.value = undefined
+  selectedTemplateData.value = undefined
+}
+
+function selectTemplate(tmpl: TemplateWithMessageSummary) {
+  selectedId.value = selectedId.value === tmpl.id ? undefined : tmpl.id
+}
+
+function handleCreate() {
+  isOpen.value = false
+  const channel = renderTypeToChannel(renderType.value)
+  const query: Record<string, string> = {}
+  if (selectedId.value) query.from_template = selectedId.value
+  if (brand.value) query.brand_id = brand.value.id
+  navigateTo({ name: `${channel}-message-create`, query })
+}
+</script>
+
+<template>
+  <USlideover
+    v-model:open="isOpen"
+    :title="$t('pages.message_library.add_message_group')"
+    side="right"
+    :ui="{ content: 'max-w-5xl', body: 'sm:p-0 p-0', footer: 'justify-end' }"
+  >
+    <template #body>
+      <div class="grid grid-cols-[1fr_1fr] divide-x divide-muted min-h-full">
+        <!-- Left: Controls + Template list -->
+        <div class="overflow-y-auto p-6 space-y-4">
+          <!-- Channel selector -->
+          <USelect v-if="channelItems.length > 1" v-model="renderType" :items="channelItems" />
+
+          <!-- Brand selector (email only) -->
+          <UFormField
+            v-if="isEmail && brands?.length"
+            :label="$t('editor.email.generalStyle.brandSection')"
+          >
+            <USelectMenu v-model="brand" labelKey="name" :items="brands" />
+          </UFormField>
+
+          <!-- Start from scratch -->
+          <button
+            class="flex w-full items-center gap-3 rounded-lg border-2 border-dashed p-3 text-left text-sm transition"
+            :class="
+              isFromScratch
+                ? 'border-(--ui-primary) bg-(--ui-primary)/5'
+                : 'border-(--ui-border-muted) hover:border-(--ui-border) hover:bg-(--ui-bg-elevated)'
+            "
+            @click="selectScratch"
+          >
+            <UIcon name="ph:plus-circle" class="text-xl text-(--ui-text-muted)" />
+            <span class="font-medium">{{ $t('templates.start_from_scratch') }}</span>
+          </button>
+
+          <!-- Loading -->
+          <div v-if="templatesLoading" class="flex justify-center py-4">
+            <UIcon name="ph:spinner" class="animate-spin text-xl text-(--ui-text-muted)" />
+          </div>
+
+          <template v-else>
+            <!-- My Templates -->
+            <div v-if="myTemplates.length > 0">
+              <h4 class="mb-2 text-xs font-semibold text-(--ui-text-muted) uppercase">
+                {{ $t('templates.my_templates') }}
+              </h4>
+              <div class="space-y-1">
+                <button
+                  v-for="tmpl in myTemplates"
+                  :key="tmpl.id"
+                  class="flex w-full items-center justify-between rounded-md p-2.5 text-left text-sm transition"
+                  :class="
+                    selectedId === tmpl.id
+                      ? 'bg-(--ui-primary)/10 ring-1 ring-(--ui-primary)'
+                      : 'hover:bg-(--ui-bg-elevated)'
+                  "
+                  @click="selectTemplate(tmpl)"
+                >
+                  <div class="flex items-center gap-2">
+                    <span>{{ tmpl.name }}</span>
+                    <UBadge :label="tmpl.category" size="sm" color="neutral" variant="soft" />
+                  </div>
+                  <UBadge
+                    :label="`${tmpl.messages.length} lang`"
+                    size="sm"
+                    color="info"
+                    variant="soft"
+                  />
+                </button>
+              </div>
+            </div>
+
+            <!-- System Templates -->
+            <div v-if="systemTemplates.length > 0">
+              <h4 class="mb-2 text-xs font-semibold text-(--ui-text-muted) uppercase">
+                {{ $t('templates.system_templates') }}
+              </h4>
+              <div class="space-y-1">
+                <button
+                  v-for="tmpl in systemTemplates"
+                  :key="tmpl.id"
+                  class="flex w-full items-center justify-between rounded-md p-2.5 text-left text-sm transition"
+                  :class="
+                    selectedId === tmpl.id
+                      ? 'bg-(--ui-primary)/10 ring-1 ring-(--ui-primary)'
+                      : 'hover:bg-(--ui-bg-elevated)'
+                  "
+                  @click="selectTemplate(tmpl)"
+                >
+                  <div class="flex items-center gap-2">
+                    <span>{{ tmpl.name }}</span>
+                    <UBadge :label="tmpl.category" size="sm" color="neutral" variant="soft" />
+                  </div>
+                  <UBadge
+                    :label="`${tmpl.messages.length} lang`"
+                    size="sm"
+                    color="info"
+                    variant="soft"
+                  />
+                </button>
+              </div>
+            </div>
+          </template>
+        </div>
+
+        <!-- Right: Preview -->
+        <div class="bg-neutral-50 overflow-y-auto">
+          <div v-if="loadingPreview" class="flex items-center justify-center h-full">
+            <UIcon name="ph:spinner" class="animate-spin text-xl text-(--ui-text-muted)" />
+          </div>
+
+          <div v-else-if="previewMessage && !isEmail" class="p-6">
+            <WhatsappPreview :message="previewMessage as PostEntity<WhatsappMessage>" />
+          </div>
+
+          <div v-else-if="previewMessage && isEmail" class="p-6">
+            <EmailInlinePreview
+              :message="previewMessage as PostEntity<EmailMessage>"
+              :brand="brand"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <UButton :label="actionLabel" color="primary" @click="handleCreate" />
+    </template>
+  </USlideover>
+</template>

package/app/components/Composer/EmailComposer.vue

@@ -8,10 +8,13 @@ import {
 } from '@dev.smartpricing/message-composer-utils/utils'
 import { useAppContextStore } from '@/stores/appContext'
 import { useMessageGroupQuery, useLanguagesQuery } from '~/queries'
+import { templatesApi } from '~/api/templates'
 
 const props = defineProps<{
   mode: 'create' | 'edit'
   messageGroupId?: string
+  fromTemplateId?: string
+  brandId?: string
 }>()
 
 const emit = defineEmits<{
@@ -28,7 +31,34 @@ const { goBackOrFallback } = useGoBack()
 // ── Init ──────────────────────────────────────────────────────────
 if (props.mode === 'create') {
   store.initCreate(mainLanguage.value)
-  emailEditorStore.initBrand()
+  emailEditorStore.initBrand(props.brandId)
+
+  // Pre-fill from template if provided
+  if (props.fromTemplateId) {
+    templatesApi.getById(props.fromTemplateId).then((template) => {
+      if (!template?.messages?.length) return
+      store.name = template.name
+      store.category = template.category
+      for (const msg of template.messages) {
+        if (msg.render_type !== 'email_v1') continue
+        store.messages[msg.language_id] = {
+          render_type: msg.render_type,
+          body: msg.body,
+          metadata: {},
+          language_id: msg.language_id,
+          message_group_id: '',
+          status: 'draft',
+          owner: '',
+          user_id: '',
+        } as PostEntity<EmailMessage>
+      }
+      // Reload editor with first message
+      const currentMessage = store.currentMessage
+      if (currentMessage) {
+        emailEditorStore.loadFromData(currentMessage as PostEntity<EmailMessage>)
+      }
+    })
+  }
 } else {
   // Edit mode: data loaded via watcher below
 }

package/app/components/Composer/MessageLibrary.vue

@@ -4,13 +4,14 @@ import {
   useDeleteMessageGroupMutation,
   usePublishMessageGroupMutation,
   useUnpublishMessageGroupMutation,
+  useSaveAsTemplateMutation,
 } from '~/queries'
 import type {
   MessageGroupWithMessageSummary,
   RenderType,
 } from '@dev.smartpricing/message-composer-utils/types'
 import type { MessageActionProperties, MessagesKind } from '@/types/tracking'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import BaseTable from '@/components/TemplateList/BaseTable.vue'
 
 const renderType = defineModel<RenderType>('renderType', { required: true })
@@ -42,6 +43,34 @@ const { confirm } = useConfirm()
 const { mutateAsync: deleteGroup } = useDeleteMessageGroupMutation()
 const { mutateAsync: publishGroup } = usePublishMessageGroupMutation()
 const { mutateAsync: unpublishGroup } = useUnpublishMessageGroupMutation()
+const { mutateAsync: saveAsTemplate, isPending: isSavingAsTemplate } = useSaveAsTemplateMutation()
+
+// Save as template modal state
+const saveAsTemplateModalOpen = ref(false)
+const saveAsTemplateName = ref('')
+const saveAsTemplateTarget = ref<MessageGroupWithMessageSummary | null>(null)
+
+function openSaveAsTemplateModal(row: MessageGroupWithMessageSummary) {
+  saveAsTemplateTarget.value = row
+  saveAsTemplateName.value = row.name
+  saveAsTemplateModalOpen.value = true
+}
+
+async function confirmSaveAsTemplate() {
+  if (!saveAsTemplateTarget.value) return
+
+  const row = saveAsTemplateTarget.value
+  const name = saveAsTemplateName.value.trim() || row.name
+
+  await saveAsTemplate({ messageGroupId: row.id, name })
+
+  useToast().add({
+    title: t('templates.dialogs.save_as_template.success'),
+    color: 'success',
+  })
+
+  saveAsTemplateModalOpen.value = false
+}
 
 function getMessageTrackingProps(row: MessageGroupWithMessageSummary): MessageActionProperties {
   return {
@@ -135,7 +164,7 @@ function navigate(row: MessageGroupWithMessageSummary) {
   trackEvent('message_edit', getMessageTrackingProps(row))
   emit('edit', row)
   const type = row.messages[0]?.render_type === 'email_v1' ? 'email' : 'whatsapp'
-  router.push({ name: `${type}-message-edit`, params: { id: row.id } })
+  navigateTo({ name: `${type}-message-edit`, params: { id: row.id } })
 }
 
 defineExpose({ execute })
@@ -151,5 +180,45 @@ defineExpose({ execute })
     @duplicate="handleDuplicate"
     @publish="askPublishGroup"
     @unpublish="askUnpublishGroup"
+    @save-as-template="openSaveAsTemplateModal"
   />
+
+  <UModal
+    v-model:open="saveAsTemplateModalOpen"
+    :title="t('templates.dialogs.save_as_template.title')"
+    close-icon="ph:x"
+  >
+    <template #body>
+      <div class="flex flex-col gap-4">
+        <p class="text-sm text-muted">
+          {{ t('templates.dialogs.save_as_template.message') }}
+        </p>
+        <UFormField :label="t('templates.template_name')">
+          <UInput
+            v-model="saveAsTemplateName"
+            :placeholder="t('templates.template_name_placeholder')"
+            class="w-full"
+            autofocus
+            @keydown.enter="confirmSaveAsTemplate"
+          />
+        </UFormField>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex gap-2 justify-end w-full">
+        <UButton variant="outline" color="neutral" @click="saveAsTemplateModalOpen = false">
+          {{ t('common.actions.cancel') }}
+        </UButton>
+        <UButton
+          color="primary"
+          :loading="isSavingAsTemplate"
+          :disabled="!saveAsTemplateName.trim()"
+          @click="confirmSaveAsTemplate"
+        >
+          {{ t('templates.save_as_template') }}
+        </UButton>
+      </div>
+    </template>
+  </UModal>
 </template>

package/app/components/Composer/WhatsappComposer.vue

@@ -9,11 +9,13 @@ import type {
 import { useAppContextStore } from '@/stores/appContext'
 import { useMetaSubmissionStore } from '@/stores/metaSubmission'
 import { useMessageGroupQuery, useLanguagesQuery } from '~/queries'
+import { templatesApi } from '~/api/templates'
 import type { WaHeaderType } from '~/types/tracking'
 
 const props = defineProps<{
   mode: 'create' | 'edit'
   messageGroupId?: string
+  fromTemplateId?: string
 }>()
 
 const emit = defineEmits<{
@@ -30,6 +32,28 @@ const { submitToMeta } = useMetaSubmissionStore()
 // ── Init ──────────────────────────────────────────────────────────
 if (props.mode === 'create') {
   store.initCreate(mainLanguage.value)
+
+  // Pre-fill from template if provided
+  if (props.fromTemplateId) {
+    templatesApi.getById(props.fromTemplateId).then((template) => {
+      if (!template?.messages?.length) return
+      store.name = template.name
+      store.category = template.category
+      for (const msg of template.messages) {
+        if (msg.render_type !== 'whatsapp_v1') continue
+        store.messages[msg.language_id] = {
+          render_type: msg.render_type,
+          body: msg.body,
+          metadata: {},
+          language_id: msg.language_id,
+          message_group_id: '',
+          status: 'draft',
+          owner: '',
+          user_id: '',
+        } as PostEntity<WhatsappMessage>
+      }
+    })
+  }
 }
 
 // ── Edit mode: fetch message group ────────────────────────────────

package/app/components/CreateTemplateButton.vue

@@ -1,59 +1,22 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useRouter } from 'vue-router'
+import NewMessageModal from '@/components/Common/NewMessageModal.vue'
 
-const router = useRouter()
-const { hasWhatsapp, hasEmail } = useChannels()
-const { t } = useI18n()
 const { trackEvent } = useTracking()
+const modalOpen = ref(false)
 
-function createTemplate(type: 'whatsapp' | 'email') {
-  trackEvent('message_create', { message_kind: type })
-  router.push({ name: `${type}-message-create` })
+function openModal() {
+  trackEvent('message_create', { message_kind: 'open_modal' })
+  modalOpen.value = true
 }
-
-const templateOptions = computed(() => {
-  const options = []
-  if (hasWhatsapp.value) {
-    options.push({
-      label: t('message.render_type.whatsapp_v1'),
-      onSelect: () => createTemplate('whatsapp'),
-    })
-  }
-  if (hasEmail.value) {
-    options.push({
-      label: t('message.render_type.email_v1'),
-      onSelect: () => createTemplate('email'),
-    })
-  }
-  return options
-})
-
-const singleChannelType = computed(() => {
-  if (hasWhatsapp.value && !hasEmail.value) return 'whatsapp'
-  if (hasEmail.value && !hasWhatsapp.value) return 'email'
-  return null
-})
 </script>
 
 <template>
   <UButton
-    v-if="singleChannelType"
     :label="$t('pages.message_library.add_message_group')"
     color="primary"
     :data-testid="homeTestIds.createTemplateButton"
-    @click="createTemplate(singleChannelType)"
+    @click="openModal"
   />
-  <UDropdownMenu
-    v-else
-    :items="templateOptions"
-    :popper="{ placement: 'bottom-end' }"
-    :data-testid="homeTestIds.createTemplateDropdown"
-  >
-    <UButton
-      :label="$t('pages.message_library.add_message_group')"
-      color="primary"
-      :data-testid="homeTestIds.createTemplateButton"
-    />
-  </UDropdownMenu>
+
+  <NewMessageModal v-model:open="modalOpen" />
 </template>

package/app/components/Email/InlinePreview.vue

@@ -44,7 +44,7 @@ const previewEmail = useDebounceFn(() => {
           default_socials: normalizeBrandSocials(props.brand.default_socials),
           logo_url: props.brand.logo_url,
         }
-      : null,
+      : undefined,
   })
 }, 0)
 
@@ -65,6 +65,13 @@ watch(
   { immediate: true },
 )
 
+watch(
+  () => props.brand,
+  () => {
+    previewEmail()
+  },
+)
+
 const iframeContent = ref<string>('')
 
 watch(

package/app/components/TemplateList/BaseTable.vue

@@ -18,6 +18,7 @@ const emit = defineEmits<{
   duplicate: [MessageGroupWithMessageSummary]
   publish: [MessageGroupWithMessageSummary]
   unpublish: [MessageGroupWithMessageSummary]
+  saveAsTemplate: [MessageGroupWithMessageSummary]
 }>()
 
 const appContext = useAppContextStore()
@@ -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',

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>