diff --git a/src/middleware/middleware.ts b/src/middleware/middleware.ts index e3f6e9f619..078d797a70 100644 --- a/src/middleware/middleware.ts +++ b/src/middleware/middleware.ts @@ -61,7 +61,11 @@ const middleware: Middleware = async ({ const uiStore = useUiStore($pinia) const isMobileUa = $ua ? $ua.isMobile : false - $cookies.set('uiIsMobileUa', isMobileUa, cookieOptions) + const sameSite = featureFlagStore.isOn('new_header') + ? cookieOptions.sameSite + : 'none' + + $cookies.set('uiIsMobileUa', isMobileUa, { ...cookieOptions, sameSite }) uiStore.initFromCookies($cookies.getAll() ?? {}) } export default middleware diff --git a/src/stores/ui.ts b/src/stores/ui.ts index 10a3f327c2..178c3400b4 100644 --- a/src/stores/ui.ts +++ b/src/stores/ui.ts @@ -64,6 +64,7 @@ export const useUiStore = defineStore('ui', { areInstructionsVisible(state): boolean { return state.instructionsSnackbarState === 'visible' }, + desktopBreakpoints(): Breakpoint[] { const featureFlagStore = useFeatureFlagStore() const isNewHeaderEnabled = computed(() => @@ -158,7 +159,11 @@ export const useUiStore = defineStore('ui', { }, updateCookies() { - const opts = cookieOptions + const opts = { ...cookieOptions } + if (!useFeatureFlagStore().isOn('new_header')) { + opts.sameSite = 'none' + } + this.$nuxt.$cookies.setAll([ { name: 'uiInstructionsSnackbarState', @@ -183,7 +188,14 @@ export const useUiStore = defineStore('ui', { } this.breakpoint = breakpoint - this.$nuxt.$cookies.set('uiBreakpoint', this.breakpoint, cookieOptions) + const sameSite = useFeatureFlagStore().isOn('new_header') + ? cookieOptions.sameSite + : 'none' + + this.$nuxt.$cookies.set('uiBreakpoint', this.breakpoint, { + ...cookieOptions, + sameSite, + }) this.isDesktopLayout = this.desktopBreakpoints.includes(breakpoint) }, @@ -198,11 +210,14 @@ export const useUiStore = defineStore('ui', { this.innerFilterVisible = visible if (this.isDesktopLayout) { this.isFilterDismissed = !visible - this.$nuxt.$cookies.set( - 'uiIsFilterDismissed', - this.isFilterDismissed, - cookieOptions - ) + const sameSite = useFeatureFlagStore().isOn('new_header') + ? cookieOptions.sameSite + : 'none' + + this.$nuxt.$cookies.set('uiIsFilterDismissed', this.isFilterDismissed, { + ...cookieOptions, + sameSite, + }) } }, @@ -222,11 +237,14 @@ export const useUiStore = defineStore('ui', { } this.dismissedBanners.push(bannerId) - this.$nuxt.$cookies.set( - 'uiDismissedBanners', - this.dismissedBanners, - cookieOptions - ) + const sameSite = useFeatureFlagStore().isOn('new_header') + ? cookieOptions.sameSite + : 'none' + + this.$nuxt.$cookies.set('uiDismissedBanners', this.dismissedBanners, { + ...cookieOptions, + sameSite, + }) }, isBannerDismissed(bannerId: BannerId) { return this.dismissedBanners.includes(bannerId) diff --git a/test/unit/specs/stores/ui-store.spec.js b/test/unit/specs/stores/ui-store.spec.js index 0282508de6..2f55ccfe39 100644 --- a/test/unit/specs/stores/ui-store.spec.js +++ b/test/unit/specs/stores/ui-store.spec.js @@ -31,7 +31,7 @@ const NOT_VISIBLE_AND_NOT_DISMISSED = { const cookieOptions = { maxAge: 5184000, path: '/', - sameSite: 'strict', + sameSite: 'none', secure: false, }