Merge pull request #1907 from bcgov/feature/ALCS-2149

Improve wording of NOI additional info step
bcgov · Oct 10, 2024 · 8f4971e · 8f4971e
2 parents 8adb802 + 8e6682e
commit 8f4971e
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 8 deletions.
diff --git a/...e-of-intents/edit-submission/additional-information/additional-information.component.html b/...e-of-intents/edit-submission/additional-information/additional-information.component.html
@@ -65,7 +65,7 @@ <h2>Additional Proposal Information</h2>
 
   <ng-container *ngIf="confirmRemovalOfSoil">
     <form [formGroup]="structuresForm">
-      <mat-label>Provide the total floor area (m<sup>2</sup>) of the proposed structure(s)</mat-label>
+      <mat-label>Provide the total floor area (m<sup>2</sup>) for each of the proposed structure(s)</mat-label>
       <div class="scrollable">
         <table mat-table [dataSource]="structuresSource">
           <ng-container matColumnDef="index">
@@ -181,6 +181,13 @@ <h2>Additional Proposal Information</h2>
 
       <div class="full-row" *ngIf="isSoilStructureFarmUseReasonVisible">
         <label for="soilStructureFarmUseReason">Describe how the structure is necessary for farm use</label>
+        <div class="info-banner subtext">
+          Please refer to
+          <a href="https://www.alc.gov.bc.ca/resources/alc-policies-and-bulletins/#farmstructures" target="_blank"
+            >Farm Structures in the ALR</a
+          >
+          on the ALC website for more detail.
+        </div>
         <mat-form-field appearance="outline">
           <textarea
             formControlName="soilStructureFarmUseReason"
@@ -206,8 +213,18 @@ <h2>Additional Proposal Information</h2>
 
       <div class="full-row" *ngIf="isSoilStructureResidentialUseReasonVisible">
         <label for="soilStructureResidentialUseReason"
-          >Describe how the structure is necessary for residential use</label
+          >Describe why <ng-container *ngIf="typeCode === 'POFO'">placing fill</ng-container>
+          <ng-container *ngIf="typeCode === 'ROSO'">removing soil</ng-container>
+          <ng-container *ngIf="typeCode === 'PFRS'">placing fill/removing soil</ng-container> is required for the
+          residential structure(s)</label
         >
+        <div class="info-banner subtext">
+          Please refer to
+          <a href="https://www.alc.gov.bc.ca/resources/alc-policies-and-bulletins/#housing" target="_blank"
+            >Housing in the ALR</a
+          >
+          on the ALC website for more detail.
+        </div>
         <mat-form-field appearance="outline">
           <textarea
             formControlName="soilStructureResidentialUseReason"
@@ -232,7 +249,9 @@ <h2>Additional Proposal Information</h2>
       </div>
 
       <div class="full-row" *ngIf="isSoilAgriParcelActivityVisible">
-        <label for="soilAgriParcelActivity">Describe the current agricultural activity on the parcel(s)</label>
+        <label for="soilAgriParcelActivity"
+          >Describe the current or proposed agricultural activity on the parcel(s)</label
+        >
         <div class="subtext">Include the area, yields, crop types, and farm equipment size and attachments</div>
         <mat-form-field appearance="outline">
           <textarea
@@ -256,8 +275,18 @@ <h2>Additional Proposal Information</h2>
 
       <div class="full-row" *ngIf="isSoilStructureResidentialAccessoryUseReasonVisible">
         <label for="soilStructureResidentialAccessoryUseReason"
-          >Describe the intended use of the residential accessory structure</label
+          >Describe the intended use of the residential accessory structure(s) and why
+          <ng-container *ngIf="typeCode === 'POFO'">placing fill</ng-container>
+          <ng-container *ngIf="typeCode === 'ROSO'">removing soil</ng-container>
+          <ng-container *ngIf="typeCode === 'PFRS'">placing fill/removing soil</ng-container> is required</label
         >
+        <div class="info-banner subtext">
+          Please refer to
+          <a href="https://www.alc.gov.bc.ca/resources/alc-policies-and-bulletins/#housing" target="_blank"
+            >Housing in the ALR</a
+          >
+          on the ALC website for more detail.
+        </div>
         <mat-form-field appearance="outline">
           <textarea
             formControlName="soilStructureResidentialAccessoryUseReason"
@@ -282,7 +311,12 @@ <h2>Additional Proposal Information</h2>
       </div>
 
       <div class="full-row" *ngIf="isSoilOtherUseReasonVisible">
-        <label for="soilStructureOtherUseReason"> Describe the intended use of the 'Other' structure </label>
+        <label for="soilStructureOtherUseReason">
+          Describe the intended use of the 'Other' structure(s) and why
+          <ng-container *ngIf="typeCode === 'POFO'">placing fill</ng-container>
+          <ng-container *ngIf="typeCode === 'ROSO'">removing soil</ng-container>
+          <ng-container *ngIf="typeCode === 'PFRS'">placing fill/removing soil</ng-container> is required
+        </label>
         <mat-form-field appearance="outline">
           <textarea
             formControlName="soilStructureOtherUseReason"

diff --git a/...e-of-intents/edit-submission/additional-information/additional-information.component.scss b/...e-of-intents/edit-submission/additional-information/additional-information.component.scss
@@ -1,4 +1,5 @@
 @use '../../../../../styles/functions' as *;
+@use '../../../../../styles/colors';
 
 .steps-list {
   margin: rem(16) 0;
@@ -15,3 +16,9 @@
 .mat-mdc-table .mdc-data-table__row {
   height: rem(75);
 }
+
+.info-banner {
+  background-color: rgba(colors.$secondary-color-light, 0.5);
+  padding: rem(4);
+  margin-bottom: 0 !important;
+}
diff --git a/...ice-of-intents/edit-submission/additional-information/additional-information.component.ts b/...ice-of-intents/edit-submission/additional-information/additional-information.component.ts
@@ -25,9 +25,9 @@ import { SoilRemovalConfirmationDialogComponent } from './soil-removal-confirmat
 
 export enum STRUCTURE_TYPES {
   FARM_STRUCTURE = 'Farm Structure',
-  PRINCIPAL_RESIDENCE = 'Residential - Principal Residence',
-  ADDITIONAL_RESIDENCE = 'Residential - Additional Residence',
-  ACCESSORY_STRUCTURE = 'Residential - Accessory Structure',
+  PRINCIPAL_RESIDENCE = 'Principal Residence',
+  ADDITIONAL_RESIDENCE = 'Additional Residence',
+  ACCESSORY_STRUCTURE = 'Residential Accessory Structure',
   OTHER_STRUCTURE = 'Other Structure',
 }
 
@@ -57,6 +57,7 @@ export class AdditionalInformationComponent extends FilesStepComponent implement
   ];
 
   private submissionUuid = '';
+  typeCode: string = '';
 
   confirmRemovalOfSoil = false;
   showBuildingPlanVirus = false;
@@ -107,6 +108,7 @@ export class AdditionalInformationComponent extends FilesStepComponent implement
       if (noiSubmission) {
         this.fileId = noiSubmission.fileNumber;
         this.submissionUuid = noiSubmission.uuid;
+        this.typeCode = noiSubmission.typeCode;
 
         switch (noiSubmission.typeCode) {
           case 'ROSO':