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

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 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev.smartpricing/message-composer-layer",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "private": false,
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -39,7 +39,7 @@
     "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.14"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",