feat(art advisor): enable Milestone 1 (#10724)

* feat: display new home view by default, and allow override * refactor: extract Alpha indicator * feat: update alpha help text * feat: add a hyperlink to the #pdde-art-advisor channel Also inlines the Notion feedback board link. * test: conditional rendering of old/new home screen * feat: request 10 sections initially --------- Co-authored-by: Devon Blandin <[email protected]>
artsy · Sep 9, 2024 · 863e0f1 · 863e0f1
1 parent 14814f9
commit 863e0f1
Show file tree

Hide file tree

Showing 7 changed files with 148 additions and 37 deletions.
diff --git a/src/app/AppRegistry.tsx b/src/app/AppRegistry.tsx
@@ -141,7 +141,7 @@ import {
   ViewingRoomsListScreen,
   viewingRoomsListScreenQuery,
 } from "./Scenes/ViewingRoom/ViewingRoomsList"
-import { GlobalStore, unsafe_getFeatureFlag } from "./store/GlobalStore"
+import { GlobalStore } from "./store/GlobalStore"
 import { propsStore } from "./store/PropsStore"
 import { DevMenu } from "./system/devTools/DevMenu/DevMenu"
 import { Schema, screenTrack } from "./utils/track"
@@ -489,7 +489,6 @@ export const modules = defineModules({
   }),
   Home: reactModule(HomeContainer, {
     isRootViewForTabName: "home",
-    fullBleed: unsafe_getFeatureFlag("ARUseNewHomeView") ? true : false,
   }),
   HomeView: reactModule(HomeViewScreen, { hidesBackButton: true }),
   Inbox: reactModule(InboxQueryRenderer, { isRootViewForTabName: "inbox" }, [InboxScreenQuery]),

diff --git a/src/app/Scenes/Home/HomeContainer.tests.tsx b/src/app/Scenes/Home/HomeContainer.tests.tsx
@@ -0,0 +1,72 @@
+import { screen } from "@testing-library/react-native"
+import * as ArtsyNativeModule from "app/NativeModules/ArtsyNativeModule"
+import { __globalStoreTestUtils__ } from "app/store/GlobalStore"
+import { renderWithWrappers } from "app/utils/tests/renderWithWrappers"
+import { HomeContainer } from "./HomeContainer"
+
+jest.mock("app/NativeModules/ArtsyNativeModule", () => ({
+  ...jest.requireActual("app/NativeModules/ArtsyNativeModule"),
+  ArtsyNativeModule: {
+    ArtsyNativeModule: {
+      isBetaOrDev: undefined, // set in each test condition below
+    },
+  },
+}))
+
+describe("conditional rendering of old vs new home screen", () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe("when running in beta or simulator", () => {
+    beforeEach(() => (ArtsyNativeModule.ArtsyNativeModule.isBetaOrDev = true))
+
+    describe("when ARPreferLegacyHomeScreen is false", () => {
+      beforeEach(
+        () => __globalStoreTestUtils__?.injectFeatureFlags({ ARPreferLegacyHomeScreen: false })
+      )
+
+      it("renders the NEW screen", () => {
+        renderWithWrappers(<HomeContainer />)
+        expect(screen.getByTestId("new-home-view-skeleton")).toBeOnTheScreen()
+      })
+    })
+
+    describe("when ARPreferLegacyHomeScreen is true", () => {
+      beforeEach(
+        () => __globalStoreTestUtils__?.injectFeatureFlags({ ARPreferLegacyHomeScreen: true })
+      )
+
+      it("renders the old screen", () => {
+        renderWithWrappers(<HomeContainer />)
+        expect(screen.queryByTestId("new-home-view-skeleton")).not.toBeOnTheScreen()
+      })
+    })
+  })
+
+  describe("when NOT running in beta or simulator", () => {
+    beforeEach(() => (ArtsyNativeModule.ArtsyNativeModule.isBetaOrDev = false))
+
+    describe("when ARPreferLegacyHomeScreen is false", () => {
+      beforeEach(
+        () => __globalStoreTestUtils__?.injectFeatureFlags({ ARPreferLegacyHomeScreen: false })
+      )
+
+      it("renders the old screen", () => {
+        renderWithWrappers(<HomeContainer />)
+        expect(screen.queryByTestId("new-home-view-skeleton")).not.toBeOnTheScreen()
+      })
+    })
+
+    describe("when ARPreferLegacyHomeScreen is true", () => {
+      beforeEach(
+        () => __globalStoreTestUtils__?.injectFeatureFlags({ ARPreferLegacyHomeScreen: true })
+      )
+
+      it("renders the old screen", () => {
+        renderWithWrappers(<HomeContainer />)
+        expect(screen.queryByTestId("new-home-view-skeleton")).not.toBeOnTheScreen()
+      })
+    })
+  })
+})
diff --git a/src/app/Scenes/Home/HomeContainer.tsx b/src/app/Scenes/Home/HomeContainer.tsx
@@ -1,3 +1,4 @@
+import { ArtsyNativeModule } from "app/NativeModules/ArtsyNativeModule"
 import { HomeQueryRenderer } from "app/Scenes/Home/Home"
 import { HomeViewScreen } from "app/Scenes/HomeView/HomeView"
 import { Playground } from "app/Scenes/Playground/Playground"
@@ -11,7 +12,10 @@ export const HomeContainer = () => {
   const artQuizState = GlobalStore.useAppState((state) => state.auth.onboardingArtQuizState)
   const isNavigationReady = GlobalStore.useAppState((state) => state.sessionState.isNavigationReady)
   const showPlayground = useDevToggle("DTShowPlayground")
-  const useNewHomeView = useFeatureFlag("ARUseNewHomeView")
+
+  const preferLegacyHomeScreen = useFeatureFlag("ARPreferLegacyHomeScreen")
+
+  const shouldDisplayNewHomeView = ArtsyNativeModule.isBetaOrDev && !preferLegacyHomeScreen
 
   const navigateToArtQuiz = async () => {
     await navigate("/art-quiz")
@@ -28,13 +32,13 @@ export const HomeContainer = () => {
     return null
   }
 
-  if (useNewHomeView) {
-    return <HomeViewScreen />
-  }
-
   if (showPlayground) {
     return <Playground />
   }
 
-  return <HomeQueryRenderer />
+  if (shouldDisplayNewHomeView) {
+    return <HomeViewScreen />
+  } else {
+    return <HomeQueryRenderer />
+  }
 }
diff --git a/src/app/Scenes/HomeView/Components/AlphaVersionIndicator.tsx b/src/app/Scenes/HomeView/Components/AlphaVersionIndicator.tsx
@@ -0,0 +1,58 @@
+import { Box, Join, LinkText, Spacer, Text } from "@artsy/palette-mobile"
+import { InfoButton } from "app/Components/Buttons/InfoButton"
+import { Linking } from "react-native"
+
+export const AlphaVersionIndicator: React.FC = () => {
+  return (
+    <InfoButton
+      titleElement={
+        <Text color="blue100" weight="medium">
+          Alpha
+        </Text>
+      }
+      modalTitle="Home View"
+      modalContent={
+        <Box py={1}>
+          <Join separator={<Spacer y={2} />}>
+            <Text variant="sm">Hello! 👋</Text>
+
+            <Text variant="sm">This is an unreleased version of the app home screen.</Text>
+
+            <Text variant="sm">
+              Please direct any feedback to the{" "}
+              <LinkText
+                fontWeight="bold"
+                onPress={() => Linking.openURL("https://artsy.slack.com/archives/C07ANEV7RNV")}
+              >
+                #pdde-art-advisor
+              </LinkText>{" "}
+              channel in Slack, or to the{" "}
+              <LinkText
+                fontWeight="bold"
+                onPress={() =>
+                  Linking.openURL("https://www.notion.so/artsy/abc1123548504ae58051405627fb6c9f")
+                }
+              >
+                Notion feedback board
+              </LinkText>
+              .
+            </Text>
+
+            <Text variant="sm">
+              To switch to the current production version, enable the feature flag for “
+              <Text fontWeight="bold">Prefer legacy home screen</Text>” in the admin settings.
+            </Text>
+
+            <LinkText
+              onPress={() =>
+                Linking.openURL("https://www.notion.so/artsy/e9958451ea9d44c6b357aba6505c0abc")
+              }
+            >
+              See more on how to switch back
+            </LinkText>
+          </Join>
+        </Box>
+      }
+    />
+  )
+}
diff --git a/src/app/Scenes/HomeView/Components/HomeHeader.tsx b/src/app/Scenes/HomeView/Components/HomeHeader.tsx
@@ -1,5 +1,5 @@
-import { Spacer, ArtsyLogoBlackIcon, Flex, Box, Text, Join } from "@artsy/palette-mobile"
-import { InfoButton } from "app/Components/Buttons/InfoButton"
+import { ArtsyLogoBlackIcon, Flex, Box } from "@artsy/palette-mobile"
+import { AlphaVersionIndicator } from "app/Scenes/HomeView/Components/AlphaVersionIndicator"
 import { GlobalStore } from "app/store/GlobalStore"
 import { ActivityIndicator } from "./ActivityIndicator"
 
@@ -12,29 +12,7 @@ export const HomeHeader: React.FC = () => {
     <Box py={2}>
       <Flex flexDirection="row" px={2} justifyContent="space-between" alignItems="center">
         <Box flex={1}>
-          <InfoButton
-            titleElement={
-              <Text color="blue100" weight="medium">
-                Alpha
-              </Text>
-            }
-            modalTitle="Home View"
-            modalContent={
-              <Box py={1} flex={1}>
-                <Join separator={<Spacer y={0.5} />}>
-                  <Text variant="sm">Hello! 👋</Text>
-                  <Text variant="sm">
-                    This is an unreleased version of the app home screen. To switch to the current
-                    production version, disable the feature flag for "Use new home view" in admin
-                    settings.
-                  </Text>
-                  <Text variant="sm">
-                    Please direct any feedback to the #pdde-art-advisor channel in Slack.
-                  </Text>
-                </Join>
-              </Box>
-            }
-          />
+          <AlphaVersionIndicator />
         </Box>
         <Box>
           <ArtsyLogoBlackIcon scale={0.75} />

diff --git a/src/app/Scenes/HomeView/HomeView.tsx b/src/app/Scenes/HomeView/HomeView.tsx
@@ -18,7 +18,7 @@ const SECTION_SEPARATOR_HEIGHT: SpacingUnitDSValueNumber = 6
 
 export const HomeView: React.FC = () => {
   const queryData = useLazyLoadQuery<HomeViewQuery>(homeViewScreenQuery, {
-    count: 5,
+    count: 10,
   })
 
   const { data, loadNext, hasNext } = usePaginationFragment<
@@ -58,7 +58,7 @@ const SectionSeparator = () => <Spacer y={SECTION_SEPARATOR_HEIGHT} />
 export const HomeViewScreen: React.FC = () => (
   <Suspense
     fallback={
-      <Flex flex={1} justifyContent="center" alignItems="center">
+      <Flex flex={1} justifyContent="center" alignItems="center" testID="new-home-view-skeleton">
         <Text>Loading home view…</Text>
       </Flex>
     }

diff --git a/src/app/store/config/features.ts b/src/app/store/config/features.ts
@@ -264,8 +264,8 @@ export const features = {
     showInDevMenu: true,
     echoFlagKey: "AREnableAuctionImprovementsSignals",
   },
-  ARUseNewHomeView: {
-    description: "Use new home view",
+  ARPreferLegacyHomeScreen: {
+    description: "Prefer legacy home screen",
     readyForRelease: false,
     showInDevMenu: true,
   },