@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

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

@@ -1,10 +1,11 @@
-import { ProductVariantSelector } from '@/components/shared/product-variant-selector.js';
-import { VendureImage } from '@/components/shared/vendure-image.js';
-import { Button } from '@/components/ui/button.js';
-import { Input } from '@/components/ui/input.js';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.js';
-import { ResultOf } from '@/graphql/graphql.js';
-import { Trans } from '@/lib/trans.js';
+import { SingleRelationInput } from '@/vdb/components/data-input/relation-input.js';
+import { ProductVariantSelector } from '@/vdb/components/shared/product-variant-selector.js';
+import { VendureImage } from '@/vdb/components/shared/vendure-image.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import {
     ColumnDef,
     flexRender,
@@ -14,39 +15,57 @@ import {
 } from '@tanstack/react-table';
 import { Trash2 } from 'lucide-react';
 import { useState } from 'react';
-import { draftOrderEligibleShippingMethodsDocument, orderDetailDocument, orderLineFragment } from '../orders.graphql.js';
+import {
+    couponCodeSelectorPromotionListDocument,
+    draftOrderEligibleShippingMethodsDocument,
+    orderDetailDocument,
+    orderLineFragment,
+} from '../orders.graphql.js';
 import { MoneyGrossNet } from './money-gross-net.js';
+import { OrderLineCustomFieldsForm } from './order-line-custom-fields-form.js';
 import { OrderTableTotals } from './order-table-totals.js';
 import { ShippingMethodSelector } from './shipping-method-selector.js';
-import { OrderLineCustomFieldsForm } from './order-line-custom-fields-form.js';
-import { UseFormReturn } from 'react-hook-form';
 
 type OrderFragment = NonNullable<ResultOf<typeof orderDetailDocument>['order']>;
 type OrderLineFragment = ResultOf<typeof orderLineFragment>;
 
-type ShippingMethodQuote = ResultOf<typeof draftOrderEligibleShippingMethodsDocument>['eligibleShippingMethodsForDraftOrder'][number];
+type ShippingMethodQuote = ResultOf<
+    typeof draftOrderEligibleShippingMethodsDocument
+>['eligibleShippingMethodsForDraftOrder'][number];
 
 export interface OrderTableProps {
     order: OrderFragment;
     eligibleShippingMethods: ShippingMethodQuote[];
-    onAddItem: (event: { productVariantId: string; }) => void;
+    onAddItem: (variant: {
+        productVariantId: string;
+        productVariantName: string;
+        sku: string;
+        productAsset: any;
+        price?: any;
+        priceWithTax?: any;
+    }) => void;
     onAdjustLine: (event: { lineId: string; quantity: number; customFields: Record<string, any> }) => void;
     onRemoveLine: (event: { lineId: string }) => void;
     onSetShippingMethod: (event: { shippingMethodId: string }) => void;
     onApplyCouponCode: (event: { couponCode: string }) => void;
     onRemoveCouponCode: (event: { couponCode: string }) => void;
-    orderLineForm: UseFormReturn<any>;
+    displayTotals?: boolean;
 }
 
-export function EditOrderTable({ order, eligibleShippingMethods, onAddItem, onAdjustLine, onRemoveLine,
-    onSetShippingMethod, onApplyCouponCode, onRemoveCouponCode, orderLineForm }: OrderTableProps) {
-
+export function EditOrderTable({
+    order,
+    eligibleShippingMethods,
+    onAddItem,
+    onAdjustLine,
+    onRemoveLine,
+    onSetShippingMethod,
+    onApplyCouponCode,
+    onRemoveCouponCode,
+    displayTotals = true,
+}: Readonly<OrderTableProps>) {
     const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
-    const [couponCode, setCouponCode] = useState('');
-
     const currencyCode = order.currencyCode;
-
-    const columns: ColumnDef<OrderLineFragment>[] = [
+    const columns: ColumnDef<OrderLineFragment & { customFields?: Record<string, any> }>[] = [
         {
             header: 'Image',
             accessorKey: 'featuredAsset',
@@ -67,36 +86,56 @@ export function EditOrderTable({ order, eligibleShippingMethods, onAddItem, onAd
             header: 'Unit price',
             accessorKey: 'unitPriceWithTax',
             cell: ({ row }) => {
-                const value = row.original.unitPriceWithTax
+                const value = row.original.unitPriceWithTax;
                 const netValue = row.original.unitPrice;
-                return <MoneyGrossNet priceWithTax={value} price={netValue} currencyCode={currencyCode} />
+                return <MoneyGrossNet priceWithTax={value} price={netValue} currencyCode={currencyCode} />;
             },
         },
         {
             header: 'Quantity',
             accessorKey: 'quantity',
             cell: ({ row }) => {
-                return <div className="flex gap-2">
-                    <Input type="number" value={row.original.quantity} onChange={e => onAdjustLine({ lineId: row.original.id, quantity: e.target.valueAsNumber, customFields: row.original.customFields })} />
-                    <Button variant="outline" type="button" size="icon" onClick={() => onRemoveLine({ lineId: row.original.id })}>
-                        <Trash2 />
-                    </Button>
-                    {row.original.customFields &&
-                        <OrderLineCustomFieldsForm onUpdate={(customFields) => {
-                            
-                            onAdjustLine({
-                                lineId: row.original.id,
-                                quantity: row.original.quantity,
-                                customFields: customFields
-                            });
-                        }} form={orderLineForm} />}
-                </div>;
+                return (
+                    <div className="flex gap-2">
+                        <Input
+                            type="number"
+                            value={row.original.quantity}
+                            onChange={e =>
+                                onAdjustLine({
+                                    lineId: row.original.id,
+                                    quantity: e.target.valueAsNumber,
+                                    customFields: row.original.customFields ?? {},
+                                })
+                            }
+                        />
+                        <Button
+                            variant="outline"
+                            type="button"
+                            size="icon"
+                            onClick={() => onRemoveLine({ lineId: row.original.id })}
+                        >
+                            <Trash2 />
+                        </Button>
+                        {row.original.customFields && (
+                            <OrderLineCustomFieldsForm
+                                onUpdate={customFields => {
+                                    onAdjustLine({
+                                        lineId: row.original.id,
+                                        quantity: row.original.quantity,
+                                        customFields: customFields,
+                                    });
+                                }}
+                                value={row.original.customFields}
+                            />
+                        )}
+                    </div>
+                );
             },
         },
         {
             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} />;
@@ -130,9 +169,9 @@ export function EditOrderTable({ order, eligibleShippingMethods, onAddItem, onAd
                                             {header.isPlaceholder
                                                 ? null
                                                 : flexRender(
-                                                    header.column.columnDef.header,
-                                                    header.getContext(),
-                                                )}
+                                                      header.column.columnDef.header,
+                                                      header.getContext(),
+                                                  )}
                                         </TableHead>
                                     );
                                 })}
@@ -140,24 +179,22 @@ export function EditOrderTable({ order, eligibleShippingMethods, onAddItem, onAd
                         ))}
                     </TableHeader>
                     <TableBody>
-                        {table.getRowModel().rows?.length ? (
-                            table.getRowModel().rows.map(row => (
-                                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                                    {row.getVisibleCells().map(cell => (
-                                        <TableCell key={cell.id}>
-                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                        </TableCell>
-                                    ))}
-                                </TableRow>
-                            ))
-                        ) : null}
+                        {table.getRowModel().rows?.length
+                            ? table.getRowModel().rows.map(row => (
+                                  <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                                      {row.getVisibleCells().map(cell => (
+                                          <TableCell key={cell.id}>
+                                              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                          </TableCell>
+                                      ))}
+                                  </TableRow>
+                              ))
+                            : null}
                         <TableRow>
                             <TableCell colSpan={columns.length} className="h-12">
                                 <div className="my-4 flex justify-center">
                                     <div className="max-w-lg">
-                                        <ProductVariantSelector onProductVariantIdChange={variantId => {
-                                            onAddItem({ productVariantId: variantId });
-                                        }} />
+                                        <ProductVariantSelector onProductVariantSelect={onAddItem} />
                                     </div>
                                 </div>
                             </TableCell>
@@ -168,36 +205,16 @@ export function EditOrderTable({ order, eligibleShippingMethods, onAddItem, onAd
                                     eligibleShippingMethods={eligibleShippingMethods}
                                     selectedShippingMethodId={order.shippingLines?.[0]?.shippingMethod?.id}
                                     currencyCode={currencyCode}
-                                    onSelect={(shippingMethodId) => onSetShippingMethod({ shippingMethodId })}
+                                    onSelect={shippingMethodId => onSetShippingMethod({ shippingMethodId })}
                                 />
                             </TableCell>
                         </TableRow>
                         <TableRow>
                             <TableCell colSpan={columns.length} className="h-12">
-                                <div className="flex flex-col gap-4">
-                                    <div className="flex gap-2">
-                                        <Input
-                                            type="text"
-                                            placeholder="Coupon code"
-                                            value={couponCode}
-                                            onChange={(e) => setCouponCode(e.target.value)}
-                                            onKeyDown={(e) => {
-                                                if (e.key === 'Enter') {
-                                                    onApplyCouponCode({ couponCode });
-                                                }
-                                            }}
-                                        />
-                                        <Button
-                                            type="button"
-                                            onClick={() => onApplyCouponCode({ couponCode })}
-                                            disabled={!couponCode}
-                                        >
-                                            <Trans>Apply</Trans>
-                                        </Button>
-                                    </div>
+                                <div className="flex gap-4">
                                     {order.couponCodes?.length > 0 && (
                                         <div className="flex flex-wrap gap-2">
-                                            {order.couponCodes.map((code) => (
+                                            {order.couponCodes.map(code => (
                                                 <div
                                                     key={code}
                                                     className="flex items-center gap-2 px-3 py-1 text-sm border rounded-md"
@@ -208,7 +225,9 @@ export function EditOrderTable({ order, eligibleShippingMethods, onAddItem, onAd
                                                         variant="ghost"
                                                         size="sm"
                                                         className="h-6 w-6 p-0"
-                                                        onClick={() => onRemoveCouponCode({ couponCode: code })}
+                                                        onClick={() =>
+                                                            onRemoveCouponCode({ couponCode: code })
+                                                        }
                                                     >
                                                         <Trash2 className="h-4 w-4" />
                                                     </Button>
@@ -216,10 +235,22 @@ export function EditOrderTable({ order, eligibleShippingMethods, onAddItem, onAd
                                             ))}
                                         </div>
                                     )}
+                                    <SingleRelationInput
+                                        config={{
+                                            listQuery: couponCodeSelectorPromotionListDocument,
+                                            idKey: 'couponCode',
+                                            labelKey: 'couponCode',
+                                            placeholder: 'Search coupon codes...',
+                                            label: (item: any) => `${item.couponCode} (${item.name})`,
+                                        }}
+                                        value={''}
+                                        selectorLabel={<Trans>Add coupon code</Trans>}
+                                        onChange={code => onApplyCouponCode({ couponCode: code })}
+                                    />
                                 </div>
                             </TableCell>
                         </TableRow>
-                        <OrderTableTotals order={order} columnCount={columns.length} />
+                        {displayTotals && <OrderTableTotals order={order} columnCount={columns.length} />}
                     </TableBody>
                 </Table>
             </div>

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>
+        </>
+    );
+}