fix: disable add-to-cart button during page loading (#1364)

src/app/core/store/customer/user/user.reducer.ts

@@ -28,6 +28,7 @@ import {
   loadUserPaymentMethodsSuccess,
   loginUserFail,
   loginUserSuccess,
+  loginUserWithToken,
   logoutUser,
   logoutUserFail,
   logoutUserSuccess,
@@ -99,6 +100,7 @@ export const userReducer = createReducer(
     deleteUserPaymentInstrument,
     updateUserPasswordByPasswordReminder,
     requestPasswordReminder,
+    loginUserWithToken,
     logoutUser
   ),
   unsetLoadingOn(

src/app/shared/components/product/product-add-to-basket/product-add-to-basket.component.spec.ts

@@ -5,6 +5,7 @@ import { MockComponent } from 'ng-mocks';
 import { of } from 'rxjs';
 import { instance, mock, when } from 'ts-mockito';
 
+import { AccountFacade } from 'ish-core/facades/account.facade';
 import { CheckoutFacade } from 'ish-core/facades/checkout.facade';
 import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
 import { ProductView } from 'ish-core/models/product-view/product-view.model';
@@ -21,6 +22,9 @@ describe('Product Add To Basket Component', () => {
     const checkoutFacade = mock(CheckoutFacade);
     when(checkoutFacade.basketLoading$).thenReturn(of(false));
 
+    const accountFacade = mock(AccountFacade);
+    when(accountFacade.userLoading$).thenReturn(of(false));
+
     context = mock(ProductContextFacade);
     when(context.select('displayProperties', 'addToBasket')).thenReturn(of(true));
     when(context.select('product')).thenReturn(of({} as ProductView));
@@ -32,6 +36,7 @@ describe('Product Add To Basket Component', () => {
       imports: [TranslateModule.forRoot()],
       declarations: [MockComponent(FaIconComponent), ProductAddToBasketComponent],
       providers: [
+        { provide: AccountFacade, useFactory: () => instance(accountFacade) },
         { provide: CheckoutFacade, useFactory: () => instance(checkoutFacade) },
         { provide: ProductContextFacade, useFactory: () => instance(context) },
       ],

src/app/shared/components/product/product-add-to-basket/product-add-to-basket.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit } from '@a
 import { BehaviorSubject, Observable, Subject, combineLatest } from 'rxjs';
 import { map, startWith, takeUntil } from 'rxjs/operators';
 
+import { AccountFacade } from 'ish-core/facades/account.facade';
 import { CheckoutFacade } from 'ish-core/facades/checkout.facade';
 import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
 import { ProductHelper } from 'ish-core/models/product/product.model';
@@ -34,7 +35,11 @@ export class ProductAddToBasketComponent implements OnInit, OnDestroy {
   visible$: Observable<boolean>;
   translationKey$: Observable<string>;
 
-  constructor(private checkoutFacade: CheckoutFacade, private context: ProductContextFacade) {}
+  constructor(
+    private checkoutFacade: CheckoutFacade,
+    private accountFacade: AccountFacade,
+    private context: ProductContextFacade
+  ) {}
 
   buttonDisabled$: Observable<boolean>;
 
@@ -63,9 +68,16 @@ export class ProductAddToBasketComponent implements OnInit, OnDestroy {
     const hasProductError$ = this.context.select('hasProductError');
     const hasNoQuantity$ = this.context.select('quantity').pipe(map(quantity => quantity <= 0));
     const loading$ = this.displaySpinner$.pipe(startWith(false));
-    this.buttonDisabled$ = combineLatest([loading$, hasQuantityError$, hasProductError$, hasNoQuantity$]).pipe(
-      map(conditions => conditions.some(c => !!c))
-    );
+
+    // disable button when spinning, in case of an error (quick order) or during login or basket loading
+    this.buttonDisabled$ = combineLatest([
+      loading$,
+      hasQuantityError$,
+      hasProductError$,
+      hasNoQuantity$,
+      this.accountFacade.userLoading$,
+      this.basketLoading$,
+    ]).pipe(map(conditions => conditions.some(c => c)));
   }
 
   addToBasket() {