Merge pull request #989 from bcgov/feature/ALCS-1017

Add nice confirmation modal for changing survey plans

portal-frontend/src/app/features/notifications/edit-submission/edit-submission.module.ts

@@ -15,6 +15,7 @@ import { ParcelDetailsComponent } from './parcels/parcel-details.component';
 import { ParcelEntryConfirmationDialogComponent } from './parcels/parcel-entry/parcel-entry-confirmation-dialog/parcel-entry-confirmation-dialog.component';
 import { ParcelEntryComponent } from './parcels/parcel-entry/parcel-entry.component';
 import { PrimaryContactComponent } from './primary-contact/primary-contact.component';
+import { ChangeSurveyPlanConfirmationDialogComponent } from './proposal/change-survey-plan-confirmation-dialog/change-survey-plan-confirmation-dialog.component';
 import { ProposalComponent } from './proposal/proposal.component';
 import { ReviewAndSubmitComponent } from './review-and-submit/review-and-submit.component';
 import { SubmitConfirmationDialogComponent } from './review-and-submit/submit-confirmation-dialog/submit-confirmation-dialog.component';
@@ -52,6 +53,7 @@ const routes: Routes = [
     OtherAttachmentsComponent,
     ReviewAndSubmitComponent,
     SubmitConfirmationDialogComponent,
+    ChangeSurveyPlanConfirmationDialogComponent,
   ],
   imports: [
     CommonModule,

portal-frontend/src/app/features/notifications/edit-submission/proposal/change-survey-plan-confirmation-dialog/change-survey-plan-confirmation-dialog.component.html

@@ -0,0 +1,13 @@
+<div mat-dialog-title>
+  <h4>Is there a survey plan associated with the SRW?</h4>
+</div>
+
+<div mat-dialog-content class="content">
+  <app-warning-banner>
+    <b>Warning:</b> Changing this answer will remove the uploaded survey plans. <br />
+  </app-warning-banner>
+  <div class="controls">
+    <button mat-stroked-button color="primary" [mat-dialog-close]="false">cancel</button>
+    <button mat-flat-button color="primary" [mat-dialog-close]="true">continue</button>
+  </div>
+</div>

portal-frontend/src/app/features/notifications/edit-submission/proposal/change-survey-plan-confirmation-dialog/change-survey-plan-confirmation-dialog.component.scss

@@ -0,0 +1,24 @@
+@use '../../../../../../styles/functions' as *;
+
+.margin-bottom-1 {
+  margin-bottom: rem(16);
+}
+
+.controls {
+  display: flex;
+  justify-content: space-between;
+}
+
+.confirm-content {
+  margin: rem(24) 0;
+}
+
+@media screen and (min-width: $desktopBreakpoint) {
+  .controls {
+    justify-content: flex-end;
+
+    button {
+      margin-left: rem(25) !important;
+    }
+  }
+}

portal-frontend/src/app/features/notifications/edit-submission/proposal/change-survey-plan-confirmation-dialog/change-survey-plan-confirmation-dialog.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatDialogRef } from '@angular/material/dialog';
+
+import { ChangeSurveyPlanConfirmationDialogComponent } from './change-survey-plan-confirmation-dialog.component';
+
+describe('ChangeSurveyPlanConfirmationDialogComponent', () => {
+  let component: ChangeSurveyPlanConfirmationDialogComponent;
+  let fixture: ComponentFixture<ChangeSurveyPlanConfirmationDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ChangeSurveyPlanConfirmationDialogComponent],
+      providers: [{ provide: MatDialogRef, useValue: {} }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChangeSurveyPlanConfirmationDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

portal-frontend/src/app/features/notifications/edit-submission/proposal/change-survey-plan-confirmation-dialog/change-survey-plan-confirmation-dialog.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-delete-structure-confirmation-dialog',
+  templateUrl: './change-survey-plan-confirmation-dialog.component.html',
+  styleUrls: ['./change-survey-plan-confirmation-dialog.component.scss'],
+})
+export class ChangeSurveyPlanConfirmationDialogComponent {}

portal-frontend/src/app/features/notifications/edit-submission/proposal/proposal.component.ts

@@ -16,6 +16,7 @@ import { formatBooleanToString } from '../../../../shared/utils/boolean-helper';
 import { parseStringToBoolean } from '../../../../shared/utils/string-helper';
 import { EditNotificationSteps } from '../edit-submission.component';
 import { FilesStepComponent } from '../files-step.partial';
+import { ChangeSurveyPlanConfirmationDialogComponent } from './change-survey-plan-confirmation-dialog/change-survey-plan-confirmation-dialog.component';
 
 @Component({
   selector: 'app-proposal',
@@ -51,7 +52,6 @@ export class ProposalComponent extends FilesStepComponent implements OnInit, OnD
     private router: Router,
     private notificationSubmissionService: NotificationSubmissionService,
     notificationDocumentService: NotificationDocumentService,
-    private confirmationDialogService: ConfirmationDialogService,
     dialog: MatDialog
   ) {
     super(notificationDocumentService, dialog);
@@ -127,10 +127,9 @@ export class ProposalComponent extends FilesStepComponent implements OnInit, OnD
 
   onChangeHasSurveyPlan(selectedValue: string) {
     if (selectedValue === 'false' && this.surveyPlans.length > 0) {
-      this.confirmationDialogService
-        .openDialog({
-          body: 'Warning: Changing this answer will remove the uploaded survey plans.',
-        })
+      this.dialog
+        .open(ChangeSurveyPlanConfirmationDialogComponent)
+        .beforeClosed()
         .subscribe(async (didConfirm) => {
           if (didConfirm) {
             for (const file of this.surveyPlans) {