Component for review

Author: Stigmatoz

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/assets/icons/close.svg

@@ -0,0 +1,56 @@
+<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')" />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'Review',
+};
+</script>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const showReview = ref<boolean>();
+
+onMounted(() => {
+  showReview.value = true;
+});
+
+function closeBlock() {
+  showReview.value = false;
+}
+</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/Review.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/pages/Popup.vue

@@ -14,6 +14,7 @@ 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',
   INSTALL_DATE = 'install-date',
 }