@dev.smartpricing/message-composer-layer 1.0.1

package/app/components/Email/Translator/Footer.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { JSONContent } from '@tiptap/vue-3'
+import { generateHTML } from '@tiptap/vue-3'
+import { getTipTapExtensions } from '@dev.smartpricing/message-composer-utils/utils'
+import RichTextEditor from '@/components/Editor/RichTextEditor.vue'
+import { useAppContextStore } from '@/stores/appContext'
+import type { FooterBlock } from '@dev.smartpricing/message-composer-utils/types'
+
+defineOptions({
+  name: 'EmailTranslatorFooter',
+})
+
+const { baseBlock } = defineProps<{
+  baseBlock: FooterBlock
+}>()
+
+const targetBlock = defineModel<FooterBlock>({
+  required: true,
+})
+
+const appContext = useAppContextStore()
+
+// Generate HTML for preview of base language
+function generatePreviewHtml(content: JSONContent | undefined): string {
+  if (!content) return ''
+  return generateHTML(content, getTipTapExtensions({ preset: 'email' })).replaceAll(
+    '<p></p>',
+    '<p>&nbsp;</p>',
+  )
+}
+</script>
+
+<template>
+  <div class="flex gap-8 items-start" :data-testid="emailTranslatorFooterTestIds.root">
+    <!-- Base language preview (read-only) -->
+    <div class="flex-1 min-w-0">
+      <div
+        class="paragraph-sm text-primary-700 break-words"
+        v-html="generatePreviewHtml(baseBlock.settings.content)"
+        :data-testid="emailTranslatorFooterTestIds.basePreview"
+      />
+    </div>
+
+    <!-- Translation editor (editable) -->
+    <div class="flex-1 min-w-0 flex gap-2 items-start">
+      <div class="flex-1">
+        <RichTextEditor
+          v-model:text="targetBlock.settings.content"
+          preset="email"
+          bold
+          italic
+          underline
+          lists
+          horizontal-rule
+          alignment
+          link
+          emoji
+          dynamic-values
+          :data-testid="emailTranslatorFooterTestIds.contentEditor"
+        />
+      </div>
+
+      <slot name="actions" />
+    </div>
+  </div>
+</template>

package/app/components/Email/Translator/Grid.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { GridBlock, EmailBlock } from '@dev.smartpricing/message-composer-utils/types'
+import HeadingTranslator from './Heading.vue'
+import ParagraphTranslator from './Paragraph.vue'
+import ButtonTranslator from './Button.vue'
+import ImageTranslator from './Image.vue'
+
+defineOptions({
+  name: 'EmailTranslatorGrid',
+})
+
+const { baseBlock, blockIndex } = defineProps<{
+  baseBlock: GridBlock
+  targetBlock: GridBlock
+  blockIndex?: number
+}>()
+
+const targetBlock = defineModel<GridBlock>({
+  required: true,
+})
+
+// Component registry for nested translators
+const translatorComponents: Record<string, any> = {
+  heading: HeadingTranslator,
+  paragraph: ParagraphTranslator,
+  button: ButtonTranslator,
+  image: ImageTranslator,
+}
+
+// Extract all translatable nested blocks with their positions
+interface NestedBlockInfo {
+  columnIndex: number
+  blockIndex: number
+  baseBlock: EmailBlock
+  targetBlock: EmailBlock
+  label: string
+}
+
+const nestedTranslatableBlocks = computed<NestedBlockInfo[]>(() => {
+  const blocks: NestedBlockInfo[] = []
+
+  // Build ID-based map of target columns
+  const targetColumnsMap = new Map(
+    targetBlock.value.settings.columnData.map((col) => [col.id, col]),
+  )
+
+  for (let colIdx = 0; colIdx < baseBlock.settings.columnData.length; colIdx++) {
+    const baseColumn = baseBlock.settings.columnData[colIdx]
+    if (!baseColumn) continue
+    const targetColumn = targetColumnsMap.get(baseColumn.id)
+
+    if (!targetColumn) continue
+
+    // Build ID-based map of target nested blocks within this column
+    const targetNestedMap = new Map(targetColumn.blocks.map((b) => [b.id, b]))
+
+    for (let blkIdx = 0; blkIdx < baseColumn.blocks.length; blkIdx++) {
+      const baseNested = baseColumn.blocks[blkIdx]
+      if (!baseNested) continue
+      const targetNested = targetNestedMap.get(baseNested.id)
+
+      if (!targetNested) continue
+
+      // Only include translatable blocks
+      if (
+        baseNested.type === 'heading' ||
+        baseNested.type === 'paragraph' ||
+        baseNested.type === 'button' ||
+        baseNested.type === 'image'
+      ) {
+        const gridLabel = blockIndex !== undefined ? `Grid ${blockIndex + 1}` : 'Grid'
+        blocks.push({
+          columnIndex: colIdx,
+          blockIndex: blkIdx,
+          baseBlock: baseNested,
+          targetBlock: targetNested,
+          label: `${gridLabel} → Column ${colIdx + 1} → ${baseNested.type}`,
+        })
+      }
+    }
+  }
+
+  return blocks
+})
+</script>
+
+<template>
+  <div class="space-y-6" :data-testid="emailTranslatorGridTestIds.root">
+    <div
+      v-for="(info, idx) in nestedTranslatableBlocks"
+      :key="`${info.columnIndex}-${info.blockIndex}`"
+      class="space-y-2"
+      :data-testid="`${emailTranslatorGridTestIds.nestedBlock}-${info.columnIndex}-${info.blockIndex}`"
+    >
+      <UBadge
+        variant="subtle"
+        color="neutral"
+        size="sm"
+        :data-testid="`${emailTranslatorGridTestIds.nestedBlockBadge}-${info.columnIndex}-${info.blockIndex}`"
+      >
+        {{ info.label }}
+      </UBadge>
+
+      <component
+        :is="translatorComponents[info.baseBlock.type]"
+        v-if="translatorComponents[info.baseBlock.type]"
+        :base-block="info.baseBlock"
+        v-model="info.targetBlock"
+      >
+        <template #actions>
+          <slot name="actions" :block="info" />
+        </template>
+      </component>
+
+      <UDivider v-if="idx < nestedTranslatableBlocks.length - 1" />
+    </div>
+
+    <div
+      v-if="nestedTranslatableBlocks.length === 0"
+      class="text-gray-500 text-sm italic"
+      :data-testid="emailTranslatorGridTestIds.emptyState"
+    >
+      No translatable blocks in grid
+    </div>
+  </div>
+</template>

package/app/components/Email/Translator/Header.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { HeaderBlock } from '@dev.smartpricing/message-composer-utils/types'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import MediaUploadOrSelect from '@/components/Common/MediaUploadOrSelect.vue'
+import { deepClone } from '@dev.smartpricing/message-composer-utils/utils'
+
+defineOptions({
+  name: 'EmailTranslatorHeader',
+})
+
+const { baseBlock } = defineProps<{
+  baseBlock: HeaderBlock
+}>()
+
+const targetBlock = defineModel<HeaderBlock>({ required: true })
+
+const { t } = useI18n()
+
+const isCustom = computed(() => targetBlock.value.settings.src !== baseBlock.settings.src)
+
+function resetToMain() {
+  const resetBlock = deepClone(toRaw(baseBlock))
+  targetBlock.value.settings.src = resetBlock.settings.src
+  targetBlock.value.settings.alt = resetBlock.settings.alt
+}
+</script>
+
+<template>
+  <div class="space-y-3" :data-testid="emailTranslatorHeaderTestIds.root">
+    <!-- Image row -->
+    <div class="flex gap-8 items-start">
+      <!-- Base language preview (read-only) -->
+      <div class="flex-1 min-w-0">
+        <div v-if="baseBlock.settings.src" class="max-w-[200px]">
+          <img
+            :src="baseBlock.settings.src"
+            class="rounded border border-muted max-h-[120px] object-contain"
+            :data-testid="emailTranslatorHeaderTestIds.basePreviewImage"
+          />
+        </div>
+        <div v-else class="paragraph-sm text-muted">
+          {{ t('editor.email.blocks.header.name') }}
+        </div>
+      </div>
+
+      <!-- Translation editor (editable) -->
+      <div class="flex-1 min-w-0">
+        <div class="flex items-center gap-2">
+          <MediaUploadOrSelect
+            v-model="targetBlock.settings.src"
+            media-type="image"
+            class="flex-1"
+            show-preview
+            :data-testid="emailTranslatorHeaderTestIds.mediaUpload"
+          >
+            <template #actions>
+              <UTooltip :text="t('editor.whatsapp.translator.reset_to_main')" v-if="isCustom">
+                <UButton
+                  color="warning"
+                  variant="ghost"
+                  icon="ph:arrow-counter-clockwise-thin"
+                  @click.stop="resetToMain"
+                  :data-testid="emailTranslatorHeaderTestIds.resetButton"
+                />
+              </UTooltip>
+            </template>
+          </MediaUploadOrSelect>
+        </div>
+      </div>
+    </div>
+
+    <!-- Alt text row -->
+    <div class="flex gap-8 items-start" v-if="baseBlock.settings.alt">
+      <div class="flex-1 min-w-0">
+        <p class="paragraph-sm text-muted truncate">
+          {{ baseBlock.settings.alt || '' }}
+        </p>
+      </div>
+      <div class="flex-1 min-w-0">
+        <UInput
+          v-model="targetBlock.settings.alt"
+          :placeholder="t('editor.email.blocks.header.settings.alt_placeholder')"
+          size="sm"
+          :data-testid="emailTranslatorHeaderTestIds.altInput"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/Email/Translator/Heading.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { JSONContent } from '@tiptap/vue-3'
+import { generateHTML } from '@tiptap/vue-3'
+import { getTipTapExtensions } from '@dev.smartpricing/message-composer-utils/utils'
+import RichTextEditor from '@/components/Editor/RichTextEditor.vue'
+import { useAppContextStore } from '@/stores/appContext'
+import type { HeadingBlock } from '@dev.smartpricing/message-composer-utils/types'
+
+defineOptions({
+  name: 'EmailTranslatorHeading',
+})
+
+const { baseBlock } = defineProps<{
+  baseBlock: HeadingBlock
+}>()
+
+const targetBlock = defineModel<HeadingBlock>({
+  required: true,
+})
+
+const appContext = useAppContextStore()
+
+// Generate HTML for preview of base language
+function generatePreviewHtml(content: JSONContent | undefined): string {
+  if (!content) return ''
+  return generateHTML(content, getTipTapExtensions({ preset: 'email' })).replaceAll(
+    '<p></p>',
+    '<p>&nbsp;</p>',
+  )
+}
+</script>
+
+<template>
+  <div class="flex gap-8 items-start" :data-testid="emailTranslatorHeadingTestIds.root">
+    <!-- Base language preview (read-only) -->
+    <div class="flex-1 min-w-0">
+      <div
+        class="paragraph-sm text-primary-700 break-words"
+        v-html="generatePreviewHtml(baseBlock.settings.content)"
+        :data-testid="emailTranslatorHeadingTestIds.basePreview"
+      />
+    </div>
+
+    <!-- Translation editor (editable) -->
+    <div class="flex-1 min-w-0 flex gap-2 items-start">
+      <div class="flex-1">
+        <RichTextEditor
+          v-model:text="targetBlock.settings.content"
+          preset="email"
+          bold
+          italic
+          underline
+          lists
+          horizontal-rule
+          alignment
+          link
+          emoji
+          dynamic-values
+          :data-testid="emailTranslatorHeadingTestIds.contentEditor"
+        />
+      </div>
+
+      <slot name="actions" />
+    </div>
+  </div>
+</template>

package/app/components/Email/Translator/Image.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import type { ImageBlock } from '@dev.smartpricing/message-composer-utils/types'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import MediaUploadOrSelect from '@/components/Common/MediaUploadOrSelect.vue'
+import { deepClone } from '@dev.smartpricing/message-composer-utils/utils'
+
+defineOptions({
+  name: 'EmailTranslatorImage',
+})
+
+const { baseBlock } = defineProps<{
+  baseBlock: ImageBlock
+}>()
+
+const targetBlock = defineModel<ImageBlock>({ required: true })
+
+const { t } = useI18n()
+
+const isCustom = computed(() => targetBlock.value.settings.src !== baseBlock.settings.src)
+
+function resetToMain() {
+  const resetBlock = deepClone(toRaw(baseBlock))
+  targetBlock.value.settings.src = resetBlock.settings.src
+  targetBlock.value.settings.href = resetBlock.settings.href
+}
+</script>
+
+<template>
+  <div class="space-y-3" :data-testid="emailTranslatorImageTestIds.root">
+    <!-- Image row -->
+    <div class="flex gap-8 items-start">
+      <!-- Base language preview (read-only) -->
+      <div class="flex-1 min-w-0">
+        <div v-if="baseBlock.settings.src" class="max-w-[200px]">
+          <img
+            :src="baseBlock.settings.src"
+            class="rounded border border-muted max-h-[120px] object-contain"
+            :data-testid="emailTranslatorImageTestIds.basePreviewImage"
+          />
+        </div>
+        <div v-else class="paragraph-sm text-muted">
+          {{ t('editor.email.blocks.image.name') }}
+        </div>
+      </div>
+
+      <!-- Translation editor (editable) -->
+      <div class="flex-1 min-w-0">
+        <div class="flex items-center gap-2">
+          <MediaUploadOrSelect
+            v-model="targetBlock.settings.src"
+            media-type="image"
+            class="flex-1"
+            show-preview
+            :data-testid="emailTranslatorImageTestIds.mediaUpload"
+          >
+            <template #actions>
+              <UTooltip :text="t('editor.whatsapp.translator.reset_to_main')" v-if="isCustom">
+                <UButton
+                  color="warning"
+                  variant="ghost"
+                  icon="ph:arrow-counter-clockwise-thin"
+                  @click.stop="resetToMain"
+                  :data-testid="emailTranslatorImageTestIds.resetButton"
+                />
+              </UTooltip>
+            </template>
+          </MediaUploadOrSelect>
+        </div>
+      </div>
+    </div>
+
+    <!-- Link row -->
+    <div class="flex gap-8 items-start" v-if="baseBlock.settings.href">
+      <div class="flex-1 min-w-0">
+        <p class="paragraph-sm text-muted truncate">
+          {{ baseBlock.settings.href || '' }}
+        </p>
+      </div>
+      <div class="flex-1 min-w-0">
+        <UInput
+          v-model="targetBlock.settings.href"
+          type="url"
+          :placeholder="t('editor.email.blocks.image.settings.href_placeholder')"
+          size="sm"
+          :data-testid="emailTranslatorImageTestIds.hrefInput"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/Email/Translator/Index.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { computed, type Component } from 'vue'
+import type {
+  EmailMessage,
+  EmailBlock,
+  PostEntity,
+  EmailBlockType,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { getLanguageDisplayName } from '@dev.smartpricing/message-composer-utils/utils'
+import { useI18n } from 'vue-i18n'
+import HeadingTranslator from './Heading.vue'
+import ParagraphTranslator from './Paragraph.vue'
+import ButtonTranslator from './Button.vue'
+import DiscountTranslator from './Discount.vue'
+import FooterTranslator from './Footer.vue'
+import RawHtmlTranslator from './RawHtml.vue'
+import GridTranslator from './Grid.vue'
+import UnsubscribeLinkTranslator from './UnsubscribeLink.vue'
+import ImageTranslator from './Image.vue'
+import HeaderTranslator from './Header.vue'
+
+defineOptions({
+  name: 'EmailTranslator',
+})
+
+const { baseMessage, baseLanguage, targetLanguage, filteredBlockIds } = defineProps<{
+  baseMessage: EmailMessage | PostEntity<EmailMessage>
+  baseLanguage: string
+  targetLanguage: string
+  filteredBlockIds?: string[]
+}>()
+
+const targetMessage = defineModel<EmailMessage | PostEntity<EmailMessage>>({
+  required: true,
+})
+
+const { locale } = useI18n()
+
+// Component registry
+const translatorComponents: Partial<Record<EmailBlockType, Component>> = {
+  heading: HeadingTranslator,
+  paragraph: ParagraphTranslator,
+  button: ButtonTranslator,
+  discount: DiscountTranslator,
+  footer: FooterTranslator,
+  raw_html: RawHtmlTranslator,
+  grid: GridTranslator,
+  unsubscribe_link: UnsubscribeLinkTranslator,
+  image: ImageTranslator,
+  header: HeaderTranslator,
+}
+
+// Get translatable blocks with indices
+interface BlockInfo {
+  baseBlock: EmailBlock
+  targetBlock: EmailBlock
+  type: string
+}
+
+const translatableBlocks = computed<BlockInfo[]>(() => {
+  // Build ID-based map of target blocks for quick lookup
+  const targetBlocksMap = new Map(targetMessage.value.body.blocks.map((b) => [b.id, b]))
+
+  return baseMessage.body.blocks
+    .map((block) => {
+      const targetBlock = targetBlocksMap.get(block.id)
+      if (!targetBlock) return
+
+      return {
+        baseBlock: block,
+        targetBlock,
+        type: block.type,
+      }
+    })
+    .filter((block) => {
+      if (!block) return false
+      if (!translatorComponents[block.type]) return false
+      if (filteredBlockIds && !filteredBlockIds.includes(block.baseBlock.id)) return false
+      return true
+    })
+})
+
+// Get block type display name
+function getBlockTypeLabel(type: string): string {
+  const t = useI18n().t
+  const key = `editor.email.blocks.${type}.name`
+  return t(key)
+}
+</script>
+
+<template>
+  <div class="space-y-2" :data-testid="emailTranslatorIndexTestIds.root">
+    <!-- Translation cards for each block -->
+    <div
+      v-for="info in translatableBlocks"
+      :key="info.baseBlock.id"
+      class="bg-white border border-muted rounded-lg overflow-hidden"
+      :data-testid="`${emailTranslatorIndexTestIds.blockCard}-${info.baseBlock.id}`"
+    >
+      <!-- Card header with block title -->
+      <div class="px-4 py-3 border-b border-muted">
+        <h4 class="label-sm">
+          {{ getBlockTypeLabel(info.type) }}
+        </h4>
+      </div>
+
+      <!-- Card content -->
+      <div class="px-px">
+        <!-- Column headers -->
+        <div class="bg-muted px-4 py-2 flex gap-8">
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-1">
+              <p class="label-xs text-primary-700">
+                {{ getLanguageDisplayName(baseLanguage, locale) }}
+              </p>
+            </div>
+          </div>
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-1">
+              <p class="label-xs text-primary-700">
+                {{ getLanguageDisplayName(targetLanguage, locale) }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Content row -->
+        <div class="px-4 py-3 show-list">
+          <component
+            :is="translatorComponents[info.type]"
+            :base-block="info.baseBlock"
+            v-model="info.targetBlock"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/Email/Translator/Paragraph.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { JSONContent } from '@tiptap/vue-3'
+import { generateHTML } from '@tiptap/vue-3'
+import { getTipTapExtensions } from '@dev.smartpricing/message-composer-utils/utils'
+import RichTextEditor from '@/components/Editor/RichTextEditor.vue'
+import { useAppContextStore } from '@/stores/appContext'
+import type { ParagraphBlock } from '@dev.smartpricing/message-composer-utils/types'
+
+defineOptions({
+  name: 'EmailTranslatorParagraph',
+})
+
+const { baseBlock } = defineProps<{
+  baseBlock: ParagraphBlock
+}>()
+
+const targetBlock = defineModel<ParagraphBlock>({
+  required: true,
+})
+
+const appContext = useAppContextStore()
+
+// Generate HTML for preview of base language
+function generatePreviewHtml(content: JSONContent | undefined): string {
+  if (!content) return ''
+  return generateHTML(content, getTipTapExtensions({ preset: 'email' })).replaceAll(
+    '<p></p>',
+    '<p>&nbsp;</p>',
+  )
+}
+</script>
+
+<template>
+  <div class="flex gap-8 items-start" :data-testid="emailTranslatorParagraphTestIds.root">
+    <!-- Base language preview (read-only) -->
+    <div class="flex-1 min-w-0">
+      <div
+        class="paragraph-sm text-primary-700 break-words"
+        v-html="generatePreviewHtml(baseBlock.settings.content)"
+        :data-testid="emailTranslatorParagraphTestIds.basePreview"
+      />
+    </div>
+
+    <!-- Translation editor (editable) -->
+    <div class="flex-1 min-w-0 flex gap-2 items-start">
+      <div class="flex-1">
+        <RichTextEditor
+          v-model:text="targetBlock.settings.content"
+          preset="email"
+          bold
+          italic
+          underline
+          lists
+          horizontal-rule
+          alignment
+          link
+          emoji
+          dynamic-values
+          :data-testid="emailTranslatorParagraphTestIds.contentEditor"
+        />
+      </div>
+
+      <slot name="actions" />
+    </div>
+  </div>
+</template>