From 86f872a8df972dcae45e965a60d6e4696c60559e Mon Sep 17 00:00:00 2001
From: Calvin Yau <calvin.yau@sentry.io>
Date: Tue, 28 Jan 2025 10:49:38 -0800
Subject: [PATCH] fix: Add ampl events for login, sync, and onboarding

---
 src/pages/LoginPage/LoginButton.jsx         | 10 ++++++++++
 src/pages/SyncProviderPage/SyncButton.tsx   | 16 +++++++++++++---
 src/pages/TermsOfService/TermsOfService.tsx | 10 ++++++++++
 src/services/events/types.ts                |  9 +++++++++
 4 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/pages/LoginPage/LoginButton.jsx b/src/pages/LoginPage/LoginButton.jsx
index b2c74655ce..3ea5e04ee4 100644
--- a/src/pages/LoginPage/LoginButton.jsx
+++ b/src/pages/LoginPage/LoginButton.jsx
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
 
+import { eventTracker } from 'services/events/events'
 import { useNavLinks } from 'services/navigation'
 import { Theme, useThemeContext } from 'shared/ThemeContext'
 import {
@@ -21,6 +22,15 @@ function LoginButton({ provider }) {
       className="flex h-14 items-center rounded-sm border border-ds-gray-quaternary bg-ds-gray-primary font-semibold shadow hover:bg-ds-gray-secondary"
       href={signIn.path({ to, provider })}
       data-cy={'login-button'}
+      onClick={() => {
+        eventTracker().track({
+          type: 'Button Clicked',
+          properties: {
+            buttonName: `Login with ${providerName}`,
+            buttonLocation: 'Login Page',
+          },
+        })
+      }}
     >
       <img
         alt={`${providerName} logo`}
diff --git a/src/pages/SyncProviderPage/SyncButton.tsx b/src/pages/SyncProviderPage/SyncButton.tsx
index 5044a1a8e5..175c77e771 100644
--- a/src/pages/SyncProviderPage/SyncButton.tsx
+++ b/src/pages/SyncProviderPage/SyncButton.tsx
@@ -1,3 +1,4 @@
+import { eventTracker } from 'services/events/events'
 import { useNavLinks } from 'services/navigation'
 import { Provider } from 'shared/api/helpers'
 import { loginProviderImage } from 'shared/utils/loginProviders'
@@ -10,20 +11,29 @@ interface SyncButtonProps {
 const SyncButton: React.FC<SyncButtonProps> = ({ provider }) => {
   const { signIn } = useNavLinks()
   const to = `${window.location.protocol}//${window.location.host}/${provider}`
-
+  const providerName = providerToName(provider)
   return (
     <div className="flex h-14 items-center rounded-sm border border-ds-gray-quaternary bg-ds-gray-primary text-left shadow">
       <a
         className="flex h-full grow items-center font-semibold hover:bg-ds-gray-secondary"
         href={signIn.path({ to, provider })}
         data-cy={'login-button'}
+        onClick={() => {
+          eventTracker().track({
+            type: 'Button Clicked',
+            properties: {
+              buttonName: `Sync with ${providerName}`,
+              buttonLocation: 'Sync Provider Page',
+            },
+          })
+        }}
       >
         <img
-          alt={`Logo of ${providerToName(provider)}`}
+          alt={`Logo of ${providerName}`}
           className="mx-4 block size-6"
           src={loginProviderImage(provider)}
         />
-        Sync with {providerToName(provider)}
+        Sync with {providerName}
       </a>
     </div>
   )
diff --git a/src/pages/TermsOfService/TermsOfService.tsx b/src/pages/TermsOfService/TermsOfService.tsx
index 51ffa56c95..df7ee89d5f 100644
--- a/src/pages/TermsOfService/TermsOfService.tsx
+++ b/src/pages/TermsOfService/TermsOfService.tsx
@@ -8,6 +8,7 @@ import config from 'config'
 import { SentryBugReporter } from 'sentry'
 
 import umbrellaSvg from 'assets/svg/umbrella.svg'
+import { eventTracker } from 'services/events/events'
 import { useInternalUser } from 'services/user'
 import A from 'ui/A'
 import Button from 'ui/Button'
@@ -275,6 +276,15 @@ export default function TermsOfService() {
             })}
             type="submit"
             hook="user signed tos"
+            onClick={() => {
+              eventTracker().track({
+                type: 'Button Clicked',
+                properties: {
+                  buttonName: 'Continue',
+                  buttonLocation: 'Terms of Service',
+                },
+              })
+            }}
             to={undefined}
           >
             Continue
diff --git a/src/services/events/types.ts b/src/services/events/types.ts
index 1684930172..0fe94b978e 100644
--- a/src/services/events/types.ts
+++ b/src/services/events/types.ts
@@ -1,4 +1,5 @@
 import { Provider } from 'shared/api/helpers'
+import { providerToName } from 'shared/utils/provider'
 
 //
 // Add new events to the the Event union type below!
@@ -85,8 +86,16 @@ export abstract class EventTracker {
 // Extend as needed.
 //
 
+type ProviderName = ReturnType<typeof providerToName>
+type SyncButtonName = `Sync with ${ProviderName}`
+type LoginButtonName = `Login with ${ProviderName}`
+
 type ButtonName =
   | 'Install GitHub App'
   | 'Configure Repo'
   | 'Open App Install Modal'
+  | 'Continue'
+  | SyncButtonName
+  | LoginButtonName
+
 type PageName = 'Owner Page'