Feat/452 step 3 validation fe (#697)

* feat: created new component to deal with agency information

* feat: separated commom texts to use on the component

* feat: adjusting texts

* feat: changng type of agency options

* fix: fixing form review component

* fix: adjusting declaration of states

* feat: adjusted types and replaced agency fields

* fix: adjusting onblur event

* feat: changing useEffect of ownership step

* feat: validation for the portion field

* feat: adding new handling functions and other minor fixes

* fix: small fixes

* feat: removing add button from inside accordion

* fix: fixing applicant fields component

* fix: minor adjustments

* feat: update progress bar for ownership step

* fix: adjusting multioptobj fields validation

* feat: adjusting style of applicant field

* feat: adjusting ownership style

* fix: fixed location input when creating a new owner

* fix: removing unused functions

* fix: fixing form review

* fix: removing unused entry of the mock server

* fix: fixing options size

* feat: adjusting type, fixing validation for date fields, adding applicantfield component to step 3 and other minor fixes

* fix: removing storage location field

* fix: adjusting style and labels

* feat: updating ui and removing unused fields

* feat: sync collector's agency and interim agency

* feat: adjusting fields according with the new changes and other small fixes

* fix: adding back stylesheet import

* fix: fixing complete status and minor adjustments

* fix: removing unnecessary cast

frontend/src/components/ApplicantAgencyFields/constants.ts

@@ -1,14 +1,16 @@
 const supportTexts = {
   agency: {
     placeholder: 'Enter or choose your agency',
-    helperText: 'You can enter the agency number, name or acronym'
+    helperText: 'You can enter the agency number, name or acronym',
+    invalidTextInterimSpecific: 'Please specify a collector agency to proceed'
   },
   locationCode: {
     placeholder: 'Example: 00',
     helperTextDisabled: 'Please select an agency before setting the location code',
     helperTextEnabled: '2-digit code that identifies the address of operated office or division',
     invalidLocationForSelectedAgency: 'This location code is not valid for the selected agency, please enter a valid one or change the agency',
-    invalidText: 'Please enter a valid 2-digit code that identifies the address of operated office or division'
+    invalidText: 'Please enter a valid 2-digit code that identifies the address of operated office or division',
+    invalidTextInterimSpecific: 'Please specify a collector location code to proceed'
   }
 };
 

frontend/src/components/ApplicantAgencyFields/index.tsx

@@ -30,7 +30,7 @@ const ApplicantAgencyFields = ({
   );
 
   const [locationCodeHelperText, setLocationCodeHelperText] = useState<string>(
-    supportTexts.locationCode.helperTextEnabled
+    supportTexts.locationCode.helperTextDisabled
   );
 
   const updateAfterLocValidation = (isInvalid: boolean) => {
@@ -63,12 +63,14 @@ const ApplicantAgencyFields = ({
 
     const updatedAgency = {
       ...agency,
-      value: checked ? defaultAgency : EmptyMultiOptObj
+      value: checked ? defaultAgency : EmptyMultiOptObj,
+      isInvalid: checked && defaultAgency?.label === ''
     };
 
     const updatedLocationCode = {
       ...locationCode,
-      value: checked ? defaultCode : ''
+      value: checked ? defaultCode : '',
+      isInvalid: checked && defaultCode === ''
     };
 
     const updatedIsDefault = {
@@ -168,9 +170,14 @@ const ApplicantAgencyFields = ({
             placeholder={supportTexts.agency.placeholder}
             titleText={fieldsProps.agencyInput.titleText}
             helperText={readOnly ? null : supportTexts.agency.helperText}
-            invalidText={fieldsProps.agencyInput.invalidText}
+            invalidText={(isDefault.value && agency.value.code !== '')
+              ? fieldsProps.agencyInput.invalidText
+              : supportTexts.agency.invalidTextInterimSpecific}
             items={agencyOptions}
             readOnly={isDefault.value || readOnly}
+            // If the value set is empty, the field continues
+            // interactive on read only mode, so we disable it instead
+            disabled={(isDefault.value && agency.value.code === '')}
             selectedItem={agency.value}
             onChange={(e: ComboBoxEvent) => handleAgencyInput(e.selectedItem)}
             invalid={agency.isInvalid}
@@ -191,9 +198,11 @@ const ApplicantAgencyFields = ({
             labelText={fieldsProps.locationCode.labelText}
             helperText={(readOnly || isDefault.value) ? null : locationCodeHelperText}
             invalid={locationCode.isInvalid}
-            invalidText={invalidLocationMessage}
-            readOnly={isDefault.value || readOnly}
-            disabled={!agency.value.code}
+            invalidText={(isDefault.value && locationCode.value === '')
+              ? supportTexts.locationCode.invalidTextInterimSpecific
+              : invalidLocationMessage}
+            readOnly={(isDefault.value && locationCode.value !== '') || readOnly}
+            disabled={!agency.value.code || (isDefault.value && locationCode.value === '')}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               handleLocationCodeChange(e.target.value);
             }}

frontend/src/components/ApplicantAgencyFields/styles.scss

@@ -23,6 +23,10 @@
     &+.#{vars.$bcgov-prefix}--form__helper-text {
       display: none;
     }
+
+    &.#{vars.$bcgov-prefix}--list-box--invalid input[role=combobox].#{vars.$bcgov-prefix}--text-input {
+      outline-offset: 0;
+    }
   }
 
 

frontend/src/components/FormReview/index.tsx

@@ -10,17 +10,16 @@ import { Edit } from '@carbon/icons-react';
 import Subtitle from '../Subtitle';
 import TitleAccordion from '../TitleAccordion';
 import EmptySection from '../EmptySection';
-
-import { AllStepData } from '../../views/Seedlot/SeedlotRegistrationForm/definitions';
-import formReviewText from './constants';
-
-import './styles.scss';
 import OrchardStep from '../SeedlotRegistrationSteps/OrchardStep';
 import InterimStorage from '../SeedlotRegistrationSteps/InterimStep';
 import CollectionStep from '../SeedlotRegistrationSteps/CollectionStep';
 import ExtractionAndStorage from '../SeedlotRegistrationSteps/ExtractionAndStorageStep';
 import { OrchardForm } from '../SeedlotRegistrationSteps/OrchardStep/definitions';
-import { initCollectionState, initOwnershipState } from '../../views/Seedlot/SeedlotRegistrationForm/utils';
+import { initCollectionState, initOwnershipState, initInterimState } from '../../views/Seedlot/SeedlotRegistrationForm/utils';
+import { AllStepData } from '../../views/Seedlot/SeedlotRegistrationForm/definitions';
+import formReviewText from './constants';
+
+import './styles.scss';
 
 const mockFormData = [
   {
@@ -83,19 +82,11 @@ const orchardMock: OrchardForm = {
   pollenMethodology: false
 };
 
-const interimStorageMock = {
-  useCollectorAgencyInfo: true,
-  agencyName: 'Strong Seeds Orchard - SSO',
-  locationCode: '32',
-  startDate: '2023/01/04',
-  endDate: '2023/01/26',
-  storageLocation: 'Strong Seeds Seed Orchard Company',
-  facilityType: 'VRM'
-};
+const collectionMock = initCollectionState(defaultAgencyObj, defaultCode);
 
 const ownershipMock = initOwnershipState(defaultAgencyObj, defaultCode);
 
-const collectionMock = initCollectionState(defaultAgencyObj, defaultCode);
+const interimStorageMock = initInterimState(defaultAgencyObj, defaultCode);
 
 const extractionMock = {
   extractoryUseTSC: true,
@@ -196,8 +187,8 @@ const FormReview = () => {
                   <div className="form-item">
                     <InterimStorage
                       state={allStepData.interimStep}
-                      collectorAgency={defaultAgency}
-                      collectorCode={defaultCode}
+                      collectorAgency={allStepData.collectionStep.collectorAgency}
+                      collectorCode={allStepData.collectionStep.locationCode}
                       agencyOptions={[]}
                       setStepData={() => { }}
                       readOnly

frontend/src/components/SeedlotRegistrationSteps/InterimStep/constants.ts

@@ -1,10 +1,48 @@
-const pageTexts = {
+import AgencyTextPropsType from '../../../types/AgencyTextPropsType';
+
+export const DATE_FORMAT = 'Y/m/d';
+
+export const agencyFieldsProps: AgencyTextPropsType = {
+  useDefaultCheckbox: {
+    name: 'useCollectorAgency',
+    labelText: 'Use applicant collector agency as interim storage agency'
+  },
+  agencyInput: {
+    titleText: 'Interim agency',
+    invalidText: 'Please choose a valid interim agency, filter with agency number, name or acronym'
+  },
   locationCode: {
-    helperTextDisabled: 'Please select an interim agency before setting the agency location code',
-    helperTextEnabled: '2-digit code that identifies the address of operated office or division',
-    invalidLocationValue: 'Please enter a valid value between 0 and 99',
-    invalidLocationForSelectedAgency: 'This agency location code is not valid for the selected agency, please enter a valid one or change the agency'
+    name: 'locationCode',
+    labelText: 'Interim agency location code'
   }
 };
 
-export default pageTexts;
+export const pageTexts = {
+  interimTitleSection: {
+    title: 'Interim agency',
+    subtitle: 'Enter the interim agency and storage information'
+  },
+  storageDate: {
+    labelTextStart: 'Storage start date',
+    labelTextEnd: 'Storage end date',
+    placeholder: 'yyyy/mm/dd',
+    helperText: 'year/month/day',
+    invalidText: 'Please enter a valid date'
+  },
+  storageFacility: {
+    labelText: 'Storage facility type',
+    outsideLabel: 'Outside covered - OCV',
+    outsideValue: 'OCV',
+    ventilatedLabel: 'Ventilated room - VRM',
+    ventilatedValue: 'VRM',
+    reeferLabel: 'Reefer - RFR',
+    reeferValue: 'RFR',
+    otherLabel: 'Other - OTH',
+    otherValue: 'OTH',
+    otherInput: {
+      placeholder: 'Enter the storage facility type',
+      helperText: 'Describe the new storage facility used',
+      invalidText: 'Storage facility type lenght should be <= 50'
+    }
+  }
+};

frontend/src/components/SeedlotRegistrationSteps/InterimStep/definitions.ts

@@ -1,11 +1,13 @@
-export type InterimForm = {
-  useCollectorAgencyInfo: boolean,
-  agencyName: string,
-  locationCode: string,
-  startDate: string,
-  endDate: string,
-  storageLocation: string,
-  facilityType: string,
+import { BooleanInputType, OptionsInputType, StringInputType } from '../../../types/FormInputType';
+
+type InterimForm = {
+  useCollectorAgencyInfo: BooleanInputType,
+  agencyName: OptionsInputType,
+  locationCode: StringInputType,
+  startDate: StringInputType,
+  endDate: StringInputType,
+  facilityType: StringInputType,
+  facilityOtherType: StringInputType
 }
 
 export default InterimForm;