@dev.smartpricing/message-composer-layer 1.0.13 → 1.0.15

package/app/pages/template/email/[id].vue

@@ -5,411 +5,9 @@ definePageMeta({
   channel: 'email',
 })
 
-import EmailEditor from '@/components/Email/Editor/Index.vue'
-import TranslationEditor from '@/components/Email/TranslationEditor.vue'
-import IncompleteTranslationsDialog from '@/components/Common/IncompleteTranslationsDialog.vue'
-import LanguageList from '@/components/Common/LanguageList.vue'
-import { computed, ref, watch, onUnmounted } from 'vue'
-import type {
-  MessageGroupCategory,
-  EmailMessage,
-  PostEntity,
-} from '@dev.smartpricing/message-composer-utils/types'
-import { syncLayoutFromBase } from '@dev.smartpricing/message-composer-utils/utils'
-import { useRoute } from 'vue-router'
-import { useMessageGroupQuery, useLanguagesQuery } from '~/queries'
-import { useAppContextStore } from '@/stores/appContext'
-const { trackEvent } = useTracking()
 const route = useRoute()
-
-const { mainLanguage } = storeToRefs(useAppContextStore())
-
-const language = ref(mainLanguage.value)
-const targetLanguage = ref(mainLanguage.value)
-const activeTab = ref<'content' | 'translations'>('content')
-const { goBackOrFallback } = useGoBack()
-const emailEditorStore = useEmailEditorStore()
-
-const messages = ref<Record<string, EmailMessage>>({})
-const { data: messageGroup, isPending: isFetching } = useMessageGroupQuery(
-  route.params.id as string,
-)
-
-// Store original messageGroup values
-const originalMessageGroupName = ref<string>('')
-const originalMessageGroupCategory = ref<MessageGroupCategory>('marketing')
-
-// Initialize change tracking
-const messageGroupIdRef = computed(() => (messageGroup.value?.id || route.params.id) as string)
-const changeTracking = useChangeTrackingEmail(messageGroupIdRef)
-
-// Watch for data changes to process messages
-watch(
-  messageGroup,
-  (newValue) => {
-    if (!newValue?.messages) return
-
-    // Store original messageGroup metadata
-    originalMessageGroupName.value = newValue.name
-    originalMessageGroupCategory.value = newValue.category
-
-    for (const message of newValue.messages) {
-      if (message.render_type === 'email_v1') {
-        // Convert MessageFromDb to EmailMessage (remove DB timestamps)
-        const { created_at, updated_at, ...emailMessage } = message
-        messages.value[message.language_id] = emailMessage as EmailMessage
-      }
-    }
-
-    // Record original states for change tracking
-    for (const [langId, message] of Object.entries(messages.value)) {
-      changeTracking.recordOriginalState(langId, message)
-    }
-
-    const resolved = resolveDefaultLanguage(messages.value, mainLanguage.value)
-    if (resolved && resolved !== mainLanguage.value) {
-      language.value = resolved
-      targetLanguage.value = resolved
-    }
-
-    // Load current language into store
-    const currentMessage = messages.value[language.value]
-    if (currentMessage) {
-      emailEditorStore.loadFromData(currentMessage)
-    }
-
-    // Restore brand (null if no brand was saved)
-    emailEditorStore.initBrand(newValue.brand_id ?? null)
-
-    // Set initial target language for translations tab (first non-base language)
-    const languages = Object.keys(messages.value)
-    if (languages.length > 1) {
-      targetLanguage.value = languages.find((l) => l !== language.value) || language.value
-    }
-  },
-  { immediate: true },
-)
-
-// Watch language changes to load the correct message
-watch(language, (newLang) => {
-  const message = messages.value[newLang]
-  if (message) {
-    emailEditorStore.loadFromData(message)
-  }
-})
-
-// Sync all languages when switching to translations tab
-watch(activeTab, (newTab) => {
-  if (newTab === 'translations') {
-    const baseMessage = messages.value[language.value]
-    if (!baseMessage || baseMessage.render_type !== 'email_v1') return
-
-    for (const [langId, message] of Object.entries(messages.value)) {
-      if (langId !== language.value && message.render_type === 'email_v1') {
-        message.body.blocks = syncLayoutFromBase(baseMessage.body.blocks, message.body.blocks)
-        message.body.settings = { ...baseMessage.body.settings }
-      }
-    }
-  }
-})
-
-// Sync store changes back to messages
-watch(
-  () => emailEditorStore.blocks,
-  () => {
-    const currentMessage = messages.value[language.value]
-    if (currentMessage) {
-      const editorData = emailEditorStore.toJSON()
-      currentMessage.body.blocks = editorData.blocks
-      currentMessage.body.settings = editorData.settings
-    }
-  },
-  { deep: true },
-)
-
-// Cleanup on unmount
-onUnmounted(() => {
-  emailEditorStore.resetEditor()
-})
-
-const { formState, draftSchema, validationErrors, validateDraft, validateFull, clearErrors } =
-  useTemplateFormValidation({
-    type: 'email',
-    name: computed(() => messageGroup.value?.name ?? ''),
-    category: computed(() => messageGroup.value?.category ?? 'marketing'),
-    messages,
-  })
-
-const { saving, updateTemplate } = useTemplateOperations({
-  onSuccess: () => {
-    saved.value = true
-    goBackOrFallback()
-  },
-})
-
-const saved = ref(false)
-
-const hasAnyChanges = computed(() => {
-  // Check if message group name or category changed
-  if (messageGroup.value) {
-    const nameChanged = messageGroup.value.name !== originalMessageGroupName.value
-    const categoryChanged = messageGroup.value.category !== originalMessageGroupCategory.value
-    if (nameChanged || categoryChanged) return true
-  }
-
-  // For now, always return true if messages exist (simplified change tracking)
-  // TODO: Implement proper change tracking for email messages
-  return Object.keys(messages.value).length > 0
-})
-
-useExitConfirmation(computed(() => hasAnyChanges.value && !saved.value))
-
-// Get languages for incomplete translations check
-const { data: languages } = useLanguagesQuery()
-
-// Check for incomplete translations
-const { incompleteLanguages, hasIncompleteTranslations } = useIncompleteTranslationsEmail({
-  messages,
-  languages,
-})
-
-// Dialog state and pending action
-const showIncompleteDialog = ref(false)
-const pendingAction = ref<'save_draft' | 'save_message' | null>(null)
-
-// Auto-translate composable
-const { translateMessage, isTranslating } = useAutoTranslateEmail()
-
-// ── Tracking helpers ──
-function getEmailBaseProps() {
-  return {
-    name: messageGroup.value?.name ?? '',
-    subject: messages.value[language.value]?.body?.subject ?? '',
-  }
-}
-
-function getEmailDraftProps() {
-  return {
-    ...getEmailBaseProps(),
-    languages: Object.keys(messages.value),
-    widgets: emailEditorStore.blocks.map((b) => b.type),
-    is_internal: messageGroup.value?.visibility === 'internal',
-  }
-}
-
-watch(activeTab, (tab) => {
-  trackEvent('email_edit.change_tab', { ...getEmailBaseProps(), tab })
-})
-
-function onAddLanguage(lang: string) {
-  trackEvent('email_edit.add_language', { ...getEmailBaseProps(), language: lang })
-}
-
-function onRemoveLanguage(lang: string) {
-  trackEvent('email_edit.remove_language', {
-    ...getEmailBaseProps(),
-    language: lang,
-  })
-}
-
-function onAutoTranslateTracked(lang: string) {
-  trackEvent('email_edit.auto_translate', {
-    ...getEmailBaseProps(),
-    language: lang,
-  })
-}
-
-function onPreview(lang: string) {
-  trackEvent('email_edit.preview', { ...getEmailBaseProps(), language: lang })
-}
-
-function onFiltersChanged(payload: {
-  language: string
-  search_term: string
-  show_only_missing: boolean
-  show_only_changes: boolean
-}) {
-  trackEvent('email_edit.translations_filters', { ...getEmailBaseProps(), ...payload })
-}
-
-function onBlockAdded(payload: { type: string; adding_mode: string }) {
-  trackEvent('email_edit.add_widget', {
-    ...getEmailBaseProps(),
-    widget_type: payload.type,
-    adding_mode: payload.adding_mode,
-  })
-}
-
-function onBlockDuplicated(payload: { type: string }) {
-  trackEvent('email_edit.duplicate_widget', {
-    ...getEmailBaseProps(),
-    widget_type: payload.type,
-  })
-}
-
-function onBlockDeleted(payload: { type: string }) {
-  trackEvent('email_edit.remove_widget', {
-    ...getEmailBaseProps(),
-    widget_type: payload.type,
-  })
-}
-
-function onBlockSorted(payload: {
-  type: string
-  before_sort_position: number
-  new_position: number
-}) {
-  trackEvent('email_edit.sort_widget', {
-    ...getEmailBaseProps(),
-    widget_type: payload.type,
-    before_sort_position: payload.before_sort_position,
-    new_position: payload.new_position,
-  })
-}
-
-function onWidgetTabChanged(tab: string) {
-  trackEvent('email_edit.change_widget_tab', { ...getEmailBaseProps(), tab })
-}
-
-function onTestSent(payload: { to_recipients: number }, lang?: string) {
-  trackEvent('email_edit.send_test', {
-    ...getEmailBaseProps(),
-    widgets: emailEditorStore.blocks.map((b) => b.type),
-    to_recipients: payload.to_recipients,
-    language: lang ?? language.value,
-  })
-}
-
-// Sync all languages from base before save
-function syncAllLanguagesBeforeSave() {
-  const baseMessage = messages.value[language.value]
-  if (!baseMessage || baseMessage.render_type !== 'email_v1') return
-
-  for (const [langId, message] of Object.entries(messages.value)) {
-    if (langId !== language.value && message.render_type === 'email_v1') {
-      message.body.blocks = syncLayoutFromBase(baseMessage.body.blocks, message.body.blocks)
-      message.body.settings = { ...baseMessage.body.settings }
-    }
-  }
-}
-
-async function saveAsDraft() {
-  if (!messageGroup.value) return
-  trackEvent('email_edit.save_draft', getEmailDraftProps())
-
-  syncAllLanguagesBeforeSave()
-
-  const templateData = {
-    messageGroup: {
-      name: messageGroup.value.name,
-      category: messageGroup.value.category,
-      brand_id: emailEditorStore.brandId,
-    },
-    messages: messages.value,
-  }
-  await updateTemplate(messageGroup.value.id.toString(), templateData, 'draft')
-  notifyParent('TEMPLATE_SAVED_DRAFT', { id: messageGroup.value.id, name: messageGroup.value.name })
-}
-
-async function saveTemplate() {
-  if (!messageGroup.value) return
-  trackEvent('email_edit.save', getEmailDraftProps())
-
-  syncAllLanguagesBeforeSave()
-
-  const templateData = {
-    messageGroup: {
-      name: messageGroup.value.name,
-      category: messageGroup.value.category,
-      brand_id: emailEditorStore.brandId,
-    },
-    messages: messages.value,
-  }
-  await updateTemplate(messageGroup.value.id.toString(), templateData, 'approved')
-  notifyParent('TEMPLATE_SAVED', {
-    id: messageGroup.value.id,
-    name: messageGroup.value.name,
-    status: 'approved',
-  })
-}
-
-// Wrapper functions to validate then check for incomplete translations
-async function handleSaveAsDraft() {
-  if (!(await validateDraft())) return
-  if (hasIncompleteTranslations.value) {
-    pendingAction.value = 'save_draft'
-    showIncompleteDialog.value = true
-  } else {
-    saveAsDraft()
-  }
-}
-
-async function handleSaveTemplate() {
-  if (!(await validateFull())) return
-  if (hasIncompleteTranslations.value) {
-    pendingAction.value = 'save_message'
-    showIncompleteDialog.value = true
-  } else {
-    saveTemplate()
-  }
-}
-
-// Proceed with save without translating
-function proceedWithSave() {
-  if (pendingAction.value === 'save_draft') {
-    saveAsDraft()
-  } else if (pendingAction.value === 'save_message') {
-    saveTemplate()
-  }
-  pendingAction.value = null
-}
-
-// Go to translations tab
-function goToTranslations() {
-  activeTab.value = 'translations'
-  pendingAction.value = null
-}
-
-// Translate automatically and save
-async function translateAndSave() {
-  if (!incompleteLanguages.value.length) {
-    proceedWithSave()
-    return
-  }
-
-  const baseMessage = messages.value[language.value]
-  if (!baseMessage) {
-    proceedWithSave()
-    return
-  }
-
-  // Translate all incomplete languages
-  for (const { language: lang } of incompleteLanguages.value) {
-    const targetMessage = messages.value[lang.id]
-    if (!targetMessage) continue
-
-    await translateMessage(
-      baseMessage as EmailMessage,
-      targetMessage as EmailMessage,
-      language.value,
-      lang.id,
-    )
-  }
-
-  // After translation, proceed with save
-  proceedWithSave()
-}
-
-watch(
-  () => messages.value[mainLanguage.value],
-  () => {
-    const resolved = resolveDefaultLanguage(messages.value, mainLanguage.value)
-    if (resolved && resolved !== mainLanguage.value) {
-      language.value = resolved
-      targetLanguage.value = resolved
-    }
-  },
-)
+const composerRef = useTemplateRef('composerRef')
+const store = useEmailComposerStore()
 </script>
 
 <template>
@@ -425,169 +23,42 @@ watch(
         value: 'translations',
       },
     ]"
-    :active-tab="activeTab"
+    :active-tab="store.activeTab"
     :test-id="templateEmailEditTestIds.navbar"
-    @tab-change="activeTab = $event"
+    @tab-change="store.activeTab = $event as 'content' | 'translations'"
   >
     <template #actions>
       <UButton
-        @click="
-          () => {
-            notifyParent('TEMPLATE_CANCELLED', { id: messageGroup?.id })
-            goBackOrFallback()
-          }
-        "
+        @click="composerRef?.handleCancel()"
         :label="$t('common.actions.cancel')"
         color="primary"
         variant="ghost"
-        :loading="saving || isTranslating"
+        :loading="composerRef?.saving || composerRef?.isTranslating"
         :data-testid="templateEmailEditTestIds.cancelButton"
       />
       <UButton
-        @click="handleSaveAsDraft"
+        @click="composerRef?.handleSaveAsDraft()"
         :label="$t('pages.email.edit_message_group.save_as_draft')"
         color="primary"
         variant="outline"
-        :loading="saving || isTranslating"
+        :loading="composerRef?.saving || composerRef?.isTranslating"
         :data-testid="templateEmailEditTestIds.saveDraftButton"
       />
       <UButton
-        @click="handleSaveTemplate"
+        @click="composerRef?.handleSaveTemplate()"
         :label="$t('pages.email.edit_message_group.save_message')"
         color="primary"
-        :loading="saving || isTranslating"
+        :loading="composerRef?.saving || composerRef?.isTranslating"
         :data-testid="templateEmailEditTestIds.saveTemplateButton"
       />
     </template>
 
-    <div v-if="validationErrors.length">
-      <UAlert
-        color="error"
-        variant="subtle"
-        icon="i-lucide-alert-triangle"
-        :title="$t('editor.validation.error.title')"
-        :close="true"
-        @update:open="clearErrors()"
-        :data-testid="templateEmailEditTestIds.validationAlert"
-      >
-        <template #description>
-          <ul class="list-disc pl-4 space-y-1">
-            <li v-for="err in validationErrors" :key="err">
-              {{ err }}
-            </li>
-          </ul>
-        </template>
-      </UAlert>
-    </div>
-
-    <UForm
-      ref="templateForm"
-      :schema="draftSchema"
-      :state="formState"
-      :validate-on="[]"
-      class="flex-1 relative min-h-0 flex flex-col"
+    <ComposerEmailComposer
+      ref="composerRef"
+      mode="edit"
+      :message-group-id="route.params.id as string"
     >
-      <UCard
-        v-if="activeTab === 'content' && messageGroup && messages[language]"
-        :ui="{
-          root: 'flex flex-col flex-1 min-h-0',
-          body: 'flex-1 overflow-hidden sm:px-0 px-0 py-0 sm:py-0 min-h-0',
-          header: 'sm:px-4 px-4 py-4 sm:py-4',
-        }"
-        :data-testid="templateEmailEditTestIds.contentCard"
-      >
-        <template #header>
-          <div class="grid grid-cols-3 gap-2">
-            <UFieldGroup>
-              <UBadge variant="outline" color="neutral" size="lg">{{
-                $t('pages.email.edit_message_group.name')
-              }}</UBadge>
-              <UInput
-                v-model="messageGroup.name"
-                :placeholder="$t('pages.email.edit_message_group.name_placeholder')"
-                :data-testid="templateEmailEditTestIds.nameInput"
-              />
-            </UFieldGroup>
-
-            <UFieldGroup v-if="messages[language]">
-              <UBadge variant="outline" color="neutral" size="lg">{{
-                $t('pages.email.edit_message_group.subject')
-              }}</UBadge>
-              <UInput
-                v-model="messages[language]!.body.subject"
-                :placeholder="$t('pages.email.edit_message_group.subject_placeholder')"
-                :data-testid="templateEmailEditTestIds.subjectInput"
-              />
-            </UFieldGroup>
-          </div>
-        </template>
-
-        <template v-if="messages[language]" :key="language">
-          <div class="flex flex-col h-full overflow-hidden">
-            <div class="flex-1 overflow-hidden">
-              <EmailEditor
-                v-if="messages[language]"
-                :key="language"
-                :message="messages[language] as PostEntity<EmailMessage>"
-                @block-added="onBlockAdded"
-                @block-deleted="onBlockDeleted"
-                @block-duplicated="onBlockDuplicated"
-                @block-sorted="onBlockSorted"
-                @widget-tab-changed="onWidgetTabChanged"
-                @test-sent="onTestSent"
-              />
-            </div>
-          </div>
-        </template>
-      </UCard>
-
-      <UCard
-        v-if="activeTab === 'translations' && messageGroup && messages[language]"
-        :ui="{
-          root: 'flex flex-col h-full',
-          body: 'flex-1 overflow-hidden sm:px-0 px-0 py-0 sm:py-0',
-          header: 'sm:px-4 px-4 py-4 sm:py-4',
-        }"
-        :data-testid="templateEmailEditTestIds.translationsCard"
-      >
-        <div
-          class="grid grid-cols-[auto_1fr] divide-x divide-muted overflow-auto max-h-full h-full"
-        >
-          <div class="overflow-y-auto">
-            <LanguageList
-              v-model:messages="messages"
-              v-model:language="targetLanguage"
-              render-type="email_v1"
-              :main-language-id="language"
-              :message-group-id="messageGroup.id"
-              @add-language="onAddLanguage"
-              @remove-language="onRemoveLanguage"
-            />
-          </div>
-          <div class="overflow-y-auto" v-if="messages[language] && messages[targetLanguage]">
-            <TranslationEditor
-              :base-message="messages[language]!"
-              v-model="messages[targetLanguage]!"
-              :messages="messages"
-              :current-language="targetLanguage"
-              :base-language="language"
-              :message-group-id="messageGroup.id"
-              :key="targetLanguage"
-              @auto-translate-tracked="onAutoTranslateTracked"
-              @preview="onPreview"
-              @filters-changed="onFiltersChanged"
-            />
-          </div>
-        </div>
-      </UCard>
-    </UForm>
-
-    <IncompleteTranslationsDialog
-      v-model="showIncompleteDialog"
-      :incomplete-languages="incompleteLanguages"
-      @save-without-translating="proceedWithSave"
-      @translate-and-save="translateAndSave"
-      @go-to-translations="goToTranslations"
-    />
+      <template #actions></template>
+    </ComposerEmailComposer>
   </LayoutBasePage>
 </template>