From cd48833b8dd061133c1c1aaf4cca9be7170e2db2 Mon Sep 17 00:00:00 2001 From: Cletus Razakou Date: Sat, 26 Aug 2023 06:09:31 -0400 Subject: [PATCH] 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 --- .../CertificateReview/ReviewsSummary.tsx | 59 +++++++++++-------- .../src/components/Contacts/ContactsForm.tsx | 8 ++- .../src/components/LegalPerson/LegalForm.tsx | 8 ++- .../CertificateRegistrationForm.tsx | 44 ++++++++++---- .../components/Section/SearchDirectory.tsx | 1 - .../__snapshots__/Membership.spec.tsx.snap | 5 ++ .../TrisaImplementationForm.tsx | 8 ++- .../TrixoQuestionnaireForm/index.tsx | 8 ++- .../src/hooks/useCertificateStepper.tsx | 2 + .../verify/__snapshots__/verify.spec.tsx.snap | 5 ++ web/gds-user-ui/src/utils/axios.ts | 6 +- 11 files changed, 109 insertions(+), 45 deletions(-) diff --git a/web/gds-user-ui/src/components/CertificateReview/ReviewsSummary.tsx b/web/gds-user-ui/src/components/CertificateReview/ReviewsSummary.tsx index b0f10b254..bb2ef36dd 100644 --- a/web/gds-user-ui/src/components/CertificateReview/ReviewsSummary.tsx +++ b/web/gds-user-ui/src/components/CertificateReview/ReviewsSummary.tsx @@ -23,7 +23,7 @@ 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); @@ -31,9 +31,10 @@ const ReviewsSummary: React.FC = () => { 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 ( @@ -118,24 +117,32 @@ const ReviewsSummary: React.FC = () => { - - - - - + {isFetchingCertificateStep ? ( + + + + ) : ( + <> + + + + + - + + + )} ); }; diff --git a/web/gds-user-ui/src/components/Contacts/ContactsForm.tsx b/web/gds-user-ui/src/components/Contacts/ContactsForm.tsx index 72fc236a2..80d528d34 100644 --- 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 = ({ 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 index 040c99cba..9f3b03771 100644 --- 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 = ({ 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 index a76d9fbe6..50a4d8cdf 100644 --- 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 = ; + break; + case 2: + stepContent = ; + break; + case 3: + stepContent = ; + break; + case 4: + stepContent = ; + break; + case 5: + stepContent = ; + break; + case 6: + stepContent = ; + break; + default: + stepContent = ; + } + return stepContent; +}; + const CertificateRegistrationForm = () => { const dispatch = useDispatch(); const currentStep: number = useSelector(getCurrentStep); @@ -26,15 +53,10 @@ const CertificateRegistrationForm = () => { return ( <> - +
- } /> - } /> - } /> - } /> - } /> - } /> - + {renderStep(currentStep)} +
); }; diff --git a/web/gds-user-ui/src/components/Section/SearchDirectory.tsx b/web/gds-user-ui/src/components/Section/SearchDirectory.tsx index fe6f57b4b..41db88dc8 100644 --- 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 index c1fe51e19..b37732d01 100644 --- 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[` should match snapshot 1`] = ` > 🇯🇵 JA +
= ({ 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 index 688ee49d6..4fb2b571f 100644 --- 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 = ({ 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 index 394be6eb3..937286776 100644 --- 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 index c7d7a1e76..be9eea3ce 100644 --- 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[` should match snapshot 1`] = ` > 🇯🇵 JA +
{ 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) {