@dev.smartpricing/message-composer-layer 1.0.12 → 1.0.14

package/app/pages/template/email/create.vue

@@ -1,377 +1,12 @@
 <script setup lang="ts">
 definePageMeta({
+  name: 'email-message-create',
   middleware: ['channel-guard'],
+  channel: 'email',
 })
 
-import EmailEditor from '@/components/Email/Editor/Index.vue'
-import TranslationEditor from '@/components/Email/TranslationEditor.vue'
-import LanguageList from '@/components/Common/LanguageList.vue'
-import IncompleteTranslationsDialog from '@/components/Common/IncompleteTranslationsDialog.vue'
-import { computed, ref, watch, onMounted, onUnmounted } from 'vue'
-import {
-  type MessageGroup,
-  type MessageGroupCategory,
-  type PostEntity,
-  type EmailMessage,
-} from '@dev.smartpricing/message-composer-utils/types'
-import {
-  getEmailEmpty,
-  duplicateBlocksForNewLanguage,
-  syncLayoutFromBase,
-} from '@dev.smartpricing/message-composer-utils/utils'
-import { useAppContextStore } from '@/stores/appContext'
-import { useLanguagesQuery } from '~/queries'
-
-const { trackEvent } = useTracking()
-const { mainLanguage } = storeToRefs(useAppContextStore())
-
-const adminStore = useAdminStore()
-
-const name = ref('')
-const category = ref<MessageGroupCategory>('marketing')
-const isInternal = ref(false)
-const language = ref(mainLanguage.value)
-const targetLanguage = ref(mainLanguage.value)
-const activeTab = ref<'content' | 'translations'>('content')
-const baseLanguage = ref(mainLanguage.value)
-const { goBackOrFallback } = useGoBack()
-const emailEditorStore = useEmailEditorStore()
-
-const { saving, createTemplate } = useTemplateOperations({
-  onSuccess: () => {
-    created.value = true
-    goBackOrFallback()
-  },
-})
-
-const messageGroup = computed(() => {
-  return {
-    user_id: '',
-    name: name.value,
-    category: category.value,
-    visibility: isInternal.value ? 'internal' : 'public',
-    brand_id: emailEditorStore.brandId,
-  } satisfies PostEntity<MessageGroup>
-})
-
-const messages = ref<Record<string, PostEntity<EmailMessage>>>({
-  [mainLanguage.value]: getEmailEmpty(mainLanguage.value),
-})
-
-const { formState, draftSchema, validationErrors, validateDraft, validateFull, clearErrors } =
-  useTemplateFormValidation({
-    type: 'email',
-    name,
-    category,
-    messages,
-  })
-
-// Initialize store with empty email on mount
-onMounted(() => {
-  const currentMessage = messages.value[language.value]
-  if (currentMessage) {
-    emailEditorStore.loadFromData(currentMessage)
-  }
-})
-
-// Set oldest brand as default
-emailEditorStore.initBrand()
-
-// Watch language changes to load the correct message
-watch(language, (newLang) => {
-  if (!messages.value[newLang]) {
-    // Create new language message by duplicating blocks from base language
-    const baseMessage = messages.value[baseLanguage.value]
-    if (baseMessage && baseMessage.body.blocks.length > 0) {
-      const newMessage = getEmailEmpty(newLang)
-      newMessage.body.blocks = duplicateBlocksForNewLanguage(baseMessage.body.blocks)
-      newMessage.body.settings = { ...baseMessage.body.settings }
-      messages.value[newLang] = newMessage
-    } else {
-      messages.value[newLang] = getEmailEmpty(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 }
-      }
-    }
-  }
-})
-
-// Set initial target language when languages are added
-watch(
-  () => Object.keys(messages.value).length,
-  () => {
-    const languages = Object.keys(messages.value)
-    if (languages.length > 1 && targetLanguage.value === language.value) {
-      targetLanguage.value = languages.find((l) => l !== language.value) || language.value
-    }
-  },
-)
-
-// 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 },
-)
-
-const hasAnyChanges = computed(() => {
-  // For new templates, consider it changed if name or any content exists
-  return name.value.trim() !== '' || emailEditorStore.hasBlocks
-})
-
-const created = ref(false)
-
-useExitConfirmation(computed(() => hasAnyChanges.value && !created.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()
-
-// Cleanup on unmount
-onUnmounted(() => {
-  emailEditorStore.resetEditor()
-})
-
-// ── Tracking helpers ──
-function getEmailBaseProps() {
-  return { name: name.value, 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: isInternal.value,
-  }
-}
-
-watch(activeTab, (tab) => {
-  trackEvent('email_create.change_tab', { ...getEmailBaseProps(), tab })
-})
-
-function onAddLanguage(lang: string) {
-  trackEvent('email_create.add_language', { ...getEmailBaseProps(), language: lang })
-}
-
-function onRemoveLanguage(lang: string) {
-  trackEvent('email_create.remove_language', {
-    ...getEmailBaseProps(),
-    language: lang,
-  })
-}
-
-function onAutoTranslateTracked(lang: string) {
-  trackEvent('email_create.auto_translate', {
-    ...getEmailBaseProps(),
-    language: lang,
-  })
-}
-
-function onPreview(lang: string) {
-  trackEvent('email_create.preview', { ...getEmailBaseProps(), language: lang })
-}
-
-function onFiltersChanged(payload: {
-  language: string
-  search_term: string
-  show_only_missing: boolean
-  show_only_changes: boolean
-}) {
-  trackEvent('email_create.translations_filters', { ...getEmailBaseProps(), ...payload })
-}
-
-function onBlockAdded(payload: { type: string; adding_mode: string }) {
-  trackEvent('email_create.add_widget', {
-    ...getEmailBaseProps(),
-    widget_type: payload.type,
-    adding_mode: payload.adding_mode,
-  })
-}
-
-function onBlockDuplicated(payload: { type: string }) {
-  trackEvent('email_create.duplicate_widget', {
-    ...getEmailBaseProps(),
-    widget_type: payload.type,
-  })
-}
-
-function onBlockDeleted(payload: { type: string }) {
-  trackEvent('email_create.remove_widget', {
-    ...getEmailBaseProps(),
-    widget_type: payload.type,
-  })
-}
-
-function onBlockSorted(payload: {
-  type: string
-  before_sort_position: number
-  new_position: number
-}) {
-  trackEvent('email_create.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_create.change_widget_tab', { ...getEmailBaseProps(), tab })
-}
-
-function onTestSent(payload: { to_recipients: number }, lang?: string) {
-  trackEvent('email_create.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() {
-  trackEvent('email_create.save_draft', getEmailDraftProps())
-  syncAllLanguagesBeforeSave()
-
-  const templateData = {
-    messageGroup: messageGroup.value,
-    messages: messages.value,
-  }
-  const result = await createTemplate(templateData, 'draft')
-  if (result) {
-    notifyParent('TEMPLATE_SAVED_DRAFT', { id: result.id, name: result.name })
-  }
-}
-
-async function saveTemplate() {
-  trackEvent('email_create.save', getEmailDraftProps())
-  syncAllLanguagesBeforeSave()
-
-  const templateData = {
-    messageGroup: messageGroup.value,
-    messages: messages.value,
-  }
-  const result = await createTemplate(templateData, 'approved')
-  if (result) {
-    notifyParent('TEMPLATE_SAVED', { id: result.id, name: result.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[baseLanguage.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,
-      baseLanguage.value,
-      lang.id,
-    )
-  }
-
-  // After translation, proceed with save
-  proceedWithSave()
-}
+const composerRef = ref<InstanceType<typeof ComposerEmailComposer>>()
+const store = useEmailComposerStore()
 </script>
 
 <template>
@@ -387,172 +22,38 @@ async function translateAndSave() {
         value: 'translations',
       },
     ]"
-    :active-tab="activeTab"
+    :active-tab="store.activeTab"
     :test-id="templateEmailCreateTestIds.navbar"
-    @tab-change="activeTab = $event"
+    @tab-change="store.activeTab = $event as 'content' | 'translations'"
   >
     <template #actions>
       <UButton
-        @click="
-          () => {
-            notifyParent('TEMPLATE_CANCELLED')
-            goBackOrFallback()
-          }
-        "
+        @click="composerRef?.handleCancel()"
         :label="$t('common.actions.cancel')"
         color="primary"
         variant="ghost"
-        :loading="saving || isTranslating"
+        :loading="composerRef?.saving || composerRef?.isTranslating"
         :data-testid="templateEmailCreateTestIds.cancelButton"
       />
       <UButton
-        @click="handleSaveAsDraft"
+        @click="composerRef?.handleSaveAsDraft()"
         :label="$t('pages.email.create_message_group.save_as_draft')"
         color="primary"
         variant="outline"
-        :loading="saving || isTranslating"
+        :loading="composerRef?.saving || composerRef?.isTranslating"
         :data-testid="templateEmailCreateTestIds.saveDraftButton"
       />
       <UButton
-        @click="handleSaveTemplate"
+        @click="composerRef?.handleSaveTemplate()"
         :label="$t('pages.email.create_message_group.save_message')"
         color="primary"
-        :loading="saving || isTranslating"
+        :loading="composerRef?.saving || composerRef?.isTranslating"
         :data-testid="templateEmailCreateTestIds.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="templateEmailCreateTestIds.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"
-    >
-      <UCard
-        v-if="activeTab === 'content'"
-        :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="templateEmailCreateTestIds.contentCard"
-      >
-        <template #header>
-          <div class="grid grid-cols-3 gap-2 items-center">
-            <UFieldGroup>
-              <UBadge variant="outline" color="neutral" size="lg">{{
-                $t('pages.email.create_message_group.name')
-              }}</UBadge>
-              <UInput
-                v-model="name"
-                :placeholder="$t('pages.email.create_message_group.name_placeholder')"
-                :data-testid="templateEmailCreateTestIds.nameInput"
-              />
-            </UFieldGroup>
-
-            <UFieldGroup v-if="messages[language]">
-              <UBadge variant="outline" color="neutral" size="lg">{{
-                $t('pages.email.create_message_group.subject')
-              }}</UBadge>
-              <UInput
-                v-model="messages[language]!.body.subject"
-                :placeholder="$t('pages.email.create_message_group.subject_placeholder')"
-                :data-testid="templateEmailCreateTestIds.subjectInput"
-              />
-            </UFieldGroup>
-            <USwitch
-              :label="$t('common.internal')"
-              v-if="adminStore.isAdminModeActive"
-              v-model="isInternal"
-              color="info"
-              :data-testid="templateEmailCreateTestIds.internalSwitch"
-            />
-          </div>
-        </template>
-
-        <div class="flex flex-col h-full overflow-hidden">
-          <template v-if="messages[language]" :key="language">
-            <div class="flex-1 overflow-hidden">
-              <EmailEditor
-                :message="messages[language]!"
-                @block-added="onBlockAdded"
-                @block-deleted="onBlockDeleted"
-                @block-duplicated="onBlockDuplicated"
-                @block-sorted="onBlockSorted"
-                @widget-tab-changed="onWidgetTabChanged"
-                @test-sent="onTestSent"
-              />
-            </div>
-          </template>
-        </div>
-      </UCard>
-
-      <UCard
-        v-if="activeTab === 'translations' && 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="templateEmailCreateTestIds.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"
-              @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"
-              :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"
-    />
+    <ComposerEmailComposer ref="composerRef" mode="create">
+      <template #actions></template>
+    </ComposerEmailComposer>
   </LayoutBasePage>
 </template>