Marketing email promotions

dotcom-rendering/src/components/EmailSignUpWrapper.stories.tsx

@@ -15,6 +15,7 @@ const defaultArgs = {
 	frequency: 'Weekly',
 	successDescription: "We'll send you The Recap every week",
 	theme: 'sport',
+	emailType: 'newsletter',
 } satisfies Story['args'];
 type Story = StoryObj<typeof EmailSignUpWrapper>;
 

dotcom-rendering/src/components/EmailSignUpWrapper.tsx

@@ -30,7 +30,9 @@ export const EmailSignUpWrapper = ({
 					/>
 				</Island>
 				{!emailSignUpProps.hidePrivacyMessage && (
-					<NewsletterPrivacyMessage />
+					<NewsletterPrivacyMessage
+						emailType={emailSignUpProps.emailType}
+					/>
 				)}
 			</EmailSignup>
 		</InlineSkipToWrapper>

dotcom-rendering/src/components/EmailSignup.stories.tsx

@@ -1,3 +1,4 @@
+import { LinkButton } from '@guardian/source/react-components';
 import type { Meta, StoryObj } from '@storybook/react';
 import { allModes } from '../../.storybook/modes';
 import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
@@ -47,13 +48,14 @@ export const Default = {
 		name: 'The Week in Patriarchy',
 		frequency: 'Weekly',
 		theme: 'opinion',
+		emailType: 'newsletter',
 		children: (
 			<>
 				<SecureSignup
 					newsletterId="patriarchy"
 					successDescription="Reviewing the most important stories on feminism and sexism and those fighting for equality"
 				/>
-				<NewsletterPrivacyMessage />
+				<NewsletterPrivacyMessage emailType="newsletter" />
 			</>
 		),
 	},
@@ -75,13 +77,14 @@ export const NewsTheme = {
 		name: 'First Edition',
 		frequency: 'Every weekday',
 		theme: 'news',
+		emailType: 'newsletter',
 		children: (
 			<>
 				<SecureSignup
 					newsletterId="morning-briefing"
 					successDescription="Archie Bland and Nimo Omer take you through the top stories and what they mean, free every weekday morning"
 				/>
-				<NewsletterPrivacyMessage />
+				<NewsletterPrivacyMessage emailType="newsletter" />
 			</>
 		),
 	},
@@ -103,15 +106,37 @@ export const IrregularFrequency = {
 		name: 'Guardian Documentaries',
 		frequency: 'Whenever a new film is available',
 		theme: 'features',
+		emailType: 'newsletter',
 		children: (
 			<>
 				<SecureSignup
 					newsletterId="documentaries"
 					successDescription="Be the first to see our latest thought-provoking films, bringing you bold and original storytelling from around the world"
 				/>
-				<NewsletterPrivacyMessage />
+				<NewsletterPrivacyMessage emailType="newsletter" />
 			</>
 		),
 	},
 	parameters: Default.parameters,
 } satisfies Story;
+
+export const MarketingEmail = {
+	args: {
+		description:
+			'Find your next job with the Guardian Jobs weekly email. Get the latest job listings, as well as tips and advice on taking your next career step.',
+		name: 'Guardian Jobs',
+		theme: 'news',
+		emailType: 'marketingConsent',
+		children: (
+			<>
+				<div>
+					<LinkButton size="small">
+						Sign up from my account
+					</LinkButton>
+				</div>
+				<NewsletterPrivacyMessage emailType="marketingConsent" />
+			</>
+		),
+	},
+	parameters: Default.parameters,
+};

dotcom-rendering/src/components/EmailSignup.tsx

@@ -8,14 +8,16 @@ import {
 } from '@guardian/source/foundations';
 import { buildDetailText } from '../lib/buildNewsletterSignUpText';
 import { palette as themePalette } from '../palette';
+import type { NewsletterOrMarketingEmail } from '../types/content';
 import { NewsletterDetail } from './NewsletterDetail';
 
 export type EmailSignUpProps = {
 	name: string;
 	description: string;
-	frequency: string;
+	frequency?: string;
 	theme: string;
 	children?: React.ReactNode;
+	emailType: NewsletterOrMarketingEmail['type'];
 };
 
 const containerStyles = css`
@@ -77,22 +79,34 @@ const descriptionStyles = css`
 	max-width: ${335 + space[3] + 118}px;
 `;
 
+const ariaLabel = (emailType: NewsletterOrMarketingEmail['type']) => {
+	switch (emailType) {
+		case 'newsletter':
+			return 'newsletter promotion';
+		case 'marketingConsent':
+			return 'marketing newsletter promotion';
+	}
+};
+
 export const EmailSignup = ({
 	name,
 	description,
 	frequency,
 	theme,
 	children,
+	emailType,
 }: EmailSignUpProps) => {
 	return (
-		<aside css={containerStyles} aria-label="newsletter promotion">
+		<aside css={containerStyles} aria-label={ariaLabel(emailType)}>
 			<div css={stackBelowTabletStyles}>
 				<p css={titleStyles(theme)}>
 					Sign up to <span>{name}</span>
 				</p>
-				<div css={noHeightFromTabletStyles}>
-					<NewsletterDetail text={buildDetailText(frequency)} />
-				</div>
+				{!!frequency && (
+					<div css={noHeightFromTabletStyles}>
+						<NewsletterDetail text={buildDetailText(frequency)} />
+					</div>
+				)}
 			</div>
 			<p css={descriptionStyles}>{description}</p>
 			{children}

dotcom-rendering/src/components/ManyNewslettersForm.tsx

@@ -150,7 +150,10 @@ export const ManyNewslettersForm = ({
 					id={'man-newsletter-form-inline-skip-to-wrapper'}
 					blockDescription="Privacy Notice"
 				>
-					<NewsletterPrivacyMessage textColor="regular" />
+					<NewsletterPrivacyMessage
+						textColor="regular"
+						emailType="newsletter"
+					/>
 				</InlineSkipToWrapper>
 			</aside>
 

dotcom-rendering/src/components/MarketingEmailSignUpWrapper.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MarketingEmailSignUpWrapper } from './MarketingEmailSignUpWrapper';
+
+const meta: Meta<typeof MarketingEmailSignUpWrapper> = {
+	title: 'Components/MarketingEmailSignUpWrapper',
+	component: MarketingEmailSignUpWrapper,
+};
+
+const defaultArgs = {
+	index: 10,
+	emailId: 'jobs',
+	description:
+		'Find your next job with the Guardian Jobs weekly email. Get the latest job listings, as well as tips and advice on taking your next career step.',
+	name: 'Guardian Jobs',
+	frequency: 'Weekly',
+	emailType: 'marketingConsent',
+	theme: 'news',
+} satisfies Story['args'];
+type Story = StoryObj<typeof MarketingEmailSignUpWrapper>;
+
+export const DefaultStory: Story = {
+	args: {
+		...defaultArgs,
+	},
+};
+
+export default meta;

dotcom-rendering/src/components/MarketingEmailSignUpWrapper.tsx

@@ -0,0 +1,45 @@
+import { LinkButton } from '@guardian/source/react-components';
+import type { EmailSignUpProps } from './EmailSignup';
+import { EmailSignup } from './EmailSignup';
+import { InlineSkipToWrapper } from './InlineSkipToWrapper';
+import { NewsletterPrivacyMessage } from './NewsletterPrivacyMessage';
+
+interface MarketingEmailSignUpWrapperProps extends EmailSignUpProps {
+	index: number;
+	emailId: string;
+	mmaUrl: string;
+}
+
+export const MarketingEmailSignUpWrapper = ({
+	index,
+	mmaUrl,
+	name,
+	description,
+	emailType,
+	theme,
+}: MarketingEmailSignUpWrapperProps) => {
+	return (
+		<InlineSkipToWrapper
+			id={`EmailSignup-skip-link-${index}`}
+			blockDescription="marketing email promotion"
+		>
+			<EmailSignup
+				emailType={emailType}
+				name={name}
+				description={description}
+				theme={theme}
+			>
+				<div>
+					<LinkButton size="small" href={`${mmaUrl}/email-prefs`}>
+						Sign up from my account
+					</LinkButton>
+				</div>
+
+				<NewsletterPrivacyMessage
+					emailType={emailType}
+					textColor="regular"
+				/>
+			</EmailSignup>
+		</InlineSkipToWrapper>
+	);
+};

dotcom-rendering/src/components/NewsletterPrivacyMessage.stories.tsx

@@ -6,7 +6,11 @@ export default {
 };
 
 export const Default = () => {
-	return <NewsletterPrivacyMessage />;
+	return <NewsletterPrivacyMessage emailType="newsletter" />;
+};
+
+export const ForMarketting = () => {
+	return <NewsletterPrivacyMessage emailType="marketingConsent" />;
 };
 
 Default.storyName = 'Default';

dotcom-rendering/src/components/NewsletterPrivacyMessage.tsx

@@ -5,9 +5,11 @@ import {
 } from '@guardian/source/foundations';
 import { Link } from '@guardian/source/react-components';
 import { palette as themePalette } from '../palette';
+import type { NewsletterOrMarketingEmail } from '../types/content';
 
 interface Props {
 	textColor?: 'supporting' | 'regular';
+	emailType: NewsletterOrMarketingEmail['type'];
 }
 
 const GUARDIAN_PRIVACY_POLICY =
@@ -75,13 +77,23 @@ const textStyles = (textColor: 'supporting' | 'regular') => {
 	}
 };
 
+const intro = (emailType: NewsletterOrMarketingEmail['type']) => {
+	switch (emailType) {
+		case 'newsletter':
+			return 'Newsletters may contain info about charities, online ads, and content funded by outside parties.';
+		// TO DO - need to get compliance & marketing agreement on this wording
+		case 'marketingConsent':
+			return 'Marketing emails contain advertisments from the Guardian and third parties.';
+	}
+};
+
 export const NewsletterPrivacyMessage = ({
 	textColor = 'supporting',
+	emailType,
 }: Props) => (
 	<span css={[termsStyle, textStyles(textColor)]}>
 		<strong>Privacy Notice: </strong>
-		Newsletters may contain info about charities, online ads, and content
-		funded by outside parties. For more information see our{' '}
+		{intro(emailType)} For more information see our{' '}
 		<LegalLink href={GUARDIAN_PRIVACY_POLICY}>Privacy Policy</LegalLink>. We
 		use Google reCaptcha to protect our website and the Google{' '}
 		<LegalLink href={GOOGLE_PRIVACY_POLICY}>Privacy Policy</LegalLink> and{' '}

dotcom-rendering/src/components/Timeline.stories.tsx

@@ -83,6 +83,7 @@ const ArticleElementComponent = getNestedArticleElement({
 	 * but there are no rich links in this example.
 	 */
 	ajaxUrl: '',
+	mmaUrl: '',
 	editionId: 'UK',
 	isAdFreeUser: false,
 	isSensitive: false,

dotcom-rendering/src/components/marketing/epics/ContributionsEpicNewsletterSignup.tsx

@@ -29,7 +29,7 @@ export const ContributionsEpicNewsletterSignup = ({
 					variant: tracking.abTestVariant,
 				}}
 			/>
-			<NewsletterPrivacyMessage />
+			<NewsletterPrivacyMessage emailType="newsletter" />
 		</div>
 	);
 };

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

@@ -697,6 +697,9 @@
                 {
                     "$ref": "#/definitions/NewsletterSignupBlockElement"
                 },
+                {
+                    "$ref": "#/definitions/MarketingEmailSignupBlockElement"
+                },
                 {
                     "$ref": "#/definitions/ProfileAtomBlockElement"
                 },
@@ -2882,6 +2885,44 @@
                 "newsletter"
             ]
         },
+        "MarketingEmailSignupBlockElement": {
+            "type": "object",
+            "properties": {
+                "_type": {
+                    "type": "string",
+                    "const": "model.dotcomrendering.pageElements.MarketingEmailSignupBlockElement"
+                },
+                "marketingEmail": {
+                    "type": "object",
+                    "properties": {
+                        "id": {
+                            "type": "string"
+                        },
+                        "name": {
+                            "type": "string"
+                        },
+                        "description": {
+                            "type": "string"
+                        },
+                        "promotionTagId": {
+                            "type": "string"
+                        }
+                    },
+                    "required": [
+                        "description",
+                        "id",
+                        "name"
+                    ]
+                },
+                "elementId": {
+                    "type": "string"
+                }
+            },
+            "required": [
+                "_type",
+                "marketingEmail"
+            ]
+        },
         "ProfileAtomBlockElement": {
             "type": "object",
             "properties": {

dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx

@@ -58,6 +58,7 @@ type RendererProps = {
 	pageId: string;
 	webTitle: string;
 	ajaxUrl: string;
+	mmaUrl?: string;
 	isAdFreeUser: boolean;
 	isSensitive: boolean;
 	abTests: ServerSideTests;
@@ -71,6 +72,7 @@ const Renderer = ({
 	host,
 	pageId,
 	webTitle,
+	mmaUrl,
 	ajaxUrl,
 	isAdFreeUser,
 	isSensitive,
@@ -93,6 +95,7 @@ const Renderer = ({
 			pageId,
 			webTitle,
 			ajaxUrl,
+			mmaUrl,
 			isAdFreeUser,
 			isSensitive,
 			abTests,
@@ -292,6 +295,7 @@ export const FullPageInteractiveLayout = (props: WebProps | AppsProps) => {
 						pageId={article.pageId}
 						webTitle={article.webTitle}
 						ajaxUrl={article.config.ajaxUrl}
+						mmaUrl={article.config.mmaUrl}
 						abTests={article.config.abTests}
 						switches={article.config.switches}
 						isAdFreeUser={article.isAdFreeUser}