Feat/449 step 2 validation fe

frontend/src/components/ApplicantAgencyFields/definitions.ts

@@ -11,6 +11,8 @@ interface ApplicantAgencyFieldsProps {
   defaultAgency: string;
   defaultCode: string;
   setAllValues: Function;
+  showDefaultCheckbox?: boolean;
+  inputsColSize?: number;
   readOnly?: boolean;
 }
 

frontend/src/components/ApplicantAgencyFields/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Row, Column, TextInput, Checkbox, ComboBox, InlineLoading
 } from '@carbon/react';
@@ -9,6 +9,7 @@ import { getForestClientLocation } from '../../api-service/forestClientsAPI';
 
 import ComboBoxEvent from '../../types/ComboBoxEvent';
 import MultiOptionsObj from '../../types/MultiOptionsObject';
+import { FormInputType } from '../../types/FormInputType';
 import { LOCATION_CODE_LIMIT } from '../../shared-constants/shared-constants';
 import { formatLocationCode } from '../SeedlotRegistrationSteps/CollectionStep/utils';
 import { FilterObj, filterInput } from '../../utils/filterUtils';
@@ -20,29 +21,36 @@ import supportTexts from './constants';
 import './styles.scss';
 
 const ApplicantAgencyFields = ({
-  useDefault, agency, locationCode, fieldsProps, agencyOptions,
-  defaultAgency, defaultCode, setAllValues, readOnly
+  useDefault, agency, locationCode, fieldsProps, agencyOptions, defaultAgency,
+  defaultCode, setAllValues, showDefaultCheckbox = true, inputsColSize = 6, readOnly
 }: ApplicantAgencyFieldsProps) => {
-  const agencyClone = structuredClone(agency);
-  const locationCodeClone = structuredClone(locationCode);
-  const useDefaultClone = structuredClone(useDefault);
-
-  const [forestClientNumber, setForestClientNumber] = useState<string>(
-    agencyClone.value ? getForestClientNumber(agencyClone.value) : ''
+  const [agencyClone, setAgencyClone] = useState<FormInputType & {value: string}>(agency);
+  const [locationCodeClone, setLocationCodeClone] = useState<FormInputType & {value: string}>(
+    locationCode
+  );
+  const [useDefaultClone, setUseDefaultClone] = useState<FormInputType & {value: boolean}>(
+    useDefault
   );
+
+  const [shouldUpdateValues, setShouldUpdateValues] = useState<boolean>(false);
+
+  const [forestClientNumber, setForestClientNumber] = useState<string>('');
   const [invalidLocationMessage, setInvalidLocationMessage] = useState<string>(
     locationCodeClone.isInvalid && agencyClone.value
       ? supportTexts.locationCode.invalidLocationForSelectedAgency
       : supportTexts.locationCode.invalidText
   );
   const [locationCodeHelperText, setLocationCodeHelperText] = useState<string>(
-    supportTexts.locationCode.helperTextEnabled
+    supportTexts.locationCode.helperTextDisabled
   );
 
   const updateAfterLocValidation = (isInvalid: boolean) => {
-    locationCodeClone.isInvalid = isInvalid;
+    setLocationCodeClone({
+      ...locationCodeClone,
+      isInvalid
+    });
     setLocationCodeHelperText(supportTexts.locationCode.helperTextEnabled);
-    setAllValues(agencyClone, locationCodeClone, useDefaultClone);
+    setShouldUpdateValues(true);
   };
 
   const validateLocationCodeMutation = useMutation({
@@ -64,11 +72,22 @@ const ApplicantAgencyFields = ({
         : supportTexts.locationCode.helperTextDisabled
     );
 
-    agencyClone.value = checked ? defaultAgency : '';
-    locationCodeClone.value = checked ? defaultCode : '';
-    useDefaultClone.value = checked;
-
-    setAllValues(agencyClone, locationCodeClone, useDefaultClone);
+    setAgencyClone({
+      ...agencyClone,
+      value: checked ? defaultAgency : '',
+      isInvalid: false
+    });
+    setLocationCodeClone({
+      ...locationCodeClone,
+      value: checked ? defaultCode : '',
+      isInvalid: false
+    });
+    setUseDefaultClone({
+      ...useDefaultClone,
+      value: checked
+    });
+
+    setShouldUpdateValues(true);
   };
 
   const handleAgencyInput = (value: MultiOptionsObj) => {
@@ -78,50 +97,78 @@ const ApplicantAgencyFields = ({
         ? supportTexts.locationCode.helperTextEnabled
         : supportTexts.locationCode.helperTextDisabled
     );
-    agencyClone.value = value ? value.label : '';
-    locationCodeClone.value = value ? locationCodeClone.value : '';
-    setAllValues(agencyClone, locationCodeClone, useDefaultClone);
+    setAgencyClone({
+      ...agencyClone,
+      value: value ? value.label : ''
+    });
+    setLocationCodeClone({
+      ...locationCodeClone,
+      value: value ? locationCodeClone.value : ''
+    });
+    setShouldUpdateValues(true);
   };
 
   const handleLocationCodeChange = (value: string) => {
-    locationCodeClone.value = value.slice(0, LOCATION_CODE_LIMIT);
+    const locationCodeUpdated = { ...locationCodeClone };
+    locationCodeUpdated.value = value.slice(0, LOCATION_CODE_LIMIT);
     const isInRange = validator.isInt(value, { min: 0, max: 99 });
     if (!isInRange) {
       setInvalidLocationMessage(supportTexts.locationCode.invalidText);
-      locationCodeClone.isInvalid = true;
+      locationCodeUpdated.isInvalid = true;
     }
-    setAllValues(agencyClone, locationCodeClone, useDefaultClone);
+    setLocationCodeClone(locationCodeUpdated);
   };
 
   const handleLocationCodeBlur = (value: string) => {
     const formattedCode = value.length ? formatLocationCode(value) : '';
+    setLocationCodeClone({
+      ...locationCodeClone,
+      value: formattedCode
+    });
+    setShouldUpdateValues(true);
     if (formattedCode === '') return;
-    locationCodeClone.value = formattedCode;
-    setAllValues(agencyClone, locationCodeClone, useDefaultClone);
     if (forestClientNumber) {
-      validateLocationCodeMutation.mutate([forestClientNumber, formattedCode]);
       setLocationCodeHelperText('');
+      validateLocationCodeMutation.mutate([forestClientNumber, formattedCode]);
     }
   };
 
+  useEffect(() => {
+    if (shouldUpdateValues) {
+      setAllValues(agencyClone, locationCodeClone, useDefaultClone);
+    } else {
+      setAgencyClone(agency);
+      setLocationCodeClone(locationCode);
+      setUseDefaultClone(useDefault);
+      setForestClientNumber(agency.value ? getForestClientNumber(agencyClone.value) : '');
+    }
+    setShouldUpdateValues(false);
+  }, [useDefault, agency, locationCode, shouldUpdateValues]);
+
   return (
     <div className="agency-information-section">
+      {
+        showDefaultCheckbox
+          ? (
+            <Row className="agency-information-row">
+              <Column sm={4} md={8} lg={16} xlg={16}>
+                <Checkbox
+                  id={useDefaultClone.id}
+                  name={fieldsProps.useDefaultCheckbox.name}
+                  labelText={fieldsProps.useDefaultCheckbox.labelText}
+                  readOnly={readOnly}
+                  checked={useDefaultClone.value}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    handleDefaultCheckBox(e.target.checked);
+                  }}
+                />
+              </Column>
+            </Row>
+          )
+          : null
+      }
       <Row className="agency-information-row">
-        <Column sm={4} md={8} lg={16} xlg={16}>
-          <Checkbox
-            id={useDefaultClone.id}
-            name={fieldsProps.useDefaultCheckbox.name}
-            labelText={fieldsProps.useDefaultCheckbox.labelText}
-            readOnly={readOnly}
-            checked={useDefaultClone.value}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              handleDefaultCheckBox(e.target.checked);
-            }}
-          />
-        </Column>
-      </Row>
-      <Row className="agency-information-row">
-        <Column sm={4} md={4} lg={8} xlg={6}>
+        <Column sm={4} md={4} lg={inputsColSize} xlg={inputsColSize}>
           <ComboBox
             id={agencyClone.id}
             name={fieldsProps.agencyInput.name}
@@ -130,7 +177,7 @@ const ApplicantAgencyFields = ({
             helperText={supportTexts.agency.helperText}
             invalidText={fieldsProps.agencyInput.invalidText}
             items={agencyOptions}
-            readOnly={useDefaultClone.value || readOnly}
+            readOnly={(showDefaultCheckbox ? useDefaultClone.value : false) || readOnly}
             selectedItem={agencyClone.value}
             onChange={(e: ComboBoxEvent) => handleAgencyInput(e.selectedItem)}
             invalid={agencyClone.isInvalid}
@@ -140,7 +187,7 @@ const ApplicantAgencyFields = ({
             size="md"
           />
         </Column>
-        <Column sm={4} md={4} lg={8} xlg={6}>
+        <Column sm={4} md={4} lg={inputsColSize} xlg={inputsColSize}>
           <TextInput
             id={locationCodeClone.id}
             className="location-code-input"
@@ -152,14 +199,15 @@ const ApplicantAgencyFields = ({
             helperText={locationCodeHelperText}
             invalid={locationCodeClone.isInvalid}
             invalidText={invalidLocationMessage}
-            readOnly={useDefaultClone.value || readOnly}
+            readOnly={(showDefaultCheckbox ? useDefaultClone.value : false) || readOnly}
             disabled={!forestClientNumber}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               handleLocationCodeChange(e.target.value);
             }}
             onWheel={(e: React.ChangeEvent<HTMLInputElement>) => e.target.blur()}
             onBlur={(e: React.ChangeEvent<HTMLInputElement>) => {
-              if (!e.target.readOnly) {
+              if (!e.target.readOnly
+                  && locationCode.value !== e.target.value) {
                 handleLocationCodeBlur(e.target.value);
               }
             }}

frontend/src/components/ApplicantAgencyFields/styles.scss

@@ -1,11 +1,51 @@
+@use '@bcgov-nr/nr-theme/design-tokens/variables.scss' as vars;
 @use '@carbon/type';
 
 .agency-information-section {
   .agency-information-row {
     margin-bottom: 1.5rem;
   }
 
+  .#{vars.$bcgov-prefix}--combo-box--readonly {
+    border-block-end: 0;
+
+    input[role=combobox] {
+      background-color: transparent;
+      padding-inline-end: 0;
+      --#{vars.$bcgov-prefix}-layout-density-padding-inline-local: 0;
+      border-block-end: 0;
+    }
+
+    button,
+    & + .#{vars.$bcgov-prefix}--form__helper-text {
+      display: none;
+    }
+  }
+
+  .#{vars.$bcgov-prefix}--combo-box {
+    li,
+    .#{vars.$bcgov-prefix}--list-box__menu-item__option {
+      white-space: normal;
+      block-size: auto;
+    }
+  }
+
+
+  .#{vars.$bcgov-prefix}--text-input-wrapper--readonly {
+    input[type=number] {
+      background-color: transparent;
+      --bx-layout-density-padding-inline-local: 0;
+      border-block-end: 0;
+    }
+
+    .#{vars.$bcgov-prefix}--form__helper-text {
+      display: none;
+    }
+  }
+
   .location-code-input {
+    padding-top: 0.1rem;
+
     input::-webkit-outer-spin-button,
     input::-webkit-inner-spin-button {
       -webkit-appearance: none;

frontend/src/components/FormReview/index.tsx

@@ -20,7 +20,7 @@ import InterimStorage from '../SeedlotRegistrationSteps/InterimStep';
 import CollectionStep from '../SeedlotRegistrationSteps/CollectionStep';
 import ExtractionAndStorage from '../SeedlotRegistrationSteps/ExtractionAndStorageStep';
 import { OrchardForm } from '../SeedlotRegistrationSteps/OrchardStep/definitions';
-import { initCollectionState } from '../../views/Seedlot/SeedlotRegistrationForm/utils';
+import { initCollectionState, initOwnershipState } from '../../views/Seedlot/SeedlotRegistrationForm/utils';
 
 const mockFormData = [
   {
@@ -88,25 +88,7 @@ const interimStorageMock = {
   facilityType: 'VRM'
 };
 
-const ownershipMock = {
-  id: 0,
-  useDefaultAgencyInfo: true,
-  ownerAgency: '0032 - Strong Seeds Orchard - SSO',
-  ownerCode: '32',
-  ownerPortion: '100',
-  reservedPerc: '100',
-  surplusPerc: '0',
-  fundingSource: {
-    code: 'LFP',
-    description: 'Licensee Funded Program',
-    label: 'LFP - Licensee Funded Program'
-  },
-  methodOfPayment: {
-    code: 'ITC',
-    description: 'Invoice to client address',
-    label: 'ITC - Invoice to client address'
-  }
-};
+const ownershipMock = initOwnershipState(defaultAgency, defaultCode);
 
 const collectionMock = initCollectionState(defaultAgency, defaultCode);