[MDS-6131] Purpose and Auth page UI updates (#3229)

* ui updates for purpose and auth page

* trying to fix cypress test issue

migrations/sql/V2024.08.27.14.14__update_discharge_factor_description_in_project_summary_document_type.sql

@@ -0,0 +1,3 @@
+UPDATE project_summary_document_type
+SET description = 'Discharge Factor'
+WHERE project_summary_document_type_code = 'DFA';

services/common/src/components/projectSummary/AuthorizationSupportDocumentUpload.tsx

@@ -4,7 +4,11 @@ import { DOCUMENT, EXCEL, IMAGE, SPATIAL } from "@mds/common/constants/fileTypes
 import { PROJECT_SUMMARY_DOCUMENTS } from "@mds/common/constants/API";
 import RenderFileUpload from "@mds/common/components/forms/RenderFileUpload";
 import { IProjectSummaryDocument } from "../..";
-import { PROJECT_SUMMARY_DOCUMENT_TYPE_CODE } from "../..";
+import {
+  PROJECT_SUMMARY_DOCUMENT_TYPE_CODE,
+  DISCHARGE_FACTOR_FORM_AMENDMENT,
+  DISCHARGE_FACTOR_FORM_NEW,
+} from "../..";
 import { requiredList } from "@mds/common/redux/utils/Validate";
 
 interface AuthorizationSupportDocumentUploadProps {
@@ -75,7 +79,7 @@ export const AuthorizationSupportDocumentUpload: FC<AuthorizationSupportDocument
     } else if (type === "CON") {
       valuesToCheckFor = ["TRA", "NAM"];
     } else if (type === "CAF") {
-      valuesToCheckFor = ["MMR", "RCH"];
+      valuesToCheckFor = ["MMR", "RCH", "ILT", "IGT", "DDL"];
     }
 
     return amendmentChanges?.some((val) => valuesToCheckFor.includes(val));
@@ -110,14 +114,12 @@ export const AuthorizationSupportDocumentUpload: FC<AuthorizationSupportDocument
       />
       {(!isAmendment ||
         (isAmendment &&
-          isDocumentTypeRequired(
-            PROJECT_SUMMARY_DOCUMENT_TYPE_CODE.DISCHARGE_FACTOR_AMENDMENT
-          ))) && (
+          isDocumentTypeRequired(PROJECT_SUMMARY_DOCUMENT_TYPE_CODE.DISCHARGE_FACTOR))) && (
         <Field
           id="DischargeFactorFormUpload"
           name="discharge_documents"
-          label="Discharge Factor Amendment Form (PDF, 318KB)"
-          labelHref="https://www2.gov.bc.ca/assets/gov/environment/waste-management/waste-discharge-authorization/guides/forms/epd-ema-06_amend_discharge_factor_amendment_form.pdf"
+          label="Discharge Factor Form (PDF, 318KB)"
+          labelHref={isAmendment ? DISCHARGE_FACTOR_FORM_AMENDMENT : DISCHARGE_FACTOR_FORM_NEW}
           component={RenderFileUpload}
           required
           validate={[requiredList]}
@@ -131,7 +133,7 @@ export const AuthorizationSupportDocumentUpload: FC<AuthorizationSupportDocument
             handleFileLoad(
               document_name,
               document_manager_guid,
-              PROJECT_SUMMARY_DOCUMENT_TYPE_CODE.DISCHARGE_FACTOR_AMENDMENT
+              PROJECT_SUMMARY_DOCUMENT_TYPE_CODE.DISCHARGE_FACTOR
             )
           }
           onRemoveFile={handleRemoveFile}
@@ -246,7 +248,8 @@ export const AuthorizationSupportDocumentUpload: FC<AuthorizationSupportDocument
         name="support_documents"
         label="Supporting Document"
         component={RenderFileUpload}
-        required={false}
+        required={showExemptionSection}
+        validate={showExemptionSection ? [requiredList] : []}
         allowRevert
         allowMultiple
         acceptedFileTypesMap={acceptedFileTypesMap}

services/common/src/components/projectSummary/AuthorizationsInvolved.tsx

@@ -227,7 +227,7 @@ const RenderEMAPermitCommonSections = ({ code, isAmendment, index }) => {
 
 const RenderEMANewPermitSection = ({ code }) => {
   return (
-    <div className="grey-box">
+    <div className="grey-box margin-medium--left margin-large--bottom">
       <FormSection name={`${code}.NEW[0]`}>
         <Field
           name="new_type"
@@ -264,6 +264,13 @@ const RenderEMANewPermitSection = ({ code }) => {
           required
           validate={[requiredRadioButton]}
         />
+        <Field
+          label="Is this Authorization required for remediation of a contaminated site?"
+          name="is_contaminated"
+          required
+          validate={[requiredRadioButton]}
+          component={RenderRadioButtons}
+        />
         <RenderEMAPermitCommonSections isAmendment={false} code={code} index={0} />
       </FormSection>
     </div>
@@ -278,7 +285,7 @@ const RenderEMAAmendFieldArray = ({ fields, code }) => {
   return (
     <>
       {fields.map((amendment: string, index) => (
-        <Col className="grey-box" key={amendment}>
+        <Col className="grey-box margin-large--top" key={amendment}>
           <FormSection name={amendment}>
             <Field
               label={
@@ -374,7 +381,7 @@ const RenderEMAAuthCodeFormSection = ({ code }) => {
   };
 
   return (
-    <>
+    <div className="margin-large--left">
       <Field
         name={`${code}.types`}
         component={RenderGroupCheckbox}
@@ -386,7 +393,11 @@ const RenderEMAAuthCodeFormSection = ({ code }) => {
         }}
         onChange={handleChangeAuthType}
         props={{
-          label: "What type of authorization is involved in your application?",
+          label: (
+            <span className="margin-large--top">
+              What type of authorization is involved in your application?
+            </span>
+          ),
           options: [
             {
               disabled: hasAmendments,
@@ -406,7 +417,7 @@ const RenderEMAAuthCodeFormSection = ({ code }) => {
                       <Button
                         onClick={addAmendment}
                         icon={<PlusCircleFilled />}
-                        className="btn-sm-padding"
+                        className="btn-sm-padding margin-large--bottom"
                       >
                         Add another amendment
                       </Button>
@@ -424,7 +435,7 @@ const RenderEMAAuthCodeFormSection = ({ code }) => {
         }}
       />
       {hasNew && <RenderEMANewPermitSection code={code} />}
-    </>
+    </div>
   );
 };
 
@@ -484,7 +495,7 @@ const RenderAuthCodeFormSection = ({ authorizationType, code }) => {
   // other authorizations, have single record so index with [0]
   return (
     <FormSection name={`${code}[0]`}>
-      <Row>
+      <Row className="grey-box margin-large--top margin-medium--bottom">
         <Field
           name="project_summary_permit_type"
           props={{
@@ -564,7 +575,7 @@ export const AuthorizationsInvolved = () => {
           <FormSection name="authorizations">
             {transformedProjectSummaryAuthorizationTypes.map((authorization) => {
               return (
-                <div key={authorization.code}>
+                <div key={authorization.code} className="margin-large--bottom">
                   <Typography.Title level={5}>{authorization.description}</Typography.Title>
                   {authorization.children.map((child) => {
                     const checked = formValues.authorizationTypes?.includes(child.code);
@@ -584,39 +595,42 @@ export const AuthorizationsInvolved = () => {
                               <>
                                 {child.code === "MINES_ACT_PERMIT" && (
                                   <Alert
+                                    className="margin-large--y"
                                     message="You are submitting a Major Mine Application to the Chief Permitting Officer"
                                     description={
-                                      <ul>
-                                        <li>
-                                          For intent to depart from a Mines Act authorized mine plan
-                                          and reclamation program, as per HSRC code 10.1.18, submit
-                                          a{" "}
-                                          {isCore ? (
-                                            "Notice of Departure"
-                                          ) : (
-                                            <Link
-                                              to={GLOBAL_ROUTES?.MINE_DASHBOARD.dynamicRoute(
-                                                formValues?.mine_guid,
-                                                "nods"
-                                              )}
-                                            >
-                                              Notice of Departure
-                                            </Link>
-                                          )}{" "}
-                                          through MineSpace
-                                        </li>
-                                        <li>
-                                          For exploration work outside the permit mine area without
-                                          expanding the production area, submit a Notice of Work
-                                          application via FrontCounter BC to amend your MX or CX
-                                          permit.
-                                        </li>
-                                        <li>
-                                          For induced polarization surveys or exploration drilling
-                                          within the permit mine area, submit a Notification of
-                                          Deemed Authorization application via FrontCounter BC.
-                                        </li>
-                                      </ul>
+                                      <div className="list-position-outside">
+                                        <ul>
+                                          <li>
+                                            For intent to depart from a Mines Act authorized mine
+                                            plan and reclamation program, as per HSRC code 10.2.9,
+                                            submit a{" "}
+                                            {isCore ? (
+                                              "Notice of Departure"
+                                            ) : (
+                                              <Link
+                                                to={GLOBAL_ROUTES?.MINE_DASHBOARD.dynamicRoute(
+                                                  formValues?.mine_guid,
+                                                  "nods"
+                                                )}
+                                              >
+                                                Notice of Departure
+                                              </Link>
+                                            )}{" "}
+                                            through MineSpace
+                                          </li>
+                                          <li>
+                                            For exploration work outside the permit mine area
+                                            without expanding the production area, submit a Notice
+                                            of Work application via FrontCounter BC to amend your MX
+                                            or CX permit.
+                                          </li>
+                                          <li>
+                                            For induced polarization surveys or exploration drilling
+                                            within the permit mine area, submit a Notification of
+                                            Deemed Authorization application via FrontCounter BC.
+                                          </li>
+                                        </ul>
+                                      </div>
                                     }
                                     type="info"
                                     showIcon

services/common/src/components/projectSummary/__snapshots__/AuthorizationsInvolved.spec.tsx.snap

@@ -100,7 +100,9 @@ exports[`AuthorizationsInvolved renders properly 1`] = `
                     />
                   </div>
                   <div>
-                    <div>
+                    <div
+                      class="margin-large--bottom"
+                    >
                       <h5
                         class="ant-typography"
                       >
@@ -141,7 +143,9 @@ exports[`AuthorizationsInvolved renders properly 1`] = `
                         </div>
                       </div>
                     </div>
-                    <div>
+                    <div
+                      class="margin-large--bottom"
+                    >
                       <h5
                         class="ant-typography"
                       >
@@ -284,7 +288,9 @@ exports[`AuthorizationsInvolved renders properly 1`] = `
                         </div>
                       </div>
                     </div>
-                    <div>
+                    <div
+                      class="margin-large--bottom"
+                    >
                       <h5
                         class="ant-typography"
                       >
@@ -393,7 +399,9 @@ exports[`AuthorizationsInvolved renders properly 1`] = `
                         </div>
                       </div>
                     </div>
-                    <div>
+                    <div
+                      class="margin-large--bottom"
+                    >
                       <h5
                         class="ant-typography"
                       >
@@ -434,7 +442,9 @@ exports[`AuthorizationsInvolved renders properly 1`] = `
                         </div>
                       </div>
                     </div>
-                    <div>
+                    <div
+                      class="margin-large--bottom"
+                    >
                       <h5
                         class="ant-typography"
                       >

services/common/src/constants/strings.tsx

@@ -220,7 +220,7 @@ export const PROJECT_SUMMARY_DOCUMENT_TYPE = {
 export const PROJECT_SUMMARY_DOCUMENT_TYPE_CODE = {
   GENERAL: "GEN",
   LOCATION_MAP: "MAP",
-  DISCHARGE_FACTOR_AMENDMENT: "DFA",
+  DISCHARGE_FACTOR: "DFA",
   SUPPORTING: "SPR",
   SPATIAL: "SPT",
   CONSENT_LETTER: "CSL",
@@ -244,7 +244,7 @@ export const PROJECT_SUMMARY_DOCUMENT_TYPE_CODE_STATE = {
 export const PROJECT_SUMMARY_DOCUMENT_TYPE_CODE_LOCATION = {
   GEN: "General",
   MAP: "Location Map",
-  DFA: "Discharge Factor Amendment",
+  DFA: "Discharge Factor",
   SPR: "Supporting Documents",
 };
 
@@ -456,3 +456,8 @@ export const AMS_STATUS_CODE_FAIL = "fail";
 export const AMS_STATUS_CODE_ERROR = "error";
 
 export const ENVIRONMENTAL_MANAGMENT_ACT = "ENVIRONMENTAL_MANAGMENT_ACT";
+
+export const DISCHARGE_FACTOR_FORM_NEW =
+  "https://www2.gov.bc.ca/assets/gov/environment/waste-management/waste-discharge-authorization/guides/forms/epd-ema-03_new_auth_discharge_factors_application_form.pdf";
+export const DISCHARGE_FACTOR_FORM_AMENDMENT =
+  "https://www2.gov.bc.ca/assets/gov/environment/waste-management/waste-discharge-authorization/guides/forms/epd-ema-06_amend_discharge_factor_amendment_form.pdf";

services/common/src/tests/mocks/dataMocks.tsx

@@ -7789,7 +7789,7 @@ export const AUTHORIZATION_INVOLVED = {
     SPR: "Supporting Documents",
     MAP: "Location Map",
     GEN: "General",
-    DFA: "Discharge Factor Amendment",
+    DFA: "Discharge Factor",
   },
   formValues: {
     authorizations: {

services/core-api/app/api/projects/project_summary/models/project_summary_authorization.py

@@ -188,7 +188,12 @@ def validate_authorization(cls, authorization, is_ams):
                         'required': True,
                         'type': 'list',
                         'empty': False,
-                    }
+                    },
+                    'support_documents': {
+                        'required': True,
+                        'type': 'list',
+                        'empty': False,
+                    },
                 }
 
             if not permit_type or not isinstance(permit_type, list) or not permit_type[0]:

services/core-web/src/styles/generic/layout.scss

@@ -482,6 +482,11 @@ html {
   }
 
   margin: $default-margin-lg !important;
+
+  &--y {
+    margin-top: $default-margin-lg !important;
+    margin-bottom: $default-margin-lg !important;
+  }
 }
 
 .margin-xlarge {
@@ -707,4 +712,14 @@ img.lessOpacity {
 
 .grey-box {
   width: 100%;
+  border: 1px solid #f2f2f2;
+  padding: 16px 24px;
+}
+
+.list-position-outside {
+  padding-inline-start: 15px;
+
+  li {
+    list-style-position: outside;
+  }
 }

services/minespace-web/src/styles/generic/layout.scss

@@ -501,4 +501,12 @@
       color: $white !important;
     }
   }
+}
+
+.list-position-outside {
+  padding-inline-start: 15px;
+
+  li {
+    list-style-position: outside;
+  }
 }