@myparcel-dev/pdk-admin 2.2.1 → 2.2.3

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 <!-- 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)
+
+
+### Bug Fixes
+
+* **insurance:** read insurance limits from the flat capabilities format ([#383](https://github.com/myparcelnl/js-pdk/issues/383)) ([8794c46](https://github.com/myparcelnl/js-pdk/commit/8794c46ee0ffce36fdad9b3e7dc95e44ee56af23)), closes [myparcelnl/pdk#511](https://github.com/myparcelnl/pdk/issues/511)
+
+
+
+
 ## [2.2.1](https://github.com/myparcelnl/js-pdk/compare/@myparcel-dev/pdk-admin@2.2.0...@myparcel-dev/pdk-admin@2.2.1) "@myparcel-dev/pdk-admin" (2026-08-07)
 
 

package/dist/forms/helpers/useFormCapabilities.d.ts

@@ -37,8 +37,8 @@ export type FormCapabilities = {
      */
     hasShipmentOption: (form: FormInstance, option: string) => boolean;
     /**
-     * Insurance amount bracket options derived from the currently selected carrier's
-     * `insuredAmount` data. Amounts in the context are in cents; emitted values are strings
+     * Insurance amount bracket options derived from the currently selected carrier's insurance
+     * limits (`min` / `max`). Amounts in the context are in cents; emitted values are strings
      * representing cent amounts so they round-trip through form select inputs unchanged.
      */
     getInsuranceOptions: (form: FormInstance, formatter: Formatter) => SelectOption[];

package/dist/forms/shipmentOptions/fieldFactoryRegistry.d.ts

@@ -15,7 +15,7 @@ export type FieldFactory = (refs: ShipmentOptionsRefs, fieldName: string) => Int
  * `carrier.options`) to its custom factory function.
  *
  * Current exceptions:
- * - `insurance`: renders as a select/dropdown with amount brackets derived from
- *   `insuredAmount` in the option data.
+ * - `insurance`: renders as a select/dropdown with amount brackets derived from the
+ *   `min` / `max` limits in the option data.
  */
 export declare const fieldFactoryRegistry: Record<string, FieldFactory>;

package/dist/forms/shipmentOptions/fields/createInsuranceField.d.ts

@@ -4,7 +4,7 @@ import { type ShipmentOptionsRefs } from '../types';
  * Custom field factory for the insurance shipment option.
  *
  * Renders as a select/dropdown instead of a TriState toggle. Insurance amount brackets are
- * derived from the currently selected carrier's shipment-scoped `insuredAmount` data (min/max)
+ * derived from the currently selected carrier's shipment-scoped insurance limits (min/max)
  * and refresh automatically whenever that data changes — i.e. on carrier change AND on
  * packageType / deliveryType / weight / cc change, since those all narrow the shipment-scoped
  * capabilities response.

package/dist/forms/shipmentOptions/wireProxyCapabilities.d.ts

@@ -13,8 +13,8 @@ import { type CapabilitiesSelection } from '../../actions/composables/queries/ac
  * - **Order query** drives the carrier / packageType / deliveryType dropdowns from each
  *   carrier's flat union arrays. Refetches only when destination, weight or the recipient
  *   business flag change.
- * - **Shipment query** drives per-option metadata (`isRequired`, `requires`, `excludes`,
- *   `insuredAmount`) for the chosen combination. Refetches when any axis of the selection
+ * - **Shipment query** drives per-option metadata (`isRequired`, `requires`, `excludes`, and the
+ *   insurance `min` / `max`) for the chosen combination. Refetches when any axis of the selection
  *   changes; the empty-result case is the invalid-combo signal consumed by
  *   `useCapabilitiesAutoClear`.
  *

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.1",
+  "version": "2.2.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/myparcelnl/js-pdk.git",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@myparcel-dev/constants": "^2.9.0",
-    "@myparcel-dev/pdk-common": "^2.1.1",
+    "@myparcel-dev/pdk-common": "^2.1.2",
     "@myparcel-dev/sdk": "^5.1.0",
     "@myparcel-dev/vue-form-builder": "1.0.0-beta.42.6",
     "@tanstack/vue-query": "~4.43.0",

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/forms/helpers/useFormCapabilities.spec.ts

@@ -182,11 +182,9 @@ describe('useFormCapabilities', () => {
         carrier: 'POSTNL',
         options: {
           insurance: {
-            insuredAmount: {
-              min: {amount: 0, currency: 'EUR'},
-              max: {amount: 0, currency: 'EUR'},
-              default: {amount: 0, currency: 'EUR'},
-            },
+            min: {amount: 0, currency: 'EUR'},
+            max: {amount: 0, currency: 'EUR'},
+            default: {amount: 0, currency: 'EUR'},
           } as never,
         },
       });
@@ -202,12 +200,10 @@ describe('useFormCapabilities', () => {
         carrier: 'POSTNL',
         options: {
           insurance: {
-            insuredAmount: {
-              min: {amount: 0, currency: 'EUR'},
-              // max is 1000€ in cents
-              max: {amount: 100_000, currency: 'EUR'},
-              default: {amount: 0, currency: 'EUR'},
-            },
+            min: {amount: 0, currency: 'EUR'},
+            // max is 1000€ in cents
+            max: {amount: 100_000, currency: 'EUR'},
+            default: {amount: 0, currency: 'EUR'},
           } as never,
         },
       });
@@ -223,5 +219,21 @@ describe('useFormCapabilities', () => {
       // the boundary semantics — replacing `<` with `<=` on LOW_THRESHOLD would shift these.
       expect(values.slice(1)).toEqual(['0', '25000', '50000', '100000']);
     });
+
+    it('returns [] when the carrier advertises insurance without limits', async () => {
+      // Stored carrier data that predates the flat limits: insurance is offered, but there is
+      // no max to build brackets up to, so there is nothing to enumerate into the dropdown.
+      const shipment = buildCarrier({
+        carrier: 'POSTNL',
+        options: {
+          insurance: {isRequired: false, isSelectedByDefault: false} as never,
+        },
+      });
+      queryStore.setQuery(shipmentModifier('order-1'), 'success', [shipment]);
+
+      const {useFormCapabilities} = await import('./useFormCapabilities');
+
+      expect(useFormCapabilities().getInsuranceOptions(formStub('POSTNL'), formatter)).toEqual([]);
+    });
   });
 });

package/src/forms/helpers/useFormCapabilities.ts

@@ -7,14 +7,6 @@ import {type AdminContext, type SelectOption} from '../../types';
 import {useQueryStore, type ResolvedQuery} from '../../stores';
 import {Format, type Formatter} from '../../composables';
 
-interface InsuranceAmountData {
-  insuredAmount?: {
-    min: {amount: number; currency: string};
-    max: {amount: number; currency: string};
-    default: {amount: number; currency: string};
-  };
-}
-
 /**
  * Bag of capability resolvers, each pre-bound to a Pinia store + orderId snapshot captured at
  * the composable's invocation time. Returned by {@link useFormCapabilities}.
@@ -53,8 +45,8 @@ export type FormCapabilities = {
   hasShipmentOption: (form: FormInstance, option: string) => boolean;
 
   /**
-   * Insurance amount bracket options derived from the currently selected carrier's
-   * `insuredAmount` data. Amounts in the context are in cents; emitted values are strings
+   * Insurance amount bracket options derived from the currently selected carrier's insurance
+   * limits (`min` / `max`). Amounts in the context are in cents; emitted values are strings
    * representing cent amounts so they round-trip through form select inputs unchanged.
    */
   getInsuranceOptions: (form: FormInstance, formatter: Formatter) => SelectOption[];
@@ -80,11 +72,10 @@ export type FormCapabilities = {
  * window focus, so we read `query.data` live on every resolver call rather than snapshotting
  * the carriers array at setup time.
  */
+// eslint-disable-next-line max-lines-per-function
 export const useFormCapabilities = (): FormCapabilities => {
   const queryStore = useQueryStore();
-  const dynamicContextQuery = queryStore.get(BackendEndpoint.FetchContext, AdminContextKey.Dynamic) as ResolvedQuery<
-    BackendEndpoint.FetchContext
-  >;
+  const dynamicContextQuery = queryStore.get(BackendEndpoint.FetchContext, AdminContextKey.Dynamic);
   const orderId = getOrderId();
 
   const orderModifier = typeof orderId === 'string' ? `${orderId}.order` : undefined;
@@ -97,7 +88,7 @@ export const useFormCapabilities = (): FormCapabilities => {
 
     if (toValue(query.status) !== 'success') return undefined;
 
-    return (toValue(query.data) ?? []) as CarrierModel[];
+    return toValue(query.data) ?? [];
   };
 
   const liveDynamicCarriers = (): CarrierModel[] => {
@@ -145,10 +136,10 @@ export const useFormCapabilities = (): FormCapabilities => {
     const STEP_THRESHOLD = 500;
 
     const carrier = getCarrierCapabilitiesForShipment(form);
-    const insuranceData = (carrier?.options?.insurance ?? {}) as InsuranceAmountData;
+    const insuranceData = carrier?.options?.insurance;
 
-    const min = insuranceData.insuredAmount?.min.amount ? insuranceData.insuredAmount.min.amount / 100 : 0;
-    const max = insuranceData.insuredAmount?.max.amount ? insuranceData.insuredAmount.max.amount / 100 : 0;
+    const min = insuranceData?.min?.amount ? insuranceData.min.amount / 100 : 0;
+    const max = insuranceData?.max?.amount ? insuranceData.max.amount / 100 : 0;
 
     if (max === 0) return [];
 

package/src/forms/shipmentOptions/createShipmentOptionsForm.ts

@@ -86,7 +86,7 @@ export const createShipmentOptionsForm = (orders?: OneOrMore<Plugin.ModelPdkOrde
  * `hasShipmentOption`, which checks whether the currently selected carrier
  * supports each option.
  *
- * Runtime carrier-specific data (isRequired, insuredAmount, etc.) is read
+ * Runtime carrier-specific data (isRequired, insurance limits, etc.) is read
  * from the currently selected carrier via `getCarrier(form)`, not from
  * creation-time option data.
  */

package/src/forms/shipmentOptions/fieldFactoryRegistry.ts

@@ -18,8 +18,8 @@ export type FieldFactory = (refs: ShipmentOptionsRefs, fieldName: string) => Int
  * `carrier.options`) to its custom factory function.
  *
  * Current exceptions:
- * - `insurance`: renders as a select/dropdown with amount brackets derived from
- *   `insuredAmount` in the option data.
+ * - `insurance`: renders as a select/dropdown with amount brackets derived from the
+ *   `min` / `max` limits in the option data.
  */
 export const fieldFactoryRegistry: Record<string, FieldFactory> = {
   insurance: createInsuranceField,

package/src/forms/shipmentOptions/fields/createInsuranceField.ts

@@ -13,7 +13,7 @@ import {createRef} from './createRef';
  * Custom field factory for the insurance shipment option.
  *
  * Renders as a select/dropdown instead of a TriState toggle. Insurance amount brackets are
- * derived from the currently selected carrier's shipment-scoped `insuredAmount` data (min/max)
+ * derived from the currently selected carrier's shipment-scoped insurance limits (min/max)
  * and refresh automatically whenever that data changes — i.e. on carrier change AND on
  * packageType / deliveryType / weight / cc change, since those all narrow the shipment-scoped
  * capabilities response.
@@ -39,7 +39,7 @@ export const createInsuranceField = (
 
       // Watch the shipment-scoped carrier capabilities directly. The resolver tracks both the
       // selected carrier (via `form.getValue(FIELD_CARRIER)`) and the shipment-capabilities
-      // query data, so any axis change that updates `insuredAmount` triggers a refresh.
+      // query data, so any axis change that updates the insurance limits triggers a refresh.
       stopWatcher = watch(
         () => capabilities.getCarrierCapabilitiesForShipment(field.form),
         () => {

package/src/forms/shipmentOptions/wireProxyCapabilities.ts

@@ -47,8 +47,8 @@ const resolveOrderInput = (form: FormInstance, order: Plugin.ModelContextOrderDa
  * - **Order query** drives the carrier / packageType / deliveryType dropdowns from each
  *   carrier's flat union arrays. Refetches only when destination, weight or the recipient
  *   business flag change.
- * - **Shipment query** drives per-option metadata (`isRequired`, `requires`, `excludes`,
- *   `insuredAmount`) for the chosen combination. Refetches when any axis of the selection
+ * - **Shipment query** drives per-option metadata (`isRequired`, `requires`, `excludes`, and the
+ *   insurance `min` / `max`) for the chosen combination. Refetches when any axis of the selection
  *   changes; the empty-result case is the invalid-combo signal consumed by
  *   `useCapabilitiesAutoClear`.
  *

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>