@vendure/dashboard 3.3.6-master-202507031127 → 3.3.6-master-202507031620

package/dist/plugin/vite-plugin-vendure-dashboard.js

@@ -32,7 +32,7 @@ export function vendureDashboardPlugin(options) {
             : [
                 TanStackRouterVite({
                     autoCodeSplitting: true,
-                    routeFileIgnorePattern: '.graphql.ts|components|hooks',
+                    routeFileIgnorePattern: '.graphql.ts|components|hooks|utils',
                     routesDirectory: path.join(packageRoot, 'src/app/routes'),
                     generatedRouteTree: path.join(packageRoot, 'src/app/routeTree.gen.ts'),
                 }),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vendure/dashboard",
   "private": false,
-  "version": "3.3.6-master-202507031127",
+  "version": "3.3.6-master-202507031620",
   "type": "module",
   "repository": {
     "type": "git",
@@ -65,7 +65,7 @@
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-scroll-area": "^1.2.3",
-    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.1.3",
@@ -86,8 +86,8 @@
     "@types/react-dom": "^19.0.4",
     "@types/react-grid-layout": "^1.3.5",
     "@uidotdev/usehooks": "^2.4.1",
-    "@vendure/common": "^3.3.6-master-202507031127",
-    "@vendure/core": "^3.3.6-master-202507031127",
+    "@vendure/common": "^3.3.6-master-202507031620",
+    "@vendure/core": "^3.3.6-master-202507031620",
     "@vitejs/plugin-react": "^4.3.4",
     "awesome-graphql-client": "^2.1.0",
     "class-variance-authority": "^0.7.1",
@@ -130,5 +130,5 @@
     "lightningcss-linux-arm64-musl": "^1.29.3",
     "lightningcss-linux-x64-musl": "^1.29.1"
   },
-  "gitHead": "82c67a6665c77f59b6bb2e652e73d4580ca4f291"
+  "gitHead": "d90e8efa64f0de407ec7402470ad21613885904c"
 }

package/src/app/routes/_authenticated/_orders/components/add-manual-payment-dialog.tsx

@@ -0,0 +1,191 @@
+import {
+    RelationSelector,
+    createRelationSelectorConfig,
+} from '@/vdb/components/data-input/relation-selector.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/vdb/components/ui/dialog.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { api } from '@/vdb/graphql/api.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import {
+    addManualPaymentToOrderDocument,
+    paymentMethodsDocument
+} from '../orders.graphql.js';
+import { Order } from '../utils/order-types.js';
+import { calculateOutstandingPaymentAmount } from '../utils/order-utils.js';
+
+interface AddManualPaymentDialogProps {
+    order: Order;
+    onSuccess?: () => void;
+}
+
+interface FormData {
+    method: string;
+    transactionId: string;
+}
+
+export function AddManualPaymentDialog({ order, onSuccess }: Readonly<AddManualPaymentDialogProps>) {
+    const { i18n } = useLingui();
+    const { formatCurrency } = useLocalFormat();
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [open, setOpen] = useState(false);
+
+    const addManualPaymentMutation = useMutation({
+        mutationFn: api.mutate(addManualPaymentToOrderDocument),
+        onSuccess: (result: any) => {
+            const { addManualPaymentToOrder } = result;
+            if (addManualPaymentToOrder.__typename === 'Order') {
+                toast(i18n.t('Successfully added payment to order'));
+                onSuccess?.();
+            } else {
+                toast(i18n.t('Failed to add payment'), {
+                    description: addManualPaymentToOrder.message,
+                });
+            }
+        },
+        onError: error => {
+            toast(i18n.t('Failed to add payment'), {
+                description: error instanceof Error ? error.message : 'Unknown error',
+            });
+        },
+    });
+
+    const form = useForm<FormData>({
+        defaultValues: {
+            method: '',
+            transactionId: '',
+        },
+    });
+    const method = form.watch('method');
+
+    const handleSubmit = async (data: FormData) => {
+        setIsSubmitting(true);
+        try {
+            addManualPaymentMutation.mutate({
+                input: {
+                    orderId: order.id,
+                    method: data.method,
+                    transactionId: data.transactionId,
+                    metadata: {},
+                },
+            });
+            setOpen(false);
+            form.reset();
+        } catch (error) {
+            toast(i18n.t('Failed to add payment'), {
+                description: error instanceof Error ? error.message : 'Unknown error',
+            });
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    const handleCancel = () => {
+        form.reset();
+        setOpen(false);
+    };
+
+    const outstandingAmount = calculateOutstandingPaymentAmount(order);
+    const currencyCode = order.currencyCode;
+
+    // Create relation selector config for payment methods
+    const paymentMethodSelectorConfig = createRelationSelectorConfig({
+        listQuery: paymentMethodsDocument,
+        idKey: 'code',
+        labelKey: 'name',
+        placeholder: i18n.t('Search payment methods...'),
+        multiple: false,
+        label: (method: any) => `${method.name} (${method.code})`,
+    });
+
+    return (
+        <>
+            <Button
+                onClick={e => {
+                    e.stopPropagation();
+                    setOpen(true);
+                }}
+                className="mr-2"
+            >
+                <Trans>Add payment to order ({formatCurrency(outstandingAmount, currencyCode)})</Trans>
+            </Button>
+            <Dialog open={open}>
+                <DialogContent className="sm:max-w-[500px]">
+                    <DialogHeader>
+                        <DialogTitle>
+                            <Trans>Add payment to order</Trans>
+                        </DialogTitle>
+                        <DialogDescription>
+                            <Trans>
+                                Add a manual payment of {formatCurrency(outstandingAmount, currencyCode)}
+                            </Trans>
+                        </DialogDescription>
+                    </DialogHeader>
+                    <Form {...form}>
+                        <form onSubmit={e => {
+                            e.stopPropagation();
+                            form.handleSubmit(handleSubmit)(e);
+                        }} className="space-y-4">
+                            <FormFieldWrapper
+                                control={form.control}
+                                name="method"
+                                label={<Trans>Payment method</Trans>}
+                                rules={{ required: i18n.t('Payment method is required') }}
+                                render={({ field }) => (
+                                    <RelationSelector
+                                        config={paymentMethodSelectorConfig}
+                                        value={field.value}
+                                        onChange={field.onChange}
+                                        disabled={isSubmitting}
+                                    />
+                                )}
+                            />
+                            <FormFieldWrapper
+                                control={form.control}
+                                name="transactionId"
+                                label={<Trans>Transaction ID</Trans>}
+                                rules={{ required: i18n.t('Transaction ID is required') }}
+                                render={({ field }) => (
+                                    <Input {...field} placeholder={i18n.t('Enter transaction ID')} />
+                                )}
+                            />
+                            <DialogFooter>
+                                <Button type="button" variant="outline" onClick={handleCancel}>
+                                    <Trans>Cancel</Trans>
+                                </Button>
+                                <Button
+                                    type="submit"
+                                    disabled={
+                                        !form.formState.isValid || isSubmitting || !method
+                                    }
+                                >
+                                    {isSubmitting ? (
+                                        <Trans>Adding...</Trans>
+                                    ) : (
+                                        <Trans>
+                                            Add payment ({formatCurrency(outstandingAmount, currencyCode)})
+                                        </Trans>
+                                    )}
+                                </Button>
+                            </DialogFooter>
+                        </form>
+                    </Form>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+}

package/src/app/routes/_authenticated/_orders/components/edit-order-table.tsx

@@ -54,7 +54,7 @@ export function EditOrderTable({
     onApplyCouponCode,
     onRemoveCouponCode,
     orderLineForm,
-}: OrderTableProps) {
+}: Readonly<OrderTableProps>) {
     const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
     const [couponCode, setCouponCode] = useState('');
 
@@ -130,7 +130,7 @@ export function EditOrderTable({
         {
             header: 'Total',
             accessorKey: 'linePriceWithTax',
-            cell: ({ cell, row }) => {
+            cell: ({ row }) => {
                 const value = row.original.linePriceWithTax;
                 const netValue = row.original.linePrice;
                 return <MoneyGrossNet priceWithTax={value} price={netValue} currencyCode={currencyCode} />;

package/src/app/routes/_authenticated/_orders/components/fulfill-order-dialog.tsx

@@ -0,0 +1,320 @@
+import { ConfigurableOperationInput } from '@/vdb/components/shared/configurable-operation-input.js';
+import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/vdb/components/ui/dialog.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Label } from '@/vdb/components/ui/label.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { fulfillmentHandlersDocument, fulfillOrderDocument } from '../orders.graphql.js';
+import { Order } from '../utils/order-types.js';
+
+interface FulfillOrderDialogProps {
+    order: Order;
+    onSuccess?: () => void;
+}
+
+interface FormData {
+    handler: ConfigurableOperationInputType;
+}
+
+interface FulfillmentQuantity {
+    fulfillCount: number;
+    max: number;
+}
+
+export function FulfillOrderDialog({ order, onSuccess }: Readonly<FulfillOrderDialogProps>) {
+    const { i18n } = useLingui();
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [fulfillmentQuantities, setFulfillmentQuantities] = useState<{
+        [lineId: string]: FulfillmentQuantity;
+    }>({});
+
+    // Get fulfillment handlers
+    const { data: fulfillmentHandlersData } = useQuery({
+        queryKey: ['fulfillmentHandlers'],
+        queryFn: () => api.query(fulfillmentHandlersDocument),
+        staleTime: 1000 * 60 * 60 * 5,
+    });
+
+    // Get global settings for inventory tracking
+    const { data: globalSettingsData } = useQuery({
+        queryKey: ['globalSettings'],
+        queryFn: () =>
+            api.query(
+                graphql(`
+                    query GetGlobalSettings {
+                        globalSettings {
+                            trackInventory
+                        }
+                    }
+                `),
+            ),
+        staleTime: 1000 * 60 * 60 * 5,
+    });
+
+    const fulfillOrderMutation = useMutation({
+        mutationFn: api.mutate(fulfillOrderDocument),
+        onSuccess: (result: any) => {
+            const { addFulfillmentToOrder } = result;
+            if (addFulfillmentToOrder.__typename === 'Fulfillment') {
+                toast(i18n.t('Successfully fulfilled order'));
+                onSuccess?.();
+            } else {
+                toast(i18n.t('Failed to fulfill order'), {
+                    description: addFulfillmentToOrder.message,
+                });
+            }
+        },
+        onError: error => {
+            toast(i18n.t('Failed to fulfill order'), {
+                description: error instanceof Error ? error.message : 'Unknown error',
+            });
+        },
+    });
+
+    const form = useForm<FormData>({
+        defaultValues: {
+            handler: {
+                code: '',
+                arguments: [],
+            },
+        },
+    });
+
+    // Initialize fulfillment quantities when dialog opens
+    const initializeFulfillmentQuantities = () => {
+        if (!globalSettingsData?.globalSettings) return;
+
+        const quantities: { [lineId: string]: FulfillmentQuantity } = {};
+        order.lines.forEach(line => {
+            const fulfillCount = getFulfillableCount(line, globalSettingsData.globalSettings.trackInventory);
+            quantities[line.id] = { fulfillCount, max: fulfillCount };
+        });
+        setFulfillmentQuantities(quantities);
+
+        // Set default fulfillment handler
+        const defaultHandler =
+            fulfillmentHandlersData?.fulfillmentHandlers.find(
+                h => h.code === order.shippingLines[0]?.shippingMethod?.fulfillmentHandlerCode,
+            ) ?? fulfillmentHandlersData?.fulfillmentHandlers[0];
+
+        if (defaultHandler) {
+            form.setValue('handler', {
+                code: defaultHandler.code,
+                arguments: defaultHandler.args.map(arg => ({
+                    name: arg.name,
+                    value: arg.defaultValue ?? '',
+                })),
+            });
+        }
+    };
+
+    const getFulfillableCount = (line: Order['lines'][number], globalTrackInventory: boolean): number => {
+        const { trackInventory, stockOnHand } = line.productVariant;
+        const effectiveTrackInventory =
+            trackInventory === 'INHERIT' ? globalTrackInventory : trackInventory === 'TRUE';
+
+        const unfulfilledCount = getUnfulfilledCount(line);
+        return effectiveTrackInventory ? Math.min(unfulfilledCount, stockOnHand) : unfulfilledCount;
+    };
+
+    const getUnfulfilledCount = (line: Order['lines'][number]): number => {
+        const fulfilled =
+            order.fulfillments
+                ?.filter(f => f.state !== 'Cancelled')
+                .map(f => f.lines)
+                .flat()
+                .filter(row => row.orderLineId === line.id)
+                .reduce((sum, row) => sum + row.quantity, 0) ?? 0;
+        return line.quantity - fulfilled;
+    };
+
+    const updateFulfillmentQuantity = (lineId: string, fulfillCount: number) => {
+        setFulfillmentQuantities(prev => ({
+            ...prev,
+            [lineId]: { ...prev[lineId], fulfillCount },
+        }));
+    };
+
+    const canSubmit = (): boolean => {
+        const totalCount = Object.values(fulfillmentQuantities).reduce(
+            (total, { fulfillCount }) => total + fulfillCount,
+            0,
+        );
+        const fulfillmentQuantityIsValid = Object.values(fulfillmentQuantities).every(
+            ({ fulfillCount, max }) => fulfillCount <= max && fulfillCount >= 0,
+        );
+        const formIsValid = form.formState.isValid;
+        return formIsValid && totalCount > 0 && fulfillmentQuantityIsValid;
+    };
+
+    const handleSubmit = async (data: FormData) => {
+        setIsSubmitting(true);
+        try {
+            const lines = Object.entries(fulfillmentQuantities)
+                .filter(([, { fulfillCount }]) => fulfillCount > 0)
+                .map(([orderLineId, { fulfillCount }]) => ({
+                    orderLineId,
+                    quantity: fulfillCount,
+                }));
+
+            fulfillOrderMutation.mutate({
+                input: {
+                    lines,
+                    handler: data.handler,
+                },
+            });
+            setOpen(false);
+            form.reset();
+            setFulfillmentQuantities({});
+        } catch (error) {
+            toast(i18n.t('Failed to fulfill order'), {
+                description: error instanceof Error ? error.message : 'Unknown error',
+            });
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    const handleCancel = () => {
+        form.reset();
+        setFulfillmentQuantities({});
+        setOpen(false);
+    };
+
+    const handleOpen = () => {
+        setOpen(true);
+        // Initialize quantities after a short delay to ensure data is loaded
+        setTimeout(initializeFulfillmentQuantities, 100);
+    };
+
+    const fulfillmentHandlers = fulfillmentHandlersData?.fulfillmentHandlers;
+    const selectedHandler = fulfillmentHandlers?.find(h => h.code === form.watch('handler.code'));
+
+    return (
+        <>
+            <Button
+                onClick={e => {
+                    e.stopPropagation();
+                    handleOpen();
+                }}
+                className="mr-2"
+            >
+                <Trans>Fulfill order</Trans>
+            </Button>
+            <Dialog open={open}>
+                <DialogContent className="sm:max-w-[600px]">
+                    <DialogHeader>
+                        <DialogTitle>
+                            <Trans>Fulfill order</Trans>
+                        </DialogTitle>
+                        <DialogDescription>
+                            <Trans>Select quantities to fulfill and configure the fulfillment handler</Trans>
+                        </DialogDescription>
+                    </DialogHeader>
+                    <Form {...form}>
+                        <form
+                            onSubmit={e => {
+                                e.stopPropagation();
+                                form.handleSubmit(handleSubmit)(e);
+                            }}
+                            className="space-y-4"
+                        >
+                            <div className="space-y-4">
+                                <div className="font-medium">
+                                    <Trans>Order lines</Trans>
+                                </div>
+                                {order.lines.map(line => {
+                                    const quantity = fulfillmentQuantities[line.id];
+                                    if (!quantity || quantity.max <= 0) return null;
+
+                                    return (
+                                        <div
+                                            key={line.id}
+                                            className="flex items-center justify-between p-3 border rounded-md"
+                                        >
+                                            <div className="flex-1">
+                                                <div className="font-medium">{line.productVariant.name}</div>
+                                                <div className="text-sm text-muted-foreground">
+                                                    SKU: {line.productVariant.sku}
+                                                </div>
+                                                <div className="text-sm text-muted-foreground">
+                                                    <Trans>
+                                                        {quantity.max} of {line.quantity} available to fulfill
+                                                    </Trans>
+                                                </div>
+                                            </div>
+                                            <div className="flex items-center space-x-2">
+                                                <Label htmlFor={`quantity-${line.id}`}>
+                                                    <Trans>Quantity</Trans>
+                                                </Label>
+                                                <Input
+                                                    id={`quantity-${line.id}`}
+                                                    type="number"
+                                                    min="0"
+                                                    max={quantity.max}
+                                                    value={quantity.fulfillCount}
+                                                    onChange={e => {
+                                                        const value = parseInt(e.target.value) || 0;
+                                                        updateFulfillmentQuantity(line.id, value);
+                                                    }}
+                                                    className="w-20"
+                                                />
+                                            </div>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+
+                            {selectedHandler && (
+                                <FormFieldWrapper
+                                    control={form.control}
+                                    name="handler"
+                                    label={<Trans>Fulfillment handler</Trans>}
+                                    render={({ field }) => (
+                                        <ConfigurableOperationInput
+                                            operationDefinition={selectedHandler}
+                                            value={field.value}
+                                            onChange={field.onChange}
+                                            readonly={false}
+                                            removable={false}
+                                        />
+                                    )}
+                                />
+                            )}
+
+                            <DialogFooter>
+                                <Button type="button" variant="outline" onClick={handleCancel}>
+                                    <Trans>Cancel</Trans>
+                                </Button>
+                                <Button type="submit" disabled={!canSubmit() || isSubmitting}>
+                                    {isSubmitting ? (
+                                        <Trans>Fulfilling...</Trans>
+                                    ) : (
+                                        <Trans>Fulfill order</Trans>
+                                    )}
+                                </Button>
+                            </DialogFooter>
+                        </form>
+                    </Form>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+}