feat: hide QA-only templates from /templates when customizableMedia flag is off

apps/journeys-admin/pages/templates/index.tsx

@@ -1,8 +1,12 @@
 import { useQuery } from '@apollo/client'
 import Box from '@mui/material/Box'
-import { GetStaticProps } from 'next'
 import { useRouter } from 'next/router'
-import { useUser, withUser } from 'next-firebase-auth'
+import {
+  AuthAction,
+  useUser,
+  withUser,
+  withUserTokenSSR
+} from 'next-firebase-auth'
 import { useTranslation } from 'next-i18next'
 import { NextSeo } from 'next-seo'
 import { useSnackbar } from 'notistack'
@@ -103,11 +107,17 @@ function TemplateIndexPage(): ReactElement {
   )
 }
 
-export const getStaticProps: GetStaticProps = async ({ locale }) => {
-  const { apolloClient, translations } = await initAndAuthApp({
-    locale
+export const getServerSideProps = withUserTokenSSR({
+  whenUnauthed: AuthAction.RENDER
+})(async ({ user, locale, resolvedUrl }) => {
+  const { apolloClient, translations, flags, redirect } = await initAndAuthApp({
+    user: user ?? undefined,
+    locale,
+    resolvedUrl
   })
 
+  if (redirect != null) return { redirect }
+
   await Promise.all([
     apolloClient.query<GetLanguages, GetLanguagesVariables>({
       // from /workspaces/core/apps/journeys-admin/src/components/TemplateGallery/HeaderAndLanguageFilter/HeaderAndLanguageFilter.tsx useLanguagesQuery
@@ -169,10 +179,12 @@ export const getStaticProps: GetStaticProps = async ({ locale }) => {
   return {
     props: {
       ...translations,
+      flags,
       initialApolloState: apolloClient.cache.extract()
-    },
-    revalidate: 60
+    }
   }
-}
+})
 
-export default withUser()(TemplateIndexPage)
+export default withUser({
+  whenUnauthedAfterInit: AuthAction.RENDER
+})(TemplateIndexPage)

libs/journeys/ui/src/components/TemplateSections/TemplateSections.spec.tsx

@@ -1,6 +1,8 @@
 import { MockedProvider, MockedResponse } from '@apollo/client/testing'
 import { render, waitFor } from '@testing-library/react'
 
+import { FlagsProvider } from '@core/shared/ui/FlagsProvider'
+
 import {
   JourneyStatus,
   ThemeMode,
@@ -383,4 +385,56 @@ describe('TemplateSections', () => {
       ).not.toBeInTheDocument()
     })
   })
+
+  describe('customizableMedia flag and QA-only template slugs', () => {
+    const qaOnlyJourney: Journey = {
+      ...defaultTemplate,
+      id: 'qaOnlyId',
+      title: 'QA Customizable Media Test',
+      slug: 'qa-customizable-media-test-001',
+      featuredAt: null
+    }
+    const journeysWithQaOnly = [...journeys, qaOnlyJourney]
+    const getJourneysWithQaOnlyMock: MockedResponse<GetJourneys> = {
+      ...getJourneysMock,
+      result: {
+        data: {
+          journeys: journeysWithQaOnly
+        }
+      }
+    }
+
+    it('hides QA-only slug template when customizableMedia is false', async () => {
+      const { queryByRole } = render(
+        <FlagsProvider flags={{ customizableMedia: false }}>
+          <MockedProvider mocks={[getJourneysWithQaOnlyMock]}>
+            <TemplateSections languageIds={['529']} />
+          </MockedProvider>
+        </FlagsProvider>
+      )
+      await waitFor(() =>
+        expect(
+          queryByRole('heading', { name: 'Featured & New' })
+        ).toBeInTheDocument()
+      )
+      expect(
+        queryByRole('heading', { name: 'QA Customizable Media Test' })
+      ).not.toBeInTheDocument()
+    })
+
+    it('shows QA-only slug template when customizableMedia is true', async () => {
+      const { getByRole } = render(
+        <FlagsProvider flags={{ customizableMedia: true }}>
+          <MockedProvider mocks={[getJourneysWithQaOnlyMock]}>
+            <TemplateSections languageIds={['529']} />
+          </MockedProvider>
+        </FlagsProvider>
+      )
+      await waitFor(() =>
+        expect(
+          getByRole('heading', { name: 'QA Customizable Media Test' })
+        ).toBeInTheDocument()
+      )
+    })
+  })
 })

libs/journeys/ui/src/components/TemplateSections/TemplateSections.tsx

@@ -8,11 +8,16 @@ import { useTranslation } from 'next-i18next'
 import { ReactElement, useMemo } from 'react'
 import { SwiperOptions } from 'swiper/types'
 
+import { useFlags } from '@core/shared/ui/FlagsProvider'
+
 import { useJourneysQuery } from '../../libs/useJourneysQuery'
 import { GetJourneys_journeys as Journey } from '../../libs/useJourneysQuery/__generated__/GetJourneys'
 import { ContentCarousel } from '../ContentCarousel'
 import { TemplateGalleryCard } from '../TemplateGalleryCard'
 
+/** Slug prefix for QA-only templates hidden from /templates when customizableMedia flag is false */
+const QA_ONLY_TEMPLATE_SLUG_PREFIX = 'qa-customizable-media-test'
+
 interface Contents {
   [key: string]: { category: string; journeys: Journey[] }
 }
@@ -28,6 +33,7 @@ export function TemplateSections({
 }: TemplateSectionsProps): ReactElement {
   const { t } = useTranslation('libs-journeys-ui')
   const { breakpoints } = useTheme()
+  const { customizableMedia } = useFlags()
 
   const { data, loading } = useJourneysQuery({
     variables: {
@@ -47,18 +53,24 @@ export function TemplateSections({
     const contents: Contents = {}
     let collection: Journey[] = []
     if (data != null) {
+      const visibleJourneys =
+        customizableMedia === true
+          ? data.journeys
+          : data.journeys.filter(
+              (j) => !j.slug.startsWith(QA_ONLY_TEMPLATE_SLUG_PREFIX)
+            )
       const featuredAndNew = [
-        ...data.journeys.filter(({ featuredAt }) => featuredAt != null),
+        ...visibleJourneys.filter(({ featuredAt }) => featuredAt != null),
         ...take(
-          data.journeys.filter(({ featuredAt }) => featuredAt == null),
+          visibleJourneys.filter(({ featuredAt }) => featuredAt == null),
           10
         )
       ]
-      const mostRelevant = data.journeys.filter(({ tags }) =>
+      const mostRelevant = visibleJourneys.filter(({ tags }) =>
         tagIds?.every((tagId) => tags.find((tag) => tag.id === tagId))
       )
       collection = tagIds == null ? featuredAndNew : mostRelevant
-      data.journeys.forEach((journey) => {
+      visibleJourneys.forEach((journey) => {
         journey.tags.forEach((tag) => {
           if (contents[tag.id] == null)
             contents[tag.id] = {
@@ -70,7 +82,7 @@ export function TemplateSections({
       })
     }
     return { collection, contents }
-  }, [data, tagIds])
+  }, [data, tagIds, customizableMedia])
 
   const swiperBreakpoints: SwiperOptions['breakpoints'] = {
     [breakpoints.values.xs]: {