@dev.smartpricing/message-composer-layer 1.0.1

package/app/composables/useMediaLimits.ts

@@ -0,0 +1,42 @@
+import type { MaybeRefOrGetter } from 'vue'
+import type { MediaType } from '@dev.smartpricing/message-composer-utils/types'
+import { MEDIA_LIMITS } from '@dev.smartpricing/message-composer-utils/types'
+
+export function useMediaLimits(mediaType: MaybeRefOrGetter<MediaType>) {
+  const { t } = useI18n()
+
+  const limits = computed(() => MEDIA_LIMITS[toValue(mediaType)])
+
+  const accept = computed(() => limits.value.accept.join(','))
+
+  const maxSize = computed(() => limits.value.maxSize)
+
+  const limitationsText = computed(() => {
+    const type = toValue(mediaType)
+    const sizeMB = limits.value.maxSize / (1024 * 1024)
+    return t(`common.imageUpload.mediaLimitations.${type}`, { maxSize: sizeMB })
+  })
+
+  function validateFile(file: File): boolean {
+    if (!limits.value.accept.includes(file.type)) {
+      useToast().add({
+        color: 'error',
+        title: t('common.imageUpload.mediaInvalidType'),
+      })
+      return false
+    }
+
+    if (file.size > limits.value.maxSize) {
+      const sizeMB = limits.value.maxSize / (1024 * 1024)
+      useToast().add({
+        color: 'error',
+        title: t('common.imageUpload.mediaFileTooLarge', { maxSize: sizeMB }),
+      })
+      return false
+    }
+
+    return true
+  }
+
+  return { accept, maxSize, limitationsText, validateFile }
+}

package/app/composables/useTemplateFormValidation.ts

@@ -0,0 +1,109 @@
+import { z } from 'zod'
+import { computed, ref, type Ref, type ComputedRef } from 'vue'
+import type {
+  EmailMessage,
+  MessageFromDb,
+  MessageGroupCategory,
+  PostEntity,
+  WhatsappMessage,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { isEmailValid, isWhatsappValid } from '@dev.smartpricing/message-composer-utils/utils'
+
+interface UseTemplateFormValidationOptions {
+  type: 'email' | 'whatsapp'
+  name: Ref<string> | ComputedRef<string>
+  category: Ref<MessageGroupCategory> | ComputedRef<MessageGroupCategory>
+  messages: Ref<Record<string, PostEntity<EmailMessage> | WhatsappMessage>>
+}
+
+const draftSchema = z.object({
+  name: z.string().min(1, 'editor.validation.error.nameRequired'),
+  category: z.string().min(1),
+  messages: z.record(z.string(), z.any()).refine((messages) => 'en' in messages, {
+    message: 'editor.validation.error.messageRequired',
+  }),
+})
+
+export function useTemplateFormValidation(options: UseTemplateFormValidationOptions) {
+  const { type, name, category, messages } = options
+  const { t } = useI18n()
+  const emailEditorStore = useEmailEditorStore()
+
+  const formRef = useTemplateRef('templateForm')
+  const validationErrors = ref<string[]>([])
+
+  const formState = computed(() => ({
+    name: name.value,
+    category: category.value,
+    messages: messages.value,
+  }))
+
+  function clearErrors() {
+    validationErrors.value = []
+    formRef.value?.clear()
+  }
+
+  async function validateDraft(): Promise<boolean> {
+    clearErrors()
+    try {
+      await formRef.value?.validate()
+      return true
+    } catch {
+      const formErrors = formRef.value?.errors
+      const errors: string[] = []
+      if (Array.isArray(formErrors)) {
+        for (const err of formErrors) {
+          if (err.message) {
+            errors.push(t(err.message))
+          }
+        }
+      }
+      validationErrors.value = errors
+      return false
+    }
+  }
+
+  async function validateFull(): Promise<boolean> {
+    const draftValid = await validateDraft()
+    if (!draftValid) return false
+
+    const errors: string[] = []
+    const messageEntries = Object.entries(messages.value)
+    const hasMultipleLanguages = messageEntries.length > 1
+    for (const [langId, message] of messageEntries) {
+      const result =
+        type === 'email'
+          ? isEmailValid(message as unknown as EmailMessage, emailEditorStore.brand)
+          : isWhatsappValid(message as unknown as MessageFromDb)
+      if (!result.valid) {
+        const uniqueErrors = [...new Set(result.errors)]
+        for (const error of uniqueErrors) {
+          const translated = t(error)
+          if (hasMultipleLanguages) {
+            errors.push(`${langId.toUpperCase()}: ${translated}`)
+          } else {
+            errors.push(translated)
+          }
+        }
+      }
+    }
+
+    if (errors.length > 0) {
+      validationErrors.value = errors
+      formRef.value?.setErrors(errors.map((message) => ({ message, name: 'messages' })))
+      return false
+    }
+
+    return true
+  }
+
+  return {
+    formRef,
+    formState,
+    draftSchema,
+    validationErrors,
+    validateDraft,
+    validateFull,
+    clearErrors,
+  }
+}

package/app/composables/useTemplateOperations.ts

@@ -0,0 +1,147 @@
+import { ref } from 'vue'
+import {
+  useCreateMessageGroupMutation,
+  useUpdateMessageGroupMutation,
+  useCreateMessageMutation,
+  useUpdateMessageMutation,
+} from '~/queries'
+import { messageGroupsApi } from '~/api'
+import type {
+  MessageFromDb,
+  MessageGroupCategory,
+  Message,
+  PostEntity,
+  MessageStatus,
+} from '@dev.smartpricing/message-composer-utils/types'
+
+interface TemplateData<T = Message | PostEntity<Message>> {
+  messageGroup: { name: string; category: MessageGroupCategory; brand_id?: string | null }
+  messages: Record<string, T>
+}
+
+interface UseTemplateOperationsOptions {
+  onSuccess?: () => void
+  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)
+
+  // Hoist composables to setup scope (they use inject() internally)
+  const { mutateAsync: createMessageGroup } = useCreateMessageGroupMutation()
+  const { mutateAsync: createMessage } = useCreateMessageMutation()
+  const { mutateAsync: updateMessageGroup } = useUpdateMessageGroupMutation()
+  const { mutateAsync: updateMessage } = useUpdateMessageMutation()
+
+  // Create new message group(used by Create + Duplicate)
+  async function createTemplate(data: TemplateData, status: MessageStatus = 'draft') {
+    saving.value = true
+    try {
+      const createdMessageGroup = await createMessageGroup(data.messageGroup)
+
+      if (createdMessageGroup?.id) {
+        for (const message of Object.values(data.messages)) {
+          message.message_group_id = createdMessageGroup.id
+          message.status = status
+
+          await createMessage(message)
+        }
+      }
+
+      saved.value = true
+      options.onSuccess?.()
+      return createdMessageGroup
+    } catch (error) {
+      options.onError?.(error as Error)
+      throw error
+    } finally {
+      saving.value = false
+    }
+  }
+
+  // Update existing message group (used by Edit)
+  async function updateTemplate(
+    id: string,
+    data: TemplateData<Message | PostEntity<Message>>,
+    status?: MessageStatus,
+  ) {
+    saving.value = true
+    try {
+      await updateMessageGroup({ id, data: data.messageGroup })
+
+      for (const message of Object.values(data.messages)) {
+        if (status) {
+          message.status = status
+        }
+
+        if ('id' in message) {
+          await updateMessage({ id: message.id, data: message })
+        } else {
+          message.message_group_id = id
+          await createMessage(message)
+        }
+      }
+
+      saved.value = true
+      options.onSuccess?.()
+    } catch (error) {
+      options.onError?.(error as Error)
+      throw error
+    } finally {
+      saving.value = false
+    }
+  }
+
+  // Duplicate existing message group (used by Duplicate action)
+  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 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')
+      return result
+    } catch (error) {
+      options.onError?.(error as Error)
+      throw error
+    }
+  }
+
+  return {
+    saving,
+    saved,
+    createTemplate,
+    updateTemplate,
+    duplicateTemplate,
+  }
+}

package/app/composables/useTracking.ts

@@ -0,0 +1,39 @@
+import type { TrackingEventMap } from '~/types/tracking'
+
+export function useTracking() {
+  const { product, mainLanguage } = storeToRefs(useAppContextStore())
+  const { isAdminModeActive } = storeToRefs(useAdminStore())
+
+  function getDefaultProperties(): Record<string, unknown> {
+    return {
+      event_origin: 'message-composer',
+      product: product.value,
+      main_language: mainLanguage.value,
+      is_admin: isAdminModeActive.value,
+    }
+  }
+
+  async function trackEvent<T extends keyof TrackingEventMap>(
+    eventName: T,
+    properties?: TrackingEventMap[T],
+  ): Promise<void> {
+    if (!useAppConfig().composer?.tracking) return
+    try {
+      const { trackingApi } = await import('@/api/tracking')
+      await trackingApi.event(eventName, {
+        ...getDefaultProperties(),
+        ...properties,
+      })
+    } catch {
+      if (import.meta.dev) {
+        console.warn(`[Tracking] Failed to track "${eventName}"`, properties)
+      }
+    }
+  }
+
+  function trackPageView(pageName: string): void {
+    trackEvent('Page View', { page_name: pageName })
+  }
+
+  return { trackEvent, trackPageView }
+}

package/app/composables/useTranslationFilters.ts

@@ -0,0 +1,176 @@
+import { computed, type Ref, type ComputedRef } from 'vue'
+import type { WhatsappMessage, PostEntity } from '@dev.smartpricing/message-composer-utils/types'
+import { extractText, isTiptapEmpty } from '@dev.smartpricing/message-composer-utils/utils'
+import { useChangeTracking } from './useChangeTracking'
+
+type Section = 'header' | 'body' | 'footer' | 'buttons'
+
+interface TranslationFiltersParams {
+  messages: Ref<Record<string, PostEntity<WhatsappMessage>>>
+  currentLanguage: Ref<string>
+  baseLanguage: Ref<string>
+  messageGroupId?: Ref<string | number | undefined>
+  searchQuery: Ref<string>
+  showOnlyMissing: Ref<boolean>
+  showOnlyChanges: Ref<boolean>
+}
+
+export function useTranslationFilters(params: TranslationFiltersParams) {
+  const {
+    messages,
+    currentLanguage,
+    baseLanguage,
+    messageGroupId,
+    searchQuery,
+    showOnlyMissing,
+    showOnlyChanges,
+  } = params
+
+  // Initialize change tracking if messageGroupId is provided
+  const changeTracking = computed(() => {
+    if (!messageGroupId?.value) return null
+    return useChangeTracking(messageGroupId.value)
+  })
+
+  /**
+   * Check if a section matches the search query
+   */
+  function matchesSearch(section: Section, baseMsg: PostEntity<WhatsappMessage>): boolean {
+    if (!searchQuery.value || !searchQuery.value.trim()) return true
+
+    const query = searchQuery.value.toLowerCase().trim()
+    let searchText = ''
+
+    switch (section) {
+      case 'header':
+        if (baseMsg.body?.header?.type === 'text' && baseMsg.body.header.content) {
+          searchText = extractText(baseMsg.body.header.content, baseMsg.render_type)
+        }
+        break
+      case 'body':
+        if (baseMsg.body?.body?.content) {
+          searchText = extractText(baseMsg.body.body.content, baseMsg.render_type)
+        }
+        break
+      case 'footer':
+        if (baseMsg.body?.footer?.content) {
+          searchText = extractText(baseMsg.body.footer.content, baseMsg.render_type)
+        }
+        break
+      case 'buttons':
+        if (baseMsg.body?.buttons?.buttons) {
+          searchText = baseMsg.body.buttons.buttons
+            .map((btn) => extractText(btn?.text || '', baseMsg.render_type))
+            .join(' ')
+        }
+        break
+    }
+
+    return searchText.toLowerCase().includes(query)
+  }
+
+  /**
+   * Check if a section has missing translations
+   */
+  function hasMissingTranslation(
+    section: Section,
+    targetMsg: PostEntity<WhatsappMessage>,
+  ): boolean {
+    if (!targetMsg.body) return true
+
+    switch (section) {
+      case 'header':
+        // Header is optional, only check if it exists in base
+        if (targetMsg.body.header?.type === 'text') {
+          return isTiptapEmpty(targetMsg.body.header.content, targetMsg.render_type)
+        }
+        if (['image', 'video', 'document'].includes(targetMsg.body.header?.type)) {
+          return !('url' in targetMsg.body.header) || !targetMsg.body.header.url
+        }
+        return false
+
+      case 'body':
+        // Body is required
+        return isTiptapEmpty(targetMsg.body.body?.content, targetMsg.render_type)
+
+      case 'footer':
+        // Footer is optional
+        return isTiptapEmpty(targetMsg.body.footer?.content, targetMsg.render_type)
+
+      case 'buttons':
+        // Check if any button has empty text
+        if (targetMsg.body.buttons?.buttons) {
+          return targetMsg.body.buttons.buttons.some((btn) =>
+            isTiptapEmpty(btn?.text, targetMsg.render_type),
+          )
+        }
+        return false
+    }
+  }
+
+  /**
+   * Check if a section has changes
+   */
+  function hasChanges(section: Section): boolean {
+    const tracking = changeTracking.value
+    if (!tracking || !currentLanguage.value) return false
+
+    const currentMsg = messages.value[currentLanguage.value]
+    if (!currentMsg) return false
+
+    const changedFields = tracking.getChangedFields(
+      currentLanguage.value,
+      currentMsg as WhatsappMessage,
+    )
+    return changedFields.includes(section)
+  }
+
+  /**
+   * Filter sections based on active filters
+   */
+  const filteredSections: ComputedRef<Section[]> = computed(() => {
+    const baseMsg = messages.value[baseLanguage.value]
+    const targetMsg = messages.value[currentLanguage.value]
+
+    if (!baseMsg || !targetMsg) {
+      return []
+    }
+
+    const allSections: Section[] = ['header', 'body', 'footer', 'buttons']
+
+    return allSections.filter((section) => {
+      // Search filter
+      if (searchQuery.value && !matchesSearch(section, baseMsg)) {
+        return false
+      }
+
+      // Missing translations filter
+      if (showOnlyMissing.value && !hasMissingTranslation(section, targetMsg)) {
+        return false
+      }
+
+      // Changes filter
+      if (showOnlyChanges.value && !hasChanges(section)) {
+        return false
+      }
+
+      return true
+    })
+  })
+
+  /**
+   * Check if any filters are active
+   */
+  const hasActiveFilters: ComputedRef<boolean> = computed(() => {
+    return (
+      (searchQuery.value && searchQuery.value.trim() !== '') ||
+      showOnlyMissing.value ||
+      showOnlyChanges.value
+    )
+  })
+
+  return {
+    filteredSections,
+    hasActiveFilters,
+  }
+}