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

package/app/api/brands.ts

@@ -30,13 +30,16 @@ export const brandsApi = {
     apiClient<BrandCreateResponse>('/brands', {
       method: 'POST',
       body: data,
-    }),
+
+      _skipErrorToast: true,
+    } as Record<string, unknown>),
 
   update: (id: string, data: BrandUpdateBody) =>
     apiClient<BrandFromDb>(`/brands/${id}`, {
       method: 'PUT',
       body: data,
-    }),
+      _skipErrorToast: true,
+    } as Record<string, unknown>),
 
   delete: (id: string) => apiClient<BrandDeleteResponse>(`/brands/${id}`, { method: 'DELETE' }),
 

package/app/api/client.ts

@@ -1,5 +1,6 @@
 import type { AppError } from '@dev.smartpricing/message-composer-utils/types'
 import { useAppContextStore } from '@/stores/appContext'
+import { resolveErrorToast } from '~/composables/apiErrorMessages'
 
 function assertAppError(data: unknown): data is AppError {
   if (typeof data !== 'object' || data === null) {
@@ -41,20 +42,12 @@ export const apiClient = createApiClient({
       options.headers.set('sm-default-tags', store.default_tags.join(','))
     }
   },
-  onResponseError({ response }) {
-    const error = response._data
-    if (assertAppError(error)) {
-      useToast().add({
-        color: 'error',
-        title: error.code,
-        description: error.message,
-      })
-    } else {
-      useToast().add({
-        color: 'error',
-        title: 'Error',
-        description: 'An error occurred',
-      })
-    }
+  onResponseError({ response, options }) {
+    if ((options as { _skipErrorToast?: boolean })._skipErrorToast) return
+
+    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,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/composables/apiErrorMessages.ts

@@ -0,0 +1,26 @@
+const CODE_TO_KEY: Record<string, string> = {
+  'session.missing': 'common.errors.session_expired',
+  'session.expired': 'common.errors.session_expired',
+}
+
+function descriptionKeyByStatus(status: number): string {
+  if (status === 403) return 'common.errors.forbidden'
+  if (status === 404) return 'common.errors.not_found'
+  if (status === 503) return 'common.errors.service_unavailable'
+  if (status >= 500) return 'common.errors.server_error'
+  return 'common.errors.generic'
+}
+
+export function resolveErrorToast(
+  error: { status: number; code?: string },
+  t: (key: string) => string,
+): { title: string; description: string; id: string } {
+  const descriptionKey =
+    (error.code && CODE_TO_KEY[error.code]) || descriptionKeyByStatus(error.status)
+
+  return {
+    title: t('common.error'),
+    description: t(descriptionKey),
+    id: `api-error-${error.status}-${error.code || 'unknown'}`,
+  }
+}

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

@@ -21,6 +21,15 @@ export default {
     desktop: 'Desktop',
     error: 'Fehler',
     errore: 'Fehler',
+    errors: {
+      forbidden: 'Sie haben keine Berechtigung, diese Aktion auszuführen.',
+      generic: 'Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es erneut.',
+      not_found: 'Die angeforderte Ressource wurde nicht gefunden.',
+      server_error: 'Ein Serverfehler ist aufgetreten. Bitte versuchen Sie es später erneut.',
+      service_unavailable:
+        'Der Dienst ist vorübergehend nicht verfügbar. Bitte versuchen Sie es später erneut.',
+      session_expired: 'Ihre Sitzung ist abgelaufen. Bitte melden Sie sich erneut an.',
+    },
     imageUpload: {
       imageJpgPngOnly: 'Es werden nur JPG- und PNG-Bilddateien unterstützt.',
       mediaFileTooLarge: 'Die Datei ist zu groß. Maximale Größe: {maxSize}MB.',
@@ -45,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',
   },
@@ -654,6 +668,7 @@ export default {
         button_bg_color: 'Hintergrund',
         button_text_color: 'Text',
         change_logo: 'Logo ändern',
+        colors: 'Farben',
         contact_address: 'Adresse',
         contact_address_placeholder: 'Z.B. Via Roma 1, 39100 Bolzano',
         contact_email: 'E-Mail',
@@ -664,7 +679,6 @@ export default {
         contact_telephone_placeholder: 'Z.B. +39 0471 123456',
         contact_website: 'Webseite',
         contact_website_placeholder: 'Z.B. https://www.hotel.com',
-        colors: 'Farben',
         default_button_colors: 'Standard-Schaltflächen-Farben',
         default_email_colors: 'Standard-E-Mail-Farben',
         default_font: 'Standardschriftart',

package/i18n/locales/en.ts

@@ -21,6 +21,14 @@ export default {
     desktop: 'Desktop',
     error: 'Error',
     errore: 'Error',
+    errors: {
+      forbidden: "You don't have permission to perform this action.",
+      generic: 'An unexpected error occurred. Please try again.',
+      not_found: 'The requested resource was not found.',
+      server_error: 'A server error occurred. Please try again later.',
+      service_unavailable: 'The service is temporarily unavailable. Please try again later.',
+      session_expired: 'Your session has expired. Please log in again.',
+    },
     imageUpload: {
       imageJpgPngOnly: 'Only JPG and PNG image files are supported.',
       mediaFileTooLarge: 'File is too large. Maximum size: {maxSize}MB.',
@@ -45,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',
   },
@@ -645,6 +657,7 @@ export default {
         button_bg_color: 'Background',
         button_text_color: 'Text',
         change_logo: 'Change logo',
+        colors: 'Brand colors',
         contact_address: 'Address',
         contact_address_placeholder: 'E.g. Via Roma 1, 39100 Bolzano',
         contact_email: 'Email',
@@ -655,7 +668,6 @@ export default {
         contact_telephone_placeholder: 'E.g. +39 0471 123456',
         contact_website: 'Website',
         contact_website_placeholder: 'E.g. https://www.hotel.com',
-        colors: 'Brand colors',
         default_button_colors: 'Default button colors',
         default_email_colors: 'Default email colors',
         default_font: 'Default font',

package/i18n/locales/es.ts

@@ -21,6 +21,15 @@ export default {
     desktop: 'Escritorio',
     error: 'Error',
     errore: 'Error',
+    errors: {
+      forbidden: 'No tienes permiso para realizar esta acción.',
+      generic: 'Se ha producido un error inesperado. Inténtalo de nuevo.',
+      not_found: 'El recurso solicitado no fue encontrado.',
+      server_error: 'Se ha producido un error en el servidor. Inténtalo de nuevo más tarde.',
+      service_unavailable:
+        'El servicio no está disponible temporalmente. Inténtalo de nuevo más tarde.',
+      session_expired: 'Tu sesión ha expirado. Inicia sesión de nuevo.',
+    },
     imageUpload: {
       imageJpgPngOnly: 'Solo se admiten archivos de imagen JPG y PNG.',
       mediaFileTooLarge: 'El archivo es demasiado grande. Tamaño máximo: {maxSize}MB.',
@@ -45,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',
   },
@@ -653,6 +666,7 @@ export default {
         button_bg_color: 'Fondo',
         button_text_color: 'Texto',
         change_logo: 'Cambiar logo',
+        colors: 'Colores',
         contact_address: 'Dirección',
         contact_address_placeholder: 'Ej. Via Roma 1, 39100 Bolzano',
         contact_email: 'Email',
@@ -663,7 +677,6 @@ export default {
         contact_telephone_placeholder: 'Ej. +39 0471 123456',
         contact_website: 'Sitio web',
         contact_website_placeholder: 'Ej. https://www.hotel.com',
-        colors: 'Colores',
         default_button_colors: 'Colores de botón predeterminados',
         default_email_colors: 'Colores de correo predeterminados',
         default_font: 'Fuente predeterminada',

package/i18n/locales/fr.ts

@@ -21,6 +21,15 @@ export default {
     desktop: 'Bureau',
     error: 'Erreur',
     errore: 'Erreur',
+    errors: {
+      forbidden: "Vous n'avez pas la permission d'effectuer cette action.",
+      generic: 'Une erreur inattendue est survenue. Veuillez réessayer.',
+      not_found: "La ressource demandée n'a pas été trouvée.",
+      server_error: 'Une erreur serveur est survenue. Veuillez réessayer plus tard.',
+      service_unavailable:
+        'Le service est temporairement indisponible. Veuillez réessayer plus tard.',
+      session_expired: 'Votre session a expiré. Veuillez vous reconnecter.',
+    },
     imageUpload: {
       imageJpgPngOnly: 'Seuls les fichiers image JPG et PNG sont pris en charge.',
       mediaFileTooLarge: 'Le fichier est trop volumineux. Taille maximale : {maxSize} Mo.',
@@ -45,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',
   },
@@ -657,6 +670,7 @@ export default {
         button_bg_color: 'Fond',
         button_text_color: 'Texte',
         change_logo: 'Changer le logo',
+        colors: 'Couleurs',
         contact_address: 'Adresse',
         contact_address_placeholder: 'Ex. Via Roma 1, 39100 Bolzano',
         contact_email: 'Email',
@@ -667,7 +681,6 @@ export default {
         contact_telephone_placeholder: 'Ex. +39 0471 123456',
         contact_website: 'Site web',
         contact_website_placeholder: 'Ex. https://www.hotel.com',
-        colors: 'Couleurs',
         default_button_colors: 'Couleurs de bouton par défaut',
         default_email_colors: "Couleurs d'e-mail par défaut",
         default_font: 'Police par défaut',

package/i18n/locales/it.ts

@@ -21,6 +21,14 @@ export default {
     desktop: 'Desktop',
     error: 'Errore',
     errore: 'Errore',
+    errors: {
+      forbidden: 'Non hai i permessi per eseguire questa azione.',
+      generic: 'Si è verificato un errore imprevisto. Riprova.',
+      not_found: 'La risorsa richiesta non è stata trovata.',
+      server_error: 'Si è verificato un errore del server. Riprova più tardi.',
+      service_unavailable: 'Il servizio è temporaneamente non disponibile. Riprova più tardi.',
+      session_expired: "La sessione è scaduta. Effettua nuovamente l'accesso.",
+    },
     imageUpload: {
       imageJpgPngOnly: 'Sono supportati solo file immagine JPG e PNG.',
       mediaFileTooLarge: 'Il file è troppo grande. Dimensione massima: {maxSize}MB.',
@@ -45,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ù',
   },
@@ -651,6 +663,7 @@ export default {
         button_bg_color: 'Sfondo',
         button_text_color: 'Testo',
         change_logo: 'Cambia logo',
+        colors: 'Colori',
         contact_address: 'Indirizzo',
         contact_address_placeholder: 'Es. Via Roma 1, 39100 Bolzano',
         contact_email: 'Email',
@@ -661,7 +674,6 @@ export default {
         contact_telephone_placeholder: 'Es. +39 0471 123456',
         contact_website: 'Sito web',
         contact_website_placeholder: 'Es. https://www.hotel.com',
-        colors: 'Colori',
         default_button_colors: 'Colori pulsante predefiniti',
         default_email_colors: 'Colori email predefiniti',
         default_font: 'Font predefinito',

package/package.json

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