Merge pull request #1893 from blockchain/feat/pit-connect-test

Feat/pit connect test

Author: Andrew Schneider

packages/blockchain-info-components/src/Tooltip/template.js

@@ -7,7 +7,7 @@ const StyledTip = styled(ReactTooltip)`
   cursor: pointer;
   font-weight: 400;
   text-align: left;
-  padding: ${({ toolTipPad }) => (toolTipPad || '7px 12px')};
+  padding: ${({ toolTipPad }) => toolTipPad || '7px 12px'};
   text-transform: none;
   z-index: 2000 !important;
   font-size: 11px !important;

packages/blockchain-wallet-v4-frontend/src/components/Tour/index.js

@@ -0,0 +1,104 @@
+import styled, { keyframes, createGlobalStyle } from 'styled-components'
+import { LinkContainer } from 'react-router-bootstrap'
+import { Icon, Image, Text } from 'blockchain-info-components'
+
+export const Scale = () => {
+  return keyframes`
+    0% {
+      opacity: 0;
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  `
+}
+
+export const TooltipBody = styled.div`
+  position: relative;
+  width: 100%;
+  max-width: 256px;
+  background-color: ${props => props.theme['white']};
+  border-radius: 8px;
+  box-shadow: 0 4px 32px rgba(5, 24, 61, 0.4);
+  padding: 32px;
+  animation: ${Scale} 0.3s ease-in-out;
+
+  > span:first-child {
+    position: absolute;
+    top: 24px;
+    right: 24px;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+`
+export const TooltipContent = styled.div`
+  color: ${props => props.theme['white']};
+  margin-bottom: 24px;
+  text-align: center;
+`
+export const TooltipFooter = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: ${props =>
+    props.isLastStep ? 'flex-end' : 'space-between'};
+  align-content: center;
+  align-items: center;
+  color: ${props => props.theme['white']};
+`
+
+export const StepIcon = styled(Icon)`
+  margin: 0 auto 12px auto;
+  width: fit-content;
+`
+
+export const StepImg = styled(Image)`
+  margin-bottom: 32px;
+`
+
+export const StepTitle = styled(Text)`
+  font-size: 20px;
+  text-align: center;
+  margin-bottom: 8px;
+  line-height: 24px;
+`
+
+export const StepContent = styled(Text)`
+  line-height: 24px;
+`
+
+export const CloseTourIcon = styled(Icon)`
+  &:hover {
+    color: ${({ theme }) => theme['grey600']};
+  }
+
+  &:active {
+    color: ${({ theme }) => theme['grey800']};
+  }
+`
+
+export const PitJoyrideStyles = createGlobalStyle`
+  .__floater__open {
+    transition: none !important;
+    filter: none !important;
+    margin-left: 170px !important;
+  }
+`
+
+export const SpotlightLinkContainer = styled(LinkContainer)`
+  position: relative;
+`
+
+export const JoyrideSpotlight = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto 11px;
+  width: 28px;
+  height: 28px;
+`

packages/blockchain-wallet-v4-frontend/src/data/analytics/model.js

@@ -16,7 +16,7 @@ export const CUSTOM_VARIABLES = {
 // AB TESTS
 //
 export const AB_TESTS = {
-  PIT_SIDE_NAV_TEST3: 'PitSidenavTest3',
+  PIT_CONNECT_TEST: 'PitConnectTest',
   WALLET_PIT_SIGNUP: 'WalletPitSignup'
 }
 
@@ -97,7 +97,6 @@ export const ADS_EVENTS = {
 
 export const PIT_EVENTS = {
   BANNER_GET_STARTED: ['pit', 'homepage', 'homepage_banner_click'],
-  SIDE_NAV: ['pit', 'sidenav', 'sidenav_link_click'],
   CONNECT_NOW: ['pit', 'link_page', 'connect_now_click'],
   LEARN_MORE: ['pit', 'link_page', 'learn_more_click']
 }

packages/blockchain-wallet-v4-frontend/src/data/analytics/reducers.js

@@ -6,7 +6,7 @@ import { AB_TESTS } from './model'
 
 const INITIAL_STATE = {
   ab_tests: {
-    [AB_TESTS.PIT_SIDE_NAV_TEST3]: Remote.NotAsked,
+    [AB_TESTS.PIT_CONNECT_TEST]: Remote.NotAsked,
     [AB_TESTS.WALLET_PIT_SIGNUP]: Remote.NotAsked
   }
 }

packages/blockchain-wallet-v4-frontend/src/data/modules/profile/sagas.js

@@ -28,7 +28,7 @@ import * as AT from './actionTypes'
 import * as S from './selectors'
 import { KYC_STATES, USER_ACTIVATION_STATES } from './model'
 
-const { AB_TESTS, AB_TEST_GOALS } = model.analytics
+const { AB_TESTS } = model.analytics
 
 export const logLocation = 'modules/profile/sagas'
 export const userRequiresRestoreError = 'User restored'
@@ -406,26 +406,18 @@ export default ({ api, coreSagas, networks }) => {
       const pitLinkId = prop('linkId', data)
       const email = (yield select(selectors.core.settings.getEmail)).getOrFail()
       const variant = (yield select(
-        selectors.analytics.selectAbTest(AB_TESTS.PIT_SIDE_NAV_TEST3)
-      )).getOrElse('sidenav_pulse')
+        selectors.analytics.selectAbTest(AB_TESTS.PIT_CONNECT_TEST)
+      )).getOrElse('original')
       const accountDeeplinkUrl = `${pitDomain}/trade/link/${pitLinkId}?email=${encodeURIComponent(
         email
-      )}&utm_source=web_wallet&utm_medium=wallet_linking&utm_campaign=${variant}`
+      )}&utm_source=web_wallet&utm_medium=referral&utm_campaign=${variant}`
       // share addresses
       yield put(A.shareWalletAddressesWithPit())
       // simulate wait while allowing user to read modal
       yield delay(2000)
       // attempt to open url for user
       window.open(accountDeeplinkUrl, '_blank', 'noreferrer')
       yield put(A.setLinkToPitAccountDeepLink(accountDeeplinkUrl))
-      // check if this is actually due to AB test pulse sidenav, if so log goal completion to matomo
-      const abTestGroupR = yield select(
-        selectors.analytics.selectAbTest(AB_TESTS.PIT_SIDE_NAV_TEST3)
-      )
-      const abTestGroup = abTestGroupR.getOrElse('original')
-      if (abTestGroup === 'sidenav_pulse') {
-        yield put(actions.analytics.logEvent(AB_TEST_GOALS.PIT_LINKOUT_CLICKED))
-      }
       // poll for account link
       yield race({
         task: call(pollForAccountLinkSuccess, 0),

packages/blockchain-wallet-v4-frontend/src/data/modules/profile/selectors.js

@@ -94,25 +94,8 @@ export const isCountrySupported = (countryCode, supportedCountries) =>
   any(propEq('code', countryCode), supportedCountries)
 export const isInvitedToKyc = state =>
   selectors.core.settings.getInvitations(state).map(prop('kyc'))
-export const userFlowSupported = isInvitedToKyc
 
-// export const isInvitedToPitSidenav = state => {
-//   const pitCountries = selectors.core.walletOptions.getPitCountryList(state)
-//   const userCountry = selectors.core.settings.getCountryCode(state)
-//   const isInvited = selectors.core.settings
-//     .getInvitations(state)
-//     .map(prop('pitSidenav'))
-//
-//   const transform = (pitCountries, userCountry, isInvited) => {
-//     const isCountryWhitelisted =
-//       pitCountries &&
-//       (pitCountries === '*' || includes(userCountry, pitCountries))
-//
-//     return isCountryWhitelisted || isInvited
-//   }
-//
-//   return lift(transform)(pitCountries, userCountry, isInvited)
-// }
+export const userFlowSupported = isInvitedToKyc
 
 export const isInvitedToPitHomeBanner = state => {
   const pitCountries = selectors.core.walletOptions.getPitCountryList(state)

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Navigation/index.js

@@ -1,22 +1,18 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import { compose, bindActionCreators } from 'redux'
-import { withRouter } from 'react-router-dom'
 import { concat, equals, not, prop } from 'ramda'
 import { STATUS } from 'react-joyride/lib'
 
 import { actions, model, selectors } from 'data'
 import Navigation from './template'
-const { NONE, REJECTED } = model.profile.KYC_STATES
 
-const { PIT_EVENTS } = model.analytics
+const { NONE, REJECTED } = model.profile.KYC_STATES
 
 class NavigationContainer extends React.PureComponent {
-  state = { hasRanPitTour: false }
-
-  handleTourCallbacks = data => {
+  handlePitTourCallbacks = (data, e) => {
     if ([STATUS.FINISHED, STATUS.SKIPPED].includes(data.status)) {
-      this.setState({ hasRanPitTour: true })
+      this.props.preferencesActions.hideThePitPulse()
     }
   }
 
@@ -25,31 +21,18 @@ class NavigationContainer extends React.PureComponent {
       actions,
       analyticsActions,
       domains,
-      isPitAccountLinked,
-      routerActions,
-      supportedCoins,
-      userKycState,
+      userKYCState,
       ...props
     } = this.props
 
     return (
       <Navigation
         {...props}
-        onClickPitSideNavLink={() =>
-          analyticsActions.logEvent(PIT_EVENTS.SIDE_NAV)
-        }
         handleCloseMenu={actions.layoutWalletMenuCloseClicked}
-        isPitAccountLinked={isPitAccountLinked}
         pitUrl={concat(prop('thePit', domains), '/trade')}
-        supportedCoins={supportedCoins}
-        hasRanPitTour={this.state.hasRanPitTour}
-        handleTourCallbacks={this.handleTourCallbacks}
-        routeToPit={() => {
-          this.setState({ hasRanPitTour: true })
-          routerActions.push('/thepit')
-        }}
-        userNonRejectAndHasntDoneKyc={
-          equals(NONE, userKycState) && not(equals(REJECTED, userKycState))
+        handlePitTourCallbacks={this.handlePitTourCallbacks}
+        userEligibleForPIT={
+          (equals(NONE, userKYCState), not(equals(REJECTED, userKYCState)))
         }
       />
     )
@@ -63,17 +46,15 @@ const mapStateToProps = state => ({
     .getOrElse(false),
   supportedCoins: selectors.core.walletOptions
     .getSupportedCoins(state)
-    .getOrFail(),
-  userKycState: selectors.modules.profile.getUserKYCState(state).getOrElse(null)
+    .getOrFail()
 })
 const mapDispatchToProps = dispatch => ({
   actions: bindActionCreators(actions.components.layoutWallet, dispatch),
   analyticsActions: bindActionCreators(actions.analytics, dispatch),
-  routerActions: bindActionCreators(actions.router, dispatch)
+  preferencesActions: bindActionCreators(actions.preferences, dispatch)
 })
 
 const enhance = compose(
-  withRouter,
   connect(
     mapStateToProps,
     mapDispatchToProps