feat(privacy): draft workflows

Author: SabreCat

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

@@ -15,11 +15,14 @@
     >
       <button
         class="btn btn-primary mb-2"
-        @click="close()"
+        @click="consent(true)"
       >
         {{ $t('acceptAllCookies') }}
       </button>
-      <button class="btn btn-secondary mb-2">
+      <button
+        class="btn btn-secondary mb-2"
+        @click="consent(false)"
+      >
         {{ $t('denyNonEssentialCookies') }}
       </button>
       <a
@@ -72,37 +75,48 @@
 
 <script>
 import { nextTick } from 'vue';
-import {
-  hideBanner, isBannerHidden,
-} from '@/libs/banner.func';
+import { GenericUserPreferencesMixin } from '@/pages/settings/components/genericUserPreferencesMixin';
 import { EVENTS } from '@/libs/events';
-
-const BANNER_ID = 'privacy-preferences';
+import { mapState } from '@/libs/store';
 
 export default {
+  mixins: [GenericUserPreferencesMixin],
   computed: {
     isStaticPage () {
       return this.$route.meta.requiresLogin === false;
     },
+    ...mapState({
+      user: 'user.data',
+    }),
   },
   data () {
     return {
       hidden: false,
     };
   },
   mounted () {
-    if (isBannerHidden(BANNER_ID)) {
+    if (localStorage.getItem('analyticsConsent') !== null
+      || this.user?.preferences?.analyticsConsent !== undefined
+    ) {
       this.hidden = true;
     }
   },
   methods: {
     close () {
-      hideBanner(BANNER_ID);
       this.hidden = true;
       nextTick(() => {
         this.$root.$emit(EVENTS.BANNER_HEIGHT_UPDATED);
       });
     },
+    consent (decision) {
+      if (this.user) {
+        this.user.preferences.analyticsConsent = decision;
+        this.setUserPreference('analyticsConsent');
+      } else {
+        localStorage.setItem('analyticsConsent', decision);
+      }
+      this.close();
+    },
     showPrivacyModal () {
       this.$root.$emit('bv::show::modal', 'privacy-preferences');
     },

website/client/src/libs/analytics.js

@@ -16,7 +16,7 @@ const REQUIRED_FIELDS = ['eventCategory', 'eventAction'];
 function _getConsentedUser () {
   const store = getStore();
   const user = store.state.user.data;
-  if (user.preferences?.privacy?.disableAnalytics) return false;
+  if (!user?.preferences?.analyticsConsent) return false;
   return user;
 }
 

website/client/src/pages/settings/siteDataRows/privacyPreferencesRow.vue

@@ -54,8 +54,8 @@
           >
             <div class="settings-label w-50"> {{ $t('performanceAnalytics') }}</div>
             <toggle-switch
-              v-model="user.preferences.privacy.disableAnalytics"
-              @change="setUserPreference('privacy', 'disableAnalytics')"
+              v-model="user.preferences.analyticsConsent"
+              @change="setUserPreference('analyticsConsent')"
             />
           </div>
           <div class="mb-4">

website/client/src/pages/user-main.vue

@@ -263,6 +263,12 @@ export default {
       this.$store.state.isUserLoaded = true;
       Analytics.setUser();
       Analytics.updateUser();
+      const analyticsConsent = localStorage.getItem('analyticsConsent');
+      if (analyticsConsent !== null
+        && analyticsConsent !== this.user.preferences.analyticsConsent
+      ) {
+        this.$store.dispatch('user:set', { 'preferences.analyticsConsent': analyticsConsent });
+      }
       if (window && window['habitica-i18n']) {
         if (this.user.preferences.language === window['habitica-i18n'].language.code) {
           return null;

website/server/libs/analyticsService.js

@@ -217,13 +217,17 @@ function _setOnce (dataToSetOnce, uuid) {
 
 // There's no error handling directly here because it's handled inside _sendDataTo{Amplitude|Google}
 async function track (eventType, data, loggerOnly = false) {
+  const { user } = data;
+  if (!user.preferences?.analyticsConsent) {
+    return;
+  }
   const promises = [
     _sendDataToAmplitude(eventType, data, loggerOnly),
   ];
-  if (data.user && data.user.registeredThrough) {
+  if (user.registeredThrough) {
     promises.push(_setOnce({
-      registeredPlatform: data.user.registeredThrough,
-    }, data.uuid || data.user._id));
+      registeredPlatform: user.registeredThrough,
+    }, data.uuid || user._id));
   }
 
   return Promise.all(promises);
@@ -232,6 +236,10 @@ async function track (eventType, data, loggerOnly = false) {
 // There's no error handling directly here because
 // it's handled inside _sendPurchaseDataTo{Amplitude|Google}
 async function trackPurchase (data) {
+  const { user } = data;
+  if (!user.preferences?.analyticsConsent) {
+    return;
+  }
   return Promise.all([
     _sendPurchaseDataToAmplitude(data),
   ]);

website/server/models/user/schema.js

@@ -626,10 +626,7 @@ export const UserSchema = new Schema({
         return isValidCategory;
       },
     },
-    privacy: {
-      disableAnalytics: { $type: Boolean, default: false },
-      acceptedWebCookies: { $type: Boolean, default: false },
-    },
+    analyticsConsent: Boolean,
   },
   profile: {
     blurb: String,