fix: display error message on order history page #1565

intershop · Jan 11, 2024 · a93e17d · a93e17d
1 parent 9211841
commit a93e17d
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 4 deletions.
diff --git a/src/app/core/facades/account.facade.ts b/src/app/core/facades/account.facade.ts
@@ -28,7 +28,13 @@ import {
   getDataRequestError,
   getDataRequestLoading,
 } from 'ish-core/store/customer/data-requests';
-import { getOrders, getOrdersLoading, getSelectedOrder, loadOrders } from 'ish-core/store/customer/orders';
+import {
+  getOrders,
+  getOrdersError,
+  getOrdersLoading,
+  getSelectedOrder,
+  loadOrders,
+} from 'ish-core/store/customer/orders';
 import {
   cancelRegistration,
   getSsoRegistrationCancelled,
@@ -171,6 +177,7 @@ export class AccountFacade {
 
   selectedOrder$ = this.store.pipe(select(getSelectedOrder));
   ordersLoading$ = this.store.pipe(select(getOrdersLoading));
+  ordersError$ = this.store.pipe(select(getOrdersError));
 
   // PAYMENT
 

diff --git a/src/app/pages/account-order-history/account-order-history-page.component.html b/src/app/pages/account-order-history/account-order-history-page.component.html
@@ -1,4 +1,5 @@
 <h1>{{ 'account.order_history.heading' | translate }}</h1>
+<ish-error-message [error]="ordersError$ | async" />
 <p class="section">{{ 'account.order.subtitle' | translate }}</p>
 
 <ish-order-list

diff --git a/src/app/pages/account-order-history/account-order-history-page.component.spec.ts b/src/app/pages/account-order-history/account-order-history-page.component.spec.ts
@@ -5,6 +5,7 @@ import { instance, mock } from 'ts-mockito';
 
 import { ServerHtmlDirective } from 'ish-core/directives/server-html.directive';
 import { AccountFacade } from 'ish-core/facades/account.facade';
+import { ErrorMessageComponent } from 'ish-shared/components/common/error-message/error-message.component';
 import { OrderListComponent } from 'ish-shared/components/order/order-list/order-list.component';
 
 import { AccountOrderHistoryPageComponent } from './account-order-history-page.component';
@@ -18,6 +19,7 @@ describe('Account Order History Page Component', () => {
     await TestBed.configureTestingModule({
       declarations: [
         AccountOrderHistoryPageComponent,
+        MockComponent(ErrorMessageComponent),
         MockComponent(OrderListComponent),
         MockDirective(ServerHtmlDirective),
       ],

diff --git a/src/app/pages/account-order-history/account-order-history-page.component.ts b/src/app/pages/account-order-history/account-order-history-page.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import { AccountFacade } from 'ish-core/facades/account.facade';
+import { HttpError } from 'ish-core/models/http-error/http-error.model';
 import { Order } from 'ish-core/models/order/order.model';
 
 /**
@@ -15,11 +16,13 @@ import { Order } from 'ish-core/models/order/order.model';
 export class AccountOrderHistoryPageComponent implements OnInit {
   orders$: Observable<Order[]>;
   ordersLoading$: Observable<boolean>;
+  ordersError$: Observable<HttpError>;
 
-  constructor(private accountfacade: AccountFacade) {}
+  constructor(private accountFacade: AccountFacade) {}
 
   ngOnInit(): void {
-    this.orders$ = this.accountfacade.orders$({ limit: 30, include: ['commonShipToAddress'] });
-    this.ordersLoading$ = this.accountfacade.ordersLoading$;
+    this.orders$ = this.accountFacade.orders$({ limit: 30, include: ['commonShipToAddress'] });
+    this.ordersLoading$ = this.accountFacade.ordersLoading$;
+    this.ordersError$ = this.accountFacade.ordersError$;
   }
 }