@leandrosk/dashboard 3.5.5

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

@@ -0,0 +1,293 @@
+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 { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+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, onSuccess }: Readonly<PaymentDetailsProps>) {
+    const { formatCurrency, formatDate } = useLocalFormat();
+    const { t } = useLingui();
+    const { getTranslatedPaymentState, getTranslatedRefundState } = useDynamicTranslations();
+    const [settleRefundDialogOpen, setSettleRefundDialogOpen] = useState(false);
+    const [selectedRefundId, setSelectedRefundId] = useState<string | null>(null);
+
+    const settlePaymentMutation = useMutation({
+        mutationFn: api.mutate(settlePaymentDocument),
+        onSuccess: (result: ResultOf<typeof settlePaymentDocument>) => {
+            if (result.settlePayment.__typename === 'Payment') {
+                toast.success(t`Payment settled successfully`);
+                onSuccess?.();
+            } else {
+                toast.error(result.settlePayment.message ?? t`Failed to settle payment`);
+            }
+        },
+        onError: () => {
+            toast.error(t`Failed to settle payment`);
+        },
+    });
+
+    const transitionPaymentMutation = useMutation({
+        mutationFn: api.mutate(transitionPaymentToStateDocument),
+        onSuccess: (result: ResultOf<typeof transitionPaymentToStateDocument>) => {
+            if (result.transitionPaymentToState.__typename === 'Payment') {
+                toast.success(t`Payment state updated successfully`);
+                onSuccess?.();
+            } else {
+                toast.error(result.transitionPaymentToState.message ?? t`Failed to update payment state`);
+            }
+        },
+        onError: () => {
+            toast.error(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(t`Payment cancelled successfully`);
+                onSuccess?.();
+            } else {
+                toast.error(result.cancelPayment.message ?? t`Failed to cancel payment`);
+            }
+        },
+        onError: () => {
+            toast.error(t`Failed to cancel payment`);
+        },
+    });
+
+    const settleRefundMutation = useMutation({
+        mutationFn: api.mutate(settleRefundDocument),
+        onSuccess: (result: ResultOf<typeof settleRefundDocument>) => {
+            if (result.settleRefund.__typename === 'Refund') {
+                toast.success(t`Refund settled successfully`);
+                onSuccess?.();
+                setSettleRefundDialogOpen(false);
+            } else {
+                toast.error(result.settleRefund.message ?? t`Failed to settle refund`);
+            }
+        },
+        onError: () => {
+            toast.error(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: t`Settle payment`,
+                onClick: handleSettlePayment,
+                type: 'success',
+                disabled: settlePaymentMutation.isPending,
+            });
+        }
+
+        nextOtherStates().forEach(state => {
+            actions.push({
+                label:
+                    state === 'Cancelled'
+                        ? t`Cancel payment`
+                        : t`Transition to ${getTranslatedPaymentState(state)}`,
+                type: getTypeForState(state),
+                onClick: () => handlePaymentStateTransition(state),
+                disabled: transitionPaymentMutation.isPending || cancelPaymentMutation.isPending,
+            });
+        });
+
+        return actions;
+    };
+
+    return (
+        <>
+            <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={getTranslatedRefundState(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={getTranslatedPaymentState(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/refund-order-dialog.tsx

@@ -0,0 +1,372 @@
+import { VendureImage } from '@/vdb/components/shared/vendure-image.js';
+import { Alert, AlertDescription } from '@/vdb/components/ui/alert.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Checkbox } from '@/vdb/components/ui/checkbox.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 {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/vdb/components/ui/select.js';
+import { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { AlertCircle } from 'lucide-react';
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { uiConfig } from 'virtual:vendure-ui-config';
+
+import { useRefundOrder } from '../hooks/use-refund-order.js';
+import { Order } from '../utils/order-types.js';
+import { getMaxRefundableQuantity, lineCanBeRefunded } from '../utils/order-utils.js';
+
+interface RefundOrderDialogProps {
+    readonly order: Order;
+    readonly onSuccess?: () => void;
+}
+
+export interface RefundOrderDialogRef {
+    open: () => void;
+}
+
+export const RefundOrderDialog = forwardRef<RefundOrderDialogRef, RefundOrderDialogProps>(
+    function RefundOrderDialog({ order, onSuccess }, ref) {
+        const { t } = useLingui();
+        const { getTranslatedRefundReason } = useDynamicTranslations();
+        const { formatCurrency, toMajorUnits, toMinorUnits } = useLocalFormat();
+        const [open, setOpen] = useState(false);
+
+        const refund = useRefundOrder(order, () => {
+            setOpen(false);
+            onSuccess?.();
+        });
+
+        useImperativeHandle(ref, () => ({
+            open: () => {
+                refund.resetState();
+                setOpen(true);
+            },
+        }));
+
+        const { refundReasons } = uiConfig.orders;
+
+        const handleClose = () => {
+            setOpen(false);
+        };
+
+        return (
+            <Dialog open={open} onOpenChange={setOpen}>
+                <DialogContent className="!max-w-4xl max-h-[90vh] overflow-y-auto">
+                    <DialogHeader>
+                        <DialogTitle>
+                            <Trans>Refund and cancel order</Trans>
+                        </DialogTitle>
+                        <DialogDescription>
+                            <Trans>Select items to refund and optionally return to stock</Trans>
+                        </DialogDescription>
+                    </DialogHeader>
+
+                    <div className="space-y-6">
+                        {/* Order Lines Table */}
+                        <div className="space-y-2">
+                            <Label className="text-base font-medium">
+                                <Trans>Order lines</Trans>
+                            </Label>
+                            <div className="border rounded-md overflow-hidden">
+                                <table className="w-full text-sm">
+                                    <thead className="bg-muted">
+                                        <tr>
+                                            <th className="p-2 text-left w-16">
+                                                <Trans>Image</Trans>
+                                            </th>
+                                            <th className="p-2 text-left">
+                                                <Trans>Product</Trans>
+                                            </th>
+                                            <th className="p-2 text-right">
+                                                <Trans>Unit price</Trans>
+                                            </th>
+                                            <th className="p-2 text-center">
+                                                <Trans>Qty</Trans>
+                                            </th>
+                                            <th className="p-2 text-center w-24">
+                                                <Trans>Refund</Trans>
+                                            </th>
+                                            <th className="p-2 text-center">
+                                                <Trans>Return to stock</Trans>
+                                            </th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {order.lines.map(line => {
+                                            const canRefund = lineCanBeRefunded(order, line);
+                                            const maxRefundable = getMaxRefundableQuantity(order, line);
+                                            const selection = refund.lineSelections[line.id];
+
+                                            if (!canRefund) return null;
+
+                                            return (
+                                                <tr key={line.id} className="border-t">
+                                                    <td className="p-2">
+                                                        <VendureImage
+                                                            asset={line.featuredAsset}
+                                                            preset="tiny"
+                                                            className="w-10 h-10 object-cover"
+                                                        />
+                                                    </td>
+                                                    <td className="p-2">
+                                                        <div className="font-medium">
+                                                            {line.productVariant.name}
+                                                        </div>
+                                                        <div className="text-muted-foreground text-xs">
+                                                            <Trans>SKU:</Trans> {line.productVariant.sku}
+                                                        </div>
+                                                    </td>
+                                                    <td className="p-2 text-right">
+                                                        {formatCurrency(
+                                                            line.proratedUnitPriceWithTax,
+                                                            order.currencyCode,
+                                                        )}
+                                                    </td>
+                                                    <td className="p-2 text-center">
+                                                        {line.orderPlacedQuantity}
+                                                        {maxRefundable < line.orderPlacedQuantity && (
+                                                            <div className="text-xs text-muted-foreground">
+                                                                <Trans>({maxRefundable} refundable)</Trans>
+                                                            </div>
+                                                        )}
+                                                    </td>
+                                                    <td className="p-2 text-center">
+                                                        <Input
+                                                            type="number"
+                                                            min={0}
+                                                            max={maxRefundable}
+                                                            value={selection?.quantity || ''}
+                                                            placeholder="0"
+                                                            onChange={e => {
+                                                                const value = Math.min(
+                                                                    Math.max(0, Number.parseInt(e.target.value, 10) || 0),
+                                                                    maxRefundable,
+                                                                );
+                                                                refund.onRefundQuantityChange(line.id, value);
+                                                            }}
+                                                            className="w-20 text-right"
+                                                        />
+                                                    </td>
+                                                    <td className="p-2 text-center">
+                                                        <div className="flex items-center justify-center">
+                                                            <Checkbox
+                                                                checked={selection?.cancel ?? false}
+                                                                disabled={!selection?.quantity}
+                                                                onCheckedChange={checked =>
+                                                                    refund.onCancelChange(line.id, !!checked)
+                                                                }
+                                                            />
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                            );
+                                        })}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                        {/* Shipping Refund */}
+                        {order.shippingLines.length > 0 && (
+                            <div className="space-y-2">
+                                <Label className="text-base font-medium">
+                                    <Trans>Shipping</Trans>
+                                </Label>
+                                <div className="space-y-2">
+                                    {order.shippingLines.map(shippingLine => (
+                                        <div key={shippingLine.id} className="flex items-center gap-2">
+                                            <Checkbox
+                                                checked={refund.refundShippingLineIds.includes(shippingLine.id)}
+                                                onCheckedChange={() =>
+                                                    refund.toggleShippingRefund(shippingLine.id)
+                                                }
+                                            />
+                                            <Label className="font-normal">
+                                                <Trans>Refund shipping</Trans>:{' '}
+                                                {shippingLine.shippingMethod?.name} -{' '}
+                                                {formatCurrency(
+                                                    shippingLine.discountedPriceWithTax,
+                                                    order.currencyCode,
+                                                )}
+                                            </Label>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+
+                        {/* Reason Selection */}
+                        <div className="space-y-2">
+                            <Label className="text-base font-medium">
+                                <Trans>Reason</Trans>
+                            </Label>
+                            <Select value={refund.selectedReason} onValueChange={refund.setSelectedReason}>
+                                <SelectTrigger className="w-full">
+                                    <SelectValue placeholder={t`Select a reason...`} />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    {refundReasons.map(reasonOption => (
+                                        <SelectItem key={reasonOption.value} value={reasonOption.value}>
+                                            {getTranslatedRefundReason(reasonOption.label)}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                            {refund.selectedReason === 'other' && (
+                                <Input
+                                    placeholder={t`Enter custom reason...`}
+                                    value={refund.customReason}
+                                    onChange={e => refund.setCustomReason(e.target.value)}
+                                    className="mt-2"
+                                />
+                            )}
+                        </div>
+
+                        {/* Refund Total */}
+                        <div className="space-y-2">
+                            <div className="flex items-center gap-2">
+                                <Label className="text-base font-medium">
+                                    <Trans>Refund total</Trans>
+                                </Label>
+                                <div className="flex items-center gap-2">
+                                    <Checkbox
+                                        checked={refund.manuallySetRefundTotal}
+                                        onCheckedChange={checked => {
+                                            refund.setManuallySetRefundTotal(!!checked);
+                                            if (!checked) {
+                                                const calculated = refund.recalculateRefundTotal();
+                                                refund.onManualRefundTotalChange(calculated);
+                                            }
+                                        }}
+                                    />
+                                    <Label className="font-normal text-sm text-muted-foreground">
+                                        <Trans>Override</Trans>
+                                    </Label>
+                                </div>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <Input
+                                    type="number"
+                                    step="0.01"
+                                    value={toMajorUnits(refund.refundTotal)}
+                                    onChange={e =>
+                                        refund.onManualRefundTotalChange(
+                                            toMinorUnits(Number.parseFloat(e.target.value) || 0),
+                                        )
+                                    }
+                                    disabled={!refund.manuallySetRefundTotal}
+                                    className="w-32"
+                                />
+                                <span className="text-muted-foreground">{order.currencyCode}</span>
+                                <span className="text-muted-foreground text-sm">
+                                    <Trans>(max: {formatCurrency(refund.totalRefundableAmount, order.currencyCode)})</Trans>
+                                </span>
+                            </div>
+                        </div>
+
+                        {/* Payment Selection */}
+                        <div className="space-y-2">
+                            <Label className="text-base font-medium">
+                                <Trans>Select payments to refund</Trans>
+                            </Label>
+                            <div className="space-y-3">
+                                {refund.refundablePayments.map(payment => (
+                                    <div key={payment.id} className="border rounded-md p-3 space-y-2">
+                                        <div className="flex items-center justify-between">
+                                            <div className="flex items-center gap-2">
+                                                <Checkbox
+                                                    checked={payment.selected}
+                                                    onCheckedChange={checked =>
+                                                        refund.onPaymentSelected(payment.id, !!checked)
+                                                    }
+                                                />
+                                                <div>
+                                                    <div className="font-medium">{payment.method}</div>
+                                                    <div className="text-sm text-muted-foreground">
+                                                        <Trans>Available</Trans>:{' '}
+                                                        {formatCurrency(
+                                                            payment.refundableAmount,
+                                                            order.currencyCode,
+                                                        )}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            {payment.selected && (
+                                                <div className="flex items-center gap-2">
+                                                    <Label className="text-sm">
+                                                        <Trans>Amount</Trans>:
+                                                    </Label>
+                                                    <Input
+                                                        type="number"
+                                                        step="0.01"
+                                                        value={toMajorUnits(payment.amountToRefund)}
+                                                        onChange={e =>
+                                                            refund.onPaymentAmountChange(
+                                                                payment.id,
+                                                                toMinorUnits(Number.parseFloat(e.target.value) || 0),
+                                                            )
+                                                        }
+                                                        className="w-24"
+                                                        max={toMajorUnits(payment.refundableAmount)}
+                                                    />
+                                                    <span className="text-muted-foreground text-sm">
+                                                        {order.currencyCode}
+                                                    </span>
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+
+                        {/* Validation Errors */}
+                        {refund.validationErrors.length > 0 && (
+                            <div className="space-y-2">
+                                {refund.validationErrors.map(error => (
+                                    <Alert key={error} variant="destructive">
+                                        <AlertCircle className="h-4 w-4" />
+                                        <AlertDescription>{error}</AlertDescription>
+                                    </Alert>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+
+                    <DialogFooter>
+                        <Button variant="outline" onClick={handleClose} disabled={refund.isSubmitting}>
+                            <Trans>Cancel</Trans>
+                        </Button>
+                        <Button
+                            onClick={() => void refund.handleSubmit()}
+                            disabled={!refund.canSubmit || refund.isSubmitting}
+                        >
+                            {refund.isSubmitting ? (
+                                <Trans>Processing...</Trans>
+                            ) : (
+                                <Trans>
+                                    Refund {formatCurrency(refund.amountToRefundTotal, order.currencyCode)}
+                                </Trans>
+                            )}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        );
+    },
+);