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

src/app/pages/ArticlePage/ArticlePage.styles.ts

@@ -215,4 +215,10 @@ export default {
         padding: 0,
       },
     }),
+  mobileOJContainer: ({ mq }: Theme) =>
+    css({
+      [mq.GROUP_4_MIN_WIDTH]: {
+        display: 'none',
+      },
+    }),
 };

src/app/pages/ArticlePage/ArticlePage.tsx

@@ -1,4 +1,4 @@
-import { use, useState } from 'react';
+import { Fragment, ReactNode, use, useState } from 'react';
 import { useTheme } from '@emotion/react';
 import useToggle from '#hooks/useToggle';
 import useOptimizelyVariation, {
@@ -60,6 +60,7 @@ import ContinueReadingButton, {
 } from '#app/components/ContinueReadingButton';
 import SaveArticleButton from '#app/components/SaveArticleButton';
 import isLive from '#lib/utilities/isLive';
+import FeaturesAnalysis from '#containers/CpsFeaturesAnalysis';
 import ElectionBanner from './ElectionBanner';
 import ImageWithCaption from '../../components/ImageWithCaption';
 import AdContainer from '../../components/Ad';
@@ -83,6 +84,9 @@ import RelatedContentSection from '../../components/RelatedContentSection';
 import TopicDiscovery from '../../components/TopicDiscovery';
 import Disclaimer from '../../components/Disclaimer';
 import SecondaryColumn from './SecondaryColumn';
+import TopStoriesSection from './PagePromoSections/TopStoriesSection';
+import useMobileReferrerOrder from './useMobileReferrerOrder';
+import { OJComponentKey } from './mobileReferrerComponentOrder';
 import styles from './ArticlePage.styles';
 import { ComponentToRenderProps, TimeStampProps } from './types';
 import ArticleHeadline from './ArticleHeadline';
@@ -447,6 +451,100 @@ const ArticlePage = ({
   const shouldRenderPWAPromotionalBanner =
     !isTopBarOJsEnabled || !pageData?.secondaryColumn?.topStories?.length;
 
+  const mobileOJOrder = useMobileReferrerOrder();
+
+  const topStoriesContent = pageData?.secondaryColumn?.topStories;
+  const featuresContent = pageData?.secondaryColumn?.features;
+
+  const getTopicDiscoverySlot = () => {
+    if (showTopicDiscovery) {
+      return (
+        <TopicDiscovery
+          css={[
+            ...(showContinueReadingButton
+              ? [!showAllContent && styles.hideTopicDiscovery]
+              : []),
+          ]}
+          topics={topics}
+          experimentProps={topicDiscoveryExperimentProps || undefined}
+        />
+      );
+    }
+    if (showRelatedTopicsComponent) {
+      return (
+        <RelatedTopics
+          css={[
+            styles.relatedTopics,
+            ...(showContinueReadingButton
+              ? [!showAllContent && styles.hideRelatedTopics]
+              : []),
+          ]}
+          topics={topics}
+          mobileDivider={false}
+          experimentProps={topicDiscoveryExperimentProps || undefined}
+        />
+      );
+    }
+    return null;
+  };
+
+  const topicDiscoverySlot = getTopicDiscoverySlot();
+
+  const mobileOJComponents: Record<OJComponentKey, ReactNode> = {
+    mostRead:
+      !isApp && !isPGL ? (
+        <MostRead
+          css={styles.mostReadSection}
+          data={mostReadInitialData}
+          columnLayout="twoColumn"
+          size="default"
+          headingBackgroundColour={GREY_2}
+          mobileDivider={showRelatedTopicsComponent}
+          experimentProps={topicDiscoveryExperimentProps || undefined}
+        />
+      ) : null,
+    topicDiscovery: topicDiscoverySlot,
+    relatedContent: (
+      <RelatedContentSection
+        content={blocks}
+        experimentProps={topicDiscoveryExperimentProps || undefined}
+      />
+    ),
+    pvCarousel: showPortraitVideoCarousel ? (
+      <PortraitVideoCarousel
+        {...portraitVideoCarouselProps}
+        css={styles.portraitVideoCarousel}
+      />
+    ) : null,
+    topStories:
+      !isApp && !isPGL && topStoriesContent ? (
+        <div
+          css={styles.topStoriesSection}
+          data-testid="top-stories"
+          data-experiment-position="secondaryColumn"
+        >
+          <TopStoriesSection
+            content={topStoriesContent}
+            experimentProps={topicDiscoveryExperimentProps || undefined}
+          />
+        </div>
+      ) : null,
+    featuredArticles:
+      !isApp && !isPGL && featuresContent ? (
+        <div css={styles.featuresSection} data-testid="features">
+          <FeaturesAnalysis
+            content={featuresContent}
+            parentColumns={{}}
+            sectionLabelBackground={GREY_2}
+            experimentProps={topicDiscoveryExperimentProps || undefined}
+          />
+        </div>
+      ) : null,
+    locationBasedOJ: showCountryCuration ? (
+      <LocationBasedTopicOJ pageData={pageData} />
+    ) : null,
+  };
+
   return (
     <div css={styles.pageWrapper}>
       {/* EXPERIMENT: PWA Promotional Banner */}
@@ -506,7 +604,7 @@ const ArticlePage = ({
           </main>
           <OptimizelyPageMetrics trackPageView trackPageDepth trackVisit />
           {/* EXPERIMENT: Topic Discovery */}
-          {showTopicDiscovery && (
+          {!mobileOJOrder && showTopicDiscovery && (
             <TopicDiscovery
               css={[
                 ...(showContinueReadingButton
@@ -517,7 +615,7 @@ const ArticlePage = ({
               experimentProps={topicDiscoveryExperimentProps || undefined}
             />
           )}
-          {showRelatedTopicsComponent && (
+          {!mobileOJOrder && showRelatedTopicsComponent && (
             <RelatedTopics
               css={[
                 styles.relatedTopics,
@@ -530,17 +628,21 @@ const ArticlePage = ({
               experimentProps={topicDiscoveryExperimentProps || undefined}
             />
           )}
-          {showPortraitVideoCarousel && (
+          {!mobileOJOrder && showPortraitVideoCarousel && (
             <PortraitVideoCarousel
               {...portraitVideoCarouselProps}
               css={styles.portraitVideoCarousel}
             />
           )}
-          {showCountryCuration && <LocationBasedTopicOJ pageData={pageData} />}
-          <RelatedContentSection
-            content={blocks}
-            experimentProps={topicDiscoveryExperimentProps || undefined}
-          />
+          {!mobileOJOrder && showCountryCuration && (
+            <LocationBasedTopicOJ pageData={pageData} />
+          )}
+          {!mobileOJOrder && (
+            <RelatedContentSection
+              content={blocks}
+              experimentProps={topicDiscoveryExperimentProps || undefined}
+            />
+          )}
           {showMediaCuration && (
             <div css={styles.mediaCurationRow}>
               <div data-testid="media-curation">
@@ -561,15 +663,26 @@ const ArticlePage = ({
           )}
         </div>
 
-        {!isApp && !isPGL && (
+        {!isApp && !isPGL && !mobileOJOrder && (
           <SecondaryColumn
             pageData={pageData}
             experimentProps={topicDiscoveryExperimentProps || undefined}
           />
         )}
       </div>
 
-      {!isApp && !isPGL && (
+      {mobileOJOrder && (
+        <div
+          css={styles.mobileOJContainer}
+          style={{ display: mobileOJOrder ? 'block' : 'none' }}
+        >
+          {mobileOJOrder.map(key => (
+            <Fragment key={key}>{mobileOJComponents[key]}</Fragment>
+          ))}
+        </div>
+      )}
+
+      {!isApp && !isPGL && !mobileOJOrder && (
         <MostRead
           css={styles.mostReadSection}
           data={mostReadInitialData}

src/app/pages/ArticlePage/mobileReferrerComponentOrder.ts

@@ -0,0 +1,40 @@
+export type OJComponentKey =
+  | 'mostRead'
+  | 'topicDiscovery'
+  | 'relatedContent'
+  | 'pvCarousel'
+  | 'topStories'
+  | 'featuredArticles'
+  | 'locationBasedOJ';
+
+export type ReferrerType = 'direct' | 'search' | 'social';
+
+export const MOBILE_COMPONENT_ORDER: Record<ReferrerType, OJComponentKey[]> = {
+  direct: [
+    'mostRead',
+    'topicDiscovery',
+    'relatedContent',
+    'pvCarousel',
+    'featuredArticles',
+    'topStories',
+    'locationBasedOJ',
+  ],
+  search: [
+    'relatedContent',
+    'topicDiscovery',
+    'mostRead',
+    'pvCarousel',
+    'topStories',
+    'featuredArticles',
+    'locationBasedOJ',
+  ],
+  social: [
+    'mostRead',
+    'topicDiscovery',
+    'topStories',
+    'featuredArticles',
+    'relatedContent',
+    'locationBasedOJ',
+    'pvCarousel',
+  ],
+};