Merge pull request #846 from NastiaS/learn-more-need-help

Learn more need help

src/components/FeesField/BitcoinKind.js

@@ -125,7 +125,7 @@ class FeesField extends Component<Props & { fees?: Fees, error?: Error }, State>
     const satoshi = units[units.length - 1]
 
     return (
-      <GenericContainer error={error} help={t('app:send.steps.amount.unitPerByte')}>
+      <GenericContainer error={error}>
         <Select width={156} options={items} value={selectedItem} onChange={this.onSelectChange} />
         <InputCurrency
           ref={this.input}

src/components/FeesField/EthereumKind.js

@@ -32,7 +32,7 @@ class FeesField extends Component<Props & { fees?: Fees, error?: Error }, *> {
     const { account, gasPrice, error, onChange } = this.props
     const { units } = account.currency
     return (
-      <GenericContainer error={error} help="Gas">
+      <GenericContainer error={error}>
         <InputCurrency
           defaultUnit={units.length > 1 ? units[1] : units[0]}
           units={units}

src/components/FeesField/GenericContainer.js

@@ -3,20 +3,19 @@
 import React from 'react'
 
 import Box from 'components/base/Box'
-import Label from 'components/base/Label'
-import LabelInfoTooltip from 'components/base/LabelInfoTooltip'
+import LabelWithExternalIcon from 'components/base/LabelWithExternalIcon'
 import { translate } from 'react-i18next'
+import { openURL } from 'helpers/linking'
+import { urls } from 'config/support'
 
-export default translate()(
-  ({ help, children, t }: { help: string, children: React$Node, t: * }) => (
-    <Box flow={1}>
-      <Label>
-        <span>{t('app:send.steps.amount.fees')}</span>
-        {help ? <LabelInfoTooltip ml={1} text={help} /> : null}
-      </Label>
-      <Box horizontal flow={5}>
-        {children}
-      </Box>
+export default translate()(({ children, t }: { children: React$Node, t: * }) => (
+  <Box flow={1}>
+    <LabelWithExternalIcon
+      onClick={() => openURL(urls.feesMoreInfo)}
+      label={t('app:send.steps.amount.fees')}
+    />
+    <Box horizontal flow={5}>
+      {children}
     </Box>
-  ),
-)
+  </Box>
+))

src/components/ManagerPage/Dashboard.js

@@ -1,13 +1,16 @@
 // @flow
 import React from 'react'
 import { translate } from 'react-i18next'
+import styled from 'styled-components'
 
 import type { T, Device } from 'types/common'
 import type { DeviceInfo } from 'helpers/devices/getDeviceInfo'
 
 import Box from 'components/base/Box'
 import Text from 'components/base/Text'
+import IconExternalLink from 'icons/ExternalLink'
 import TrackPage from 'analytics/TrackPage'
+import FakeLink from 'components/base/FakeLink'
 
 import AppsList from './AppsList'
 import FirmwareUpdate from './FirmwareUpdate'
@@ -16,18 +19,27 @@ type Props = {
   t: T,
   device: Device,
   deviceInfo: DeviceInfo,
+  handleHelpRequest: () => void,
 }
 
-const Dashboard = ({ device, deviceInfo, t }: Props) => (
+const Dashboard = ({ device, deviceInfo, t, handleHelpRequest }: Props) => (
   <Box flow={4} pb={8}>
     <TrackPage category="Manager" name="Dashboard" />
     <Box>
       <Text ff="Museo Sans|Regular" fontSize={7} color="dark">
         {t('app:manager.title')}
       </Text>
-      <Text ff="Museo Sans|Light" fontSize={5}>
-        {t('app:manager.subtitle')}
-      </Text>
+      <Box horizontal>
+        <Text ff="Museo Sans|Light" fontSize={5}>
+          {t('app:manager.subtitle')}
+        </Text>
+        <ContainerToHover>
+          <FakeLink mr={1} underline color="grey" fontSize={4} onClick={handleHelpRequest}>
+            {t('app:common.needHelp')}
+          </FakeLink>
+          <IconExternalLink size={14} />
+        </ContainerToHover>
+      </Box>
     </Box>
     <Box mt={5}>
       <FirmwareUpdate deviceInfo={deviceInfo} device={device} />
@@ -41,3 +53,13 @@ const Dashboard = ({ device, deviceInfo, t }: Props) => (
 )
 
 export default translate()(Dashboard)
+
+const ContainerToHover = styled(Box).attrs({
+  align: 'center',
+  ml: 'auto',
+  horizontal: true,
+})`
+  ${FakeLink}:hover, &:hover {
+    color: ${p => p.theme.colors.wallet};
+  }
+`

src/components/ManagerPage/index.js

@@ -2,6 +2,8 @@
 
 import React, { PureComponent } from 'react'
 import invariant from 'invariant'
+import { openURL } from 'helpers/linking'
+import { urls } from 'config/support'
 
 import type { Device } from 'types/common'
 import type { DeviceInfo } from 'helpers/devices/getDeviceInfo'
@@ -30,6 +32,10 @@ class ManagerPage extends PureComponent<Props, State> {
     this.setState({ isGenuine: true, device, deviceInfo })
   }
 
+  handleHelpRequest = () => {
+    openURL(urls.managerHelpRequest)
+  }
+
   render() {
     const { isGenuine, device, deviceInfo } = this.state
 
@@ -40,7 +46,13 @@ class ManagerPage extends PureComponent<Props, State> {
     invariant(device, 'Inexistant device considered genuine')
     invariant(deviceInfo, 'Inexistant device infos for genuine device')
 
-    return <Dashboard device={device} deviceInfo={deviceInfo} />
+    return (
+      <Dashboard
+        device={device}
+        deviceInfo={deviceInfo}
+        handleHelpRequest={this.handleHelpRequest}
+      />
+    )
   }
 }
 

src/components/base/LabelWithExternalIcon.js

@@ -0,0 +1,29 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+
+import Label from 'components/base/Label'
+import Box from 'components/base/Box'
+import IconExternalLink from 'icons/ExternalLink'
+
+// can add more dynamic options if needed
+export function LabelWithExternalIcon({ onClick, label }: { onClick: () => void, label: string }) {
+  return (
+    <LabelWrapper onClick={onClick}>
+      <span>{label}</span>
+      <Box ml={1}>
+        <IconExternalLink size={12} />
+      </Box>
+    </LabelWrapper>
+  )
+}
+
+export default LabelWithExternalIcon
+
+const LabelWrapper = styled(Label).attrs({})`
+  &:hover {
+    color: ${p => p.theme.colors.wallet};
+    cursor: pointer;
+  }
+`

src/components/modals/Send/fields/RecipientField.js

@@ -3,9 +3,10 @@ import React, { Component } from 'react'
 import type { Account } from '@ledgerhq/live-common/lib/types'
 import type { T } from 'types/common'
 import type { WalletBridge } from 'bridge/types'
+import { openURL } from 'helpers/linking'
+import { urls } from 'config/support'
 import Box from 'components/base/Box'
-import Label from 'components/base/Label'
-import LabelInfoTooltip from 'components/base/LabelInfoTooltip'
+import LabelWithExternalIcon from 'components/base/LabelWithExternalIcon'
 import RecipientAddress from 'components/RecipientAddress'
 
 type Props<Transaction> = {
@@ -60,16 +61,19 @@ class RecipientField<Transaction> extends Component<Props<Transaction>, { isVali
     return true
   }
 
+  handleRecipientAddressHelp = () => {
+    openURL(urls.recipientAddressInfo)
+  }
   render() {
     const { bridge, account, transaction, t, autoFocus } = this.props
     const { isValid } = this.state
     const value = bridge.getTransactionRecipient(account, transaction)
     return (
       <Box flow={1}>
-        <Label>
-          <span>{t('app:send.steps.amount.recipientAddress')}</span>
-          <LabelInfoTooltip ml={1} text={t('app:send.steps.amount.recipientAddress')} />
-        </Label>
+        <LabelWithExternalIcon
+          onClick={this.handleRecipientAddressHelp}
+          label={t('app:send.steps.amount.recipientAddress')}
+        />
         <RecipientAddress
           autoFocus={autoFocus}
           withQrCode

src/config/support.js

@@ -9,7 +9,9 @@ export const urls = {
   noDeviceBuyNew: 'https://www.ledgerwallet.com/',
   noDeviceTrackOrder: 'https://order.ledgerwallet.com/',
   noDeviceLearnMore: 'https://www.ledgerwallet.com/',
+  managerHelpRequest: 'https://support.ledgerwallet.com/hc/en-us/articles/360006523674 ',
   genuineCheckContactSupport:
     'https://support.ledgerwallet.com/hc/en-us/requests/new?ticket_form_id=248165',
-  // feesMoreInfo: 'https://www.ledgerwallet.com/',
+  feesMoreInfo: 'https://support.ledgerwallet.com/hc/en-us/articles/360006535873',
+  recipientAddressInfo: 'https://support.ledgerwallet.com/hc/en-us/articles/360006433934',
 }

static/i18n/en/app.yml

@@ -9,6 +9,7 @@ common:
   continue: Continue
   learnMore: Learn More
   skipThisStep: Skip this step
+  needHelp: Need help?
   chooseWalletPlaceholder: Choose a wallet...
   currency: Currency
   selectAccount: Select an account