@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

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

@@ -1,5 +1,9 @@
-import { assetFragment, errorResultFragment } from '@/graphql/fragments.js';
-import { graphql } from '@/graphql/graphql.js';
+import {
+    assetFragment,
+    configurableOperationDefFragment,
+    errorResultFragment,
+} from '@/vdb/graphql/fragments.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const orderListDocument = graphql(`
     query GetOrders($options: OrderListOptions) {
@@ -20,7 +24,6 @@ export const orderListDocument = graphql(`
                 total
                 totalWithTax
                 currencyCode
-
                 shippingLines {
                     shippingMethod {
                         name
@@ -162,7 +165,6 @@ export const orderLineFragment = graphql(
             linePriceWithTax
             discountedLinePrice
             discountedLinePriceWithTax
-            customFields
         }
     `,
     [assetFragment],
@@ -275,6 +277,7 @@ export const orderDetailFragment = graphql(
                     id
                 }
             }
+            customFields
         }
     `,
     [
@@ -291,7 +294,6 @@ export const orderDetailDocument = graphql(
         query GetOrder($id: ID!) {
             order(id: $id) {
                 ...OrderDetail
-                customFields
             }
         }
     `,
@@ -503,8 +505,220 @@ export const transitionOrderToStateDocument = graphql(
                     id
                 }
                 ...ErrorResult
+                ... on OrderStateTransitionError {
+                    transitionError
+                }
+            }
+        }
+    `,
+    [errorResultFragment],
+);
+
+export const paymentMethodsDocument = graphql(`
+    query GetPaymentMethods($options: PaymentMethodListOptions!) {
+        paymentMethods(options: $options) {
+            items {
+                id
+                createdAt
+                updatedAt
+                name
+                code
+                description
+                enabled
+            }
+            totalItems
+        }
+    }
+`);
+
+export const addManualPaymentToOrderDocument = graphql(
+    `
+        mutation AddManualPaymentToOrder($input: ManualPaymentInput!) {
+            addManualPaymentToOrder(input: $input) {
+                __typename
+                ... on Order {
+                    id
+                    state
+                    payments {
+                        id
+                        amount
+                        method
+                        state
+                    }
+                }
+                ...ErrorResult
             }
         }
     `,
     [errorResultFragment],
 );
+
+export const fulfillmentHandlersDocument = graphql(
+    `
+        query GetFulfillmentHandlers {
+            fulfillmentHandlers {
+                ...ConfigurableOperationDef
+            }
+        }
+    `,
+    [configurableOperationDefFragment],
+);
+
+export const fulfillOrderDocument = graphql(
+    `
+        mutation FulfillOrder($input: FulfillOrderInput!) {
+            addFulfillmentToOrder(input: $input) {
+                __typename
+                ... on Fulfillment {
+                    id
+                    state
+                    method
+                    trackingCode
+                    lines {
+                        orderLineId
+                        quantity
+                    }
+                }
+                ...ErrorResult
+            }
+        }
+    `,
+    [errorResultFragment],
+);
+
+export const transitionFulfillmentToStateDocument = graphql(
+    `
+        mutation TransitionFulfillmentToState($id: ID!, $state: String!) {
+            transitionFulfillmentToState(id: $id, state: $state) {
+                __typename
+                ... on Fulfillment {
+                    id
+                    state
+                    nextStates
+                    method
+                    trackingCode
+                    lines {
+                        orderLineId
+                        quantity
+                    }
+                }
+                ...ErrorResult
+            }
+        }
+    `,
+    [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
+        }
+    }
+`);

package/src/app/routes/_authenticated/_orders/orders.tsx

@@ -1,17 +1,17 @@
-import { Money } from '@/components/data-display/money.js';
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { Badge } from '@/components/ui/badge.js';
-import { Button } from '@/components/ui/button.js';
-import { ListPage } from '@/framework/page/list-page.js';
-import { Trans } from '@/lib/trans.js';
+import { Money } from '@/vdb/components/data-display/money.js';
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/vdb/framework/page/list-page.js';
+import { api } from '@/vdb/graphql/api.js';
+import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { useServerConfig } from '@/vdb/hooks/use-server-config.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { useMutation } from '@tanstack/react-query';
 import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
-import { createDraftOrderDocument, orderListDocument } from './orders.graphql.js';
-import { useServerConfig } from '@/hooks/use-server-config.js';
-import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
 import { PlusIcon } from 'lucide-react';
-import { useMutation } from '@tanstack/react-query';
-import { api } from '@/graphql/api.js';
-import { ResultOf } from '@/graphql/graphql.js';
+import { createDraftOrderDocument, orderListDocument } from './orders.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_orders/orders')({
     component: OrderListPage,
@@ -25,8 +25,8 @@ function OrderListPage() {
         mutationFn: api.mutate(createDraftOrderDocument),
         onSuccess: (result: ResultOf<typeof createDraftOrderDocument>) => {
             navigate({ to: '/orders/draft/$id', params: { id: result.createDraftOrder.id } });
-        }
-    })
+        },
+    });
     return (
         <ListPage
             pageId="order-list"
@@ -61,7 +61,7 @@ function OrderListPage() {
                     cell: ({ cell, row }) => {
                         const value = cell.getValue();
                         const currencyCode = row.original.currencyCode;
-                        return <Money value={value} currencyCode={currencyCode} />;
+                        return <Money value={value} currency={currencyCode} />;
                     },
                 },
                 totalWithTax: {
@@ -69,7 +69,7 @@ function OrderListPage() {
                     cell: ({ cell, row }) => {
                         const value = cell.getValue();
                         const currencyCode = row.original.currencyCode;
-                        return <Money value={value} currencyCode={currencyCode} />;
+                        return <Money value={value} currency={currencyCode} />;
                     },
                 },
                 state: {
@@ -121,12 +121,13 @@ function OrderListPage() {
             facetedFilters={{
                 state: {
                     title: 'State',
-                    options: serverConfig?.orderProcess.map(state => {
-                        return {
-                            label: state.name,
-                            value: state.name,
-                        }
-                    }) ?? [],
+                    options:
+                        serverConfig?.orderProcess.map(state => {
+                            return {
+                                label: state.name,
+                                value: state.name,
+                            };
+                        }) ?? [],
                 },
             }}
         >