@myparcel-dev/pdk-admin 2.2.3 → 2.2.4

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 <!-- 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)
 
 

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/package.json

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

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/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))