Display correct color in registration form stepper (#1153)

trisacrypto · Jan 24, 2024 · 9c73ded · 9c73ded
1 parent e465015
commit 9c73ded
Show file tree

Hide file tree

Showing 14 changed files with 80 additions and 99 deletions.
diff --git a/web/gds-user-ui/src/components/CertificateReview/index.tsx b/web/gds-user-ui/src/components/CertificateReview/index.tsx
@@ -18,6 +18,7 @@ import { getRefreshToken } from 'utils/auth0.helper';
 import { STEPPER_NETWORK } from 'utils/constants';
 import { getUserCurrentOrganizationService } from 'modules/auth/login/auth.service';
 import { setUserOrganization } from 'modules/auth/login/user.slice';
+import { upperCaseFirstLetter } from 'utils/utils';
 const ReviewsSummary = lazy(() => import('./ReviewsSummary'));
 const CertificateReview = () => {
   const toast = useToast();
@@ -64,11 +65,11 @@ const CertificateReview = () => {
       setIsMainNetSubmitting(false);
       setIsTestNetSubmitting(false);
 
-      if (!err?.response?.data?.success) {
+      if (!err?.data?.success) {
         toast({
           position: 'top-right',
           title: t`Error Submitting Certificate`,
-          description: t`${err?.response?.data?.error}`,
+          description: t`${upperCaseFirstLetter(err?.data?.error)}`,
           status: 'error',
           duration: 5000,
           isClosable: true

diff --git a/web/gds-user-ui/src/components/Contacts/ContactsForm.tsx b/web/gds-user-ui/src/components/Contacts/ContactsForm.tsx
@@ -15,6 +15,7 @@ import FormLayout from 'layouts/FormLayout';
 import { StepsIndexes } from 'constants/steps';
 import { isProdEnv } from 'application/config';
 import { DevTool } from '@hookform/devtools';
+import { useFetchCertificateStep } from 'hooks/useFetchCertificateStep';
 interface ContactsFormProps {
   data?: any;
   isLoading?: boolean;
@@ -25,13 +26,16 @@ const ContactsForm: React.FC<ContactsFormProps> = ({ data, shouldResetForm, onRe
   const { isOpen, onClose, onOpen } = useDisclosure();
   const [shouldShowResetFormModal, setShouldShowResetFormModal] = useState(false);
   const { previousStep, nextStep, currentState, updateIsDirty } = useCertificateStepper();
+  const { certificateStep } = useFetchCertificateStep({
+    key: StepEnum.CONTACTS
+  });
 
   const {
     updateCertificateStep,
     updatedCertificateStep,
     wasCertificateStepUpdated,
     isUpdatingCertificateStep,
-    reset: resetMutation
+    reset
   } = useUpdateCertificateStep();
   const previousStepRef = useRef<any>(false);
   const nextStepRef = useRef<any>(false);
@@ -53,7 +57,7 @@ const ContactsForm: React.FC<ContactsFormProps> = ({ data, shouldResetForm, onRe
   }, [isDirty, updateIsDirty]);
 
   if (wasCertificateStepUpdated && nextStepRef.current) {
-    resetMutation();
+    reset();
     // reset the form with the new values
     resetForm(updatedCertificateStep?.form, {
       keepValues: false
@@ -63,18 +67,19 @@ const ContactsForm: React.FC<ContactsFormProps> = ({ data, shouldResetForm, onRe
   }
 
   if (wasCertificateStepUpdated && previousStepRef.current && !isUpdatingCertificateStep) {
-    resetMutation();
+    reset();
     // reset the form with the new values
     resetForm(updatedCertificateStep?.form, {
       keepValues: false
     });
-    // console.log('[] prev updatedCertificateStep', updatedCertificateStep);
     previousStepRef.current = false;
     previousStep(updatedCertificateStep);
   }
 
   const handlePreviousStepClick = () => {
-    if (isDirty) {
+    if (!isDirty) {
+      previousStep(certificateStep);
+    } else {
       const payload = {
         step: StepEnum.CONTACTS,
         form: {
@@ -85,7 +90,6 @@ const ContactsForm: React.FC<ContactsFormProps> = ({ data, shouldResetForm, onRe
       updateCertificateStep(payload);
       previousStepRef.current = true;
     }
-    previousStep(data);
   };
 
   useEffect(() => {
@@ -102,13 +106,7 @@ const ContactsForm: React.FC<ContactsFormProps> = ({ data, shouldResetForm, onRe
 
   const handleNextStepClick = () => {
     if (!isDirty) {
-      nextStep({
-        step: StepEnum.CONTACTS,
-        form: {
-          ...methods.getValues(),
-          state: currentState()
-        } as any
-      });
+      nextStep(certificateStep);
     } else {
       const payload = {
         step: StepEnum.CONTACTS,

diff --git a/web/gds-user-ui/src/components/ErrorComponent/RequiredElementMissing.tsx b/web/gds-user-ui/src/components/ErrorComponent/RequiredElementMissing.tsx
@@ -14,9 +14,7 @@ interface RequiredElementMissingProps {
   errorFields?: any[];
 }
 
-const RequiredElementMissing = ({ elementKey, errorFields }: RequiredElementMissingProps) => {
-  console.log('k', elementKey);
-
+const RequiredElementMissing = ({ errorFields }: RequiredElementMissingProps) => {
   return (
     <Alert
       status="error"
@@ -36,7 +34,6 @@ const RequiredElementMissing = ({ elementKey, errorFields }: RequiredElementMiss
         <AlertDescription>
           <UnorderedList>
             {errorFields?.map((errorField: any, index) => {
-              console.log('errorField', errorField);
               return (
                 <ListItem key={index}>
                   <Text as="span" fontWeight="bold">

diff --git a/web/gds-user-ui/src/components/LegalPerson/LegalForm.tsx b/web/gds-user-ui/src/components/LegalPerson/LegalForm.tsx
@@ -8,7 +8,7 @@ import Address from 'components/Addresses';
 import { FormProvider, useForm } from 'react-hook-form';
 import StepButtons from 'components/StepsButtons';
 import useCertificateStepper from 'hooks/useCertificateStepper';
-import { legalPersonValidationSchemam } from 'modules/dashboard/certificate/lib/legalPersonValidationSchema';
+import { legalPersonValidationSchema } from 'modules/dashboard/certificate/lib/legalPersonValidationSchema';
 import { yupResolver } from '@hookform/resolvers/yup';
 
 import { StepEnum } from 'types/enums';
@@ -17,6 +17,7 @@ import { useUpdateCertificateStep } from 'hooks/useUpdateCertificateStep';
 import { StepsIndexes } from 'constants/steps';
 import { isProdEnv } from 'application/config';
 import { DevTool } from '@hookform/devtools';
+import { useFetchCertificateStep } from 'hooks/useFetchCertificateStep';
 interface LegalFormProps {
   data?: any;
   isLoading?: boolean;
@@ -29,16 +30,19 @@ const LegalForm: React.FC<LegalFormProps> = ({ data, shouldResetForm, onResetFor
   const { isOpen, onClose, onOpen } = useDisclosure();
   const [shouldShowResetFormModal, setShouldShowResetFormModal] = useState(false);
   const { previousStep, nextStep, currentState, updateIsDirty } = useCertificateStepper();
+  const { certificateStep } = useFetchCertificateStep({
+    key: StepEnum.LEGAL
+  });
   const {
     updateCertificateStep,
     updatedCertificateStep,
-    reset: resetMutation,
+    reset,
     wasCertificateStepUpdated,
     isUpdatingCertificateStep
   } = useUpdateCertificateStep();
   const previousStepRef = useRef<any>(false);
   const nextStepRef = useRef<any>(false);
-  const resolver = yupResolver(legalPersonValidationSchemam);
+  const resolver = yupResolver(legalPersonValidationSchema);
   const methods = useForm({
     defaultValues: data,
     resolver,
@@ -56,7 +60,7 @@ const LegalForm: React.FC<LegalFormProps> = ({ data, shouldResetForm, onResetFor
   };
 
   if (wasCertificateStepUpdated && nextStepRef.current) {
-    resetMutation();
+    reset();
     // reset the form with the new values
     resetForm(updatedCertificateStep?.form, {
       keepValues: false
@@ -66,25 +70,18 @@ const LegalForm: React.FC<LegalFormProps> = ({ data, shouldResetForm, onResetFor
   }
 
   if (wasCertificateStepUpdated && previousStepRef.current && !isUpdatingCertificateStep) {
-    resetMutation();
+    reset();
     // reset the form with the new values
-    resetForm(updatedCertificateStep?.form, {
+   resetForm(updatedCertificateStep?.form, {
       keepValues: false
     });
-    // console.log('[] prev updatedCertificateStep', updatedCertificateStep);
     previousStepRef.current = false;
     previousStep(updatedCertificateStep);
   }
 
   const handleNextStepClick = () => {
     if (!isDirty) {
-      nextStep({
-        step: StepEnum.LEGAL,
-        form: {
-          ...methods.getValues(),
-          state: currentState()
-        } as any
-      });
+      nextStep(certificateStep);
     } else {
       const payload = {
         step: StepEnum.LEGAL,
@@ -96,27 +93,23 @@ const LegalForm: React.FC<LegalFormProps> = ({ data, shouldResetForm, onResetFor
 
       updateCertificateStep(payload);
       nextStepRef.current = true;
-      // nextStep(updatedCertificateStep);
     }
   };
 
   const handlePreviousStepClick = () => {
-    if (isDirty) {
+    if (!isDirty) {
+      previousStep(certificateStep);
+    } else {
       const payload = {
         step: StepEnum.LEGAL,
         form: {
           ...methods.getValues(),
           state: currentState()
         } as any
       };
-      // console.log('[] isDirty  payload', payload);
-
       updateCertificateStep(payload);
       previousStepRef.current = true;
-      // previousStep(updatedCertificateStep);
     }
-
-    previousStep(data);
   };
 
   const handleResetForm = () => {

diff --git a/web/gds-user-ui/src/components/LegalPerson/index.tsx b/web/gds-user-ui/src/components/LegalPerson/index.tsx
@@ -21,7 +21,6 @@ const LegalPerson: React.FC = () => {
     useFetchCertificateStep({
       key: StepEnum.LEGAL
     });
-
   const { isStepDeleted, updateDeleteStepState } = useCertificateStepper();
   const isLegalStepDeleted = isStepDeleted(StepEnum.LEGAL);
 

diff --git a/...uridictions/OtherJuridictions.stories.tsx → ...isdictions/OtherJurisdictions.stories.tsx b/...uridictions/OtherJuridictions.stories.tsx → ...isdictions/OtherJurisdictions.stories.tsx
@@ -1,18 +1,18 @@
 import { Meta, Story } from '@storybook/react';
 import { withRHF } from 'hoc/withRHF';
-import OtherJuridictions from '.';
+import OtherJurisdictions from '.';
 
-type OtherJuridictionsProps = {
+type OtherJurisdictionsProps = {
   name: string;
 };
 
 export default {
-  title: 'components/OtherJuridictions',
-  component: OtherJuridictions,
+  title: 'components/OtherJurisdictions',
+  component: OtherJurisdictions,
   decorators: [withRHF(false)]
 } as Meta;
 
-const Template: Story<OtherJuridictionsProps> = (args) => <OtherJuridictions {...args} />;
+const Template: Story<OtherJurisdictionsProps> = (args) => <OtherJurisdictions {...args} />;
 
 export const Standard = Template.bind({});
 Standard.args = {

diff --git a/...rc/components/OtherJuridictions/index.tsx → ...c/components/OtherJurisdictions/index.tsx b/...rc/components/OtherJuridictions/index.tsx → ...c/components/OtherJurisdictions/index.tsx
@@ -6,14 +6,14 @@ import { getCountriesOptions } from 'constants/countries';
 import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
 import { t } from '@lingui/macro';
 import { Trans } from '@lingui/react';
-const OtherJuridictions: React.FC<{ name: string }> = ({ name }) => {
+const OtherJurisdictions: React.FC<{ name: string }> = ({ name }) => {
   const { control, register } = useFormContext();
   const { fields, append, remove } = useFieldArray({
     name,
     control
   });
 
-  const handleAddJuridictionClick = () => {
+  const handleAddJurisdictionClick = () => {
     append({
       country: '',
       regulator_name: ''
@@ -61,7 +61,7 @@ const OtherJuridictions: React.FC<{ name: string }> = ({ name }) => {
       ))}
 
       <Button
-        onClick={handleAddJuridictionClick}
+        onClick={handleAddJurisdictionClick}
         borderRadius={5}
         data-testid="trixo-add-jurisdictions-btn">
         <Trans id="Add Jurisdiction">Add Jurisdiction</Trans>
@@ -70,4 +70,4 @@ const OtherJuridictions: React.FC<{ name: string }> = ({ name }) => {
   );
 };
 
-export default OtherJuridictions;
+export default OtherJurisdictions;
diff --git a/web/gds-user-ui/src/components/TrisaImplementation/TrisaImplementationForm.tsx b/web/gds-user-ui/src/components/TrisaImplementation/TrisaImplementationForm.tsx
@@ -13,6 +13,7 @@ import TrisaImplementationForm from './TrisaImplementationForm/index';
 import { StepsIndexes } from 'constants/steps';
 import { isProdEnv } from 'application/config';
 import { DevTool } from '@hookform/devtools';
+import { useFetchCertificateStep } from 'hooks/useFetchCertificateStep';
 interface TrisaFormProps {
   data?: any;
   isLoading?: boolean;
@@ -23,12 +24,15 @@ const TrisaForm: React.FC<TrisaFormProps> = ({ data, shouldResetForm, onResetFor
   const { isOpen, onClose, onOpen } = useDisclosure();
   const [shouldShowResetFormModal, setShouldShowResetFormModal] = useState(false);
   const { previousStep, nextStep, currentState, updateIsDirty } = useCertificateStepper();
+  const { certificateStep } = useFetchCertificateStep({
+    key: StepEnum.TRISA
+  });
   const {
     updateCertificateStep,
     updatedCertificateStep,
     wasCertificateStepUpdated,
     isUpdatingCertificateStep,
-    reset: resetMutation
+    reset
   } = useUpdateCertificateStep();
   const previousStepRef = useRef<any>(false);
   const nextStepRef = useRef<any>(false);
@@ -56,7 +60,7 @@ const TrisaForm: React.FC<TrisaFormProps> = ({ data, shouldResetForm, onResetFor
   }, [shouldShowResetFormModal]);
 
   if (wasCertificateStepUpdated && nextStepRef.current) {
-    resetMutation();
+    reset();
     // reset the form with the new values
     resetForm(updatedCertificateStep?.form, {
       keepValues: false
@@ -66,15 +70,17 @@ const TrisaForm: React.FC<TrisaFormProps> = ({ data, shouldResetForm, onResetFor
   }
 
   if (wasCertificateStepUpdated && previousStepRef.current && !isUpdatingCertificateStep) {
-    resetMutation();
+    reset();
     // reset the form with the new values
     resetForm(updatedCertificateStep?.form);
     previousStepRef.current = false;
     previousStep(updatedCertificateStep);
   }
 
   const handlePreviousStepClick = () => {
-    if (isDirty) {
+    if (!isDirty) {
+      previousStep(certificateStep);
+    } else {
       const payload = {
         step: StepEnum.TRISA,
         form: {
@@ -85,18 +91,11 @@ const TrisaForm: React.FC<TrisaFormProps> = ({ data, shouldResetForm, onResetFor
       updateCertificateStep(payload);
       previousStepRef.current = true;
     }
-    previousStep(data);
   };
 
   const handleNextStepClick = () => {
     if (!isDirty) {
-      nextStep({
-        step: StepEnum.TRISA,
-        form: {
-          ...methods.getValues(),
-          state: currentState()
-        } as any
-      });
+      nextStep(certificateStep);
     } else {
       const payload = {
         step: StepEnum.TRISA,