@myparcel-dev/pdk-admin 2.2.2 → 2.2.3

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 <!-- MONOWEAVE:BELOW -->
 
+## [2.2.3](https://github.com/myparcelnl/js-pdk/compare/@myparcel-dev/pdk-admin@2.2.2...@myparcel-dev/pdk-admin@2.2.3) "@myparcel-dev/pdk-admin" (2026-09-09)
+
+
+### Bug Fixes
+
+* **notifications:** show action errors and match bulk order tags ([#432](https://github.com/myparcelnl/js-pdk/issues/432)) ([81a476e](https://github.com/myparcelnl/js-pdk/commit/81a476ea092bc3b0bcdc7da03715b5b6a82362bc)), closes [myparcelnl/pdk#528](https://github.com/myparcelnl/pdk/issues/528)
+
+
+
+
 ## [2.2.2](https://github.com/myparcelnl/js-pdk/compare/@myparcel-dev/pdk-admin@2.2.1...@myparcel-dev/pdk-admin@2.2.2) "@myparcel-dev/pdk-admin" (2026-08-19)
 
 

package/dist/utils/index.d.ts

@@ -10,6 +10,7 @@ export * from './forms';
 export * from './generateLabelFilename';
 export * from './getOrderId';
 export * from './getOrderShipmentIds';
+export * from './notificationBelongsToOrder';
 export * from './openUrlInNewTab';
 export * from './prefixComponent';
 export * from './query';

package/dist/utils/notificationBelongsToOrder.d.ts

@@ -0,0 +1,6 @@
+import { type PdkNotification } from '../types';
+/**
+ * A backend notification is tagged with every order the action ran for, so an order list column
+ * matches on that list instead of on the whole tag.
+ */
+export declare const notificationBelongsToOrder: (notification: Pick<PdkNotification, "tags">, externalIdentifier?: string) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myparcel-dev/pdk-admin",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/myparcelnl/js-pdk.git",

package/src/actions/executors/executeHandler.spec.ts

@@ -0,0 +1,99 @@
+// @vitest-environment happy-dom
+
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {ApiException} from '@myparcel-dev/sdk';
+import {Variant} from '@myparcel-dev/pdk-common';
+import {useNotificationStore} from '../../stores';
+import {NotificationCategory} from '../../data';
+import {doComponentTestSetup, doComponentTestTeardown} from '../../__tests__';
+import {type ActionContext} from './types';
+import {executeHandler} from './executeHandler';
+
+const ERROR_NOTIFICATION = {
+  category: NotificationCategory.Action,
+  title: 'Something went wrong',
+  variant: Variant.Error,
+};
+
+const BACKEND_NOTIFICATION = {
+  category: NotificationCategory.Action,
+  content: ['Street is required.'],
+  title: 'The given data was invalid.',
+  variant: Variant.Error,
+};
+
+const createContext = (handler: () => Promise<unknown>): ActionContext =>
+  ({
+    action: {name: 'ordersPrint', handler},
+    instance: {logger: {debug: vi.fn(), error: vi.fn()}},
+    notifications: {[Variant.Error]: ERROR_NOTIFICATION},
+    parameters: {},
+  } as unknown as ActionContext);
+
+/**
+ * PdkFetchClient adds the notifications of an error response to the store and then throws.
+ */
+const createApiException = (notifications?: unknown[]): ApiException => {
+  const store = useNotificationStore();
+
+  notifications?.forEach((notification) => store.add(notification as never));
+
+  return new ApiException({
+    errors: [{code: 400, message: 'Request failed.'}],
+    ...(notifications ? {notifications} : {}),
+  } as never);
+};
+
+describe('executeHandler', () => {
+  beforeEach(() => {
+    doComponentTestSetup();
+  });
+
+  afterEach(() => {
+    doComponentTestTeardown();
+  });
+
+  it('reports a failing action to the user', async () => {
+    const context = createContext(() => Promise.reject(new Error('Printing failed')));
+
+    await executeHandler(context);
+
+    expect(useNotificationStore().notifications).toMatchObject([
+      {category: NotificationCategory.Action, content: 'Printing failed', variant: Variant.Error},
+    ]);
+  });
+
+  it('does not report a failure the backend already reported', async () => {
+    const store = useNotificationStore();
+    const context = createContext(() => Promise.reject(createApiException([BACKEND_NOTIFICATION])));
+
+    await executeHandler(context);
+
+    expect(store.notifications).toHaveLength(1);
+    expect(store.notifications[0].title).toBe('The given data was invalid.');
+  });
+
+  it('reports a failure the backend did not report itself', async () => {
+    const store = useNotificationStore();
+    const context = createContext(() => Promise.reject(createApiException()));
+
+    await executeHandler(context);
+
+    expect(store.notifications).toMatchObject([{title: 'Something went wrong', variant: Variant.Error}]);
+  });
+
+  it('still reports the failure when an unrelated error notification is in the store', async () => {
+    const store = useNotificationStore();
+
+    const context = createContext(() => {
+      store.add({category: NotificationCategory.Api, content: 'Unrelated', variant: Variant.Error});
+
+      return Promise.reject(new Error('Printing failed'));
+    });
+
+    await executeHandler(context);
+
+    expect(store.notifications).toHaveLength(2);
+    expect(store.notifications[1]).toMatchObject({content: 'Printing failed', variant: Variant.Error});
+  });
+});

package/src/actions/executors/executeHandler.ts

@@ -1,3 +1,4 @@
+import {ApiException} from '@myparcel-dev/sdk';
 import {type ActionResponse, type MaybeAdminAction} from '../../types';
 import {useNotificationStore} from '../../stores';
 import {NotificationCategory} from '../../data';
@@ -25,7 +26,13 @@ export async function executeHandler<A extends MaybeAdminAction>(
 
     return response as ActionResponse<A>;
   } catch (error) {
-    if (notifications?.error && error instanceof Error) {
+    // The backend reports a failure through the notifications in its error response, which
+    // PdkFetchClient adds to the store. Only fall back to a generic message when the response
+    // carried none, for example because the request never reached the backend.
+    const reported =
+      error instanceof ApiException && Boolean((error.data as {notifications?: unknown[]}).notifications?.length);
+
+    if (!reported && notifications?.error && error instanceof Error) {
       store.add({...notifications.error, timeout: false, content: error.message}, context.parameters);
     }
 

package/src/services/actions/createActionContext.ts

@@ -38,6 +38,9 @@ export const createActionContext = <A extends MaybeAdminAction>(
       (acc, variant) => ({
         ...acc,
         [variant]: createNotification(variant, {
+          // Action notifications are the only ones rendered next to the order and in the order
+          // box, which is where a failing action has to report itself.
+          category: NotificationCategory.Action,
           tags: {
             action: identifier,
           },

package/src/services/createNotification.spec.ts

@@ -0,0 +1,66 @@
+// @vitest-environment happy-dom
+
+import {afterAll, afterEach, beforeAll, beforeEach, describe, expect, it} from 'vitest';
+import {mount} from '@vue/test-utils';
+import {Variant} from '@myparcel-dev/pdk-common';
+import {type PdkNotification} from '../types';
+import {useQueryStore} from '../stores';
+import {NotificationCategory} from '../data';
+import {doComponentTestSetup, doComponentTestTeardown, mockDefaultTranslations} from '../__tests__';
+import {createNotification} from './createNotification';
+
+/**
+ * createNotification needs the translations, which are only available inside a setup context.
+ */
+const create = (options: Parameters<typeof createNotification>[1]): undefined | PdkNotification => {
+  let notification: undefined | PdkNotification;
+
+  mount({
+    setup() {
+      useQueryStore().registerContextQueries();
+      notification = createNotification(Variant.Error, options);
+
+      return () => null;
+    },
+  });
+
+  return notification;
+};
+
+describe('createNotification', () => {
+  beforeAll(() => {
+    mockDefaultTranslations.mockReturnValue({
+      notification_action_error: 'Something went wrong',
+      notification_action_error_body: 'Try again later.',
+    });
+  });
+
+  beforeEach(() => {
+    doComponentTestSetup();
+  });
+
+  afterEach(() => {
+    doComponentTestTeardown();
+  });
+
+  afterAll(() => {
+    mockDefaultTranslations.mockReset();
+  });
+
+  it('translates the title it derives from the category', () => {
+    expect(create({category: NotificationCategory.Action})).toMatchObject({
+      category: NotificationCategory.Action,
+      content: 'Try again later.',
+      title: 'Something went wrong',
+      variant: Variant.Error,
+    });
+  });
+
+  it('leaves a title that was passed in untouched', () => {
+    expect(create({title: 'Street is required.'})?.title).toBe('Street is required.');
+  });
+
+  it('returns undefined when there is nothing to show', () => {
+    expect(create({category: NotificationCategory.General})).toBeUndefined();
+  });
+});

package/src/services/createNotification.ts

@@ -22,14 +22,18 @@ export const createNotification = (
     return notification;
   }
 
-  const title = `${PREFIX}${identifier ?? options?.category ?? NotificationCategory.General}_${variant}`;
-  const contentKey = `${title}_body`;
+  const titleKey = `${PREFIX}${identifier ?? options?.category ?? NotificationCategory.General}_${variant}`;
+  const contentKey = `${titleKey}_body`;
 
   const content = language.has(contentKey) ? language.translate(contentKey) : undefined;
 
-  if (!language.has(title) && !content) {
+  if (!language.has(titleKey) && !content) {
     return undefined;
   }
 
+  // No notification component translates the title, so resolve it here instead of handing them a
+  // translation key to render verbatim.
+  const title = language.has(titleKey) ? language.translate(titleKey) : undefined;
+
   return {...notification, title, content};
 };

package/src/utils/index.ts

@@ -10,6 +10,7 @@ export * from './forms';
 export * from './generateLabelFilename';
 export * from './getOrderId';
 export * from './getOrderShipmentIds';
+export * from './notificationBelongsToOrder';
 export * from './openUrlInNewTab';
 export * from './prefixComponent';
 export * from './query';

package/src/utils/notificationBelongsToOrder.spec.ts

@@ -0,0 +1,28 @@
+import {describe, expect, it} from 'vitest';
+import {notificationBelongsToOrder} from './notificationBelongsToOrder';
+
+describe('notificationBelongsToOrder', () => {
+  it('matches the order the notification was tagged with', () => {
+    expect(notificationBelongsToOrder({tags: {orderIds: '123'}}, '123')).toBe(true);
+  });
+
+  it('matches an order inside a bulk action tag', () => {
+    expect(notificationBelongsToOrder({tags: {orderIds: '123,456,789'}}, '456')).toBe(true);
+  });
+
+  it('does not match another order', () => {
+    expect(notificationBelongsToOrder({tags: {orderIds: '123,456'}}, '999')).toBe(false);
+  });
+
+  it('does not match a partial order id', () => {
+    expect(notificationBelongsToOrder({tags: {orderIds: '1234'}}, '123')).toBe(false);
+  });
+
+  it('does not match an untagged notification', () => {
+    expect(notificationBelongsToOrder({tags: {}}, '123')).toBe(false);
+  });
+
+  it('does not match when there is no order', () => {
+    expect(notificationBelongsToOrder({tags: {orderIds: '123'}}, undefined)).toBe(false);
+  });
+});

package/src/utils/notificationBelongsToOrder.ts

@@ -0,0 +1,18 @@
+import {type PdkNotification} from '../types';
+
+/**
+ * A backend notification is tagged with every order the action ran for, so an order list column
+ * matches on that list instead of on the whole tag.
+ */
+export const notificationBelongsToOrder = (
+  notification: Pick<PdkNotification, 'tags'>,
+  externalIdentifier?: string,
+): boolean => {
+  const {orderIds} = notification.tags ?? {};
+
+  if (!orderIds || !externalIdentifier) {
+    return false;
+  }
+
+  return orderIds.split(',').includes(externalIdentifier);
+};

package/src/views/OrderListItem.vue

@@ -21,6 +21,7 @@ import {useActionStore, useQueryStore} from '../stores';
 import {NotificationCategory, OrderMode} from '../data';
 import {useOrderData, useOrderMode} from '../composables';
 import {NotificationContainer} from '../components';
+import {notificationBelongsToOrder} from '../utils';
 
 /* eslint-disable @typescript-eslint/naming-convention */
 const OrderModeOrderListItem = defineAsyncComponent(() => {
@@ -46,6 +47,6 @@ const orderMode = useOrderMode();
 const {query} = useOrderData();
 
 const notificationFilter: NotificationFilter = (notification) => {
-  return notification.tags?.orderIds === toValue(query.data)?.externalIdentifier;
+  return notificationBelongsToOrder(notification, toValue(query.data)?.externalIdentifier);
 };
 </script>