From f6876c1b761acd2280a013b5725578a52783fafb Mon Sep 17 00:00:00 2001 From: Tom Forbes Date: Mon, 3 Feb 2025 10:08:35 +0000 Subject: [PATCH] tidy session storage code --- .../assets/helpers/abTests/abtest.ts | 16 ++++------ .../helpers/abTests/landingPageAbTests.ts | 17 ++++++++-- .../assets/helpers/abTests/sessionStorage.ts | 32 +++++++------------ 3 files changed, 33 insertions(+), 32 deletions(-) diff --git a/support-frontend/assets/helpers/abTests/abtest.ts b/support-frontend/assets/helpers/abTests/abtest.ts index 1d6c8b1037..9cd33efcbf 100644 --- a/support-frontend/assets/helpers/abTests/abtest.ts +++ b/support-frontend/assets/helpers/abTests/abtest.ts @@ -4,7 +4,6 @@ import type { Settings } from 'helpers/globalsAndSwitches/settings'; import type { IsoCountry } from 'helpers/internationalisation/country'; import type { CountryGroupId } from 'helpers/internationalisation/countryGroup'; import * as cookie from 'helpers/storage/cookie'; -import * as storage from 'helpers/storage/storage'; import { getQueryParameter } from 'helpers/urls/url'; import type { AmountsTest, @@ -23,8 +22,9 @@ import type { } from './models'; import { breakpoints } from './models'; import { - getParticipationsFromSession, - setLandingPageParticipations, + getSessionParticipations, + PARTICIPATIONS_KEY, + setSessionParticipations, } from './sessionStorage'; export const testIsActive = ( @@ -54,7 +54,7 @@ function init({ path = window.location.pathname, settings, }: ABtestInitalizerData): Participations { - const sessionParticipations = getParticipationsFromSession(); + const sessionParticipations = getSessionParticipations(PARTICIPATIONS_KEY); const participations = getParticipations( abTests, mvt, @@ -66,15 +66,13 @@ function init({ sessionParticipations, ); + // A landing page test config may be passed through from the server, so we handle this separately const landingPageParticipations = getLandingPageParticipations( countryGroupId, path, settings.landingPageTests, mvt, ); - if (landingPageParticipations) { - setLandingPageParticipations(landingPageParticipations); - } const urlParticipations = getParticipationsFromUrl(); const serverSideParticipations = getServerSideParticipations(); @@ -92,7 +90,7 @@ const MVT_COOKIE = 'GU_mvt_id'; const MVT_MAX = 1_000_000; // Attempts to retrieve the MVT id from a cookie, or sets it. -export function getMvtId(): number { +function getMvtId(): number { const mvtIdCookieValue = cookie.get(MVT_COOKIE); let mvtId = Number(mvtIdCookieValue); @@ -219,7 +217,7 @@ function getParticipations( sessionParticipations[testId] = participations[testId]; } }); - storage.setSession('abParticipations', JSON.stringify(sessionParticipations)); + setSessionParticipations(sessionParticipations, PARTICIPATIONS_KEY); return participations; } diff --git a/support-frontend/assets/helpers/abTests/landingPageAbTests.ts b/support-frontend/assets/helpers/abTests/landingPageAbTests.ts index ce5e7e286a..21df17e330 100644 --- a/support-frontend/assets/helpers/abTests/landingPageAbTests.ts +++ b/support-frontend/assets/helpers/abTests/landingPageAbTests.ts @@ -5,7 +5,11 @@ import type { } from '../globalsAndSwitches/landingPageSettings'; import type { CountryGroupId } from '../internationalisation/countryGroup'; import type { Participations } from './models'; -import { getLandingPageParticipationsFromSession } from './sessionStorage'; +import { + getSessionParticipations, + LANDING_PAGE_PARTICIPATIONS_KEY, + setSessionParticipations, +} from './sessionStorage'; export type LandingPageSelection = LandingPageVariant & { testName: string }; @@ -49,14 +53,21 @@ export function getLandingPageParticipations( const variant = test.variants[idx]; if (variant) { - return { + const participations = { [test.name]: variant.name, }; + // Record the participation in session storage so that we can track it from the checkout + setSessionParticipations( + participations, + LANDING_PAGE_PARTICIPATIONS_KEY, + ); + + return participations; } } } else { // This is not a landing page, but check if the session has a landing page test participation - return getLandingPageParticipationsFromSession(); + return getSessionParticipations(LANDING_PAGE_PARTICIPATIONS_KEY); } } diff --git a/support-frontend/assets/helpers/abTests/sessionStorage.ts b/support-frontend/assets/helpers/abTests/sessionStorage.ts index 5e58fa7273..85499b5b81 100644 --- a/support-frontend/assets/helpers/abTests/sessionStorage.ts +++ b/support-frontend/assets/helpers/abTests/sessionStorage.ts @@ -1,38 +1,30 @@ import * as storage from '../storage/storage'; import type { Participations } from './models'; -function getParticipationsFromSession( - key: string = 'abParticipations', -): Participations | undefined { +const PARTICIPATIONS_KEY = 'abParticipations'; +const LANDING_PAGE_PARTICIPATIONS_KEY = 'landingPageParticipations'; +type Key = typeof PARTICIPATIONS_KEY | typeof LANDING_PAGE_PARTICIPATIONS_KEY; + +function getSessionParticipations(key: Key): Participations | undefined { const participations = storage.getSession(key); if (participations) { try { return JSON.parse(participations) as Participations; } catch (error) { - console.error( - 'Failed to parse abParticipations from session storage', - error, - ); + console.error(`Failed to parse ${key} from session storage`, error); return undefined; } } return undefined; } -const landingPageParticipationsKey = 'landingPageParticipations'; -function getLandingPageParticipationsFromSession(): Participations | undefined { - return getParticipationsFromSession(landingPageParticipationsKey); -} - -function setLandingPageParticipations(participations: Participations) { - storage.setSession( - landingPageParticipationsKey, - JSON.stringify(participations), - ); +function setSessionParticipations(participations: Participations, key: Key) { + storage.setSession(key, JSON.stringify(participations)); } export { - getParticipationsFromSession, - getLandingPageParticipationsFromSession, - setLandingPageParticipations, + getSessionParticipations, + setSessionParticipations, + PARTICIPATIONS_KEY, + LANDING_PAGE_PARTICIPATIONS_KEY, };