From bc34ea3eb44e76b01f16425130002a2e5762ff2a Mon Sep 17 00:00:00 2001
From: Harvey Peachey <harveypeachey@hotmail.co.uk>
Date: Mon, 21 Oct 2024 10:46:41 +0100
Subject: [PATCH] Revert "[NASAA-203/204] - Create AmpExperiment component, add
 top stories experiment to PS articles"

---
 .../components/AmpExperiment/index.test.tsx   |  86 -------------
 src/app/components/AmpExperiment/index.tsx    |  50 --------
 src/app/components/AmpExperiment/types.d.ts   |   7 --
 .../pages/ArticlePage/ArticlePage.styles.ts   |  20 +--
 src/app/pages/ArticlePage/ArticlePage.tsx     |  33 +----
 src/app/pages/ArticlePage/SecondaryColumn.tsx |   7 +-
 .../experimentTopStories/helpers.test.tsx     | 109 ----------------
 .../experimentTopStories/helpers.tsx          | 116 ------------------
 .../experimentTopStories/index.styles.ts      |  15 ---
 src/app/pages/ArticlePage/index.test.tsx      |  72 -----------
 10 files changed, 12 insertions(+), 503 deletions(-)
 delete mode 100644 src/app/components/AmpExperiment/index.test.tsx
 delete mode 100644 src/app/components/AmpExperiment/index.tsx
 delete mode 100644 src/app/components/AmpExperiment/types.d.ts
 delete mode 100644 src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
 delete mode 100644 src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
 delete mode 100644 src/app/pages/ArticlePage/experimentTopStories/index.styles.ts

diff --git a/src/app/components/AmpExperiment/index.test.tsx b/src/app/components/AmpExperiment/index.test.tsx
deleted file mode 100644
index bd54ba91ec0..00000000000
--- a/src/app/components/AmpExperiment/index.test.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from 'react';
-import { render, waitFor } from '../react-testing-library-with-providers';
-import AmpExperiment from './index';
-
-const experimentConfig = {
-  someExperiment: {
-    variants: {
-      control: 33,
-      variant_1: 33,
-      variant_2: 33,
-    },
-  },
-};
-
-const multipleExperimentConfig = {
-  aExperiment: {
-    variants: {
-      control: 33,
-      variant_1: 33,
-      variant_2: 33,
-    },
-  },
-  bExperiment: {
-    variants: {
-      control: 33,
-      variant_1: 33,
-      variant_2: 33,
-    },
-  },
-};
-
-describe('Amp experiment container on Amp pages', () => {
-  it('should render an amp-experiment with the expected config', async () => {
-    const { container } = render(
-      <AmpExperiment experimentConfig={experimentConfig} />,
-    );
-    expect(container.querySelector('amp-experiment')).toBeInTheDocument();
-    expect(container).toMatchInlineSnapshot(`
-    <div>
-      <amp-experiment>
-        <script
-          type="application/json"
-        >
-          {"someExperiment":{"variants":{"control":33,"variant_1":33,"variant_2":33}}}
-        </script>
-      </amp-experiment>
-    </div>
-    `);
-  });
-
-  it('should render an amp-experiment with the expected config when multiple experiments are running at the same time', async () => {
-    const { container } = render(
-      <AmpExperiment experimentConfig={multipleExperimentConfig} />,
-    );
-    expect(container.querySelector('amp-experiment')).toBeInTheDocument();
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        <amp-experiment>
-          <script
-            type="application/json"
-          >
-            {"aExperiment":{"variants":{"control":33,"variant_1":33,"variant_2":33}},"bExperiment":{"variants":{"control":33,"variant_1":33,"variant_2":33}}}
-          </script>
-        </amp-experiment>
-      </div>
-    `);
-  });
-
-  it(`should add amp-experiment extension script to page head`, async () => {
-    render(<AmpExperiment experimentConfig={experimentConfig} />);
-
-    await waitFor(() => {
-      const scripts = Array.from(document.querySelectorAll('head script'));
-
-      expect(scripts).toEqual(
-        expect.arrayContaining([
-          expect.objectContaining({
-            src: `https://cdn.ampproject.org/v0/amp-experiment-0.1.js`,
-          }),
-        ]),
-      );
-
-      expect(scripts).toHaveLength(1);
-    });
-  });
-});
diff --git a/src/app/components/AmpExperiment/index.tsx b/src/app/components/AmpExperiment/index.tsx
deleted file mode 100644
index 54e7d615c95..00000000000
--- a/src/app/components/AmpExperiment/index.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-/** @jsx jsx */
-/* @jsxFrag React.Fragment */
-import { jsx } from '@emotion/react';
-import React from 'react';
-import { Helmet } from 'react-helmet';
-
-type Variant = string;
-type Experiment = string;
-type TrafficAllocationPercentage = number;
-
-type AmpExperimentConfig = {
-  [key: Experiment]: {
-    sticky?: boolean;
-    consentNotificationId?: string;
-    variants: {
-      [key: Variant]: TrafficAllocationPercentage;
-    };
-  };
-};
-
-type AmpExperimentProps = {
-  [key: Experiment]: AmpExperimentConfig;
-};
-
-const AmpHead = () => (
-  <Helmet>
-    <script
-      async
-      custom-element="amp-experiment"
-      src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"
-    />
-  </Helmet>
-);
-
-const AmpExperiment = ({ experimentConfig }: AmpExperimentProps) => {
-  return (
-    <>
-      <AmpHead />
-      <amp-experiment>
-        <script
-          type="application/json"
-          /* eslint-disable-next-line react/no-danger */
-          dangerouslySetInnerHTML={{ __html: JSON.stringify(experimentConfig) }}
-        />
-      </amp-experiment>
-    </>
-  );
-};
-
-export default AmpExperiment;
diff --git a/src/app/components/AmpExperiment/types.d.ts b/src/app/components/AmpExperiment/types.d.ts
deleted file mode 100644
index 53aa9b97cb2..00000000000
--- a/src/app/components/AmpExperiment/types.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-declare namespace JSX {
-  interface IntrinsicElements {
-    'amp-experiment': React.PropsWithChildren<
-      ScriptHTMLAttributes<HTMLScriptElement>
-    >;
-  }
-}
diff --git a/src/app/pages/ArticlePage/ArticlePage.styles.ts b/src/app/pages/ArticlePage/ArticlePage.styles.ts
index e45f39540e9..d1ef396298b 100644
--- a/src/app/pages/ArticlePage/ArticlePage.styles.ts
+++ b/src/app/pages/ArticlePage/ArticlePage.styles.ts
@@ -81,30 +81,14 @@ export default {
         paddingBottom: `${spacings.QUADRUPLE}rem`,
       },
     }),
-  featuresSection: ({ spacings, mq }: Theme) =>
-    css({
-      marginBottom: `${spacings.TRIPLE}rem`,
 
-      [mq.GROUP_4_MIN_WIDTH]: {
-        marginBottom: `${spacings.FULL}rem`,
-        padding: `${spacings.DOUBLE}rem`,
-      },
-    }),
-  topStoriesSection: ({ spacings, mq }: Theme) =>
+  topStoriesAndFeaturesSection: ({ spacings, mq }: Theme) =>
     css({
       marginBottom: `${spacings.TRIPLE}rem`,
+
       [mq.GROUP_4_MIN_WIDTH]: {
-        display: 'block',
         marginBottom: `${spacings.FULL}rem`,
         padding: `${spacings.DOUBLE}rem`,
       },
-      '[amp-x-topStoriesExperiment="show_at_halfway"] &': {
-        display: 'none',
-        [mq.GROUP_4_MIN_WIDTH]: {
-          display: 'block',
-          marginBottom: `${spacings.FULL}rem`,
-          padding: `${spacings.DOUBLE}rem`,
-        },
-      },
     }),
 };
diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx
index 334e7ce8d8f..7e1b6f51308 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -59,26 +59,20 @@ import {
 import { ServiceContext } from '../../contexts/ServiceContext';
 import RelatedContentSection from '../../components/RelatedContentSection';
 import Disclaimer from '../../components/Disclaimer';
+
 import SecondaryColumn from './SecondaryColumn';
+
 import styles from './ArticlePage.styles';
 import { ComponentToRenderProps, TimeStampProps } from './types';
-import AmpExperiment from '../../components/AmpExperiment';
-import {
-  experimentTopStoriesConfig,
-  getExperimentTopStories,
-  ExperimentTopStories,
-} from './experimentTopStories/helpers';
 
 const ArticlePage = ({ pageData }: { pageData: Article }) => {
-  const { isApp, pageType, service, isAmp, id } = useContext(RequestContext);
-
+  const { isApp, pageType, service } = useContext(RequestContext);
   const {
     articleAuthor,
     isTrustProjectParticipant,
     showRelatedTopics,
     brandName,
   } = useContext(ServiceContext);
-
   const { enabled: preloadLeadImageToggle } = useToggle('preloadLeadImage');
 
   const {
@@ -137,16 +131,6 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
     ...(isCPS && { pageTitle: `${atiAnalytics.pageTitle} - ${brandName}` }),
   };
 
-  const topStoriesContent = pageData?.secondaryColumn?.topStories;
-  const { shouldEnableExperimentTopStories, transformedBlocks } =
-    getExperimentTopStories({
-      blocks,
-      topStoriesContent,
-      isAmp,
-      service,
-      id,
-    });
-
   const componentsToRender = {
     visuallyHiddenHeadline,
     headline: headings,
@@ -190,10 +174,6 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
       <Disclaimer {...props} increasePaddingOnDesktop={false} />
     ),
     podcastPromo: () => (podcastPromoEnabled ? <InlinePodcastPromo /> : null),
-    experimentTopStories: () =>
-      topStoriesContent ? (
-        <ExperimentTopStories topStoriesContent={topStoriesContent} />
-      ) : null,
   };
 
   const visuallyHiddenBlock = {
@@ -203,8 +183,8 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
   };
 
   const articleBlocks = startsWithHeading
-    ? transformedBlocks
-    : [visuallyHiddenBlock, ...transformedBlocks];
+    ? blocks
+    : [visuallyHiddenBlock, ...blocks];
 
   const promoImageBlocks =
     pageData?.promo?.images?.defaultPromoImage?.blocks ?? [];
@@ -226,9 +206,6 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
 
   return (
     <div css={styles.pageWrapper}>
-      {shouldEnableExperimentTopStories && (
-        <AmpExperiment experimentConfig={experimentTopStoriesConfig} />
-      )}
       <ATIAnalytics atiData={atiData} />
       <ChartbeatAnalytics
         sectionName={pageData?.relatedContent?.section?.name}
diff --git a/src/app/pages/ArticlePage/SecondaryColumn.tsx b/src/app/pages/ArticlePage/SecondaryColumn.tsx
index ac242c74dd6..12f07a3323e 100644
--- a/src/app/pages/ArticlePage/SecondaryColumn.tsx
+++ b/src/app/pages/ArticlePage/SecondaryColumn.tsx
@@ -21,12 +21,15 @@ const SecondaryColumn = ({ pageData }: { pageData: Article }) => {
   return (
     <div css={styles.secondaryColumn}>
       {topStoriesContent && (
-        <div css={styles.topStoriesSection} data-testid="top-stories">
+        <div
+          css={styles.topStoriesAndFeaturesSection}
+          data-testid="top-stories"
+        >
           <TopStoriesSection content={topStoriesContent} />
         </div>
       )}
       {featuresContent && (
-        <div css={styles.featuresSection} data-testid="features">
+        <div css={styles.topStoriesAndFeaturesSection} data-testid="features">
           <FeaturesAnalysis
             content={featuresContent}
             parentColumns={{}}
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
deleted file mode 100644
index d0a13a96eee..00000000000
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.test.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { getExperimentTopStories } from './helpers';
-import { topStoriesList } from '../PagePromoSections/TopStoriesSection/fixture/index';
-
-describe('AMP top stories experiment', () => {
-  const mockTextBlock = {
-    type: 'text',
-    model: {
-      blocks: [],
-    },
-  };
-  const expectedExperimentTopStoriesBlock = (index: number) => {
-    return {
-      type: 'experimentTopStories',
-      model: topStoriesList,
-      id: `experimentTopStories-${index}`,
-    };
-  };
-
-  const blocksShortLength = [mockTextBlock];
-
-  const blocksEvenLength = [
-    mockTextBlock,
-    mockTextBlock,
-    mockTextBlock,
-    mockTextBlock,
-  ];
-  const blocksOddLength = [mockTextBlock, mockTextBlock, mockTextBlock];
-
-  describe('getExperimentTopStories()', () => {
-    it('returns shouldEnableExperimentTopStories as true if props match conditions.', () => {
-      const { shouldEnableExperimentTopStories } = getExperimentTopStories({
-        blocks: blocksEvenLength,
-        topStoriesContent: topStoriesList,
-        isAmp: true,
-        id: 'c6v11qzyv8po',
-        service: 'news',
-      });
-      expect(shouldEnableExperimentTopStories).toBe(true);
-    });
-
-    it.each`
-      testDescription                                | isAmp    | id                | service
-      ${'all props are undefined'}                   | ${false} | ${undefined}      | ${undefined}
-      ${'only isAmp is true'}                        | ${true}  | ${undefined}      | ${undefined}
-      ${'only pathname is undefined'}                | ${true}  | ${undefined}      | ${'news'}
-      ${'only pathname is defined and valid'}        | ${false} | ${'c6v11qzyv8po'} | ${undefined}
-      ${'all props defined but pathname is invalid'} | ${false} | ${'c1231qzyv8po'} | ${undefined}
-      ${'only service is undefined'}                 | ${true}  | ${'c6v11qzyv8po'} | ${undefined}
-      ${'only service is defined and valid'}         | ${false} | ${undefined}      | ${'news'}
-      ${'all props defined but service is invalid'}  | ${true}  | ${'c6v11qzyv8po'} | ${'igbo'}
-    `(
-      'returns shouldEnableExperimentTopStories as false because $testDescription.',
-      ({ isAmp, id, service }) => {
-        const { shouldEnableExperimentTopStories } = getExperimentTopStories({
-          blocks: blocksEvenLength,
-          topStoriesContent: topStoriesList,
-          isAmp,
-          id,
-          service,
-        });
-
-        expect(shouldEnableExperimentTopStories).toBe(false);
-      },
-    );
-
-    const expectedBlocksEvenLength = [
-      mockTextBlock,
-      mockTextBlock,
-      expectedExperimentTopStoriesBlock(2),
-      mockTextBlock,
-      mockTextBlock,
-    ];
-    const expectedBlocksOddLength = [
-      mockTextBlock,
-      expectedExperimentTopStoriesBlock(1),
-      mockTextBlock,
-      mockTextBlock,
-    ];
-
-    it.each`
-      testType  | inputBlocks         | expectedOutput
-      ${'even'} | ${blocksEvenLength} | ${expectedBlocksEvenLength}
-      ${'odd'}  | ${blocksOddLength}  | ${expectedBlocksOddLength}
-    `(
-      'should insert experimentTopStories block into blocks array in the correct position when blocks.length is $testType',
-      ({ inputBlocks, expectedOutput }) => {
-        const { transformedBlocks } = getExperimentTopStories({
-          blocks: inputBlocks,
-          topStoriesContent: topStoriesList,
-          isAmp: true,
-          id: 'c6v11qzyv8po',
-          service: 'news',
-        });
-        expect(transformedBlocks).toEqual(expectedOutput);
-      },
-    );
-
-    it('does not insert experiment top stories blocks if the blocks array length is < 2.', () => {
-      const { transformedBlocks } = getExperimentTopStories({
-        blocks: blocksShortLength,
-        topStoriesContent: topStoriesList,
-        isAmp: true,
-        id: 'c6v11qzyv8po',
-        service: 'news',
-      });
-      expect(transformedBlocks).toBe(blocksShortLength);
-    });
-  });
-});
diff --git a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx b/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
deleted file mode 100644
index e169d89a158..00000000000
--- a/src/app/pages/ArticlePage/experimentTopStories/helpers.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { OptimoBlock } from '#app/models/types/optimo';
-import { TopStoryItem } from '#app/pages/ArticlePage/PagePromoSections/TopStoriesSection/types';
-import TopStoriesSection from '../PagePromoSections/TopStoriesSection';
-import styles from './index.styles';
-
-export const experimentTopStoriesConfig = {
-  topStoriesExperiment: {
-    variants: {
-      control: 50,
-      show_at_halfway: 50,
-    },
-  },
-};
-
-const enableExperimentTopStories = ({
-  topStoriesContent,
-  isAmp,
-  service,
-  id,
-}: {
-  topStoriesContent: TopStoryItem[] | undefined;
-  isAmp: boolean;
-  service: string;
-  id: string | null;
-}) => {
-  if (!topStoriesContent || !isAmp || !service || !id) return false;
-  const newsTestAsset = 'c6v11qzyv8po';
-  const newsAsset = 'cz7xywn940ro';
-  const sportAsset = 'cpgw0xjmpd3o';
-  const experimentAssets = [newsAsset, newsTestAsset, sportAsset];
-  const experimentServices = ['news', 'sport'];
-
-  return (
-    isAmp &&
-    id &&
-    experimentServices.includes(service) &&
-    experimentAssets.includes(id)
-  );
-};
-
-const insertExperimentTopStories = ({
-  blocks,
-  topStoriesContent,
-}: {
-  blocks: OptimoBlock[];
-  topStoriesContent: TopStoryItem[];
-}) => {
-  const insertIndex = Math.floor(blocks.length * 0.5); // halfway index of blocks array
-  const experimentTopStoriesBlock = {
-    type: 'experimentTopStories',
-    model: topStoriesContent,
-    id: `experimentTopStories-${insertIndex}`,
-  };
-
-  const blocksClone = [...blocks];
-  blocksClone.splice(insertIndex, 0, experimentTopStoriesBlock);
-  return blocksClone;
-};
-
-export const getExperimentTopStories = ({
-  blocks,
-  topStoriesContent,
-  isAmp,
-  service,
-  id,
-}: {
-  blocks: OptimoBlock[];
-  topStoriesContent: TopStoryItem[] | undefined;
-  isAmp: boolean;
-  service: string;
-  id: string | null;
-}) => {
-  if (!topStoriesContent)
-    return {
-      transformedBlocks: blocks,
-      shouldEnableExperimentTopStories: false,
-    };
-
-  const shouldEnableExperimentTopStories = enableExperimentTopStories({
-    topStoriesContent,
-    isAmp,
-    service,
-    id,
-  });
-
-  const transformedBlocks =
-    shouldEnableExperimentTopStories && blocks.length > 2
-      ? insertExperimentTopStories({
-          blocks,
-          topStoriesContent,
-        })
-      : blocks;
-
-  return {
-    transformedBlocks,
-    shouldEnableExperimentTopStories,
-  };
-};
-
-export const ExperimentTopStories = ({
-  topStoriesContent,
-}: {
-  topStoriesContent: TopStoryItem[];
-}) => {
-  return (
-    <div
-      css={styles.experimentTopStoriesSection}
-      data-testid="experiment-top-stories"
-      data-vars-top-stories-position="experiment"
-    >
-      <TopStoriesSection content={topStoriesContent} />
-    </div>
-  );
-};
diff --git a/src/app/pages/ArticlePage/experimentTopStories/index.styles.ts b/src/app/pages/ArticlePage/experimentTopStories/index.styles.ts
deleted file mode 100644
index f59bfb8ffbb..00000000000
--- a/src/app/pages/ArticlePage/experimentTopStories/index.styles.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { css, Theme } from '@emotion/react';
-
-export default {
-  experimentTopStoriesSection: ({ spacings, mq }: Theme) =>
-    css({
-      display: 'none',
-      marginBottom: `${spacings.TRIPLE}rem`,
-      '[amp-x-topStoriesExperiment="show_at_halfway"] &': {
-        display: 'block',
-        [mq.GROUP_4_MIN_WIDTH]: {
-          display: 'none',
-        },
-      },
-    }),
-};
diff --git a/src/app/pages/ArticlePage/index.test.tsx b/src/app/pages/ArticlePage/index.test.tsx
index 96499af100d..f7acc2bf37c 100644
--- a/src/app/pages/ArticlePage/index.test.tsx
+++ b/src/app/pages/ArticlePage/index.test.tsx
@@ -39,7 +39,6 @@ import { ServiceContextProvider } from '../../contexts/ServiceContext';
 import ArticlePage from './ArticlePage';
 import ThemeProvider from '../../components/ThemeProvider';
 import ATIAnalytics from '../../components/ATIAnalytics';
-import { topStoriesList } from './PagePromoSections/TopStoriesSection/fixture/index';
 
 jest.mock('../../components/ThemeProvider');
 
@@ -65,8 +64,6 @@ type Props = {
   showAdsBasedOnLocation?: boolean;
   isApp?: boolean;
   promo?: boolean | null;
-  isAmp?: boolean;
-  id?: string | null;
 };
 
 const Context = ({
@@ -77,16 +74,12 @@ const Context = ({
   showAdsBasedOnLocation = false,
   isApp = false,
   promo = null,
-  isAmp = false,
-  id,
 }: PropsWithChildren<Props> = {}) => {
   const appInput = {
     ...input,
     service,
     showAdsBasedOnLocation,
     isApp,
-    isAmp,
-    id,
   };
 
   return (
@@ -876,69 +869,4 @@ describe('Article Page', () => {
       );
     });
   });
-
-  describe('when rendering an AMP page', () => {
-    const pageDataWithSecondaryColumn = {
-      ...articleDataNews,
-      secondaryColumn: {
-        topStories: topStoriesList,
-        features: [],
-      },
-    };
-
-    const renderAmpPage = ({
-      service,
-      id,
-    }: {
-      service: Services;
-      id: string | null;
-    }) => {
-      return render(
-        <Context isAmp service={service} id={id}>
-          <ArticlePage pageData={pageDataWithSecondaryColumn} />
-        </Context>,
-        {
-          isAmp: true,
-          service,
-          id,
-        },
-      );
-    };
-
-    const validNewsAsset = 'c6v11qzyv8po';
-    const validSportAsset = 'cpgw0xjmpd3o';
-
-    it.each`
-      service    | id
-      ${'news'}  | ${validNewsAsset}
-      ${'sport'} | ${validSportAsset}
-    `(
-      'should render page with experiment-top-stories blocks only on specific $service assets',
-      ({ service, id }) => {
-        const { queryByTestId } = renderAmpPage({
-          service,
-          id,
-        });
-
-        expect(queryByTestId('experiment-top-stories')).toBeInTheDocument();
-      },
-    );
-
-    it.each`
-      service     | id                | testDescription
-      ${'news'}   | ${'c1231qzyv8po'} | ${'news assets not specified'}
-      ${'sport'}  | ${'c1231qzyv8po'} | ${'sport assets not specified'}
-      ${'pidgin'} | ${'c6v11qzyv8po'} | ${`services which are not 'news' or 'sport'`}
-    `(
-      'should render page without experiment-top-stories blocks on $testDescription',
-      ({ service, id }) => {
-        const { queryByTestId } = renderAmpPage({
-          service,
-          id,
-        });
-
-        expect(queryByTestId('experiment-top-stories')).not.toBeInTheDocument();
-      },
-    );
-  });
 });