analytics page onboarding 2 modals for additional reqs

src/components/Onboarding/index.js

@@ -96,7 +96,7 @@ export type StepProps = {
   savePassword: Function,
   getDeviceInfo: Function,
   updateGenuineCheck: Function,
-  openModal: string => void,
+  openModal: Function,
   isLedgerNano: Function,
   flowType: Function,
 }

src/components/Onboarding/steps/Analytics.js

@@ -9,8 +9,8 @@ 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 { MODAL_SHARE_ANALYTICS, MODAL_TECHNICAL_DATA } from 'config/constants'
+import ShareAnalytics from '../../modals/ShareAnalytics'
 import TechnicalData from '../../modals/TechnicalData'
 import FakeLink from '../../base/FakeLink'
 import { Title, Description, FixedTopContainer, StepContainerInner } from '../helperComponents'
@@ -51,8 +51,8 @@ class Analytics extends PureComponent<StepProps, State> {
     savePassword(undefined)
     prevStep()
   }
-  handleBugsModal = () => {
-    this.props.openModal(MODAL_REPORT_BUGS)
+  handleShareAnalyticsModal = () => {
+    this.props.openModal(MODAL_SHARE_ANALYTICS)
   }
   handleTechnicalDataModal = () => {
     this.props.openModal(MODAL_TECHNICAL_DATA)
@@ -75,18 +75,8 @@ class Analytics extends PureComponent<StepProps, State> {
           <Box mt={5}>
             <Container>
               <Box>
-                <Box horizontal mb={2}>
+                <Box mb={1}>
                   <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>
@@ -104,19 +94,19 @@ class Analytics extends PureComponent<StepProps, State> {
             </Container>
             <Container>
               <Box>
-                <Box horizontal mb={2}>
+                <Box horizontal mb={1}>
                   <AnalyticsTitle>{t('onboarding:analytics.shareAnalytics.title')}</AnalyticsTitle>
                   <FakeLink
                     style={{ textDecoration: 'underline' }}
                     fontSize={3}
                     color="smoke"
                     ml={2}
-                    onClick={this.handleTechnicalDataModal}
+                    onClick={this.handleShareAnalyticsModal}
                   >
                     {t('app:common.learnMore')}
                   </FakeLink>
+                  <ShareAnalytics />
                 </Box>
-                <TechnicalData />
                 <AnalyticsText>{t('onboarding:analytics.shareAnalytics.desc')}</AnalyticsText>
               </Box>
               <Box justifyContent="center">
@@ -131,6 +121,30 @@ class Analytics extends PureComponent<StepProps, State> {
                 <Switch isChecked={analyticsToggle} onChange={this.handleAnalyticsToggle} />
               </Box>
             </Container>
+            <Container>
+              <Box>
+                <Box horizontal mb={1}>
+                  <AnalyticsTitle>{t('onboarding:analytics.technicalData.title')}</AnalyticsTitle>
+                  <FakeLink
+                    underline
+                    fontSize={3}
+                    color="smoke"
+                    ml={2}
+                    onClick={this.handleTechnicalDataModal}
+                  >
+                    {t('app:common.learnMore')}
+                  </FakeLink>
+                </Box>
+                <TechnicalData />
+                <AnalyticsText>{t('onboarding:analytics.technicalData.desc')}</AnalyticsText>
+                <MandatoryText>
+                  {t('onboarding:analytics.technicalData.mandatoryText')}
+                </MandatoryText>
+              </Box>
+              <Box justifyContent="center">
+                <Switch disabled isChecked />
+              </Box>
+            </Container>
           </Box>
         </StepContainerInner>
         <OnboardingFooter
@@ -151,6 +165,13 @@ export default connect(
   mapDispatchToProps,
 )(Analytics)
 
+const MandatoryText = styled(Box).attrs({
+  ff: 'Open Sans|Regular',
+  fontSize: 2,
+  textAlign: 'left',
+  color: 'grey',
+  mt: 1,
+})``
 export const AnalyticsText = styled(Box).attrs({
   ff: 'Open Sans|Regular',
   fontSize: 3,

src/components/base/Switch/index.js

@@ -15,8 +15,9 @@ const Base = styled(Tabbable).attrs({
   width: 50px;
   height: 26px;
   border-radius: 13px;
+  opacity: ${p => (p.disabled ? 0.3 : 1)};
   transition: 250ms linear background-color;
-  cursor: pointer;
+  cursor: ${p => (p.disabled ? 'cursor' : 'pointer')};
   &:focus {
     outline: none;
   }

src/components/modals/ReportBugs.js → src/components/modals/ShareAnalytics.js

@@ -3,82 +3,75 @@ import React, { PureComponent } from 'react'
 import { translate } from 'react-i18next'
 import styled from 'styled-components'
 
-import { MODAL_REPORT_BUGS } from 'config/constants'
+import { MODAL_SHARE_ANALYTICS } 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, *> {
+class ShareAnalytics extends PureComponent<Props, *> {
   render() {
     const { t } = this.props
-    const steps = [
+    const items = [
       {
         key: 'item1',
-        desc: t('onboarding:analytics.sentryLogs.mandatoryContextual.item1'),
+        desc: t('onboarding:analytics.shareAnalytics.mandatoryContextual.item1'),
       },
       {
         key: 'item2',
-        desc: t('onboarding:analytics.sentryLogs.mandatoryContextual.item2'),
+        desc: t('onboarding:analytics.shareAnalytics.mandatoryContextual.item2'),
       },
       {
         key: 'item3',
-        desc: t('onboarding:analytics.sentryLogs.mandatoryContextual.item3'),
+        desc: t('onboarding:analytics.shareAnalytics.mandatoryContextual.item3'),
       },
       {
         key: 'item4',
-        desc: t('onboarding:analytics.sentryLogs.mandatoryContextual.item4'),
+        desc: t('onboarding:analytics.shareAnalytics.mandatoryContextual.item4'),
       },
       {
         key: 'item5',
-        desc: t('onboarding:analytics.sentryLogs.mandatoryContextual.item5'),
+        desc: t('onboarding:analytics.shareAnalytics.mandatoryContextual.item5'),
       },
       {
         key: 'item6',
-        desc: t('onboarding:analytics.sentryLogs.mandatoryContextual.item6'),
+        desc: t('onboarding:analytics.shareAnalytics.mandatoryContextual.item6'),
       },
       {
         key: 'item7',
-        desc: t('onboarding:analytics.sentryLogs.mandatoryContextual.item7'),
+        desc: t('onboarding:analytics.shareAnalytics.mandatoryContextual.item7'),
       },
       {
         key: 'item8',
-        desc: t('onboarding:analytics.sentryLogs.mandatoryContextual.item8'),
+        desc: t('onboarding:analytics.shareAnalytics.mandatoryContextual.item8'),
       },
       {
         key: 'item9',
-        desc: t('onboarding:analytics.sentryLogs.mandatoryContextual.item9'),
+        desc: t('onboarding:analytics.shareAnalytics.mandatoryContextual.item9'),
       },
       {
         key: 'item10',
-        desc: t('onboarding:analytics.sentryLogs.mandatoryContextual.item10'),
+        desc: t('onboarding:analytics.shareAnalytics.mandatoryContextual.item10'),
       },
     ]
     return (
       <Modal
-        name={MODAL_REPORT_BUGS}
+        name={MODAL_SHARE_ANALYTICS}
         render={({ onClose }) => (
           <ModalBody onClose={onClose}>
-            <ModalTitle>{t('onboarding:analytics.sentryLogs.title')}</ModalTitle>
-            <InlineDesc>{t('onboarding:analytics.sentryLogs.desc')}</InlineDesc>
+            <ModalTitle>{t('onboarding:analytics.shareAnalytics.title')}</ModalTitle>
+            <InlineDesc>{t('onboarding:analytics.shareAnalytics.desc')}</InlineDesc>
             <ModalContent mx={5}>
-              <Ul>{steps.map(step => <li key={step.key}>{step.desc}</li>)}</Ul>
+              <Ul>{items.map(item => <li key={item.key}>{item.desc}</li>)}</Ul>
             </ModalContent>
             <ModalFooter horizontal justifyContent="flex-end">
               <Button onClick={onClose} primary>
-                Close
+                {t('app:common.close')}
               </Button>
             </ModalFooter>
           </ModalBody>
@@ -88,7 +81,7 @@ class ReportBugs extends PureComponent<Props, *> {
   }
 }
 
-export default translate()(ReportBugs)
+export default translate()(ShareAnalytics)
 
 export const Ul = styled.ul.attrs({
   ff: 'Open Sans|Regular',

src/components/modals/TechnicalData.js

@@ -1,29 +1,13 @@
 // @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',
-})``
+import { Ul, InlineDesc } from './ShareAnalytics'
 
 type Props = {
   t: T,
@@ -33,7 +17,7 @@ class TechnicalData extends PureComponent<Props, *> {
   render() {
     const { t } = this.props
 
-    const steps = [
+    const items = [
       {
         key: 'item1',
         desc: t('onboarding:analytics.technicalData.mandatoryContextual.item1'),
@@ -65,14 +49,16 @@ class TechnicalData extends PureComponent<Props, *> {
         name={MODAL_TECHNICAL_DATA}
         render={({ onClose }) => (
           <ModalBody onClose={onClose}>
-            <ModalTitle>{t('onboarding:analytics.technicalData.title')}</ModalTitle>
+            <ModalTitle>
+              {t('onboarding:analytics.technicalData.mandatoryContextual.title')}
+            </ModalTitle>
             <InlineDesc>{t('onboarding:analytics.technicalData.desc')}</InlineDesc>
             <ModalContent mx={5}>
-              <Ul>{steps.map(step => <li key={step.key}>{step.desc}</li>)}</Ul>
+              <Ul>{items.map(item => <li key={item.key}>{item.desc}</li>)}</Ul>
             </ModalContent>
             <ModalFooter horizontal justifyContent="flex-end">
               <Button onClick={onClose} primary>
-                Close
+                {t('app:common.close')}
               </Button>
             </ModalFooter>
           </ModalBody>
@@ -83,18 +69,3 @@ class TechnicalData extends PureComponent<Props, *> {
 }
 
 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,7 +96,7 @@ 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_SHARE_ANALYTICS = 'MODAL_SHARE_ANALYTICS'
 export const MODAL_TECHNICAL_DATA = 'MODAL_TECHNICAL_DATA'
 
 export const MODAL_DISCLAIMER = 'MODAL_DISCLAIMER'

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: 'analytics',
+  stepName: SKIP_ONBOARDING ? 'analytics' : 'start',
   genuine: {
     pinStepPass: false,
     recoveryStepPass: false,

static/i18n/en/onboarding.yml

@@ -131,9 +131,6 @@ analytics:
   shareAnalytics:
     title: Share usage data
     desc: Enable analytics of anonymous data to help Ledger improve the user experience. This includes the operating system, language, firmware versions and the number of added accounts.
-  sentryLogs:
-    title: Report bugs
-    desc: Automatically send reports to help Ledger fix bugs
     mandatoryContextual:
       item1: Page visits
       item2: Actions (send, receive, logout)
@@ -145,10 +142,15 @@ analytics:
       item8: Overall and page session duration
       item9: Device product ID
       item10: Device firmware and app versions
+  sentryLogs:
+    title: Report bugs
+    desc: Automatically send reports to help Ledger fix bugs
   technicalData:
-     title: Report bugs
-     desc: Automatically send reports to help Ledger fix bugs
+     title: Technical data *
+     desc: Ledger will automatically collect technical information to help improve user experience. This information is fully anonymized.
+     mandatoryText: '* mandatory'
      mandatoryContextual:
+       title: Technical data
        item1: Active unique users
        item2: OS name
        item3: OS versions