@vendure/dashboard 3.2.2 → 3.2.4

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

@@ -1,4 +1,4 @@
-import { assetFragment } from '@/graphql/fragments.js';
+import { assetFragment, errorResultFragment } from '@/graphql/fragments.js';
 import { graphql } from '@/graphql/graphql.js';
 import { gql } from 'awesome-graphql-client';
 
@@ -163,6 +163,7 @@ export const orderLineFragment = graphql(
             linePriceWithTax
             discountedLinePrice
             discountedLinePriceWithTax
+            customFields
         }
     `,
     [assetFragment],
@@ -214,6 +215,7 @@ export const orderDetailFragment = graphql(
             promotions {
                 id
                 couponCode
+                name
             }
             subTotal
             subTotalWithTax
@@ -323,3 +325,187 @@ export const orderHistoryDocument = graphql(`
         }
     }
 `);
+
+export const createDraftOrderDocument = graphql(`
+    mutation CreateDraftOrder {
+        createDraftOrder {
+            id
+        }
+    }
+`);
+
+export const deleteDraftOrderDocument = graphql(`
+    mutation DeleteDraftOrder($orderId: ID!) {
+        deleteDraftOrder(orderId: $orderId) {
+            result
+            message
+        }
+    }
+`);
+
+export const addItemToDraftOrderDocument = graphql(
+    `
+        mutation AddItemToDraftOrder($orderId: ID!, $input: AddItemToDraftOrderInput!) {
+            addItemToDraftOrder(orderId: $orderId, input: $input) {
+                __typename
+                ... on Order {
+                    id
+                }
+                ...ErrorResult
+            }
+        }
+    `,
+    [errorResultFragment],
+);
+
+export const adjustDraftOrderLineDocument = graphql(
+    `
+        mutation AdjustDraftOrderLine($orderId: ID!, $input: AdjustDraftOrderLineInput!) {
+            adjustDraftOrderLine(orderId: $orderId, input: $input) {
+                __typename
+                ... on Order {
+                    id
+                }
+                ...ErrorResult
+            }
+        }
+    `,
+    [errorResultFragment],
+);
+
+export const removeDraftOrderLineDocument = graphql(
+    `
+        mutation RemoveDraftOrderLine($orderId: ID!, $orderLineId: ID!) {
+            removeDraftOrderLine(orderId: $orderId, orderLineId: $orderLineId) {
+                __typename
+                ... on Order {
+                    id
+                }
+                ...ErrorResult
+            }
+        }
+    `,
+    [errorResultFragment],
+);
+
+export const setCustomerForDraftOrderDocument = graphql(
+    `
+        mutation SetCustomerForDraftOrder($orderId: ID!, $customerId: ID, $input: CreateCustomerInput) {
+            setCustomerForDraftOrder(orderId: $orderId, customerId: $customerId, input: $input) {
+                __typename
+                ... on Order {
+                    id
+                }
+                ...ErrorResult
+            }
+        }
+    `,
+    [errorResultFragment],
+);
+
+export const setShippingAddressForDraftOrderDocument = graphql(`
+    mutation SetDraftOrderShippingAddress($orderId: ID!, $input: CreateAddressInput!) {
+        setDraftOrderShippingAddress(orderId: $orderId, input: $input) {
+            id
+        }
+    }
+`);
+
+export const setBillingAddressForDraftOrderDocument = graphql(`
+    mutation SetDraftOrderBillingAddress($orderId: ID!, $input: CreateAddressInput!) {
+        setDraftOrderBillingAddress(orderId: $orderId, input: $input) {
+            id
+        }
+    }
+`);
+
+export const unsetShippingAddressForDraftOrderDocument = graphql(`
+    mutation UnsetDraftOrderShippingAddress($orderId: ID!) {
+        unsetDraftOrderShippingAddress(orderId: $orderId) {
+            id
+        }
+    }
+`);
+
+export const unsetBillingAddressForDraftOrderDocument = graphql(`
+    mutation UnsetDraftOrderBillingAddress($orderId: ID!) {
+        unsetDraftOrderBillingAddress(orderId: $orderId) {
+            id
+        }
+    }
+`);
+
+export const applyCouponCodeToDraftOrderDocument = graphql(
+    `
+        mutation ApplyCouponCodeToDraftOrder($orderId: ID!, $couponCode: String!) {
+            applyCouponCodeToDraftOrder(orderId: $orderId, couponCode: $couponCode) {
+                __typename
+                ... on Order {
+                    id
+                }
+                ...ErrorResult
+            }
+        }
+    `,
+    [errorResultFragment],
+);
+
+export const removeCouponCodeFromDraftOrderDocument = graphql(`
+    mutation RemoveCouponCodeFromDraftOrder($orderId: ID!, $couponCode: String!) {
+        removeCouponCodeFromDraftOrder(orderId: $orderId, couponCode: $couponCode) {
+            id
+        }
+    }
+`);
+
+export const draftOrderEligibleShippingMethodsDocument = graphql(`
+    query DraftOrderEligibleShippingMethods($orderId: ID!) {
+        eligibleShippingMethodsForDraftOrder(orderId: $orderId) {
+            id
+            name
+            code
+            description
+            price
+            priceWithTax
+            metadata
+        }
+    }
+`);
+
+export const setDraftOrderShippingMethodDocument = graphql(
+    `
+        mutation SetDraftOrderShippingMethod($orderId: ID!, $shippingMethodId: ID!) {
+            setDraftOrderShippingMethod(orderId: $orderId, shippingMethodId: $shippingMethodId) {
+                __typename
+                ... on Order {
+                    id
+                }
+                ...ErrorResult
+            }
+        }
+    `,
+    [errorResultFragment],
+);
+
+export const setDraftOrderCustomFieldsDocument = graphql(`
+    mutation SetDraftOrderCustomFields($orderId: ID!, $input: UpdateOrderInput!) {
+        setDraftOrderCustomFields(orderId: $orderId, input: $input) {
+            id
+        }
+    }
+`);
+
+export const transitionOrderToStateDocument = graphql(
+    `
+        mutation TransitionOrderToState($id: ID!, $state: String!) {
+            transitionOrderToState(id: $id, state: $state) {
+                __typename
+                ... on Order {
+                    id
+                }
+                ...ErrorResult
+            }
+        }
+    `,
+    [errorResultFragment],
+);

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

@@ -4,9 +4,14 @@ 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 { createFileRoute, Link } from '@tanstack/react-router';
-import { orderListDocument } from './orders.graphql.js';
+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';
 
 export const Route = createFileRoute('/_authenticated/_orders/orders')({
     component: OrderListPage,
@@ -15,30 +20,39 @@ export const Route = createFileRoute('/_authenticated/_orders/orders')({
 
 function OrderListPage() {
     const serverConfig = useServerConfig();
+    const navigate = useNavigate();
+    const { mutate: createDraftOrder } = useMutation({
+        mutationFn: api.mutate(createDraftOrderDocument),
+        onSuccess: (result: ResultOf<typeof createDraftOrderDocument>) => {
+            navigate({ to: '/orders/draft/$id', params: { id: result.createDraftOrder.id } });
+        }
+    })
     return (
         <ListPage
             pageId="order-list"
             title="Orders"
             onSearchTermChange={searchTerm => {
                 return {
-                    code: {
-                        contains: searchTerm,
-                    },
-                    customerLastName: {
-                        contains: searchTerm,
-                    },
-                    transactionId: {
-                        contains: searchTerm,
-                    },
+                    _or: [
+                        {
+                            code: {
+                                contains: searchTerm,
+                            },
+                        },
+                        {
+                            customerLastName: {
+                                contains: searchTerm,
+                            },
+                        },
+                        {
+                            transactionId: {
+                                contains: searchTerm,
+                            },
+                        },
+                    ],
                 };
             }}
             defaultSort={[{ id: 'orderPlacedAt', desc: true }]}
-            transformVariables={variables => {
-                return {
-                    ...variables,
-                    filterOperator: 'OR',
-                };
-            }}
             listQuery={orderListDocument}
             route={Route}
             customizeColumns={{
@@ -115,6 +129,13 @@ function OrderListPage() {
                     }) ?? [],
                 },
             }}
-        />
+        >
+            <PageActionBarRight>
+                <Button onClick={() => createDraftOrder({})}>
+                    <PlusIcon className="mr-2 h-4 w-4" />
+                    <Trans>Draft order</Trans>
+                </Button>
+            </PageActionBarRight>
+        </ListPage>
     );
 }

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

@@ -2,6 +2,7 @@ import { ErrorPage } from '@/components/shared/error-page.js';
 import { PermissionGuard } from '@/components/shared/permission-guard.js';
 import { Badge } from '@/components/ui/badge.js';
 import { Button } from '@/components/ui/button.js';
+import { addCustomFields } from '@/framework/document-introspection/add-custom-fields.js';
 import {
     CustomFieldsPageBlock,
     Page,
@@ -11,10 +12,10 @@ import {
     PageLayout,
     PageTitle,
 } from '@/framework/layout-engine/page-layout.js';
-import { detailPageRouteLoader } from '@/framework/page/detail-page-route-loader.js';
-import { useDetailPage } from '@/framework/page/use-detail-page.js';
+import { getDetailQueryOptions, useDetailPage } from '@/framework/page/use-detail-page.js';
+import { ResultOf } from '@/graphql/graphql.js';
 import { Trans, useLingui } from '@/lib/trans.js';
-import { Link, createFileRoute } from '@tanstack/react-router';
+import { Link, createFileRoute, redirect } from '@tanstack/react-router';
 import { User } from 'lucide-react';
 import { toast } from 'sonner';
 import { OrderAddress } from './components/order-address.js';
@@ -26,12 +27,33 @@ import { orderDetailDocument } from './orders.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_orders/orders_/$id')({
     component: OrderDetailPage,
-    loader: detailPageRouteLoader({
-        queryDocument: orderDetailDocument,
-        breadcrumb(_isNew, entity) {
-            return [{ path: '/orders', label: 'Orders' }, entity?.code];
-        },
-    }),
+    loader: async ({
+        context,
+        params,
+    }) => {
+        if (!params.id) {
+            throw new Error('ID param is required');
+        }
+
+        const result: ResultOf<typeof orderDetailDocument> = await context.queryClient.ensureQueryData(
+            getDetailQueryOptions(addCustomFields(orderDetailDocument), { id: params.id }),
+            { id: params.id },
+        );
+
+        if (!result.order) {
+            throw new Error(`Order with the ID ${params.id} was not found`);
+        }
+
+        if (result.order.state === 'Draft') {
+            throw redirect({
+                to: `/orders/draft/${params.id}`,
+            });
+        }
+
+        return {
+            breadcrumb: [{ path: '/orders', label: 'Orders' }, result.order.code],
+        };
+    },
     errorComponent: ({ error }) => <ErrorPage message={error.message} />,
 });