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

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

@@ -1,277 +1,12 @@
 <script setup lang="ts">
 definePageMeta({
+  name: 'whatsapp-message-create',
   middleware: ['channel-guard'],
+  channel: 'whatsapp',
 })
 
-import WhatsappEditorSyncWrapper from '@/components/Whatsapp/Editor/SyncWrapper.vue'
-import WhatsappPreview from '@/components/Whatsapp/PreviewPanel.vue'
-import TranslationEditor from '@/components/Whatsapp/TranslationEditor.vue'
-
-import IncompleteTranslationsDialog from '@/components/Common/IncompleteTranslationsDialog.vue'
-
-import CategoryChanger from '@/components/Whatsapp/CategoryChanger.vue'
-import { computed, ref, watch } from 'vue'
-import {
-  type MessageGroup,
-  type MessageGroupCategory,
-  type PostEntity,
-  type WhatsappMessage,
-  type LanguageFromDb,
-} from '@dev.smartpricing/message-composer-utils/types'
-import { getWhatsappEmpty } from '@dev.smartpricing/message-composer-utils/utils'
-import LanguageList from '@/components/Common/LanguageList.vue'
-import { useMetaSubmissionStore } from '@/stores/metaSubmission'
-import { useLanguagesQuery } from '~/queries'
-import { useAppContextStore } from '@/stores/appContext'
-import type { WaHeaderType } from '~/types/tracking'
-
-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 { goBackOrFallback } = useGoBack()
-
-const activeTab = ref<'content' | 'translations'>('content')
-const baseLanguage = ref(mainLanguage.value)
-const targetLanguage = ref(mainLanguage.value)
-
-// Create temporary draft ID for change tracking
-const draftId = ref(`draft-${Date.now()}`)
-const changeTracking = useChangeTracking(draftId)
-
-// Store original messageGroup values (empty for new message group)
-const originalMessageGroupName = ref('')
-const originalMessageGroupCategory = ref<MessageGroupCategory>('marketing')
-
-const { saving, createTemplate } = useTemplateOperations({
-  onSuccess: () => {
-    created.value = true
-    changeTracking.clearAllChanges()
-    goBackOrFallback()
-  },
-})
-
-const { submitToMeta } = useMetaSubmissionStore()
-
-const messageGroup = computed(() => {
-  return {
-    name: name.value,
-    category: category.value,
-    visibility: isInternal.value ? 'internal' : 'public',
-  } satisfies PostEntity<MessageGroup>
-})
-const messages = ref<Record<string, PostEntity<WhatsappMessage>>>({
-  [mainLanguage.value]: getWhatsappEmpty(mainLanguage.value),
-})
-
-const { formState, draftSchema, validationErrors, validateDraft, validateFull, clearErrors } =
-  useTemplateFormValidation({
-    type: 'whatsapp',
-    name,
-    category,
-    messages,
-  })
-
-// Record original state for initial mainLanguage
-if (messages.value[mainLanguage.value]) {
-  changeTracking.recordOriginalState(
-    mainLanguage.value,
-    messages.value[mainLanguage.value] as WhatsappMessage,
-  )
-}
-
-// Initialize WhatsApp message group behaviors composable
-const { ensureUnsubscribeButton } = useWhatsappTemplateBehaviors({
-  category,
-  messages: messages,
-})
-ensureUnsubscribeButton()
-
-const created = ref(false)
-
-const hasAnyChanges = computed(() => {
-  // Check if message group name or category changed
-  const nameChanged = name.value !== originalMessageGroupName.value
-  const categoryChanged = category.value !== originalMessageGroupCategory.value
-  if (nameChanged || categoryChanged) return true
-
-  // Check if any language has changes
-  for (const languageId in messages.value) {
-    const message = messages.value[languageId]
-    if (message && changeTracking.hasChanges(languageId, message as WhatsappMessage)) {
-      return true
-    }
-  }
-  return false
-})
-
-useExitConfirmation(computed(() => hasAnyChanges.value && !created.value))
-
-// ── Tracking helpers ──
-function getWaBaseProps() {
-  return { name: name.value, category: category.value }
-}
-
-function getWaDraftProps() {
-  const msg = messages.value[mainLanguage.value]
-  return {
-    ...getWaBaseProps(),
-    languages: Object.keys(messages.value),
-    header: (msg?.body?.header?.type ?? 'none') as WaHeaderType,
-    footer: !!msg?.body?.footer?.enabled,
-    buttons: msg?.body?.buttons?.buttons?.length ?? 0,
-    is_internal: isInternal.value,
-  }
-}
-
-watch(activeTab, (tab) => {
-  trackEvent('wa_create.change_tab', { ...getWaBaseProps(), tab })
-})
-
-function onAddLanguage(lang: string) {
-  trackEvent('wa_create.add_language', { ...getWaBaseProps(), language: lang })
-}
-
-function onRemoveLanguage(lang: string) {
-  trackEvent('wa_create.remove_language', {
-    ...getWaBaseProps(),
-    language: lang,
-  })
-}
-
-function onAutoTranslateTracked(lang: string) {
-  trackEvent('wa_create.auto_translate', {
-    ...getWaBaseProps(),
-    language: lang,
-  })
-}
-
-function onPreview(lang: string) {
-  trackEvent('wa_create.preview', { ...getWaBaseProps(), language: lang })
-}
-
-function onFiltersChanged(payload: {
-  language: string
-  search_term: string
-  show_only_missing: boolean
-  show_only_changes: boolean
-}) {
-  trackEvent('wa_create.translations_filters', { ...getWaBaseProps(), ...payload })
-}
-
-// Get languages for incomplete translations check
-const { data: languages } = useLanguagesQuery()
-
-// Check for incomplete translations
-const { incompleteLanguages, hasIncompleteTranslations } = useIncompleteTranslations({
-  messages,
-  languages,
-})
-
-// Dialog state and pending action
-const showIncompleteDialog = ref(false)
-const pendingAction = ref<'save_draft' | 'request_approval' | null>(null)
-
-// Auto-translate composable
-const { translateMessage, isTranslating } = useAutoTranslate()
-
-async function saveDraft() {
-  trackEvent('wa_create.save_draft', getWaDraftProps())
-  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 requestApproval() {
-  trackEvent('wa_create.request_approval', getWaDraftProps())
-  const templateData = {
-    messageGroup: messageGroup.value,
-    messages: messages.value,
-  }
-  const result = await createTemplate(templateData, 'draft')
-
-  if (result) {
-    await submitToMeta(result.id.toString())
-    notifyParent('TEMPLATE_APPROVAL_REQUESTED', { id: result.id, name: result.name })
-  }
-}
-
-// Wrapper functions to validate then check for incomplete translations
-async function handleSaveDraft() {
-  if (!(await validateDraft())) return
-  if (hasIncompleteTranslations.value) {
-    pendingAction.value = 'save_draft'
-    showIncompleteDialog.value = true
-  } else {
-    saveDraft()
-  }
-}
-
-async function handleRequestApproval() {
-  if (!(await validateFull())) return
-  if (hasIncompleteTranslations.value) {
-    pendingAction.value = 'request_approval'
-    showIncompleteDialog.value = true
-  } else {
-    requestApproval()
-  }
-}
-
-// Proceed with save without translating
-function proceedWithSave() {
-  if (pendingAction.value === 'save_draft') {
-    saveDraft()
-  } else if (pendingAction.value === 'request_approval') {
-    requestApproval()
-  }
-  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 WhatsappMessage,
-      targetMessage as WhatsappMessage,
-      baseLanguage.value,
-      lang.id,
-    )
-  }
-
-  // After translation, proceed with save
-  proceedWithSave()
-}
+const composerRef = ref<InstanceType<typeof ComposerWhatsappComposer>>()
+const store = useWhatsappComposerStore()
 </script>
 
 <template>
@@ -281,184 +16,38 @@ async function translateAndSave() {
       { label: $t('pages.whatsapp.tabs.content'), value: 'content' },
       { label: $t('pages.whatsapp.tabs.translations'), value: 'translations' },
     ]"
-    :active-tab="activeTab"
+    :active-tab="store.activeTab"
     :test-id="templateWhatsappCreateTestIds.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="templateWhatsappCreateTestIds.cancelButton"
       />
       <UButton
-        @click="handleSaveDraft()"
+        @click="composerRef?.handleSaveDraft()"
         :label="$t('pages.whatsapp.create_message_group.save_draft')"
         color="primary"
         variant="outline"
-        :loading="saving || isTranslating"
+        :loading="composerRef?.saving || composerRef?.isTranslating"
         :data-testid="templateWhatsappCreateTestIds.saveDraftButton"
       />
       <UButton
-        @click="handleRequestApproval()"
+        @click="composerRef?.handleRequestApproval()"
         :label="$t('pages.whatsapp.create_message_group.request_approval')"
         color="primary"
-        :loading="saving || isTranslating"
+        :loading="composerRef?.saving || composerRef?.isTranslating"
         :data-testid="templateWhatsappCreateTestIds.requestApprovalButton"
       />
     </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="templateWhatsappCreateTestIds.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',
-          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="templateWhatsappCreateTestIds.contentCard"
-      >
-        <template #header>
-          <div class="grid grid-cols-3 gap-2">
-            <UFieldGroup>
-              <UBadge variant="outline" color="neutral" size="lg">{{
-                $t('pages.whatsapp.create_message_group.name')
-              }}</UBadge>
-              <UInput
-                v-model="name"
-                :placeholder="$t('pages.whatsapp.create_message_group.name_placeholder')"
-                :data-testid="templateWhatsappCreateTestIds.nameInput"
-              />
-            </UFieldGroup>
-
-            <UFieldGroup>
-              <UBadge variant="outline" color="neutral" size="lg">{{
-                $t('pages.whatsapp.create_message_group.category')
-              }}</UBadge>
-              <CategoryChanger v-model:category="category" @changed="ensureUnsubscribeButton" />
-            </UFieldGroup>
-
-            <USwitch
-              v-model="isInternal"
-              :label="$t('common.internal')"
-              v-if="adminStore.isAdminModeActive"
-              color="info"
-              :data-testid="templateWhatsappCreateTestIds.internalSwitch"
-            />
-            <!-- <DocumentationPanel
-          :category="$t('documentation.whatsapp_category.category')"
-          :title="$t('documentation.whatsapp_category.title')"
-          :description="$t('documentation.whatsapp_category.description')"
-          :info="{
-            title: '',
-            text: $t('documentation.whatsapp_category.info'),
-          }"
-          :content="[
-            $t('documentation.whatsapp_category.content.marketing'),
-            $t('documentation.whatsapp_category.content.utility'),
-          ]"
-        /> -->
-          </div>
-        </template>
-
-        <div class="grid grid-cols-3 divide-x divide-muted overflow-auto max-h-full h-full">
-          <div class="col-span-2 overflow-y-auto pt-4 pb-4" v-if="messages[language]">
-            <h2 class="px-4 pb-4 label-lg">
-              {{ $t('pages.whatsapp.create_message_group.message_content') }}
-            </h2>
-            <WhatsappEditorSyncWrapper
-              v-model="messages[language]"
-              :messages="messages"
-              :main-language-id="language"
-              :key="language"
-            />
-          </div>
-          <div class="col-span-1 overflow-y-auto" v-if="messages[language]">
-            <WhatsappPreview :message="messages[language]" />
-          </div>
-        </div>
-      </UCard>
-
-      <UCard
-        v-if="activeTab === 'translations'"
-        :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="templateWhatsappCreateTestIds.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="whatsapp_v1"
-              :message-group-id="draftId"
-              @add-language="onAddLanguage"
-              @remove-language="onRemoveLanguage"
-              :main-language-id="baseLanguage"
-            />
-          </div>
-          <div class="overflow-y-auto" v-if="messages[baseLanguage] && messages[targetLanguage]">
-            <TranslationEditor
-              :base-message="messages[baseLanguage]"
-              v-model:target-message="messages[targetLanguage]"
-              :messages="messages"
-              :current-language="targetLanguage"
-              :base-language="baseLanguage"
-              :message-group-id="draftId"
-              @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"
-    />
+    <ComposerWhatsappComposer ref="composerRef" mode="create">
+      <template #actions></template>
+    </ComposerWhatsappComposer>
   </LayoutBasePage>
 </template>

package/app/stores/emailComposer.ts

@@ -0,0 +1,188 @@
+import { ref, computed } from 'vue'
+import type {
+  MessageGroupCategory,
+  EmailMessage,
+  PostEntity,
+  MessageGroupWithMessages,
+} from '@dev.smartpricing/message-composer-utils/types'
+import {
+  getEmailEmpty,
+  duplicateBlocksForNewLanguage,
+  syncLayoutFromBase,
+} from '@dev.smartpricing/message-composer-utils/utils'
+
+type ComposerMode = 'create' | 'edit'
+
+export const useEmailComposerStore = defineStore('emailComposer', () => {
+  // ── Core state ────────────────────────────────────────────────────
+  const mode = ref<ComposerMode>('create')
+  const messageGroupId = ref<string | null>(null)
+  const name = ref('')
+  const category = ref<MessageGroupCategory>('marketing')
+  const isInternal = ref(false)
+  const language = ref('en') // base language
+  const targetLanguage = ref('en')
+  const activeTab = ref<'content' | 'translations'>('content')
+  const messages = ref<Record<string, PostEntity<EmailMessage> | EmailMessage>>({})
+
+  // Edit-mode original values for change detection
+  const originalName = ref('')
+  const originalCategory = ref<MessageGroupCategory>('marketing')
+
+  // Loaded messageGroup data (edit mode)
+  const messageGroup = ref<MessageGroupWithMessages | null>(null)
+
+  // ── Computed ──────────────────────────────────────────────────────
+  const messageGroupData = computed(() => ({
+    user_id: '',
+    name: name.value,
+    category: category.value,
+    visibility: isInternal.value ? 'internal' : 'public',
+    brand_id: useEmailEditorStore().brandId,
+  }))
+
+  const messageGroupUpdateData = computed(() => ({
+    name: name.value,
+    category: category.value,
+    brand_id: useEmailEditorStore().brandId,
+  }))
+
+  const currentMessage = computed(
+    () => messages.value[language.value] as PostEntity<EmailMessage> | undefined,
+  )
+
+  const targetMessage = computed(
+    () => messages.value[targetLanguage.value] as PostEntity<EmailMessage> | undefined,
+  )
+
+  const languageIds = computed(() => Object.keys(messages.value))
+
+  // ── Init ──────────────────────────────────────────────────────────
+  function initCreate(mainLanguage: string) {
+    mode.value = 'create'
+    messageGroupId.value = null
+    name.value = ''
+    category.value = 'marketing'
+    isInternal.value = false
+    language.value = mainLanguage
+    targetLanguage.value = mainLanguage
+    activeTab.value = 'content'
+    messages.value = { [mainLanguage]: getEmailEmpty(mainLanguage) }
+    messageGroup.value = null
+    originalName.value = ''
+    originalCategory.value = 'marketing'
+  }
+
+  function initEdit(data: MessageGroupWithMessages, mainLanguage: string) {
+    mode.value = 'edit'
+    messageGroupId.value = data.id?.toString() ?? null
+    name.value = data.name
+    category.value = data.category
+    isInternal.value = data.visibility === 'internal'
+    activeTab.value = 'content'
+    messageGroup.value = data
+
+    // Store originals for change detection
+    originalName.value = data.name
+    originalCategory.value = data.category
+
+    // Populate messages
+    const msgs: Record<string, EmailMessage> = {}
+    for (const message of data.messages) {
+      if (message.render_type === 'email_v1') {
+        const { created_at, updated_at, ...emailMessage } = message
+        msgs[message.language_id] = emailMessage as EmailMessage
+      }
+    }
+    messages.value = msgs
+
+    // Resolve language
+    const resolved = resolveDefaultLanguage(msgs, mainLanguage)
+    language.value = resolved ?? mainLanguage
+    targetLanguage.value = language.value
+
+    // Set initial target language for translations tab
+    const langs = Object.keys(msgs)
+    if (langs.length > 1) {
+      targetLanguage.value = langs.find((l) => l !== language.value) ?? language.value
+    }
+  }
+
+  // ── Language management ───────────────────────────────────────────
+  function ensureLanguageMessage(langId: string) {
+    if (messages.value[langId]) return
+
+    const baseMessage = messages.value[language.value]
+    if (
+      baseMessage &&
+      baseMessage.render_type === 'email_v1' &&
+      baseMessage.body.blocks.length > 0
+    ) {
+      const newMessage = getEmailEmpty(langId)
+      newMessage.body.blocks = duplicateBlocksForNewLanguage(baseMessage.body.blocks)
+      newMessage.body.settings = { ...baseMessage.body.settings }
+      messages.value[langId] = newMessage
+    } else {
+      messages.value[langId] = getEmailEmpty(langId)
+    }
+  }
+
+  // ── Sync helpers ──────────────────────────────────────────────────
+  function syncLayoutToAllLanguages() {
+    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 }
+      }
+    }
+  }
+
+  // ── Reset ─────────────────────────────────────────────────────────
+  function $reset() {
+    mode.value = 'create'
+    messageGroupId.value = null
+    name.value = ''
+    category.value = 'marketing'
+    isInternal.value = false
+    language.value = 'en'
+    targetLanguage.value = 'en'
+    activeTab.value = 'content'
+    messages.value = {}
+    messageGroup.value = null
+    originalName.value = ''
+    originalCategory.value = 'marketing'
+  }
+
+  return {
+    // State
+    mode,
+    messageGroupId,
+    name,
+    category,
+    isInternal,
+    language,
+    targetLanguage,
+    activeTab,
+    messages,
+    messageGroup,
+    originalName,
+    originalCategory,
+
+    // Computed
+    messageGroupData,
+    messageGroupUpdateData,
+    currentMessage,
+    targetMessage,
+    languageIds,
+
+    // Actions
+    initCreate,
+    initEdit,
+    ensureLanguageMessage,
+    syncLayoutToAllLanguages,
+    $reset,
+  }
+})