@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

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

@@ -1,61 +1,287 @@
-import { ResultOf } from '@/graphql/graphql.js';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
-import { Trans } from '@/lib/trans.js';
-import { paymentWithRefundsFragment } from '../orders.graphql.js';
+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 { 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 { JsonEditor } from 'json-edit-react';
+import { ChevronDown } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import {
+    cancelPaymentDocument,
+    paymentWithRefundsFragment,
+    settlePaymentDocument,
+    settleRefundDocument,
+    transitionPaymentToStateDocument,
+} from '../orders.graphql.js';
+import { SettleRefundDialog } from './settle-refund-dialog.js';
+import {
+    getTypeForState,
+    StateTransitionAction,
+    StateTransitionControl,
+} from './state-transition-control.js';
 
 type PaymentDetailsProps = {
     payment: ResultOf<typeof paymentWithRefundsFragment>;
     currencyCode: string;
+    onSuccess?: () => void;
 };
 
-export function PaymentDetails({ payment, currencyCode }: PaymentDetailsProps) {
+export function PaymentDetails({ payment, currencyCode, onSuccess }: Readonly<PaymentDetailsProps>) {
     const { formatCurrency, formatDate } = useLocalFormat();
-    const t = (key: string) => key;
+    const { i18n } = useLingui();
+    const [settleRefundDialogOpen, setSettleRefundDialogOpen] = useState(false);
+    const [selectedRefundId, setSelectedRefundId] = useState<string | null>(null);
 
-    return (
-        <div className="space-y-2">
-            <LabeledData label={<Trans>Payment method</Trans>} value={payment.method} />
-
-            <LabeledData label={<Trans>Amount</Trans>} value={formatCurrency(payment.amount, currencyCode)} />
-
-            <LabeledData label={<Trans>Created at</Trans>} value={formatDate(payment.createdAt)} />
-
-            {payment.transactionId && (
-                <LabeledData label={<Trans>Transaction ID</Trans>} value={payment.transactionId} />
-            )}
-
-            {/* We need to check if there is errorMessage field in the Payment type */}
-            {payment.errorMessage && (
-                <LabeledData
-                    label={<Trans>Error message</Trans>}
-                    value={payment.errorMessage}
-                    className="text-destructive"
-                />
-            )}
-
-            <LabeledData
-                label={<Trans>Payment metadata</Trans>}
-                value={
-                    <pre className="max-h-96 overflow-auto rounded-md bg-muted p-4 text-sm">
-                        {JSON.stringify(payment.metadata, null, 2)}
-                    </pre>
-                }
-            />
-        </div>
-    );
-}
+    const settlePaymentMutation = useMutation({
+        mutationFn: api.mutate(settlePaymentDocument),
+        onSuccess: (result: ResultOf<typeof settlePaymentDocument>) => {
+            if (result.settlePayment.__typename === 'Payment') {
+                toast.success(i18n.t('Payment settled successfully'));
+                onSuccess?.();
+            } else {
+                toast.error(result.settlePayment.message ?? i18n.t('Failed to settle payment'));
+            }
+        },
+        onError: () => {
+            toast.error(i18n.t('Failed to settle payment'));
+        },
+    });
 
-type LabeledDataProps = {
-    label: string | React.ReactNode;
-    value: React.ReactNode;
-    className?: string;
-};
+    const transitionPaymentMutation = useMutation({
+        mutationFn: api.mutate(transitionPaymentToStateDocument),
+        onSuccess: (result: ResultOf<typeof transitionPaymentToStateDocument>) => {
+            if (result.transitionPaymentToState.__typename === 'Payment') {
+                toast.success(i18n.t('Payment state updated successfully'));
+                onSuccess?.();
+            } else {
+                toast.error(
+                    result.transitionPaymentToState.message ?? i18n.t('Failed to update payment state'),
+                );
+            }
+        },
+        onError: () => {
+            toast.error(i18n.t('Failed to update payment state'));
+        },
+    });
+
+    const cancelPaymentMutation = useMutation({
+        mutationFn: api.mutate(cancelPaymentDocument),
+        onSuccess: (result: ResultOf<typeof cancelPaymentDocument>) => {
+            if (result.cancelPayment.__typename === 'Payment') {
+                toast.success(i18n.t('Payment cancelled successfully'));
+                onSuccess?.();
+            } else {
+                toast.error(result.cancelPayment.message ?? i18n.t('Failed to cancel payment'));
+            }
+        },
+        onError: () => {
+            toast.error(i18n.t('Failed to cancel payment'));
+        },
+    });
+
+    const settleRefundMutation = useMutation({
+        mutationFn: api.mutate(settleRefundDocument),
+        onSuccess: (result: ResultOf<typeof settleRefundDocument>) => {
+            if (result.settleRefund.__typename === 'Refund') {
+                toast.success(i18n.t('Refund settled successfully'));
+                onSuccess?.();
+                setSettleRefundDialogOpen(false);
+            } else {
+                toast.error(result.settleRefund.message ?? i18n.t('Failed to settle refund'));
+            }
+        },
+        onError: () => {
+            toast.error(i18n.t('Failed to settle refund'));
+        },
+    });
+
+    const handlePaymentStateTransition = (state: string) => {
+        if (state === 'Cancelled') {
+            cancelPaymentMutation.mutate({ id: payment.id });
+        } else {
+            transitionPaymentMutation.mutate({ id: payment.id, state });
+        }
+    };
+
+    const handleSettlePayment = () => {
+        settlePaymentMutation.mutate({ id: payment.id });
+    };
+
+    const handleSettleRefund = (refundId: string) => {
+        setSelectedRefundId(refundId);
+        setSettleRefundDialogOpen(true);
+    };
+
+    const handleSettleRefundConfirm = (transactionId: string) => {
+        if (selectedRefundId) {
+            settleRefundMutation.mutate({
+                input: {
+                    id: selectedRefundId,
+                    transactionId,
+                },
+            });
+        }
+    };
+
+    const nextOtherStates = (): string[] => {
+        if (!payment.nextStates) {
+            return [];
+        }
+        return payment.nextStates.filter(s => s !== 'Settled' && s !== 'Error');
+    };
+
+    const getPaymentActions = () => {
+        const actions: StateTransitionAction[] = [];
+
+        if (payment.nextStates?.includes('Settled')) {
+            actions.push({
+                label: 'Settle payment',
+                onClick: handleSettlePayment,
+                type: 'success',
+                disabled: settlePaymentMutation.isPending,
+            });
+        }
+
+        nextOtherStates().forEach(state => {
+            actions.push({
+                label: state === 'Cancelled' ? 'Cancel payment' : `Transition to ${state}`,
+                type: getTypeForState(state),
+                onClick: () => handlePaymentStateTransition(state),
+                disabled: transitionPaymentMutation.isPending || cancelPaymentMutation.isPending,
+            });
+        });
+
+        return actions;
+    };
 
-function LabeledData({ label, value, className }: LabeledDataProps) {
     return (
-        <div className="">
-            <span className="font-medium text-muted-foreground text-sm">{label}</span>
-            <div className={`col-span-2 ${className}`}>{value}</div>
-        </div>
+        <>
+            <div className="space-y-1 p-3 border rounded-md">
+                <div className="grid lg:grid-cols-2 gap-2">
+                    <LabeledData label={<Trans>Payment method</Trans>} value={payment.method} />
+                    <LabeledData
+                        label={<Trans>Amount</Trans>}
+                        value={formatCurrency(payment.amount, currencyCode)}
+                    />
+                    <LabeledData
+                        label={<Trans>Created at</Trans>}
+                        value={formatDate(payment.createdAt, { dateStyle: 'short', timeStyle: 'short' })}
+                    />
+                    {payment.transactionId && (
+                        <LabeledData label={<Trans>Transaction ID</Trans>} value={payment.transactionId} />
+                    )}
+                    {/* We need to check if there is errorMessage field in the Payment type */}
+                    {payment.errorMessage && (
+                        <LabeledData
+                            label={<Trans>Error message</Trans>}
+                            value={payment.errorMessage}
+                            className="text-destructive"
+                        />
+                    )}
+                </div>
+                <Collapsible className="mt-2 border-t pt-2">
+                    <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>Payment metadata</Trans>
+                        <ChevronDown className="h-4 w-4 transition-transform duration-200 data-[state=open]:rotate-180" />
+                    </CollapsibleTrigger>
+                    <CollapsibleContent className="mt-2">
+                        <JsonEditor
+                            viewOnly
+                            rootFontSize={12}
+                            minWidth={100}
+                            rootName=""
+                            data={payment.metadata}
+                            collapse
+                        />
+                    </CollapsibleContent>
+                </Collapsible>
+                {payment.refunds && payment.refunds.length > 0 && (
+                    <Collapsible className="mt-2 border-t pt-2">
+                        <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>Refunds ({payment.refunds.length})</Trans>
+                            <ChevronDown className="h-4 w-4 transition-transform duration-200 data-[state=open]:rotate-180" />
+                        </CollapsibleTrigger>
+                        <CollapsibleContent className="mt-2 space-y-3">
+                            {payment.refunds.map(refund => (
+                                <div key={refund.id} className="p-3 border rounded-md bg-muted/50">
+                                    <div className="space-y-1">
+                                        <LabeledData label={<Trans>Refund ID</Trans>} value={refund.id} />
+                                        <LabeledData label={<Trans>State</Trans>} value={refund.state} />
+                                        <LabeledData
+                                            label={<Trans>Created at</Trans>}
+                                            value={formatDate(refund.createdAt, {
+                                                dateStyle: 'short',
+                                                timeStyle: 'short',
+                                            })}
+                                        />
+                                        <LabeledData
+                                            label={<Trans>Total</Trans>}
+                                            value={formatCurrency(refund.total, currencyCode)}
+                                        />
+                                        {refund.reason && (
+                                            <LabeledData
+                                                label={<Trans>Reason</Trans>}
+                                                value={refund.reason}
+                                            />
+                                        )}
+                                        {refund.transactionId && (
+                                            <LabeledData
+                                                label={<Trans>Transaction ID</Trans>}
+                                                value={refund.transactionId}
+                                            />
+                                        )}
+                                        {refund.metadata && Object.keys(refund.metadata).length > 0 && (
+                                            <div className="mt-2">
+                                                <LabeledData label={<Trans>Metadata</Trans>} value="" />
+                                                <JsonEditor
+                                                    viewOnly
+                                                    rootFontSize={11}
+                                                    minWidth={100}
+                                                    rootName=""
+                                                    data={refund.metadata}
+                                                    collapse
+                                                />
+                                            </div>
+                                        )}
+                                    </div>
+                                    {refund.state === 'Pending' && (
+                                        <div className="mt-3 pt-3 border-t">
+                                            <Button
+                                                size="sm"
+                                                onClick={() => handleSettleRefund(refund.id)}
+                                                disabled={settleRefundMutation.isPending}
+                                            >
+                                                <Trans>Settle refund</Trans>
+                                            </Button>
+                                        </div>
+                                    )}
+                                </div>
+                            ))}
+                        </CollapsibleContent>
+                    </Collapsible>
+                )}
+                <div className="mt-3 pt-3 border-t">
+                    <StateTransitionControl
+                        currentState={payment.state}
+                        actions={getPaymentActions()}
+                        isLoading={
+                            settlePaymentMutation.isPending ||
+                            transitionPaymentMutation.isPending ||
+                            cancelPaymentMutation.isPending
+                        }
+                    />
+                </div>
+            </div>
+            <SettleRefundDialog
+                open={settleRefundDialogOpen}
+                onOpenChange={setSettleRefundDialogOpen}
+                onSettle={handleSettleRefundConfirm}
+                isLoading={settleRefundMutation.isPending}
+            />
+        </>
     );
 }

package/src/app/routes/_authenticated/_orders/components/settle-refund-dialog.tsx

@@ -0,0 +1,80 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/vdb/components/ui/dialog.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Label } from '@/vdb/components/ui/label.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { useState } from 'react';
+
+type SettleRefundDialogProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onSettle: (transactionId: string) => void;
+    isLoading?: boolean;
+};
+
+export function SettleRefundDialog({
+    open,
+    onOpenChange,
+    onSettle,
+    isLoading,
+}: Readonly<SettleRefundDialogProps>) {
+    const [transactionId, setTransactionId] = useState('');
+
+    const handleSettle = () => {
+        if (transactionId.trim()) {
+            onSettle(transactionId.trim());
+            setTransactionId('');
+        }
+    };
+
+    const handleOpenChange = (newOpen: boolean) => {
+        if (!newOpen) {
+            setTransactionId('');
+        }
+        onOpenChange(newOpen);
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={handleOpenChange}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Settle refund</Trans>
+                    </DialogTitle>
+                    <DialogDescription>
+                        <Trans>Enter the transaction ID for this refund settlement</Trans>
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4">
+                    <div className="space-y-2">
+                        <Label htmlFor="transaction-id">
+                            <Trans>Transaction ID</Trans>
+                        </Label>
+                        <Input
+                            id="transaction-id"
+                            value={transactionId}
+                            onChange={e => setTransactionId(e.target.value)}
+                            placeholder="Enter transaction ID..."
+                            disabled={isLoading}
+                        />
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => handleOpenChange(false)} disabled={isLoading}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button onClick={handleSettle} disabled={!transactionId.trim() || isLoading}>
+                        <Trans>Settle refund</Trans>
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/src/app/routes/_authenticated/_orders/components/shipping-method-selector.tsx

@@ -1,10 +1,12 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card.js';
-import { Money } from '@/components/data-display/money.js';
-import { Trans } from '@/lib/trans.js';
+import { Money } from '@/vdb/components/data-display/money.js';
+import { Card, CardContent, CardHeader, CardTitle } from '@/vdb/components/ui/card.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { draftOrderEligibleShippingMethodsDocument } from '../orders.graphql.js';
-import { ResultOf } from '@/graphql/graphql.js';
 
-type ShippingMethodQuote = ResultOf<typeof draftOrderEligibleShippingMethodsDocument>['eligibleShippingMethodsForDraftOrder'][number];
+type ShippingMethodQuote = ResultOf<
+    typeof draftOrderEligibleShippingMethodsDocument
+>['eligibleShippingMethodsForDraftOrder'][number];
 
 interface ShippingMethodSelectorProps {
     eligibleShippingMethods: ShippingMethodQuote[];
@@ -13,53 +15,50 @@ interface ShippingMethodSelectorProps {
     onSelect: (shippingMethodId: string) => void;
 }
 
-export function ShippingMethodSelector({ 
-    eligibleShippingMethods, 
+export function ShippingMethodSelector({
+    eligibleShippingMethods,
     selectedShippingMethodId,
     currencyCode,
-    onSelect 
-}: ShippingMethodSelectorProps) {
+    onSelect,
+}: Readonly<ShippingMethodSelectorProps>) {
     return (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {eligibleShippingMethods?.length ? eligibleShippingMethods.map(method => (
-                <Card 
-                    key={method.id} 
-                    className={`cursor-pointer hover:bg-muted/50 transition-colors border-2 border-transparent ${
-                        selectedShippingMethodId === method.id 
-                            ? 'border-primary' 
-                            : ''
-                    }`}
-                    onClick={() => onSelect(method.id)}
-                >
-                    <CardHeader className="pb-2">
-                        <CardTitle className="">
-                            <Trans>{method.name}</Trans>
-                        </CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <div className="space-y-2">
-                            {method.description && (
-                                <p className="text-sm text-muted-foreground">
-                                    <Trans>{method.description}</Trans>
-                                </p>
-                            )}
-                            <div className="flex items-center justify-between">
-                                <span className="text-sm font-medium">
-                                    <Trans>Price</Trans>
-                                </span>
-                                <Money 
-                                    value={method.priceWithTax} 
-                                    currencyCode={currencyCode} 
-                                />
+            {eligibleShippingMethods?.length ? (
+                eligibleShippingMethods.map(method => (
+                    <Card
+                        key={method.id}
+                        className={`cursor-pointer hover:bg-muted/50 transition-colors border-2 border-transparent ${
+                            selectedShippingMethodId === method.id ? 'border-primary' : ''
+                        }`}
+                        onClick={() => onSelect(method.id)}
+                    >
+                        <CardHeader className="pb-2">
+                            <CardTitle className="">
+                                <Trans>{method.name}</Trans>
+                            </CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="space-y-2">
+                                {method.description && (
+                                    <p className="text-sm text-muted-foreground">
+                                        <Trans>{method.description}</Trans>
+                                    </p>
+                                )}
+                                <div className="flex items-center justify-between">
+                                    <span className="text-sm font-medium">
+                                        <Trans>Price</Trans>
+                                    </span>
+                                    <Money value={method.priceWithTax} currency={currencyCode} />
+                                </div>
                             </div>
-                        </div>
-                    </CardContent>
-                </Card>
-            )) : (
+                        </CardContent>
+                    </Card>
+                ))
+            ) : (
                 <div className="col-span-full text-center text-muted-foreground">
                     <Trans>No shipping methods available</Trans>
                 </div>
             )}
         </div>
     );
-} 
+}

package/src/app/routes/_authenticated/_orders/components/state-transition-control.tsx

@@ -0,0 +1,102 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { EllipsisVertical, CircleDashed, CircleCheck, CircleX } from 'lucide-react';
+
+export type StateType = 'default' | 'destructive' | 'success';
+
+export type StateTransitionAction = {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    type?: StateType;
+};
+
+type StateTransitionControlProps = {
+    currentState: string;
+    actions: StateTransitionAction[];
+    isLoading?: boolean;
+};
+
+export function getTypeForState(state: string): StateType {
+    const stateLower = state.toLowerCase();
+    switch (stateLower) {
+        case 'cancelled':
+        case 'error':
+            return 'destructive';
+        case 'completed':
+        case 'settled':
+        case 'delivered':
+            return 'success';
+        default:
+            return 'default';
+    }
+}
+
+export function StateTransitionControl({
+    currentState,
+    actions,
+    isLoading,
+}: Readonly<StateTransitionControlProps>) {
+    const currentStateType = getTypeForState(currentState);
+    const iconForType = {
+        destructive: <CircleX className="h-4 w-4 text-destructive" />,
+        success: <CircleCheck className="h-4 w-4 text-success" />,
+        default: <CircleDashed className="h-4 w-4 text-muted-foreground" />,
+    };
+
+    return (
+        <div className="flex min-w-0">
+            <div
+                className={cn(
+                    'inline-flex flex-nowrap items-center justify-start gap-1 h-8 rounded-md px-3 text-xs font-medium border border-input bg-background min-w-0',
+                    actions.length > 0 && 'rounded-r-none',
+                )}
+                title={currentState}
+            >
+                <div className="flex-shrink-0">{iconForType[currentStateType]}</div>
+                <span className="truncate">
+                    {currentState}
+                </span>
+            </div>
+            {actions.length > 0 && (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            disabled={isLoading}
+                            className={cn(
+                                'rounded-l-none border-l-0 shadow-none',
+                                'bg-background',
+                            )}
+                        >
+                            <EllipsisVertical className="h-4 w-4" />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        {actions.map((action, index) => {
+                            return (
+                                <DropdownMenuItem
+                                    key={action.label + index}
+                                    onClick={action.onClick}
+                                    variant={action.type === 'destructive' ? 'destructive' : 'default'}
+                                    disabled={action.disabled || isLoading}
+                                >
+                                    {iconForType[action.type ?? 'default']}
+                                    <Trans>{action.label}</Trans>
+                                </DropdownMenuItem>
+                            );
+                        })}
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            )}
+        </div>
+    );
+}