From 0ac57a3e181d2cfbefadd22e739f16171b9f8905 Mon Sep 17 00:00:00 2001
From: harshbaz <harsh@gobazzinga.io>
Date: Tue, 27 Feb 2024 12:39:42 +0530
Subject: [PATCH] Add event registration

---
 .../src/lib/components/popup/UserStudy.svelte | 21 +++++++++++-
 .../web-client/src/lib/helpers/user-study.ts  | 15 +++++++--
 .../src/routes/(feed)/+layout.svelte          |  6 ++--
 .../(feed)/feed/[id=videoId]/+page.svelte     | 32 +++++++++++++++++--
 .../(feed)/hotornot/[id=videoId]/+page.svelte | 28 ++++++++++++++--
 5 files changed, 89 insertions(+), 13 deletions(-)

diff --git a/packages/web-client/src/lib/components/popup/UserStudy.svelte b/packages/web-client/src/lib/components/popup/UserStudy.svelte
index 74276e83a..35b6494c9 100644
--- a/packages/web-client/src/lib/components/popup/UserStudy.svelte
+++ b/packages/web-client/src/lib/components/popup/UserStudy.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
-import { submitUserStudyInfo } from '$lib/helpers/user-study'
+import { submitUserStudyInfo, userStoryStore } from '$lib/helpers/user-study'
+import { userProfile } from '$lib/stores/app'
+import { authState } from '$lib/stores/auth'
+import { registerEvent } from '@hnn/components/analytics/GA.utils'
 import Button from '@hnn/components/button/Button.svelte'
 import Input from '@hnn/components/input/Input.svelte'
 import OverlayPopup from '@hnn/components/popup/OverlayPopup.svelte'
@@ -21,6 +24,14 @@ async function sendInfoToBackend() {
       return
     }
     await submitUserStudyInfo(email, name)
+    registerEvent('beta_tester_submit', {
+      user_id: $authState.idString,
+      display_name: $userProfile.display_name,
+      feed_type: $userStoryStore.feedType,
+      video_id: $userStoryStore.videoId,
+      video_publisher_id: $userStoryStore.videoCanisterId,
+      video_ref_id: `${$userStoryStore.videoCanisterId}@${$userStoryStore.videoId}`,
+    })
     finished = true
   } finally {
     loading = false
@@ -29,6 +40,14 @@ async function sendInfoToBackend() {
 
 async function doNotShowAgain() {
   if (!finished) {
+    registerEvent('beta_tester_reject', {
+      user_id: $authState.idString,
+      display_name: $userProfile.display_name,
+      feed_type: $userStoryStore.feedType,
+      video_id: $userStoryStore.videoId,
+      video_publisher_id: $userStoryStore.videoCanisterId,
+      video_ref_id: `${$userStoryStore.videoCanisterId}@${$userStoryStore.videoId}`,
+    })
     await submitUserStudyInfo('not-interested', 'not-interested')
   }
   show = false
diff --git a/packages/web-client/src/lib/helpers/user-study.ts b/packages/web-client/src/lib/helpers/user-study.ts
index 6c6535f68..a47c2092d 100644
--- a/packages/web-client/src/lib/helpers/user-study.ts
+++ b/packages/web-client/src/lib/helpers/user-study.ts
@@ -31,7 +31,12 @@ const userIds = [
 let timer: ReturnType<typeof setInterval>
 let secsPassed = 0
 
-export const showUserStudyPopup = writable(false)
+export const userStoryStore = writable({
+  show: false,
+  videoId: '',
+  videoCanisterId: '',
+  feedType: '',
+})
 
 export function submitUserStudyInfo(email: string, name: string) {
   const state = get(authState)
@@ -58,7 +63,11 @@ async function toShowUserStudyPopup() {
   }
 }
 
-export function monitorForUserStudy(userId: string, countTill: number) {
+export function monitorForUserStudy(
+  userId: string,
+  countTill: number,
+  cb: Function,
+) {
   secsPassed = 0
   clearMonitoring()
   if (!userIds.includes(userId)) return
@@ -66,7 +75,7 @@ export function monitorForUserStudy(userId: string, countTill: number) {
     if (secsPassed > countTill) {
       clearMonitoring()
       if (await toShowUserStudyPopup()) {
-        showUserStudyPopup.set(true)
+        cb()
       }
     } else {
       secsPassed++
diff --git a/packages/web-client/src/routes/(feed)/+layout.svelte b/packages/web-client/src/routes/(feed)/+layout.svelte
index 500c468b4..254729741 100644
--- a/packages/web-client/src/routes/(feed)/+layout.svelte
+++ b/packages/web-client/src/routes/(feed)/+layout.svelte
@@ -8,7 +8,7 @@ import { onDestroy, onMount } from 'svelte'
 import { authState } from '$lib/stores/auth'
 import IconButton from '@hnn/components/button/IconButton.svelte'
 import { browser } from '$app/environment'
-import { showUserStudyPopup } from '$lib/helpers/user-study'
+import { userStoryStore } from '$lib/helpers/user-study'
 import UserStudy from '$lib/components/popup/UserStudy.svelte'
 
 function handleVisibilityChange() {
@@ -73,6 +73,6 @@ $: pathname = $page.url.pathname
   </div>
 </HomeLayout>
 
-{#if $showUserStudyPopup}
-  <UserStudy bind:show={$showUserStudyPopup} />
+{#if $userStoryStore.show}
+  <UserStudy bind:show={$userStoryStore.show} />
 {/if}
diff --git a/packages/web-client/src/routes/(feed)/feed/[id=videoId]/+page.svelte b/packages/web-client/src/routes/(feed)/feed/[id=videoId]/+page.svelte
index 3c0d86a40..6b71a36b9 100644
--- a/packages/web-client/src/routes/(feed)/feed/[id=videoId]/+page.svelte
+++ b/packages/web-client/src/routes/(feed)/feed/[id=videoId]/+page.svelte
@@ -15,14 +15,24 @@ import Log from '$lib/utils/Log'
 import { updateURL } from '$lib/utils/feedUrl'
 import { handleParams } from '$lib/utils/params'
 import { joinArrayUniquely } from '$lib/utils/video'
-import { appPrefs, homeFeedVideos, playerState } from '$lib/stores/app'
+import {
+  appPrefs,
+  homeFeedVideos,
+  playerState,
+  userProfile,
+} from '$lib/stores/app'
 import { removeSplashScreen } from '$lib/stores/popups'
 import { onDestroy, onMount, tick } from 'svelte'
 import { debounce } from 'throttle-debounce'
 import type { PageData } from './$types'
 import { browser } from '$app/environment'
-import { clearMonitoring, monitorForUserStudy } from '$lib/helpers/user-study'
+import {
+  clearMonitoring,
+  monitorForUserStudy,
+  userStoryStore,
+} from '$lib/helpers/user-study'
 import { authState } from '$lib/stores/auth'
+import { registerEvent } from '@hnn/components/analytics/GA.utils'
 
 export let data: PageData
 
@@ -127,7 +137,23 @@ const handleChange = debounce(250, (newIndex: number) => {
   // User study
   if (!userStudyInit && currentVideoIndex > 2) {
     userStudyInit = true
-    monitorForUserStudy($authState.idString || '', 300)
+    monitorForUserStudy($authState.idString || '', 300, () => {
+      $userStoryStore = {
+        show: true,
+        feedType: 'main_feed',
+        videoCanisterId:
+          videos[currentVideoIndex].publisher_canister_id.toString(),
+        videoId: videos[currentVideoIndex].id.toString(),
+      }
+      registerEvent('popup_viewed', {
+        user_id: $authState.idString,
+        display_name: $userProfile.display_name,
+        feed_type: $userStoryStore.feedType,
+        video_id: $userStoryStore.videoId,
+        video_publisher_id: $userStoryStore.videoCanisterId,
+        video_ref_id: `${$userStoryStore.videoCanisterId}@${$userStoryStore.videoId}`,
+      })
+    })
   }
 })
 
diff --git a/packages/web-client/src/routes/(feed)/hotornot/[id=videoId]/+page.svelte b/packages/web-client/src/routes/(feed)/hotornot/[id=videoId]/+page.svelte
index d1ed98b5b..dad526fcb 100644
--- a/packages/web-client/src/routes/(feed)/hotornot/[id=videoId]/+page.svelte
+++ b/packages/web-client/src/routes/(feed)/hotornot/[id=videoId]/+page.svelte
@@ -13,14 +13,20 @@ import { updateURL } from '$lib/utils/feedUrl'
 import Log from '$lib/utils/Log'
 import { handleParams } from '$lib/utils/params'
 import { joinArrayUniquely } from '$lib/utils/video'
-import { appPrefs, hotOrNotFeedVideos, playerState } from '$lib/stores/app'
+import {
+  appPrefs,
+  hotOrNotFeedVideos,
+  playerState,
+  userProfile,
+} from '$lib/stores/app'
 import { removeSplashScreen } from '$lib/stores/popups'
 import { onMount, tick } from 'svelte'
 import type { PageData } from './$types'
 import { debounce } from 'throttle-debounce'
 import { browser } from '$app/environment'
-import { monitorForUserStudy } from '$lib/helpers/user-study'
+import { monitorForUserStudy, userStoryStore } from '$lib/helpers/user-study'
 import { authState } from '$lib/stores/auth'
+import { registerEvent } from '@hnn/components/analytics/GA.utils'
 
 export let data: PageData
 
@@ -120,7 +126,23 @@ const handleChange = debounce(250, (newIndex: number) => {
   // User study
   if (!userStudyInit && currentVideoIndex > 2) {
     userStudyInit = true
-    monitorForUserStudy($authState.idString || '', 300)
+    monitorForUserStudy($authState.idString || '', 300, () => {
+      $userStoryStore = {
+        show: true,
+        feedType: 'hot_or_not_feed',
+        videoCanisterId:
+          videos[currentVideoIndex].publisher_canister_id.toString(),
+        videoId: videos[currentVideoIndex].id.toString(),
+      }
+      registerEvent('popup_viewed', {
+        user_id: $authState.idString,
+        display_name: $userProfile.display_name,
+        feed_type: $userStoryStore.feedType,
+        video_id: $userStoryStore.videoId,
+        video_publisher_id: $userStoryStore.videoCanisterId,
+        video_ref_id: `${$userStoryStore.videoCanisterId}@${$userStoryStore.videoId}`,
+      })
+    })
   }
 })