fix(protocol-designer): analytics opt in modal fixes

protocol-designer/src/ProtocolRoutes.tsx

@@ -61,7 +61,6 @@ export function ProtocolRoutes(): JSX.Element {
   const allRoutes: RouteProps[] = [...pdRoutes, landingPage]
   const showGateModal =
     process.env.NODE_ENV === 'production' || process.env.OT_PD_SHOW_GATE
-
   const navigate = useNavigate()
   const handleReset = (): void => {
     navigate('/', { replace: true })

protocol-designer/src/analytics/actions.ts

@@ -1,9 +1,10 @@
+import { OLDEST_MIGRATEABLE_VERSION } from '../load-file/migration'
 import { setMixpanelTracking } from './mixpanel'
 import type { AnalyticsEvent } from './mixpanel'
 
 export interface SetOptIn {
   type: 'SET_OPT_IN'
-  payload: boolean
+  payload: { hasOptedIn: boolean; appVersion: string }
 }
 
 const _setOptIn = (payload: SetOptIn['payload']): SetOptIn => {
@@ -16,12 +17,20 @@ const _setOptIn = (payload: SetOptIn['payload']): SetOptIn => {
 
   return {
     type: 'SET_OPT_IN',
-    payload,
+    payload: { hasOptedIn: payload.hasOptedIn, appVersion: payload.appVersion },
   }
 }
 
-export const optIn = (): SetOptIn => _setOptIn(true)
-export const optOut = (): SetOptIn => _setOptIn(false)
+export const optIn = (): SetOptIn =>
+  _setOptIn({
+    hasOptedIn: true,
+    appVersion: process.env.OT_PD_VERSION || OLDEST_MIGRATEABLE_VERSION,
+  })
+export const optOut = (): SetOptIn =>
+  _setOptIn({
+    hasOptedIn: false,
+    appVersion: process.env.OT_PD_VERSION || OLDEST_MIGRATEABLE_VERSION,
+  })
 export interface AnalyticsEventAction {
   type: 'ANALYTICS_EVENT'
   payload: AnalyticsEvent

protocol-designer/src/analytics/middleware.ts

@@ -499,7 +499,7 @@ export const trackEventMiddleware: Middleware<BaseState, any> = ({
   // NOTE: this is the Redux state AFTER the action has been fully dispatched
   const state = getState()
 
-  const optedIn = getHasOptedIn(state as BaseState) ?? false
+  const optedIn = getHasOptedIn(state as BaseState)?.hasOptedIn ?? false
   const event = reduxActionToAnalyticsEvent(state as BaseState, action)
 
   if (event != null) {

protocol-designer/src/analytics/mixpanel.ts

@@ -24,7 +24,7 @@ const MIXPANEL_OPTS = {
 }
 
 export function initializeMixpanel(state: BaseState): void {
-  const optedIn = getHasOptedIn(state) ?? false
+  const optedIn = getHasOptedIn(state)?.hasOptedIn ?? false
   if (MIXPANEL_ID != null) {
     console.debug('Initializing Mixpanel', { optedIn })
 

protocol-designer/src/analytics/reducers.ts

@@ -4,8 +4,14 @@ import type { Reducer } from 'redux'
 import type { Action } from '../types'
 import type { SetOptIn } from './actions'
 import type { RehydratePersistedAction } from '../persist'
-type OptInState = boolean | null
-const optInInitialState = null
+export interface OptInState {
+  hasOptedIn: boolean | null
+  appVersion?: string
+}
+const optInInitialState = {
+  hasOptedIn: null,
+}
+
 // @ts-expect-error(sb, 2021-6-17): cannot use string literals as action type
 // TODO IMMEDIATELY: refactor this to the old fashioned way if we cannot have type safety: https://github.com/redux-utilities/redux-actions/issues/282#issuecomment-595163081
 const hasOptedIn: Reducer<OptInState, any> = handleActions(
@@ -17,7 +23,9 @@ const hasOptedIn: Reducer<OptInState, any> = handleActions(
       action: RehydratePersistedAction
     ) => {
       const persistedState = action.payload?.['analytics.hasOptedIn']
-      return persistedState !== undefined ? persistedState : optInInitialState
+      return persistedState !== undefined && state.appVersion != null
+        ? persistedState
+        : optInInitialState
     },
   },
   optInInitialState

protocol-designer/src/analytics/selectors.ts

@@ -1,3 +1,4 @@
 import type { BaseState } from '../types'
-export const getHasOptedIn = (state: BaseState): boolean | null =>
+import type { OptInState } from './reducers'
+export const getHasOptedIn = (state: BaseState): OptInState =>
   state.analytics.hasOptedIn

protocol-designer/src/assets/localization/en/shared.json

@@ -102,7 +102,7 @@
   "only_tiprack": "Incompatible file type",
   "opentrons_flex": "Opentrons Flex",
   "opentrons": "Opentrons",
-  "opentrons_collects_data": "In order to improve our products, Opentrons would like to collect data related to your use of Protocol Designer. With your consent, Opentrons will collect and store analytics and session data, including through the use of cookies and similar technologies, solely for the purpose enhancing our products.",
+  "opentrons_collects_data": "In order to improve our products, Opentrons would like to collect data related to your use of Protocol Designer. Opentrons will collect and store analytics and session data, including through the use of cookies and similar technologies, solely for the purpose enhancing our products.",
   "ot2": "Opentrons OT-2",
   "overwrite_labware": "Overwrite labware",
   "overwrite": "Click Overwrite to replace the existing labware with the new labware.",

protocol-designer/src/components/SettingsPage/SettingsApp.tsx

@@ -20,13 +20,10 @@
 
 export function SettingsApp(): JSX.Element {
   const dispatch = useDispatch()
-  const hasOptedIn = useSelector(analyticsSelectors.getHasOptedIn)
+  const analytics = useSelector(analyticsSelectors.getHasOptedIn)
   const canClearHintDismissals = useSelector(
     tutorialSelectors.getCanClearHintDismissals
   )
-  const _toggleOptedIn = hasOptedIn
-    ? analyticsActions.optOut
-    : analyticsActions.optIn
 
   const { t } = useTranslation(['card', 'application', 'button'])
   return (
@@ -72,8 +69,14 @@
               <p className={styles.toggle_label}>{t('toggle.share_session')}</p>
               <ToggleButton
                 className={styles.toggle_button}
-                toggledOn={Boolean(hasOptedIn)}
-                onClick={() => dispatch(_toggleOptedIn())}
+                toggledOn={Boolean(analytics.hasOptedIn)}
+                onClick={() =>
+                  dispatch(
+                    analytics.hasOptedIn
+                      ? analyticsActions.optOut
+                      : analyticsActions.optIn
+                  )
+                }
               />
             </div>
 

protocol-designer/src/organisms/GateModal/index.tsx

@@ -9,7 +9,6 @@ import {
   Modal,
   PrimaryButton,
   SPACING,
-  SecondaryButton,
   StyledText,
 } from '@opentrons/components'
 import {
@@ -22,10 +21,10 @@ const EULA_URL = 'https://opentrons.com/eula'
 
 export function GateModal(): JSX.Element | null {
   const { t } = useTranslation('shared')
-  const hasOptedIn = useSelector(analyticsSelectors.getHasOptedIn)
+  const analytics = useSelector(analyticsSelectors.getHasOptedIn)
   const dispatch = useDispatch()
 
-  if (hasOptedIn == null) {
+  if (analytics.appVersion == null || analytics.hasOptedIn == null) {
     return (
       <Modal
         position="bottomRight"
@@ -36,16 +35,9 @@ export function GateModal(): JSX.Element | null {
             gridGap={SPACING.spacing8}
             padding={SPACING.spacing24}
           >
-            <SecondaryButton
-              onClick={() => dispatch(analyticsActions.optOut())}
-            >
-              <StyledText desktopStyle="bodyDefaultRegular">
-                {t('reject')}
-              </StyledText>
-            </SecondaryButton>
             <PrimaryButton onClick={() => dispatch(analyticsActions.optIn())}>
               <StyledText desktopStyle="bodyDefaultRegular">
-                {t('agree')}
+                {t('confirm')}
               </StyledText>
             </PrimaryButton>
           </Flex>
@@ -85,9 +77,6 @@ export function GateModal(): JSX.Element | null {
               }}
             />
           </StyledText>
-          <StyledText desktopStyle="bodyDefaultRegular">
-            {t('analytics_tracking')}
-          </StyledText>
         </Flex>
       </Modal>
     )

protocol-designer/src/pages/Landing/__tests__/Landing.test.tsx

@@ -35,7 +35,10 @@ const render = () => {
 
 describe('Landing', () => {
   beforeEach(() => {
-    vi.mocked(getHasOptedIn).mockReturnValue(false)
+    vi.mocked(getHasOptedIn).mockReturnValue({
+      hasOptedIn: false,
+      appVersion: '8.2.1',
+    })
     vi.mocked(getFileMetadata).mockReturnValue({})
     vi.mocked(loadProtocolFile).mockReturnValue(vi.fn())
     vi.mocked(useAnnouncements).mockReturnValue({} as any)

protocol-designer/src/pages/Settings/__tests__/Settings.test.tsx

@@ -32,7 +32,10 @@ const render = () => {
 
 describe('Settings', () => {
   beforeEach(() => {
-    vi.mocked(getHasOptedIn).mockReturnValue(false)
+    vi.mocked(getHasOptedIn).mockReturnValue({
+      hasOptedIn: false,
+      appVersion: '8.2.1',
+    })
     vi.mocked(getFeatureFlagData).mockReturnValue({})
     vi.mocked(getCanClearHintDismissals).mockReturnValue(true)
   })

protocol-designer/src/pages/Settings/index.tsx

@@ -31,6 +31,7 @@
 import { actions as featureFlagActions } from '../../feature-flags'
 import { getFeatureFlagData } from '../../feature-flags/selectors'
 import type { FlagTypes } from '../../feature-flags'
+import { OLDEST_MIGRATEABLE_VERSION } from '../../load-file/migration'
 
 const HOT_KEY_FLAG = 'OT_PD_ENABLE_HOT_KEYS_DISPLAY'
 const PRIVACY_POLICY_URL = 'https://opentrons.com/privacy-policy'
@@ -42,18 +43,16 @@
   const [showAnnouncementModal, setShowAnnouncementModal] = useState<boolean>(
     false
   )
-  const hasOptedIn = useSelector(analyticsSelectors.getHasOptedIn)
+  const analytics = useSelector(analyticsSelectors.getHasOptedIn)
   const flags = useSelector(getFeatureFlagData)
   const canClearHintDismissals = useSelector(
     tutorialSelectors.getCanClearHintDismissals
   )
-  const _toggleOptedIn = hasOptedIn
-    ? analyticsActions.optOut
-    : analyticsActions.optIn
 
-  const prereleaseModeEnabled = flags.PRERELEASE_MODE === true
   const pdVersion = process.env.OT_PD_VERSION
 
+  const prereleaseModeEnabled = flags.PRERELEASE_MODE === true
+
   const allFlags = Object.keys(flags) as FlagTypes[]
 
   const getDescription = (flag: FlagTypes): string => {
@@ -276,15 +275,23 @@
                   data-testid="analyticsToggle"
                   size="2rem"
                   css={
-                    Boolean(hasOptedIn)
+                    Boolean(analytics.hasOptedIn)
                       ? TOGGLE_ENABLED_STYLES
                       : TOGGLE_DISABLED_STYLES
                   }
-                  onClick={() => dispatch(_toggleOptedIn())}
+                  onClick={() =>
+                    dispatch(
+                      analytics.hasOptedIn
+                        ? analyticsActions.optOut()
+                        : analyticsActions.optIn()
+                    )
+                  }
                 >
                   <Icon
                     name={
-                      hasOptedIn ? 'ot-toggle-input-on' : 'ot-toggle-input-off'
+                      analytics.hasOptedIn
+                        ? 'ot-toggle-input-on'
+                        : 'ot-toggle-input-off'
                     }
                     height="1rem"
                   />