feat: media layout skeleton implementation

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.spec.tsx

@@ -48,4 +48,15 @@ describe('MediaScreen', () => {
 
     expect(handleNext).toHaveBeenCalledTimes(1)
   })
+
+  it('should render section components with visible data-testids when screen is shown', () => {
+    renderMediaScreen()
+
+    expect(screen.getByTestId('LogoSection')).toBeInTheDocument()
+    expect(screen.getByTestId('CardsSection')).toBeInTheDocument()
+    expect(screen.getByTestId('ImagesSection')).toBeInTheDocument()
+    expect(screen.getByTestId('VideosSection')).toBeInTheDocument()
+    expect(screen.getByTestId('BackgroundImageSection')).toBeInTheDocument()
+    expect(screen.getByTestId('BackgroundVideoSection')).toBeInTheDocument()
+  })
 })

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx

@@ -1,15 +1,42 @@
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import { useTranslation } from 'next-i18next'
-import { ReactElement } from 'react'
+import { ReactElement, useState } from 'react'
+
+import {
+  showLogoSection,
+  showImagesSection,
+  showVideosSection,
+  showBackgroundImageSection,
+  showBackgroundVideoSection
+} from './utils'
+import {
+  BackgroundImageSection,
+  BackgroundVideoSection,
+  CardsSection,
+  ImagesSection,
+  LogoSection,
+  VideosSection
+} from './Sections'
 
 import { CustomizeFlowNextButton } from '../../CustomizeFlowNextButton'
 
 interface MediaScreenProps {
   handleNext: () => void
 }
+
 export function MediaScreen({ handleNext }: MediaScreenProps): ReactElement {
   const { t } = useTranslation('apps-journeys-admin')
+  const [selectedCardBlockId, setSelectedCardBlockId] = useState<string | null>(
+    null
+  )
+  const showLogo = showLogoSection()
+  const showImages = showImagesSection(selectedCardBlockId)
+  const showVideos = showVideosSection(selectedCardBlockId)
+  const showBackgroundImage =
+    showBackgroundImageSection(selectedCardBlockId)
+  const showBackgroundVideo =
+    showBackgroundVideoSection(selectedCardBlockId)
 
   return (
     <Stack alignItems="center" sx={{ width: '100%' }}>
@@ -20,6 +47,16 @@ export function MediaScreen({ handleNext }: MediaScreenProps): ReactElement {
       >
         {t('Media')}
       </Typography>
+      {showLogo && <LogoSection cardBlockId={selectedCardBlockId} />}
+      {<CardsSection onChange={setSelectedCardBlockId} />}
+      {showImages && <ImagesSection cardBlockId={selectedCardBlockId} />}
+      {showVideos && <VideosSection cardBlockId={selectedCardBlockId} />}
+      {showBackgroundImage && (
+        <BackgroundImageSection cardBlockId={selectedCardBlockId} />
+      )}
+      {showBackgroundVideo && (
+        <BackgroundVideoSection cardBlockId={selectedCardBlockId} />
+      )}
       <CustomizeFlowNextButton
         label={t('Next')}
         onClick={handleNext}

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/BackgroundImageSection.spec.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react'
+
+import { BackgroundImageSection } from './BackgroundImageSection'
+
+describe('BackgroundImageSection', () => {
+  it('renders with BackgroundImageSection data-testid visible', () => {
+    render(<BackgroundImageSection cardBlockId={null} />)
+    expect(screen.getByTestId('BackgroundImageSection')).toBeInTheDocument()
+  })
+})

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/BackgroundImageSection.tsx

@@ -0,0 +1,20 @@
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { ReactElement } from 'react'
+
+interface BackgroundImageSectionProps {
+  cardBlockId: string | null
+}
+
+/**
+ * TODO: update this jsdoc after you implement this component
+ */
+export function BackgroundImageSection({
+  cardBlockId: _cardBlockId
+}: BackgroundImageSectionProps): ReactElement {
+  return (
+    <Box data-testid="BackgroundImageSection">
+      <Typography variant="h6">Background Image</Typography>
+    </Box>
+  )
+}

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/index.ts

@@ -0,0 +1 @@
+export { BackgroundImageSection } from './BackgroundImageSection'

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/BackgroundVideoSection.spec.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react'
+
+import { BackgroundVideoSection } from './BackgroundVideoSection'
+
+describe('BackgroundVideoSection', () => {
+  it('renders with BackgroundVideoSection data-testid visible', () => {
+    render(<BackgroundVideoSection cardBlockId={null} />)
+    expect(screen.getByTestId('BackgroundVideoSection')).toBeInTheDocument()
+  })
+})

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/BackgroundVideoSection.tsx

@@ -0,0 +1,20 @@
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { ReactElement } from 'react'
+
+interface BackgroundVideoSectionProps {
+  cardBlockId: string | null
+}
+
+/**
+ * TODO: update this jsdoc after you implement this component
+ */
+export function BackgroundVideoSection({
+  cardBlockId: _cardBlockId
+}: BackgroundVideoSectionProps): ReactElement {
+  return (
+    <Box data-testid="BackgroundVideoSection">
+      <Typography variant="h6">Background Video</Typography>
+    </Box>
+  )
+}

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/index.ts

@@ -0,0 +1 @@
+export { BackgroundVideoSection } from './BackgroundVideoSection'

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.spec.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react'
+
+import { CardsSection } from './CardsSection'
+
+describe('CardsSection', () => {
+  it('renders with CardsSection data-testid visible', () => {
+    render(<CardsSection onChange={() => {}} />)
+    expect(screen.getByTestId('CardsSection')).toBeInTheDocument()
+  })
+})

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.tsx

@@ -0,0 +1,18 @@
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { ReactElement } from 'react'
+
+interface CardsSectionProps {
+  onChange: (cardBlockId: string | null) => void
+}
+
+/**
+ * TODO: update this jsdoc after you implement this component
+ */
+export function CardsSection({ onChange: _onChange }: CardsSectionProps): ReactElement {
+  return (
+    <Box data-testid="CardsSection">
+      <Typography variant="h6">Cards</Typography>
+    </Box>
+  )
+}

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/index.ts

@@ -0,0 +1 @@
+export { CardsSection } from './CardsSection'

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/ImagesSection.spec.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react'
+
+import { ImagesSection } from './ImagesSection'
+
+describe('ImagesSection', () => {
+  it('renders with ImagesSection data-testid visible', () => {
+    render(<ImagesSection cardBlockId={null} />)
+    expect(screen.getByTestId('ImagesSection')).toBeInTheDocument()
+  })
+})

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/ImagesSection.tsx

@@ -0,0 +1,18 @@
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { ReactElement } from 'react'
+
+interface ImagesSectionProps {
+  cardBlockId: string | null
+}
+
+/**
+ * TODO: update this jsdoc after you implement this component
+ */
+export function ImagesSection({ cardBlockId: _cardBlockId }: ImagesSectionProps): ReactElement {
+  return (
+    <Box data-testid="ImagesSection">
+      <Typography variant="h6">Images</Typography>
+    </Box>
+  )
+}

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/index.ts

@@ -0,0 +1 @@
+export { ImagesSection } from './ImagesSection'

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/LogoSection.spec.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react'
+
+import { LogoSection } from './LogoSection'
+
+describe('LogoSection', () => {
+  it('renders with LogoSection data-testid visible', () => {
+    render(<LogoSection cardBlockId={null} />)
+    expect(screen.getByTestId('LogoSection')).toBeInTheDocument()
+  })
+})

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/LogoSection.tsx

@@ -0,0 +1,20 @@
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { ReactElement } from 'react'
+
+interface LogoSectionProps {
+  cardBlockId: string | null
+}
+
+/**
+ * TODO: update this jsdoc after you implement this component
+ */
+export function LogoSection({
+  cardBlockId: _cardBlockId
+}: LogoSectionProps): ReactElement {
+  return (
+    <Box data-testid="LogoSection">
+      <Typography variant="h6">Logo</Typography>
+    </Box>
+  )
+}

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/index.ts

@@ -0,0 +1 @@
+export { LogoSection } from './LogoSection'

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/VideosSection.spec.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react'
+
+import { VideosSection } from './VideosSection'
+
+describe('VideosSection', () => {
+  it('renders with VideosSection data-testid visible', () => {
+    render(<VideosSection cardBlockId={null} />)
+    expect(screen.getByTestId('VideosSection')).toBeInTheDocument()
+  })
+})

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/VideosSection.tsx

@@ -0,0 +1,18 @@
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import { ReactElement } from 'react'
+
+interface VideosSectionProps {
+  cardBlockId: string | null
+}
+
+/**
+ * TODO: update this jsdoc after you implement this component
+ */
+export function VideosSection({ cardBlockId: _cardBlockId }: VideosSectionProps): ReactElement {
+  return (
+    <Box data-testid="VideosSection">
+      <Typography variant="h6">Video</Typography>
+    </Box>
+  )
+}

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/index.ts

@@ -0,0 +1 @@
+export { VideosSection } from './VideosSection'

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/index.ts

@@ -0,0 +1,6 @@
+export { LogoSection } from './LogoSection'
+export { CardsSection } from './CardsSection'
+export { ImagesSection } from './ImagesSection'
+export { VideosSection } from './VideosSection'
+export { BackgroundImageSection } from './BackgroundImageSection'
+export { BackgroundVideoSection } from './BackgroundVideoSection'

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/index.ts

@@ -0,0 +1,5 @@
+export { showLogoSection } from './showLogoSection'
+export { showImagesSection } from './showImagesSection'
+export { showVideosSection } from './showVideosSection'
+export { showBackgroundImageSection } from './showBackgroundImageSection'
+export { showBackgroundVideoSection } from './showBackgroundVideoSection'

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/index.ts

@@ -0,0 +1 @@
+export { showBackgroundImageSection } from './showBackgroundImageSection'

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/showBackgroundImageSection.spec.ts

@@ -0,0 +1,14 @@
+/**
+ * TODO: update these when implementing the component
+ */
+import { showBackgroundImageSection } from './showBackgroundImageSection'
+
+describe('showBackgroundImageSection', () => {
+  it('returns true when cardBlockId is null (skeleton)', () => {
+    expect(showBackgroundImageSection(null)).toBe(true)
+  })
+
+  it('returns true when cardBlockId is set (skeleton)', () => {
+    expect(showBackgroundImageSection('card-1')).toBe(true)
+  })
+})

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/showBackgroundImageSection.ts

@@ -0,0 +1,13 @@
+/**
+ * Shows the background image section on the media screen.
+ * When implementing, check if the selected card has a customizable background/cover image block.
+ *
+ * @param cardBlockId - the id of the selected card block
+ * @returns true if the background image section should be shown, false otherwise
+ */
+export function showBackgroundImageSection(
+  cardBlockId: string | null
+): boolean {
+  // TODO: implement when building BackgroundImage section – pass journey and check cover/background for cardBlockId
+  return true
+}

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/index.ts

@@ -0,0 +1 @@
+export { showBackgroundVideoSection } from './showBackgroundVideoSection'

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/showBackgroundVideoSection.spec.ts

@@ -0,0 +1,14 @@
+/**
+ * TODO: update these when implementing the component
+ */
+import { showBackgroundVideoSection } from './showBackgroundVideoSection'
+
+describe('showBackgroundVideoSection', () => {
+  it('returns true when cardBlockId is null (skeleton)', () => {
+    expect(showBackgroundVideoSection(null)).toBe(true)
+  })
+
+  it('returns true when cardBlockId is set (skeleton)', () => {
+    expect(showBackgroundVideoSection('card-1')).toBe(true)
+  })
+})

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/showBackgroundVideoSection.ts

@@ -0,0 +1,13 @@
+/**
+ * Shows the background video section on the media screen.
+ * When implementing, check if the selected card has a customizable background/cover video block.
+ *
+ * @param cardBlockId - the id of the selected card block
+ * @returns true if the background video section should be shown, false otherwise
+ */
+export function showBackgroundVideoSection(
+  cardBlockId: string | null
+): boolean {
+  // TODO: implement when building BackgroundVideo section – pass journey and check cover/background for cardBlockId
+  return true
+}

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/index.ts

@@ -0,0 +1 @@
+export { showImagesSection } from './showImagesSection'

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/showImagesSection.spec.ts

@@ -0,0 +1,14 @@
+/**
+ * TODO: update these when implementing the component
+ */
+import { showImagesSection } from './showImagesSection'
+
+describe('showImagesSection', () => {
+  it('returns true when cardBlockId is null (skeleton)', () => {
+    expect(showImagesSection(null)).toBe(true)
+  })
+
+  it('returns true when cardBlockId is set (skeleton)', () => {
+    expect(showImagesSection('card-1')).toBe(true)
+  })
+})

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/showImagesSection.ts

@@ -0,0 +1,11 @@
+/**
+ * Shows the images section on the media screen.
+ * When implementing, check if the selected card has customizable image blocks.
+ *
+ * @param cardBlockId - the id of the selected card block
+ * @returns true if the images section should be shown, false otherwise
+ */
+export function showImagesSection(cardBlockId: string | null): boolean {
+  // TODO: implement when building Images section – pass journey and check blocks for cardBlockId
+  return true
+}

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/index.ts

@@ -0,0 +1 @@
+export { showLogoSection } from './showLogoSection'

apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/showLogoSection.spec.ts

@@ -0,0 +1,10 @@
+/**
+ * TODO: update these when implementing the component
+ */
+import { showLogoSection } from './showLogoSection'
+
+describe('showLogoSection', () => {
+  it('returns true (skeleton – implement when building Logo section)', () => {
+    expect(showLogoSection()).toBe(true)
+  })
+})