feat(admin-ui): Display customer history in detail view

Relates to #343

packages/admin-ui/src/lib/core/src/common/generated-types.ts

@@ -1284,10 +1284,11 @@ export enum HistoryEntryType {
   CUSTOMER_REGISTERED = 'CUSTOMER_REGISTERED',
   CUSTOMER_VERIFIED = 'CUSTOMER_VERIFIED',
   CUSTOMER_DETAIL_UPDATED = 'CUSTOMER_DETAIL_UPDATED',
+  CUSTOMER_ADDED_TO_GROUP = 'CUSTOMER_ADDED_TO_GROUP',
+  CUSTOMER_REMOVED_FROM_GROUP = 'CUSTOMER_REMOVED_FROM_GROUP',
   CUSTOMER_ADDRESS_CREATED = 'CUSTOMER_ADDRESS_CREATED',
   CUSTOMER_ADDRESS_UPDATED = 'CUSTOMER_ADDRESS_UPDATED',
   CUSTOMER_ADDRESS_DELETED = 'CUSTOMER_ADDRESS_DELETED',
-  CUSTOMER_ORDER_PLACED = 'CUSTOMER_ORDER_PLACED',
   CUSTOMER_PASSWORD_UPDATED = 'CUSTOMER_PASSWORD_UPDATED',
   CUSTOMER_PASSWORD_RESET_REQUESTED = 'CUSTOMER_PASSWORD_RESET_REQUESTED',
   CUSTOMER_PASSWORD_RESET_VERIFIED = 'CUSTOMER_PASSWORD_RESET_VERIFIED',
@@ -4478,6 +4479,45 @@ export type RemoveCustomersFromGroupMutation = (
   ) }
 );
 
+export type GetCustomerHistoryQueryVariables = {
+  id: Scalars['ID'];
+  options?: Maybe<HistoryEntryListOptions>;
+};
+
+
+export type GetCustomerHistoryQuery = (
+  { __typename?: 'Query' }
+  & { customer?: Maybe<(
+    { __typename?: 'Customer' }
+    & Pick<Customer, 'id'>
+    & { history: (
+      { __typename?: 'HistoryEntryList' }
+      & Pick<HistoryEntryList, 'totalItems'>
+      & { items: Array<(
+        { __typename?: 'HistoryEntry' }
+        & Pick<HistoryEntry, 'id' | 'type' | 'createdAt' | 'isPublic' | 'data'>
+        & { administrator?: Maybe<(
+          { __typename?: 'Administrator' }
+          & Pick<Administrator, 'id' | 'firstName' | 'lastName'>
+        )> }
+      )> }
+    ) }
+  )> }
+);
+
+export type AddNoteToCustomerMutationVariables = {
+  input: AddNoteToCustomerInput;
+};
+
+
+export type AddNoteToCustomerMutation = (
+  { __typename?: 'Mutation' }
+  & { addNoteToCustomer: (
+    { __typename?: 'Customer' }
+    & Pick<Customer, 'id'>
+  ) }
+);
+
 export type FacetValueFragment = (
   { __typename?: 'FacetValue' }
   & Pick<FacetValue, 'id' | 'createdAt' | 'updatedAt' | 'languageCode' | 'code' | 'name'>
@@ -6895,6 +6935,21 @@ export namespace RemoveCustomersFromGroup {
   export type RemoveCustomersFromGroup = RemoveCustomersFromGroupMutation['removeCustomersFromGroup'];
 }
 
+export namespace GetCustomerHistory {
+  export type Variables = GetCustomerHistoryQueryVariables;
+  export type Query = GetCustomerHistoryQuery;
+  export type Customer = (NonNullable<GetCustomerHistoryQuery['customer']>);
+  export type History = (NonNullable<GetCustomerHistoryQuery['customer']>)['history'];
+  export type Items = (NonNullable<(NonNullable<GetCustomerHistoryQuery['customer']>)['history']['items'][0]>);
+  export type Administrator = (NonNullable<(NonNullable<(NonNullable<GetCustomerHistoryQuery['customer']>)['history']['items'][0]>)['administrator']>);
+}
+
+export namespace AddNoteToCustomer {
+  export type Variables = AddNoteToCustomerMutationVariables;
+  export type Mutation = AddNoteToCustomerMutation;
+  export type AddNoteToCustomer = AddNoteToCustomerMutation['addNoteToCustomer'];
+}
+
 export namespace FacetValue {
   export type Fragment = FacetValueFragment;
   export type Translations = (NonNullable<FacetValueFragment['translations'][0]>);

packages/admin-ui/src/lib/core/src/data/definitions/customer-definitions.ts

@@ -215,3 +215,34 @@ export const REMOVE_CUSTOMERS_FROM_GROUP = gql`
         }
     }
 `;
+
+export const GET_CUSTOMER_HISTORY = gql`
+    query GetCustomerHistory($id: ID!, $options: HistoryEntryListOptions) {
+        customer(id: $id) {
+            id
+            history(options: $options) {
+                totalItems
+                items {
+                    id
+                    type
+                    createdAt
+                    isPublic
+                    administrator {
+                        id
+                        firstName
+                        lastName
+                    }
+                    data
+                }
+            }
+        }
+    }
+`;
+
+export const ADD_NOTE_TO_CUSTOMER = gql`
+    mutation AddNoteToCustomer($input: AddNoteToCustomerInput!) {
+        addNoteToCustomer(input: $input) {
+            id
+        }
+    }
+`;

packages/admin-ui/src/lib/core/src/data/providers/customer-data.service.ts

@@ -1,5 +1,6 @@
 import {
     AddCustomersToGroup,
+    AddNoteToCustomer,
     CreateAddressInput,
     CreateCustomer,
     CreateCustomerAddress,
@@ -12,7 +13,9 @@ import {
     GetCustomer,
     GetCustomerGroups,
     GetCustomerGroupWithCustomers,
+    GetCustomerHistory,
     GetCustomerList,
+    HistoryEntryListOptions,
     OrderListOptions,
     RemoveCustomersFromGroup,
     UpdateAddressInput,
@@ -24,13 +27,15 @@ import {
 } from '../../common/generated-types';
 import {
     ADD_CUSTOMERS_TO_GROUP,
+    ADD_NOTE_TO_CUSTOMER,
     CREATE_CUSTOMER,
     CREATE_CUSTOMER_ADDRESS,
     CREATE_CUSTOMER_GROUP,
     DELETE_CUSTOMER_GROUP,
     GET_CUSTOMER,
     GET_CUSTOMER_GROUP_WITH_CUSTOMERS,
     GET_CUSTOMER_GROUPS,
+    GET_CUSTOMER_HISTORY,
     GET_CUSTOMER_LIST,
     REMOVE_CUSTOMERS_FROM_GROUP,
     UPDATE_CUSTOMER,
@@ -173,4 +178,27 @@ export class CustomerDataService {
             customerIds,
         });
     }
+
+    getCustomerHistory(id: string, options?: HistoryEntryListOptions) {
+        return this.baseDataService.query<GetCustomerHistory.Query, GetCustomerHistory.Variables>(
+            GET_CUSTOMER_HISTORY,
+            {
+                id,
+                options,
+            },
+        );
+    }
+
+    addNoteToCustomer(customerId: string, note: string) {
+        return this.baseDataService.mutate<AddNoteToCustomer.Mutation, AddNoteToCustomer.Variables>(
+            ADD_NOTE_TO_CUSTOMER,
+            {
+                input: {
+                    note,
+                    isPublic: false,
+                    id: customerId,
+                },
+            },
+        );
+    }
 }

packages/admin-ui/src/lib/order/src/components/history-entry-detail/history-entry-detail.component.html → packages/admin-ui/src/lib/core/src/shared/components/history-entry-detail/history-entry-detail.component.html

@@ -1,7 +1,7 @@
 <vdr-dropdown>
     <button class="btn btn-link btn-sm details-button" vdrDropdownTrigger>
         <clr-icon shape="details" size="12"></clr-icon>
-        {{ 'order.details' | translate }}
+        {{ 'common.details' | translate }}
     </button>
     <vdr-dropdown-menu>
         <div class="entry-dropdown">

packages/admin-ui/src/lib/core/src/shared/components/timeline-entry/timeline-entry.component.scss

@@ -119,6 +119,9 @@
 }
 
 .warning {
+    .timeline, .timeline .custom-icon {
+        color: $color-warning-400;
+    }
     .timeline:after {
         background-color: $color-warning-200;
         border: 1px solid $color-warning-400;

packages/admin-ui/src/lib/core/src/shared/shared.module.ts

@@ -51,6 +51,7 @@ import { FormFieldControlDirective } from './components/form-field/form-field-co
 import { FormFieldComponent } from './components/form-field/form-field.component';
 import { FormItemComponent } from './components/form-item/form-item.component';
 import { FormattedAddressComponent } from './components/formatted-address/formatted-address.component';
+import { HistoryEntryDetailComponent } from './components/history-entry-detail/history-entry-detail.component';
 import { ItemsPerPageControlsComponent } from './components/items-per-page-controls/items-per-page-controls.component';
 import { LabeledDataComponent } from './components/labeled-data/labeled-data.component';
 import { LanguageSelectorComponent } from './components/language-selector/language-selector.component';
@@ -168,6 +169,7 @@ const DECLARATIONS = [
     DurationPipe,
     EmptyPlaceholderComponent,
     TimelineEntryComponent,
+    HistoryEntryDetailComponent,
 ];
 
 @NgModule({

packages/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.html

@@ -141,3 +141,8 @@ <h3>{{ 'customer.orders' | translate }}</h3>
         </vdr-data-table>
     </div>
 </div>
+<div class="clr-row" *ngIf="!(isNew$ | async)">
+    <div class="clr-col-md-6">
+        <vdr-customer-history [customer]="entity$ | async" [history]="history$ | async" (addNote)="addNoteToCustomer($event)"></vdr-customer-history>
+    </div>
+</div>

packages/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.ts

@@ -11,15 +11,27 @@ import {
     DataService,
     GetAvailableCountries,
     GetCustomer,
+    GetCustomerHistory,
     GetCustomerQuery,
     ModalService,
     NotificationService,
     ServerConfigService,
+    SortOrder,
     UpdateCustomerInput,
 } from '@vendure/admin-ui/core';
 import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
 import { EMPTY, forkJoin, from, Observable, Subject } from 'rxjs';
-import { concatMap, filter, map, merge, mergeMap, shareReplay, switchMap, take } from 'rxjs/operators';
+import {
+    concatMap,
+    filter,
+    map,
+    merge,
+    mergeMap,
+    shareReplay,
+    startWith,
+    switchMap,
+    take,
+} from 'rxjs/operators';
 
 import { SelectCustomerGroupDialogComponent } from '../select-customer-group-dialog/select-customer-group-dialog.component';
 
@@ -38,6 +50,8 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
     availableCountries$: Observable<GetAvailableCountries.Items[]>;
     orders$: Observable<GetCustomer.Items[]>;
     ordersCount$: Observable<number>;
+    history$: Observable<GetCustomerHistory.Items[] | undefined>;
+    fetchHistory = new Subject<void>();
     defaultShippingAddressId: string;
     defaultBillingAddressId: string;
     addressDefaultsUpdated = false;
@@ -84,6 +98,18 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
         const customerWithUpdates$ = this.entity$.pipe(merge(this.orderListUpdates$));
         this.orders$ = customerWithUpdates$.pipe(map((customer) => customer.orders.items));
         this.ordersCount$ = this.entity$.pipe(map((customer) => customer.orders.totalItems));
+        this.history$ = this.fetchHistory.pipe(
+            startWith(null),
+            switchMap(() => {
+                return this.dataService.customer
+                    .getCustomerHistory(this.id, {
+                        sort: {
+                            createdAt: SortOrder.DESC,
+                        },
+                    })
+                    .mapStream((data) => data.customer?.history.items);
+            }),
+        );
     }
 
     ngOnDestroy() {
@@ -238,6 +264,7 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
                     this.detailForm.markAsPristine();
                     this.addressDefaultsUpdated = false;
                     this.changeDetector.markForCheck();
+                    this.fetchHistory.next();
                 },
                 (err) => {
                     this.notificationService.error(_('common.notify-update-error'), {
@@ -265,6 +292,7 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
                 },
                 complete: () => {
                     this.dataService.customer.getCustomer(this.id, { take: 0 }).single$.subscribe();
+                    this.fetchHistory.next();
                 },
             });
     }
@@ -291,9 +319,14 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
                     customerCount: 1,
                     groupName: group.name,
                 });
+                this.fetchHistory.next();
             });
     }
 
+    addNoteToCustomer({ note }: { note: string }) {
+        this.dataService.customer.addNoteToCustomer(this.id, note).subscribe(() => this.fetchHistory.next());
+    }
+
     protected setFormValues(entity: Customer.Fragment): void {
         const customerGroup = this.detailForm.get('customer');
         if (customerGroup) {