feat(app): add mixpanel tracking for quick transfer (#16200)

fix PLAT-218
Opentrons · Sep 6, 2024 · 02ba906 · 02ba906
1 parent 6948d93
commit 02ba906
Show file tree

Hide file tree

Showing 27 changed files with 448 additions and 37 deletions.
diff --git a/app/src/organisms/Devices/hooks/index.ts b/app/src/organisms/Devices/hooks/index.ts
@@ -33,6 +33,7 @@ export * from './useProtocolRunAnalyticsData'
 export * from './useRobotAnalyticsData'
 export * from './useTrackCreateProtocolRunEvent'
 export * from './useTrackProtocolRunEvent'
+export * from './useTrackEventWithRobotSerial'
 export * from './useRunStatuses'
 export * from './useSyncRobotClock'
 export * from './useIsLegacySessionInProgress'

diff --git a/app/src/organisms/Devices/hooks/useTrackEventWithRobotSerial.ts b/app/src/organisms/Devices/hooks/useTrackEventWithRobotSerial.ts
@@ -0,0 +1,33 @@
+import { useSelector } from 'react-redux'
+import { useTrackEvent } from '../../../redux/analytics'
+import { getLocalRobot, getRobotSerialNumber } from '../../../redux/discovery'
+
+interface AnalyticsEvent {
+  name: string
+  properties: { [key: string]: unknown }
+}
+
+export type TrackEventWithRobotSerial = (event: AnalyticsEvent) => void
+
+export function useTrackEventWithRobotSerial(): {
+  trackEventWithRobotSerial: TrackEventWithRobotSerial
+} {
+  const trackEvent = useTrackEvent()
+  const localRobot = useSelector(getLocalRobot)
+  const robotSerialNumber =
+    localRobot?.status != null ? getRobotSerialNumber(localRobot) : null
+  const trackEventWithRobotSerial: TrackEventWithRobotSerial = ({
+    name,
+    properties,
+  }) => {
+    trackEvent({
+      name,
+      properties: {
+        ...properties,
+        robotSerial: robotSerialNumber,
+      },
+    })
+  }
+
+  return { trackEventWithRobotSerial }
+}
diff --git a/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/AirGap.tsx b/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/AirGap.tsx
@@ -9,10 +9,12 @@ import {
   COLORS,
   ALIGN_CENTER,
 } from '@opentrons/components'
+import { ANALYTICS_QUICK_TRANSFER_SETTING_SAVED } from '../../../redux/analytics'
 import { getTopPortalEl } from '../../../App/portal'
 import { RadioButton } from '../../../atoms/buttons'
 import { ChildNavigation } from '../../ChildNavigation'
 import { InputField } from '../../../atoms/InputField'
+import { useTrackEventWithRobotSerial } from '../../Devices/hooks'
 import { ACTIONS } from '../constants'
 
 import type {
@@ -33,6 +35,7 @@ interface AirGapProps {
 export function AirGap(props: AirGapProps): JSX.Element {
   const { kind, onBack, state, dispatch } = props
   const { t } = useTranslation('quick_transfer')
+  const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial()
   const keyboardRef = React.useRef(null)
 
   const [airGapEnabled, setAirGapEnabled] = React.useState<boolean>(
@@ -79,10 +82,22 @@ export function AirGap(props: AirGapProps): JSX.Element {
         setCurrentStep(currentStep + 1)
       } else {
         dispatch({ type: action, volume: undefined })
+        trackEventWithRobotSerial({
+          name: ANALYTICS_QUICK_TRANSFER_SETTING_SAVED,
+          properties: {
+            setting: `AirGap_${kind}`,
+          },
+        })
         onBack()
       }
     } else if (currentStep === 2) {
       dispatch({ type: action, volume: volume ?? undefined })
+      trackEventWithRobotSerial({
+        name: ANALYTICS_QUICK_TRANSFER_SETTING_SAVED,
+        properties: {
+          setting: `AirGap_${kind}`,
+        },
+      })
       onBack()
     }
   }

diff --git a/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/BlowOut.tsx b/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/BlowOut.tsx
@@ -14,9 +14,11 @@ import {
   FLEX_SINGLE_SLOT_BY_CUTOUT_ID,
   TRASH_BIN_ADAPTER_FIXTURE,
 } from '@opentrons/shared-data'
+import { ANALYTICS_QUICK_TRANSFER_SETTING_SAVED } from '../../../redux/analytics'
 import { getTopPortalEl } from '../../../App/portal'
 import { RadioButton } from '../../../atoms/buttons'
 import { useNotifyDeckConfigurationQuery } from '../../../resources/deck_configuration'
+import { useTrackEventWithRobotSerial } from '../../Devices/hooks'
 import { ChildNavigation } from '../../ChildNavigation'
 import { ACTIONS } from '../constants'
 
@@ -91,6 +93,7 @@ export const useBlowOutLocationOptions = (
 export function BlowOut(props: BlowOutProps): JSX.Element {
   const { onBack, state, dispatch } = props
   const { t } = useTranslation('quick_transfer')
+  const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial()
   const deckConfig = useNotifyDeckConfigurationQuery().data ?? []
 
   const [isBlowOutEnabled, setisBlowOutEnabled] = React.useState<boolean>(
@@ -134,6 +137,12 @@ export function BlowOut(props: BlowOutProps): JSX.Element {
           type: ACTIONS.SET_BLOW_OUT,
           location: undefined,
         })
+        trackEventWithRobotSerial({
+          name: ANALYTICS_QUICK_TRANSFER_SETTING_SAVED,
+          properties: {
+            settting: `BlowOut`,
+          },
+        })
         onBack()
       } else {
         setCurrentStep(currentStep + 1)
@@ -143,6 +152,12 @@ export function BlowOut(props: BlowOutProps): JSX.Element {
         type: ACTIONS.SET_BLOW_OUT,
         location: blowOutLocation,
       })
+      trackEventWithRobotSerial({
+        name: ANALYTICS_QUICK_TRANSFER_SETTING_SAVED,
+        properties: {
+          settting: `BlowOut`,
+        },
+      })
       onBack()
     }
   }

diff --git a/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/Delay.tsx b/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/Delay.tsx
@@ -9,10 +9,12 @@ import {
   COLORS,
   ALIGN_CENTER,
 } from '@opentrons/components'
+import { ANALYTICS_QUICK_TRANSFER_SETTING_SAVED } from '../../../redux/analytics'
 import { getTopPortalEl } from '../../../App/portal'
 import { RadioButton } from '../../../atoms/buttons'
 import { ChildNavigation } from '../../ChildNavigation'
 import { InputField } from '../../../atoms/InputField'
+import { useTrackEventWithRobotSerial } from '../../Devices/hooks'
 import { ACTIONS } from '../constants'
 
 import type {
@@ -33,6 +35,7 @@ interface DelayProps {
 export function Delay(props: DelayProps): JSX.Element {
   const { kind, onBack, state, dispatch } = props
   const { t } = useTranslation('quick_transfer')
+  const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial()
   const keyboardRef = React.useRef(null)
 
   const [currentStep, setCurrentStep] = React.useState<number>(1)
@@ -85,6 +88,12 @@ export function Delay(props: DelayProps): JSX.Element {
           type: action,
           delaySettings: undefined,
         })
+        trackEventWithRobotSerial({
+          name: ANALYTICS_QUICK_TRANSFER_SETTING_SAVED,
+          properties: {
+            settting: `Delay_${kind}`,
+          },
+        })
         onBack()
       } else {
         setCurrentStep(2)
@@ -100,6 +109,12 @@ export function Delay(props: DelayProps): JSX.Element {
             positionFromBottom: position,
           },
         })
+        trackEventWithRobotSerial({
+          name: ANALYTICS_QUICK_TRANSFER_SETTING_SAVED,
+          properties: {
+            settting: `Delay_${kind}`,
+          },
+        })
       }
       onBack()
     }

diff --git a/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/FlowRate.tsx b/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/FlowRate.tsx
@@ -13,11 +13,13 @@ import {
   LOW_VOLUME_PIPETTES,
   getTipTypeFromTipRackDefinition,
 } from '@opentrons/shared-data'
+import { ANALYTICS_QUICK_TRANSFER_SETTING_SAVED } from '../../../redux/analytics'
 
 import { getTopPortalEl } from '../../../App/portal'
 import { ChildNavigation } from '../../ChildNavigation'
 import { InputField } from '../../../atoms/InputField'
 import { NumericalKeyboard } from '../../../atoms/SoftwareKeyboard'
+import { useTrackEventWithRobotSerial } from '../../Devices/hooks'
 
 import { ACTIONS } from '../constants'
 import type { SupportedTip } from '@opentrons/shared-data'
@@ -37,6 +39,7 @@ interface FlowRateEntryProps {
 export function FlowRateEntry(props: FlowRateEntryProps): JSX.Element {
   const { onBack, state, dispatch, kind } = props
   const { i18n, t } = useTranslation(['quick_transfer', 'shared'])
+  const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial()
   const keyboardRef = React.useRef(null)
 
   const [flowRate, setFlowRate] = React.useState<number>(
@@ -87,6 +90,12 @@ export function FlowRateEntry(props: FlowRateEntryProps): JSX.Element {
         type: flowRateAction,
         rate: flowRate,
       })
+      trackEventWithRobotSerial({
+        name: ANALYTICS_QUICK_TRANSFER_SETTING_SAVED,
+        properties: {
+          setting: `FlowRate_${kind}`,
+        },
+      })
     }
     onBack()
   }

diff --git a/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/Mix.tsx b/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/Mix.tsx
@@ -9,10 +9,12 @@ import {
   COLORS,
   ALIGN_CENTER,
 } from '@opentrons/components'
+import { ANALYTICS_QUICK_TRANSFER_SETTING_SAVED } from '../../../redux/analytics'
 import { getTopPortalEl } from '../../../App/portal'
 import { RadioButton } from '../../../atoms/buttons'
 import { ChildNavigation } from '../../ChildNavigation'
 import { InputField } from '../../../atoms/InputField'
+import { useTrackEventWithRobotSerial } from '../../Devices/hooks'
 import { ACTIONS } from '../constants'
 
 import type {
@@ -33,6 +35,7 @@ interface MixProps {
 export function Mix(props: MixProps): JSX.Element {
   const { kind, onBack, state, dispatch } = props
   const { t } = useTranslation('quick_transfer')
+  const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial()
   const keyboardRef = React.useRef(null)
 
   const [mixIsEnabled, setMixIsEnabled] = React.useState<boolean>(
@@ -85,6 +88,12 @@ export function Mix(props: MixProps): JSX.Element {
           type: mixAction,
           mixSettings: undefined,
         })
+        trackEventWithRobotSerial({
+          name: ANALYTICS_QUICK_TRANSFER_SETTING_SAVED,
+          properties: {
+            setting: `Mix_${kind}`,
+          },
+        })
         onBack()
       } else {
         setCurrentStep(2)
@@ -97,6 +106,12 @@ export function Mix(props: MixProps): JSX.Element {
           type: mixAction,
           mixSettings: { mixVolume, repititions: mixReps },
         })
+        trackEventWithRobotSerial({
+          name: ANALYTICS_QUICK_TRANSFER_SETTING_SAVED,
+          properties: {
+            setting: `Mix_${kind}`,
+          },
+        })
       }
       onBack()
     }

diff --git a/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/PipettePath.tsx b/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/PipettePath.tsx
@@ -10,10 +10,12 @@ import {
   COLORS,
   ALIGN_CENTER,
 } from '@opentrons/components'
+import { ANALYTICS_QUICK_TRANSFER_SETTING_SAVED } from '../../../redux/analytics'
 import { useNotifyDeckConfigurationQuery } from '../../../resources/deck_configuration'
 import { getTopPortalEl } from '../../../App/portal'
 import { RadioButton } from '../../../atoms/buttons'
 import { ChildNavigation } from '../../ChildNavigation'
+import { useTrackEventWithRobotSerial } from '../../Devices/hooks'
 import { useBlowOutLocationOptions } from './BlowOut'
 
 import type {
@@ -36,6 +38,7 @@ interface PipettePathProps {
 export function PipettePath(props: PipettePathProps): JSX.Element {
   const { onBack, state, dispatch } = props
   const { t } = useTranslation('quick_transfer')
+  const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial()
   const keyboardRef = React.useRef(null)
   const deckConfig = useNotifyDeckConfigurationQuery().data ?? []
 
@@ -95,6 +98,12 @@ export function PipettePath(props: PipettePathProps): JSX.Element {
           type: ACTIONS.SET_PIPETTE_PATH,
           path: selectedPath,
         })
+        trackEventWithRobotSerial({
+          name: ANALYTICS_QUICK_TRANSFER_SETTING_SAVED,
+          properties: {
+            setting: `PipettePath`,
+          },
+        })
         onBack()
       } else {
         setCurrentStep(2)
@@ -108,6 +117,12 @@ export function PipettePath(props: PipettePathProps): JSX.Element {
         disposalVolume,
         blowOutLocation,
       })
+      trackEventWithRobotSerial({
+        name: ANALYTICS_QUICK_TRANSFER_SETTING_SAVED,
+        properties: {
+          setting: `PipettePath`,
+        },
+      })
       onBack()
     }
   }

diff --git a/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/TipPosition.tsx b/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/TipPosition.tsx
@@ -8,10 +8,12 @@ import {
   POSITION_FIXED,
   COLORS,
 } from '@opentrons/components'
+import { ANALYTICS_QUICK_TRANSFER_SETTING_SAVED } from '../../../redux/analytics'
 import { getTopPortalEl } from '../../../App/portal'
 import { ChildNavigation } from '../../ChildNavigation'
 import { InputField } from '../../../atoms/InputField'
 import { NumericalKeyboard } from '../../../atoms/SoftwareKeyboard'
+import { useTrackEventWithRobotSerial } from '../../Devices/hooks'
 
 import type {
   QuickTransferSummaryState,
@@ -32,6 +34,7 @@ interface TipPositionEntryProps {
 export function TipPositionEntry(props: TipPositionEntryProps): JSX.Element {
   const { onBack, state, dispatch, kind } = props
   const { i18n, t } = useTranslation(['quick_transfer', 'shared'])
+  const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial()
   const keyboardRef = React.useRef(null)
 
   const [tipPosition, setTipPosition] = React.useState<number>(
@@ -73,6 +76,12 @@ export function TipPositionEntry(props: TipPositionEntryProps): JSX.Element {
         type: tipPositionAction,
         position: tipPosition,
       })
+      trackEventWithRobotSerial({
+        name: ANALYTICS_QUICK_TRANSFER_SETTING_SAVED,
+        properties: {
+          setting: `TipPosition_${kind}`,
+        },
+      })
     }
     onBack()
   }

diff --git a/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/TouchTip.tsx b/app/src/organisms/QuickTransferFlow/QuickTransferAdvancedSettings/TouchTip.tsx
@@ -9,10 +9,12 @@ import {
   COLORS,
   ALIGN_CENTER,
 } from '@opentrons/components'
+import { ANALYTICS_QUICK_TRANSFER_SETTING_SAVED } from '../../../redux/analytics'
 import { getTopPortalEl } from '../../../App/portal'
 import { RadioButton } from '../../../atoms/buttons'
 import { ChildNavigation } from '../../ChildNavigation'
 import { InputField } from '../../../atoms/InputField'
+import { useTrackEventWithRobotSerial } from '../../Devices/hooks'
 import { ACTIONS } from '../constants'
 
 import type {
@@ -33,6 +35,7 @@ interface TouchTipProps {
 export function TouchTip(props: TouchTipProps): JSX.Element {
   const { kind, onBack, state, dispatch } = props
   const { t } = useTranslation('quick_transfer')
+  const { trackEventWithRobotSerial } = useTrackEventWithRobotSerial()
   const keyboardRef = React.useRef(null)
 
   const [touchTipIsEnabled, setTouchTipIsEnabled] = React.useState<boolean>(
@@ -77,12 +80,24 @@ export function TouchTip(props: TouchTipProps): JSX.Element {
     if (currentStep === 1) {
       if (!touchTipIsEnabled) {
         dispatch({ type: touchTipAction, position: undefined })
+        trackEventWithRobotSerial({
+          name: ANALYTICS_QUICK_TRANSFER_SETTING_SAVED,
+          properties: {
+            setting: `TouchTip_${kind}`,
+          },
+        })
         onBack()
       } else {
         setCurrentStep(2)
       }
     } else if (currentStep === 2) {
       dispatch({ type: touchTipAction, position: position ?? undefined })
+      trackEventWithRobotSerial({
+        name: ANALYTICS_QUICK_TRANSFER_SETTING_SAVED,
+        properties: {
+          setting: `TouchTip_${kind}`,
+        },
+      })
       onBack()
     }
   }