@vendure/dashboard 3.3.6-master-202507100236 → 3.3.6-master-202507110238

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';
+
+type StateType = 'default' | 'destructive' | 'success';
+
+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>
+    );
+}

package/src/app/routes/_authenticated/_orders/components/use-transition-order-to-state.tsx

@@ -0,0 +1,144 @@
+import { api } from '@/vdb/graphql/api.js';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { orderHistoryDocument, transitionOrderToStateDocument } from '../orders.graphql.js';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/vdb/components/ui/dialog.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { useState } from 'react';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Alert, AlertDescription } from '@/vdb/components/ui/alert.js';
+import { ResultOf } from 'gql.tada';
+
+/**
+ * Returns the state the order was in before it entered 'Modifying'.
+ * @param orderId The order ID
+ */
+export function useTransitionOrderToState(orderId: string | undefined) {
+    const [selectStateOpen, setSelectStateOpen] = useState(false);
+    const [onSuccessFn, setOnSuccessFn] = useState<() => void>(() => {});
+    const { data, isLoading, error } = useQuery({
+        queryKey: ['orderPreModifyingState', orderId],
+        queryFn: async () => {
+            const result = await api.query(orderHistoryDocument, {
+                id: orderId!,
+                options: {
+                    filter: { type: { eq: 'ORDER_STATE_TRANSITION' } },
+                    sort: { createdAt: 'DESC' },
+                    take: 50, // fetch enough history entries
+                },
+            });
+            const items = result.order?.history?.items ?? [];
+            const modifyingEntry = items.find(i => i.data?.to === 'Modifying');
+            return modifyingEntry ? (modifyingEntry.data?.from as string | undefined) : undefined;
+        },
+        enabled: !!orderId,
+    });
+    const transitionOrderToStateMutation = useMutation({
+        mutationFn: api.mutate(transitionOrderToStateDocument),
+    });
+
+    const transitionToState = async (state: string) => {
+        if (orderId) {
+            const { transitionOrderToState } = await transitionOrderToStateMutation.mutateAsync({
+                id: orderId,
+                state,
+            });
+            if (transitionOrderToState?.__typename === 'OrderStateTransitionError') {
+                return transitionOrderToState.transitionError;
+            }
+        }
+        return undefined;
+    }
+
+    const transitionToPreModifyingState = async () => {
+        if (data && orderId) {
+            return transitionToState(data);
+        } else {
+            return 'Could not find the state the order was in before it entered Modifying';
+        }
+    };
+
+    const ManuallySelectNextState = (props: { availableStates: string[] }) => {
+        const manuallyTransition = useMutation({
+            mutationFn: api.mutate(transitionOrderToStateDocument),
+            onSuccess: (result: ResultOf<typeof transitionOrderToStateDocument>) => {
+                if (result.transitionOrderToState?.__typename === 'OrderStateTransitionError') {
+                    setTransitionError(result.transitionOrderToState.transitionError);
+                } else {
+                    setTransitionError(undefined);
+                    setSelectStateOpen(false);
+                    onSuccessFn?.();
+                }
+            },
+            onError: (error) => {
+                setTransitionError(error.message);
+            },
+        });
+        const [selectedState, setSelectedState] = useState<string | undefined>(undefined);
+        const [transitionError, setTransitionError] = useState<string | undefined>(undefined);
+        if (!orderId) {
+            return null;
+        }
+        const onTransitionClick = () => {
+            if (!selectedState) {
+                return;
+            }
+            manuallyTransition.mutateAsync({
+                id: orderId,
+                state: selectedState,
+            });
+        };
+        return (
+            <Dialog open={selectStateOpen} onOpenChange={setSelectStateOpen}>
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>
+                            <Trans>Select next state</Trans>
+                        </DialogTitle>
+                    </DialogHeader>
+                    <DialogDescription>
+                        <Trans>Select the next state for the order</Trans>
+                    </DialogDescription>
+                    <Select value={selectedState} onValueChange={setSelectedState}>
+                        <SelectTrigger>
+                            <SelectValue placeholder="Select a state" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {props.availableStates.map(state => (
+                                <SelectItem key={state} value={state}>
+                                    {state}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                    {transitionError && (
+                        <Alert variant="destructive">
+                            <AlertDescription>
+                                <Trans>Error transitioning to state</Trans>: {transitionError}
+                            </AlertDescription>
+                        </Alert>
+                    )}
+                    <DialogFooter>
+                        <Button type="button" disabled={!selectedState} onClick={onTransitionClick}>
+                            <Trans>Transition to selected state</Trans>
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        );
+    };
+    return {
+        isLoading,
+        error,
+        preModifyingState: data,
+        transitionToPreModifyingState,
+        transitionToState,
+        ManuallySelectNextState,
+        selectNextState: ({ onSuccess }: { onSuccess?: () => void }) => {
+            setSelectStateOpen(true);
+            if (onSuccess) {
+                setOnSuccessFn(() => onSuccess);
+            }
+        },
+    };
+}

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

@@ -165,7 +165,6 @@ export const orderLineFragment = graphql(
             linePriceWithTax
             discountedLinePrice
             discountedLinePriceWithTax
-            customFields
         }
     `,
     [assetFragment],
@@ -278,6 +277,7 @@ export const orderDetailFragment = graphql(
                     id
                 }
             }
+            customFields
         }
     `,
     [
@@ -294,7 +294,6 @@ export const orderDetailDocument = graphql(
         query GetOrder($id: ID!) {
             order(id: $id) {
                 ...OrderDetail
-                customFields
             }
         }
     `,
@@ -506,6 +505,9 @@ export const transitionOrderToStateDocument = graphql(
                     id
                 }
                 ...ErrorResult
+                ... on OrderStateTransitionError {
+                    transitionError
+                }
             }
         }
     `,
@@ -606,3 +608,117 @@ export const transitionFulfillmentToStateDocument = graphql(
     `,
     [errorResultFragment],
 );
+
+export const couponCodeSelectorPromotionListDocument = graphql(`
+    query CouponCodeSelectorPromotionList($options: PromotionListOptions) {
+        promotions(options: $options) {
+            items {
+                id
+                name
+                couponCode
+            }
+            totalItems
+        }
+    }
+`);
+
+export const modifyOrderDocument = graphql(
+    `
+        mutation ModifyOrder($input: ModifyOrderInput!) {
+            modifyOrder(input: $input) {
+                __typename
+                ...OrderDetail
+                ...ErrorResult
+            }
+        }
+    `,
+    [orderDetailFragment, errorResultFragment],
+);
+
+export const settlePaymentDocument = graphql(
+    `
+        mutation SettlePayment($id: ID!) {
+            settlePayment(id: $id) {
+                __typename
+                ... on Payment {
+                    id
+                    state
+                    amount
+                    method
+                    metadata
+                }
+                ...ErrorResult
+            }
+        }
+    `,
+    [errorResultFragment],
+);
+
+export const transitionPaymentToStateDocument = graphql(
+    `
+        mutation TransitionPaymentToState($id: ID!, $state: String!) {
+            transitionPaymentToState(id: $id, state: $state) {
+                __typename
+                ... on Payment {
+                    id
+                    state
+                    amount
+                    method
+                    metadata
+                }
+                ...ErrorResult
+            }
+        }
+    `,
+    [errorResultFragment],
+);
+
+export const cancelPaymentDocument = graphql(
+    `
+        mutation CancelPayment($id: ID!) {
+            cancelPayment(id: $id) {
+                __typename
+                ... on Payment {
+                    id
+                    state
+                    amount
+                    method
+                    metadata
+                }
+                ...ErrorResult
+            }
+        }
+    `,
+    [errorResultFragment],
+);
+
+export const settleRefundDocument = graphql(
+    `
+        mutation SettleRefund($input: SettleRefundInput!) {
+            settleRefund(input: $input) {
+                __typename
+                ... on Refund {
+                    id
+                    state
+                    total
+                    items
+                    adjustment
+                    reason
+                    transactionId
+                    method
+                    metadata
+                }
+                ...ErrorResult
+            }
+        }
+    `,
+    [errorResultFragment],
+);
+
+export const setOrderCustomFieldsDocument = graphql(`
+    mutation SetOrderCustomFields($input: UpdateOrderInput!) {
+        setOrderCustomFields(input: $input) {
+            id
+        }
+    }
+`);