diff --git a/dotcom-rendering/src/components/SignInGate/SignInGate.stories.tsx b/dotcom-rendering/src/components/SignInGate/SignInGate.stories.tsx index 6f286529e2b..5dfc318fce9 100644 --- a/dotcom-rendering/src/components/SignInGate/SignInGate.stories.tsx +++ b/dotcom-rendering/src/components/SignInGate/SignInGate.stories.tsx @@ -272,13 +272,14 @@ export const auxiaV2DismissibleModal = () => { host="https://www.theguardian.com" idUrl="https://profile.theguardian.com" contributionsServiceUrl="https://contributions.guardianapis.com" - signInGateVersion="v2" auxiaGateDisplayData={{ browserId: 'test-browser-id', auxiaData: { responseId: 'test-response-id', - userTreatment: - mockAuxiaResponseDismissible.data.userTreatment, + userTreatment: { + ...mockAuxiaResponseDismissible.data.userTreatment, + treatmentType: 'DISMISSABLE_SIGN_IN_GATE_POPUP', + }, }, }} /> @@ -298,13 +299,15 @@ export const auxiaV2NonDismissibleModal = () => { host="https://www.theguardian.com" idUrl="https://profile.theguardian.com" contributionsServiceUrl="https://contributions.guardianapis.com" - signInGateVersion="v2" auxiaGateDisplayData={{ browserId: 'test-browser-id', auxiaData: { responseId: 'test-response-id', - userTreatment: - mockAuxiaResponseNonDismissible.data.userTreatment, + userTreatment: { + ...mockAuxiaResponseNonDismissible.data + .userTreatment, + treatmentType: 'NONDISMISSIBLE_SIGN_IN_GATE_POPUP', + }, }, }} /> diff --git a/dotcom-rendering/src/components/SignInGate/types.ts b/dotcom-rendering/src/components/SignInGate/types.ts index 4d9b471c4fc..e898bd1f676 100644 --- a/dotcom-rendering/src/components/SignInGate/types.ts +++ b/dotcom-rendering/src/components/SignInGate/types.ts @@ -251,4 +251,5 @@ export type SignInGatePropsAuxia = { ) => Promise; }; +// v1 is in the article, v2 is a popup export type AuxiaGateVersion = 'v1' | 'v2'; diff --git a/dotcom-rendering/src/components/SignInGateSelector.importable.tsx b/dotcom-rendering/src/components/SignInGateSelector.importable.tsx index 176aac55c08..41bc50f548e 100644 --- a/dotcom-rendering/src/components/SignInGateSelector.importable.tsx +++ b/dotcom-rendering/src/components/SignInGateSelector.importable.tsx @@ -33,7 +33,6 @@ type Props = { idUrl?: string; contributionsServiceUrl: string; auxiaGateDisplayData?: AuxiaGateDisplayData | undefined; - signInGateVersion?: AuxiaGateVersion; }; // function to generate the profile.theguardian.com url with tracking params @@ -87,12 +86,15 @@ export const SignInGateSelector = ({ idUrl = 'https://profile.theguardian.com', contributionsServiceUrl, auxiaGateDisplayData, - signInGateVersion, }: Props) => { if (!pageIdIsAllowedForGating(pageId)) { return <>; } + const signInGateVersion = getAuxiaGateVersion( + auxiaGateDisplayData?.auxiaData.userTreatment, + ); + return ( Promise; - signInGateVersion?: AuxiaGateVersion; + signInGateVersion: AuxiaGateVersion; } const incrementGateDisplayCount = () => { @@ -243,22 +245,24 @@ const buildAbTestTrackingAuxiaVariant = ( }; }; +/** + * Determines the gate version based on one of 2 things: + * 1. url query parameter + * 2. treatmentType + */ export const getAuxiaGateVersion = ( - signInGateVersion?: AuxiaGateVersion, userTreatment?: AuxiaAPIResponseDataUserTreatment, ): AuxiaGateVersion => { - if (signInGateVersion) { - return signInGateVersion; + let urlParamVersion: string | null = null; + if (typeof window !== 'undefined') { + const params = new URLSearchParams(window.location.search); + urlParamVersion = params.get('auxia_gate_version'); } - const params = new URLSearchParams(window.location.search); - const version = params.get('auxia_gate_version'); - if ( - String(version).toLowerCase().endsWith('v2') || - String(userTreatment?.treatmentType) - .toLowerCase() - .endsWith('POPUP') + String(urlParamVersion).toLowerCase().endsWith('v2') || + userTreatment?.treatmentType === 'DISMISSABLE_SIGN_IN_GATE_POPUP' || + userTreatment?.treatmentType === 'NONDISMISSIBLE_SIGN_IN_GATE_POPUP' ) { return 'v2'; } @@ -300,6 +304,17 @@ const SignInGateSelectorAuxia = ({ document.dispatchEvent( new CustomEvent('article:sign-in-gate-dismissed'), ); + + if (signInGateVersion === 'v2') { + // Emit modal dismiss event + document.dispatchEvent( + new CustomEvent('modal:close', { + detail: { + modalType: `sign-in-gate-${signInGateVersion}`, + }, + }), + ); + } } }, [isGateDismissed]); @@ -396,9 +411,6 @@ const ShowSignInGateAuxia = ({ const checkoutCompleteCookieData = undefined; const personaliseSignInGateAfterCheckoutSwitch = undefined; - // Get the gate version configuration - const gateVersion = getAuxiaGateVersion(signInGateVersion, userTreatment); - const [signInGatePlaceholder, setSignInGatePlaceholder] = useState(null); @@ -417,6 +429,7 @@ const ShowSignInGateAuxia = ({ useEffect(() => { if (hasBeenSeen) { + // Tell Auxia void auxiaLogTreatmentInteraction( contributionsServiceUrl, userTreatment, @@ -436,6 +449,7 @@ const ShowSignInGateAuxia = ({ ); }); + // Tell Ophan void submitComponentEventTracking( { component: { @@ -451,6 +465,17 @@ const ShowSignInGateAuxia = ({ // Once the gate is being displayed we need to update // the tracking of the number of times the gate has been displayed incrementGateDisplayCount(); + + if (signInGateVersion === 'v2') { + // Emit modal view event + document.dispatchEvent( + new CustomEvent('modal:open', { + detail: { + modalType: `sign-in-gate-${signInGateVersion}`, + }, + }), + ); + } } }, [ componentId, @@ -460,7 +485,7 @@ const ShowSignInGateAuxia = ({ renderingTarget, treatmentId, userTreatment, - gateVersion, + signInGateVersion, ]); const commonProps = { @@ -498,7 +523,7 @@ const ShowSignInGateAuxia = ({ aria-hidden="true" style={{ height: 1, marginTop: -1 }} /> - {gateVersion === 'v2' ? ( + {signInGateVersion === 'v2' ? ( shouldShowV2Gate && ) : ( diff --git a/dotcom-rendering/src/components/StickyBottomBanner/SignInGatePortal.tsx b/dotcom-rendering/src/components/StickyBottomBanner/SignInGatePortal.tsx index 719a0cba387..c8942ca630e 100644 --- a/dotcom-rendering/src/components/StickyBottomBanner/SignInGatePortal.tsx +++ b/dotcom-rendering/src/components/StickyBottomBanner/SignInGatePortal.tsx @@ -35,7 +35,7 @@ export const SignInGatePortal = ({ pageId: string; contributionsServiceUrl: string; idUrl: string; - auxiaGateDisplayData?: AuxiaGateDisplayData | undefined; + auxiaGateDisplayData: AuxiaGateDisplayData; }) => { const [shouldShowGate, setShouldShowGate] = useState(false); const [targetElement, setTargetElement] = useState( @@ -61,8 +61,7 @@ export const SignInGatePortal = ({ useEffect(() => { const element = document.getElementById('sign-in-gate'); const gateVersion = getAuxiaGateVersion( - undefined, - auxiaGateDisplayData?.auxiaData.userTreatment, + auxiaGateDisplayData.auxiaData.userTreatment, ); /**