@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

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

@@ -1,15 +1,33 @@
-import { Badge } from '@/components/ui/badge.js';
-import { Trans } from '@/lib/trans.js';
-import { ArrowRightToLine, CheckIcon, CreditCardIcon, SquarePen } from 'lucide-react';
-import { HistoryEntry, HistoryEntryItem } from '@/components/shared/history-timeline/history-entry.js';
-import { HistoryNoteInput } from '@/components/shared/history-timeline/history-note-input.js';
-import { HistoryTimeline } from '@/components/shared/history-timeline/history-timeline.js';
+import { HistoryEntry, HistoryEntryItem } from '@/vdb/components/shared/history-timeline/history-entry.js';
+import { HistoryNoteEditor } from '@/vdb/components/shared/history-timeline/history-note-editor.js';
+import { HistoryNoteInput } from '@/vdb/components/shared/history-timeline/history-note-input.js';
+import { HistoryTimeline } from '@/vdb/components/shared/history-timeline/history-timeline.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import {
+    ArrowRightToLine,
+    Ban,
+    CheckIcon,
+    ChevronDown,
+    ChevronUp,
+    CreditCardIcon,
+    Edit3,
+    SquarePen,
+    Truck,
+    UserX,
+} from 'lucide-react';
+import { useState } from 'react';
 
 interface OrderHistoryProps {
     order: {
         id: string;
         createdAt: string;
         currencyCode: string;
+        customer?: {
+            firstName: string;
+            lastName: string;
+        } | null;
     };
     historyEntries: Array<HistoryEntryItem>;
     onAddNote: (note: string, isPrivate: boolean) => void;
@@ -17,15 +35,143 @@ interface OrderHistoryProps {
     onDeleteNote?: (entryId: string) => void;
 }
 
-export function OrderHistory({ historyEntries, onAddNote, onUpdateNote, onDeleteNote }: OrderHistoryProps) {
+export function OrderHistory({
+    order,
+    historyEntries,
+    onAddNote,
+    onUpdateNote,
+    onDeleteNote,
+}: Readonly<OrderHistoryProps>) {
+    const [expandedGroups, setExpandedGroups] = useState<Set<number>>(new Set());
+    const [noteEditorOpen, setNoteEditorOpen] = useState(false);
+    const [noteEditorNote, setNoteEditorNote] = useState<{
+        noteId: string;
+        note: string;
+        isPrivate: boolean;
+    }>({
+        noteId: '',
+        note: '',
+        isPrivate: true,
+    });
+
+    const handleEditNote = (noteId: string, note: string, isPrivate: boolean) => {
+        setNoteEditorNote({ noteId, note, isPrivate });
+        setNoteEditorOpen(true);
+    };
+
+    const handleDeleteNote = (noteId: string) => {
+        onDeleteNote?.(noteId);
+    };
+
+    const handleNoteEditorSave = (noteId: string, note: string, isPrivate: boolean) => {
+        onUpdateNote?.(noteId, note, isPrivate);
+    };
+
+    const isPrimaryEvent = (entry: HistoryEntryItem) => {
+        // Based on Angular component's isFeatured method
+        switch (entry.type) {
+            case 'ORDER_STATE_TRANSITION':
+                return (
+                    entry.data.to === 'Delivered' ||
+                    entry.data.to === 'Cancelled' ||
+                    entry.data.to === 'Settled' ||
+                    entry.data.from === 'Created'
+                );
+            case 'ORDER_REFUND_TRANSITION':
+                return entry.data.to === 'Settled';
+            case 'ORDER_PAYMENT_TRANSITION':
+                return entry.data.to === 'Settled' || entry.data.to === 'Cancelled';
+            case 'ORDER_FULFILLMENT_TRANSITION':
+                return entry.data.to === 'Delivered' || entry.data.to === 'Shipped';
+            case 'ORDER_NOTE':
+            case 'ORDER_MODIFIED':
+            case 'ORDER_CUSTOMER_UPDATED':
+            case 'ORDER_CANCELLATION':
+                return true;
+            default:
+                return false; // All other events are secondary
+        }
+    };
+
+    // Group consecutive secondary events
+    const groupedEntries: Array<
+        | { type: 'primary'; entry: HistoryEntryItem; index: number }
+        | {
+              type: 'secondary-group';
+              entries: Array<{ entry: HistoryEntryItem; index: number }>;
+              startIndex: number;
+          }
+    > = [];
+    let currentGroup: Array<{ entry: HistoryEntryItem; index: number }> = [];
+
+    for (let i = 0; i < historyEntries.length; i++) {
+        const entry = historyEntries[i];
+        const isSecondary = !isPrimaryEvent(entry);
+
+        if (isSecondary) {
+            currentGroup.push({ entry, index: i });
+        } else {
+            // If we have accumulated secondary events, add them as a group
+            if (currentGroup.length > 0) {
+                groupedEntries.push({
+                    type: 'secondary-group',
+                    entries: currentGroup,
+                    startIndex: currentGroup[0].index,
+                });
+                currentGroup = [];
+            }
+            // Add the primary event
+            groupedEntries.push({ type: 'primary', entry, index: i });
+        }
+    }
+
+    // Don't forget the last group if it exists
+    if (currentGroup.length > 0) {
+        groupedEntries.push({
+            type: 'secondary-group',
+            entries: currentGroup,
+            startIndex: currentGroup[0].index,
+        });
+    }
+
+    const toggleGroup = (groupIndex: number) => {
+        const newExpanded = new Set(expandedGroups);
+        if (newExpanded.has(groupIndex)) {
+            newExpanded.delete(groupIndex);
+        } else {
+            newExpanded.add(groupIndex);
+        }
+        setExpandedGroups(newExpanded);
+    };
     const getTimelineIcon = (entry: OrderHistoryProps['historyEntries'][0]) => {
         switch (entry.type) {
             case 'ORDER_PAYMENT_TRANSITION':
                 return <CreditCardIcon className="h-4 w-4" />;
+            case 'ORDER_REFUND_TRANSITION':
+                return <CreditCardIcon className="h-4 w-4" />;
             case 'ORDER_NOTE':
                 return <SquarePen className="h-4 w-4" />;
             case 'ORDER_STATE_TRANSITION':
+                if (entry.data.to === 'Delivered') {
+                    return <CheckIcon className="h-4 w-4" />;
+                }
+                if (entry.data.to === 'Cancelled') {
+                    return <Ban className="h-4 w-4" />;
+                }
+                return <ArrowRightToLine className="h-4 w-4" />;
+            case 'ORDER_FULFILLMENT_TRANSITION':
+                if (entry.data.to === 'Shipped' || entry.data.to === 'Delivered') {
+                    return <Truck className="h-4 w-4" />;
+                }
                 return <ArrowRightToLine className="h-4 w-4" />;
+            case 'ORDER_FULFILLMENT':
+                return <Truck className="h-4 w-4" />;
+            case 'ORDER_MODIFIED':
+                return <Edit3 className="h-4 w-4" />;
+            case 'ORDER_CUSTOMER_UPDATED':
+                return <UserX className="h-4 w-4" />;
+            case 'ORDER_CANCELLATION':
+                return <Ban className="h-4 w-4" />;
             default:
                 return <CheckIcon className="h-4 w-4" />;
         }
@@ -34,12 +180,26 @@ export function OrderHistory({ historyEntries, onAddNote, onUpdateNote, onDelete
     const getTitle = (entry: OrderHistoryProps['historyEntries'][0]) => {
         switch (entry.type) {
             case 'ORDER_PAYMENT_TRANSITION':
-                return <Trans>Payment settled</Trans>;
+                if (entry.data.to === 'Settled') {
+                    return <Trans>Payment settled</Trans>;
+                }
+                if (entry.data.to === 'Authorized') {
+                    return <Trans>Payment authorized</Trans>;
+                }
+                if (entry.data.to === 'Declined' || entry.data.to === 'Cancelled') {
+                    return <Trans>Payment failed</Trans>;
+                }
+                return <Trans>Payment transitioned</Trans>;
+            case 'ORDER_REFUND_TRANSITION':
+                if (entry.data.to === 'Settled') {
+                    return <Trans>Refund settled</Trans>;
+                }
+                return <Trans>Refund transitioned</Trans>;
             case 'ORDER_NOTE':
                 return <Trans>Note added</Trans>;
             case 'ORDER_STATE_TRANSITION': {
                 if (entry.data.from === 'Created') {
-                    return <Trans>Order created</Trans>;
+                    return <Trans>Order placed</Trans>;
                 }
                 if (entry.data.to === 'Delivered') {
                     return <Trans>Order fulfilled</Trans>;
@@ -47,8 +207,27 @@ export function OrderHistory({ historyEntries, onAddNote, onUpdateNote, onDelete
                 if (entry.data.to === 'Cancelled') {
                     return <Trans>Order cancelled</Trans>;
                 }
+                if (entry.data.to === 'Shipped') {
+                    return <Trans>Order shipped</Trans>;
+                }
                 return <Trans>Order transitioned</Trans>;
             }
+            case 'ORDER_FULFILLMENT_TRANSITION':
+                if (entry.data.to === 'Shipped') {
+                    return <Trans>Order shipped</Trans>;
+                }
+                if (entry.data.to === 'Delivered') {
+                    return <Trans>Order delivered</Trans>;
+                }
+                return <Trans>Fulfillment transitioned</Trans>;
+            case 'ORDER_FULFILLMENT':
+                return <Trans>Fulfillment created</Trans>;
+            case 'ORDER_MODIFIED':
+                return <Trans>Order modified</Trans>;
+            case 'ORDER_CUSTOMER_UPDATED':
+                return <Trans>Customer updated</Trans>;
+            case 'ORDER_CANCELLATION':
+                return <Trans>Order cancelled</Trans>;
             default:
                 return <Trans>{entry.type.replace(/_/g, ' ').toLowerCase()}</Trans>;
         }
@@ -59,38 +238,211 @@ export function OrderHistory({ historyEntries, onAddNote, onUpdateNote, onDelete
             <div className="mb-4">
                 <HistoryNoteInput onAddNote={onAddNote} />
             </div>
-            <HistoryTimeline onEditNote={onUpdateNote} onDeleteNote={onDeleteNote}>
-                {historyEntries.map(entry => (
-                    <HistoryEntry
-                        key={entry.id}
-                        entry={entry}
-                        isNoteEntry={entry.type === 'ORDER_NOTE'}
-                        timelineIcon={getTimelineIcon(entry)}
-                        title={getTitle(entry)}
-                    >
-                        {entry.type === 'ORDER_NOTE' && (
-                            <div className="flex items-center space-x-2">
-                                <Badge variant={entry.isPublic ? 'outline' : 'secondary'} className="text-xs">
-                                    {entry.isPublic ? 'Public' : 'Private'}
-                                </Badge>
-                                <span>{entry.data.note}</span>
+            <HistoryTimeline>
+                {groupedEntries.map((group, groupIndex) => {
+                    if (group.type === 'primary') {
+                        const entry = group.entry;
+                        return (
+                            <HistoryEntry
+                                key={entry.id}
+                                entry={entry}
+                                isNoteEntry={entry.type === 'ORDER_NOTE'}
+                                timelineIcon={getTimelineIcon(entry)}
+                                title={getTitle(entry)}
+                                isPrimary={true}
+                                customer={order.customer}
+                                onEditNote={handleEditNote}
+                                onDeleteNote={handleDeleteNote}
+                            >
+                                {entry.type === 'ORDER_NOTE' && (
+                                    <div className="space-y-2">
+                                        <p className="text-sm text-foreground">{entry.data.note}</p>
+                                        <div className="flex items-center gap-2">
+                                            <Badge
+                                                variant={entry.isPublic ? 'outline' : 'secondary'}
+                                                className="text-xs"
+                                            >
+                                                {entry.isPublic ? 'Public' : 'Private'}
+                                            </Badge>
+                                        </div>
+                                    </div>
+                                )}
+                                {entry.type === 'ORDER_STATE_TRANSITION' && entry.data.from !== 'Created' && (
+                                    <p className="text-xs text-muted-foreground">
+                                        <Trans>
+                                            From {entry.data.from} to {entry.data.to}
+                                        </Trans>
+                                    </p>
+                                )}
+                                {entry.type === 'ORDER_PAYMENT_TRANSITION' && (
+                                    <p className="text-xs text-muted-foreground">
+                                        <Trans>
+                                            Payment #{entry.data.paymentId} transitioned to {entry.data.to}
+                                        </Trans>
+                                    </p>
+                                )}
+                                {entry.type === 'ORDER_REFUND_TRANSITION' && (
+                                    <p className="text-xs text-muted-foreground">
+                                        <Trans>
+                                            Refund #{entry.data.refundId} transitioned to {entry.data.to}
+                                        </Trans>
+                                    </p>
+                                )}
+                                {entry.type === 'ORDER_FULFILLMENT_TRANSITION' &&
+                                    entry.data.from !== 'Created' && (
+                                        <p className="text-xs text-muted-foreground">
+                                            <Trans>
+                                                Fulfillment #{entry.data.fulfillmentId} from {entry.data.from}{' '}
+                                                to {entry.data.to}
+                                            </Trans>
+                                        </p>
+                                    )}
+                                {entry.type === 'ORDER_FULFILLMENT' && (
+                                    <p className="text-xs text-muted-foreground">
+                                        <Trans>Fulfillment #{entry.data.fulfillmentId} created</Trans>
+                                    </p>
+                                )}
+                                {entry.type === 'ORDER_MODIFIED' && (
+                                    <p className="text-xs text-muted-foreground">
+                                        <Trans>Order modification #{entry.data.modificationId}</Trans>
+                                    </p>
+                                )}
+                                {entry.type === 'ORDER_CUSTOMER_UPDATED' && (
+                                    <p className="text-xs text-muted-foreground">
+                                        <Trans>Customer information updated</Trans>
+                                    </p>
+                                )}
+                                {entry.type === 'ORDER_CANCELLATION' && (
+                                    <p className="text-xs text-muted-foreground">
+                                        <Trans>Order cancelled</Trans>
+                                    </p>
+                                )}
+                            </HistoryEntry>
+                        );
+                    } else {
+                        // Secondary group
+                        const shouldCollapse = group.entries.length > 2;
+                        const isExpanded = expandedGroups.has(groupIndex);
+                        const visibleEntries =
+                            shouldCollapse && !isExpanded ? group.entries.slice(0, 2) : group.entries;
+
+                        return (
+                            <div key={`group-${groupIndex}`}>
+                                {visibleEntries.map(({ entry }) => (
+                                    <HistoryEntry
+                                        key={entry.id}
+                                        entry={entry}
+                                        isNoteEntry={entry.type === 'ORDER_NOTE'}
+                                        timelineIcon={getTimelineIcon(entry)}
+                                        title={getTitle(entry)}
+                                        isPrimary={false}
+                                        customer={order.customer}
+                                        onEditNote={handleEditNote}
+                                        onDeleteNote={handleDeleteNote}
+                                    >
+                                        {entry.type === 'ORDER_NOTE' && (
+                                            <div className="space-y-1">
+                                                <p className="text-xs text-foreground">{entry.data.note}</p>
+                                                <Badge
+                                                    variant={entry.isPublic ? 'outline' : 'secondary'}
+                                                    className="text-xs"
+                                                >
+                                                    {entry.isPublic ? 'Public' : 'Private'}
+                                                </Badge>
+                                            </div>
+                                        )}
+                                        {entry.type === 'ORDER_STATE_TRANSITION' &&
+                                            entry.data.from !== 'Created' && (
+                                                <p className="text-xs text-muted-foreground">
+                                                    <Trans>
+                                                        From {entry.data.from} to {entry.data.to}
+                                                    </Trans>
+                                                </p>
+                                            )}
+                                        {entry.type === 'ORDER_PAYMENT_TRANSITION' && (
+                                            <p className="text-xs text-muted-foreground">
+                                                <Trans>
+                                                    Payment #{entry.data.paymentId} transitioned to{' '}
+                                                    {entry.data.to}
+                                                </Trans>
+                                            </p>
+                                        )}
+                                        {entry.type === 'ORDER_REFUND_TRANSITION' && (
+                                            <p className="text-xs text-muted-foreground">
+                                                <Trans>
+                                                    Refund #{entry.data.refundId} transitioned to{' '}
+                                                    {entry.data.to}
+                                                </Trans>
+                                            </p>
+                                        )}
+                                        {entry.type === 'ORDER_FULFILLMENT_TRANSITION' &&
+                                            entry.data.from !== 'Created' && (
+                                                <p className="text-xs text-muted-foreground">
+                                                    <Trans>
+                                                        Fulfillment #{entry.data.fulfillmentId} from{' '}
+                                                        {entry.data.from} to {entry.data.to}
+                                                    </Trans>
+                                                </p>
+                                            )}
+                                        {entry.type === 'ORDER_FULFILLMENT' && (
+                                            <p className="text-xs text-muted-foreground">
+                                                <Trans>Fulfillment #{entry.data.fulfillmentId} created</Trans>
+                                            </p>
+                                        )}
+                                        {entry.type === 'ORDER_MODIFIED' && (
+                                            <p className="text-xs text-muted-foreground">
+                                                <Trans>Order modification #{entry.data.modificationId}</Trans>
+                                            </p>
+                                        )}
+                                        {entry.type === 'ORDER_CUSTOMER_UPDATED' && (
+                                            <p className="text-xs text-muted-foreground">
+                                                <Trans>Customer information updated</Trans>
+                                            </p>
+                                        )}
+                                        {entry.type === 'ORDER_CANCELLATION' && (
+                                            <p className="text-xs text-muted-foreground">
+                                                <Trans>Order cancelled</Trans>
+                                            </p>
+                                        )}
+                                    </HistoryEntry>
+                                ))}
+
+                                {shouldCollapse && (
+                                    <div className="flex justify-center py-2">
+                                        <Button
+                                            variant="ghost"
+                                            size="sm"
+                                            onClick={() => toggleGroup(groupIndex)}
+                                            className="text-muted-foreground hover:text-foreground h-6 text-xs"
+                                        >
+                                            {isExpanded ? (
+                                                <>
+                                                    <ChevronUp className="w-3 h-3 mr-1" />
+                                                    <Trans>Show less</Trans>
+                                                </>
+                                            ) : (
+                                                <>
+                                                    <ChevronDown className="w-3 h-3 mr-1" />
+                                                    <Trans>Show all ({group.entries.length})</Trans>
+                                                </>
+                                            )}
+                                        </Button>
+                                    </div>
+                                )}
                             </div>
-                        )}
-                        <div className="text-sm text-muted-foreground">
-                            {entry.type === 'ORDER_STATE_TRANSITION' && entry.data.from !== 'Created' && (
-                                <Trans>
-                                    From {entry.data.from} to {entry.data.to}
-                                </Trans>
-                            )}
-                            {entry.type === 'ORDER_PAYMENT_TRANSITION' && (
-                                <Trans>
-                                    Payment #{entry.data.paymentId} transitioned to {entry.data.to}
-                                </Trans>
-                            )}
-                        </div>
-                    </HistoryEntry>
-                ))}
+                        );
+                    }
+                })}
             </HistoryTimeline>
+            <HistoryNoteEditor
+                key={noteEditorNote.noteId}
+                note={noteEditorNote.note}
+                onNoteChange={handleNoteEditorSave}
+                open={noteEditorOpen}
+                onOpenChange={setNoteEditorOpen}
+                noteId={noteEditorNote.noteId}
+                isPrivate={noteEditorNote.isPrivate}
+            />
         </div>
     );
 }

package/src/app/routes/_authenticated/_orders/components/order-history/use-order-history.ts

@@ -1,7 +1,7 @@
-import { api } from '@/graphql/api.js';
-import { graphql, ResultOf } from '@/graphql/graphql.js';
-import { useLingui } from '@/lib/trans.js';
-import { useMutation, useInfiniteQuery } from '@tanstack/react-query';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql, ResultOf } from '@/vdb/graphql/graphql.js';
+import { useLingui } from '@/vdb/lib/trans.js';
+import { QueryKey, useInfiniteQuery, useMutation } from '@tanstack/react-query';
 import { useState } from 'react';
 import { toast } from 'sonner';
 
@@ -55,6 +55,10 @@ export interface UseOrderHistoryResult {
     hasNextPage: boolean;
 }
 
+export function orderHistoryQueryKey(orderId: string): QueryKey {
+    return ['OrderHistory', orderId];
+}
+
 export function useOrderHistory({
     orderId,
     pageSize = 10,
@@ -83,7 +87,7 @@ export function useOrderHistory({
                     take: pageSize,
                 },
             }),
-        queryKey: ['OrderHistory', orderId],
+        queryKey: orderHistoryQueryKey(orderId),
         initialPageParam: 0,
         getNextPageParam: (lastPage, _pages, lastPageParam) => {
             const totalItems = lastPage.order?.history?.totalItems ?? 0;

package/src/app/routes/_authenticated/_orders/components/order-line-custom-fields-form.tsx

@@ -1,20 +1,27 @@
-import { CustomFieldsForm } from '@/components/shared/custom-fields-form.js';
-import { Button } from '@/components/ui/button.js';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
+import { CustomFieldsForm } from '@/vdb/components/shared/custom-fields-form.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Form } from '@/vdb/components/ui/form.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { Settings2 } from 'lucide-react';
-import { UseFormReturn } from 'react-hook-form';
-import { Form } from '@/components/ui/form.js';
+import { useForm } from 'react-hook-form';
 
 interface OrderLineCustomFieldsFormProps {
     onUpdate: (customFieldValues: Record<string, any>) => void;
-    form: UseFormReturn<any>;
+    value: Record<string, any>;
 }
 
-export function OrderLineCustomFieldsForm({ onUpdate, form }: OrderLineCustomFieldsFormProps) {
+export function OrderLineCustomFieldsForm({ onUpdate, value }: Readonly<OrderLineCustomFieldsFormProps>) {
+    const form = useForm<Record<string, any>>({
+        defaultValues: {
+            customFields: value,
+        },
+    });
+
     const onSubmit = (values: any) => {
-        onUpdate(values.input?.customFields);
+        onUpdate(values.customFields);
     };
-    
+
     return (
         <Popover>
             <PopoverTrigger asChild>
@@ -24,11 +31,19 @@ export function OrderLineCustomFieldsForm({ onUpdate, form }: OrderLineCustomFie
             </PopoverTrigger>
             <PopoverContent className="w-80">
                 <Form {...form}>
-                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-                        <h4 className="font-medium leading-none">Custom Fields</h4>
-                        <CustomFieldsForm entityType="OrderLine" control={form.control} formPathPrefix='input' />
+                    <form
+                        onSubmit={e => {
+                            e.stopPropagation();
+                            form.handleSubmit(onSubmit)(e);
+                        }}
+                        className="space-y-4"
+                    >
+                        <h4 className="font-medium leading-none">
+                            <Trans>Custom Fields</Trans>
+                        </h4>
+                        <CustomFieldsForm entityType="OrderLine" control={form.control} />
                         <Button type="submit" className="w-full" disabled={!form.formState.isValid}>
-                            Update
+                            <Trans>Update</Trans>
                         </Button>
                     </form>
                 </Form>