From 04a0fc07c6c0e7059154aa179a4e7a08be7aa786 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Mon, 30 Oct 2023 11:31:51 +0100 Subject: [PATCH 1/7] Add FormProvider in AdditionalDetailsStepPage --- .../EnablePayments/AdditionalDetailsStep.js | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js index f1813062d0d7..a17baf38dd56 100644 --- a/src/pages/EnablePayments/AdditionalDetailsStep.js +++ b/src/pages/EnablePayments/AdditionalDetailsStep.js @@ -5,8 +5,6 @@ import React from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; -import DatePicker from '@components/DatePicker'; -import Form from '@components/Form'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; @@ -23,6 +21,9 @@ import * as Wallet from '@userActions/Wallet'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import IdologyQuestions from './IdologyQuestions'; +import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; +import NewDatePicker from '@components/NewDatePicker'; const propTypes = { ...withLocalizePropTypes, @@ -177,7 +178,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP {translate('additionalDetailsStep.helpLink')} -
- - - - - - + ); From b2d51c8865ed21f73be1cb30febff291c101e6e4 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Mon, 30 Oct 2023 11:37:43 +0100 Subject: [PATCH 2/7] Add FormProvider in AddressForm --- src/pages/ReimbursementAccount/AddressForm.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/pages/ReimbursementAccount/AddressForm.js b/src/pages/ReimbursementAccount/AddressForm.js index 36fbc6e4c59d..cbcbf716c2fe 100644 --- a/src/pages/ReimbursementAccount/AddressForm.js +++ b/src/pages/ReimbursementAccount/AddressForm.js @@ -6,6 +6,7 @@ import StatePicker from '@components/StatePicker'; import TextInput from '@components/TextInput'; import styles from '@styles/styles'; import CONST from '@src/CONST'; +import InputWrapper from '@components/Form/InputWrapper'; const propTypes = { /** Translate key for Street name */ @@ -109,7 +110,8 @@ function AddressForm(props) { maxInputLength={CONST.FORM_CHARACTER_LIMIT} /> - - - Date: Mon, 30 Oct 2023 11:38:30 +0100 Subject: [PATCH 3/7] fix prettier and lint errors --- src/pages/EnablePayments/AdditionalDetailsStep.js | 6 +++--- src/pages/ReimbursementAccount/AddressForm.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js index a17baf38dd56..77b8cfc14bf5 100644 --- a/src/pages/EnablePayments/AdditionalDetailsStep.js +++ b/src/pages/EnablePayments/AdditionalDetailsStep.js @@ -5,7 +5,10 @@ import React from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; +import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import NewDatePicker from '@components/NewDatePicker'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import TextInput from '@components/TextInput'; @@ -21,9 +24,6 @@ import * as Wallet from '@userActions/Wallet'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import IdologyQuestions from './IdologyQuestions'; -import FormProvider from '@components/Form/FormProvider'; -import InputWrapper from '@components/Form/InputWrapper'; -import NewDatePicker from '@components/NewDatePicker'; const propTypes = { ...withLocalizePropTypes, diff --git a/src/pages/ReimbursementAccount/AddressForm.js b/src/pages/ReimbursementAccount/AddressForm.js index cbcbf716c2fe..732a1d228253 100644 --- a/src/pages/ReimbursementAccount/AddressForm.js +++ b/src/pages/ReimbursementAccount/AddressForm.js @@ -2,11 +2,11 @@ import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; import AddressSearch from '@components/AddressSearch'; +import InputWrapper from '@components/Form/InputWrapper'; import StatePicker from '@components/StatePicker'; import TextInput from '@components/TextInput'; import styles from '@styles/styles'; import CONST from '@src/CONST'; -import InputWrapper from '@components/Form/InputWrapper'; const propTypes = { /** Translate key for Street name */ From 2442dc6b8959908dc80e63d06918d80eb841a610 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Tue, 7 Nov 2023 16:34:49 +0100 Subject: [PATCH 4/7] add input wrapper in AddressForm --- src/pages/ReimbursementAccount/AddressForm.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/AddressForm.js b/src/pages/ReimbursementAccount/AddressForm.js index c0202c9b6dbd..d48295b4786d 100644 --- a/src/pages/ReimbursementAccount/AddressForm.js +++ b/src/pages/ReimbursementAccount/AddressForm.js @@ -96,7 +96,8 @@ function AddressForm(props) { return ( <> - Date: Thu, 9 Nov 2023 18:24:24 +0100 Subject: [PATCH 5/7] fix other pages using AddressForm --- src/components/CheckboxWithLabel.js | 3 +- .../ReimbursementAccount/ACHContractStep.js | 19 +++++++---- src/pages/ReimbursementAccount/CompanyStep.js | 32 ++++++++++++------- .../ReimbursementAccount/IdentityForm.js | 14 +++++--- .../ReimbursementAccount/RequestorStep.js | 10 +++--- 5 files changed, 49 insertions(+), 29 deletions(-) diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js index 86dba1d2a932..148ac5f9822b 100644 --- a/src/components/CheckboxWithLabel.js +++ b/src/components/CheckboxWithLabel.js @@ -8,6 +8,7 @@ import Checkbox from './Checkbox'; import FormHelpMessage from './FormHelpMessage'; import PressableWithFeedback from './Pressable/PressableWithFeedback'; import Text from './Text'; +import refPropTypes from './refPropTypes'; /** * Returns an error if the required props are not provided @@ -54,7 +55,7 @@ const propTypes = { defaultValue: PropTypes.bool, /** React ref being forwarded to the Checkbox input */ - forwardedRef: PropTypes.func, + forwardedRef: refPropTypes, /** The ID used to uniquely identify the input in a Form */ /* eslint-disable-next-line react/no-unused-prop-types */ diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js index 8f2d2e07998e..f35acd5ea16e 100644 --- a/src/pages/ReimbursementAccount/ACHContractStep.js +++ b/src/pages/ReimbursementAccount/ACHContractStep.js @@ -5,7 +5,6 @@ import React, {useState} from 'react'; import {View} from 'react-native'; import _ from 'underscore'; import CheckboxWithLabel from '@components/CheckboxWithLabel'; -import Form from '@components/Form'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; @@ -19,6 +18,8 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import IdentityForm from './IdentityForm'; import StepPropTypes from './StepPropTypes'; +import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; const propTypes = { ...StepPropTypes, @@ -156,7 +157,7 @@ function ACHContractStep(props) { shouldShowGetAssistanceButton guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT} /> -
{props.translate('beneficialOwnersStep.checkAllThatApply')} - - )} {props.translate('beneficialOwnersStep.agreement')} - - )} - + ); } diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index 41f73d1ebf8e..ace059ae46ea 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -7,8 +7,7 @@ import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import CheckboxWithLabel from '@components/CheckboxWithLabel'; -import DatePicker from '@components/DatePicker'; -import Form from '@components/Form'; +import NewDatePicker from '@components/NewDatePicker'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import Picker from '@components/Picker'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -25,6 +24,8 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import AddressForm from './AddressForm'; import StepPropTypes from './StepPropTypes'; +import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; const propTypes = { ...StepPropTypes, @@ -151,7 +152,7 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT} onBackButtonPress={onBackButtonPress} /> -
{translate('companyStep.subtitle')} - - - - - ({value: key, label: translate(`companyStep.incorporationTypes.${key}`)}))} @@ -234,7 +240,7 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul /> - - - - + ); } diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js index f584ca3f665a..cf6d894ca7b9 100644 --- a/src/pages/ReimbursementAccount/IdentityForm.js +++ b/src/pages/ReimbursementAccount/IdentityForm.js @@ -3,11 +3,12 @@ import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; import _ from 'underscore'; -import DatePicker from '@components/DatePicker'; +import NewDatePicker from '@components/NewDatePicker'; import TextInput from '@components/TextInput'; import styles from '@styles/styles'; import CONST from '@src/CONST'; import AddressForm from './AddressForm'; +import InputWrapper from '@components/Form/InputWrapper'; const propTypes = { /** Style for wrapping View */ @@ -141,7 +142,8 @@ function IdentityForm(props) { - - - - -
- - + ); } From 5c462730b56dbd42597252fdc1c81765a7e40dd6 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Thu, 9 Nov 2023 18:25:02 +0100 Subject: [PATCH 6/7] fix prettier --- src/components/CheckboxWithLabel.js | 2 +- src/pages/ReimbursementAccount/ACHContractStep.js | 4 ++-- src/pages/ReimbursementAccount/CompanyStep.js | 6 +++--- src/pages/ReimbursementAccount/IdentityForm.js | 2 +- src/pages/ReimbursementAccount/RequestorStep.js | 4 ++-- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js index 148ac5f9822b..3d467b6372d2 100644 --- a/src/components/CheckboxWithLabel.js +++ b/src/components/CheckboxWithLabel.js @@ -7,8 +7,8 @@ import variables from '@styles/variables'; import Checkbox from './Checkbox'; import FormHelpMessage from './FormHelpMessage'; import PressableWithFeedback from './Pressable/PressableWithFeedback'; -import Text from './Text'; import refPropTypes from './refPropTypes'; +import Text from './Text'; /** * Returns an error if the required props are not provided diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js index f35acd5ea16e..8543dfdba5b3 100644 --- a/src/pages/ReimbursementAccount/ACHContractStep.js +++ b/src/pages/ReimbursementAccount/ACHContractStep.js @@ -5,6 +5,8 @@ import React, {useState} from 'react'; import {View} from 'react-native'; import _ from 'underscore'; import CheckboxWithLabel from '@components/CheckboxWithLabel'; +import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; @@ -18,8 +20,6 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import IdentityForm from './IdentityForm'; import StepPropTypes from './StepPropTypes'; -import FormProvider from '@components/Form/FormProvider'; -import InputWrapper from '@components/Form/InputWrapper'; const propTypes = { ...StepPropTypes, diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js index ace059ae46ea..c8c8c555e78f 100644 --- a/src/pages/ReimbursementAccount/CompanyStep.js +++ b/src/pages/ReimbursementAccount/CompanyStep.js @@ -7,8 +7,10 @@ import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; import CheckboxWithLabel from '@components/CheckboxWithLabel'; -import NewDatePicker from '@components/NewDatePicker'; +import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import NewDatePicker from '@components/NewDatePicker'; import Picker from '@components/Picker'; import ScreenWrapper from '@components/ScreenWrapper'; import StatePicker from '@components/StatePicker'; @@ -24,8 +26,6 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import AddressForm from './AddressForm'; import StepPropTypes from './StepPropTypes'; -import FormProvider from '@components/Form/FormProvider'; -import InputWrapper from '@components/Form/InputWrapper'; const propTypes = { ...StepPropTypes, diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js index cf6d894ca7b9..4f1e5e6413c5 100644 --- a/src/pages/ReimbursementAccount/IdentityForm.js +++ b/src/pages/ReimbursementAccount/IdentityForm.js @@ -3,12 +3,12 @@ import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; import _ from 'underscore'; +import InputWrapper from '@components/Form/InputWrapper'; import NewDatePicker from '@components/NewDatePicker'; import TextInput from '@components/TextInput'; import styles from '@styles/styles'; import CONST from '@src/CONST'; import AddressForm from './AddressForm'; -import InputWrapper from '@components/Form/InputWrapper'; const propTypes = { /** Style for wrapping View */ diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js index 2431abd98380..2b78eeee84ae 100644 --- a/src/pages/ReimbursementAccount/RequestorStep.js +++ b/src/pages/ReimbursementAccount/RequestorStep.js @@ -3,6 +3,8 @@ import PropTypes from 'prop-types'; import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import CheckboxWithLabel from '@components/CheckboxWithLabel'; +import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; @@ -16,8 +18,6 @@ import ONYXKEYS from '@src/ONYXKEYS'; import IdentityForm from './IdentityForm'; import {reimbursementAccountPropTypes} from './reimbursementAccountPropTypes'; import RequestorOnfidoStep from './RequestorOnfidoStep'; -import FormProvider from '@components/Form/FormProvider'; -import InputWrapper from '@components/Form/InputWrapper'; const propTypes = { onBackButtonPress: PropTypes.func.isRequired, From ba8a7400a80af873f3775cc57eba73104e068c94 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Mon, 13 Nov 2023 10:45:02 +0100 Subject: [PATCH 7/7] pass inputValues through children in FormProvider --- src/components/Form/FormProvider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Form/FormProvider.js b/src/components/Form/FormProvider.js index 92baa9727832..e06965062262 100644 --- a/src/components/Form/FormProvider.js +++ b/src/components/Form/FormProvider.js @@ -320,7 +320,7 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC errors={errors} enabledWhenOffline={enabledWhenOffline} > - {children} + {_.isFunction(children) ? children({inputValues}) : children} );