feat(Pit Connect): clean up pit connection tests

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

@@ -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/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 { REJECTED } = model.profile.KYC_STATES
 
 class NavigationContainer extends React.PureComponent {
-  state = { hasRanPitTour: false }
-
   handleTourCallbacks = data => {
     if ([STATUS.FINISHED, STATUS.SKIPPED].includes(data.status)) {
-      this.setState({ hasRanPitTour: true })
+      this.props.preferencesActions.hideThePitPulse()
     }
   }
 
@@ -26,31 +22,20 @@ class NavigationContainer extends React.PureComponent {
       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))
-        }
+        userEligibleForPIT={not(equals(REJECTED, userKYCState))}
       />
     )
   }
@@ -63,17 +48,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

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

@@ -1,8 +1,8 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import styled, { keyframes } from 'styled-components'
-
-import { Button, Icon } from 'blockchain-info-components'
+import { LinkContainer } from 'react-router-bootstrap'
+import { Button, Icon, Text } from 'blockchain-info-components'
 
 const Scale = () => {
   return keyframes`
@@ -72,17 +72,15 @@ export const PitTooltip = props => {
       />
       {step.content && <TooltipContent>{step.content}</TooltipContent>}
       <TooltipFooter>
-        <Button
-          width='110px'
-          height='48px'
-          nature='primary'
-          fullwidth
-          onClick={step.routeToPit}
-        >
-          <FormattedMessage
-            id='the.pit.tooltip.check.it.out'
-            defaultMessage='Check it out'
-          />
+        <Button width='110px' height='48px' nature='primary' fullwidth>
+          <LinkContainer to='/thepit'>
+            <Text color='white' size='14px' weight={600}>
+              <FormattedMessage
+                id='the.pit.tooltip.checkitout'
+                defaultMessage='Check It Out'
+              />
+            </Text>
+          </LinkContainer>
         </Button>
       </TooltipFooter>
     </TooltipBody>

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

@@ -63,6 +63,20 @@ const PitJoyrideStyles = createGlobalStyle`
   }
 `
 
+const StepTitle = styled(Text)`
+  font-size: 20px;
+  text-align: center;
+  margin-bottom: 8px;
+  line-height: 24px;
+`
+const StepIcon = styled(Icon)`
+  margin: 0 auto 12px auto;
+  width: fit-content;
+`
+const StepContent = styled(Text)`
+  line-height: 24px;
+`
+
 const renderPitSidenav = showSpotlight => (
   <MenuItem data-e2e='thePitLink'>
     {showSpotlight && <JoyrideSpotlight className='react-joyride__spotlight' />}
@@ -85,40 +99,11 @@ const renderPitSidenav = showSpotlight => (
 )
 
 const PitLinkContent = props => {
-  const {
-    pitSideNavTest3,
-    firstLogin,
-    showThePitPulse,
-    onClickPitSideNavLink,
-    handleTourCallbacks,
-    hasRanPitTour,
-    routeToPit
-  } = props
+  const { firstLogin, showThePitPulse, handleTourCallbacks } = props
 
-  if (pitSideNavTest3 === 'sidenav_pulse_callout') {
-    const StepTitle = styled(Text)`
-      font-size: 20px;
-      text-align: center;
-      margin-bottom: 8px;
-      line-height: 24px;
-    `
-    const StepIcon = styled(Icon)`
-      margin: 0 auto 12px auto;
-      width: fit-content;
-    `
-    const StepContent = styled(Text)`
-      line-height: 24px;
-    `
-    return firstLogin || hasRanPitTour || !showThePitPulse ? (
-      <SpotlightLinkContainer
-        to='/thepit'
-        activeClassName='active'
-        onClick={onClickPitSideNavLink}
-      >
-        {renderPitSidenav()}
-      </SpotlightLinkContainer>
-    ) : (
-      <div style={{ position: 'relative', width: '100%' }}>
+  return (
+    <div style={{ position: 'relative', width: '100%' }}>
+      <SpotlightLinkContainer to='/thepit' activeClassName='active'>
         <MenuItem data-e2e='thePitLink'>
           <JoyrideSpotlight
             className='the-pit-tooltip'
@@ -140,7 +125,7 @@ const PitLinkContent = props => {
             </Text>
           </NewCartridge>
           <Joyride
-            run={true}
+            run={firstLogin || showThePitPulse}
             steps={[
               {
                 target: '.the-pit-tooltip',
@@ -154,16 +139,22 @@ const PitLinkContent = props => {
                       />
                     </StepTitle>
                     <StepContent color='grey600' size='14px' weight={500}>
-                      <FormattedMessage
-                        id='the.pit.tooltip.content'
-                        defaultMessage="Now that you have a Wallet, link and exchange over 26 pairs in The PIT - Blockchain's own lightning fast crypto exchange."
-                      />
+                      {firstLogin ? (
+                        <FormattedMessage
+                          id='the.pit.tooltip.content'
+                          defaultMessage="Now that you have a Wallet, link and exchange over 26 pairs in The PIT - Blockchain's own lightning fast crypto exchange."
+                        />
+                      ) : (
+                        <FormattedMessage
+                          id='the.pit.tooltip.contentshort'
+                          defaultMessage="Link and exchange over 26 pairs in The PIT - Blockchain's own lightning fast crypto exchange."
+                        />
+                      )}
                     </StepContent>
                   </>
                 ),
                 disableBeacon: true,
-                placement: 'right',
-                routeToPit
+                placement: 'right'
               }
             ]}
             tooltipComponent={PitTooltip}
@@ -176,20 +167,10 @@ const PitLinkContent = props => {
             }}
             {...props.Joyride}
           />
+          <PitJoyrideStyles />
         </MenuItem>
-        <PitJoyrideStyles />
-      </div>
-    )
-  }
-
-  return (
-    <SpotlightLinkContainer
-      to='/thepit'
-      activeClassName='active'
-      onClick={onClickPitSideNavLink}
-    >
-      {renderPitSidenav(!firstLogin && showThePitPulse)}
-    </SpotlightLinkContainer>
+      </SpotlightLinkContainer>
+    </div>
   )
 }
 
@@ -262,7 +243,7 @@ const Navigation = props => {
           </HelperTipContainer>
         </MenuItem>
       </LinkContainer>
-      {props.userNonRejectAndHasntDoneKyc ? (
+      {props.userEligibleForPIT ? (
         props.isPitAccountLinked ? (
           <Link
             href={props.pitUrl}

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

@@ -16,7 +16,8 @@ export const getData = createDeepEqualSelector(
     selectors.core.kvStore.lockbox.getDevices,
     selectors.core.settings.getCountryCode,
     selectors.core.walletOptions.getAdsBlacklist,
-    selectors.core.walletOptions.getAdsUrl
+    selectors.core.walletOptions.getAdsUrl,
+    selectors.modules.profile.getUserKYCState
   ],
   (
     pitSideNavTest3R,
@@ -29,13 +30,15 @@ export const getData = createDeepEqualSelector(
     lockboxDevicesR,
     countryCodeR,
     adsBlacklistR,
-    adsUrlR
+    adsUrlR,
+    userKYCState
   ) => {
     const transform = (
       pitSideNavTest3,
       canTrade,
       lockboxDevices,
-      countryCode
+      countryCode,
+      userKYCState
     ) => {
       return {
         adsBlacklist: adsBlacklistR.getOrElse([]),
@@ -48,15 +51,17 @@ export const getData = createDeepEqualSelector(
         menuOpened,
         pathname,
         pitSideNavTest3,
-        showThePitPulse
+        showThePitPulse,
+        userKYCState
       }
     }
 
     return lift(transform)(
       pitSideNavTest3R,
       canTradeR,
       lockboxDevicesR,
-      countryCodeR
+      countryCodeR,
+      userKYCState
     )
   }
 )