feat: Step 3 UI

package.json

@@ -108,7 +108,7 @@
     "date-fns-tz": "^3.2.0",
     "dom-serializer": "^0.2.2",
     "domhandler": "^4.3.0",
-    "expensify-common": "2.0.101",
+    "expensify-common": "2.0.106",
     "expo": "51.0.31",
     "expo-av": "14.0.7",
     "expo-image": "1.12.15",

src/components/CountryPicker/CountrySelectorModal.tsx

@@ -7,8 +7,8 @@ import RadioListItem from '@components/SelectionList/RadioListItem';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import searchCountryOptions from '@libs/searchCountryOptions';
-import type {CountryData} from '@libs/searchCountryOptions';
+import searchOptions from '@libs/searchOptions';
+import type {Option} from '@libs/searchOptions';
 import StringUtils from '@libs/StringUtils';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
@@ -27,7 +27,7 @@ type CountrySelectorModalProps = {
     currentCountry: string;
 
     /** Function to call when the user selects a country */
-    onCountrySelected: (value: CountryData) => void;
+    onCountrySelected: (value: Option) => void;
 
     /** Function to call when the user presses on the modal backdrop */
     onBackdropPress?: () => void;
@@ -52,7 +52,7 @@ function CountrySelectorModal({isVisible, currentCountry, onCountrySelected, onC
         [translate, currentCountry],
     );
 
-    const searchResults = searchCountryOptions(debouncedSearchValue, countries);
+    const searchResults = searchOptions(debouncedSearchValue, countries);
     const headerMessage = debouncedSearchValue.trim() && !searchResults.length ? translate('common.noResultsFound') : '';
 
     const styles = useThemeStyles();

src/components/CountryPicker/index.tsx

@@ -2,7 +2,7 @@ import React, {useState} from 'react';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
-import type {CountryData} from '@libs/searchCountryOptions';
+import type {Option} from '@libs/searchOptions';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import CountrySelectorModal from './CountrySelectorModal';
@@ -26,7 +26,7 @@ function CountryPicker({value, errorText, onInputChange = () => {}}: CountryPick
         setIsPickerVisible(false);
     };
 
-    const updateInput = (item: CountryData) => {
+    const updateInput = (item: Option) => {
         onInputChange?.(item.value);
         hidePickerModal();
     };

src/components/PushRowWithModal/PushRowModal.tsx

@@ -1,10 +1,13 @@
-import React, {useEffect, useState} from 'react';
+import React, {useMemo} from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
+import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
+import searchOptions from '@libs/searchOptions';
+import StringUtils from '@libs/StringUtils';
 import CONST from '@src/CONST';
 
 type PushRowModalProps = {
@@ -40,44 +43,28 @@ type ListItemType = {
 function PushRowModal({isVisible, selectedOption, onOptionChange, onClose, optionsList, headerTitle, searchInputTitle}: PushRowModalProps) {
     const {translate} = useLocalize();
 
-    const allOptions = Object.entries(optionsList).map(([key, value]) => ({
-        value: key,
-        text: value,
-        keyForList: key,
-        isSelected: key === selectedOption,
-    }));
-    const [searchbarInputText, setSearchbarInputText] = useState('');
-    const [optionListItems, setOptionListItems] = useState(allOptions);
-
-    useEffect(() => {
-        setOptionListItems((prevOptionListItems) =>
-            prevOptionListItems.map((option) => ({
-                ...option,
-                isSelected: option.value === selectedOption,
+    const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
+
+    const options = useMemo(
+        () =>
+            Object.entries(optionsList).map(([key, value]) => ({
+                value: key,
+                text: value,
+                keyForList: key,
+                isSelected: key === selectedOption,
+                searchValue: StringUtils.sanitizeString(value),
             })),
-        );
-    }, [selectedOption]);
-
-    const filterShownOptions = (searchText: string) => {
-        setSearchbarInputText(searchText);
-        const searchWords = searchText.toLowerCase().match(/[a-z0-9]+/g) ?? [];
-        setOptionListItems(
-            allOptions.filter((option) =>
-                searchWords.every((word) =>
-                    option.text
-                        .toLowerCase()
-                        .replace(/[^a-z0-9]/g, ' ')
-                        .includes(word),
-                ),
-            ),
-        );
-    };
+        [optionsList, selectedOption],
+    );
 
     const handleSelectRow = (option: ListItemType) => {
         onOptionChange(option.value);
         onClose();
     };
 
+    const searchResults = searchOptions(debouncedSearchValue, options);
+    const headerMessage = debouncedSearchValue.trim() && !searchResults.length ? translate('common.noResultsFound') : '';
+
     return (
         <Modal
             onClose={onClose}
@@ -97,13 +84,13 @@ function PushRowModal({isVisible, selectedOption, onOptionChange, onClose, optio
                     onBackButtonPress={onClose}
                 />
                 <SelectionList
-                    headerMessage={searchbarInputText.trim().length && !optionListItems.length ? translate('common.noResultsFound') : ''}
+                    headerMessage={headerMessage}
                     textInputLabel={searchInputTitle}
-                    textInputValue={searchbarInputText}
-                    onChangeText={filterShownOptions}
+                    textInputValue={searchValue}
+                    onChangeText={setSearchValue}
                     onSelectRow={handleSelectRow}
-                    sections={[{data: optionListItems}]}
-                    initiallyFocusedOptionKey={optionListItems.find((option) => option.value === selectedOption)?.keyForList}
+                    sections={[{data: searchResults}]}
+                    initiallyFocusedOptionKey={selectedOption}
                     showScrollIndicator
                     shouldShowTooltips={false}
                     ListItem={RadioListItem}

src/components/PushRowWithModal/index.tsx

@@ -8,11 +8,11 @@ type PushRowWithModalProps = {
     /** The list of options that we want to display where key is option code and value is option name */
     optionsList: Record<string, string>;
 
-    /** The currently selected option */
-    selectedOption: string;
+    /** Current value of the selected item */
+    value?: string;
 
-    /** Function to call when the user selects an option */
-    onOptionChange: (option: string) => void;
+    /** Function called whenever list item is selected */
+    onInputChange?: (value: string, key?: string) => void;
 
     /** Additional styles to apply to container */
     wrapperStyles?: StyleProp<ViewStyle>;
@@ -32,13 +32,12 @@ type PushRowWithModalProps = {
     /** Text to display on error message */
     errorText?: string;
 
-    /** Function called whenever option changes */
-    onInputChange?: (value: string) => void;
+    /** The ID of the input that should be reset when the value changes */
+    stateInputIDToReset?: string;
 };
 
 function PushRowWithModal({
-    selectedOption,
-    onOptionChange,
+    value,
     optionsList,
     wrapperStyles,
     description,
@@ -47,6 +46,7 @@ function PushRowWithModal({
     shouldAllowChange = true,
     errorText,
     onInputChange = () => {},
+    stateInputIDToReset,
 }: PushRowWithModalProps) {
     const [isModalVisible, setIsModalVisible] = useState(false);
 
@@ -58,16 +58,19 @@ function PushRowWithModal({
         setIsModalVisible(true);
     };
 
-    const handleOptionChange = (value: string) => {
-        onOptionChange(value);
-        onInputChange(value);
+    const handleOptionChange = (optionValue: string) => {
+        onInputChange(optionValue);
+
+        if (stateInputIDToReset) {
+            onInputChange('', stateInputIDToReset);
+        }
     };
 
     return (
         <>
             <MenuItemWithTopDescription
                 description={description}
-                title={optionsList[selectedOption]}
+                title={value ? optionsList[value] : ''}
                 shouldShowRightIcon={shouldAllowChange}
                 onPress={handleModalOpen}
                 wrapperStyle={wrapperStyles}
@@ -77,7 +80,7 @@ function PushRowWithModal({
             />
             <PushRowModal
                 isVisible={isModalVisible}
-                selectedOption={selectedOption}
+                selectedOption={value ?? ''}
                 onOptionChange={handleOptionChange}
                 onClose={handleModalClose}
                 optionsList={optionsList}

src/components/StatePicker/StateSelectorModal.tsx

@@ -8,8 +8,8 @@ import RadioListItem from '@components/SelectionList/RadioListItem';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import searchCountryOptions from '@libs/searchCountryOptions';
-import type {CountryData} from '@libs/searchCountryOptions';
+import searchOptions from '@libs/searchOptions';
+import type {Option} from '@libs/searchOptions';
 import StringUtils from '@libs/StringUtils';
 import CONST from '@src/CONST';
 
@@ -29,7 +29,7 @@ type StateSelectorModalProps = {
     currentState: string;
 
     /** Function to call when the user selects a state */
-    onStateSelected: (value: CountryData) => void;
+    onStateSelected: (value: Option) => void;
 
     /** Function to call when the user presses on the modal backdrop */
     onBackdropPress?: () => void;
@@ -56,7 +56,7 @@ function StateSelectorModal({isVisible, currentState, onStateSelected, onClose,
         [translate, currentState],
     );
 
-    const searchResults = searchCountryOptions(debouncedSearchValue, countryStates);
+    const searchResults = searchOptions(debouncedSearchValue, countryStates);
     const headerMessage = debouncedSearchValue.trim() && !searchResults.length ? translate('common.noResultsFound') : '';
 
     const styles = useThemeStyles();

src/components/StatePicker/index.tsx

@@ -3,7 +3,7 @@ import React, {useState} from 'react';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
-import type {CountryData} from '@libs/searchCountryOptions';
+import type {Option} from '@libs/searchOptions';
 import CONST from '@src/CONST';
 import StateSelectorModal from './StateSelectorModal';
 
@@ -28,7 +28,7 @@ function StatePicker({value, errorText, onInputChange = () => {}}: StatePickerPr
         setIsPickerVisible(false);
     };
 
-    const updateInput = (item: CountryData) => {
+    const updateInput = (item: Option) => {
         onInputChange?.(item.value);
         hidePickerModal();
     };

src/components/SubStepForms/AddressStep.tsx

@@ -45,6 +45,21 @@ type AddressStepProps<TFormID extends keyof OnyxFormValuesMapping> = SubStepProp
 
     /** Should show help links */
     shouldShowHelpLinks?: boolean;
+
+    /** Indicates if country selector should be displayed */
+    shouldDisplayCountrySelector?: boolean;
+
+    /** Indicates if state selector should be displayed */
+    shouldDisplayStateSelector?: boolean;
+
+    /** Label for the state selector */
+    stateSelectorLabel?: string;
+
+    /** The title of the state selector modal */
+    stateSelectorModalHeaderTitle?: string;
+
+    /** The title of the state selector search input */
+    stateSelectorSearchInputTitle?: string;
 };
 
 function AddressStep<TFormID extends keyof OnyxFormValuesMapping>({
@@ -58,6 +73,11 @@ function AddressStep<TFormID extends keyof OnyxFormValuesMapping>({
     defaultValues,
     shouldShowHelpLinks,
     isEditing,
+    shouldDisplayCountrySelector = false,
+    shouldDisplayStateSelector = true,
+    stateSelectorLabel,
+    stateSelectorModalHeaderTitle,
+    stateSelectorSearchInputTitle,
 }: AddressStepProps<TFormID>) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
@@ -73,14 +93,14 @@ function AddressStep<TFormID extends keyof OnyxFormValuesMapping>({
             }
 
             const zipCode = values[inputFieldsIDs.zipCode as keyof typeof values];
-            if (zipCode && !ValidationUtils.isValidZipCode(zipCode as string)) {
+            if (zipCode && !shouldDisplayCountrySelector && !ValidationUtils.isValidZipCode(zipCode as string)) {
                 // @ts-expect-error type mismatch to be fixed
                 errors[inputFieldsIDs.zipCode] = translate('bankAccount.error.zipCode');
             }
 
             return errors;
         },
-        [inputFieldsIDs.street, inputFieldsIDs.zipCode, stepFields, translate],
+        [inputFieldsIDs.street, inputFieldsIDs.zipCode, shouldDisplayCountrySelector, stepFields, translate],
     );
 
     return (
@@ -99,6 +119,11 @@ function AddressStep<TFormID extends keyof OnyxFormValuesMapping>({
                     streetTranslationKey="common.streetAddress"
                     defaultValues={defaultValues}
                     shouldSaveDraft={!isEditing}
+                    shouldDisplayStateSelector={shouldDisplayStateSelector}
+                    shouldDisplayCountrySelector={shouldDisplayCountrySelector}
+                    stateSelectorLabel={stateSelectorLabel}
+                    stateSelectorModalHeaderTitle={stateSelectorModalHeaderTitle}
+                    stateSelectorSearchInputTitle={stateSelectorSearchInputTitle}
                 />
                 {!!shouldShowHelpLinks && <HelpLinks containerStyles={[styles.mt6]} />}
             </View>