Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor requestor step form #12766

Merged
merged 14 commits into from
Nov 22, 2022
Merged

Refactor requestor step form #12766

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
0c09568
adding hint text for zip code format
mollfpr Nov 16, 2022
bd8c224
adding defaultValues props to handle default value inputs
mollfpr Nov 16, 2022
d070fb2
refactoring requestor step form to use Form.js
mollfpr Nov 16, 2022
bbc9f64
reorder the inputs validation
mollfpr Nov 16, 2022
093c8cb
fix wrong key for default value input state
mollfpr Nov 16, 2022
514ca34
default value fallback from achData
mollfpr Nov 16, 2022
3599d9f
use the get default state instead
mollfpr Nov 16, 2022
3bbce7b
fix the false bankAccountID value
mollfpr Nov 16, 2022
31bbca5
revert unnecessary format
mollfpr Nov 17, 2022
739dafa
update the zipcode example text
mollfpr Nov 18, 2022
701e543
using isRequiredFulfilled to validate required fields
mollfpr Nov 18, 2022
bf91663
preventing the form to rerender when no errors state to update
mollfpr Nov 22, 2022
c0bc0a7
updating the zipcode input
mollfpr Nov 22, 2022
ddcd931
Merge branch 'main' of https://github.com/mollfpr/App into refactor-r…
mollfpr Nov 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/languages/en.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ export default {
maxParticipantsReached: ({count}) => `You've selected the maximum number (${count}) of participants.`,
youAppearToBeOffline: 'You appear to be offline.',
thisFeatureRequiresInternet: 'This feature requires an active internet connection to be used.',
zipCodeExample: 'e.x 12345, 12345-1234, 12345 1234',
neil-marcellini marked this conversation as resolved.
Show resolved Hide resolved
},
attachmentPicker: {
cameraPermissionRequired: 'Camera permission required',
Expand Down
1 change: 1 addition & 0 deletions src/languages/es.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ export default {
maxParticipantsReached: ({count}) => `Has seleccionado el número máximo (${count}) de participantes.`,
youAppearToBeOffline: 'Parece que estás desconectado.',
thisFeatureRequiresInternet: 'Esta función requiere una conexión a Internet activa para ser utilizada.',
zipCodeExample: 'e.x 12345, 12345-1234, 12345 1234',
neil-marcellini marked this conversation as resolved.
Show resolved Hide resolved
},
attachmentPicker: {
cameraPermissionRequired: 'Se necesita permiso para usar la cámara',
Expand Down
26 changes: 26 additions & 0 deletions src/pages/ReimbursementAccount/AddressForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,21 @@ const propTypes = {
/** Callback fired when a field changes. Passes args as {[fieldName]: val} */
onFieldChange: PropTypes.func,

/** Default values */
defaultValues: PropTypes.shape({
/** Address street field */
street: PropTypes.string,

/** Address city field */
city: PropTypes.string,

/** Address state field */
state: PropTypes.string,

/** Address zip code field */
zipCode: PropTypes.string,
}),

/** Form values */
values: PropTypes.shape({
/** Address street field */
Expand Down Expand Up @@ -55,6 +70,12 @@ const defaultProps = {
state: undefined,
zipCode: undefined,
},
defaultValues: {
street: undefined,
city: undefined,
state: undefined,
zipCode: undefined,
},
errors: {},
inputKeys: {
street: '',
Expand All @@ -75,6 +96,7 @@ const AddressForm = props => (
label={props.translate(props.streetTranslationKey)}
containerStyles={[styles.mt4]}
value={props.values.street}
defaultValue={props.defaultValues.street}
onInputChange={props.onFieldChange}
errorText={props.errors.street ? props.translate('bankAccount.error.addressStreet') : ''}
hint={props.translate('common.noPO')}
Expand All @@ -88,6 +110,7 @@ const AddressForm = props => (
shouldSaveDraft={props.shouldSaveDraft}
label={props.translate('common.city')}
value={props.values.city}
defaultValue={props.defaultValues.city}
onChangeText={value => props.onFieldChange({city: value})}
errorText={props.errors.city ? props.translate('bankAccount.error.addressCity') : ''}
/>
Expand All @@ -97,6 +120,7 @@ const AddressForm = props => (
inputID={props.inputKeys.state}
shouldSaveDraft={props.shouldSaveDraft}
value={props.values.state}
defaultValue={props.defaultValues.state}
onInputChange={value => props.onFieldChange({state: value})}
errorText={props.errors.state ? props.translate('bankAccount.error.addressState') : ''}
/>
Expand All @@ -109,9 +133,11 @@ const AddressForm = props => (
containerStyles={[styles.mt4]}
keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
value={props.values.zipCode}
defaultValue={props.defaultValues.zipCode}
onChangeText={value => props.onFieldChange({zipCode: value})}
errorText={props.errors.zipCode ? props.translate('bankAccount.error.zipCode') : ''}
maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
hint={props.translate('common.zipCodeExample')}
Copy link
Member

@rushatgabhane rushatgabhane May 5, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi, we should have used zipFormatter here to have consistent hint messages.

Using it would have prevented #16912

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rushatgabhane 😆 It would not have been possible to use that here, it was added only a couple of months ago.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh hahaha, my bad!

/>
</>
);
Expand Down
49 changes: 45 additions & 4 deletions src/pages/ReimbursementAccount/IdentityForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,33 @@ const propTypes = {
ssnLast4: PropTypes.string,
}),

/** Default values */
defaultValues: PropTypes.shape({
/** First name field */
firstName: PropTypes.string,

/** Last name field */
lastName: PropTypes.string,

/** Address street field */
street: PropTypes.string,

/** Address city field */
city: PropTypes.string,

/** Address state field */
state: PropTypes.string,

/** Address zip code field */
zipCode: PropTypes.string,

/** Date of birth field */
dob: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),

/** Last 4 digits of SSN */
ssnLast4: PropTypes.string,
}),

/** Any errors that can arise from form validation */
errors: PropTypes.objectOf(PropTypes.bool),

Expand Down Expand Up @@ -76,6 +103,16 @@ const defaultProps = {
dob: undefined,
ssnLast4: undefined,
},
defaultValues: {
firstName: undefined,
lastName: undefined,
street: undefined,
city: undefined,
state: undefined,
zipCode: undefined,
dob: undefined,
ssnLast4: undefined,
},
errors: {},
inputKeys: {
firstName: '',
Expand All @@ -95,6 +132,7 @@ const IdentityForm = (props) => {
// dob field has multiple validations/errors, we are handling it temporarily like this.
const dobErrorText = (props.errors.dob ? props.translate('bankAccount.error.dob') : '')
|| (props.errors.dobAge ? props.translate('bankAccount.error.age') : '');
const identityFormInputKeys = ['firstName', 'lastName', 'dob', 'ssnLast4'];

return (
<View style={props.style}>
Expand All @@ -105,6 +143,7 @@ const IdentityForm = (props) => {
shouldSaveDraft={props.shouldSaveDraft}
label={`${props.translate('common.firstName')}`}
value={props.values.firstName}
defaultValue={props.defaultValues.firstName}
onChangeText={value => props.onFieldChange({firstName: value})}
errorText={props.errors.firstName ? props.translate('bankAccount.error.firstName') : ''}
/>
Expand All @@ -115,6 +154,7 @@ const IdentityForm = (props) => {
shouldSaveDraft={props.shouldSaveDraft}
label={`${props.translate('common.lastName')}`}
value={props.values.lastName}
defaultValue={props.defaultValues.lastName}
onChangeText={value => props.onFieldChange({lastName: value})}
errorText={props.errors.lastName ? props.translate('bankAccount.error.lastName') : ''}
/>
Expand All @@ -126,7 +166,7 @@ const IdentityForm = (props) => {
label={`${props.translate('common.dob')}`}
containerStyles={[styles.mt4]}
placeholder={props.translate('common.dateFormat')}
defaultValue={props.values.dob}
defaultValue={props.values.dob || props.defaultValues.dob}
onInputChange={value => props.onFieldChange({dob: value})}
errorText={dobErrorText}
maximumDate={new Date()}
Expand All @@ -137,17 +177,18 @@ const IdentityForm = (props) => {
label={`${props.translate('common.ssnLast4')}`}
containerStyles={[styles.mt4]}
keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
value={props.values.ssnLast4}
defaultValue={props.defaultValues.ssnLast4}
onChangeText={value => props.onFieldChange({ssnLast4: value})}
errorText={props.errors.ssnLast4 ? props.translate('bankAccount.error.ssnLast4') : ''}
maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.SSN}
/>
<AddressForm
inputKeys={_.omit(props.inputKeys, ['firstName', 'lastName', 'dob', 'ssnLast4'])}
inputKeys={_.omit(props.inputKeys, identityFormInputKeys)}
shouldSaveDraft={props.shouldSaveDraft}
translate={props.translate}
streetTranslationKey="common.personalAddress"
values={props.values}
values={_.omit(props.values, identityFormInputKeys)}
defaultValues={_.omit(props.defaultValues, identityFormInputKeys)}
errors={props.errors}
onFieldChange={props.onFieldChange}
/>
Expand Down
Loading