@dev.smartpricing/message-composer-layer 1.0.1

package/app/queries/messageGroups.ts

@@ -0,0 +1,112 @@
+import { useQuery, useMutation, useQueryCache } from '@pinia/colada'
+import type {
+  MessageGroup,
+  MessageGroupWithMessageSummary,
+  PostEntity,
+  RenderType,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { messageGroupsApi } from '~/api'
+
+// QUERIES
+export function useMessageGroupsQuery(
+  options?: MaybeRefOrGetter<{
+    renderType?: RenderType
+    tags?: string[]
+    tagsMode?: 'and' | 'or'
+  }>,
+  _queryOptions?: { polling?: boolean },
+) {
+  const query = useQuery({
+    key: () => ['message-groups', JSON.stringify(toValue(options))],
+    query: () => messageGroupsApi.getAll(toValue(options)),
+    staleTime: 0,
+  })
+
+  // TODO: Implement polling when Pinia Colada supports it
+  // For now, polling can be done manually in the component using setInterval + refetch
+
+  return query
+}
+
+export function useMessageGroupQuery(id: MaybeRefOrGetter<string>) {
+  return useQuery({
+    key: () => ['message-groups', toValue(id)],
+    query: () => messageGroupsApi.getById(toValue(id)),
+    staleTime: 2 * 60 * 1000,
+  })
+}
+
+// MUTATIONS
+export function useCreateMessageGroupMutation() {
+  const queryCache = useQueryCache()
+
+  return useMutation({
+    mutation: messageGroupsApi.create,
+    onSuccess: () => {
+      queryCache.invalidateQueries({ key: ['message-groups'] })
+    },
+  })
+}
+
+export function useUpdateMessageGroupMutation() {
+  const queryCache = useQueryCache()
+
+  return useMutation({
+    mutation: ({ id, data }: { id: string; data: Partial<PostEntity<MessageGroup>> }) =>
+      messageGroupsApi.update(id, data),
+    onSuccess: (_, { id }) => {
+      queryCache.invalidateQueries({ key: ['message-groups', id] })
+    },
+  })
+}
+
+export function usePublishMessageGroupMutation() {
+  const queryCache = useQueryCache()
+
+  return useMutation({
+    mutation: messageGroupsApi.publish,
+    onSuccess: () => {
+      queryCache.invalidateQueries({ key: ['message-groups'] })
+    },
+  })
+}
+
+export function useUnpublishMessageGroupMutation() {
+  const queryCache = useQueryCache()
+
+  return useMutation({
+    mutation: messageGroupsApi.unpublish,
+    onSuccess: () => {
+      queryCache.invalidateQueries({ key: ['message-groups'] })
+    },
+  })
+}
+
+export function useDeleteMessageGroupMutation() {
+  const queryCache = useQueryCache()
+
+  return useMutation({
+    mutation: messageGroupsApi.delete,
+    onMutate: async (id) => {
+      // Optimistic update
+      queryCache.cancelQueries({ key: ['message-groups'] })
+      const previous = queryCache.getQueryData(['message-groups'])
+
+      queryCache.setQueryData(
+        ['message-groups'],
+        (old: MessageGroupWithMessageSummary[] | undefined) => old?.filter((g) => g.id !== id),
+      )
+
+      return { previous }
+    },
+    onError: (_, __, context) => {
+      // Rollback on error
+      if (context?.previous) {
+        queryCache.setQueryData(['message-groups'], context.previous)
+      }
+    },
+    onSuccess: () => {
+      queryCache.invalidateQueries({ key: ['message-groups'] })
+    },
+  })
+}

package/app/queries/messages.ts

@@ -0,0 +1,42 @@
+import { useMutation, useQueryCache } from '@pinia/colada'
+import type { Message, PostEntity } from '@dev.smartpricing/message-composer-utils/types'
+import { messagesApi } from '~/api'
+
+export function useCreateMessageMutation() {
+  const queryCache = useQueryCache()
+
+  return useMutation({
+    mutation: messagesApi.create,
+    onSuccess: (data) => {
+      queryCache.invalidateQueries({
+        key: ['message-groups', data.message_group_id],
+      })
+    },
+  })
+}
+
+export function useUpdateMessageMutation() {
+  const queryCache = useQueryCache()
+
+  return useMutation({
+    mutation: ({ id, data }: { id: string; data: Partial<PostEntity<Message>> }) =>
+      messagesApi.update(id, data),
+    onSuccess: (data) => {
+      queryCache.invalidateQueries({
+        key: ['message-groups', data.message_group_id],
+      })
+    },
+  })
+}
+
+export function useDeleteMessageMutation() {
+  const queryCache = useQueryCache()
+
+  return useMutation({
+    mutation: ({ id, messageGroupId }: { id: string; messageGroupId: string }) =>
+      messagesApi.delete(id).then(() => messageGroupId),
+    onSuccess: (messageGroupId) => {
+      queryCache.invalidateQueries({ key: ['message-groups', messageGroupId] })
+    },
+  })
+}

package/app/queries/meta.ts

@@ -0,0 +1,13 @@
+import { useMutation, useQueryCache } from '@pinia/colada'
+import { metaApi } from '~/api'
+
+export function useSubmitToMetaMutation() {
+  const queryCache = useQueryCache()
+
+  return useMutation({
+    mutation: metaApi.submitGroup,
+    onSuccess: (_, messageGroupId) => {
+      queryCache.invalidateQueries({ key: ['message-groups', messageGroupId] })
+    },
+  })
+}

package/app/stores/adminStore.ts

@@ -0,0 +1,50 @@
+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,
+  }
+})

package/app/stores/appContext.ts

@@ -0,0 +1,99 @@
+import { ref, computed, watch } from 'vue'
+import type {
+  AppContextConfig,
+  AppContextState,
+} from '@dev.smartpricing/message-composer-utils/types'
+
+export const useAppContextStore = defineStore('appContext', () => {
+  const ctx = useComposerContext()
+
+  const isInitialized = ref<boolean>(false)
+
+  // Proxy from injection with defaults (same interface as before)
+  const authenticationToken = computed(() => ctx.authenticationToken.value)
+  const owner_id = computed(() => ctx.owner_id?.value ?? '')
+  const product = computed<NonNullable<AppContextConfig['product']>>(
+    () => ctx.product?.value ?? 'browser',
+  )
+  const strategy = computed<NonNullable<AppContextConfig['strategy']>>(
+    () => ctx.strategy?.value ?? 'native',
+  )
+  const channels = computed<NonNullable<AppContextConfig['channels']>>(
+    () => ctx.channels?.value ?? ['email', 'whatsapp'],
+  )
+  const languages = computed<string[]>(() => ctx.languages?.value ?? ['en', 'de', 'fr', 'it', 'es'])
+  const mainLanguage = computed(() => ctx.mainLanguage?.value ?? 'en')
+  const dinamicValues = computed<Array<{ value: string; label: string }>>(
+    () => ctx.dinamicValues?.value ?? [],
+  )
+  const default_tags = computed<string[]>(() => ctx.default_tags?.value ?? [])
+  const metaWabaId = computed(() => ctx.metaWabaId?.value ?? '')
+  const metaAccessToken = computed(() => ctx.metaAccessToken?.value ?? '')
+
+  // Sync i18n locale when mainLanguage changes
+  watch(
+    mainLanguage,
+    (value) => {
+      if (isLocaleManaged(value)) {
+        useNuxtApp().$i18n.setLocale(value)
+      }
+    },
+    { immediate: true },
+  )
+
+  // Computed context object for convenience
+  const context = computed<AppContextState>(() => ({
+    authenticationToken: authenticationToken.value,
+    product: product.value,
+    strategy: strategy.value,
+    channels: channels.value,
+    languages: languages.value,
+    mainLanguage: mainLanguage.value,
+    metaWabaId: metaWabaId.value,
+    metaAccessToken: metaAccessToken.value,
+    owner_id: owner_id.value,
+    default_tags: default_tags.value,
+    initializationSource: 'injection',
+  }))
+
+  // Validation
+  const validationErrors = computed<Record<string, string>>(() => {
+    const errors: Record<string, string> = {}
+
+    if (!authenticationToken.value) {
+      errors.authenticationToken = 'Authentication token is required'
+    }
+
+    if (channels.value?.includes('whatsapp') && !metaWabaId.value) {
+      errors.metaConfig = 'Meta WABA ID is required for WhatsApp'
+    }
+
+    return errors
+  })
+
+  // Initialize — parent is responsible for providing valid context
+  async function initialize() {
+    isInitialized.value = true
+  }
+
+  return {
+    authenticationToken,
+    product,
+    strategy,
+    channels,
+    languages,
+    mainLanguage,
+    dinamicValues,
+    metaWabaId,
+    metaAccessToken,
+    owner_id,
+    default_tags,
+
+    isInitialized: computed(() => isInitialized.value),
+
+    context,
+    validationErrors,
+
+    initialize,
+  }
+})

package/app/stores/emailEditor.ts

@@ -0,0 +1,220 @@
+import { ref, computed } from 'vue'
+import {
+  type EmailBlock,
+  type EmailGlobalSettings,
+  type PostEntity,
+  type EmailMessage,
+  type BrandFromDb,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { resolveEmailSettings } from '@dev.smartpricing/message-composer-utils/utils'
+import { applySocialDefaults } from '~/utils/socialDefaults'
+import { brandsApi } from '~/api'
+
+export const useEmailEditorStore = defineStore('emailEditor', () => {
+  // State
+  const blocks = ref<EmailBlock[]>([])
+  const selectedBlockId = ref<string | null>(null)
+  const globalSettings = ref<EmailGlobalSettings>({})
+  const brands = ref<BrandFromDb[]>([])
+  const brand = ref<BrandFromDb | null>(null)
+
+  // Brand computed helpers
+  const brandId = computed(() => brand.value?.id ?? null)
+  const brandColors = computed(() => brand.value?.colors ?? [])
+
+  // Resolved settings: globalSettings → brand defaults → hardcoded defaults
+  const resolvedSettings = computed(() => resolveEmailSettings(globalSettings.value, brand.value))
+
+  // Helper to find block recursively
+  function findBlockRecursively(
+    blockId: string,
+    searchBlocks: EmailBlock[],
+  ): EmailBlock | undefined {
+    for (const block of searchBlocks) {
+      if (block.id === blockId) return block
+
+      // Search in grid columns
+      if (block.type === 'grid' && block.settings.columnData) {
+        for (const column of block.settings.columnData) {
+          const found = findBlockRecursively(blockId, column.blocks)
+          if (found) return found
+        }
+      }
+    }
+    return undefined
+  }
+
+  // Computed
+  const selectedBlock = computed(() => {
+    if (!selectedBlockId.value) return undefined
+    return findBlockRecursively(selectedBlockId.value, blocks.value)
+  })
+
+  const hasBlocks = computed(() => blocks.value.length > 0)
+
+  // Actions - Block CRUD
+  function addBlock(block: EmailBlock) {
+    const newBlock = {
+      ...structuredClone(toRaw(block)),
+      id: crypto.randomUUID(),
+    }
+    // Auto-enable socials that have brand URLs
+    if (newBlock.type === 'socials' && brand.value?.default_socials) {
+      newBlock.settings.socials = applySocialDefaults(brand.value.default_socials)
+    }
+    blocks.value.push(newBlock)
+  }
+
+  function insertBlock(block: EmailBlock, index: number) {
+    blocks.value.splice(index, 0, block)
+  }
+
+  function removeBlock(blockId: string) {
+    const index = blocks.value.findIndex((b) => b.id === blockId)
+    if (index > -1) {
+      blocks.value.splice(index, 1)
+      // Deselect if removing selected block
+      if (selectedBlockId.value === blockId) {
+        selectedBlockId.value = null
+      }
+      // Reorder remaining blocks
+    }
+  }
+
+  function updateBlock(blockId: string, updates: Partial<EmailBlock>) {
+    const block = findBlockRecursively(blockId, blocks.value)
+    if (block) {
+      Object.assign(block, updates)
+    }
+  }
+
+  function duplicateBlock(blockId: string) {
+    const index = blocks.value.findIndex((b) => b.id === blockId)
+    const block = blocks.value[index]
+    if (block) {
+      const newBlock = {
+        ...structuredClone(toRaw(block)),
+        id: crypto.randomUUID(),
+      }
+      insertBlock(newBlock, index + 1)
+      return newBlock.id
+    }
+    return null
+  }
+
+  // Actions - Selection
+  function selectBlock(blockId: string | null) {
+    selectedBlockId.value = blockId
+  }
+
+  function clearSelection() {
+    selectedBlockId.value = null
+  }
+
+  // Actions - Global Settings
+  function updateGlobalSettings(updates: Partial<EmailGlobalSettings>) {
+    Object.assign(globalSettings.value, updates)
+  }
+
+  // Actions - Bulk Operations
+  function setBlocks(newBlocks: EmailBlock[]) {
+    blocks.value = newBlocks
+  }
+
+  function clearBlocks() {
+    blocks.value = []
+    selectedBlockId.value = null
+  }
+
+  function resetGlobalSettings() {
+    globalSettings.value = {}
+  }
+
+  function resetEditor() {
+    blocks.value = []
+    selectedBlockId.value = null
+    brand.value = null
+    resetGlobalSettings()
+  }
+
+  function setBrand(newBrand: BrandFromDb | null) {
+    brand.value = newBrand
+  }
+
+  async function fetchBrands(options?: {
+    sort_by?: 'created_at' | 'name'
+    direction?: 'asc' | 'desc'
+  }) {
+    brands.value = await brandsApi.getAll(options)
+    return brands.value
+  }
+
+  /** Set brand for new template (oldest) or existing template (by id, or null) */
+  async function initBrand(brandIdToRestore?: string | null) {
+    const list = await fetchBrands({ sort_by: 'created_at', direction: 'asc' })
+    if (brandIdToRestore) {
+      brand.value = list.find((b) => b.id === brandIdToRestore) ?? null
+    } else if (brandIdToRestore === undefined && list.length) {
+      // Create mode: default to oldest brand
+      brand.value = list[0]
+    }
+    // brandIdToRestore === null → keep null (explicit no-brand)
+  }
+
+  // Data Loading/Export
+  function loadFromData(data: PostEntity<EmailMessage>) {
+    blocks.value = data.body.blocks || []
+    globalSettings.value = data.body.settings || {}
+    selectedBlockId.value = null
+  }
+
+  function toJSON(): { blocks: EmailBlock[]; settings: EmailGlobalSettings } {
+    return {
+      blocks: blocks.value,
+      settings: globalSettings.value,
+    }
+  }
+
+  return {
+    // State
+    blocks,
+    selectedBlockId,
+    globalSettings,
+    brands,
+    brand,
+    brandId,
+    brandColors,
+    resolvedSettings,
+
+    // Computed
+    selectedBlock,
+    hasBlocks,
+
+    // Actions - CRUD
+    addBlock,
+    insertBlock,
+    removeBlock,
+    updateBlock,
+    duplicateBlock,
+
+    // Actions - Selection
+    selectBlock,
+    clearSelection,
+
+    // Actions - Settings
+    updateGlobalSettings,
+    resetGlobalSettings,
+    setBrand,
+    fetchBrands,
+    initBrand,
+
+    // Actions - Bulk
+    setBlocks,
+    clearBlocks,
+    resetEditor,
+
+    // Data Import/Export
+    loadFromData,
+    toJSON,
+  }
+})

package/app/stores/main.ts

@@ -0,0 +1,3 @@
+export const useMainStore = defineStore('main', () => {
+  return {}
+})

package/app/stores/metaSubmission.ts

@@ -0,0 +1,116 @@
+import type { SubmissionJob } from '@dev.smartpricing/message-composer-utils/types'
+import { metaApi } from '~/api/meta'
+import { useQueryCache } from '@pinia/colada'
+import { useAppContextStore } from './appContext'
+
+interface ActiveJob {
+  jobId: string
+  messageGroupId: string
+  startedAt: number
+}
+
+export const useMetaSubmissionStore = () => {
+  const toast = useToast()
+  const queryCache = useQueryCache()
+  const appContext = useAppContextStore()
+  const { t } = useI18n()
+
+  const activeJobs = useState<Map<string, ActiveJob>>('meta-submission-jobs', () => new Map())
+  const pollingInterval = useState<NodeJS.Timeout | null>('meta-polling-interval', () => null)
+
+  const isConfigured = computed(() => !!appContext.metaWabaId)
+
+  const submitToMeta = async (messageGroupId: string) => {
+    if (!isConfigured.value) {
+      throw new Error('Meta configuration not available')
+    }
+
+    try {
+      const response = await metaApi.submitGroup(messageGroupId)
+      startBackgroundPolling(response.jobId, messageGroupId)
+      return response
+    } catch (error) {
+      console.error('Failed to submit to Meta:', error)
+      throw error
+    }
+  }
+
+  const startBackgroundPolling = (jobId: string, messageGroupId: string) => {
+    // Add job to active jobs
+    activeJobs.value.set(jobId, {
+      jobId,
+      messageGroupId,
+      startedAt: Date.now(),
+    })
+
+    // Start polling if not already running
+    if (!pollingInterval.value) {
+      pollingInterval.value = setInterval(pollAllJobs, 10000) // 10 seconds
+    }
+  }
+
+  const pollAllJobs = async () => {
+    if (activeJobs.value.size === 0) {
+      stopPolling()
+      return
+    }
+
+    const jobsToCheck = Array.from(activeJobs.value.values())
+
+    for (const job of jobsToCheck) {
+      try {
+        const status = await metaApi.getJobStatus(job.jobId)
+
+        if (status.status === 'completed' || status.status === 'failed') {
+          handleJobComplete(status, job.messageGroupId)
+          activeJobs.value.delete(job.jobId)
+        }
+      } catch (error) {
+        console.error(`Failed to poll job ${job.jobId}:`, error)
+        // Remove job after 5 minutes of failed polling
+        if (Date.now() - job.startedAt > 5 * 60 * 1000) {
+          activeJobs.value.delete(job.jobId)
+        }
+      }
+    }
+  }
+
+  const handleJobComplete = (status: SubmissionJob, messageGroupId: string) => {
+    // Invalidate message group cache
+    queryCache.invalidateQueries({
+      key: ['message-groups', messageGroupId],
+    })
+
+    // Show notification
+    if (status.failed_count === 0) {
+      toast.add({
+        color: 'success',
+        title: t('meta_submission.success'),
+      })
+    } else {
+      toast.add({
+        color: 'error',
+        title: t('meta_submission.error'),
+        description: t('meta_submission.failed_count', { count: status.failed_count }),
+      })
+    }
+  }
+
+  const stopPolling = () => {
+    if (pollingInterval.value) {
+      clearInterval(pollingInterval.value)
+      pollingInterval.value = null
+    }
+  }
+
+  const hasActiveJobs = computed(() => activeJobs.value.size > 0)
+
+  return {
+    activeJobs,
+    hasActiveJobs,
+    isConfigured,
+    submitToMeta,
+    startBackgroundPolling,
+    stopPolling,
+  }
+}

package/app/types/app-config.d.ts

@@ -0,0 +1,14 @@
+declare module 'nuxt/schema' {
+  interface AppConfigInput {
+    composer?: {
+      tracking?: boolean
+    }
+  }
+  interface AppConfig {
+    composer: {
+      tracking: boolean
+    }
+  }
+}
+
+export {}

package/app/types/hooks.d.ts

@@ -0,0 +1,9 @@
+import type { HookResult } from '@nuxt/schema'
+
+declare module '#app' {
+  interface RuntimeNuxtHooks {
+    'composer:auth-error': (payload: { statusCode: number }) => HookResult
+  }
+}
+
+export {}