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

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

@@ -1,10 +1,10 @@
+import { CustomFieldsForm } from '@/vdb/components/shared/custom-fields-form.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
 import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
-import { Badge } from '@/vdb/components/ui/badge.js';
 import { Button } from '@/vdb/components/ui/button.js';
+import { DropdownMenuItem } from '@/vdb/components/ui/dropdown-menu.js';
 import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
 import {
-    CustomFieldsPageBlock,
     Page,
     PageActionBar,
     PageActionBarRight,
@@ -13,23 +13,32 @@ import {
     PageTitle,
 } from '@/vdb/framework/layout-engine/page-layout.js';
 import { getDetailQueryOptions, useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { api } from '@/vdb/graphql/api.js';
 import { ResultOf } from '@/vdb/graphql/graphql.js';
+import { useCustomFieldConfig } from '@/vdb/hooks/use-custom-field-config.js';
 import { Trans, useLingui } from '@/vdb/lib/trans.js';
-import { Link, createFileRoute, redirect } from '@tanstack/react-router';
-import { User } from 'lucide-react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { createFileRoute, Link, redirect, useNavigate } from '@tanstack/react-router';
+import { Pencil, User } from 'lucide-react';
+import { useMemo } from 'react';
 import { toast } from 'sonner';
 import { AddManualPaymentDialog } from './components/add-manual-payment-dialog.js';
 import { FulfillOrderDialog } from './components/fulfill-order-dialog.js';
 import { FulfillmentDetails } from './components/fulfillment-details.js';
 import { OrderAddress } from './components/order-address.js';
 import { OrderHistoryContainer } from './components/order-history/order-history-container.js';
+import { orderHistoryQueryKey } from './components/order-history/use-order-history.js';
 import { OrderTable } from './components/order-table.js';
 import { OrderTaxSummary } from './components/order-tax-summary.js';
 import { PaymentDetails } from './components/payment-details.js';
-import { orderDetailDocument } from './orders.graphql.js';
+import { getTypeForState, StateTransitionControl } from './components/state-transition-control.js';
+import { useTransitionOrderToState } from './components/use-transition-order-to-state.js';
+import {
+    orderDetailDocument,
+    setOrderCustomFieldsDocument,
+    transitionOrderToStateDocument,
+} from './orders.graphql.js';
 import { canAddFulfillment, shouldShowAddManualPaymentButton } from './utils/order-utils.js';
-import { useQueryClient } from '@tanstack/react-query';
-import { orderHistoryQueryKey } from './components/order-history/use-order-history.js';
 
 const pageId = 'order-detail';
 
@@ -55,6 +64,12 @@ export const Route = createFileRoute('/_authenticated/_orders/orders_/$id')({
             });
         }
 
+        if (result.order.state === 'Modifying') {
+            throw redirect({
+                to: `/orders/${params.id}/modify`,
+            });
+        }
+
         return {
             breadcrumb: [{ path: '/orders', label: 'Orders' }, result.order.code],
         };
@@ -65,11 +80,13 @@ export const Route = createFileRoute('/_authenticated/_orders/orders_/$id')({
 function OrderDetailPage() {
     const params = Route.useParams();
     const { i18n } = useLingui();
+    const navigate = useNavigate();
     const queryClient = useQueryClient();
-    const { form, submitHandler, entity, isPending, refreshEntity } = useDetailPage({
+    const { form, submitHandler, entity, refreshEntity } = useDetailPage({
         pageId,
         queryDocument: orderDetailDocument,
-        setValuesForUpdate: entity => {
+        updateDocument: setOrderCustomFieldsDocument,
+        setValuesForUpdate: (entity: any) => {
             return {
                 id: entity.id,
                 customFields: entity.customFields,
@@ -86,19 +103,83 @@ function OrderDetailPage() {
             });
         },
     });
+    const { transitionToState } = useTransitionOrderToState(entity?.id);
+    const transitionOrderToStateMutation = useMutation({
+        mutationFn: api.mutate(transitionOrderToStateDocument),
+    });
+    const customFieldConfig = useCustomFieldConfig('Order');
+    const stateTransitionActions = useMemo(() => {
+        if (!entity) {
+            return [];
+        }
+        return entity.nextStates.map(state => ({
+            label: `Transition to ${state}`,
+            type: getTypeForState(state),
+            onClick: async () => {
+                const transitionError = await transitionToState(state);
+                if (transitionError) {
+                    toast(i18n.t('Failed to transition order to state'), {
+                        description: transitionError,
+                    });
+                } else {
+                    refreshOrderAndHistory();
+                }
+            },
+        }));
+    }, [entity, transitionToState, i18n]);
 
     if (!entity) {
         return null;
     }
 
+    const handleModifyClick = async () => {
+        try {
+            await transitionOrderToStateMutation.mutateAsync({
+                id: entity.id,
+                state: 'Modifying',
+            });
+            const queryKey = getDetailQueryOptions(orderDetailDocument, { id: entity.id }).queryKey;
+            await queryClient.invalidateQueries({ queryKey });
+            await navigate({ to: `/orders/$id/modify`, params: { id: entity.id } });
+        } catch (error) {
+            toast(i18n.t('Failed to modify order'), {
+                description: error instanceof Error ? error.message : 'Unknown error',
+            });
+        }
+    };
+
+    const nextStates = entity.nextStates;
     const showAddPaymentButton = shouldShowAddManualPaymentButton(entity);
     const showFulfillButton = canAddFulfillment(entity);
 
+    async function refreshOrderAndHistory() {
+        if (entity) {
+            const queryKey = getDetailQueryOptions(orderDetailDocument, { id: entity.id }).queryKey;
+            await queryClient.invalidateQueries({ queryKey });
+            queryClient.refetchQueries({ queryKey: orderHistoryQueryKey(entity.id) });
+        }
+    }
+
     return (
         <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
             <PageTitle>{entity?.code ?? ''}</PageTitle>
             <PageActionBar>
-                <PageActionBarRight>
+                <PageActionBarRight
+                    dropdownMenuItems={[
+                        ...(nextStates.includes('Modifying')
+                            ? [
+                                  {
+                                      component: () => (
+                                          <DropdownMenuItem onClick={handleModifyClick}>
+                                              <Pencil className="w-4 h-4" />
+                                              <Trans>Modify</Trans>
+                                          </DropdownMenuItem>
+                                      ),
+                                  },
+                              ]
+                            : []),
+                    ]}
+                >
                     {showAddPaymentButton && (
                         <PermissionGuard requires={['UpdateOrder']}>
                             <AddManualPaymentDialog
@@ -114,35 +195,54 @@ function OrderDetailPage() {
                             <FulfillOrderDialog
                                 order={entity}
                                 onSuccess={() => {
-                                    refreshEntity();
-                                    queryClient.refetchQueries({ queryKey: orderHistoryQueryKey(entity.id) });
+                                    refreshOrderAndHistory();
                                 }}
                             />
                         </PermissionGuard>
                     )}
-                    <PermissionGuard requires={['UpdateProduct', 'UpdateCatalog']}>
-                        <Button
-                            type="submit"
-                            disabled={!form.formState.isDirty || !form.formState.isValid || isPending}
-                        >
-                            <Trans>Update</Trans>
-                        </Button>
-                    </PermissionGuard>
                 </PageActionBarRight>
             </PageActionBar>
             <PageLayout>
                 <PageBlock column="main" blockId="order-table">
-                    <OrderTable order={entity} />
+                    <OrderTable order={entity} pageId={pageId} />
                 </PageBlock>
                 <PageBlock column="main" blockId="tax-summary" title={<Trans>Tax summary</Trans>}>
                     <OrderTaxSummary order={entity} />
                 </PageBlock>
-                <CustomFieldsPageBlock column="main" entityType="Order" control={form.control} />
+                {customFieldConfig?.length ? (
+                    <PageBlock column="main" blockId="custom-fields">
+                        <CustomFieldsForm entityType="Order" control={form.control} />
+                        <div className="flex justify-end">
+                            <Button
+                                type="submit"
+                                disabled={!form.formState.isDirty || !form.formState.isValid}
+                            >
+                                Save
+                            </Button>
+                        </div>
+                    </PageBlock>
+                ) : null}
+                <PageBlock column="main" blockId="payment-details" title={<Trans>Payment details</Trans>}>
+                    <div className="grid lg:grid-cols-2 gap-4">
+                        {entity?.payments?.map(payment => (
+                            <PaymentDetails
+                                key={payment.id}
+                                payment={payment}
+                                currencyCode={entity.currencyCode}
+                                onSuccess={() => refreshOrderAndHistory()}
+                            />
+                        ))}
+                    </div>
+                </PageBlock>
                 <PageBlock column="main" blockId="order-history" title={<Trans>Order history</Trans>}>
                     <OrderHistoryContainer orderId={entity.id} />
                 </PageBlock>
-                <PageBlock column="side" blockId="state" title={<Trans>State</Trans>}>
-                    <Badge variant="outline">{entity?.state}</Badge>
+                <PageBlock column="side" blockId="state">
+                    <StateTransitionControl
+                        currentState={entity?.state}
+                        actions={stateTransitionActions}
+                        isLoading={transitionOrderToStateMutation.isPending}
+                    />
                 </PageBlock>
                 <PageBlock column="side" blockId="customer" title={<Trans>Customer</Trans>}>
                     <Button variant="ghost" asChild>
@@ -170,40 +270,32 @@ function OrderDetailPage() {
                         )}
                     </div>
                 </PageBlock>
-                <PageBlock column="side" blockId="payment-details" title={<Trans>Payment details</Trans>}>
-                    {entity?.payments?.map(payment => (
-                        <PaymentDetails
-                            key={payment.id}
-                            payment={payment}
-                            currencyCode={entity.currencyCode}
-                        />
-                    ))}
-                </PageBlock>
-
                 <PageBlock
                     column="side"
                     blockId="fulfillment-details"
                     title={<Trans>Fulfillment details</Trans>}
                 >
-                    {entity?.fulfillments?.length && entity.fulfillments.length > 0  ? (
+                    {entity?.fulfillments?.length && entity.fulfillments.length > 0 ? (
                         <div className="space-y-2">
-                        {entity?.fulfillments?.map(fulfillment => (
-                        <FulfillmentDetails
-                            key={fulfillment.id}
-                            order={entity}
-                            fulfillment={fulfillment}
-                            onSuccess={() => {
-                                refreshEntity();
-                                queryClient.refetchQueries({ queryKey: orderHistoryQueryKey(entity.id) });
-                            }}
-                        />
-                        ))}
-                    </div>
-                ) : (
-                    <div className="text-muted-foreground text-xs font-medium p-3 border rounded-md">
-                        <Trans>No fulfillments</Trans>
-                    </div>
-                )}
+                            {entity?.fulfillments?.map(fulfillment => (
+                                <FulfillmentDetails
+                                    key={fulfillment.id}
+                                    order={entity}
+                                    fulfillment={fulfillment}
+                                    onSuccess={() => {
+                                        refreshEntity();
+                                        queryClient.refetchQueries({
+                                            queryKey: orderHistoryQueryKey(entity.id),
+                                        });
+                                    }}
+                                />
+                            ))}
+                        </div>
+                    ) : (
+                        <div className="text-muted-foreground text-xs font-medium p-3 border rounded-md">
+                            <Trans>No fulfillments</Trans>
+                        </div>
+                    )}
                 </PageBlock>
             </PageLayout>
         </Page>