Sc-20439 : Improve Steps Form (#1122)

* refactor: replace search icon by reset * clean up * refactor: prevent user to change manually established_on date * fix: common name regex should allow subdomain * refactor: updates steps container * fix/sentry: events: 81f0844ddd4e4f0286d34e2c27b01962
trisacrypto · Aug 26, 2023 · cd48833 · cd48833
1 parent 8a510da
commit cd48833
Show file tree

Hide file tree

Showing 11 changed files with 109 additions and 45 deletions.
diff --git a/web/gds-user-ui/src/components/CertificateReview/ReviewsSummary.tsx b/web/gds-user-ui/src/components/CertificateReview/ReviewsSummary.tsx
@@ -23,17 +23,18 @@ import { handleError } from 'utils/utils';
 import useCertificateStepper from 'hooks/useCertificateStepper';
 import { StepEnum } from 'types/enums';
 import { useFetchCertificateStep } from 'hooks/useFetchCertificateStep';
-
+import MinusLoader from 'components/Loader/MinusLoader';
 const ReviewsSummary: React.FC = () => {
   const { isOpen, onClose, onOpen } = useDisclosure();
   // const [shouldReload, setShouldReload] = useState(false);
   const [shouldShowResetFormModal, setShouldShowResetFormModal] = useState(false);
   const { previousStep, updateHasReachSubmitStep, updateCurrentStepState } =
     useCertificateStepper();
   const [isLoadingExport, setIsLoadingExport] = useState(false);
-  const { certificateStep } = useFetchCertificateStep({
-    key: StepEnum.ALL
-  });
+  const { certificateStep, getCertificateStep, isFetchingCertificateStep } =
+    useFetchCertificateStep({
+      key: StepEnum.ALL
+    });
 
   const handleExport = () => {
     const downloadData = async () => {
@@ -82,12 +83,10 @@ const ReviewsSummary: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [shouldShowResetFormModal]);
 
+  // fetch certificate step everytime user land on this page
   useEffect(() => {
-    if (localStorage.getItem('isFirstRender') !== 'false') {
-      localStorage.setItem('isFirstRender', 'false');
-      window.location.reload();
-    }
-  }, []);
+    getCertificateStep();
+  }, [getCertificateStep]);
 
   return (
     <Stack spacing={7}>
@@ -118,24 +117,32 @@ const ReviewsSummary: React.FC = () => {
           </Trans>
         </Text>
       </FormLayout>
-      <BasicDetailsReview />
-      <LegalPersonReview />
-      <ContactsReview />
-      <TrisaImplementationReview />
-      <TrixoReview />
+      {isFetchingCertificateStep ? (
+        <Box>
+          <MinusLoader />
+        </Box>
+      ) : (
+        <>
+          <BasicDetailsReview />
+          <LegalPersonReview />
+          <ContactsReview />
+          <TrisaImplementationReview />
+          <TrixoReview />
 
-      <StepButtons
-        handleNextStep={handleNextStep}
-        handlePreviousStep={handlePreviousStep}
-        isNextButtonDisabled={isNextButtonDisabled}
-        onResetModalClose={handleResetClick}
-        isOpened={isOpen}
-        handleResetForm={handleResetForm}
-        resetFormType={StepEnum.ALL}
-        onClosed={onCloseModalHandler}
-        handleResetClick={handleResetClick}
-        shouldShowResetFormModal={shouldShowResetFormModal}
-      />
+          <StepButtons
+            handleNextStep={handleNextStep}
+            handlePreviousStep={handlePreviousStep}
+            isNextButtonDisabled={isNextButtonDisabled}
+            onResetModalClose={handleResetClick}
+            isOpened={isOpen}
+            handleResetForm={handleResetForm}
+            resetFormType={StepEnum.ALL}
+            onClosed={onCloseModalHandler}
+            handleResetClick={handleResetClick}
+            shouldShowResetFormModal={shouldShowResetFormModal}
+          />
+        </>
+      )}
     </Stack>
   );
 };

diff --git a/web/gds-user-ui/src/components/Contacts/ContactsForm.tsx b/web/gds-user-ui/src/components/Contacts/ContactsForm.tsx
@@ -102,7 +102,13 @@ const ContactsForm: React.FC<ContactsFormProps> = ({ data, shouldResetForm, onRe
 
   const handleNextStepClick = () => {
     if (!isDirty) {
-      nextStep(data);
+      nextStep({
+        step: StepEnum.CONTACTS,
+        form: {
+          ...methods.getValues(),
+          state: currentState()
+        } as any
+      });
     } else {
       const payload = {
         step: StepEnum.CONTACTS,

diff --git a/web/gds-user-ui/src/components/LegalPerson/LegalForm.tsx b/web/gds-user-ui/src/components/LegalPerson/LegalForm.tsx
@@ -78,7 +78,13 @@ const LegalForm: React.FC<LegalFormProps> = ({ data, shouldResetForm, onResetFor
 
   const handleNextStepClick = () => {
     if (!isDirty) {
-      nextStep(updatedCertificateStep ?? data);
+      nextStep({
+        step: StepEnum.LEGAL,
+        form: {
+          ...methods.getValues(),
+          state: currentState()
+        } as any
+      });
     } else {
       const payload = {
         step: StepEnum.LEGAL,

diff --git a/web/gds-user-ui/src/components/RegistrationForm/CertificateRegistrationForm.tsx b/web/gds-user-ui/src/components/RegistrationForm/CertificateRegistrationForm.tsx
@@ -1,7 +1,7 @@
 import {
-  CertificateStepContainer,
-  CertificateStepLabel,
-  CertificateSteps
+  // CertificateStepContainer,
+  CertificateStepLabel
+  // CertificateSteps
 } from './CertificateStepper';
 import BasicDetails from 'components/BasicDetail';
 import LegalPerson from 'components/LegalPerson';
@@ -14,6 +14,33 @@ import { setCurrentStep } from 'application/store/stepper.slice';
 import { getCurrentStep } from 'application/store/selectors/stepper';
 import { useEffect } from 'react';
 
+const renderStep = (step: number) => {
+  let stepContent = null;
+  switch (step) {
+    case 1:
+      stepContent = <BasicDetails />;
+      break;
+    case 2:
+      stepContent = <LegalPerson />;
+      break;
+    case 3:
+      stepContent = <Contacts />;
+      break;
+    case 4:
+      stepContent = <TrisaImplementation />;
+      break;
+    case 5:
+      stepContent = <TrixoQuestionnaire />;
+      break;
+    case 6:
+      stepContent = <CertificateReview />;
+      break;
+    default:
+      stepContent = <BasicDetails />;
+  }
+  return stepContent;
+};
+
 const CertificateRegistrationForm = () => {
   const dispatch = useDispatch();
   const currentStep: number = useSelector(getCurrentStep);
@@ -26,15 +53,10 @@ const CertificateRegistrationForm = () => {
 
   return (
     <>
-      <CertificateSteps>
+      <div>
         <CertificateStepLabel />
-        <CertificateStepContainer key="1" component={<BasicDetails />} />
-        <CertificateStepContainer key="2" component={<LegalPerson />} />
-        <CertificateStepContainer key="3" component={<Contacts />} />
-        <CertificateStepContainer key="4" component={<TrisaImplementation />} />
-        <CertificateStepContainer key="5" component={<TrixoQuestionnaire />} />
-        <CertificateStepContainer key="6" isLast component={<CertificateReview />} />
-      </CertificateSteps>
+        {renderStep(currentStep)}
+      </div>
     </>
   );
 };

diff --git a/web/gds-user-ui/src/components/Section/SearchDirectory.tsx b/web/gds-user-ui/src/components/Section/SearchDirectory.tsx
@@ -34,7 +34,6 @@ import {
   AutoCompleteList
 } from '@choc-ui/chakra-autocomplete';
 
-import { SearchIcon } from '@chakra-ui/icons';
 import { colors } from 'utils/theme';
 import ErrorMessage from 'components/ui/ErrorMessage';
 import countryCodeEmoji, { getCountryName } from 'utils/country';

diff --git a/web/gds-user-ui/src/components/Section/__tests__/__snapshots__/Membership.spec.tsx.snap b/web/gds-user-ui/src/components/Section/__tests__/__snapshots__/Membership.spec.tsx.snap
@@ -894,6 +894,11 @@ exports[`<MembershipGuide /> should match snapshot 1`] = `
                     >
                       🇯🇵 JA
                     </option>
+                    <option
+                      value="en-dh"
+                    >
+                      - DH
+                    </option>
                   </select>
                   <div
                     class="chakra-select__icon-wrapper emotion-13"

diff --git a/web/gds-user-ui/src/components/TrisaImplementation/TrisaImplementationForm.tsx b/web/gds-user-ui/src/components/TrisaImplementation/TrisaImplementationForm.tsx
@@ -91,7 +91,13 @@ const TrisaForm: React.FC<TrisaFormProps> = ({ data, shouldResetForm, onResetFor
 
   const handleNextStepClick = () => {
     if (!isDirty) {
-      nextStep(data);
+      nextStep({
+        step: StepEnum.TRISA,
+        form: {
+          ...methods.getValues(),
+          state: currentState()
+        } as any
+      });
     } else {
       const payload = {
         step: StepEnum.TRISA,

diff --git a/web/gds-user-ui/src/components/TrixoQuestionnaireForm/index.tsx b/web/gds-user-ui/src/components/TrixoQuestionnaireForm/index.tsx
@@ -117,7 +117,13 @@ const TrixoQuestionnaireForm: React.FC<TrixoFormProps> = ({
       updateCertificateStep(payload);
       nextStepRef.current = true;
     } else {
-      nextStep(data);
+      nextStep({
+        step: StepEnum.TRIXO,
+        form: {
+          ...methods.getValues(),
+          state: currentState()
+        } as any
+      });
     }
   };
 

diff --git a/web/gds-user-ui/src/hooks/useCertificateStepper.tsx b/web/gds-user-ui/src/hooks/useCertificateStepper.tsx
@@ -50,6 +50,7 @@ const useCertificateStepper = () => {
   };
 
   const nextStep = (data?: any) => {
+    console.log('[nextStep] data', data);
     const errorFields = data?.errors;
     const stepNumber = getStepNumber(data?.step) || currentStep;
     console.log('[nextStep] errorFields', errorFields);
@@ -58,6 +59,7 @@ const useCertificateStepper = () => {
       dispatch(setStepStatus({ step: stepNumber, status: LSTATUS.ERROR }));
     } else {
       // setInitialState(data?.form);
+      console.log('[nextStep] setStepStatus', stepNumber);
       dispatch(setStepStatus({ step: stepNumber, status: LSTATUS.COMPLETE }));
     }
     if (currentStep === 5) {

diff --git a/web/gds-user-ui/src/modules/verify/__snapshots__/verify.spec.tsx.snap b/web/gds-user-ui/src/modules/verify/__snapshots__/verify.spec.tsx.snap
@@ -688,6 +688,11 @@ exports[`<VerifyPage /> should match snapshot 1`] = `
                     >
                       🇯🇵 JA
                     </option>
+                    <option
+                      value="en-dh"
+                    >
+                      - DH
+                    </option>
                   </select>
                   <div
                     class="chakra-select__icon-wrapper emotion-13"

diff --git a/web/gds-user-ui/src/utils/axios.ts b/web/gds-user-ui/src/utils/axios.ts
@@ -46,10 +46,10 @@ axiosInstance.interceptors.response.use(
   (response) => {
     return response;
   },
-  async (error) => {
+  async (error: any) => {
     // let _retry = 0;
-    const originalRequest = error.config;
-    originalRequest._retry = originalRequest._retry || 0;
+    const originalRequest = error?.config;
+    originalRequest._retry = originalRequest?._retry || 0;
     //
 
     if (error && !error.response) {