@dev.smartpricing/message-composer-layer 1.0.1

package/app/composables/useChangeTracking.ts

@@ -0,0 +1,212 @@
+import { ref, computed, watch, toRaw, type MaybeRef } from 'vue'
+import { deepClone, deepEqual } from '@dev.smartpricing/message-composer-utils/utils'
+import type { WhatsappMessage } from '@dev.smartpricing/message-composer-utils/types'
+
+/**
+ * Storage key pattern for change tracking
+ */
+function getStorageKey(messageGroupId: string | number): string {
+  return `message-changes-${messageGroupId}`
+}
+
+/**
+ * Tracked message state stored in localStorage
+ */
+interface TrackedMessageState {
+  header: WhatsappMessage['body']['header']
+  body: WhatsappMessage['body']['body']
+  footer: WhatsappMessage['body']['footer']
+  buttons: WhatsappMessage['body']['buttons']
+  timestamp: number
+}
+
+/**
+ * Storage structure: keyed by language ID
+ */
+type ChangeTrackingStorage = Record<string, TrackedMessageState>
+
+/**
+ * Composable for tracking changes to messages with localStorage persistence
+ *
+ * @param messageGroupId - Reactive reference to message group ID
+ * @returns API methods for change tracking
+ */
+export function useChangeTracking(messageGroupId: MaybeRef<string | number>) {
+  const groupId = computed(() =>
+    typeof messageGroupId === 'object' && 'value' in messageGroupId
+      ? messageGroupId.value
+      : messageGroupId,
+  )
+
+  // Internal state: stores original message states per language
+  const originalStates = ref<ChangeTrackingStorage>({})
+
+  /**
+   * Load original states from localStorage
+   */
+  function loadFromStorage(): void {
+    try {
+      const key = getStorageKey(groupId.value)
+      const stored = localStorage.getItem(key)
+      if (stored) {
+        originalStates.value = JSON.parse(stored)
+      } else {
+        originalStates.value = {}
+      }
+    } catch (error) {
+      console.error('Failed to load change tracking from storage:', error)
+      originalStates.value = {}
+    }
+  }
+
+  /**
+   * Save original states to localStorage
+   */
+  function saveToStorage(): void {
+    try {
+      const key = getStorageKey(groupId.value)
+      localStorage.setItem(key, JSON.stringify(originalStates.value))
+    } catch (error) {
+      console.error('Failed to save change tracking to storage:', error)
+    }
+  }
+
+  /**
+   * Record original state for a message
+   * Stores header, body, footer, buttons, and timestamp
+   *
+   * @param language - Language ID
+   * @param message - Message to track
+   */
+  function recordOriginalState(language: string, message: WhatsappMessage): void {
+    // Use toRaw to remove Vue reactivity before cloning
+    const rawMessage = toRaw(message)
+    originalStates.value[language] = {
+      header: deepClone(toRaw(rawMessage.body.header)),
+      body: deepClone(toRaw(rawMessage.body.body)),
+      footer: deepClone(toRaw(rawMessage.body.footer)),
+      buttons: deepClone(toRaw(rawMessage.body.buttons)),
+      timestamp: Date.now(),
+    }
+    saveToStorage()
+  }
+
+  /**
+   * Check if a message has any changes compared to original state
+   *
+   * @param language - Language ID
+   * @param currentMessage - Current message to compare
+   * @returns true if message has changes, false otherwise
+   */
+  function hasChanges(language: string, currentMessage: WhatsappMessage): boolean {
+    const original = originalStates.value[language]
+    if (!original) return false
+
+    // Use toRaw to remove Vue reactivity before comparison
+    const rawMessage = toRaw(currentMessage)
+
+    // Compare each field using deep equality
+    const headerChanged = !deepEqual(original.header, toRaw(rawMessage.body.header))
+    const bodyChanged = !deepEqual(original.body, toRaw(rawMessage.body.body))
+    const footerChanged = !deepEqual(original.footer, toRaw(rawMessage.body.footer))
+    const buttonsChanged = !deepEqual(original.buttons, toRaw(rawMessage.body.buttons))
+
+    return headerChanged || bodyChanged || footerChanged || buttonsChanged
+  }
+
+  /**
+   * Get array of changed field names
+   *
+   * @param language - Language ID
+   * @param currentMessage - Current message to compare
+   * @returns Array of field names that have changed
+   */
+  function getChangedFields(language: string, currentMessage: WhatsappMessage): string[] {
+    const original = originalStates.value[language]
+    if (!original) return []
+
+    // Use toRaw to remove Vue reactivity before comparison
+    const rawMessage = toRaw(currentMessage)
+    const changedFields: string[] = []
+
+    if (!deepEqual(original.header, toRaw(rawMessage.body.header))) {
+      changedFields.push('header')
+    }
+    if (!deepEqual(original.body, toRaw(rawMessage.body.body))) {
+      changedFields.push('body')
+    }
+    if (!deepEqual(original.footer, toRaw(rawMessage.body.footer))) {
+      changedFields.push('footer')
+    }
+    if (!deepEqual(original.buttons, toRaw(rawMessage.body.buttons))) {
+      changedFields.push('buttons')
+    }
+
+    return changedFields
+  }
+
+  /**
+   * Get array of language IDs that have changes
+   *
+   * @param messages - Record of all messages by language ID
+   * @returns Array of language IDs with changes
+   */
+  function getLanguagesWithChanges(messages: Record<string, WhatsappMessage>): string[] {
+    return Object.keys(messages).filter(
+      (languageId) => messages[languageId] && hasChanges(languageId, messages[languageId]),
+    )
+  }
+
+  /**
+   * Get count of changed fields for a specific language
+   *
+   * @param language - Language ID
+   * @param currentMessage - Current message to compare
+   * @returns Number of changed fields
+   */
+  function getChangeCount(language: string, currentMessage: WhatsappMessage): number {
+    return getChangedFields(language, currentMessage).length
+  }
+
+  /**
+   * Clear changes for a specific language
+   *
+   * @param language - Language ID to clear
+   */
+  function clearChanges(language: string): void {
+    delete originalStates.value[language]
+    saveToStorage()
+  }
+
+  /**
+   * Clear all changes for this message group
+   */
+  function clearAllChanges(): void {
+    originalStates.value = {}
+    try {
+      const key = getStorageKey(groupId.value)
+      localStorage.removeItem(key)
+    } catch (error) {
+      console.error('Failed to clear change tracking from storage:', error)
+    }
+  }
+
+  // Watch for messageGroupId changes and reload from storage
+  watch(
+    groupId,
+    () => {
+      loadFromStorage()
+    },
+    { immediate: true },
+  )
+
+  return {
+    recordOriginalState,
+    hasChanges,
+    getChangedFields,
+    getLanguagesWithChanges,
+    getChangeCount,
+    clearChanges,
+    clearAllChanges,
+  }
+}

package/app/composables/useChangeTrackingEmail.ts

@@ -0,0 +1,227 @@
+import { ref, computed, watch, toRaw, type MaybeRef } from 'vue'
+import { deepClone, deepEqual } from '@dev.smartpricing/message-composer-utils/utils'
+import type { EmailMessage, EmailBlock } from '@dev.smartpricing/message-composer-utils/types'
+
+/**
+ * Storage key pattern for email change tracking
+ */
+function getStorageKey(messageGroupId: string | number): string {
+  return `email-message-changes-${messageGroupId}`
+}
+
+/**
+ * Tracked email message state stored in localStorage
+ */
+interface TrackedEmailState {
+  subject: string
+  blocks: EmailBlock[]
+  timestamp: number
+}
+
+/**
+ * Storage structure: keyed by language ID
+ */
+type EmailChangeTrackingStorage = Record<string, TrackedEmailState>
+
+/**
+ * Composable for tracking changes to email messages with localStorage persistence
+ *
+ * @param messageGroupId - Reactive reference to message group ID
+ * @returns API methods for change tracking
+ */
+export function useChangeTrackingEmail(messageGroupId: MaybeRef<string | number>) {
+  const groupId = computed(() =>
+    typeof messageGroupId === 'object' && 'value' in messageGroupId
+      ? messageGroupId.value
+      : messageGroupId,
+  )
+
+  // Internal state: stores original message states per language
+  const originalStates = ref<EmailChangeTrackingStorage>({})
+
+  /**
+   * Load original states from localStorage
+   */
+  function loadFromStorage(): void {
+    try {
+      const key = getStorageKey(groupId.value)
+      const stored = localStorage.getItem(key)
+      if (stored) {
+        originalStates.value = JSON.parse(stored)
+      } else {
+        originalStates.value = {}
+      }
+    } catch (error) {
+      console.error('Failed to load email change tracking from storage:', error)
+      originalStates.value = {}
+    }
+  }
+
+  /**
+   * Save original states to localStorage
+   */
+  function saveToStorage(): void {
+    try {
+      const key = getStorageKey(groupId.value)
+      localStorage.setItem(key, JSON.stringify(originalStates.value))
+    } catch (error) {
+      console.error('Failed to save email change tracking to storage:', error)
+    }
+  }
+
+  /**
+   * Record original state for an email message
+   * Stores subject, blocks, and timestamp
+   *
+   * @param language - Language ID
+   * @param message - Email message to track
+   */
+  function recordOriginalState(language: string, message: EmailMessage): void {
+    // Use toRaw to remove Vue reactivity before cloning
+    const rawMessage = toRaw(message)
+    originalStates.value[language] = {
+      subject: rawMessage.body.subject,
+      blocks: deepClone(toRaw(rawMessage.body.blocks)),
+      timestamp: Date.now(),
+    }
+    saveToStorage()
+  }
+
+  /**
+   * Check if a message has any changes compared to original state
+   *
+   * @param language - Language ID
+   * @param currentMessage - Current email message to compare
+   * @returns true if message has changes, false otherwise
+   */
+  function hasChanges(language: string, currentMessage: EmailMessage): boolean {
+    const original = originalStates.value[language]
+    if (!original) return false
+
+    // Use toRaw to remove Vue reactivity before comparison
+    const rawMessage = toRaw(currentMessage)
+
+    // Compare subject
+    const subjectChanged = original.subject !== rawMessage.body.subject
+
+    // Compare blocks using deep equality
+    const blocksChanged = !deepEqual(original.blocks, toRaw(rawMessage.body.blocks))
+
+    return subjectChanged || blocksChanged
+  }
+
+  /**
+   * Get array of changed block IDs
+   *
+   * @param language - Language ID
+   * @param currentMessage - Current email message to compare
+   * @returns Array of block IDs that have changed
+   */
+  function getChangedBlockIds(language: string, currentMessage: EmailMessage): string[] {
+    const original = originalStates.value[language]
+    if (!original) return []
+
+    // Use toRaw to remove Vue reactivity before comparison
+    const rawMessage = toRaw(currentMessage)
+    const changedBlockIds: string[] = []
+
+    // Compare blocks by ID
+    const originalBlocksMap = new Map(original.blocks.map((b) => [b.id, b]))
+    const currentBlocksMap = new Map(rawMessage.body.blocks.map((b) => [b.id, toRaw(b)]))
+
+    // Check for changes
+    for (const [id, currentBlock] of currentBlocksMap) {
+      const originalBlock = originalBlocksMap.get(id)
+      if (!originalBlock || !deepEqual(originalBlock, currentBlock)) {
+        changedBlockIds.push(id)
+      }
+    }
+
+    // Note: Nested grid blocks are part of their parent grid block change detection
+
+    return changedBlockIds
+  }
+
+  /**
+   * Check if subject has changed
+   *
+   * @param language - Language ID
+   * @param currentMessage - Current email message to compare
+   * @returns true if subject changed
+   */
+  function hasSubjectChanged(language: string, currentMessage: EmailMessage): boolean {
+    const original = originalStates.value[language]
+    if (!original) return false
+    return original.subject !== currentMessage.body.subject
+  }
+
+  /**
+   * Get array of language IDs that have changes
+   *
+   * @param messages - Record of all email messages by language ID
+   * @returns Array of language IDs with changes
+   */
+  function getLanguagesWithChanges(messages: Record<string, EmailMessage>): string[] {
+    return Object.keys(messages).filter(
+      (languageId) => messages[languageId] && hasChanges(languageId, messages[languageId]),
+    )
+  }
+
+  /**
+   * Get count of changed blocks for a specific language
+   *
+   * @param language - Language ID
+   * @param currentMessage - Current email message to compare
+   * @returns Number of changed blocks (includes subject if changed)
+   */
+  function getChangeCount(language: string, currentMessage: EmailMessage): number {
+    let count = getChangedBlockIds(language, currentMessage).length
+    if (hasSubjectChanged(language, currentMessage)) {
+      count++
+    }
+    return count
+  }
+
+  /**
+   * Clear changes for a specific language
+   *
+   * @param language - Language ID to clear
+   */
+  function clearChanges(language: string): void {
+    delete originalStates.value[language]
+    saveToStorage()
+  }
+
+  /**
+   * Clear all changes for this message group
+   */
+  function clearAllChanges(): void {
+    originalStates.value = {}
+    try {
+      const key = getStorageKey(groupId.value)
+      localStorage.removeItem(key)
+    } catch (error) {
+      console.error('Failed to clear email change tracking from storage:', error)
+    }
+  }
+
+  // Watch for messageGroupId changes and reload from storage
+  watch(
+    groupId,
+    () => {
+      loadFromStorage()
+    },
+    { immediate: true },
+  )
+
+  return {
+    recordOriginalState,
+    hasChanges,
+    getChangedBlockIds,
+    hasSubjectChanged,
+    getLanguagesWithChanges,
+    getChangeCount,
+    clearChanges,
+    clearAllChanges,
+  }
+}

package/app/composables/useChannels.ts

@@ -0,0 +1,36 @@
+import { computed } from 'vue'
+import type { RenderType } from '@dev.smartpricing/message-composer-utils/types'
+import { useAppContextStore } from '@/stores/appContext'
+
+export function useChannels() {
+  const appContext = useAppContextStore()
+
+  const hasWhatsapp = computed(() => appContext.channels.includes('whatsapp'))
+  const hasEmail = computed(() => appContext.channels.includes('email'))
+
+  const allowedRenderTypes = computed<RenderType[]>(() => {
+    const types: RenderType[] = []
+    if (hasWhatsapp.value) types.push('whatsapp_v1')
+    if (hasEmail.value) types.push('email_v1')
+    return types
+  })
+
+  const defaultRenderType = computed<RenderType>(() => allowedRenderTypes.value[0] || 'whatsapp_v1')
+
+  function isChannelAllowed(channel: 'whatsapp' | 'email'): boolean {
+    return appContext.channels.includes(channel)
+  }
+
+  function isRenderTypeAllowed(renderType: RenderType): boolean {
+    return allowedRenderTypes.value.includes(renderType)
+  }
+
+  return {
+    hasWhatsapp,
+    hasEmail,
+    allowedRenderTypes,
+    defaultRenderType,
+    isChannelAllowed,
+    isRenderTypeAllowed,
+  }
+}

package/app/composables/useEmailBlockContext.ts

@@ -0,0 +1,43 @@
+import type { EmailBlock } from '@dev.smartpricing/message-composer-utils/types'
+import type { JSONContent } from '@tiptap/vue-3'
+
+function extractTextFromJSON(node: JSONContent | undefined): string {
+  if (!node) return ''
+  let text = ''
+  if (node.text) text += node.text
+  if (node.content) {
+    for (const child of node.content) {
+      text += extractTextFromJSON(child)
+    }
+  }
+  return text
+}
+
+function getBlockText(block: EmailBlock): string {
+  if (block.type === 'heading' || block.type === 'paragraph') {
+    const content = (block.settings as { content?: JSONContent }).content
+    return extractTextFromJSON(content)
+  }
+  if (block.type === 'button') {
+    return (block.settings as { text?: string }).text || ''
+  }
+  return ''
+}
+
+export function useEmailBlockContext(currentBlockId: string) {
+  const emailEditorStore = useEmailEditorStore()
+
+  const context = computed(() => {
+    const parts: string[] = []
+    for (const block of emailEditorStore.blocks) {
+      if (block.id === currentBlockId) continue
+      const text = getBlockText(block).trim()
+      if (text) {
+        parts.push(`[${block.type}]: ${text}`)
+      }
+    }
+    return parts.join('\n') || undefined
+  })
+
+  return { context }
+}

package/app/composables/useExitConfirmation.ts

@@ -0,0 +1,39 @@
+import { ref, unref, type ComputedRef } from 'vue'
+import { type RouteLocationRaw } from 'vue-router'
+
+export function useExitConfirmation(shouldBlockNavigation: ComputedRef<boolean>) {
+  const isForcingNavigation = ref(false)
+  const isNavigatingTo = ref<RouteLocationRaw | null>(null)
+
+  const { confirm } = useConfirm()
+  const { t } = useI18n()
+
+  // Setup route guard
+  onBeforeRouteLeave((_to, _from, next) => {
+    const _isForcedNavigation = unref(isForcingNavigation)
+    isForcingNavigation.value = false
+
+    if (shouldBlockNavigation.value && !_isForcedNavigation) {
+      isNavigatingTo.value = _to
+      next(false)
+
+      confirm({
+        title: t('dialogs.unsaved_changes.title'),
+        message: t('dialogs.unsaved_changes.message'),
+        confirmLabel: t('dialogs.unsaved_changes.leave'),
+        cancelLabel: t('dialogs.unsaved_changes.cancel'),
+        action: () => {
+          const target = isNavigatingTo.value
+          if (target) {
+            isForcingNavigation.value = true
+            navigateTo(target)
+            isNavigatingTo.value = null
+          }
+        },
+      })
+    } else {
+      isNavigatingTo.value = null
+      next()
+    }
+  })
+}

package/app/composables/useGoBack.ts

@@ -0,0 +1,15 @@
+import type { RouteLocationRaw } from 'vue-router'
+
+export function useGoBack() {
+  const router = useRouter()
+
+  function goBackOrFallback(fallback: RouteLocationRaw = '/') {
+    if (router.options.history.state.back) {
+      router.back()
+    } else {
+      navigateTo(fallback, { replace: true })
+    }
+  }
+
+  return { goBackOrFallback }
+}

package/app/composables/useIncompleteTranslations.ts

@@ -0,0 +1,55 @@
+import { computed, type Ref } from 'vue'
+import type {
+  WhatsappMessage,
+  LanguageFromDb,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { calculateWhatsappTranslationPercentage } from '@dev.smartpricing/message-composer-utils/utils'
+
+interface UseIncompleteTranslationsParams {
+  messages: Ref<Record<string, WhatsappMessage>>
+  languages: Ref<LanguageFromDb[] | undefined>
+}
+
+export function useIncompleteTranslations(params: UseIncompleteTranslationsParams) {
+  const { messages, languages } = params
+
+  const { mainLanguage } = storeToRefs(useAppContextStore())
+
+  /**
+   * Get list of languages with incomplete translations
+   */
+  const incompleteLanguages = computed(() => {
+    if (!languages.value) return []
+
+    const baseLang = resolveDefaultLanguage(messages.value, mainLanguage.value)
+    const baseMessage = baseLang ? messages.value[baseLang] : undefined
+    if (!baseMessage) return []
+
+    const incomplete: Array<{ language: LanguageFromDb; percentage: number }> = []
+
+    for (const lang of languages.value) {
+      const message = messages.value[lang.id]
+      if (!message) continue
+
+      const percentage = calculateWhatsappTranslationPercentage(message, baseMessage)
+
+      if (percentage < 100) {
+        incomplete.push({ language: lang, percentage })
+      }
+    }
+
+    return incomplete
+  })
+
+  /**
+   * Check if there are any incomplete translations
+   */
+  const hasIncompleteTranslations = computed(() => {
+    return incompleteLanguages.value.length > 0
+  })
+
+  return {
+    incompleteLanguages,
+    hasIncompleteTranslations,
+  }
+}

package/app/composables/useIncompleteTranslationsEmail.ts

@@ -0,0 +1,56 @@
+import { computed, type Ref } from 'vue'
+import type {
+  EmailMessage,
+  LanguageFromDb,
+  PostEntity,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { calculateEmailTranslationPercentage } from '@dev.smartpricing/message-composer-utils/utils'
+
+interface UseIncompleteTranslationsEmailParams {
+  messages: Ref<Record<string, EmailMessage | PostEntity<EmailMessage>>>
+  languages: Ref<LanguageFromDb[] | undefined>
+}
+
+export function useIncompleteTranslationsEmail(params: UseIncompleteTranslationsEmailParams) {
+  const { messages, languages } = params
+
+  const { mainLanguage } = storeToRefs(useAppContextStore())
+
+  /**
+   * Get list of languages with incomplete translations
+   */
+  const incompleteLanguages = computed(() => {
+    if (!languages.value) return []
+
+    const baseLang = resolveDefaultLanguage(messages.value, mainLanguage.value)
+    const baseMessage = baseLang ? messages.value[baseLang] : undefined
+    if (!baseMessage) return []
+
+    const incomplete: Array<{ language: LanguageFromDb; percentage: number }> = []
+
+    for (const lang of languages.value) {
+      const message = messages.value[lang.id]
+      if (!message) continue
+
+      const percentage = calculateEmailTranslationPercentage(message, baseMessage)
+
+      if (percentage < 100) {
+        incomplete.push({ language: lang, percentage })
+      }
+    }
+
+    return incomplete
+  })
+
+  /**
+   * Check if there are any incomplete translations
+   */
+  const hasIncompleteTranslations = computed(() => {
+    return incompleteLanguages.value.length > 0
+  })
+
+  return {
+    incompleteLanguages,
+    hasIncompleteTranslations,
+  }
+}