feat(Sell): udpate sell analytics

packages/blockchain-wallet-v4-frontend/src/data/analytics/types/index.ts

@@ -37,6 +37,7 @@ import {
   Events as OnboardingAndVerificationEvents,
   TrackEventAction as OnboardingAndVerificationTrackEventAction
 } from './onboardingAndVerification'
+import { Events as SellEvents, TrackEventAction as SellTrackEventAction } from './sell'
 import {
   Events as SendCryptoEvents,
   TrackEventAction as SendCryptoTrackEventAction
@@ -75,6 +76,7 @@ type AnalyticsKey =
   | SwapEvents
   | WalletEarnEvents
   | BuyEvents
+  | SellEvents
   | ExchangePromoEvents
 
 const Analytics = {
@@ -93,7 +95,8 @@ const Analytics = {
   ...TaxCenterEvents,
   ...ViewAndClickEvents,
   ...WalletEarnEvents,
-  ...BuyEvents
+  ...BuyEvents,
+  ...SellEvents
 }
 
 // event properties
@@ -121,6 +124,7 @@ type TrackEventAction =
   | WalletEarnTrackEventAction
   | CowboysPromoTrackEventAction
   | BuyTrackEventAction
+  | SellTrackEventAction
   | ExchangePromoTrackEventAction
 
 type AnalyticsTraits = {

packages/blockchain-wallet-v4-frontend/src/data/analytics/types/sell.ts

@@ -0,0 +1,21 @@
+export enum Events {
+  COIN_VIEW_SELL_CLICKED = 'Coin View Sell Clicked',
+  FAB_SELL_CLICKED = 'FAB Sell Clicked',
+  PRICES_PAGE_SELL_CLICKED = 'Prices Page Sell Clicked',
+  SELL_AMOUNT_SCREEN_BACK_CLICKED = 'Sell Amount Screen Back Clicked',
+  SELL_AMOUNT_SCREEN_NEXT_CLICKED = 'Sell Amount Screen Next Clicked',
+  SELL_AMOUNT_SCREEN_VIEWED = 'Sell Amount Screen Viewed',
+  SELL_ASSET_SCREEN_VIEWED = 'Sell Asset Screen Viewed',
+  SELL_ASSET_SELECTED = 'Sell Asset Selected',
+  SELL_CHECKOUT_NETWORK_FEES_CLICKED = 'Sell Checkout Network Fees Clicked',
+  SELL_CHECKOUT_SCREEN_BACK_CLICKED = 'Sell Checkout Screen Back Clicked',
+  SELL_CHECKOUT_SCREEN_SUBMITTED = 'Sell Checkout Screen Submitted',
+  SELL_CHECKOUT_VIEWED = 'Sell Checkout Viewed',
+  SELL_FIAT_CRYPTO_SWITCHER_CLICKED = 'Sell Fiat Crypto Switcher Clicked',
+  SELL_PRICE_TOOLTIP_CLICKED = 'Sell Price Tooltip Clicked'
+}
+
+export type TrackEventAction = {
+  key: Events
+  properties: {}
+}

packages/blockchain-wallet-v4-frontend/src/middleware/analyticsMiddleware/index.ts

@@ -732,35 +732,6 @@ const analyticsMiddleware = () => (store) => (next) => (action) => {
         break
       }
 
-      case actions.components.buySell.createOrder.type: {
-        const state = store.getState()
-        const nabuId = state.profile.userData.getOrElse({})?.id ?? null
-        const email = state.profile.userData.getOrElse({})?.emailVerified
-          ? state.profile.userData.getOrElse({})?.email
-          : null
-        const tier = state.profile.userData.getOrElse({})?.tiers?.current ?? null
-
-        const inputCurrency = state.components.buySell.fiatCurrency
-        const inputAmount = Number(state.form.buySellCheckout.values.amount)
-        const inputAMountMax = Number(state.components.buySell.pair.buyMax) / 100
-        const outputCurrency = state.components.buySell.cryptoCurrency
-
-        analytics.push(AnalyticsKey.BUY_AMOUNT_ENTERED, {
-          properties: {
-            input_amount: inputAmount,
-            input_currency: inputCurrency,
-            max_card_limit: inputAMountMax,
-            originalTimestamp: getOriginalTimestamp(),
-            output_currency: outputCurrency
-          },
-          traits: {
-            email,
-            nabuId,
-            tier
-          }
-        })
-        break
-      }
       case actions.components.buySell.handleBuyMaxAmountClick.type: {
         const state = store.getState()
         const nabuId = state.profile.userData.getOrElse({})?.id ?? null

packages/blockchain-wallet-v4-frontend/src/middleware/analyticsMiddleware/types.ts

@@ -6,15 +6,12 @@ enum AnalyticsKey {
   ADDRESS_VERIFY_MESSAGE_CLICKED = 'Address Verify Message Clicked',
   ADD_MOBILE_NUMBER_CLICKED = 'Add Mobile Number Clicked',
   AMOUNT_SWITCHED = 'Amount Switched',
-  BUY_AMOUNT_ENTERED = 'Buy Amount Entered',
   BUY_AMOUNT_MAX_CLICKED = 'Buy Amount Max Clicked',
   BUY_AMOUNT_MIN_CLICKED = 'Buy Amount Min Clicked',
-  BUY_PAYMENT_METHOD_SELECTED = 'Buy Payment Method Selected',
   BUY_SELL_CLICKED = 'Buy Sell Clicked',
   BUY_SELL_VIEWED = 'Buy Sell Viewed',
   CANCEL_RECURRING_BUY_CLICKED = 'Cancel Recurring Buy Clicked',
   CHANGE_MOBILE_NUMBER_CLICKED = 'Change Mobile Number Clicked',
-  CLOUD_BACKUP_CODE_SCANNED = 'Cloud Backup Code Scanned',
   CRYPTO_LINK_HANDLING_CLICKED = 'Crypto Link Handling Clicked',
   DASHBOARD_CLICKED = 'Dashboard Clicked',
   DASHBOARD_VIEWED = 'Dashboard Viewed',

packages/blockchain-wallet-v4-frontend/src/modals/BuySell/CryptoSelection/CryptoSelector/index.tsx

@@ -69,9 +69,7 @@ class CryptoSelector extends React.Component<InjectedFormProps<{}, Props> & Prop
   }
 
   componentDidMount() {
-    if (this.state.orderType === 'BUY') {
-      this.trackBuyViewed()
-    }
+    this.trackScreenViewed()
   }
 
   shouldComponentUpdate = (nextProps, nextState) =>
@@ -81,8 +79,8 @@ class CryptoSelector extends React.Component<InjectedFormProps<{}, Props> & Prop
     prevProps: Readonly<InjectedFormProps<{}, Props> & Props>,
     prevState: Readonly<State>
   ) {
-    if (prevState.orderType !== this.state.orderType && this.state.orderType === 'BUY') {
-      this.trackBuyViewed()
+    if (prevState.orderType !== this.state.orderType) {
+      this.trackScreenViewed()
     }
   }
 
@@ -147,8 +145,13 @@ class CryptoSelector extends React.Component<InjectedFormProps<{}, Props> & Prop
 
   handleSell = (swapAccount: SwapAccountType) => {
     const pair = this.props.pairs.find((value) => getCoinFromPair(value.pair) === swapAccount.coin)
-
     if (!pair) return
+
+    this.props.analyticsActions.trackEvent({
+      key: Analytics.SELL_ASSET_SELECTED,
+      properties: {}
+    })
+
     this.props.buySellActions.setStep({
       cryptoCurrency: getCoinFromPair(pair.pair),
       fiatCurrency: this.props.walletCurrency,
@@ -163,9 +166,12 @@ class CryptoSelector extends React.Component<InjectedFormProps<{}, Props> & Prop
     this.props.formActions.change(FORM_BS_CHECKOUT, 'amount', '')
   }
 
-  trackBuyViewed() {
+  trackScreenViewed = () => {
     this.props.analyticsActions.trackEvent({
-      key: Analytics.BUY_ASSET_SCREEN_VIEWED,
+      key:
+        this.state.orderType === 'BUY'
+          ? Analytics.BUY_ASSET_SCREEN_VIEWED
+          : Analytics.SELL_ASSET_SCREEN_VIEWED,
       properties: {}
     })
   }

packages/blockchain-wallet-v4-frontend/src/modals/BuySell/PreviewSell/index.tsx

@@ -25,7 +25,12 @@ import { getFiatFromPair } from 'data/components/buySell/model'
 import { convertBaseToStandard } from 'data/components/exchange/services'
 import { getInputFromPair, getOutputFromPair } from 'data/components/swap/model'
 import { RootState } from 'data/rootReducer'
-import { BSCheckoutFormValuesType, SwapAccountType, SwapBaseCounterTypes } from 'data/types'
+import {
+  Analytics,
+  BSCheckoutFormValuesType,
+  SwapAccountType,
+  SwapBaseCounterTypes
+} from 'data/types'
 import { isNabuError } from 'services/errors'
 
 import { Border, TopText } from '../../Swap/components'
@@ -156,12 +161,30 @@ class PreviewSell extends PureComponent<
     this.state = { isSetCoinToolTip: false, isSetNetworkFee: false }
   }
 
+  componentDidMount() {
+    this.props.analyticsActions.trackEvent({
+      key: Analytics.SELL_CHECKOUT_VIEWED,
+      properties: {}
+    })
+  }
+
   handleSubmit = (e) => {
     e.preventDefault()
+
+    this.props.analyticsActions.trackEvent({
+      key: Analytics.SELL_CHECKOUT_SCREEN_SUBMITTED,
+      properties: {}
+    })
+
     this.props.buySellActions.createOrder({})
   }
 
   handleOnClickBack = (BASE: string) => {
+    this.props.analyticsActions.trackEvent({
+      key: Analytics.SELL_CHECKOUT_SCREEN_BACK_CLICKED,
+      properties: {}
+    })
+
     this.props.buySellActions.setStep({
       cryptoCurrency: BASE,
       fiatCurrency: getFiatFromPair(this.props.pair.pair),
@@ -202,12 +225,22 @@ class PreviewSell extends PureComponent<
   }
 
   toggleCoinToolTip = () => {
+    this.props.analyticsActions.trackEvent({
+      key: Analytics.SELL_PRICE_TOOLTIP_CLICKED,
+      properties: {}
+    })
+
     this.setState((prevState) => ({
       isSetCoinToolTip: !prevState.isSetCoinToolTip
     }))
   }
 
   toggleNetworkFeeToolTip = () => {
+    this.props.analyticsActions.trackEvent({
+      key: Analytics.SELL_CHECKOUT_NETWORK_FEES_CLICKED,
+      properties: {}
+    })
+
     this.setState((prevState) => ({
       isSetNetworkFee: !prevState.isSetNetworkFee
     }))
@@ -595,6 +628,7 @@ const mapStateToProps = (state: RootState) => {
 }
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
+  analyticsActions: bindActionCreators(actions.analytics, dispatch),
   buySellActions: bindActionCreators(actions.components.buySell, dispatch),
   clearErrors: () => dispatch(clearSubmitErrors(FORM_BS_PREVIEW_SELL))
 })

packages/blockchain-wallet-v4-frontend/src/modals/BuySell/SellEnterAmount/Checkout/index.tsx

@@ -60,6 +60,11 @@ const Checkout = (props: Props) => {
   const handleSubmit = () => {
     if (!data) return
 
+    props.analyticsActions.trackEvent({
+      key: Analytics.SELL_AMOUNT_SCREEN_NEXT_CLICKED,
+      properties: {}
+    })
+
     // if the user is < tier 2 go to kyc but save order info
     // if the user is tier 2 try to submit order, let BE fail
     const { hasPaymentAccount, isSddFlow, userData } = data
@@ -263,6 +268,7 @@ const Checkout = (props: Props) => {
 }
 
 const mapDispatchToProps = (dispatch) => ({
+  analyticsActions: bindActionCreators(actions.analytics, dispatch),
   brokerageActions: bindActionCreators(actions.components.brokerage, dispatch),
   buySellActions: bindActionCreators(actions.components.buySell, dispatch),
   deleteGoal: (id: string) => dispatch(actions.goals.deleteGoal(id)),

packages/blockchain-wallet-v4-frontend/src/modals/BuySell/SellEnterAmount/Checkout/template.success.tsx

@@ -1,4 +1,4 @@
-import React, { ReactChild, useCallback, useState } from 'react'
+import React, { ReactChild, useCallback, useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { useDispatch } from 'react-redux'
 import { GreyBlueCartridge } from 'blockchain-wallet-v4-frontend/src/modals/Interest/DepositForm/model'
@@ -26,7 +26,7 @@ import Form from 'components/Form/Form'
 import { GenericNabuErrorFlyout } from 'components/GenericNabuErrorFlyout'
 import { model } from 'data'
 import { convertBaseToStandard, convertStandardToBase } from 'data/components/exchange/services'
-import { BSCheckoutFormValuesType, BSFixType, SwapBaseCounterTypes } from 'data/types'
+import { Analytics, BSCheckoutFormValuesType, BSFixType, SwapBaseCounterTypes } from 'data/types'
 import { getEffectiveLimit, getEffectivePeriod } from 'services/custodial'
 import { isNabuError, NabuError } from 'services/errors'
 import { CRYPTO_DECIMALS, FIAT_DECIMALS, formatTextAmount } from 'services/forms'
@@ -179,6 +179,7 @@ const isLimitError = (code: number | string): boolean => {
 
 const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
   const {
+    analyticsActions,
     cards,
     crossBorderLimits,
     cryptoCurrency,
@@ -189,6 +190,13 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
     products
   } = props
 
+  useEffect(() => {
+    analyticsActions.trackEvent({
+      key: Analytics.SELL_AMOUNT_SCREEN_VIEWED,
+      properties: {}
+    })
+  }, [])
+
   const dispatch = useDispatch()
 
   const [fontRatio, setFontRatio] = useState(1)
@@ -410,6 +418,33 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
 
   const { error } = props
 
+  const goBack = () => {
+    analyticsActions.trackEvent({
+      key: Analytics.SELL_AMOUNT_SCREEN_BACK_CLICKED,
+      properties: {}
+    })
+
+    props.buySellActions.setStep({
+      // Always reset back to walletCurrency
+      // Otherwise FUNDS currency and Pairs currency can mismatch
+      fiatCurrency: props.fiatCurrency || 'USD',
+      step: 'CRYPTO_SELECTION'
+    })
+  }
+
+  const switchFix = () => {
+    analyticsActions.trackEvent({
+      key: Analytics.SELL_FIAT_CRYPTO_SWITCHER_CLICKED,
+      properties: {}
+    })
+
+    props.buySellActions.switchFix({
+      amount: fix === 'FIAT' ? formatCoin(quoteAmount, 0, CRYPTO_DECIMALS) : quoteAmount, // format crypto amount to 8 digits
+      fix: props.preferences[props.orderType].fix === 'CRYPTO' ? 'FIAT' : 'CRYPTO',
+      orderType: props.orderType
+    })
+  }
+
   if (isNabuError(error)) {
     return <GenericNabuErrorFlyout error={error} onDismiss={clearFormError} />
   }
@@ -427,14 +462,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
               color='grey600'
               role='button'
               style={{ marginRight: '8px' }}
-              onClick={() =>
-                props.buySellActions.setStep({
-                  // Always reset back to walletCurrency
-                  // Otherwise FUNDS currency and Pairs currency can mismatch
-                  fiatCurrency: props.fiatCurrency || 'USD',
-                  step: 'CRYPTO_SELECTION'
-                })
-              }
+              onClick={goBack}
             />
             <FormattedMessage
               id='buttons.buy_sell_now'
@@ -517,14 +545,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
                   color='blue600'
                   cursor
                   name='up-down-chevron'
-                  onClick={() =>
-                    props.buySellActions.switchFix({
-                      amount:
-                        fix === 'FIAT' ? formatCoin(quoteAmount, 0, CRYPTO_DECIMALS) : quoteAmount, // format crypto amount to 8 digits
-                      fix: props.preferences[props.orderType].fix === 'CRYPTO' ? 'FIAT' : 'CRYPTO',
-                      orderType: props.orderType
-                    })
-                  }
+                  onClick={switchFix}
                   role='button'
                   size='24px'
                   data-e2e='sbSwitchIcon'

packages/blockchain-wallet-v4-frontend/src/modals/Trade/index.tsx

@@ -44,6 +44,12 @@ const TradeContainer = (props: Props) => {
   }, [])
 
   const handleSell = useCallback(() => {
+    dispatch(
+      actions.analytics.trackEvent({
+        key: Analytics.FAB_SELL_CLICKED,
+        properties: {}
+      })
+    )
     dispatch(
       actions.components.buySell.showModal({
         cryptoCurrency: 'BTC',