@dev.smartpricing/message-composer-layer 1.0.1

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

@@ -0,0 +1,562 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: ['channel-guard'],
+})
+
+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()
+}
+</script>
+
+<template>
+  <SNavigationPage>
+    <template #header>
+      <SNavigationBarHeader
+        :title="$t('pages.email.create_message_group.title')"
+        :tabs="[
+          {
+            label: $t('pages.email.create_message_group.tab_content'),
+            value: 'content',
+          },
+          {
+            label: $t('pages.email.create_message_group.tab_translations'),
+            value: 'translations',
+          },
+        ]"
+        :active-tab="activeTab"
+        :data-testid="templateEmailCreateTestIds.navbar"
+        @tab-change="activeTab = $event"
+      >
+        <template #actions>
+          <UButton
+            @click="
+              () => {
+                notifyParent('TEMPLATE_CANCELLED')
+                goBackOrFallback()
+              }
+            "
+            :label="$t('common.actions.cancel')"
+            color="primary"
+            variant="ghost"
+            :loading="saving || isTranslating"
+            :data-testid="templateEmailCreateTestIds.cancelButton"
+          />
+          <UButton
+            @click="handleSaveAsDraft"
+            :label="$t('pages.email.create_message_group.save_as_draft')"
+            color="primary"
+            variant="outline"
+            :loading="saving || isTranslating"
+            :data-testid="templateEmailCreateTestIds.saveDraftButton"
+          />
+          <UButton
+            @click="handleSaveTemplate"
+            :label="$t('pages.email.create_message_group.save_message')"
+            color="primary"
+            :loading="saving || isTranslating"
+            :data-testid="templateEmailCreateTestIds.saveTemplateButton"
+          />
+        </template>
+      </SNavigationBarHeader>
+    </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"
+    />
+  </SNavigationPage>
+</template>