From f845285699ffe557a15b7281439e50860b5772d2 Mon Sep 17 00:00:00 2001 From: jianwei1 Date: Thu, 5 Feb 2026 03:31:57 +0000 Subject: [PATCH 1/4] feat: implement media sections for customization flow Added new components for BackgroundImageSection, BackgroundVideoSection, CardsSection, ImagesSection, LogoSection, and VideosSection, along with their respective tests. Each section is designed to render with a data-testid for testing purposes. --- .../BackgroundImageSection.spec.tsx | 10 ++++++++++ .../BackgroundImageSection.tsx | 20 +++++++++++++++++++ .../Sections/BackgroundImageSection/index.ts | 1 + .../BackgroundVideoSection.spec.tsx | 10 ++++++++++ .../BackgroundVideoSection.tsx | 20 +++++++++++++++++++ .../Sections/BackgroundVideoSection/index.ts | 1 + .../CardsSection/CardsSection.spec.tsx | 10 ++++++++++ .../Sections/CardsSection/CardsSection.tsx | 18 +++++++++++++++++ .../Sections/CardsSection/index.ts | 1 + .../ImagesSection/ImagesSection.spec.tsx | 10 ++++++++++ .../Sections/ImagesSection/ImagesSection.tsx | 18 +++++++++++++++++ .../Sections/ImagesSection/index.ts | 1 + .../Sections/LogoSection/LogoSection.spec.tsx | 10 ++++++++++ .../Sections/LogoSection/LogoSection.tsx | 20 +++++++++++++++++++ .../MediaScreen/Sections/LogoSection/index.ts | 1 + .../VideosSection/VideosSection.spec.tsx | 10 ++++++++++ .../Sections/VideosSection/VideosSection.tsx | 18 +++++++++++++++++ .../Sections/VideosSection/index.ts | 1 + 18 files changed, 180 insertions(+) create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/BackgroundImageSection.spec.tsx create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/BackgroundImageSection.tsx create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/index.ts create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/BackgroundVideoSection.spec.tsx create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/BackgroundVideoSection.tsx create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/index.ts create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.spec.tsx create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.tsx create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/index.ts create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/ImagesSection.spec.tsx create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/ImagesSection.tsx create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/index.ts create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/LogoSection.spec.tsx create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/LogoSection.tsx create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/index.ts create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/VideosSection.spec.tsx create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/VideosSection.tsx create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/index.ts diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/BackgroundImageSection.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/BackgroundImageSection.spec.tsx new file mode 100644 index 00000000000..9e7b5395d05 --- /dev/null +++ b/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() + expect(screen.getByTestId('BackgroundImageSection')).toBeInTheDocument() + }) +}) diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/BackgroundImageSection.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/BackgroundImageSection.tsx new file mode 100644 index 00000000000..fc9ba108989 --- /dev/null +++ b/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 ( + + Background Image + + ) +} diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/index.ts new file mode 100644 index 00000000000..bd636766524 --- /dev/null +++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundImageSection/index.ts @@ -0,0 +1 @@ +export { BackgroundImageSection } from './BackgroundImageSection' diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/BackgroundVideoSection.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/BackgroundVideoSection.spec.tsx new file mode 100644 index 00000000000..46a931ffaa6 --- /dev/null +++ b/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() + expect(screen.getByTestId('BackgroundVideoSection')).toBeInTheDocument() + }) +}) diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/BackgroundVideoSection.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/BackgroundVideoSection.tsx new file mode 100644 index 00000000000..470d0fafa3b --- /dev/null +++ b/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 ( + + Background Video + + ) +} diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/index.ts new file mode 100644 index 00000000000..a48ad648302 --- /dev/null +++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/BackgroundVideoSection/index.ts @@ -0,0 +1 @@ +export { BackgroundVideoSection } from './BackgroundVideoSection' diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.spec.tsx new file mode 100644 index 00000000000..44d2ee9ceda --- /dev/null +++ b/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( {}} />) + expect(screen.getByTestId('CardsSection')).toBeInTheDocument() + }) +}) diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/CardsSection.tsx new file mode 100644 index 00000000000..fcba17685da --- /dev/null +++ b/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 ( + + Cards + + ) +} diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/index.ts new file mode 100644 index 00000000000..a0f49e6ae15 --- /dev/null +++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/CardsSection/index.ts @@ -0,0 +1 @@ +export { CardsSection } from './CardsSection' diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/ImagesSection.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/ImagesSection.spec.tsx new file mode 100644 index 00000000000..817fd6002bc --- /dev/null +++ b/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() + expect(screen.getByTestId('ImagesSection')).toBeInTheDocument() + }) +}) diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/ImagesSection.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/ImagesSection.tsx new file mode 100644 index 00000000000..349f8fd7847 --- /dev/null +++ b/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 ( + + Images + + ) +} diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/index.ts new file mode 100644 index 00000000000..c7b7408bf05 --- /dev/null +++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/ImagesSection/index.ts @@ -0,0 +1 @@ +export { ImagesSection } from './ImagesSection' diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/LogoSection.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/LogoSection.spec.tsx new file mode 100644 index 00000000000..65e885ddf2e --- /dev/null +++ b/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() + expect(screen.getByTestId('LogoSection')).toBeInTheDocument() + }) +}) diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/LogoSection.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/LogoSection.tsx new file mode 100644 index 00000000000..7be6ea3a9a4 --- /dev/null +++ b/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 ( + + Logo + + ) +} diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/index.ts new file mode 100644 index 00000000000..86fddd025c6 --- /dev/null +++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/LogoSection/index.ts @@ -0,0 +1 @@ +export { LogoSection } from './LogoSection' diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/VideosSection.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/VideosSection.spec.tsx new file mode 100644 index 00000000000..f259983c3bf --- /dev/null +++ b/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() + expect(screen.getByTestId('VideosSection')).toBeInTheDocument() + }) +}) diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/VideosSection.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/VideosSection.tsx new file mode 100644 index 00000000000..89640ab2d72 --- /dev/null +++ b/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 ( + + Video + + ) +} diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/index.ts new file mode 100644 index 00000000000..0e26ffe6679 --- /dev/null +++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/VideosSection/index.ts @@ -0,0 +1 @@ +export { VideosSection } from './VideosSection' From 50980cddbaef7568ba0b8f44bbd9fd3d79893a8c Mon Sep 17 00:00:00 2001 From: jianwei1 Date: Thu, 5 Feb 2026 03:32:55 +0000 Subject: [PATCH 2/4] feat: create index file for media sections export Added an index file to streamline the export of media sections including LogoSection, CardsSection, ImagesSection, VideosSection, BackgroundImageSection, and BackgroundVideoSection for easier imports in the customization flow. --- .../MultiStepForm/Screens/MediaScreen/Sections/index.ts | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/index.ts diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/Sections/index.ts new file mode 100644 index 00000000000..ec44099eb84 --- /dev/null +++ b/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' From fd2c1a33363c33270649d47419a69c380454fcf1 Mon Sep 17 00:00:00 2001 From: jianwei1 Date: Thu, 5 Feb 2026 03:33:35 +0000 Subject: [PATCH 3/4] feat: add utility functions and tests for media sections Introduced utility functions for managing the visibility of media sections including Logo, Images, Videos, Background Image, and Background Video. Each section has corresponding tests to ensure functionality. This enhances the customization flow for media components. --- .../Screens/MediaScreen/utils/index.ts | 5 +++++ .../utils/showBackgroundImageSection/index.ts | 1 + .../showBackgroundImageSection.spec.ts | 14 ++++++++++++++ .../showBackgroundImageSection.ts | 13 +++++++++++++ .../utils/showBackgroundVideoSection/index.ts | 1 + .../showBackgroundVideoSection.spec.ts | 14 ++++++++++++++ .../showBackgroundVideoSection.ts | 13 +++++++++++++ .../MediaScreen/utils/showImagesSection/index.ts | 1 + .../showImagesSection/showImagesSection.spec.ts | 14 ++++++++++++++ .../utils/showImagesSection/showImagesSection.ts | 11 +++++++++++ .../MediaScreen/utils/showLogoSection/index.ts | 1 + .../utils/showLogoSection/showLogoSection.spec.ts | 10 ++++++++++ .../utils/showLogoSection/showLogoSection.ts | 10 ++++++++++ .../MediaScreen/utils/showVideosSection/index.ts | 1 + .../showVideosSection/showVideosSection.spec.ts | 14 ++++++++++++++ .../utils/showVideosSection/showVideosSection.ts | 11 +++++++++++ 16 files changed, 134 insertions(+) create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/index.ts create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/index.ts create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/showBackgroundImageSection.spec.ts create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/showBackgroundImageSection.ts create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/index.ts create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/showBackgroundVideoSection.spec.ts create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/showBackgroundVideoSection.ts create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/index.ts create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/showImagesSection.spec.ts create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/showImagesSection.ts create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/index.ts create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/showLogoSection.spec.ts create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/showLogoSection.ts create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showVideosSection/index.ts create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showVideosSection/showVideosSection.spec.ts create mode 100644 apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showVideosSection/showVideosSection.ts diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/index.ts new file mode 100644 index 00000000000..ad7a49350bb --- /dev/null +++ b/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' diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/index.ts new file mode 100644 index 00000000000..2ae104b0547 --- /dev/null +++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/index.ts @@ -0,0 +1 @@ +export { showBackgroundImageSection } from './showBackgroundImageSection' diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/showBackgroundImageSection.spec.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/showBackgroundImageSection.spec.ts new file mode 100644 index 00000000000..71391f616a1 --- /dev/null +++ b/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) + }) +}) diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/showBackgroundImageSection.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundImageSection/showBackgroundImageSection.ts new file mode 100644 index 00000000000..b5738718669 --- /dev/null +++ b/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 +} diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/index.ts new file mode 100644 index 00000000000..8a60330264b --- /dev/null +++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/index.ts @@ -0,0 +1 @@ +export { showBackgroundVideoSection } from './showBackgroundVideoSection' diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/showBackgroundVideoSection.spec.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/showBackgroundVideoSection.spec.ts new file mode 100644 index 00000000000..f09068b5ed8 --- /dev/null +++ b/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) + }) +}) diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/showBackgroundVideoSection.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showBackgroundVideoSection/showBackgroundVideoSection.ts new file mode 100644 index 00000000000..80e60997c44 --- /dev/null +++ b/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 +} diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/index.ts new file mode 100644 index 00000000000..7d88103892a --- /dev/null +++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/index.ts @@ -0,0 +1 @@ +export { showImagesSection } from './showImagesSection' diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/showImagesSection.spec.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/showImagesSection.spec.ts new file mode 100644 index 00000000000..2e1d6ca6914 --- /dev/null +++ b/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) + }) +}) diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/showImagesSection.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showImagesSection/showImagesSection.ts new file mode 100644 index 00000000000..4b99d9be61b --- /dev/null +++ b/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 +} diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/index.ts new file mode 100644 index 00000000000..4cd89a095a1 --- /dev/null +++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/index.ts @@ -0,0 +1 @@ +export { showLogoSection } from './showLogoSection' diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/showLogoSection.spec.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/showLogoSection.spec.ts new file mode 100644 index 00000000000..0324d8c47bd --- /dev/null +++ b/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) + }) +}) diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/showLogoSection.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/showLogoSection.ts new file mode 100644 index 00000000000..3b263c79b07 --- /dev/null +++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showLogoSection/showLogoSection.ts @@ -0,0 +1,10 @@ +/** + * Shows the logo section on the media screen. + * Logo is journey-level; when implementing, check journey.logoImageBlock?.customizable. + * + * @returns true if the logo section should be shown, false otherwise + */ +export function showLogoSection(): boolean { + // TODO: implement when building Logo section – pass journey and check journey.logoImageBlock?.customizable + return true +} diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showVideosSection/index.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showVideosSection/index.ts new file mode 100644 index 00000000000..3cb9a082aef --- /dev/null +++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showVideosSection/index.ts @@ -0,0 +1 @@ +export { showVideosSection } from './showVideosSection' diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showVideosSection/showVideosSection.spec.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showVideosSection/showVideosSection.spec.ts new file mode 100644 index 00000000000..aa39263105a --- /dev/null +++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showVideosSection/showVideosSection.spec.ts @@ -0,0 +1,14 @@ +/** + * TODO: update these when implementing the component + */ +import { showVideosSection } from './showVideosSection' + +describe('showVideosSection', () => { + it('returns true when cardBlockId is null (skeleton)', () => { + expect(showVideosSection(null)).toBe(true) + }) + + it('returns true when cardBlockId is set (skeleton)', () => { + expect(showVideosSection('card-1')).toBe(true) + }) +}) diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showVideosSection/showVideosSection.ts b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showVideosSection/showVideosSection.ts new file mode 100644 index 00000000000..a0a12dd0242 --- /dev/null +++ b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/utils/showVideosSection/showVideosSection.ts @@ -0,0 +1,11 @@ +/** + * Shows the videos section on the media screen. + * When implementing, check if the selected card has customizable video blocks. + * + * @param cardBlockId - the id of the selected card block + * @returns true if the videos section should be shown, false otherwise + */ +export function showVideosSection(cardBlockId: string | null): boolean { + // TODO: implement when building Videos section – pass journey and check blocks for cardBlockId + return true +} From e4e7e3eace60030025d45b2223933c792d8372bb Mon Sep 17 00:00:00 2001 From: jianwei1 Date: Thu, 5 Feb 2026 03:33:43 +0000 Subject: [PATCH 4/4] feat: enhance MediaScreen with dynamic section rendering Updated the MediaScreen component to conditionally render media sections (Logo, Images, Videos, Background Image, and Background Video) based on utility functions. Added a test to verify the presence of these sections when the screen is displayed, improving the customization flow for media components. --- .../Screens/MediaScreen/MediaScreen.spec.tsx | 11 ++++++ .../Screens/MediaScreen/MediaScreen.tsx | 39 ++++++++++++++++++- 2 files changed, 49 insertions(+), 1 deletion(-) diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.spec.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.spec.tsx index fd9cf4868a1..49b1a005810 100644 --- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.spec.tsx +++ b/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() + }) }) diff --git a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx b/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx index f7e73115abd..e0157d23913 100644 --- a/apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx +++ b/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( + null + ) + const showLogo = showLogoSection() + const showImages = showImagesSection(selectedCardBlockId) + const showVideos = showVideosSection(selectedCardBlockId) + const showBackgroundImage = + showBackgroundImageSection(selectedCardBlockId) + const showBackgroundVideo = + showBackgroundVideoSection(selectedCardBlockId) return ( @@ -20,6 +47,16 @@ export function MediaScreen({ handleNext }: MediaScreenProps): ReactElement { > {t('Media')} + {showLogo && } + {} + {showImages && } + {showVideos && } + {showBackgroundImage && ( + + )} + {showBackgroundVideo && ( + + )}