Wsteama 1522 header investigation incorporating ojs into nav

src/app/components/PageLayoutWrapper/index.tsx

@@ -8,6 +8,7 @@ import pathOr from 'ramda/src/pathOr';
 
 import GlobalStyles from '#psammead/psammead-styles/src/global-styles';
 import { PageTypes } from '#app/models/types/global';
+// import useOptimizelyVariation from '#app/hooks/useOptimizelyVariation';
 import WebVitals from '../../legacy/containers/WebVitals';
 import HeaderContainer from '../../legacy/containers/Header';
 import FooterContainer from '../../legacy/containers/Footer';
@@ -34,15 +35,11 @@ type Props = {
   pageData: {
     metadata: {
       type: PageTypes;
-      topics?: [
-        {
-          topicName: string;
-        },
-      ];
-    };
-    content?: {
-      model?: ModelType;
+      topics?: { topicName: string }[];
     };
+    content?: { model?: ModelType };
+    secondaryColumn?: { topStories: any[] };
+    mostRead?: { items: any[] };
   };
   status: number;
 };
@@ -56,7 +53,32 @@ const PageLayoutWrapper = ({
 }: PropsWithChildren<Props>) => {
   const { service } = useContext(ServiceContext);
   const { isLite, isAmp } = useContext(RequestContext);
+  const topStories = pageData.secondaryColumn?.topStories;
+  const mostReadItems = pageData.mostRead?.items;
+
+  // const scrollableOJExperimentVariation = useOptimizelyVariation(
+  //   'oj_scroll',
+  // ) as unknown as string;
+  const variantValue = 'A'; // We would get this value from useOptimizelyVariation (as commented out above)
+  // so just manually switch the hardcoded variant for now while getting this working
+  const experimentVariant: 'A' | 'B' | 'none' = ['A', 'B'].includes(
+    variantValue,
+  )
+    ? (variantValue as 'A' | 'B')
+    : 'none';
+  let dataForOJExperiment;
+  if (experimentVariant === 'A') {
+    dataForOJExperiment = topStories;
+  } else if (experimentVariant === 'B' && mostReadItems) {
+    dataForOJExperiment = mostReadItems;
+  }
+
+  const propsForOJExperiment = {
+    blocks: dataForOJExperiment || [],
+    experimentVariant,
+  };
 
+  console.log('mostReadItems', mostReadItems, 'topStories', topStories);
   const scriptSwitchId = pathOr('', ['scriptSwitchId'], pageData);
   const renderScriptSwitch = pathOr(true, ['renderScriptSwitch'], pageData);
 
@@ -209,6 +231,7 @@ const PageLayoutWrapper = ({
         <HeaderContainer
           scriptSwitchId={scriptSwitchId}
           renderScriptSwitch={renderScriptSwitch}
+          propsForOJExperiment={propsForOJExperiment}
         />
         <div css={styles.content}>{children}</div>
         <FooterContainer />

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

@@ -81,35 +81,66 @@ const TimeStamp = styled(PromoTimestamp)`
   color: ${({ theme }) => theme.isDarkUi && theme.palette.GREY_6};
 `;
 
-const Promo = ({ block, onClick }) => {
+const Promo = ({ block, experimentVariant, 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;
+  switch (experimentVariant) {
+    case 'A':
+      title = pathOr(
+        block.headline || '',
+        [
+          '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, 'timestamp', timestamp);
 
   const isOperaMini = useOperaMiniDetection();
 
   const WrapperPromoBox = isOperaMini ? OperaPromoBox : PromoBox;
-
   return (
     <WrapperPromoBox>
       <StyledLink
@@ -120,7 +151,7 @@ const Promo = ({ block, onClick }) => {
       >
         {title}
       </StyledLink>
-      {timestamp && (
+      {timestamp && !experimentVariant && (
         <TimeStamp serviceDatetimeLocale={serviceDatetimeLocale}>
           {timestamp}
         </TimeStamp>

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

@@ -15,6 +15,7 @@ import Promo from '../Promo';
 
 const StandardScrollPromo = styled.ul`
   list-style: none;
+  border: 1px solid red;
   ${({ dir }) => `padding-${dir === 'ltr' ? 'left' : 'right'}: 0;`}
   margin: 0;
   display: flex;
@@ -40,6 +41,7 @@ const OperaScrollPromo = styled.ul`
 const StyledList = styled.li`
   display: flex;
   flex-shrink: 0;
+  border: 1px, solid, red;
 
   ${({ dir }) =>
     `
@@ -79,10 +81,12 @@ const OperaStyledList = styled.li`
       margin-${dir === 'ltr' ? `left` : `right`}: 0;}`}
 `;
 
-const PromoList = ({ blocks, viewTracker, onClick }) => {
+const PromoList = ({ blocks, experimentVariant, viewTracker, onClick }) => {
+  console.log('in promo list', blocks, experimentVariant);
   const { dir } = useContext(ServiceContext);
   const isOperaMini = useOperaMiniDetection();
-  const listBlocks = blocks.slice(0, 3);
+  const listBlocks =
+    experimentVariant === 'B' ? blocks.slice(0, 5) : blocks.slice(0, 3);
 
   const ScrollPromo = isOperaMini ? OperaScrollPromo : StandardScrollPromo;
   const List = isOperaMini ? OperaStyledList : StyledList;
@@ -97,7 +101,11 @@ const PromoList = ({ blocks, viewTracker, onClick }) => {
         return (
           // eslint-disable-next-line react/no-array-index-key
           <List key={index} dir={dir}>
-            <Promo block={block} onClick={onClick} />
+            <Promo
+              block={block}
+              experimentVariant={experimentVariant}
+              onClick={onClick}
+            />
           </List>
         );
       })}