Set same site to None when new_header is off

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

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)

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,
 }