fix: Revert "feat: Remove error state from verify page (#3284)" (#3291)

src/app/auth/verify/verify.page.html

@@ -1,8 +1,21 @@
 <ion-content>
-  <div class="verify">
-    <div class="verify__verifying-loader">
-      <ion-icon src="../../../assets/svg/loader.svg" class="verify__verifying-loader__icon"></ion-icon>
+  <ion-grid class="verify--header-container">
+    <ion-row class="verify--header ion-align-items-center">
+      <ion-col class="verify--header-logo-container">
+        <img class="verify--header-logo" src="../../../assets/svg/fyle-logo-light.svg" alt="fyle-logo-light" />
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+  <div class="verify--form">
+    <div id="verify--header" class="verify--form-header">
+      <span *ngIf="currentPageState === PageStates.verifying"> Verifying Identity </span>
+      <span *ngIf="currentPageState === PageStates.error"> Verification Failed </span>
+    </div>
+    <div *ngIf="currentPageState === PageStates.verifying" class="verify--form-subheader">
+      Checking your credentials..
+    </div>
+    <div *ngIf="currentPageState === PageStates.error" class="verify--form-subheader">
+      Unable to verify your Fyle account. Please contact support by sending an email to [email protected]
     </div>
-    <div class="verify__verifying-loader__text">Accepting the invite...</div>
   </div>
 </ion-content>

src/app/auth/verify/verify.page.scss

@@ -1,37 +1,83 @@
-@import '../../../theme/colors';
-
-@mixin loader {
-  border-radius: 50%;
-  width: 14px;
-  height: 14px;
-  margin: 0 4px;
-  animation: spin 2s linear infinite;
-}
+$verify-header: #220033;
+$form-header: #000;
+$form-subheader: #4a4a4a;
+$password-icon: #b9beba;
+$secondary-cta-border: #e0e0e0;
 
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
+.verify {
+  &--header {
+    min-height: 180px;
   }
-  100% {
-    transform: rotate(360deg);
+
+  &--header-container {
+    min-height: 180px;
+    background-color: $verify-header;
   }
-}
 
-.verify {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  &__verifying-loader {
-    @include loader;
-    &__icon {
-      fill: $brand-primary;
+  &--header-logo-container {
+    text-align: center;
+  }
+
+  &--header-logo {
+    max-width: 100px;
+  }
+
+  &--form {
+    padding: 24px;
+  }
+
+  &--form-field {
+    width: 100%;
+  }
+
+  &--form-header {
+    font-size: 24px;
+    margin-top: 16px;
+    margin-bottom: 8px;
+    color: $form-header;
+    font-weight: 700;
+  }
+
+  &--form-subheader {
+    font-size: 16px;
+    color: $form-subheader;
+    margin-top: 24px;
+    margin-bottom: 24px;
+  }
+
+  &--primary-cta {
+    .mat-button-base {
+      width: 100%;
+      font-weight: 700;
+      min-height: 47px;
     }
-    &__text {
-      margin-top: 8px;
-      color: $black;
+  }
+
+  &--password-visibility-icon {
+    color: $password-icon;
+  }
+
+  &--secondary-cta {
+    .mat-button-base {
+      width: 100%;
+      font-weight: 700;
+      min-height: 47px;
+      letter-spacing: 1.6px;
+      border: 1px solid $secondary-cta-border;
+    }
+    margin-top: 24px;
+  }
+
+  &--redirect {
+    margin: 16px;
+    text-align: center;
+    font-size: 16px;
+    a {
+      text-decoration: none;
     }
   }
+
+  &--edit-email {
+    text-align: end;
+  }
 }

src/app/auth/verify/verify.page.spec.ts

@@ -78,6 +78,25 @@ describe('VerifyPage', () => {
       expect(trackingService.emailVerified).toHaveBeenCalledTimes(1);
       expect(trackingService.onSignin).toHaveBeenCalledOnceWith('[email protected]');
       expect(router.navigate).toHaveBeenCalledOnceWith(['/', 'auth', 'switch_org', { invite_link: true }]);
+      const verifyHeader = getElementBySelector(fixture, '#verify--header');
+      const verifySubheader = getElementBySelector(fixture, '.verify--form-subheader');
+      expect(getTextContent(verifyHeader)).toContain('Verifying Identity');
+      expect(getTextContent(verifySubheader)).toContain('Checking your credentials..');
+    });
+
+    it('should handle error when verification fails', () => {
+      const mockError = new Error('Verification failed');
+      routerAuthService.emailVerify.and.returnValue(throwError(() => mockError));
+      fixture.detectChanges();
+      spyOn(component, 'handleError');
+      component.ngOnInit();
+      expect(component.handleError).toHaveBeenCalledOnceWith(mockError);
+      const verifyHeader = getElementBySelector(fixture, '#verify--header');
+      const verifySubheader = getElementBySelector(fixture, '.verify--form-subheader');
+      expect(getTextContent(verifyHeader)).toContain('Verification Failed');
+      expect(getTextContent(verifySubheader)).toContain(
+        'Unable to verify your Fyle account. Please contact support by sending an email to [email protected]'
+      );
     });
   });
 
@@ -88,6 +107,7 @@ describe('VerifyPage', () => {
       };
       component.handleError(error);
       expect(router.navigate).toHaveBeenCalledOnceWith(['/', 'auth', 'disabled']);
+      expect(component.currentPageState).not.toEqual(VerifyPageState.error);
     });
 
     it('should navigate to auth/pending_verification if status code is 440', () => {
@@ -101,19 +121,15 @@ describe('VerifyPage', () => {
         'pending_verification',
         { hasTokenExpired: true, orgId: 'orNVthTo2Zyo' },
       ]);
+      expect(component.currentPageState).not.toEqual(VerifyPageState.error);
     });
 
     it('should change the page status if error code is something else', () => {
       const error = {
         status: 404,
       };
       component.handleError(error);
-      expect(router.navigate).toHaveBeenCalledOnceWith([
-        '/',
-        'auth',
-        'pending_verification',
-        { orgId: 'orNVthTo2Zyo' },
-      ]);
+      expect(component.currentPageState).toEqual(VerifyPageState.error);
     });
   });
 });

src/app/auth/verify/verify.page.ts

@@ -4,13 +4,16 @@ import { RouterAuthService } from 'src/app/core/services/router-auth.service';
 import { switchMap, tap } from 'rxjs/operators';
 import { AuthService } from 'src/app/core/services/auth.service';
 import { TrackingService } from '../../core/services/tracking.service';
+import { VerifyPageState } from './verify.enum';
 
 @Component({
   selector: 'app-verify',
   templateUrl: './verify.page.html',
   styleUrls: ['./verify.page.scss'],
 })
 export class VerifyPage implements OnInit {
+  currentPageState: VerifyPageState = VerifyPageState.verifying;
+
   constructor(
     private activatedRoute: ActivatedRoute,
     private routerAuthService: RouterAuthService,
@@ -19,6 +22,10 @@ export class VerifyPage implements OnInit {
     private trackingService: TrackingService
   ) {}
 
+  get PageStates(): typeof VerifyPageState {
+    return VerifyPageState;
+  }
+
   ngOnInit(): void {
     const verificationCode = this.activatedRoute.snapshot.params.verification_code as string;
     this.routerAuthService
@@ -32,18 +39,21 @@ export class VerifyPage implements OnInit {
       )
       .subscribe({
         next: () => this.router.navigate(['/', 'auth', 'switch_org', { invite_link: true }]),
-        error: (err: { status: number }) => this.handleError(err),
+        error: (err) => this.handleError(err),
       });
   }
 
-  handleError(err: { status: number }): void {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  handleError(err: any): void {
     const orgId = this.activatedRoute.snapshot.params.org_id as string;
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     if (err.status === 422) {
       this.router.navigate(['/', 'auth', 'disabled']);
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     } else if (err.status === 440) {
       this.router.navigate(['/', 'auth', 'pending_verification', { hasTokenExpired: true, orgId }]);
     } else {
-      this.router.navigate(['/', 'auth', 'pending_verification', { orgId }]);
+      this.currentPageState = VerifyPageState.error;
     }
   }
 }