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

package/app/components/Composer/WhatsappComposer.vue

@@ -0,0 +1,424 @@
+<script setup lang="ts">
+import IncompleteTranslationsDialog from '@/components/Common/IncompleteTranslationsDialog.vue'
+import { computed, ref, watch, onUnmounted } from 'vue'
+import type { WhatsappMessage, PostEntity } from '@dev.smartpricing/message-composer-utils/types'
+import { useAppContextStore } from '@/stores/appContext'
+import { useMetaSubmissionStore } from '@/stores/metaSubmission'
+import { useMessageGroupQuery, useLanguagesQuery } from '~/queries'
+import type { WaHeaderType } from '~/types/tracking'
+
+const props = defineProps<{
+  mode: 'create' | 'edit'
+  messageGroupId?: string
+}>()
+
+const emit = defineEmits<{
+  saved: [data: { id: string | number; name: string; status?: string }]
+  cancelled: [data?: { id?: string | number }]
+}>()
+
+const store = useWhatsappComposerStore()
+const { mainLanguage } = storeToRefs(useAppContextStore())
+const { trackEvent } = useTracking()
+const { goBackOrFallback } = useGoBack()
+const { submitToMeta } = useMetaSubmissionStore()
+
+// ── Init ──────────────────────────────────────────────────────────
+if (props.mode === 'create') {
+  store.initCreate(mainLanguage.value)
+}
+
+// ── Edit mode: fetch message group ────────────────────────────────
+const { data: messageGroupData, isPending: isFetching } =
+  props.mode === 'edit' && props.messageGroupId
+    ? useMessageGroupQuery(props.messageGroupId)
+    : { data: ref(null), isPending: ref(false) }
+
+// ── Change tracking ───────────────────────────────────────────────
+const changeTracking = useChangeTracking(computed(() => store.changeTrackingId))
+
+// Record initial state for create mode
+if (props.mode === 'create' && store.currentMessage) {
+  changeTracking.recordOriginalState(mainLanguage.value, store.currentMessage as WhatsappMessage)
+}
+
+// Watch messageGroupData to init edit mode
+if (props.mode === 'edit') {
+  watch(
+    messageGroupData,
+    (data) => {
+      if (!data?.messages) return
+
+      store.initEdit(data, mainLanguage.value)
+
+      // Record original states for change tracking
+      for (const message of data.messages) {
+        if (message.render_type === 'whatsapp_v1') {
+          changeTracking.recordOriginalState(message.language_id, message as WhatsappMessage)
+        }
+      }
+    },
+    { immediate: true },
+  )
+}
+
+// ── WhatsApp template behaviors ───────────────────────────────────
+const { ensureUnsubscribeButton } = useWhatsappTemplateBehaviors({
+  category: computed(() => store.category),
+  messages: computed(() => store.messages),
+})
+
+if (props.mode === 'create') {
+  ensureUnsubscribeButton()
+}
+
+// ── Validation ────────────────────────────────────────────────────
+const messagesRef = computed(() => store.messages)
+const { formState, draftSchema, validationErrors, validateDraft, validateFull, clearErrors } =
+  useTemplateFormValidation({
+    type: 'whatsapp',
+    name: computed(() => store.name),
+    category: computed(() => store.category),
+    messages: messagesRef,
+  })
+
+// ── Template operations ───────────────────────────────────────────
+const successFlag = ref(false)
+
+const { saving, createTemplate, updateTemplate } = useTemplateOperations({
+  onSuccess: () => {
+    successFlag.value = true
+    changeTracking.clearAllChanges()
+    if (props.mode === 'create') {
+      goBackOrFallback()
+    }
+  },
+})
+
+// ── Change detection ──────────────────────────────────────────────
+const hasAnyChanges = computed(() => {
+  if (store.name !== store.originalName) return true
+  if (store.category !== store.originalCategory) return true
+
+  for (const languageId in store.messages) {
+    const message = store.messages[languageId]
+    if (message && changeTracking.hasChanges(languageId, message as WhatsappMessage)) {
+      return true
+    }
+  }
+  return false
+})
+
+useExitConfirmation(computed(() => hasAnyChanges.value && !successFlag.value))
+
+// ── Incomplete translations ───────────────────────────────────────
+const { data: languages } = useLanguagesQuery()
+
+const { incompleteLanguages, hasIncompleteTranslations } = useIncompleteTranslations({
+  messages: computed(() => store.messages as Record<string, WhatsappMessage>),
+  languages,
+})
+
+const showIncompleteDialog = ref(false)
+const pendingAction = ref<'save_draft' | 'save_as_new' | 'request_approval' | null>(null)
+
+// ── Auto-translate ────────────────────────────────────────────────
+const { translateMessage, isTranslating } = useAutoTranslate()
+
+// ── Cleanup ───────────────────────────────────────────────────────
+onUnmounted(() => {
+  store.$reset()
+})
+
+// ── Tracking helpers ──────────────────────────────────────────────
+const trackPrefix = computed(() => (props.mode === 'create' ? 'wa_create' : 'wa_edit'))
+
+function getWaBaseProps() {
+  return { name: store.name, category: store.category }
+}
+
+function getWaDraftProps() {
+  const resolved = resolveDefaultLanguage(store.messages, mainLanguage.value)
+  const msg = resolved ? (store.messages[resolved] as WhatsappMessage) : undefined
+  return {
+    ...getWaBaseProps(),
+    languages: Object.keys(store.messages),
+    header: (msg?.body?.header?.type ?? 'none') as WaHeaderType,
+    footer: !!msg?.body?.footer?.enabled,
+    buttons: msg?.body?.buttons?.buttons?.length ?? 0,
+    is_internal: store.isInternal,
+  }
+}
+
+watch(
+  () => store.activeTab,
+  (tab) => {
+    trackEvent(`${trackPrefix.value}.change_tab`, { ...getWaBaseProps(), tab })
+  },
+)
+
+// Edit mode: watch for mainLanguage resolution
+if (props.mode === 'edit') {
+  watch(
+    () => store.messages[mainLanguage.value],
+    () => {
+      const resolved = resolveDefaultLanguage(store.messages, mainLanguage.value)
+      if (resolved && resolved !== mainLanguage.value) {
+        store.language = resolved
+        store.targetLanguage = resolved
+      }
+    },
+  )
+}
+
+// ── Save logic ────────────────────────────────────────────────────
+async function saveDraft() {
+  trackEvent(`${trackPrefix.value}.save_draft`, getWaDraftProps())
+
+  if (props.mode === 'create') {
+    const result = await createTemplate(
+      { messageGroup: store.messageGroupData, messages: store.messages },
+      'draft',
+    )
+    if (result) {
+      emit('saved', { id: result.id, name: result.name })
+      notifyParent('TEMPLATE_SAVED_DRAFT', { id: result.id, name: result.name })
+    }
+  } else {
+    if (!store.messageGroupId) return
+    await updateTemplate(store.messageGroupId, {
+      messageGroup: store.messageGroupUpdateData,
+      messages: store.messages,
+    })
+    emit('saved', { id: store.messageGroupId, name: store.name })
+    notifyParent('TEMPLATE_SAVED_DRAFT', { id: store.messageGroupId, name: store.name })
+    goBackOrFallback()
+  }
+}
+
+async function saveAsNew() {
+  if (!store.messageGroupId) return
+  trackEvent(`${trackPrefix.value}.save_as_new`, getWaDraftProps())
+
+  const cleanedMessages: Record<string, PostEntity<WhatsappMessage>> = {}
+  for (const [languageId, message] of Object.entries(store.messages)) {
+    const { id, message_group_id, created_at, updated_at, ...templateMessage } =
+      message as WhatsappMessage
+    cleanedMessages[languageId] = {
+      ...templateMessage,
+      message_group_id: '',
+      metadata: {},
+    } as PostEntity<WhatsappMessage>
+  }
+
+  const result = await createTemplate(
+    { messageGroup: store.messageGroupUpdateData, messages: cleanedMessages },
+    'draft',
+  )
+  if (result) {
+    emit('saved', { id: result.id, name: result.name })
+    notifyParent('TEMPLATE_SAVED_AS_NEW', { id: result.id, name: result.name })
+    navigateTo({ name: 'whatsapp-message-edit', params: { id: result.id } }, { replace: true })
+  }
+}
+
+async function requestApproval() {
+  trackEvent(`${trackPrefix.value}.request_approval`, getWaDraftProps())
+
+  if (props.mode === 'create') {
+    const result = await createTemplate(
+      { messageGroup: store.messageGroupData, messages: store.messages },
+      'draft',
+    )
+    if (result) {
+      await submitToMeta(result.id.toString())
+      emit('saved', { id: result.id, name: result.name })
+      notifyParent('TEMPLATE_APPROVAL_REQUESTED', { id: result.id, name: result.name })
+    }
+  } else {
+    if (!store.messageGroupId) return
+    await updateTemplate(store.messageGroupId, {
+      messageGroup: store.messageGroupUpdateData,
+      messages: store.messages,
+    })
+    await submitToMeta(store.messageGroupId)
+    emit('saved', { id: store.messageGroupId, name: store.name })
+    notifyParent('TEMPLATE_APPROVAL_REQUESTED', { id: store.messageGroupId, name: store.name })
+    goBackOrFallback()
+  }
+}
+
+// ── Public action handlers ────────────────────────────────────────
+async function handleSaveDraft() {
+  if (!(await validateDraft())) return
+  if (hasIncompleteTranslations.value) {
+    pendingAction.value = 'save_draft'
+    showIncompleteDialog.value = true
+  } else {
+    saveDraft()
+  }
+}
+
+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()
+  }
+}
+
+function handleCancel() {
+  const data =
+    props.mode === 'edit' && store.messageGroupId ? { id: store.messageGroupId } : undefined
+  emit('cancelled', data)
+  notifyParent('TEMPLATE_CANCELLED', data ? { id: data.id } : undefined)
+  goBackOrFallback()
+}
+
+function proceedWithSave() {
+  if (pendingAction.value === 'save_draft') {
+    saveDraft()
+  } else if (pendingAction.value === 'save_as_new') {
+    saveAsNew()
+  } else if (pendingAction.value === 'request_approval') {
+    requestApproval()
+  }
+  pendingAction.value = null
+}
+
+function goToTranslations() {
+  store.activeTab = 'translations'
+  pendingAction.value = null
+}
+
+async function translateAndSave() {
+  if (!incompleteLanguages.value.length) {
+    proceedWithSave()
+    return
+  }
+
+  const baseMessage = store.messages[store.language]
+  if (!baseMessage) {
+    proceedWithSave()
+    return
+  }
+
+  for (const { language: lang } of incompleteLanguages.value) {
+    const targetMsg = store.messages[lang.id]
+    if (!targetMsg) continue
+
+    await translateMessage(
+      baseMessage as WhatsappMessage,
+      targetMsg as WhatsappMessage,
+      store.language,
+      lang.id,
+    )
+  }
+
+  proceedWithSave()
+}
+
+// ── Tracking event forwarders ─────────────────────────────────────
+function onAddLanguage(lang: string) {
+  trackEvent(`${trackPrefix.value}.add_language`, { ...getWaBaseProps(), language: lang })
+}
+
+function onRemoveLanguage(lang: string) {
+  trackEvent(`${trackPrefix.value}.remove_language`, { ...getWaBaseProps(), language: lang })
+}
+
+function onAutoTranslateTracked(lang: string) {
+  trackEvent(`${trackPrefix.value}.auto_translate`, { ...getWaBaseProps(), language: lang })
+}
+
+function onPreview(lang: string) {
+  trackEvent(`${trackPrefix.value}.preview`, { ...getWaBaseProps(), language: lang })
+}
+
+function onFiltersChanged(payload: {
+  language: string
+  search_term: string
+  show_only_missing: boolean
+  show_only_changes: boolean
+}) {
+  trackEvent(`${trackPrefix.value}.translations_filters`, { ...getWaBaseProps(), ...payload })
+}
+
+// ── Expose ────────────────────────────────────────────────────────
+defineExpose({
+  handleSaveDraft,
+  handleSaveAsNew,
+  handleRequestApproval,
+  handleCancel,
+  saving,
+  isTranslating,
+  validationErrors,
+  isPending: store.isPending,
+  isApproved: store.isApproved,
+})
+</script>
+
+<template>
+  <UForm
+    ref="templateForm"
+    :schema="draftSchema"
+    :state="formState"
+    :validate-on="[]"
+    class="flex-1 relative min-h-0 flex flex-col"
+  >
+    <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()"
+      >
+        <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>
+
+    <ComposerWhatsappContent
+      v-if="store.activeTab === 'content'"
+      :mode="mode"
+      @category-changed="ensureUnsubscribeButton"
+    />
+
+    <ComposerWhatsappTranslations
+      v-if="store.activeTab === 'translations'"
+      :mode="mode"
+      @add-language="onAddLanguage"
+      @remove-language="onRemoveLanguage"
+      @auto-translate-tracked="onAutoTranslateTracked"
+      @preview="onPreview"
+      @filters-changed="onFiltersChanged"
+    />
+  </UForm>
+
+  <IncompleteTranslationsDialog
+    v-model="showIncompleteDialog"
+    :incomplete-languages="incompleteLanguages"
+    @save-without-translating="proceedWithSave"
+    @translate-and-save="translateAndSave"
+    @go-to-translations="goToTranslations"
+  />
+</template>

package/app/components/Composer/WhatsappContent.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import WhatsappEditorSyncWrapper from '@/components/Whatsapp/Editor/SyncWrapper.vue'
+import WhatsappPreview from '@/components/Whatsapp/PreviewPanel.vue'
+import CategoryChanger from '@/components/Whatsapp/CategoryChanger.vue'
+import type { WhatsappMessage, PostEntity } from '@dev.smartpricing/message-composer-utils/types'
+
+const props = defineProps<{
+  mode: 'create' | 'edit'
+}>()
+
+const emit = defineEmits<{
+  'category-changed': []
+}>()
+
+const store = useWhatsappComposerStore()
+const adminStore = useAdminStore()
+
+const testIds = computed(() =>
+  props.mode === 'create' ? templateWhatsappCreateTestIds : templateWhatsappEditTestIds,
+)
+</script>
+
+<template>
+  <UCard
+    v-if="store.currentMessage"
+    :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="testIds.contentCard"
+  >
+    <template #header>
+      <div class="grid grid-cols-3 gap-2">
+        <UFieldGroup>
+          <UBadge variant="outline" color="neutral" size="lg">{{
+            $t(`pages.whatsapp.${mode === 'create' ? 'create' : 'edit'}_message_group.name`)
+          }}</UBadge>
+          <UInput
+            v-model="store.name"
+            :placeholder="
+              $t(
+                `pages.whatsapp.${mode === 'create' ? 'create' : 'edit'}_message_group.name_placeholder`,
+              )
+            "
+            :data-testid="testIds.nameInput"
+          />
+        </UFieldGroup>
+
+        <UFieldGroup>
+          <UBadge variant="outline" color="neutral" size="lg">{{
+            $t(`pages.whatsapp.${mode === 'create' ? 'create' : 'edit'}_message_group.category`)
+          }}</UBadge>
+          <CategoryChanger v-model:category="store.category" @changed="emit('category-changed')" />
+        </UFieldGroup>
+
+        <USwitch
+          v-if="mode === 'create' && adminStore.isAdminModeActive"
+          v-model="store.isInternal"
+          :label="$t('common.internal')"
+          color="info"
+          :data-testid="testIds.internalSwitch"
+        />
+      </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="store.currentMessage">
+        <h2 class="px-4 pb-4 label-lg">
+          {{
+            $t(
+              `pages.whatsapp.${mode === 'create' ? 'create' : 'edit'}_message_group.message_content`,
+            )
+          }}
+        </h2>
+        <WhatsappEditorSyncWrapper
+          v-model="store.messages[store.language]"
+          :messages="store.messages"
+          :main-language-id="store.language"
+          :key="store.language"
+        />
+      </div>
+      <div class="col-span-1 overflow-y-auto" v-if="store.currentMessage">
+        <WhatsappPreview :message="store.currentMessage" />
+      </div>
+    </div>
+  </UCard>
+</template>

package/app/components/Composer/WhatsappTranslations.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import TranslationEditor from '@/components/Whatsapp/TranslationEditor.vue'
+import LanguageList from '@/components/Common/LanguageList.vue'
+
+const props = defineProps<{
+  mode: 'create' | 'edit'
+}>()
+
+const emit = defineEmits<{
+  'add-language': [lang: string]
+  'remove-language': [lang: string]
+  'auto-translate-tracked': [lang: string]
+  preview: [lang: string]
+  'filters-changed': [
+    payload: {
+      language: string
+      search_term: string
+      show_only_missing: boolean
+      show_only_changes: boolean
+    },
+  ]
+}>()
+
+const store = useWhatsappComposerStore()
+
+const testIds = computed(() =>
+  props.mode === 'create' ? templateWhatsappCreateTestIds : templateWhatsappEditTestIds,
+)
+</script>
+
+<template>
+  <UCard
+    v-if="store.currentMessage"
+    :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="testIds.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="store.messages"
+          v-model:language="store.targetLanguage"
+          render-type="whatsapp_v1"
+          :message-group-id="store.changeTrackingId"
+          :main-language-id="store.language"
+          @add-language="emit('add-language', $event)"
+          @remove-language="emit('remove-language', $event)"
+        />
+      </div>
+      <div class="overflow-y-auto" v-if="store.currentMessage && store.targetMessage">
+        <TranslationEditor
+          :base-message="store.messages[store.language] || store.messages['en']"
+          v-model:target-message="store.messages[store.targetLanguage]"
+          :messages="store.messages"
+          :current-language="store.targetLanguage"
+          :base-language="store.language"
+          :message-group-id="store.changeTrackingId"
+          @auto-translate-tracked="emit('auto-translate-tracked', $event)"
+          @preview="emit('preview', $event)"
+          @filters-changed="emit('filters-changed', $event)"
+        />
+      </div>
+    </div>
+  </UCard>
+</template>

package/app/components/CreateTemplateButton.vue

@@ -9,7 +9,7 @@ const { trackEvent } = useTracking()
 
 function createTemplate(type: 'whatsapp' | 'email') {
   trackEvent('message_create', { message_kind: type })
-  router.push(`/template/${type}/create`)
+  router.push({ name: `${type}-message-create` })
 }
 
 const templateOptions = computed(() => {

package/app/components/Layout/BasePage.vue

@@ -1,43 +1,43 @@
 <script setup lang="ts">
-	import type { ButtonProps, TabsItem } from "#ui/types";
+import type { ButtonProps, TabsItem } from '#ui/types'
 
-	const props = defineProps<{
-		title: string
-		tabs?: TabsItem[]
-		activeTab?: string | number
-		back?: ButtonProps
-		testId?: string
-	}>();
+const props = defineProps<{
+  title: string
+  tabs?: TabsItem[]
+  activeTab?: string | number
+  back?: ButtonProps
+  testId?: string
+}>()
 
-	const emit = defineEmits<{
-		tabChange: [value: string | number]
-	}>();
+const emit = defineEmits<{
+  tabChange: [value: string | number]
+}>()
 
-	watchEffect(() => {
-		useHead({ title: props.title });
-	});
+watchEffect(() => {
+  useHead({ title: props.title })
+})
 </script>
 
 <template>
-	<div class="flex flex-col min-h-0">
-		<SNavigationBarHeader
-			:title="title"
-			:back="back"
-			:tabs="tabs"
-			:active-tab="activeTab"
-			:data-testid="testId"
-			class="bg-white sticky top-0 z-10"
-			@tab-change="emit('tabChange', $event)"
-		>
-			<template #actions>
-				<div class="flex items-center gap-1.5">
-					<slot name="actions" />
-				</div>
-			</template>
-		</SNavigationBarHeader>
+  <div class="flex flex-col min-h-0">
+    <SNavigationBarHeader
+      :title="title"
+      :back="back"
+      :tabs="tabs"
+      :active-tab="activeTab"
+      :data-testid="testId"
+      class="bg-white sticky top-0 z-10"
+      @tab-change="emit('tabChange', $event)"
+    >
+      <template #actions>
+        <div class="flex items-center gap-1.5">
+          <slot name="actions" />
+        </div>
+      </template>
+    </SNavigationBarHeader>
 
-		<div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto  sm:p-4 p-4">
-			<slot />
-		</div>
-	</div>
+    <div class="flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto sm:p-4 p-4">
+      <slot />
+    </div>
+  </div>
 </template>

package/app/composables/useGoBack.ts

@@ -3,7 +3,7 @@ import type { RouteLocationRaw } from 'vue-router'
 export function useGoBack() {
   const router = useRouter()
 
-  function goBackOrFallback(fallback: RouteLocationRaw = '/') {
+  function goBackOrFallback(fallback: RouteLocationRaw = { name: 'message-library' }) {
     if (router.options.history.state.back) {
       router.back()
     } else {

package/app/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-	<SNavigationPage :panel-props="{ ui: { body: 'p-0 sm:p-0 gap-0 sm:gap-0 overflow-hidden' } }">
-	<slot />
-	</SNavigationPage>
+  <SNavigationPage :panel-props="{ ui: { body: 'p-0 sm:p-0 gap-0 sm:gap-0 overflow-hidden' } }">
+    <slot />
+  </SNavigationPage>
 </template>