WIP - new default ui integration

gatsby/gatsby-browser.js

@@ -1,8 +1,10 @@
 import React from "react"
-import { ConsentManagerWrapper } from "./src/components/consent-manager/wrapper"
 
 import "./src/styles/global.css"
 
+import { ConsentManagerWrapper } from "./src/consent-manager/consent-manager"
+export { onRouteUpdate } from "./src/consent-manager/consent-manager"
+
 export const wrapRootElement = ({ element }) => {
   return <ConsentManagerWrapper>{element}</ConsentManagerWrapper>
 }

gatsby/package.json

@@ -5,28 +5,29 @@
   "version": "0.1.0",
   "author": "Kyle Mathews <[email protected]>",
   "dependencies": {
-    "@techboi/consent-manager": "^0.2.0",
-    "@techboi/consent-manager-integration-matomo": "^0.2.0",
-    "@techboi/consent-manager-integration-youtube": "^0.2.0",
+    "@consent-manager/core": "^0.1.0-alpha.0",
+    "@consent-manager/integration-matomo": "^0.1.0-alpha.0",
+    "@consent-manager/interface-default": "^0.1.0-alpha.0",
     "autoprefixer": "^10.2.5",
     "final-form": "^4.20.2",
-    "gatsby": "^3.1.0",
-    "gatsby-image": "^3.1.0",
-    "gatsby-plugin-manifest": "^3.1.0",
-    "gatsby-plugin-offline": "^4.1.0",
-    "gatsby-plugin-postcss": "^4.1.0",
-    "gatsby-plugin-react-helmet": "^4.1.0",
-    "gatsby-plugin-sharp": "^3.1.0",
-    "gatsby-source-filesystem": "^3.1.0",
-    "gatsby-transformer-sharp": "^3.1.0",
-    "postcss": "^8.2.8",
+    "gatsby": "^3.3.0",
+    "gatsby-image": "^3.3.0",
+    "gatsby-plugin-manifest": "^3.3.0",
+    "gatsby-plugin-offline": "^4.3.0",
+    "gatsby-plugin-postcss": "^4.3.0",
+    "gatsby-plugin-react-helmet": "^4.3.0",
+    "gatsby-plugin-sharp": "^3.3.0",
+    "gatsby-source-filesystem": "^3.3.0",
+    "gatsby-transformer-sharp": "^3.3.0",
+    "postcss": "^8.2.10",
     "prop-types": "^15.7.2",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "react-final-form": "^6.5.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-final-form": "^6.5.3",
     "react-helmet": "^6.1.0",
     "react-icons": "^4.2.0",
-    "tailwindcss": "^2.0.3"
+    "tailwindcss": "^2.1.1",
+    "use-persisted-state": "^0.3.3"
   },
   "devDependencies": {
     "prettier": "2.2.1"

gatsby/src/components/image.js

@@ -1,7 +1,7 @@
 import React from "react"
 import { useStaticQuery, graphql } from "gatsby"
 import Img from "gatsby-image"
-import { PrivacyShield } from "@techboi/consent-manager"
+import { PrivacyShield } from "@consent-manager/core"
 
 /*
  * This component is built using `gatsby-image` to automatically serve optimized

gatsby/src/consent-manager/consent-manager.js

@@ -0,0 +1,114 @@
+/**
+ * This file integrates consent-manager to protect our visitors privacy
+ * and supports us to align with GDPR and CCPA.
+ *
+ * Learn more: https://github.com/techboi/consent-manager
+ */
+
+import React from "react"
+
+import { ConsentManager, ConsentManagerForm } from "@consent-manager/core"
+import createPersistedState from "use-persisted-state"
+
+import {
+  matomoIntegration,
+  getMatomoTracker,
+} from "@consent-manager/integration-matomo"
+
+import { InterfaceDefault } from "@consent-manager/interface-default"
+import "@consent-manager/interface-default/dist/default.min.css"
+
+import { Switch } from "./tailwind-switch"
+import { FallbackComponent } from "./tailwind-fallback-component"
+
+const useConsentStateStore = createPersistedState("consent-manager")
+
+const consentManagerConfig = {
+  integrations: [
+    matomoIntegration({
+      matomoURL: process.env.GATSBY_MATOMO_URL,
+      siteID: process.env.GATSBY_MATOMO_SITE_ID,
+    }),
+    {
+      id: "images",
+      title: "Gatsby Image",
+      category: "social",
+      description: "You didn't consent to loading images of Gatsby.",
+      Icon: (props) => (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          viewBox="0 0 28 28"
+          {...props}
+        >
+          <circle cx="14" cy="14" r="14" fill="#639" />
+          <path
+            d="M6 22c-2-2-3-5-3-8l11 11c-3 0-6-1-8-3zM16 25L3 12a11 11 0 0120-4l-2 1c-1-2-4-4-7-4-4 0-7 3-8 6l11 12c3-1 5-4 6-7h-5v-2h7c0 5-4 10-9 11z"
+            fill="#fff"
+          />
+        </svg>
+      ),
+      privacyPolicyUrl: "https://gdpr.eu/what-is-gdpr/",
+    },
+  ],
+}
+
+const SubmitButton = (props) => (
+  <button
+    className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+    {...props}
+  />
+)
+
+/**
+ * Wraps the apps root element with consent-manager
+ * See:
+ * * https://github.com/techboi/consent-manager
+ * * https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/#wrapRootElement
+ */
+export function ConsentManagerWrapper({ children }) {
+  const storage = useConsentStateStore()
+
+  return (
+    <ConsentManager
+      config={consentManagerConfig}
+      store={storage}
+      fallbackComponent={FallbackComponent}
+    >
+      {children}
+      <ConsentManagerForm
+        formComponent={InterfaceDefault}
+        Switch={Switch}
+        SubmitButton={SubmitButton}
+      />
+    </ConsentManager>
+  )
+}
+
+/**
+ * Called when the user changes routes, including on the initial load of the app
+ * See: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/#onRouteUpdate
+ */
+export function onRouteUpdate({ location, prevLocation }) {
+  const { trackPageViewSPA } = getMatomoTracker()
+
+  if (!prevLocation) {
+    return
+  }
+
+  // This ensures plugins like react-helmet finished their work
+  window.setTimeout(() => {
+    const trackResult = trackPageViewSPA({ location, prevLocation })
+
+    // Debug logging
+    if (process.env.gatsby_log_level === `verbose`) {
+      const { url, title } = trackResult
+      if (!trackResult) {
+        return console.debug(
+          `[Matomo] Failed to track page view: ${url} - ${title}`
+        )
+      }
+      console.debug(`[Matomo] Page view for: ${url} - ${title}`)
+    }
+  }, 0)
+}