diff --git a/src/components/Form/FormProvider.js b/src/components/Form/FormProvider.js index 50b24e368fc6..4d1630dbbe06 100644 --- a/src/components/Form/FormProvider.js +++ b/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) { diff --git a/src/components/Form/FormWrapper.js b/src/components/Form/FormWrapper.js index da34262a8af8..f1c5d6de9071 100644 --- a/src/components/Form/FormWrapper.js +++ b/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 && ( 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} /> )} @@ -176,6 +181,7 @@ function FormWrapper(props) { styles.mt5, submitButtonStyles, submitButtonText, + shouldHideFixErrorsAlert, ], ); diff --git a/src/components/RadioButtons.tsx b/src/components/RadioButtons.tsx index 8aa3ef7e8ffe..cb6843af65c0 100644 --- a/src/components/RadioButtons.tsx +++ b/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 ( - <> + {items.map((item) => ( ))} - + ); } diff --git a/src/pages/EnablePayments/IdologyQuestions.js b/src/pages/EnablePayments/IdologyQuestions.js index 8f21d68abe4f..a0c202b0bbbc 100644 --- a/src/pages/EnablePayments/IdologyQuestions.js +++ b/src/pages/EnablePayments/IdologyQuestions.js @@ -139,6 +139,7 @@ function IdologyQuestions({questions, idNumber}) { scrollContextEnabled style={[styles.flexGrow1, styles.ph5]} submitButtonText={translate('common.saveAndContinue')} + shouldHideFixErrorsAlert >