feat: add a modal for telemetry selection

src/App.vue

@@ -25,27 +25,29 @@
     >
       <div id="toast-target" />
     </div>
+    <TelemetryModal />
   </div>
 </template>
 
 <script>
-import './styles/index.css';
-import frappe from 'frappe';
-import Desk from './pages/Desk';
-import SetupWizard from './pages/SetupWizard/SetupWizard';
-import DatabaseSelector from './pages/DatabaseSelector';
 import WindowsTitleBar from '@/components/WindowsTitleBar';
-import { ipcRenderer } from 'electron';
 import config from '@/config';
-import { IPC_MESSAGES, IPC_ACTIONS } from '@/messages';
 import {
 connectToLocalDatabase,
 postSetup,
-  purgeCache,
+purgeCache
 } from '@/initialization';
-import { checkForUpdates, routeTo } from './utils';
+import { IPC_ACTIONS, IPC_MESSAGES } from '@/messages';
+import { ipcRenderer } from 'electron';
+import frappe from 'frappe';
 import fs from 'fs/promises';
+import TelemetryModal from './components/once/TelemetryModal.vue';
 import { showErrorDialog } from './errorHandling';
+import DatabaseSelector from './pages/DatabaseSelector';
+import Desk from './pages/Desk';
+import SetupWizard from './pages/SetupWizard/SetupWizard';
+import './styles/index.css';
+import { checkForUpdates, routeTo } from './utils';
 
 export default {
   name: 'App',
@@ -78,6 +80,7 @@ export default {
     SetupWizard,
     DatabaseSelector,
     WindowsTitleBar,
+    TelemetryModal,
   },
   async mounted() {
     const lastSelectedFilePath = config.get('lastSelectedFilePath', null);

src/components/HowTo.vue

@@ -1,22 +1,11 @@
 <template>
-  <button
+  <button @click="openHelpLink" class="flex items-center z-10">
-    @click="openHelpLink"
-    class="
-      text-gray-900
-      border
-      px-3
-      py-2
-      flex
-      items-center
-      mb-3
-      z-10
-      bg-white
-      rounded-lg
-      text-base
-    "
-  >
-    <FeatherIcon class="h-6 w-6 mr-3 text-blue-400" name="help-circle" />
     <p class="mr-1"><slot></slot></p>
+    <FeatherIcon
+      class="h-5 w-5 ml-3 text-blue-400"
+      name="help-circle"
+      v-if="icon"
+    />
   </button>
 </template>
 <script>
@@ -27,6 +16,10 @@ import FeatherIcon from './FeatherIcon.vue';
 export default {
   props: {
     link: String,
+    icon: {
+      default: true,
+      type: Boolean,
+    },
   },
   methods: {
     openHelpLink() {

src/components/once/TelemetryModal.vue

@@ -0,0 +1,131 @@
+<template>
+  <Modal :open-modal="shouldOpen" class="p-6 flex flex-col gap-3 text-gray-900">
+    <div class="flex justify-between">
+      <h1 class="font-bold text-md">{{ t`Set Anonymized Telemetry` }}</h1>
+      <button @click="shouldOpen = false">
+        <FeatherIcon name="x" class="w-5 h-5 text-gray-600" />
+      </button>
+    </div>
+    <p class="text-base mt-4">
+      {{ t`Hello there! 👋` }}
+    </p>
+    <p class="text-base">
+      {{
+        t`Frappe Books uses opt-in telemetry. This is the only way for us to know if we have any consistent
+        users. It will be really helpful if you switch it on, but we won't force you. 🙂`
+      }}
+    </p>
+    <p class="text-base mt-4">
+      {{ t`Please select an option:` }}
+    </p>
+    <FormControl
+      :df="df"
+      class="text-sm border rounded-md"
+      @change="
+        (v) => {
+          value = v;
+        }
+      "
+      :value="value"
+    />
+    <p class="text-base text-gray-800">{{ description }}</p>
+    <div class="flex flex-row w-full justify-between items-center mt-12">
+      <HowTo
+        link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+        class="
+          text-sm
+          hover:text-gray-900
+          text-gray-800
+          py-1
+          justify-between
+        "
+        :icon="false"
+        >{{ t`Know More` }}</HowTo
+      >
+
+      <Button
+        class="text-sm w-32"
+        type="primary"
+        :disabled="!isSet"
+        @click="saveClicked"
+        >{{ t`Save Option` }}</Button
+      >
+    </div>
+  </Modal>
+</template>
+
+<script>
+import config, {
+ConfigKeys,
+telemetryOptions,
+TelemetrySetting
+} from '@/config';
+import Button from '../Button.vue';
+import FormControl from '../Controls/FormControl';
+import FeatherIcon from '../FeatherIcon.vue';
+import HowTo from '../HowTo.vue';
+import Modal from '../Modal.vue';
+export default {
+  components: { Modal, FormControl, Button, HowTo, FeatherIcon },
+  data() {
+    return {
+      shouldOpen: false,
+      value: '',
+    };
+  },
+  computed: {
+    df() {
+      return {
+        fieldname: 'anonymizedTelemetry',
+        label: this.t`Anonymized Telemetry`,
+        fieldtype: 'Select',
+        options: Object.keys(telemetryOptions),
+        map: telemetryOptions,
+        default: 'allow',
+        description: this
+          .t`Send anonymized usage data and error reports to help improve the product.`,
+      };
+    },
+    description() {
+      if (!this.isSet) {
+        return '';
+      }
+
+      return {
+        [TelemetrySetting.allow]: this
+          .t`Enables telemetry. Includes usage patterns.`,
+        [TelemetrySetting.dontLogUsage]: this
+          .t`Enables telemetry. Does not include usage patterns.`,
+        [TelemetrySetting.dontLogAnything]: this
+          .t`Disables telemetry. No data will be collected, you are completely invisble to us.`,
+      }[this.value];
+    },
+    isSet() {
+      return this.getIsSet(this.value);
+    },
+  },
+  methods: {
+    saveClicked() {
+      config.set(ConfigKeys.Telemetry, this.value);
+      this.shouldOpen = false;
+    },
+    getIsSet(value) {
+      return [
+        TelemetrySetting.allow,
+        TelemetrySetting.dontLogAnything,
+        TelemetrySetting.dontLogUsage,
+      ].includes(value);
+    },
+
+    setOpen(telemetry) {
+      const openCount = config.get(ConfigKeys.OpenCount);
+      this.shouldOpen = !this.getIsSet(telemetry) && openCount >= 4;
+    },
+  },
+  mounted() {
+    const telemetry = config.get(ConfigKeys.Telemetry);
+    this.setOpen(telemetry);
+    this.value = telemetry;
+  },
+};
+</script>

src/pages/DataImport.vue

@@ -320,8 +320,11 @@
       v-if="!importType"
       class="flex justify-center h-full w-full items-center mb-16"
     >
-      <HowTo link="https://youtu.be/ukHAgcnVxTQ">
+      <HowTo
-        {{ t`How to Use Data Import?` }}
+        link="https://youtu.be/ukHAgcnVxTQ"
+        class="text-gray-900 rounded-lg text-base border px-3 py-2"
+      >
+        {{ t`How to Use Data Import` }}
       </HowTo>
     </div>
     <Loading