Use similar logic for hosted content pages as for articles

dotcom-rendering/src/components/HostedContentPage.tsx

@@ -0,0 +1,146 @@
+import { Global } from '@emotion/react';
+import { StrictMode } from 'react';
+import { HostedArticleLayout } from '../layouts/HostedArticleLayout';
+import { ArticleDesign } from '../lib/articleFormat';
+import { rootStyles } from '../lib/rootStyles';
+import { filterABTestSwitches } from '../model/enhance-switches';
+import type { HostedContent } from '../types/hostedContent';
+import type { RenderingTarget } from '../types/renderingTarget';
+import { useConfig } from './ConfigContext';
+import { DarkModeMessage } from './DarkModeMessage';
+import { FocusStyles } from './FocusStyles.importable';
+import { Island } from './Island';
+import { Lightbox } from './Lightbox';
+import { Metrics } from './Metrics.importable';
+import { SetABTests } from './SetABTests.importable';
+import { SkipTo } from './SkipTo';
+
+interface BaseProps {
+	hostedContent: HostedContent;
+	renderingTarget: RenderingTarget;
+}
+
+interface WebProps extends BaseProps {
+	renderingTarget: 'Web';
+}
+
+interface AppProps extends BaseProps {
+	renderingTarget: 'Apps';
+}
+
+const DecideHostedLayout = ({
+	hostedContent,
+	renderingTarget,
+}: WebProps | AppProps) => {
+	switch (hostedContent.design) {
+		case ArticleDesign.HostedArticle:
+			return (
+				<HostedArticleLayout
+					content={hostedContent}
+					renderingTarget={renderingTarget}
+				/>
+			);
+		case ArticleDesign.HostedVideo:
+		case ArticleDesign.HostedGallery:
+		default:
+			return 'Not supported';
+	}
+};
+
+/**
+ * @description
+ * Hosted Content pages are paid content written by third parties but hosted on theguardian.com domain.
+ * This is a high level wrapper for these pages on Dotcom. Sets strict mode and some globals
+ */
+export const HostedContentPage = (props: WebProps | AppProps) => {
+	const {
+		hostedContent: { design, display, theme, frontendData },
+		renderingTarget,
+	} = props;
+
+	const isWeb = renderingTarget === 'Web';
+	const { darkModeAvailable } = useConfig();
+
+	const format = {
+		design,
+		display,
+		theme,
+	};
+
+	return (
+		<StrictMode>
+			<Global styles={rootStyles(format, darkModeAvailable)} />
+			{isWeb && <SkipTo id="maincontent" label="Skip to main content" />}
+			<Lightbox
+				format={format}
+				switches={frontendData.config.switches}
+				{...(renderingTarget === 'Web'
+					? {
+							lightboxImages: frontendData.imagesForLightbox,
+							renderingTarget,
+					  }
+					: {
+							lightboxImages: frontendData.imagesForAppsLightbox,
+							renderingTarget,
+					  })}
+			/>
+			<Island priority="enhancement" defer={{ until: 'idle' }}>
+				<FocusStyles />
+			</Island>
+			{renderingTarget === 'Web' && (
+				<>
+					<Island priority="critical">
+						<Metrics
+							commercialMetricsEnabled={
+								!!frontendData.config.switches.commercialMetrics
+							}
+							tests={frontendData.config.abTests}
+						/>
+					</Island>
+
+					<Island priority="critical">
+						<SetABTests
+							abTestSwitches={filterABTestSwitches(
+								frontendData.config.switches,
+							)}
+							pageIsSensitive={frontendData.config.isSensitive}
+							isDev={!!frontendData.config.isDev}
+							serverSideTests={frontendData.config.abTests}
+							serverSideABTests={
+								frontendData.config.serverSideABTests
+							}
+						/>
+					</Island>
+				</>
+			)}
+
+			{renderingTarget === 'Web' && darkModeAvailable && (
+				<DarkModeMessage>
+					Dark mode is a work-in-progress.
+					<br />
+					You can{' '}
+					<a
+						style={{ color: 'inherit' }}
+						href="/opt/out/dark-mode-web"
+					>
+						opt out anytime
+					</a>{' '}
+					if anything is unreadable or odd.
+				</DarkModeMessage>
+			)}
+			{renderingTarget === 'Apps' && !darkModeAvailable && (
+				<DarkModeMessage>
+					We hope you are enjoying the updates we are implementing on
+					articles. Unfortunately, some are still missing a dark mode
+					view. Rest assured this will be fixed in a forthcoming beta
+					release.
+				</DarkModeMessage>
+			)}
+
+			<DecideHostedLayout
+				hostedContent={props.hostedContent}
+				renderingTarget={renderingTarget}
+			/>
+		</StrictMode>
+	);
+};

dotcom-rendering/src/frontend/feArticle.ts

@@ -174,7 +174,10 @@ type FEDesign =
 	| 'FullPageInteractiveDesign'
 	| 'NewsletterSignupDesign'
 	| 'TimelineDesign'
-	| 'ProfileDesign';
+	| 'ProfileDesign'
+	| 'HostedArticle'
+	| 'HostedVideo'
+	| 'HostedGallery';
 
 /** FEDisplay is the display information passed through from frontend (originating in the capi scala client) and dictates the display style of the content e.g. Immersive
 https://github.com/guardian/content-api-scala-client/blob/master/client/src/main/scala/com.gu.contentapi.client/utils/format/Display.scala */

dotcom-rendering/src/frontend/feHostedContent.ts

@@ -1,27 +1,19 @@
-export interface FEHostedContent {
-	// general / shared
-	id: string;
-	url: string;
-	encodedUrl: string;
-	campaign?: HostedCampaign;
-	title: string;
-	mainImageUrl: string;
-	thumbnailUrl: string;
-	standfirst: string;
-	cta: HostedCallToAction;
-	name: string;
-	owner: string;
-	logo: HostedLogo;
-	fontColour: Colour;
-	// article
-	body?: string;
-	mainPicture?: string;
-	mainPictureCaption?: string;
-	// video
-	video?: HostedVideo;
-	// gallery
-	images: HostedGalleryImage[];
-}
+import type { FEArticle } from './feArticle';
+
+/**
+ * This type is what we receive from `frontend`,
+ * hence the FE prefix.
+ *
+ * WARNING: run `gen-schema` task if changing this to update the associated JSON
+ * schema definition.
+ */
+export type FEHostedContent = Omit<
+	FEArticle,
+	'beaconURL' | 'blocks' | 'crossword'
+>;
+
+/**
+// Not sure if the following types are needed:
 
 type HostedCampaign = {
 	id: string;
@@ -75,3 +67,5 @@ type Encoding = {
 	url: string;
 	rawFormat: string;
 };
+
+ */

dotcom-rendering/src/frontend/schemas/feArticle.json

@@ -4892,6 +4892,9 @@
                 "FeatureDesign",
                 "FullPageInteractiveDesign",
                 "GalleryDesign",
+                "HostedArticle",
+                "HostedGallery",
+                "HostedVideo",
                 "InteractiveDesign",
                 "InterviewDesign",
                 "LetterDesign",

dotcom-rendering/src/frontend/schemas/feFront.json

@@ -3925,6 +3925,9 @@
                 "FeatureDesign",
                 "FullPageInteractiveDesign",
                 "GalleryDesign",
+                "HostedArticle",
+                "HostedGallery",
+                "HostedVideo",
                 "InteractiveDesign",
                 "InterviewDesign",
                 "LetterDesign",