Merge branch 'latest' into remove-dot-only-from-tests

src/app/lib/config/optimizely/experimentIds.js

@@ -0,0 +1,3 @@
+export default {
+  hindiRecommendations: '003_hindi_experiment',
+};

src/app/lib/config/services/russian.js

@@ -366,6 +366,10 @@ export const service = {
         title: 'Главная',
         url: '/russian',
       },
+      {
+        title: 'Украина',
+        url: '/russian/topics/cez0n29ggrdt',
+      },
       {
         title: 'Коронавирус',
         url: '/russian/in-depth-51962199',

src/app/pages/StoryPage/StoryPage.jsx

@@ -54,6 +54,8 @@ import { RequestContext } from '#contexts/RequestContext';
 import useToggle from '#hooks/useToggle';
 import RelatedTopics from '#containers/RelatedTopics';
 import NielsenAnalytics from '#containers/NielsenAnalytics';
+import useOptimizelyVariation from '#hooks/useOptimizelyVariation';
+import OPTIMIZELY_EXPERIMENT_IDS from '#lib/config/optimizely/experimentIds';
 import categoryType from './categoryMap/index';
 import cpsAssetPagePropTypes from '../../models/propTypes/cpsAssetPage';
 
@@ -71,6 +73,11 @@ const StoryPage = ({ pageData, mostReadEndpointOverride }) => {
     lang,
     showRelatedTopics,
   } = useContext(ServiceContext);
+
+  const experimentVariation = useOptimizelyVariation(
+    OPTIMIZELY_EXPERIMENT_IDS.hindiRecommendations,
+  );
+
   const { enabled: preloadLeadImageToggle } = useToggle('preloadLeadImage');
   const title = path(['promo', 'headlines', 'headline'], pageData);
   const shortHeadline = path(['promo', 'headlines', 'shortHeadline'], pageData);
@@ -204,6 +211,43 @@ const StoryPage = ({ pageData, mostReadEndpointOverride }) => {
       <Disclaimer {...props} increasePaddingOnDesktop={false} />
     ),
     podcastPromo: podcastPromoEnabled && InlinePodcastPromo,
+    experimentBlock: props => {
+      const { showForVariation, part } = props;
+      // Return 'control' variation if 'control' is returned from Optimizely or experiment is not enabled
+      if (
+        showForVariation === 'control' &&
+        (experimentVariation === 'control' || !experimentVariation)
+      ) {
+        return (
+          <CpsRecommendations
+            {...props}
+            parentColumns={gridColsMain}
+            items={recommendationsInitialData}
+          />
+        );
+      }
+
+      if (
+        showForVariation === 'variation_1' &&
+        experimentVariation === 'variation_1'
+      ) {
+        if (part === 1) {
+          return <div>Recs with 2 items, first 2 recs</div>;
+        }
+        if (part === 2) {
+          return <div>Recs with 2 items, last 2 recs</div>;
+        }
+      }
+
+      if (
+        showForVariation === 'variation_3' &&
+        experimentVariation === 'variation_3'
+      ) {
+        return <div>scrolling recs</div>;
+      }
+
+      return null;
+    },
   };
 
   const StyledTimestamp = styled(Timestamp)`

src/app/routes/cpsAsset/getInitialData/addExperimentPlaceholderBlocks/index.js

@@ -0,0 +1,110 @@
+import path from 'ramda/src/path';
+import splitAt from 'ramda/src/splitAt';
+import { STORY_PAGE } from '#app/routes/utils/pageTypes';
+import { getNthCpsParagraphIndex } from '../helpers';
+import deepClone from '../../../utils/jsonClone';
+
+const insertExperimentBlock = (experimentBlock, blocks, insertIndex) => {
+  const paragraphIndex = getNthCpsParagraphIndex(blocks, insertIndex);
+
+  if (!paragraphIndex) {
+    return blocks;
+  }
+
+  const parts = splitAt(paragraphIndex + 1, blocks);
+
+  return [...parts[0], { ...experimentBlock }, ...parts[1]];
+};
+
+const addExperimentPlaceholderBlocks = service => originalJson => {
+  const json = deepClone(originalJson);
+  const pageType = path(['metadata', 'type'], json);
+  const { allowAdvertising } = path(['metadata', 'options'], json);
+  let blocks = path(['content', 'model', 'blocks'], json);
+
+  if (pageType !== STORY_PAGE || !blocks || !allowAdvertising) {
+    return json;
+  }
+
+  /**
+   * Default recommendations for services outside of the experiment
+   */
+
+  if (service !== 'hindi') {
+    const { assetUri } = path(['metadata', 'locators'], json);
+
+    const defaultRecommendationsBlock = {
+      type: 'wsoj',
+      model: {
+        type: 'recommendations',
+        path: `/api/recommend?recSys=2&limit=4&assetUri=${assetUri}`,
+      },
+    };
+
+    json.content.model.blocks = insertExperimentBlock(
+      defaultRecommendationsBlock,
+      blocks,
+      5,
+    );
+
+    return json;
+  }
+
+  /**
+   * For the Hindi service, we need to insert the experiment blocks into the pageData
+   */
+
+  const experimentBlocks = [
+    // Control recs block
+    {
+      block: {
+        type: 'experimentBlock',
+        model: {
+          showForVariation: 'control',
+        },
+      },
+      insertIndex: 5,
+    },
+    // Split recs blocks
+    {
+      block: {
+        type: 'experimentBlock',
+        model: {
+          showForVariation: 'variation_1',
+          part: 1,
+        },
+      },
+      insertIndex: 5,
+    },
+    {
+      block: {
+        type: 'experimentBlock',
+        model: {
+          showForVariation: 'variation_1',
+          part: 2,
+        },
+      },
+      insertIndex: 10,
+    },
+    // Scrollable recs block
+    {
+      block: {
+        type: 'experimentBlock',
+        model: {
+          showForVariation: 'variation_3',
+        },
+      },
+      insertIndex: 5,
+    },
+  ];
+
+  experimentBlocks.forEach(({ block, insertIndex }) => {
+    blocks = insertExperimentBlock(block, blocks, insertIndex);
+  });
+
+  json.content.model.blocks = blocks;
+
+  return json;
+};
+
+export default addExperimentPlaceholderBlocks;