feat: feedback

src/newtab/App.vue

@@ -49,9 +49,41 @@
   <div v-else class="py-8 text-center">
     <ui-spinner color="text-accent" size="28" />
   </div>
+  <ui-card
+    v-if="modalState.show"
+    class="fixed bottom-8 right-8 shadow-2xl border-2 w-72 group"
+  >
+    <button
+      class="absolute bg-white shadow-md rounded-full -right-2 -top-2 transition scale-0 group-hover:scale-100"
+      @click="closeModal"
+    >
+      <v-remixicon
+        class="text-gray-600 dark:text-gray-200"
+        name="riCloseLine"
+      />
+    </button>
+    <h2 class="font-semibold text-lg">
+      {{ activeModal.title }}
+    </h2>
+    <p class="mt-1 dark:text-gray-100 text-gray-700">
+      {{ activeModal.body }}
+    </p>
+    <div class="space-y-2 mt-4">
+      <ui-button
+        :href="activeModal.url"
+        tag="a"
+        target="_blank"
+        rel="noopener"
+        class="w-full block"
+        variant="accent"
+      >
+        {{ activeModal.button }}
+      </ui-button>
+    </div>
+  </ui-card>
 </template>
 <script setup>
-import { ref } from 'vue';
+import { ref, shallowReactive, computed } from 'vue';
 import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import { compare } from 'compare-versions';
@@ -71,10 +103,30 @@ const theme = useTheme();
 theme.init();
 
 const retrieved = ref(false);
+const isUpdated = ref(false);
+const modalState = shallowReactive({
+  show: true,
+  type: 'survey',
+});
 
+const modalTypes = {
+  testimonial: {
+    title: 'Hi There 👋',
+    body: 'Thank you for using Automa, and if you have a great experience. Would you like to give us a testimonial?',
+    button: 'Give Testimonial',
+    url: 'https://testimonial.to/automa',
+  },
+  survey: {
+    title: "How do you think we're doing?",
+    body: 'To help us make Automa as best it can be, we need a few minutes of your time to get your feedback.',
+    button: 'Take Survey',
+    url: 'https://www.automa.site/survey',
+  },
+};
 const currentVersion = browser.runtime.getManifest().version;
 const prevVersion = localStorage.getItem('ext-version') || '0.0.0';
-const isUpdated = ref(false);
+
+const activeModal = computed(() => modalTypes[modalState.type]);
 
 async function syncHostWorkflow(hosts) {
   const hostIds = [];
@@ -213,6 +265,32 @@ function handleStorageChanged(change) {
     });
   }
 }
+function closeModal() {
+  let value = true;
+
+  if (modalState.type === 'survey') {
+    value = new Date().toString();
+  }
+
+  modalState.show = false;
+  localStorage.setItem(`has-${modalState.type}`, value);
+}
+function checkModal() {
+  const survey = localStorage.getItem('has-survey');
+
+  if (!survey) return;
+
+  const daysDiff = dayjs().diff(survey, 'day');
+  const showTestimonial =
+    daysDiff >= 2 && !localStorage.getItem('has-testimonial');
+
+  if (showTestimonial) {
+    modalState.show = true;
+    modalState.type = 'testimonial';
+  } else {
+    modalState.show = false;
+  }
+}
 
 browser.storage.onChanged.addListener(handleStorageChanged);
 
@@ -222,6 +300,8 @@ window.addEventListener('beforeunload', () => {
 
 (async () => {
   try {
+    checkModal();
+
     const { isFirstTime } = await browser.storage.local.get('isFirstTime');
     isUpdated.value = !isFirstTime && compare(currentVersion, prevVersion, '>');