fix(privacy): wire up modal

Author: SabreCat

website/client/src/components/header/banners/privacy.vue

@@ -98,6 +98,9 @@ export default {
     ) {
       this.hidden = true;
     }
+    this.$root.$on('privacy-complete', () => {
+      this.close();
+    });
   },
   methods: {
     close () {

website/client/src/components/settings/privacyModal.vue

@@ -21,7 +21,9 @@
         <label class="mb-0">
           {{ $t('performanceAnalytics') }}
         </label>
-        <toggle-switch />
+        <toggle-switch
+          v-model="privacyConsent"
+        />
       </div>
       <small>
         {{ $t('usedForSupport') }}
@@ -44,13 +46,22 @@
       </small>
     </div>
     <div class="d-flex flex-column text-center">
-      <button class="btn btn-primary mb-2">
+      <button
+        class="btn btn-primary mb-2"
+        @click="consent(true)"
+      >
         {{ $t('acceptAllCookies') }}
       </button>
-      <button class="btn btn-secondary mb-2">
+      <button
+        class="btn btn-primary mb-2"
+        @click="consent(false)"
+      >
         {{ $t('denyNonEssentialCookies') }}
       </button>
-      <button class="btn btn-secondary mb-3">
+      <button
+        class="btn btn-secondary mb-3"
+        @click="consent(privacyConsent)"
+      >
         {{ $t('savePreferences') }}
       </button>
       <a
@@ -92,7 +103,17 @@ export default {
     closeX,
     ToggleSwitch,
   },
+  data () {
+    return {
+      privacyConsent: true,
+    };
+  },
   methods: {
+    consent (decision) {
+      localStorage.setItem('analyticsConsent', decision);
+      this.$root.$emit('privacy-complete');
+      this.close();
+    },
     close () {
       this.$root.$emit('bv::hide::modal', 'privacy-preferences');
     },

website/client/src/libs/analytics.js

@@ -80,7 +80,9 @@ export function track (properties, options = {}) {
     // Track events on the server by default
     if (trackOnClient === true) {
       amplitude.getInstance().logEvent(properties.eventAction, properties);
-      window.gtag('event', properties.eventAction, properties);
+      if (window.gtag) {
+        window.gtag('event', properties.eventAction, properties);
+      }
     } else {
       const store = getStore();
       store.dispatch('analytics:trackEvent', properties);
@@ -94,7 +96,9 @@ export function updateUser (properties = {}) {
   // Use nextTick to avoid blocking the UI
   Vue.nextTick(() => {
     _gatherUserStats(properties);
-    window.gtag('set', 'user_properties', properties);
+    if (window.gtag) {
+      window.gtag('set', 'user_properties', properties);
+    }
     forEach(properties, (value, key) => {
       const identify = new amplitude.Identify().set(key, value);
       amplitude.getInstance().identify(identify);