Revert "feat(app): refactor analytics settings modal (#14427)"

This reverts commit 273278e.

app/src/assets/localization/en/shared.json

@@ -1,9 +1,7 @@
 {
   "a_software_update_is_available": "A software update is available for this robot. Update to run protocols.",
-  "acknowledge_privacy": "Acknowledge Privacy Policy",
   "add": "add",
   "alphabetical": "Alphabetical",
-  "agree": "I agree",
   "back": "Back",
   "before_you_begin": "Before you begin",
   "browse": "browse",
@@ -49,8 +47,6 @@
   "ok": "ok",
   "on": "On",
   "open": "open",
-  "opentrons_privacy_policy": "Opentrons privacy policy",
-  "privacy_body": "<block>By proceeding you are agreeing to share desktop app usage data. Opentrons uses this data to improve our products and services.</block> <block>To read more about our data collection policies, visit our Privacy Policy:</block>",
   "proceed_to_setup": "Proceed to setup",
   "protocol_run_general_error_msg": "Protocol run could not be created on the robot.",
   "reanalyze": "Reanalyze",

app/src/organisms/AnalyticsSettingsModal/AnalyticsToggle.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react'
+import { connect, MapStateToProps, MapDispatchToProps } from 'react-redux'
+import { LabeledToggle } from '@opentrons/components'
+
+import {
+  toggleAnalyticsOptedIn,
+  getAnalyticsOptedIn,
+} from '../../redux/analytics'
+
+import type { State } from '../../redux/types'
+
+interface SP {
+  optedIn: boolean
+}
+
+interface DP {
+  toggleOptedIn: () => unknown
+}
+
+type Props = SP & DP
+
+function AnalyticsToggleComponent(props: Props): JSX.Element {
+  return (
+    <LabeledToggle
+      label="Share robot & app analytics with Opentrons"
+      toggledOn={props.optedIn}
+      onClick={props.toggleOptedIn}
+    >
+      <p>
+        Help Opentrons improve its products and services by automatically
+        sending anonymous diagnostic and usage data.
+      </p>
+      <p>
+        This will allow us to learn things such as which features get used the
+        most, which parts of the process are taking longest to complete, and how
+        errors are generated. You can change this setting at any time.
+      </p>
+    </LabeledToggle>
+  )
+}
+
+const mapStateToProps: MapStateToProps<SP, {}, State> = state => {
+  return {
+    optedIn: getAnalyticsOptedIn(state),
+  }
+}
+
+const mapDispatchToProps: MapDispatchToProps<DP, {}> = dispatch => {
+  return {
+    toggleOptedIn: () => dispatch(toggleAnalyticsOptedIn()),
+  }
+}
+
+export const AnalyticsToggle = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(AnalyticsToggleComponent)

app/src/organisms/AnalyticsSettingsModal/index.tsx

@@ -1,72 +1,38 @@
 import * as React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
-import { Trans, useTranslation } from 'react-i18next'
-import {
-  Flex,
-  SPACING,
-  TYPOGRAPHY,
-  DIRECTION_COLUMN,
-  PrimaryButton,
-  JUSTIFY_FLEX_END,
-} from '@opentrons/components'
+
 import {
   getAnalyticsOptInSeen,
-  toggleAnalyticsOptedIn,
   setAnalyticsOptInSeen,
-  getAnalyticsOptedIn,
 } from '../../redux/analytics'
-import { ExternalLink } from '../../atoms/Link/ExternalLink'
-import { LegacyModal } from '../../molecules/LegacyModal'
-import { StyledText } from '../../atoms/text'
+
+import { Modal, OutlineButton, SPACING } from '@opentrons/components'
+import { AnalyticsToggle } from './AnalyticsToggle'
+import { Portal } from '../../App/portal'
 import type { Dispatch } from '../../redux/types'
 
-const PRIVACY_POLICY_LINK = 'https://opentrons.com/privacy-policy'
+// TODO(bc, 2021-02-04): i18n
+const TITLE = 'Privacy Settings'
+const CONTINUE = 'continue'
 
 // TODO(mc, 2020-05-07): move render logic to `state.alerts`
 export function AnalyticsSettingsModal(): JSX.Element | null {
-  const { t } = useTranslation('shared')
   const dispatch = useDispatch<Dispatch>()
   const seen = useSelector(getAnalyticsOptInSeen)
-  const hasOptedIn = useSelector(getAnalyticsOptedIn)
-
-  const handleClick = (): void => {
-    dispatch(setAnalyticsOptInSeen())
-    dispatch(toggleAnalyticsOptedIn())
-  }
+  const setSeen = (): unknown => dispatch(setAnalyticsOptInSeen())
 
-  return !seen || !hasOptedIn ? (
-    <LegacyModal
-      title={
-        <StyledText css={TYPOGRAPHY.h3SemiBold}>
-          {t('acknowledge_privacy')}
-        </StyledText>
-      }
-      footer={
-        <Flex
-          justifyContent={JUSTIFY_FLEX_END}
-          paddingRight={SPACING.spacing16}
-          paddingBottom={SPACING.spacing16}
+  return !seen ? (
+    <Portal>
+      <Modal onCloseClick={setSeen} heading={TITLE} alertOverlay>
+        <AnalyticsToggle />
+        <OutlineButton
+          onClick={setSeen}
+          float="right"
+          margin={SPACING.spacing12}
         >
-          <PrimaryButton onClick={handleClick}>
-            <StyledText as="p">{t('agree')}</StyledText>
-          </PrimaryButton>
-        </Flex>
-      }
-    >
-      <Flex flexDirection={DIRECTION_COLUMN}>
-        <Flex gridGap={SPACING.spacing10} flexDirection={DIRECTION_COLUMN}>
-          <Flex gridGap={SPACING.spacing10} flexDirection={DIRECTION_COLUMN}>
-            <Trans
-              t={t}
-              i18nKey="privacy_body"
-              components={{ block: <StyledText as="p" /> }}
-            />
-          </Flex>
-          <ExternalLink href={PRIVACY_POLICY_LINK}>
-            {t('opentrons_privacy_policy')}
-          </ExternalLink>
-        </Flex>
-      </Flex>
-    </LegacyModal>
+          {CONTINUE}
+        </OutlineButton>
+      </Modal>
+    </Portal>
   ) : null
 }