@dev.smartpricing/message-composer-layer 1.0.1

package/app/composables/useAutoTranslate.ts

@@ -0,0 +1,242 @@
+import { ref } from 'vue'
+import type { WhatsappMessage, PostEntity } from '@dev.smartpricing/message-composer-utils/types'
+import {
+  isTiptapEmpty,
+  extractText,
+  createTipTapContent,
+} from '@dev.smartpricing/message-composer-utils/utils'
+import { useTranslateMutation } from '~/queries'
+
+export function useAutoTranslate() {
+  const { t } = useI18n()
+  const { mutateAsync: translate, isLoading: isTranslating } = useTranslateMutation()
+  const error = ref<string | null>(null)
+
+  /**
+   * Translate text using the backend API
+   */
+  const translateText = async (
+    text: string,
+    sourceLanguage: string,
+    targetLanguage: string,
+  ): Promise<string | null> => {
+    try {
+      const result = await translate({
+        text,
+        sourceLanguage,
+        targetLanguages: [targetLanguage],
+      })
+
+      if (result?.translations?.[targetLanguage]) {
+        return result.translations[targetLanguage]
+      }
+
+      return null
+    } catch (err) {
+      console.error('Translation error:', err)
+      return null
+    }
+  }
+
+  /**
+   * Translate all empty fields in a message
+   */
+  const translateAllEmpty = async (
+    baseMessage: PostEntity<WhatsappMessage>,
+    targetMessage: PostEntity<WhatsappMessage>,
+    baseLanguage: string,
+    targetLanguage: string,
+  ): Promise<boolean> => {
+    error.value = null
+
+    if (!targetMessage.body) {
+      return false
+    }
+
+    try {
+      let hasTranslations = false
+
+      // Translate header if empty
+      if (
+        baseMessage.body?.header &&
+        targetMessage.body?.header &&
+        baseMessage.body.header.type === 'text' &&
+        targetMessage.body.header.type === 'text' &&
+        !isTiptapEmpty(baseMessage.body.header.content, baseMessage.render_type) &&
+        isTiptapEmpty(targetMessage.body?.header.content, targetMessage.render_type)
+      ) {
+        const headerText = extractText(baseMessage.body.header.content, baseMessage.render_type)
+        if (headerText) {
+          const translated = await translateText(headerText, baseLanguage, targetLanguage)
+          if (translated) {
+            targetMessage.body.header.content = createTipTapContent(translated)
+            hasTranslations = true
+          }
+        }
+      }
+
+      // Translate body if empty
+      if (
+        baseMessage.body?.body &&
+        targetMessage.body?.body &&
+        !isTiptapEmpty(baseMessage.body.body.content, baseMessage.render_type) &&
+        isTiptapEmpty(targetMessage.body?.body.content, targetMessage.render_type)
+      ) {
+        const bodyText = extractText(baseMessage.body.body.content, baseMessage.render_type)
+        if (bodyText) {
+          const translated = await translateText(bodyText, baseLanguage, targetLanguage)
+          if (translated) {
+            targetMessage.body.body.content = createTipTapContent(translated)
+            hasTranslations = true
+          }
+        }
+      }
+
+      // Translate footer if empty
+      if (
+        baseMessage.body?.footer &&
+        targetMessage.body?.footer &&
+        !isTiptapEmpty(baseMessage.body.footer.content, baseMessage.render_type) &&
+        isTiptapEmpty(targetMessage.body?.footer.content, targetMessage.render_type)
+      ) {
+        const footerText = extractText(baseMessage.body.footer.content, baseMessage.render_type)
+        if (footerText) {
+          const translated = await translateText(footerText, baseLanguage, targetLanguage)
+          if (translated) {
+            targetMessage.body.footer.content = translated
+            hasTranslations = true
+          }
+        }
+      }
+
+      // Translate buttons if empty
+      if (baseMessage.body?.buttons && baseMessage.body.buttons.buttons.length > 0) {
+        for (let i = 0; i < baseMessage.body.buttons.buttons.length; i++) {
+          const baseButton = baseMessage.body.buttons.buttons[i]
+          const targetButton = targetMessage.body?.buttons?.buttons?.[i]
+
+          if (
+            baseButton?.text &&
+            (!targetButton || isTiptapEmpty(targetButton.text, targetMessage.render_type))
+          ) {
+            const buttonText = extractText(baseButton.text, baseMessage.render_type)
+            if (buttonText) {
+              const translated = await translateText(buttonText, baseLanguage, targetLanguage)
+              if (translated && targetMessage.body.buttons?.buttons?.[i]) {
+                targetMessage.body.buttons.buttons[i]!.text = translated
+                hasTranslations = true
+              }
+            }
+          }
+        }
+      }
+
+      return hasTranslations
+    } catch (err) {
+      console.error('Auto-translate error:', err)
+      error.value = err instanceof Error ? err.message : t('common.translation_failed')
+      return false
+    }
+  }
+
+  /**
+   * Translate all fields in a message (overwrite existing translations)
+   */
+  const translateMessage = async (
+    baseMessage: PostEntity<WhatsappMessage>,
+    targetMessage: PostEntity<WhatsappMessage>,
+    baseLanguage: string,
+    targetLanguage: string,
+  ): Promise<boolean> => {
+    error.value = null
+
+    if (!targetMessage.body) {
+      return false
+    }
+
+    try {
+      let hasTranslations = false
+
+      // Translate header (overwrite)
+      if (
+        baseMessage.body?.header &&
+        targetMessage.body?.header &&
+        baseMessage.body.header.type === 'text' &&
+        targetMessage.body.header.type === 'text' &&
+        !isTiptapEmpty(baseMessage.body.header.content, baseMessage.render_type)
+      ) {
+        const headerText = extractText(baseMessage.body.header.content, baseMessage.render_type)
+        if (headerText) {
+          const translated = await translateText(headerText, baseLanguage, targetLanguage)
+          if (translated) {
+            targetMessage.body.header.content = createTipTapContent(translated)
+            hasTranslations = true
+          }
+        }
+      }
+
+      // Translate body (overwrite)
+      if (
+        baseMessage.body?.body &&
+        targetMessage.body?.body &&
+        !isTiptapEmpty(baseMessage.body.body.content, baseMessage.render_type)
+      ) {
+        const bodyText = extractText(baseMessage.body.body.content, baseMessage.render_type)
+        if (bodyText) {
+          const translated = await translateText(bodyText, baseLanguage, targetLanguage)
+          if (translated) {
+            targetMessage.body.body.content = createTipTapContent(translated)
+            hasTranslations = true
+          }
+        }
+      }
+
+      // Translate footer (overwrite)
+      if (
+        baseMessage.body?.footer &&
+        targetMessage.body?.footer &&
+        !isTiptapEmpty(baseMessage.body.footer.content, baseMessage.render_type)
+      ) {
+        const footerText = extractText(baseMessage.body.footer.content, baseMessage.render_type)
+        if (footerText) {
+          const translated = await translateText(footerText, baseLanguage, targetLanguage)
+          if (translated) {
+            targetMessage.body.footer.content = translated
+            hasTranslations = true
+          }
+        }
+      }
+
+      // Translate buttons (overwrite)
+      if (baseMessage.body?.buttons && baseMessage.body.buttons.buttons.length > 0) {
+        for (let i = 0; i < baseMessage.body.buttons.buttons.length; i++) {
+          const baseButton = baseMessage.body.buttons.buttons[i]
+
+          if (baseButton?.text && !isTiptapEmpty(baseButton.text, baseMessage.render_type)) {
+            const buttonText = extractText(baseButton.text, baseMessage.render_type)
+            if (buttonText) {
+              const translated = await translateText(buttonText, baseLanguage, targetLanguage)
+              if (translated && targetMessage.body.buttons?.buttons?.[i]) {
+                targetMessage.body.buttons.buttons[i]!.text = translated
+                hasTranslations = true
+              }
+            }
+          }
+        }
+      }
+
+      return hasTranslations
+    } catch (err) {
+      console.error('Auto-translate error:', err)
+      error.value = err instanceof Error ? err.message : t('common.translation_failed')
+      return false
+    }
+  }
+
+  return {
+    translateMessage,
+    translateAllEmpty,
+    isTranslating,
+    error,
+  }
+}

package/app/composables/useAutoTranslateEmail.ts

@@ -0,0 +1,294 @@
+import { ref } from 'vue'
+import type {
+  EmailMessage,
+  PostEntity,
+  EmailBlock,
+} from '@dev.smartpricing/message-composer-utils/types'
+import {
+  isTiptapEmpty,
+  extractText,
+  createTipTapContent,
+  deepClone,
+} from '@dev.smartpricing/message-composer-utils/utils'
+import { useTranslateMutation } from '~/queries'
+
+export function useAutoTranslateEmail() {
+  const { mutateAsync: translate, isLoading: isTranslating } = useTranslateMutation()
+  const error = ref<string | null>(null)
+
+  /**
+   * Translate text using backend API
+   */
+  async function translateText(
+    text: string,
+    sourceLanguage: string,
+    targetLanguage: string,
+  ): Promise<string | null> {
+    try {
+      const result = await translate({
+        text,
+        sourceLanguage,
+        targetLanguages: [targetLanguage],
+      })
+
+      if (result?.translations?.[targetLanguage]) {
+        return result.translations[targetLanguage]
+      }
+
+      return null
+    } catch (err) {
+      console.error('Translation error:', err)
+      return null
+    }
+  }
+
+  /**
+   * Translate a single block
+   */
+  async function translateBlock(
+    baseBlock: EmailBlock,
+    targetBlock: EmailBlock,
+    baseLanguage: string,
+    targetLanguage: string,
+    onlyEmpty: boolean = false,
+  ): Promise<boolean> {
+    if (baseBlock.type !== targetBlock.type) return false
+
+    switch (baseBlock.type) {
+      case 'heading':
+      case 'paragraph':
+      case 'footer':
+      case 'unsubscribe_link': {
+        // Check if base has content
+        if (isTiptapEmpty(baseBlock.settings.content, 'email_v1')) {
+          return false
+        }
+
+        // If onlyEmpty, check if target already has content
+        if (onlyEmpty && !isTiptapEmpty(targetBlock.settings.content, 'email_v1')) {
+          return false
+        }
+
+        // Extract text from base
+        const text = extractText(baseBlock.settings.content, 'email_v1')
+        if (!text) return false
+
+        // Translate
+        const translated = await translateText(text, baseLanguage, targetLanguage)
+        if (!translated) return false
+
+        // Update target block
+        targetBlock.settings.content = createTipTapContent(translated, { preset: 'email' })
+        return true
+      }
+
+      case 'discount': {
+        // Check if base has content
+        if (isTiptapEmpty(baseBlock.settings.content, 'email_v1')) {
+          return false
+        }
+        targetBlock.settings.content = deepClone(baseBlock.settings.content)
+        return true
+      }
+
+      case 'button': {
+        // Check if base has content
+        if (isTiptapEmpty(baseBlock.settings.content, 'email_v1')) {
+          return false
+        }
+
+        // If onlyEmpty, check if target already has content
+        if (onlyEmpty && !isTiptapEmpty(targetBlock.settings.content, 'email_v1')) {
+          return false
+        }
+
+        // Extract text from base
+        const text = extractText(baseBlock.settings.content, 'email_v1')
+        if (!text) return false
+
+        // Translate button text only (not URL)
+        const translated = await translateText(text, baseLanguage, targetLanguage)
+        if (!translated) return false
+
+        // Update target block content only
+        targetBlock.settings.content = createTipTapContent(translated, { preset: 'email' })
+        return true
+      }
+
+      case 'raw_html': {
+        const translated = await translateText(
+          baseBlock.settings.html,
+          baseLanguage,
+          targetLanguage,
+        )
+        if (!translated) return false
+        targetBlock.settings.html = translated
+        return true
+      }
+
+      default:
+        return false
+    }
+  }
+
+  /**
+   * Recursively translate blocks including nested grid blocks
+   */
+  async function translateBlocksRecursive(
+    baseBlocks: EmailBlock[],
+    targetBlocks: EmailBlock[],
+    baseLanguage: string,
+    targetLanguage: string,
+    onlyEmpty: boolean = false,
+  ): Promise<number> {
+    let translatedCount = 0
+
+    // Build ID-based map of target blocks
+    const targetBlocksMap = new Map(targetBlocks.map((b) => [b.id, b]))
+
+    for (const baseBlock of baseBlocks) {
+      const targetBlock = targetBlocksMap.get(baseBlock.id)
+
+      if (!baseBlock || !targetBlock) continue
+
+      // Handle grid blocks recursively
+      if (baseBlock.type === 'grid' && targetBlock.type === 'grid') {
+        // Build ID-based map of target columns
+        const targetColumnsMap = new Map(
+          targetBlock.settings.columnData.map((col) => [col.id, col]),
+        )
+
+        for (const baseColumn of baseBlock.settings.columnData) {
+          const targetColumn = targetColumnsMap.get(baseColumn.id)
+
+          if (baseColumn && targetColumn) {
+            const nestedCount = await translateBlocksRecursive(
+              baseColumn.blocks,
+              targetColumn.blocks,
+              baseLanguage,
+              targetLanguage,
+              onlyEmpty,
+            )
+            translatedCount += nestedCount
+          }
+        }
+      } else {
+        // Translate regular block
+        const success = await translateBlock(
+          baseBlock,
+          targetBlock,
+          baseLanguage,
+          targetLanguage,
+          onlyEmpty,
+        )
+        if (success) translatedCount++
+      }
+    }
+
+    return translatedCount
+  }
+
+  /**
+   * Translate all empty fields in message
+   */
+  async function translateAllEmpty(
+    baseMessage: PostEntity<EmailMessage>,
+    targetMessage: PostEntity<EmailMessage>,
+    baseLanguage: string,
+    targetLanguage: string,
+  ): Promise<boolean> {
+    error.value = null
+
+    try {
+      let hasTranslations = false
+
+      // Translate subject if empty
+      if (
+        baseMessage.body.subject &&
+        baseMessage.body.subject.trim() !== '' &&
+        (!targetMessage.body.subject || targetMessage.body.subject.trim() === '')
+      ) {
+        const translated = await translateText(
+          baseMessage.body.subject,
+          baseLanguage,
+          targetLanguage,
+        )
+        if (translated) {
+          targetMessage.body.subject = translated
+          hasTranslations = true
+        }
+      }
+
+      // Translate blocks (only empty ones)
+      const count = await translateBlocksRecursive(
+        baseMessage.body.blocks,
+        targetMessage.body.blocks,
+        baseLanguage,
+        targetLanguage,
+        true, // onlyEmpty
+      )
+
+      if (count > 0) hasTranslations = true
+
+      return hasTranslations
+    } catch (err) {
+      console.error('Auto-translate error:', err)
+      error.value = err instanceof Error ? err.message : 'Translation failed'
+      return false
+    }
+  }
+
+  /**
+   * Translate all fields in message (overwrite existing)
+   */
+  async function translateMessage(
+    baseMessage: PostEntity<EmailMessage>,
+    targetMessage: PostEntity<EmailMessage>,
+    baseLanguage: string,
+    targetLanguage: string,
+  ): Promise<boolean> {
+    error.value = null
+
+    try {
+      let hasTranslations = false
+
+      // Translate subject (overwrite)
+      if (baseMessage.body.subject && baseMessage.body.subject.trim() !== '') {
+        const translated = await translateText(
+          baseMessage.body.subject,
+          baseLanguage,
+          targetLanguage,
+        )
+        if (translated) {
+          targetMessage.body.subject = translated
+          hasTranslations = true
+        }
+      }
+
+      // Translate blocks (overwrite all)
+      const count = await translateBlocksRecursive(
+        baseMessage.body.blocks,
+        targetMessage.body.blocks,
+        baseLanguage,
+        targetLanguage,
+        false, // overwrite
+      )
+
+      if (count > 0) hasTranslations = true
+
+      return hasTranslations
+    } catch (err) {
+      console.error('Auto-translate error:', err)
+      error.value = err instanceof Error ? err.message : 'Translation failed'
+      return false
+    }
+  }
+
+  return {
+    translateMessage,
+    translateAllEmpty,
+    translateText,
+    isTranslating,
+    error,
+  }
+}