Merge pull request #14111 from guardian/disable-article-swipe

Author: frederickobrien

dotcom-rendering/.storybook/mocks/bridgetApi.ts

@@ -86,9 +86,9 @@ export const getDiscussionClient: BridgetApi<'getDiscussionClient'> = () => ({
 	recommend: async () => discussionErrorResponse,
 });
 
-export const getInteractionClient: BridgetApi<
-	'getInteractionClient'
-> = () => ({});
+export const getInteractionClient: BridgetApi<'getInteractionClient'> = () => ({
+	disableArticleSwipe: async () => void 0,
+});
 
 export const getInteractivesClient: BridgetApi<
 	'getInteractivesClient'

dotcom-rendering/src/components/InteractivesDisableArticleSwipe.importable.tsx

@@ -0,0 +1,14 @@
+import { log } from '@guardian/libs';
+import { useEffect } from 'react';
+import { getInteractionClient } from '../lib/bridgetApi';
+
+export const InteractivesDisableArticleSwipe = () => {
+	useEffect(() => {
+		void getInteractionClient()
+			.disableArticleSwipe(true)
+			.catch((error) => {
+				log('dotcom', 'disableArticleSwipe failed:', error);
+			});
+	}, []);
+	return null;
+};

dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx

@@ -7,6 +7,7 @@ import {
 import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
 import { Footer } from '../components/Footer';
 import { HeaderAdSlot } from '../components/HeaderAdSlot';
+import { InteractivesDisableArticleSwipe } from '../components/InteractivesDisableArticleSwipe.importable';
 import { InteractivesNativePlatformWrapper } from '../components/InteractivesNativePlatformWrapper.importable';
 import { Island } from '../components/Island';
 import { LabsHeader } from '../components/LabsHeader';
@@ -215,6 +216,9 @@ export const FullPageInteractiveLayout = (props: WebProps | AppsProps) => {
 					<Island priority="critical">
 						<InteractivesNativePlatformWrapper />
 					</Island>
+					<Island priority="critical">
+						<InteractivesDisableArticleSwipe />
+					</Island>
 					<Global styles={temporaryBodyCopyColourOverride} />
 				</>
 			)}

dotcom-rendering/src/layouts/InteractiveLayout.tsx

@@ -24,6 +24,7 @@ import { DiscussionLayout } from '../components/DiscussionLayout';
 import { Footer } from '../components/Footer';
 import { GridItem } from '../components/GridItem';
 import { HeaderAdSlot } from '../components/HeaderAdSlot';
+import { InteractivesDisableArticleSwipe } from '../components/InteractivesDisableArticleSwipe.importable';
 import { InteractivesNativePlatformWrapper } from '../components/InteractivesNativePlatformWrapper.importable';
 import { Island } from '../components/Island';
 import { LabsHeader } from '../components/LabsHeader';
@@ -251,6 +252,9 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 					<Island priority="critical">
 						<InteractivesNativePlatformWrapper />
 					</Island>
+					<Island priority="critical">
+						<InteractivesDisableArticleSwipe />
+					</Island>
 					<Global styles={temporaryBodyCopyColourOverride} />
 				</>
 			)}