Merge pull request #12172 from bbc/WSTEAMA-1444-remove-election-banne…

…r-optimizely-references

WSTEAMA-1444 - Remove election banner Optimizely references

src/app/components/ATIAnalytics/atiUrl/index.ts

@@ -45,7 +45,6 @@ export const buildATIPageTrackPath = ({
   categoryName,
   campaigns,
   nationsProducer,
-  experimentVariant,
 }: ATIPageTrackingProps) => {
   const href = getHref(platform);
   const referrer = getReferrer(platform, origin, previousPath);
@@ -215,22 +214,6 @@ export const buildATIPageTrackPath = ({
       value: getATIMarketingString(href, campaignType),
       wrap: false,
     },
-    ...(experimentVariant
-      ? [
-          {
-            key: 'mv_test',
-            description: 'Article page banner experiment',
-            value: `Election Banner Experiment`,
-            wrap: false,
-          },
-          {
-            key: 'mv_creation',
-            description: 'Article page banner variant',
-            value: `${experimentVariant}`,
-            wrap: false,
-          },
-        ]
-      : []),
     ...getRSSMarketingString(href, campaignType),
     ...(onOnionTld()
       ? [

src/app/components/ATIAnalytics/params/genericPage/buildParams.ts

@@ -25,7 +25,6 @@ export const buildPageATIParams = ({
     producerId,
     timePublished,
     timeUpdated,
-    experimentVariant,
   } = atiData;
 
   return {
@@ -50,7 +49,6 @@ export const buildPageATIParams = ({
     statsDestination,
     timePublished,
     timeUpdated,
-    ...(experimentVariant && { experimentVariant }),
   };
 };
 

src/app/components/ATIAnalytics/types.ts

@@ -30,7 +30,6 @@ export interface ATIData {
   producerName?: string | null;
   timePublished?: string | null;
   timeUpdated?: string | null;
-  experimentVariant?: string | null;
 }
 
 export interface PageData {
@@ -132,7 +131,6 @@ export interface ATIPageTrackingProps {
   categoryName?: string | null;
   campaigns?: { campaignId?: string; campaignName?: string }[] | null;
   nationsProducer?: string | null;
-  experimentVariant?: string | null;
 }
 
 export interface ATIProps {

src/app/hooks/useOptimizelyMvtVariation/index.jsx

@@ -1,13 +1,11 @@
 import { useContext } from 'react';
 import { OptimizelyContext } from '@optimizely/react-sdk';
 import { RequestContext } from '#contexts/RequestContext';
-import useToggle from '#hooks/useToggle';
 import activateExperiment from './activateExperiment';
 
 const useOptimizelyMvtVariation = id => {
   const { optimizely } = useContext(OptimizelyContext);
   const { mvtExperiments } = useContext(RequestContext);
-  const { enabled: electionBannerEnabled } = useToggle('electionBanner');
 
   if (!mvtExperiments || mvtExperiments.length === 0 || id === null) {
     return null;
@@ -17,7 +15,7 @@ const useOptimizelyMvtVariation = id => {
     ({ experimentName }) => experimentName === id,
   );
 
-  if (!experiment || !electionBannerEnabled) return null;
+  if (!experiment) return null;
 
   const isEnabled = experiment.enabled;
   const variation = isEnabled && experiment.variation;

src/app/hooks/useOptimizelyMvtVariation/index.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { renderHook } from '#app/components/react-testing-library-with-providers';
 import { RequestContextProvider } from '#contexts/RequestContext';
-import { ToggleContextProvider } from '#contexts/ToggleContext';
 import useOptimizelyMvtVariation from '.';
 import * as activateExperiment from './activateExperiment';
 
@@ -23,11 +22,7 @@ describe('useOptimizelyMvtVariation custom hook', () => {
       pathname: 'bar',
     };
     const wrapper = ({ children }) => (
-      <RequestContextProvider {...props}>
-        <ToggleContextProvider toggles={{ electionBanner: { enabled: true } }}>
-          {children}
-        </ToggleContextProvider>
-      </RequestContextProvider>
+      <RequestContextProvider {...props}>{children}</RequestContextProvider>
     );
     return renderHook(() => useOptimizelyMvtVariation(flagId), {
       wrapper,

src/app/hooks/useOptimizelyVariation/index.jsx

@@ -2,7 +2,7 @@
 import { useState, useEffect } from 'react';
 import { useDecision } from '@optimizely/react-sdk';
 
-const isClientSide = false;
+const isClientSide = true;
 
 // ALTHOUGH THIS FUNCTION BREAKS REACT RULES BY USING CONDITIONAL HOOKS,
 // WE CAN SAFELY DO SO SINCE isClientSide IS A CONSTANT AND THEREFORE GUARANTEES THAT

src/app/pages/ArticlePage/ArticlePage.tsx

@@ -1,9 +1,7 @@
 /** @jsx jsx */
-/** @jsxFrag React.Fragment */
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { jsx, useTheme } from '@emotion/react';
 import useToggle from '#hooks/useToggle';
-import useOptimizelyMvtVariation from '#hooks/useOptimizelyMvtVariation';
 import { singleTextBlock } from '#app/models/blocks';
 import ArticleMetadata from '#containers/ArticleMetadata';
 import { RequestContext } from '#contexts/RequestContext';
@@ -40,8 +38,6 @@ import CpsRecommendations from '#containers/CpsRecommendations';
 import InlinePodcastPromo from '#containers/PodcastPromo/Inline';
 import { Article, OptimoBylineBlock } from '#app/models/types/optimo';
 import ScrollablePromo from '#components/ScrollablePromo';
-import OptimizelyArticleCompleteTracking from '#app/legacy/containers/OptimizelyArticleCompleteTracking';
-import OptimizelyPageViewTracking from '#app/legacy/containers/OptimizelyPageViewTracking';
 import JumpTo from '#app/components/JumpTo';
 import ElectionBanner from './ElectionBanner';
 
@@ -91,10 +87,6 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
     palette: { GREY_2, WHITE },
   } = useTheme();
 
-  const experimentVariant = useOptimizelyMvtVariation(
-    'newswb_01_ap_banner_election',
-  );
-
   const allowAdvertising = pageData?.metadata?.allowAdvertising ?? false;
   const adcampaign = pageData?.metadata?.adCampaignKeyword;
   const isTransliterated =
@@ -145,7 +137,6 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
   const atiData = {
     ...atiAnalytics,
     ...(isCPS && { pageTitle: `${atiAnalytics.pageTitle} - ${brandName}` }),
-    ...(experimentVariant && { experimentVariant }),
   };
 
   const topStoriesContent = pageData?.secondaryColumn?.topStories;
@@ -315,12 +306,6 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
           mobileDivider={showTopics}
         />
       )}
-      {experimentVariant && (
-        <>
-          <OptimizelyArticleCompleteTracking />
-          <OptimizelyPageViewTracking />
-        </>
-      )}
     </div>
   );
 };

src/app/pages/ArticlePage/ElectionBanner/index.tsx

@@ -7,7 +7,6 @@ import AmpIframe from '#app/components/AmpIframe';
 import useToggle from '#app/hooks/useToggle';
 import { Tag } from '#app/components/Metadata/types';
 import { ServiceContext } from '#app/contexts/ServiceContext';
-import useOptimizelyMvtVariation from '#app/hooks/useOptimizelyMvtVariation';
 import { getEnvConfig } from '#app/lib/utilities/getEnvConfig';
 import { MetadataTaggings } from '#app/models/types/metadata';
 import { Services } from '#app/models/types/global';
@@ -36,8 +35,6 @@ export default function ElectionBanner({ aboutTags, taggings }: Props) {
   const { enabled: electionBannerEnabled }: { enabled: boolean | null } =
     useToggle('electionBanner');
 
-  const variation = useOptimizelyMvtVariation('newswb_01_ap_banner_election');
-
   if (isLite) return null;
 
   const {
@@ -60,7 +57,6 @@ export default function ElectionBanner({ aboutTags, taggings }: Props) {
     !isEditoriallySensitive && validAboutTag && electionBannerEnabled;
 
   if (!showBanner) return null;
-  if (variation === 'off') return null;
 
   const {
     SIMORGH_APP_ENV,

src/app/pages/ArticlePage/index.tsx

@@ -1,7 +1,4 @@
-import withOptimizelyProvider from '#app/legacy/containers/PageHandlers/withOptimizelyProvider';
 import ArticlePage from './ArticlePage';
 import applyBasicPageHandlers from '../utils/applyBasicPageHandlers';
 
-const OptimizelyArticle = withOptimizelyProvider(ArticlePage);
-
-export default applyBasicPageHandlers(OptimizelyArticle);
+export default applyBasicPageHandlers(ArticlePage);

src/server/utilities/mvtHeader/enabledExperimentsList.js

@@ -9,8 +9,8 @@ Add enabled experiments objects inside this array in this format:
 */
 const enabledExperimentList = [
   {
-    name: 'newswb_01_ap_banner_election',
-    services: ['mundo', 'portuguese'],
+    name: 'test_2',
+    services: ['pidgin'],
     pageTypes: ['article'],
   },
 ];