feat: 1610 notification for greyed out submission button

frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/SingleOwnerInfo/index.tsx

@@ -35,15 +35,13 @@ interface SingleOwnerInfoProps {
   setState: Function,
   readOnly?: boolean,
   isReview?: boolean
-  isOwnershipStep?: boolean
 }
 
 const SingleOwnerInfo = ({
   ownerInfo, defaultAgency, defaultCode, fundingSourcesQuery,
   methodsOfPaymentQuery, deleteAnOwner, checkPortionSum, setState,
-  readOnly, isReview, isOwnershipStep
+  readOnly, isReview
 }: SingleOwnerInfoProps) => {
-  const isReadOnly = readOnly && (isOwnershipStep || !isReview);
   const [ownerPortionInvalidText, setOwnerPortionInvalidText] = useState<string>(
     inputText.portion.invalidText
   );
@@ -153,7 +151,7 @@ const SingleOwnerInfo = ({
                   locationCode: StringInputType
                 ) => setClientAndCode(client, locationCode)
               }
-              readOnly={isReadOnly}
+              readOnly={readOnly}
             />
           </Column>
           <Column className={`single-owner-info-col ${colsClass}`} xs={4} sm={4} md={4} lg={4}>
@@ -171,7 +169,7 @@ const SingleOwnerInfo = ({
               }}
               invalid={ownerInfo.ownerPortion.isInvalid}
               invalidText={ownerPortionInvalidText}
-              readOnly={isReadOnly}
+              readOnly={readOnly}
             />
           </Column>
           <Column className={`single-owner-info-col ${colsClass}`} xs={4} sm={4} md={4} lg={4}>
@@ -191,7 +189,7 @@ const SingleOwnerInfo = ({
                   onWheel={(e: React.ChangeEvent<HTMLInputElement>) => e.target.blur()}
                   invalid={ownerInfo.reservedPerc.isInvalid}
                   invalidText={reservedInvalidText}
-                  readOnly={isReadOnly}
+                  readOnly={readOnly}
                 />
               </div>
               <div className="reserved-surplus-input">
@@ -209,7 +207,7 @@ const SingleOwnerInfo = ({
                   onWheel={(e: React.ChangeEvent<HTMLInputElement>) => e.target.blur()}
                   invalid={ownerInfo.surplusPerc.isInvalid}
                   invalidText={surplusInvalidText}
-                  readOnly={isReadOnly}
+                  readOnly={readOnly}
                 />
               </div>
             </div>
@@ -236,7 +234,7 @@ const SingleOwnerInfo = ({
                     onChange={(e: ComboBoxEvent) => handleFundingSource(e.selectedItem)}
                     invalid={ownerInfo.fundingSource.isInvalid}
                     invalidText={inputText.funding.invalidText}
-                    readOnly={isReadOnly}
+                    readOnly={readOnly}
                   />
                 )
             }
@@ -261,7 +259,7 @@ const SingleOwnerInfo = ({
                     onChange={(e: ComboBoxEvent) => handleMethodOfPayment(e.selectedItem)}
                     invalid={ownerInfo.methodOfPayment.isInvalid}
                     invalidText={inputText.payment.invalidText}
-                    readOnly={isReadOnly}
+                    readOnly={readOnly}
                   />
 
                 )
@@ -279,7 +277,7 @@ const SingleOwnerInfo = ({
                     className="owner-mod-btn"
                     renderIcon={TrashCan}
                     onClick={() => deleteAnOwner(ownerInfo.id)}
-                    disabled={isReadOnly}
+                    disabled={readOnly}
                   >
                     Delete owner
                   </Button>

frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/index.tsx

@@ -12,6 +12,7 @@ import { Add } from '@carbon/icons-react';
 
 import ClassAContext from '../../../views/Seedlot/ContextContainerClassA/context';
 import getMethodsOfPayment from '../../../api-service/methodsOfPaymentAPI';
+import { ForestClientType } from '../../../types/ForestClientTypes/ForestClientType';
 import MultiOptionsObj from '../../../types/MultiOptionsObject';
 import { getForestClientByNumberOrAcronym } from '../../../api-service/forestClientsAPI';
 import { EmptyMultiOptObj } from '../../../shared-constants/shared-constants';
@@ -39,7 +40,6 @@ import {
 import { MAX_OWNERS } from './constants';
 
 import './styles.scss';
-import { ForestClientType } from '../../../types/ForestClientTypes/ForestClientType';
 
 type OwnershipStepProps = {
   isReview?: boolean
@@ -48,7 +48,7 @@ type OwnershipStepProps = {
 /*
   Component
 */
-const OwnershipStep = ({ isReview }: OwnershipStepProps) => {
+const OwnershipStep = ({ isReview = false }: OwnershipStepProps) => {
   const {
     allStepData: { ownershipStep: state },
     setStepData,
@@ -59,6 +59,7 @@ const OwnershipStep = ({ isReview }: OwnershipStepProps) => {
   } = useContext(ClassAContext);
 
   const [accordionControls, setAccordionControls] = useState<AccordionCtrlObj>({});
+  const [originalSeedQty, setOriginalSeedQty] = useState<number>(0);
 
   const refControl = useRef<any>({});
 
@@ -109,11 +110,11 @@ const OwnershipStep = ({ isReview }: OwnershipStepProps) => {
     cacheTime: THREE_HALF_HOURS
   });
 
-  const getSeedlotBySeedlotNumberQuery = useQuery(
-    ['get-seedlot-by-seedlotNumber', seedlotNumber],
-    () => getSeedlotFromOracleDbBySeedlotNumber(seedlotNumber ?? ''),
-    { enabled: !!seedlotNumber }
-  );
+  const getSeedlotBySeedlotNumberQuery = useQuery({
+    queryKey: ['get-seedlot-by-seedlotNumber', seedlotNumber],
+    queryFn: () => getSeedlotFromOracleDbBySeedlotNumber(seedlotNumber ?? ''),
+    enabled: isReview && !!seedlotNumber
+  });
 
   // Set default method of payment for the first owner.
   useEffect(() => {
@@ -149,9 +150,13 @@ const OwnershipStep = ({ isReview }: OwnershipStepProps) => {
     }))
   });
 
-  const getFcQuery = (clientNumber: string): ForestClientType | undefined => qc.getQueryData(['forest-clients', clientNumber]);
+  useEffect(() => {
+    if (getSeedlotBySeedlotNumberQuery.status === 'success') {
+      setOriginalSeedQty(getSeedlotBySeedlotNumberQuery.data.data.originalSeedQty);
+    }
+  }, [getSeedlotBySeedlotNumberQuery.status, getSeedlotBySeedlotNumberQuery.fetchStatus]);
 
-  const originalSeedQty = getSeedlotBySeedlotNumberQuery.data?.data?.originalSeedQty ?? 0;
+  const getFcQuery = (clientNumber: string): ForestClientType | undefined => qc.getQueryData(['forest-clients', clientNumber]);
 
   return (
     <div>
@@ -221,7 +226,6 @@ const OwnershipStep = ({ isReview }: OwnershipStepProps) => {
                   }
                   readOnly={isFormSubmitted || originalSeedQty > 0}
                   isReview={isReview}
-                  isOwnershipStep
                 />
               </AccordionItem>
             ))

frontend/src/views/Seedlot/SeedlotRegFormClassA/RegPage.tsx

@@ -60,6 +60,12 @@ const RegPage = () => {
 
   const { isTscAdmin } = useContext(AuthContext);
 
+  const disableSubmit = !allStepCompleted
+    || saveStatus === 'conflict'
+    || !seedlotData
+    || (seedlotData.seedlotStatus.seedlotStatusCode !== 'PND'
+    && seedlotData.seedlotStatus.seedlotStatusCode !== 'INC');
+
   return (
     <div className="seedlot-registration-page">
       <FlexGrid fullWidth>
@@ -176,6 +182,21 @@ const RegPage = () => {
           </Column>
         </Row>
         <Row className="seedlot-registration-button-row">
+          {
+            formStep === 5 && disableSubmit
+              ? (
+                <Column sm={4} md={8} lg={16} xlg={12}>
+                  <InlineNotification
+                    lowContrast
+                    kind="warning"
+                    title="Missing fields:"
+                    subtitle="Submit registration is disabled until mandatory fields are filled in
+                              correctly. You can check for blank or invalid fields on every step."
+                  />
+                </Column>
+              )
+              : null
+          }
           <Grid narrow>
             <Column sm={4} md={3} lg={3} xlg={4}>
               {
@@ -237,13 +258,7 @@ const RegPage = () => {
                     <SubmitModal
                       btnText="Submit Registration"
                       renderIconName="CheckmarkOutline"
-                      disableBtn={
-                        !allStepCompleted
-                        || saveStatus === 'conflict'
-                        || !seedlotData
-                        || (seedlotData.seedlotStatus.seedlotStatusCode !== 'PND'
-                        && seedlotData.seedlotStatus.seedlotStatusCode !== 'INC')
-                      }
+                      disableBtn={disableSubmit}
                       submitFn={() => {
                         submitSeedlot.mutate(
                           getSeedlotPayload(