@dev.smartpricing/message-composer-layer 1.0.1

package/app/components/Email/Preview.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import type { EmailMessage, PostEntity } from '@dev.smartpricing/message-composer-utils/types'
+import { extractEmailParameters } from '@dev.smartpricing/message-composer-utils/utils'
+import { ref, computed, watch } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+import HtmlPreviewIframe from '@/components/Common/HtmlPreviewIframe.vue'
+import { useCompileEmailMutation } from '~/queries/compilation'
+
+defineOptions({ name: 'EmailPreview' })
+
+const props = withDefaults(
+  defineProps<{
+    message: PostEntity<EmailMessage> | EmailMessage
+    messageGroupId: string
+    dynamicData?: Record<string, string>
+    view?: 'desktop' | 'mobile'
+    showSubject?: boolean
+    brandId?: string
+  }>(),
+  { view: 'desktop', showSubject: false },
+)
+
+const iframeWidth = computed(() => {
+  return props.view === 'mobile' ? '400px' : '600px'
+})
+
+// Extract parameters directly from message
+const parameters = computed(() => extractEmailParameters(props.message))
+
+// Initialize parameter values
+const parameterValues = ref<Record<string, string>>({})
+const { mutate: compile, data: compiled, isLoading: isCompiling } = useCompileEmailMutation()
+
+const compileEmail = useDebounceFn(() => {
+  compile({
+    messageGroupId: props.messageGroupId,
+    data: {
+      language: props.message.language_id,
+      parameters: parameterValues.value,
+      brand_id: props.brandId,
+    },
+  })
+}, 0)
+
+watch(
+  parameters,
+  (params) => {
+    const defaults = props.dynamicData || {}
+    parameterValues.value = params.reduce(
+      (acc, param) => {
+        acc[param] = defaults[param] || `Sample ${param}`
+        return acc
+      },
+      {} as Record<string, string>,
+    )
+
+    compileEmail()
+  },
+  { immediate: true },
+)
+
+watch(
+  () => props.brandId,
+  () => compileEmail(),
+)
+
+// Compilation
+const iframeContent = ref<string>('')
+
+// Update iframe when compilation succeeds
+watch(
+  () => compiled.value,
+  (result) => {
+    if (result?.render_type === 'email_v1') {
+      iframeContent.value = result.html
+    }
+  },
+)
+</script>
+
+<template>
+  <div
+    class="flex-1 bg-neutral-50 flex items-start justify-center overflow-auto"
+    :data-testid="emailPreviewTestIds.root"
+  >
+    <div
+      v-if="isCompiling"
+      class="space-y-2"
+      :style="{ width: iframeWidth }"
+      :data-testid="emailPreviewTestIds.loadingSkeleton"
+    >
+      <USkeleton class="h-6 w-1/3 bg-white" />
+      <USkeleton class="h-4 bg-white" />
+      <USkeleton class="h-4 w-5/8 bg-white" />
+      <USkeleton class="h-32 bg-white" />
+      <USkeleton class="h-12 bg-white" />
+    </div>
+
+    <div v-else-if="iframeContent" :style="{ width: iframeWidth }" class="relative overflow-auto">
+      <p
+        v-if="showSubject"
+        class="pb-4 bg-white mb-px sticky top-0"
+        :data-testid="emailPreviewTestIds.subject"
+      >
+        <span class="paragraph-sm-bold">{{ $t('email_preview.subject') }}:</span>
+        <span class="paragraph-sm">{{ message.body.subject }}</span>
+      </p>
+      <HtmlPreviewIframe
+        :html="iframeContent"
+        title="Email preview"
+        :min-height="600"
+        class="border-0 bg-white w-full"
+        :data-testid="emailPreviewTestIds.iframe"
+      />
+    </div>
+
+    <!-- Error State -->
+    <div
+      v-else
+      class="flex items-center justify-center text-gray-500"
+      :data-testid="emailPreviewTestIds.emptyState"
+    >
+      <p>{{ $t('email_preview.no_preview') }}</p>
+    </div>
+  </div>
+</template>

package/app/components/Email/PreviewPanel.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { EmailMessage, PostEntity } from '@dev.smartpricing/message-composer-utils/types'
+import { ref } from 'vue'
+import EmailPreview from './Preview.vue'
+import SendTestEmailModal from './SendTestEmailModal.vue'
+import type { TabsItem } from '#ui/types'
+
+defineOptions({ name: 'EmailPreviewPanel' })
+
+defineProps<{
+  message: PostEntity<EmailMessage> | EmailMessage
+  messageGroupId: string
+  dynamicData?: Record<string, string>
+}>()
+
+const emit = defineEmits<{
+  'test-sent': [payload: { to_recipients: number }]
+}>()
+
+// Desktop/Mobile toggle
+const { t } = useI18n()
+const tabs: TabsItem[] = [
+  { label: t('common.desktop'), value: 'desktop' },
+  { label: t('common.mobile'), value: 'mobile' },
+] as const
+
+const currentView = ref<(typeof tabs)[number]['value']>('desktop')
+</script>
+
+<template>
+  <div class="bg-white flex flex-col w-full h-full" :data-testid="emailPreviewPanelTestIds.root">
+    <!-- Desktop/Mobile Toggle -->
+    <div class="grid grid-cols-3 gap-2 border-b border-neutral-200 p-2">
+      <div></div>
+      <div class="flex justify-center items-center">
+        <UTabs
+          size="xs"
+          variant="pill"
+          :items="tabs"
+          v-model="currentView"
+          :ui="{ root: 'gap-0 w-full' }"
+          :data-testid="emailPreviewPanelTestIds.viewTabs"
+        />
+      </div>
+      <div class="flex justify-end items-center">
+        <SendTestEmailModal :message="message" @test-sent="emit('test-sent', $event)" />
+      </div>
+    </div>
+
+    <EmailPreview
+      :message="message"
+      :message-group-id="messageGroupId"
+      :dynamic-data="dynamicData"
+      :view="currentView"
+    />
+  </div>
+</template>

package/app/components/Email/SendTestEmailModal.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { PostEntity, EmailMessage } from '@dev.smartpricing/message-composer-utils/types'
+import { isEmail } from '@dev.smartpricing/message-composer-utils/utils'
+import { useSendTestEmailMutation } from '~/queries'
+import { z } from 'zod'
+
+defineOptions({
+  name: 'SendTestEmailModal',
+})
+
+const props = defineProps<{
+  message: PostEntity<EmailMessage>
+}>()
+
+const emit = defineEmits<{
+  'test-sent': [payload: { to_recipients: number }]
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+const { mutate: sendTest, isLoading: isSending, status } = useSendTestEmailMutation()
+
+const state = ref<Schema>({
+  to: '',
+})
+
+const schema = z.object({
+  to: z
+    .string()
+    .min(1, t('editor.validation.error.emailRequired'))
+    .refine(
+      (value) => {
+        const emails = value
+          .split(';')
+          .map((e) => e.trim())
+          .filter(Boolean)
+        return emails.length > 0 && emails.every((email) => isEmail(email))
+      },
+      { message: t('editor.validation.error.emailInvalid') },
+    ),
+})
+
+type Schema = z.output<typeof schema>
+
+function onSubmit() {
+  sendTest({
+    message: props.message,
+    to: state.value.to,
+  })
+}
+
+const open = ref(false)
+const formRef = ref()
+
+watch(status, (newStatus) => {
+  if (newStatus === 'success') {
+    const recipients = state.value.to
+      .split(';')
+      .map((e) => e.trim())
+      .filter(Boolean).length
+    emit('test-sent', { to_recipients: recipients })
+    toast.add({
+      title: t('common.success'),
+      description: t('pages.email.send_test_success'),
+      color: 'success',
+    })
+    open.value = false
+  }
+})
+</script>
+
+<template>
+  <UModal
+    :title="$t('pages.email.send_test')"
+    :ui="{ footer: 'justify-end' }"
+    v-model:open="open"
+    close-icon="ph:x"
+    :close="{ 'data-testid': sendTestEmailModalTestIds.modalCloseButton }"
+    :data-testid="sendTestEmailModalTestIds.modal"
+  >
+    <UButton
+      icon="ph:envelope-simple-bold"
+      :label="$t('pages.email.send_test')"
+      size="md"
+      color="primary"
+      variant="ghost"
+      :data-testid="sendTestEmailModalTestIds.triggerButton"
+    />
+
+    <template #body>
+      <UForm ref="formRef" :schema="schema" :state="state" @submit="onSubmit">
+        <UFormField name="to" :data-testid="sendTestEmailModalTestIds.toFormField">
+          <UInput
+            v-model="state.to"
+            :placeholder="$t('pages.email.test_email_to_placeholder')"
+            :data-testid="sendTestEmailModalTestIds.toInput"
+          />
+        </UFormField>
+      </UForm>
+    </template>
+
+    <template #footer>
+      <UButton
+        variant="outline"
+        :label="$t('common.actions.cancel')"
+        size="sm"
+        color="primary"
+        @click="open = false"
+        :data-testid="sendTestEmailModalTestIds.cancelButton"
+      />
+      <UButton
+        :label="$t('pages.email.send_test')"
+        size="sm"
+        color="primary"
+        :loading="isSending"
+        @click="formRef.submit()"
+        :data-testid="sendTestEmailModalTestIds.sendButton"
+      />
+    </template>
+  </UModal>
+</template>

package/app/components/Email/TranslationEditor.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import type { EmailMessage, PostEntity } from '@dev.smartpricing/message-composer-utils/types'
+import { useI18n } from 'vue-i18n'
+import { getLanguageDisplayName } from '@dev.smartpricing/message-composer-utils/utils'
+import EmailTranslator from './Translator/Index.vue'
+import TranslationActionBar from '@/components/Common/TranslationActionBar.vue'
+
+defineOptions({
+  name: 'EmailTranslationEditor',
+})
+
+const { baseMessage, currentLanguage, baseLanguage, messageGroupId, messages } = defineProps<{
+  baseMessage: EmailMessage | PostEntity<EmailMessage>
+  currentLanguage: string
+  baseLanguage: string
+  messageGroupId?: string | number
+  messages: Record<string, EmailMessage | PostEntity<EmailMessage>>
+}>()
+
+const emit = defineEmits<{
+  'auto-translate-tracked': [language: string]
+  preview: [language: string]
+  'filters-changed': [
+    payload: {
+      language: string
+      search_term: string
+      show_only_missing: boolean
+      show_only_changes: boolean
+    },
+  ]
+}>()
+
+const targetMessage = defineModel<EmailMessage | PostEntity<EmailMessage>>({
+  required: true,
+})
+
+const { t, locale } = useI18n()
+
+// Search and filter state
+const searchQuery = ref('')
+const showOnlyMissing = ref(false)
+const showOnlyChanges = ref(false)
+
+// Auto-translate composable
+const { translateMessage, isTranslating } = useAutoTranslateEmail()
+
+// Translation filters
+const messageGroupIdRef = computed(() => messageGroupId)
+const currentLanguageRef = computed(() => currentLanguage)
+const baseLanguageRef = computed(() => baseLanguage)
+const messagesRef = computed(() => messages)
+
+const { filteredBlockIds, showSubject, hasActiveFilters } = useTranslationFiltersEmail({
+  messages: messagesRef,
+  currentLanguage: currentLanguageRef,
+  baseLanguage: baseLanguageRef,
+  messageGroupId: messageGroupIdRef,
+  searchQuery,
+  showOnlyMissing,
+  showOnlyChanges,
+})
+
+// Auto-translate handler
+async function handleAutoTranslate() {
+  emit('auto-translate-tracked', currentLanguage)
+
+  await translateMessage(baseMessage, targetMessage.value, baseLanguage, currentLanguage)
+}
+
+function handlePreview() {
+  emit('preview', currentLanguage)
+}
+
+// Emit filters-changed when any filter changes
+watch([searchQuery, showOnlyMissing, showOnlyChanges], () => {
+  emit('filters-changed', {
+    language: currentLanguage,
+    search_term: searchQuery.value,
+    show_only_missing: showOnlyMissing.value,
+    show_only_changes: showOnlyChanges.value,
+  })
+})
+
+// Clear filters
+function clearFilters() {
+  searchQuery.value = ''
+  showOnlyMissing.value = false
+  showOnlyChanges.value = false
+}
+</script>
+
+<template>
+  <div class="flex flex-col relative" :data-testid="emailTranslationEditorTestIds.root">
+    <!-- Translation action bar -->
+    <TranslationActionBar
+      :messages="messages"
+      :current-language="currentLanguage"
+      :base-language="baseLanguage"
+      v-model:search-query="searchQuery"
+      v-model:show-only-missing="showOnlyMissing"
+      v-model:show-only-changes="showOnlyChanges"
+      :is-translating="isTranslating"
+      @auto-translate="handleAutoTranslate"
+      @preview="handlePreview"
+    />
+
+    <div class="p-4 space-y-2">
+      <!-- Subject line translation card -->
+      <div
+        v-if="showSubject"
+        class="bg-white border border-muted rounded-lg overflow-hidden"
+        :data-testid="emailTranslationEditorTestIds.subjectCard"
+      >
+        <!-- Card header -->
+        <div class="px-4 py-3 border-b border-muted">
+          <h4 class="label-sm">
+            {{ t('pages.email.edit_message_group.subject') }}
+          </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(currentLanguage, locale) }}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <!-- Content row -->
+          <div class="px-4 py-3">
+            <div class="flex gap-2 items-start">
+              <!-- Base subject (read-only) -->
+              <div class="flex-1 min-w-0">
+                <div
+                  class="paragraph-sm text-primary-700 break-words"
+                  v-text="baseMessage.body.subject"
+                  :data-testid="emailTranslationEditorTestIds.baseSubjectPreview"
+                />
+              </div>
+
+              <!-- Target subject (editable) -->
+              <div class="flex-1 min-w-0">
+                <UInput
+                  v-model="targetMessage.body.subject"
+                  :placeholder="t('pages.email.edit_message_group.subject_placeholder')"
+                  :data-testid="emailTranslationEditorTestIds.targetSubjectInput"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Empty State when no sections match filters -->
+      <UEmpty
+        v-if="hasActiveFilters && filteredBlockIds.length === 0 && !showSubject"
+        icon="ph:funnel"
+        :title="$t('translation_action_bar.no_sections_found')"
+        :data-testid="emailTranslationEditorTestIds.emptyState"
+      >
+        <template #actions>
+          <UButton
+            color="neutral"
+            variant="outline"
+            size="sm"
+            @click="clearFilters"
+            :data-testid="emailTranslationEditorTestIds.clearFiltersButton"
+          >
+            {{ $t('translation_action_bar.clear_filters') }}
+          </UButton>
+        </template>
+      </UEmpty>
+
+      <!-- Email translator -->
+      <EmailTranslator
+        v-if="!hasActiveFilters || filteredBlockIds.length > 0"
+        :base-message="baseMessage"
+        v-model="targetMessage"
+        :base-language="baseLanguage"
+        :target-language="currentLanguage"
+        :filtered-block-ids="filteredBlockIds"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type { JSONContent } from '@tiptap/vue-3'
+import { generateHTML } from '@tiptap/vue-3'
+import { getTipTapExtensions, extractText } from '@dev.smartpricing/message-composer-utils/utils'
+import RichTextEditor from '@/components/Editor/RichTextEditor.vue'
+import { useAppContextStore } from '@/stores/appContext'
+import type { ButtonBlock } from '@dev.smartpricing/message-composer-utils/types'
+
+defineOptions({
+  name: 'EmailTranslatorButton',
+})
+
+const { baseBlock } = defineProps<{
+  baseBlock: ButtonBlock
+}>()
+
+const targetBlock = defineModel<ButtonBlock>({
+  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>',
+  )
+}
+
+// Copy URL to clipboard
+async function copyUrl() {
+  if (baseBlock.settings.url) {
+    await navigator.clipboard.writeText(baseBlock.settings.url)
+  }
+}
+</script>
+
+<template>
+  <div class="flex gap-8 items-start" :data-testid="emailTranslatorButtonTestIds.root">
+    <!-- Base language preview (read-only) -->
+    <div class="flex-1 min-w-0 space-y-2">
+      <div
+        class="paragraph-sm text-primary-700 break-words"
+        v-html="generatePreviewHtml(baseBlock.settings.content)"
+        :data-testid="emailTranslatorButtonTestIds.basePreview"
+      />
+
+      <!-- URL display with copy button -->
+      <div v-if="baseBlock.settings.url" class="flex items-center gap-2">
+        <UBadge
+          variant="subtle"
+          color="neutral"
+          size="sm"
+          :data-testid="emailTranslatorButtonTestIds.linkTypeBadge"
+        >
+          {{ baseBlock.settings.linkType }}
+        </UBadge>
+        <code class="text-xs text-gray-600 truncate max-w-xs">{{ baseBlock.settings.url }}</code>
+        <UButton
+          icon="i-lucide-copy"
+          variant="ghost"
+          size="xs"
+          @click="copyUrl"
+          :data-testid="emailTranslatorButtonTestIds.copyUrlButton"
+        />
+      </div>
+    </div>
+
+    <!-- Translation editor (editable) -->
+    <div class="flex-1 min-w-0 space-y-2">
+      <div class="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="emailTranslatorButtonTestIds.contentEditor"
+          />
+        </div>
+        <slot name="actions" />
+      </div>
+
+      <!-- URL input for translation -->
+      <UInput
+        v-model="targetBlock.settings.url"
+        :placeholder="baseBlock.settings.url || 'https://'"
+        :data-testid="emailTranslatorButtonTestIds.urlInput"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,60 @@
+<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 { DiscountBlock } from '@dev.smartpricing/message-composer-utils/types'
+
+defineOptions({
+  name: 'EmailTranslatorDiscount',
+})
+
+const { baseBlock } = defineProps<{
+  baseBlock: DiscountBlock
+}>()
+
+const targetBlock = defineModel<DiscountBlock>({
+  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="emailTranslatorDiscountTestIds.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="emailTranslatorDiscountTestIds.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
+          alignment
+          dynamic-values
+          :data-testid="emailTranslatorDiscountTestIds.contentEditor"
+        />
+      </div>
+
+      <slot name="actions" />
+    </div>
+  </div>
+</template>