@dev.smartpricing/message-composer-layer 4.2.9-toast.0 → 4.2.9-ux.0

package/app/api/client.ts

@@ -45,7 +45,7 @@ export const apiClient = createApiClient({
   onResponseError({ response, options }) {
     if ((options as { _skipErrorToast?: boolean })._skipErrorToast) return
 
-    const { t } = useI18n()
+    const t = useNuxtApp().$i18n.t
     const code = assertAppError(response._data) ? response._data.code : undefined
     const toast = resolveErrorToast({ status: response.status, code }, t)
     useToast().add({ ...toast, color: 'error' })

package/app/components/Common/MessageGroupSelect.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { RenderType } from '@dev.smartpricing/message-composer-utils/types'
+import type { RenderType, MessageStatus } from '@dev.smartpricing/message-composer-utils/types'
 import { useMessageGroupsQuery } from '~/queries/messageGroups'
 
-defineOptions({ name: 'TemplateSelect' })
+defineOptions({ name: 'MessageGroupSelect' })
 
 const props = withDefaults(
   defineProps<{
@@ -11,7 +11,7 @@ const props = withDefaults(
     searchPlaceholder?: string
   }>(),
   {
-    placeholder: 'Select a template',
+    placeholder: 'Select a message group',
     searchPlaceholder: 'Search...',
   },
 )
@@ -22,16 +22,38 @@ const emit = defineEmits<{
   select: [item: { id: string; name: string }]
 }>()
 
+const { t } = useI18n()
+
 const { data: messageGroups, isLoading } = useMessageGroupsQuery(() => ({
   renderType: props.renderType,
 }))
 
+const hideInactive = ref(false)
+
+function isGroupActive(messages: Array<{ status: MessageStatus }>): boolean {
+  return messages.length > 0 && messages.every((m) => m.status === 'approved')
+}
+
 const items = computed(() => {
   if (!messageGroups.value) return []
-  return messageGroups.value.map((group) => ({
-    label: group.name,
-    value: group.id,
-  }))
+  return messageGroups.value.reduce<
+    Array<{
+      label: string
+      value: string
+      disabled: boolean
+      chip: { color: 'success' | 'neutral' }
+    }>
+  >((acc, group) => {
+    const active = isGroupActive(group.messages)
+    if (hideInactive.value && !active) return acc
+    acc.push({
+      label: group.name,
+      value: group.id,
+      disabled: !active,
+      chip: { color: active ? 'success' : 'neutral' },
+    })
+    return acc
+  }, [])
 })
 
 function handleUpdate(value: string) {
@@ -50,7 +72,21 @@ function handleUpdate(value: string) {
     searchable
     :placeholder="placeholder"
     :search-input="{ placeholder: searchPlaceholder }"
-    :data-testid="templateSelectTestIds.root"
+    :data-testid="messageGroupSelectTestIds.root"
     @update:model-value="handleUpdate"
-  />
+  >
+    <template #item-label="{ item }">
+      <UTooltip v-if="item.disabled" :text="t('common.messageGroupSelect.inactive_tooltip')">
+        <span class="text-muted">{{ item.label }}</span>
+      </UTooltip>
+      <span v-else>{{ item.label }}</span>
+    </template>
+
+    <template #content-top>
+      <div class="flex items-center gap-2 px-2 py-1.5 border-b border-default">
+        <USwitch v-model="hideInactive" size="xs" />
+        <span class="text-xs text-muted">{{ t('common.messageGroupSelect.hide_inactive') }}</span>
+      </div>
+    </template>
+  </USelectMenu>
 </template>

package/app/utils/testIds.const.ts

@@ -738,6 +738,9 @@ export const previewByIdTestIds = {
   loading: 'preview-by-id-loading',
 } as const
 
-export const templateSelectTestIds = {
-  root: 'template-select-root',
+export const messageGroupSelectTestIds = {
+  root: 'message-group-select-root',
 } as const
+
+/** @deprecated Use `messageGroupSelectTestIds` instead */
+export const templateSelectTestIds = messageGroupSelectTestIds

package/i18n/locales/de.ts

@@ -54,6 +54,11 @@ export default {
     search: 'Suchen...',
     success: 'Erfolg',
     translation_failed: 'Übersetzung fehlgeschlagen',
+    messageGroupSelect: {
+      inactive_tooltip:
+        'Diese Nachrichtengruppe enthält nicht genehmigte oder fehlende Nachrichten',
+      hide_inactive: 'Inaktive ausblenden',
+    },
     view_less: 'Weniger anzeigen',
     view_more: 'Mehr anzeigen',
   },

package/i18n/locales/en.ts

@@ -53,6 +53,10 @@ export default {
     search: 'Search...',
     success: 'Success',
     translation_failed: 'Translation failed',
+    messageGroupSelect: {
+      inactive_tooltip: 'This message group has unapproved or missing messages',
+      hide_inactive: 'Hide inactive',
+    },
     view_less: 'View less',
     view_more: 'View more',
   },

package/i18n/locales/es.ts

@@ -54,6 +54,10 @@ export default {
     search: 'Buscar...',
     success: 'Éxito',
     translation_failed: 'La traducción ha fallado',
+    messageGroupSelect: {
+      inactive_tooltip: 'Este grupo de mensajes tiene mensajes no aprobados o faltantes',
+      hide_inactive: 'Ocultar inactivos',
+    },
     view_less: 'Ver menos',
     view_more: 'Ver más',
   },

package/i18n/locales/fr.ts

@@ -54,6 +54,10 @@ export default {
     search: 'Rechercher...',
     success: 'Succès',
     translation_failed: 'Échec de la traduction',
+    messageGroupSelect: {
+      inactive_tooltip: 'Ce groupe de messages contient des messages non approuvés ou manquants',
+      hide_inactive: 'Masquer inactifs',
+    },
     view_less: 'Afficher moins',
     view_more: 'Afficher plus',
   },

package/i18n/locales/it.ts

@@ -53,6 +53,10 @@ export default {
     search: 'Cerca...',
     success: 'Successo',
     translation_failed: 'Traduzione non riuscita',
+    messageGroupSelect: {
+      inactive_tooltip: 'Questo gruppo di messaggi contiene messaggi non approvati o mancanti',
+      hide_inactive: 'Nascondi inattivi',
+    },
     view_less: 'Mostra meno',
     view_more: 'Mostra di più',
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev.smartpricing/message-composer-layer",
-  "version": "4.2.9-toast.0",
+  "version": "4.2.9-ux.0",
   "private": false,
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -36,7 +36,7 @@
     "vue-router": "^5.0.7",
     "vue3-emoji-picker": "^1.1.8",
     "zod": "^4.4.3",
-    "@dev.smartpricing/message-composer-utils": "4.2.9-toast.0"
+    "@dev.smartpricing/message-composer-utils": "4.2.9-ux.0"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",