@dev.smartpricing/message-composer-layer 4.2.10 → 4.2.11-ux.0

package/app/components/Common/MessageGroupSelect.vue

@@ -1,17 +1,29 @@
 <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<{
     renderType?: RenderType
     placeholder?: string
     searchPlaceholder?: string
+    /**
+     * Map of message-group id -> reason text explaining why the group is not
+     * selectable (e.g. already linked to another newsletter by an external
+     * system). Presence of a key disables the group; the value is shown verbatim
+     * as the tooltip, so it must already be localized by the caller.
+     *
+     * NOTE: the caller is responsible for excluding the currently-selected group
+     * when editing, otherwise the current selection will render as disabled.
+     */
+    disabledGroupReasons?: Record<string, string>
+    /** Overrides the "hide inactive" filter label. Defaults to the built-in translation. */
+    hideFilterLabel?: string
   }>(),
   {
-    placeholder: 'Select a template',
+    placeholder: 'Select a message group',
     searchPlaceholder: 'Search...',
   },
 )
@@ -22,16 +34,48 @@ 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
+      tooltip?: string
+      chip: { color: 'success' | 'neutral' }
+    }>
+  >((acc, group) => {
+    const externalReason = props.disabledGroupReasons?.[group.id]
+    const externallyUsed = externalReason != null
+    const active = isGroupActive(group.messages)
+    const disabled = !active || externallyUsed
+    if (hideInactive.value && disabled) return acc
+    acc.push({
+      label: group.name,
+      value: group.id,
+      disabled,
+      // External reason wins over the inactive tooltip when both apply.
+      tooltip: externallyUsed
+        ? externalReason
+        : !active
+          ? t('common.messageGroupSelect.inactive_tooltip')
+          : undefined,
+      chip: { color: disabled ? 'neutral' : 'success' },
+    })
+    return acc
+  }, [])
 })
 
 function handleUpdate(value: string) {
@@ -50,7 +94,23 @@ 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="item.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">
+          {{ hideFilterLabel ?? 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.10",
+  "version": "4.2.11-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.10"
+    "@dev.smartpricing/message-composer-utils": "4.2.11-ux.0"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",