refactor: move open survey to formbricks

app/src/components/game/ControlPalette.vue

@@ -2,8 +2,7 @@
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 import useSession from '../../store/session'
-import { surveyUrl } from '../../config'
+import { openQuestSurvey } from '../../utils/formbricks'
-import formbricks from '../../utils/formbricks'
 
 const router = useRouter()
 const sessionStore = useSession()
@@ -25,20 +24,18 @@ const continuePlay = async () => {
   <section
     class="h-fit w-fit px-1 py-1 grid grid-cols-4 gap-2 place-content-between"
   >
-    <button id="survey" class="bg-bg-secondary rounded-lg p-2">
-      <a title="Survey" :href="surveyUrl" target="_blank" class="h-5 w-5">
-        <font-awesome-icon
-          :icon="['fas', 'file-invoice']"
-          class="text-text-primary px-1"
-        />
-        <p class="text-text-primary inline ml-1 md:flex">問卷</p>
-      </a>
-    </button>
     <button
-      id="solution"
+      id="survey"
-      class="bg-bg-disabled rounded-lg p-2"
+      class="bg-bg-secondary rounded-lg p-2"
-      @click="formbricks.track('quest_completed')"
+      @click="openQuestSurvey"
     >
+      <font-awesome-icon
+        :icon="['fas', 'file-invoice']"
+        class="text-text-primary px-1"
+      />
+      <p class="text-text-primary inline ml-1 md:flex">問卷</p>
+    </button>
+    <button disabled id="solution" class="bg-bg-disabled rounded-lg p-2">
       <font-awesome-icon
         :icon="['far', 'circle-question']"
         class="text-text-disabled px-1"

app/src/utils/formbricks.ts

@@ -1,10 +1,26 @@
 import formbricks from '@formbricks/js/website'
+import useSession from '../store/session'
+import useUserProfile from '../store/userProfile'
 
 if (typeof window !== 'undefined') {
   formbricks.init({
-    environmentId: 'clzcdqqn0000kadvtqykdo0pc',
+    environmentId: 'clzcdqqml000gadvtpuckydzi',
     apiHost: 'https://app.formbricks.com',
   })
 }
 
+export function openQuestSurvey() {
+  const sessionStore = useSession()
+  const userStore = useUserProfile()
+
+  formbricks.track('quest_completed', {
+    hiddenFields: {
+      quest: sessionStore.questId,
+      session: sessionStore.session?._id,
+      username: userStore.username,
+      email: userStore.email,
+    },
+  })
+}
+
 export default formbricks

app/src/views/GamePage.vue

@@ -11,7 +11,7 @@ import VisualizationPart from '../components/game/VisualizationPart.vue'
 import ControlPalette from '../components/game/ControlPalette.vue'
 import CompleteModal from '../components/game/CompleteModal.vue'
 import StartButton from '../components/game/StartButton.vue'
-import formbricks from '../utils/formbricks'
+import { openQuestSurvey } from '../utils/formbricks'
 
 const sessionStore = useSession()
 const userStore = useUserProfile()
@@ -23,14 +23,7 @@ const completed = computed(() => {
 watch(completed, (newValue, oldValue) => {
   if (newValue && !oldValue) {
     console.log('finish', userStore)
-    formbricks.track('quest_completed', {
+    openQuestSurvey()
-      hiddenFields: {
-        quest: sessionStore.questId,
-        session: sessionStore.session?._id,
-        username: userStore.username,
-        email: userStore.email,
-      },
-    })
   }
 })