feat(ONYX-369): navigate to create alerts instead of filers

src/app/Components/Artist/ArtistArtworks/ArtistArtworks.tsx

@@ -14,6 +14,8 @@ import {
 } from "@artsy/palette-mobile"
 import { ArtistArtworks_artist$data } from "__generated__/ArtistArtworks_artist.graphql"
 import { ArtistArtworksFilterHeader } from "app/Components/Artist/ArtistArtworks/ArtistArtworksFilterHeader"
+import { CreateSavedSearchModal } from "app/Components/Artist/ArtistArtworks/CreateSavedSearchModal"
+import { useCreateSavedSearchModalFilters } from "app/Components/Artist/ArtistArtworks/hooks/useCreateSavedSearchModalFilters"
 import { useShowArtworksFilterModal } from "app/Components/Artist/ArtistArtworks/hooks/useShowArtworksFilterModal"
 import { ArtworkFilterNavigator, FilterModalMode } from "app/Components/ArtworkFilter"
 import { Aggregations, FilterArray } from "app/Components/ArtworkFilter/ArtworkFilterHelpers"
@@ -34,7 +36,7 @@ import {
   ON_END_REACHED_THRESHOLD_MASONRY,
 } from "app/utils/masonryHelpers"
 import { Schema } from "app/utils/track"
-import React, { useCallback, useEffect, useMemo } from "react"
+import React, { useCallback, useEffect, useMemo, useState } from "react"
 import { RelayPaginationProp, createPaginationContainer, graphql } from "react-relay"
 import { useTracking } from "react-tracking"
 
@@ -52,12 +54,15 @@ const ArtworksGrid: React.FC<ArtworksGridProps> = ({
   searchCriteria,
   ...props
 }) => {
+  const [isCreateAlertModalVisible, setIsCreateAlertModalVisible] = useState(false)
+
   const { showFilterArtworksModal, openFilterArtworksModal, closeFilterArtworksModal } =
     useShowArtworksFilterModal({ artist })
   const tracking = useTracking()
   const space = useSpace()
   const { width } = useScreenDimensions()
   const showCreateAlertAtEndOfList = useFeatureFlag("ARShowCreateAlertInArtistArtworksListFooter")
+  const enableAlertsFilters = useFeatureFlag("AREnableAlertsFilters")
   const artworks = useMemo(() => extractNodes(artist.artworks), [artist.artworks])
   const appliedFilters = ArtworksFiltersStore.useStoreState((state) => state.appliedFilters)
 
@@ -95,6 +100,13 @@ const ArtworksGrid: React.FC<ArtworksGridProps> = ({
     setInitialFilterStateAction(filters)
   }, [])
 
+  const { savedSearchEntity, attributes } = useCreateSavedSearchModalFilters({
+    entityId: artist.internalID!,
+    entityName: artist.name ?? "",
+    entitySlug: artist.slug!,
+    entityOwnerType: OwnerType.artist,
+  })
+
   const trackClear = (id: string, slug: string) => {
     tracking.trackEvent({
       action_name: "clearFilters",
@@ -106,6 +118,10 @@ const ArtworksGrid: React.FC<ArtworksGridProps> = ({
     })
   }
 
+  const handleCompleteSavedSearch = () => {
+    // TODO: Get the new count of the artist saved alerts
+  }
+
   const shouldDisplaySpinner = !!artworks.length && !!relay.isLoading() && !!relay.hasMore()
 
   const loadMore = useCallback(() => {
@@ -122,15 +138,16 @@ const ArtworksGrid: React.FC<ArtworksGridProps> = ({
         icon={<BellIcon />}
         size="small"
         onPress={() => {
-          openFilterArtworksModal("createAlert")
-
-          tracking.trackEvent({
-            action: ActionType.tappedCreateAlert,
-            context_screen_owner_type: OwnerType.artist,
-            context_screen_owner_id: artist.internalID,
-            context_screen_owner_slug: artist.slug,
-            context_module: ContextModule.artistArtworksGridEnd,
-          })
+          // Could be useful to differenciate between the two at a later point
+          tracking.trackEvent(
+            tracks.tappedCreateAlert({ artistId: artist.internalID, artistSlug: artist.slug })
+          )
+
+          if (enableAlertsFilters) {
+            setIsCreateAlertModalVisible(true)
+          } else {
+            openFilterArtworksModal("createAlert")
+          }
         }}
       >
         Create Alert
@@ -157,6 +174,7 @@ const ArtworksGrid: React.FC<ArtworksGridProps> = ({
         <CreateAlertButton />
 
         <Spacer y={6} />
+
         <ArtworkFilterNavigator
           {...props}
           id={artist.internalID}
@@ -168,6 +186,17 @@ const ArtworksGrid: React.FC<ArtworksGridProps> = ({
           mode={FilterModalMode.ArtistArtworks}
           shouldShowCreateAlertButton
         />
+
+        {!!enableAlertsFilters && (
+          <CreateSavedSearchModal
+            aggregations={(artist.aggregations?.aggregations as Aggregations) || []}
+            attributes={attributes}
+            closeModal={() => setIsCreateAlertModalVisible(false)}
+            entity={savedSearchEntity}
+            onComplete={handleCompleteSavedSearch}
+            visible={isCreateAlertModalVisible}
+          />
+        )}
       </Tabs.ScrollView>
     )
   }
@@ -245,7 +274,10 @@ const ArtworksGrid: React.FC<ArtworksGridProps> = ({
         ListHeaderComponentStyle={{ zIndex: 1 }}
         ListHeaderComponent={
           <Tabs.SubTabBar>
-            <ArtistArtworksFilterHeader artist={artist} />
+            <ArtistArtworksFilterHeader
+              artist={artist}
+              showCreateAlertModal={() => setIsCreateAlertModalVisible(true)}
+            />
           </Tabs.SubTabBar>
         }
         ListFooterComponent={<ListFooterComponenet />}
@@ -261,6 +293,16 @@ const ArtworksGrid: React.FC<ArtworksGridProps> = ({
         mode={FilterModalMode.ArtistArtworks}
         shouldShowCreateAlertButton
       />
+      {!!enableAlertsFilters && (
+        <CreateSavedSearchModal
+          aggregations={(artist.aggregations?.aggregations as Aggregations) || []}
+          attributes={attributes}
+          closeModal={() => setIsCreateAlertModalVisible(false)}
+          entity={savedSearchEntity}
+          onComplete={handleCompleteSavedSearch}
+          visible={isCreateAlertModalVisible}
+        />
+      )}
     </>
   )
 }
@@ -350,3 +392,13 @@ export default createPaginationContainer(
     `,
   }
 )
+
+const tracks = {
+  tappedCreateAlert: ({ artistId, artistSlug }: { artistId: string; artistSlug: string }) => ({
+    action: ActionType.tappedCreateAlert,
+    context_screen_owner_type: OwnerType.artist,
+    context_screen_owner_id: artistId,
+    context_screen_owner_slug: artistSlug,
+    context_module: ContextModule.artistArtworksGridEnd,
+  }),
+}

src/app/Components/Artist/ArtistArtworks/ArtistArtworksFilterHeader.tsx

@@ -4,13 +4,20 @@ import { SavedSearchButtonV2 } from "app/Components/Artist/ArtistArtworks/SavedS
 import { useShowArtworksFilterModal } from "app/Components/Artist/ArtistArtworks/hooks/useShowArtworksFilterModal"
 import { useSelectedFiltersCount } from "app/Components/ArtworkFilter/useArtworkFilters"
 import { ArtworksFilterHeader } from "app/Components/ArtworkGrids/ArtworksFilterHeader"
+import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { graphql, useFragment } from "react-relay"
 
 interface ArtistArtworksFilterProps {
   artist: ArtistArtworksFilterHeader_artist$key
+  showCreateAlertModal: () => void
 }
 
-export const ArtistArtworksFilterHeader: React.FC<ArtistArtworksFilterProps> = ({ artist }) => {
+export const ArtistArtworksFilterHeader: React.FC<ArtistArtworksFilterProps> = ({
+  artist,
+  showCreateAlertModal,
+}) => {
+  const enableAlertsFilters = useFeatureFlag("AREnableAlertsFilters")
+
   const data = useFragment(
     graphql`
       fragment ArtistArtworksFilterHeader_artist on Artist {
@@ -27,14 +34,22 @@ export const ArtistArtworksFilterHeader: React.FC<ArtistArtworksFilterProps> = (
   return (
     <Box backgroundColor="white">
       <ArtworksFilterHeader
-        onFilterPress={() => openFilterArtworksModal("sortAndFilter")}
+        onFilterPress={() => {
+          openFilterArtworksModal("sortAndFilter")
+        }}
         selectedFiltersCount={appliedFiltersCount}
         childrenPosition="left"
       >
         <SavedSearchButtonV2
           artistId={data.internalID}
           artistSlug={data.slug}
-          onPress={() => openFilterArtworksModal("createAlert")}
+          onPress={() => {
+            if (enableAlertsFilters) {
+              showCreateAlertModal()
+            } else {
+              openFilterArtworksModal("createAlert")
+            }
+          }}
         />
       </ArtworksFilterHeader>
     </Box>

src/app/Components/Artist/ArtistArtworks/hooks/useCreateSavedSearchModalFilters.ts

@@ -0,0 +1,36 @@
+import { ScreenOwnerType } from "@artsy/cohesion"
+import { getUnitedSelectedAndAppliedFilters } from "app/Components/ArtworkFilter/ArtworkFilterHelpers"
+import { ArtworksFiltersStore } from "app/Components/ArtworkFilter/ArtworkFilterStore"
+import { getSearchCriteriaFromFilters } from "app/Components/ArtworkFilter/SavedSearch/searchCriteriaHelpers"
+import { SavedSearchEntity } from "app/Components/ArtworkFilter/SavedSearch/types"
+
+// A hook that returns the required props to be injected in order to use the CreateSavedSearchModal
+export const useCreateSavedSearchModalFilters = ({
+  entityId,
+  entitySlug,
+  entityName,
+  entityOwnerType,
+}: {
+  entityId: string
+  entitySlug: string
+  entityName: string
+  entityOwnerType: ScreenOwnerType
+}) => {
+  const savedSearchEntity: SavedSearchEntity = {
+    artists: [{ id: entityId!, name: entityName! }],
+    owner: {
+      type: entityOwnerType,
+      id: entityId!,
+      slug: entitySlug!,
+    },
+  }
+
+  const filterState = ArtworksFiltersStore.useStoreState((state) => state)
+  const unitedFilters = getUnitedSelectedAndAppliedFilters(filterState)
+  const attributes = getSearchCriteriaFromFilters(savedSearchEntity, unitedFilters)
+
+  return {
+    attributes,
+    savedSearchEntity,
+  }
+}

src/app/Components/ArtworkFilter/ArtworkFilterNavigator.tsx

@@ -32,6 +32,7 @@ import { WaysToBuyOptionsScreen } from "app/Components/ArtworkFilter/Filters/Way
 import { YearOptionsScreen } from "app/Components/ArtworkFilter/Filters/YearOptions"
 import { FancyModal } from "app/Components/FancyModal/FancyModal"
 import { GlobalStore } from "app/store/GlobalStore"
+import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { OwnerEntityTypes, PageNames } from "app/utils/track/schema"
 import { useLocalizedUnit } from "app/utils/useLocalizedUnit"
 import { useEffect, useState } from "react"
@@ -122,6 +123,8 @@ export const ArtworkFilterNavigator: React.FC<ArtworkFilterProps> = (props) => {
   )
   const filterTypeState = ArtworksFiltersStore.useStoreState((state) => state.filterType)
 
+  const enableAlertsFilters = useFeatureFlag("AREnableAlertsFilters")
+
   const applyFiltersAction = ArtworksFiltersStore.useStoreActions(
     (action) => action.applyFiltersAction
   )
@@ -394,14 +397,16 @@ export const ArtworkFilterNavigator: React.FC<ArtworkFilterProps> = (props) => {
             shouldShowCreateAlertButton={shouldShowCreateAlertButton}
           />
 
-          <CreateSavedSearchModal
-            visible={isCreateAlertModalVisible}
-            entity={savedSearchEntity}
-            closeModal={() => setIsCreateAlertModalVisible(false)}
-            onComplete={exitModal}
-            attributes={attributes}
-            aggregations={filterState.aggregations}
-          />
+          {!!enableAlertsFilters && (
+            <CreateSavedSearchModal
+              visible={isCreateAlertModalVisible}
+              entity={savedSearchEntity}
+              closeModal={() => setIsCreateAlertModalVisible(false)}
+              onComplete={exitModal}
+              attributes={attributes}
+              aggregations={filterState.aggregations}
+            />
+          )}
         </Flex>
       </FancyModal>
     </NavigationContainer>