Implement dedicated route for CountryPicker in AddressPage

src/ROUTES.js

@@ -54,6 +54,15 @@ export default {
     SETTINGS_PERSONAL_DETAILS_LEGAL_NAME: `${SETTINGS_PERSONAL_DETAILS}/legal-name`,
     SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH: `${SETTINGS_PERSONAL_DETAILS}/date-of-birth`,
     SETTINGS_PERSONAL_DETAILS_ADDRESS: `${SETTINGS_PERSONAL_DETAILS}/address`,
+    getPersonalDetailsAddressRoute: (country) => `${SETTINGS_PERSONAL_DETAILS}/address?country=${country}`,
+    SETTINGS_PERSONAL_DETAILS_ADDRESS_COUNTRY: `${SETTINGS_PERSONAL_DETAILS}/address/country`,
+    getCountryRoute: (country, backTo) => {
+        let route = `${SETTINGS_PERSONAL_DETAILS}/address/country?country=${country}`;
+        if (backTo) {
+            route += `&backTo=${backTo}`;
+        }
+        return route;
+    },
     SETTINGS_CONTACT_METHODS,
     SETTINGS_CONTACT_METHOD_DETAILS: `${SETTINGS_CONTACT_METHODS}/:contactMethod/details`,
     getEditContactMethodRoute: (contactMethod) => `${SETTINGS_CONTACT_METHODS}/${encodeURIComponent(contactMethod)}/details`,

src/components/CountryPickerMenuItem.js

@@ -0,0 +1,53 @@
+import React 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 = {
+    /** Error text from form, e.g when no country is selected */
+    errorText: PropTypes.string,
+    /** Current selected country  */
+    value: PropTypes.string,
+};
+
+const defaultProps = {
+    errorText: '',
+    value: '',
+};
+
+function CountryPickerMenuItem({errorText, value}, ref) {
+    const {translate} = useLocalize();
+    const getCountryFromCountryCode = (code) => translate('allCountries')[code];
+
+    const countryTitleDescStyle = value && value.length === 0 ? styles.textNormal : null;
+
+    return (
+        <View>
+            <MenuItemWithTopDescription
+                shouldShowRightIcon
+                title={getCountryFromCountryCode(value)}
+                ref={ref}
+                descriptionTextStyle={countryTitleDescStyle}
+                description={translate('common.country')}
+                onPress={() => {
+                    const activeRoute = Navigation.getActiveRoute().replace(/\?.*/, '');
+                    Navigation.navigate(ROUTES.getCountryRoute(value, activeRoute));
+                }}
+            />
+            <View style={styles.ml5}>
+                <FormHelpMessage message={errorText} />
+            </View>
+        </View>
+    );
+}
+
+CountryPickerMenuItem.propTypes = propTypes;
+CountryPickerMenuItem.defaultProps = defaultProps;
+CountryPickerMenuItem.displayName = 'CountryPickerMenuItem';
+
+export default React.forwardRef(CountryPickerMenuItem);

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -440,6 +440,13 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'Settings_PersonalDetails_Address',
     },
+    {
+        getComponent: () => {
+            const CountrySelectionPage = require('../../../pages/settings/Profile/PersonalDetails/CountrySelection').default;
+            return CountrySelectionPage;
+        },
+        name: 'Settings_PersonalDetails_Address_Country',
+    },
     {
         getComponent: () => {
             const SettingsContactMethodsPage = require('../../../pages/settings/Profile/Contacts/ContactMethodsPage').default;

src/libs/Navigation/linkingConfig.js

@@ -153,6 +153,10 @@ export default {
                                 path: ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS,
                                 exact: true,
                             },
+                            Settings_PersonalDetails_Address_Country: {
+                                path: ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS_COUNTRY,
+                                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 CountryPickerMenuItem from '../../../../components/CountryPickerMenuItem';
 
 const propTypes = {
     /* Onyx Props */
@@ -37,6 +37,14 @@ 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 +67,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});
@@ -115,7 +124,7 @@ function AddressPage({privatePersonalDetails}) {
         return errors;
     }, []);
 
-    const handleAddressChange = (value, key) => {
+    const handleAddressChange = useCallback((value, key) => {
         if (key !== 'country' && key !== 'state') {
             return;
         }
@@ -125,7 +134,12 @@ function AddressPage({privatePersonalDetails}) {
             return;
         }
         setState(value);
-    };
+    }, []);
+
+    useEffect(() => {
+        if (!countryFromUrl) return;
+        handleAddressChange(countryFromUrl, 'country');
+    }, [countryFromUrl, handleAddressChange]);
 
     if (lodashGet(privatePersonalDetails, 'isLoading', true)) {
         return <FullscreenLoadingIndicator />;
@@ -175,10 +189,9 @@ function AddressPage({privatePersonalDetails}) {
                 />
                 <View style={styles.formSpaceVertical} />
                 <View style={styles.mhn5}>
-                    <CountryPicker
+                    <CountryPickerMenuItem
                         inputID="country"
-                        defaultValue={currentCountry}
-                        onValueChange={handleAddressChange}
+                        value={currentCountry}
                     />
                 </View>
                 <View style={styles.formSpaceVertical} />