feat(cookies): add consent middleware (#1905)

Author: philibea

.changeset/wet-horses-prove.md

@@ -0,0 +1,5 @@
+---
+"@scaleway/cookie-consent": minor
+---
+
+Add Consent Middleware, fix an amplitude issue with session_id not forward correctly to the destination

packages/cookie-consent/README.md

@@ -73,6 +73,13 @@ export function PanelConsent() {
 }
 ```
 
+### Segment Consent Middleware
+
+As it's necessary now to have a consent management.
+https://segment.com/docs/privacy/consent-management/configure-consent-management/
+
+you will have the possibility to add the SegmentConsentMiddleware, be aware that there is a dependency with SegmenttProvider.
+
 ### User flow
 
 ```mermaid

packages/cookie-consent/package.json

@@ -29,9 +29,11 @@
   },
   "devDependencies": {
     "@types/cookie": "0.6.0",
-    "react": "18.2.0"
+    "react": "18.2.0",
+    "@scaleway/use-segment": "1.0.1"
   },
   "peerDependencies": {
-    "react": "18.x || 18"
+    "react": "18.x || 18",
+    "@scaleway/use-segment": "1.0.1"
   }
 }

packages/cookie-consent/src/CookieConsentProvider/CookieConsentProvider.tsx

@@ -11,7 +11,8 @@ import {
 } from 'react'
 import { uniq } from '../helpers/array'
 import { stringToHash } from '../helpers/misc'
-import type { CategoryKind, Config, Consent, Integrations } from './types'
+import { isCategoryKind } from './helpers'
+import type { Config, Consent, Integrations } from './types'
 import { useSegmentIntegrations } from './useSegmentIntegrations'
 
 const COOKIE_PREFIX = '_scw_rgpd'
@@ -147,8 +148,12 @@ export const CookieConsentProvider = ({
     (categoriesConsent: Partial<Consent>) => {
       for (const [consentName, consentValue] of Object.entries(
         categoriesConsent,
-      ) as [CategoryKind, boolean][]) {
-        const cookieName = `${cookiePrefix}_${consentName}`
+      )) {
+        const consentCategoryName = isCategoryKind(consentName)
+          ? consentName
+          : 'unknown'
+
+        const cookieName = `${cookiePrefix}_${consentCategoryName}`
 
         if (!consentValue) {
           // If consent is set to false we have to delete the cookie
@@ -158,12 +163,12 @@ export const CookieConsentProvider = ({
           })
         } else {
           document.cookie = cookie.serialize(
-            `${cookiePrefix}_${consentName}`,
+            `${cookiePrefix}_${consentCategoryName}`,
             consentValue.toString(),
             {
               ...cookiesOptions,
               maxAge:
-                consentName === 'advertising'
+                consentCategoryName === 'advertising'
                   ? consentAdvertisingMaxAge
                   : consentMaxAge,
             },

packages/cookie-consent/src/CookieConsentProvider/SegmentConsentMiddleware.tsx

@@ -0,0 +1,69 @@
+import { useSegment } from '@scaleway/use-segment'
+import cookie from 'cookie'
+import type { PropsWithChildren } from 'react'
+import { useCookieConsent } from './CookieConsentProvider'
+import { type CategoryKind, isCategoryKind } from './helpers'
+
+export const AMPLITUDE_INTEGRATION_NAME = 'Amplitude (Actions)'
+const COOKIE_SESSION_ID_NAME = 'analytics_session_id'
+
+export const getSessionId = () => {
+  const sessionId = cookie.parse(document.cookie)[COOKIE_SESSION_ID_NAME]
+  if (sessionId) {
+    return Number.parseInt(sessionId, 10)
+  }
+
+  return Date.now()
+}
+
+/**
+ * inspiration
+ * https://github.com/segmentio/consent-manager/blob/f9d5166679b3c928b394b8ad50d517fdf43654b1/src/consent-manager-builder/analytics.ts#L20
+ */
+export const SegmentConsentMiddleware = ({
+  children,
+  amplitudeIntegrationName = AMPLITUDE_INTEGRATION_NAME,
+}: PropsWithChildren<{
+  amplitudeIntegrationName: string
+}>) => {
+  const { analytics } = useSegment()
+  const { categoriesConsent } = useCookieConsent()
+
+  const categoriesPreferencesAccepted: CategoryKind[] = []
+
+  for (const [key, value] of Object.entries(categoriesConsent)) {
+    if (value && isCategoryKind(key)) {
+      categoriesPreferencesAccepted.push(key)
+    }
+  }
+
+  analytics
+    ?.addSourceMiddleware(({ payload, next }) => {
+      if (payload.obj.context) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, no-param-reassign
+        payload.obj.context['consent'] = {
+          ...payload.obj.context['consent'],
+          defaultDestinationBehavior: null,
+          // Need to be handle if we let the user choose per destination and not per categories.
+          destinationPreferences: null,
+          categoryPreferences: categoriesPreferencesAccepted,
+        }
+      }
+
+      // actually there is a bug on the default script.
+      if (payload.integrations()[amplitudeIntegrationName]) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, no-param-reassign
+        payload.obj.integrations = {
+          ...payload.obj.integrations,
+          [amplitudeIntegrationName]: {
+            session_id: getSessionId(),
+          },
+        }
+      }
+
+      return next(payload)
+    })
+    .catch(() => null)
+
+  return children
+}

packages/cookie-consent/src/CookieConsentProvider/__tests__/useSegmentIntegrations/emptyConfig.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from '@jest/globals'
 import { renderHook, waitFor } from '@testing-library/react'
-import { useSegmentIntegrations } from '../..'
+import { useSegmentIntegrations } from '../../useSegmentIntegrations'
 
 describe('CookieConsent - useSegmentIntegrations', () => {
   it('should not call segment if config is empty and return empty array', async () => {

packages/cookie-consent/src/CookieConsentProvider/__tests__/useSegmentIntegrations/fetchError.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it, jest } from '@jest/globals'
 import { renderHook, waitFor } from '@testing-library/react'
-import { useSegmentIntegrations } from '../..'
+import { useSegmentIntegrations } from '../../useSegmentIntegrations'
 
 globalThis.fetch = jest.fn<any>(() => Promise.resolve({ ok: false }))
 

packages/cookie-consent/src/CookieConsentProvider/__tests__/useSegmentIntegrations/networkError.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it, jest } from '@jest/globals'
 import { renderHook, waitFor } from '@testing-library/react'
-import { useSegmentIntegrations } from '../..'
+import { useSegmentIntegrations } from '../../useSegmentIntegrations'
 
 globalThis.fetch = jest.fn<any>(() => Promise.reject(new Error('randomError')))
 

packages/cookie-consent/src/CookieConsentProvider/__tests__/useSegmentIntegrations/working.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it, jest } from '@jest/globals'
 import { renderHook, waitFor } from '@testing-library/react'
-import { useSegmentIntegrations } from '../..'
+import { useSegmentIntegrations } from '../../useSegmentIntegrations'
 
 globalThis.fetch = jest.fn<any>(() =>
   Promise.resolve({

packages/cookie-consent/src/CookieConsentProvider/helpers.ts

@@ -0,0 +1,12 @@
+export const categories = [
+  'essential',
+  'functional',
+  'marketing',
+  'analytics',
+  'advertising',
+] as const
+
+export type CategoryKind = (typeof categories)[number]
+
+export const isCategoryKind = (key: string): key is CategoryKind =>
+  categories.includes(key as CategoryKind)