refactor: save consents in context

Author: iiroj

MIGRATION.md

@@ -7,7 +7,7 @@
 - The `uiVersion` prop for `<UsercentricsScript />` is no longer supported and should be removed. The CMP v3 loader script currently supports only the "latest" version.
     - This also means that hard-coding a version number and its [Subresource Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) hash is no longer supported. Instead, use a random `nonce` value when implementing a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP).
 - The `showSecondLayer()` util no longer supports passing a service id argument to directly open to the service info. Instead, use the new `showServiceDetails(serviceId: ServiceId)` util.
-- The `getServicesFromLocalStorage(): ServiceInfoFromLocalStorage[]` util has been replaced with `getServicesConsentsFromLocalStorage(): Record<ServiceId, ConsentStatusFromLocalStorage>` with a different format.
+- The `getServicesFromLocalStorage()` util has been replaced with `getConsentsFromLocalStorage()` with a different format.
 - The following utils and hooks have been removed because CMP v3 no longer supports them:
     - `getServicesBaseInfo()`
     - `useServiceInfo()`

README.md

@@ -339,12 +339,12 @@ See also https://usercentrics.com/docs/web/features/api/control-ui/#showserviced
 await showServiceDetails('my-service-id')
 ```
 
-#### `getServicesConsentsFromLocalStorage`
+#### `getConsentsFromLocalStorage`
 
-A method to get array of all service consent statuses from local storage.
+A method to get consent status saved to localStorage.
 
 ```tsx
-const consents = getServicesConsentsFromLocalStorage()
+const consents = getConsentsFromLocalStorage()
 const hasConsent = consents['my-service-id']?.consent === true
 ```
 

src/components/UsercentricsProvider.tsx

@@ -27,12 +27,12 @@ export const UsercentricsProvider: FC<UsercentricsProviderProps> = ({ children,
     return (
         <UsercentricsContext.Provider
             value={{
+                consents: state.consents,
                 hasInteracted: state.hasInteracted,
                 isClientSide: state.isClientSide,
                 isFailed: state.isFailed,
                 isInitialized: state.isInitialized,
                 isOpen: state.isOpen,
-                localStorageState: state.localStorageState,
                 strictMode,
             }}
         >

src/context.ts

@@ -1,23 +1,23 @@
 import { createContext } from 'react'
 
-import type { ConsentStatusFromLocalStorage, ServiceId } from './types.js'
+import type { ServiceId } from './types.js'
 
 export type UsercentricsBrowserIntegrationState = {
+    consents: Record<ServiceId, boolean>
     hasInteracted: boolean
     isClientSide: boolean
     isFailed: boolean
     isInitialized: boolean
     isOpen: boolean
-    localStorageState: Record<ServiceId, ConsentStatusFromLocalStorage>
 }
 
 export const SSR_INITIAL_STATE: UsercentricsBrowserIntegrationState = {
+    consents: {},
     hasInteracted: false,
     isClientSide: false,
     isFailed: false,
     isInitialized: false,
     isOpen: false,
-    localStorageState: {},
 }
 
 type UsercentricsContextType = UsercentricsBrowserIntegrationState & {

src/hooks/use-are-all-consents-accepted.ts

@@ -9,7 +9,7 @@ import { UsercentricsContext } from '../context.js'
  * @warn it's best to assume no consent until this hook returns `true`
  */
 export const useAreAllConsentsAccepted = (): boolean | null => {
-    const { isClientSide, isInitialized, localStorageState } = useContext(UsercentricsContext)
+    const { consents, isClientSide, isInitialized } = useContext(UsercentricsContext)
 
     /** Consent status is unknown during SSR because CMP is only available client-side */
     if (!isClientSide) {
@@ -21,10 +21,8 @@ export const useAreAllConsentsAccepted = (): boolean | null => {
      * If it's not loaded, and there's nothing in localStorage, this will return `null`
      */
     if (!isInitialized) {
-        return Object.keys(localStorageState).length > 0
-            ? Object.values(localStorageState).every((service) => service.consent === true)
-            : null
+        return Object.keys(consents).length > 0 ? Object.values(consents).every((consent) => consent === true) : null
     }
 
-    return Object.values(localStorageState).every((service) => service.consent === true)
+    return Object.values(consents).every((consent) => consent === true)
 }

src/hooks/use-has-service-consent.ts

@@ -10,7 +10,7 @@ import type { ServiceId } from '../types.js'
  * @warn it's best to assume no consent until this hook returns `true`
  */
 export const useHasServiceConsent = (serviceId: ServiceId): boolean | null => {
-    const { isClientSide, isInitialized, localStorageState, strictMode } = useContext(UsercentricsContext)
+    const { consents, isInitialized, isClientSide, strictMode } = useContext(UsercentricsContext)
 
     /** Consent status is unknown during SSR because CMP is only available client-side */
     if (!isClientSide) {
@@ -22,12 +22,12 @@ export const useHasServiceConsent = (serviceId: ServiceId): boolean | null => {
      * If it's not loaded, and there's nothing in localStorage, this will return `null`
      */
     if (!isInitialized) {
-        return localStorageState[serviceId]?.consent ?? null
+        return consents[serviceId] ?? null
     }
 
-    if (strictMode && !localStorageState[serviceId]) {
+    if (strictMode) {
         throw new Error(`Usercentrics Service not found for id "${serviceId}"`)
     }
 
-    return !!localStorageState[serviceId]?.consent
+    return !!consents[serviceId]
 }

src/hooks/use-usercentrics-event-listener.ts

@@ -1,15 +1,23 @@
 import { useEffect, useState } from 'react'
 
 import { SSR_INITIAL_STATE, type UsercentricsBrowserIntegrationState } from '../context.js'
-import { type UCUICMPEvent, UCUICMPEventType, UCUIView, type UCUIVIewChanged } from '../types.js'
-import { getServicesConsentsFromLocalStorage, hasUserInteracted, isOpen, setUserHasInteracted } from '../utils.js'
+import {
+    type ServiceId,
+    type UCConsentEvent,
+    type UCUICMPEvent,
+    UCUICMPEventType,
+    UCUIView,
+    type UCUIVIewChanged,
+} from '../types.js'
+import { getConsentsFromLocalStorage, hasUserInteracted, isOpen, setUserHasInteracted } from '../utils.js'
 
 const UC_UI_CMP_EVENT = 'UC_UI_CMP_EVENT'
 const UC_UI_VIEW_CHANGED = 'UC_UI_VIEW_CHANGED'
 const UC_CONSENT = 'UC_CONSENT'
 
 const isUCUICMPEvent = (event: Event): event is UCUICMPEvent => event.type === UC_UI_CMP_EVENT
 const isUCUIViewEvent = (event: Event): event is UCUIVIewChanged => event.type === UC_UI_VIEW_CHANGED
+const isUCConsentEvent = (event: Event): event is UCConsentEvent => event.type === UC_CONSENT
 
 export const useUsercentricsEventListener = ({
     timeout = 5000,
@@ -23,11 +31,16 @@ export const useUsercentricsEventListener = ({
      * to react to the UC UI dialog opening/closing.
      */
     useEffect(() => {
-        setState((current) => ({
-            ...current,
-            isClientSide: true,
-            localStorageState: getServicesConsentsFromLocalStorage(),
-        }))
+        const consentsFromLocalStorage = getConsentsFromLocalStorage()
+        const consents = Object.entries(consentsFromLocalStorage).reduce(
+            (acc, [serviceId, status]) => ({
+                ...acc,
+                [serviceId]: status.consent,
+            }),
+            {} as Record<ServiceId, boolean>,
+        )
+
+        setState((current) => ({ ...current, consents, isClientSide: true }))
 
         if ('__ucCmp' in window) {
             /** UC_UI already started before this mounted, dialog might be open */
@@ -48,28 +61,21 @@ export const useUsercentricsEventListener = ({
 
         const handleViewChangedEvent = (event: Event) => {
             if (isUCUIViewEvent(event)) {
-                switch (event.detail.view) {
-                    case UCUIView.FIRST_LAYER:
-                    case UCUIView.SECOND_LAYER: {
-                        setState((current) => ({ ...current, isOpen: true }))
-                        break
-                    }
-                    case UCUIView.NONE: {
-                        setState((current) => ({ ...current, isOpen: false }))
-                        break
+                setState((current) => {
+                    if (event.detail.view === UCUIView.NONE) {
+                        return { ...current, isOpen: false }
+                    } else if (!current.isOpen) {
+                        return { ...current, isOpen: true }
                     }
-                }
+
+                    return current
+                })
             }
         }
 
         const handleCMPEvent = (event: Event) => {
             if (isUCUICMPEvent(event)) {
                 switch (event.detail.type) {
-                    case UCUICMPEventType.CMP_SHOWN: {
-                        setState((current) => ({ ...current, isOpen: true }))
-                        break
-                    }
-
                     case UCUICMPEventType.ACCEPT_ALL:
                     case UCUICMPEventType.DENY_ALL:
                     case UCUICMPEventType.SAVE: {
@@ -81,11 +87,18 @@ export const useUsercentricsEventListener = ({
             }
         }
 
-        const handleConsentEvent = () => {
-            setState((current) => ({
-                ...current,
-                localStorageState: getServicesConsentsFromLocalStorage(),
-            }))
+        const handleConsentEvent = (event: Event) => {
+            if (isUCConsentEvent(event)) {
+                const consents = Object.entries(event.detail.services).reduce(
+                    (acc, [serviceId, data]) => ({
+                        ...acc,
+                        [serviceId]: data.consent?.given === true,
+                    }),
+                    {} as Record<ServiceId, boolean>,
+                )
+
+                setState((current) => ({ ...current, consents }))
+            }
         }
 
         window.addEventListener(UC_UI_VIEW_CHANGED, handleViewChangedEvent)
@@ -114,11 +127,11 @@ export const useUsercentricsEventListener = ({
 
                 return { ...current, isFailed: true }
             })
-
-            return () => {
-                clearTimeout(handleTimeout)
-            }
         }, timeout)
+
+        return () => {
+            clearTimeout(handleTimeout)
+        }
     }, [timeout])
 
     return state

src/types.ts

@@ -6,15 +6,11 @@
 export type ServiceId = import('@s-group/react-usercentrics/augmented').ServiceId
 
 /** Partial type for service info read from local storage, if available. Unused values are left out. */
-export type ConsentStatusFromLocalStorage = {
+export type ServiceData = {
     name: string
-    consent: boolean
-}
-
-/** Partial type for uc data read from local storage, if available. Unused values are left out. */
-export type UCDataFromLocalStorage = {
-    consent: {
-        services: Record<ServiceId, ConsentStatusFromLocalStorage>
+    consent?: {
+        given: boolean
+        type: 'IMPLICIT' | 'EXPLICIT'
     }
 }
 
@@ -25,15 +21,21 @@ export type UCDataFromLocalStorage = {
 type ConsentData = {
     status: 'ALL_ACCEPTED' | 'ALL_DENIED' | 'SOME_ACCEPTED' | 'SOME_DENIED'
     required: boolean
-    type: 'IMPLICIT' | 'EXPLICIT'
 }
 
 /**
  * Partial type, unused values are left out.
  * @see https://usercentrics.com/docs/web/features/api/interfaces/#consentdetails
  */
-type ConsentDetails = {
+export type ConsentDetails = {
     consent: ConsentData
+    services: Record<ServiceId, ServiceData>
+}
+
+export type UCDataFromLocalStorage = {
+    consent: {
+        services: Record<ServiceId, { name: string; consent: boolean }>
+    }
 }
 
 /**
@@ -96,6 +98,8 @@ type UC_CMP = {
  */
 export type UCWindow = Window & typeof globalThis & { __ucCmp?: UC_CMP }
 
+export type UCConsentEvent = CustomEvent<ConsentDetails>
+
 export enum UCUICMPEventType {
     ACCEPT_ALL = 'ACCEPT_ALL',
     CMP_SHOWN = 'CMP_SHOWN',

src/utils.ts

@@ -1,4 +1,4 @@
-import type { ConsentStatusFromLocalStorage, ServiceId, UCDataFromLocalStorage, UCWindow } from './types.js'
+import type { ServiceId, UCDataFromLocalStorage, UCWindow } from './types.js'
 
 /**
  * A method to check if user has interacted with the consent prompt and given consent information.
@@ -72,20 +72,17 @@ export const showServiceDetails = async (serviceId: ServiceId): Promise<void> =>
 }
 
 /**
- * A method to get array of all service consent statuses from local storage
+ * A method to get consent status saved to localStorage
  *
  * @example
- * const consents = getServicesConsentsFromLocalStorage()
+ * const consents = getConsentsFromLocalStorage()
  * const hasConsent = consents['my-service-id']?.consent === true
  */
-export const getServicesConsentsFromLocalStorage = (): Record<ServiceId, ConsentStatusFromLocalStorage> => {
+export const getConsentsFromLocalStorage = (): UCDataFromLocalStorage['consent']['services'] => {
     try {
-        const ucData = localStorage?.getItem('ucData')
-        if (ucData) {
-            const ucDataParsed = JSON.parse(ucData) as UCDataFromLocalStorage
-            /** Leave out any other untyped fields */
-            return ucDataParsed.consent.services
-        }
+        const data = localStorage?.getItem('ucData')
+        const consentDetails = data ? (JSON.parse(data) as UCDataFromLocalStorage) : { consent: { services: {} } }
+        return consentDetails.consent.services
     } catch {
         /** Ignore failures */
     }

tests/hooks/use-are-all-consents-accepted.test.tsx

@@ -9,12 +9,12 @@ describe('Usercentrics', () => {
     describe('hooks', () => {
         describe('useAreAllConsentsAccepted', () => {
             const CONTEXT: ContextType<typeof UsercentricsContext> = {
+                consents: {},
                 hasInteracted: false,
                 isClientSide: true,
                 isFailed: false,
                 isInitialized: true,
                 isOpen: false,
-                localStorageState: {},
                 strictMode: false,
             }
 
@@ -50,9 +50,9 @@ describe('Usercentrics', () => {
                 const { result } = renderHook(() => useAreAllConsentsAccepted(), {
                     wrapper: getWrapper({
                         isInitialized: false,
-                        localStorageState: {
-                            'test-id': { consent: true, name: '' },
-                            'test-id2': { consent: false, name: '' },
+                        consents: {
+                            'test-id': true,
+                            'test-id2': false,
                         },
                     }),
                 })
@@ -64,9 +64,9 @@ describe('Usercentrics', () => {
                 const { result } = renderHook(() => useAreAllConsentsAccepted(), {
                     wrapper: getWrapper({
                         isInitialized: false,
-                        localStorageState: {
-                            'test-id': { consent: true, name: '' },
-                            'test-id2': { consent: true, name: '' },
+                        consents: {
+                            'test-id': true,
+                            'test-id2': true,
                         },
                     }),
                 })
@@ -78,9 +78,9 @@ describe('Usercentrics', () => {
                 const { result } = renderHook(() => useAreAllConsentsAccepted(), {
                     wrapper: getWrapper({
                         isInitialized: true,
-                        localStorageState: {
-                            'test-id': { consent: true, name: '' },
-                            'test-id2': { consent: false, name: '' },
+                        consents: {
+                            'test-id': true,
+                            'test-id2': false,
                         },
                     }),
                 })
@@ -92,9 +92,9 @@ describe('Usercentrics', () => {
                 const { result } = renderHook(() => useAreAllConsentsAccepted(), {
                     wrapper: getWrapper({
                         isInitialized: false,
-                        localStorageState: {
-                            'test-id': { consent: true, name: '' },
-                            'test-id2': { consent: true, name: '' },
+                        consents: {
+                            'test-id': true,
+                            'test-id2': true,
                         },
                     }),
                 })