Custom History Timeline Components
The Order & Customer detail pages feature a timeline of history entries. Since v1.9.0 it is possible to define custom history entry types - see the HistoryService docs for an example.
You can also define a custom Angular component to render any timeline entry using the registerHistoryEntryComponent function.
Following the example used in the HistoryService docs, we can define a component to render the tax ID verification entry in our Customer timeline:
import { Component, NgModule } from '@angular/core';
import {
CustomerFragment,
CustomerHistoryEntryComponent,
registerHistoryEntryComponent,
SharedModule,
TimelineDisplayType,
TimelineHistoryEntry,
} from '@vendure/admin-ui/core';
@Component({
selector: 'tax-id-verification-component',
template: `
<div *ngIf="entry.data.valid">
Tax ID <strong>{{ entry.data.taxId }}</strong> was verified
<vdr-history-entry-detail *ngIf="entry.data">
<vdr-object-tree [value]="entry.data"></vdr-object-tree>
</vdr-history-entry-detail>
</div>
<div *ngIf="entry.data.valid">Tax ID {{ entry.data.taxId }} could not be verified</div>
`,
})
class TaxIdHistoryEntryComponent implements CustomerHistoryEntryComponent {
entry: TimelineHistoryEntry;
customer: CustomerFragment;
getDisplayType(entry: TimelineHistoryEntry): TimelineDisplayType {
return entry.data.valid ? 'success' : 'error';
}
getName(entry: TimelineHistoryEntry): string {
return 'Tax ID Verification Plugin';
}
isFeatured(entry: TimelineHistoryEntry): boolean {
return true;
}
getIconShape(entry: TimelineHistoryEntry) {
return entry.data.valid ? 'check-circle' : 'exclamation-circle';
}
}
@NgModule({
imports: [SharedModule],
declarations: [TaxIdHistoryEntryComponent],
providers: [
registerHistoryEntryComponent({
type: 'CUSTOMER_TAX_ID_VERIFICATION',
component:TaxIdHistoryEntryComponent,
}),
]
})
export class SharedExtensionModule {}