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

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

@@ -2,362 +2,12 @@
 definePageMeta({
   name: 'whatsapp-message-edit',
   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 LanguageList from '@/components/Common/LanguageList.vue'
-import IncompleteTranslationsDialog from '@/components/Common/IncompleteTranslationsDialog.vue'
-
-import CategoryChanger from '@/components/Whatsapp/CategoryChanger.vue'
-import { computed, ref } from 'vue'
-import {
-  type MessageFromDb,
-  type MessageGroupWithMessages,
-  type MessageGroupCategory,
-  type WhatsappMessage,
-  type LanguageFromDb,
-  type PostEntity,
-} from '@dev.smartpricing/message-composer-utils/types'
-import { useRoute } from 'vue-router'
-import { useMessageGroupQuery, useLanguagesQuery } from '~/queries'
-import { useMetaSubmissionStore } from '@/stores/metaSubmission'
-import { useAppContextStore } from '@/stores/appContext'
-import type { WaHeaderType } from '~/types/tracking'
-
-const { trackEvent } = useTracking()
 const route = useRoute()
-
-const { mainLanguage } = storeToRefs(useAppContextStore())
-
-const language = ref(mainLanguage.value)
-const { goBackOrFallback } = useGoBack()
-
-const activeTab = ref<'content' | 'translations'>('content')
-const targetLanguage = ref(mainLanguage.value)
-
-const messages = ref<Record<string, WhatsappMessage>>({})
-const { data: messageGroupData, isPending: isFetching } = useMessageGroupQuery(
-  route.params.id as string,
-)
-
-// Create a local editable copy to avoid mutating cache
-const messageGroup = ref<MessageGroupWithMessages | null>(null)
-
-// Initialize change tracking with messageGroupId
-const messageGroupId = computed(() => route.params.id as string)
-const changeTracking = useChangeTracking(messageGroupId)
-
-// Store original messageGroup values
-const originalMessageGroupName = ref<string>('')
-const originalMessageGroupCategory = ref<MessageGroupCategory>('marketing')
-
-// Watch for data changes to process messages
-watch(
-  messageGroupData,
-  (newValue) => {
-    if (!newValue?.messages) return
-
-    // Deep clone to avoid mutating cache
-    messageGroup.value = structuredClone(newValue)
-
-    // Store original messageGroup metadata
-    originalMessageGroupName.value = newValue.name
-    originalMessageGroupCategory.value = newValue.category
-
-    for (const message of newValue.messages) {
-      if (message.render_type === 'whatsapp_v1') {
-        // Clone message to avoid cache mutation
-        messages.value[message.language_id] = structuredClone(message) as WhatsappMessage
-        // Record original state for change tracking
-        changeTracking.recordOriginalState(message.language_id, message as WhatsappMessage)
-      }
-    }
-    const resolved = resolveDefaultLanguage(messages.value, mainLanguage.value)
-    if (resolved && resolved !== mainLanguage.value) {
-      language.value = resolved
-      targetLanguage.value = resolved
-    }
-  },
-  { immediate: true },
-)
-
-const { formState, draftSchema, validationErrors, validateDraft, validateFull, clearErrors } =
-  useTemplateFormValidation({
-    type: 'whatsapp',
-    name: computed(() => messageGroup.value?.name ?? ''),
-    category: computed(() => messageGroup.value?.category ?? 'marketing'),
-    messages,
-  })
-
-const { saving, createTemplate, updateTemplate } = useTemplateOperations({
-  onSuccess: () => {
-    saved.value = true
-    changeTracking.clearAllChanges()
-  },
-})
-
-const { submitToMeta } = useMetaSubmissionStore()
-
-// Create computed property for category to watch changes
-const currentCategory = computed(() => messageGroup.value?.category)
-
-// Initialize WhatsApp template behaviors composable
-const { ensureUnsubscribeButton } = useWhatsappTemplateBehaviors({
-  category: currentCategory,
-  messages,
-})
-
-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
-  }
-
-  // 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 && !saved.value))
-
-// ── Tracking helpers ──
-function getWaBaseProps() {
-  return { name: messageGroup.value?.name ?? '', category: messageGroup.value?.category ?? '' }
-}
-
-function getWaDraftProps() {
-  const resolved = resolveDefaultLanguage(messages.value, mainLanguage.value)
-  const msg = resolved ? messages.value[resolved] : undefined
-  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: messageGroup.value?.visibility === 'internal',
-  }
-}
-
-watch(activeTab, (tab) => {
-  trackEvent('wa_edit.change_tab', { ...getWaBaseProps(), tab })
-})
-
-function onAddLanguage(lang: string) {
-  trackEvent('wa_edit.add_language', { ...getWaBaseProps(), language: lang })
-}
-
-function onRemoveLanguage(lang: string) {
-  trackEvent('wa_edit.remove_language', {
-    ...getWaBaseProps(),
-    language: lang,
-  })
-}
-
-function onAutoTranslateTracked(lang: string) {
-  trackEvent('wa_edit.auto_translate', {
-    ...getWaBaseProps(),
-    language: lang,
-  })
-}
-
-function onPreview(lang: string) {
-  trackEvent('wa_edit.preview', { ...getWaBaseProps(), language: lang })
-}
-
-function onFiltersChanged(payload: {
-  language: string
-  search_term: string
-  show_only_missing: boolean
-  show_only_changes: boolean
-}) {
-  trackEvent('wa_edit.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' | 'save_as_new' | 'request_approval' | null>(null)
-
-// Auto-translate composable
-const { translateMessage, isTranslating } = useAutoTranslate()
-
-async function editTemplate() {
-  if (!messageGroup.value) return
-
-  const templateData = {
-    messageGroup: {
-      name: messageGroup.value.name,
-      category: messageGroup.value.category,
-    },
-    messages: messages.value,
-  }
-  await updateTemplate(route.params.id as string, templateData)
-  notifyParent('TEMPLATE_SAVED_DRAFT', { id: messageGroup.value.id, name: messageGroup.value.name })
-  goBackOrFallback()
-}
-
-async function saveAsNew() {
-  if (!messageGroup.value) return
-  trackEvent('wa_edit.save_as_new', getWaDraftProps())
-
-  const cleanedMessages: Record<string, PostEntity<WhatsappMessage>> = {}
-  for (const [languageId, message] of Object.entries(messages.value)) {
-    const { id, message_group_id, created_at, updated_at, ...templateMessage } = message
-    cleanedMessages[languageId] = {
-      ...templateMessage,
-      message_group_id: '',
-      metadata: {},
-    } as PostEntity<WhatsappMessage>
-  }
-
-  const templateData = {
-    messageGroup: {
-      name: messageGroup.value.name,
-      category: messageGroup.value.category,
-    },
-    messages: cleanedMessages,
-  }
-  const result = await createTemplate(templateData, 'draft')
-  if (result) {
-    notifyParent('TEMPLATE_SAVED_AS_NEW', { id: result.id, name: result.name })
-    navigateTo(`/template/whatsapp/${result.id}`, { replace: true })
-  }
-}
-
-async function requestApproval() {
-  if (!messageGroup.value) return
-  trackEvent('wa_edit.request_approval', getWaDraftProps())
-
-  const templateData = {
-    messageGroup: {
-      name: messageGroup.value.name,
-      category: messageGroup.value.category,
-    },
-    messages: messages.value,
-  }
-  await updateTemplate(route.params.id as string, templateData)
-  await submitToMeta(route.params.id as string)
-  notifyParent('TEMPLATE_APPROVAL_REQUESTED', {
-    id: messageGroup.value.id,
-    name: messageGroup.value.name,
-  })
-  goBackOrFallback()
-}
-
-// 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 {
-    editTemplate()
-  }
-}
-
-async function handleSaveAsNew() {
-  if (!(await validateDraft())) return
-  if (hasIncompleteTranslations.value) {
-    pendingAction.value = 'save_as_new'
-    showIncompleteDialog.value = true
-  } else {
-    saveAsNew()
-  }
-}
-
-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') {
-    editTemplate()
-  } else if (pendingAction.value === 'save_as_new') {
-    saveAsNew()
-  } 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[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 WhatsappMessage,
-      targetMessage as WhatsappMessage,
-      language.value,
-      lang.id,
-    )
-  }
-
-  // After translation, proceed with save
-  proceedWithSave()
-}
-const isPending = computed(() =>
-  messageGroup.value?.messages?.some((message: MessageFromDb) => message.status === 'pending'),
-)
-const isApproved = computed(() =>
-  messageGroup.value?.messages?.some((message: MessageFromDb) => message.status === 'approved'),
-)
-
-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 = ref<InstanceType<typeof ComposerWhatsappComposer>>()
+const store = useWhatsappComposerStore()
 </script>
 
 <template>
@@ -367,192 +17,55 @@ watch(
       { 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="templateWhatsappEditTestIds.navbar"
-    @tab-change="activeTab = $event"
+    @tab-change="store.activeTab = $event as 'content' | 'translations'"
   >
     <template #actions>
-      <template v-if="messageGroup">
+      <template v-if="store.messageGroup">
         <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="templateWhatsappEditTestIds.cancelButton"
         />
         <UButton
-          v-if="isPending || isApproved"
-          @click="handleSaveAsNew()"
+          v-if="store.isPending || store.isApproved"
+          @click="composerRef?.handleSaveAsNew()"
           :label="$t('pages.whatsapp.create_message_group.save_as_new')"
           color="secondary"
           variant="outline"
-          :loading="saving || isTranslating"
+          :loading="composerRef?.saving || composerRef?.isTranslating"
           :data-testid="templateWhatsappEditTestIds.saveAsNewButton"
         />
         <UButton
           v-else
-          @click="handleSaveDraft()"
+          @click="composerRef?.handleSaveDraft()"
           :label="$t('pages.whatsapp.create_message_group.save_draft')"
           color="secondary"
           variant="outline"
-          :loading="saving || isTranslating"
+          :loading="composerRef?.saving || composerRef?.isTranslating"
           :data-testid="templateWhatsappEditTestIds.saveDraftButton"
         />
         <UButton
-          v-if="!isPending && !isApproved"
-          @click="handleRequestApproval()"
+          v-if="!store.isPending && !store.isApproved"
+          @click="composerRef?.handleRequestApproval()"
           :label="$t('pages.whatsapp.create_message_group.request_approval')"
           color="primary"
-          :loading="saving || isTranslating"
+          :loading="composerRef?.saving || composerRef?.isTranslating"
           :data-testid="templateWhatsappEditTestIds.requestApprovalButton"
         />
       </template>
     </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="templateWhatsappEditTestIds.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"
+    <ComposerWhatsappComposer
+      ref="composerRef"
+      mode="edit"
+      :message-group-id="route.params.id as string"
     >
-      <UCard
-        v-if="activeTab === 'content' && messageGroup"
-        :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="templateWhatsappEditTestIds.contentCard"
-      >
-        <template #header>
-          <div class="grid grid-cols-3 gap-2">
-            <UFieldGroup>
-              <UBadge variant="outline" color="neutral" size="lg">{{
-                $t('pages.whatsapp.edit_message_group.name')
-              }}</UBadge>
-              <UInput
-                v-model="messageGroup.name"
-                :placeholder="$t('pages.whatsapp.edit_message_group.name_placeholder')"
-                :data-testid="templateWhatsappEditTestIds.nameInput"
-              />
-            </UFieldGroup>
-
-            <UFieldGroup>
-              <UBadge variant="outline" color="neutral" size="lg">{{
-                $t('pages.whatsapp.edit_message_group.category')
-              }}</UBadge>
-              <CategoryChanger
-                v-model:category="messageGroup.category"
-                @changed="ensureUnsubscribeButton"
-              />
-            </UFieldGroup>
-            <!-- <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.edit_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' && messageGroup"
-        :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="templateWhatsappEditTestIds.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="messageGroupId"
-              :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] || messages['en']"
-              v-model:target-message="messages[targetLanguage]"
-              :messages="messages"
-              :current-language="targetLanguage"
-              :base-language="language"
-              :message-group-id="messageGroupId"
-              @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>
+    </ComposerWhatsappComposer>
   </LayoutBasePage>
 </template>