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

package/app/api/templates.ts

@@ -4,6 +4,7 @@ import type {
   TemplateWithMessageSummary,
   CreateTemplatePayload,
   UpdateTemplatePayload,
+  PromoteTemplatePayload,
 } from '@dev.smartpricing/message-composer-utils/types'
 import { apiClient } from './client'
 
@@ -47,6 +48,12 @@ export const templatesApi = {
   unpublish: (id: string) =>
     apiClient<TemplateFromDb>(`/templates/${id}/unpublish`, { method: 'PUT' }),
 
+  promote: (id: string, data: PromoteTemplatePayload) =>
+    apiClient<TemplateFromDb>(`/templates/${id}/promote`, {
+      method: 'POST',
+      body: data,
+    }),
+
   saveFromMessageGroup: (messageGroupId: string, name?: string) =>
     apiClient<TemplateFromDb>(`/message-groups/${messageGroupId}/save-as-template`, {
       method: 'POST',

package/app/components/TemplateList/PromoteModal.vue

@@ -0,0 +1,69 @@
+<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/create.vue

@@ -13,9 +13,6 @@ const toast = useToast()
 const { t } = useI18n()
 const { goBackOrFallback } = useGoBack()
 
-const appContext = useAppContextStore()
-const isSystem = ref(false)
-
 const { mutateAsync: createTemplate } = useCreateTemplateMutation()
 const saving = ref(false)
 
@@ -36,7 +33,6 @@ async function handleSave() {
       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' })
@@ -73,14 +69,6 @@ async function handleSave() {
       />
     </template>
 
-    <ComposerEmailComposer ref="composerRef" mode="create">
-      <template #actions>
-        <UCheckbox
-          v-if="appContext.isAdmin"
-          v-model="isSystem"
-          :label="$t('templates.system_template')"
-        />
-      </template>
-    </ComposerEmailComposer>
+    <ComposerEmailComposer ref="composerRef" mode="create" />
   </LayoutBasePage>
 </template>

package/app/pages/templates/index.vue

@@ -38,6 +38,13 @@ const { data: templates, isPending } = useTemplatesQuery(
 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 = []
@@ -117,6 +124,16 @@ function rowActions(tmpl: TemplateWithMessageSummary) {
   ]
 
   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'),
@@ -240,5 +257,7 @@ function createTemplate() {
         </UTable>
       </UCard>
     </div>
+
+    <TemplateListPromoteModal v-model:open="isPromoteModalOpen" :template="promoteTarget" />
   </LayoutBasePage>
 </template>

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

@@ -13,9 +13,6 @@ const toast = useToast()
 const { t } = useI18n()
 const { goBackOrFallback } = useGoBack()
 
-const appContext = useAppContextStore()
-const isSystem = ref(false)
-
 const { mutateAsync: createTemplate } = useCreateTemplateMutation()
 const saving = ref(false)
 
@@ -36,7 +33,6 @@ async function handleSave() {
       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' })
@@ -73,14 +69,6 @@ async function handleSave() {
       />
     </template>
 
-    <ComposerWhatsappComposer ref="composerRef" mode="create">
-      <template #actions>
-        <UCheckbox
-          v-if="appContext.isAdmin"
-          v-model="isSystem"
-          :label="$t('templates.system_template')"
-        />
-      </template>
-    </ComposerWhatsappComposer>
+    <ComposerWhatsappComposer ref="composerRef" mode="create" />
   </LayoutBasePage>
 </template>

package/app/queries/templates.ts

@@ -4,6 +4,7 @@ import type {
   TemplateWithMessageSummary,
   CreateTemplatePayload,
   UpdateTemplatePayload,
+  PromoteTemplatePayload,
 } from '@dev.smartpricing/message-composer-utils/types'
 import { templatesApi } from '~/api/templates'
 
@@ -106,6 +107,18 @@ export function useUnpublishTemplateMutation() {
   })
 }
 
+export function usePromoteTemplateMutation() {
+  const queryCache = useQueryCache()
+
+  return useMutation({
+    mutation: ({ id, data }: { id: string; data: PromoteTemplatePayload }) =>
+      templatesApi.promote(id, data),
+    onSuccess: () => {
+      queryCache.invalidateQueries({ key: ['templates'] })
+    },
+  })
+}
+
 export function useSaveAsTemplateMutation() {
   const queryCache = useQueryCache()
 

package/i18n/locales/de.ts

@@ -43,6 +43,7 @@ export default {
       save: 'Speichern',
       remove: 'Entfernen',
       reset_defaults: 'Auf Standardwerte zurücksetzen',
+      confirm: 'Bestätigen',
     },
     internal: 'Intern',
     imageUpload: {

package/i18n/locales/en.ts

@@ -43,6 +43,7 @@ export default {
       save: 'Save',
       remove: 'Remove',
       reset_defaults: 'Reset to defaults',
+      confirm: 'Confirm',
     },
     internal: 'Internal',
     imageUpload: {
@@ -860,6 +861,17 @@ These messages must be functional, not promotional.
         message: 'Save this message as a reusable template?',
         success: 'Template saved successfully.',
       },
+      promote: {
+        title: 'Promote to System Template',
+        clone_label: 'Clone as System',
+        clone_description:
+          'Create an independent copy as a system template. The original template stays unchanged.',
+        convert_label: 'Convert to System',
+        convert_description:
+          'This template will become a system template. The original owner will lose ownership. This action cannot be undone.',
+        success_clone: '"{name}" cloned as system template.',
+        success_convert: '"{name}" promoted to system template.',
+      },
     },
     copy_success: 'Message created from template.',
   },

package/i18n/locales/es.ts

@@ -43,6 +43,7 @@ export default {
       save: 'Guardar',
       remove: 'Eliminar',
       reset_defaults: 'Restablecer valores predeterminados',
+      confirm: 'Confirmar',
     },
     internal: 'Interno',
     imageUpload: {

package/i18n/locales/fr.ts

@@ -43,6 +43,7 @@ export default {
       save: 'Enregistrer',
       remove: 'Supprimer',
       reset_defaults: 'Réinitialiser les valeurs par défaut',
+      confirm: 'Confirmer',
     },
     internal: 'Interne',
     imageUpload: {

package/i18n/locales/it.ts

@@ -43,6 +43,7 @@ export default {
       save: 'Salva',
       remove: 'Rimuovi',
       reset_defaults: 'Ripristina valori predefiniti',
+      confirm: 'Conferma',
     },
     internal: 'Interno',
     imageUpload: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev.smartpricing/message-composer-layer",
-  "version": "4.0.2-templates.0",
+  "version": "4.0.2-templates.1",
   "private": false,
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -38,7 +38,7 @@
     "vue-router": "^5.0.7",
     "vue3-emoji-picker": "^1.1.8",
     "zod": "^4.4.3",
-    "@dev.smartpricing/message-composer-utils": "4.0.3-templates.0"
+    "@dev.smartpricing/message-composer-utils": "4.0.3-templates.1"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",