@pinelab/vendure-plugin-qls-fulfillment 2.3.0 → 3.0.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# 3.0.0 (2026-07-29)
+
+- Migrated to React Dashboard.
+- Added React Dashboard action bar items for product sync, order link, push order, variant link, and adding additional EANs.
+- Kept legacy Angular Admin UI action bar items for backward compatibility.
+- Corrected the UI permission for the "Push order to QLS" action to `QLSPushOrder`.
+
 # 2.3.0 (2026-08-05)
 
 - Extra prompt before adding an additional EAN

package/dist/dashboard/components/AddAdditionalEanButton.tsx

@@ -0,0 +1,121 @@
+import {
+  api,
+  Button,
+  ConfirmationDialog,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+} from '@vendure/dashboard';
+import { useMutation } from '@tanstack/react-query';
+import { QrCode } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { addAdditionalEanToQlsDocument } from '../qls-dashboard.graphql';
+
+interface AddAdditionalEanButtonProps {
+  context: { entity?: any };
+}
+
+/**
+ * Action bar button on the product variant detail page that prompts
+ * for an additional EAN and sends it to QLS.
+ *
+ * NOTE: This is deliberately a regular action bar button and NOT a dropdown
+ * (`type: 'dropdown'`) action bar item. Dropdown items are rendered inside a
+ * Base UI menu popup, which unmounts its children when the menu closes, and
+ * while the (modal) menu is open it intercepts keyboard events. Both make it
+ * impossible to have a working dialog with a text input inside a dropdown
+ * item. Vendure itself only uses button-only AlertDialogs inside dropdown
+ * menus; dialogs with inputs are always opened from outside a menu.
+ */
+export function AddAdditionalEanButton({
+  context,
+}: AddAdditionalEanButtonProps) {
+  const variantId = context.entity?.id;
+  const variantName = context.entity?.name;
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [ean, setEan] = useState('');
+
+  const { mutate: addEan, isPending } = useMutation({
+    mutationFn: () =>
+      api.mutate(addAdditionalEanToQlsDocument, {
+        variantId: variantId!,
+        additionalEANS: [ean],
+      }),
+    onSuccess: () => {
+      toast.success(`Added EAN ${ean} to QLS`);
+      setEan('');
+      setDialogOpen(false);
+    },
+    onError: (err: Error) => {
+      toast.error(err.message ?? 'Failed to add EAN to QLS');
+    },
+  });
+
+  const handleConfirm = () => {
+    if (!ean.trim()) {
+      return;
+    }
+    addEan();
+  };
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        disabled={!variantId}
+        onClick={() => setDialogOpen(true)}
+      >
+        <QrCode className="mr-2 h-4 w-4" />
+        Add EAN
+      </Button>
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Add additional EAN to QLS</DialogTitle>
+            <DialogDescription>
+              Enter the additional EAN to add to this variant in QLS.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor="ean">EAN</Label>
+              <Input
+                id="ean"
+                value={ean}
+                onChange={(e) => setEan(e.target.value)}
+                placeholder="EAN"
+                disabled={isPending}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="secondary"
+              disabled={isPending}
+              onClick={() => setDialogOpen(false)}
+            >
+              Cancel
+            </Button>
+            <ConfirmationDialog
+              title="Weet je het zeker?"
+              description={`Wil je EAN "${ean}" toevoegen aan product "${variantName}"?`}
+              onConfirm={handleConfirm}
+            >
+              <Button type="button" disabled={!ean.trim() || isPending}>
+                Add EAN
+              </Button>
+            </ConfirmationDialog>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/dist/dashboard/components/PushOrderToQlsMenuItem.tsx

@@ -0,0 +1,99 @@
+import {
+  api,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DropdownMenuItem,
+} from '@vendure/dashboard';
+import { useQuery, useMutation } from '@tanstack/react-query';
+import { RefreshCw } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import {
+  orderQlsIdsDocument,
+  pushOrderToQlsDocument,
+} from '../qls-dashboard.graphql';
+
+interface PushOrderToQlsMenuItemProps {
+  context: { entity?: any };
+}
+
+/**
+ * Dropdown action bar item on the order detail page that pushes the order
+ * to QLS. If the order already exists in QLS, a confirmation dialog is shown.
+ */
+export function PushOrderToQlsMenuItem({
+  context,
+}: PushOrderToQlsMenuItemProps) {
+  const orderId = context.entity?.id;
+  const [confirmOpen, setConfirmOpen] = useState(false);
+
+  const { data: orderData } = useQuery({
+    queryKey: ['qls-order-ids', orderId],
+    queryFn: () => api.query(orderQlsIdsDocument, { id: orderId! }),
+    enabled: !!orderId,
+  });
+
+  const { mutate: pushOrder, isPending } = useMutation({
+    mutationFn: () => api.mutate(pushOrderToQlsDocument, { orderId: orderId! }),
+    onSuccess: (message) => {
+      toast.success(message ?? 'Order pushed to QLS');
+      setConfirmOpen(false);
+    },
+    onError: (err: Error) => {
+      toast.error(err.message ?? 'Failed to push order to QLS');
+    },
+  });
+
+  const handleClick = () => {
+    const existingIds = orderData?.order?.qlsOrderIds ?? [];
+    if (existingIds.length > 0) {
+      setConfirmOpen(true);
+    } else {
+      pushOrder();
+    }
+  };
+
+  return (
+    <>
+      <DropdownMenuItem disabled={!orderId || isPending} onClick={handleClick}>
+        <RefreshCw
+          className={`mr-2 h-4 w-4 ${isPending ? 'animate-spin' : ''}`}
+        />
+        Push order to QLS
+      </DropdownMenuItem>
+      <Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Push order to QLS</DialogTitle>
+            <DialogDescription>
+              This order already exists in QLS. Are you sure you want to push it
+              again?
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => setConfirmOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              disabled={isPending}
+              onClick={() => pushOrder()}
+            >
+              Push to QLS
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/dist/dashboard/components/SyncProductsMenuItem.tsx

@@ -0,0 +1,31 @@
+import { api, DropdownMenuItem } from '@vendure/dashboard';
+import { useMutation } from '@tanstack/react-query';
+import { RefreshCw } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { triggerQlsProductSyncDocument } from '../qls-dashboard.graphql';
+
+/**
+ * Dropdown action bar item on the product list that triggers a full
+ * product synchronization with QLS.
+ */
+export function SyncProductsMenuItem() {
+  const { mutate: sync, isPending } = useMutation({
+    mutationFn: () => api.mutate(triggerQlsProductSyncDocument, {}),
+    onSuccess: () => {
+      toast.success('Triggered QLS full product sync...');
+    },
+    onError: (err: Error) => {
+      toast.error(err.message ?? 'Failed to trigger QLS product sync');
+    },
+  });
+
+  return (
+    <DropdownMenuItem disabled={isPending} onClick={() => sync()}>
+      <RefreshCw
+        className={`mr-2 h-4 w-4 ${isPending ? 'animate-spin' : ''}`}
+      />
+      Synchronize with QLS
+    </DropdownMenuItem>
+  );
+}

package/dist/dashboard/components/VisitQlsOrderButton.tsx

@@ -0,0 +1,52 @@
+import { api, Button } from '@vendure/dashboard';
+import { ExternalLink } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { orderQlsUrlDocument } from '../qls-dashboard.graphql';
+
+interface VisitQlsOrderButtonProps {
+  context: { entity?: any };
+}
+
+/**
+ * Action bar button on the order detail page that opens the linked QLS order
+ * in a new tab. Only renders when the order has been placed.
+ */
+export function VisitQlsOrderButton({ context }: VisitQlsOrderButtonProps) {
+  const orderId = context.entity?.id;
+  const orderPlacedAt = context.entity?.orderPlacedAt;
+  const [isPending, setIsPending] = useState(false);
+
+  if (!orderPlacedAt) {
+    return null;
+  }
+
+  const handleClick = async () => {
+    if (!orderId) {
+      toast.error('No order selected.');
+      return;
+    }
+    setIsPending(true);
+    try {
+      const result = await api.query(orderQlsUrlDocument, { id: orderId });
+      const url = result.order?.qlsOrderUrl;
+      if (url) {
+        window.open(url, '_blank');
+      } else {
+        toast.error('No QLS order found for this order.');
+      }
+    } catch (err: any) {
+      toast.error(err?.message ?? 'Failed to load QLS order URL');
+    } finally {
+      setIsPending(false);
+    }
+  };
+
+  return (
+    <Button variant="outline" disabled={isPending} onClick={handleClick}>
+      <ExternalLink className="mr-2 h-4 w-4" />
+      QLS
+    </Button>
+  );
+}

package/dist/dashboard/components/VisitQlsProductButton.tsx

@@ -0,0 +1,49 @@
+import { api, Button } from '@vendure/dashboard';
+import { ExternalLink } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { productVariantQlsUrlDocument } from '../qls-dashboard.graphql';
+
+interface VisitQlsProductButtonProps {
+  context: { entity?: any };
+}
+
+/**
+ * Action bar button on the product variant detail page that opens the linked
+ * QLS product in a new tab.
+ */
+export function VisitQlsProductButton({ context }: VisitQlsProductButtonProps) {
+  const variantId = context.entity?.id;
+  const [isPending, setIsPending] = useState(false);
+
+  const handleClick = async () => {
+    if (!variantId) {
+      toast.error('No variant selected.');
+      return;
+    }
+    setIsPending(true);
+    try {
+      const result = await api.query(productVariantQlsUrlDocument, {
+        id: variantId,
+      });
+      const url = result.productVariant?.qlsProductUrl;
+      if (url) {
+        window.open(url, '_blank');
+      } else {
+        toast.error('No QLS product found for this variant.');
+      }
+    } catch (err: any) {
+      toast.error(err?.message ?? 'Failed to load QLS product URL');
+    } finally {
+      setIsPending(false);
+    }
+  };
+
+  return (
+    <Button variant="outline" disabled={isPending} onClick={handleClick}>
+      <ExternalLink className="mr-2 h-4 w-4" />
+      QLS
+    </Button>
+  );
+}

package/dist/dashboard/index.tsx

@@ -0,0 +1,48 @@
+import { defineDashboardExtension } from '@vendure/dashboard';
+
+import { AddAdditionalEanButton } from './components/AddAdditionalEanButton';
+import { PushOrderToQlsMenuItem } from './components/PushOrderToQlsMenuItem';
+import { SyncProductsMenuItem } from './components/SyncProductsMenuItem';
+import { VisitQlsOrderButton } from './components/VisitQlsOrderButton';
+import { VisitQlsProductButton } from './components/VisitQlsProductButton';
+
+/**
+ * React Dashboard extension for the QLS fulfillment plugin.
+ *
+ * Replicates the legacy Angular action-bar items as dashboard action bar items.
+ */
+defineDashboardExtension({
+  actionBarItems: [
+    {
+      id: 'qls-sync-products',
+      pageId: 'product-list',
+      type: 'dropdown',
+      requiresPermission: 'QLSFullSync',
+      component: () => <SyncProductsMenuItem />,
+    },
+    {
+      id: 'qls-visit-order',
+      pageId: 'order-detail',
+      component: ({ context }) => <VisitQlsOrderButton context={context} />,
+    },
+    {
+      id: 'qls-push-order',
+      pageId: 'order-detail',
+      type: 'dropdown',
+      requiresPermission: 'QLSPushOrder',
+      component: ({ context }) => <PushOrderToQlsMenuItem context={context} />,
+    },
+    {
+      id: 'qls-visit-product',
+      pageId: 'product-variant-detail',
+      component: ({ context }) => <VisitQlsProductButton context={context} />,
+    },
+    {
+      id: 'qls-add-ean',
+      pageId: 'product-variant-detail',
+      // NOTE: intentionally not `type: 'dropdown'`, see AddAdditionalEanButton
+      requiresPermission: 'QLSFullSync',
+      component: ({ context }) => <AddAdditionalEanButton context={context} />,
+    },
+  ],
+});

package/dist/dashboard/qls-dashboard.graphql.ts

@@ -0,0 +1,49 @@
+import { graphql } from '@/gql';
+
+export const orderQlsUrlDocument = graphql(`
+  query OrderQlsUrl($id: ID!) {
+    order(id: $id) {
+      id
+      qlsOrderUrl
+    }
+  }
+`);
+
+export const orderQlsIdsDocument = graphql(`
+  query OrderQlsIds($id: ID!) {
+    order(id: $id) {
+      id
+      qlsOrderIds
+    }
+  }
+`);
+
+export const productVariantQlsUrlDocument = graphql(`
+  query ProductVariantQlsUrl($id: ID!) {
+    productVariant(id: $id) {
+      id
+      qlsProductUrl
+    }
+  }
+`);
+
+export const triggerQlsProductSyncDocument = graphql(`
+  mutation TriggerQlsProductSync {
+    triggerQlsProductSync
+  }
+`);
+
+export const pushOrderToQlsDocument = graphql(`
+  mutation PushOrderToQls($orderId: ID!) {
+    pushOrderToQls(orderId: $orderId)
+  }
+`);
+
+export const addAdditionalEanToQlsDocument = graphql(`
+  mutation AddAdditionalEanToQls($variantId: ID!, $additionalEANS: [String!]!) {
+    addAdditionalEANSToQLS(
+      variantId: $variantId
+      additionalEANS: $additionalEANS
+    )
+  }
+`);

package/dist/qls-plugin.js

@@ -49,6 +49,7 @@ QlsPlugin.ui = {
 exports.QlsPlugin = QlsPlugin = QlsPlugin_1 = __decorate([
     (0, core_1.VendurePlugin)({
         imports: [core_1.PluginCommonModule],
+        dashboard: './dashboard/index.tsx',
         providers: [
             {
                 provide: constants_1.PLUGIN_INIT_OPTIONS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pinelab/vendure-plugin-qls-fulfillment",
-  "version": "2.3.0",
+  "version": "3.0.0",
   "description": "Vendure plugin to fulfill orders via QLS.",
   "keywords": [
     "fulfillment",
@@ -23,7 +23,9 @@
     "CHANGELOG.md"
   ],
   "scripts": {
-    "build": "rimraf dist && yarn generate && tsc && copyfiles -u 1 'src/ui/**/*' dist/",
+    "build": "rimraf dist && yarn generate && tsc && copyfiles -u 1 'src/ui/**/*' 'src/dashboard/**/*' dist/",
+    "build:dashboard": "vite build --config ./vite.config.mts",
+    "dev:dashboard": "vite --clearScreen false",
     "start": "nodemon --watch src --exec ts-node test/dev-server.ts",
     "generate": "graphql-codegen",
     "test": "vitest run --bail 1",

package/dist/ui/providers.ts

@@ -1,246 +0,0 @@
-import {
-  addActionBarDropdownMenuItem,
-  addActionBarItem,
-  ModalService,
-} from '@vendure/admin-ui/core';
-import { firstValueFrom, of } from 'rxjs';
-import { map, catchError, take } from 'rxjs/operators';
-import gql from 'graphql-tag';
-
-export default [
-  // Product sync button in product list
-  addActionBarDropdownMenuItem({
-    id: 'qls-fulfillment-sync',
-    label: 'Synchronize with QLS',
-    locationId: 'product-list',
-    icon: 'resistor',
-    requiresPermission: ['QLSFullSync'],
-    onClick: (_, { dataService, notificationService }) => {
-      dataService
-        .mutate(
-          gql`
-            mutation TriggerQlsProductSync {
-              triggerQlsProductSync
-            }
-          `
-        )
-        .subscribe({
-          next: () => {
-            notificationService.notify({
-              message: `Triggered QLS full product sync...`,
-              type: 'success',
-            });
-          },
-          error: (err) => {
-            notificationService.notify({
-              message: err.message,
-              type: 'error',
-            });
-          },
-        });
-    },
-  }),
-  // QLS order link button on order detail page
-  addActionBarItem({
-    id: 'qls-visit-order',
-    label: 'QLS',
-    locationId: 'order-detail',
-    buttonColor: 'primary',
-    buttonStyle: 'outline',
-    icon: 'link',
-    buttonState: (context) => {
-      return context.entity$.pipe(
-        map((entity) => ({
-          visible: !!entity?.orderPlacedAt,
-          disabled: false,
-        }))
-      );
-    },
-    onClick: async (event, { route, dataService, notificationService }) => {
-      const orderId = route.snapshot.params.id;
-      const res = await firstValueFrom(
-        dataService.query(
-          gql`
-            query Order($orderId: ID!) {
-              order(id: $orderId) {
-                id
-                qlsOrderUrl
-              }
-            }
-          `,
-          { orderId }
-        ).single$
-      );
-      const url = (res as any).order.qlsOrderUrl;
-      if (url) {
-        window.open(url, '_blank');
-      } else {
-        notificationService.notify({
-          message: 'No QLS order found for this order.',
-          type: 'error',
-        });
-      }
-    },
-  }),
-  // QLS product link button on product variant detail page
-  addActionBarItem({
-    id: 'qls-visit-product',
-    label: 'QLS',
-    locationId: 'product-variant-detail',
-    buttonColor: 'primary',
-    buttonStyle: 'outline',
-    icon: 'link',
-    onClick: async (event, { route, dataService, notificationService }) => {
-      const variantId = route.snapshot.params.id;
-      const res = await firstValueFrom(
-        dataService.query(
-          gql`
-            query ProductVariant($id: ID!) {
-              productVariant(id: $id) {
-                id
-                qlsProductUrl
-              }
-            }
-          `,
-          { id: variantId }
-        ).single$
-      );
-      const url = (res as any).productVariant.qlsProductUrl;
-      if (url) {
-        window.open(url, '_blank');
-      } else {
-        notificationService.notify({
-          message: 'No QLS product found for this variant.',
-          type: 'error',
-        });
-      }
-    },
-  }),
-  // Push order to QLS button on order detail page
-  addActionBarDropdownMenuItem({
-    id: 'qls-fulfillment-push-order',
-    label: 'Push order to QLS',
-    locationId: 'order-detail',
-    icon: 'resistor',
-    requiresPermission: ['QLSFullSync'],
-    hasDivider: true,
-    onClick: async (
-      _,
-      { route, dataService, notificationService, injector }
-    ) => {
-      const orderId = route.snapshot.params.id;
-      const res = await firstValueFrom(
-        dataService.query(
-          gql`
-            query Order($orderId: ID!) {
-              order(id: $orderId) {
-                id
-                qlsOrderIds
-              }
-            }
-          `,
-          { orderId }
-        ).single$
-      );
-      if ((res as any).order.qlsOrderIds.length > 0) {
-        const modalService = injector.get(ModalService);
-        const confirmed = await firstValueFrom(
-          modalService.dialog({
-            title: 'Push order to QLS',
-            body: 'This order already exists in QLS. Are you sure you want to push it again?',
-            buttons: [
-              { type: 'secondary', label: 'Cancel', returnValue: false },
-              { type: 'primary', label: 'Push to QLS', returnValue: true },
-            ],
-          })
-        );
-        if (!confirmed) return;
-      }
-
-      dataService
-        .mutate(
-          gql`
-            mutation PushOrderToQls($orderId: ID!) {
-              pushOrderToQls(orderId: $orderId)
-            }
-          `,
-          { orderId }
-        )
-        .subscribe({
-          next: (result) => {
-            notificationService.notify({
-              message: (result as any).pushOrderToQls,
-              type: 'success',
-            });
-          },
-          error: (err) => {
-            notificationService.notify({
-              message: err.message,
-              type: 'error',
-            });
-          },
-        });
-    },
-  }),
-  addActionBarDropdownMenuItem({
-    id: 'qls-fulfillment-add-ean',
-    label: 'Add additional EAN to QLS',
-    locationId: 'product-variant-detail',
-    icon: 'resistor',
-    requiresPermission: ['QLSFullSync'],
-    onClick: async (
-      _,
-      { route, dataService, notificationService, entity$ }
-    ) => {
-      const ean = window.prompt('Enter additional EAN to add to QLS:');
-      if (!ean) {
-        return;
-      }
-      const variantId = route.snapshot.params.id;
-      try {
-        const variant = await firstValueFrom(entity$.pipe(take(1)));
-        const confirmed = window.confirm(
-          `Wil je EAN "${ean}" toevoegen aan "${variant?.name}"?`
-        );
-        if (!confirmed) {
-          return;
-        }
-      } catch (err) {
-        notificationService.notify({
-          message: (err as any).message,
-          type: 'error',
-        });
-        return;
-      }
-      dataService
-        .mutate(
-          gql`
-            mutation AddAdditionalEANSToQLS(
-              $variantId: ID!
-              $additionalEANS: [String!]!
-            ) {
-              addAdditionalEANSToQLS(
-                variantId: $variantId
-                additionalEANS: $additionalEANS
-              )
-            }
-          `,
-          { variantId, additionalEANS: [ean] }
-        )
-        .subscribe({
-          next: () => {
-            notificationService.notify({
-              message: `Added EAN ${ean} to QLS`,
-              type: 'success',
-            });
-          },
-          error: (err) => {
-            notificationService.notify({
-              message: err.message,
-              type: 'error',
-            });
-          },
-        });
-    },
-  }),
-];