From a4ed681edaebfe0cdd96d08f63cb117e80128702 Mon Sep 17 00:00:00 2001 From: Florent Letendre Date: Fri, 14 Jul 2023 13:06:37 -0400 Subject: [PATCH 1/9] add error handling on paymentTypes --- .../checkout-payment-type.component.ts | 39 ++++++++++++++++--- .../facade/checkout-payment-type.service.ts | 14 +++++-- .../core/src/util/occ-http-error-constants.ts | 1 + 3 files changed, 45 insertions(+), 9 deletions(-) diff --git a/feature-libs/checkout/b2b/components/checkout-payment-type/checkout-payment-type.component.ts b/feature-libs/checkout/b2b/components/checkout-payment-type/checkout-payment-type.component.ts index 859cf31e525..5c3e99788f7 100644 --- a/feature-libs/checkout/b2b/components/checkout-payment-type/checkout-payment-type.component.ts +++ b/feature-libs/checkout/b2b/components/checkout-payment-type/checkout-payment-type.component.ts @@ -18,9 +18,22 @@ import { } from '@spartacus/checkout/b2b/root'; import { CheckoutStepService } from '@spartacus/checkout/base/components'; import { CheckoutStepType } from '@spartacus/checkout/base/root'; -import { getLastValueSync, isNotUndefined } from '@spartacus/core'; -import { BehaviorSubject, combineLatest, Observable } from 'rxjs'; -import { distinctUntilChanged, filter, map, tap } from 'rxjs/operators'; +import { + GlobalMessageService, + GlobalMessageType, + HttpErrorModel, + OccHttpErrorType, + getLastValueSync, + isNotUndefined, +} from '@spartacus/core'; +import { BehaviorSubject, Observable, combineLatest, throwError } from 'rxjs'; +import { + catchError, + distinctUntilChanged, + filter, + map, + tap, +} from 'rxjs/operators'; @Component({ selector: 'cx-payment-type', @@ -45,8 +58,21 @@ export class CheckoutPaymentTypeComponent { distinctUntilChanged() ); - paymentTypes$: Observable = - this.checkoutPaymentTypeFacade.getPaymentTypes(); + paymentTypes$: Observable = this.checkoutPaymentTypeFacade + .getPaymentTypes() + .pipe( + catchError((error: HttpErrorModel) => { + if ( + error.details?.[0]?.type === OccHttpErrorType.CLASS_MISMATCH_ERROR + ) { + this.globalMessageService.add( + error.details?.[0]?.message ?? '', + GlobalMessageType.MSG_TYPE_ERROR + ); + } + return throwError(error); + }) + ); typeSelected$: Observable = combineLatest([ this.checkoutPaymentTypeFacade.getSelectedPaymentTypeState().pipe( @@ -108,7 +134,8 @@ export class CheckoutPaymentTypeComponent { constructor( protected checkoutPaymentTypeFacade: CheckoutPaymentTypeFacade, protected checkoutStepService: CheckoutStepService, - protected activatedRoute: ActivatedRoute + protected activatedRoute: ActivatedRoute, + protected globalMessageService: GlobalMessageService ) {} changeType(code: string): void { diff --git a/feature-libs/checkout/b2b/core/facade/checkout-payment-type.service.ts b/feature-libs/checkout/b2b/core/facade/checkout-payment-type.service.ts index a78be7f3333..5eb31eaff2b 100644 --- a/feature-libs/checkout/b2b/core/facade/checkout-payment-type.service.ts +++ b/feature-libs/checkout/b2b/core/facade/checkout-payment-type.service.ts @@ -19,6 +19,7 @@ import { CommandService, CommandStrategy, EventService, + HttpErrorModel, OCC_USER_ID_ANONYMOUS, Query, QueryNotifier, @@ -26,8 +27,8 @@ import { QueryState, UserIdService, } from '@spartacus/core'; -import { combineLatest, Observable } from 'rxjs'; -import { filter, map, switchMap, take, tap } from 'rxjs/operators'; +import { Observable, combineLatest, of, throwError } from 'rxjs'; +import { concatMap, filter, map, switchMap, take, tap } from 'rxjs/operators'; import { CheckoutPaymentTypeConnector } from '../connectors/checkout-payment-type/checkout-payment-type.connector'; @Injectable() @@ -119,7 +120,14 @@ export class CheckoutPaymentTypeService implements CheckoutPaymentTypeFacade { } getPaymentTypes(): Observable { - return this.getPaymentTypesState().pipe(map((state) => state.data ?? [])); + return this.getPaymentTypesState().pipe( + concatMap((queryState) => + (queryState?.error as HttpErrorModel) + ? throwError(queryState.error as HttpErrorModel) + : of(queryState) + ), + map((state) => state.data ?? []) + ); } setPaymentType( diff --git a/projects/core/src/util/occ-http-error-constants.ts b/projects/core/src/util/occ-http-error-constants.ts index b491c68ad07..bd8d4efc6c8 100644 --- a/projects/core/src/util/occ-http-error-constants.ts +++ b/projects/core/src/util/occ-http-error-constants.ts @@ -8,6 +8,7 @@ export declare const enum OccHttpErrorType { NOT_FOUND_ERROR = 'NotFoundError', + CLASS_MISMATCH_ERROR = 'ClassMismatchError', } export declare const enum OccHttpErrorReason { From fc38ae3b18a973edb3f2e47117ef3055bcba721e Mon Sep 17 00:00:00 2001 From: Florent Letendre Date: Fri, 14 Jul 2023 13:43:12 -0400 Subject: [PATCH 2/9] keep same paymentType output --- .../checkout-payment-type.component.ts | 4 ++-- .../b2b/core/facade/checkout-payment-type.service.ts | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/feature-libs/checkout/b2b/components/checkout-payment-type/checkout-payment-type.component.ts b/feature-libs/checkout/b2b/components/checkout-payment-type/checkout-payment-type.component.ts index 5c3e99788f7..bac25fa0cc5 100644 --- a/feature-libs/checkout/b2b/components/checkout-payment-type/checkout-payment-type.component.ts +++ b/feature-libs/checkout/b2b/components/checkout-payment-type/checkout-payment-type.component.ts @@ -26,7 +26,7 @@ import { getLastValueSync, isNotUndefined, } from '@spartacus/core'; -import { BehaviorSubject, Observable, combineLatest, throwError } from 'rxjs'; +import { BehaviorSubject, Observable, combineLatest, of } from 'rxjs'; import { catchError, distinctUntilChanged, @@ -70,7 +70,7 @@ export class CheckoutPaymentTypeComponent { GlobalMessageType.MSG_TYPE_ERROR ); } - return throwError(error); + return of([]); }) ); diff --git a/feature-libs/checkout/b2b/core/facade/checkout-payment-type.service.ts b/feature-libs/checkout/b2b/core/facade/checkout-payment-type.service.ts index 5eb31eaff2b..5cb0805efb0 100644 --- a/feature-libs/checkout/b2b/core/facade/checkout-payment-type.service.ts +++ b/feature-libs/checkout/b2b/core/facade/checkout-payment-type.service.ts @@ -121,10 +121,10 @@ export class CheckoutPaymentTypeService implements CheckoutPaymentTypeFacade { getPaymentTypes(): Observable { return this.getPaymentTypesState().pipe( - concatMap((queryState) => - (queryState?.error as HttpErrorModel) - ? throwError(queryState.error as HttpErrorModel) - : of(queryState) + concatMap((state) => + (state?.error as HttpErrorModel) + ? throwError(state.error as HttpErrorModel) + : of(state) ), map((state) => state.data ?? []) ); From a4bdc7aa737db5de7e71d167bed725277e1596c2 Mon Sep 17 00:00:00 2001 From: Florent Letendre Date: Fri, 14 Jul 2023 14:05:41 -0400 Subject: [PATCH 3/9] change global message with more Authorization context --- .../checkout-payment-type/checkout-payment-type.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/feature-libs/checkout/b2b/components/checkout-payment-type/checkout-payment-type.component.ts b/feature-libs/checkout/b2b/components/checkout-payment-type/checkout-payment-type.component.ts index bac25fa0cc5..5da08bb350f 100644 --- a/feature-libs/checkout/b2b/components/checkout-payment-type/checkout-payment-type.component.ts +++ b/feature-libs/checkout/b2b/components/checkout-payment-type/checkout-payment-type.component.ts @@ -66,7 +66,7 @@ export class CheckoutPaymentTypeComponent { error.details?.[0]?.type === OccHttpErrorType.CLASS_MISMATCH_ERROR ) { this.globalMessageService.add( - error.details?.[0]?.message ?? '', + { key: 'httpHandlers.forbidden' }, GlobalMessageType.MSG_TYPE_ERROR ); } From 177edf3444723de87e92c5696663b1700a3ec1b7 Mon Sep 17 00:00:00 2001 From: Florent Letendre Date: Mon, 17 Jul 2023 16:41:32 -0400 Subject: [PATCH 4/9] use an error flag to control ui --- .../checkout-payment-type.component.html | 134 +++++++++--------- .../checkout-payment-type.component.ts | 3 + 2 files changed, 72 insertions(+), 65 deletions(-) diff --git a/feature-libs/checkout/b2b/components/checkout-payment-type/checkout-payment-type.component.html b/feature-libs/checkout/b2b/components/checkout-payment-type/checkout-payment-type.component.html index baf15c7bd01..df65450343c 100644 --- a/feature-libs/checkout/b2b/components/checkout-payment-type/checkout-payment-type.component.html +++ b/feature-libs/checkout/b2b/components/checkout-payment-type/checkout-payment-type.component.html @@ -3,79 +3,83 @@

- -
-
-
- -
-
- -
-
-
-
-
- +
+
+ +
-
- + +
+
+ +
+
+ +
-
+ -