Merge branch 'main' into mob/scrollable-products

Author: oliverabrahams

dotcom-rendering/fixtures/manual/productBlockElement.ts

@@ -4,7 +4,7 @@ import { productImage } from './productImage';
 export const exampleProduct: ProductBlockElement = {
 	_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
 	elementId: 'b1f6e8e2-3f3a-4f0c-8d1e-5f3e3e3e3e3e',
-	primaryHeadingHtml: '<em>Best Kettle overall</em>',
+	primaryHeadingHtml: 'Best overall',
 	secondaryHeadingHtml: 'Bosch Sky Kettle',
 	brandName: 'Bosch',
 	productName: 'Sky Kettle',

dotcom-rendering/src/components/Discussion/AbuseReportForm.tsx

@@ -225,7 +225,12 @@ export const AbuseReportForm = ({
 		formVariables.categoryId === legalIssueCategoryId;
 
 	return (
-		<div aria-modal="true" ref={modalRef}>
+		<div
+			role="dialog"
+			aria-modal="true"
+			aria-label="Report abuse"
+			ref={modalRef}
+		>
 			<form css={formWrapper} onSubmit={onSubmit}>
 				<div
 					css={[

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

@@ -31,6 +31,7 @@ export interface DropdownLinkType {
 	isActive?: boolean;
 	dataLinkName: string;
 	notifications?: Notification[];
+	onClick?: () => void;
 }
 
 interface Props {
@@ -370,6 +371,7 @@ const DropdownLink = ({ link, index }: DropdownLinkProps) => {
 							renderingTarget,
 						);
 					}
+					link.onClick?.();
 				}}
 			>
 				<div>

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

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { centreColumnDecorator } from '../../.storybook/decorators/gridDecorators';
+import { allModes } from '../../.storybook/modes';
+import { exampleProduct } from '../../fixtures/manual/productBlockElement';
+import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
+import { HorizontalSummaryProductCard } from './HorizontalSummaryProductCard';
+
+const meta = {
+	title: 'Components/Horizontal Summary Product Card',
+	component: HorizontalSummaryProductCard,
+	args: {
+		product: { ...exampleProduct, h2Id: 'example-1' },
+		format: {
+			design: ArticleDesign.Standard,
+			display: ArticleDisplay.Standard,
+			theme: Pillar.Lifestyle,
+		},
+	},
+	parameters: {
+		chromatic: {
+			modes: {
+				'vertical mobile': allModes['vertical mobile'],
+				'vertical wide': allModes['vertical wide'],
+			},
+		},
+	},
+	decorators: [centreColumnDecorator],
+} satisfies Meta<typeof HorizontalSummaryProductCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default = {} satisfies Story;

dotcom-rendering/src/components/HorizontalSummaryProductCard.tsx

@@ -0,0 +1,120 @@
+import { css } from '@emotion/react';
+import {
+	from,
+	headlineBold20,
+	headlineMedium17,
+	space,
+	textSansBold15,
+	textSansBold17,
+} from '@guardian/source/foundations';
+import type { ArticleFormat } from '../lib/articleFormat';
+import { palette } from '../palette';
+import type { ProductBlockElement } from '../types/content';
+import { ProductCardImage } from './ProductCardImage';
+import { ProductLinkButton } from './ProductLinkButton';
+
+const horizontalCard = css`
+	position: relative;
+	border-top: 1px solid ${palette('--section-border')};
+	padding-top: ${space[2]}px;
+	display: grid;
+	grid-template-columns: 118px 1fr;
+	grid-column-gap: 10px;
+	grid-row-gap: ${space[2]}px;
+	grid-template-areas:
+		'image information'
+		'button button';
+	${from.phablet} {
+		grid-template-areas: 'image information';
+	}
+`;
+const imageContainer = css`
+	img {
+		width: 100%;
+		height: auto;
+	}
+	grid-area: image;
+`;
+const informationContainer = css`
+	display: flex;
+	flex-direction: column;
+	grid-area: information;
+`;
+
+const buttonContainer = css`
+	grid-area: button;
+	${from.phablet} {
+		grid-area: information;
+		position: absolute;
+		width: 220px;
+		bottom: 0;
+		right: 0;
+	}
+`;
+
+const readMore = css`
+	${textSansBold15};
+	text-decoration-line: underline;
+	text-decoration-color: ${palette('--product-card-read-more-decoration')};
+	color: ${palette('--product-card-read-more')};
+	text-underline-offset: 20%;
+`;
+
+const productCardHeading = css`
+	${headlineBold20};
+	color: ${palette('--product-card-headline')};
+`;
+
+const secondaryHeading = css`
+	${headlineMedium17};
+`;
+
+const price = css`
+	margin-top: auto;
+	${textSansBold17};
+`;
+
+export const HorizontalSummaryProductCard = ({
+	product,
+	format,
+}: {
+	product: ProductBlockElement;
+	format: ArticleFormat;
+}) => {
+	const cardCta = product.productCtas[0];
+	if (!cardCta) return null;
+
+	return (
+		<div css={horizontalCard}>
+			<div css={imageContainer}>
+				<ProductCardImage
+					format={format}
+					image={product.image}
+					url={cardCta.url}
+				/>
+			</div>
+			<div css={informationContainer}>
+				<div
+					css={productCardHeading}
+					dangerouslySetInnerHTML={{
+						__html: product.primaryHeadingHtml,
+					}}
+				></div>
+				<div css={secondaryHeading}>{product.secondaryHeadingHtml}</div>
+				<a href={`#${product.h2Id}`} css={readMore}>
+					Read more
+				</a>
+				<div css={price}>{cardCta.price}</div>
+			</div>
+			<div css={buttonContainer}>
+				<ProductLinkButton
+					size="small"
+					fullwidth={true}
+					minimisePadding={true}
+					label={'Buy at ' + cardCta.retailer}
+					url={cardCta.url}
+				/>
+			</div>
+		</div>
+	);
+};

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

@@ -17,7 +17,8 @@ import {
 	reportTrackingEvent,
 	requestMultipleSignUps,
 } from '../lib/newsletter-sign-up-requests';
-import { useIsSignedIn } from '../lib/useAuthStatus';
+import { clearSubscriptionCache } from '../lib/newsletterSubscriptionCache';
+import { useAuthStatus, useIsSignedIn } from '../lib/useAuthStatus';
 import { useConfig } from './ConfigContext';
 import { Flex } from './Flex';
 import { ManyNewslettersForm } from './ManyNewslettersForm';
@@ -131,6 +132,7 @@ export const ManyNewsletterSignUp = ({
 	visibleRecaptcha = false,
 }: Props) => {
 	const isSignedIn = useIsSignedIn();
+	const authStatus = useAuthStatus();
 
 	const [newslettersToSignUpFor, setNewslettersToSignUpFor] = useState<
 		{
@@ -297,6 +299,11 @@ export const ManyNewsletterSignUp = ({
 				...(marketingOptIn !== undefined && { marketingOptInType }),
 			},
 		);
+
+		if (authStatus.kind === 'SignedIn') {
+			clearSubscriptionCache();
+		}
+
 		setStatus('Success');
 	};
 

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

@@ -21,7 +21,8 @@ import { useEffect, useRef, useState } from 'react';
 import ReactGoogleRecaptcha from 'react-google-recaptcha';
 import { submitComponentEvent } from '../client/ophan/ophan';
 import { lazyFetchEmailWithTimeout } from '../lib/fetchEmail';
-import { useIsSignedIn } from '../lib/useAuthStatus';
+import { clearSubscriptionCache } from '../lib/newsletterSubscriptionCache';
+import { useAuthStatus, useIsSignedIn } from '../lib/useAuthStatus';
 import { palette } from '../palette';
 import type { RenderingTarget } from '../types/renderingTarget';
 import { useConfig } from './ConfigContext';
@@ -286,6 +287,7 @@ export const SecureSignup = ({
 		undefined,
 	);
 	const isSignedIn = useIsSignedIn();
+	const authStatus = useAuthStatus();
 
 	useEffect(() => {
 		if (isSignedIn !== 'Pending' && !isSignedIn) {
@@ -327,6 +329,10 @@ export const SecureSignup = ({
 		setIsWaitingForResponse(false);
 		setResponseOk(response.ok);
 
+		if (response.ok && authStatus.kind === 'SignedIn') {
+			clearSubscriptionCache();
+		}
+
 		sendTracking(
 			newsletterId,
 			response.ok ? 'submission-confirmed' : 'submission-failed',

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

@@ -10,6 +10,7 @@ import { Hide } from '@guardian/source/react-components';
 import { useEffect, useState } from 'react';
 import { addTrackingCodesToUrl } from '../lib/acquisitions';
 import type { EditionId } from '../lib/edition';
+import { clearSubscriptionCache } from '../lib/newsletterSubscriptionCache';
 import { nestedOphanComponents } from '../lib/ophan-helpers';
 import { useAuthStatus } from '../lib/useAuthStatus';
 import { usePageViewId } from '../lib/usePageViewId';
@@ -124,6 +125,12 @@ export const TopBar = ({
 		setReferrerUrl(window.location.origin + window.location.pathname);
 	}, []);
 
+	useEffect(() => {
+		if (authStatus.kind === 'SignedOut') {
+			clearSubscriptionCache();
+		}
+	}, [authStatus.kind]);
+
 	const printSubscriptionsHref = addTrackingCodesToUrl({
 		base: `https://support.theguardian.com/subscribe${
 			editionId === 'UK' ? '' : '/weekly'

dotcom-rendering/src/components/TopBarMyAccount.tsx

@@ -14,6 +14,7 @@ import { useEffect, useState } from 'react';
 import { getZIndex } from '../lib/getZIndex';
 import type { SignedIn } from '../lib/identity';
 import { createAuthenticationEventParams } from '../lib/identity-component-event';
+import { clearSubscriptionCache } from '../lib/newsletterSubscriptionCache';
 import {
 	addNotificationsToDropdownLinks,
 	mapBrazeCardsToNotifications,
@@ -131,6 +132,9 @@ export const buildIdentityLinks = (
 
 	return links.map((link) => ({
 		...link,
+		...(link.id === 'sign_out'
+			? { onClick: () => clearSubscriptionCache() }
+			: {}),
 		dataLinkName: nestedOphanComponents(
 			'header',
 			'topbar',

dotcom-rendering/src/lib/newsletterSubscriptionCache.ts

@@ -0,0 +1,102 @@
+import { storage } from '@guardian/libs';
+import type { SignedIn } from './identity';
+import { getOptionsHeaders } from './identity';
+
+const CACHE_KEY = 'gu.newsletter.subscriptions';
+const CACHE_DURATION_MS = 5 * 60 * 1000; // 5 minutes
+
+interface NewsletterSubscriptionCache {
+	listIds: number[];
+	timestamp: number;
+	userId: string;
+}
+
+export const getCachedSubscriptions =
+	(): NewsletterSubscriptionCache | null => {
+		try {
+			const cached = storage.session.get(CACHE_KEY);
+			if (!cached || typeof cached !== 'string') return null;
+
+			const parsed = JSON.parse(cached) as NewsletterSubscriptionCache;
+
+			const now = Date.now();
+			if (now - parsed.timestamp > CACHE_DURATION_MS) {
+				storage.session.remove(CACHE_KEY);
+				return null;
+			}
+
+			return parsed;
+		} catch (error) {
+			storage.session.remove(CACHE_KEY);
+			return null;
+		}
+	};
+
+export const setCachedSubscriptions = (
+	listIds: number[],
+	userId: string,
+): void => {
+	try {
+		const cache: NewsletterSubscriptionCache = {
+			listIds,
+			timestamp: Date.now(),
+			userId,
+		};
+		storage.session.set(CACHE_KEY, JSON.stringify(cache));
+	} catch (error) {
+		// Silent failure - cache update is not critical
+	}
+};
+
+export const clearSubscriptionCache = (): void => {
+	storage.session.remove(CACHE_KEY);
+};
+
+export const shouldInvalidateCache = (
+	cache: NewsletterSubscriptionCache,
+	currentUserId?: string,
+): boolean => {
+	if (!currentUserId || cache.userId !== currentUserId) {
+		return true;
+	}
+	return false;
+};
+
+export interface NewsletterSubscriptionResponse {
+	result: {
+		subscriptions: Array<{
+			listId: string;
+		}>;
+	};
+}
+
+/**
+ * Fetches newsletter subscriptions from the Identity API and updates the cache.
+ */
+export const fetchNewsletterSubscriptions = async (
+	idApiUrl: string,
+	userId: string,
+	authStatus: SignedIn,
+): Promise<number[] | null> => {
+	try {
+		const options = getOptionsHeaders(authStatus);
+		const response = await fetch(`${idApiUrl}/users/me/newsletters`, {
+			method: 'GET',
+			credentials: 'include',
+			...options,
+		});
+
+		if (!response.ok) {
+			return null;
+		}
+
+		const data = (await response.json()) as NewsletterSubscriptionResponse;
+		const newsletters = data.result.subscriptions;
+		const listIds = newsletters.map((n) => Number(n.listId));
+
+		setCachedSubscriptions(listIds, userId);
+		return listIds;
+	} catch (error) {
+		return null;
+	}
+};