Wallet - Fix the errors button is non-functional in Additional details

src/components/Form/FormProvider.js

@@ -73,6 +73,9 @@ const propTypes = {
 
     /** Should validate function be called when the value of the input is changed */
     shouldValidateOnChange: PropTypes.bool,
+
+    /** Should fix the errors alert be displayed when there is an error in the form */
+    shouldHideFixErrorsAlert: PropTypes.bool,
 };
 
 // In order to prevent Checkbox focus loss when the user are focusing a TextInput and proceeds to toggle a CheckBox in web and mobile web.
@@ -94,6 +97,7 @@ const defaultProps = {
     validate: () => {},
     shouldValidateOnBlur: true,
     shouldValidateOnChange: true,
+    shouldHideFixErrorsAlert: false,
 };
 
 function getInitialValueByType(valueType) {

src/components/Form/FormWrapper.js

@@ -66,6 +66,8 @@ const propTypes = {
     errors: errorsPropType.isRequired,
 
     inputRefs: PropTypes.objectOf(refPropTypes).isRequired,
+
+    shouldHideFixErrorsAlert: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -79,6 +81,7 @@ const defaultProps = {
     footerContent: null,
     style: [],
     submitButtonStyles: [],
+    shouldHideFixErrorsAlert: false,
 };
 
 function FormWrapper(props) {
@@ -97,6 +100,7 @@ function FormWrapper(props) {
         enabledWhenOffline,
         isSubmitActionDangerous,
         formID,
+        shouldHideFixErrorsAlert,
     } = props;
     const formRef = useRef(null);
     const formContentRef = useRef(null);
@@ -117,7 +121,7 @@ function FormWrapper(props) {
                 {isSubmitButtonVisible && (
                     <FormAlertWithSubmitButton
                         buttonText={submitButtonText}
-                        isAlertVisible={_.size(errors) > 0 || Boolean(errorMessage) || !_.isEmpty(formState.errorFields)}
+                        isAlertVisible={((_.size(errors) > 0 || !_.isEmpty(formState.errorFields)) && !shouldHideFixErrorsAlert) || Boolean(errorMessage)}
                         isLoading={formState.isLoading}
                         message={_.isEmpty(formState.errorFields) ? errorMessage : null}
                         onSubmit={onSubmit}
@@ -153,6 +157,7 @@ function FormWrapper(props) {
                         enabledWhenOffline={enabledWhenOffline}
                         isSubmitActionDangerous={isSubmitActionDangerous}
                         disablePressOnEnter
+                        shouldHideFixErrorsAlert={shouldHideFixErrorsAlert}
                     />
                 )}
             </FormSubmit>
@@ -176,6 +181,7 @@ function FormWrapper(props) {
             styles.mt5,
             submitButtonStyles,
             submitButtonText,
+            shouldHideFixErrorsAlert,
         ],
     );
 

src/components/RadioButtons.tsx

@@ -1,4 +1,5 @@
 import React, {useState} from 'react';
+import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
 import RadioButtonWithLabel from './RadioButtonWithLabel';
 
@@ -20,7 +21,7 @@ function RadioButtons({items, onPress}: RadioButtonsProps) {
     const [checkedValue, setCheckedValue] = useState('');
 
     return (
-        <>
+        <View style={styles.mb3}>
             {items.map((item) => (
                 <RadioButtonWithLabel
                     key={item.value}
@@ -33,7 +34,7 @@ function RadioButtons({items, onPress}: RadioButtonsProps) {
                     label={item.label}
                 />
             ))}
-        </>
+        </View>
     );
 }
 

src/pages/EnablePayments/IdologyQuestions.js

@@ -139,6 +139,7 @@ function IdologyQuestions({questions, idNumber}) {
                 scrollContextEnabled
                 style={[styles.flexGrow1, styles.ph5]}
                 submitButtonText={translate('common.saveAndContinue')}
+                shouldHideFixErrorsAlert
             >
                 <InputWrapper
                     InputComponent={SingleChoiceQuestion}