Ask user how they found MinusX (#70)

* Add login input to enter discovery method

* Ensure valid input before login

* Use auth APIs to show discovery input during auth

* Add events to track discovery method

Author: ppsreejith

web/package.json

@@ -36,6 +36,7 @@
     "@vitejs/plugin-react": "^4.3.1",
     "axios": "^1.7.2",
     "babel-jest": "^29.5.0",
+    "chakra-react-select": "^5.0.2",
     "diff": "^7.0.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "framer-motion": "^8.4.3",

web/src/components/common/Auth.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Button, Input, Box, VStack, Image, CloseButton, HStack, Text, Progress } from '@chakra-ui/react';
+import { Select, CreatableSelect } from "chakra-react-select";
 import { login } from '../../state/auth/reducer'
 import { dispatch } from '../../state/dispatch'
 import {auth, auth as authModule} from '../../app/api'
@@ -11,6 +12,7 @@ import { captureEvent, GLOBAL_EVENTS } from '../../tracking';
 import { capture } from '../../helpers/screenCapture/extensionCapture';
 import { TelemetryToggle } from './Settings';
 import { getParsedIframeInfo } from '../../helpers/origin';
+import { toast } from '../../app/toast';
 
 interface HighlightItem {
   content: React.ReactNode;
@@ -109,9 +111,34 @@ const Auth = () => {
   const session_jwt = useSelector(state => state.auth.session_jwt)
   const [email, setEmail] = useState("");
   const [authJWT, setAuthJWT] = useState("");
+  const [isFirstTimeUser, setIsFirstTimeUser] = useState(false);
   const [otp, setOTP] = useState("");
+  const [discoveryMethod, setDiscoveryMethod] = useState("");
   const isOTPMode = authJWT ? true : false
   const handleVerifyOtp = () => {
+    if (!otp) {
+      return toast({
+        title: 'Invalid code',
+        description: "Please enter a valid code",
+        status: 'warning',
+        duration: 5000,
+        isClosable: true,
+        position: 'bottom-right',
+      })
+    }
+    if (isFirstTimeUser && !discoveryMethod) {
+      return toast({
+        title: 'Please fill all the fields',
+        description: "Please tell us how you found us!",
+        status: 'warning',
+        duration: 5000,
+        isClosable: true,
+        position: 'bottom-right',
+      })
+    }
+    if (discoveryMethod) {
+      captureEvent(GLOBAL_EVENTS.user_discovery_method, { email, discoveryMethod })
+    }
     console.log('Login params are', authJWT, otp, session_jwt)
     captureEvent(GLOBAL_EVENTS.otp_attempted, { email, otp, authJWT })
     authModule.login(authJWT, otp, session_jwt).then(({ session_jwt, profile_id, email, is_new_user }) => {
@@ -121,7 +148,7 @@ const Auth = () => {
           email,
       }))
       if (is_new_user) {
-        captureEvent(GLOBAL_EVENTS.user_signup, { email, profile_id })
+        captureEvent(GLOBAL_EVENTS.user_signup, { email, profile_id, discoveryMethod })
       } else {
         captureEvent(GLOBAL_EVENTS.user_login, { email, profile_id })
       }
@@ -135,8 +162,9 @@ const Auth = () => {
   const handleSignin = () => {
     // capture email_entered event
     captureEvent(GLOBAL_EVENTS.email_entered, { email })
-    authModule.verifyEmail(email).then(({auth_jwt}) => {
+    authModule.verifyEmail(email).then(({auth_jwt, first}) => {
       setAuthJWT(auth_jwt)
+      setIsFirstTimeUser(first)
       captureEvent(GLOBAL_EVENTS.otp_received, { email, auth_jwt })
     }).catch((error) => {
       captureEvent(GLOBAL_EVENTS.otp_sending_failed, { email })
@@ -231,6 +259,43 @@ const Auth = () => {
               }}
               borderColor={"minusxBW.600"}
             />
+            { isFirstTimeUser ?
+            <>
+            How did you find us?
+            <CreatableSelect
+              chakraStyles={{container: (base) => ({...base, width: "100%"})}}
+              tagColorScheme="purple"
+              placeholder="How did you find us?"
+              onChange={(value) => setDiscoveryMethod(value)}
+              options={[
+                {
+                  label: "Instagram",
+                  value: "Instagram",
+                },
+                {
+                  label: "LinkedIn",
+                  value: "LinkedIn",
+                },
+                {
+                  label: "Twitter",
+                  value: "Twitter",
+                },
+                {
+                  label: "Google",
+                  value: "Google",
+                },
+                {
+                  label: "YouTube",
+                  value: "YouTube",
+                },
+                {
+                  label: "Friends/Colleagues",
+                  value: "Friends/Colleagues",
+                },
+              ]}
+            />
+            </> : null
+            }
             <Button colorScheme="minusxBW" variant="outline" onClick={handleVerifyOtp} width="100%" aria-label="Verify Code">
               Verify Code
             </Button>

web/src/tracking/index.ts

@@ -10,6 +10,7 @@ export const GLOBAL_EVENTS = {
     "otp_failed": "global/otp_failed",
     "otp_success": "global/otp_success",
     "user_signup": "global/user_signup",
+    "user_discovery_method": "global/user_discovery_method",
     "user_login": "global/user_login",
     "billing_checkout": "global/billing_checkout",
     "billing_portal": "global/billing_portal",