ALCS-2570 New component for unflag dialog

alcs-frontend/src/app/features/application/decision/decision-v2/decision-v2.component.ts

@@ -7,7 +7,6 @@ import { ApplicationDto } from '../../../../services/application/application.dto
 import { ApplicationDecisionComponentService } from '../../../../services/application/decision/application-decision-v2/application-decision-component/application-decision-component.service';
 import {
   APPLICATION_DECISION_COMPONENT_TYPE,
-  ApplicationDecisionDocumentDto,
   ApplicationDecisionWithLinkedResolutionDto,
   CeoCriterionDto,
   DecisionMakerDto,
@@ -30,12 +29,12 @@ import { ConfirmationDialogService } from '../../../../shared/confirmation-dialo
 import { formatDateForApi } from '../../../../shared/utils/api-date-formatter';
 import { RevertToDraftDialogComponent } from './revert-to-draft-dialog/revert-to-draft-dialog.component';
 import { ApplicationConditionWithStatus, getEndDate } from '../../../../shared/utils/decision-methods';
-import { openFileInline } from '../../../../shared/utils/file';
 import { UserService } from '../../../../services/user/user.service';
 import { UserDto } from '../../../../services/user/user.dto';
 import { FlagDialogComponent, FlagDialogIO } from '../../../../shared/flag-dialog/flag-dialog.component';
 import { UpdateApplicationDecisionDto } from '../../../../services/application/decision/application-decision-v2/application-decision-v2.dto';
 import moment from 'moment';
+import { UnFlagDialogComponent, UnFlagDialogIO } from '../../../../shared/unflag-dialog/unflag-dialog.component';
 
 type LoadingDecision = ApplicationDecisionWithLinkedResolutionDto & {
   loading: boolean;
@@ -377,19 +376,19 @@ export class DecisionV2Component implements OnInit, OnDestroy {
   }
 
   async unflag(decision: ApplicationDecisionWithLinkedResolutionDto) {
-    this.confirmationDialogService
-      .openDialog({
-        title: `Unflag Decision #${decision.index}`,
-        body: `<strong>Warning:</strong> Only remove if flagged in error.
-        <br>
-        <br>
-        This action will also remove the follow-up date and explanatory text
-        associated with the flag and cannot be undone.
-        <br>
-        <br>
-        Are you sure you want to remove the flag?`,
+    this.dialog
+      .open(UnFlagDialogComponent, {
+        minWidth: '800px',
+        maxWidth: '800px',
+        maxHeight: '80vh',
+        width: '90%',
+        autoFocus: false,
+        data: {
+          decisionNumber: decision.index,
+        },
       })
-      .subscribe(async (confirmed) => {
+      .beforeClosed()
+      .subscribe(async ({ confirmed }: UnFlagDialogIO) => {
         if (confirmed) {
           await this.decisionService.update(decision.uuid, {
             isDraft: decision.isDraft,

alcs-frontend/src/app/features/notice-of-intent/decision/decision-v2/decision-v2.component.ts

@@ -31,6 +31,7 @@ import moment from 'moment';
 import { FlagDialogComponent, FlagDialogIO } from '../../../../shared/flag-dialog/flag-dialog.component';
 import { UserDto } from '../../../../services/user/user.dto';
 import { UserService } from '../../../../services/user/user.service';
+import { UnFlagDialogComponent, UnFlagDialogIO } from '../../../../shared/unflag-dialog/unflag-dialog.component';
 
 type LoadingDecision = NoticeOfIntentDecisionDto & {
   loading: boolean;
@@ -332,19 +333,19 @@ export class DecisionV2Component implements OnInit, OnDestroy {
   }
 
   async unflag(decision: LoadingDecision, index: number) {
-    this.confirmationDialogService
-      .openDialog({
-        title: `Unflag Decision #${index}`,
-        body: `<strong>Warning:</strong> Only remove if flagged in error.
-        <br>
-        <br>
-        This action will also remove the follow-up date and explanatory text
-        associated with the flag and cannot be undone.
-        <br>
-        <br>
-        Are you sure you want to remove the flag?`,
-      })
-      .subscribe(async (confirmed) => {
+    this.dialog
+      .open(UnFlagDialogComponent, {
+              minWidth: '800px',
+              maxWidth: '800px',
+              maxHeight: '80vh',
+              width: '90%',
+              autoFocus: false,
+              data: {
+                decisionNumber: index,
+              },
+            })
+      .beforeClosed()
+      .subscribe(async ({confirmed} : UnFlagDialogIO) => {
         if (confirmed) {
           await this.decisionService.update(decision.uuid, {
             isDraft: decision.isDraft,

alcs-frontend/src/app/shared/flag-dialog/flag-dialog.component.html

@@ -19,6 +19,18 @@ <h2 class="card-title">{{ data.isEditing ? 'Edit' : '' }} Flag Decision #{{ data
     <mat-datepicker-toggle matSuffix [for]="followUpAtDatepicker"></mat-datepicker-toggle>
     <mat-datepicker #followUpAtDatepicker type="date"> </mat-datepicker>
   </mat-form-field>
+  <div class="warning" *ngIf="data.isEditing">
+    <div class="icon">
+      <mat-icon>info</mat-icon>
+    </div>
+    <div class="warning-text">
+      <span>Add a follow-up date if:</span>
+      <ul class="no-margin-ul">
+        <li>the decision is a refusal; or</li>
+        <li>there are no End/Due date(s) on the condition(s)</li>
+      </ul>
+    </div>
+  </div>
 </mat-dialog-content>
 
 <mat-dialog-actions align="end">

alcs-frontend/src/app/shared/flag-dialog/flag-dialog.component.scss

@@ -22,3 +22,26 @@
 .button-container {
   margin: 16px;
 }
+
+.warning {
+  background-color: colors.$secondary-color-light;
+  border-radius: 4px;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 24px;
+
+  mat-icon {
+    margin-left: 20px;
+    margin-top: 10px;
+  }
+}
+
+.warning-text {
+  padding-left: 20px;
+}
+
+.no-margin-ul {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}

alcs-frontend/src/app/shared/shared.module.ts

@@ -81,6 +81,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { CommissionerTagsHeaderComponent } from './tags/commissioner-tags-header/commissioner-tags-header.component';
 import { DocumentUploadDialogComponent } from './document-upload-dialog/document-upload-dialog.component';
 import { FlagDialogComponent } from './flag-dialog/flag-dialog.component';
+import { UnFlagDialogComponent } from './unflag-dialog/unflag-dialog.component';
 
 @NgModule({
   declarations: [
@@ -127,6 +128,7 @@ import { FlagDialogComponent } from './flag-dialog/flag-dialog.component';
     CommissionerTagsHeaderComponent,
     DocumentUploadDialogComponent,
     FlagDialogComponent,
+    UnFlagDialogComponent,
   ],
   imports: [
     CommonModule,
@@ -233,6 +235,7 @@ import { FlagDialogComponent } from './flag-dialog/flag-dialog.component';
     TagChipComponent,
     DocumentUploadDialogComponent,
     FlagDialogComponent,
+    UnFlagDialogComponent,
   ],
 })
 export class SharedModule {

alcs-frontend/src/app/shared/unflag-dialog/unflag-dialog.component.html

@@ -0,0 +1,30 @@
+<div mat-dialog-title>
+  <h2 class="card-title">Unflag Decision #{{ data.decisionNumber }}</h2>
+</div>
+
+<mat-dialog-content class="content">
+    <div class="warning-section warning">
+      <div class="icon">
+        <mat-icon>info</mat-icon>
+      </div>
+      <div>
+        <strong>Warning:</strong> Only remove if flagged in error.
+        <br>
+        <br>
+        This action will also remove the follow-up date and explanatory text
+        associated with the flag and cannot be undone.
+        <br>
+        <br>
+        Are you sure you want to remove the Flag?
+      </div>
+    </div>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <div class="button-container">
+    <button mat-stroked-button color="primary" [mat-dialog-close]="{ save: false }">Cancel</button>
+    <button mat-flat-button color="primary" type="button" (click)="save()">
+      Yes
+    </button>
+  </div>
+</mat-dialog-actions>

alcs-frontend/src/app/shared/unflag-dialog/unflag-dialog.component.scss

@@ -0,0 +1,38 @@
+@use '../../../styles/colors.scss';
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  color: colors.$black;
+
+  height: 100%;
+  margin-top: 24px;
+}
+
+.reason-flagged {
+  margin-top: 5px;
+}
+
+.follow-up-at {
+  align-self: flex-start;
+}
+
+.button-container {
+  margin: 16px;
+}
+
+.warning {
+  background-color: rgba(colors.$field-warning-bg-color, 0.5);
+  border-radius: 4px;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 24px;
+
+  mat-icon {
+    margin-right: 30px;
+    margin-left: 20px;
+  }
+}

alcs-frontend/src/app/shared/unflag-dialog/unflag-dialog.component.spec.ts

@@ -0,0 +1,33 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { UnFlagDialogComponent } from './unflag-dialog.component';
+
+describe('UnFlagDialogComponent', () => {
+  let component: UnFlagDialogComponent;
+  let fixture: ComponentFixture<UnFlagDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [UnFlagDialogComponent],
+      providers: [
+        { provide: MatDialogRef, useValue: {} },
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: {
+            fileNumber: '12313',
+          },
+        },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UnFlagDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

alcs-frontend/src/app/shared/unflag-dialog/unflag-dialog.component.ts

@@ -0,0 +1,35 @@
+import { Component, Inject, OnDestroy } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Subject } from 'rxjs';
+
+export interface UnFlagDialogIO {
+  decisionNumber?: number;
+  confirmed?: boolean;
+}
+
+@Component({
+  selector: 'app-unflag-dialog',
+  templateUrl: './unflag-dialog.component.html',
+  styleUrls: ['./unflag-dialog.component.scss'],
+})
+export class UnFlagDialogComponent implements OnDestroy {
+  $destroy = new Subject<void>();
+
+  constructor(
+    public matDialogRef: MatDialogRef<UnFlagDialogComponent>,
+    @Inject(MAT_DIALOG_DATA)
+    protected data: UnFlagDialogIO,
+  ) {}
+
+  ngOnDestroy(): void {
+    this.$destroy.next();
+    this.$destroy.complete();
+  }
+
+  save() {
+    const output: UnFlagDialogIO = {
+      confirmed: true,
+    };
+    this.matDialogRef.close(output);
+  }
+}