diff --git a/src/components/AddObsBottomSheet/AddObsButton.js b/src/components/AddObsBottomSheet/AddObsButton.js index 0b8dae60c..c64c9eaa0 100644 --- a/src/components/AddObsBottomSheet/AddObsButton.js +++ b/src/components/AddObsBottomSheet/AddObsButton.js @@ -46,10 +46,10 @@ const AddObsButton = ( ): React.Node => { // Base trigger condition in all cases: // Only show the tooltip if the user has the AI camera as the default button option. // Only show the tooltip on MyObservations screen. - const onObsList = currentRoute?.name === "MyObservationsResults"; + const isOnMyObservationsResults = currentRoute?.name === "MyObservationsResults"; const onlyAiCamera = !isAllAddObsOptionsMode; - let triggerCondition = onObsList && onlyAiCamera; + let triggerCondition = isOnMyObservationsResults && onlyAiCamera; if ( justFinishedSignup ) { // If a user creates a new account, they should see the tooltip right after dismissing the diff --git a/src/components/Explore/SearchScreens/ExploreSearchHeader.tsx b/src/components/Explore/SearchScreens/ExploreSearchHeader.tsx index 130f3ee2e..74f8df5bf 100644 --- a/src/components/Explore/SearchScreens/ExploreSearchHeader.tsx +++ b/src/components/Explore/SearchScreens/ExploreSearchHeader.tsx @@ -1,9 +1,10 @@ +import classnames from "classnames"; import { BackButton, Body3, Heading4, } from "components/SharedComponents"; -import { View } from "components/styledComponents"; +import { Pressable, View } from "components/styledComponents"; import React from "react"; import { useTranslation } from "sharedHooks"; @@ -11,6 +12,7 @@ interface Props { closeModal: ( ) => void; headerText: string; resetFilters: ( ) => void; + resetDisabled?: boolean; testID: string; } @@ -18,6 +20,7 @@ const ExploreSearchHeader = ( { closeModal, headerText, resetFilters, + resetDisabled = false, testID, }: Props ) => { const { t } = useTranslation( ); @@ -32,11 +35,21 @@ const ExploreSearchHeader = ( { /> {headerText} - - + + {t( "Reset-verb" )} - + ); }; diff --git a/src/components/MyObservations/MyObservationsSimple.tsx b/src/components/MyObservations/MyObservationsSimple.tsx index 6305b7d96..a1d686dce 100644 --- a/src/components/MyObservations/MyObservationsSimple.tsx +++ b/src/components/MyObservations/MyObservationsSimple.tsx @@ -35,6 +35,8 @@ import { } from "sharedHelpers/speciesSort"; import { accessibleTaxonName } from "sharedHelpers/taxon"; import { useGridLayout, useLayoutPrefs, useTranslation } from "sharedHooks"; +import useFeatureFlag from "sharedHooks/useFeatureFlag"; +import { FeatureFlag } from "stores/createFeatureFlagSlice"; import colors from "styles/tailwindColors"; import type { SpeciesCount } from "types/sorting"; @@ -42,6 +44,7 @@ import LoginSheet from "./LoginSheet"; import { ACTIVE_SHEET } from "./MyObservationsResults"; import MyObservationsSimpleHeader from "./MyObservationsSimpleHeader"; import PivotCardObsGridItem from "./PivotCardObsGridItem"; +import SearchedTaxonBanner from "./Search/SearchedTaxonBanner"; import SimpleHeader from "./SimpleHeader"; import SimpleTaxonGridItem from "./SimpleTaxonGridItem"; @@ -131,6 +134,9 @@ const MyObservationsSimple = ( { }: Props ) => { const { isDefaultMode } = useLayoutPrefs( ); const { t } = useTranslation( ); + const searchMyObservationsEnabled = useFeatureFlag( + FeatureFlag.SearchMyObservationsEnabled, + ); const speciesSortLabels = useSpeciesSortLabels( ); const navigation = useNavigation( ); const route = useRoute( ); @@ -358,6 +364,9 @@ const MyObservationsSimple = ( { ]} TabComponent={renderTabComponent} /> + {searchMyObservationsEnabled && activeTab === OBSERVATIONS_TAB && ( + + )} { activeTab === OBSERVATIONS_TAB && ( <> { if ( !isConnected ) { @@ -111,6 +114,9 @@ const MyObservationsSimpleHeader = ( { diff --git a/src/components/MyObservations/Search/SearchEmptyState.tsx b/src/components/MyObservations/Search/SearchEmptyState.tsx new file mode 100644 index 000000000..ab01ee652 --- /dev/null +++ b/src/components/MyObservations/Search/SearchEmptyState.tsx @@ -0,0 +1,38 @@ +// TODO: This component is intentionally not rendered anywhere yet. +// This is the empty state for the Search My Observations feature. + +import { + Body1, + Button, +} from "components/SharedComponents"; +import { View } from "components/styledComponents"; +import { + MY_OBSERVATIONS_ACTION, + useMyObservations, +} from "providers/MyObservationsContext"; +import React from "react"; +import { useTranslation } from "sharedHooks"; + +const SearchEmptyState = ( ) => { + const { t } = useTranslation( ); + const { dispatch } = useMyObservations( ); + + return ( + + + {t( "Looks-like-you-havent-observed-this-yet-time-to-keep-exploring" )} + +