chore(ONYX-536): make design adjustment to suggested filters (artsy#9586

) * chore: make design adjustment to suggested filters * chore: update palette mobile version * chore: address design comment
stacktasec · Nov 22, 2023 · 1c6c6f8 · 1c6c6f8
1 parent 80da20e
commit 1c6c6f8
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 82 deletions.
diff --git a/package.json b/package.json
@@ -111,7 +111,7 @@
   },
   "dependencies": {
     "@artsy/cohesion": "4.158.0",
-    "@artsy/palette-mobile": "13.0.24",
+    "@artsy/palette-mobile": "13.0.25",
     "@artsy/to-title-case": "1.1.0",
     "@expo/react-native-action-sheet": "4.0.1",
     "@gorhom/bottom-sheet": "4.5.1",

diff --git a/src/app/Scenes/SavedSearchAlert/Components/Form.tsx b/src/app/Scenes/SavedSearchAlert/Components/Form.tsx
@@ -190,7 +190,6 @@ export const Form: React.FC<FormProps> = ({
 
           {enableAlertsFilters && enableAlertsSuggestedFilters ? (
             <Flex mt={2}>
-              <Text variant="sm-display">Suggested Filters</Text>
               <SavedSearchSuggestedFiltersQueryRenderer />
             </Flex>
           ) : null}

diff --git a/src/app/Scenes/SavedSearchAlert/Components/SavedSearchSuggestedFilters.tests.tsx b/src/app/Scenes/SavedSearchAlert/Components/SavedSearchSuggestedFilters.tests.tsx
@@ -35,59 +35,70 @@ describe("SavedSearchSuggestedFilters", () => {
     ),
   })
 
-  it("shows all suggested filters unselected", async () => {
-    renderWithRelay({ PreviewSavedSearch: () => ({ suggestedFilters: mockSuggestedFilters }) })
+  describe("when there are suggested filters", () => {
+    it("show Add Filters Menu", async () => {
+      renderWithRelay({ PreviewSavedSearch: () => ({ suggestedFilters: [] }) })
 
-    await flushPromiseQueue()
+      await flushPromiseQueue()
 
-    mockSuggestedFilters.forEach((filter) => {
-      expect(screen.getByText(filter.displayValue)).toBeTruthy()
+      expect(screen.getByText("Add Filters")).toBeTruthy()
     })
   })
+  describe("when there are suggested filters", () => {
+    it("shows all suggested filters unselected", async () => {
+      renderWithRelay({ PreviewSavedSearch: () => ({ suggestedFilters: mockSuggestedFilters }) })
 
-  it("shows only the supported suggested filters", async () => {
-    const notSupportedFilters = [
-      {
-        displayValue: "Valid value but not yet supported filter",
-        field: "notSupportedFilter",
-        name: "NotSuupported Filter",
-        value: "valid-value-but-not-yet-supported-filter",
-      },
-
-      {
-        displayValue: "invalid value",
-        field: "invalid-filter",
-        name: "Invalid filter",
-        value: "invalid-value",
-      },
-    ]
-
-    renderWithRelay({
-      PreviewSavedSearch: () => ({
-        suggestedFilters: [...mockSuggestedFilters, ...notSupportedFilters],
-      }),
-    })
-
-    await flushPromiseQueue()
+      await flushPromiseQueue()
 
-    mockSuggestedFilters.forEach((filter) => {
-      expect(screen.getByText(filter.displayValue)).toBeTruthy()
+      mockSuggestedFilters.forEach((filter) => {
+        expect(screen.getByText(filter.displayValue)).toBeTruthy()
+      })
     })
 
-    notSupportedFilters.forEach((filter) => {
-      expect(() => screen.getByText(filter.displayValue)).toThrow()
+    it("shows only the supported suggested filters", async () => {
+      const notSupportedFilters = [
+        {
+          displayValue: "Valid value but not yet supported filter",
+          field: "notSupportedFilter",
+          name: "NotSuupported Filter",
+          value: "valid-value-but-not-yet-supported-filter",
+        },
+
+        {
+          displayValue: "invalid value",
+          field: "invalid-filter",
+          name: "Invalid filter",
+          value: "invalid-value",
+        },
+      ]
+
+      renderWithRelay({
+        PreviewSavedSearch: () => ({
+          suggestedFilters: [...mockSuggestedFilters, ...notSupportedFilters],
+        }),
+      })
+
+      await flushPromiseQueue()
+
+      mockSuggestedFilters.forEach((filter) => {
+        expect(screen.getByText(filter.displayValue)).toBeTruthy()
+      })
+
+      notSupportedFilters.forEach((filter) => {
+        expect(() => screen.getByText(filter.displayValue)).toThrow()
+      })
     })
-  })
 
-  it("navigates to filters screen on See More press", async () => {
-    renderWithRelay({ PreviewSavedSearch: () => ({ suggestedFilters: mockSuggestedFilters }) })
+    it("navigates to filters screen on See More press", async () => {
+      renderWithRelay({ PreviewSavedSearch: () => ({ suggestedFilters: mockSuggestedFilters }) })
 
-    await flushPromiseQueue()
+      await flushPromiseQueue()
 
-    const moreFiltersButton = screen.getByText("More Filters")
-    fireEvent(moreFiltersButton, "onPress")
+      const moreFiltersButton = screen.getByText("More Filters")
+      fireEvent(moreFiltersButton, "onPress")
 
-    expect(mockNavigate).toHaveBeenCalledWith("SavedSearchFilterScreen")
+      expect(mockNavigate).toHaveBeenCalledWith("SavedSearchFilterScreen")
+    })
   })
 })
 

diff --git a/src/app/Scenes/SavedSearchAlert/Components/SavedSearchSuggestedFilters.tsx b/src/app/Scenes/SavedSearchAlert/Components/SavedSearchSuggestedFilters.tsx
@@ -2,6 +2,7 @@ import { ChevronIcon, Flex, Skeleton, SkeletonBox, Text, Touchable } from "@arts
 import { NavigationProp, useNavigation } from "@react-navigation/native"
 import { SavedSearchSuggestedFiltersFetchQuery } from "__generated__/SavedSearchSuggestedFiltersFetchQuery.graphql"
 import { SearchCriteria } from "app/Components/ArtworkFilter/SavedSearch/types"
+import { MenuItem } from "app/Components/MenuItem"
 import { SavedSearchFilterPill } from "app/Scenes/SavedSearchAlert/Components/SavedSearchFilterPill"
 import { CreateSavedSearchAlertNavigationStack } from "app/Scenes/SavedSearchAlert/SavedSearchAlertModel"
 import { SavedSearchStore } from "app/Scenes/SavedSearchAlert/SavedSearchStore"
@@ -16,6 +17,9 @@ const SUPPORTED_SEARCH_CRITERIA = [
 ]
 
 export const SavedSearchSuggestedFilters: React.FC<{}> = () => {
+  const navigation =
+    useNavigation<NavigationProp<CreateSavedSearchAlertNavigationStack, "CreateSavedSearchAlert">>()
+
   const attributes = SavedSearchStore.useStoreState((state) => state.attributes)
 
   const data = useLazyLoadQuery<SavedSearchSuggestedFiltersFetchQuery>(
@@ -34,23 +38,20 @@ export const SavedSearchSuggestedFilters: React.FC<{}> = () => {
     criterion: SearchCriteria.priceRange,
   })
 
-  if (!data?.previewSavedSearch?.suggestedFilters) {
-    return (
-      <Flex py={1}>
-        <Flex flexDirection="row" alignItems="center" flexWrap="wrap">
-          <Text color="black60">
-            There are no suggested filters for this artist, set your own filters manually.
-            <MoreFiltersButton text="Add Filters" />
-          </Text>
-        </Flex>
-      </Flex>
-    )
-  }
-
-  const suggestedFilters = data.previewSavedSearch.suggestedFilters.filter((filter) => {
-    // Adding this check to make sure we don't add a filter type that's not
-    // supported in the app
-    return SUPPORTED_SEARCH_CRITERIA.indexOf(filter.field as SearchCriteria) > -1
+  const supportedSuggestedFitlers =
+    data?.previewSavedSearch?.suggestedFilters.filter((filter) => {
+      // Adding this check to make sure we don't add a filter type that's not
+      // supported in the app
+      return SUPPORTED_SEARCH_CRITERIA.indexOf(filter.field as SearchCriteria) > -1
+    }) || []
+
+  const suggestedFilters = supportedSuggestedFitlers.filter((filter) => {
+    // Adding this check to make sure we don't add a filter type that's already
+    // selected
+    return !isValueSelected({
+      selectedAttributes: attributes[filter.field as SearchCriteria] || [],
+      value: filter.value,
+    })
   })
 
   const handlePress = (field: SearchCriteria, value: string) => {
@@ -73,26 +74,44 @@ export const SavedSearchSuggestedFilters: React.FC<{}> = () => {
     }
   }
 
+  if (!supportedSuggestedFitlers.length) {
+    return (
+      <MenuItem
+        title="Add Filters"
+        description="Including Price Range, Rarity, Medium, Color"
+        onPress={() => {
+          navigation.navigate("SavedSearchFilterScreen")
+        }}
+        px={0}
+      />
+    )
+  }
+
   return (
-    <Flex flexDirection="row" flexWrap="wrap" mt={1} mx={-0.5} alignItems="center">
-      {suggestedFilters.map((pill) => (
-        <SavedSearchFilterPill
-          key={pill.name + pill.value}
-          m={0.5}
-          accessibilityLabel={"Select " + pill.displayValue + " as a " + pill.name}
-          selected={isValueSelected({
-            selectedAttributes: attributes[pill.field as SearchCriteria] || [],
-            value: pill.value,
-          })}
-          onPress={() => {
-            handlePress(pill.field as SearchCriteria, pill.value)
-          }}
-        >
-          {pill.displayValue}
-        </SavedSearchFilterPill>
-      ))}
-
-      <MoreFiltersButton text="More Filters" />
+    <Flex>
+      <Text variant="sm-display">Suggested Filters</Text>
+
+      <Flex flexDirection="row" flexWrap="wrap" mt={1} mx={-0.5} alignItems="center">
+        {suggestedFilters.map((pill) => (
+          <SavedSearchFilterPill
+            key={pill.name + pill.value}
+            m={0.5}
+            accessibilityLabel={"Select " + pill.displayValue + " as a " + pill.name}
+            selected={isValueSelected({
+              selectedAttributes: attributes[pill.field as SearchCriteria] || [],
+              value: pill.value,
+            })}
+            variant="dotted"
+            onPress={() => {
+              handlePress(pill.field as SearchCriteria, pill.value)
+            }}
+          >
+            {pill.displayValue}
+          </SavedSearchFilterPill>
+        ))}
+
+        <MoreFiltersButton text="More Filters" />
+      </Flex>
     </Flex>
   )
 }

diff --git a/yarn.lock b/yarn.lock
@@ -24,10 +24,10 @@
   dependencies:
     core-js "3"
 
-"@artsy/[email protected].24":
-  version "13.0.24"
-  resolved "https://registry.yarnpkg.com/@artsy/palette-mobile/-/palette-mobile-13.0.24.tgz#ee89d255b21b858796284017ae2a8cb139fa60b1"
-  integrity sha512-mIpQKZOhcOQeVMTy98hx68hxr4CNHbI20CkTfc3YIzPdtHn3lWwEi7R3pcxWBBkLjdXwmFMw82JWv/4l7a+k4g==
+"@artsy/[email protected].25":
+  version "13.0.25"
+  resolved "https://registry.yarnpkg.com/@artsy/palette-mobile/-/palette-mobile-13.0.25.tgz#5160623ba9327fbe1ef05c2e47ebd6693d6a425f"
+  integrity sha512-RINtd5rgEU0j/jtlzlZAMoDPo2slZ1h8vhCRTAT4uT6qgu3pZimbKRnpmmTvj/Xy4ga0Je5qQwZctJu9Q886uw==
   dependencies:
     "@artsy/palette-tokens" "^5.0.0"
     "@shopify/flash-list" "^1.5.0"