Merge pull request #859 from NastiaS/integrate-analytics-receive-flow

Integrate analytics receive flow

src/components/modals/Receive/index.js

@@ -12,6 +12,8 @@ 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/support'
 import type { T, Device } from 'types/common'
 import type { StepProps as DefaultStepProps } from 'components/base/Stepper'
 
@@ -56,6 +58,7 @@ export type StepProps = DefaultStepProps & {
   onChangeAccount: (?Account) => void,
   onChangeAppOpened: boolean => void,
   onChangeAddressVerified: (?boolean, ?Error) => void,
+  contactUs: () => void,
 }
 
 const createSteps = ({ t }: { t: T }) => [
@@ -129,7 +132,9 @@ class ReceiveModal extends PureComponent<Props, State> {
       isAddressVerified: null,
       isAppOpened: false,
     })
-
+  handleContactUs = () => {
+    openURL(urls.receiveFlowContactSupport)
+  }
   handleReset = () => this.setState({ ...INITIAL_STATE })
 
   handleCloseModal = () => this.props.closeModal(MODAL_RECEIVE)
@@ -182,6 +187,7 @@ class ReceiveModal extends PureComponent<Props, State> {
       onChangeAccount: this.handleChangeAccount,
       onChangeAppOpened: this.handleChangeAppOpened,
       onChangeAddressVerified: this.handleChangeAddressVerified,
+      contactUs: this.handleContactUs,
     }
 
     const errorSteps = verifyAddressError

src/components/modals/Receive/steps/01-step-account.js

@@ -13,7 +13,7 @@ import type { StepProps } from '../index'
 export default function StepAccount({ t, account, onChangeAccount }: StepProps) {
   return (
     <Box flow={1}>
-      <TrackPage category="Receive" name="Step1" />
+      <TrackPage category="Receive Flow" name="Step 1" />
       <Label>{t('app:receive.steps.chooseAccount.label')}</Label>
       <SelectAccount autoFocus onChange={onChangeAccount} value={account} />
     </Box>

src/components/modals/Receive/steps/02-step-connect-device.js

@@ -5,6 +5,7 @@ import React from 'react'
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
 import EnsureDeviceApp from 'components/EnsureDeviceApp'
+import TrackPage from 'analytics/TrackPage'
 
 import type { StepProps } from '../index'
 
@@ -26,7 +27,9 @@ export function StepConnectDeviceFooter({
 }: StepProps) {
   return (
     <Box horizontal flow={2}>
+      <TrackPage category="Receive Flow" name="Step 2" />
       <Button
+        event="Receive Flow Without Device Clicked"
         onClick={() => {
           onSkipConfirm()
           transitionTo('receive')

src/components/modals/Receive/steps/03-step-confirm-address.js

@@ -18,9 +18,10 @@ export default class StepConfirmAddress extends PureComponent<StepProps> {
     invariant(device, 'No device given')
     return (
       <Container>
-        <TrackPage category="Receive" name="Step3" />
+        <TrackPage category="Receive Flow" name="Step 3" />
         {isAddressVerified === false ? (
           <Fragment>
+            <TrackPage category="Receive Flow" name="Step 3 Address Not Verified Error" />
             <Title>
               <TranslatedError error={verifyAddressError} />
             </Title>
@@ -46,14 +47,17 @@ export default class StepConfirmAddress extends PureComponent<StepProps> {
   }
 }
 
-export function StepConfirmAddressFooter({ t, transitionTo, onRetry }: StepProps) {
+export function StepConfirmAddressFooter({ t, transitionTo, onRetry, contactUs }: StepProps) {
   // This will be displayed only if user rejected address
   return (
     <Fragment>
-      <Button>{t('app:receive.steps.confirmAddress.support')}</Button>
+      <Button onClick={contactUs} event="Receive Flow Step 3 Contact Us Clicked">
+        {t('app:receive.steps.confirmAddress.support')}
+      </Button>
       <Button
         ml={2}
         primary
+        event="Receive Flow Step 3 Retry Clicked"
         onClick={() => {
           onRetry()
           transitionTo('device')

src/components/modals/Receive/steps/04-step-receive-funds.js

@@ -59,7 +59,7 @@ export default class StepReceiveFunds extends PureComponent<StepProps> {
     invariant(account, 'No account given')
     return (
       <Box flow={5}>
-        <TrackPage category="Receive" name="Step4" />
+        <TrackPage category="Receive Flow" name="Step 4" />
         <CurrentAddressForAccount
           account={account}
           isAddressVerified={isAddressVerified}

src/config/support.js

@@ -14,4 +14,7 @@ export const urls = {
     'https://support.ledgerwallet.com/hc/en-us/requests/new?ticket_form_id=248165',
   feesMoreInfo: 'https://support.ledgerwallet.com/hc/en-us/articles/360006535873',
   recipientAddressInfo: 'https://support.ledgerwallet.com/hc/en-us/articles/360006433934',
+  // should join and generalize naming for the same urls once defined
+  receiveFlowContactSupport:
+    'https://support.ledgerwallet.com/hc/en-us/requests/new?ticket_form_id=248165',
 }