Merge pull request #36770 from ygshbht/fix/address-page-state-navigat…

…ion-2

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),
@@ -401,6 +411,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: {
@@ -154,6 +155,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