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

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'

package/app/queries/templates.ts

@@ -0,0 +1,119 @@
+import { useQuery, useMutation, useQueryCache } from '@pinia/colada'
+import type { RenderType } from '@dev.smartpricing/message-composer-utils/types'
+import type {
+  TemplateWithMessageSummary,
+  CreateTemplatePayload,
+  UpdateTemplatePayload,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { templatesApi } from '~/api/templates'
+
+// QUERIES
+
+export function useTemplatesQuery(
+  options?: MaybeRefOrGetter<{
+    renderType?: RenderType
+    scope?: 'system' | 'mine' | 'all'
+    tags?: string[]
+    tagsMode?: 'and' | 'or'
+  }>,
+) {
+  return useQuery({
+    key: () => ['templates', JSON.stringify(toValue(options))],
+    query: () => templatesApi.getAll(toValue(options)),
+    staleTime: 0,
+  })
+}
+
+export function useTemplateQuery(id: MaybeRefOrGetter<string>) {
+  return useQuery({
+    key: () => ['templates', toValue(id)],
+    query: () => templatesApi.getById(toValue(id)),
+    staleTime: 2 * 60 * 1000,
+  })
+}
+
+// MUTATIONS
+
+export function useCreateTemplateMutation() {
+  const queryCache = useQueryCache()
+
+  return useMutation({
+    mutation: (data: CreateTemplatePayload) => templatesApi.create(data),
+    onSuccess: () => {
+      queryCache.invalidateQueries({ key: ['templates'] })
+    },
+  })
+}
+
+export function useUpdateTemplateMutation() {
+  const queryCache = useQueryCache()
+
+  return useMutation({
+    mutation: ({ id, data }: { id: string; data: UpdateTemplatePayload }) =>
+      templatesApi.update(id, data),
+    onSuccess: (_, { id }) => {
+      queryCache.invalidateQueries({ key: ['templates', id] })
+      queryCache.invalidateQueries({ key: ['templates'] })
+    },
+  })
+}
+
+export function useDeleteTemplateMutation() {
+  const queryCache = useQueryCache()
+
+  return useMutation({
+    mutation: templatesApi.delete,
+    onMutate: async (id) => {
+      queryCache.cancelQueries({ key: ['templates'] })
+      const previous = queryCache.getQueryData(['templates'])
+
+      queryCache.setQueryData(['templates'], (old: TemplateWithMessageSummary[] | undefined) =>
+        old?.filter((t) => t.id !== id),
+      )
+
+      return { previous }
+    },
+    onError: (_, __, context) => {
+      if (context?.previous) {
+        queryCache.setQueryData(['templates'], context.previous)
+      }
+    },
+    onSuccess: () => {
+      queryCache.invalidateQueries({ key: ['templates'] })
+    },
+  })
+}
+
+export function usePublishTemplateMutation() {
+  const queryCache = useQueryCache()
+
+  return useMutation({
+    mutation: templatesApi.publish,
+    onSuccess: () => {
+      queryCache.invalidateQueries({ key: ['templates'] })
+    },
+  })
+}
+
+export function useUnpublishTemplateMutation() {
+  const queryCache = useQueryCache()
+
+  return useMutation({
+    mutation: templatesApi.unpublish,
+    onSuccess: () => {
+      queryCache.invalidateQueries({ key: ['templates'] })
+    },
+  })
+}
+
+export function useSaveAsTemplateMutation() {
+  const queryCache = useQueryCache()
+
+  return useMutation({
+    mutation: ({ messageGroupId, name }: { messageGroupId: string; name?: string }) =>
+      templatesApi.saveFromMessageGroup(messageGroupId, name),
+    onSuccess: () => {
+      queryCache.invalidateQueries({ key: ['templates'] })
+    },
+  })
+}

package/app/stores/appContext.ts

@@ -27,6 +27,7 @@ export const useAppContextStore = defineStore('appContext', () => {
     () => ctx.dinamicValues?.value ?? [],
   )
   const default_tags = computed<string[]>(() => ctx.default_tags?.value ?? [])
+  const isAdmin = computed(() => ctx.isAdmin?.value ?? false)
   const metaWabaId = computed(() => ctx.metaWabaId?.value ?? '')
   const metaAccessToken = computed(() => ctx.metaAccessToken?.value ?? '')
 
@@ -88,6 +89,7 @@ export const useAppContextStore = defineStore('appContext', () => {
     metaAccessToken,
     owner_id,
     default_tags,
+    isAdmin,
 
     isInitialized: computed(() => isInitialized.value),
 

package/app/utils/testIds.const.ts

@@ -520,6 +520,7 @@ export const templateListTableTestIds = {
   rowDuplicateAction: 'template-list-table-row-duplicate',
   rowPublishAction: 'template-list-table-row-publish',
   rowUnpublishAction: 'template-list-table-row-unpublish',
+  rowSaveAsTemplateAction: 'template-list-table-row-save-as-template',
 } as const
 
 export const templateListStatusCellTestIds = {

package/i18n/locales/de.ts

@@ -831,6 +831,48 @@ Diese Nachrichten müssen funktional sein, nicht werblich.
     no_preview: 'Keine Vorschau verfügbar',
     subject: 'Betreff',
   },
+  templates: {
+    title: 'Vorlagen',
+    my_templates: 'Meine Vorlagen',
+    system_templates: 'Systemvorlagen',
+    add_template: 'Neue Vorlage',
+    create_template: 'Vorlage erstellen',
+    edit_template: 'Vorlage bearbeiten',
+    use_template: 'Diese Vorlage verwenden',
+    start_from_scratch: 'Neu beginnen',
+    pick_template: 'Vorlage auswählen',
+    save_as_template: 'Als Vorlage speichern',
+    system_template: 'Systemvorlage',
+    template_name: 'Vorlagenname',
+    template_name_placeholder: 'Vorlagenname eingeben',
+    no_templates: 'Keine Vorlagen verfügbar',
+    new_message_email: 'Neue E-Mail-Nachricht',
+    new_message_whatsapp: 'Neue WhatsApp-Nachricht',
+    dialogs: {
+      delete: {
+        title: 'Vorlage löschen',
+        message:
+          'Diese Aktion kann nicht rückgängig gemacht werden. Möchten Sie {name} wirklich löschen?',
+        success: '"{name}" wurde gelöscht.',
+      },
+      publish: {
+        title: 'Vorlage veröffentlichen',
+        message: '"{name}" veröffentlichen, um sie allen Benutzern zugänglich zu machen?',
+        success: '"{name}" wurde veröffentlicht.',
+      },
+      unpublish: {
+        title: 'Vorlage verbergen',
+        message: '"{name}" verbergen? Sie wird für andere Benutzer nicht mehr sichtbar sein.',
+        success: '"{name}" wurde verborgen.',
+      },
+      save_as_template: {
+        title: 'Als Vorlage speichern',
+        message: 'Diese Nachricht als wiederverwendbare Vorlage speichern?',
+        success: 'Vorlage erfolgreich gespeichert.',
+      },
+    },
+    copy_success: 'Nachricht aus Vorlage erstellt.',
+  },
   public: {
     select_message: {
       choose_message: 'Nachricht auswählen...',

package/i18n/locales/en.ts

@@ -822,6 +822,47 @@ These messages must be functional, not promotional.
     no_preview: 'No preview available',
     subject: 'Subject',
   },
+  templates: {
+    title: 'Templates',
+    my_templates: 'My templates',
+    system_templates: 'System templates',
+    add_template: 'New template',
+    create_template: 'Create template',
+    edit_template: 'Edit template',
+    use_template: 'Use this template',
+    start_from_scratch: 'Start from scratch',
+    pick_template: 'Choose a template',
+    save_as_template: 'Save as template',
+    system_template: 'System template',
+    template_name: 'Template name',
+    template_name_placeholder: 'Enter template name',
+    no_templates: 'No templates available',
+    new_message_email: 'New email message',
+    new_message_whatsapp: 'New WhatsApp message',
+    dialogs: {
+      delete: {
+        title: 'Delete template',
+        message: "This action can't be undone. Are you sure you want to delete {name}?",
+        success: '"{name}" has been deleted.',
+      },
+      publish: {
+        title: 'Publish template',
+        message: 'Publish "{name}" to make it available to all users?',
+        success: '"{name}" has been published.',
+      },
+      unpublish: {
+        title: 'Unpublish template',
+        message: 'Unpublish "{name}"? It will no longer be visible to other users.',
+        success: '"{name}" has been unpublished.',
+      },
+      save_as_template: {
+        title: 'Save as template',
+        message: 'Save this message as a reusable template?',
+        success: 'Template saved successfully.',
+      },
+    },
+    copy_success: 'Message created from template.',
+  },
   public: {
     select_message: {
       choose_message: 'Choose a message...',

package/i18n/locales/es.ts

@@ -830,6 +830,47 @@ Estos mensajes deben ser funcionales, no promocionales.
     no_preview: 'No hay vista previa disponible',
     subject: 'Asunto',
   },
+  templates: {
+    title: 'Plantillas',
+    my_templates: 'Mis plantillas',
+    system_templates: 'Plantillas del sistema',
+    add_template: 'Nueva plantilla',
+    create_template: 'Crear plantilla',
+    edit_template: 'Editar plantilla',
+    use_template: 'Usar esta plantilla',
+    start_from_scratch: 'Empezar desde cero',
+    pick_template: 'Elegir una plantilla',
+    save_as_template: 'Guardar como plantilla',
+    system_template: 'Plantilla de sistema',
+    template_name: 'Nombre de plantilla',
+    template_name_placeholder: 'Ingrese nombre de plantilla',
+    no_templates: 'No hay plantillas disponibles',
+    new_message_email: 'Nuevo mensaje de email',
+    new_message_whatsapp: 'Nuevo mensaje de WhatsApp',
+    dialogs: {
+      delete: {
+        title: 'Eliminar plantilla',
+        message: 'Esta acción no se puede deshacer. ¿Está seguro de que desea eliminar {name}?',
+        success: '"{name}" ha sido eliminado.',
+      },
+      publish: {
+        title: 'Publicar plantilla',
+        message: '¿Publicar "{name}" para hacerla disponible a todos los usuarios?',
+        success: '"{name}" ha sido publicado.',
+      },
+      unpublish: {
+        title: 'Ocultar plantilla',
+        message: '¿Ocultar "{name}"? Ya no será visible para otros usuarios.',
+        success: '"{name}" ha sido ocultado.',
+      },
+      save_as_template: {
+        title: 'Guardar como plantilla',
+        message: '¿Guardar este mensaje como plantilla reutilizable?',
+        success: 'Plantilla guardada exitosamente.',
+      },
+    },
+    copy_success: 'Mensaje creado a partir de la plantilla.',
+  },
   public: {
     select_message: {
       choose_message: 'Elige un mensaje...',

package/i18n/locales/fr.ts

@@ -834,6 +834,47 @@ Ces messages doivent être fonctionnels, et non promotionnels.
     no_preview: 'Aucun aperçu disponible',
     subject: 'Objet',
   },
+  templates: {
+    title: 'Modèles',
+    my_templates: 'Mes modèles',
+    system_templates: 'Modèles système',
+    add_template: 'Nouveau modèle',
+    create_template: 'Créer un modèle',
+    edit_template: 'Modifier le modèle',
+    use_template: 'Utiliser ce modèle',
+    start_from_scratch: 'Partir de zéro',
+    pick_template: 'Choisir un modèle',
+    save_as_template: 'Enregistrer comme modèle',
+    system_template: 'Modèle système',
+    template_name: 'Nom du modèle',
+    template_name_placeholder: 'Entrez le nom du modèle',
+    no_templates: 'Aucun modèle disponible',
+    new_message_email: 'Nouveau message email',
+    new_message_whatsapp: 'Nouveau message WhatsApp',
+    dialogs: {
+      delete: {
+        title: 'Supprimer le modèle',
+        message: 'Cette action est irréversible. Êtes-vous sûr de vouloir supprimer {name} ?',
+        success: '"{name}" a été supprimé.',
+      },
+      publish: {
+        title: 'Publier le modèle',
+        message: 'Publier "{name}" pour le rendre accessible à tous les utilisateurs ?',
+        success: '"{name}" a été publié.',
+      },
+      unpublish: {
+        title: 'Masquer le modèle',
+        message: 'Masquer "{name}" ? Il ne sera plus visible pour les autres utilisateurs.',
+        success: '"{name}" a été masqué.',
+      },
+      save_as_template: {
+        title: 'Enregistrer comme modèle',
+        message: 'Enregistrer ce message comme modèle réutilisable ?',
+        success: 'Modèle enregistré avec succès.',
+      },
+    },
+    copy_success: 'Message créé à partir du modèle.',
+  },
   public: {
     select_message: {
       choose_message: 'Choisir un message...',

package/i18n/locales/it.ts

@@ -828,6 +828,47 @@ Questi messaggi devono essere funzionali, non promozionali.
     no_preview: 'Nessuna anteprima disponibile',
     subject: 'Oggetto',
   },
+  templates: {
+    title: 'Modelli',
+    my_templates: 'I miei modelli',
+    system_templates: 'Modelli di sistema',
+    add_template: 'Nuovo modello',
+    create_template: 'Crea modello',
+    edit_template: 'Modifica modello',
+    use_template: 'Usa questo modello',
+    start_from_scratch: 'Inizia da zero',
+    pick_template: 'Scegli un modello',
+    save_as_template: 'Salva come modello',
+    system_template: 'Modello di sistema',
+    template_name: 'Nome modello',
+    template_name_placeholder: 'Inserisci nome modello',
+    no_templates: 'Nessun modello disponibile',
+    new_message_email: 'Nuovo messaggio email',
+    new_message_whatsapp: 'Nuovo messaggio WhatsApp',
+    dialogs: {
+      delete: {
+        title: 'Elimina modello',
+        message: 'Questa azione non può essere annullata. Sei sicuro di voler eliminare {name}?',
+        success: '"{name}" è stato eliminato.',
+      },
+      publish: {
+        title: 'Pubblica modello',
+        message: 'Pubblicare "{name}" per renderlo disponibile a tutti gli utenti?',
+        success: '"{name}" è stato pubblicato.',
+      },
+      unpublish: {
+        title: 'Nascondi modello',
+        message: 'Nascondere "{name}"? Non sarà più visibile agli altri utenti.',
+        success: '"{name}" è stato nascosto.',
+      },
+      save_as_template: {
+        title: 'Salva come modello',
+        message: 'Salvare questo messaggio come modello riutilizzabile?',
+        success: 'Modello salvato con successo.',
+      },
+    },
+    copy_success: 'Messaggio creato dal modello.',
+  },
   public: {
     select_message: {
       choose_message: 'Scegli un messaggio...',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev.smartpricing/message-composer-layer",
-  "version": "1.0.27",
+  "version": "4.0.2-templates.0",
   "private": false,
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -30,7 +30,6 @@
     "@vueuse/core": "^14.3.0",
     "@vueuse/nuxt": "^14.3.0",
     "colorthief": "^3.3.1",
-    "jwt-decode": "^4.0.0",
     "monaco-editor": "^0.55.1",
     "nuxt": "^4.4.5",
     "ofetch": "^1.5.1",
@@ -39,7 +38,7 @@
     "vue-router": "^5.0.7",
     "vue3-emoji-picker": "^1.1.8",
     "zod": "^4.4.3",
-    "@dev.smartpricing/message-composer-utils": "3.1.27"
+    "@dev.smartpricing/message-composer-utils": "4.0.3-templates.0"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",

package/app/plugins/admin-shortcut.client.ts

@@ -1,7 +0,0 @@
-export default defineNuxtPlugin(() => {
-  onNuxtReady(() => {
-    const adminStore = useAdminStore()
-    const { shift_space } = useMagicKeys()
-    whenever(shift_space!, () => adminStore.toggleAdminMode())
-  })
-})

package/app/stores/adminStore.ts

@@ -1,50 +0,0 @@
-import { jwtDecode } from 'jwt-decode'
-
-interface TokenData {
-  id: number
-  role: string
-  accounting: boolean
-  email: string
-}
-
-export const useAdminStore = defineStore('admin', () => {
-  const appContext = useAppContextStore()
-  const adminModeActive = ref(false)
-
-  const isAccounting = computed(() => {
-    const token = appContext.authenticationToken
-    if (!token) return false
-    try {
-      const payload = jwtDecode<TokenData>(token)
-      return payload.accounting === true
-    } catch {
-      return false
-    }
-  })
-
-  function activateAdminMode() {
-    if (!isAccounting.value) return
-    adminModeActive.value = true
-  }
-
-  function deactivateAdminMode() {
-    adminModeActive.value = false
-  }
-
-  function toggleAdminMode() {
-    if (!isAccounting.value) {
-      adminModeActive.value = false
-      return
-    }
-    adminModeActive.value = !adminModeActive.value
-  }
-
-  const isAdminModeActive = computed(() => adminModeActive.value)
-
-  return {
-    activateAdminMode,
-    deactivateAdminMode,
-    isAdminModeActive,
-    toggleAdminMode,
-  }
-})