wip 2 modals for analytics details

src/components/Onboarding/index.js

@@ -96,6 +96,7 @@ export type StepProps = {
   savePassword: Function,
   getDeviceInfo: Function,
   updateGenuineCheck: Function,
+  openModal: string => void,
   isLedgerNano: Function,
   flowType: Function,
 }
@@ -145,6 +146,7 @@ class Onboarding extends PureComponent<Props> {
       onboarding,
       settings,
       updateGenuineCheck,
+      openModal,
       isLedgerNano,
       flowType,
       prevStep,

src/components/Onboarding/steps/Analytics.js

@@ -8,12 +8,17 @@ import Box from 'components/base/Box'
 import Switch from 'components/base/Switch'
 import TrackPage from 'analytics/TrackPage'
 import Track from 'analytics/Track'
+import { openModal } from 'reducers/modals'
+import { MODAL_REPORT_BUGS, MODAL_TECHNICAL_DATA } from 'config/constants'
+import ReportBugs from '../../modals/ReportBugs'
+import TechnicalData from '../../modals/TechnicalData'
+import FakeLink from '../../base/FakeLink'
 import { Title, Description, FixedTopContainer, StepContainerInner } from '../helperComponents'
 import OnboardingFooter from '../OnboardingFooter'
 
 import type { StepProps } from '..'
 
-const mapDispatchToProps = { saveSettings }
+const mapDispatchToProps = { saveSettings, openModal }
 
 type State = {
   analyticsToggle: boolean,
@@ -46,7 +51,12 @@ class Analytics extends PureComponent<StepProps, State> {
     savePassword(undefined)
     prevStep()
   }
-
+  handleBugsModal = () => {
+    this.props.openModal(MODAL_REPORT_BUGS)
+  }
+  handleTechnicalDataModal = () => {
+    this.props.openModal(MODAL_TECHNICAL_DATA)
+  }
   render() {
     const { nextStep, t, onboarding } = this.props
     const { analyticsToggle, sentryLogsToggle } = this.state
@@ -65,7 +75,19 @@ class Analytics extends PureComponent<StepProps, State> {
           <Box mt={5}>
             <Container>
               <Box>
-                <AnalyticsTitle>{t('onboarding:analytics.sentryLogs.title')}</AnalyticsTitle>
+                <Box horizontal mb={2}>
+                  <AnalyticsTitle>{t('onboarding:analytics.sentryLogs.title')}</AnalyticsTitle>
+                  <FakeLink
+                    style={{ textDecoration: 'underline' }}
+                    fontSize={3}
+                    color="smoke"
+                    ml={2}
+                    onClick={this.handleBugsModal}
+                  >
+                    {t('app:common.learnMore')}
+                  </FakeLink>
+                  <ReportBugs />
+                </Box>
                 <AnalyticsText>{t('onboarding:analytics.sentryLogs.desc')}</AnalyticsText>
               </Box>
               <Box justifyContent="center">
@@ -82,7 +104,19 @@ class Analytics extends PureComponent<StepProps, State> {
             </Container>
             <Container>
               <Box>
-                <AnalyticsTitle>{t('onboarding:analytics.shareAnalytics.title')}</AnalyticsTitle>
+                <Box horizontal mb={2}>
+                  <AnalyticsTitle>{t('onboarding:analytics.shareAnalytics.title')}</AnalyticsTitle>
+                  <FakeLink
+                    style={{ textDecoration: 'underline' }}
+                    fontSize={3}
+                    color="smoke"
+                    ml={2}
+                    onClick={this.handleTechnicalDataModal}
+                  >
+                    {t('app:common.learnMore')}
+                  </FakeLink>
+                </Box>
+                <TechnicalData />
                 <AnalyticsText>{t('onboarding:analytics.shareAnalytics.desc')}</AnalyticsText>
               </Box>
               <Box justifyContent="center">
@@ -129,9 +163,7 @@ export const AnalyticsTitle = styled(Box).attrs({
   ff: 'Open Sans|SemiBold',
   fontSize: 4,
   textAlign: 'left',
-})`
-  margin-bottom: 5px;
-`
+})``
 const Container = styled(Box).attrs({
   horizontal: true,
   p: 3,

src/components/modals/ReportBugs.js

@@ -0,0 +1,106 @@
+// @flow
+import React, { PureComponent } from 'react'
+import { translate } from 'react-i18next'
+import styled from 'styled-components'
+
+import { MODAL_REPORT_BUGS } from 'config/constants'
+import Modal, { ModalBody, ModalTitle, ModalContent, ModalFooter } from 'components/base/Modal'
+
+import Button from 'components/base/Button'
+import Box from 'components/base/Box'
+import Text from 'components/base/Text'
+
+import type { T } from 'types/common'
+
+const Title = styled(Text).attrs({
+  ff: 'Museo Sans',
+  fontSize: 5,
+  color: 'dark',
+})``
+
+type Props = {
+  t: T,
+}
+class ReportBugs extends PureComponent<Props, *> {
+  render() {
+    const { t } = this.props
+    const steps = [
+      {
+        key: 'item1',
+        desc: t('onboarding:analytics.sentryLogs.mandatoryContextual.item1'),
+      },
+      {
+        key: 'item2',
+        desc: t('onboarding:analytics.sentryLogs.mandatoryContextual.item2'),
+      },
+      {
+        key: 'item3',
+        desc: t('onboarding:analytics.sentryLogs.mandatoryContextual.item3'),
+      },
+      {
+        key: 'item4',
+        desc: t('onboarding:analytics.sentryLogs.mandatoryContextual.item4'),
+      },
+      {
+        key: 'item5',
+        desc: t('onboarding:analytics.sentryLogs.mandatoryContextual.item5'),
+      },
+      {
+        key: 'item6',
+        desc: t('onboarding:analytics.sentryLogs.mandatoryContextual.item6'),
+      },
+      {
+        key: 'item7',
+        desc: t('onboarding:analytics.sentryLogs.mandatoryContextual.item7'),
+      },
+      {
+        key: 'item8',
+        desc: t('onboarding:analytics.sentryLogs.mandatoryContextual.item8'),
+      },
+      {
+        key: 'item9',
+        desc: t('onboarding:analytics.sentryLogs.mandatoryContextual.item9'),
+      },
+      {
+        key: 'item10',
+        desc: t('onboarding:analytics.sentryLogs.mandatoryContextual.item10'),
+      },
+    ]
+    return (
+      <Modal
+        name={MODAL_REPORT_BUGS}
+        render={({ onClose }) => (
+          <ModalBody onClose={onClose}>
+            <ModalTitle>{t('onboarding:analytics.sentryLogs.title')}</ModalTitle>
+            <InlineDesc>{t('onboarding:analytics.sentryLogs.desc')}</InlineDesc>
+            <ModalContent mx={5}>
+              <Ul>{steps.map(step => <li key={step.key}>{step.desc}</li>)}</Ul>
+            </ModalContent>
+            <ModalFooter horizontal justifyContent="flex-end">
+              <Button onClick={onClose} primary>
+                Close
+              </Button>
+            </ModalFooter>
+          </ModalBody>
+        )}
+      />
+    )
+  }
+}
+
+export default translate()(ReportBugs)
+
+export const Ul = styled.ul.attrs({
+  ff: 'Open Sans|Regular',
+})`
+  margin-top: 15px;
+  font-size: 13px;
+  color: ${p => p.theme.colors.graphite};
+  line-height: 1.69;
+`
+export const InlineDesc = styled(Box).attrs({
+  ff: 'Open Sans|SemiBold',
+  fontSize: 4,
+  color: 'dark',
+  mx: '45px',
+})``

src/components/modals/TechnicalData.js

@@ -0,0 +1,100 @@
+// @flow
+import React, { PureComponent } from 'react'
+import { translate } from 'react-i18next'
+import ReactMarkdown from 'react-markdown'
+import styled from 'styled-components'
+import network from 'api/network'
+
+import { MODAL_TECHNICAL_DATA } from 'config/constants'
+import Modal, { ModalBody, ModalTitle, ModalContent, ModalFooter } from 'components/base/Modal'
+
+import Button from 'components/base/Button'
+import Box from 'components/base/Box'
+import GrowScroll from 'components/base/GrowScroll'
+import Text from 'components/base/Text'
+import Spinner from 'components/base/Spinner'
+import GradientBox from 'components/GradientBox'
+import IconChevronRight from 'icons/ChevronRight'
+import { OptionRow } from 'components/Onboarding/helperComponents'
+
+import type { T } from 'types/common'
+
+const Title = styled(Text).attrs({
+  ff: 'Museo Sans',
+  fontSize: 5,
+  color: 'dark',
+})``
+
+type Props = {
+  t: T,
+}
+
+class TechnicalData extends PureComponent<Props, *> {
+  render() {
+    const { t } = this.props
+
+    const steps = [
+      {
+        key: 'item1',
+        desc: t('onboarding:analytics.technicalData.mandatoryContextual.item1'),
+      },
+      {
+        key: 'item2',
+        desc: t('onboarding:analytics.technicalData.mandatoryContextual.item2'),
+      },
+      {
+        key: 'item3',
+        desc: t('onboarding:analytics.technicalData.mandatoryContextual.item3'),
+      },
+      {
+        key: 'item4',
+        desc: t('onboarding:analytics.technicalData.mandatoryContextual.item4'),
+      },
+      {
+        key: 'item5',
+        desc: t('onboarding:analytics.technicalData.mandatoryContextual.item5'),
+      },
+      {
+        key: 'item6',
+        desc: t('onboarding:analytics.technicalData.mandatoryContextual.item6'),
+      },
+    ]
+
+    return (
+      <Modal
+        name={MODAL_TECHNICAL_DATA}
+        render={({ onClose }) => (
+          <ModalBody onClose={onClose}>
+            <ModalTitle>{t('onboarding:analytics.technicalData.title')}</ModalTitle>
+            <InlineDesc>{t('onboarding:analytics.technicalData.desc')}</InlineDesc>
+            <ModalContent mx={5}>
+              <Ul>{steps.map(step => <li key={step.key}>{step.desc}</li>)}</Ul>
+            </ModalContent>
+            <ModalFooter horizontal justifyContent="flex-end">
+              <Button onClick={onClose} primary>
+                Close
+              </Button>
+            </ModalFooter>
+          </ModalBody>
+        )}
+      />
+    )
+  }
+}
+
+export default translate()(TechnicalData)
+
+export const Ul = styled.ul.attrs({
+  ff: 'Open Sans|Regular',
+})`
+  margin-top: 15px;
+  font-size: 13px;
+  color: ${p => p.theme.colors.graphite};
+  line-height: 1.69;
+`
+export const InlineDesc = styled(Box).attrs({
+  ff: 'Open Sans|SemiBold',
+  fontSize: 4,
+  color: 'dark',
+  mx: '45px',
+})``

src/config/constants.js

@@ -96,6 +96,8 @@ export const MODAL_RECEIVE = 'MODAL_RECEIVE'
 export const MODAL_SEND = 'MODAL_SEND'
 export const MODAL_SETTINGS_ACCOUNT = 'MODAL_SETTINGS_ACCOUNT'
 export const MODAL_RELEASES_NOTES = 'MODAL_RELEASES_NOTES'
+export const MODAL_REPORT_BUGS = 'MODAL_REPORT_BUGS'
+export const MODAL_TECHNICAL_DATA = 'MODAL_TECHNICAL_DATA'
 
 export const MODAL_DISCLAIMER = 'MODAL_DISCLAIMER'
 export const MODAL_DISCLAIMER_DELAY = 1 * 1000

src/reducers/onboarding.js

@@ -32,7 +32,7 @@ export type OnboardingState = {
 
 const state: OnboardingState = {
   stepIndex: 0, // FIXME is this used at all? dup with stepName?
-  stepName: SKIP_ONBOARDING ? 'analytics' : 'start',
+  stepName: 'analytics',
   genuine: {
     pinStepPass: false,
     recoveryStepPass: false,

static/i18n/en/app.yml

@@ -7,6 +7,7 @@ common:
   cancel: Cancel
   delete: Delete
   continue: Continue
+  learnMore: Learn More
   skipThisStep: Skip this step
   chooseWalletPlaceholder: Choose a wallet...
   currency: Currency

static/i18n/en/onboarding.yml

@@ -134,9 +134,27 @@ analytics:
   sentryLogs:
     title: Report bugs
     desc: Automatically send reports to help Ledger fix bugs
-  # mandatoryContextual:
-    # title: Technical data
-    # desc: Ledger will automatically collect technical information to help improve user experience. This information is fully anonymized.
+    mandatoryContextual:
+      item1: Page visits
+      item2: Actions (send, receive, logout)
+      item3: Clicks
+      item4: Redirections to webpages
+      item5: Scrolled to end of page
+      item6: Install/Uninstall
+      item7: Number of accounts, currencies and operations
+      item8: Overall and page session duration
+      item9: Device product ID
+      item10: Device firmware and app versions
+  technicalData:
+     title: Report bugs
+     desc: Automatically send reports to help Ledger fix bugs
+     mandatoryContextual:
+       item1: Active unique users
+       item2: OS name
+       item3: OS versions
+       item4: Ledger Live application version
+       item5: App Language/Region
+       item6: OS Language/Region
 finish:
   title: Your device is ready!
   desc: Proceed to your portfolio and start adding your accounts...