Fix bug displaying registration confirmation modal multiple times (#1161

)

* Add comments and print statements to aid debugging

* Update variable to disable button if the registration is incomplete

* Add optional chaining to handleSubmitRegister and update useEffect dependency array

* Add useSubmissionStatus hook, set is network sent state to false after user returns to review page

* Remove debugging comment

web/gds-user-ui/src/components/CertificateReview/index.tsx

@@ -23,7 +23,7 @@ const ReviewsSummary = lazy(() => import('./ReviewsSummary'));
 const CertificateReview = () => {
   const toast = useToast();
   const dispatch = useDispatch();
-  const { testnetSubmissionState, mainnetSubmissionState } = useCertificateStepper();
+  const { testnetSubmissionState, mainnetSubmissionState, jumpToLastStep } = useCertificateStepper();
 
   const hasReachSubmitStep: boolean = useSelector(
     (state: RootStateOrAny) => state.stepper.hasReachSubmitStep
@@ -40,7 +40,7 @@ const CertificateReview = () => {
       if (network === STEPPER_NETWORK.TESTNET) {
         setIsTestNetSubmitting(true);
         const response = await submitTestnetRegistration();
-        if (response.status === 200) {
+        if (response?.status === 200) {
           await getRefreshToken(response?.data?.refresh_token);
           setIsTestNetSubmitting(false);
           setIsTestNetSent(true);
@@ -89,6 +89,13 @@ const CertificateReview = () => {
     }
   }, [isTestNetSent, isMainNetSent, dispatch]);
 
+  const handleJumpToLastStep = (e: React.FormEvent) => {
+    e.preventDefault();
+    jumpToLastStep();
+    setIsTestNetSent(false);
+    setIsMainNetSent(false);
+  };
+
   if (!hasReachSubmitStep) {
     return <ReviewsSummary />;
   }
@@ -102,6 +109,7 @@ const CertificateReview = () => {
         result={result}
         isTestNetSubmitting={isTestNetSubmitting}
         isMainNetSubmitting={isMainNetSubmitting}
+        handleJumpToLastStep={handleJumpToLastStep}
       />
     </Suspense>
   );

web/gds-user-ui/src/components/ReviewSubmit/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import {
   Button,
   Heading,
@@ -15,18 +15,15 @@ import FormLayout from 'layouts/FormLayout';
 import ConfirmationModal from 'components/ReviewSubmit/ConfirmationModal';
 import { t, Trans } from '@lingui/macro';
 import useCertificateStepper from 'hooks/useCertificateStepper';
-import { useSelector } from 'react-redux';
-// import { useNavigate } from 'react-router-dom';
 import { STEPPER_NETWORK } from 'utils/constants';
-import {
-  getTestNetSubmittedStatus,
-  getMainNetSubmittedStatus
-} from 'application/store/selectors/stepper';
 
 import WarningBox from 'components/WarningBox';
 import { setHasReachSubmitStep } from 'application/store/stepper.slice';
 import { useAppDispatch } from 'application/store';
 import { StepsIndexes } from 'constants/steps';
+import { useFetchCertificateStep } from 'hooks/useFetchCertificateStep';
+import { StepEnum } from 'types/enums';
+import useSubmissionStatus from 'modules/dashboard/registration/hooks/useSubmissionStatus';
 
 interface ReviewSubmitProps {
   onSubmitHandler: (e: React.FormEvent, network: string) => void;
@@ -35,6 +32,7 @@ interface ReviewSubmitProps {
   result?: any;
   isTestNetSubmitting?: boolean;
   isMainNetSubmitting?: boolean;
+  handleJumpToLastStep?: (e: React.FormEvent) => void;
 }
 
 const ReviewSubmit: React.FC<ReviewSubmitProps> = ({
@@ -43,45 +41,40 @@ const ReviewSubmit: React.FC<ReviewSubmitProps> = ({
   isMainNetSent,
   result,
   isTestNetSubmitting,
-  isMainNetSubmitting
+  isMainNetSubmitting,
+  handleJumpToLastStep,
 }) => {
-  const isTestNetSubmitted: boolean = useSelector(getTestNetSubmittedStatus);
-  const isMainNetSubmitted: boolean = useSelector(getMainNetSubmittedStatus);
+  const { certificateStep } = useFetchCertificateStep({ key: StepEnum.ALL });
   const { isOpen, onOpen, onClose } = useDisclosure();
   const isSent = isTestNetSent || isMainNetSent;
-  const [testnet, setTestnet] = useState(false);
-  const [mainnet, setMainnet] = useState(false);
-  const { jumpToLastStep, jumpToStep } = useCertificateStepper();
-  // const navigate = useNavigate();
+  const { jumpToStep } = useCertificateStepper();
+  const { status } = useSubmissionStatus();
   const dispatch = useAppDispatch();
+
+  // Display a warning box if the user has reached the submit step but not completed the
+  // TRISA implementation step for one of the networks.
+  const mainnetCommonName = certificateStep?.form?.mainnet?.common_name;
+  const mainnetEndpoint = certificateStep?.form?.mainnet?.endpoint;
+  const testnetCommonName = certificateStep?.form?.testnet?.common_name;
+  const testnetEndpoint = certificateStep?.form?.testnet?.endpoint;
+
+  const isMainnetNetworkIncomplete = !mainnetCommonName || !mainnetEndpoint;
+  const isTestnetNetworkIncomplete = !testnetCommonName || !testnetEndpoint;
+
+  const isTestNetSubmitted = status?.data?.testnet_submitted;
+  const isMainNetSubmitted = status?.data?.mainnet_submitted;
 
-  const isTestnetNetworkFieldsIncomplete = false;
-  const isMainnetNetworkIncomplete = false;
-  useEffect(() => {
-    if (isTestNetSubmitted) {
-      setTestnet(true);
-    }
-    if (isMainNetSubmitted) {
-      setMainnet(true);
-    }
-  }, [isTestNetSubmitted, isMainNetSubmitted]);
   useEffect(() => {
     if (isSent) {
       onOpen();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isTestNetSent, isMainNetSent]);
-
-  const handleJumpToLastStep = () => {
-    jumpToLastStep();
-    // navigate('/dashboard/certificate/registration');
-  };
+  }, [isSent]);
 
   const handleJumpToTrisaImplementationStep = () => {
     dispatch(setHasReachSubmitStep({ hasReachSubmitStep: false }));
     jumpToStep(StepsIndexes.TRISA_IMPLEMENTATION);
   };
-
   return (
     <>
       <Flex>
@@ -163,7 +156,7 @@ const ReviewSubmit: React.FC<ReviewSubmitProps> = ({
                   .
                 </Text>
 
-                {isTestnetNetworkFieldsIncomplete ? (
+                {isTestnetNetworkIncomplete ? (
                   <WarningBox>
                     <Text>
                       <Trans>
@@ -208,7 +201,7 @@ const ReviewSubmit: React.FC<ReviewSubmitProps> = ({
                     bgColor: '#f55c35'
                   }}
                   isLoading={isTestNetSubmitting}
-                  isDisabled={testnet || isTestnetNetworkFieldsIncomplete}
+                  isDisabled={isTestnetNetworkIncomplete || isTestNetSubmitted }
                   data-testid="testnet-submit-btn"
                   onClick={(e) => {
                     onSubmitHandler(e, STEPPER_NETWORK.TESTNET);
@@ -299,7 +292,7 @@ const ReviewSubmit: React.FC<ReviewSubmitProps> = ({
                     bgColor: '#189fda'
                   }}
                   isLoading={isMainNetSubmitting}
-                  isDisabled={mainnet || isMainnetNetworkIncomplete}
+                  isDisabled={isMainnetNetworkIncomplete || isMainNetSubmitted }
                   whiteSpace="normal"
                   boxShadow="lg"
                   data-testid="mainnet-submit-btn"

web/gds-user-ui/src/modules/dashboard/certificate/lib/trixoQuestionnaireValidationSchema.ts

@@ -57,7 +57,6 @@ export const isTrixoQuestionnaireValid = async (data: any) => {
     });
     return true;
   } catch (error) {
-    console.log('[isTrixoQuestionnaireValid] error', error);
     return false;
   }
 };

web/gds-user-ui/src/modules/dashboard/registration/hooks/useSubmissionStatus.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import { getSubmissionStatus } from "../service";
+import { upperCaseFirstLetter } from "utils/utils";
+
+const useSubmissionStatus = () => {
+  const [error, setError] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [status, setStatus] = useState<any>(null);
+
+    const fetchSubmissionStatus = async () => {
+      setIsLoading(true);
+      try {
+        const response = await getSubmissionStatus();
+        if (!response) setError('No data found');
+        setStatus(response);
+      } catch (e: any) {
+        if (!e?.data?.success) {
+          setError(upperCaseFirstLetter(e?.data?.error));
+        } else {
+          setError('Something went wrong.');
+        }
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    useEffect(() => {
+      fetchSubmissionStatus();
+    }, []);
+
+    return { status, isLoading, error };
+  };
+
+export default useSubmissionStatus;