Merge branch 'main' into automatic-upload

legacy/src/_shared/js/capi-multiple.js

@@ -33,7 +33,7 @@ function buildTitle (card, cardInfo, cardNumber) {
     let title = card.querySelector('.advert__title');
     let kickerText = OVERRIDES.kickers[cardNumber];
 
-    let kicker = kickerText ? `<span class="advert__kicker">${kickerText}</span>` : '';
+    let kicker = kickerText ? `<span class="advert__kicker">${kickerText}</span><br />` : '';
     let icon = '';
     let headline = OVERRIDES.headlines[cardNumber] || cardInfo.articleHeadline;
 

legacy/src/_shared/scss/_adverts-capi.scss

@@ -62,7 +62,7 @@
 }
 
 .adverts--tone-paidfor {
-    background-color: $neutral-6;
+    background-color: #ededed;
 
     > .adverts__header {
         background: $paidfor-background;
@@ -231,8 +231,7 @@
             fill: $paid-article-icon;
         }
 
-        .advert__kicker,
-        .advert__kicker::after {
+        .advert__kicker {
             color: $paid-card-kicker;
         }
     }
@@ -296,16 +295,3 @@
     }
 
 }
-
-.advert__kicker {
-    &:after {
-        content: '/';
-        display: inline-block;
-        margin-left: .2em;
-        color: mix($neutral-1, #ffffff, 20%);
-    }
-
-    &:hover:after {
-        text-decoration: none;
-    }
-}

legacy/src/_shared/scss/_adverts-fabric.scss

@@ -0,0 +1,3 @@
+body {
+	margin: 0;
+}

legacy/src/_shared/scss/_adverts-merchandising.scss

@@ -0,0 +1,3 @@
+body {
+	margin: 0;
+}

legacy/src/_shared/scss/_adverts.scss

@@ -270,7 +270,7 @@
             }
         }
 
-                
+
         @include mq(leftCol) {
             padding: $gs-baseline 0;
         }
@@ -574,7 +574,7 @@
 
 /* Theming */
 .adverts--legacy {
-    background: #eaeaea;
+    background: #ededed;
 
     > .adverts__header .button {
         color: #000000;

legacy/src/_shared/scss/_hosted.scss

@@ -5,7 +5,7 @@ $phablet: 660px;
 .creative--hosted {
     font-family: $f-sans-serif-text;
     min-height: 100px;
-    background: #e9e9e9;
+    background: #ededed;
 
     @include mq(tablet) {
         background: none;
@@ -17,7 +17,7 @@ $phablet: 660px;
     padding: 6px 0 24px;
     border-top: 1px solid;
     margin: 0 auto;
-    background: #e9e9e9;
+    background: #ededed;
 
     @include mq($until: mobileLandscape) {
         margin-left: 10px;

legacy/src/capi-multiple-hosted/web/index.scss

@@ -1,6 +1,7 @@
 @import '_core';
 @import '_adverts-capi';
 @import '_hosted';
+@import '_adverts-merchandising';
 
 .advert__image-container {
   position: relative;

legacy/src/capi-multiple-paidfor/app/app-capi-multiple.js

@@ -31,7 +31,7 @@ function buildTitle (card, cardInfo, cardNumber) {
     let title = card.querySelector('.advert__title');
     let kickerText = OVERRIDES.kickers[cardNumber];
 
-    let kicker = kickerText ? `<span class="advert__kicker">${kickerText}</span>` : '';
+    let kicker = kickerText ? `<span class="advert__kicker">${kickerText}</span><br />` : '';
     let icon = '';
     let headline = OVERRIDES.headlines[cardNumber] || cardInfo.articleHeadline;
 

legacy/src/capi-multiple-paidfor/web/index.scss

@@ -5,6 +5,7 @@
 @import '_paidfor-meta';
 @import '_palette';
 @import '_popup-paidfor';
+@import '_adverts-merchandising';
 
 .adverts {
     color: $neutral-1;

legacy/src/capi-single-paidfor/web/index.html

@@ -53,8 +53,8 @@ <h1 class="adverts__title">
   <div class="adverts__body"></div>
 </aside>
 <script>
-  var arrowRight = "{{#svg}}arrow-right{{/svg}}";
-  var audioIcon = "{{#svg}}audio{{/svg}}";
-  var imageIcon = "{{#svg}}image{{/svg}}";
-  var videoIcon = "{{#svg}}video{{/svg}}";
+  var arrowRight = `{{#svg}}arrow-right{{/svg}}`;
+  var audioIcon = `{{#svg}}audio{{/svg}}`;
+  var imageIcon = `{{#svg}}image{{/svg}}`;
+  var videoIcon = `{{#svg}}video{{/svg}}`;
 </script>

legacy/src/capi-single-paidfor/web/index.scss

@@ -45,7 +45,8 @@
     }
 
     .badge__logo {
-      width: 200px;
+      display: block;
+      max-width: 200px;
       margin-left: 0;
     }
   }

legacy/src/events-multiple/web/index.scss

@@ -3,4 +3,4 @@
 @import '_adverts-masterclasses';
 @import '_adverts-live';
 @import '_advert';
-
+@import '_adverts-merchandising';

legacy/src/fabric-custom/web/index.scss

@@ -1 +1,2 @@
 @import '_core';
+@import '_adverts-fabric';

legacy/src/fabric-video/web/index.scss

@@ -1,4 +1,5 @@
 @import '_core';
+@import '_adverts-fabric';
 
 .creative--fabric-video {
     margin: auto;

legacy/src/fabric/web/index.scss

@@ -1,4 +1,5 @@
 @import '_core';
+@import '_adverts-fabric';
 
 .creative--fabric {
     &,

legacy/src/manual-multiple/web/index.scss

@@ -21,3 +21,4 @@
 @import '_adverts-climate';
 @import '_adverts-support';
 @import '_adverts-subs-rebrand';
+@import '_adverts-merchandising';

legacy/src/programmatic-dmpu/test.json

@@ -4,5 +4,6 @@
   "TrackingPixel": "https://gu.com/tracking-pixel.gif",
   "ResearchPixel": "https://gu.com/research-pixel.gif",
   "ViewabilityTracker": "<img src='https://gu.com/viewability-tracker.gif'>",
-  "BackgroundImage":"https://adops-assets.s3.amazonaws.com/dap-fabrics/prog-dmpu-test-image/dmpu-test.jpg"
+  "BackgroundImage":"https://adops-assets.s3.amazonaws.com/dap-fabrics/prog-dmpu-test-image/dmpu-test.jpg",
+  "thirdPartyJSTracking": "<SCRIPT TYPE='application/javascript' SRC='https://pixel.adsafeprotected.com/rjss/st/726370/54949606/skeleton.js'></SCRIPT> <NOSCRIPT><IMG SRC='https://pixel.adsafeprotected.com/rfw/st/726370/54949605/skeleton.gif?gdpr=${GDPR}&gdpr_consent=${GDPR_CONSENT_278}&gdpr_pd=${GDPR_PD}' BORDER=0 WIDTH=1 HEIGHT=1 ALT=''></NOSCRIPT>"
 }

legacy/src/programmatic-dmpu/web/index.html

@@ -7,3 +7,4 @@
   <img src="[%ResearchPixel%]%%CACHEBUSTER%%" class="creative__pixel">
   <img src="[%ViewabilityTracker%]%%CACHEBUSTER%%" class="creative__pixel">
 <div>
+[%thirdPartyJSTracking%]

legacy/src/programmatic-mpu/test.json

@@ -4,5 +4,6 @@
   "TrackingPixel": "https://gu.com/tracking-pixel.gif",
   "ResearchPixel": "https://gu.com/research-pixel.gif",
   "ViewabilityTracker": "<img src='https://gu.com/viewability-tracker.gif'>",
-  "BackgroundImage":"https://adops-assets.s3.amazonaws.com/SkySports_Aug18_Background.jpg"
+  "BackgroundImage":"https://adops-assets.s3.amazonaws.com/SkySports_Aug18_Background.jpg",
+  "thirdPartyJSTracking": "<SCRIPT TYPE='application/javascript' SRC='https://pixel.adsafeprotected.com/rjss/st/726370/54949606/skeleton.js'></SCRIPT> <NOSCRIPT><IMG SRC='https://pixel.adsafeprotected.com/rfw/st/726370/54949605/skeleton.gif?gdpr=${GDPR}&gdpr_consent=${GDPR_CONSENT_278}&gdpr_pd=${GDPR_PD}' BORDER=0 WIDTH=1 HEIGHT=1 ALT=''></NOSCRIPT>"
 }

legacy/src/programmatic-mpu/web/index.html

@@ -7,3 +7,4 @@
   <img src="[%ResearchPixel%]%%CACHEBUSTER%%" class="creative__pixel">
   <img src="[%ViewabilityTracker%]%%CACHEBUSTER%%" class="creative__pixel">
 <div>
+[%thirdPartyJSTracking%]

src/lib/Previews.svelte

@@ -34,7 +34,7 @@
 	};
 
 	onMount(() => {
-		window.addEventListener('message', (ev: MessageEvent<Message>) => {
+		window.addEventListener('message', (ev: MessageEvent<string>) => {
 			if (!ev.isTrusted) return;
 
 			const { source, data: json } = ev;
@@ -49,7 +49,16 @@
 					const iframe = source.frameElement as HTMLIFrameElement;
 					iframe.height = String(data.value.height);
 					break;
-
+				case 'get-page-url':
+					source.postMessage(
+						JSON.stringify({
+							id: data.id,
+							result:
+								'https://www.theguardian.com/lifeandstyle/2023/jul/19/a-moment-that-changed-me-i-borrowed-a-dog-and-discovered-a-healthier-happier-way-of-life',
+						}),
+						'*',
+					);
+					break;
 				default:
 					break;
 			}

src/lib/cmp.ts

@@ -0,0 +1,68 @@
+import { generateId, timeout } from './messenger';
+
+interface ConsentState {
+	dateCreated: string;
+	gpcEnabled: boolean;
+	newUser: boolean;
+	uspString: string;
+}
+
+interface CmpReturn {
+	__cmpReturn: {
+		returnValue: ConsentState;
+		callId: string;
+		success: boolean;
+	};
+}
+
+const isReplyFromCMP = (json: unknown): json is CmpReturn => {
+	const reply = json as CmpReturn;
+	return '__cmpReturn' in reply && typeof reply.__cmpReturn === 'object';
+};
+
+const decodeReply = (e: MessageEvent<string>): CmpReturn | void => {
+	try {
+		const json: unknown = JSON.parse(e.data);
+
+		if (isReplyFromCMP(json)) {
+			return json;
+		}
+
+		return;
+	} catch (_) {
+		return;
+	}
+};
+
+const isCcpaOptedOut = (consentState: ConsentState) => {
+	return consentState.uspString[2] === 'Y';
+};
+
+const getUSPData = async (): Promise<ConsentState | void> =>
+	timeout(
+		new Promise((resolve) => {
+			const callId = generateId();
+			const message = {
+				__cmpCall: {
+					command: 'getUSPData',
+					version: 1,
+					callId,
+				},
+			};
+
+			const listener = (e: MessageEvent<string>) => {
+				const decoded = decodeReply(e);
+				if (decoded && decoded.__cmpReturn.callId === callId) {
+					resolve(decoded.__cmpReturn.returnValue);
+					window.removeEventListener('message', listener);
+				}
+			};
+
+			window.addEventListener('message', listener);
+
+			window.top?.postMessage(JSON.stringify(message), '*');
+		}),
+		3000,
+	);
+
+export { getUSPData, isCcpaOptedOut };

src/lib/messenger.ts

@@ -1,12 +1,15 @@
 type StandardMessage<Type = string, Data = unknown> = {
 	type: Type;
+	id?: string;
 	iframeId?: string;
 	slotId?: string;
 	/**
 	 * The `value` property is generic since it is up to the sender to attach arbitrary data
 	 *
 	 * We mostly treat this as unknown and leave it up to the message
 	 * listeners to convert to a type they can handle
+	 *
+	 * Although some messages don't have a value property, e.g. 'get-page-url', this property is still required due to validation in messenger.ts in the commercial repo
 	 */
 	value: Data;
 };
@@ -27,12 +30,28 @@ type BackgroundMessage = StandardMessage<
 		backgroundPosition: string;
 		backgroundSize: string;
 		ctaUrl: string;
+		videoSource: string;
 	}
 >;
 
 type TypeMessage = StandardMessage<'type', string>;
 
-type Message = ResizeMessage | StringMessage | BackgroundMessage | TypeMessage;
+type GetPageURLMessage = StandardMessage<'get-page-url', string>;
+
+type PassbackRefreshMessage = StandardMessage<'passback-refresh', string>;
+
+type Message =
+	| ResizeMessage
+	| StringMessage
+	| BackgroundMessage
+	| TypeMessage
+	| GetPageURLMessage
+	| PassbackRefreshMessage;
+
+type MessengerResponse = {
+	id: string;
+	result: string;
+};
 
 const generateId = () => {
 	const _4chars = () =>
@@ -42,6 +61,12 @@ const generateId = () => {
 	return `${_4chars()}${_4chars()}-${_4chars()}-${_4chars()}-${_4chars()}-${_4chars()}${_4chars()}${_4chars()}`;
 };
 
+const timeout = async <T>(promise: Promise<T>, ms: number): Promise<T | void> =>
+	Promise.race([
+		promise,
+		new Promise<void>((resolve) => window.setTimeout(resolve, ms)),
+	]);
+
 /**
  * Post message to parent frame
  *
@@ -52,5 +77,49 @@ const post = (arg: Message): void => {
 	window.top?.postMessage(JSON.stringify({ id: generateId(), ...arg }), '*');
 };
 
-export { post };
+const isReplyFromMessenger = (json: unknown): json is MessengerResponse => {
+	const reply = json as MessengerResponse;
+	return (
+		'result' in reply &&
+		typeof reply.result === 'string' &&
+		'id' in reply &&
+		typeof reply.id === 'string'
+	);
+};
+
+const decodeReply = (e: MessageEvent<string>): MessengerResponse | void => {
+	try {
+		const json: unknown = JSON.parse(e.data);
+
+		if (isReplyFromMessenger(json)) {
+			return json;
+		}
+
+		return;
+	} catch (_) {
+		return;
+	}
+};
+
+const postAndListen = (arg: Message): Promise<string | void> =>
+	timeout(
+		new Promise((resolve) => {
+			const id = generateId();
+
+			const listener = (e: MessageEvent<string>) => {
+				const decoded = decodeReply(e);
+				if (decoded && decoded.id === id) {
+					resolve(decoded.result);
+					window.removeEventListener('message', listener);
+				}
+			};
+
+			window.addEventListener('message', listener);
+
+			post({ ...arg, id });
+		}),
+		3000,
+	);
+
+export { post, timeout, postAndListen, generateId };
 export type { Message };