@dev.smartpricing/message-composer-layer 1.0.13 → 1.0.15

package/app/stores/whatsappComposer.ts

@@ -0,0 +1,173 @@
+import { ref, computed } from 'vue'
+import type {
+  MessageGroupCategory,
+  WhatsappMessage,
+  PostEntity,
+  MessageFromDb,
+  MessageGroupWithMessages,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { getWhatsappEmpty } from '@dev.smartpricing/message-composer-utils/utils'
+
+type ComposerMode = 'create' | 'edit'
+
+export const useWhatsappComposerStore = defineStore('whatsappComposer', () => {
+  // ── 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<WhatsappMessage> | WhatsappMessage>>({})
+
+  // 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)
+
+  // Create mode: draft ID for change tracking
+  const draftId = ref('')
+
+  // ── Computed ──────────────────────────────────────────────────────
+  const messageGroupData = computed(() => ({
+    name: name.value,
+    category: category.value,
+    visibility: isInternal.value ? 'internal' : 'public',
+  }))
+
+  const messageGroupUpdateData = computed(() => ({
+    name: name.value,
+    category: category.value,
+  }))
+
+  const currentMessage = computed(
+    () =>
+      messages.value[language.value] as (PostEntity<WhatsappMessage> | WhatsappMessage) | undefined,
+  )
+
+  const targetMessage = computed(
+    () =>
+      messages.value[targetLanguage.value] as
+        | (PostEntity<WhatsappMessage> | WhatsappMessage)
+        | undefined,
+  )
+
+  // Edit mode: status checks for conditional buttons
+  const isPending = computed(() =>
+    messageGroup.value?.messages?.some((message: MessageFromDb) => message.status === 'pending'),
+  )
+  const isApproved = computed(() =>
+    messageGroup.value?.messages?.some((message: MessageFromDb) => message.status === 'approved'),
+  )
+
+  // Change tracking ID: draftId for create, messageGroupId for edit
+  const changeTrackingId = computed(() =>
+    mode.value === 'create' ? draftId.value : (messageGroupId.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]: getWhatsappEmpty(mainLanguage) }
+    messageGroup.value = null
+    originalName.value = ''
+    originalCategory.value = 'marketing'
+    draftId.value = `draft-${Date.now()}`
+  }
+
+  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'
+    draftId.value = ''
+
+    // Deep clone to avoid mutating cache
+    messageGroup.value = structuredClone(data)
+
+    // Store originals for change detection
+    originalName.value = data.name
+    originalCategory.value = data.category
+
+    // Populate messages
+    const msgs: Record<string, WhatsappMessage> = {}
+    for (const message of data.messages) {
+      if (message.render_type === 'whatsapp_v1') {
+        msgs[message.language_id] = structuredClone(message) as unknown as WhatsappMessage
+      }
+    }
+    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
+    }
+  }
+
+  // ── 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'
+    draftId.value = ''
+  }
+
+  return {
+    // State
+    mode,
+    messageGroupId,
+    name,
+    category,
+    isInternal,
+    language,
+    targetLanguage,
+    activeTab,
+    messages,
+    messageGroup,
+    originalName,
+    originalCategory,
+    draftId,
+
+    // Computed
+    messageGroupData,
+    messageGroupUpdateData,
+    currentMessage,
+    targetMessage,
+    isPending,
+    isApproved,
+    changeTrackingId,
+
+    // Actions
+    initCreate,
+    initEdit,
+    $reset,
+  }
+})

package/i18n/locales/de.ts

@@ -397,7 +397,7 @@ Diese Nachrichten müssen funktional sein, nicht werblich.
         emailRequired: 'Bitte geben Sie eine gültige E-Mail-Adresse ein',
         nameRequired: 'Name ist erforderlich',
         headerMediaRequired: 'Header-Mediendatei ist erforderlich',
-        messageRequired: 'Englische Nachricht ist erforderlich',
+        messageRequired: 'Mindestens eine Sprache ist erforderlich',
         headerTooLong: 'Header-Text überschreitet 60 Zeichen',
         bodyTooLong: 'Text überschreitet 1024 Zeichen',
         footerTooLong: 'Footer-Text überschreitet 60 Zeichen',

package/i18n/locales/en.ts

@@ -390,7 +390,7 @@ These messages must be functional, not promotional.
         emailInvalid: "Invalid email format. Use email format (e.g., example{'@'}example.com)",
         emailRequired: 'Please enter a valid email address',
         nameRequired: 'Name is required',
-        messageRequired: 'English message is required',
+        messageRequired: 'At least one language is required',
         headerTooLong: 'Header text exceeds 60 characters',
         headerMediaRequired: 'Header media file is required',
         bodyTooLong: 'Body text exceeds 1024 characters',

package/i18n/locales/es.ts

@@ -394,7 +394,7 @@ Estos mensajes deben ser funcionales, no promocionales.
           "Formato de correo inválido. Usa el formato de correo (p. ej., example{'@'}example.com)",
         emailRequired: 'Introduce una dirección de correo válida',
         nameRequired: 'Se requiere el nombre',
-        messageRequired: 'Se requiere el mensaje en inglés',
+        messageRequired: 'Se requiere al menos un idioma',
         headerTooLong: 'El texto del encabezado supera los 60 caracteres',
         headerMediaRequired: 'El archivo multimedia del encabezado es obligatorio',
         bodyTooLong: 'El texto supera los 1024 caracteres',

package/i18n/locales/fr.ts

@@ -394,7 +394,7 @@ Ces messages doivent être fonctionnels, et non promotionnels.
           "Format d’e-mail invalide. Utilisez le format e-mail (ex. example{'@'}example.com)",
         emailRequired: 'Veuillez saisir une adresse e-mail valide',
         nameRequired: 'Le nom est requis',
-        messageRequired: 'Le message en anglais est requis',
+        messageRequired: 'Au moins une langue est requise',
         headerMediaRequired: "Le fichier média de l'en-tête est requis",
         headerTooLong: 'Le texte d’en-tête dépasse 60 caractères',
         bodyTooLong: 'Le texte dépasse 1024 caractères',

package/i18n/locales/it.ts

@@ -393,7 +393,7 @@ Questi messaggi devono essere funzionali, non promozionali.
           "Formato email non valido. Usa il formato email (es. example{'@'}example.com)",
         emailRequired: 'Inserisci un indirizzo email valido',
         nameRequired: 'Il nome è obbligatorio',
-        messageRequired: 'Il messaggio in inglese è obbligatorio',
+        messageRequired: 'È richiesta almeno una lingua',
         headerMediaRequired: "Il file multimediale dell'intestazione è obbligatorio",
         headerTooLong: 'Il testo dell’header supera i 60 caratteri',
         bodyTooLong: 'Il testo supera i 1024 caratteri',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev.smartpricing/message-composer-layer",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "private": false,
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -39,14 +39,15 @@
     "vue-router": "^5.0.6",
     "vue3-emoji-picker": "^1.1.8",
     "zod": "^4.4.1",
-    "@dev.smartpricing/message-composer-utils": "3.1.13"
+    "@dev.smartpricing/message-composer-utils": "3.1.15"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",
     "@nuxt/test-utils": "^4.0.3",
     "@playwright/test": "^1.59.1",
     "dotenv": "^17.4.2",
-    "nuxt-ui-layer": "git+ssh://git@github.com:smartpricing/smartness-nuxt-ui#v1.5.4"
+    "nuxt-ui-layer": "git+ssh://git@github.com:smartpricing/smartness-nuxt-ui#v1.5.4",
+    "vue-tsc": "^3.2.8"
   },
   "peerDependencies": {
     "nuxt-ui-layer": ">=1.3.0"