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

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/messageGroups.ts

@@ -6,6 +6,7 @@ import type {
   PostEntity,
   MessageGroup,
   RenderType,
+  DuplicateMessageGroupBody,
 } from '@dev.smartpricing/message-composer-utils/types'
 import { apiClient } from './client'
 
@@ -46,4 +47,10 @@ export const messageGroupsApi = {
 
   validate: (id: string) =>
     apiClient<MessageGroupValidationResponse>(`/message-groups/${id}/validate`),
+
+  duplicate: (id: string, data?: DuplicateMessageGroupBody) =>
+    apiClient<MessageGroupFromDb & { tags: string[] }>(`/message-groups/${id}/duplicate`, {
+      method: 'POST',
+      body: data,
+    }),
 }

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/composables/useTemplateOperations.ts

@@ -4,10 +4,9 @@ import {
   useUpdateMessageGroupMutation,
   useCreateMessageMutation,
   useUpdateMessageMutation,
+  useDuplicateMessageGroupMutation,
 } from '~/queries'
-import { messageGroupsApi } from '~/api'
 import type {
-  MessageFromDb,
   MessageGroupCategory,
   Message,
   PostEntity,
@@ -25,24 +24,7 @@ interface UseTemplateOperationsOptions {
   onError?: (error: Error) => void
 }
 
-function transformMessagesForCreation(
-  messages: MessageFromDb[],
-): Record<string, PostEntity<Message>> {
-  return messages.reduce(
-    (acc, message) => {
-      // Remove DB-specific fields, keep message group content
-
-      const { id, message_group_id, created_at, updated_at, ...messageGroupMessage } = message
-      acc[message.language_id] = { ...messageGroupMessage, message_group_id: '', metadata: {} }
-
-      return acc
-    },
-    {} as Record<string, PostEntity<Message>>,
-  )
-}
-
 export function useTemplateOperations(options: UseTemplateOperationsOptions = {}) {
-  const { t } = useI18n()
   const saving = ref(false)
   const saved = ref(false)
 
@@ -51,6 +33,7 @@ export function useTemplateOperations(options: UseTemplateOperationsOptions = {}
   const { mutateAsync: createMessage } = useCreateMessageMutation()
   const { mutateAsync: updateMessageGroup } = useUpdateMessageGroupMutation()
   const { mutateAsync: updateMessage } = useUpdateMessageMutation()
+  const { mutateAsync: duplicateMessageGroup } = useDuplicateMessageGroupMutation()
 
   // Create new message group(used by Create + Duplicate)
   async function createTemplate(data: TemplateData, status: MessageStatus = 'draft') {
@@ -117,26 +100,19 @@ export function useTemplateOperations(options: UseTemplateOperationsOptions = {}
   async function duplicateTemplate(sourceId: string, newName?: string) {
     saving.value = true
     try {
-      const sourceTemplate = await messageGroupsApi.getById(sourceId)
-
-      if (!sourceTemplate) {
-        throw new Error('Source message group not found')
-      }
+      const result = await duplicateMessageGroup({
+        id: sourceId,
+        data: newName ? { name: newName } : undefined,
+      })
 
-      const templateData: TemplateData = {
-        messageGroup: {
-          name: newName || t('common.copy_of', { name: sourceTemplate.name }),
-          category: sourceTemplate.category,
-          brand_id: sourceTemplate.brand_id,
-        },
-        messages: transformMessagesForCreation(sourceTemplate.messages),
-      }
-
-      const result = await createTemplate(templateData, 'draft')
+      saved.value = true
+      options.onSuccess?.()
       return result
     } catch (error) {
       options.onError?.(error as Error)
       throw error
+    } finally {
+      saving.value = false
     }
   }
 

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/queries/messageGroups.ts

@@ -1,5 +1,6 @@
 import { useQuery, useMutation, useQueryCache } from '@pinia/colada'
 import type {
+  DuplicateMessageGroupBody,
   MessageGroup,
   MessageGroupWithMessageSummary,
   PostEntity,
@@ -82,6 +83,18 @@ export function useUnpublishMessageGroupMutation() {
   })
 }
 
+export function useDuplicateMessageGroupMutation() {
+  const queryCache = useQueryCache()
+
+  return useMutation({
+    mutation: ({ id, data }: { id: string; data?: DuplicateMessageGroupBody }) =>
+      messageGroupsApi.duplicate(id, data),
+    onSuccess: () => {
+      queryCache.invalidateQueries({ key: ['message-groups'] })
+    },
+  })
+}
+
 export function useDeleteMessageGroupMutation() {
   const queryCache = useQueryCache()
 

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 = {