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

…" (#3291)" (#3299)

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

@@ -1,21 +1,8 @@
 <ion-content>
-  <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 class="verify">
+    <div class="verify__verifying-loader">
+      <ion-icon src="../../../assets/svg/loader.svg" class="verify__verifying-loader__icon"></ion-icon>
     </div>
+    <div class="verify__verifying-loader__text">Accepting the invite...</div>
   </div>
 </ion-content>

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

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

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

@@ -78,25 +78,6 @@ 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]'
-      );
     });
   });
 
@@ -107,7 +88,6 @@ 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', () => {
@@ -121,15 +101,19 @@ 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(component.currentPageState).toEqual(VerifyPageState.error);
+      expect(router.navigate).toHaveBeenCalledOnceWith([
+        '/',
+        'auth',
+        'pending_verification',
+        { orgId: 'orNVthTo2Zyo' },
+      ]);
     });
   });
 });

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

@@ -4,16 +4,13 @@ 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,
@@ -22,10 +19,6 @@ 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
@@ -39,21 +32,18 @@ export class VerifyPage implements OnInit {
       )
       .subscribe({
         next: () => this.router.navigate(['/', 'auth', 'switch_org', { invite_link: true }]),
-        error: (err) => this.handleError(err),
+        error: (err: { status: number }) => this.handleError(err),
       });
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  handleError(err: any): void {
+  handleError(err: { status: number }): 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.currentPageState = VerifyPageState.error;
+      this.router.navigate(['/', 'auth', 'pending_verification', { orgId }]);
     }
   }
 }