Skip to content

Commit 42ac073

Browse files
GHaberisGHaberis
authored
Merge branch 'main' into gh-ab-docs
2 parents cb5e928 + 9f96452 commit 42ac073

File tree

9 files changed

+104
-63
lines changed

9 files changed

+104
-63
lines changed

‎dotcom-rendering/src/components/Card/Card.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -162,8 +162,6 @@ export type Props = {
162162
headlinePosition?: 'inner' | 'outer';
163163
/** Feature flag for the labs redesign work */
164164
showLabsRedesign?: boolean;
165-
/** Feature flag for the enabling CORS loading on looping video */
166-
enableLoopVideoCORS?: boolean;
167165
};
168166

169167
const starWrapper = (cardHasImage: boolean) => css`
@@ -408,7 +406,6 @@ export const Card = ({
408406
headlinePosition = 'inner',
409407
showLabsRedesign = false,
410408
subtitleSize = 'small',
411-
enableLoopVideoCORS = false,
412409
}: Props) => {
413410
const hasSublinks = supportingContent && supportingContent.length > 0;
414411
const sublinkPosition = decideSublinkPosition(
@@ -960,7 +957,6 @@ export const Card = ({
960957
media.mainMedia.subtitleSource
961958
}
962959
subtitleSize={subtitleSize}
963-
enableLoopVideoCORS={enableLoopVideoCORS}
964960
/>
965961
</Island>
966962
)}

‎dotcom-rendering/src/components/DecideContainer.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,6 @@ type Props = {
4949
containerLevel?: DCRContainerLevel;
5050
/** Feature flag for the labs redesign work */
5151
showLabsRedesign?: boolean;
52-
/** Feature flag for the enabling CORS loading on looping video */
53-
enableLoopVideoCORS: boolean;
5452
};
5553

5654
export const DecideContainer = ({
@@ -67,7 +65,6 @@ export const DecideContainer = ({
6765
collectionId,
6866
containerLevel,
6967
showLabsRedesign = false,
70-
enableLoopVideoCORS = false,
7168
}: Props) => {
7269
switch (containerType) {
7370
case 'dynamic/fast':
@@ -251,7 +248,6 @@ export const DecideContainer = ({
251248
aspectRatio={aspectRatio}
252249
collectionId={collectionId}
253250
showLabsRedesign={!!showLabsRedesign}
254-
enableLoopVideoCORS={enableLoopVideoCORS}
255251
/>
256252
);
257253
case 'flexible/general':
@@ -266,7 +262,6 @@ export const DecideContainer = ({
266262
containerLevel={containerLevel}
267263
collectionId={collectionId}
268264
showLabsRedesign={!!showLabsRedesign}
269-
enableLoopVideoCORS={enableLoopVideoCORS}
270265
/>
271266
);
272267
case 'scrollable/small':

‎dotcom-rendering/src/components/EnhanceAffiliateLinks.importable.tsx‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { useEffect } from 'react';
22
import { getSkimlinksAccountId, isSkimlink } from '../lib/affiliateLinksUtils';
3+
import { useBetaAB } from '../lib/useAB';
34

45
/**
56
* Add custom parameters to skimlink URLs:
6-
* - referrer
7+
* - Referrer
78
* - Skimlinks account ID
9+
* - AB test participations
810
*
911
* ## Why does this need to be an Island?
1012
*
@@ -15,6 +17,18 @@ import { getSkimlinksAccountId, isSkimlink } from '../lib/affiliateLinksUtils';
1517
* (No visual story exists as this does not render anything)
1618
*/
1719
export const EnhanceAffiliateLinks = () => {
20+
const abTests = useBetaAB();
21+
22+
// Get users server/client-side AB test participations
23+
const abTestParticipations = abTests?.getParticipations();
24+
25+
// Reduce abTestParticipations to a comma-separated string
26+
const abTestString = abTestParticipations
27+
? Object.entries(abTestParticipations)
28+
.map(([key, value]) => `${key}:${value}`)
29+
.join(',')
30+
: '';
31+
1832
useEffect(() => {
1933
const allLinksOnPage = [...document.querySelectorAll('a')];
2034

@@ -28,7 +42,9 @@ export const EnhanceAffiliateLinks = () => {
2842
const skimlinksAccountId = getSkimlinksAccountId(link.href);
2943

3044
// Skimlinks treats xcust as one long string, so we use | to separate values
31-
const xcustValue = `referrer|${referrerDomain}|accountId|${skimlinksAccountId}`;
45+
const xcustValue = `referrer|${referrerDomain}|accountId|${skimlinksAccountId}${
46+
abTestString ? `|abTestParticipations|${abTestString}` : ''
47+
}`;
3248

3349
link.href = `${link.href}&xcust=${encodeURIComponent(
3450
xcustValue,

‎dotcom-rendering/src/components/EnhanceAffiliateLinks.test.tsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import '@testing-library/jest-dom';
2+
import { render } from '@testing-library/react';
3+
import { useBetaAB } from '../lib/useAB';
4+
import { EnhanceAffiliateLinks } from './EnhanceAffiliateLinks.importable';
5+
6+
// Mock the useAB module
7+
jest.mock('../lib/useAB', () => ({
8+
useBetaAB: jest.fn(),
9+
}));
10+
11+
describe('EnhanceAffiliateLinks', () => {
12+
beforeEach(() => {
13+
// Clear the DOM before each test
14+
document.body.innerHTML = '';
15+
jest.restoreAllMocks();
16+
});
17+
18+
it('should not modify links if no Skimlinks are present', () => {
19+
document.body.innerHTML = `
20+
<a href="https://example.com">Not a Skimlink</a>
21+
`;
22+
23+
render(<EnhanceAffiliateLinks />);
24+
25+
const link = document.querySelector('a');
26+
expect(link?.href).toBe('https://example.com/');
27+
});
28+
29+
it('should append xcust parameter to Skimlinks with referrer set to none if unavailable', () => {
30+
Object.defineProperty(document, 'referrer', {
31+
value: '',
32+
configurable: true,
33+
});
34+
35+
document.body.innerHTML = `
36+
<a href="https://go.skimresources.com/?id=12345">Skimlink</a>
37+
`;
38+
39+
render(<EnhanceAffiliateLinks />);
40+
41+
const link = document.querySelector('a');
42+
expect(link?.href).toContain(
43+
'xcust=referrer%7Cnone%7CaccountId%7C12345',
44+
);
45+
});
46+
47+
it('should append xcust parameter to Skimlinks with referrer set if available', () => {
48+
Object.defineProperty(document, 'referrer', {
49+
value: 'https://foo.com',
50+
configurable: true,
51+
});
52+
53+
document.body.innerHTML = `
54+
<a href="https://go.skimresources.com/?id=12345">Skimlink</a>
55+
`;
56+
57+
render(<EnhanceAffiliateLinks />);
58+
59+
const link = document.querySelector('a');
60+
expect(link?.href).toContain(
61+
'xcust=referrer%7Cfoo.com%7CaccountId%7C12345',
62+
);
63+
});
64+
65+
it('should include AB test participations in xcust if present', () => {
66+
document.body.innerHTML = `
67+
<a href="https://go.skimresources.com/?id=12345">Skimlink</a>
68+
`;
69+
70+
(useBetaAB as jest.Mock).mockReturnValue({
71+
getParticipations: () => ({
72+
test1: 'variantA',
73+
test2: 'variantB',
74+
}),
75+
});
76+
77+
render(<EnhanceAffiliateLinks />);
78+
79+
const link = document.querySelector('a');
80+
expect(link?.href).toContain(
81+
'xcust=referrer%7Cfoo.com%7CaccountId%7C12345%7CabTestParticipations%7Ctest1%3AvariantA%2Ctest2%3AvariantB',
82+
);
83+
});
84+
});

‎dotcom-rendering/src/components/FlexibleGeneral.tsx‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,6 @@ type Props = {
3535
collectionId: number;
3636
/** Feature flag for the labs redesign work */
3737
showLabsRedesign?: boolean;
38-
/** Feature flag for the enabling CORS loading on looping video */
39-
enableLoopVideoCORS?: boolean;
4038
};
4139

4240
type RowLayout = 'oneCardHalfWidth' | 'oneCardFullWidth' | 'twoCard';
@@ -256,8 +254,6 @@ type SplashCardLayoutProps = {
256254
collectionId: number;
257255
/** Feature flag for the labs redesign work */
258256
showLabsRedesign?: boolean;
259-
/** Feature flag for the enabling CORS loading on looping video */
260-
enableLoopVideoCORS?: boolean;
261257
};
262258

263259
const SplashCardLayout = ({
@@ -271,7 +267,6 @@ const SplashCardLayout = ({
271267
containerLevel,
272268
collectionId,
273269
showLabsRedesign,
274-
enableLoopVideoCORS,
275270
}: SplashCardLayoutProps) => {
276271
const card = cards[0];
277272
if (!card) return null;
@@ -357,7 +352,6 @@ const SplashCardLayout = ({
357352
subtitleSize={subtitleSize}
358353
headlinePosition={card.showLivePlayable ? 'outer' : 'inner'}
359354
showLabsRedesign={showLabsRedesign}
360-
enableLoopVideoCORS={enableLoopVideoCORS}
361355
/>
362356
</LI>
363357
</UL>
@@ -425,8 +419,6 @@ type FullWidthCardLayoutProps = {
425419
collectionId: number;
426420
/** Feature flag for the labs redesign work */
427421
showLabsRedesign?: boolean;
428-
/** Feature flag for the enabling CORS loading on looping video */
429-
enableLoopVideoCORS?: boolean;
430422
};
431423

432424
const FullWidthCardLayout = ({
@@ -441,7 +433,6 @@ const FullWidthCardLayout = ({
441433
containerLevel,
442434
collectionId,
443435
showLabsRedesign,
444-
enableLoopVideoCORS,
445436
}: FullWidthCardLayoutProps) => {
446437
const card = cards[0];
447438
if (!card) return null;
@@ -518,7 +509,6 @@ const FullWidthCardLayout = ({
518509
showKickerImage={card.format.design === ArticleDesign.Audio}
519510
showLabsRedesign={showLabsRedesign}
520511
subtitleSize={subtitleSize}
521-
enableLoopVideoCORS={enableLoopVideoCORS}
522512
/>
523513
</LI>
524514
</UL>
@@ -538,8 +528,6 @@ type HalfWidthCardLayoutProps = {
538528
containerLevel: DCRContainerLevel;
539529
/** Feature flag for the labs redesign work */
540530
showLabsRedesign?: boolean;
541-
/** Feature flag for the enabling CORS loading on looping video */
542-
enableLoopVideoCORS?: boolean;
543531
};
544532

545533
const HalfWidthCardLayout = ({
@@ -554,7 +542,6 @@ const HalfWidthCardLayout = ({
554542
isLastRow,
555543
containerLevel,
556544
showLabsRedesign,
557-
enableLoopVideoCORS,
558545
}: HalfWidthCardLayoutProps) => {
559546
if (cards.length === 0) return null;
560547

@@ -610,7 +597,6 @@ const HalfWidthCardLayout = ({
610597
headlineSizes={undefined}
611598
canPlayInline={false}
612599
showLabsRedesign={showLabsRedesign}
613-
enableLoopVideoCORS={enableLoopVideoCORS}
614600
/>
615601
</LI>
616602
);
@@ -629,7 +615,6 @@ export const FlexibleGeneral = ({
629615
containerLevel = 'Primary',
630616
collectionId,
631617
showLabsRedesign,
632-
enableLoopVideoCORS,
633618
}: Props) => {
634619
const splash = [...groupedTrails.splash].slice(0, 1).map((snap) => ({
635620
...snap,
@@ -659,7 +644,6 @@ export const FlexibleGeneral = ({
659644
containerLevel={containerLevel}
660645
collectionId={collectionId}
661646
showLabsRedesign={showLabsRedesign}
662-
enableLoopVideoCORS={enableLoopVideoCORS}
663647
/>
664648
)}
665649
{groupedCards.map((row, i) => {
@@ -679,7 +663,6 @@ export const FlexibleGeneral = ({
679663
containerLevel={containerLevel}
680664
collectionId={collectionId}
681665
showLabsRedesign={showLabsRedesign}
682-
enableLoopVideoCORS={enableLoopVideoCORS}
683666
/>
684667
);
685668

@@ -700,7 +683,6 @@ export const FlexibleGeneral = ({
700683
isLastRow={i === groupedCards.length - 1}
701684
containerLevel={containerLevel}
702685
showLabsRedesign={showLabsRedesign}
703-
enableLoopVideoCORS={enableLoopVideoCORS}
704686
/>
705687
);
706688
}

‎dotcom-rendering/src/components/FlexibleSpecial.tsx‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,6 @@ type Props = {
3232
containerLevel?: DCRContainerLevel;
3333
collectionId: number;
3434
showLabsRedesign?: boolean;
35-
/** Feature flag for the enabling CORS loading on looping video */
36-
enableLoopVideoCORS?: boolean;
3735
};
3836

3937
type BoostProperties = {
@@ -136,8 +134,6 @@ type OneCardLayoutProps = {
136134
containerLevel: DCRContainerLevel;
137135
isSplashCard?: boolean;
138136
showLabsRedesign?: boolean;
139-
/** Feature flag for the enabling CORS loading on looping video */
140-
enableLoopVideoCORS?: boolean;
141137
};
142138

143139
export const OneCardLayout = ({
@@ -152,7 +148,6 @@ export const OneCardLayout = ({
152148
containerLevel,
153149
isSplashCard,
154150
showLabsRedesign,
155-
enableLoopVideoCORS,
156151
}: OneCardLayoutProps) => {
157152
const card = cards[0];
158153
if (!card) return null;
@@ -207,7 +202,6 @@ export const OneCardLayout = ({
207202
headlinePosition={isSplashCard ? 'outer' : 'inner'}
208203
showLabsRedesign={showLabsRedesign}
209204
subtitleSize={subtitleSize}
210-
enableLoopVideoCORS={enableLoopVideoCORS}
211205
/>
212206
</LI>
213207
</UL>
@@ -311,7 +305,6 @@ export const FlexibleSpecial = ({
311305
containerLevel = 'Primary',
312306
collectionId,
313307
showLabsRedesign,
314-
enableLoopVideoCORS,
315308
}: Props) => {
316309
const snaps = [...groupedTrails.snap].slice(0, 1).map((snap) => ({
317310
...snap,
@@ -356,7 +349,6 @@ export const FlexibleSpecial = ({
356349
containerLevel={containerLevel}
357350
isSplashCard={true}
358351
showLabsRedesign={showLabsRedesign}
359-
enableLoopVideoCORS={enableLoopVideoCORS}
360352
/>
361353
)}
362354

‎dotcom-rendering/src/components/LoopVideo.importable.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -125,8 +125,6 @@ type Props = {
125125
linkTo: string;
126126
subtitleSource?: string;
127127
subtitleSize: SubtitleSize;
128-
/** Feature flag for the enabling CORS loading on looping video */
129-
enableLoopVideoCORS?: boolean;
130128
};
131129

132130
export const LoopVideo = ({
@@ -144,7 +142,6 @@ export const LoopVideo = ({
144142
linkTo,
145143
subtitleSource,
146144
subtitleSize,
147-
enableLoopVideoCORS = false,
148145
}: Props) => {
149146
const adapted = useShouldAdapt();
150147
const { renderingTarget } = useConfig();
@@ -677,7 +674,6 @@ export const LoopVideo = ({
677674
subtitleSource={subtitleSource}
678675
subtitleSize={subtitleSize}
679676
activeCue={activeCue}
680-
enableLoopVideoCORS={enableLoopVideoCORS}
681677
/>
682678
</figure>
683679
);

0 commit comments

Comments
 (0)