diff --git a/dotcom-rendering/src/web/components/BootReact.tsx b/dotcom-rendering/src/web/components/BootReact.tsx index 96f1ff2a48d..41d37afe069 100644 --- a/dotcom-rendering/src/web/components/BootReact.tsx +++ b/dotcom-rendering/src/web/components/BootReact.tsx @@ -1,13 +1,11 @@ import ReactDOM from 'react-dom'; import { App } from '@root/src/web/components/App'; -import { ABProvider } from '@guardian/ab-react'; import { tests } from '@frontend/web/experiments/ab-tests'; -import { getForcedParticipationsFromUrl } from '@frontend/web/lib/getAbUrlHash'; -import { getCypressSwitches } from '@frontend/web/experiments/cypress-switches'; import { loadableReady } from '@loadable/component'; import { getOphanRecordFunction } from '@root/src/web/browser/ophan/ophan'; import { getCookie } from '@guardian/libs'; +import { WithABProvider } from './WithABProvider'; type Props = { CAPI: CAPIBrowserType; @@ -27,28 +25,17 @@ export const BootReact = ({ CAPI }: Props) => { const ophanRecord = getOphanRecordFunction(); - const windowHash = window && window.location && window.location.hash; - - // Get the forced switches to use for when running within cypress - // Is empty object if not in cypress - const cypressAbSwitches = getCypressSwitches(); - loadableReady(() => { ReactDOM.render( - - , + , document.getElementById('react-root'), ); diff --git a/dotcom-rendering/src/web/components/WithABProvider.tsx b/dotcom-rendering/src/web/components/WithABProvider.tsx new file mode 100644 index 00000000000..d89b9a8b2b6 --- /dev/null +++ b/dotcom-rendering/src/web/components/WithABProvider.tsx @@ -0,0 +1,42 @@ +import { CoreAPIConfig, OphanAPIConfig } from '@guardian/ab-core/dist/types'; +import { ABProvider } from '@guardian/ab-react'; +import { getCypressSwitches } from '../experiments/cypress-switches'; +import { getForcedParticipationsFromUrl } from '../lib/getAbUrlHash'; + +type Props = { + arrayOfTestObjects: CoreAPIConfig['arrayOfTestObjects']; + abTestSwitches: CoreAPIConfig['abTestSwitches']; + pageIsSensitive: CoreAPIConfig['pageIsSensitive']; + mvtId: CoreAPIConfig['mvtId']; + ophanRecord: OphanAPIConfig['ophanRecord']; + children: JSX.Element; +}; +export const WithABProvider = ({ + arrayOfTestObjects, + abTestSwitches, + pageIsSensitive, + mvtId, + ophanRecord, + children, +}: Props) => { + const windowHash = window?.location.hash; + // Get the forced switches to use for when running within cypress + // Is empty object if not in cypress + const cypressAbSwitches = getCypressSwitches(); + return ( + + {children} + + ); +};