From 6b373bee473bf26040adf32fe1ba38d7b02ed9e8 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 5 Jul 2021 12:42:44 -0400
Subject: [PATCH 1/9] feat: update env with FB_MEASUREMENT_ID

---
 .env.example | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.env.example b/.env.example
index b41817769..fab8d26ec 100644
--- a/.env.example
+++ b/.env.example
@@ -13,6 +13,7 @@ STORAGE_BUCKET=postwoman-api.appspot.com
 MESSAGING_SENDER_ID=421993993223
 APP_ID=1:421993993223:web:ec0baa8ee8c02ffa1fc6a2
 MEASUREMENT_ID=G-ERJ6025CEB
+FB_MEASUREMENT_ID=G-BBJ3R80PJT
 
 # Base URL
 BASE_URL=https://hoppscotch.io

From b1418c081c682052f85e9ca3fcb004fdef9db7c8 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 5 Jul 2021 12:44:43 -0400
Subject: [PATCH 2/9] feat: auth event subject

---
 helpers/fb/auth.ts | 36 +++++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/helpers/fb/auth.ts b/helpers/fb/auth.ts
index 5fa323a45..08a7c0874 100644
--- a/helpers/fb/auth.ts
+++ b/helpers/fb/auth.ts
@@ -1,11 +1,16 @@
 import firebase from "firebase"
-import { BehaviorSubject } from "rxjs"
+import { BehaviorSubject, Subject } from "rxjs"
 
 export type HoppUser = firebase.User & {
   provider?: string
   accessToken?: string
 }
 
+type AuthEvents =
+  | { event: "login"; user: HoppUser }
+  | { event: "logout" }
+  | { event: "authTokenUpdate"; user: HoppUser; newToken: string | null }
+
 /**
  * A BehaviorSubject emitting the currently logged in user (or null if not logged in)
  */
@@ -15,6 +20,11 @@ export const currentUser$ = new BehaviorSubject<HoppUser | null>(null)
  */
 export const authIdToken$ = new BehaviorSubject<string | null>(null)
 
+/**
+ * A subject that emits events related to authentication flows
+ */
+export const authEvents$ = new Subject<AuthEvents>()
+
 /**
  * Initializes the firebase authentication related subjects
  */
@@ -22,6 +32,9 @@ export function initAuth() {
   let extraSnapshotStop: (() => void) | null = null
 
   firebase.auth().onAuthStateChanged((user) => {
+    /** Whether the user was logged in before */
+    const wasLoggedIn = currentUser$.value !== null
+
     if (!user && extraSnapshotStop) {
       extraSnapshotStop()
       extraSnapshotStop = null
@@ -61,14 +74,35 @@ export function initAuth() {
             userUpdate.provider = data.provider
             userUpdate.accessToken = data.accessToken
           }
+
+          currentUser$.next(userUpdate)
         })
     }
     currentUser$.next(user)
+
+    // User wasn't found before, but now is there (login happened)
+    if (!wasLoggedIn && user) {
+      authEvents$.next({
+        event: "login",
+        user: currentUser$.value!!,
+      })
+    } else if (wasLoggedIn && !user) {
+      // User was found before, but now is not there (logout happened)
+      authEvents$.next({
+        event: "logout",
+      })
+    }
   })
 
   firebase.auth().onIdTokenChanged(async (user) => {
     if (user) {
       authIdToken$.next(await user.getIdToken())
+
+      authEvents$.next({
+        event: "authTokenUpdate",
+        newToken: authIdToken$.value,
+        user: currentUser$.value!!, // Force not-null because user is defined
+      })
     } else {
       authIdToken$.next(null)
     }

From 913b073ba423eada2b9322bfb81f3d175d20560d Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 5 Jul 2021 12:45:10 -0400
Subject: [PATCH 3/9] feat: add initial analytics implementation

---
 helpers/fb/analytics.ts | 48 +++++++++++++++++++++++++++++++++++++++++
 helpers/fb/index.ts     | 25 +++++++++++++--------
 2 files changed, 64 insertions(+), 9 deletions(-)
 create mode 100644 helpers/fb/analytics.ts

diff --git a/helpers/fb/analytics.ts b/helpers/fb/analytics.ts
new file mode 100644
index 000000000..839b1448d
--- /dev/null
+++ b/helpers/fb/analytics.ts
@@ -0,0 +1,48 @@
+import firebase from "firebase"
+import { authEvents$ } from "./auth"
+import { settings$ } from "~/newstore/settings"
+
+let analytics: firebase.analytics.Analytics
+
+type SettingsCustomDimensions = {
+  usesProxy: boolean
+  usesExtension: boolean
+  usesScrollInto: boolean
+  syncCollections: boolean
+  syncEnvironments: boolean
+  syncHistory: boolean
+}
+
+export function initAnalytics() {
+  analytics = firebase.app().analytics()
+
+  initLoginListeners()
+  initSettingsListeners()
+}
+
+function initLoginListeners() {
+  authEvents$.subscribe((ev) => {
+    if (ev.event === "login") {
+      analytics.setUserId(ev.user.uid)
+
+      analytics.logEvent("login", {
+        method: ev.user.providerData[0]?.providerId, // Assume the first provider is the login provider
+      })
+    } else if (ev.event === "logout") {
+      analytics.logEvent("logout")
+    }
+  })
+}
+
+function initSettingsListeners() {
+  settings$.subscribe((settings) => {
+    analytics.setUserProperties(<SettingsCustomDimensions>{
+      usesProxy: settings.PROXY_ENABLED,
+      usesExtension: settings.EXTENSIONS_ENABLED,
+      usesScrollInto: settings.SCROLL_INTO_ENABLED,
+      syncCollections: settings.syncCollections,
+      syncEnvironments: settings.syncEnvironments,
+      syncHistory: settings.syncHistory,
+    })
+  })
+}
diff --git a/helpers/fb/index.ts b/helpers/fb/index.ts
index 25566d530..9eb128b11 100644
--- a/helpers/fb/index.ts
+++ b/helpers/fb/index.ts
@@ -1,4 +1,5 @@
 import firebase from "firebase"
+import { initAnalytics } from "./analytics"
 import { initAuth } from "./auth"
 import { initCollections } from "./collections"
 import { initEnvironments } from "./environments"
@@ -13,21 +14,27 @@ const firebaseConfig = {
   storageBucket: process.env.STORAGE_BUCKET,
   messagingSenderId: process.env.MESSAGING_SENDER_ID,
   appId: process.env.APP_ID,
-  measurementId: process.env.MEASUREMENT_ID,
+  measurementId: process.env.FB_MEASUREMENT_ID,
 }
 
 let initialized = false
 
 export function initializeFirebase() {
   if (!initialized) {
-    firebase.initializeApp(firebaseConfig)
+    try {
+      firebase.initializeApp(firebaseConfig)
 
-    initAuth()
-    initSettings()
-    initCollections()
-    initHistory()
-    initEnvironments()
+      initAuth()
+      initSettings()
+      initCollections()
+      initHistory()
+      initEnvironments()
+      initAnalytics()
 
-    initialized = true
+      initialized = true
+    } catch (e) {
+      // initializeApp throws exception if we reinitialize
+      initialized = true
+    }
   }
-}
+}
\ No newline at end of file

From 86bd4aa568c3b2cd86176df3d00270059040260b Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 5 Jul 2021 20:02:29 -0400
Subject: [PATCH 4/9] feat: add analytics logging while hoppscotch requests are
 fired

---
 components/realtime/Mqtt.vue      |  5 +++++
 components/realtime/Socketio.vue  |  5 +++++
 components/realtime/Sse.vue       |  5 +++++
 components/realtime/Websocket.vue |  5 +++++
 helpers/fb/analytics.ts           | 11 +++++++++++
 helpers/network.js                | 16 ++++++++++++++++
 pages/graphql.vue                 | 13 ++++++++++++-
 pages/index.vue                   | 12 +++++++++++-
 8 files changed, 70 insertions(+), 2 deletions(-)

diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index 189cd0c98..0ff047bf1 100644
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -121,6 +121,7 @@
 <script>
 import Paho from "paho-mqtt"
 import debounce from "~/helpers/utils/debounce"
+import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 
 export default {
   data() {
@@ -191,6 +192,10 @@ export default {
       })
       this.client.onConnectionLost = this.onConnectionLost
       this.client.onMessageArrived = this.onMessageArrived
+
+      logHoppRequestRunToAnalytics({
+        platform: "mqtt",
+      })
     },
     onConnectionFailure() {
       this.connectionState = false
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index 40e72eadd..0ee080f0c 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -141,6 +141,7 @@
 import { io as Client } from "socket.io-client"
 import wildcard from "socketio-wildcard"
 import debounce from "~/helpers/utils/debounce"
+import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 
 export default {
   data() {
@@ -262,6 +263,10 @@ export default {
           icon: "error",
         })
       }
+
+      logHoppRequestRunToAnalytics({
+        platform: "socketio",
+      })
     },
     disconnect() {
       this.io.close()
diff --git a/components/realtime/Sse.vue b/components/realtime/Sse.vue
index 5bc903165..eebea9c36 100644
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -48,6 +48,7 @@
 </template>
 
 <script>
+import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import debounce from "~/helpers/utils/debounce"
 
 export default {
@@ -158,6 +159,10 @@ export default {
           },
         ]
       }
+
+      logHoppRequestRunToAnalytics({
+        platform: "mqtt",
+      })
     },
     handleSSEError(error) {
       this.stop()
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index c4e7cf12b..f089e7c87 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -159,6 +159,7 @@
 </template>
 
 <script>
+import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import debounce from "~/helpers/utils/debounce"
 
 export default {
@@ -273,6 +274,10 @@ export default {
           icon: "error",
         })
       }
+
+      logHoppRequestRunToAnalytics({
+        platform: "wss",
+      })
     },
     disconnect() {
       if (this.socket) {
diff --git a/helpers/fb/analytics.ts b/helpers/fb/analytics.ts
index 839b1448d..f5eb8ad51 100644
--- a/helpers/fb/analytics.ts
+++ b/helpers/fb/analytics.ts
@@ -13,6 +13,13 @@ type SettingsCustomDimensions = {
   syncHistory: boolean
 }
 
+type HoppRequestEvent =
+  | {
+      platform: "rest" | "graphql-query" | "graphql-schema"
+      strategy: "normal" | "proxy" | "extension"
+    }
+  | { platform: "wss" | "sse" | "socketio" | "mqtt" }
+
 export function initAnalytics() {
   analytics = firebase.app().analytics()
 
@@ -46,3 +53,7 @@ function initSettingsListeners() {
     })
   })
 }
+
+export function logHoppRequestRunToAnalytics(ev: HoppRequestEvent) {
+  analytics.logEvent("hopp-request", ev)
+}
diff --git a/helpers/network.js b/helpers/network.js
index 4ba209b03..ca291440e 100644
--- a/helpers/network.js
+++ b/helpers/network.js
@@ -25,5 +25,21 @@ const runAppropriateStrategy = (req) => {
   return AxiosStrategy(req)
 }
 
+/**
+ * Returns an identifier for how a request will be ran
+ * if the system is asked to fire a request
+ *
+ * @returns {"normal" | "extension" | "proxy"}
+ */
+export function getCurrentStrategyID() {
+  if (isExtensionsAllowed() && hasExtensionInstalled()) {
+    return "extension"
+  } else if (settingsStore.value.PROXY_ENABLED) {
+    return "proxy"
+  } else {
+    return "normal"
+  }
+}
+
 export const sendNetworkRequest = (req) =>
   runAppropriateStrategy(req).finally(() => window.$nuxt.$loading.finish())
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 6ec239bff..9dc899aa2 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -485,9 +485,10 @@
 import * as gql from "graphql"
 import { commonHeaders } from "~/helpers/headers"
 import { getPlatformSpecialKey } from "~/helpers/platformutils"
-import { sendNetworkRequest } from "~/helpers/network"
+import { getCurrentStrategyID, sendNetworkRequest } from "~/helpers/network"
 import { getSettingSubject } from "~/newstore/settings"
 import { addGraphqlHistoryEntry } from "~/newstore/history"
+import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 
 export default {
   beforeRouteLeave(_to, _from, next) {
@@ -849,6 +850,11 @@ export default {
         })
         console.log("Error", error)
       }
+
+      logHoppRequestRunToAnalytics({
+        platform: "graphql-query",
+        strategy: getCurrentStrategyID(),
+      })
     },
 
     // NOTE : schema required here is the GQL Schema document object, not the schema string
@@ -918,6 +924,11 @@ export default {
         await this.getSchema()
 
         this.pollSchema()
+
+        logHoppRequestRunToAnalytics({
+          platform: "graphql-schema",
+          strategy: getCurrentStrategyID(),
+        })
       }
     },
     async pollSchema() {
diff --git a/pages/index.vue b/pages/index.vue
index f69c8a7b7..d1a593acd 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -766,7 +766,11 @@ import getEnvironmentVariablesFromScript from "~/helpers/preRequest"
 import runTestScriptWithVariables from "~/helpers/postwomanTesting"
 import parseTemplateString from "~/helpers/templating"
 import { tokenRequest, oauthRedirect } from "~/helpers/oauth"
-import { cancelRunningRequest, sendNetworkRequest } from "~/helpers/network"
+import {
+  cancelRunningRequest,
+  getCurrentStrategyID,
+  sendNetworkRequest,
+} from "~/helpers/network"
 import {
   hasPathParams,
   addPathParamsToVariables,
@@ -782,6 +786,7 @@ import { generateCodeWithGenerator } from "~/helpers/codegen/codegen"
 import { getSettingSubject, applySetting } from "~/newstore/settings"
 import { addRESTHistoryEntry } from "~/newstore/history"
 import clone from "lodash/clone"
+import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 
 export default {
   data() {
@@ -1642,6 +1647,11 @@ export default {
         response: syntheticResponse,
       })
       this.testReports = testResults
+
+      logHoppRequestRunToAnalytics({
+        platform: "rest",
+        strategy: getCurrentStrategyID(),
+      })
     },
     getQueryStringFromPath() {
       const pathParsed = url.parse(this.uri)

From 48e562dcee26670914981de5b5579819515e071f Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 6 Jul 2021 08:20:37 -0400
Subject: [PATCH 5/9] feat: theme syncing

---
 components/smart/AccentModePicker.vue | 45 +++++++++++++--------------
 components/smart/ColorModePicker.vue  | 39 +++++++++++++++--------
 layouts/default.vue                   | 19 ++++++-----
 newstore/localpersistence.ts          | 23 +++++++++++++-
 newstore/settings.ts                  | 45 +++++++++++++++++++++++++--
 5 files changed, 122 insertions(+), 49 deletions(-)

diff --git a/components/smart/AccentModePicker.vue b/components/smart/AccentModePicker.vue
index a296c11b6..7e73d9f1c 100644
--- a/components/smart/AccentModePicker.vue
+++ b/components/smart/AccentModePicker.vue
@@ -38,40 +38,37 @@
   </div>
 </template>
 
-<script>
-import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
+<script lang="ts">
+import Vue from "vue"
+import {
+  HoppAccentColors,
+  HoppAccentColor,
+  getSettingSubject,
+  settingsStore,
+  applySetting,
+} from "~/newstore/settings"
 
-export default {
+export default Vue.extend({
   data() {
     return {
-      active: getLocalConfig("THEME_COLOR") || "green",
-      accentColors: [
-        "blue",
-        "green",
-        "teal",
-        "indigo",
-        "purple",
-        "orange",
-        "pink",
-        "red",
-        "yellow",
-      ],
+      accentColors: HoppAccentColors,
+      active: settingsStore.value.THEME_COLOR,
     }
   },
-  watch: {
-    active(color) {
-      setLocalConfig("THEME_COLOR", color)
-    },
+  subscriptions() {
+    return {
+      active: getSettingSubject("THEME_COLOR"),
+    }
   },
-
   methods: {
-    setActiveColor(color) {
+    setActiveColor(color: HoppAccentColor) {
       document.documentElement.setAttribute("data-accent", color)
-      this.active = color
+
+      applySetting("THEME_COLOR", color)
     },
-    capitalized(color) {
+    capitalized(color: HoppAccentColor) {
       return `${color.charAt(0).toUpperCase()}${color.slice(1)}`
     },
   },
-}
+})
 </script>
diff --git a/components/smart/ColorModePicker.vue b/components/smart/ColorModePicker.vue
index 52b236743..34843942a 100644
--- a/components/smart/ColorModePicker.vue
+++ b/components/smart/ColorModePicker.vue
@@ -3,11 +3,8 @@
     <label>
       <ColorScheme placeholder="..." tag="span">
         {{ $t("background") }}:
-        {{
-          $colorMode.preference.charAt(0).toUpperCase() +
-          $colorMode.preference.slice(1)
-        }}
-        <span v-if="$colorMode.preference === 'system'">
+        {{ activeColor.charAt(0).toUpperCase() + activeColor.slice(1) }}
+        <span v-if="activeColor === 'system'">
           ({{ $colorMode.value }} mode detected)
         </span>
       </ColorScheme>
@@ -33,10 +30,10 @@
           hover:text-secondary
         "
         :class="[
-          { 'bg-primary': color === $colorMode.preference },
-          { 'text-accent hover:text-accent': color === $colorMode.value },
+          { 'bg-primary': color === activeColor },
+          { 'text-accent hover:text-accent': color === activeColor },
         ]"
-        @click="$colorMode.preference = color"
+        @click="setBGMode(color)"
       >
         <i class="material-icons">{{ getIcon(color) }}</i>
       </span>
@@ -44,15 +41,31 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from "vue"
+import {
+  applySetting,
+  getSettingSubject,
+  HoppBgColor,
+  HoppBgColors,
+} from "~/newstore/settings"
+
+export default Vue.extend({
   data() {
     return {
-      colors: ["system", "light", "dark", "black"],
+      colors: HoppBgColors,
+    }
+  },
+  subscriptions() {
+    return {
+      activeColor: getSettingSubject("BG_COLOR"),
     }
   },
   methods: {
-    getIcon(color) {
+    setBGMode(color: HoppBgColor) {
+      applySetting("BG_COLOR", color)
+    },
+    getIcon(color: HoppBgColor) {
       switch (color) {
         case "system":
           return "desktop_windows"
@@ -67,5 +80,5 @@ export default {
       }
     },
   },
-}
+})
 </script>
diff --git a/layouts/default.vue b/layouts/default.vue
index 3d0c747a5..e03c71b72 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -14,21 +14,24 @@
 </template>
 
 <script>
-import {
-  setupLocalPersistence,
-  getLocalConfig,
-} from "~/newstore/localpersistence"
+import { setupLocalPersistence } from "~/newstore/localpersistence"
 import { performMigrations } from "~/helpers/migrations"
 import { initUserInfo } from "~/helpers/teams/BackendUserInfo"
 import { registerApolloAuthUpdate } from "~/helpers/apollo"
 import { initializeFirebase } from "~/helpers/fb"
+import { getSettingSubject } from "~/newstore/settings"
 
 export default {
   beforeMount() {
     registerApolloAuthUpdate()
 
-    const color = getLocalConfig("THEME_COLOR") || "green"
-    document.documentElement.setAttribute("data-accent", color)
+    this.$subscribeTo(getSettingSubject("THEME_COLOR"), (color) => {
+      document.documentElement.setAttribute("data-accent", color)
+    })
+
+    this.$subscribeTo(getSettingSubject("BG_COLOR"), (color) => {
+      this.$colorMode.preference = color
+    })
   },
   async mounted() {
     performMigrations()
@@ -46,13 +49,13 @@ export default {
     if (workbox) {
       workbox.addEventListener("installed", (event) => {
         if (event.isUpdate) {
-          this.$toast.show(this.$t("new_version_found"), {
+          this.$toast.show(this.$t("new_version_found").toString(), {
             icon: "info",
             duration: 0,
             theme: "toasted-primary",
             action: [
               {
-                text: this.$t("reload"),
+                text: this.$t("reload").toString(),
                 onClick: (_, toastObject) => {
                   toastObject.goAway(0)
                   window.location.reload()
diff --git a/newstore/localpersistence.ts b/newstore/localpersistence.ts
index f915763e7..be030f1d2 100644
--- a/newstore/localpersistence.ts
+++ b/newstore/localpersistence.ts
@@ -3,7 +3,14 @@
 import clone from "lodash/clone"
 import assign from "lodash/assign"
 import eq from "lodash/eq"
-import { settingsStore, bulkApplySettings, defaultSettings } from "./settings"
+import {
+  settingsStore,
+  bulkApplySettings,
+  defaultSettings,
+  applySetting,
+  HoppAccentColor,
+  HoppBgColor,
+} from "./settings"
 import {
   restHistoryStore,
   graphqlHistoryStore,
@@ -55,6 +62,20 @@ function checkAndMigrateOldSettings() {
     delete vuexData.postwoman.environments
     window.localStorage.setItem("vuex", JSON.stringify(vuexData))
   }
+
+  if (window.localStorage.getItem("THEME_COLOR")) {
+    const themeColor = window.localStorage.getItem("THEME_COLOR")
+    applySetting("THEME_COLOR", themeColor as HoppAccentColor)
+
+    window.localStorage.removeItem("THEME_COLOR")
+  }
+
+  if (window.localStorage.getItem("nuxt-color-mode")) {
+    const color = window.localStorage.getItem("nuxt-color-mode") as HoppBgColor
+    applySetting("BG_COLOR", color)
+
+    window.localStorage.removeItem("BG_COLOR")
+  }
 }
 
 function setupSettingsPersistence() {
diff --git a/newstore/settings.ts b/newstore/settings.ts
index af99ce721..1d506ecd4 100644
--- a/newstore/settings.ts
+++ b/newstore/settings.ts
@@ -4,7 +4,46 @@ import { Observable } from "rxjs"
 import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
 import type { KeysMatching } from "~/types/ts-utils"
 
-export const defaultSettings = {
+export const HoppBgColors = ["system", "light", "dark", "black"] as const
+
+export type HoppBgColor = typeof HoppBgColors[number]
+
+export const HoppAccentColors = [
+  "blue",
+  "green",
+  "teal",
+  "indigo",
+  "purple",
+  "orange",
+  "pink",
+  "red",
+  "yellow",
+] as const
+
+export type HoppAccentColor = typeof HoppAccentColors[number]
+
+export type SettingsType = {
+  syncCollections: boolean
+  syncHistory: boolean
+  syncEnvironments: boolean
+
+  SCROLL_INTO_ENABLED: boolean
+  PROXY_ENABLED: boolean
+  PROXY_URL: string
+  PROXY_KEY: string
+  EXTENSIONS_ENABLED: boolean
+  EXPERIMENTAL_URL_BAR_ENABLED: boolean
+  URL_EXCLUDES: {
+    auth: boolean
+    httpUser: boolean
+    httpPassword: boolean
+    bearerToken: boolean
+  }
+  THEME_COLOR: HoppAccentColor
+  BG_COLOR: HoppBgColor
+}
+
+export const defaultSettings: SettingsType = {
   syncCollections: true,
   syncHistory: true,
   syncEnvironments: true,
@@ -21,10 +60,10 @@ export const defaultSettings = {
     httpPassword: true,
     bearerToken: true,
   },
+  THEME_COLOR: "green",
+  BG_COLOR: "system",
 }
 
-export type SettingsType = typeof defaultSettings
-
 const validKeys = Object.keys(defaultSettings)
 
 const dispatchers = defineDispatchers({

From 7b3dd697bb71b0feb8f9da973c3ae973dbfbaf87 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 6 Jul 2021 08:30:48 -0400
Subject: [PATCH 6/9] feat: pass theme data to analytics

---
 helpers/fb/analytics.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/helpers/fb/analytics.ts b/helpers/fb/analytics.ts
index f5eb8ad51..0c964c41d 100644
--- a/helpers/fb/analytics.ts
+++ b/helpers/fb/analytics.ts
@@ -1,6 +1,6 @@
 import firebase from "firebase"
 import { authEvents$ } from "./auth"
-import { settings$ } from "~/newstore/settings"
+import { HoppAccentColor, HoppBgColor, settings$ } from "~/newstore/settings"
 
 let analytics: firebase.analytics.Analytics
 
@@ -11,6 +11,8 @@ type SettingsCustomDimensions = {
   syncCollections: boolean
   syncEnvironments: boolean
   syncHistory: boolean
+  usesBg: HoppBgColor
+  usesAccent: HoppAccentColor
 }
 
 type HoppRequestEvent =
@@ -43,14 +45,18 @@ function initLoginListeners() {
 
 function initSettingsListeners() {
   settings$.subscribe((settings) => {
-    analytics.setUserProperties(<SettingsCustomDimensions>{
+    const conf: SettingsCustomDimensions = {
       usesProxy: settings.PROXY_ENABLED,
       usesExtension: settings.EXTENSIONS_ENABLED,
       usesScrollInto: settings.SCROLL_INTO_ENABLED,
       syncCollections: settings.syncCollections,
       syncEnvironments: settings.syncEnvironments,
       syncHistory: settings.syncHistory,
-    })
+      usesAccent: settings.THEME_COLOR,
+      usesBg: settings.BG_COLOR,
+    }
+
+    analytics.setUserProperties(conf)
   })
 }
 

From 20d38e247be290e26b8c274ef22ac63ada32b264 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 7 Jul 2021 06:30:49 +0530
Subject: [PATCH 7/9] feat: enable telemetry toggle button

---
 helpers/fb/analytics.ts |  2 ++
 lang/en-US.json         |  3 ++-
 newstore/settings.ts    |  2 ++
 pages/settings.vue      | 11 +++++++++++
 store/postwoman.js      |  5 +++++
 5 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/helpers/fb/analytics.ts b/helpers/fb/analytics.ts
index 0c964c41d..be859c33b 100644
--- a/helpers/fb/analytics.ts
+++ b/helpers/fb/analytics.ts
@@ -13,6 +13,7 @@ type SettingsCustomDimensions = {
   syncHistory: boolean
   usesBg: HoppBgColor
   usesAccent: HoppAccentColor
+  usesTelemetry: boolean
 }
 
 type HoppRequestEvent =
@@ -54,6 +55,7 @@ function initSettingsListeners() {
       syncHistory: settings.syncHistory,
       usesAccent: settings.THEME_COLOR,
       usesBg: settings.BG_COLOR,
+      usesTelemetry: settings.TELEMETRY_ENABLED,
     }
 
     analytics.setUserProperties(conf)
diff --git a/lang/en-US.json b/lang/en-US.json
index 4130f88df..8ddcc7491 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -339,5 +339,6 @@
   "hide_sidebar": "Hide sidebar",
   "show_sidebar": "Show sidebar",
   "protocols": "Protocols",
-  "protocol_count": "protocol {count}"
+  "protocol_count": "protocol {count}",
+  "telemetry": "Telemetry"
 }
diff --git a/newstore/settings.ts b/newstore/settings.ts
index 1d506ecd4..7fa279aba 100644
--- a/newstore/settings.ts
+++ b/newstore/settings.ts
@@ -41,6 +41,7 @@ export type SettingsType = {
   }
   THEME_COLOR: HoppAccentColor
   BG_COLOR: HoppBgColor
+  TELEMETRY_ENABLED: boolean
 }
 
 export const defaultSettings: SettingsType = {
@@ -62,6 +63,7 @@ export const defaultSettings: SettingsType = {
   },
   THEME_COLOR: "green",
   BG_COLOR: "system",
+  TELEMETRY_ENABLED: true,
 }
 
 const validKeys = Object.keys(defaultSettings)
diff --git a/pages/settings.vue b/pages/settings.vue
index 436e8f46d..247276280 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -199,6 +199,15 @@
             {{ $t("use_experimental_url_bar") }}
           </SmartToggle>
         </div>
+        <span>
+          <SmartToggle
+            :on="TELEMETRY_ENABLED"
+            @change="toggleSetting('TELEMETRY_ENABLED')"
+          >
+            {{ $t("telemetry") }}
+            {{ TELEMETRY_ENABLED ? $t("enabled") : $t("disabled") }}
+          </SmartToggle>
+        </span>
       </div>
     </AppSection>
     <FirebaseEmail :show="showEmail" @hide-modal="showEmail = false" />
@@ -263,6 +272,8 @@ export default Vue.extend({
       SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
       SYNC_HISTORY: getSettingSubject("syncHistory"),
 
+      TELEMETRY_ENABLED: getSettingSubject("TELEMETRY_ENABLED"),
+
       // Teams feature flag
       currentBackendUser: currentUserInfo$,
       currentUser: currentUser$,
diff --git a/store/postwoman.js b/store/postwoman.js
index 792c22056..14fd4f497 100644
--- a/store/postwoman.js
+++ b/store/postwoman.js
@@ -34,6 +34,11 @@ export const SETTINGS_KEYS = [
    */
   "EXTENSIONS_ENABLED",
 
+  /**
+   * A boolean value indicating whether Telemetry is enabled.
+   */
+  "TELEMETRY_ENABLED",
+
   /**
    * A boolean value indicating whether to use the URL bar experiments
    */

From 99b1699ade1941d40c2475171c44affdda8ed92d Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Wed, 7 Jul 2021 16:40:31 -0400
Subject: [PATCH 8/9] feat: disable telemetry calls if disabled

---
 helpers/fb/analytics.ts | 42 +++++++++++++++++++++++++++++++++--------
 1 file changed, 34 insertions(+), 8 deletions(-)

diff --git a/helpers/fb/analytics.ts b/helpers/fb/analytics.ts
index be859c33b..27d0aa4f4 100644
--- a/helpers/fb/analytics.ts
+++ b/helpers/fb/analytics.ts
@@ -1,6 +1,11 @@
 import firebase from "firebase"
 import { authEvents$ } from "./auth"
-import { HoppAccentColor, HoppBgColor, settings$ } from "~/newstore/settings"
+import {
+  HoppAccentColor,
+  HoppBgColor,
+  settings$,
+  settingsStore,
+} from "~/newstore/settings"
 
 let analytics: firebase.analytics.Analytics
 
@@ -33,18 +38,25 @@ export function initAnalytics() {
 function initLoginListeners() {
   authEvents$.subscribe((ev) => {
     if (ev.event === "login") {
-      analytics.setUserId(ev.user.uid)
+      if (settingsStore.value.TELEMETRY_ENABLED) {
+        analytics.setUserId(ev.user.uid)
 
-      analytics.logEvent("login", {
-        method: ev.user.providerData[0]?.providerId, // Assume the first provider is the login provider
-      })
+        analytics.logEvent("login", {
+          method: ev.user.providerData[0]?.providerId, // Assume the first provider is the login provider
+        })
+      }
     } else if (ev.event === "logout") {
-      analytics.logEvent("logout")
+      if (settingsStore.value.TELEMETRY_ENABLED) {
+        analytics.logEvent("logout")
+      }
     }
   })
 }
 
 function initSettingsListeners() {
+  // Keep track of the telemetry status
+  let telemetryStatus = settingsStore.value.TELEMETRY_ENABLED
+
   settings$.subscribe((settings) => {
     const conf: SettingsCustomDimensions = {
       usesProxy: settings.PROXY_ENABLED,
@@ -58,10 +70,24 @@ function initSettingsListeners() {
       usesTelemetry: settings.TELEMETRY_ENABLED,
     }
 
-    analytics.setUserProperties(conf)
+    // User toggled telemetry mode to off or to on
+    if (
+      (telemetryStatus && !settings.TELEMETRY_ENABLED) ||
+      settings.TELEMETRY_ENABLED
+    ) {
+      analytics.setUserProperties(conf)
+    }
+
+    telemetryStatus = settings.TELEMETRY_ENABLED
+
+    analytics.setAnalyticsCollectionEnabled(telemetryStatus)
   })
+
+  analytics.setAnalyticsCollectionEnabled(telemetryStatus)
 }
 
 export function logHoppRequestRunToAnalytics(ev: HoppRequestEvent) {
-  analytics.logEvent("hopp-request", ev)
+  if (settingsStore.value.TELEMETRY_ENABLED) {
+    analytics.logEvent("hopp-request", ev)
+  }
 }

From fee0a8cec101f543339272f5fd43da98095f6cb1 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Thu, 8 Jul 2021 09:20:41 +0530
Subject: [PATCH 9/9] feat: ask confirmation for telmetry

---
 components/smart/Toggle.vue |  4 ++--
 lang/en-US.json             |  2 ++
 pages/settings.vue          | 24 ++++++++++++++++++++----
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/components/smart/Toggle.vue b/components/smart/Toggle.vue
index 98b55bace..e8abd0fb3 100644
--- a/components/smart/Toggle.vue
+++ b/components/smart/Toggle.vue
@@ -20,8 +20,8 @@ export default {
 
   methods: {
     toggle() {
-      const containsOnClass = this.$refs.toggle.classList.toggle("on")
-      this.$emit("change", containsOnClass)
+      // const containsOnClass = this.$refs.toggle.classList.toggle("on")
+      this.$emit("change")
     },
   },
 }
diff --git a/lang/en-US.json b/lang/en-US.json
index 8ddcc7491..2156ea1b9 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -283,6 +283,8 @@
   "are_you_sure_remove_folder": "Are you sure you want to remove this folder?",
   "are_you_sure_remove_request": "Are you sure you want to remove this request?",
   "are_you_sure_remove_environment": "Are you sure you want to remove this environment?",
+  "are_you_sure_remove_telemetry": "Are you sure you want to opt-out of Telemetry?",
+  "telemetry_helps_us": "Telemetry helps us to personalize our operations and deliver the best experience to you.",
   "select_next_method": "Select Next method",
   "select_previous_method": "Select Previous method",
   "select_get_method": "Select GET method",
diff --git a/pages/settings.vue b/pages/settings.vue
index 247276280..65dbecaf1 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -200,10 +200,7 @@
           </SmartToggle>
         </div>
         <span>
-          <SmartToggle
-            :on="TELEMETRY_ENABLED"
-            @change="toggleSetting('TELEMETRY_ENABLED')"
-          >
+          <SmartToggle :on="TELEMETRY_ENABLED" @change="showConfirmModal">
             {{ $t("telemetry") }}
             {{ TELEMETRY_ENABLED ? $t("enabled") : $t("disabled") }}
           </SmartToggle>
@@ -211,6 +208,17 @@
       </div>
     </AppSection>
     <FirebaseEmail :show="showEmail" @hide-modal="showEmail = false" />
+    <SmartConfirmModal
+      :show="confirmRemove"
+      :title="`${$t('are_you_sure_remove_telemetry')} ${$t(
+        'telemetry_helps_us'
+      )}`"
+      @hide-modal="confirmRemove = false"
+      @resolve="
+        toggleSetting('TELEMETRY_ENABLED')
+        confirmRemove = false
+      "
+    />
   </div>
 </template>
 
@@ -252,6 +260,10 @@ export default Vue.extend({
 
       currentBackendUser: null,
       currentUser: null,
+
+      confirmRemove: false,
+
+      TELEMETRY_ENABLED: null,
     }
   },
   subscriptions() {
@@ -302,6 +314,10 @@ export default Vue.extend({
     },
   },
   methods: {
+    showConfirmModal() {
+      if (this.TELEMETRY_ENABLED) this.confirmRemove = true
+      else toggleSetting("TELEMETRY_ENABLED")
+    },
     applySetting<K extends keyof SettingsType>(key: K, value: SettingsType[K]) {
       applySetting(key, value)
     },