Search - Add Reset filters button to Advanced Filters page

src/languages/en.ts

@@ -3761,6 +3761,7 @@ export default {
     search: {
         resultsAreLimited: 'Search results are limited.',
         viewResults: 'View results',
+        resetFilters: 'Reset filters',
         searchResults: {
             emptyResults: {
                 title: 'Nothing to show',

src/languages/es.ts

@@ -3811,6 +3811,7 @@ export default {
     search: {
         resultsAreLimited: 'Los resultados de búsqueda están limitados.',
         viewResults: 'Ver resultados',
+        resetFilters: 'Restablecer filtros',
         searchResults: {
             emptyResults: {
                 title: 'No hay nada que ver aquí',

src/pages/Search/SearchAdvancedFiltersPage.tsx

@@ -1,22 +1,34 @@
 import React from 'react';
+import {useOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
+import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as SearchActions from '@userActions/Search';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {SearchAdvancedFiltersForm} from '@src/types/form';
 import AdvancedSearchFilters from './AdvancedSearchFilters';
 
 function SearchAdvancedFiltersPage() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
+    const emptySearchFilters: SearchAdvancedFiltersForm = {} as SearchAdvancedFiltersForm;
+    const [searchAdvancedFilters = emptySearchFilters] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
+
+    const shouldShowResetFilters = Object.values(searchAdvancedFilters).some((value) => (Array.isArray(value) ? value.length !== 0 : !!value));
+
     return (
         <ScreenWrapper
             testID={SearchAdvancedFiltersPage.displayName}
             shouldShowOfflineIndicatorInWideScreen
             offlineIndicatorStyle={styles.mtAuto}
             includeSafeAreaPaddingBottom={false}
         >
-            <HeaderWithBackButton title={translate('search.filtersHeader')} />
+            <HeaderWithBackButton title={translate('search.filtersHeader')}>
+                {shouldShowResetFilters && <TextLink onPress={SearchActions.clearAdvancedFilters}>{translate('search.resetFilters')}</TextLink>}
+            </HeaderWithBackButton>
             <AdvancedSearchFilters />
         </ScreenWrapper>
     );