changes to handle dark mode on cookies banner

package.json

@@ -19,7 +19,7 @@
 	"dependencies": {
 		"@commitlint/cli": "^12.1.2",
 		"@essex-js-toolkit/hierarchy-browser": "3.0.1",
-		"@essex-js-toolkit/hooks": "3.0.0",
+		"@essex-js-toolkit/hooks": "^4.0.1",
 		"@essex-js-toolkit/thematic-lineup": "^1.1.5",
 		"@essex-js-toolkit/themed-components": "^1.2.0",
 		"@essex-js-toolkit/toolbox": "2.0.1",

src/components/Footer/Footer.tsx

@@ -2,17 +2,30 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { manageConsent } from '../../consent'
+
+import { useMicrosoftConsentBanner } from '@essex-js-toolkit/hooks'
 import { FC, memo } from 'react'
 import styled from 'styled-components'
+import { useTheme } from '~/state'
 
 export const Footer: FC = memo(function Footer() {
+	const theme = useTheme()
+	const CONSENT_CONF = {
+		theme: theme.variant,
+		elementId: 'cookie-banner',
+		onChange: (c: any) => console.log('CHANGED', c),
+	}
+
+	const [, manageConsent] = useMicrosoftConsentBanner(CONSENT_CONF)
+
 	return (
 		<FooterEl>
 			<Container>
 				<Link href={constants.privacyUrl}>Privacy</Link>
 				{' | '}
-				<Link id={'managecookies'} onClick={manageConsent}>
+				<Link
+					id={'managecookies'}
+					onClick={manageConsent}>
 					Cookies
 				</Link>
 				{' | '}
@@ -83,3 +96,4 @@ const LinkA = styled.a`
 	text-decoration: none !important;
 	color: rgb(241, 241, 241);
 `
+

src/consent.ts

@@ -1,79 +0,0 @@
-/*!
- * Copyright (c) Microsoft. All rights reserved.
- * Licensed under the MIT license. See LICENSE file in the project.
- */
-
-declare const WcpConsent: any
-
-export interface ConsentOptions {
-	/**
-	 * Default: 'dark'
-	 */
-	theme?: string
-	/**
-	 * default: 'cookie-consent'
-	 */
-	elementId?: string
-	onConsent?: (consent: Consent) => void
-}
-
-export interface Consent {
-	Required: boolean
-	Advertising: boolean
-	Analytics: boolean
-	SocialMedia: boolean
-}
-
-let currentConsent: Consent = {
-	Required: true,
-	Advertising: false,
-	Analytics: false,
-	SocialMedia: false,
-}
-let consentUtil: any
-const NOOP = () => {
-	/*nothing*/
-}
-
-export function showCookieConsent({
-	theme = 'dark',
-	elementId = 'cookie-banner',
-	onConsent = NOOP,
-}: ConsentOptions = {}): void {
-	const element = document.getElementById(elementId)
-	if (!element) {
-		throw new Error(`Could not find element with id ${elementId}`)
-	}
-	WcpConsent.init(
-		navigator.language,
-		element,
-		function init(err, consent) {
-			if (err) {
-				console.error('error initalizing WcpConsent', err)
-			} else {
-				consentUtil = consent
-				onConsent(consent)
-			}
-		},
-		function onChange(consent) {
-			currentConsent = consent
-			onConsent(consent)
-		},
-		theme,
-	)
-}
-
-export function getConsent(): Consent {
-	return currentConsent
-}
-
-export function manageConsent(): void {
-	consentUtil.manageConsent()
-}
-
-// show consent banner immediately
-showCookieConsent({
-	onConsent: c => {
-		console.log('consent changed', c)
-	},
-})

src/index.tsx

@@ -10,7 +10,6 @@ import { ApplicationStyles } from '@thematic/react'
 import ReactDOM from 'react-dom'
 import { RecoilRoot } from 'recoil'
 import { ThemeProvider } from 'styled-components'
-import './consent'
 import './index.css'
 
 const ThemedApp = () => {

yarn.lock

@@ -1805,6 +1805,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@essex-js-toolkit/hooks@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "@essex-js-toolkit/hooks@npm:4.0.1"
+  dependencies:
+    "@essex-js-toolkit/toolbox": 3.0.1
+    lodash-es: ^4.17.21
+  peerDependencies:
+    "@types/node": "*"
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ">=16.8.0"
+  checksum: 3c120777bc3653b61b0e1ad4f96addf3248e330dcc7053009120443e91e878fe44daf232c62147070ff9a83f0dbeb0ece43a9ccb37c0f644cf5d622802f600ba
+  languageName: node
+  linkType: hard
+
 "@essex-js-toolkit/thematic-lineup@npm:^1.1.5":
   version: 1.1.5
   resolution: "@essex-js-toolkit/thematic-lineup@npm:1.1.5"
@@ -1880,6 +1895,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@essex-js-toolkit/toolbox@npm:3.0.1":
+  version: 3.0.1
+  resolution: "@essex-js-toolkit/toolbox@npm:3.0.1"
+  checksum: 24b864ce1819374b00ab6f5b8633232c3ea212993dc52467a7de4f606843cfaa19ad3239bb257fcfd0c6bf189319602005be372070bc1f4f98570288a3dfdac6
+  languageName: node
+  linkType: hard
+
 "@essex-js-toolkit/toolbox@npm:^1.1.3, @essex-js-toolkit/toolbox@npm:^1.1.4":
   version: 1.1.4
   resolution: "@essex-js-toolkit/toolbox@npm:1.1.4"
@@ -10557,7 +10579,7 @@ fsevents@^1.2.7:
     "@babel/runtime": ^7.14.0
     "@commitlint/cli": ^12.1.2
     "@essex-js-toolkit/hierarchy-browser": 3.0.1
-    "@essex-js-toolkit/hooks": 3.0.0
+    "@essex-js-toolkit/hooks": ^4.0.1
     "@essex-js-toolkit/thematic-lineup": ^1.1.5
     "@essex-js-toolkit/themed-components": ^1.2.0
     "@essex-js-toolkit/toolbox": 2.0.1
@@ -13294,6 +13316,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"lodash-es@npm:^4.17.21":
+  version: 4.17.21
+  resolution: "lodash-es@npm:4.17.21"
+  checksum: 05cbffad6e2adbb331a4e16fbd826e7faee403a1a04873b82b42c0f22090f280839f85b95393f487c1303c8a3d2a010048bf06151a6cbe03eee4d388fb0a12d2
+  languageName: node
+  linkType: hard
+
 "lodash.camelcase@npm:^4.3.0":
   version: 4.3.0
   resolution: "lodash.camelcase@npm:4.3.0"