WS-2635 [SPIKE] Understand technical approach for switching onward journey layouts by referrer on article pages

[LilyL0u]

Resolves JIRA: https://bbc.atlassian.net/browse/WS-2635

Implements reordering of OJ components based on user referrer type, only on mobile (as this will be difficult on desktop with the secondary column). Desktop layout stays how it was before. There is a centralised config which is used to store the order we want for each referrer. This can easily be changed when we want so is good for flexibility.

Config-Driven Architecture:

• Centralized component ordering per referrer type in mobileReferrerComponentOrder.ts
• React hook (useMobileReferrerOrder) that detects mobile via media query and reads referrer
• ArticlePage integration with conditional rendering and responsive styling

mobileReferrerComponentOrder.ts — Centralised config

Defines three referrer types: 'direct', 'search', 'social'
Maps each to a component order (7 reorderable components)

useMobileReferrerOrder.ts — React hook

SSR-safe (checks onClient() before accessing window)
Detects mobile via window.matchMedia((max-width: 62.9375rem))
Reads referrer with fallback to 'direct'
Supports debug mode via ?debugReferrer=search URL param for manual testing
Returns OJComponentKey[] on mobile, null on desktop

[ArticlePage.tsx]

Imports hook and component order type
Calls useMobileReferrerOrder() to get mobile order (or null on desktop)
Creates component map: mobileOJComponents with all 7 reorderable OJ components
Desktop rendering: {!mobileOJOrder && ...} gates show original components in original positions
Mobile rendering: {mobileOJOrder && ...} renders reordered components in referrer-specific order
Uses Fragment in map loop to avoid wrapper divs (mobile performance)

[ArticlePage.styles.ts]

Adds mobileOJContainer style with display: 'none' on desktop (GROUP_4_MIN_WIDTH)

Direct | mostRead → topicDiscovery → relatedContent → pvCarousel → featuredArticles → topStories → locationBasedOJ

Search | relatedContent → topicDiscovery → mostRead → pvCarousel → topStories → featuredArticles → locationBasedOJ

Social | mostRead → topicDiscovery → topStories → featuredArticles → relatedContent → locationBasedOJ → pvCarousel

This order can be changed. It was based off the document https://www.dropbox.com/scl/fi/w9oy1xb27cmlv437910ki/Experiment-Brief-v2-reorder-OJs-based-on-referrer.paper?rlkey=rf0brkjaa846lwal7d79stetr&dl=0 with a few assumptions, but the specifics don't matter for the spike.

No-CSS Fallback:
Inline style display: mobileOJOrder ? 'block' : 'none' ensures correct visibility even if CSS fails to load, while Emotion CSS handles media query logic in normal operation.

No-JavaScript Fallback:
Hook's onClient() check prevents errors on server. Returns null, triggering desktop layout rendering.

Manual Testing
Use the debug URL parameter to test different referrer orders without visiting from actual search/social:

e.g http://localhost:7081/mundo/articles/c0myz4m74lwo?renderer_env=live&debugReferrer=social

Omit the param or visit normally to use actual referrer.

Summary

A very high-level summary of easily-reproducible changes that can be understood by non-devs, and why these changes where made.

Code changes

• List key code changes that have been made.

Testing

1. List the steps required to test this PR.

Useful Links

• Coding Standards
• Repository use guidelines
• Add Links to useful resources related to this PR if applicable.