Review

src/_locales/de/messages.json

@@ -231,5 +231,9 @@
   },
   "timeChartDescription": {
     "message": "Dies ist eine stundenweise Zeitleiste für den Tag"
+  },
+  "enjoyAndReview": {
+    "message": "Genießen Sie die Erweiterung?",
+    "description": "Bewerten Web Activity Time Tracker"
   }
 }

src/_locales/en/messages.json

@@ -231,5 +231,9 @@
   },
   "timeChartDescription": {
     "message": "This is a chart of time during the day by the hour"
+  },
+  "enjoyAndReview": {
+    "message": "Enjoying the extension?",
+    "description": "Rate Web Activity Time Tracker"
   }
 }

src/_locales/ru/messages.json

@@ -231,5 +231,9 @@
   },
   "timeChartDescription": {
     "message": "Это график времени в течение дня по часам"
+  },
+  "enjoyAndReview": {
+    "message": "Вам нравится расширение?",
+    "description": "Оцените Web Activity Time Tracker"
   }
 }

src/background.ts

@@ -4,15 +4,19 @@ import { logger } from './compositions/logger';
 import { scheduleJobs } from './jobs/sheduler';
 import { Settings } from './compositions/settings';
 import { StorageParams } from './storage/storage-params';
+import { injecStorage } from './storage/inject-storage';
+import { todayLocalDate } from './utils/date';
 
 logger.log('Start background script');
 
 self.onerror = err => {
   console.error('Unhandled error:', err);
 };
 
-Browser.runtime.onInstalled.addListener(details => {
+Browser.runtime.onInstalled.addListener(async details => {
   logger.log('Extension installed:', details);
+  const settingsStorage = injecStorage();
+  await settingsStorage.saveValue(StorageParams.INSTALL_DATE, todayLocalDate());
 });
 
 Browser.storage.onChanged.addListener((changes, namespace) => {

src/components/Review.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="review-block" v-if="showReview">
+    <p>{{ t('enjoyAndReview.message') }}</p>
+    <img height="15" src="../assets/icons/close.svg" @click="closeBlock()" />
+    <input type="button" :value="t('enjoyAndReview.description')" @click="openStore()" />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'Review',
+};
+</script>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { injecStorage } from '../storage/inject-storage';
+import { StorageParams } from '../storage/storage-params';
+import { addDays, startOfToday } from 'date-fns';
+import { addHours } from 'date-fns/esm';
+
+const { t } = useI18n();
+
+const settingsStorage = injecStorage();
+const PROMPT_AT_TIME_OF_DAY = 12;
+const ADD_DAYS_FIRST = 2;
+const ADD_DAYS_NEXT = 5;
+const CHROME_STORE_URL = `https://chrome.google.com/webstore/detail/web-activity-time-tracker/${__APP_ID__}/reviews`;
+
+const showReview = ref<boolean>();
+
+onMounted(async () => {
+  showReview.value = false;
+  if (__BROWSER__ == 'chrome') {
+    const reviewDate = await settingsStorage.getValue(StorageParams.REVIEW_DATE);
+
+    if (reviewDate == undefined) {
+      let nextTime = await settingsStorage.getValue(StorageParams.REVIEW_PROMPT_AT);
+      if (nextTime == undefined) {
+        await settingsStorage.saveValue(
+          StorageParams.REVIEW_PROMPT_AT,
+          addDays(addHours(startOfToday(), PROMPT_AT_TIME_OF_DAY), ADD_DAYS_FIRST).toString(),
+        );
+      } else {
+        nextTime = new Date(nextTime);
+        if (nextTime < new Date()) showReview.value = true;
+      }
+    }
+  }
+});
+
+async function closeBlock() {
+  showReview.value = false;
+  await settingsStorage.saveValue(
+    StorageParams.REVIEW_PROMPT_AT,
+    addDays(addHours(startOfToday(), PROMPT_AT_TIME_OF_DAY), ADD_DAYS_NEXT).toString(),
+  );
+}
+
+async function openStore() {
+  window.open(CHROME_STORE_URL, '_blank');
+  await settingsStorage.saveValue(StorageParams.REVIEW_DATE, new Date().toString());
+}
+</script>
+
+<style scoped>
+.review-block {
+  width: -webkit-fill-available;
+  position: absolute;
+  bottom: 0;
+  padding: 8px 20px;
+  font-size: 14px;
+  background-color: #efefef;
+}
+.review-block input[type='button'] {
+  margin: 0 20px 0 0;
+  float: right;
+  width: auto;
+}
+.review-block p {
+  display: inline-block;
+  margin: 8px;
+  font-size: 17px;
+}
+.review-block img {
+  padding: 9px 0 0 0;
+  cursor: pointer;
+  float: right;
+}
+</style>

src/components/TimeIntervalChart.vue

@@ -141,7 +141,7 @@ function fillData(timeIntervalList: TimeInterval[]) {
 
   objects.forEach(obj => {
     const emptyArray: number[] = Object.assign([], tempArray);
-    emptyArray[obj.hour] = Number((obj.summary / 60).toFixed(4));
+    emptyArray[obj.hour] = Number(obj.summary / 60);
     result.push({
       backgroundColor: ['#5668e2'],
       data: emptyArray,

src/pages/Popup.vue

@@ -69,6 +69,7 @@
       </section>
     </div>
   </div>
+  <Review />
 </template>
 
 <script lang="ts" setup>
@@ -77,6 +78,7 @@ import { useI18n } from 'vue-i18n';
 import Browser from 'webextension-polyfill';
 import TabList from '../components/TabList.vue';
 import ByDays from '../components/ByDays.vue';
+import Review from '../components/Review.vue';
 import { SettingsTab, TypeOfList } from '../utils/enums';
 
 const { t } = useI18n();

src/storage/storage-params.ts

@@ -14,6 +14,9 @@ export enum StorageParams {
   BLOCK_DEFERRAL_TIME = 'view_block_deferral_time',
   DAILY_SUMMARY_NOTIFICATION_TIME = 'daily-summary-notification-time',
   DAILY_NOTIFICATION = 'daily_notification',
+  REVIEW_DATE = 'review_date',
+  REVIEW_PROMPT_AT = 'review_prompt_at',
+  INSTALL_DATE = 'install-date',
 }
 
 export enum StorageDeserializeParam {

src/globals.d.ts → src/types/globals.d.ts

@@ -2,5 +2,5 @@
 declare var __EXTENSION_MODE__: ExtensionMode;
 declare var __DEV__: boolean;
 declare var __PROD__: boolean;
-declare var __EXTENSION_VERSION__: string;
-declare var __REAL_APP_ID__: string;
+declare var __APP_ID__: string;
+declare var __BROWSER__: string;

vite.config.ts

@@ -2,11 +2,11 @@ import { defineConfig } from 'vite';
 import path from 'path';
 import vue from '@vitejs/plugin-vue';
 import webExtension, { readJsonFile } from 'vite-plugin-web-extension';
-import pkg from './package.json';
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
 import copy from 'rollup-plugin-copy';
 
 const APPID_CHROME = 'hhfnghjdeddcfegfekjeihfmbjenlomm';
+const browser = process.env.TARGET || 'chrome';
 
 function generateManifest() {
   const manifest = readJsonFile('src/manifest.json');
@@ -43,8 +43,8 @@ export default defineConfig(({ mode }) => ({
     __EXTENSION_MODE__: JSON.stringify(mode),
     __DEV__: mode === 'development',
     __PROD__: mode === 'production',
-    __EXTENSION_VERSION__: JSON.stringify(pkg.version),
-    __REAL_APP_ID__: APPID_CHROME,
+    __APP_ID__: JSON.stringify(APPID_CHROME),
+    __BROWSER__: JSON.stringify(browser),
   },
   plugins: [
     vue(),