fix: delay routing and only route after profile edit (#314)

Closes  #264

src/app/core/facades/account.facade.ts

@@ -71,32 +71,20 @@ export class AccountFacade {
     this.store.dispatch(createUser(body));
   }
 
-  updateUser(user: User, successMessage?: string, successRouterLink?: string) {
-    this.store.dispatch(updateUser({ user, successMessage, successRouterLink }));
+  updateUser(user: User, successMessage?: string) {
+    this.store.dispatch(updateUser({ user, successMessage }));
   }
 
   updateUserEmail(user: User) {
-    this.store.dispatch(
-      updateUser({
-        user,
-        successMessage: 'account.profile.update_email.message',
-        successRouterLink: '/account/profile',
-      })
-    );
+    this.store.dispatch(updateUser({ user, successMessage: 'account.profile.update_email.message' }));
   }
 
   updateUserPassword(data: { password: string; currentPassword: string }) {
     this.store.dispatch(updateUserPassword(data));
   }
 
   updateUserProfile(user: User) {
-    this.store.dispatch(
-      updateUser({
-        user,
-        successMessage: 'account.profile.update_profile.message',
-        successRouterLink: '/account/profile',
-      })
-    );
+    this.store.dispatch(updateUser({ user, successMessage: 'account.profile.update_profile.message' }));
   }
 
   // CUSTOMER
@@ -107,11 +95,7 @@ export class AccountFacade {
 
   updateCustomerProfile(customer: Customer, message?: string) {
     this.store.dispatch(
-      updateCustomer({
-        customer,
-        successMessage: message ? message : 'account.profile.update_profile.message',
-        successRouterLink: '/account/profile',
-      })
+      updateCustomer({ customer, successMessage: message ? message : 'account.profile.update_profile.message' })
     );
   }
 

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

@@ -29,10 +29,7 @@ export const createUser = createAction('[User] Create User', payload<CustomerReg
 
 export const createUserFail = createAction('[User API] Create User Failed', httpError());
 
-export const updateUser = createAction(
-  '[User] Update User',
-  payload<{ user: User; successMessage?: string; successRouterLink?: string }>()
-);
+export const updateUser = createAction('[User] Update User', payload<{ user: User; successMessage?: string }>());
 
 export const updateUserSuccess = createAction(
   '[User API] Update User Succeeded',
@@ -55,7 +52,7 @@ export const updateUserPasswordFail = createAction('[User API] Update User Passw
 
 export const updateCustomer = createAction(
   '[User] Update Customer',
-  payload<{ customer: Customer; successMessage?: string; successRouterLink?: string }>()
+  payload<{ customer: Customer; successMessage?: string }>()
 );
 
 export const updateCustomerSuccess = createAction(

src/app/core/store/customer/user/user.effects.spec.ts

@@ -99,13 +99,7 @@ describe('User Effects', () => {
       imports: [
         CoreStoreModule.forTesting(['router']),
         CustomerStoreModule.forTesting('user'),
-        RouterTestingModule.withRoutes([
-          { path: 'login', component: DummyComponent },
-          { path: 'home', component: DummyComponent },
-          { path: 'account', component: DummyComponent },
-          { path: 'account/profile', component: DummyComponent },
-          { path: '**', component: DummyComponent },
-        ]),
+        RouterTestingModule.withRoutes([{ path: '**', component: DummyComponent }]),
       ],
       providers: [
         UserEffects,
@@ -702,4 +696,42 @@ describe('User Effects', () => {
       expect(effects.requestPasswordReminder$).toBeObservable(expected$);
     });
   });
+
+  describe('redirectAfterUpdateOnProfileSettings$', () => {
+    describe('on profile edit', () => {
+      beforeEach(fakeAsync(() => {
+        router.navigateByUrl('/account/profile/edit');
+        tick(500);
+      }));
+
+      it.each([updateUserSuccess.type, updateUserPasswordSuccess.type, updateCustomerSuccess.type])(
+        'should navigate to profile page after %s',
+        fakeAsync((type: string) => {
+          actions$ = of({ type });
+          effects.redirectAfterUpdateOnProfileSettings$.subscribe();
+          tick(500);
+
+          expect(location.path()).toEqual('/account/profile');
+        })
+      );
+    });
+
+    describe('on different page', () => {
+      beforeEach(fakeAsync(() => {
+        router.navigateByUrl('/any');
+        tick(500);
+      }));
+
+      it.each([updateUserSuccess.type, updateUserPasswordSuccess.type, updateCustomerSuccess.type])(
+        'should not navigate to profile page after %s',
+        fakeAsync((type: string) => {
+          actions$ = of({ type });
+          effects.redirectAfterUpdateOnProfileSettings$.subscribe();
+          tick(500);
+
+          expect(location.path()).toEqual('/any');
+        })
+      );
+    });
+  });
 });

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

@@ -29,7 +29,7 @@ import { PersonalizationService } from 'ish-core/services/personalization/person
 import { UserService } from 'ish-core/services/user/user.service';
 import { generalError } from 'ish-core/store/core/error';
 import { displaySuccessMessage } from 'ish-core/store/core/messages';
-import { ofUrl, selectQueryParam } from 'ish-core/store/core/router';
+import { ofUrl, selectQueryParam, selectUrl } from 'ish-core/store/core/router';
 import { mapErrorToAction, mapToPayload, mapToPayloadProperty, whenTruthy } from 'ish-core/utils/operators';
 
 import {
@@ -186,14 +186,9 @@ export class UserEffects {
       ofType(updateUser),
       mapToPayload(),
       withLatestFrom(this.store$.pipe(select(getLoggedInCustomer))),
-      concatMap(([payload, customer]) =>
-        this.userService.updateUser({ user: payload.user, customer }).pipe(
-          tap(() => {
-            if (payload.successRouterLink) {
-              this.router.navigateByUrl(payload.successRouterLink);
-            }
-          }),
-          map(changedUser => updateUserSuccess({ user: changedUser, successMessage: payload.successMessage })),
+      concatMap(([{ user, successMessage }, customer]) =>
+        this.userService.updateUser({ user, customer }).pipe(
+          map(changedUser => updateUserSuccess({ user: changedUser, successMessage })),
           mapErrorToAction(updateUserFail)
         )
       )
@@ -208,7 +203,6 @@ export class UserEffects {
       withLatestFrom(this.store$.pipe(select(getLoggedInUser))),
       concatMap(([[payload, customer], user]) =>
         this.userService.updateUserPassword(customer, user, payload.password, payload.currentPassword).pipe(
-          tap(() => this.router.navigateByUrl('/account/profile')),
           mapTo(
             updateUserPasswordSuccess({
               successMessage: payload.successMessage || 'account.profile.update_password.message',
@@ -226,22 +220,28 @@ export class UserEffects {
       mapToPayload(),
       withLatestFrom(this.store$.pipe(select(getLoggedInCustomer))),
       filter(([, loggedInCustomer]) => !!loggedInCustomer && loggedInCustomer.isBusinessCustomer),
-      concatMap(([payload]) =>
-        this.userService.updateCustomer(payload.customer).pipe(
-          tap(() => {
-            if (payload.successRouterLink) {
-              this.router.navigateByUrl(payload.successRouterLink);
-            }
-          }),
-          map(changedCustomer =>
-            updateCustomerSuccess({ customer: changedCustomer, successMessage: payload.successMessage })
-          ),
+      concatMap(([{ customer, successMessage }]) =>
+        this.userService.updateCustomer(customer).pipe(
+          map(changedCustomer => updateCustomerSuccess({ customer: changedCustomer, successMessage })),
           mapErrorToAction(updateCustomerFail)
         )
       )
     )
   );
 
+  redirectAfterUpdateOnProfileSettings$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType(updateUserSuccess, updateCustomerSuccess, updateUserPasswordSuccess),
+        withLatestFrom(this.store$.pipe(select(selectUrl))),
+        filter(([, url]) => url.includes('/account/profile')),
+        tap(() => {
+          this.router.navigateByUrl('/account/profile');
+        })
+      ),
+    { dispatch: false }
+  );
+
   displayUpdateUserSuccessMessage$ = createEffect(() =>
     this.actions$.pipe(
       ofType(updateUserPasswordSuccess, updateUserSuccess, updateCustomerSuccess),