Fix/address page state navigation 2

src/ROUTES.ts

@@ -131,6 +131,16 @@ const ROUTES = {
         route: 'settings/profile/address/country',
         getRoute: (country: string, backTo?: string) => getUrlWithBackToParam(`settings/profile/address/country?country=${country}`, backTo),
     },
+    SETTINGS_ADDRESS_STATE: {
+        route: 'settings/profile/address/state',
+
+        getRoute: (state?: string, backTo?: string, label?: string) =>
+            `${getUrlWithBackToParam(`settings/profile/address/state${state ? `?state=${encodeURIComponent(state)}` : ''}`, backTo)}${
+                // the label param can be an empty string so we cannot use a nullish ?? operator
+                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                label ? `${backTo || state ? '&' : '?'}label=${encodeURIComponent(label)}` : ''
+            }` as const,
+    },
     SETTINGS_CONTACT_METHODS: {
         route: 'settings/profile/contact-methods',
         getRoute: (backTo?: string) => getUrlWithBackToParam('settings/profile/contact-methods', backTo),
@@ -407,6 +417,16 @@ const ROUTES = {
             `create/${iouType}/start/${transactionID}/${reportID}/scan` as const,
     },
 
+    MONEY_REQUEST_STATE_SELECTOR: {
+        route: 'request/state',
+
+        getRoute: (state?: string, backTo?: string, label?: string) =>
+            `${getUrlWithBackToParam(`request/state${state ? `?state=${encodeURIComponent(state)}` : ''}`, backTo)}${
+                // the label param can be an empty string so we cannot use a nullish ?? operator
+                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                label ? `${backTo || state ? '&' : '?'}label=${encodeURIComponent(label)}` : ''
+            }` as const,
+    },
     IOU_REQUEST: 'request/new',
     IOU_SEND: 'send/new',
     IOU_SEND_ADD_BANK_ACCOUNT: 'send/new/add-bank-account',

src/SCREENS.ts

@@ -56,6 +56,7 @@ const SCREENS = {
             DATE_OF_BIRTH: 'Settings_DateOfBirth',
             ADDRESS: 'Settings_Address',
             ADDRESS_COUNTRY: 'Settings_Address_Country',
+            ADDRESS_STATE: 'Settings_Address_State',
         },
 
         PREFERENCES: {
@@ -156,6 +157,7 @@ const SCREENS = {
         WAYPOINT: 'Money_Request_Waypoint',
         EDIT_WAYPOINT: 'Money_Request_Edit_Waypoint',
         RECEIPT: 'Money_Request_Receipt',
+        STATE_SELECTOR: 'Money_Request_State_Selector',
     },
 
     IOU_SEND: {

src/components/AddressForm.tsx

@@ -16,7 +16,7 @@ import CountrySelector from './CountrySelector';
 import FormProvider from './Form/FormProvider';
 import InputWrapper from './Form/InputWrapper';
 import type {FormOnyxValues} from './Form/types';
-import StatePicker from './StatePicker';
+import StateSelector from './StateSelector';
 import TextInput from './TextInput';
 
 type CountryZipRegex = {
@@ -190,7 +190,7 @@ function AddressForm({
             {isUSAForm ? (
                 <View style={styles.mhn5}>
                     <InputWrapper
-                        InputComponent={StatePicker}
+                        InputComponent={StateSelector}
                         inputID={INPUT_IDS.STATE}
                         defaultValue={state}
                         onValueChange={onAddressChanged}

src/components/Form/types.ts

@@ -13,7 +13,7 @@ import type Picker from '@components/Picker';
 import type RadioButtons from '@components/RadioButtons';
 import type RoomNameInput from '@components/RoomNameInput';
 import type SingleChoiceQuestion from '@components/SingleChoiceQuestion';
-import type StatePicker from '@components/StatePicker';
+import type StateSelector from '@components/StateSelector';
 import type TextInput from '@components/TextInput';
 import type TextPicker from '@components/TextPicker';
 import type ValuePicker from '@components/ValuePicker';
@@ -40,7 +40,7 @@ type ValidInputs =
     | typeof CountrySelector
     | typeof AmountForm
     | typeof BusinessTypePicker
-    | typeof StatePicker
+    | typeof StateSelector
     | typeof RoomNameInput
     | typeof ValuePicker
     | typeof DatePicker

src/components/StateSelector.tsx

@@ -0,0 +1,103 @@
+import {useIsFocused} from '@react-navigation/native';
+import {CONST as COMMON_CONST} from 'expensify-common/lib/CONST';
+import React, {useEffect, useRef} from 'react';
+import type {ForwardedRef} from 'react';
+import {View} from 'react-native';
+import useGeographicalStateFromRoute from '@hooks/useGeographicalStateFromRoute';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type {MaybePhraseKey} from '@libs/Localize';
+import Navigation from '@libs/Navigation/Navigation';
+import ROUTES from '@src/ROUTES';
+import FormHelpMessage from './FormHelpMessage';
+import type {MenuItemProps} from './MenuItem';
+import MenuItemWithTopDescription from './MenuItemWithTopDescription';
+
+type State = keyof typeof COMMON_CONST.STATES;
+
+type StateSelectorProps = {
+    /** Form error text. e.g when no state is selected */
+    errorText?: MaybePhraseKey;
+
+    /** Current selected state  */
+    value?: State | '';
+
+    /** Callback to call when the input changes */
+    onInputChange?: (value: string) => void;
+
+    /** Label to display on field */
+    label?: string;
+
+    /** Any additional styles to apply */
+    wrapperStyle?: MenuItemProps['wrapperStyle'];
+
+    /** Callback to call when the picker modal is dismissed */
+    onBlur?: () => void;
+
+    /** object to get route details from */
+    stateSelectorRoute?: typeof ROUTES.SETTINGS_ADDRESS_STATE | typeof ROUTES.MONEY_REQUEST_STATE_SELECTOR;
+};
+
+function StateSelector(
+    {errorText, onBlur, value: stateCode, label, onInputChange, wrapperStyle, stateSelectorRoute = ROUTES.SETTINGS_ADDRESS_STATE}: StateSelectorProps,
+    ref: ForwardedRef<View>,
+) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const stateFromUrl = useGeographicalStateFromRoute();
+
+    const didOpenStateSelector = useRef(false);
+    const isFocused = useIsFocused();
+
+    useEffect(() => {
+        if (isFocused && didOpenStateSelector.current) {
+            didOpenStateSelector.current = false;
+            if (!stateFromUrl) {
+                onBlur?.();
+            }
+        }
+
+        if (!stateFromUrl) {
+            return;
+        }
+
+        // This will cause the form to revalidate and remove any error related to country name
+        if (onInputChange) {
+            onInputChange(stateFromUrl);
+        }
+
+        Navigation.setParams({state: undefined});
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [stateFromUrl, onBlur, isFocused]);
+
+    const title = stateCode && Object.keys(COMMON_CONST.STATES).includes(stateCode) ? translate(`allStates.${stateCode}.stateName`) : '';
+    const descStyle = title.length === 0 ? styles.textNormal : null;
+
+    return (
+        <View>
+            <MenuItemWithTopDescription
+                descriptionTextStyle={descStyle}
+                ref={ref}
+                shouldShowRightIcon
+                title={title}
+                // Label can be an empty string
+                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                description={label || translate('common.state')}
+                onPress={() => {
+                    const activeRoute = Navigation.getActiveRoute();
+                    didOpenStateSelector.current = true;
+                    Navigation.navigate(stateSelectorRoute.getRoute(stateCode, activeRoute, label));
+                }}
+                wrapperStyle={wrapperStyle}
+            />
+            <View style={styles.ml5}>
+                <FormHelpMessage message={errorText} />
+            </View>
+        </View>
+    );
+}
+
+StateSelector.displayName = 'StateSelector';
+
+export default React.forwardRef(StateSelector);