SearchPage list refactor

src/components/SelectionList/BaseSelectionList.js

@@ -40,6 +40,7 @@ function BaseSelectionList({
     textInputLabel = '',
     textInputPlaceholder = '',
     textInputValue = '',
+    textInputHint = '',
     textInputMaxLength,
     inputMode = CONST.INPUT_MODE.TEXT,
     onChangeText,
@@ -414,6 +415,7 @@ function BaseSelectionList({
                                     }}
                                     label={textInputLabel}
                                     accessibilityLabel={textInputLabel}
+                                    hint={textInputHint}
                                     role={CONST.ROLE.PRESENTATION}
                                     value={textInputValue}
                                     placeholder={textInputPlaceholder}

src/hooks/useDebouncedState.ts

@@ -0,0 +1,34 @@
+import {debounce} from 'lodash';
+import {useEffect, useRef, useState} from 'react';
+
+/**
+ * A React hook that provides a state and its debounced version.
+ *
+ * @param initialValue - The initial value of the state.
+ * @param delay - The debounce delay in milliseconds. Defaults to 100ms.
+ * @returns A tuple containing:
+ *          - The current state value.
+ *          - The debounced state value.
+ *          - A function to set both the current and debounced state values.
+ *
+ * @template T The type of the state value.
+ *
+ * @example
+ * const [value, debouncedValue, setValue] = useDebouncedState<string>("", 300);
+ */
+function useDebouncedState<T>(initialValue: T, delay = 100): [T, T, (value: T) => void] {
+    const [value, setValue] = useState(initialValue);
+    const [debouncedValue, setDebouncedValue] = useState(initialValue);
+    const debouncedSetDebouncedValue = useRef(debounce(setDebouncedValue, delay)).current;
+
+    useEffect(() => () => debouncedSetDebouncedValue.cancel(), [debouncedSetDebouncedValue]);
+
+    const handleSetValue = (newValue: T) => {
+        setValue(newValue);
+        debouncedSetDebouncedValue(newValue);
+    };
+
+    return [value, debouncedValue, handleSetValue];
+}
+
+export default useDebouncedState;

src/pages/SearchPage/SearchPageFooter.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import {Info} from '@components/Icon/Expensicons';
+import {PressableWithoutFeedback} from '@components/Pressable';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+
+function SearchPageFooter() {
+    const themeStyles = useThemeStyles();
+    const theme = useTheme();
+    const {translate} = useLocalize();
+
+    return (
+        <View style={[themeStyles.pb5, themeStyles.flexShrink0]}>
+            <PressableWithoutFeedback
+                onPress={() => {
+                    Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND));
+                }}
+                style={[
+                    themeStyles.p5,
+                    themeStyles.w100,
+                    themeStyles.br2,
+                    themeStyles.highlightBG,
+                    themeStyles.flexRow,
+                    themeStyles.justifyContentBetween,
+                    themeStyles.alignItemsCenter,
+                    {gap: 10},
+                ]}
+                accessibilityLabel="referral"
+                role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+            >
+                <Text>
+                    {translate(`referralProgram.${CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND}.buttonText1`)}
+                    <Text
+                        color={theme.success}
+                        style={themeStyles.textStrong}
+                    >
+                        {translate(`referralProgram.${CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND}.buttonText2`)}
+                    </Text>
+                </Text>
+                <Icon
+                    src={Info}
+                    height={20}
+                    width={20}
+                />
+            </PressableWithoutFeedback>
+        </View>
+    );
+}
+
+SearchPageFooter.displayName = 'SearchPageFooter';
+
+export default SearchPageFooter;