Add Console POC reminder front-end (#2754)

console-webapp/src/app/app.component.spec.ts

@@ -14,30 +14,71 @@
 
 import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { TestBed } from '@angular/core/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { AppComponent } from './app.component';
-import { MaterialModule } from './material.module';
-import { BackendService } from './shared/services/backend.service';
-import { AppRoutingModule } from './app-routing.module';
+import { routes } from './app-routing.module';
 import { AppModule } from './app.module';
+import { PocReminderComponent } from './shared/components/pocReminder/pocReminder.component';
+import { RouterModule } from '@angular/router';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { UserData, UserDataService } from './shared/services/userData.service';
+import { Registrar, RegistrarService } from './registrar/registrar.service';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { signal, WritableSignal } from '@angular/core';
 
 describe('AppComponent', () => {
+  let component: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+  let mockRegistrarService: {
+    registrar: WritableSignal<Partial<Registrar> | null | undefined>;
+    registrarId: WritableSignal<string>;
+    registrars: WritableSignal<Array<Partial<Registrar>>>;
+  };
+  let mockUserDataService: { userData: WritableSignal<Partial<UserData>> };
+  let mockSnackBar: jasmine.SpyObj<MatSnackBar>;
+
+  const dummyPocReminderComponent = class {}; // Dummy class for type checking
+
   beforeEach(async () => {
+    mockRegistrarService = {
+      registrar: signal<Registrar | null | undefined>(undefined),
+      registrarId: signal('123'),
+      registrars: signal([]),
+    };
+
+    mockUserDataService = {
+      userData: signal({
+        globalRole: 'NONE',
+      }),
+    };
+
+    mockSnackBar = jasmine.createSpyObj('MatSnackBar', ['openFromComponent']);
+
     await TestBed.configureTestingModule({
-      declarations: [AppComponent],
       imports: [
-        MaterialModule,
-        BrowserAnimationsModule,
-        AppRoutingModule,
+        MatSidenavModule,
+        NoopAnimationsModule,
+        MatSnackBarModule,
         AppModule,
+        RouterModule.forRoot(routes),
       ],
       providers: [
-        BackendService,
+        { provide: RegistrarService, useValue: mockRegistrarService },
+        { provide: UserDataService, useValue: mockUserDataService },
+        { provide: MatSnackBar, useValue: mockSnackBar },
+        { provide: PocReminderComponent, useClass: dummyPocReminderComponent },
         provideHttpClient(),
         provideHttpClientTesting(),
       ],
     }).compileComponents();
+
+    fixture = TestBed.createComponent(AppComponent);
+    component = fixture.componentInstance;
+  });
+
+  afterEach(() => {
+    jasmine.clock().uninstall();
   });
 
   it('should create the app', () => {
@@ -46,4 +87,51 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
+
+  describe('PoC Verification Reminder', () => {
+    beforeEach(() => {
+      jasmine.clock().install();
+    });
+
+    it('should open snackbar if lastPocVerificationDate is older than one year', fakeAsync(() => {
+      const MOCK_TODAY = new Date('2024-07-15T10:00:00.000Z');
+      jasmine.clock().mockDate(MOCK_TODAY);
+
+      const twoYearsAgo = new Date(MOCK_TODAY);
+      twoYearsAgo.setFullYear(MOCK_TODAY.getFullYear() - 2);
+
+      mockRegistrarService.registrar.set({
+        lastPocVerificationDate: twoYearsAgo.toISOString(),
+      });
+
+      fixture.detectChanges();
+      TestBed.flushEffects();
+
+      expect(mockSnackBar.openFromComponent).toHaveBeenCalledWith(
+        PocReminderComponent,
+        {
+          horizontalPosition: 'center',
+          verticalPosition: 'top',
+          duration: 1000000000,
+        }
+      );
+    }));
+
+    it('should NOT open snackbar if lastPocVerificationDate is within last year', fakeAsync(() => {
+      const MOCK_TODAY = new Date('2024-07-15T10:00:00.000Z');
+      jasmine.clock().mockDate(MOCK_TODAY);
+
+      const sixMonthsAgo = new Date(MOCK_TODAY);
+      sixMonthsAgo.setMonth(MOCK_TODAY.getMonth() - 6);
+
+      mockRegistrarService.registrar.set({
+        lastPocVerificationDate: sixMonthsAgo.toISOString(),
+      });
+
+      fixture.detectChanges();
+      TestBed.flushEffects();
+
+      expect(mockSnackBar.openFromComponent).not.toHaveBeenCalled();
+    }));
+  });
 });

console-webapp/src/app/app.component.ts

@@ -12,13 +12,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, effect, ViewChild } from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
 import { NavigationEnd, Router } from '@angular/router';
 import { RegistrarService } from './registrar/registrar.service';
 import { BreakPointObserverService } from './shared/services/breakPoint.service';
 import { GlobalLoaderService } from './shared/services/globalLoader.service';
 import { UserDataService } from './shared/services/userData.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { PocReminderComponent } from './shared/components/pocReminder/pocReminder.component';
 
 @Component({
   selector: 'app-root',
@@ -35,8 +37,28 @@ export class AppComponent implements AfterViewInit {
     protected userDataService: UserDataService,
     protected globalLoader: GlobalLoaderService,
     protected breakpointObserver: BreakPointObserverService,
-    private router: Router
-  ) {}
+    private router: Router,
+    private _snackBar: MatSnackBar
+  ) {
+    effect(() => {
+      const registrar = this.registrarService.registrar();
+      const oneYearAgo = new Date();
+      oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
+      oneYearAgo.setHours(0, 0, 0, 0);
+      if (
+        registrar &&
+        registrar.lastPocVerificationDate &&
+        new Date(registrar.lastPocVerificationDate) < oneYearAgo &&
+        this.userDataService?.userData()?.globalRole === 'NONE'
+      ) {
+        this._snackBar.openFromComponent(PocReminderComponent, {
+          horizontalPosition: 'center',
+          verticalPosition: 'top',
+          duration: 1000000000,
+        });
+      }
+    });
+  }
 
   ngAfterViewInit() {
     this.router.events.subscribe((event) => {

console-webapp/src/app/app.module.ts

@@ -60,6 +60,7 @@ import { TldsComponent } from './tlds/tlds.component';
 import { ForceFocusDirective } from './shared/directives/forceFocus.directive';
 import RdapComponent from './settings/rdap/rdap.component';
 import RdapEditComponent from './settings/rdap/rdapEdit.component';
+import { PocReminderComponent } from './shared/components/pocReminder/pocReminder.component';
 
 @NgModule({
   declarations: [SelectedRegistrarWrapper],
@@ -86,6 +87,7 @@ export class SelectedRegistrarModule {}
     RdapComponent,
     RdapEditComponent,
     ReasonDialogComponent,
+    PocReminderComponent,
     RegistrarComponent,
     RegistrarDetailsComponent,
     RegistrarSelectorComponent,

console-webapp/src/app/navigation/navigation.component.ts

@@ -57,7 +57,7 @@ export class NavigationComponent {
   }
 
   ngOnDestroy() {
-    this.subscription.unsubscribe();
+    this.subscription && this.subscription.unsubscribe();
   }
 
   getElementId(node: RouteWithIcon) {

console-webapp/src/app/registrar/registrar.service.ts

@@ -71,6 +71,7 @@ export interface Registrar
   registrarName: string;
   registryLockAllowed?: boolean;
   type?: string;
+  lastPocVerificationDate?: string;
 }
 
 @Injectable({

console-webapp/src/app/shared/components/pocReminder/pocReminder.component.html

@@ -0,0 +1,14 @@
+<div class="console-app__pocReminder">
+  <p class="">
+    Please take a moment to complete annual review of
+    <a routerLink="/settings">contacts</a>.
+  </p>
+  <span matSnackBarActions>
+    <button mat-button matSnackBarAction (click)="confirmReviewed()">
+      Confirm reviewed
+    </button>
+    <button mat-button matSnackBarAction (click)="snackBarRef.dismiss()">
+      Close
+    </button>
+  </span>
+</div>

console-webapp/src/app/shared/components/pocReminder/pocReminder.component.scss

@@ -0,0 +1,5 @@
+.console-app__pocReminder {
+  a {
+    color: white !important;
+  }
+}

console-webapp/src/app/shared/components/pocReminder/pocReminder.component.ts

@@ -0,0 +1,53 @@
+// Copyright 2025 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component } from '@angular/core';
+import { MatSnackBar, MatSnackBarRef } from '@angular/material/snack-bar';
+import { RegistrarService } from '../../../registrar/registrar.service';
+import { HttpErrorResponse } from '@angular/common/http';
+
+@Component({
+  selector: 'app-poc-reminder',
+  templateUrl: './pocReminder.component.html',
+  styleUrls: ['./pocReminder.component.scss'],
+  standalone: false,
+})
+export class PocReminderComponent {
+  constructor(
+    public snackBarRef: MatSnackBarRef<PocReminderComponent>,
+    private registrarService: RegistrarService,
+    private _snackBar: MatSnackBar
+  ) {}
+
+  confirmReviewed() {
+    if (this.registrarService.registrar()) {
+      const todayMidnight = new Date();
+      todayMidnight.setHours(0, 0, 0, 0);
+      this.registrarService
+        // @ts-ignore - if check  above won't allow empty object to be submitted
+        .updateRegistrar({
+          ...this.registrarService.registrar(),
+          lastPocVerificationDate: todayMidnight.toISOString(),
+        })
+        .subscribe({
+          error: (err: HttpErrorResponse) => {
+            this._snackBar.open(err.error || err.message);
+          },
+          next: () => {
+            this.snackBarRef.dismiss();
+          },
+        });
+    }
+  }
+}