@vendure/dashboard 3.3.6-master-202507050232 → 3.4.0-minor-202506250934

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

@@ -1,191 +0,0 @@
-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/fulfill-order-dialog.tsx

@@ -1,320 +0,0 @@
-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>
-        </>
-    );
-}

package/src/app/routes/_authenticated/_orders/components/fulfillment-details.tsx

@@ -1,173 +0,0 @@
-import { LabeledData } from '@/vdb/components/labeled-data.js';
-import { Button } from '@/vdb/components/ui/button.js';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/vdb/components/ui/collapsible.js';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/vdb/components/ui/dropdown-menu.js';
-import { api } from '@/vdb/graphql/api.js';
-import { ResultOf } from '@/vdb/graphql/graphql.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 { ChevronDown } from 'lucide-react';
-import { toast } from 'sonner';
-import {
-    fulfillmentFragment,
-    orderDetailFragment,
-    transitionFulfillmentToStateDocument,
-} from '../orders.graphql.js';
-
-type Order = NonNullable<ResultOf<typeof orderDetailFragment>>;
-
-type FulfillmentDetailsProps = {
-    order: Order;
-    fulfillment: ResultOf<typeof fulfillmentFragment>;
-    onSuccess?: () => void;
-};
-
-export function FulfillmentDetails({ order, fulfillment, onSuccess }: Readonly<FulfillmentDetailsProps>) {
-    const { formatDate } = useLocalFormat();
-    const { i18n } = useLingui();
-
-    // Create a map of order lines by ID for quick lookup
-    const orderLinesMap = new Map(order.lines.map(line => [line.id, line]));
-
-    const transitionFulfillmentMutation = useMutation({
-        mutationFn: api.mutate(transitionFulfillmentToStateDocument),
-        onSuccess: (result: ResultOf<typeof transitionFulfillmentToStateDocument>) => {
-            const fulfillment = result.transitionFulfillmentToState;
-            if (fulfillment.__typename === 'Fulfillment') {
-                toast.success(i18n.t('Fulfillment state updated successfully'));
-                onSuccess?.();
-            } else {
-                toast.error(fulfillment.message ?? i18n.t('Failed to update fulfillment state'));
-            }
-        },
-        onError: error => {
-            toast.error(i18n.t('Failed to update fulfillment state'));
-        },
-    });
-
-    const nextSuggestedState = (): string | undefined => {
-        const { nextStates } = fulfillment;
-        const namedStateOrDefault = (targetState: string) =>
-            nextStates.includes(targetState) ? targetState : nextStates[0];
-
-        switch (fulfillment.state) {
-            case 'Pending':
-                return namedStateOrDefault('Shipped');
-            case 'Shipped':
-                return namedStateOrDefault('Delivered');
-            default:
-                return nextStates.find(s => s !== 'Cancelled');
-        }
-    };
-
-    const nextOtherStates = (): string[] => {
-        const suggested = nextSuggestedState();
-        return fulfillment.nextStates.filter(s => s !== suggested);
-    };
-
-    const handleStateTransition = (state: string) => {
-        transitionFulfillmentMutation.mutate({
-            id: fulfillment.id,
-            state,
-        });
-    };
-
-    return (
-        <div className="space-y-1 p-3 border rounded-md">
-            <div className="space-y-1">
-                <LabeledData label={<Trans>Fulfillment ID</Trans>} value={fulfillment.id.slice(-8)} />
-                <LabeledData label={<Trans>Method</Trans>} value={fulfillment.method} />
-                <LabeledData label={<Trans>State</Trans>} value={fulfillment.state} />
-                {fulfillment.trackingCode && (
-                    <LabeledData label={<Trans>Tracking code</Trans>} value={fulfillment.trackingCode} />
-                )}
-                <LabeledData label={<Trans>Created</Trans>} value={formatDate(fulfillment.createdAt)} />
-            </div>
-
-            {fulfillment.lines.length > 0 && (
-                <div className="mt-3 pt-3 border-t">
-                    <Collapsible>
-                        <CollapsibleTrigger className="flex items-center justify-between w-full text-sm hover:underline text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md p-1 -m-1">
-                            <Trans>
-                                Fulfilled items (
-                                {fulfillment.lines.reduce((acc, line) => acc + line.quantity, 0)})
-                            </Trans>
-                            <ChevronDown className="h-4 w-4 transition-transform duration-200 data-[state=open]:rotate-180" />
-                        </CollapsibleTrigger>
-                        <CollapsibleContent className="mt-2 space-y-1">
-                            {fulfillment.lines.map((line) => {
-                                const orderLine = orderLinesMap.get(line.orderLineId);
-                                const productName = orderLine?.productVariant?.name ?? 'Unknown product';
-                                const sku = orderLine?.productVariant?.sku;
-
-                                return (
-                                    <div key={line.orderLineId} className="text-sm text-muted-foreground">
-                                        <div className="font-medium text-foreground text-xs">
-                                            {productName}
-                                        </div>
-                                        <div className="flex items-center gap-2 text-xs">
-                                            <span>Qty: {line.quantity}</span>
-                                            {sku && <span>SKU: {sku}</span>}
-                                        </div>
-                                    </div>
-                                );
-                            })}
-                        </CollapsibleContent>
-                    </Collapsible>
-                </div>
-            )}
-
-            {fulfillment.nextStates.length > 0 && (
-                <div className="mt-3 pt-3 border-t">
-                    <div className="flex">
-                        <Button
-                            variant="outline"
-                            size="sm"
-                            disabled={transitionFulfillmentMutation.isPending}
-                            className="rounded-r-none flex-1 justify-start shadow-none"
-                        >
-                            <Trans>State: {fulfillment.state}</Trans>
-                        </Button>
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <Button
-                                    variant="outline"
-                                    size="sm"
-                                    disabled={transitionFulfillmentMutation.isPending}
-                                    className="rounded-l-none border-l-0 shadow-none"
-                                >
-                                    <ChevronDown className="h-4 w-4" />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                                {nextSuggestedState() && (
-                                    <DropdownMenuItem
-                                        onClick={() => handleStateTransition(nextSuggestedState()!)}
-                                        disabled={transitionFulfillmentMutation.isPending}
-                                    >
-                                        <Trans>Transition to {nextSuggestedState()}</Trans>
-                                    </DropdownMenuItem>
-                                )}
-                                {nextOtherStates().map(state => (
-                                    <DropdownMenuItem
-                                        key={state}
-                                        onClick={() => handleStateTransition(state)}
-                                        disabled={transitionFulfillmentMutation.isPending}
-                                    >
-                                        <Trans>Transition to {state}</Trans>
-                                    </DropdownMenuItem>
-                                ))}
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-}