@vendure/dashboard 3.4.3-master-202509230228 → 3.4.3-master-202509240228

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.4.3-master-202509230228",
+    "version": "3.4.3-master-202509240228",
     "type": "module",
     "repository": {
         "type": "git",
@@ -104,8 +104,8 @@
         "@types/react": "^19.0.10",
         "@types/react-dom": "^19.0.4",
         "@uidotdev/usehooks": "^2.4.1",
-        "@vendure/common": "^3.4.3-master-202509230228",
-        "@vendure/core": "^3.4.3-master-202509230228",
+        "@vendure/common": "^3.4.3-master-202509240228",
+        "@vendure/core": "^3.4.3-master-202509240228",
         "@vitejs/plugin-react": "^4.3.4",
         "acorn": "^8.11.3",
         "acorn-walk": "^8.3.2",
@@ -156,5 +156,5 @@
         "lightningcss-linux-arm64-musl": "^1.29.3",
         "lightningcss-linux-x64-musl": "^1.29.1"
     },
-    "gitHead": "84a018a2192043ab6d6a1d05c7f842c019f5a9d5"
+    "gitHead": "3cf135a11d028df5b1fbbb5ab6a1b117e91e13f7"
 }

package/src/app/routes/_authenticated/_customers/components/customer-history/customer-history-container.tsx

@@ -63,13 +63,13 @@ export function CustomerHistoryContainer({ customerId }: Readonly<CustomerHistor
         <>
             <CustomerHistory
                 customer={customer}
-                historyEntries={historyEntries ?? []}
+                historyEntries={historyEntries}
                 onAddNote={addNote}
                 onUpdateNote={updateNote}
                 onDeleteNote={deleteNote}
             />
             {hasNextPage && (
-                <Button type="button" variant="outline" onClick={() => fetchNextPage()}>
+                <Button type="button" variant="outline" onClick={() => fetchNextPage?.()}>
                     <Trans>Load more</Trans>
                 </Button>
             )}

package/src/app/routes/_authenticated/_customers/components/customer-history/customer-history-types.ts

@@ -0,0 +1,5 @@
+import { ResultOf } from 'gql.tada';
+
+import { customerHistoryDocument } from '../../customers.graphql.js';
+
+export type CustomerHistoryCustomerDetail = NonNullable<ResultOf<typeof customerHistoryDocument>>['customer'];

package/src/app/routes/_authenticated/_customers/components/customer-history/customer-history-utils.tsx

@@ -0,0 +1,124 @@
+import { HistoryEntryItem } from '@/vdb/framework/extension-api/types/index.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { CheckIcon, Edit3, KeyIcon, Mail, MapPin, SquarePen, User, UserCheck, Users } from 'lucide-react';
+import { CustomerHistoryCustomerDetail } from './customer-history-types.js';
+
+export function customerHistoryUtils(customer: CustomerHistoryCustomerDetail) {
+    const getTimelineIcon = (entry: HistoryEntryItem) => {
+        switch (entry.type) {
+            case 'CUSTOMER_REGISTERED':
+                return <User className="h-4 w-4" />;
+            case 'CUSTOMER_VERIFIED':
+                return <UserCheck className="h-4 w-4" />;
+            case 'CUSTOMER_NOTE':
+                return <SquarePen className="h-4 w-4" />;
+            case 'CUSTOMER_ADDED_TO_GROUP':
+            case 'CUSTOMER_REMOVED_FROM_GROUP':
+                return <Users className="h-4 w-4" />;
+            case 'CUSTOMER_DETAIL_UPDATED':
+                return <Edit3 className="h-4 w-4" />;
+            case 'CUSTOMER_ADDRESS_CREATED':
+            case 'CUSTOMER_ADDRESS_UPDATED':
+            case 'CUSTOMER_ADDRESS_DELETED':
+                return <MapPin className="h-4 w-4" />;
+            case 'CUSTOMER_PASSWORD_UPDATED':
+            case 'CUSTOMER_PASSWORD_RESET_REQUESTED':
+            case 'CUSTOMER_PASSWORD_RESET_VERIFIED':
+                return <KeyIcon className="h-4 w-4" />;
+            case 'CUSTOMER_EMAIL_UPDATE_REQUESTED':
+            case 'CUSTOMER_EMAIL_UPDATE_VERIFIED':
+                return <Mail className="h-4 w-4" />;
+            default:
+                return <CheckIcon className="h-4 w-4" />;
+        }
+    };
+
+    const getTitle = (entry: HistoryEntryItem) => {
+        switch (entry.type) {
+            case 'CUSTOMER_REGISTERED':
+                return <Trans>Customer registered</Trans>;
+            case 'CUSTOMER_VERIFIED':
+                return <Trans>Customer verified</Trans>;
+            case 'CUSTOMER_NOTE':
+                return <Trans>Note added</Trans>;
+            case 'CUSTOMER_DETAIL_UPDATED':
+                return <Trans>Customer details updated</Trans>;
+            case 'CUSTOMER_ADDED_TO_GROUP':
+                return <Trans>Added to group</Trans>;
+            case 'CUSTOMER_REMOVED_FROM_GROUP':
+                return <Trans>Removed from group</Trans>;
+            case 'CUSTOMER_ADDRESS_CREATED':
+                return <Trans>Address created</Trans>;
+            case 'CUSTOMER_ADDRESS_UPDATED':
+                return <Trans>Address updated</Trans>;
+            case 'CUSTOMER_ADDRESS_DELETED':
+                return <Trans>Address deleted</Trans>;
+            case 'CUSTOMER_PASSWORD_UPDATED':
+                return <Trans>Password updated</Trans>;
+            case 'CUSTOMER_PASSWORD_RESET_REQUESTED':
+                return <Trans>Password reset requested</Trans>;
+            case 'CUSTOMER_PASSWORD_RESET_VERIFIED':
+                return <Trans>Password reset verified</Trans>;
+            case 'CUSTOMER_EMAIL_UPDATE_REQUESTED':
+                return <Trans>Email update requested</Trans>;
+            case 'CUSTOMER_EMAIL_UPDATE_VERIFIED':
+                return <Trans>Email update verified</Trans>;
+            default:
+                return <Trans>{entry.type.replace(/_/g, ' ').toLowerCase()}</Trans>;
+        }
+    };
+
+    const getIconColor = (entry: HistoryEntryItem) => {
+        // Check for success states
+        if (
+            entry.type === 'CUSTOMER_VERIFIED' ||
+            entry.type === 'CUSTOMER_EMAIL_UPDATE_VERIFIED' ||
+            entry.type === 'CUSTOMER_PASSWORD_RESET_VERIFIED'
+        ) {
+            return 'bg-success text-success-foreground';
+        }
+
+        // Check for destructive states
+        if (entry.type === 'CUSTOMER_REMOVED_FROM_GROUP' || entry.type === 'CUSTOMER_ADDRESS_DELETED') {
+            return 'bg-destructive text-destructive-foreground';
+        }
+
+        // Registration gets muted style
+        if (entry.type === 'CUSTOMER_REGISTERED') {
+            return 'bg-muted text-muted-foreground';
+        }
+
+        // All other entries use neutral colors
+        return 'bg-muted text-muted-foreground';
+    };
+
+    const getActorName = (entry: HistoryEntryItem) => {
+        if (entry.administrator) {
+            return `${entry.administrator.firstName} ${entry.administrator.lastName}`;
+        } else if (customer) {
+            return `${customer.firstName} ${customer.lastName}`;
+        }
+        return '';
+    };
+
+    const isPrimaryEvent = (entry: HistoryEntryItem) => {
+        switch (entry.type) {
+            case 'CUSTOMER_REGISTERED':
+            case 'CUSTOMER_VERIFIED':
+            case 'CUSTOMER_NOTE':
+            case 'CUSTOMER_EMAIL_UPDATE_VERIFIED':
+            case 'CUSTOMER_PASSWORD_RESET_VERIFIED':
+                return true;
+            default:
+                return false;
+        }
+    };
+
+    return {
+        getTimelineIcon,
+        getTitle,
+        getIconColor,
+        getActorName,
+        isPrimaryEvent,
+    };
+}

package/src/app/routes/_authenticated/_customers/components/customer-history/customer-history.tsx

@@ -1,81 +1,113 @@
-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 { HistoryNoteEntry } from '@/vdb/components/shared/history-timeline/history-note-entry.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 { Trans } from '@/vdb/lib/trans.js';
-import { CheckIcon, SquarePen } from 'lucide-react';
+import { HistoryTimelineWithGrouping } from '@/vdb/components/shared/history-timeline/history-timeline-with-grouping.js';
+import { useHistoryNoteEditor } from '@/vdb/components/shared/history-timeline/use-history-note-editor.js';
+import { HistoryEntryItem } from '@/vdb/framework/extension-api/types/history-entries.js';
+import { HistoryEntryProps } from '@/vdb/framework/history-entry/history-entry.js';
+import { CustomerHistoryCustomerDetail } from './customer-history-types.js';
+import { customerHistoryUtils } from './customer-history-utils.js';
+import {
+    CustomerAddRemoveGroupComponent,
+    CustomerAddressCreatedComponent,
+    CustomerAddressDeletedComponent,
+    CustomerAddressUpdatedComponent,
+    CustomerDetailUpdatedComponent,
+    CustomerEmailUpdateComponent,
+    CustomerPasswordResetRequestedComponent,
+    CustomerPasswordResetVerifiedComponent,
+    CustomerPasswordUpdatedComponent,
+    CustomerRegisteredOrVerifiedComponent,
+} from './default-customer-history-components.js';
 
 interface CustomerHistoryProps {
-    customer: {
-        id: string;
-    };
-    historyEntries: Array<HistoryEntryItem>;
+    customer: CustomerHistoryCustomerDetail;
+    historyEntries: HistoryEntryItem[];
     onAddNote: (note: string, isPrivate: boolean) => void;
     onUpdateNote?: (entryId: string, note: string, isPrivate: boolean) => void;
     onDeleteNote?: (entryId: string) => void;
 }
 
 export function CustomerHistory({
+    customer,
     historyEntries,
     onAddNote,
     onUpdateNote,
     onDeleteNote,
-}: CustomerHistoryProps) {
-    const getTimelineIcon = (entry: CustomerHistoryProps['historyEntries'][0]) => {
-        switch (entry.type) {
-            case 'CUSTOMER_NOTE':
-                return <SquarePen className="h-4 w-4" />;
-            default:
-                return <CheckIcon className="h-4 w-4" />;
-        }
+}: Readonly<CustomerHistoryProps>) {
+    const { noteState, noteEditorOpen, handleEditNote, setNoteEditorOpen } = useHistoryNoteEditor();
+
+    const handleDeleteNote = (noteId: string) => {
+        onDeleteNote?.(noteId);
     };
 
-    const getTitle = (entry: CustomerHistoryProps['historyEntries'][0]) => {
-        switch (entry.type) {
-            case 'CUSTOMER_NOTE':
-                return <Trans>Note added</Trans>;
-            default:
-                return <Trans>{entry.type.replace(/_/g, ' ').toLowerCase()}</Trans>;
+    const handleNoteEditorSave = (noteId: string, note: string, isPrivate: boolean) => {
+        onUpdateNote?.(noteId, note, isPrivate);
+    };
+
+    const { getTimelineIcon, getTitle, getIconColor, getActorName, isPrimaryEvent } =
+        customerHistoryUtils(customer);
+
+    const renderEntryContent = (entry: HistoryEntryItem) => {
+        const props: HistoryEntryProps = {
+            entry,
+            title: getTitle(entry),
+            actorName: getActorName(entry),
+            timelineIcon: getTimelineIcon(entry),
+            timelineIconClassName: getIconColor(entry),
+            isPrimary: isPrimaryEvent(entry),
+            children: null,
+        };
+        if (entry.type === 'CUSTOMER_REGISTERED' || entry.type === 'CUSTOMER_VERIFIED') {
+            return <CustomerRegisteredOrVerifiedComponent {...props} />;
+        } else if (entry.type === 'CUSTOMER_DETAIL_UPDATED') {
+            return <CustomerDetailUpdatedComponent {...props} />;
+        } else if (entry.type === 'CUSTOMER_ADDED_TO_GROUP' || entry.type === 'CUSTOMER_REMOVED_FROM_GROUP') {
+            return <CustomerAddRemoveGroupComponent {...props} />;
+        } else if (entry.type === 'CUSTOMER_ADDRESS_CREATED') {
+            return <CustomerAddressCreatedComponent {...props} />;
+        } else if (entry.type === 'CUSTOMER_ADDRESS_UPDATED') {
+            return <CustomerAddressUpdatedComponent {...props} />;
+        } else if (entry.type === 'CUSTOMER_ADDRESS_DELETED') {
+            return <CustomerAddressDeletedComponent {...props} />;
+        } else if (entry.type === 'CUSTOMER_NOTE') {
+            return (
+                <HistoryNoteEntry {...props} onEditNote={handleEditNote} onDeleteNote={handleDeleteNote} />
+            );
+        } else if (entry.type === 'CUSTOMER_PASSWORD_UPDATED') {
+            return <CustomerPasswordUpdatedComponent {...props} />;
+        } else if (entry.type === 'CUSTOMER_PASSWORD_RESET_REQUESTED') {
+            return <CustomerPasswordResetRequestedComponent {...props} />;
+        } else if (entry.type === 'CUSTOMER_PASSWORD_RESET_VERIFIED') {
+            return <CustomerPasswordResetVerifiedComponent {...props} />;
+        } else if (
+            entry.type === 'CUSTOMER_EMAIL_UPDATE_REQUESTED' ||
+            entry.type === 'CUSTOMER_EMAIL_UPDATE_VERIFIED'
+        ) {
+            return <CustomerEmailUpdateComponent {...props} />;
         }
+        return null;
     };
 
     return (
-        <div className="">
-            <div className="mb-4">
+        <>
+            <HistoryTimelineWithGrouping
+                historyEntries={historyEntries}
+                isPrimaryEvent={isPrimaryEvent}
+                renderEntryContent={renderEntryContent}
+                entity={customer}
+            >
                 <HistoryNoteInput onAddNote={onAddNote} />
-            </div>
-            <HistoryTimeline onEditNote={onUpdateNote} onDeleteNote={onDeleteNote}>
-                {historyEntries.map(entry => (
-                    <HistoryEntry
-                        key={entry.id}
-                        entry={entry}
-                        isNoteEntry={entry.type === 'CUSTOMER_NOTE'}
-                        timelineIcon={getTimelineIcon(entry)}
-                        title={getTitle(entry)}
-                    >
-                        {entry.type === 'CUSTOMER_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>
-                            </div>
-                        )}
-                        <div className="text-sm text-muted-foreground">
-                            {entry.type === 'CUSTOMER_NOTE' && (
-                                <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>
-        </div>
+            </HistoryTimelineWithGrouping>
+            <HistoryNoteEditor
+                key={noteState.noteId}
+                open={noteEditorOpen}
+                onOpenChange={setNoteEditorOpen}
+                onNoteChange={handleNoteEditorSave}
+                note={noteState.note}
+                isPrivate={noteState.isPrivate}
+                noteId={noteState.noteId}
+            />
+        </>
     );
 }

package/src/app/routes/_authenticated/_customers/components/customer-history/default-customer-history-components.tsx

@@ -0,0 +1,176 @@
+import { HistoryEntry, HistoryEntryProps } from '@/vdb/framework/history-entry/history-entry.js';
+import { Trans } from '@/vdb/lib/trans.js';
+
+export function CustomerRegisteredOrVerifiedComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    const strategy = entry.data?.strategy || 'native';
+
+    return (
+        <HistoryEntry {...props}>
+            <div className="space-y-1">
+                {strategy === 'native' ? (
+                    <p className="text-xs text-muted-foreground">
+                        <Trans>Using native authentication strategy</Trans>
+                    </p>
+                ) : (
+                    <p className="text-xs text-muted-foreground">
+                        <Trans>Using external authentication strategy: {strategy}</Trans>
+                    </p>
+                )}
+            </div>
+        </HistoryEntry>
+    );
+}
+
+export function CustomerDetailUpdatedComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    return (
+        <HistoryEntry {...props}>
+            <div className="space-y-2">
+                {entry.data?.input && (
+                    <details className="text-xs">
+                        <summary className="cursor-pointer text-muted-foreground hover:text-foreground">
+                            <Trans>View changes</Trans>
+                        </summary>
+                        <pre className="mt-2 p-2 bg-muted rounded text-xs overflow-auto">
+                            {JSON.stringify(entry.data.input, null, 2)}
+                        </pre>
+                    </details>
+                )}
+            </div>
+        </HistoryEntry>
+    );
+}
+
+export function CustomerAddRemoveGroupComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    const groupName = entry.data?.groupName || 'Unknown Group';
+
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">{groupName}</p>
+        </HistoryEntry>
+    );
+}
+
+export function CustomerAddressCreatedComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    return (
+        <HistoryEntry {...props}>
+            <div className="space-y-1">
+                <p className="text-xs text-muted-foreground">
+                    <Trans>Address created</Trans>
+                </p>
+                {entry.data?.address && (
+                    <div className="text-xs p-2 bg-muted rounded">{entry.data.address}</div>
+                )}
+            </div>
+        </HistoryEntry>
+    );
+}
+
+export function CustomerAddressUpdatedComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    return (
+        <HistoryEntry {...props}>
+            <div className="space-y-2">
+                <p className="text-xs text-muted-foreground">
+                    <Trans>Address updated</Trans>
+                </p>
+                {entry.data?.address && (
+                    <div className="text-xs p-2 bg-muted rounded">{entry.data.address}</div>
+                )}
+                {entry.data?.input && (
+                    <details className="text-xs">
+                        <summary className="cursor-pointer text-muted-foreground hover:text-foreground">
+                            <Trans>View changes</Trans>
+                        </summary>
+                        <pre className="mt-2 p-2 bg-muted rounded text-xs overflow-auto">
+                            {JSON.stringify(entry.data.input, null, 2)}
+                        </pre>
+                    </details>
+                )}
+            </div>
+        </HistoryEntry>
+    );
+}
+
+export function CustomerAddressDeletedComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    return (
+        <HistoryEntry {...props}>
+            <div className="space-y-1">
+                <p className="text-xs text-muted-foreground">
+                    <Trans>Address deleted</Trans>
+                </p>
+                {entry.data?.address && (
+                    <div className="text-xs p-2 bg-muted rounded">{entry.data.address}</div>
+                )}
+            </div>
+        </HistoryEntry>
+    );
+}
+
+export function CustomerPasswordUpdatedComponent(props: Readonly<HistoryEntryProps>) {
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>Password updated</Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function CustomerPasswordResetRequestedComponent(props: Readonly<HistoryEntryProps>) {
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>Password reset requested</Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function CustomerPasswordResetVerifiedComponent(props: Readonly<HistoryEntryProps>) {
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>Password reset verified</Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function CustomerEmailUpdateComponent({ entry }: Readonly<HistoryEntryProps>) {
+    const { oldEmailAddress, newEmailAddress } = entry.data || {};
+
+    return (
+        <div className="space-y-2">
+            {(oldEmailAddress || newEmailAddress) && (
+                <details className="text-xs">
+                    <summary className="cursor-pointer text-muted-foreground hover:text-foreground">
+                        <Trans>View details</Trans>
+                    </summary>
+                    <div className="mt-2 space-y-1">
+                        {oldEmailAddress && (
+                            <div>
+                                <span className="font-medium">
+                                    <Trans>Old email:</Trans>
+                                </span>{' '}
+                                {oldEmailAddress}
+                            </div>
+                        )}
+                        {newEmailAddress && (
+                            <div>
+                                <span className="font-medium">
+                                    <Trans>New email:</Trans>
+                                </span>{' '}
+                                {newEmailAddress}
+                            </div>
+                        )}
+                    </div>
+                </details>
+            )}
+        </div>
+    );
+}

package/src/app/routes/_authenticated/_customers/components/customer-history/index.ts

@@ -1,3 +1,5 @@
-export * from './customer-history.js';
 export * from './customer-history-container.js';
-export * from './use-customer-history.js';
+export * from './customer-history-utils.js';
+export * from './customer-history.js';
+export * from './default-customer-history-components.js';
+export * from './default-customer-history-registry.js';

package/src/app/routes/_authenticated/_customers/customers.graphql.ts

@@ -167,6 +167,8 @@ export const customerHistoryDocument = graphql(`
             id
             createdAt
             updatedAt
+            firstName
+            lastName
             history(options: $options) {
                 totalItems
                 items {

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

@@ -0,0 +1,98 @@
+import { HistoryEntry, HistoryEntryProps } from '@/vdb/framework/history-entry/history-entry.js';
+import { Trans } from '@/vdb/lib/trans.js';
+
+export function OrderStateTransitionComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    if (entry.data.from === 'Created') return null;
+
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>
+                    From {entry.data.from} to {entry.data.to}
+                </Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function OrderPaymentTransitionComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>
+                    Payment #{entry.data.paymentId} transitioned to {entry.data.to}
+                </Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function OrderRefundTransitionComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>
+                    Refund #{entry.data.refundId} transitioned to {entry.data.to}
+                </Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function OrderFulfillmentTransitionComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>
+                    Fulfillment #{entry.data.fulfillmentId} from {entry.data.from} to {entry.data.to}
+                </Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function OrderFulfillmentComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>Fulfillment #{entry.data.fulfillmentId} created</Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function OrderModifiedComponent(props: Readonly<HistoryEntryProps>) {
+    const { entry } = props;
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>Order modification #{entry.data.modificationId}</Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function OrderCustomerUpdatedComponent(props: Readonly<HistoryEntryProps>) {
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>Customer information updated</Trans>
+            </p>
+        </HistoryEntry>
+    );
+}
+
+export function OrderCancellationComponent(props: Readonly<HistoryEntryProps>) {
+    return (
+        <HistoryEntry {...props}>
+            <p className="text-xs text-muted-foreground">
+                <Trans>Order cancelled</Trans>
+            </p>
+        </HistoryEntry>
+    );
+}

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

@@ -61,13 +61,15 @@ export function OrderHistoryContainer({ orderId }: Readonly<OrderHistoryContaine
 
     return (
         <>
-            <OrderHistory
-                order={order}
-                historyEntries={historyEntries ?? []}
-                onAddNote={addNote}
-                onUpdateNote={updateNote}
-                onDeleteNote={deleteNote}
-            />
+            {order ? (
+                <OrderHistory
+                    order={order}
+                    historyEntries={historyEntries ?? []}
+                    onAddNote={addNote}
+                    onUpdateNote={updateNote}
+                    onDeleteNote={deleteNote}
+                />
+            ) : null}
             {hasNextPage && (
                 <Button type="button" variant="outline" onClick={() => fetchNextPage()}>
                     <Trans>Load more</Trans>