Skip to content

Commit

Permalink
Add cookieconsent library + open Cookie Consent popup on initial brow…
Browse files Browse the repository at this point in the history
…ser page load (consent isn't processed yet)
  • Loading branch information
Vadorequest committed Jul 26, 2020
1 parent 254c017 commit 6f0cb7a
Show file tree
Hide file tree
Showing 5 changed files with 127 additions and 2 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@
"animate.css": "4.1.0",
"bootstrap": "4.5.0",
"classnames": "2.2.6",
"cookieconsent": "3.1.1",
"cookies": "0.8.0",
"css-to-react-native": "3.0.0",
"deepmerge": "4.2.2",
Expand Down
11 changes: 9 additions & 2 deletions src/components/appBootstrap/BrowserPageBootstrap.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,19 @@ import { Amplitude, AmplitudeProvider } from '@amplitude/react-amplitude';
import { jsx } from '@emotion/core';
import * as Sentry from '@sentry/node';
import { createLogger } from '@unly/utils-simple-logger';
import { useTheme } from 'emotion-theming';
import React from 'react';

import { useTranslation } from 'react-i18next';
import { userSessionContext } from '../../stores/userSessionContext';
import { CustomerTheme } from '../../types/data/CustomerTheme';
import { MultiversalAppBootstrapPageProps } from '../../types/nextjs/MultiversalAppBootstrapPageProps';
import { MultiversalAppBootstrapProps } from '../../types/nextjs/MultiversalAppBootstrapProps';
import { MultiversalPageProps } from '../../types/pageProps/MultiversalPageProps';
import { OnlyBrowserPageProps } from '../../types/pageProps/OnlyBrowserPageProps';
import { UserSemiPersistentSession } from '../../types/UserSemiPersistentSession';
import { getAmplitudeInstance } from '../../utils/analytics/amplitude';

import cookieConsentInit from '../../utils/cookies/cookieConsent';
import UniversalCookiesManager from '../../utils/cookies/UniversalCookiesManager';
import { getIframeReferrer, isRunningInIframe } from '../../utils/iframe';

Expand All @@ -32,7 +35,7 @@ const BrowserPageBootstrap = (props: BrowserPageBootstrapProps): JSX.Element =>
const {
Component,
err,
router
router,
} = props;
// When the page is served by the browser, some browser-only properties are available
const pageProps = props.pageProps as unknown as MultiversalPageProps<OnlyBrowserPageProps>;
Expand All @@ -54,13 +57,17 @@ const BrowserPageBootstrap = (props: BrowserPageBootstrapProps): JSX.Element =>
cookiesManager,
userSession,
};
const theme = useTheme<CustomerTheme>();

Sentry.addBreadcrumb({ // See https://docs.sentry.io/enriching-error-data/breadcrumbs
category: fileLabel,
message: `Rendering ${fileLabel}`,
level: Sentry.Severity.Debug,
});

// Init the Cookie Consent popup, which will open on the browser
cookieConsentInit(theme, t);

const amplitudeInstance = getAmplitudeInstance({
customerRef,
iframeReferrer,
Expand Down
1 change: 1 addition & 0 deletions src/pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { faTimesCircle } from '@fortawesome/free-regular-svg-icons';
import { faArrowCircleLeft, faArrowCircleRight, faBook, faBookReader, faCoffee, faHome, faQuestionCircle, faUserCog } from '@fortawesome/free-solid-svg-icons';
import 'animate.css/animate.min.css'; // Loads animate.css CSS file. See https://github.com/daneden/animate.css
import 'bootstrap/dist/css/bootstrap.min.css'; // Loads bootstrap CSS file. See https://stackoverflow.com/a/50002905/2391795
import 'cookieconsent/build/cookieconsent.min.css'; // Loads CookieConsent CSS file. See https://github.com/osano/cookieconsent
import 'rc-tooltip/assets/bootstrap.css';
import React from 'react';
import uuid from 'uuid/v1'; // XXX Use v1 for uniqueness - See https://www.sohamkamani.com/blog/2016/10/05/uuid1-vs-uuid4/
Expand Down
111 changes: 111 additions & 0 deletions src/utils/cookies/cookieConsent.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
import { TFunction } from 'i18next';
import { CustomerTheme } from '../../types/data/CustomerTheme';

/**
* Initialise the Cookie Consent UI popup
* Relies on Osano open source "cookieconsent" software (v3) https://github.com/osano/cookieconsent
*
* @param theme
* @param t
*
* @see https://www.osano.com/cookieconsent/documentation/
* @see https://www.osano.com/cookieconsent/documentation/javascript-api/
* @see https://www.osano.com/cookieconsent/download/
*/
const init = (theme: CustomerTheme, t: TFunction): void => {
const { primaryColor } = theme;

// eslint-disable-next-line @typescript-eslint/no-var-requires
require('cookieconsent'); // XXX Requiring it will make it available in the browser (cannot be used properly as a module)

// @ts-ignore
const cc = window.cookieconsent;

// Use https://www.osano.com/cookieconsent/download/ "Start Coding" to use the UI configuration builder
// See https://www.osano.com/cookieconsent/documentation/javascript-api/ for advanced API options and documentation
const cookieConsentSettings = {
autoOpen: true,
autoAttach: true,
type: 'opt-out', //
revokable: true,
dismissOnScroll: false,
dismissOnTimeout: false,
dismissOnWindowClick: false,
whitelistPage: [],
blacklistPage: [],
location: true, // XXX Can also be an object with advanced configuration to implement your own geolocation resolvers
cookie: {
name: 'cookieconsent_status',
path: '/',
domain: '',
expiryDays: 365,
secure: process.env.NEXT_PUBLIC_APP_STAGE !== 'development', // Always use a secure cookie on non-dev stages
},
palette: {
popup: {
background: '#fff',
},
button: {
background: '#fff',
text: primaryColor,
},
},
theme: 'classic',
position: 'bottom-right',
content: {
header: 'Cookies used on the website!',
message: 'This website uses cookies to improve your experience.',
dismiss: 'Got it!',
allow: 'Allow cookies',
deny: 'Decline',
link: 'Learn more',
href: '/terms',
target: '', // Use "_blank" if you use an external "href" value
close: '&#x274c;',
policy: 'Cookie Policy',
},
// elements: {
// header: '<span class="cc-header"></span>',
// message: '<span id="cookieconsent:desc" class="cc-message"></span>',
// messagelink: '<span id="cookieconsent:desc" class="cc-message"> <a aria-label="learn more about cookies" tabindex="0" class="cc-link" href="" target="_blank"></a></span>',
// dismiss: '<a aria-label="dismiss cookie message" tabindex="0" class="cc-btn cc-dismiss"></a>',
// allow: '<a aria-label="allow cookies" tabindex="0" class="cc-btn cc-allow"></a>',
// deny: '<a aria-label="deny cookies" tabindex="0" class="cc-btn cc-deny"></a>',
// link: '<a aria-label="learn more about cookies" tabindex="0" class="cc-link" href="" target="_blank"></a>',
// close: '<span aria-label="dismiss cookie message" tabindex="0" class="cc-close"></span>',
// },
// window: '<div role="”dialog”" aria-label="”cookieconsent”" aria-describedby="”cookieconsent:desc”" class="”cc-window" ”></div>',
// compliance: {
// 'info': '<div class="cc-compliance"></div>',
// 'opt-in': '<div class="cc-compliance cc-highlight"></div>',
// 'opt-out': '<div class="cc-compliance cc-highlight"></div>',
// },
onInitialise: function(status) {
console.info('onInitialise', status);
},
onPopupOpen: function() {
console.info('onPopupOpen');
},
onPopupClose: function() {
console.info('onPopupClose');
},
onStatusChange: function(status, chosenBefore) {
console.info('onStatusChange', status, chosenBefore);
},
onRevokeChoice: function() {
console.info('onRevokeChoice');
},
};
cc.initialise(cookieConsentSettings);

// THis is v4...
// cc.on('initialized', (...args) => console.log(args));
// cc.on('error', console.error);
// cc.on('popupOpened', () => console.log('Popup Open'));
// cc.on('popupClosed', () => console.log('Popup Closed'));
// cc.on('revokeChoice', () => console.log('Popup Reset'));
// cc.on('statusChanged', (...args) => console.log(args));

};

export default init;
5 changes: 5 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4024,6 +4024,11 @@ cookie@^0.3.1:
resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
integrity sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=

cookieconsent@3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/cookieconsent/-/cookieconsent-3.1.1.tgz#f90bfadcaeef7d2bdcdd8278257f7264cb5d6819"
integrity sha512-v8JWLJcI7Zs9NWrs8hiVldVtm3EBF70TJI231vxn6YToBGj0c9dvdnYwltydkAnrbBMOM/qX1xLFrnTfm5wTag==

cookies@0.8.0:
version "0.8.0"
resolved "https://registry.yarnpkg.com/cookies/-/cookies-0.8.0.tgz#1293ce4b391740a8406e3c9870e828c4b54f3f90"
Expand Down

1 comment on commit 6f0cb7a

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.