Refactor requestor step form

src/CONST.js

@@ -104,7 +104,7 @@ const CONST = {
         },
         MAX_LENGTH: {
             SSN: 4,
-            ZIP_CODE: 5,
+            ZIP_CODE: 10,
         },
         TYPE: {
             BUSINESS: 'BUSINESS',

src/components/Form.js

@@ -144,7 +144,11 @@ class Form extends React.Component {
         const errors = _.pick(validationErrors, (inputValue, inputID) => (
             Boolean(this.touchedInputs[inputID])
         ));
-        this.setState({errors});
+
+        if (!_.isEqual(errors, this.state.errors)) {
+            this.setState({errors});
+        }
+
         return errors;
     }
 

src/languages/en.js

@@ -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.g. 12345, 12345-1234, 12345 1234',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Camera permission required',

src/languages/es.js

@@ -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: 'p. ej. 12345, 12345-1234, 12345 1234',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Se necesita permiso para usar la cámara',

src/pages/ReimbursementAccount/AddressForm.js

@@ -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 */
@@ -55,6 +70,12 @@ const defaultProps = {
         state: undefined,
         zipCode: undefined,
     },
+    defaultValues: {
+        street: undefined,
+        city: undefined,
+        state: undefined,
+        zipCode: undefined,
+    },
     errors: {},
     inputKeys: {
         street: '',
@@ -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')}
@@ -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') : ''}
                 />
@@ -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') : ''}
                 />
@@ -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')}
         />
     </>
 );

src/pages/ReimbursementAccount/IdentityForm.js

@@ -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),
 
@@ -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: '',
@@ -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}>
@@ -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') : ''}
                     />
@@ -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') : ''}
                     />
@@ -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()}
@@ -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}
             />