refactor(cookie-manager): improve react cookie manager and add more configuration options (#154)

* feat(cookie-manager): add new props to cookie manager

* refactor(cookie-manager): update context structure

* refactor: wip

* refactor(cookie-manager): update Cookie Manager svelte

* refactor: simplify code

* feat: add callbacks to the skcm configuration

---------

Co-authored-by: JCNoguera <88061365+VmMad@users.noreply.github.com>

Author: Juligs

cookie-manager/core/clientSideOnly.ts

@@ -1,10 +1,7 @@
 import { Service } from './types'
 import { GOOGLE_ANALYTICS_EXPIRATION_DAYS } from './constants'
 
-export const loadGoogleAnalytics = (
-	id: Service['id'],
-	setServicesInitialized: (bool: boolean) => void
-): void => {
+export const loadGoogleAnalytics = (id: Service['id']): void => {
 	function gtag(_key: string, _value: unknown, _config?: { cookie_expires: number }) {
 		// eslint-disable-next-line prefer-rest-params
 		window.dataLayer.push(arguments)
@@ -17,7 +14,6 @@ export const loadGoogleAnalytics = (
 	const script = document.createElement('script')
 	script.src = `https://www.googletagmanager.com/gtag/js?id=${id}`
 	document.body.appendChild(script)
-	setServicesInitialized(true)
 }
 
 export const removeGoogleAnalytics = (id: Service['id']): void => {

cookie-manager/core/services.ts

@@ -9,7 +9,7 @@ import { deleteCookie, getCookie, setCookie } from './utils'
 import { loadGoogleAnalytics, removeGoogleAnalytics } from './clientSideOnly'
 import { COOKIE_EXPIRATION_DAYS } from './constants'
 
-export function initializeServices(
+export function initializeGoogleAnalytics(
 	servicesInitialized: boolean,
 	configuredServices: Service[],
 	setServicesInitialized: (bool: boolean) => void
@@ -21,71 +21,65 @@ export function initializeServices(
 		const googleAnalytics4Config = configuredServices.find(
 			({ type }) => type === SupportedService.GoogleAnalytics4
 		)
+
 		if (googleAnalyticsUniversalConfig?.enabled) {
-			loadGoogleAnalytics(googleAnalyticsUniversalConfig.id, setServicesInitialized)
+			loadGoogleAnalytics(googleAnalyticsUniversalConfig.id)
+			setServicesInitialized(true)
 		} else {
 			if (googleAnalytics4Config?.enabled) {
-				loadGoogleAnalytics(googleAnalytics4Config.id, setServicesInitialized)
+				loadGoogleAnalytics(googleAnalytics4Config.id)
+				setServicesInitialized(true)
 			}
 		}
 	}
 }
 
-interface InitConfiguredServicesArgs {
-	services: SKCMConfiguration['services']
-	onConfiguredServicesInitialized: (
-		configuredServices: Service[],
-		necessaryCookies: ServiceCookie[]
-	) => void
-}
-export function initializeConfiguredServices({
-	services: {
+export function initializeConfiguredServices(services: SKCMConfiguration['services'] = {}): {
+	configuredServices: Service[]
+	necessaryCookies: ServiceCookie[]
+} {
+	const {
 		googleAnalyticsUniversalId,
 		googleAnalytics4Id,
 		adCookiesEnabled,
 		customNecessaryCookies
-	} = {},
-	onConfiguredServicesInitialized
-}: InitConfiguredServicesArgs): void {
-	let _configuredServices: Service[] = []
-	let _necessaryCookies: ServiceCookie[] = []
+	} = services
+
+	let configuredServices: Service[] = []
+	let necessaryCookies: ServiceCookie[] = []
 	if (googleAnalyticsUniversalId) {
-		_configuredServices.push({
+		configuredServices.push({
 			type: SupportedService.GoogleAnalyticsUniversal,
 			id: googleAnalyticsUniversalId,
 			enabled: getCookie(SKCM_GA_GOOGLE_ANALYTICS_UNIVERSAL_COOKIE?.name) === 'true',
 			cookies: GoogleOwnCookies.GoogleAnalyticsUniversal
 		})
-		_necessaryCookies.push(SKCM_GA_GOOGLE_ANALYTICS_UNIVERSAL_COOKIE)
+		necessaryCookies.push(SKCM_GA_GOOGLE_ANALYTICS_UNIVERSAL_COOKIE)
 	}
 	if (googleAnalytics4Id) {
-		_configuredServices.push({
+		configuredServices.push({
 			type: SupportedService.GoogleAnalytics4,
 			id: googleAnalytics4Id,
 			enabled: getCookie(SKCM_GA_GOOGLE_ANALYTICS_4_COOKIE?.name) === 'true',
 			cookies: GoogleOwnCookies.GoogleAnalytics4
 		})
-		_necessaryCookies.push(SKCM_GA_GOOGLE_ANALYTICS_4_COOKIE)
+		necessaryCookies.push(SKCM_GA_GOOGLE_ANALYTICS_4_COOKIE)
 	}
 	if (customNecessaryCookies) {
-		_necessaryCookies = [..._necessaryCookies, ...customNecessaryCookies]
+		necessaryCookies = [...necessaryCookies, ...customNecessaryCookies]
 	}
 	if (!adCookiesEnabled) {
-		const filteredCookies = _configuredServices.map((service) => ({
+		const filteredCookies = configuredServices.map((service) => ({
 			...service,
 			cookies: service?.cookies?.filter((cookie) => cookie?.category !== CookieCategory.Advertising)
 		}))
-		_configuredServices = filteredCookies
+		configuredServices = filteredCookies
 	}
 
-	onConfiguredServicesInitialized?.(_configuredServices, _necessaryCookies)
+	return { configuredServices, necessaryCookies }
 }
 
-export function stopCoreServices(
-	configuredServices: Service[],
-	removeAdditionalCookiesCb: () => void,
-	setServicesInitialized: (bool: boolean) => void
-): void {
+export function stopCoreServices(configuredServices: Service[]): void {
 	const googleAnalyticsUniversalConfig = configuredServices?.find(
 		({ type }) => type === SupportedService.GoogleAnalyticsUniversal
 	)
@@ -94,20 +88,15 @@ export function stopCoreServices(
 	)
 	removeGoogleAnalytics(googleAnalytics4Config?.id)
 	removeGoogleAnalytics(googleAnalyticsUniversalConfig?.id)
-	removeAdditionalCookiesCb()
-
-	setServicesInitialized?.(false)
 }
 
-export function setNecessaryCookies(
+export function applyCookieManagerNecessaryCookies(
 	value: 'true' | 'false',
-	configuredServices: Service[],
-	necessaryCookies: ServiceCookie[],
-	setConfiguredServices: (services: Service[]) => void
+	necessaryCookies: ServiceCookie[]
 ): void {
-	const SKCM_NECESSARY_COOKIES: string[] = [
-		SKCM_GA_GOOGLE_ANALYTICS_UNIVERSAL_COOKIE?.name,
-		SKCM_GA_GOOGLE_ANALYTICS_4_COOKIE?.name
+	const SKCM_NECESSARY_COOKIES = [
+		SKCM_GA_GOOGLE_ANALYTICS_UNIVERSAL_COOKIE.name,
+		SKCM_GA_GOOGLE_ANALYTICS_4_COOKIE.name
 	]
 	// set cookies
 	const neededCookies =
@@ -117,12 +106,6 @@ export function setNecessaryCookies(
 	for (let i = 0; i < neededCookies?.length; i++) {
 		setCookie(neededCookies[i]?.name, value, COOKIE_EXPIRATION_DAYS)
 	}
-	// enable services
-	const _configuredServices = configuredServices?.map((service) => ({
-		...service,
-		enabled: value === 'true'
-	}))
-	setConfiguredServices(_configuredServices)
 }
 
 export function clearAdditionalCookies(necessaryCookies: ServiceCookie[]): void {

cookie-manager/core/types.ts

@@ -45,6 +45,8 @@ export type SKCMConfiguration = {
 	disclaimer?: DisclaimerConfiguration
 	services?: ServicesConfiguration
 	theme?: Theme
+	onAcceptCookies?: () => void
+	onDeclineCookies?: () => void
 }
 
 export type CookieProvider = {

cookie-manager/react/README.md

@@ -70,6 +70,45 @@ export default function Disclaimer(): React.JSX.Element {
 }
 ```
 
+### Run custom logic on Accept / Decline
+
+If you need to initialize third-party services, or to run any custom tracking logic depending on the user choice, pass `onAcceptCookies` or `onDeclineCookies` to your `SKCMConfiguration`.
+
+```tsx
+'use client'
+
+import { CookieManager, type SKCMConfiguration } from '@boxfish-studio/react-cookie-manager'
+
+export default function Disclaimer(): React.JSX.Element {
+	const configuration: SKCMConfiguration = {
+		disclaimer: {
+			title: 'This website uses cookies',
+			body: 'By using this site, you agree with our use of cookies'
+		},
+		services: {
+			customAnalyticsCookies: [
+				{
+					name: 'ANALYTICS_' + 'SERVICE_ID',
+					purpose: 'Analytics - tracks usage for basic website functionality',
+					expiry: '1 year',
+					type: 'http',
+					showDisclaimerIfMissing: true
+				}
+			]
+		},
+		onAcceptCookies: () => {
+			// Initialize third-party services here
+			console.log('User accepted cookies')
+		},
+		onDeclineCookies: () => {
+			console.log('User declined cookies')
+		}
+	}
+
+	return <CookieManager configuration={configuration} />
+}
+```
+
 ### Control page navigation
 
 Import the `useUpdatePathGA` hook and use it with your router of preference:
@@ -132,14 +171,14 @@ export default function RootLayout({
 	children: React.ReactNode
 }>): React.JSX.Element {
 	return (
-		<ContextProviders>
-			<html lang="en">
-				<body>
+		<html lang="en">
+			<body>
+				<ContextProviders>
 					{children}
 					<Disclaimer />
-				</body>
-			</html>
-		</ContextProviders>
+				</ContextProviders>
+			</body>
+		</html>
 	)
 }
 ```
@@ -171,14 +210,14 @@ export default function CookieLibraryPage() {
 
 ### Using the internal store
 
-You can use the `useCookieManagerContext` hook to know whether the services are running or not.
+You can use the `useCookieManager` hook to know whether the services are running or not.
 
 ```tsx
-import { useCookieManagerContext } from '@boxfish-studio/react-cookie-manager'
+import { useCookieManager } from '@boxfish-studio/react-cookie-manager'
 
 export function Component() {
-	const { servicesInitialized } = useCookieManagerContext()
-	const isRunning = servicesInitialized.value
+	const { servicesInitialized } = useCookieManager()
+	const isRunning = servicesInitialized
 
 	// ...
 }
@@ -218,6 +257,8 @@ type SKCMConfiguration = {
 		medium?: string
 		light?: string
 	}
+	onAcceptCookies?: () => void
+	onDeclineCookies?: () => void
 }
 ```
 

cookie-manager/react/src/App.tsx

@@ -1,44 +1,58 @@
 import { CookieManager, CookieLibrary } from '@components'
 import { SKCMConfiguration } from '@core/types'
 
-function App(): React.JSX.Element {
-	const configuration: SKCMConfiguration = {
-		disclaimer: {
-			title: 'Custom Title',
-			body: 'Custom Body'
-		},
-		services: {
-			googleAnalyticsUniversalId: 'UA-XXXXXXXXX',
-			googleAnalytics4Id: 'G-XXXXXXX',
-			adCookiesEnabled: true,
-			customNecessaryCookies: [
-				{
-					name: '1st Cookie Test',
-					provider: 'Boxfish',
-					providerUrl: 'boxfish.studio',
-					purpose: 'Stores the user´s preferences.',
-					expiry: '2 months',
-					type: 'HTTP',
-					showDisclaimerIfMissing: true
-				},
-				{
-					name: 'Cookie 2',
-					provider: 'Boxfish',
-					providerUrl: 'boxfish.studio',
-					purpose: 'Stores the user´s cookies consent state for the current domain',
-					expiry: '30 days',
-					type: 'HTTP',
-					showDisclaimerIfMissing: true
-				}
-			]
-		}
+const configuration: SKCMConfiguration = {
+	disclaimer: {
+		title: 'Custom Title',
+		body: 'Custom Body'
+	},
+	services: {
+		googleAnalyticsUniversalId: 'UA-XXXXXXXXX',
+		googleAnalytics4Id: 'G-XXXXXXX',
+		adCookiesEnabled: true,
+		customNecessaryCookies: [
+			{
+				name: '1st_Cookie_Test',
+				provider: 'Boxfish',
+				providerUrl: 'boxfish.studio',
+				purpose: 'Stores the user´s preferences.',
+				expiry: '2 months',
+				type: 'HTTP',
+				showDisclaimerIfMissing: true
+			},
+			{
+				name: 'Cookie_2',
+				provider: 'Boxfish',
+				providerUrl: 'boxfish.studio',
+				purpose: 'Stores the user´s cookies consent state for the current domain',
+				expiry: '30 days',
+				type: 'HTTP',
+				showDisclaimerIfMissing: true
+			}
+		]
+	},
+	onAcceptCookies: () => {
+		document.cookie = '1st_Cookie_Test=true; path=/; max-age=' + 60 * 60 * 24 * 30 // 30 days
+		document.cookie = 'Cookie_2=true; path=/; max-age=' + 60 * 60 * 24 * 30 // 30 days
+	},
+	onDeclineCookies: () => {
+		document.cookie = '1st_Cookie_Test=false; path=/; max-age=' + 60 * 60 * 24 * 30 // 30 days
+		document.cookie = 'Cookie_2=false; path=/; max-age=' + 60 * 60 * 24 * 30 // 30 days
+	},
+	theme: {
+		light: '#fff',
+		dark: '#131f37',
+		medium: '#b0bfd9',
+		primary: '#14cabf'
 	}
+}
+
+function App(): React.JSX.Element {
 	return (
 		<>
 			<CookieManager configuration={configuration} />
 			<CookieLibrary configuration={configuration} />
 		</>
 	)
 }
-
 export default App

cookie-manager/react/src/index.css

@@ -56,7 +56,7 @@ button:focus-visible {
 	outline: 4px auto -webkit-focus-ring-color;
 }
 
-@media (prefers-color-scheme: light) {
+@media (prefers-color-scheme: dark) {
 	:root {
 		color: #213547;
 		background-color: #ffffff;