Merge branch 'master' into FYLE-86cxkwzq3

Author: arjunaj5

src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, EventEmitter, NgZone, ViewChild } from '@angular/core';
 import { Platform, MenuController, NavController } from '@ionic/angular';
 import { from, concat, Observable, noop, forkJoin } from 'rxjs';
-import { switchMap, shareReplay, filter, take } from 'rxjs/operators';
+import { switchMap, shareReplay, filter, take, map } from 'rxjs/operators';
 import { Router, NavigationEnd, NavigationStart } from '@angular/router';
 import { AuthService } from 'src/app/core/services/auth.service';
 import { UserEventService } from 'src/app/core/services/user-event.service';
@@ -24,6 +24,7 @@ import { BackButtonActionPriority } from './core/models/back-button-action-prior
 import { BackButtonService } from './core/services/back-button.service';
 import { TextZoom } from '@capacitor/text-zoom';
 import { GmapsService } from './core/services/gmaps.service';
+import { SpenderOnboardingService } from './core/services/spender-onboarding.service';
 
 @Component({
   selector: 'app-root',
@@ -68,7 +69,8 @@ export class AppComponent implements OnInit {
     private loginInfoService: LoginInfoService,
     private navController: NavController,
     private backButtonService: BackButtonService,
-    private gmapsService: GmapsService
+    private gmapsService: GmapsService,
+    private spenderOnboardingService: SpenderOnboardingService
   ) {
     this.initializeApp();
     this.registerBackButtonAction();
@@ -145,6 +147,22 @@ export class AppComponent implements OnInit {
     );
   }
 
+  setSidenavPostOnboarding(): void {
+    this.spenderOnboardingService
+      .setOnboardingStatusAsComplete()
+      .pipe(
+        switchMap(() => this.isConnected$.pipe(take(1))),
+        map((isOnline) => {
+          if (isOnline) {
+            this.sidemenuRef.showSideMenuOnline();
+          } else {
+            this.sidemenuRef.showSideMenuOffline();
+          }
+        })
+      )
+      .subscribe();
+  }
+
   ngOnInit(): void {
     this.setupNetworkWatcher();
 
@@ -192,6 +210,8 @@ export class AppComponent implements OnInit {
       }, 500);
     });
 
+    this.setSidenavPostOnboarding();
+
     this.userEventService.onLogout(() => {
       this.trackingService.onSignOut();
       this.freshChatService.destroy();

src/app/auth/new-password/new-password.page.html

@@ -13,7 +13,7 @@
             <div class="new-password__input-container">
               <div
                 class="new-password__text new-password__text-block"
-                [ngClass]="{'new-password__text__invalid': fg.controls.password.touched && !fg.controls.password.valid}"
+                [ngClass]="{'new-password__text__password-focus': focusOnPassword && !(fg.controls.password.touched && !fg.controls.password.valid), 'new-password__text__invalid': fg.controls.password.touched && !fg.controls.password.valid}"
               >
                 <div class="new-password__text-label">New password</div>
                 <div class="new-password__password-container">
@@ -55,7 +55,7 @@
             <div class="new-password__input-container">
               <div
                 class="new-password__text new-password__text-block"
-                [ngClass]="{'new-password__text__invalid': fg.controls.confirmPassword.touched && !fg.controls.confirmPassword.valid}"
+                [ngClass]="{'new-password__text__password-focus': focusOnConfirmPassword && !(fg.controls.confirmPassword.touched && !fg.controls.confirmPassword.valid), 'new-password__text__invalid': fg.controls.confirmPassword.touched && !fg.controls.confirmPassword.valid}"
               >
                 <div class="new-password__text-label">Confirm new password</div>
                 <div class="new-password__password-container">
@@ -65,6 +65,8 @@
                     [type]="hideConfirmPassword ? 'password' : 'text'"
                     class="new-password__text-input smartlook-show"
                     formControlName="confirmPassword"
+                    (focus)="focusOnConfirmPassword = true"
+                    (blur)="focusOnConfirmPassword = false"
                   />
                   <div
                     class="new-password__password-icon-container"

src/app/auth/new-password/new-password.page.scss

@@ -29,6 +29,10 @@
     &__invalid {
       border-bottom: 1px solid $red;
     }
+
+    &__password-focus {
+      border-bottom: 1px solid $black;
+    }
   }
 
   &__mandatory {

src/app/auth/new-password/new-password.page.ts

@@ -41,6 +41,10 @@ export class NewPasswordPage implements OnInit {
 
   isLoading = false;
 
+  focusOnPassword = false;
+
+  focusOnConfirmPassword = false;
+
   constructor(
     private fb: FormBuilder,
     private activatedRoute: ActivatedRoute,
@@ -123,6 +127,7 @@ export class NewPasswordPage implements OnInit {
   }
 
   setPasswordTooltip(value: boolean): void {
+    this.focusOnPassword = value;
     this.showPasswordTooltip = value;
   }
 

src/app/auth/sign-in/sign-in.page.html

@@ -109,7 +109,7 @@
           </div>
           <div
             class="sign-in__enter-password__text sign-in__enter-password__text-block"
-            [ngClass]="{'sign-in__enter-password__text__invalid': fg.controls.password.touched && !fg.controls.password.valid}"
+            [ngClass]="{'sign-in__enter-password__text__password-focus': focusOnPassword && !(fg.controls.password.touched && !fg.controls.password.valid),'sign-in__enter-password__text__invalid': fg.controls.password.touched && !fg.controls.password.valid}"
           >
             <div class="sign-in__enter-password__input-container__label">Password</div>
             <div class="sign-in__enter-password__password-container">
@@ -119,6 +119,8 @@
                 [type]="hidePassword ? 'password': 'text'"
                 class="sign-in__enter-password__text-input smartlook-show"
                 formControlName="password"
+                (focus)="focusOnPassword = true"
+                (blur)="focusOnPassword = false"
               />
               <div
                 class="sign-in__enter-password__password-icon-container"

src/app/auth/sign-in/sign-in.page.scss

@@ -94,6 +94,9 @@
         width: 100%;
         padding: 6px 0;
         border-bottom: 1px solid $grey-lighter;
+        -webkit-border-radius: 0px;
+        -webkit-appearance: none;
+        border-radius: 0;
       }
 
       &__input:focus {
@@ -179,6 +182,10 @@
       &__invalid {
         border-bottom: 1px solid $red;
       }
+
+      &__password-focus {
+        border-bottom: 1px solid $black;
+      }
     }
 
     &__password-container {

src/app/auth/sign-in/sign-in.page.ts

@@ -45,6 +45,8 @@ export class SignInPage implements OnInit {
 
   hardwareBackButtonAction: Subscription;
 
+  focusOnPassword = false;
+
   constructor(
     private formBuilder: FormBuilder,
     private routerAuthService: RouterAuthService,

src/app/auth/switch-org/switch-org.page.spec.ts

@@ -44,6 +44,11 @@ import { DeepLinkService } from 'src/app/core/services/deep-link.service';
 import { platformExpenseData } from 'src/app/core/mock-data/platform/v1/expense.data';
 import { transformedExpenseData } from 'src/app/core/mock-data/transformed-expense.data';
 import { LaunchDarklyService } from 'src/app/core/services/launch-darkly.service';
+import { OrgSettingsService } from 'src/app/core/services/org-settings.service';
+import { orgSettingsCardsDisabled, orgSettingsData } from 'src/app/core/test-data/org-settings.service.spec.data';
+import { SpenderOnboardingService } from 'src/app/core/services/spender-onboarding.service';
+import { onboardingStatusData } from 'src/app/core/mock-data/onboarding-status.data';
+import { OnboardingState } from 'src/app/core/models/onboarding-state.enum';
 
 const roles = ['OWNER', 'USER', 'FYLER'];
 const email = '[email protected]';
@@ -73,6 +78,8 @@ describe('SwitchOrgPage', () => {
   let transactionService: jasmine.SpyObj<TransactionService>;
   let expensesService: jasmine.SpyObj<ExpensesService>;
   let deepLinkService: jasmine.SpyObj<DeepLinkService>;
+  let orgSettingsService: jasmine.SpyObj<OrgSettingsService>;
+  let spenderOnboardingService: jasmine.SpyObj<SpenderOnboardingService>;
 
   beforeEach(waitForAsync(() => {
     const platformSpy = jasmine.createSpyObj('Platform', ['is']);
@@ -110,6 +117,10 @@ describe('SwitchOrgPage', () => {
     const expensesServiceSpy = jasmine.createSpyObj('ExpensesService', ['getExpenseById']);
     const deepLinkServiceSpy = jasmine.createSpyObj('DeepLinkService', ['getExpenseRoute']);
     const ldSpy = jasmine.createSpyObj('LaunchDarklyService', ['initializeUser']);
+    const orgSettingsServiceSpy = jasmine.createSpyObj('OrgSettingsService', ['get']);
+    const spenderOnboardingServiceSpy = jasmine.createSpyObj('SpenderOnboardingService', [
+      'checkForRedirectionToOnboarding',
+    ]);
 
     TestBed.configureTestingModule({
       declarations: [SwitchOrgPage, ActiveOrgCardComponent, OrgCardComponent, FyZeroStateComponent],
@@ -150,6 +161,14 @@ describe('SwitchOrgPage', () => {
           provide: LoaderService,
           useValue: loaderServiceSpy,
         },
+        {
+          provide: OrgSettingsService,
+          useValue: orgSettingsServiceSpy,
+        },
+        {
+          provide: SpenderOnboardingService,
+          useValue: spenderOnboardingServiceSpy,
+        },
         {
           provide: UserService,
           useValue: userServiceSpy,
@@ -256,11 +275,15 @@ describe('SwitchOrgPage', () => {
     deepLinkService = TestBed.inject(DeepLinkService) as jasmine.SpyObj<DeepLinkService>;
     transactionService = TestBed.inject(TransactionService) as jasmine.SpyObj<TransactionService>;
     expensesService = TestBed.inject(ExpensesService) as jasmine.SpyObj<ExpensesService>;
+    spenderOnboardingService = TestBed.inject(SpenderOnboardingService) as jasmine.SpyObj<SpenderOnboardingService>;
+    orgSettingsService = TestBed.inject(OrgSettingsService) as jasmine.SpyObj<OrgSettingsService>;
 
     component.searchRef = fixture.debugElement.query(By.css('#search'));
     component.searchOrgsInput = fixture.debugElement.query(By.css('.smartlook-show'));
     component.contentRef = fixture.debugElement.query(By.css('.switch-org__content-container__content-block'));
     fixture.detectChanges();
+    spenderOnboardingService.checkForRedirectionToOnboarding.and.returnValue(of(false));
+    orgSettingsService.get.and.returnValue(of(orgSettingsData));
   }));
 
   it('should create', () => {
@@ -548,6 +571,14 @@ describe('SwitchOrgPage', () => {
     }));
   });
 
+  it('navigateToDashboard(): should navigate to spender onboarding when onboarding status is not complete', fakeAsync(() => {
+    spenderOnboardingService.checkForRedirectionToOnboarding.and.returnValue(of(true));
+    orgSettingsService.get.and.returnValue(of(orgSettingsData));
+    component.navigateToDashboard();
+    tick();
+    expect(router.navigate).toHaveBeenCalledOnceWith(['/', 'enterprise', 'spender_onboarding']);
+  }));
+
   describe('navigateToSetupPage():', () => {
     it('should navigate to setup page if org the roles has OWNER', () => {
       component.navigateToSetupPage(['OWNER']);
@@ -572,7 +603,12 @@ describe('SwitchOrgPage', () => {
       .pipe(
         finalize(() => {
           expect(loaderService.hideLoader).toHaveBeenCalledTimes(1);
-          expect(router.navigate).toHaveBeenCalledOnceWith(['/', 'enterprise', 'my_dashboard']);
+          expect(router.navigate).toHaveBeenCalledOnceWith([
+            '/',
+            'enterprise',
+            'my_dashboard',
+            { openSMSOptInDialog: undefined },
+          ]);
         })
       )
       .subscribe((res) => {
@@ -642,16 +678,38 @@ describe('SwitchOrgPage', () => {
   });
 
   describe('navigateBasedOnUserStatus(): ', () => {
-    it('should navigate to dashboard if status is active', (done) => {
+    it('should navigate to dashboard if status is active', fakeAsync(() => {
       const config = {
         isPendingDetails: false,
         roles,
         eou: apiEouRes,
       };
+      orgSettingsService.get.and.returnValue(of(orgSettingsData));
+      spenderOnboardingService.checkForRedirectionToOnboarding.and.returnValue(of(false));
+      tick();
+      component.navigateBasedOnUserStatus(config).subscribe((res) => {
+        expect(res).toBeNull();
+        expect(router.navigate).toHaveBeenCalledOnceWith([
+          '/',
+          'enterprise',
+          'my_dashboard',
+          { openSMSOptInDialog: undefined },
+        ]);
+        expect(spenderOnboardingService.checkForRedirectionToOnboarding).toHaveBeenCalledTimes(1);
+      });
+    }));
 
+    it('should navigate to spender onboarding if status not COMPLETE', (done) => {
+      const config = {
+        isPendingDetails: false,
+        roles,
+        eou: apiEouRes,
+      };
+      orgSettingsService.get.and.returnValue(of(orgSettingsData));
+      spenderOnboardingService.checkForRedirectionToOnboarding.and.returnValue(of(true));
       component.navigateBasedOnUserStatus(config).subscribe((res) => {
         expect(res).toBeNull();
-        expect(router.navigate).toHaveBeenCalledOnceWith(['/', 'enterprise', 'my_dashboard']);
+        expect(router.navigate).toHaveBeenCalledOnceWith(['/', 'enterprise', 'spender_onboarding']);
         done();
       });
     });
@@ -670,6 +728,26 @@ describe('SwitchOrgPage', () => {
       });
     });
 
+    it('should navigate to dashboard when no enrollment settings are enabled', (done) => {
+      const config = {
+        isPendingDetails: false,
+        roles,
+        eou: apiEouRes,
+      };
+      orgSettingsService.get.and.returnValue(of(orgSettingsCardsDisabled));
+      spenderOnboardingService.checkForRedirectionToOnboarding.and.returnValue(of(false));
+      component.navigateBasedOnUserStatus(config).subscribe((res) => {
+        expect(res).toBeNull();
+        expect(router.navigate).toHaveBeenCalledWith([
+          '/',
+          'enterprise',
+          'my_dashboard',
+          { openSMSOptInDialog: undefined },
+        ]);
+        done();
+      });
+    });
+
     it('should handle flow if details are pending', (done) => {
       spyOn(component, 'handlePendingDetails').and.returnValue(of(apiEouRes));
       const config = {