fix: send sign in event

storipress · May 14, 2024 · 464ef76 · 464ef76
1 parent f03ff4d
commit 464ef76
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/src/components/EmailForm.vue b/src/components/EmailForm.vue
@@ -4,12 +4,14 @@ import { Field as FormField, useForm } from 'vee-validate'
 import { useAutoAnimate } from '@formkit/auto-animate/vue'
 import * as z from 'zod'
 import { useModel } from 'vue'
+import { sendTrack } from '~/lib/tracking'
 
 const props = defineProps<{
   email: string
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
+  signedIn: []
   'update:email': [string]
 }>()
 
@@ -38,6 +40,7 @@ const onSubmit = form.handleSubmit(async (values) => {
   if (res.ok && res.token) {
     $paywall.setKey('token', res.token)
   }
+  emit('signedIn')
   // TODO: error handling
 })
 

diff --git a/src/components/LeakyPaywall.vue b/src/components/LeakyPaywall.vue
@@ -189,6 +189,15 @@ onMounted(() => {
     show: (v = true) => (show.value = v),
   })
 })
+
+function handleSignedIn() {
+  sendTrack('subscriber.signed_in', {
+    pathname: location.value.pathname ?? '',
+    // impossible to be empty
+    article_id: foundArticle.value?.id ?? '',
+    client_id: config.value.clientId,
+  })
+}
 </script>
 
 <template>
@@ -199,7 +208,7 @@ onMounted(() => {
           <!-- for accessibility -->
           <AlertDialogTitle class="invisible">Subscribe</AlertDialogTitle>
         </VisuallyHidden>
-        <LeakyPaywallContent v-model:email="emailInput" :config="config" />
+        <LeakyPaywallContent v-model:email="emailInput" :config="config" @signed-in="handleSignedIn" />
       </AlertDialogContent>
     </AlertDialog>
     <VisuallyHidden>

diff --git a/src/components/LeakyPaywallContent.vue b/src/components/LeakyPaywallContent.vue
@@ -7,6 +7,8 @@ export interface Props {
 
 const props = defineProps<Props>()
 
+defineEmits<{ signedIn: [] }>()
+
 const themeConfig = computed(() => ({ '--sp-primary': props.config.primaryColor }))
 const email = defineModel('email', {
   default: '',
@@ -34,7 +36,7 @@ const email = defineModel('email', {
         </p>
 
         <!-- email form -->
-        <EmailForm v-model:email="email" />
+        <EmailForm v-model:email="email" @signed-in="$emit('signedIn')" />
       </div>
     </CardContent>
   </Card>