@wilshop/dashboard 3.5.5 → 3.5.7

package/src/app/routes/_authenticated/_orders/components/fulfill-order-dialog.tsx

@@ -44,6 +44,7 @@ export function FulfillOrderDialog({ order, onSuccess }: Readonly<FulfillOrderDi
     const [fulfillmentQuantities, setFulfillmentQuantities] = useState<{
         [lineId: string]: FulfillmentQuantity;
     }>({});
+    const [handlerArgsValid, setHandlerArgsValid] = useState(true);
 
     // Get fulfillment handlers
     const { data: fulfillmentHandlersData } = useQuery({
@@ -161,7 +162,7 @@ export function FulfillOrderDialog({ order, onSuccess }: Readonly<FulfillOrderDi
             ({ fulfillCount, max }) => fulfillCount <= max && fulfillCount >= 0,
         );
         const formIsValid = form.formState.isValid;
-        return formIsValid && totalCount > 0 && fulfillmentQuantityIsValid;
+        return formIsValid && totalCount > 0 && fulfillmentQuantityIsValid && handlerArgsValid;
     };
 
     const handleSubmit = async (data: FormData) => {
@@ -195,6 +196,7 @@ export function FulfillOrderDialog({ order, onSuccess }: Readonly<FulfillOrderDi
     const handleCancel = () => {
         form.reset();
         setFulfillmentQuantities({});
+        setHandlerArgsValid(true);
         setOpen(false);
     };
 
@@ -218,8 +220,8 @@ export function FulfillOrderDialog({ order, onSuccess }: Readonly<FulfillOrderDi
             >
                 <Trans>Fulfill order</Trans>
             </Button>
-            <Dialog open={open}>
-                <DialogContent className="sm:max-w-[600px]">
+            <Dialog open={open} onOpenChange={setOpen}>
+                <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-hidden flex flex-col">
                     <DialogHeader>
                         <DialogTitle>
                             <Trans>Fulfill order</Trans>
@@ -234,9 +236,9 @@ export function FulfillOrderDialog({ order, onSuccess }: Readonly<FulfillOrderDi
                                 e.stopPropagation();
                                 form.handleSubmit(handleSubmit)(e);
                             }}
-                            className="space-y-4"
+                            className="space-y-4 flex-1 overflow-hidden flex flex-col"
                         >
-                            <div className="space-y-4">
+                            <div className="space-y-4 flex-1 overflow-y-auto">
                                 <div className="font-medium">
                                     <Trans>Order lines</Trans>
                                 </div>
@@ -294,6 +296,7 @@ export function FulfillOrderDialog({ order, onSuccess }: Readonly<FulfillOrderDi
                                             onChange={field.onChange}
                                             readonly={false}
                                             removable={false}
+                                            onValidityChange={setHandlerArgsValid}
                                         />
                                     )}
                                 />

package/src/app/routes/_authenticated/_orders/components/order-detail-shared.tsx

@@ -11,7 +11,7 @@ import {
     PageLayout,
     PageTitle,
 } from '@/vdb/framework/layout-engine/page-layout.js';
-import { getDetailQueryOptions, useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
+import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
 import { api } from '@/vdb/graphql/api.js';
 import { useCustomFieldConfig } from '@/vdb/hooks/use-custom-field-config.js';
 import { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js';
@@ -19,15 +19,17 @@ import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Link, useNavigate } from '@tanstack/react-router';
 import { ResultOf } from 'gql.tada';
-import { Pencil, User } from 'lucide-react';
-import { useMemo } from 'react';
+import { Pencil, RotateCcw, User } from 'lucide-react';
+import { useCallback, useMemo, useRef } from 'react';
 import { toast } from 'sonner';
+
 import {
     orderDetailDocument,
     setOrderCustomFieldsDocument,
     transitionOrderToStateDocument,
 } from '../orders.graphql.js';
-import { canAddFulfillment, shouldShowAddManualPaymentButton } from '../utils/order-utils.js';
+import { canAddFulfillment, canRefundOrder, shouldShowAddManualPaymentButton } from '../utils/order-utils.js';
+
 import { AddManualPaymentDialog } from './add-manual-payment-dialog.js';
 import { FulfillOrderDialog } from './fulfill-order-dialog.js';
 import { FulfillmentDetails } from './fulfillment-details.js';
@@ -37,6 +39,7 @@ import { orderHistoryQueryKey } from './order-history/use-order-history.js';
 import { OrderTable } from './order-table.js';
 import { OrderTaxSummary } from './order-tax-summary.js';
 import { PaymentDetails } from './payment-details.js';
+import { RefundOrderDialog, RefundOrderDialogRef } from './refund-order-dialog.js';
 import { getTypeForState, StateTransitionControl } from './state-transition-control.js';
 import { useTransitionOrderToState } from './use-transition-order-to-state.js';
 
@@ -101,58 +104,84 @@ export function OrderDetailShared({
     });
 
     const customFieldConfig = useCustomFieldConfig('Order');
+    const refundDialogRef = useRef<RefundOrderDialogRef>(null);
+
+    const refreshPage = useCallback(async () => {
+        if (!entity) return;
+        await Promise.all([
+            refreshEntity(),
+            queryClient.refetchQueries({ queryKey: orderHistoryQueryKey(entity.id) }),
+        ]);
+    }, [refreshEntity, entity, queryClient]);
 
     const stateTransitionActions = useMemo(() => {
         if (!entity) {
             return [];
         }
-        return entity.nextStates.map((state: string) => ({
-            label: t`Transition to ${getTranslatedOrderState(state)}`,
-            type: getTypeForState(state),
-            onClick: async () => {
-                const transitionError = await transitionToState(state);
-                if (transitionError) {
-                    toast(t`Failed to transition order to state`, {
-                        description: transitionError,
-                    });
-                } else {
-                    refreshOrderAndHistory();
-                }
-            },
-        }));
-    }, [entity, transitionToState, t]);
+        return entity.nextStates
+            .filter((state: string) => state !== 'Modifying')
+            .map((state: string) => ({
+                label: t`Transition to ${getTranslatedOrderState(state)}`,
+                type: getTypeForState(state),
+                onClick: async () => {
+                    const transitionError = await transitionToState(state);
+                    if (transitionError) {
+                        toast(t`Failed to transition order to state`, {
+                            description: transitionError,
+                        });
+                    } else {
+                        void refreshPage();
+                    }
+                },
+            }));
+    }, [entity, transitionToState, t, refreshPage]);
 
-    if (!entity) {
-        return null;
-    }
-
-    const handleModifyClick = async () => {
+    const handleModifyClick = useCallback(async () => {
+        if (!entity) return;
         try {
             await transitionOrderToStateMutation.mutateAsync({
                 id: entity.id,
                 state: 'Modifying',
             });
-            const queryKey = getDetailQueryOptions(orderDetailDocument, { id: entity.id }).queryKey;
-            await queryClient.invalidateQueries({ queryKey });
+            await refreshPage();
             await navigate({ to: `/orders/$id/modify`, params: { id: entity.id } });
         } catch (error) {
             toast(t`Failed to modify order`, {
                 description: error instanceof Error ? error.message : 'Unknown error',
             });
         }
-    };
+    }, [entity, transitionOrderToStateMutation, refreshPage, navigate, t]);
+
+    const ModifyMenuItem = useCallback(
+        () => (
+            <DropdownMenuItem onClick={handleModifyClick}>
+                <Pencil className="w-4 h-4" />
+                <Trans>Modify</Trans>
+            </DropdownMenuItem>
+        ),
+        [handleModifyClick],
+    );
+
+    const RefundMenuItem = useCallback(
+        () => (
+            <PermissionGuard requires={['UpdateOrder']}>
+                <DropdownMenuItem onClick={() => refundDialogRef.current?.open()}>
+                    <RotateCcw className="w-4 h-4" />
+                    <Trans>Refund & Cancel</Trans>
+                </DropdownMenuItem>
+            </PermissionGuard>
+        ),
+        [],
+    );
+
+    if (!entity) {
+        return null;
+    }
 
     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) });
-        }
-    }
+    const showRefundOption = canRefundOrder(entity);
 
     return (
         <Page pageId={pageId} form={form} submitHandler={submitHandler} entity={entity}>
@@ -160,18 +189,8 @@ export function OrderDetailShared({
             <PageActionBar>
                 <PageActionBarRight
                     dropdownMenuItems={[
-                        ...(nextStates.includes('Modifying')
-                            ? [
-                                  {
-                                      component: () => (
-                                          <DropdownMenuItem onClick={handleModifyClick}>
-                                              <Pencil className="w-4 h-4" />
-                                              <Trans>Modify</Trans>
-                                          </DropdownMenuItem>
-                                      ),
-                                  },
-                              ]
-                            : []),
+                        ...(nextStates.includes('Modifying') ? [{ component: ModifyMenuItem }] : []),
+                        ...(showRefundOption ? [{ component: RefundMenuItem }] : []),
                     ]}
                 >
                     {showAddPaymentButton && (
@@ -179,7 +198,7 @@ export function OrderDetailShared({
                             <AddManualPaymentDialog
                                 order={entity}
                                 onSuccess={() => {
-                                    refreshEntity();
+                                    void refreshPage();
                                 }}
                             />
                         </PermissionGuard>
@@ -189,13 +208,22 @@ export function OrderDetailShared({
                             <FulfillOrderDialog
                                 order={entity}
                                 onSuccess={() => {
-                                    refreshOrderAndHistory();
+                                    void refreshPage();
                                 }}
                             />
                         </PermissionGuard>
                     )}
                 </PageActionBarRight>
             </PageActionBar>
+            {showRefundOption && (
+                <RefundOrderDialog
+                    ref={refundDialogRef}
+                    order={entity}
+                    onSuccess={() => {
+                        void refreshPage();
+                    }}
+                />
+            )}
             <PageLayout>
                 {/* Main Column Blocks */}
                 {beforeOrderTable?.(entity)}
@@ -225,7 +253,7 @@ export function OrderDetailShared({
                                 key={payment.id}
                                 payment={payment}
                                 currencyCode={entity.currencyCode}
-                                onSuccess={refreshOrderAndHistory}
+                                onSuccess={refreshPage}
                             />
                         ))}
                     </div>
@@ -287,10 +315,7 @@ export function OrderDetailShared({
                                     order={entity}
                                     fulfillment={fulfillment}
                                     onSuccess={() => {
-                                        refreshEntity();
-                                        queryClient.refetchQueries({
-                                            queryKey: orderHistoryQueryKey(entity.id),
-                                        });
+                                        void refreshPage();
                                     }}
                                 />
                             ))}

package/src/app/routes/_authenticated/_orders/components/order-history/default-order-history-components.tsx

@@ -1,5 +1,7 @@
 import { HistoryEntry, HistoryEntryProps } from '@/vdb/framework/history-entry/history-entry.js';
+import { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js';
 import { Trans } from '@lingui/react/macro';
+import { uiConfig } from 'virtual:vendure-ui-config';
 
 export function OrderStateTransitionComponent(props: Readonly<HistoryEntryProps>) {
     const { entry } = props;
@@ -88,11 +90,49 @@ export function OrderCustomerUpdatedComponent(props: Readonly<HistoryEntryProps>
 }
 
 export function OrderCancellationComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    const { getTranslatedRefundReason } = useDynamicTranslations();
+
+    const lines = entry.data.lines as Array<{ orderLineId: string; quantity: number }> | undefined;
+    const reason = entry.data.reason as string | undefined;
+    const shippingCancelled = entry.data.shippingCancelled as boolean | undefined;
+
+    const totalQuantity = lines?.reduce((sum, line) => sum + line.quantity, 0) ?? 0;
+    const hasDetails = totalQuantity > 0 || shippingCancelled || reason;
+
+    const getTranslatedReason = (reasonValue: string) => {
+        const { refundReasons } = uiConfig.orders;
+        const reasonConfig = refundReasons.find(r => r.value === reasonValue);
+        if (reasonConfig) {
+            return getTranslatedRefundReason(reasonConfig.label);
+        }
+        return reasonValue;
+    };
+
     return (
         <HistoryEntry {...props}>
-            <p className="text-xs text-muted-foreground">
-                <Trans>Order cancelled</Trans>
-            </p>
+            <div className="text-xs text-muted-foreground space-y-1">
+                {totalQuantity > 0 && (
+                    <p>
+                        <Trans>{totalQuantity} item(s) refunded</Trans>
+                    </p>
+                )}
+                {shippingCancelled && (
+                    <p>
+                        <Trans>Shipping refunded</Trans>
+                    </p>
+                )}
+                {reason && (
+                    <p>
+                        <Trans>Reason:</Trans> {getTranslatedReason(reason)}
+                    </p>
+                )}
+                {!hasDetails && (
+                    <p>
+                        <Trans>Order cancelled</Trans>
+                    </p>
+                )}
+            </div>
         </HistoryEntry>
     );
 }

package/src/app/routes/_authenticated/_orders/components/order-history/order-history-utils.tsx

@@ -6,6 +6,7 @@ import {
     CheckIcon,
     CreditCardIcon,
     Edit3,
+    RotateCcw,
     SquarePen,
     Truck,
     UserX,
@@ -40,8 +41,14 @@ export function orderHistoryUtils(order: OrderHistoryOrderDetail) {
                 return <Edit3 className="h-4 w-4" />;
             case 'ORDER_CUSTOMER_UPDATED':
                 return <UserX className="h-4 w-4" />;
-            case 'ORDER_CANCELLATION':
+            case 'ORDER_CANCELLATION': {
+                const lines = entry.data.lines as Array<{ orderLineId: string; quantity: number }> | undefined;
+                const hasRefundData = (lines && lines.length > 0) || entry.data.reason;
+                if (hasRefundData) {
+                    return <RotateCcw className="h-4 w-4" />;
+                }
                 return <Ban className="h-4 w-4" />;
+            }
             default:
                 return <CheckIcon className="h-4 w-4" />;
         }
@@ -96,8 +103,14 @@ export function orderHistoryUtils(order: OrderHistoryOrderDetail) {
                 return <Trans>Order modified</Trans>;
             case 'ORDER_CUSTOMER_UPDATED':
                 return <Trans>Customer updated</Trans>;
-            case 'ORDER_CANCELLATION':
+            case 'ORDER_CANCELLATION': {
+                const lines = entry.data.lines as Array<{ orderLineId: string; quantity: number }> | undefined;
+                const hasPartialCancellation = lines && lines.length > 0;
+                if (hasPartialCancellation || entry.data.reason) {
+                    return <Trans>Items refunded</Trans>;
+                }
                 return <Trans>Order cancelled</Trans>;
+            }
             default:
                 return <Trans>{entry.type.replace(/_/g, ' ').toLowerCase()}</Trans>;
         }
@@ -106,6 +119,7 @@ export function orderHistoryUtils(order: OrderHistoryOrderDetail) {
     const getIconColor = ({ type, data }: HistoryEntryItem) => {
         const success = 'bg-success text-success-foreground';
         const destructive = 'bg-destructive text-destructive-foreground';
+        const warning = 'bg-yellow-400 text-yellow-950 dark:bg-yellow-600 dark:text-yellow-50';
         const regular = 'bg-muted text-muted-foreground';
 
         if (type === 'ORDER_PAYMENT_TRANSITION' && data.to === 'Settled') {
@@ -118,7 +132,9 @@ export function orderHistoryUtils(order: OrderHistoryOrderDetail) {
             return success;
         }
         if (type === 'ORDER_CANCELLATION') {
-            return destructive;
+            const lines = data.lines as Array<{ orderLineId: string; quantity: number }> | undefined;
+            const hasRefundData = (lines && lines.length > 0) || data.reason;
+            return hasRefundData ? warning : destructive;
         }
         if (type === 'ORDER_STATE_TRANSITION' && data.to === 'Cancelled') {
             return destructive;

package/src/app/routes/_authenticated/_orders/components/order-table.tsx

@@ -175,6 +175,7 @@ export function OrderTable({ order, pageId }: Readonly<OrderTableProps>) {
                 columns={columns as any}
                 data={data as any}
                 totalItems={data.length}
+                itemsPerPage={data.length}
                 disableViewOptions={false}
                 defaultColumnVisibility={columnVisibility}
                 onColumnVisibilityChange={(_, columnVisibility) => {