PER-9916-exiting-onboarding-on-refresh

src/app/core/guards/auth.guard.ts

@@ -1,45 +1,59 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
+import {
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot,
+  Router,
+} from '@angular/router';
 import { Observable } from 'rxjs';
 import { AccountService } from '@shared/services/account/account.service';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
-export class AuthGuard  {
-  constructor (private account: AccountService, private router: Router) {}
+export class AuthGuard {
+  constructor(
+    private account: AccountService,
+    private router: Router,
+  ) {}
 
   canActivate(
     next: ActivatedRouteSnapshot,
-    state: RouterStateSnapshot
-  ): Promise<boolean> {
-    return this.account.checkSession()
-    .then((isSessionValid: boolean) => {
-      if (isSessionValid && this.account.isLoggedIn()) {
-        return true;
-      } else {
-        if (isSessionValid !== this.account.isLoggedIn()) {
-          this.account.clear();
+    state: RouterStateSnapshot,
+  ): Promise<any> {
+    return this.account
+      .checkSession()
+      .then((isSessionValid: boolean) => {
+        if (isSessionValid && this.account.isLoggedIn()) {
+          return true;
+        } else {
+          if (isSessionValid !== this.account.isLoggedIn()) {
+            this.account.clear();
+          }
+          this.router.navigate(['/app', 'auth', 'login'], {
+            queryParams: next.queryParams,
+          });
+          return false;
         }
-        this.router.navigate(['/app', 'auth', 'login'], { queryParams: next.queryParams });
+      })
+      .catch(() => {
+        this.account.clear();
+        this.router.navigate(['/app', 'auth', 'login'], {
+          queryParams: next.queryParams,
+        });
         return false;
-      }
-    })
-    .catch(() => {
-      this.account.clear();
-      this.router.navigate(['/app', 'auth', 'login'], { queryParams: next.queryParams });
-      return false;
-    });
+      });
   }
 
   canActivateChild(
     next: ActivatedRouteSnapshot,
-    state: RouterStateSnapshot
+    state: RouterStateSnapshot,
   ): Observable<boolean> | Promise<boolean> | boolean {
     if (this.account.isLoggedIn()) {
       return true;
     } else {
-      this.router.navigate(['/app', 'auth', 'login'], { queryParams: next.queryParams });
+      this.router.navigate(['/app', 'onboarding'], {
+        queryParams: next.queryParams,
+      });
       return false;
     }
   }

src/app/onboarding/components/create-new-archive/create-new-archive.component.ts

@@ -101,6 +101,13 @@
     if (!this.isGlam) {
       this.screen = 'create';
     }
+
+    const screen = sessionStorage.getItem('onboardingScreen');
+    if (screen) {
+      this.screen = screen as NewArchiveScreen;
+    } else {
+      sessionStorage.setItem('onboardingScreen', this.screen);
+    }
   }
 
   ngOnInit(): void {
@@ -119,6 +126,26 @@
       entity: 'account',
       action: 'start_onboarding',
     });
+
+    const storageGoals = sessionStorage.getItem('goals');
+    if (storageGoals) {
+      this.selectedGoals = JSON.parse(storageGoals);
+    }
+
+    const storageReasons = sessionStorage.getItem('reasons');
+    if (storageReasons) {
+      this.selectedReasons = JSON.parse(storageReasons);
+    }
+
+    const storageName = sessionStorage.getItem('archiveName');
+    if (storageName) {
+      this.name = storageName;
+    }
+
+    const storageType = sessionStorage.getItem('archiveType');
+    if (storageType) {
+      this.archiveType = storageType;
+    }
   }
 
   public onBackPress(): void {
@@ -132,6 +159,7 @@
       this.screen = 'goals';
       this.progress.emit(1);
     }
+    sessionStorage.setItem('onboardingScreen', this.screen);
   }
 
   public setScreen(screen: NewArchiveScreen): void {
@@ -147,6 +175,7 @@
       action: action,
     });
     this.screen = screen;
+    sessionStorage.setItem('onboardingScreen', screen);
     if (screen === 'reasons') {
       this.progress.emit(2);
       this.chartPathClicked.emit();
@@ -250,10 +279,12 @@
     if (this.screen === 'goals') {
       this.screen = 'reasons';
       this.progress.emit(2);
+      sessionStorage.setItem('onboardingScreen', this.screen);
       this.selectedGoals = [];
     } else if (this.screen === 'reasons') {
       this.selectedReasons = [];
       this.onSubmit();
+      sessionStorage.removeItem('onboardingScreen');
     }
   }
 
@@ -264,8 +295,9 @@
   private setName(archiveTypeTag: OnboardingTypes): void {
     switch (archiveTypeTag) {
       case OnboardingTypes.unsure:
-        const name = this.accountService.getAccount().fullName;
+        const name = this.accountService.getAccount()?.fullName;
         this.name = name;
+        sessionStorage.setItem('archiveName', name);
         break;
       default:
         this.name = '';
@@ -284,8 +316,10 @@
   public handleCreationScreenEvents(event: Record<string, string>): void {
     this.archiveTypeTag = event.tag as OnboardingTypes;
     this.archiveType = event.type;
+    sessionStorage.setItem('archiveType', this.archiveType);
+    sessionStorage.setItem('archiveTypeTag', this.archiveTypeTag);
     this.headerText = event.headerText;
-    this.screen = event.screen as NewArchiveScreen;
+    this.setScreen(event.screen as NewArchiveScreen);
   }
 
   public onValueChange(value: {
@@ -300,6 +334,7 @@
 
   public navigateToGoals(event: string) {
     this.name = event;
+    sessionStorage.setItem('archiveName', this.name);
     this.setScreen('goals');
   }
 
@@ -319,4 +354,12 @@
     this.selectedReasons = event.reasons;
     this.setScreen(event.screen as NewArchiveScreen);
   }
+
+  private clearSessionStorage(): void {
+    sessionStorage.removeItem('goals');
+    sessionStorage.removeItem('reasons');
+    sessionStorage.removeItem('archiveName');
+    sessionStorage.removeItem('archiveType');
+    sessionStorage.removeItem('archiveTypeTag');
+  }
 }

src/app/onboarding/components/glam/create-archive-for-me-screen/create-archive-for-me-screen.component.ts

@@ -32,6 +32,8 @@ export class CreateArchiveForMeScreenComponent {
     this.onboardingService.registerArchive(
       new ArchiveVO({ fullName: this.name, accessRole: 'access.role.owner' }),
     );
+    sessionStorage.setItem('archiveName', this.name);
+    sessionStorage.setItem('archiveType', this.TYPE);
     this.continueOutput.emit({
       screen: 'goals',
       type: this.TYPE,

src/app/onboarding/components/glam/finalize-archive-creation-screen/finalize-archive-creation-screen.component.spec.ts

@@ -28,9 +28,9 @@ describe('FinalizeArchiveCreationScreenComponent', () => {
   });
 
   it('should display the archive name correctly', async () => {
-    const name = 'Test Archive';
+    const name = 'John Doe';
     onboardingService.registerArchive(new ArchiveVO({ fullName: name }));
-    const { find } = await shallow.render();
+    const { fixture, find } = await shallow.render();
     const archiveNameElement = find('.archive-info p');
 
     expect(archiveNameElement.nativeElement.textContent).toContain(

src/app/onboarding/components/glam/glam-goals-screen/glam-goals-screen.component.spec.ts

@@ -9,6 +9,15 @@ describe('GlamGoalsScreenComponent', () => {
 
   beforeEach(async () => {
     shallow = new Shallow(GlamGoalsScreenComponent, OnboardingModule);
+
+    spyOn(sessionStorage, 'getItem').and.callFake((key) => {
+      const store = {
+        goals: JSON.stringify(['Mock Goal']),
+      };
+      return store[key] || null;
+    });
+
+    spyOn(sessionStorage, 'setItem').and.callFake((key, value) => {});
   });
 
   it('should create', async () => {
@@ -23,6 +32,25 @@ describe('GlamGoalsScreenComponent', () => {
     expect(instance.goals).toEqual(goals);
   });
 
+  it('should initialize selectedGoals from sessionStorage', async () => {
+    const { instance } = await shallow.render();
+
+    expect(sessionStorage.getItem).toHaveBeenCalledWith('goals');
+    expect(instance.selectedGoals).toEqual(['Mock Goal']);
+  });
+
+  it('should update sessionStorage when addGoal is called', async () => {
+    const { instance } = await shallow.render();
+    const goal = 'Test Goal';
+
+    instance.addGoal(goal);
+
+    expect(sessionStorage.setItem).toHaveBeenCalledWith(
+      'goals',
+      JSON.stringify(['Mock Goal', 'Test Goal']),
+    );
+  });
+
   it('should add goal to selectedGoals when addGoal is called', async () => {
     const { instance } = await shallow.render();
     const goal = 'Test Goal';
@@ -46,7 +74,7 @@ describe('GlamGoalsScreenComponent', () => {
 
     expect(outputs.goalsOutput.emit).toHaveBeenCalledWith({
       screen: 'name-archive',
-      goals: [],
+      goals: ['Mock Goal'],
     });
   });
 
@@ -58,7 +86,7 @@ describe('GlamGoalsScreenComponent', () => {
 
     expect(outputs.goalsOutput.emit).toHaveBeenCalledWith({
       screen: 'reasons',
-      goals: [goal],
+      goals: ['Mock Goal', goal],
     });
   });
 });

src/app/onboarding/components/glam/glam-goals-screen/glam-goals-screen.component.ts

@@ -1,5 +1,5 @@
 /* @format */
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { goals } from '../../../shared/onboarding-screen';
 
 interface OutputModel {
@@ -12,7 +12,7 @@ interface OutputModel {
   templateUrl: './glam-goals-screen.component.html',
   styleUrl: './glam-goals-screen.component.scss',
 })
-export class GlamGoalsScreenComponent {
+export class GlamGoalsScreenComponent implements OnInit {
   public goals = [];
   @Input() selectedGoals: string[] = [];
   @Output() goalsOutput = new EventEmitter<OutputModel>();
@@ -21,6 +21,13 @@ export class GlamGoalsScreenComponent {
     this.goals = goals;
   }
 
+  ngOnInit(): void {
+    const storageGoals = sessionStorage.getItem('goals');
+    if (storageGoals) {
+      this.selectedGoals = JSON.parse(storageGoals);
+    }
+  }
+
   backToNameArchive() {
     this.goalsOutput.emit({
       screen: 'name-archive',
@@ -40,5 +47,6 @@ export class GlamGoalsScreenComponent {
     } else {
       this.selectedGoals.push(goal);
     }
+    sessionStorage.setItem('goals', JSON.stringify(this.selectedGoals));
   }
 }

src/app/onboarding/components/glam/glam-reasons-screen/glam-reasons-screen.component.spec.ts

@@ -9,6 +9,15 @@ describe('GlamReasonsScreenComponent', () => {
 
   beforeEach(async () => {
     shallow = new Shallow(GlamReasonsScreenComponent, OnboardingModule);
+
+    spyOn(sessionStorage, 'getItem').and.callFake((key) => {
+      const store = {
+        reasons: JSON.stringify(['Mock Reason']),
+      };
+      return store[key] || null;
+    });
+
+    spyOn(sessionStorage, 'setItem').and.callFake((key, value) => {});
   });
 
   it('should create', async () => {
@@ -23,6 +32,25 @@ describe('GlamReasonsScreenComponent', () => {
     expect(instance.reasons).toEqual(reasons);
   });
 
+  it('should initialize selectedReasons from sessionStorage', async () => {
+    const { instance } = await shallow.render();
+
+    expect(sessionStorage.getItem).toHaveBeenCalledWith('reasons');
+    expect(instance.selectedReasons).toEqual(['Mock Reason']);
+  });
+
+  it('should update sessionStorage when addReason is called', async () => {
+    const { instance } = await shallow.render();
+    const reason = 'Test Reason';
+
+    instance.addReason(reason);
+
+    expect(sessionStorage.setItem).toHaveBeenCalledWith(
+      'reasons',
+      JSON.stringify(['Mock Reason', 'Test Reason']),
+    );
+  });
+
   it('should add reason to selectedReasons when addReason is called', async () => {
     const { instance } = await shallow.render();
     const reason = 'Test Reason';
@@ -48,7 +76,7 @@ describe('GlamReasonsScreenComponent', () => {
 
     expect(outputs.reasonsEmit.emit).toHaveBeenCalledWith({
       screen: 'finalize',
-      reasons: [reason],
+      reasons: ['Mock Reason', reason],
     });
   });
 
@@ -60,7 +88,7 @@ describe('GlamReasonsScreenComponent', () => {
 
     expect(outputs.reasonsEmit.emit).toHaveBeenCalledWith({
       screen: 'goals',
-      reasons: [reason],
+      reasons: ['Mock Reason', reason],
     });
   });
 });