From ebb244164730701e024e5516470b5800190eb1dc Mon Sep 17 00:00:00 2001 From: Anastasia Poupeney Date: Wed, 4 Jul 2018 18:10:43 +0200 Subject: [PATCH] add tracking to the send modal --- src/components/FeesField/GenericContainer.js | 6 +++++- src/components/Onboarding/steps/Analytics.js | 2 +- src/components/RecipientAddress/index.js | 6 +++++- src/components/base/LabelWithExternalIcon.js | 2 +- src/components/modals/Send/fields/RecipientField.js | 2 ++ src/components/modals/Send/steps/01-step-amount.js | 2 ++ src/components/modals/Send/steps/02-step-connect-device.js | 2 +- src/components/modals/Send/steps/03-step-verification.js | 2 +- src/components/modals/Send/steps/04-step-confirmation.js | 4 ++-- 9 files changed, 20 insertions(+), 8 deletions(-) diff --git a/src/components/FeesField/GenericContainer.js b/src/components/FeesField/GenericContainer.js index 164888c5..aa4a857d 100644 --- a/src/components/FeesField/GenericContainer.js +++ b/src/components/FeesField/GenericContainer.js @@ -7,11 +7,15 @@ import LabelWithExternalIcon from 'components/base/LabelWithExternalIcon' import { translate } from 'react-i18next' import { openURL } from 'helpers/linking' import { urls } from 'config/support' +import { track } from 'analytics/segment' export default translate()(({ children, t }: { children: React$Node, t: * }) => ( openURL(urls.feesMoreInfo)} + onClick={() => { + openURL(urls.feesMoreInfo) + track('Send Flow Fees Help Requested') + }} label={t('app:send.steps.amount.fees')} /> diff --git a/src/components/Onboarding/steps/Analytics.js b/src/components/Onboarding/steps/Analytics.js index 1b78af73..71f1d1f6 100644 --- a/src/components/Onboarding/steps/Analytics.js +++ b/src/components/Onboarding/steps/Analytics.js @@ -6,13 +6,13 @@ import { connect } from 'react-redux' import { saveSettings } from 'actions/settings' import Box from 'components/base/Box' import Switch from 'components/base/Switch' +import FakeLink from 'components/base/FakeLink' import TrackPage from 'analytics/TrackPage' import Track from 'analytics/Track' import { openModal } from 'reducers/modals' 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' import OnboardingFooter from '../OnboardingFooter' diff --git a/src/components/RecipientAddress/index.js b/src/components/RecipientAddress/index.js index f96205c3..598190e0 100644 --- a/src/components/RecipientAddress/index.js +++ b/src/components/RecipientAddress/index.js @@ -11,6 +11,7 @@ import { radii } from 'styles/theme' import QRCodeCameraPickerCanvas from 'components/QRCodeCameraPickerCanvas' import Box from 'components/base/Box' import Input from 'components/base/Input' +import { track } from 'analytics/segment' import IconQrCode from 'icons/QrCode' @@ -64,10 +65,13 @@ class RecipientAddress extends PureComponent { qrReaderOpened: false, } - handleClickQrCode = () => + handleClickQrCode = () => { + const { qrReaderOpened } = this.state this.setState(prev => ({ qrReaderOpened: !prev.qrReaderOpened, })) + !qrReaderOpened ? track('Send Flow QR Code Opened') : track('Send Flow QR Code Closed') + } handleOnPick = (code: string) => { const { address, ...rest } = decodeURIScheme(code) diff --git a/src/components/base/LabelWithExternalIcon.js b/src/components/base/LabelWithExternalIcon.js index 68d83a4d..8251dbf2 100644 --- a/src/components/base/LabelWithExternalIcon.js +++ b/src/components/base/LabelWithExternalIcon.js @@ -8,7 +8,7 @@ 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 }) { +export function LabelWithExternalIcon({ onClick, label }: { onClick: ?() => void, label: string }) { return ( {label} diff --git a/src/components/modals/Send/fields/RecipientField.js b/src/components/modals/Send/fields/RecipientField.js index c7df23ba..1313d0aa 100644 --- a/src/components/modals/Send/fields/RecipientField.js +++ b/src/components/modals/Send/fields/RecipientField.js @@ -8,6 +8,7 @@ import { urls } from 'config/support' import Box from 'components/base/Box' import LabelWithExternalIcon from 'components/base/LabelWithExternalIcon' import RecipientAddress from 'components/RecipientAddress' +import { track } from 'analytics/segment' type Props = { t: T, @@ -63,6 +64,7 @@ class RecipientField extends Component, { isVali handleRecipientAddressHelp = () => { openURL(urls.recipientAddressInfo) + track('Send Flow Recipient Address Help Requested') } render() { const { bridge, account, transaction, t, autoFocus } = this.props diff --git a/src/components/modals/Send/steps/01-step-amount.js b/src/components/modals/Send/steps/01-step-amount.js index 3461a4d7..b551f04a 100644 --- a/src/components/modals/Send/steps/01-step-amount.js +++ b/src/components/modals/Send/steps/01-step-amount.js @@ -10,6 +10,7 @@ import FormattedVal from 'components/base/FormattedVal' import Text from 'components/base/Text' import CounterValue from 'components/CounterValue' import Spinner from 'components/base/Spinner' +import TrackPage from 'analytics/TrackPage' import RecipientField from '../fields/RecipientField' import AmountField from '../fields/AmountField' @@ -34,6 +35,7 @@ export default ({ return ( + diff --git a/src/components/modals/Send/steps/02-step-connect-device.js b/src/components/modals/Send/steps/02-step-connect-device.js index 47352a2d..876ba1d1 100644 --- a/src/components/modals/Send/steps/02-step-connect-device.js +++ b/src/components/modals/Send/steps/02-step-connect-device.js @@ -11,7 +11,7 @@ import type { StepProps } from '../index' export default function StepConnectDevice({ account, onChangeAppOpened }: StepProps<*>) { return ( - + > { const { t } = this.props return ( - + {multiline(t('app:send.steps.verification.warning'))} {t('app:send.steps.verification.body')} diff --git a/src/components/modals/Send/steps/04-step-confirmation.js b/src/components/modals/Send/steps/04-step-confirmation.js index 1b28ffb8..6e308795 100644 --- a/src/components/modals/Send/steps/04-step-confirmation.js +++ b/src/components/modals/Send/steps/04-step-confirmation.js @@ -60,7 +60,7 @@ export default function StepConfirmation({ t, optimisticOperation, error }: Step const translatedErrDesc = error ? || '' : '' return ( - + @@ -88,10 +88,10 @@ export function StepConfirmationFooter({ {optimisticOperation ? ( - // TODO: actually go to operations details url ? (