User study form

.github/workflows/webclient-test.yml

@@ -60,7 +60,7 @@ jobs:
           FLY_ORG: go-bazzinga-staging
         with:
           name: pr-${{ github.event.number }}-web-client
-          config: "wc.staging.fly.toml"
+          config: wc.staging.fly.toml
 
   lighthouse-cypress-vitest:
     needs: ["svelte-check"]

package.json

@@ -44,10 +44,10 @@
   },
   "devDependencies": {
     "@sveltejs/eslint-config": "github:sveltejs/eslint-config#v6.0.4",
-    "@types/node": "20.11.17",
-    "@typescript-eslint/eslint-plugin": "7.0.1",
-    "@typescript-eslint/parser": "7.0.1",
-    "eslint": "8.56.0",
+    "@types/node": "20.11.20",
+    "@typescript-eslint/eslint-plugin": "7.0.2",
+    "@typescript-eslint/parser": "7.0.2",
+    "eslint": "8.57.0",
     "eslint-plugin-svelte3": "4.0.0",
     "prettier": "3.2.5",
     "prettier-plugin-svelte": "3.2.1",

packages/components/button/Button.svelte

@@ -2,6 +2,7 @@
 import c from 'clsx'
 
 export let type: 'primary' | 'secondary' = 'primary'
+export let submit = false
 export let disabled = false
 export let href = ''
 export let preload = false
@@ -33,7 +34,11 @@ $: classes = c(
     <slot />
   </a>
 {:else}
-  <button on:click {disabled} class={classes}>
+  <button
+    type={submit ? 'submit' : 'button'}
+    on:click
+    {disabled}
+    class={classes}>
     <slot />
   </button>
 {/if}

packages/components/input/Input.svelte

@@ -5,6 +5,7 @@ import { onMount } from 'svelte'
 export let autocomplete: inputAutocomplete = 'off'
 export let disabled = false
 export let placeholder = ''
+export let required = false
 export let value: string | number = ''
 export let maxlength: number | undefined = undefined
 export let type: 'text' | 'password' | 'number' | 'email' = 'text'
@@ -22,6 +23,7 @@ onMount(() => {
   {autocomplete}
   {disabled}
   {placeholder}
+  {required}
   bind:value
   bind:this={inputEl}
   {maxlength}

packages/components/package.json

@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@tailwindcss/forms": "0.5.7",
-    "svelte": "4.2.10",
+    "svelte": "4.2.12",
     "svelte-check": "3.6.4",
     "tailwindcss": "3.4.1",
     "typescript": "5.3.3"

packages/components/popup/OverlayPopup.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+import IconButton from '../button/IconButton.svelte'
+import { fade } from 'svelte/transition'
+import { createEventDispatcher } from 'svelte'
+
+export let show = false
+export let showCloseButton = false
+
+const dispatch = createEventDispatcher<{ close: void }>()
+</script>
+
+{#if show}
+  <div
+    transition:fade={{ duration: 100 }}
+    role="presentation"
+    on:click={() => (show = false)}
+    class="absolute inset-0 z-[98] flex h-full w-full items-center justify-center bg-black/80">
+    {#if showCloseButton}
+      <IconButton
+        iconName="close"
+        iconClass="h-8 w-8 text-white"
+        on:click={(e) => {
+          e.stopImmediatePropagation()
+          dispatch('close')
+          show = false
+        }}
+        class="absolute right-3 top-3" />
+    {/if}
+    <div
+      class="z-[100] contents"
+      role="presentation"
+      on:click={(e) => e.stopImmediatePropagation()}>
+      <slot />
+    </div>
+  </div>
+{/if}

packages/components/popup/Popup.svelte

@@ -1,40 +1,26 @@
 <script lang="ts">
 import IconButton from '../button/IconButton.svelte'
-import { fade } from 'svelte/transition'
-import { createEventDispatcher } from 'svelte'
+import OverlayPopup from './OverlayPopup.svelte'
 
 export let show = false
 export let showCloseButton = false
 export { exportStyle as style }
 let exportStyle: any = ''
 export { exportClass as class }
 let exportClass: any = ''
-
-const dispatch = createEventDispatcher<{ close: void }>()
 </script>
 
-{#if show}
+<OverlayPopup bind:show on:close>
   <div
-    transition:fade={{ duration: 100 }}
-    role="presentation"
-    on:click={() => {
-      show = false
-      dispatch('close')
-    }}
-    class="absolute inset-0 z-[98] flex h-full w-full items-center justify-center bg-black/50">
-    <div
-      role="presentation"
-      on:click={(e) => e.stopImmediatePropagation()}
-      style={exportStyle}
-      class="relative z-[99] mx-8 w-full max-w-sm rounded-lg bg-white p-10 {exportClass}">
-      {#if showCloseButton}
-        <IconButton
-          iconName="close"
-          iconClass="h-6 w-6 text-black/50"
-          on:click={() => (show = false)}
-          class="absolute right-2 top-2" />
-      {/if}
-      <slot />
-    </div>
+    style={exportStyle}
+    class="relative z-[99] mx-8 w-full max-w-sm rounded-lg bg-white p-10 {exportClass}">
+    {#if showCloseButton}
+      <IconButton
+        iconName="close"
+        iconClass="h-6 w-6 text-black/50"
+        on:click={() => (show = false)}
+        class="absolute right-2 top-2" />
+    {/if}
+    <slot />
   </div>
-{/if}
+</OverlayPopup>

packages/declarations/package.json

@@ -6,7 +6,7 @@
     "fetch": "sh ./fetch.sh"
   },
   "dependencies": {
-    "@dfinity/agent": "1.0.0"
+    "@dfinity/agent": "1.0.1"
   },
   "keywords": [],
   "author": "",

packages/experiments/package.json

@@ -19,32 +19,32 @@
     "@hnn/components": "*",
     "clsx": "2.1.0",
     "google-auth-library": "9.6.3",
-    "hls.js": "1.5.5",
+    "hls.js": "1.5.6",
     "idb": "8.0.0",
-    "json-2-csv": "5.0.1",
+    "json-2-csv": "5.4.0",
     "firebase": "10.8.0",
     "svelte-local-storage-store": "0.6.4",
     "throttle-debounce": "5.0.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-node": "4.0.1",
-    "@sveltejs/kit": "2.5.0",
+    "@sveltejs/kit": "2.5.1",
     "@sveltejs/vite-plugin-svelte": "3.0.2",
     "@tailwindcss/forms": "0.5.7",
     "@types/gtag.js": "0.0.19",
     "@types/throttle-debounce": "5.0.2",
     "@types/w3c-image-capture": "1.0.10",
     "autoprefixer": "10.4.17",
     "date-fns": "3.3.1",
-    "dotenv": "16.4.4",
+    "dotenv": "16.4.5",
     "postcss": "8.4.35",
     "@rajesh896/broprint.js": "2.1.1",
-    "svelte": "4.2.10",
+    "svelte": "4.2.12",
     "svelte-check": "3.6.4",
     "svelte-preprocess": "5.1.3",
     "tailwindcss": "3.4.1",
     "tslib": "2.6.2",
     "typescript": "5.3.3",
-    "vite": "5.1.2"
+    "vite": "5.1.4"
   }
 }

packages/web-client/package.json

@@ -23,17 +23,17 @@
     "tsc": "tsc -b"
   },
   "dependencies": {
-    "@dfinity/agent": "1.0.0",
-    "@dfinity/auth-client": "1.0.0",
-    "@dfinity/candid": "1.0.0",
-    "@dfinity/identity": "1.0.0",
-    "@dfinity/identity-secp256k1": "1.0.0",
-    "@dfinity/principal": "1.0.0",
+    "@dfinity/agent": "1.0.1",
+    "@dfinity/auth-client": "1.0.1",
+    "@dfinity/candid": "1.0.1",
+    "@dfinity/identity": "1.0.1",
+    "@dfinity/identity-secp256k1": "1.0.1",
+    "@dfinity/principal": "1.0.1",
     "@hnn/declarations": "*",
     "@hnn/components": "*",
-    "@sentry/sveltekit": "7.101.0",
+    "@sentry/sveltekit": "7.102.1",
     "clsx": "2.1.0",
-    "hls.js": "1.5.5",
+    "hls.js": "1.5.6",
     "idb": "8.0.0",
     "svelte-local-storage-store": "0.6.4",
     "throttle-debounce": "5.0.0"
@@ -42,33 +42,33 @@
     "@flydotio/dockerfile": "0.5.2",
     "@sveltejs/adapter-node": "4.0.1",
     "@sveltejs/adapter-static": "3.0.1",
-    "@sveltejs/kit": "2.5.0",
+    "@sveltejs/kit": "2.5.1",
     "@sveltejs/vite-plugin-svelte": "3.0.2",
     "@tailwindcss/forms": "0.5.7",
     "@types/gtag.js": "0.0.19",
     "@types/throttle-debounce": "5.0.2",
     "@types/w3c-image-capture": "1.0.10",
-    "@vitest/ui": "1.2.2",
+    "@vitest/ui": "1.3.1",
     "autoprefixer": "10.4.17",
     "c8": "9.1.0",
-    "cypress": "13.6.4",
-    "cypress-mochawesome-reporter": "3.8.1",
+    "cypress": "13.6.6",
+    "cypress-mochawesome-reporter": "3.8.2",
     "date-fns": "3.3.1",
-    "dotenv": "16.4.4",
+    "dotenv": "16.4.5",
     "isomorphic-fetch": "3.0.0",
     "jsdom": "24.0.0",
     "postcss": "8.4.35",
-    "svelte": "4.2.10",
+    "svelte": "4.2.12",
     "svelte-check": "3.6.4",
     "svelte-easy-crop": "2.0.3",
     "svelte-preprocess": "5.1.3",
     "tailwindcss": "3.4.1",
     "ts-node": "10.9.2",
     "tslib": "2.6.2",
     "typescript": "5.3.3",
-    "vite": "5.1.2",
+    "vite": "5.1.4",
     "vite-plugin-node-polyfills": "0.21.0",
     "vite-tsconfig-paths": "4.3.1",
-    "vitest": "1.2.2"
+    "vitest": "1.3.1"
   }
 }

packages/web-client/src/lib/components/popup/UserStudy.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+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'
+
+export let show = false
+let loading = false
+let finished = false
+
+let name = ''
+let email = ''
+let error = ''
+
+async function sendInfoToBackend() {
+  error = ''
+  loading = true
+  try {
+    if (name.length < 3) {
+      error = 'Please enter your full name'
+      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
+  }
+}
+
+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
+}
+</script>
+
+<OverlayPopup showCloseButton={!finished} bind:show on:close={doNotShowAgain}>
+  <div class="flex flex-col items-center space-y-4 p-5 text-white">
+    {#if finished}
+      <div class="pb-2 text-center text-xl font-bold">Thank you!</div>
+      <div class="pb-4 text-center">
+        You are a rockstar. Still back, someone from our team will reach out to
+        you with next steps.
+      </div>
+      <Button class="w-full" on:click={() => (show = false)}>Continue</Button>
+    {:else}
+      <div class="pb-2 text-center text-xl font-bold">
+        You are the chosen one!
+      </div>
+      <div class="text-center">
+        Fill in your details to participate in the beta testing program.
+      </div>
+      <form class="flex flex-col space-y-8" on:submit={sendInfoToBackend}>
+        <div class="flex w-full flex-col gap-1">
+          <div class="text-sm">Your name</div>
+          <Input
+            disabled={loading}
+            required
+            autocomplete="name"
+            bind:value={name}
+            placeholder="Enter your name"
+            class="flex-1 rounded-md border-0 bg-white p-2 text-sm text-black outline-none ring-0 focus:border-0 focus:outline-none focus:ring-0" />
+        </div>
+        <div class="flex w-full flex-col gap-1">
+          <div class="text-sm">Your email</div>
+          <Input
+            disabled={loading}
+            required
+            autocomplete="email"
+            type="email"
+            bind:value={email}
+            placeholder="Enter your email"
+            class="flex-1 rounded-md border-0 bg-white p-2 text-sm text-black outline-none ring-0 focus:border-0 focus:outline-none focus:ring-0" />
+        </div>
+        {#if error}
+          <div class="text-sm font-medium text-red-500">Error: {error}</div>
+        {/if}
+        <div class="text-xs">
+          By submitting the form you agree to receive email communication from
+          Hot or Not team.
+        </div>
+        <div class="w-full px-8">
+          <Button submit class="w-full" disabled={loading}>
+            {loading ? '...' : 'Submit'}
+          </Button>
+        </div>
+      </form>
+    {/if}
+  </div>
+</OverlayPopup>