17548 Personal details push to page

src/ROUTES.js

@@ -70,6 +70,12 @@ export default {
     getReportShareCodeRoute: (reportID) => `r/${reportID}/details/shareCode`,
     REPORT_ATTACHMENTS: 'r/:reportID/attachment',
     getReportAttachmentRoute: (reportID, source) => `r/${reportID}/attachment?source=${encodeURI(source)}`,
+    SELECT_YEAR: 'select-year',
+    getYearSelectionRoute: (minYear, maxYear, currYear, backTo) => `select-year?min=${minYear}&max=${maxYear}&year=${currYear}&backTo=${backTo}`,
+    SELECT_COUNTRY: 'select-country',
+    getCountrySelectionRoute: (key, backTo) => `select-country?key=${key}&backTo=${backTo}`,
+    SELECT_STATE: 'select-states',
+    getUsaStateSelectionRoute: (key, backTo) => `select-states?key=${key}&backTo=${encodeURIComponent(backTo)}`,
 
     /** This is a utility route used to go to the user's concierge chat, or the sign-in page if the user's not authenticated */
     CONCIERGE: 'concierge',

src/components/AddressSearch/index.js

@@ -66,6 +66,8 @@ const propTypes = {
     /** Maximum number of characters allowed in search input */
     maxInputLength: PropTypes.number,
 
+    onAddressChange: PropTypes.func,
+
     ...withLocalizePropTypes,
 };
 
@@ -86,6 +88,7 @@ const defaultProps = {
         zipCode: 'addressZipCode',
     },
     maxInputLength: undefined,
+    onAddressChange: () => {},
 };
 
 // Do not convert to class component! It's been tried before and presents more challenges than it's worth.
@@ -168,9 +171,15 @@ function AddressSearch(props) {
             state: state || stateAutoCompleteFallback,
         };
 
+        const isValidCountryCode = lodashGet(CONST.ALL_COUNTRIES, country);
+        if (isValidCountryCode) {
+            values.country = country;
+        }
+
         // If the address is not in the US, use the full length state name since we're displaying the address's
         // state / province in a TextInput instead of in a picker.
-        if (country !== CONST.COUNTRY.US) {
+        const isUS = country === CONST.COUNTRY.US;
+        if (!isUS) {
             values.state = longStateName;
         }
 
@@ -186,18 +195,19 @@ function AddressSearch(props) {
             values.street += `, ${subpremise}`;
         }
 
-        const isValidCountryCode = lodashGet(CONST.ALL_COUNTRIES, country);
-        if (isValidCountryCode) {
-            values.country = country;
-        }
-
         if (props.inputID) {
             _.each(values, (value, key) => {
                 const inputKey = lodashGet(props.renamedInputKeys, key, key);
                 props.onInputChange(value, inputKey);
             });
+            if (props.onAddressChange) {
+                props.onAddressChange();
+            }
         } else {
             props.onInputChange(values);
+            if (props.onAddressChange) {
+                props.onAddressChange();
+            }
         }
     };
 

src/components/CountryPicker.js

@@ -1,67 +1,91 @@
-import _ from 'underscore';
-import React, {forwardRef} from 'react';
+import React, {useCallback, useEffect} from 'react';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import Picker from './Picker';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import {useFocusEffect} from '@react-navigation/native';
+import styles from '../styles/styles';
+import MenuItemWithTopDescription from './MenuItemWithTopDescription';
+import * as PersonalDetails from '../libs/actions/PersonalDetails';
+import useNavigationStorage from '../hooks/useNavigationStorage';
+import Navigation from '../libs/Navigation/Navigation';
+import useLocalize from '../hooks/useLocalize';
+import ROUTES from '../ROUTES';
+import FormHelpMessage from './FormHelpMessage';
 
 const propTypes = {
-    /** The label for the field */
-    label: PropTypes.string,
+    /** The ISO code of the country */
+    countryISO: PropTypes.string,
 
-    /** A callback method that is called when the value changes and it receives the selected value as an argument. */
-    onInputChange: PropTypes.func.isRequired,
-
-    /** The value that needs to be selected */
-    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-    /** The ID used to uniquely identify the input in a form */
-    inputID: PropTypes.string,
-
-    /** Saves a draft of the input value when used in a form */
-    shouldSaveDraft: PropTypes.bool,
+    /** Form Error description */
+    errorText: PropTypes.string,
 
-    /** Callback that is called when the text input is blurred */
-    onBlur: PropTypes.func,
+    /** Country to display */
+    // eslint-disable-next-line react/require-default-props
+    value: PropTypes.string,
 
-    /** Error text to display */
-    errorText: PropTypes.string,
+    /** ID of the input */
+    inputID: PropTypes.string.isRequired,
 
-    ...withLocalizePropTypes,
+    /** Callback to call when the input changes */
+    onInputChange: PropTypes.func,
 };
 
 const defaultProps = {
-    label: '',
-    value: undefined,
+    countryISO: '',
     errorText: '',
-    shouldSaveDraft: false,
-    inputID: undefined,
-    onBlur: () => {},
+    onInputChange: () => {},
 };
 
-const CountryPicker = forwardRef((props, ref) => {
-    const COUNTRIES = _.map(props.translate('allCountries'), (countryName, countryISO) => ({
-        value: countryISO,
-        label: countryName,
-    }));
+const CountryPicker = React.forwardRef(({value, countryISO, inputID, errorText, onInputChange}, ref) => {
+    const {translate} = useLocalize();
+    const countryValue = value || countryISO || '';
+    const [collect, save] = useNavigationStorage(inputID, countryValue);
+
+    useEffect(() => {
+        const savedCountry = collect();
+        if (!countryValue || savedCountry === countryValue) {
+            return;
+        }
+        save(countryValue);
+    }, [countryValue, collect, save]);
+
+    useFocusEffect(
+        useCallback(() => {
+            const savedCountry = collect();
+            if (savedCountry && savedCountry !== countryValue) {
+                save(savedCountry);
+                // Needed to call onInputChange, so Form can update the validation and values
+                onInputChange(savedCountry);
+            }
+            // onInputChange isn't a stable function, so we can't add it to the dependency array
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [collect, countryValue]),
+    );
+
+    const navigateToCountrySelector = () => {
+        Navigation.navigate(ROUTES.getCountrySelectionRoute(inputID, Navigation.getActiveRoute()));
+    };
 
+    const title = PersonalDetails.getCountryName(countryValue);
+    const descStyle = title.length === 0 ? styles.addressPickerDescription : null;
     return (
-        <Picker
-            ref={ref}
-            inputID={props.inputID}
-            placeholder={{value: '', label: '-'}}
-            items={COUNTRIES}
-            onInputChange={props.onInputChange}
-            value={props.value}
-            label={props.label || props.translate('common.country')}
-            errorText={props.errorText}
-            onBlur={props.onBlur}
-            shouldSaveDraft={props.shouldSaveDraft}
-        />
+        <View>
+            <MenuItemWithTopDescription
+                ref={ref}
+                shouldShowRightIcon
+                title={title}
+                descriptionTextStyle={descStyle}
+                description={translate('common.country')}
+                onPress={navigateToCountrySelector}
+            />
+            <View style={styles.ml5}>
+                <FormHelpMessage message={errorText} />
+            </View>
+        </View>
     );
 });
 
 CountryPicker.propTypes = propTypes;
 CountryPicker.defaultProps = defaultProps;
 CountryPicker.displayName = 'CountryPicker';
 
-export default withLocalize(CountryPicker);
+export default CountryPicker;

src/components/MenuItemWithTopDescription.js

@@ -6,16 +6,15 @@ const propTypes = {
     ...menuItemPropTypes,
 };
 
-function MenuItemWithTopDescription(props) {
-    return (
-        <MenuItem
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            shouldShowBasicTitle
-            shouldShowDescriptionOnTop
-        />
-    );
-}
+const MenuItemWithTopDescription = React.forwardRef((props, ref) => (
+    <MenuItem
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        ref={ref}
+        shouldShowBasicTitle
+        shouldShowDescriptionOnTop
+    />
+));
 
 MenuItemWithTopDescription.propTypes = propTypes;
 MenuItemWithTopDescription.displayName = 'MenuItemWithTopDescription';

src/components/StatePicker.js

@@ -1,67 +1,102 @@
-import _ from 'underscore';
-import React, {forwardRef} from 'react';
+import React, {useCallback, useMemo, useEffect} from 'react';
+import {View} from 'react-native';
+import {useRoute, useFocusEffect} from '@react-navigation/native';
 import PropTypes from 'prop-types';
-import Picker from './Picker';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import useNavigationStorage from '../hooks/useNavigationStorage';
+import styles from '../styles/styles';
+import MenuItemWithTopDescription from './MenuItemWithTopDescription';
+import useLocalize from '../hooks/useLocalize';
+import Navigation from '../libs/Navigation/Navigation';
+import ROUTES from '../ROUTES';
+import FormHelpMessage from './FormHelpMessage';
 
 const propTypes = {
-    /** The label for the field */
-    label: PropTypes.string,
-
-    /** A callback method that is called when the value changes and it receives the selected value as an argument. */
-    onInputChange: PropTypes.func.isRequired,
-
-    /** The value that needs to be selected */
-    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-    /** The ID used to uniquely identify the input in a Form */
-    inputID: PropTypes.string,
+    /** Error text to display */
+    errorText: PropTypes.string,
 
-    /** Saves a draft of the input value when used in a form */
-    shouldSaveDraft: PropTypes.bool,
+    /** Default value to display */
+    defaultValue: PropTypes.string,
 
-    /** Callback that is called when the text input is blurred */
-    onBlur: PropTypes.func,
+    /** State to display */
+    // eslint-disable-next-line react/require-default-props
+    value: PropTypes.string,
 
-    /** Error text to display */
-    errorText: PropTypes.string,
+    /** ID of the input */
+    inputID: PropTypes.string.isRequired,
 
-    ...withLocalizePropTypes,
+    /** Callback to call when the input changes */
+    onInputChange: PropTypes.func,
 };
 
 const defaultProps = {
-    label: '',
-    value: undefined,
     errorText: '',
-    shouldSaveDraft: false,
-    inputID: undefined,
-    onBlur: () => {},
+    defaultValue: '',
+    onInputChange: () => {},
 };
 
-const StatePicker = forwardRef((props, ref) => {
-    const STATES = _.chain(props.translate('allStates'))
-        .sortBy((state) => state.stateName.toLowerCase())
-        .map((state) => ({value: state.stateISO, label: state.stateName}))
-        .value();
+const StatePicker = React.forwardRef(({value, defaultValue, inputID, errorText, onInputChange}, ref) => {
+    const route = useRoute();
+    const {translate} = useLocalize();
+    const formValue = value || defaultValue || '';
+    const [collect, save] = useNavigationStorage(inputID, formValue);
+
+    useEffect(() => {
+        const collectedState = collect();
+        if (!formValue || collectedState === formValue) {
+            return;
+        }
+        save(formValue);
+    }, [formValue, collect, save]);
+
+    useFocusEffect(
+        useCallback(() => {
+            const collectedState = collect();
+            if (collectedState && collectedState !== formValue) {
+                save(collectedState);
+                // Needed to call onInputChange, so Form can update the validation and values
+                onInputChange(collectedState);
+            }
+            // onInputChange isn't a stable function, so we can't add it to the dependency array
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [collect, formValue]),
+    );
+
+    const navigateToCountrySelector = () => {
+        // Try first using the route.path so I can keep any query params
+        Navigation.navigate(ROUTES.getUsaStateSelectionRoute(inputID, route.path || Navigation.getActiveRoute()));
+    };
+
+    const title = useMemo(() => {
+        const allStates = translate('allStates');
+
+        if (allStates[formValue]) {
+            return allStates[formValue].stateName;
+        }
+
+        return '';
+    }, [translate, formValue]);
+
+    const descStyle = title.length === 0 ? styles.addressPickerDescription : null;
 
     return (
-        <Picker
-            ref={ref}
-            inputID={props.inputID}
-            placeholder={{value: '', label: '-'}}
-            items={STATES}
-            onInputChange={props.onInputChange}
-            value={props.value}
-            label={props.label || props.translate('common.state')}
-            errorText={props.errorText}
-            onBlur={props.onBlur}
-            shouldSaveDraft={props.shouldSaveDraft}
-        />
+        <View>
+            <MenuItemWithTopDescription
+                ref={ref}
+                shouldShowRightIcon
+                title={title}
+                description={translate('common.state')}
+                descriptionTextStyle={descStyle}
+                onPress={navigateToCountrySelector}
+            />
+            <View style={styles.ml5}>
+                <FormHelpMessage message={errorText} />
+            </View>
+        </View>
     );
 });
 
 StatePicker.propTypes = propTypes;
 StatePicker.defaultProps = defaultProps;
 StatePicker.displayName = 'StatePicker';
 
-export default withLocalize(StatePicker);
+export default StatePicker;

src/components/TextInput/BaseTextInput.js

@@ -371,6 +371,7 @@ function BaseTextInput(props) {
                 </PressableWithoutFeedback>
                 {!_.isEmpty(inputHelpText) && (
                     <FormHelpMessage
+                        style={props.hintContainerStyle}
                         isError={!_.isEmpty(props.errorText)}
                         message={inputHelpText}
                     />