@myparcel-dev/pdk-admin 2.2.2 → 2.2.4

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 <!-- MONOWEAVE:BELOW -->
 
+## [2.2.4](https://github.com/myparcelnl/js-pdk/compare/@myparcel-dev/pdk-admin@2.2.3...@myparcel-dev/pdk-admin@2.2.4) "@myparcel-dev/pdk-admin" (2026-09-22)
+
+
+### Bug Fixes
+
+* **print:** print on every press when the label prompt is enabled ([#446](https://github.com/myparcelnl/js-pdk/issues/446)) ([1d6e022](https://github.com/myparcelnl/js-pdk/commit/1d6e02225b61cd794396063dd1ea8d34870a1557))
+
+
+
+
+## [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/actions/print/waitForLabelPrompt.d.ts

@@ -1,3 +1,11 @@
 import { type ActionContext } from '../executors';
 import { type ActionParameters, type PrintAction } from '../../types';
+/**
+ * Ask the merchant for the label options before printing. Use this as the `beforeHandle` of a
+ * print action, which the print actions do whenever the `label.prompt` setting is on.
+ *
+ * @param context The action context. Its parameters are merged with the submitted values.
+ * @returns The print parameters, or a rejection with `StopActionHandler` when the merchant
+ *   closes the modal instead of submitting it.
+ */
 export declare const waitForLabelPrompt: <A extends PrintAction>({ parameters, }: ActionContext<A>) => Promise<ActionParameters<A>>;

package/dist/types/context.types.d.ts

@@ -1,6 +1,7 @@
-import { type AdminContextKey, type Plugin } from '@myparcel-dev/pdk-common';
+import { type Raw } from 'vue';
 import { type FormInstance } from '@myparcel-dev/vue-form-builder';
 import { type OneOrMore, type Replace } from '@myparcel-dev/ts-utils';
+import { type AdminContextKey, type Plugin } from '@myparcel-dev/pdk-common';
 import { type AdminInstanceContextKey, type AdminModalKey } from '../data';
 import { type BackendPdkEndpointObject } from './endpoints.types';
 export type AdminContextObject = Replace<Plugin.ModelContextContextBag, 'global', GlobalAdminContext> & Partial<AdminInstanceContext>;
@@ -12,7 +13,7 @@ export type AdminInstanceContext = {
     [AdminInstanceContextKey.ProductIdentifier]: Plugin.ModelContextProductDataContext['externalIdentifier'];
 };
 type BaseModalContext = {
-    form?: FormInstance;
+    form?: Raw<FormInstance>;
 };
 export type AdminModalContext<T extends AdminModalKey = AdminModalKey> = (BaseModalContext & (T extends AdminModalKey.ShipmentOptions ? {
     orderIds?: OneOrMore<string>;

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.4",
   "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/actions/print/waitForLabelPrompt.spec.ts

@@ -0,0 +1,220 @@
+// @vitest-environment happy-dom
+
+import {defineComponent, h, KeepAlive} from 'vue';
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {config, mount} from '@vue/test-utils';
+import {useFormBuilder} from '@myparcel-dev/vue-form-builder';
+import {useActionStore, useModalStore, useNotificationStore, useQueryStore} from '../../stores';
+import {AdminAction, OrderMode} from '../../data';
+import {useOrderMode} from '../../composables/context/useOrderMode';
+import PrintOptionsModal from '../../components/modals/PrintOptionsModal.vue';
+import {mockDefaultPrintOptionsView} from '../../__tests__/mocks/mockDefaultPrintOptionsView';
+import {mockDefaultPluginSettings} from '../../__tests__/mocks/mockDefaultPluginSettings';
+import {doComponentTestSetup, doComponentTestTeardown} from '../../__tests__';
+
+const printOrders = vi.fn();
+const updateShipments = vi.fn();
+const fetchOrders = vi.fn();
+const fetchContext = vi.fn();
+
+vi.mock('../../sdk', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../sdk')>();
+
+  return {...actual, usePdkAdminApi: () => ({printOrders, updateShipments, fetchOrders, fetchContext})};
+});
+
+vi.mock('../../composables/context/useOrderMode', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../composables/context/useOrderMode')>();
+
+  return {...actual, useOrderMode: vi.fn()};
+});
+
+/** Mirrors WcModal and Bootstrap4Modal: the modal builds a new form on every open. */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const RebuildingModalStub = defineComponent({
+  name: 'RebuildingModalStub',
+  props: {actions: {type: Array, default: () => []}, modalKey: {type: String, default: null}, title: String},
+  setup(props, {slots}) {
+    const modalStore = useModalStore();
+
+    return () => {
+      const isOpen = props.modalKey && modalStore.opened === props.modalKey;
+
+      return h('div', isOpen ? [h(KeepAlive, () => slots.default?.({context: modalStore.context}))] : []);
+    };
+  },
+});
+
+/** Mirrors DefaultModal, which hides its content instead of unmounting it, so one form is reused. */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const ReusingModalStub = defineComponent({
+  name: 'ReusingModalStub',
+  props: {actions: {type: Array, default: () => []}, modalKey: {type: String, default: null}, title: String},
+  setup(props, {slots}) {
+    const modalStore = useModalStore();
+
+    return () => h('div', [slots.default?.({context: modalStore.context})]);
+  },
+});
+
+const ORDER_A = 'ORDER-A';
+const ORDER_B = 'ORDER-B';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const RowHost = defineComponent({
+  setup() {
+    const queryStore = useQueryStore();
+    const actionStore = useActionStore();
+
+    queryStore.registerContextQueries();
+    queryStore.registerOrderQueries(ORDER_A);
+    queryStore.registerOrderQueries(ORDER_B);
+    actionStore.registerOrderActions();
+
+    return () => h('div');
+  },
+});
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const ModalsHost = defineComponent({
+  setup() {
+    useQueryStore().registerContextQueries();
+    useActionStore().registerModalActions();
+
+    return () => h(PrintOptionsModal);
+  },
+});
+
+const mountApp = (): void => {
+  mount(ModalsHost);
+  mount(RowHost);
+};
+
+/** Press print on one order, fill in the modal and submit it. */
+const printOne = async (orderId: string): Promise<void> => {
+  const actionStore = useActionStore();
+  const modalStore = useModalStore();
+
+  const action = actionStore.dispatch(AdminAction.OrdersPrint, {orderIds: orderId} as never);
+
+  await vi.waitFor(() => expect(modalStore.context?.form).toBeTruthy());
+
+  await actionStore.dispatch('modal_submit');
+  await vi.waitFor(() => expect(modalStore.opened).toBeNull());
+  await action;
+};
+
+describe('waitForLabelPrompt', () => {
+  beforeEach(() => {
+    // The form registry is module-level, so a form built by the previous test would still be
+    // there when this one starts.
+    useFormBuilder().forms.value = {};
+
+    // One real field, so the form has values to submit and the merge into the print parameters
+    // is actually exercised.
+    vi.mocked(mockDefaultPrintOptionsView).mockReturnValue({
+      id: 'print-options',
+      children: [],
+      description: '',
+      subtext: '',
+      title: '',
+      elements: [{name: 'format', label: 'label_format', $component: 'TextInput'}],
+    } as never);
+
+    vi.mocked(mockDefaultPluginSettings).mockReturnValue({
+      label: {prompt: true, format: 'a4', output: 'download', position: [1, 2, 3, 4]},
+      order: {},
+    } as never);
+
+    doComponentTestSetup();
+    config.global.stubs.PdkModal = RebuildingModalStub as never;
+
+    vi.mocked(useOrderMode).mockReturnValue({value: OrderMode.Shipments} as never);
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => undefined);
+
+    printOrders.mockReset().mockResolvedValue({url: 'https://example.test/label.pdf'});
+    updateShipments.mockReset().mockResolvedValue([]);
+    fetchOrders.mockResolvedValue([{externalIdentifier: ORDER_A, shipments: [{id: 1}]}]);
+    fetchContext.mockResolvedValue([{}]);
+  });
+
+  afterEach(() => {
+    doComponentTestTeardown();
+  });
+
+  it('prints on every press, not only the first of the page', async () => {
+    mountApp();
+
+    await printOne(ORDER_A);
+    await printOne(ORDER_B);
+    await printOne(ORDER_A);
+
+    expect(printOrders).toHaveBeenCalledTimes(3);
+    expect(useNotificationStore().notifications).toHaveLength(0);
+  });
+
+  it('prints on every press when the modal reuses one form across opens', async () => {
+    config.global.stubs.PdkModal = ReusingModalStub as never;
+
+    mountApp();
+
+    await printOne(ORDER_A);
+    await printOne(ORDER_B);
+
+    expect(printOrders).toHaveBeenCalledTimes(2);
+  });
+
+  it('cancels silently when the modal is closed without submitting', async () => {
+    mountApp();
+
+    const actionStore = useActionStore();
+    const modalStore = useModalStore();
+
+    const action = actionStore.dispatch(AdminAction.OrdersPrint, {orderIds: ORDER_A} as never);
+
+    await vi.waitFor(() => expect(modalStore.context?.form).toBeTruthy());
+    modalStore.close();
+    await action;
+
+    expect(printOrders).not.toHaveBeenCalled();
+    expect(useNotificationStore().notifications).toHaveLength(0);
+  });
+
+  it('prints after a cancelled print', async () => {
+    mountApp();
+
+    const actionStore = useActionStore();
+    const modalStore = useModalStore();
+
+    const cancelled = actionStore.dispatch(AdminAction.OrdersPrint, {orderIds: ORDER_A} as never);
+
+    await vi.waitFor(() => expect(modalStore.context?.form).toBeTruthy());
+    modalStore.close();
+    await cancelled;
+
+    await printOne(ORDER_A);
+
+    expect(printOrders).toHaveBeenCalledTimes(1);
+  });
+
+  it('prints with the options the merchant picked in the modal', async () => {
+    mountApp();
+
+    const actionStore = useActionStore();
+    const modalStore = useModalStore();
+
+    const action = actionStore.dispatch(AdminAction.OrdersPrint, {orderIds: ORDER_A} as never);
+
+    await vi.waitFor(() => expect(modalStore.context?.form).toBeTruthy());
+
+    modalStore.context?.form?.setValues({format: 'a6'});
+
+    await actionStore.dispatch('modal_submit');
+    await vi.waitFor(() => expect(modalStore.opened).toBeNull());
+    await action;
+
+    expect(printOrders).toHaveBeenCalledWith(
+      expect.objectContaining({parameters: expect.objectContaining({format: 'a6'})}),
+    );
+  });
+});

package/src/actions/print/waitForLabelPrompt.ts

@@ -1,11 +1,19 @@
-import {markRaw} from 'vue';
-import {FormHook, useFormBuilder} from '@myparcel-dev/vue-form-builder';
+import {markRaw, watch} from 'vue';
+import {type FormInstance, FormHook, useFormBuilder} from '@myparcel-dev/vue-form-builder';
 import {StopActionHandler} from '../stopActionHandler';
 import {type ActionContext} from '../executors';
 import {type ActionParameters, type PrintAction} from '../../types';
 import {useModalStore} from '../../stores';
 import {AdminModalKey} from '../../data';
 
+/**
+ * Ask the merchant for the label options before printing. Use this as the `beforeHandle` of a
+ * print action, which the print actions do whenever the `label.prompt` setting is on.
+ *
+ * @param context The action context. Its parameters are merged with the submitted values.
+ * @returns The print parameters, or a rejection with `StopActionHandler` when the merchant
+ *   closes the modal instead of submitting it.
+ */
 export const waitForLabelPrompt = <A extends PrintAction>({
   parameters,
 }: ActionContext<A>): Promise<ActionParameters<A>> => {
@@ -13,27 +21,55 @@ export const waitForLabelPrompt = <A extends PrintAction>({
   const modalStore = useModalStore();
 
   return new Promise((resolve, reject) => {
-    formBuilder.on('afterRegister', (form) => {
-      modalStore.context ??= {};
-      // @ts-expect-error infinitely deep instantiation
-      modalStore.context.form = markRaw(form);
-
-      if (form.name !== AdminModalKey.PrintOptions) {
-        return;
-      }
-
-      form.on(FormHook.AfterSubmit, (instance) => {
-        resolve({
-          ...parameters,
-          ...instance.getValues(),
-        } as ActionParameters<A>);
-      });
-    });
+    /**
+     * Runs when the merchant submits the modal. Stops watching and takes this listener back off
+     * the form, so the next print can put its own listener on. `vue-form-builder` matches
+     * listeners by their source text and refuses one it already has, so a modal that reuses a
+     * single form would otherwise drop the next print's listener as a duplicate and never
+     * answer it.
+     */
+    const onAfterSubmit = (form: FormInstance): void => {
+      stopWatching();
+      form.off(FormHook.AfterSubmit, onAfterSubmit);
+
+      // Lets the print action carry on, printing with the options the merchant just picked.
+      // Those win over whatever the action was called with.
+      resolve({...parameters, ...form.getValues()} as ActionParameters<A>);
+    };
+
+    // Open before watching. Opening resets the modal context, which would wipe the form the
+    // watcher publishes there when the modal reuses a form it built earlier.
+    modalStore.open(AdminModalKey.PrintOptions);
+
+    // Listens for the print options form appearing or being replaced, and hooks every form it
+    // sees. The modal builds its form after it opens, and builds a fresh one on a later open,
+    // so binding once would bind to a form the merchant never fills in. A listener left behind
+    // on a replaced form does no harm, because `getForm` never returns that instance again.
+    const stopWatching = watch(
+      () => formBuilder.getForm(AdminModalKey.PrintOptions),
+      (form?: FormInstance) => {
+        if (!form) {
+          return;
+        }
+
+        // The modal's submit action reads the form back out of here.
+        modalStore.context ??= {};
+        modalStore.context.form = markRaw(form);
+
+        form.on(FormHook.AfterSubmit, onAfterSubmit);
+      },
+      // Immediate, because a modal that reuses its form already has one by the time we get
+      // here, and the watcher would never fire for it.
+      {immediate: true},
+    );
 
     modalStore.onClose(() => {
+      stopWatching();
+      formBuilder.getForm(AdminModalKey.PrintOptions)?.off(FormHook.AfterSubmit, onAfterSubmit);
+
+      // Ends the print action without printing anything. The executor reads a StopActionHandler
+      // as "the merchant cancelled", so it stops quietly instead of showing an error.
       reject(new StopActionHandler());
     });
-
-    modalStore.open(AdminModalKey.PrintOptions);
   });
 };

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/types/context.types.ts

@@ -1,6 +1,7 @@
-import {type AdminContextKey, type Plugin} from '@myparcel-dev/pdk-common';
+import {type Raw} from 'vue';
 import {type FormInstance} from '@myparcel-dev/vue-form-builder';
 import {type OneOrMore, type Replace} from '@myparcel-dev/ts-utils';
+import {type AdminContextKey, type Plugin} from '@myparcel-dev/pdk-common';
 import {type AdminInstanceContextKey, type AdminModalKey} from '../data';
 import {type BackendPdkEndpointObject} from './endpoints.types';
 
@@ -18,7 +19,9 @@ export type AdminInstanceContext = {
   [AdminInstanceContextKey.ProductIdentifier]: Plugin.ModelContextProductDataContext['externalIdentifier'];
 };
 
-type BaseModalContext = {form?: FormInstance};
+// The form is stored with markRaw, so Vue leaves its refs alone at runtime. Raw says that in
+// the type too, which keeps the store's deep ref-unwrapping off it.
+type BaseModalContext = {form?: Raw<FormInstance>};
 
 export type AdminModalContext<T extends AdminModalKey = AdminModalKey> =
   | (BaseModalContext & (T extends AdminModalKey.ShipmentOptions ? {orderIds?: OneOrMore<string>} : unknown))

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>