Skip to content

Commit

Permalink
Merge pull request Expensify#30568 from software-mansion-labs/form-mi…
Browse files Browse the repository at this point in the history 
…gration/additional-details-step

[Form Provider Refactor] AdditionalDetailsStep and AddressForm
  • Loading branch information
@roryabraham
roryabraham authored Nov 16, 2023
2 parents e5e1965 + 7f3c34e commit ead926e
Show file tree
Hide file tree
Showing 8 changed files with 73 additions and 43 deletions.
3 changes: 2 additions & 1 deletion src/components/CheckboxWithLabel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import variables from '@styles/variables';
import Checkbox from './Checkbox';
import FormHelpMessage from './FormHelpMessage';
import PressableWithFeedback from './Pressable/PressableWithFeedback';
import refPropTypes from './refPropTypes';
import Text from './Text';

/**
Expand Down Expand Up @@ -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 */
Expand Down
2 changes: 1 addition & 1 deletion src/components/Form/FormProvider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -317,7 +317,7 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
errors={errors}
enabledWhenOffline={enabledWhenOffline}
>
{children}
{_.isFunction(children) ? children({inputValues}) : children}
</FormWrapper>
</FormContext.Provider>
);
Expand Down
23 changes: 14 additions & 9 deletions src/pages/EnablePayments/AdditionalDetailsStep.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@ 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 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';
Expand Down Expand Up @@ -178,15 +179,16 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
{translate('additionalDetailsStep.helpLink')}
</TextLink>
</View>
<Form
<FormProvider
formID={ONYXKEYS.WALLET_ADDITIONAL_DETAILS}
validate={validate}
onSubmit={activateWallet}
scrollContextEnabled
submitButtonText={translate('common.saveAndContinue')}
style={[styles.mh5, styles.flexGrow1]}
>
<TextInput
<InputWrapper
InputComponent={TextInput}
inputID="legalFirstName"
containerStyles={[styles.mt4]}
label={translate(fieldNameTranslationKeys.legalFirstName)}
Expand All @@ -195,7 +197,8 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
defaultValue={PersonalDetails.extractFirstAndLastNameFromAvailableDetails(currentUserPersonalDetails).firstName}
shouldSaveDraft
/>
<TextInput
<InputWrapper
InputComponent={TextInput}
inputID="legalLastName"
containerStyles={[styles.mt4]}
label={translate(fieldNameTranslationKeys.legalLastName)}
Expand All @@ -215,7 +218,8 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
streetTranslationKey={fieldNameTranslationKeys.addressStreet}
shouldSaveDraft
/>
<TextInput
<InputWrapper
InputComponent={TextInput}
inputID="phoneNumber"
containerStyles={[styles.mt4]}
inputMode={CONST.INPUT_MODE.TEL}
Expand All @@ -226,7 +230,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
placeholder={translate('common.phoneNumberPlaceholder')}
shouldSaveDraft
/>
<DatePicker
<NewDatePicker
inputID="dob"
containerStyles={[styles.mt4]}
label={translate(fieldNameTranslationKeys.dob)}
Expand All @@ -235,7 +239,8 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
maxDate={maxDate}
shouldSaveDraft
/>
<TextInput
<InputWrapper
InputComponent={TextInput}
inputID="ssn"
containerStyles={[styles.mt4]}
label={translate(fieldNameTranslationKeys[shouldAskForFullSSN ? 'ssnFull9' : 'ssn'])}
Expand All @@ -244,7 +249,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
maxLength={shouldAskForFullSSN ? 9 : 4}
inputMode={CONST.INPUT_MODE.NUMERIC}
/>
</Form>
</FormProvider>
</View>
</>
);
Expand Down
19 changes: 12 additions & 7 deletions src/pages/ReimbursementAccount/ACHContractStep.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import React, {useState} from 'react';
import {View} from 'react-native';
import _ from 'underscore';
import CheckboxWithLabel from '@components/CheckboxWithLabel';
import Form from '@components/Form';
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';
Expand Down Expand Up @@ -157,7 +158,7 @@ function ACHContractStep(props) {
shouldShowGetAssistanceButton
guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
/>
<Form
<FormProvider
formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}
validate={validate}
onSubmit={submit}
Expand All @@ -169,7 +170,8 @@ function ACHContractStep(props) {
<Text style={[styles.mb5]}>
<Text>{props.translate('beneficialOwnersStep.checkAllThatApply')}</Text>
</Text>
<CheckboxWithLabel
<InputWrapper
InputComponent={CheckboxWithLabel}
accessibilityLabel={props.translate('beneficialOwnersStep.iOwnMoreThan25Percent')}
inputID="ownsMoreThan25Percent"
style={[styles.mb2]}
Expand All @@ -190,7 +192,8 @@ function ACHContractStep(props) {
defaultValue={props.getDefaultStateForField('ownsMoreThan25Percent', false)}
shouldSaveDraft
/>
<CheckboxWithLabel
<InputWrapper
InputComponent={CheckboxWithLabel}
accessibilityLabel={props.translate('beneficialOwnersStep.someoneOwnsMoreThan25Percent')}
inputID="hasOtherBeneficialOwners"
style={[styles.mb2]}
Expand Down Expand Up @@ -256,7 +259,8 @@ function ACHContractStep(props) {
</View>
)}
<Text style={[styles.mv5]}>{props.translate('beneficialOwnersStep.agreement')}</Text>
<CheckboxWithLabel
<InputWrapper
InputComponent={CheckboxWithLabel}
accessibilityLabel={`${props.translate('common.iAcceptThe')} ${props.translate('beneficialOwnersStep.termsAndConditions')}`}
inputID="acceptTermsAndConditions"
style={[styles.mt4]}
Expand All @@ -269,7 +273,8 @@ function ACHContractStep(props) {
defaultValue={props.getDefaultStateForField('acceptTermsAndConditions', false)}
shouldSaveDraft
/>
<CheckboxWithLabel
<InputWrapper
InputComponent={CheckboxWithLabel}
accessibilityLabel={props.translate('beneficialOwnersStep.certifyTrueAndAccurate')}
inputID="certifyTrueInformation"
style={[styles.mt4]}
Expand All @@ -279,7 +284,7 @@ function ACHContractStep(props) {
/>
</>
)}
</Form>
</FormProvider>
</ScreenWrapper>
);
}
Expand Down
13 changes: 9 additions & 4 deletions src/pages/ReimbursementAccount/AddressForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ 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 useThemeStyles from '@styles/useThemeStyles';
Expand Down Expand Up @@ -96,7 +97,8 @@ function AddressForm(props) {
return (
<>
<View>
<AddressSearch
<InputWrapper
InputComponent={AddressSearch}
inputID={props.inputKeys.street}
shouldSaveDraft={props.shouldSaveDraft}
label={props.translate(props.streetTranslationKey)}
Expand All @@ -111,7 +113,8 @@ function AddressForm(props) {
isLimitedToUSA
/>
</View>
<TextInput
<InputWrapper
InputComponent={TextInput}
inputID={props.inputKeys.city}
shouldSaveDraft={props.shouldSaveDraft}
label={props.translate('common.city')}
Expand All @@ -125,7 +128,8 @@ function AddressForm(props) {
/>

<View style={[styles.mt4, styles.mhn5]}>
<StatePicker
<InputWrapper
InputComponent={StatePicker}
inputID={props.inputKeys.state}
shouldSaveDraft={props.shouldSaveDraft}
value={props.values.state}
Expand All @@ -134,7 +138,8 @@ function AddressForm(props) {
errorText={props.errors.state ? props.translate('bankAccount.error.addressState') : ''}
/>
</View>
<TextInput
<InputWrapper
InputComponent={TextInput}
inputID={props.inputKeys.zipCode}
shouldSaveDraft={props.shouldSaveDraft}
label={props.translate('common.zip')}
Expand Down
32 changes: 20 additions & 12 deletions src/pages/ReimbursementAccount/CompanyStep.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ 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 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';
Expand Down Expand Up @@ -152,7 +153,7 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
onBackButtonPress={onBackButtonPress}
/>
<Form
<FormProvider
formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}
validate={validate}
onSubmit={submit}
Expand All @@ -161,7 +162,8 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
style={[styles.mh5, styles.flexGrow1]}
>
<Text>{translate('companyStep.subtitle')}</Text>
<TextInput
<InputWrapper
InputComponent={TextInput}
label={translate('companyStep.legalBusinessName')}
accessibilityLabel={translate('companyStep.legalBusinessName')}
role={CONST.ACCESSIBILITY_ROLE.TEXT}
Expand Down Expand Up @@ -189,7 +191,8 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
shouldSaveDraft
streetTranslationKey="common.companyAddress"
/>
<TextInput
<InputWrapper
InputComponent={TextInput}
inputID="companyPhone"
label={translate('common.phoneNumber')}
accessibilityLabel={translate('common.phoneNumber')}
Expand All @@ -200,7 +203,8 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
defaultValue={getDefaultStateForField('companyPhone')}
shouldSaveDraft
/>
<TextInput
<InputWrapper
InputComponent={TextInput}
inputID="website"
label={translate('companyStep.companyWebsite')}
accessibilityLabel={translate('companyStep.companyWebsite')}
Expand All @@ -211,7 +215,8 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
hint={translate('common.websiteExample')}
inputMode={CONST.INPUT_MODE.URL}
/>
<TextInput
<InputWrapper
InputComponent={TextInput}
inputID="companyTaxID"
label={translate('companyStep.taxIDNumber')}
accessibilityLabel={translate('companyStep.taxIDNumber')}
Expand All @@ -225,7 +230,8 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
shouldUseDefaultValue={shouldDisableCompanyTaxID}
/>
<View style={styles.mt4}>
<Picker
<InputWrapper
InputComponent={Picker}
inputID="incorporationType"
label={translate('companyStep.companyType')}
items={_.map(_.keys(CONST.INCORPORATION_TYPES), (key) => ({value: key, label: translate(`companyStep.incorporationTypes.${key}`)}))}
Expand All @@ -235,7 +241,7 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
/>
</View>
<View style={styles.mt4}>
<DatePicker
<NewDatePicker
inputID="incorporationDate"
label={translate('companyStep.incorporationDate')}
placeholder={translate('companyStep.incorporationDatePlaceholder')}
Expand All @@ -244,14 +250,16 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
/>
</View>
<View style={[styles.mt4, styles.mhn5]}>
<StatePicker
<InputWrapper
InputComponent={StatePicker}
inputID="incorporationState"
label={translate('companyStep.incorporationState')}
defaultValue={getDefaultStateForField('incorporationState')}
shouldSaveDraft
/>
</View>
<CheckboxWithLabel
<InputWrapper
InputComponent={CheckboxWithLabel}
accessibilityLabel={`${translate('companyStep.confirmCompanyIsNot')} ${translate('companyStep.listOfRestrictedBusinesses')}`}
inputID="hasNoConnectionToCannabis"
defaultValue={getDefaultStateForField('hasNoConnectionToCannabis', false)}
Expand All @@ -269,7 +277,7 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
style={[styles.mt4]}
shouldSaveDraft
/>
</Form>
</FormProvider>
</ScreenWrapper>
);
}
Expand Down
14 changes: 9 additions & 5 deletions src/pages/ReimbursementAccount/IdentityForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
import _ from 'underscore';
import DatePicker from '@components/DatePicker';
import InputWrapper from '@components/Form/InputWrapper';
import NewDatePicker from '@components/NewDatePicker';
import TextInput from '@components/TextInput';
import useThemeStyles from '@styles/useThemeStyles';
import CONST from '@src/CONST';
Expand Down Expand Up @@ -142,7 +143,8 @@ function IdentityForm(props) {
<View style={props.style}>
<View style={[styles.flexRow]}>
<View style={[styles.flex2, styles.mr2]}>
<TextInput
<InputWrapper
InputComponent={TextInput}
inputID={props.inputKeys.firstName}
shouldSaveDraft={props.shouldSaveDraft}
label={`${props.translate('common.firstName')}`}
Expand All @@ -155,7 +157,8 @@ function IdentityForm(props) {
/>
</View>
<View style={[styles.flex2]}>
<TextInput
<InputWrapper
InputComponent={TextInput}
inputID={props.inputKeys.lastName}
shouldSaveDraft={props.shouldSaveDraft}
label={`${props.translate('common.lastName')}`}
Expand All @@ -168,7 +171,7 @@ function IdentityForm(props) {
/>
</View>
</View>
<DatePicker
<NewDatePicker
inputID={props.inputKeys.dob}
shouldSaveDraft={props.shouldSaveDraft}
label={`${props.translate('common.dob')}`}
Expand All @@ -180,7 +183,8 @@ function IdentityForm(props) {
minDate={minDate}
maxDate={maxDate}
/>
<TextInput
<InputWrapper
InputComponent={TextInput}
inputID={props.inputKeys.ssnLast4}
shouldSaveDraft={props.shouldSaveDraft}
label={`${props.translate('common.ssnLast4')}`}
Expand Down
Loading

0 comments on commit ead926e

Please sign in to comment.