feat: add media screen to flow

[edmonday]

Summary by CodeRabbit

• New Features

  • Introduced a new Media customization step in the journey template customization flow, positioned between Links and Social.
  • Users can now customize media blocks including images and videos within their journeys.

• Tests

  • Added test coverage for the new Media customization screen and media utility functions.

[linear]

NES-1286 Add media screen to flow

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

• 🔍 Trigger a full review

Walkthrough

Adds a new MediaScreen component to the journey customization multi-step form. Includes a utility function to identify customizable media blocks, integrates the screen into the form routing, and updates GraphQL queries to fetch the customizable field. Provides full test coverage for new components and utilities.

Changes

Cohort / File(s)	Summary
MediaScreen Component apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.tsx, apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/MediaScreen.spec.tsx, apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/MediaScreen/index.ts	New React component rendering a centered Media heading and Next button with callback support; includes unit tests verifying rendering and button interaction.
Media Utility apps/journeys-admin/src/components/TemplateCustomization/utils/getJourneyMedia/getJourneyMedia.tsx, apps/journeys-admin/src/components/TemplateCustomization/utils/getJourneyMedia/getJourneyMedia.spec.tsx, apps/journeys-admin/src/components/TemplateCustomization/utils/getJourneyMedia/index.ts	New utility function extracting customizable media blocks (ImageBlock, VideoBlock) from journey; includes comprehensive test suite covering edge cases.
MultiStepForm Integration apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx, apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/index.ts	Added media screen case to renderScreen switch statement; exports MediaScreen from Screens module.
Form Flow Configuration apps/journeys-admin/src/components/TemplateCustomization/utils/getCustomizeFlowConfig/getCustomizeFlowConfig.ts, apps/journeys-admin/src/components/TemplateCustomization/utils/getCustomizeFlowConfig/getCustomizeFlowConfig.spec.ts	Updated CustomizationScreen union and CustomizeFlowConfig interface to include media; added logic to inject media screen between links and social screens when customizable media exists.
Test Updates apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.spec.tsx	Added MediaScreen mock and ImageBlock test data; adjusted test flow to verify media screen rendering and navigation sequence.
GraphQL Queries libs/journeys/ui/src/components/Image/imageFields.ts, libs/journeys/ui/src/components/Video/videoFields.ts	Added customizable field to ImageBlock and VideoBlock GraphQL fragments.
Localization libs/locales/en/apps-journeys-admin.json	Added Media translation key.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• feat: customize page set up #7374: Extends MultiStepForm and Screens architecture that this PR builds upon by adding the new MediaScreen integration.
• feat: add customize toggle on editor for video/image blocks #8667: Both PRs modify block data surfaces by adding/using the customizable field on ImageBlock and VideoBlock.
• fix: unify customization flow next step button styling #7789: Introduces CustomizeFlowNextButton component utilized in the new MediaScreen implementation.

Suggested reviewers

• jianwei1
• Kneesal
• tataihono

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: add media screen to flow' directly and clearly summarizes the main change: introducing a new media screen component into the multi-step form flow.
Linked Issues check	✅ Passed	All requirements from NES-1286 are met: new media screen created and rendered, stepper integration completed, customizable image/video blocks queried via getJourneyMedia, and media screen added to flow.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to implementing the media screen feature; no unrelated modifications detected beyond the feature's requirements.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch edmondshen/nes-1286-add-media-screen-to-flow

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 061c17b

Command	Status	Duration	Result
nx run journeys-e2e:e2e	✅ Succeeded	24s	View ↗
nx run player-e2e:e2e	✅ Succeeded	3s	View ↗
nx run journeys-admin-e2e:e2e	✅ Succeeded	32s	View ↗
nx run resources-e2e:e2e	✅ Succeeded	14s	View ↗
nx run watch-e2e:e2e	✅ Succeeded	17s	View ↗
nx run watch-modern-e2e:e2e	✅ Succeeded	3s	View ↗
nx run videos-admin-e2e:e2e	✅ Succeeded	4s	View ↗
nx run-many --target=vercel-alias --projects=jo...	✅ Succeeded	2s	View ↗
Additional runs (20)	✅ Succeeded	...	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-02-04 01:13:33 UTC

[nx-cloud]

View your CI Pipeline Execution ↗ for commit f974999

Command	Status	Duration	Result
nx run-many --target=deploy --projects=watch-mo...	✅ Succeeded	25s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-02-03 23:05:33 UTC

[github-actions]

The latest updates on your projects.

Name	Status	Preview	Updated (UTC)
watch-modern	✅ Ready	watch-modern preview	Wed Feb 4 14:06:59 NZDT 2026