use DCR version of SDC header in new TopBar component only

dotcom-rendering/src/components/Masthead.tsx

@@ -12,6 +12,7 @@ type Props = {
 	editionId: EditionId;
 	idUrl?: string;
 	mmaUrl?: string;
+	contributionsServiceUrl: string;
 	subscribeUrl: string;
 	discussionApiUrl: string;
 	idApiUrl: string;
@@ -48,6 +49,7 @@ export const Masthead = ({
 	discussionApiUrl,
 	subscribeUrl,
 	idApiUrl,
+	contributionsServiceUrl,
 	showSubNav = true,
 	isImmersive,
 	displayRoundel,
@@ -74,6 +76,7 @@ export const Masthead = ({
 						mmaUrl={mmaUrl}
 						discussionApiUrl={discussionApiUrl}
 						idApiUrl={idApiUrl}
+						contributionsServiceUrl={contributionsServiceUrl}
 						hasPageSkin={hasPageSkin}
 					/>
 				</Island>

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

@@ -224,11 +224,17 @@ const ReaderRevenueLinksRemote = ({
 				const { module } = response.data;
 				setSupportHeaderResponse(module);
 
-				return import(
-					/* webpackChunkName: "header" */ `./marketing/header/Header`
-				).then((headerModule: { [key: string]: React.ElementType }) => {
-					setSupportHeader(() => headerModule.Header ?? null);
-				});
+				return window
+					.guardianPolyfilledImport(module.url)
+					.then(
+						(headerModule: {
+							[key: string]: React.ElementType;
+						}) => {
+							setSupportHeader(
+								() => headerModule[module.name] ?? null,
+							);
+						},
+					);
 			})
 			.catch((error) => {
 				const msg = `Error importing RR header links: ${String(error)}`;
@@ -411,7 +417,7 @@ const ReaderRevenueLinksNative = ({
 };
 
 /**
- * Container for `ReaderRevenueLinksRemote` or `ReaderRevenueLinksNative`
+ * Container for `ReaderRevenueLinksRemote` or `ReaderRevenueLinksRemote`
  *
  * ## Why does this need to be an Island?
  *

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

@@ -19,13 +19,15 @@ import { palette as themePalette } from '../palette';
 import { useConfig } from './ConfigContext';
 import { TopBarLink } from './TopBarLink';
 import { TopBarMyAccount } from './TopBarMyAccount';
+import { TopBarSupport } from './TopBarSupport.importable';
 
-interface TopBarProps {
+interface Props {
 	editionId: EditionId;
 	idUrl?: string;
 	mmaUrl?: string;
 	discussionApiUrl: string;
 	idApiUrl: string;
+	contributionsServiceUrl: string;
 	hasPageSkin?: boolean;
 }
 
@@ -113,8 +115,9 @@ export const TopBar = ({
 	mmaUrl,
 	discussionApiUrl,
 	idApiUrl,
+	contributionsServiceUrl,
 	hasPageSkin = false,
-}: TopBarProps) => {
+}: Props) => {
 	const authStatus = useAuthStatus();
 	const { renderingTarget } = useConfig();
 	const pageViewId = usePageViewId(renderingTarget);
@@ -143,7 +146,7 @@ export const TopBar = ({
 				hasPageSkin ? pageSkinContainer : center,
 			]}
 		>
-			{/** @todo - Reader revenue support messaging + CTA button */}
+			<TopBarSupport contributionsServiceUrl={contributionsServiceUrl} />
 
 			<VerticalDivider />
 

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

@@ -0,0 +1,190 @@
+/**
+ * @file
+ * This file was largely lifted from https://github.com/guardian/dotcom-rendering/blob/b3ef504acd00d48e765e0656be5ffbad88981a39/dotcom-rendering/src/components/SupportTheG.importable.tsx
+ */
+import { css } from '@emotion/react';
+import type { OphanComponentEvent } from '@guardian/libs';
+import { getCookie, isUndefined } from '@guardian/libs';
+import { from, space } from '@guardian/source-foundations';
+import { getHeader } from '@guardian/support-dotcom-components';
+import type {
+	HeaderPayload,
+	ModuleData,
+	ModuleDataResponse,
+} from '@guardian/support-dotcom-components/dist/dotcom/src/types';
+import { useState } from 'react';
+import { submitComponentEvent } from '../client/ophan/ophan';
+import {
+	getLastOneOffContributionDate,
+	getPurchaseInfo,
+	MODULES_VERSION,
+	shouldHideSupportMessaging,
+} from '../lib/contributions';
+import type { AuthStatus } from '../lib/identity';
+import { setAutomat } from '../lib/setAutomat';
+import { useAuthStatus } from '../lib/useAuthStatus';
+import { useCountryCode } from '../lib/useCountryCode';
+import { useOnce } from '../lib/useOnce';
+import { usePageViewId } from '../lib/usePageViewId';
+import { useConfig } from './ConfigContext';
+
+type Props = {
+	contributionsServiceUrl: string;
+};
+
+const headerStyles = css`
+	padding-top: 39px;
+	padding-left: 10px;
+	max-width: 310px;
+
+	${from.mobileMedium} {
+		padding-top: 44px;
+	}
+
+	${from.mobileLandscape} {
+		padding-left: ${space[5]}px;
+	}
+
+	${from.tablet} {
+		padding-top: ${space[1]}px;
+		padding-bottom: ${space[3]}px;
+		padding-left: ${space[5]}px;
+		max-width: 400px;
+	}
+
+	${from.desktop} {
+		max-width: none;
+	}
+`;
+
+function getIsSignedIn(authStatus: AuthStatus): boolean | undefined {
+	switch (authStatus.kind) {
+		case 'Pending':
+			return undefined;
+		case 'SignedInWithCookies':
+		case 'SignedInWithOkta':
+			return true;
+		case 'SignedOutWithCookies':
+		case 'SignedOutWithOkta':
+			return false;
+	}
+}
+
+type ReaderRevenueLinksRemoteProps = {
+	countryCode: string;
+	pageViewId: string;
+	contributionsServiceUrl: string;
+};
+
+const ReaderRevenueLinksRemote = ({
+	countryCode,
+	pageViewId,
+	contributionsServiceUrl,
+}: ReaderRevenueLinksRemoteProps) => {
+	const [supportHeaderResponse, setSupportHeaderResponse] =
+		useState<ModuleData | null>(null);
+	const [SupportHeader, setSupportHeader] =
+		useState<React.ElementType | null>(null);
+	const isSignedIn = getIsSignedIn(useAuthStatus());
+
+	const { renderingTarget } = useConfig();
+
+	useOnce((): void => {
+		setAutomat();
+
+		const requestData: HeaderPayload = {
+			tracking: {
+				ophanPageId: pageViewId,
+				platformId: 'GUARDIAN_WEB',
+				referrerUrl: window.location.origin + window.location.pathname,
+				clientName: 'dcr',
+			},
+			targeting: {
+				showSupportMessaging: !shouldHideSupportMessaging(),
+				countryCode,
+				modulesVersion: MODULES_VERSION,
+				mvtId: Number(
+					getCookie({ name: 'GU_mvt_id', shouldMemoize: true }),
+				),
+				lastOneOffContributionDate: getLastOneOffContributionDate(),
+				purchaseInfo: getPurchaseInfo(),
+				isSignedIn: isSignedIn === true,
+			},
+		};
+		getHeader(contributionsServiceUrl, requestData)
+			.then((response: ModuleDataResponse) => {
+				if (!response.data) {
+					return null;
+				}
+
+				const { module } = response.data;
+				setSupportHeaderResponse(module);
+
+				return import(
+					/* webpackChunkName: "header" */ `./marketing/header/Header`
+				).then((headerModule: { [key: string]: React.ElementType }) => {
+					setSupportHeader(() => headerModule.Header ?? null);
+				});
+			})
+			.catch((error) => {
+				const msg = `Error importing RR header links: ${String(error)}`;
+
+				console.log(msg);
+				window.guardian.modules.sentry.reportError(
+					new Error(msg),
+					'rr-header-links',
+				);
+			});
+	}, [countryCode, isSignedIn]);
+
+	if (SupportHeader !== null && supportHeaderResponse) {
+		return (
+			<div css={headerStyles}>
+				{}
+				<SupportHeader
+					submitComponentEvent={(
+						componentEvent: OphanComponentEvent,
+					) =>
+						void submitComponentEvent(
+							componentEvent,
+							renderingTarget,
+						)
+					}
+					{...supportHeaderResponse.props}
+				/>
+			</div>
+		);
+	}
+
+	return null;
+};
+
+/**
+ * Shows support messaging and a CTA (call to action) button in the top bar
+ * Messaging comes from the RRCP (reader revenue control panel) via the
+ * contributions service
+ *
+ * ## Why does this need to be an Island?
+ *
+ * Reader revenue links are entirely client-side and specific to a unique
+ * page view. They also relying on getting a country code.
+ *
+ * ---
+ *
+ * (No visual story exists)
+ */
+export const TopBarSupport = ({ contributionsServiceUrl }: Props) => {
+	const { renderingTarget } = useConfig();
+	const countryCode = useCountryCode('support-the-Guardian');
+	const pageViewId = usePageViewId(renderingTarget);
+
+	if (isUndefined(countryCode) || isUndefined(pageViewId)) return null;
+
+	return (
+		<ReaderRevenueLinksRemote
+			countryCode={countryCode}
+			pageViewId={pageViewId}
+			contributionsServiceUrl={contributionsServiceUrl}
+		/>
+	);
+};

dotcom-rendering/src/layouts/AllEditorialNewslettersPageLayout.tsx

@@ -80,6 +80,7 @@ export const AllEditorialNewslettersPageLayout = ({
 								newslettersPage.config.discussionApiUrl
 							}
 							idApiUrl={config.idApiUrl}
+							contributionsServiceUrl={contributionsServiceUrl}
 							showSubNav={false}
 							isImmersive={false}
 							displayRoundel={false}

dotcom-rendering/src/layouts/CommentLayout.tsx

@@ -342,6 +342,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 							}
 							discussionApiUrl={article.config.discussionApiUrl}
 							idApiUrl={article.config.idApiUrl}
+							contributionsServiceUrl={contributionsServiceUrl}
 							showSubNav={false}
 							isImmersive={false}
 							displayRoundel={false}

dotcom-rendering/src/layouts/FrontLayout.tsx

@@ -201,6 +201,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 							subscribeUrl={
 								front.nav.readerRevenueLinks.header.subscribe
 							}
+							contributionsServiceUrl={contributionsServiceUrl}
 							idApiUrl={front.config.idApiUrl}
 							showSubNav={!isPaidContent}
 							hasPageSkin={hasPageSkin}

dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx

@@ -220,6 +220,7 @@ const NavHeader = ({ article, NAV, format }: Props) => {
 					}
 					discussionApiUrl={article.config.discussionApiUrl}
 					idApiUrl={article.config.idApiUrl}
+					contributionsServiceUrl={article.contributionsServiceUrl}
 					showSubNav={false}
 					isImmersive={false}
 					displayRoundel={false}

dotcom-rendering/src/layouts/InteractiveLayout.tsx

@@ -287,6 +287,9 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 									article.config.discussionApiUrl
 								}
 								idApiUrl={article.config.idApiUrl}
+								contributionsServiceUrl={
+									contributionsServiceUrl
+								}
 								showSubNav={false}
 								isImmersive={false}
 								displayRoundel={false}

dotcom-rendering/src/layouts/LiveLayout.tsx

@@ -352,6 +352,7 @@ export const LiveLayout = (props: WebProps | AppsProps) => {
 							}
 							discussionApiUrl={article.config.discussionApiUrl}
 							idApiUrl={article.config.idApiUrl}
+							contributionsServiceUrl={contributionsServiceUrl}
 							showSubNav={false}
 							isImmersive={false}
 							displayRoundel={false}

dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx

@@ -248,6 +248,7 @@ export const NewsletterSignupLayout = ({ article, NAV, format }: Props) => {
 						}
 						discussionApiUrl={article.config.discussionApiUrl}
 						idApiUrl={article.config.idApiUrl}
+						contributionsServiceUrl={contributionsServiceUrl}
 						showSubNav={!!NAV.subNavSections}
 						isImmersive={
 							format.display === ArticleDisplay.Immersive

dotcom-rendering/src/layouts/PictureLayout.tsx

@@ -323,6 +323,7 @@ export const PictureLayout = (props: WebProps | AppsProps) => {
 							}
 							discussionApiUrl={article.config.discussionApiUrl}
 							idApiUrl={article.config.idApiUrl}
+							contributionsServiceUrl={contributionsServiceUrl}
 							showSubNav={true}
 							isImmersive={false}
 							displayRoundel={false}

dotcom-rendering/src/layouts/ShowcaseLayout.tsx

@@ -294,6 +294,9 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
 											article.config.discussionApiUrl
 										}
 										idApiUrl={article.config.idApiUrl}
+										contributionsServiceUrl={
+											contributionsServiceUrl
+										}
 										showSubNav={false}
 										isImmersive={false}
 										displayRoundel={false}

dotcom-rendering/src/layouts/StandardLayout.tsx

@@ -446,6 +446,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 								article.nav.readerRevenueLinks.header.subscribe
 							}
 							idApiUrl={article.config.idApiUrl}
+							contributionsServiceUrl={contributionsServiceUrl}
 							showSubNav={!isPaidContent}
 							hasPageSkinContentSelfConstrain={true}
 						/>

dotcom-rendering/src/layouts/TagPageLayout.tsx

@@ -109,6 +109,7 @@ export const TagPageLayout = ({ tagPage, NAV }: Props) => {
 							}
 							discussionApiUrl={tagPage.config.discussionApiUrl}
 							idApiUrl={tagPage.config.idApiUrl}
+							contributionsServiceUrl="https://contributions.guardianapis.com" // TODO: Pass this in
 							showSubNav={false}
 							isImmersive={false}
 							displayRoundel={false}