Add VanillaCookieConsent

Author: yuriyyakym

modules/CookieConsent/CookieConsent.tsx

@@ -2,20 +2,21 @@ import type { Locale } from '@prezly/theme-kit-nextjs';
 
 import { app } from '@/adapters/server';
 
-import { OneTrustCookie } from './components';
-import { CookieConsentBar } from './components/CookieConsentBar';
+import { OneTrustCookie, VanillaCookieConsent } from './components';
 
 interface Props {
     localeCode: Locale.Code;
 }
 
 export async function CookieConsent({ localeCode }: Props) {
+    // TODO: remove or use language constant
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const language = await app().languageOrDefault(localeCode);
     const { onetrust_cookie_consent: onetrust } = await app().newsroom();
 
     if (onetrust.is_enabled) {
         return <OneTrustCookie script={onetrust.script} category={onetrust.category} />;
     }
 
-    return <CookieConsentBar>{language.company_information.cookie_statement}</CookieConsentBar>;
+    return <VanillaCookieConsent />;
 }

modules/CookieConsent/CookieConsentContext.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import type { ReactNode } from 'react';
+import type { Dispatch, ReactNode, SetStateAction } from 'react';
 import { createContext, useContext, useState } from 'react';
 
 import type { Consent } from './types';
 
 interface Context {
     consent: Consent | null;
-    setConsent: (consent: Consent | null) => void;
+    setConsent: Dispatch<SetStateAction<Consent | null>>;
 }
 
 export const context = createContext<Context>({

modules/CookieConsent/components/VanillaCookieConsent/VanillaCookieConsent.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { useEffect } from 'react';
+import * as CookieConsent from 'vanilla-cookieconsent';
+import 'vanilla-cookieconsent/dist/cookieconsent.css';
+
+import { useCookieConsent } from '../../CookieConsentContext';
+import { ConsentCategory } from '../../types';
+
+export function VanillaCookieConsent() {
+    const { setConsent } = useCookieConsent();
+
+    useEffect(() => {
+        CookieConsent.run({
+            autoShow: true,
+            language: {
+                default: 'en',
+                translations: {
+                    en: {
+                        consentModal: {
+                            title: 'We use cookies',
+                            description: 'Cookie modal description',
+                            acceptAllBtn: 'Accept all',
+                            acceptNecessaryBtn: 'Reject all',
+                            showPreferencesBtn: 'Manage Individual preferences',
+                        },
+                        preferencesModal: {
+                            title: 'Manage cookie preferences',
+                            acceptAllBtn: 'Accept all',
+                            acceptNecessaryBtn: 'Reject all',
+                            savePreferencesBtn: 'Accept current selection',
+                            closeIconLabel: 'Close modal',
+                            sections: [
+                                {
+                                    title: 'Somebody said ... cookies?',
+                                    description: 'I want one!',
+                                },
+                                {
+                                    title: 'Strictly Necessary cookies',
+                                    description:
+                                        'These cookies are essential for the proper functioning of the website and cannot be disabled.',
+
+                                    linkedCategory: 'necessary',
+                                },
+                                {
+                                    title: 'Performance and Analytics',
+                                    description:
+                                        'These cookies collect information about how you use our website. All of the data is anonymized and cannot be used to identify you.',
+                                    linkedCategory: 'analytics',
+                                },
+                                {
+                                    title: 'More information',
+                                    description:
+                                        'For any queries in relation to my policy on cookies and your choices, please <a href="#contact-page">contact us</a>',
+                                },
+                            ],
+                        },
+                    },
+                },
+            },
+            categories: {
+                [ConsentCategory.NECESSARY]: {
+                    readOnly: true,
+                    enabled: true,
+                },
+                [ConsentCategory.FIRST_PARTY_ANALYTICS]: {},
+                [ConsentCategory.THIRD_PARTY_COOKIES]: {},
+            },
+            onConsent({ cookie }) {
+                setConsent((current) => ({
+                    ...current,
+                    categories: cookie.categories as ConsentCategory[],
+                }));
+            },
+            onChange({ cookie }) {
+                setConsent((current) => ({
+                    ...current,
+                    categories: cookie.categories as ConsentCategory[],
+                }));
+            },
+        });
+    }, [setConsent]);
+
+    return null;
+}

modules/CookieConsent/components/VanillaCookieConsent/index.ts

@@ -0,0 +1 @@
+export { VanillaCookieConsent } from './VanillaCookieConsent';

modules/CookieConsent/components/index.ts

@@ -1 +1,2 @@
 export { OneTrustCookie } from './OneTrustCookie';
+export { VanillaCookieConsent } from './VanillaCookieConsent';