Investigate how we incorporate onward journeys into the navigation

src/app/legacy/components/ScrollablePromo/Promo/index.jsx

@@ -81,35 +81,67 @@
   color: ${({ theme }) => theme.isDarkUi && theme.palette.GREY_6};
 `;
 
-const Promo = ({ block, onClick }) => {
+const Promo = ({ block, variant, onClick }) => {
   const { script, service, serviceDatetimeLocale } = useContext(ServiceContext);
-  const textBlock = filterForBlockType(
-    pathOr({}, ['model', 'blocks'], block),
-    'text',
-  );
-  const aresLinkBlock = filterForBlockType(
-    pathOr({}, ['model', 'blocks'], block),
-    'aresLink',
-  );
-  const href = pathOr(
-    '',
-    ['model', 'blocks', '0', 'model', 'blocks', '0', 'model', 'locator'],
-    textBlock,
-  );
-  const title = pathOr(
-    '',
-    ['model', 'blocks', '0', 'model', 'blocks', '0', 'model', 'text'],
-    textBlock,
-  );
-  const timestamp = path(
-    ['model', 'blocks', '0', 'model', 'timestamp'],
-    aresLinkBlock,
-  );
+  let title;
+  let href;
+  let textBlock;
+  let aresLinkBlock;
+  let timestamp;
+  console.log('block in Promo:', block, 'variant', variant);
+  switch (variant) {
+    case 'A':
+      title = pathOr(
+        '',
+        [
+          'headlines',
+          'promoHeadline',
+          'blocks',
+          '0',
+          'model',
+          'blocks',
+          '0',
+          'model',
+          'text',
+        ],
+        block,
+      );
+      href = pathOr('', ['locators', 'canonicalUrl'], block);
+      break;
+    case 'B':
+      title = block.title;
+      href = block.href;
+      break;
+    default:
+      textBlock = filterForBlockType(
+        pathOr({}, ['model', 'blocks'], block),
+        'text',
+      );
+      aresLinkBlock = filterForBlockType(
+        pathOr({}, ['model', 'blocks'], block),
+        'aresLink',
+      );
+      timestamp = path(
+        ['model', 'blocks', '0', 'model', 'timestamp'],
+        aresLinkBlock,
+      );
+      href = pathOr(
+        '',
+        ['model', 'blocks', '0', 'model', 'blocks', '0', 'model', 'locator'],
+        textBlock,
+      );
+      title = pathOr(
+        '',
+        ['model', 'blocks', '0', 'model', 'blocks', '0', 'model', 'text'],
+        textBlock,
+      );
+      break;
+  }
+  console.log('title', title, 'href', href);
 
   const isOperaMini = useOperaMiniDetection();
 
   const WrapperPromoBox = isOperaMini ? OperaPromoBox : PromoBox;
-
   return (
     <WrapperPromoBox>
       <StyledLink
@@ -120,7 +152,7 @@
       >
         {title}
       </StyledLink>
-      {timestamp && (
+      {timestamp && variant === 'none' && (
         <TimeStamp serviceDatetimeLocale={serviceDatetimeLocale}>
           {timestamp}
         </TimeStamp>

src/app/legacy/components/ScrollablePromo/PromoList/index.jsx

@@ -79,10 +79,11 @@
       margin-${dir === 'ltr' ? `left` : `right`}: 0;}`}
 `;
 
-const PromoList = ({ blocks, viewTracker, onClick }) => {
+const PromoList = ({ blocks, variant, viewTracker, onClick }) => {
+  console.log('in promo list', blocks, variant);
   const { dir } = useContext(ServiceContext);
   const isOperaMini = useOperaMiniDetection();
-  const listBlocks = blocks.slice(0, 3);
+  const listBlocks = variant === 'B' ? blocks.slice(0, 5) : blocks.slice(0, 3);
 
   const ScrollPromo = isOperaMini ? OperaScrollPromo : StandardScrollPromo;
   const List = isOperaMini ? OperaStyledList : StyledList;
@@ -97,7 +98,7 @@
         return (
           // eslint-disable-next-line react/no-array-index-key
           <List key={index} dir={dir}>
-            <Promo block={block} onClick={onClick} />
+            <Promo block={block} variant={variant} onClick={onClick} />
           </List>
         );
       })}

src/app/legacy/components/ScrollablePromo/index.jsx

@@ -57,9 +57,13 @@
 `}
 `;
 
-const ScrollablePromo = ({ blocks, blockGroupIndex = null }) => {
+const ScrollablePromo = ({
+  blocks,
+  blockGroupIndex = null,
+  variant = 'none',
+}) => {
   const { script, service, dir, translations } = useContext(ServiceContext);
-
+  console.log('Blocks in scrollable promo:', blocks, blocks.type);
   const eventTrackingData = {
     componentName: `edoj${blockGroupIndex}`,
     format: 'CHD=edoj',
@@ -72,13 +76,18 @@
     return null;
   }
 
-  const title =
+  let title =
     blocks[0].type === 'title' &&
     path(
       ['0', 'model', 'blocks', '0', 'model', 'blocks', '0', 'model', 'text'],
       blocks,
     );
-
+  if (variant === 'A') {
+    title = 'Top Stories';
+  }
+  if (variant === 'B') {
+    title = 'Most Read';
+  }
   const blocksWithoutTitle = blocks[0].type === 'title' ? tail(blocks) : blocks;
 
   const isSingleItem = blocksWithoutTitle.length === 1;
@@ -98,7 +107,7 @@
           ),
         }),
   };
-
+  console.log('title in scrollable promo', title, blocks, variant);
   return (
     <GridItemMediumNoMargin {...a11yAttributes}>
       {title && (
@@ -112,11 +121,20 @@
           {title}
         </LabelComponent>
       )}
-      {isSingleItem ? (
+      {variant !== 'none' && (
+        <PromoList
+          blocks={blocks}
+          variant={variant}
+          viewTracker={viewRef}
+          onClick={handleClickTracking}
+        />
+      )}
+      {variant === 'none' && isSingleItem && (
         <PromoWrapper dir={dir} ref={viewRef}>
           <Promo block={blocksWithoutTitle[0]} onClick={handleClickTracking} />
         </PromoWrapper>
-      ) : (
+      )}
+      {variant === 'none' && !isSingleItem && (
         <PromoList
           blocks={blocksWithoutTitle}
           viewTracker={viewRef}

src/app/pages/ArticlePage/ArticlePage.tsx

@@ -117,7 +117,7 @@
   const formats = pageData?.metadata?.passport?.predicates?.formats ?? [];
 
   const recommendationsData = pageData?.recommendations ?? [];
-
+  const topStoriesContent = pageData?.secondaryColumn?.topStories;
   const isPGL = pageData?.metadata?.type === PHOTO_GALLERY_PAGE;
   const isSTY = pageData?.metadata?.type === STORY_PAGE;
   const isCPS = isPGL || isSTY;
@@ -184,7 +184,11 @@
     embedImages: EmbedImages,
     embedUploader: Uploader,
     group: gist,
-    links: (props: ComponentToRenderProps) => <ScrollablePromo {...props} />,
+    links: (props: ComponentToRenderProps) => {
+      console.log('props', props);
+
+      return <ScrollablePromo {...props} />;
+    },
     mpu: (props: ComponentToRenderProps) =>
       allowAdvertising ? <AdContainer {...props} slotType="mpu" /> : null,
     wsoj: (props: ComponentToRenderProps) => (
@@ -228,6 +232,25 @@
     showRelatedTopics && topics.length > 0 && !isTransliterated,
   );
 
+  const variantValue = 'B'; // I don't know how changing this works in real experiments
+  // so just manually switch the hardcoded variant for now while getting this working
+  const variant: 'A' | 'B' | 'none' = ['A', 'B'].includes(variantValue)
+    ? (variantValue as 'A' | 'B')
+    : 'none';
+  let dataForOJExperiment;
+  if (variant === 'A') {
+    dataForOJExperiment = topStoriesContent;
+  } else if (variant === 'B') {
+    dataForOJExperiment = mostReadInitialData.items;
+  } else {
+    dataForOJExperiment = [];
+  }
+  console.log('most read', dataForOJExperiment);
+  const newProps = {
+    blocks: dataForOJExperiment,
+    variant,
+  };
+
   return (
     <div css={styles.pageWrapper}>
       <ATIAnalytics atiData={atiData} />
@@ -272,6 +295,11 @@
       {allowAdvertising && (
         <AdContainer slotType="leaderboard" adcampaign={adcampaign} />
       )}
+      {!isPGL && !isTC2Asset && variant !== 'none' && (
+        <aside role="complementary">
+          <ScrollablePromo {...newProps} />
+        </aside>
+      )}
       <ElectionBanner aboutTags={aboutTags} taggings={taggings} />
       <div css={styles.grid}>
         <div css={!isPGL ? styles.primaryColumn : styles.pglColumn}>