feat(app): refactor analytics settings modal

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

@@ -1,7 +1,9 @@
 {
   "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",
@@ -47,6 +49,8 @@
   "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/index.tsx

@@ -1,38 +1,72 @@
 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 { Modal, OutlineButton, SPACING } from '@opentrons/components'
-import { AnalyticsToggle } from './AnalyticsToggle'
-import { Portal } from '../../App/portal'
+import { ExternalLink } from '../../atoms/Link/ExternalLink'
+import { LegacyModal } from '../../molecules/LegacyModal'
+import { StyledText } from '../../atoms/text'
 import type { Dispatch } from '../../redux/types'
 
-// TODO(bc, 2021-02-04): i18n
-const TITLE = 'Privacy Settings'
-const CONTINUE = 'continue'
+const PRIVACY_POLICY_LINK = 'https://opentrons.com/privacy-policy'
 
 // 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 setSeen = (): unknown => dispatch(setAnalyticsOptInSeen())
+  const hasOptedIn = useSelector(getAnalyticsOptedIn)
+
+  const handleClick = (): void => {
+    dispatch(setAnalyticsOptInSeen())
+    dispatch(toggleAnalyticsOptedIn())
+  }
 
-  return !seen ? (
-    <Portal>
-      <Modal onCloseClick={setSeen} heading={TITLE} alertOverlay>
-        <AnalyticsToggle />
-        <OutlineButton
-          onClick={setSeen}
-          float="right"
-          margin={SPACING.spacing12}
+  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}
         >
-          {CONTINUE}
-        </OutlineButton>
-      </Modal>
-    </Portal>
+          <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={t('privacy_body')}
+              components={{ block: <StyledText as="p" /> }}
+            />
+          </Flex>
+          <ExternalLink href={PRIVACY_POLICY_LINK}>
+            {t('opentrons_privacy_policy')}
+          </ExternalLink>
+        </Flex>
+      </Flex>
+    </LegacyModal>
   ) : null
 }