@dev.smartpricing/message-composer-layer 1.0.1

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

@@ -0,0 +1,468 @@
+<script setup lang="ts">
+definePageMeta({
+  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 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()
+}
+</script>
+
+<template>
+  <SNavigationPage>
+    <template #header>
+      <SNavigationBarHeader
+        :title="$t('pages.whatsapp.create_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="templateWhatsappCreateTestIds.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="templateWhatsappCreateTestIds.cancelButton"
+          />
+          <UButton
+            @click="handleSaveDraft()"
+            :label="$t('pages.whatsapp.create_message_group.save_draft')"
+            color="primary"
+            variant="outline"
+            :loading="saving || isTranslating"
+            :data-testid="templateWhatsappCreateTestIds.saveDraftButton"
+          />
+          <UButton
+            @click="handleRequestApproval()"
+            :label="$t('pages.whatsapp.create_message_group.request_approval')"
+            color="primary"
+            :loading="saving || isTranslating"
+            :data-testid="templateWhatsappCreateTestIds.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="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"
+    />
+  </SNavigationPage>
+</template>

package/app/plugins/admin-shortcut.client.ts

@@ -0,0 +1,7 @@
+export default defineNuxtPlugin(() => {
+  onNuxtReady(() => {
+    const adminStore = useAdminStore()
+    const { shift_space } = useMagicKeys()
+    whenever(shift_space!, () => adminStore.toggleAdminMode())
+  })
+})

package/app/plugins/tracking.client.ts

@@ -0,0 +1,12 @@
+export default defineNuxtPlugin(() => {
+  const appConfig = useAppConfig()
+  if (!appConfig.composer?.tracking) return
+
+  const { trackPageView } = useTracking()
+  const router = useRouter()
+
+  router.afterEach((to) => {
+    const pageName = (to.name as string) || to.path
+    trackPageView(pageName)
+  })
+})

package/app/queries/ai.ts

@@ -0,0 +1,20 @@
+import { useMutation } from '@pinia/colada'
+import { aiApi } from '~/api'
+
+export function useRefineTextMutation() {
+  return useMutation({
+    mutation: aiApi.refineText,
+  })
+}
+
+export function useTranslateMutation() {
+  return useMutation({
+    mutation: aiApi.translate,
+  })
+}
+
+export function useGenerateTextMutation() {
+  return useMutation({
+    mutation: aiApi.generateText,
+  })
+}

package/app/queries/brands.ts

@@ -0,0 +1,75 @@
+import { useQuery, useMutation, useQueryCache } from '@pinia/colada'
+import type {
+  BrandCreateBody,
+  BrandUpdateBody,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { brandsApi, propertiesApi } from '~/api'
+
+// QUERIES
+export function useBrandsQuery(options?: {
+  sort_by?: 'created_at' | 'name'
+  direction?: 'asc' | 'desc'
+}) {
+  return useQuery({
+    key: () => ['brands', options?.sort_by, options?.direction],
+    query: () => brandsApi.getAll(options),
+    staleTime: 2 * 60 * 1000,
+  })
+}
+
+export function useBrandQuery(id: MaybeRefOrGetter<string>) {
+  return useQuery({
+    key: () => ['brands', toValue(id)],
+    query: () => brandsApi.getById(toValue(id)),
+    staleTime: 2 * 60 * 1000,
+  })
+}
+
+export function usePropertiesQuery() {
+  return useQuery({
+    key: () => ['properties'],
+    query: () => propertiesApi.getAll(),
+    staleTime: 10 * 60 * 1000,
+  })
+}
+
+// MUTATIONS
+export function useCreateBrandMutation() {
+  const queryCache = useQueryCache()
+
+  return useMutation({
+    mutation: (data: BrandCreateBody) => brandsApi.create(data),
+    onSuccess: () => {
+      queryCache.invalidateQueries({ key: ['brands'] })
+    },
+  })
+}
+
+export function useUpdateBrandMutation() {
+  const queryCache = useQueryCache()
+
+  return useMutation({
+    mutation: ({ id, data }: { id: string; data: BrandUpdateBody }) => brandsApi.update(id, data),
+    onSuccess: (_, { id }) => {
+      queryCache.invalidateQueries({ key: ['brands', id] })
+      queryCache.invalidateQueries({ key: ['brands'] })
+    },
+  })
+}
+
+export function useDeleteBrandMutation() {
+  const queryCache = useQueryCache()
+
+  return useMutation({
+    mutation: brandsApi.delete,
+    onSuccess: () => {
+      queryCache.invalidateQueries({ key: ['brands'] })
+    },
+  })
+}
+
+export function useBrandPreviewMutation() {
+  return useMutation({
+    mutation: brandsApi.preview,
+  })
+}

package/app/queries/compilation.ts

@@ -0,0 +1,37 @@
+import { useMutation, useQuery } from '@pinia/colada'
+import type { MaybeRefOrGetter } from 'vue'
+import { toValue } from 'vue'
+import { compilationApi } from '~/api'
+import type {
+  CompileMessageRequest,
+  PreviewMessageRequest,
+} from '@dev.smartpricing/message-composer-utils/types'
+
+export function useSendTestEmailMutation() {
+  return useMutation({
+    mutation: compilationApi.sendTestEmail,
+  })
+}
+
+export function useEmailParametersQuery(
+  messageGroupId: MaybeRefOrGetter<string>,
+  language: MaybeRefOrGetter<string>,
+) {
+  return useQuery({
+    key: () => ['email-parameters', toValue(messageGroupId), toValue(language)],
+    query: () => compilationApi.getParameters(toValue(messageGroupId), toValue(language)),
+  })
+}
+
+export function useCompileEmailMutation() {
+  return useMutation({
+    mutation: ({ messageGroupId, data }: { messageGroupId: string; data: CompileMessageRequest }) =>
+      compilationApi.compileEmail(messageGroupId, data),
+  })
+}
+
+export function usePreviewEmailMutation() {
+  return useMutation({
+    mutation: (data: PreviewMessageRequest) => compilationApi.previewEmail(data),
+  })
+}

package/app/queries/dynamicValues.ts

@@ -0,0 +1,13 @@
+import { useQuery } from '@pinia/colada'
+import { dynamicValuesApi } from '~/api'
+import { useAppContextStore } from '~/stores/appContext'
+
+export function useDynamicValuesQuery() {
+  const { product, mainLanguage } = storeToRefs(useAppContextStore())
+
+  return useQuery({
+    key: () => ['dynamic-values', product.value, mainLanguage.value],
+    query: () => dynamicValuesApi.get(product.value || 'browser', mainLanguage.value || 'en'),
+    staleTime: 30 * 60 * 1000,
+  })
+}

package/app/queries/index.ts

@@ -0,0 +1,9 @@
+export * from './languages'
+export * from './messageGroups'
+export * from './messages'
+export * from './media'
+export * from './ai'
+export * from './meta'
+export * from './compilation'
+export * from './dynamicValues'
+export * from './brands'

package/app/queries/languages.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@pinia/colada'
+import { languagesApi } from '~/api'
+
+export function useLanguagesQuery() {
+  return useQuery({
+    key: ['languages'],
+    query: languagesApi.getAll,
+    staleTime: 10 * 60 * 1000, // 10 minutes
+  })
+}

package/app/queries/media.ts

@@ -0,0 +1,27 @@
+import { useMutation, useQuery } from '@pinia/colada'
+import { mediaApi } from '~/api'
+
+export function useMediaQuery() {
+  return useQuery({
+    key: ['media'],
+    query: mediaApi.list,
+  })
+}
+
+export function useUploadMediaMutation() {
+  return useMutation({
+    mutation: mediaApi.upload,
+  })
+}
+
+export function useUploadToSmartchatMutation() {
+  return useMutation({
+    mutation: mediaApi.uploadToSmartchat,
+  })
+}
+
+export function useDeleteMediaMutation() {
+  return useMutation({
+    mutation: mediaApi.delete,
+  })
+}