Skip to content

Commit f951d83

Browse files
author
Juarez Mota
committed
feat: sign-in gate v2 layout adjustments
1 parent 4a28465 commit f951d83

File tree

4 files changed

+152
-136
lines changed

4 files changed

+152
-136
lines changed

‎dotcom-rendering/fixtures/manual/sign-in-gate.ts‎

Lines changed: 56 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,25 @@ export const mockAuxiaResponseDismissible = {
1818
},
1919
};
2020

21+
export const mockAuxiaResponseDismissibleV2 = {
22+
status: true,
23+
data: {
24+
userTreatment: {
25+
treatmentId: 'auxia-treatment-001',
26+
treatmentTrackingId: 'tracking-001',
27+
surface: 'signin-gate',
28+
treatmentContent: JSON.stringify({
29+
title: 'A small step for great Journalism. Sign in.',
30+
subtitle: '',
31+
body: "It's free and only takes 30 seconds.",
32+
first_cta_name: 'Create account',
33+
first_cta_link: 'https://profile.theguardian.com/register',
34+
second_cta_name: "I'll do it later",
35+
}),
36+
},
37+
},
38+
};
39+
2140
export const mockAuxiaResponseNonDismissible = {
2241
status: true,
2342
data: {
@@ -38,6 +57,26 @@ export const mockAuxiaResponseNonDismissible = {
3857
},
3958
};
4059

60+
export const mockAuxiaResponseNonDismissibleV2 = {
61+
status: true,
62+
data: {
63+
userTreatment: {
64+
treatmentId: 'auxia-treatment-002',
65+
treatmentTrackingId: 'tracking-002',
66+
surface: 'signin-gate',
67+
treatmentContent: JSON.stringify({
68+
title: 'Sorry for the interruption. We believe in free, independent journalism for all. Sign in or register to keep reading.',
69+
subtitle:
70+
"Once you are signed in, we'll bring you back here shortly.",
71+
body: '',
72+
first_cta_name: 'Create account',
73+
first_cta_link: 'https://profile.theguardian.com/register',
74+
second_cta_name: '',
75+
}),
76+
},
77+
},
78+
};
79+
4180
export const mockAuxiaResponseLegacy = {
4281
status: true,
4382
data: {
@@ -66,14 +105,25 @@ export const getAuxiaMock = (payload: string): unknown => {
66105
const body = JSON.parse(payload) as Record<string, unknown>;
67106

68107
const mocks = {
69-
dismissable: mockAuxiaResponseDismissible,
70-
'non-dismissable': mockAuxiaResponseNonDismissible,
71-
legacy: mockAuxiaResponseLegacy,
72-
'no-treatment': mockAuxiaResponseNoTreatment,
108+
v1: {
109+
dismissable: mockAuxiaResponseDismissible,
110+
'non-dismissable': mockAuxiaResponseNonDismissible,
111+
legacy: mockAuxiaResponseLegacy,
112+
'no-treatment': mockAuxiaResponseNoTreatment,
113+
},
114+
v2: {
115+
dismissable: mockAuxiaResponseDismissibleV2,
116+
'non-dismissable': mockAuxiaResponseNonDismissibleV2,
117+
legacy: mockAuxiaResponseLegacy,
118+
'no-treatment': mockAuxiaResponseNoTreatment,
119+
},
73120
};
74121

75-
const key = body.sectionId as keyof typeof mocks;
76-
const mock: unknown = mocks[key];
122+
const key = body.sectionId as keyof (typeof mocks)[keyof typeof mocks];
123+
const version = (body.articleIdentifier as string).includes('v2')
124+
? 'v2'
125+
: 'v1';
126+
const mock: unknown = mocks[version][key];
77127

78128
return mock ?? mockAuxiaResponseNoTreatment;
79129
};

‎dotcom-rendering/src/components/SignInGate/SignInGate.stories.tsx‎

Lines changed: 30 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,11 @@ import { type EditionId } from '../../lib/edition';
22
import type { TagType } from '../../types/tag';
33
import { Section } from '../Section';
44
import { SignInGateSelector } from '../SignInGateSelector.importable';
5-
import { SignInGateAuxiaV2 } from './gateDesigns/SignInGateAuxiaV2';
65
import { SignInGateCustomizableText } from './gateDesigns/SignInGateCustomizableText';
76
import { SignInGateFakeSocial } from './gateDesigns/SignInGateFakeSocial';
87
import { SignInGateMain } from './gateDesigns/SignInGateMain';
98
import { SignInGateMainCheckoutComplete } from './gateDesigns/SignInGateMainCheckoutComplete';
10-
import type {
11-
AuxiaAPIResponseDataUserTreatment,
12-
CheckoutCompleteCookieData,
13-
} from './types';
9+
import type { CheckoutCompleteCookieData } from './types';
1410
import { ALL_PRODUCTS, ALL_USER_TYPES } from './types';
1511

1612
export default {
@@ -161,12 +157,12 @@ signInGateMainCheckoutCompletePersonalisedCopy.argTypes = {
161157
},
162158
};
163159

164-
export const signInGateSelectorStoryDismissable = () => {
165-
const tags: TagType[] = [
166-
{ id: 'politics/politics', type: 'Keyword', title: 'Politics' },
167-
{ id: 'world/europe-news', type: 'Keyword', title: 'Europe News' },
168-
];
160+
const tags: TagType[] = [
161+
{ id: 'politics/politics', type: 'Keyword', title: 'Politics' },
162+
{ id: 'world/europe-news', type: 'Keyword', title: 'Europe News' },
163+
];
169164

165+
export const signInGateSelectorStoryDismissable = () => {
170166
return (
171167
<Section fullWidth={true}>
172168
<SignInGateSelector
@@ -189,11 +185,6 @@ signInGateSelectorStoryDismissable.storyName =
189185
'sign_in_gate_selector_dismissable';
190186

191187
export const signInGateSelectorStoryNonDismissable = () => {
192-
const tags: TagType[] = [
193-
{ id: 'politics/politics', type: 'Keyword', title: 'Politics' },
194-
{ id: 'world/europe-news', type: 'Keyword', title: 'Europe News' },
195-
];
196-
197188
return (
198189
<Section fullWidth={true}>
199190
<SignInGateSelector
@@ -216,11 +207,6 @@ signInGateSelectorStoryNonDismissable.storyName =
216207
'sign_in_gate_selector_non_dismissable';
217208

218209
export const signInGateSelectorStoryLegacy = () => {
219-
const tags: TagType[] = [
220-
{ id: 'politics/politics', type: 'Keyword', title: 'Politics' },
221-
{ id: 'world/europe-news', type: 'Keyword', title: 'Europe News' },
222-
];
223-
224210
return (
225211
<Section fullWidth={true}>
226212
<SignInGateSelector
@@ -242,11 +228,6 @@ export const signInGateSelectorStoryLegacy = () => {
242228
signInGateSelectorStoryLegacy.storyName = 'sign_in_gate_selector_legacy';
243229

244230
export const signInGateSelectorStoryNoTreatment = () => {
245-
const tags: TagType[] = [
246-
{ id: 'politics/politics', type: 'Keyword', title: 'Politics' },
247-
{ id: 'world/europe-news', type: 'Keyword', title: 'Europe News' },
248-
];
249-
250231
return (
251232
<Section fullWidth={true}>
252233
<SignInGateSelector
@@ -269,46 +250,20 @@ signInGateSelectorStoryNoTreatment.storyName =
269250
'sign_in_gate_selector_no_treatment';
270251

271252
export const auxiaV2DismissibleModal = () => {
272-
const mockUserTreatment: AuxiaAPIResponseDataUserTreatment = {
273-
treatmentId: 'test-treatment-id',
274-
treatmentTrackingId: 'test-tracking-id',
275-
surface: 'test-surface',
276-
treatmentContent: JSON.stringify({
277-
title: 'A small step for great Journalism. Sign in.',
278-
subtitle: "It's free and only takes 30 seconds.",
279-
body: '',
280-
first_cta_name: 'Create account',
281-
first_cta_link: 'https://profile.theguardian.com/register',
282-
second_cta_name: 'Not now',
283-
}),
284-
rank: '1',
285-
contentLanguageCode: 'en',
286-
treatmentType: 'test-type',
287-
};
288-
289253
return (
290254
<Section fullWidth={true}>
291-
<SignInGateAuxiaV2
292-
signInUrl="https://profile.theguardian.com/signin"
293-
dismissGate={() => console.log('Gate dismissed')}
294-
abTest={{
295-
name: 'AuxiaSignInGate',
296-
variant: 'test-variant',
297-
id: 'test-id',
298-
}}
299-
ophanComponentId="test-component-id"
300-
userTreatment={mockUserTreatment}
301-
logTreatmentInteractionCall={async (
302-
interactionType,
303-
actionName,
304-
) => {
305-
console.log(
306-
'Treatment interaction:',
307-
interactionType,
308-
actionName,
309-
);
310-
}}
311-
guUrl="https://www.theguardian.com/"
255+
<SignInGateSelector
256+
contentType="Article"
257+
sectionId="dismissable"
258+
tags={tags}
259+
isPaidContent={false}
260+
isPreview={false}
261+
pageId="dismissable-v2"
262+
host="https://www.theguardian.com"
263+
idUrl="https://profile.theguardian.com"
264+
contributionsServiceUrl="https://contributions.guardianapis.com"
265+
editionId={'UK' as EditionId}
266+
signInGateVersion="v2"
312267
/>
313268
</Section>
314269
);
@@ -317,47 +272,20 @@ export const auxiaV2DismissibleModal = () => {
317272
auxiaV2DismissibleModal.storyName = 'sign_in_gate_auxia_v2_modal_dismissible';
318273

319274
export const auxiaV2NonDismissibleModal = () => {
320-
const mockUserTreatment: AuxiaAPIResponseDataUserTreatment = {
321-
treatmentId: 'test-treatment-id',
322-
treatmentTrackingId: 'test-tracking-id',
323-
surface: 'test-surface',
324-
treatmentContent: JSON.stringify({
325-
title: 'Sorry for the interruption. We believe in free, independent journalism for all. Sign in or register to keep reading.',
326-
subtitle:
327-
"Once you are signed in, we'll bring you back here shortly.",
328-
body: '',
329-
first_cta_name: 'Create account',
330-
first_cta_link: 'https://profile.theguardian.com/register',
331-
second_cta_name: '',
332-
}),
333-
rank: '1',
334-
contentLanguageCode: 'en',
335-
treatmentType: 'test-type',
336-
};
337-
338275
return (
339276
<Section fullWidth={true}>
340-
<SignInGateAuxiaV2
341-
signInUrl="https://profile.theguardian.com/signin"
342-
dismissGate={() => console.log('Gate dismissed')}
343-
abTest={{
344-
name: 'AuxiaSignInGate',
345-
variant: 'test-variant',
346-
id: 'test-id',
347-
}}
348-
ophanComponentId="test-component-id"
349-
userTreatment={mockUserTreatment}
350-
logTreatmentInteractionCall={async (
351-
interactionType,
352-
actionName,
353-
) => {
354-
console.log(
355-
'Treatment interaction:',
356-
interactionType,
357-
actionName,
358-
);
359-
}}
360-
guUrl="https://www.theguardian.com/"
277+
<SignInGateSelector
278+
contentType="Article"
279+
sectionId="non-dismissable"
280+
tags={tags}
281+
isPaidContent={false}
282+
isPreview={false}
283+
pageId="non-dismissable-v2"
284+
host="https://www.theguardian.com"
285+
idUrl="https://profile.theguardian.com"
286+
contributionsServiceUrl="https://contributions.guardianapis.com"
287+
editionId={'UK' as EditionId}
288+
signInGateVersion="v2"
361289
/>
362290
</Section>
363291
);

0 commit comments

Comments
 (0)