Add event logging to signup Cody toast and email verification toast (#52278)

## Test plan

- sign up for a new account on dotcom

---------

Co-authored-by: Erzhan Torokulov <erzhan.torokulov@gmail.com>

Author: dadlerj

client/web/src/LegacyLayout.tsx

@@ -237,7 +237,10 @@ export const LegacyLayout: FC<LegacyLayoutProps> = props => {
                 !disableFeedbackSurvey &&
                 !isCodyStandalonePage && <SurveyToast authenticatedUser={props.authenticatedUser} />}
             {props.isSourcegraphDotCom && props.authenticatedUser && (
-                <CodySurveyToast authenticatedUser={props.authenticatedUser} />
+                <CodySurveyToast
+                    authenticatedUser={props.authenticatedUser}
+                    telemetryService={props.telemetryService}
+                />
             )}
             {!isSiteInit && !isSignInOrUp && !isCodyStandalonePage && (
                 <GlobalNavbar

client/web/src/marketing/toast/CodySurveyToast.tsx

@@ -5,6 +5,7 @@ import { mdiEmail } from '@mdi/js'
 import { asError, ErrorLike } from '@sourcegraph/common'
 import { gql, useMutation } from '@sourcegraph/http-client'
 import { useTemporarySetting } from '@sourcegraph/shared/src/settings/temporary'
+import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
 import { Checkbox, Form, H3, Modal, Text, Button, Icon, useLocalStorage } from '@sourcegraph/wildcard'
 
 import { AuthenticatedUser } from '../../auth'
@@ -22,7 +23,10 @@ const SUBMIT_CODY_SURVEY = gql`
     }
 `
 
-const CodySurveyToastInner: React.FC<{ onSubmitEnd: () => void }> = ({ onSubmitEnd }) => {
+const CodySurveyToastInner: React.FC<{ onSubmitEnd: () => void } & TelemetryProps> = ({
+    onSubmitEnd,
+    telemetryService,
+}) => {
     const [isCodyForWork, setIsCodyForWork] = useState(false)
     const [isCodyForPersonalStuff, setIsCodyForPersonalStuff] = useState(false)
 
@@ -45,13 +49,19 @@ const CodySurveyToastInner: React.FC<{ onSubmitEnd: () => void }> = ({ onSubmitE
 
     const handleSubmit = useCallback(
         (event: React.FormEvent<HTMLFormElement>) => {
+            const eventParams = { isCodyForPersonalStuff, isCodyForWork }
+            telemetryService.log('CodyUsageToastSubmitted', eventParams, eventParams)
             event.preventDefault()
             // eslint-disable-next-line no-console
             submitCodySurvey().catch(console.error).finally(onSubmitEnd)
         },
-        [onSubmitEnd, submitCodySurvey]
+        [isCodyForPersonalStuff, isCodyForWork, onSubmitEnd, submitCodySurvey, telemetryService]
     )
 
+    useEffect(() => {
+        telemetryService.log('CodySurveyToastViewed')
+    }, [telemetryService])
+
     return (
         <Modal position="center" aria-label="Welcome message">
             <H3 className="mb-4 d-flex align-items-center">
@@ -84,9 +94,10 @@ const CodySurveyToastInner: React.FC<{ onSubmitEnd: () => void }> = ({ onSubmitE
     )
 }
 
-const CodyVerifyEmailToast: React.FC<{ onNext: () => void; authenticatedUser: AuthenticatedUser }> = ({
+const CodyVerifyEmailToast: React.FC<{ onNext: () => void; authenticatedUser: AuthenticatedUser } & TelemetryProps> = ({
     onNext,
     authenticatedUser,
+    telemetryService,
 }) => {
     const [sending, setSending] = useState(false)
     const [resentEmailTo, setResentEmailTo] = useState<string | null>(null)
@@ -110,6 +121,10 @@ const CodyVerifyEmailToast: React.FC<{ onNext: () => void; authenticatedUser: Au
         }
     }, [authenticatedUser])
 
+    useEffect(() => {
+        telemetryService.log('VerifyEmailToastViewed')
+    }, [telemetryService])
+
     return (
         <Modal position="center" aria-label="Welcome message">
             <H3 className="mb-4">
@@ -174,21 +189,32 @@ export const useCodySurveyToast = (): {
     }
 }
 
-export const CodySurveyToast: React.FC<{
-    authenticatedUser?: AuthenticatedUser
-}> = ({ authenticatedUser }) => {
+export const CodySurveyToast: React.FC<
+    {
+        authenticatedUser?: AuthenticatedUser
+    } & TelemetryProps
+> = ({ authenticatedUser, telemetryService }) => {
     const { show, dismiss } = useCodySurveyToast()
     const codyEnabled = useIsCodyEnabled()
     const [showVerifyEmail, setShowVerifyEmail] = useState(show && codyEnabled.needsEmailVerification)
-    const dismissVerifyEmail = useCallback(() => setShowVerifyEmail(false), [setShowVerifyEmail])
+    const dismissVerifyEmail = useCallback(() => {
+        telemetryService.log('VerifyEmailToastDismissed')
+        setShowVerifyEmail(false)
+    }, [telemetryService])
 
     if (!show) {
         return null
     }
 
     if (showVerifyEmail && authenticatedUser) {
-        return <CodyVerifyEmailToast onNext={dismissVerifyEmail} authenticatedUser={authenticatedUser} />
+        return (
+            <CodyVerifyEmailToast
+                onNext={dismissVerifyEmail}
+                authenticatedUser={authenticatedUser}
+                telemetryService={telemetryService}
+            />
+        )
     }
 
-    return <CodySurveyToastInner onSubmitEnd={dismiss} />
+    return <CodySurveyToastInner onSubmitEnd={dismiss} telemetryService={telemetryService} />
 }

client/web/src/storm/pages/LayoutPage/LayoutPage.tsx

@@ -197,7 +197,12 @@ export const Layout: React.FC<LegacyLayoutProps> = props => {
             {!isSiteInit && !isSignInOrUp && !props.isSourcegraphDotCom && !disableFeedbackSurvey && (
                 <SurveyToast authenticatedUser={props.authenticatedUser} />
             )}
-            {!isSiteInit && !props.isSourcegraphDotCom && <CodySurveyToast />}
+            {!isSiteInit && props.isSourcegraphDotCom && props.authenticatedUser && (
+                <CodySurveyToast
+                    telemetryService={props.telemetryService}
+                    authenticatedUser={props.authenticatedUser}
+                />
+            )}
             {!isSiteInit && !isSignInOrUp && (
                 <GlobalNavbar
                     {...props}