Allow notifications to differ based on login role + modify preliminary response + closing remarks for investigating entities

src/app/layout/notifications/notifications.component.html

@@ -1,5 +1,5 @@
 <ul>
-    <li *ngFor="let notification of notifications">
+    <li *ngFor="let notification of allowedNotifications">
         <a *ngIf="notification.redirectionUrl" [routerLink]="notification.redirectionUrl">
             <h5> {{ notification.text }} </h5>
             <p *ngIf="notification.description"> {{ notification.description }} </p>

src/app/layout/notifications/notifications.component.ts

@@ -1,54 +1,92 @@
 import { Component, OnInit } from '@angular/core';
 
+type Role = 'Officer'|'Investigator'|'Hod'|'Panel'|'Customer';
+
+interface Notification {
+    text: string,
+    timeStamp: string,
+    roles: Array<Role>,
+    description?: string,
+    redirectionUrl?: string,        
+}
+
 @Component({
     selector: 'app-notifications',
     templateUrl: './notifications.component.html',
     styleUrls: ['./notifications.component.scss']
 })
 export class NotificationsComponent implements OnInit {
-    notifications: Array<{
-        text: string,
-        timeStamp: string,
-        description?: string,
-        redirectionUrl?: string,        
-    }> = [{
+    loginRole: Role;
+
+    notifications: Array<Notification> = [{
         text: 'New name application has been submitted',
         description: 'A new Applicant in the company name Kimao has applied for an appeal',
+        roles: ['Officer'],
         timeStamp: '1 hour ago',
     }, {
         text: 'Entity Corp. flagged for investigation',
+        roles: ['Investigator'],
         timeStamp: '2 days ago',
         redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
     }, {
         text: 'Request to create a panel',
+        roles: ['Hod'],
         timeStamp: '1 day ago',
         redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
     }, {
         text: 'Review non-compliance for Entity Corp.',
+        roles: ['Investigator'],
         timeStamp: '4 hours ago',
         redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
     }, {
         text: 'Concur non-compliance for Entity Corp.',
+        roles: ['Panel'],
         timeStamp: '2 hours ago',
         redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
     }, {
         text: 'Prepare preliminary letter',
+        roles: ['Investigator'],
         timeStamp: '2 hours ago',
         redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
     }, {
         text: 'Investigation complete',
+        roles: ['Investigator'],
         timeStamp: '1 hours ago',
         redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
     }, {
         text: 'New name application has been submitted',
+        roles: ['Officer'],
         description: 'A new Applicant in the company name Kimao has applied for an appeal',
         timeStamp: '1 hour ago',
     }, {
         text: 'Request to create a new Committee',
+        roles: ['Officer'],
         timeStamp: '2 hours ago',
+    }, {
+        text: 'Respond to non-compliance preliminary letter',
+        roles: ['Customer'],
+        timeStamp: '1 hour ago',
+        redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
     }];
+    allowedNotifications: Array<Notification> = [];
+
+    constructor() {
+        const loginEmail = localStorage.getItem('loginEmail');
 
-    constructor() { }
+        if (loginEmail && loginEmail.toLocaleLowerCase().startsWith('hod')) {
+            this.loginRole = 'Hod';
+        } else if (loginEmail && loginEmail.toLocaleLowerCase().startsWith('panel')) {
+            this.loginRole = 'Panel';
+        } else if (loginEmail && loginEmail.toLocaleLowerCase().startsWith('customer')) {
+            this.loginRole = 'Customer';
+        } else if (loginEmail && loginEmail.toLocaleLowerCase().startsWith('investigator')) {
+            this.loginRole = 'Investigator';
+        } else {
+            this.loginRole = 'Officer';
+        }
+
+        this.allowedNotifications = this.notifications.filter(notification => notification.roles.includes(this.loginRole));
+    }
 
     ngOnInit(): void {
     }

src/app/pages/investigate-business-entities-and-individuals/closing-remarks/closing-remarks.component.html

@@ -1,6 +1,7 @@
 <div class="screen-holder">
-    <h3>Investigation complete</h3>
-    <p>The investigation is complete, and the entity is marked as compliant.</p>
+    <h3>Investigation {{ isNonCompliant ? 'underway' : 'complete' }}</h3>
+    <p *ngIf="!isNonCompliant">The investigation is complete, and the entity is marked as compliant.</p>
+    <p *ngIf="isNonCompliant">The entity is non-compliant, and requires further investigation.</p>
     <a [routerLink]="['/tabs/e-services']">
         <button class="common-button">
             Go home

src/app/pages/investigate-business-entities-and-individuals/closing-remarks/closing-remarks.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-closing-remarks',
@@ -6,10 +6,11 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./closing-remarks.component.scss']
 })
 export class ClosingRemarksComponent implements OnInit {
+    @Input() isNonCompliant = false;
 
-  constructor() { }
+    constructor() { }
 
-  ngOnInit(): void {
-  }
+    ngOnInit(): void {
+    }
 
 }

src/app/pages/investigate-business-entities-and-individuals/investigate-business-entities-and-individuals.component.html

@@ -11,6 +11,7 @@
 
 <app-closing-remarks 
     *ngIf="state === 'CLOSING REMARKS'"
+    [isNonCompliant]="isNonCompliant"
 ></app-closing-remarks>
 
 <app-check-status

src/app/pages/investigate-business-entities-and-individuals/investigate-business-entities-and-individuals.component.ts

@@ -135,6 +135,10 @@ export class InvestigateBusinessEntitiesAndIndividualsComponent implements OnIni
                 this.state = 'RESPOND TO PRELIMINARY LETTER';
                 this.executingRole = 'Customer';
                 break;
+            case 'RESPOND TO PRELIMINARY LETTER':
+                this.state = 'CLOSING REMARKS';
+                this.executingRole = 'Investigator';
+                break;
         }
 
         localStorage.setItem('state', this.state);
@@ -156,6 +160,9 @@ export class InvestigateBusinessEntitiesAndIndividualsComponent implements OnIni
             case 'CONCUR COMPLIANCE REVIEW':
                 this.executingRole = 'Panel';
                 break;
+            case 'RESPOND TO PRELIMINARY LETTER':
+                this.executingRole = 'Customer';
+                break;
             default:
                 this.executingRole = 'Investigator';
         }

src/app/pages/investigate-business-entities-and-individuals/respond-to-preliminary-letter/respond-to-preliminary-letter.component.html

@@ -1 +1,14 @@
-<p>respond-to-preliminary-letter works!</p>
+<div class="form-holder">
+    <h3>Respond to preliminary letter</h3>
+
+    <div class="files-holder">
+        <app-file
+            name="Preliminary letter"
+            [sizeInBytes]="240000"
+            extension="docx"
+            link="/assets/files/document.docx"
+        ></app-file>
+    </div>
+
+    <app-multi-file-upload [maxNoOfFiles]="1" label="Preliminary letter response"></app-multi-file-upload>
+</div>

src/app/pages/investigate-business-entities-and-individuals/respond-to-preliminary-letter/respond-to-preliminary-letter.component.scss

@@ -0,0 +1,19 @@
+.form-holder {
+    width: calc(70% - 2rem);
+    padding: 4rem;
+    margin: 0 auto;
+}
+
+h3 {
+    font-size: 2rem;
+    color: var(--dark-grey);
+    filter: brightness(80%);
+    font-weight: 500;
+    margin: 2rem 0;
+}
+
+.files-holder {
+    & > * {
+        margin-right: 15px;
+    }
+}