@dev.smartpricing/message-composer-layer 1.0.7 → 1.0.9

package/app/api/messages.ts

@@ -6,6 +6,8 @@ import type {
 import { apiClient } from './client'
 
 export const messagesApi = {
+  getById: (id: string) => apiClient<MessageFromDb>(`/messages/${id}`),
+
   create: (data: PostEntity<Message>) =>
     apiClient<MessageFromDb>('/messages', {
       method: 'POST',

package/app/components/Email/SendTestEmailModal.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import type { PostEntity, EmailMessage } from '@dev.smartpricing/message-composer-utils/types'
 import { isEmail } from '@dev.smartpricing/message-composer-utils/utils'
+import { useQuery } from '@pinia/colada'
 import { useSendTestEmailMutation } from '~/queries'
+import { messageGroupsApi, messagesApi } from '~/api'
 import { z } from 'zod'
 
 defineOptions({
@@ -9,13 +11,73 @@ defineOptions({
 })
 
 const props = defineProps<{
-  message: PostEntity<EmailMessage>
+  message?: PostEntity<EmailMessage>
+  messageId?: string
+  messageGroupId?: string
+  language?: string
 }>()
 
 const emit = defineEmits<{
   'test-sent': [payload: { to_recipients: number }]
 }>()
 
+// --- Resolve message from props (priority: message > messageId > messageGroupId+language) ---
+
+const mode = computed(() => {
+  if (props.message) return 'direct' as const
+  if (props.messageId) return 'byId' as const
+  if (props.messageGroupId) return 'byGroup' as const
+  return 'none' as const
+})
+
+if (import.meta.dev) {
+  const propSources = [props.message, props.messageId, props.messageGroupId].filter(Boolean)
+  if (propSources.length > 1) {
+    console.warn(
+      '[SendTestEmailModal] Multiple message sources provided. Priority: message > messageId > messageGroupId+language',
+    )
+  }
+}
+
+const { data: fetchedMessage, isLoading: isLoadingMessage } = useQuery({
+  key: () => ['messages', props.messageId ?? ''],
+  query: () => messagesApi.getById(props.messageId!),
+  enabled: () => mode.value === 'byId',
+})
+
+const { data: messageGroup, isLoading: isLoadingGroup } = useQuery({
+  key: () => ['message-groups', props.messageGroupId ?? ''],
+  query: () => messageGroupsApi.getById(props.messageGroupId!),
+  enabled: () => mode.value === 'byGroup',
+})
+
+const resolvedMessage = computed<PostEntity<EmailMessage> | undefined>(() => {
+  if (props.message) return props.message
+
+  if (mode.value === 'byId' && fetchedMessage.value) {
+    return fetchedMessage.value as unknown as PostEntity<EmailMessage>
+  }
+
+  if (mode.value === 'byGroup' && messageGroup.value) {
+    const messages = messageGroup.value.messages
+    const msg =
+      messages.find((m) => m.language_id === props.language) ||
+      messages.find((m) => m.language_id === 'en') ||
+      messages[0]
+    return msg as unknown as PostEntity<EmailMessage> | undefined
+  }
+
+  return undefined
+})
+
+const isResolvingMessage = computed(
+  () =>
+    (mode.value === 'byId' && isLoadingMessage.value) ||
+    (mode.value === 'byGroup' && isLoadingGroup.value),
+)
+
+// --- Form ---
+
 const { t } = useI18n()
 const toast = useToast()
 const { mutate: sendTest, isLoading: isSending, status } = useSendTestEmailMutation()
@@ -43,13 +105,14 @@ const schema = z.object({
 type Schema = z.output<typeof schema>
 
 function onSubmit() {
+  if (!resolvedMessage.value) return
   sendTest({
-    message: props.message,
+    message: resolvedMessage.value,
     to: state.value.to,
   })
 }
 
-const open = ref(false)
+const open = defineModel<boolean>('open', { default: false })
 const formRef = ref()
 
 watch(status, (newStatus) => {
@@ -78,14 +141,16 @@ watch(status, (newStatus) => {
     :close="{ 'data-testid': sendTestEmailModalTestIds.modalCloseButton }"
     :data-testid="sendTestEmailModalTestIds.modal"
   >
-    <UButton
-      icon="ph:envelope-simple-bold"
-      :label="$t('pages.email.send_test')"
-      size="md"
-      color="primary"
-      variant="ghost"
-      :data-testid="sendTestEmailModalTestIds.triggerButton"
-    />
+    <slot name="trigger">
+      <UButton
+        icon="ph:envelope-simple-bold"
+        :label="$t('pages.email.send_test')"
+        size="md"
+        color="primary"
+        variant="ghost"
+        :data-testid="sendTestEmailModalTestIds.triggerButton"
+      />
+    </slot>
 
     <template #body>
       <UForm ref="formRef" :schema="schema" :state="state" @submit="onSubmit">
@@ -112,7 +177,8 @@ watch(status, (newStatus) => {
         :label="$t('pages.email.send_test')"
         size="sm"
         color="primary"
-        :loading="isSending"
+        :loading="isSending || isResolvingMessage"
+        :disabled="!resolvedMessage"
         @click="formRef.submit()"
         :data-testid="sendTestEmailModalTestIds.sendButton"
       />

package/app/queries/messages.ts

@@ -1,7 +1,19 @@
-import { useMutation, useQueryCache } from '@pinia/colada'
+import { useMutation, useQuery, useQueryCache } from '@pinia/colada'
 import type { Message, PostEntity } from '@dev.smartpricing/message-composer-utils/types'
+import type { MaybeRefOrGetter } from 'vue'
 import { messagesApi } from '~/api'
 
+export function useMessageQuery(
+  id: MaybeRefOrGetter<string>,
+  options?: { enabled?: MaybeRefOrGetter<boolean> },
+) {
+  return useQuery({
+    key: () => ['messages', toValue(id)],
+    query: () => messagesApi.getById(toValue(id)),
+    enabled: options?.enabled,
+  })
+}
+
 export function useCreateMessageMutation() {
   const queryCache = useQueryCache()
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev.smartpricing/message-composer-layer",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "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.7"
+    "@dev.smartpricing/message-composer-utils": "3.1.9"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",