feat(notification): show api errors in general container

apps/admin/src/actions/composables/mutations/account/useUpdateAccountMutation.ts

@@ -48,9 +48,11 @@ export const useUpdateAccountMutation = (): ResolvedQuery<BackendEndpoint.Update
         const translation = 'error_invalid_api_key';
 
         notificationStore.add({
-          category: NotificationCategory.Api,
           content: translate(`${translation}_content`),
           title: translate(translation),
+          tags: {
+            category: NotificationCategory.Api,
+          },
           timeout: false,
           variant: Variant.Error,
         });

apps/admin/src/components/common/NotificationContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-test="[$.type.__name, category]">
+  <div v-test="[$.type.__name]">
     <TransitionGroup
       :name="config?.transitions?.notification"
       appear>
@@ -18,7 +18,6 @@ import {useNotificationStore} from '../../stores';
 import {useAdminConfig} from '../../composables';
 
 const props = defineProps<{
-  category: NotificationCategory;
   filter?: NotificationFilter;
 }>();
 
@@ -28,7 +27,7 @@ const notifications = computed(() => {
   const {notifications} = useNotificationStore();
 
   return notifications.filter((notification) => {
-    return notification.category === props.category && (props.filter ? props.filter?.(notification) : true);
+    return props.filter ? props.filter?.(notification) : true;
   });
 });
 </script>

apps/admin/src/forms/helpers/addBulkEditNotification.ts

@@ -10,8 +10,10 @@ export const addBulkEditNotification = (isModal: boolean): void => {
   notificationStore.add({
     id: TRANSLATION_KEY,
     variant: Variant.Info,
-    category: isModal ? NotificationCategory.Modal : undefined,
     content: `${TRANSLATION_KEY}_description`,
+    tags: {
+      category: isModal ? NotificationCategory.Modal : NotificationCategory.General,
+    },
     title: TRANSLATION_KEY,
     timeout: false,
   } as PdkNotification);

apps/admin/src/pdk/instance/createQueryClient.ts

@@ -1,21 +1,15 @@
 import {QueryClient} from '@tanstack/vue-query';
 import {NotificationCategory} from '../../types';
 import {useNotificationStore} from '../../stores';
-import {addErrorToNotifications} from '../../services';
 
 const clearApiNotifications = () => {
   useNotificationStore().remove(NotificationCategory.Api);
 };
 
-const addApiErrorNotification = (error: unknown) => {
-  addErrorToNotifications(error, NotificationCategory.Api);
-};
-
 export const createQueryClient = (): QueryClient =>
   new QueryClient({
     defaultOptions: {
       mutations: {
-        onError: addApiErrorNotification,
         onMutate: clearApiNotifications,
         retry: false,
       },
@@ -24,7 +18,6 @@ export const createQueryClient = (): QueryClient =>
         behavior: {
           onFetch: clearApiNotifications,
         },
-        onError: addApiErrorNotification,
         refetchInterval: false,
         refetchOnMount: false,
         refetchOnReconnect: false,

apps/admin/src/services/actions/createActionContext.ts

@@ -38,9 +38,9 @@ export const createActionContext = <A extends MaybeAdminAction>(
       (acc, variant) => ({
         ...acc,
         [variant]: createNotification(variant, {
-          category: NotificationCategory.Action,
           tags: {
             action: identifier,
+            category: NotificationCategory.Action,
           },
         }),
       }),

apps/admin/src/services/addErrorToNotifications.ts

@@ -1,13 +1,17 @@
 import {Variant} from '@myparcel-pdk/common';
 import {isOfType} from '@myparcel/ts-utils';
 import {type ApiException} from '@myparcel/sdk';
-import {type NotificationCategory, type PdkNotification} from '../types';
+import {type PdkNotification} from '../types';
 import {useNotificationStore} from '../stores';
 import {createNotification} from './createNotification';
 
-export const addErrorToNotifications = (error: unknown, category: NotificationCategory): void => {
+export const addErrorToNotifications = (
+  error: unknown,
+  tags: Record<string, string>,
+  timeout: boolean | number = false,
+): void => {
   const store = useNotificationStore();
-  const options: Partial<PdkNotification> = {category};
+  const options: Partial<PdkNotification> = {tags, timeout};
 
   if (isOfType<ApiException>(error, 'data')) {
     options.content = error.data.errors.map((error) => `${error.title} (code: ${error.code})`);

apps/admin/src/services/createNotification.ts

@@ -1,5 +1,5 @@
 import {type Variant} from '@myparcel-pdk/common';
-import {type PdkNotification} from '../types';
+import {type PdkNotification, NotificationCategory} from '../types';
 import {useLanguage} from '../composables';
 
 const PREFIX = 'notification_';
@@ -21,7 +21,7 @@ export const createNotification = (
     return notification;
   }
 
-  const title = `${PREFIX}${identifier ?? options?.category}_${variant}`;
+  const title = `${PREFIX}${identifier ?? options?.tags?.category ?? NotificationCategory.General}_${variant}`;
   const contentKey = `${title}_body`;
 
   const content = language.has(contentKey) ? language.translate(contentKey) : undefined;

apps/admin/src/services/mutations/getModalMutationOptions.ts

@@ -18,7 +18,7 @@ export const getModalMutationOptions = <
       useModalStore().loading = false;
     },
     onError(error) {
-      addErrorToNotifications(error, NotificationCategory.Modal);
+      addErrorToNotifications(error, {category: NotificationCategory.Modal});
     },
   };
 };

apps/admin/src/stores/useNotificationStore.ts

@@ -20,10 +20,10 @@ export const useNotificationStore = defineStore('notifications', () => {
       const resolvedNotification: ResolvedNotification = {
         timeout: true,
         dismissible: notification.timeout === false,
-        category: NotificationCategory.General,
         id: notification.id ?? autoId++,
         ...notification,
         tags: {
+          category: NotificationCategory.General,
           ...notification.tags,
           ...tags,
         },
@@ -54,7 +54,7 @@ export const useNotificationStore = defineStore('notifications', () => {
       let filter: (notification: ResolvedNotification) => boolean;
 
       if (isEnumValue(input, NotificationCategory)) {
-        filter = (notification) => notification.category !== input;
+        filter = (notification) => notification.tags?.category === input;
       } else {
         filter = (notification) => notification.id !== input;
       }

apps/admin/src/types/common.types.ts

@@ -6,7 +6,6 @@ import {type Translation} from './language.types';
 export type NotificationId = number | string;
 
 export interface PdkNotification {
-  category?: NotificationCategory;
   content?: OneOrMore<string>;
   dismissible?: boolean;
   /**
@@ -19,7 +18,7 @@ export interface PdkNotification {
   /**
    * Arbitrary tags that can be set to distinguish notifications from each other.
    */
-  tags?: Record<string, unknown>;
+  tags?: Record<string, string>;
   timeout?: boolean | number;
   title?: string;
   variant: Variant;

apps/admin/src/views/Notifications.vue

@@ -1,9 +1,8 @@
 <template>
-  <NotificationContainer :category="NotificationCategory.General" />
+  <NotificationContainer />
 </template>
 
 <!-- The notification container. Used to display notifications. -->
 <script lang="ts" setup>
-import {NotificationCategory} from '../types';
 import {NotificationContainer} from '../components';
 </script>