From 44bbb1ff63ea0d0ef167c21cef35fc44fbc09b7b Mon Sep 17 00:00:00 2001
From: Anastasia Poupeney <anastasiasergienko@gmail.com>
Date: Tue, 24 Jul 2018 18:19:32 +0200
Subject: [PATCH] add account error step in modal single commit

---
 .../GenuineCheck/GenuineCheckErrorPage.js     | 14 ++--
 .../Onboarding/steps/GenuineCheck/index.js    |  7 --
 src/components/RenderError.js                 | 14 ++--
 src/components/base/ExternalLinkButton.js     | 16 +++++
 src/components/base/RetryButton.js            | 21 ++++++
 .../AddAccounts/steps/03-step-import.js       | 67 ++++++++++++-------
 .../AddAccounts/steps/04-step-finish.js       |  7 +-
 src/components/modals/Receive/index.js        |  8 +--
 .../Receive/steps/03-step-confirm-address.js  | 19 +++---
 .../modals/Send/steps/04-step-confirmation.js |  7 +-
 static/i18n/en/app.json                       |  1 +
 11 files changed, 112 insertions(+), 69 deletions(-)
 create mode 100644 src/components/base/ExternalLinkButton.js
 create mode 100644 src/components/base/RetryButton.js

diff --git a/src/components/Onboarding/steps/GenuineCheck/GenuineCheckErrorPage.js b/src/components/Onboarding/steps/GenuineCheck/GenuineCheckErrorPage.js
index 34e9c2ec..c9f0a5ec 100644
--- a/src/components/Onboarding/steps/GenuineCheck/GenuineCheckErrorPage.js
+++ b/src/components/Onboarding/steps/GenuineCheck/GenuineCheckErrorPage.js
@@ -5,9 +5,11 @@ import { i } from 'helpers/staticPath'
 
 import type { T } from 'types/common'
 import type { OnboardingState } from 'reducers/onboarding'
+import { urls } from 'config/urls'
 
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
+import ExternalLinkButton from 'components/base/ExternalLinkButton'
 import TrackPage from 'analytics/TrackPage'
 
 import { Title, Description, OnboardingFooterWrapper } from '../../helperComponents'
@@ -15,7 +17,6 @@ import { Title, Description, OnboardingFooterWrapper } from '../../helperCompone
 type Props = {
   t: T,
   redoGenuineCheck: () => void,
-  contactSupport: () => void,
   onboarding: OnboardingState,
 }
 
@@ -69,7 +70,7 @@ class GenuineCheckErrorPage extends PureComponent<Props, *> {
   }
 
   render() {
-    const { redoGenuineCheck, contactSupport, t } = this.props
+    const { redoGenuineCheck, t } = this.props
     return (
       <Box sticky pt={50}>
         <Box grow alignItems="center" justifyContent="center">
@@ -79,9 +80,12 @@ class GenuineCheckErrorPage extends PureComponent<Props, *> {
           <Button outlineGrey onClick={() => redoGenuineCheck()}>
             {t('app:common.back')}
           </Button>
-          <Button danger onClick={() => contactSupport()} ml="auto">
-            {t('onboarding:genuineCheck.buttons.contactSupport')}
-          </Button>
+          <ExternalLinkButton
+            danger
+            ml="auto"
+            label={t('onboarding:genuineCheck.buttons.contactSupport')}
+            url={urls.contactSupport}
+          />
         </OnboardingFooterWrapper>
       </Box>
     )
diff --git a/src/components/Onboarding/steps/GenuineCheck/index.js b/src/components/Onboarding/steps/GenuineCheck/index.js
index 1214d6db..5be2b91b 100644
--- a/src/components/Onboarding/steps/GenuineCheck/index.js
+++ b/src/components/Onboarding/steps/GenuineCheck/index.js
@@ -1,11 +1,9 @@
 // @flow
 
 import React, { PureComponent } from 'react'
-import { openURL } from 'helpers/linking'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
 import { colors } from 'styles/theme'
-import { urls } from 'config/urls'
 
 import { updateGenuineCheck } from 'reducers/onboarding'
 
@@ -143,10 +141,6 @@ class GenuineCheck extends PureComponent<StepProps, State> {
     })
   }
 
-  contactSupport = () => {
-    openURL(urls.contactSupport)
-  }
-
   handlePrevStep = () => {
     const { prevStep, onboarding, jumpStep } = this.props
     onboarding.flowType === 'initializedDevice' ? jumpStep('selectDevice') : prevStep()
@@ -158,7 +152,6 @@ class GenuineCheck extends PureComponent<StepProps, State> {
   renderGenuineFail = () => (
     <GenuineCheckErrorPage
       redoGenuineCheck={this.redoGenuineCheck}
-      contactSupport={this.contactSupport}
       t={this.props.t}
       onboarding={this.props.onboarding}
     />
diff --git a/src/components/RenderError.js b/src/components/RenderError.js
index a29c1e7d..ac591aa3 100644
--- a/src/components/RenderError.js
+++ b/src/components/RenderError.js
@@ -17,6 +17,7 @@ import Box from 'components/base/Box'
 import Space from 'components/base/Space'
 import Button from 'components/base/Button'
 import ConfirmModal from 'components/base/Modal/ConfirmModal'
+import ExternalLinkButton from 'components/base/ExternalLinkButton'
 import IconTriangleWarning from 'icons/TriangleWarning'
 
 // SERIOUSLY plz refactor to use <ResetButton>
@@ -51,10 +52,6 @@ class RenderError extends PureComponent<
     openURL(urls.githubIssues)
   }
 
-  contact = () => {
-    openURL(urls.contactSupport)
-  }
-
   handleRestart = () => {
     remote.getCurrentWindow().webContents.reloadIgnoringCache()
   }
@@ -96,9 +93,12 @@ class RenderError extends PureComponent<
             {t('app:crash.restart')}
           </Button>
           <ExportLogsBtn withoutAppData={withoutAppData} />
-          <Button small primary onClick={this.contact}>
-            {t('app:crash.support')}
-          </Button>
+          <ExternalLinkButton
+            small
+            primary
+            label={t('app:crash.support')}
+            url={urls.contactSupport}
+          />
           <Button small primary onClick={this.github}>
             {t('app:crash.github')}
           </Button>
diff --git a/src/components/base/ExternalLinkButton.js b/src/components/base/ExternalLinkButton.js
new file mode 100644
index 00000000..fffac7b9
--- /dev/null
+++ b/src/components/base/ExternalLinkButton.js
@@ -0,0 +1,16 @@
+// @flow
+
+import React from 'react'
+import { openURL } from 'helpers/linking'
+
+import Button from 'components/base/Button'
+
+export function ExternalLinkButton({ label, url, ...props }: { label: string, url: string }) {
+  return (
+    <Button onClick={() => openURL(url)} {...props}>
+      {label}
+    </Button>
+  )
+}
+
+export default ExternalLinkButton
diff --git a/src/components/base/RetryButton.js b/src/components/base/RetryButton.js
new file mode 100644
index 00000000..37ebf0a1
--- /dev/null
+++ b/src/components/base/RetryButton.js
@@ -0,0 +1,21 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+
+import Button from 'components/base/Button'
+import { translate } from 'react-i18next'
+
+import type { T } from 'types/common'
+
+type Props = {
+  t: T,
+}
+
+class RetryButton extends PureComponent<Props> {
+  render() {
+    const { t, ...props } = this.props
+    return <Button {...props}>{t('app:common.retry')}</Button>
+  }
+}
+
+export default translate()(RetryButton)
diff --git a/src/components/modals/AddAccounts/steps/03-step-import.js b/src/components/modals/AddAccounts/steps/03-step-import.js
index 4d87c137..9e673098 100644
--- a/src/components/modals/AddAccounts/steps/03-step-import.js
+++ b/src/components/modals/AddAccounts/steps/03-step-import.js
@@ -7,6 +7,9 @@ import { Trans } from 'react-i18next'
 import React, { PureComponent, Fragment } from 'react'
 import type { Account } from '@ledgerhq/live-common/lib/types'
 import uniq from 'lodash/uniq'
+import { urls } from 'config/urls'
+import ExternalLinkButton from 'components/base/ExternalLinkButton'
+import RetryButton from 'components/base/RetryButton'
 
 import { getBridgeForCurrency } from 'bridge'
 
@@ -33,6 +36,23 @@ const LoadingRow = styled(Box).attrs({
   height: 48px;
   border: 1px dashed ${p => p.theme.colors.grey};
 `
+const Title = styled(Box).attrs({
+  ff: 'Museo Sans',
+  fontSize: 5,
+  mt: 2,
+  color: 'black',
+})`
+  text-align: center;
+`
+
+const Desc = styled(Box).attrs({
+  ff: 'Open Sans',
+  fontSize: 4,
+  mt: 2,
+  color: 'graphite',
+})`
+  text-align: center;
+`
 
 class StepImport extends PureComponent<StepProps> {
   componentDidMount() {
@@ -167,21 +187,16 @@ class StepImport extends PureComponent<StepProps> {
     const { err } = this.props
     invariant(err, 'Trying to render inexisting error')
     return (
-      <Box
-        style={{ height: 200 }}
-        px={5}
-        textAlign="center"
-        align="center"
-        justify="center"
-        color="alertRed"
-      >
-        <IconExclamationCircleThin size={43} />
-        <Box mt={4}>
-          <TranslatedError error={err} field="title" />
+      <Box style={{ height: 200 }} px={5} justify="center">
+        <Box color="alertRed" align="center">
+          <IconExclamationCircleThin size={43} />
         </Box>
-        <Box mt={4}>
+        <Title>
+          <TranslatedError error={err} field="title" />
+        </Title>
+        <Desc>
           <TranslatedError error={err} field="description" />
-        </Box>
+        </Desc>
       </Box>
     )
   }
@@ -353,25 +368,25 @@ export const StepImportFooter = ({
     <Fragment>
       {currency && <CurrencyBadge mr="auto" currency={currency} />}
       {scanStatus === 'error' && (
-        <Button mr={2} onClick={() => setScanStatus('scanning')}>
-          {t('app:common.retry')}
-        </Button>
+        <Fragment>
+          <ExternalLinkButton mr={2} label={t('app:common.getSupport')} url={urls.faq} />
+          <RetryButton primary onClick={() => setScanStatus('scanning')} />
+        </Fragment>
       )}
       {scanStatus === 'scanning' && (
         <Button mr={2} onClick={() => setScanStatus('finished')}>
           {t('app:common.stop')}
         </Button>
       )}
-      <Button
-        primary
-        disabled={
-          (scanStatus !== 'finished' && scanStatus !== 'error') ||
-          !(willCreateAccount || willAddAccounts)
-        }
-        onClick={onClick}
-      >
-        {ctaWording}
-      </Button>
+      {scanStatus !== 'error' && (
+        <Button
+          primary
+          disabled={scanStatus !== 'finished' || !(willCreateAccount || willAddAccounts)}
+          onClick={onClick}
+        >
+          {ctaWording}
+        </Button>
+      )}
     </Fragment>
   )
 }
diff --git a/src/components/modals/AddAccounts/steps/04-step-finish.js b/src/components/modals/AddAccounts/steps/04-step-finish.js
index 6dfc7afc..6170af8e 100644
--- a/src/components/modals/AddAccounts/steps/04-step-finish.js
+++ b/src/components/modals/AddAccounts/steps/04-step-finish.js
@@ -50,13 +50,10 @@ function StepFinish({ currency, t, checkedAccountsIds }: StepProps) {
 
 export default StepFinish
 
-export const StepFinishFooter = ({ onCloseModal, onGoStep1, t }: StepProps) => (
+export const StepFinishFooter = ({ onGoStep1, t }: StepProps) => (
   <Fragment>
-    <Button mr={2} outline onClick={onGoStep1}>
+    <Button mr={2} primary onClick={onGoStep1}>
       {t('app:addAccounts.cta.addMore')}
     </Button>
-    <Button primary onClick={onCloseModal}>
-      {t('app:common.close')}
-    </Button>
   </Fragment>
 )
diff --git a/src/components/modals/Receive/index.js b/src/components/modals/Receive/index.js
index a025471e..f72aabbb 100644
--- a/src/components/modals/Receive/index.js
+++ b/src/components/modals/Receive/index.js
@@ -12,8 +12,6 @@ import Track from 'analytics/Track'
 import type { Account } from '@ledgerhq/live-common/lib/types'
 
 import { MODAL_RECEIVE } from 'config/constants'
-import { openURL } from 'helpers/linking'
-import { urls } from 'config/urls'
 import type { T, Device } from 'types/common'
 import type { StepProps as DefaultStepProps } from 'components/base/Stepper'
 
@@ -58,7 +56,6 @@ export type StepProps = DefaultStepProps & {
   onChangeAccount: (?Account) => void,
   onChangeAppOpened: boolean => void,
   onChangeAddressVerified: (?boolean, ?Error) => void,
-  contactUs: () => void,
 }
 
 const createSteps = ({ t }: { t: T }) => [
@@ -132,9 +129,7 @@ class ReceiveModal extends PureComponent<Props, State> {
       isAddressVerified: null,
       isAppOpened: false,
     })
-  handleContactUs = () => {
-    openURL(urls.contactSupport)
-  }
+
   handleReset = () => this.setState({ ...INITIAL_STATE })
 
   handleCloseModal = () => this.props.closeModal(MODAL_RECEIVE)
@@ -187,7 +182,6 @@ class ReceiveModal extends PureComponent<Props, State> {
       onChangeAccount: this.handleChangeAccount,
       onChangeAppOpened: this.handleChangeAppOpened,
       onChangeAddressVerified: this.handleChangeAddressVerified,
-      contactUs: this.handleContactUs,
     }
 
     const errorSteps = verifyAddressError
diff --git a/src/components/modals/Receive/steps/03-step-confirm-address.js b/src/components/modals/Receive/steps/03-step-confirm-address.js
index 832c00c5..2c8b516e 100644
--- a/src/components/modals/Receive/steps/03-step-confirm-address.js
+++ b/src/components/modals/Receive/steps/03-step-confirm-address.js
@@ -4,9 +4,12 @@ import styled from 'styled-components'
 import React, { Fragment, PureComponent } from 'react'
 
 import TrackPage from 'analytics/TrackPage'
+import { urls } from 'config/urls'
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
 import DeviceConfirm from 'components/DeviceConfirm'
+import ExternalLinkButton from 'components/base/ExternalLinkButton'
+import RetryButton from 'components/base/RetryButton'
 import type { StepProps } from '../index'
 import TranslatedError from '../../../TranslatedError'
 
@@ -45,14 +48,16 @@ export default class StepConfirmAddress extends PureComponent<StepProps> {
   }
 }
 
-export function StepConfirmAddressFooter({ t, transitionTo, onRetry, contactUs }: StepProps) {
+export function StepConfirmAddressFooter({ t, transitionTo, onRetry }: StepProps) {
   // This will be displayed only if user rejected address
   return (
     <Fragment>
-      <Button onClick={contactUs} event="Receive Flow Step 3 Contact Us Clicked">
-        {t('app:receive.steps.confirmAddress.support')}
-      </Button>
-      <Button
+      <ExternalLinkButton
+        event="Receive Flow Step 3 Contact Us Clicked"
+        label={t('app:receive.steps.confirmAddress.support')}
+        url={urls.contactSupport}
+      />
+      <RetryButton
         ml={2}
         primary
         event="Receive Flow Step 3 Retry Clicked"
@@ -60,9 +65,7 @@ export function StepConfirmAddressFooter({ t, transitionTo, onRetry, contactUs }
           onRetry()
           transitionTo('device')
         }}
-      >
-        {t('app:common.retry')}
-      </Button>
+      />
     </Fragment>
   )
 }
diff --git a/src/components/modals/Send/steps/04-step-confirmation.js b/src/components/modals/Send/steps/04-step-confirmation.js
index e14cd6f7..800fb9fb 100644
--- a/src/components/modals/Send/steps/04-step-confirmation.js
+++ b/src/components/modals/Send/steps/04-step-confirmation.js
@@ -11,6 +11,7 @@ import TrackPage from 'analytics/TrackPage'
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
 import Spinner from 'components/base/Spinner'
+import RetryButton from 'components/base/RetryButton'
 import TranslatedError from 'components/TranslatedError'
 import IconCheckCircle from 'icons/CheckCircle'
 import IconExclamationCircleThin from 'icons/ExclamationCircleThin'
@@ -106,16 +107,14 @@ export function StepConfirmationFooter({
           {t('app:send.steps.confirmation.success.cta')}
         </Button>
       ) : error ? (
-        <Button
+        <RetryButton
           ml={2}
           primary
           onClick={() => {
             onRetry()
             transitionTo('amount')
           }}
-        >
-          {t('app:common.retry')}
-        </Button>
+        />
       ) : null}
     </Fragment>
   )
diff --git a/static/i18n/en/app.json b/static/i18n/en/app.json
index a5164b1a..cbed0f97 100644
--- a/static/i18n/en/app.json
+++ b/static/i18n/en/app.json
@@ -5,6 +5,7 @@
     "apply": "Apply",
     "confirm": "Confirm",
     "cancel": "Cancel",
+    "getSupport": "Get Support",
     "delete": "Delete",
     "launch": "Launch",
     "continue": "Continue",