Implement dedicated route for CountryPicker in AddressPage

src/ROUTES.ts

@@ -66,6 +66,13 @@ export default {
     SETTINGS_PERSONAL_DETAILS_LEGAL_NAME:       'settings/profile/personal-details/legal-name',
     SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH:    'settings/profile/personal-details/date-of-birth',
     SETTINGS_PERSONAL_DETAILS_ADDRESS:          'settings/profile/personal-details/address',
+    SETTINGS_PERSONAL_DETAILS_ADDRESS_COUNTRY: {   route:`settings/profile/personal-details/address/country`, getRoute: (country: string, backTo?: string) => {
+        let route = `settings/profile/personal-details/address/country?country=${country}`;
+        if (backTo) {
+            route += `&backTo=${encodeURIComponent(backTo)}`;
+        }
+        return route;
+    }},
     SETTINGS_CONTACT_METHODS:                   'settings/profile/contact-methods',
     SETTINGS_CONTACT_METHOD_DETAILS: {   route: 'settings/profile/contact-methods/:contactMethod/details', getRoute: (contactMethod: string) => `settings/profile/contact-methods/${encodeURIComponent(contactMethod)}/details`},
     SETTINGS_NEW_CONTACT_METHOD:                'settings/profile/contact-methods/new',

src/components/CountrySelector.js

@@ -0,0 +1,77 @@
+import React, {useEffect} from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import styles from '../styles/styles';
+import Navigation from '../libs/Navigation/Navigation';
+import ROUTES from '../ROUTES';
+import useLocalize from '../hooks/useLocalize';
+import MenuItemWithTopDescription from './MenuItemWithTopDescription';
+import FormHelpMessage from './FormHelpMessage';
+
+const propTypes = {
+    /** Form error text. e.g when no country is selected */
+    errorText: PropTypes.string,
+
+    /** Callback called when the country changes. */
+    onInputChange: PropTypes.func.isRequired,
+
+    /** Current selected country  */
+    value: PropTypes.string,
+
+    /** inputID used by the Form component */
+    // eslint-disable-next-line react/no-unused-prop-types
+    inputID: PropTypes.string.isRequired,
+
+    /** React ref being forwarded to the MenuItemWithTopDescription */
+    forwardedRef: PropTypes.func,
+};
+
+const defaultProps = {
+    errorText: '',
+    value: '',
+    forwardedRef: () => {},
+};
+
+function CountrySelector({errorText, value: countryCode, onInputChange, forwardedRef}) {
+    const {translate} = useLocalize();
+
+    const title = countryCode ? translate(`allCountries.${countryCode}`) : '';
+    const countryTitleDescStyle = title.length === 0 ? styles.textNormal : null;
+
+    useEffect(() => {
+        // This will cause the form to revalidate and remove any error related to country name
+        onInputChange(countryCode);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [countryCode]);
+
+    return (
+        <View>
+            <MenuItemWithTopDescription
+                shouldShowRightIcon
+                title={title}
+                ref={forwardedRef}
+                descriptionTextStyle={countryTitleDescStyle}
+                description={translate('common.country')}
+                onPress={() => {
+                    const activeRoute = Navigation.getActiveRoute().replace(/\?.*/, '');
+                    Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS_COUNTRY.getRoute(countryCode, activeRoute));
+                }}
+            />
+            <View style={styles.ml5}>
+                <FormHelpMessage message={errorText} />
+            </View>
+        </View>
+    );
+}
+
+CountrySelector.propTypes = propTypes;
+CountrySelector.defaultProps = defaultProps;
+CountrySelector.displayName = 'CountrySelector';
+
+export default React.forwardRef((props, ref) => (
+    <CountrySelector
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        forwardedRef={ref}
+    />
+));

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -126,6 +126,7 @@ const SettingsModalStackNavigator = createModalStackNavigator({
     Settings_PersonalDetails_LegalName: () => require('../../../pages/settings/Profile/PersonalDetails/LegalNamePage').default,
     Settings_PersonalDetails_DateOfBirth: () => require('../../../pages/settings/Profile/PersonalDetails/DateOfBirthPage').default,
     Settings_PersonalDetails_Address: () => require('../../../pages/settings/Profile/PersonalDetails/AddressPage').default,
+    Settings_PersonalDetails_Address_Country: () => require('../../../pages/settings/Profile/PersonalDetails/CountrySelectionPage').default,
     Settings_ContactMethods: () => require('../../../pages/settings/Profile/Contacts/ContactMethodsPage').default,
     Settings_ContactMethodDetails: () => require('../../../pages/settings/Profile/Contacts/ContactMethodDetailsPage').default,
     Settings_NewContactMethod: () => require('../../../pages/settings/Profile/Contacts/NewContactMethodPage').default,

src/libs/Navigation/linkingConfig.js

@@ -147,6 +147,10 @@ export default {
                                 path: ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS,
                                 exact: true,
                             },
+                            Settings_PersonalDetails_Address_Country: {
+                                path: ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS_COUNTRY.route,
+                                exact: true,
+                            },
                             Settings_TwoFactorAuth: {
                                 path: ROUTES.SETTINGS_2FA,
                                 exact: true,

src/pages/settings/Profile/PersonalDetails/AddressPage.js

@@ -1,6 +1,6 @@
 import lodashGet from 'lodash/get';
 import _ from 'underscore';
-import React, {useState, useCallback} from 'react';
+import React, {useState, useCallback, useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import {CONST as COMMON_CONST} from 'expensify-common/lib/CONST';
@@ -15,13 +15,13 @@ import styles from '../../../../styles/styles';
 import * as PersonalDetails from '../../../../libs/actions/PersonalDetails';
 import * as ValidationUtils from '../../../../libs/ValidationUtils';
 import AddressSearch from '../../../../components/AddressSearch';
-import CountryPicker from '../../../../components/CountryPicker';
 import StatePicker from '../../../../components/StatePicker';
 import Navigation from '../../../../libs/Navigation/Navigation';
 import ROUTES from '../../../../ROUTES';
 import useLocalize from '../../../../hooks/useLocalize';
 import usePrivatePersonalDetails from '../../../../hooks/usePrivatePersonalDetails';
 import FullscreenLoadingIndicator from '../../../../components/FullscreenLoadingIndicator';
+import CountrySelector from '../../../../components/CountrySelector';
 
 const propTypes = {
     /* Onyx Props */
@@ -37,6 +37,15 @@ const propTypes = {
             country: PropTypes.string,
         }),
     }),
+
+    /** Route from navigation */
+    route: PropTypes.shape({
+        /** Params from the route */
+        params: PropTypes.shape({
+            /** Currently selected country */
+            country: PropTypes.string,
+        }),
+    }).isRequired,
 };
 
 const defaultProps = {
@@ -59,10 +68,11 @@ function updateAddress(values) {
     PersonalDetails.updateAddress(values.addressLine1.trim(), values.addressLine2.trim(), values.city.trim(), values.state.trim(), values.zipPostCode.trim().toUpperCase(), values.country);
 }
 
-function AddressPage({privatePersonalDetails}) {
+function AddressPage({privatePersonalDetails, route}) {
     usePrivatePersonalDetails();
     const {translate} = useLocalize();
-    const [currentCountry, setCurrentCountry] = useState(PersonalDetails.getCountryISO(lodashGet(privatePersonalDetails, 'address.country')));
+    const countryFromUrl = lodashGet(route, 'params.country');
+    const [currentCountry, setCurrentCountry] = useState(countryFromUrl || PersonalDetails.getCountryISO(lodashGet(privatePersonalDetails, 'address.country')));
     const isUSAForm = currentCountry === CONST.COUNTRY.US;
     const zipSampleFormat = lodashGet(CONST.COUNTRY_ZIP_REGEX_DATA, [currentCountry, 'samples'], '');
     const zipFormat = translate('common.zipCodeExampleFormat', {zipSampleFormat});
@@ -116,7 +126,7 @@ function AddressPage({privatePersonalDetails}) {
         return errors;
     }, []);
 
-    const handleAddressChange = (value, key) => {
+    const handleAddressChange = useCallback((value, key) => {
         if (key !== 'country' && key !== 'state') {
             return;
         }
@@ -126,7 +136,14 @@ function AddressPage({privatePersonalDetails}) {
             return;
         }
         setState(value);
-    };
+    }, []);
+
+    useEffect(() => {
+        if (!countryFromUrl) {
+            return;
+        }
+        handleAddressChange(countryFromUrl, 'country');
+    }, [countryFromUrl, handleAddressChange]);
 
     return (
         <ScreenWrapper
@@ -178,10 +195,9 @@ function AddressPage({privatePersonalDetails}) {
                     />
                     <View style={styles.formSpaceVertical} />
                     <View style={styles.mhn5}>
-                        <CountryPicker
+                        <CountrySelector
                             inputID="country"
-                            defaultValue={currentCountry}
-                            onValueChange={handleAddressChange}
+                            value={currentCountry}
                         />
                     </View>
                     <View style={styles.formSpaceVertical} />