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

package/app/api/index.ts

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

package/app/api/organization.ts

@@ -0,0 +1,5 @@
+import { apiClient } from './client'
+
+export const organizationApi = {
+  getData: () => apiClient<Record<string, string>>('/organization/data'),
+}

package/app/components/Common/MessagePreviewSlideover.vue

@@ -81,7 +81,6 @@ const isEmail = computed(() => renderType.value === 'email_v1')
         v-else-if="isEmail"
         :message="message as EmailMessage"
         :brand="emailEditorStore.brand"
-        :dynamic-data="dynamicData"
       />
     </template>
   </USlideover>

package/app/components/Composer/EmailComposer.vue

@@ -8,13 +8,10 @@ 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<{
@@ -31,34 +28,7 @@ const { goBackOrFallback } = useGoBack()
 // ── Init ──────────────────────────────────────────────────────────
 if (props.mode === 'create') {
   store.initCreate(mainLanguage.value)
-  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>)
-      }
-    })
-  }
+  emailEditorStore.initBrand()
 } else {
   // Edit mode: data loaded via watcher below
 }

package/app/components/Composer/MessageLibrary.vue

@@ -4,14 +4,13 @@ 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, ref } from 'vue'
+import { computed } from 'vue'
 import BaseTable from '@/components/TemplateList/BaseTable.vue'
 
 const renderType = defineModel<RenderType>('renderType', { required: true })
@@ -43,34 +42,6 @@ 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 {
@@ -180,45 +151,5 @@ 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,13 +9,11 @@ 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<{
@@ -32,28 +30,6 @@ 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,22 +1,59 @@
 <script setup lang="ts">
-import NewMessageModal from '@/components/Common/NewMessageModal.vue'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
 
+const router = useRouter()
+const { hasWhatsapp, hasEmail } = useChannels()
+const { t } = useI18n()
 const { trackEvent } = useTracking()
-const modalOpen = ref(false)
 
-function openModal() {
-  trackEvent('message_create', { message_kind: 'open_modal' })
-  modalOpen.value = true
+function createTemplate(type: 'whatsapp' | 'email') {
+  trackEvent('message_create', { message_kind: type })
+  router.push({ name: `${type}-message-create` })
 }
+
+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="openModal"
+    @click="createTemplate(singleChannelType)"
   />
-
-  <NewMessageModal v-model:open="modalOpen" />
+  <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>
 </template>

package/app/components/Email/InlinePreview.vue

@@ -4,7 +4,6 @@ import type {
   PostEntity,
   BrandFromDb,
 } from '@dev.smartpricing/message-composer-utils/types'
-import { extractEmailParameters } from '@dev.smartpricing/message-composer-utils/utils'
 import { ref, computed, watch } from 'vue'
 import { useDebounceFn } from '@vueuse/core'
 import HtmlPreviewIframe from '@/components/Common/HtmlPreviewIframe.vue'
@@ -16,7 +15,6 @@ const props = withDefaults(
   defineProps<{
     message: PostEntity<EmailMessage> | EmailMessage
     brand?: BrandFromDb | null
-    dynamicData?: Record<string, string>
     view?: 'desktop' | 'mobile'
     showSubject?: boolean
   }>(),
@@ -27,16 +25,11 @@ const iframeWidth = computed(() => {
   return props.view === 'mobile' ? '400px' : '600px'
 })
 
-// Extract parameters client-side
-const parameters = computed(() => extractEmailParameters(props.message))
-
-const parameterValues = ref<Record<string, string>>({})
 const { mutate: preview, data: previewed, isLoading: isPreviewing } = usePreviewEmailMutation()
 
 const previewEmail = useDebounceFn(() => {
   preview({
     message: props.message as any,
-    parameters: parameterValues.value,
     brand: props.brand
       ? {
           default_email_settings: props.brand.default_email_settings,
@@ -44,32 +37,16 @@ const previewEmail = useDebounceFn(() => {
           default_socials: normalizeBrandSocials(props.brand.default_socials),
           logo_url: props.brand.logo_url,
         }
-      : undefined,
+      : null,
   })
 }, 0)
 
 watch(
-  parameters,
-  (params) => {
-    const defaults = props.dynamicData || {}
-    parameterValues.value = params.reduce(
-      (acc, param) => {
-        acc[param] = defaults[param] || `Sample ${param}`
-        return acc
-      },
-      {} as Record<string, string>,
-    )
-
-    previewEmail()
-  },
-  { immediate: true },
-)
-
-watch(
-  () => props.brand,
+  () => props.message,
   () => {
     previewEmail()
   },
+  { immediate: true, deep: true },
 )
 
 const iframeContent = ref<string>('')

package/app/components/Email/SendTestEmailModal.vue

@@ -5,6 +5,7 @@ import { useQuery } from '@pinia/colada'
 import { useSendTestEmailMutation } from '~/queries'
 import { messageGroupsApi, messagesApi } from '~/api'
 import { useEmailEditorStore } from '~/stores/emailEditor'
+import { useComposerContext } from '~/composables/composerContext'
 import { z } from 'zod'
 
 defineOptions({
@@ -83,12 +84,28 @@ const isResolvingMessage = computed(
 const { t } = useI18n()
 const toast = useToast()
 const emailEditorStore = useEmailEditorStore()
+const composerContext = useComposerContext()
 const { mutate: sendTest, isLoading: isSending, status } = useSendTestEmailMutation()
 
+const defaultSenderEmail = computed(
+  () => composerContext.organizationData?.value?.senderEmail ?? '',
+)
+
 const state = ref<Schema>({
   to: '',
+  from: '',
 })
 
+watch(
+  defaultSenderEmail,
+  (email) => {
+    if (!state.value.from) {
+      state.value.from = email
+    }
+  },
+  { immediate: true },
+)
+
 const schema = z.object({
   to: z
     .string()
@@ -103,6 +120,9 @@ const schema = z.object({
       },
       { message: t('editor.validation.error.emailInvalid') },
     ),
+  from: z.string().refine((value) => !value || isEmail(value), {
+    message: t('editor.validation.error.emailInvalid'),
+  }),
 })
 
 type Schema = z.output<typeof schema>
@@ -117,6 +137,7 @@ function onSubmit() {
     message: resolvedMessage.value,
     to: state.value.to,
     brand_id: resolvedBrandId.value,
+    from: state.value.from || undefined,
   })
 }
 
@@ -161,14 +182,25 @@ watch(status, (newStatus) => {
     </slot>
 
     <template #body>
-      <UForm ref="formRef" :schema="schema" :state="state" @submit="onSubmit">
-        <UFormField name="to" :data-testid="sendTestEmailModalTestIds.toFormField">
+      <UForm ref="formRef" :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
+        <UFormField
+          name="to"
+          :label="$t('pages.email.test_email_to')"
+          :data-testid="sendTestEmailModalTestIds.toFormField"
+        >
           <UInput
             v-model="state.to"
             :placeholder="$t('pages.email.test_email_to_placeholder')"
             :data-testid="sendTestEmailModalTestIds.toInput"
           />
         </UFormField>
+        <UFormField name="from" :label="$t('pages.email.test_email_from')">
+          <UInput
+            v-model="state.from"
+            type="email"
+            :placeholder="$t('pages.email.test_email_from_placeholder')"
+          />
+        </UFormField>
       </UForm>
     </template>
 

package/app/components/TemplateList/BaseTable.vue

@@ -18,7 +18,6 @@ const emit = defineEmits<{
   duplicate: [MessageGroupWithMessageSummary]
   publish: [MessageGroupWithMessageSummary]
   unpublish: [MessageGroupWithMessageSummary]
-  saveAsTemplate: [MessageGroupWithMessageSummary]
 }>()
 
 const appContext = useAppContextStore()
@@ -77,12 +76,6 @@ 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/composables/composerContext.ts

@@ -1,6 +1,10 @@
 import type { InjectionKey, Ref } from 'vue'
 import type { AppContextConfig } from '@dev.smartpricing/message-composer-utils/types'
 
+export interface OrganizationData {
+  senderEmail: string
+}
+
 export interface ComposerContext {
   authenticationToken: Ref<string>
   owner_id?: Ref<string>
@@ -14,6 +18,7 @@ export interface ComposerContext {
   metaWabaId?: Ref<string>
   metaAccessToken?: Ref<string>
   isAdmin?: Ref<boolean>
+  organizationData?: Ref<OrganizationData>
 }
 
 export const COMPOSER_CONTEXT_KEY: InjectionKey<ComposerContext> = Symbol.for('composer-context')

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

@@ -5,12 +5,8 @@ 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>
@@ -56,12 +52,7 @@ const brandId = computed(() => route.query.brand_id as string | undefined)
       />
     </template>
 
-    <ComposerEmailComposer
-      ref="composerRef"
-      mode="create"
-      :from-template-id="fromTemplateId"
-      :brand-id="brandId"
-    >
+    <ComposerEmailComposer ref="composerRef" mode="create">
       <template #actions></template>
     </ComposerEmailComposer>
   </LayoutBasePage>

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

@@ -5,11 +5,8 @@ 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>
@@ -49,7 +46,7 @@ const fromTemplateId = computed(() => route.query.from_template as string | unde
       />
     </template>
 
-    <ComposerWhatsappComposer ref="composerRef" mode="create" :from-template-id="fromTemplateId">
+    <ComposerWhatsappComposer ref="composerRef" mode="create">
       <template #actions></template>
     </ComposerWhatsappComposer>
   </LayoutBasePage>

package/app/queries/index.ts

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

package/app/utils/testIds.const.ts

@@ -520,7 +520,6 @@ 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

@@ -239,7 +239,10 @@ Diese Nachrichten müssen funktional sein, nicht werblich.
     email: {
       send_test: 'Test senden',
       send_test_success: 'Test-E-Mail erfolgreich gesendet.',
+      test_email_to: 'An',
       test_email_to_placeholder: 'Empfänger-E-Mail(s), getrennt durch ;',
+      test_email_from: 'Von',
+      test_email_from_placeholder: 'Absender-E-Mail-Adresse',
       create_message_group: {
         title: 'Nachricht erstellen',
         save: 'Speichern',
@@ -831,48 +834,6 @@ 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

@@ -236,7 +236,10 @@ These messages must be functional, not promotional.
     email: {
       send_test: 'Send test',
       send_test_success: 'Test email sent successfully.',
+      test_email_to: 'To',
       test_email_to_placeholder: 'Recipient email(s), separated by ;',
+      test_email_from: 'From',
+      test_email_from_placeholder: 'Sender email address',
       create_message_group: {
         title: 'Create message',
         save: 'Save',
@@ -822,47 +825,6 @@ 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...',