Add preliminary letter preparation step

src/app/app.module.ts

@@ -28,6 +28,8 @@ import { MultiFileUploadComponent } from './widgets/form/multi-file-upload/multi
 import { ReviewNonComplianceComponent } from './pages/investigate-business-entities-and-individuals/review-non-compliance/review-non-compliance.component';
 import { ConcurComplianceReviewComponent } from './pages/investigate-business-entities-and-individuals/concur-compliance-review/concur-compliance-review.component';
 import { ClosingRemarksComponent } from './pages/investigate-business-entities-and-individuals/closing-remarks/closing-remarks.component';
+import { PreparePreliminaryLetterComponent } from './pages/investigate-business-entities-and-individuals/prepare-preliminary-letter/prepare-preliminary-letter.component';
+import { RespondToPreliminaryLetterComponent } from './pages/investigate-business-entities-and-individuals/respond-to-preliminary-letter/respond-to-preliminary-letter.component';
 
 @NgModule({
   declarations: [
@@ -54,7 +56,9 @@ import { ClosingRemarksComponent } from './pages/investigate-business-entities-a
     MultiFileUploadComponent,
     ReviewNonComplianceComponent,
     ConcurComplianceReviewComponent,
-    ClosingRemarksComponent
+    ClosingRemarksComponent,
+    PreparePreliminaryLetterComponent,
+    RespondToPreliminaryLetterComponent
   ],
   imports: [
     BrowserModule,

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

@@ -31,6 +31,10 @@ export class NotificationsComponent implements OnInit {
         text: 'Concur non-compliance for Entity Corp.',
         timeStamp: '2 hours ago',
         redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
+    }, {
+        text: 'Prepare preliminary letter',
+        timeStamp: '2 hours ago',
+        redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
     }, {
         text: 'Investigation complete',
         timeStamp: '1 hours ago',

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

@@ -1 +1,2 @@
+<app-view-case-details></app-view-case-details>
 <app-select-entities></app-select-entities>

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

@@ -38,7 +38,7 @@
         *ngIf="state === 'REVIEW NON COMPLIANCE'"
         [panelRemarks]="panelRemarks"
         [isNonCompliant]="isNonCompliant" 
-        (onNonComplianceUpdate)="isNonCompliant = $event"
+        (onNonComplianceUpdate)="updateIsNonCompliant($event)"
     ></app-review-non-compliance>
 
     <app-concur-compliance-review 
@@ -50,6 +50,13 @@
         (onIsConcurringUpdate)="isPanelConcurring = $event"
         (onRemarksUpdate)="updatePanelRemarks($event)"
     ></app-concur-compliance-review>
+
+    <app-prepare-preliminary-letter
+        *ngIf="state === 'PREPARE PRELIMINARY LETTER'"
+    ></app-prepare-preliminary-letter>
+    <app-respond-to-preliminary-letter
+        *ngIf="state === 'RESPOND TO PRELIMINARY LETTER'"
+    ></app-respond-to-preliminary-letter>
         
     <div class="form-action-buttons">
         <button class="common-button neutral" *ngIf="stateHistory.length > 0" (click)="goBack()">

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

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
-type State = 'VIEW INITIAL DETAILS'|'ENTER MORE DETAILS'|'ASSIGN COMMITTEE'|'REVIEW NON COMPLIANCE'|'CONCUR COMPLIANCE REVIEW'|'CLOSING REMARKS';
-type Role = 'Investigator'|'Hod'|'Panel';
+type State = 'VIEW INITIAL DETAILS'|'ENTER MORE DETAILS'|'ASSIGN COMMITTEE'|'REVIEW NON COMPLIANCE'|'CONCUR COMPLIANCE REVIEW'|'CLOSING REMARKS'|'PREPARE PRELIMINARY LETTER'|'RESPOND TO PRELIMINARY LETTER';
+type Role = 'Investigator'|'Hod'|'Panel'|'Customer';
 
 @Component({
   selector: 'app-investigate-business-entities-and-individuals',
@@ -26,16 +26,21 @@ export class InvestigateBusinessEntitiesAndIndividualsComponent implements OnIni
 
     constructor() {
         const panelRemarks = localStorage.getItem('panelRemarks');
+        
         if (panelRemarks) {
             this.panelRemarks = panelRemarks;
         }
-
+        
+        this.isNonCompliant = localStorage.getItem('isNonCompliant') === 'true';
+        
         const loginEmail = localStorage.getItem('loginEmail');
 
         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 {
             this.loginRole = 'Investigator';
         }
@@ -63,6 +68,14 @@ export class InvestigateBusinessEntitiesAndIndividualsComponent implements OnIni
                 this.state = 'CLOSING REMARKS';
                 this.executingRole = 'Investigator';
                 break;
+            case 'PREPARE PRELIMINARY LETTER':
+                this.state = 'PREPARE PRELIMINARY LETTER';
+                this.executingRole = 'Investigator';
+                break;
+            case 'RESPOND TO PRELIMINARY LETTER':
+                this.state = 'RESPOND TO PRELIMINARY LETTER';
+                this.executingRole = 'Customer';
+                break;
             default:
                 this.state = 'VIEW INITIAL DETAILS';
                 this.executingRole = 'Investigator';
@@ -71,6 +84,11 @@ export class InvestigateBusinessEntitiesAndIndividualsComponent implements OnIni
         this.canExecute = this.loginRole === this.executingRole;
     }
 
+    updateIsNonCompliant(isNonCompliant: boolean) {
+        this.isNonCompliant = isNonCompliant;
+        localStorage.setItem('isNonCompliant', String(isNonCompliant));
+    }
+
     updatePanelRemarks(remarks: string) {
         this.panelRemarks = remarks;
         localStorage.setItem('panelRemarks', remarks);
@@ -105,10 +123,18 @@ export class InvestigateBusinessEntitiesAndIndividualsComponent implements OnIni
                 if (!this.isPanelConcurring) {
                     this.state = 'REVIEW NON COMPLIANCE';
                 } else {
-                    this.state = 'CLOSING REMARKS';
+                    if (this.isNonCompliant) {
+                        this.state = 'PREPARE PRELIMINARY LETTER';
+                    } else {
+                        this.state = 'CLOSING REMARKS';
+                    }
                 }
                 this.executingRole = 'Investigator';
                 break;
+            case 'PREPARE PRELIMINARY LETTER':
+                this.state = 'RESPOND TO PRELIMINARY LETTER';
+                this.executingRole = 'Customer';
+                break;
         }
 
         localStorage.setItem('state', this.state);

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

@@ -0,0 +1,11 @@
+<div class="form-holder">
+    <h3>Prepare preliminary letter for customer</h3>
+    <div class="two-column-holder">
+        <app-generic-input
+            type="text"
+            label="Email"
+            placeholder="e.g. entity-name@mail.com"
+        ></app-generic-input>
+    </div>
+    <app-multi-file-upload [maxNoOfFiles]="1" label="Preliminary letter"></app-multi-file-upload>
+</div>

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

@@ -0,0 +1,22 @@
+.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;
+}
+
+.two-column-holder {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+
+    & > * {
+        width: calc(100% - 2rem);
+    }
+}

src/app/pages/investigate-business-entities-and-individuals/prepare-preliminary-letter/prepare-preliminary-letter.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PreparePreliminaryLetterComponent } from './prepare-preliminary-letter.component';
+
+describe('PreparePreliminaryLetterComponent', () => {
+  let component: PreparePreliminaryLetterComponent;
+  let fixture: ComponentFixture<PreparePreliminaryLetterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PreparePreliminaryLetterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PreparePreliminaryLetterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-prepare-preliminary-letter',
+  templateUrl: './prepare-preliminary-letter.component.html',
+  styleUrls: ['./prepare-preliminary-letter.component.scss']
+})
+export class PreparePreliminaryLetterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1 @@
+<p>respond-to-preliminary-letter works!</p>

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RespondToPreliminaryLetterComponent } from './respond-to-preliminary-letter.component';
+
+describe('RespondToPreliminaryLetterComponent', () => {
+  let component: RespondToPreliminaryLetterComponent;
+  let fixture: ComponentFixture<RespondToPreliminaryLetterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RespondToPreliminaryLetterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RespondToPreliminaryLetterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-respond-to-preliminary-letter',
+  templateUrl: './respond-to-preliminary-letter.component.html',
+  styleUrls: ['./respond-to-preliminary-letter.component.scss']
+})
+export class RespondToPreliminaryLetterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -28,6 +28,17 @@
         ></app-file>
     </div>
 
+    <div class="files-heading">Additional details:</div>
+    <div class="files-holder">
+        <app-file
+            name="Details from source"
+            [sizeInBytes]="160000"
+            extension="docx"
+            link="/assets/files/document.docx"
+        ></app-file>
+        <p class="paragraph-of-text">Extra remarks that have been added from the source after collecting more information.</p>
+    </div>
+
     <app-multi-file-upload label="Analysis documents"></app-multi-file-upload>
 
     <app-textarea

src/app/pages/investigate-business-entities-and-individuals/review-non-compliance/review-non-compliance.component.scss

@@ -25,6 +25,13 @@ h3 {
     margin-bottom: 25px;
 }
 
+.paragraph-of-text {
+    font-size: 1.6rem;
+    color: var(--dark-grey);
+    margin: 10px 0 25px;
+    line-height: 1.4;
+}
+
 .files-heading {
     font-size: 1.4rem;
     color: var(--primary);
@@ -34,6 +41,7 @@ h3 {
 }
 
 .files-holder {
+    margin-bottom: 10px;
     & > * {
         margin-right: 15px;
     }

src/app/pages/register-business/register-business.component.html

@@ -86,7 +86,7 @@
 
         <div class="tab-content">
             <div *ngIf="selectedPaymentTab === 'overview'">
-                Reserve and purchase this business name for a set number of years
+                Reserve and purchase this business name for a period of 120 days
             </div>
             <div *ngIf="selectedPaymentTab === 'details'">
                 <p>
@@ -95,15 +95,8 @@
             </div>
         </div>
 
-        <div class="year-select-input-holder input-holder">
-            <select [(ngModel)]="noOfYears">
-                <option *ngFor="let year of years" [value]="year"> {{ year }} </option>
-            </select>            
-            <img src="assets/icons/chevron-down.svg" alt="calendar icon">
-            <label> No of years </label>
-        </div>
         <section class="total-price-container">
-            S$ {{ (noOfYears * perYearPrice).toFixed(2) }}
+            S$ 15.00
         </section>
 
         <div class="form-action-buttons">
@@ -139,7 +132,7 @@
             </ul>
     
             <div class="total-amount">
-                <label> Paid Amount </label> <span> S$ {{ (noOfYears * perYearPrice).toFixed(2) }} </span>
+                <label> Paid Amount </label> <span> S$ 15.00 </span>
             </div>
         </div>   
 
@@ -199,7 +192,7 @@
                 <div class="cell"> 39047729362923293 </div>
                 <div class="cell"> {{ nameToCheck }} </div>
                 <div class="cell"> Application for a new business name </div>
-                <div class="cell"> {{ (noOfYears * perYearPrice).toFixed(2) }} </div>
+                <div class="cell"> 15.00 </div>
                 <div class="cell"> Completed </div>
             </li>            
         </ul>

src/app/pages/register-business/register-business.component.ts

@@ -22,8 +22,6 @@ export class RegisterBusinessComponent implements OnInit {
     }
 
     selectedPaymentTab: 'overview'|'details' = 'overview';
-    noOfYears: number = 3;
-    perYearPrice: number = 15.0;
     years: Array<number> = (new Array(15)).fill(1).map((value, index) => index + 1);
 
     paymentChild: Window | null = null;
@@ -40,9 +38,6 @@ export class RegisterBusinessComponent implements OnInit {
             'LIMITED PARTNERSHIP', 
             'PUBLIC ACCOUNTING FIRM'
         ]
-    }, {
-        name: 'Date of Incorporation',
-        type: 'date'
     }, {
         name: 'Company Category',
         type: 'select',
@@ -56,14 +51,6 @@ export class RegisterBusinessComponent implements OnInit {
         name: 'Company Suffix',
         type: 'select',
         options: ['LLC', 'LTD', 'PVT LTD', 'INC']
-    }, {
-        name: 'Registrar Office City',
-        type: 'select',
-        options: ['CITY 1', 'CITY 2']
-    }, {
-        name: 'Registered Office',
-        type: 'select',
-        options: ['OFFICE 1', 'OFFICE 2']
     }, {
         name: 'Drop the Suffix "Limited" or "Berhad"?',
         type: 'select',

src/app/widgets/form/multi-file-upload/multi-file-upload.component.html

@@ -8,7 +8,7 @@
                 [extension]="file.extension"
             ></app-file>
         </div>
-        <label>
+        <label *ngIf="isAddAllowed()">
             <input class="hidden-file-input" type="file" ng2FileSelect [uploader]="uploader" multiple (onFileSelected)="handleFilesDrop($event)"  />
             <div class="add-button">
                 <img src="../../../../assets/icons/plus.svg" alt="Add file">
@@ -16,10 +16,11 @@
         </label>
     </div>
     <div ng2FileDrop
+        *ngIf="isAddAllowed()"
         [uploader]="uploader"
         (onFileDrop)="handleFilesDrop($event)"
         class="file-drop-zone"
     >
-        Drag and drop files
+        Drag and drop file(s)
     </div>
 </div>

src/app/widgets/form/multi-file-upload/multi-file-upload.component.ts

@@ -15,7 +15,8 @@ interface FileInfo {
 })
 export class MultiFileUploadComponent implements OnInit {
     @Input() label = '';
-    
+    @Input() maxNoOfFiles?: number;
+
     uploader: FileUploader = new FileUploader({
         url: ''
     });
@@ -27,6 +28,10 @@ export class MultiFileUploadComponent implements OnInit {
     ngOnInit(): void {
     }
 
+    isAddAllowed() {
+        return typeof this.maxNoOfFiles === 'undefined' || this.uploadedFiles.length < this.maxNoOfFiles;
+    }
+
     handleFilesDrop(files: Array<File>) {
         for (const file of files) {
             const fileName = file.name;