feat: Featured Fairs screen

src/app/Components/Cards/CardWithMetaData.tsx

@@ -8,7 +8,9 @@ import {
   useTheme,
   Screen,
   useScreenDimensions,
+  Box,
 } from "@artsy/palette-mobile"
+import { CARD_WIDTH } from "app/Components/CardRail/CardRailCard"
 import { RouterLink } from "app/system/navigation/RouterLink"
 import {
   PlaceholderBox,
@@ -25,7 +27,8 @@ export const CARD_IMAGE_HEIGHT = 230
 interface CardWithMetaDataProps {
   isFluid?: boolean
   href: string | null | undefined
-  imageURL: string | null | undefined
+  imageURL?: string | null | undefined
+  imageComponent?: React.ReactNode
   title: string | null | undefined
   subtitle: string | null | undefined
   tag: string | null | undefined
@@ -34,28 +37,41 @@ interface CardWithMetaDataProps {
 }
 
 export const CardWithMetaData: React.FC<CardWithMetaDataProps> = (props) => {
-  const { isFluid, href, imageURL, title, subtitle, tag, onPress } = props
+  const { isFluid, href, imageURL, title, subtitle, tag, onPress, imageComponent } = props
   const numColumns = useNumColumns()
 
   const { space } = useTheme()
   const { width } = useWindowDimensions()
 
+  const cardWidth = isFluid
+    ? width / numColumns - 2 * space(2)
+    : imageComponent
+      ? CARD_WIDTH
+      : CARD_IMAGE_WIDTH
+
   return (
-    <Flex width={isFluid ? "100%" : CARD_IMAGE_WIDTH}>
+    <Flex width={cardWidth}>
       <RouterLink onPress={onPress} testID="article-card" to={href}>
-        <Flex width={isFluid ? "100%" : CARD_IMAGE_WIDTH} overflow="hidden">
-          {!!imageURL &&
-            (isFluid ? (
+        <Flex width={cardWidth} overflow="hidden">
+          {!!imageURL ? (
+            isFluid ? (
               <Image
                 src={imageURL}
                 // aspect ratio is fixed to 1.33 to match the old image aspect ratio
                 aspectRatio={1.33}
-                width={width / numColumns - 2 * space(2)}
+                width={cardWidth}
               />
             ) : (
               <Image src={imageURL} width={CARD_IMAGE_WIDTH} height={CARD_IMAGE_HEIGHT} />
-            ))}
+            )
+          ) : !!imageComponent ? (
+            imageComponent
+          ) : (
+            <Box height={CARD_IMAGE_HEIGHT} width={CARD_IMAGE_WIDTH} />
+          )}
+
           <Spacer y={1} />
+
           {!!title && (
             <Text numberOfLines={2} ellipsizeMode="tail" variant="sm-display" mb={0.5}>
               {title}

src/app/Components/ThreeUpImageLayout.tsx

@@ -1,58 +1,62 @@
-import { Box } from "@artsy/palette-mobile"
+import { Box, Flex } from "@artsy/palette-mobile"
 import themeGet from "@styled-system/theme-get"
+import { CARD_WIDTH } from "app/Components/CardRail/CardRailCard"
 import { ImageWithFallback } from "app/Components/ImageWithFallback/ImageWithFallback"
 import styled from "styled-components/native"
 
+export const LARGE_IMAGE_SIZE = (CARD_WIDTH / 3) * 2
+export const SMALL_IMAGE_SIZE = LARGE_IMAGE_SIZE / 2
+
 interface ThreeUpImageLayoutProps {
   imageURLs: string[]
+  width?: number
 }
 
-export const LARGE_IMAGE_SIZE = 180
-export const SMALL_IMAGE_SIZE = LARGE_IMAGE_SIZE / 2
-
-export const ThreeUpImageLayout: React.FC<ThreeUpImageLayoutProps> = ({ imageURLs }) => {
+export const ThreeUpImageLayout: React.FC<ThreeUpImageLayoutProps> = ({
+  imageURLs,
+  width = CARD_WIDTH,
+}) => {
   // Ensure we have an array of exactly 3 URLs, copying over the last image if we have less than 3
   const artworkImageURLs = [null, null, null].reduce((acc: string[], _, i) => {
     return [...acc, imageURLs[i] || acc[i - 1]]
   }, [])
 
+  const largeImageWidth = Math.floor((width * 2) / 3)
+  const smallImageWidth = Math.floor(largeImageWidth / 2)
+
   return (
-    <ArtworkImageContainer>
+    <Flex
+      flexDirection="row"
+      justifyContent="space-between"
+      overflow="hidden"
+      maxHeight={largeImageWidth}
+    >
       <ImageWithFallback
         testID="image-1"
-        width={LARGE_IMAGE_SIZE}
-        height={LARGE_IMAGE_SIZE}
+        width={largeImageWidth}
+        height={largeImageWidth}
         src={artworkImageURLs[0]}
       />
       <Division />
       <Box>
         <ImageWithFallback
           testID="image-2"
-          width={SMALL_IMAGE_SIZE}
-          height={SMALL_IMAGE_SIZE}
+          width={smallImageWidth}
+          height={smallImageWidth}
           src={artworkImageURLs[1]}
         />
         <Division horizontal />
         <ImageWithFallback
           testID="image-3"
-          width={SMALL_IMAGE_SIZE}
-          height={SMALL_IMAGE_SIZE}
+          width={smallImageWidth}
+          height={smallImageWidth}
           src={artworkImageURLs[2]}
         />
       </Box>
-    </ArtworkImageContainer>
+    </Flex>
   )
 }
 
-export const ArtworkImageContainer = styled.View`
-  width: 100%;
-  height: ${LARGE_IMAGE_SIZE}px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  overflow: hidden;
-`
-
 export const Division = styled.View<{ horizontal?: boolean }>`
   border: 1px solid ${themeGet("colors.white100")};
   ${({ horizontal }) => (horizontal ? "height" : "width")}: 1px;

src/app/Navigation/routes.tsx

@@ -60,6 +60,7 @@ import { FairScreen, FairScreenQuery } from "app/Scenes/Fair/Fair"
 import { FairAllFollowedArtistsQueryRenderer } from "app/Scenes/Fair/FairAllFollowedArtists"
 import { FairArticlesQueryRenderer } from "app/Scenes/Fair/FairArticles"
 import { FairMoreInfoQueryRenderer } from "app/Scenes/Fair/FairMoreInfo"
+import { FeaturedFairsScreen, featuredFairsScreenQuery } from "app/Scenes/Fair/FeaturedFairsScreen"
 import { Favorites } from "app/Scenes/Favorites/Favorites"
 import { FeatureQueryRenderer } from "app/Scenes/Feature/Feature"
 import { GalleriesForYouScreen } from "app/Scenes/GalleriesForYou/GalleriesForYouScreen"
@@ -741,6 +742,17 @@ export const artsyDotNetRoutes = defineRoutes([
       },
     },
   },
+  {
+    path: "/featured-fairs",
+    name: "Featured Fairs",
+    Component: FeaturedFairsScreen,
+    options: {
+      screenOptions: {
+        headerShown: false,
+      },
+    },
+    queries: [featuredFairsScreenQuery],
+  },
   {
     path: "/favorites",
     name: "Favorites",

src/app/Scenes/Artwork/Components/ArtworkError.tsx

@@ -2,8 +2,8 @@ import { ContextModule, OwnerType } from "@artsy/cohesion"
 import { Flex, Join, Spacer, Spinner, Text } from "@artsy/palette-mobile"
 import { ArtworkErrorQuery } from "__generated__/ArtworkErrorQuery.graphql"
 import { ArtworkErrorRecentlyViewed_homePage$key } from "__generated__/ArtworkErrorRecentlyViewed_homePage.graphql"
-import { NavigationHeader } from "app/Components/NavigationHeader"
 import { LoadFailureView } from "app/Components/LoadFailureView"
+import { NavigationHeader } from "app/Components/NavigationHeader"
 import { ArtworkModuleRailFragmentContainer } from "app/Scenes/HomeView/Components/ArtworkModuleRail"
 import { ArtworkRecommendationsRail } from "app/Scenes/HomeView/Components/ArtworkRecommendationsRail"
 import { NewWorksForYouRail } from "app/Scenes/HomeView/Components/NewWorksForYouRail"

src/app/Scenes/Fair/FeaturedFairsScreen.tests.tsx

@@ -0,0 +1,59 @@
+import { fireEvent, screen, waitForElementToBeRemoved } from "@testing-library/react-native"
+import { FeaturedFairsScreen } from "app/Scenes/Fair/FeaturedFairsScreen"
+import { navigate } from "app/system/navigation/navigate"
+import { setupTestWrapper } from "app/utils/tests/setupTestWrapper"
+import { useTracking } from "react-tracking"
+
+describe("FeaturedFairsScreen", () => {
+  const { renderWithRelay } = setupTestWrapper({
+    Component: () => <FeaturedFairsScreen />,
+  })
+
+  it("renders fairs", async () => {
+    renderWithRelay({
+      Query: () => ({
+        viewer: {
+          featuredFairs: mockFairsData,
+        },
+      }),
+    })
+
+    await waitForElementToBeRemoved(() => screen.queryByTestId("featured-fairs-screen-placeholder"))
+
+    expect(screen.getByText("Art Saloon International")).toBeTruthy()
+    expect(screen.getByText("Art Saloon II")).toBeTruthy()
+  })
+
+  it("opens fair screen and tracks on press", async () => {
+    renderWithRelay({
+      Query: () => ({
+        viewer: {
+          featuredFairs: mockFairsData,
+        },
+      }),
+    })
+
+    await waitForElementToBeRemoved(() => screen.queryByTestId("featured-fairs-screen-placeholder"))
+
+    fireEvent.press(screen.getByText("Art Saloon International"))
+
+    expect(useTracking().trackEvent).toHaveBeenCalledWith({
+      action: "tappedFairGroup",
+      context_module: "fairCard",
+      context_screen_owner_type: "fairs",
+      destination_screen_owner_id: "art-saloon-international",
+      destination_screen_owner_slug: '<mock-value-for-field-"slug">',
+      destination_screen_owner_type: "fair",
+    })
+
+    expect(navigate).toHaveBeenCalledWith('/fair/<mock-value-for-field-"slug">')
+  })
+})
+
+const mockFairsData = [
+  { internalID: "art-saloon-international", name: "Art Saloon International" },
+  {
+    internalID: "art-saloon-ii",
+    name: "Art Saloon II",
+  },
+]

src/app/Scenes/Fair/FeaturedFairsScreen.tsx

@@ -0,0 +1,115 @@
+import { ActionType, ContextModule, OwnerType } from "@artsy/cohesion"
+import { Screen, Spacer } from "@artsy/palette-mobile"
+import { FairCard_fair$data } from "__generated__/FairCard_fair.graphql"
+import { FeaturedFairsScreenQuery } from "__generated__/FeaturedFairsScreenQuery.graphql"
+import { FeaturedFairsScreen_viewer$key } from "__generated__/FeaturedFairsScreen_viewer.graphql"
+import {
+  CardWithMetaDataListItem,
+  useNumColumns,
+  CardsWithMetaDataListPlaceholder as FeaturedFairsScreenPlaceholder,
+} from "app/Components/Cards/CardWithMetaData"
+import { FairCard } from "app/Scenes/HomeView/Sections/FairCard"
+import { HORIZONTAL_FLATLIST_INTIAL_NUMBER_TO_RENDER_DEFAULT } from "app/Scenes/HomeView/helpers/constants"
+import { goBack } from "app/system/navigation/navigate"
+import { NoFallback, withSuspense } from "app/utils/hooks/withSuspense"
+import { ProvideScreenTrackingWithCohesionSchema } from "app/utils/track"
+import { screen } from "app/utils/track/helpers"
+
+import { graphql, useFragment, useLazyLoadQuery } from "react-relay"
+import { useTracking } from "react-tracking"
+
+interface FeaturedFairsProps {
+  viewer: FeaturedFairsScreen_viewer$key
+}
+
+export const FeaturedFairs: React.FC<FeaturedFairsProps> = ({ viewer }) => {
+  const fairs = useFragment(viewerFragment, viewer)
+
+  const { trackEvent } = useTracking()
+  const numColumns = useNumColumns()
+
+  const handleOnPress = (fair: FairCard_fair$data) => {
+    trackEvent(tracks.tapFair(fair.internalID, fair.slug || ""))
+  }
+
+  if (!fairs?.featuredFairs?.length) return null
+
+  return (
+    <ProvideScreenTrackingWithCohesionSchema
+      info={screen({
+        context_screen_owner_type: OwnerType.featuredFairs,
+      })}
+    >
+      <Screen>
+        <Screen.AnimatedHeader onBack={goBack} title="Featured Fairs" />
+        <Screen.StickySubHeader title="Featured Fairs" />
+
+        <Screen.Body fullwidth>
+          <Spacer y={2} />
+          <Screen.FlatList
+            keyExtractor={(_item, index) => `fair-${index}`}
+            numColumns={numColumns}
+            data={fairs?.featuredFairs}
+            initialNumToRender={HORIZONTAL_FLATLIST_INTIAL_NUMBER_TO_RENDER_DEFAULT}
+            renderItem={({ item, index }) => {
+              return (
+                <CardWithMetaDataListItem index={index}>
+                  <FairCard fair={item} isFluid onPress={handleOnPress} />
+                </CardWithMetaDataListItem>
+              )
+            }}
+            ItemSeparatorComponent={() => <Spacer y={4} />}
+            ListFooterComponent={<Spacer y={2} />}
+          />
+        </Screen.Body>
+      </Screen>
+    </ProvideScreenTrackingWithCohesionSchema>
+  )
+}
+
+const viewerFragment = graphql`
+  fragment FeaturedFairsScreen_viewer on Viewer {
+    featuredFairs(size: 10, includeBackfill: true) {
+      internalID
+      ...FairCard_fair
+    }
+  }
+`
+
+export const featuredFairsScreenQuery = graphql`
+  query FeaturedFairsScreenQuery {
+    viewer {
+      ...FeaturedFairsScreen_viewer
+    }
+  }
+`
+
+export const FeaturedFairsScreen: React.FC = withSuspense({
+  Component: () => {
+    const data = useLazyLoadQuery<FeaturedFairsScreenQuery>(featuredFairsScreenQuery, {})
+
+    if (!data?.viewer) {
+      return null
+    }
+
+    return <FeaturedFairs viewer={data.viewer} />
+  },
+  LoadingFallback: () => (
+    <FeaturedFairsScreenPlaceholder
+      testID="featured-fairs-screen-placeholder"
+      title="Featured Fairs"
+    />
+  ),
+  ErrorFallback: NoFallback,
+})
+
+export const tracks = {
+  tapFair: (fairID: string, fairSlug: string) => ({
+    action: ActionType.tappedFairGroup,
+    context_module: ContextModule.fairCard,
+    context_screen_owner_type: OwnerType.fairs,
+    destination_screen_owner_type: OwnerType.fair,
+    destination_screen_owner_id: fairID,
+    destination_screen_owner_slug: fairSlug,
+  }),
+}