Skip to main content

HistoryEntries

DashboardHistoryEntryComponent​

@vendure/dashboardhistory-entries.ts
v3.4.3

A definition of a custom component that will be used to render the given type of history entry.

Example

import { defineDashboardExtension, HistoryEntry } from '@vendure/dashboard';
import { IdCard } from 'lucide-react';

defineDashboardExtension({
    historyEntries: [
        {
            type: 'CUSTOMER_TAX_ID_APPROVAL',
            component: ({ entry, entity }) => {
                return (
                    <HistoryEntry
                        entry={entry}
                        title={'Tax ID verified'}
                        timelineIconClassName={'bg-success text-success-foreground'}
                        timelineIcon={<IdCard />}
                    >
                        <div className="text-xs">Approval reference: {entry.data.ref}</div>
                    </HistoryEntry>
                );
            },
        },
    ],
 });
Signature
interface DashboardHistoryEntryComponent {
    type: string;
    component: React.ComponentType<{
        entry: HistoryEntryItem;
        entity: OrderHistoryOrderDetail | CustomerHistoryCustomerDetail;
    }>;
}

type​

property
string

The type should correspond to a valid HistoryEntryType, such as

  • CUSTOMER_REGISTERED
  • ORDER_STATE_TRANSITION
  • some custom type - see the HistoryService docs for a guide on how to define custom history entry types.

component​

property
React.ComponentType<{ entry: HistoryEntryItem; entity: OrderHistoryOrderDetail | CustomerHistoryCustomerDetail; }>

The component which is used to render the timeline entry. It should use the HistoryEntry component and pass the appropriate props to configure how it will be displayed.

The entity prop will be a subset of the Order object for Order history entries, or a subset of the Customer object for customer history entries.

HistoryEntryItem​

@vendure/dashboardhistory-entries.ts
v3.4.3

This object contains the information about the history entry.

Signature
interface HistoryEntryItem {
    id: string;
    type: string;
    createdAt: string;
    isPublic: boolean;
    administrator?: {
        id: string;
        firstName: string;
        lastName: string;
    } | null;
    data: any;
}

id​

property
string

type​

property
string

The HistoryEntryType, such as ORDER_STATE_TRANSITION.

createdAt​

property
string

isPublic​

property
boolean

Whether this entry is visible to customers via the Shop API

administrator​

property
{ id: string; firstName: string; lastName: string; } | null

If an Administrator created this entry, their details will be available here.

data​

property
any

The entry payload data. This will be an object, which is different for each type of history entry.

For example, the CUSTOMER_ADDED_TO_GROUP data looks like this:

{
  groupName: 'Some Group',
}

and the ORDER_STATE_TRANSITION data looks like this:

{
  from: 'ArrangingPayment',
  to: 'PaymentSettled',
}

HistoryEntryProps​

@vendure/dashboardhistory-entry.tsx
v3.4.3

The props for the HistoryEntry component.

Signature
interface HistoryEntryProps {
    entry: HistoryEntryItem;
    title: string | React.ReactNode;
    timelineIcon?: React.ReactNode;
    timelineIconClassName?: string;
    actorName?: string;
    children: React.ReactNode;
    isPrimary?: boolean;
}

entry​

property
HistoryEntryItem

The entry itself, which will get passed down to your custom component

title​

property
string | React.ReactNode

The title of the entry

timelineIcon​

property
React.ReactNode

An icon which is used to represent the entry. Note that this will only display if isPrimary is true.

timelineIconClassName​

property
string

Optional tailwind classes to apply to the icon. For instance

const success = 'bg-success text-success-foreground';
const destructive = 'bg-danger text-danger-foreground';

actorName​

property
string

The name to display of "who did the action". For instance:

const getActorName = (entry: HistoryEntryItem) => {
    if (entry.administrator) {
        return `${entry.administrator.firstName} ${entry.administrator.lastName}`;
    } else if (entity?.customer) {
        return `${entity.customer.firstName} ${entity.customer.lastName}`;
    }
    return '';
};

children​

property
React.ReactNode

isPrimary​

property
boolean

When set to true, the timeline entry will feature the specified icon and will not be collapsible.

HistoryEntry​

@vendure/dashboardhistory-entry.tsx
v3.4.3

A component which is used to display a history entry in the order/customer history timeline.

Signature
function HistoryEntry(props: Readonly<HistoryEntryProps>): void

Parameters

props​

parameter
Readonly<HistoryEntryProps>