@dev.smartpricing/message-composer-layer 1.0.1

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

@@ -0,0 +1,561 @@
+<script setup lang="ts">
+definePageMeta({
+  name: 'whatsapp-message-edit',
+  middleware: ['channel-guard'],
+})
+
+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
+    }
+  },
+)
+</script>
+
+<template>
+  <SNavigationPage>
+    <template #header>
+      <SNavigationBarHeader
+        v-if="messageGroup"
+        :title="$t('pages.whatsapp.edit_message_group.title')"
+        :tabs="[
+          { label: $t('pages.whatsapp.tabs.content'), value: 'content' },
+          { label: $t('pages.whatsapp.tabs.translations'), value: 'translations' },
+        ]"
+        :active-tab="activeTab"
+        :data-testid="templateWhatsappEditTestIds.navbar"
+        @tab-change="activeTab = $event"
+      >
+        <template #actions>
+          <UButton
+            @click="
+              () => {
+                notifyParent('TEMPLATE_CANCELLED', { id: messageGroup?.id })
+                goBackOrFallback()
+              }
+            "
+            :label="$t('common.actions.cancel')"
+            color="primary"
+            variant="ghost"
+            :loading="saving || isTranslating"
+            :data-testid="templateWhatsappEditTestIds.cancelButton"
+          />
+          <UButton
+            v-if="isPending || isApproved"
+            @click="handleSaveAsNew()"
+            :label="$t('pages.whatsapp.create_message_group.save_as_new')"
+            color="secondary"
+            variant="outline"
+            :loading="saving || isTranslating"
+            :data-testid="templateWhatsappEditTestIds.saveAsNewButton"
+          />
+          <UButton
+            v-else
+            @click="handleSaveDraft()"
+            :label="$t('pages.whatsapp.create_message_group.save_draft')"
+            color="secondary"
+            variant="outline"
+            :loading="saving || isTranslating"
+            :data-testid="templateWhatsappEditTestIds.saveDraftButton"
+          />
+          <UButton
+            v-if="!isPending && !isApproved"
+            @click="handleRequestApproval()"
+            :label="$t('pages.whatsapp.create_message_group.request_approval')"
+            color="primary"
+            :loading="saving || isTranslating"
+            :data-testid="templateWhatsappEditTestIds.requestApprovalButton"
+          />
+        </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="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"
+    >
+      <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"
+    />
+  </SNavigationPage>
+</template>