feat: add feedback prompt

components/layout/DialogManager.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-  import { watchOnce } from '@vueuse/core'
-
   const open = ref(false)
 
   const dialogs = [
@@ -12,8 +10,8 @@
           return false
         }
 
-        // Show after 3 times
-        if (timesTheAppHasBeenOpened.value < 3) {
+        // Show after 2 times
+        if (timesTheAppHasBeenOpened.value < 2) {
           return false
         }
 
@@ -23,28 +21,35 @@
 
         return true
       },
-      component: defineAsyncComponent(() => import('~/components/layout/modal/PWA.vue'))
+      component: defineAsyncComponent(() => import('~/components/layout/modal/PwaPrompt.vue'))
+    },
+    {
+      condition: () => {
+        const { timesTheAppHasBeenOpened, promptFeedback } = useAppStatistics()
+
+        if (promptFeedback.value) {
+          return false
+        }
+
+        // Show after 5 times
+        if (timesTheAppHasBeenOpened.value < 5) {
+          return false
+        }
+
+        return true
+      },
+      component: defineAsyncComponent(() => import('~/components/layout/modal/FeedbackPrompt.vue'))
     }
   ]
 
-  const dialog = computed(() => {
-    return dialogs.find((dialog) => dialog.condition())?.component
-  })
+  const dialog = dialogs.find((dialog) => dialog.condition())?.component
 
-  watchOnce(
-    dialog,
-    () => {
-      if (dialog.value) {
-        // Show after X seconds
-        setTimeout(() => {
-          open.value = true
-        }, 1000 * 1.33)
-      }
-    },
-    {
-      immediate: true
-    }
-  )
+  if (dialog) {
+    // Show after X seconds
+    setTimeout(() => {
+      open.value = true
+    }, 1000 * 1.33)
+  }
 </script>
 
 <template>

components/layout/modal/FeedbackPrompt.vue

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+  import { QuestionMarkCircleIcon } from '@heroicons/vue/24/outline'
+  import { watchOnce } from '@vueuse/core'
+
+  const open = defineModel<boolean>()
+
+  watchOnce(open, () => {
+    if (!open.value) {
+      const { promptFeedback } = useAppStatistics()
+
+      promptFeedback.value = true
+    }
+  })
+</script>
+
+<template>
+  <!-- Header -->
+  <div>
+    <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-blue-500">
+      <QuestionMarkCircleIcon
+        aria-hidden="true"
+        class="h-6 w-6 text-blue-100"
+      />
+    </div>
+
+    <div class="mt-3 text-center sm:mt-5">
+      <HeadlessDialogTitle
+        as="h3"
+        class="text-base font-semibold leading-6 text-base-content-highlight"
+      >
+        Got a minute?
+      </HeadlessDialogTitle>
+
+      <div class="mt-2">
+        <p class="text-sm">Let me know what you think about the app and how I can improve it</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Body -->
+  <iframe
+    border="0"
+    cellspacing="0"
+    class="mt-5 h-screen max-h-[60vh] w-full rounded-md sm:mt-6"
+    loading="eager"
+    onload="this.style.visibility='visible';"
+    src="https://docs.google.com/forms/d/e/1FAIpQLSeJLEq12Z2T8nqOh9hqMAnKGKo0G3Zy-J6eBKVIlZAwS5kfSg/viewform?embedded=true"
+    style="visibility: hidden"
+  />
+
+  <!-- Actions -->
+  <div class="mt-5 sm:mt-6">
+    <button
+      class="focus-visible:focus-outline-util hover:hover-bg-util hover:hover-text-util inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-inset ring-base-0/20"
+      type="button"
+      @click="open = false"
+    >
+      Dismiss
+    </button>
+  </div>
+</template>

components/layout/modal/PWA.vue → components/layout/modal/PwaPrompt.vue

@@ -16,10 +16,10 @@
 <template>
   <!-- Header -->
   <div>
-    <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+    <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-blue-500">
       <HomeIcon
         aria-hidden="true"
-        class="h-6 w-6 text-green-600"
+        class="h-6 w-6 text-blue-100"
       />
     </div>
 

composables/useAppStatistics.ts

@@ -8,6 +8,7 @@ let tutorialPostSave = ref<boolean>(false)
 let tutorialPostSource = ref<boolean>(false)
 
 let promptInstallPwa = ref<boolean>(false)
+let promptFeedback = ref<boolean>(false)
 
 if (process.client) {
   timesTheAppHasBeenOpened = useStorage('statistics-appOpenedCount', 0, localStorage, {
@@ -28,6 +29,9 @@ if (process.client) {
   promptInstallPwa = useStorage('prompt-installPwa', false, localStorage, {
     writeDefaults: false
   })
+  promptFeedback = useStorage('prompt-feedback', false, localStorage, {
+    writeDefaults: false
+  })
 }
 
 timesTheAppHasBeenOpened.value++
@@ -40,6 +44,7 @@ export function useAppStatistics() {
     tutorialPostSave,
     tutorialPostSource,
 
-    promptInstallPwa
+    promptInstallPwa,
+    promptFeedback
   }
 }