feat: add medium filtering to saved seaches

src/app/Components/ArtworkFilter/Filters/CategoriesOptions.tsx

@@ -30,9 +30,9 @@ export const CATEGORIES_OPTIONS: FilterData[] = [
     paramValue: "Sculpture",
   },
   {
-    displayText: "Print",
+    displayText: "Prints",
     paramName: FilterParamName.categories,
-    paramValue: "Print",
+    paramValue: "Prints",
   },
   {
     displayText: "Photography",

src/app/Components/ArtworkFilter/SavedSearch/types.ts

@@ -2,45 +2,45 @@ import { ScreenOwnerType } from "@artsy/cohesion"
 import { ArtworkSizes } from "__generated__/SavedSearchNameInputQuery.graphql"
 
 export enum SearchCriteria {
+  acquireable = "acquireable",
+  additionalGeneIDs = "additionalGeneIDs",
   artistID = "artistID",
   artistIDs = "artistIDs",
-  locationCities = "locationCities",
-  colors = "colors",
-  partnerIDs = "partnerIDs",
-  additionalGeneIDs = "additionalGeneIDs",
-  attributionClass = "attributionClass",
-  majorPeriods = "majorPeriods",
-  acquireable = "acquireable",
   atAuction = "atAuction",
-  inquireableOnly = "inquireableOnly",
-  offerable = "offerable",
+  attributionClass = "attributionClass",
+  colors = "colors",
   dimensionRange = "dimensionRange",
-  sizes = "sizes",
   height = "height",
-  width = "width",
+  inquireableOnly = "inquireableOnly",
+  locationCities = "locationCities",
+  majorPeriods = "majorPeriods",
   materialsTerms = "materialsTerms",
+  offerable = "offerable",
+  partnerIDs = "partnerIDs",
   priceRange = "priceRange",
+  sizes = "sizes",
+  width = "width",
 }
 
 export interface SearchCriteriaAttributes {
+  [SearchCriteria.acquireable]?: boolean | null
+  [SearchCriteria.additionalGeneIDs]?: string[] | null
   [SearchCriteria.artistID]?: string | null
   [SearchCriteria.artistIDs]?: string[] | null
-  [SearchCriteria.locationCities]?: string[] | null
-  [SearchCriteria.colors]?: string[] | null
-  [SearchCriteria.partnerIDs]?: string[] | null
-  [SearchCriteria.additionalGeneIDs]?: string[] | null
-  [SearchCriteria.attributionClass]?: string[] | null
-  [SearchCriteria.majorPeriods]?: string[] | null
-  [SearchCriteria.acquireable]?: boolean | null
   [SearchCriteria.atAuction]?: boolean | null
-  [SearchCriteria.inquireableOnly]?: boolean | null
-  [SearchCriteria.offerable]?: boolean | null
+  [SearchCriteria.attributionClass]?: string[] | null
+  [SearchCriteria.colors]?: string[] | null
   [SearchCriteria.dimensionRange]?: string | null
-  [SearchCriteria.sizes]?: ArtworkSizes[] | null
   [SearchCriteria.height]?: string | null
-  [SearchCriteria.width]?: string | null
+  [SearchCriteria.inquireableOnly]?: boolean | null
+  [SearchCriteria.locationCities]?: string[] | null
+  [SearchCriteria.majorPeriods]?: string[] | null
   [SearchCriteria.materialsTerms]?: string[] | null
+  [SearchCriteria.offerable]?: boolean | null
+  [SearchCriteria.partnerIDs]?: string[] | null
   [SearchCriteria.priceRange]?: string | null
+  [SearchCriteria.sizes]?: ArtworkSizes[] | null
+  [SearchCriteria.width]?: string | null
 }
 
 export interface SavedSearchEntityArtist {

src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterAdditionalGeneIDs.tests.tsx

@@ -0,0 +1,81 @@
+import { OwnerType } from "@artsy/cohesion"
+import { fireEvent, waitFor } from "@testing-library/react-native"
+import { SavedSearchFilterAdditionalGeneIDs } from "app/Scenes/SavedSearchAlert/Components/SavedSearchFilterAdditionalGeneIDs"
+import {
+  SavedSearchModel,
+  SavedSearchStoreProvider,
+  savedSearchModel,
+} from "app/Scenes/SavedSearchAlert/SavedSearchStore"
+import { gravityArtworkMediumCategories } from "app/utils/artworkMediumCategories"
+import { renderWithWrappers } from "app/utils/tests/renderWithWrappers"
+
+const black100Hex = "#000000"
+
+describe("SavedSearchFilterAdditionalGeneIDs", () => {
+  it("shows all available categories unselected", () => {
+    const { getByText } = renderWithWrappers(
+      <SavedSearchStoreProvider runtimeModel={initialData}>
+        <SavedSearchFilterAdditionalGeneIDs />
+      </SavedSearchStoreProvider>
+    )
+
+    gravityArtworkMediumCategories.slice(0, 7).forEach((option) => {
+      expect(getByText(option.label)).toBeDefined()
+      expect(getByText(option.label)).toHaveStyle({
+        color: black100Hex,
+      })
+    })
+  })
+
+  it("shows the right selected categories", () => {
+    const { getByText } = renderWithWrappers(
+      <SavedSearchStoreProvider
+        runtimeModel={{ ...initialData, attributes: { additionalGeneIDs: ["painting"] } }}
+      >
+        <SavedSearchFilterAdditionalGeneIDs />
+      </SavedSearchStoreProvider>
+    )
+
+    gravityArtworkMediumCategories.slice(0, 7).forEach((option) => {
+      if (option.value === "Painting") {
+        expect(getByText("Painting")).not.toHaveStyle({ color: black100Hex })
+      } else {
+        expect(getByText(option.label)).toBeDefined()
+        expect(getByText(option.label)).toHaveStyle({
+          color: black100Hex,
+        })
+      }
+    })
+  })
+
+  it("Updates selected categories filters on press", () => {
+    const { getByText } = renderWithWrappers(
+      <SavedSearchStoreProvider runtimeModel={initialData}>
+        <SavedSearchFilterAdditionalGeneIDs />
+      </SavedSearchStoreProvider>
+    )
+
+    expect(getByText("Work on Paper")).toHaveStyle({ color: black100Hex })
+
+    fireEvent(getByText("Work on Paper"), "onPress")
+
+    waitFor(() => {
+      expect(getByText("Work on Paper")).not.toHaveStyle({ color: black100Hex })
+    })
+  })
+})
+
+const initialData: SavedSearchModel = {
+  ...savedSearchModel,
+  attributes: {
+    atAuction: true,
+  },
+  entity: {
+    artists: [{ id: "artistID", name: "Banksy" }],
+    owner: {
+      type: OwnerType.artist,
+      id: "ownerId",
+      slug: "ownerSlug",
+    },
+  },
+}

src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterAdditionalGeneIDs.tsx

@@ -0,0 +1,106 @@
+import { Flex, Spacer, Text } from "@artsy/palette-mobile"
+import { SearchCriteria } from "app/Components/ArtworkFilter/SavedSearch/types"
+import { SavedSearchFilterPill } from "app/Scenes/SavedSearchAlert/Components/SavedSearchFilterPill"
+import { SavedSearchStore } from "app/Scenes/SavedSearchAlert/SavedSearchStore"
+import { isValueSelected, useSearchCriteriaAttributes } from "app/Scenes/SavedSearchAlert/helpers"
+import { gravityArtworkMediumCategories } from "app/utils/artworkMediumCategories"
+import { useState } from "react"
+import { LayoutAnimation, TouchableOpacity } from "react-native"
+
+export const SavedSearchFilterAdditionalGeneIDs = () => {
+  const [showAll, setShowAll] = useState(false)
+
+  const selectedAttributes = useSearchCriteriaAttributes(
+    SearchCriteria.additionalGeneIDs
+  ) as string[]
+
+  const setValueToAttributesByKeyAction = SavedSearchStore.useStoreActions(
+    (actions) => actions.setValueToAttributesByKeyAction
+  )
+  const removeValueFromAttributesByKeyAction = SavedSearchStore.useStoreActions(
+    (actions) => actions.removeValueFromAttributesByKeyAction
+  )
+
+  const handlePress = (value: string) => {
+    const isSelected = isValueSelected({
+      selectedAttributes,
+      value: value,
+    })
+
+    if (isSelected) {
+      removeValueFromAttributesByKeyAction({
+        key: SearchCriteria.additionalGeneIDs,
+        value: value,
+      })
+    } else {
+      const newValues = (selectedAttributes || []).concat(value)
+      setValueToAttributesByKeyAction({
+        key: SearchCriteria.additionalGeneIDs,
+        value: newValues,
+      })
+    }
+  }
+
+  return (
+    <Flex px={2}>
+      <Text variant="sm" fontWeight={500}>
+        Medium
+      </Text>
+      <Spacer y={1} />
+      <Flex flexDirection="row" flexWrap="wrap">
+        {gravityArtworkMediumCategories.slice(0, 7).map((option) => {
+          return (
+            <SavedSearchFilterPill
+              key={option.value as string}
+              accessibilityLabel={option.label}
+              selected={isValueSelected({
+                selectedAttributes,
+                value: option.value,
+              })}
+              onPress={() => {
+                handlePress(option.value as string)
+              }}
+            >
+              {option.label}
+            </SavedSearchFilterPill>
+          )
+        })}
+
+        {showAll
+          ? gravityArtworkMediumCategories
+              .slice(7, gravityArtworkMediumCategories.length)
+              .map((option) => {
+                return (
+                  <SavedSearchFilterPill
+                    key={option.value as string}
+                    accessibilityLabel={option.label}
+                    selected={isValueSelected({
+                      selectedAttributes,
+                      value: option.value,
+                    })}
+                    onPress={() => {
+                      handlePress(option.value as string)
+                    }}
+                  >
+                    {option.label}
+                  </SavedSearchFilterPill>
+                )
+              })
+          : null}
+
+        <TouchableOpacity
+          onPress={() => {
+            LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+            setShowAll(!showAll)
+          }}
+        >
+          <Flex height={50} justifyContent="center">
+            <Text variant="xs" color="blue100">
+              Show {showAll ? "less" : "more"}
+            </Text>
+          </Flex>
+        </TouchableOpacity>
+      </Flex>
+    </Flex>
+  )
+}

src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterAppliedFilters.tests.tsx

@@ -1,6 +1,6 @@
 import { OwnerType } from "@artsy/cohesion"
 import { fireEvent } from "@testing-library/react-native"
-import { SavedSearchAppliedFilters } from "app/Scenes/SavedSearchAlert/Components/SavedSearchFilterAppliedFilters"
+import { SavedSearchFilterAppliedFilters } from "app/Scenes/SavedSearchAlert/Components/SavedSearchFilterAppliedFilters"
 
 import {
   SavedSearchModel,
@@ -10,11 +10,11 @@ import {
 
 import { renderWithWrappers } from "app/utils/tests/renderWithWrappers"
 
-describe("SavedSearchAppliedFilters", () => {
+describe("SavedSearchFilterAppliedFilters", () => {
   it("shows all selected filters", () => {
     const { getByText } = renderWithWrappers(
       <SavedSearchStoreProvider runtimeModel={initialData}>
-        <SavedSearchAppliedFilters />
+        <SavedSearchFilterAppliedFilters />
       </SavedSearchStoreProvider>
     )
 
@@ -25,7 +25,7 @@ describe("SavedSearchAppliedFilters", () => {
   it("removes filter when tapped", () => {
     const { getByText } = renderWithWrappers(
       <SavedSearchStoreProvider runtimeModel={initialData}>
-        <SavedSearchAppliedFilters />
+        <SavedSearchFilterAppliedFilters />
       </SavedSearchStoreProvider>
     )
 
@@ -39,7 +39,7 @@ describe("SavedSearchAppliedFilters", () => {
   it("can't remove artist pill", () => {
     const { getByText } = renderWithWrappers(
       <SavedSearchStoreProvider runtimeModel={initialData}>
-        <SavedSearchAppliedFilters />
+        <SavedSearchFilterAppliedFilters />
       </SavedSearchStoreProvider>
     )
 

src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterAppliedFilters.tsx

@@ -4,7 +4,7 @@ import { SavedSearchStore } from "app/Scenes/SavedSearchAlert/SavedSearchStore"
 import { useSavedSearchPills } from "app/Scenes/SavedSearchAlert/useSavedSearchPills"
 import { MotiView } from "moti"
 
-export const SavedSearchAppliedFilters: React.FC<{}> = ({}) => {
+export const SavedSearchFilterAppliedFilters: React.FC<{}> = ({}) => {
   const removeValueFromAttributesByKeyAction = SavedSearchStore.useStoreActions(
     (state) => state.removeValueFromAttributesByKeyAction
   )

src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterPill.tsx

@@ -23,6 +23,6 @@ export const SavedSearchFilterPill: React.FC<PillProps> = (props) => {
   }, [props.selected])
 
   return (
-    <Pill {...props} mt={1} mr={1} selected={selected} onPress={() => setSelected(!selected)} />
+    <Pill {...props} mt={1} mr={0.5} selected={selected} onPress={() => setSelected(!selected)} />
   )
 }

src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterRarity.tests.tsx

@@ -1,7 +1,7 @@
 import { OwnerType } from "@artsy/cohesion"
 import { fireEvent, waitFor } from "@testing-library/react-native"
 import { ATTRIBUTION_CLASS_OPTIONS } from "app/Components/ArtworkFilter/Filters/AttributionClassOptions"
-import { SavedSearchRarity } from "app/Scenes/SavedSearchAlert/Components/SavedSearchFilterRarity"
+import { SavedSearchFilterRarity } from "app/Scenes/SavedSearchAlert/Components/SavedSearchFilterRarity"
 import {
   SavedSearchModel,
   SavedSearchStoreProvider,
@@ -11,11 +11,11 @@ import { renderWithWrappers } from "app/utils/tests/renderWithWrappers"
 
 const black100Hex = "#000000"
 
-describe("SavedSearchRarity", () => {
+describe("SavedSearchFilterRarity", () => {
   it("shows all available rarity options unselected", () => {
     const { getByText } = renderWithWrappers(
       <SavedSearchStoreProvider runtimeModel={initialData}>
-        <SavedSearchRarity />
+        <SavedSearchFilterRarity />
       </SavedSearchStoreProvider>
     )
 
@@ -32,7 +32,7 @@ describe("SavedSearchRarity", () => {
       <SavedSearchStoreProvider
         runtimeModel={{ ...initialData, attributes: { attributionClass: ["unique"] } }}
       >
-        <SavedSearchRarity />
+        <SavedSearchFilterRarity />
       </SavedSearchStoreProvider>
     )
 
@@ -45,7 +45,7 @@ describe("SavedSearchRarity", () => {
   it("Updates selected filters on press", () => {
     const { getByText } = renderWithWrappers(
       <SavedSearchStoreProvider runtimeModel={initialData}>
-        <SavedSearchRarity />
+        <SavedSearchFilterRarity />
       </SavedSearchStoreProvider>
     )
 

src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterRarity.tsx

@@ -5,7 +5,7 @@ import { SavedSearchFilterPill } from "app/Scenes/SavedSearchAlert/Components/Sa
 import { SavedSearchStore } from "app/Scenes/SavedSearchAlert/SavedSearchStore"
 import { isValueSelected, useSearchCriteriaAttributes } from "app/Scenes/SavedSearchAlert/helpers"
 
-export const SavedSearchRarity = () => {
+export const SavedSearchFilterRarity = () => {
   const selectedAttributes = useSearchCriteriaAttributes(
     SearchCriteria.attributionClass
   ) as string[]

src/app/Scenes/SavedSearchAlert/SavedSearchAlertForm.tests.tsx

@@ -107,7 +107,7 @@ describe("SavedSearchAlertForm", () => {
     })
 
     describe("Create flow", () => {
-      it("calls create mutation when `Save Alert` buttin is pressed", async () => {
+      it("calls create mutation when `Save Alert` button is pressed", async () => {
         const { getByTestId } = renderWithWrappers(<TestRenderer />)
 
         fireEvent.changeText(getByTestId("alert-input-name"), "something new")