@wilshop/dashboard 3.5.5 → 3.5.7

package/src/app/routes/_authenticated/_orders/hooks/use-refund-order.ts

@@ -0,0 +1,345 @@
+import { api } from '@/vdb/graphql/api.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useLingui } from '@lingui/react/macro';
+import { useMutation } from '@tanstack/react-query';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+
+import { cancelOrderDocument, refundOrderDocument } from '../orders.graphql.js';
+import { Order } from '../utils/order-types.js';
+import {
+    allocateRefundsToPayments,
+    calculateRefundTotal,
+    getOrderLineInputFromSelections,
+    getRefundablePayments,
+    getTotalAmountToRefund,
+    getTotalRefundableAmount,
+    LineSelection,
+    RefundablePayment,
+} from '../utils/refund-utils.js';
+
+export interface UseRefundOrderReturn {
+    // State
+    lineSelections: Record<string, LineSelection>;
+    refundShippingLineIds: string[];
+    selectedReason: string;
+    customReason: string;
+    manuallySetRefundTotal: boolean;
+    refundTotal: number;
+    refundablePayments: RefundablePayment[];
+    isSubmitting: boolean;
+
+    // Derived (useMemo)
+    reason: string;
+    totalRefundableAmount: number;
+    amountToRefundTotal: number;
+    validationErrors: string[];
+    canSubmit: boolean;
+    isCancelling: boolean;
+
+    // Callbacks
+    onRefundQuantityChange: (lineId: string, quantity: number) => void;
+    onCancelChange: (lineId: string, cancel: boolean) => void;
+    toggleShippingRefund: (lineId: string) => void;
+    onPaymentSelected: (paymentId: string, selected: boolean) => void;
+    onPaymentAmountChange: (paymentId: string, amount: number) => void;
+    onManualRefundTotalChange: (value: number) => void;
+    setSelectedReason: (reason: string) => void;
+    setCustomReason: (reason: string) => void;
+    setManuallySetRefundTotal: (value: boolean) => void;
+    recalculateRefundTotal: () => number;
+
+    // Actions
+    handleSubmit: () => Promise<void>;
+    resetState: () => void;
+}
+
+export function useRefundOrder(order: Order, onSuccess?: () => void): UseRefundOrderReturn {
+    const { t } = useLingui();
+    const { formatCurrency } = useLocalFormat();
+
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [lineSelections, setLineSelections] = useState<Record<string, LineSelection>>({});
+    const [refundShippingLineIds, setRefundShippingLineIds] = useState<string[]>([]);
+    const [selectedReason, setSelectedReason] = useState<string>('');
+    const [customReason, setCustomReason] = useState('');
+    const [manuallySetRefundTotal, setManuallySetRefundTotal] = useState(false);
+    const [refundTotal, setRefundTotal] = useState(0);
+    const [refundablePayments, setRefundablePayments] = useState<RefundablePayment[]>([]);
+
+    const reason = selectedReason === 'other' ? customReason : selectedReason;
+
+    const cancelOrderMutation = useMutation({
+        mutationFn: api.mutate(cancelOrderDocument),
+    });
+
+    const refundOrderMutation = useMutation({
+        mutationFn: api.mutate(refundOrderDocument),
+    });
+
+    const resetState = useCallback(() => {
+        const selections: Record<string, LineSelection> = {};
+        order.lines.forEach(line => {
+            selections[line.id] = { quantity: 0, cancel: false };
+        });
+        setLineSelections(selections);
+        setRefundShippingLineIds([]);
+        setSelectedReason('');
+        setCustomReason('');
+        setManuallySetRefundTotal(false);
+        setRefundTotal(0);
+        setRefundablePayments(getRefundablePayments(order.payments));
+    }, [order]);
+
+    const totalRefundableAmount = useMemo(
+        () => getTotalRefundableAmount(refundablePayments),
+        [refundablePayments],
+    );
+
+    const amountToRefundTotal = useMemo(
+        () => getTotalAmountToRefund(refundablePayments),
+        [refundablePayments],
+    );
+
+    const recalculateRefundTotal = useCallback(() => {
+        return calculateRefundTotal(order.lines, lineSelections, order.shippingLines, refundShippingLineIds);
+    }, [order.lines, order.shippingLines, lineSelections, refundShippingLineIds]);
+
+    const updateRefundTotal = useCallback(() => {
+        if (manuallySetRefundTotal) {
+            setRefundablePayments(prev => allocateRefundsToPayments(prev, refundTotal));
+        } else {
+            const calculatedTotal = recalculateRefundTotal();
+            setRefundTotal(calculatedTotal);
+            setRefundablePayments(prev => allocateRefundsToPayments(prev, calculatedTotal));
+        }
+    }, [manuallySetRefundTotal, recalculateRefundTotal, refundTotal]);
+
+    useEffect(() => {
+        updateRefundTotal();
+    }, [updateRefundTotal]);
+
+    const onRefundQuantityChange = useCallback((lineId: string, quantity: number) => {
+        setManuallySetRefundTotal(false);
+        setLineSelections(prev => {
+            const prevLine = prev[lineId];
+            if (!prevLine) return prev;
+
+            const previousQuantity = prevLine.quantity;
+            let cancel = prevLine.cancel;
+
+            if (quantity === 0) {
+                cancel = false;
+            } else if (previousQuantity === 0 && quantity > 0) {
+                cancel = true;
+            }
+
+            return {
+                ...prev,
+                [lineId]: { quantity, cancel },
+            };
+        });
+    }, []);
+
+    const onCancelChange = useCallback((lineId: string, cancel: boolean) => {
+        setLineSelections(prev => ({
+            ...prev,
+            [lineId]: { ...prev[lineId], cancel },
+        }));
+    }, []);
+
+    const toggleShippingRefund = useCallback((lineId: string) => {
+        setManuallySetRefundTotal(false);
+        setRefundShippingLineIds(prev => {
+            if (prev.includes(lineId)) {
+                return prev.filter(id => id !== lineId);
+            }
+            return [...prev, lineId];
+        });
+    }, []);
+
+    const onPaymentSelected = useCallback(
+        (paymentId: string, selected: boolean) => {
+            setRefundablePayments(prev => {
+                const updatedPayments = prev.map(p => (p.id === paymentId ? { ...p, selected } : p));
+
+                if (selected) {
+                    const otherAllocated = updatedPayments
+                        .filter(p => p.id !== paymentId && p.selected)
+                        .reduce((sum, p) => sum + p.amountToRefund, 0);
+                    const outstanding = refundTotal - otherAllocated;
+                    return updatedPayments.map(p => {
+                        if (p.id === paymentId && outstanding > 0) {
+                            return { ...p, amountToRefund: Math.min(outstanding, p.refundableAmount) };
+                        }
+                        return p;
+                    });
+                } else {
+                    return updatedPayments.map(p => (p.id === paymentId ? { ...p, amountToRefund: 0 } : p));
+                }
+            });
+        },
+        [refundTotal],
+    );
+
+    const onPaymentAmountChange = useCallback((paymentId: string, amount: number) => {
+        setRefundablePayments(prev =>
+            prev.map(p => (p.id === paymentId ? { ...p, amountToRefund: amount } : p)),
+        );
+    }, []);
+
+    const onManualRefundTotalChange = useCallback((value: number) => {
+        setRefundTotal(value);
+        setRefundablePayments(prev => allocateRefundsToPayments(prev, value));
+    }, []);
+
+    const validationErrors = useMemo(() => {
+        const errors: string[] = [];
+
+        if (refundTotal < 0) {
+            errors.push(t`Refund total cannot be negative`);
+        }
+
+        if (refundTotal > totalRefundableAmount) {
+            errors.push(
+                t`Refund total exceeds maximum refundable amount of ${formatCurrency(totalRefundableAmount, order.currencyCode)}`,
+            );
+        }
+
+        if (amountToRefundTotal !== refundTotal && refundTotal > 0) {
+            errors.push(t`Allocated payment amount must equal refund total`);
+        }
+
+        if (refundTotal > 0 && !reason) {
+            errors.push(t`A reason for the refund is required`);
+        }
+
+        return errors;
+    }, [
+        refundTotal,
+        totalRefundableAmount,
+        amountToRefundTotal,
+        reason,
+        formatCurrency,
+        order.currencyCode,
+        t,
+    ]);
+
+    const canSubmit = useMemo(() => {
+        return (
+            refundTotal > 0 &&
+            amountToRefundTotal === refundTotal &&
+            !!reason &&
+            validationErrors.length === 0
+        );
+    }, [refundTotal, amountToRefundTotal, reason, validationErrors]);
+
+    const isCancelling = useMemo(() => {
+        return Object.values(lineSelections).some(line => line.quantity > 0 && line.cancel);
+    }, [lineSelections]);
+
+    const handleSubmit = async () => {
+        setIsSubmitting(true);
+
+        try {
+            const refundLines = getOrderLineInputFromSelections(lineSelections);
+            const cancelLines = getOrderLineInputFromSelections(lineSelections, line => line.cancel);
+
+            if (isCancelling && cancelLines.length > 0) {
+                const cancelResult = await cancelOrderMutation.mutateAsync({
+                    input: {
+                        orderId: order.id,
+                        lines: cancelLines,
+                        reason,
+                        cancelShipping: refundShippingLineIds.length > 0,
+                    },
+                });
+
+                if (cancelResult.cancelOrder.__typename !== 'Order') {
+                    toast.error(t`Failed to cancel order items`, {
+                        description: cancelResult.cancelOrder.message,
+                    });
+                    setIsSubmitting(false);
+                    return;
+                }
+            }
+
+            const paymentsToRefund = refundablePayments.filter(p => p.selected && p.amountToRefund > 0);
+
+            let successfulRefundCount = 0;
+
+            for (const payment of paymentsToRefund) {
+                const refundResult = await refundOrderMutation.mutateAsync({
+                    input: {
+                        lines: refundLines,
+                        reason,
+                        paymentId: payment.id,
+                        amount: payment.amountToRefund,
+                        shipping: 0,
+                        adjustment: 0,
+                    },
+                });
+
+                if (refundResult.refundOrder.__typename !== 'Refund') {
+                    if (successfulRefundCount > 0) {
+                        toast.warning(t`Partial refund completed`, {
+                            description: t`${successfulRefundCount} payment(s) refunded before failure. Check order history for details.`,
+                        });
+                    }
+                    toast.error(t`Failed to process refund`, {
+                        description: refundResult.refundOrder.message,
+                    });
+                    setIsSubmitting(false);
+                    return;
+                }
+
+                successfulRefundCount++;
+            }
+
+            toast.success(t`Refund processed successfully`);
+            onSuccess?.();
+        } catch (error) {
+            toast.error(t`Failed to process refund`, {
+                description: error instanceof Error ? error.message : t`Unknown error`,
+            });
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return {
+        // State
+        lineSelections,
+        refundShippingLineIds,
+        selectedReason,
+        customReason,
+        manuallySetRefundTotal,
+        refundTotal,
+        refundablePayments,
+        isSubmitting,
+
+        // Derived
+        reason,
+        totalRefundableAmount,
+        amountToRefundTotal,
+        validationErrors,
+        canSubmit,
+        isCancelling,
+
+        // Callbacks
+        onRefundQuantityChange,
+        onCancelChange,
+        toggleShippingRefund,
+        onPaymentSelected,
+        onPaymentAmountChange,
+        onManualRefundTotalChange,
+        setSelectedReason,
+        setCustomReason,
+        setManuallySetRefundTotal,
+        recalculateRefundTotal,
+
+        // Actions
+        handleSubmit,
+        resetState,
+    };
+}

package/src/app/routes/_authenticated/_orders/orders.graphql.ts

@@ -742,6 +742,47 @@ export const settleRefundDocument = graphql(
     [errorResultFragment],
 );
 
+export const refundOrderDocument = graphql(
+    `
+        mutation RefundOrder($input: RefundOrderInput!) {
+            refundOrder(input: $input) {
+                __typename
+                ... on Refund {
+                    id
+                    state
+                    total
+                    reason
+                    transactionId
+                    method
+                    metadata
+                    lines {
+                        orderLineId
+                        quantity
+                    }
+                }
+                ...ErrorResult
+            }
+        }
+    `,
+    [errorResultFragment],
+);
+
+export const cancelOrderDocument = graphql(
+    `
+        mutation CancelOrder($input: CancelOrderInput!) {
+            cancelOrder(input: $input) {
+                __typename
+                ... on Order {
+                    id
+                    state
+                }
+                ...ErrorResult
+            }
+        }
+    `,
+    [errorResultFragment],
+);
+
 export const setOrderCustomFieldsDocument = graphql(`
     mutation SetOrderCustomFields($input: UpdateOrderInput!) {
         setOrderCustomFields(input: $input) {

package/src/app/routes/_authenticated/_orders/orders_.draft.$id.tsx

@@ -24,6 +24,7 @@ import { ResultOf } from 'gql.tada';
 import { User } from 'lucide-react';
 import { toast } from 'sonner';
 import { CustomerAddressSelector } from './components/customer-address-selector.js';
+import { DraftOrderStatus } from './components/draft-order-status.js';
 import { EditOrderTable } from './components/edit-order-table.js';
 import { OrderAddress } from './components/order-address.js';
 import {
@@ -289,6 +290,13 @@ function DraftOrderPage() {
         });
     };
 
+    const hasCustomer = !!entity.customer;
+    const hasLines = entity.lines.length > 0;
+    const hasShippingMethod = entity.shippingLines.length > 0;
+    const isDraftState = entity.state === 'Draft';
+
+    const isCompleteDraftDisabled = !hasCustomer || !hasLines || !hasShippingMethod || !isDraftState;
+
     return (
         <Page pageId="draft-order-detail" form={form} entity={entity}>
             <PageTitle>
@@ -312,12 +320,7 @@ function DraftOrderPage() {
                     <PermissionGuard requires={['UpdateOrder']}>
                         <Button
                             type="button"
-                            disabled={
-                                !entity.customer ||
-                                entity.lines.length === 0 ||
-                                entity.shippingLines.length === 0 ||
-                                entity.state !== 'Draft'
-                            }
+                            disabled={isCompleteDraftDisabled}
                             onClick={() => completeDraftOrder({ id: entity.id, state: 'ArrangingPayment' })}
                         >
                             <Trans>Complete draft</Trans>
@@ -325,7 +328,20 @@ function DraftOrderPage() {
                     </PermissionGuard>
                 </PageActionBarRight>
             </PageActionBar>
+
             <PageLayout>
+                <PageBlock
+                    column="side"
+                    blockId="draft-order-status"
+                    title={<Trans>Draft order status</Trans>}
+                >
+                    <DraftOrderStatus
+                        hasCustomer={hasCustomer}
+                        hasLines={hasLines}
+                        hasShippingMethod={hasShippingMethod}
+                        isDraftState={isDraftState}
+                    />
+                </PageBlock>
                 <PageBlock column="main" blockId="order-table">
                     <EditOrderTable
                         order={entity}

package/src/app/routes/_authenticated/_orders/utils/order-utils.ts

@@ -157,3 +157,54 @@ export function computePendingOrder(
             : order.shippingLines,
     };
 }
+
+/**
+ * Gets the total quantity already refunded for an order line across all payments.
+ */
+export function getRefundedQuantity(order: Order, lineId: string): number {
+    return (
+        order.payments
+            ?.reduce((all, payment) => [...all, ...payment.refunds], [] as Payment['refunds'])
+            .filter(refund => refund.state !== 'Failed')
+            .reduce(
+                (all, refund) => [...all, ...refund.lines],
+                [] as Array<{ orderLineId: string; quantity: number }>,
+            )
+            .filter(refundLine => refundLine.orderLineId === lineId)
+            .reduce((sum, refundLine) => sum + refundLine.quantity, 0) ?? 0
+    );
+}
+
+/**
+ * Checks if an order line can still be refunded (has unrefunded quantity).
+ */
+export function lineCanBeRefunded(order: Order, line: Order['lines'][number]): boolean {
+    const refundedCount = getRefundedQuantity(order, line.id);
+    return refundedCount < line.orderPlacedQuantity;
+}
+
+/**
+ * Gets the maximum refundable quantity for an order line.
+ */
+export function getMaxRefundableQuantity(order: Order, line: Order['lines'][number]): number {
+    const refundedCount = getRefundedQuantity(order, line.id);
+    return Math.max(0, line.orderPlacedQuantity - refundedCount);
+}
+
+/**
+ * Checks if an order has any settled payments that can be refunded.
+ */
+export function orderHasSettledPayments(order: Order): boolean {
+    return !!order.payments?.some(p => p.state === 'Settled');
+}
+
+/**
+ * Determines if the refund button should be shown for an order.
+ * Shows refund for orders with settled payments that are not in initial states.
+ */
+export function canRefundOrder(order: Order): boolean {
+    if (!order || order.type === 'Aggregate') return false;
+    const hasSettled = orderHasSettledPayments(order);
+    const notInInitialState = order.state !== 'PaymentAuthorized' && order.active !== true;
+    return hasSettled && notInInitialState;
+}

package/src/app/routes/_authenticated/_orders/utils/refund-utils.ts

@@ -0,0 +1,100 @@
+import { Order, Payment } from './order-types.js';
+
+// === Types ===
+
+export type RefundablePayment = Payment & {
+    refundableAmount: number;
+    amountToRefund: number;
+    selected: boolean;
+};
+
+export type LineSelection = { quantity: number; cancel: boolean };
+
+// === Refundable Payment Functions ===
+
+/**
+ * Filters payments to only those that are settled and calculates the refundable amount
+ * (payment amount minus sum of non-failed refunds).
+ */
+export function getRefundablePayments(payments: Payment[] | undefined | null): RefundablePayment[] {
+    const settledPayments = (payments ?? []).filter(p => p.state === 'Settled');
+    return settledPayments.map((payment, index) => {
+        const successfulRefunds = payment.refunds.filter(r => r.state !== 'Failed');
+        const refundedTotal = successfulRefunds.reduce((sum, refund) => sum + (refund.total || 0), 0);
+        const refundableAmount = Math.max(0, payment.amount - refundedTotal);
+        return {
+            ...payment,
+            refundableAmount,
+            amountToRefund: 0,
+            selected: index === 0,
+        };
+    });
+}
+
+/**
+ * Calculates the total refundable amount across all payments.
+ */
+export function getTotalRefundableAmount(refundablePayments: RefundablePayment[]): number {
+    return refundablePayments.reduce((sum, p) => sum + p.refundableAmount, 0);
+}
+
+/**
+ * Calculates the total amount currently allocated to refund across all payments.
+ */
+export function getTotalAmountToRefund(refundablePayments: RefundablePayment[]): number {
+    return refundablePayments.reduce((sum, p) => sum + p.amountToRefund, 0);
+}
+
+// === Refund Calculation Functions ===
+
+/**
+ * Calculate total refund amount from line selections and shipping
+ */
+export function calculateRefundTotal(
+    lines: Order['lines'],
+    lineSelections: Record<string, LineSelection>,
+    shippingLines: Order['shippingLines'],
+    refundShippingLineIds: string[],
+): number {
+    const itemTotal = lines.reduce((total, line) => {
+        const selection = lineSelections[line.id];
+        const refundCount = selection?.quantity || 0;
+        return total + line.proratedUnitPriceWithTax * refundCount;
+    }, 0);
+
+    const shippingTotal = shippingLines.reduce((total, line) => {
+        if (refundShippingLineIds.includes(line.id)) {
+            return total + line.discountedPriceWithTax;
+        }
+        return total;
+    }, 0);
+
+    return itemTotal + shippingTotal;
+}
+
+/**
+ * Allocate refund total across selected payments (immutable)
+ */
+export function allocateRefundsToPayments(payments: RefundablePayment[], total: number): RefundablePayment[] {
+    let refundsAllocated = 0;
+    return payments.map(payment => {
+        if (!payment.selected) {
+            return { ...payment, amountToRefund: 0 };
+        }
+        const amountToRefund = Math.min(payment.refundableAmount, total - refundsAllocated);
+        refundsAllocated += amountToRefund;
+        return { ...payment, amountToRefund };
+    });
+}
+
+/**
+ * Convert line selections to GraphQL input format
+ */
+export function getOrderLineInputFromSelections(
+    lineSelections: Record<string, LineSelection>,
+    filterFn: (line: LineSelection) => boolean = () => true,
+): Array<{ orderLineId: string; quantity: number }> {
+    return Object.entries(lineSelections)
+        .filter(([, line]) => line.quantity > 0 && filterFn(line))
+        .map(([orderLineId, line]) => ({ orderLineId, quantity: line.quantity }));
+}

package/src/app/routes/_authenticated/_orders/utils/use-modify-order.ts

@@ -85,7 +85,7 @@ export function useModifyOrder(order: Order | null | undefined): UseModifyOrderR
                         const newQuantity = existingAdjustment.quantity + 1;
 
                         // If back to original quantity, remove from adjustments
-                        if (newQuantity === existingLine.quantity) {
+                        if (newQuantity === Number(existingLine.quantity)) {
                             return {
                                 ...prev,
                                 adjustOrderLines: (prev.adjustOrderLines ?? []).filter(

package/src/app/routes/_authenticated/_payment-methods/components/payment-eligibility-checker-selector.tsx

@@ -17,12 +17,14 @@ export const paymentEligibilityCheckersDocument = graphql(
 interface PaymentEligibilityCheckerSelectorProps {
     value: ConfigurableOperationInputType | undefined;
     onChange: (value: ConfigurableOperationInputType | undefined) => void;
+    onValidityChange?: (isValid: boolean) => void;
 }
 
 export function PaymentEligibilityCheckerSelector({
     value,
     onChange,
-}: PaymentEligibilityCheckerSelectorProps) {
+    onValidityChange,
+}: Readonly<PaymentEligibilityCheckerSelectorProps>) {
     return (
         <ConfigurableOperationSelector
             value={value}
@@ -32,6 +34,7 @@ export function PaymentEligibilityCheckerSelector({
             dataPath="paymentMethodEligibilityCheckers"
             buttonText="Select Payment Eligibility Checker"
             emptyText="No checkers found"
+            onValidityChange={onValidityChange}
         />
     );
 }

package/src/app/routes/_authenticated/_payment-methods/components/payment-handler-selector.tsx

@@ -17,9 +17,14 @@ export const paymentHandlersDocument = graphql(
 interface PaymentHandlerSelectorProps {
     value: ConfigurableOperationInputType | undefined;
     onChange: (value: ConfigurableOperationInputType | undefined) => void;
+    onValidityChange?: (isValid: boolean) => void;
 }
 
-export function PaymentHandlerSelector({ value, onChange }: Readonly<PaymentHandlerSelectorProps>) {
+export function PaymentHandlerSelector({
+    value,
+    onChange,
+    onValidityChange,
+}: Readonly<PaymentHandlerSelectorProps>) {
     return (
         <ConfigurableOperationSelector
             value={value}
@@ -28,6 +33,7 @@ export function PaymentHandlerSelector({ value, onChange }: Readonly<PaymentHand
             queryKey="paymentMethodHandlers"
             dataPath="paymentMethodHandlers"
             buttonText="Select Payment Handler"
+            onValidityChange={onValidityChange}
         />
     );
 }