Feat/596 implement edit applicant info screen (#691)

* feat: stashing changes

* bug: stuck on useEffect loop

* fix: useEffect loop, TODO: add checkbox field back

* feat: refactor agency fields

* feat: refactor complete, TODO: integrate endpoint

* feat: endpoint integration complete

* fix: update isInvalid value

* fix: resolve conflict

* fix: form review

* fix: cypress

* fix: remove commented out codes

* fix: rearranging imports to make mg happy

* fix: onblur conditions

* fix: typo and style

frontend/cypress/e2e/smoke-test/create-a-class-seedlot.cy.ts

@@ -16,29 +16,6 @@ describe('Create A-Class Seedlot', () => {
     cy.login();
     cy.visit('/seedlots');
     cy.url().should('contains', '/seedlots');
-
-    cy.intercept(
-      {
-        method: 'GET',
-        url: '**/api/forest-clients/**'
-      },
-      {
-        statusCode: 200
-      }
-    ).as('verifyLocationCode');
-
-    cy.intercept(
-      {
-        method: 'POST',
-        url: '**/api/seedlots'
-      },
-      {
-        statusCode: 201,
-        body: {
-          seedlotNumber: '654321'
-        }
-      }
-    ).as('submitSeedlot');
   });
 
   it('should register an A-Class Seedlot', () => {
@@ -60,15 +37,15 @@ describe('Create A-Class Seedlot', () => {
       .clear()
       .type(data.applicantAgency.number, { delay: TYPE_DELAY });
     // Enter an invalid email address
-    cy.get('#appliccant-email-input')
+    cy.get('#applicant-email-input')
       .clear()
       .type(data.applicantAgency.invalidEmail, { delay: TYPE_DELAY });
     cy.get('#agency-number-input')
       .click();
-    cy.get('#appliccant-email-input-error-msg')
+    cy.get('#applicant-email-input-error-msg')
       .should('be.visible');
     // Enter the applicant email address
-    cy.get('#appliccant-email-input')
+    cy.get('#applicant-email-input')
       .clear()
       .type(data.applicantAgency.email, { delay: TYPE_DELAY });
     // Enter the seedlot species, wait for species data to load
@@ -107,14 +84,13 @@ describe('Create A-Class Seedlot', () => {
     cy.get('#seedlot-source-radio-btn-cus')
       .should('not.be.checked');
     // To be registered? should be checked by default
-    cy.get('#registered-tree-seed-center')
+    cy.get('#register-w-tsc-yes')
       .should('be.checked');
-    // To be registeredCollected from B.C. source? should be checked by default// as
-    cy.get('#collected-bc')
+    // Collected within bc? "Yes" should be checked by default
+    cy.get('#collected-within-bc-yes')
       .should('be.checked');
     // Click on button Create seedlot number
-    cy.get('.save-button')
-      .find('button')
+    cy.get('.submit-button')
       .click();
     cy.url().should('contains', '/creation-success');
     cy.get('h1').contains('654321');

frontend/cypress/fixtures/vegetation-code.json

@@ -0,0 +1,62 @@
+[
+  {
+    "code": "CW",
+    "label": "CW - Western redcedar",
+    "description": "Western redcedar"
+  },
+  {
+    "code": "DR",
+    "label": "DR - Red alder",
+    "description": "Red alder"
+  },
+  {
+    "code": "EP",
+    "label": "EP - Paper birch",
+    "description": "Paper birch"
+  },
+  {
+    "code": "FDC",
+    "label": "FDC - Coastal Douglas-fir",
+    "description": "Coastal Douglas-fir"
+  },
+  {
+    "code": "FDI",
+    "label": "FDI - Interior Douglas-fir",
+    "description": "Interior Douglas-fir"
+  },
+  {
+    "code": "HW",
+    "label": "HW - Western hemlock",
+    "description": "Western hemlock"
+  },
+  {
+    "code": "LW",
+    "label": "LW - Western larch",
+    "description": "Western larch"
+  },
+  {
+    "code": "PLI",
+    "label": "PLI - Lodgepole pine",
+    "description": "Lodgepole pine"
+  },
+  {
+    "code": "PW",
+    "label": "PW - Western white pine",
+    "description": "Western white pine"
+  },
+  {
+    "code": "PY",
+    "label": "PY - Ponderosa pine",
+    "description": "Ponderosa pine"
+  },
+  {
+    "code": "SS",
+    "label": "SS - Sitka spruce",
+    "description": "Sitka spruce"
+  },
+  {
+    "code": "SX",
+    "label": "SX - Spruce hybrid",
+    "description": "Spruce hybrid"
+  }
+]

frontend/cypress/support/e2e.ts

@@ -1,4 +1,37 @@
 import './commands';
 
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
+beforeEach(() => {
+  cy.intercept(
+    {
+      method: 'GET',
+      url: '**/api/forest-clients/**'
+    },
+    {
+      statusCode: 200
+    }
+  ).as('verifyLocationCode');
+
+  cy.intercept(
+    {
+      method: 'POST',
+      url: '**/api/seedlots'
+    },
+    {
+      statusCode: 201,
+      body: {
+        seedlotNumber: '654321'
+      }
+    }
+  ).as('submitSeedlot');
+
+  cy.intercept(
+    {
+      method: 'GET',
+      url: '**/api/vegetation-codes*'
+    },
+    {
+      statusCode: 201,
+      fixture: 'vegetation-code.json'
+    }
+  ).as('vegetationCode');
+});

frontend/src/App.tsx

@@ -20,6 +20,7 @@ import SeedlotCreatedFeedback from './views/Seedlot/SeedlotCreatedFeedback';
 import MySeedlots from './views/Seedlot/MySeedlots';
 import SeedlotRegistrationForm from './views/Seedlot/SeedlotRegistrationForm';
 import FourOhFour from './views/FourOhFour';
+import EditAClassApplication from './views/Seedlot/EditAClassApplication';
 
 import awsconfig from './aws-exports';
 import AuthContext from './contexts/AuthContext';
@@ -114,6 +115,15 @@ const App: React.FC = () => {
                   )}
                 />
 
+                <Route
+                  path="/seedlots/edit-a-class-application/:seedlotNumber"
+                  element={(
+                    <ProtectedRoute>
+                      <EditAClassApplication />
+                    </ProtectedRoute>
+                  )}
+                />
+
                 <Route
                   path="/seedlots/my-seedlots"
                   element={(

frontend/src/api-service/applicantAgenciesAPI.ts

@@ -22,7 +22,7 @@ const getApplicantAgenciesOptions = (): MultiOptionsObj[] => {
     const newAgency: MultiOptionsObj = {
       code: agency.clientNumber,
       label: `${agency.clientNumber} - ${clientName} - ${agency.acronym}`,
-      description: ''
+      description: clientName
     };
     options.push(newAgency);
   });

frontend/src/api-service/seedlotAPI.ts

@@ -1,4 +1,4 @@
-import { SeedlotRegPayloadType } from '../types/SeedlotRegistrationTypes';
+import { SeedlotPatchPayloadType, SeedlotRegPayloadType } from '../types/SeedlotRegistrationTypes';
 import { SeedlotType, SeedlotsReturnType } from '../types/SeedlotType';
 import ApiConfig from './ApiConfig';
 import api from './api';
@@ -32,3 +32,11 @@ export const getSeedlotById = (seedlotNumber: string) => {
   const url = `${ApiConfig.seedlots}/${seedlotNumber}`;
   return api.get(url).then((res): SeedlotType => res.data);
 };
+
+export const patchSeedlotApplicationInfo = (
+  seedlotNumber: string,
+  payload: SeedlotPatchPayloadType
+) => {
+  const url = `${ApiConfig.seedlots}/${seedlotNumber}/application-info`;
+  return api.patch(url, payload);
+};

frontend/src/components/ApplicantAgencyFields/definitions.ts

@@ -1,19 +1,20 @@
 import AgencyTextPropsType from '../../types/AgencyTextPropsType';
-import { FormInputType } from '../../types/FormInputType';
+import { BooleanInputType, OptionsInputType, StringInputType } from '../../types/FormInputType';
 import MultiOptionsObj from '../../types/MultiOptionsObject';
 
 interface ApplicantAgencyFieldsProps {
-  useDefault: FormInputType & { value: boolean };
-  agency: FormInputType & { value: string };
-  locationCode: FormInputType & { value: string };
+  checkboxId: string;
+  isDefault: BooleanInputType;
+  agency: OptionsInputType;
+  locationCode: StringInputType;
   fieldsProps: AgencyTextPropsType;
   agencyOptions: Array<MultiOptionsObj>;
-  defaultAgency: string;
-  defaultCode: string;
-  setAllValues: Function;
-  showDefaultCheckbox?: boolean;
-  inputsColSize?: number;
+  setAgencyAndCode: Function;
+  defaultAgency?: MultiOptionsObj;
+  defaultCode?: string;
+  showCheckbox?: boolean;
   readOnly?: boolean;
+  maxInputColSize?: number;
 }
 
 export default ApplicantAgencyFieldsProps;