feat(intro-tour): Added intro tour

packages/blockchain-info-components/src/Buttons/IconButton.js

@@ -46,12 +46,12 @@ const selectColor = (nature, disabled) => {
 }
 
 const IconButton = props => {
-  const { name, children, ...rest } = props
-  const color = selectColor(props.nature)
+  const { name, children, nature, customClass, ...rest } = props
+  const color = selectColor(nature)
 
   return (
     <BaseIconButton {...rest}>
-      <Icon name={name} color={color} />
+      <Icon name={name} color={color} className={customClass} />
       {children}
     </BaseIconButton>
   )

packages/blockchain-info-components/src/Images/Images.js

@@ -45,6 +45,18 @@ import halfBitcoin from './img/half-bitcoin.svg'
 import halfBitcoincash from './img/half-bitcoincash.svg'
 import halfEther from './img/half-ether.svg'
 import identityVerification from './img/identity-verification.svg'
+import introBank from './img/intro-bank.png'
+import introBankGif from './img/intro-bank.gif'
+import introCart from './img/intro-cart.png'
+import introCartGif from './img/intro-cart.gif'
+import introHand from './img/intro-hand.png'
+import introLock from './img/intro-lock.png'
+import introReceive from './img/intro-receive.png'
+import introReceiveGif from './img/intro-receive.gif'
+import introSend from './img/intro-send.png'
+import introSendGif from './img/intro-send.gif'
+import introSwap from './img/intro-swap.png'
+import introSwapGif from './img/intro-swap.gif'
 import linkedinWhite from './img/linkedin-white.svg'
 import linkLockboxIcon from './img/link-lockbox-icon.svg'
 import microDepositsWhole from './img/micro-deposits-whole.svg'
@@ -164,6 +176,18 @@ export default {
   'half-bitcoincash': halfBitcoincash,
   'half-ether': halfEther,
   'identity-verification': identityVerification,
+  'intro-bank': introBank,
+  'intro-bank-gif': introBankGif,
+  'intro-cart': introCart,
+  'intro-cart-gif': introCartGif,
+  'intro-hand': introHand,
+  'intro-lock': introLock,
+  'intro-receive': introReceive,
+  'intro-receive-gif': introReceiveGif,
+  'intro-send': introSend,
+  'intro-send-gif': introSendGif,
+  'intro-swap': introSwap,
+  'intro-swap-gif': introSwapGif,
   'ledger-lockbox': ledgerLockbox,
   'ledger-lockbox2': ledgerLockbox2,
   'ledger-lockbox3': ledgerLockbox3,

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

@@ -149,7 +149,7 @@ export default ({ api, coreSagas }) => {
       yield put(actions.modules.settings.updateLanguage(language))
       yield put(actions.analytics.initUserSession())
       yield fork(transferEthSaga)
-      yield call(saveGoals, firstLogin)
+      yield call(saveGoals, true) // Change this back to firstLogin after push
       yield put(actions.goals.runGoals())
       yield fork(checkDataErrors)
       yield fork(logoutRoutine, yield call(setLogoutEventListener))

packages/blockchain-wallet-v4-frontend/src/data/components/onboarding/actionTypes.js

@@ -12,3 +12,5 @@ export const UPGRADE_FOR_AIRDROP_SUBMIT_CLICKED =
 
 export const COINIFY_UPGRADE_SUBMIT_CLICKED =
   '@EVENT.COINIFY_UPGRADE_SUBMIT_CLICKED'
+
+export const SET_WALLET_TOUR_VISIBILITY = '@EVENT.SET_WALLET_TOUR_VISIBILITY'

packages/blockchain-wallet-v4-frontend/src/data/components/onboarding/actions.js

@@ -18,3 +18,8 @@ export const coinifyUpgradeSubmitClicked = campaign => ({
   type: AT.COINIFY_UPGRADE_SUBMIT_CLICKED,
   payload: { campaign }
 })
+
+export const setWalletTourVisibility = visibility => ({
+  type: AT.SET_WALLET_TOUR_VISIBILITY,
+  payload: visibility
+})

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

@@ -0,0 +1,19 @@
+import { assoc } from 'ramda'
+import * as AT from './actionTypes'
+
+const INITIAL_STATE = {
+  showWalletTour: false
+}
+
+export default (state = INITIAL_STATE, action) => {
+  const { type, payload } = action
+
+  switch (type) {
+    case AT.SET_WALLET_TOUR_VISIBILITY: {
+      return assoc('showWalletTour', payload, state)
+    }
+
+    default:
+      return state
+  }
+}

packages/blockchain-wallet-v4-frontend/src/data/components/onboarding/selectors.js

@@ -0,0 +1,7 @@
+import { path } from 'ramda'
+
+export const getWalletTourVisibility = path([
+  'components',
+  'onboarding',
+  'showWalletTour'
+])

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

@@ -1,11 +1,12 @@
 import { combineReducers } from 'redux'
 import coinify from './coinify/reducers'
-import identityVerification from './identityVerification/reducers'
 import exchange from './exchange/reducers'
-import lockbox from './lockbox/reducers'
 import exchangeHistory from './exchangeHistory/reducers'
+import identityVerification from './identityVerification/reducers'
 import layoutWallet from './layoutWallet/reducers'
+import lockbox from './lockbox/reducers'
 import manageAddresses from './manageAddresses/reducers'
+import onboarding from './onboarding/reducers'
 import onfido from './onfido/reducers'
 import priceChart from './priceChart/reducers'
 import send from './send/reducers'
@@ -19,12 +20,13 @@ import veriff from './veriff/reducers'
 
 export default combineReducers({
   coinify,
-  identityVerification,
   exchange,
   exchangeHistory,
+  identityVerification,
   layoutWallet,
   lockbox,
   manageAddresses,
+  onboarding,
   onfido,
   priceChart,
   send,

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

@@ -1,10 +1,11 @@
 import * as coinify from './coinify/selectors'
-import * as identityVerification from './identityVerification/selectors'
 import * as exchange from './exchange/selectors'
 import * as exchangeHistory from './exchangeHistory/selectors'
+import * as identityVerification from './identityVerification/selectors'
 import * as layoutWallet from './layoutWallet/selectors'
 import * as lockbox from './lockbox/selectors'
 import * as manageAddresses from './manageAddresses/selectors'
+import * as onboarding from './onboarding/selectors'
 import * as onfido from './onfido/selectors'
 import * as priceChart from './priceChart/selectors'
 import * as priceTicker from './priceTicker/selectors'
@@ -19,12 +20,13 @@ import * as veriff from './veriff/selectors'
 
 export {
   coinify,
-  identityVerification,
   exchange,
   exchangeHistory,
+  identityVerification,
   layoutWallet,
   lockbox,
   manageAddresses,
+  onboarding,
   onfido,
   priceChart,
   priceTicker,

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

@@ -467,7 +467,8 @@ export default ({ api }) => {
       sunriver,
       swapGetStarted,
       swapUpgrade,
-      upgradeForAirdrop
+      upgradeForAirdrop,
+      welcome
     } = initialModals
     if (linkAccount) {
       return yield put(
@@ -511,6 +512,9 @@ export default ({ api }) => {
     if (airdropClaim) {
       return yield put(actions.modals.showModal(airdropClaim.name))
     }
+    if (welcome) {
+      return yield put(actions.modals.showModal(welcome.name, welcome.data))
+    }
   }
 
   const runGoal = function * (goal) {

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

@@ -87,7 +87,11 @@ const Navigation = props => {
       </LinkContainer>
       <LinkContainer to='/buy-sell' activeClassName='active'>
         <MenuItem data-e2e='buyAndSellLink'>
-          <MenuIcon name='cart-filled' size='24px' />
+          <MenuIcon
+            className='wallet-intro-tour-step-5'
+            name='cart-filled'
+            size='24px'
+          />
           <Destination>
             <FormattedMessage
               id='layouts.wallet.menuleft.navigation.buysell'
@@ -99,7 +103,11 @@ const Navigation = props => {
       </LinkContainer>
       <LinkContainer to='/swap' activeClassName='active'>
         <MenuItem data-e2e='exchangeLink'>
-          <MenuIcon name='thick-arrow-switch' size='24px' />
+          <MenuIcon
+            className='wallet-intro-tour-step-4'
+            name='thick-arrow-switch'
+            size='24px'
+          />
           {/* SwapOrTradeTest */}
           <Destination>
             {swapOrTrade !== 'trade' ? (

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Actions/template.js

@@ -43,6 +43,7 @@ const Actions = ({ showModal, sendAvailable, requestAvailable }) => (
       min='100px'
       data-e2e='sendButton'
       height='48px'
+      customClass='wallet-intro-tour-step-3'
     >
       <ButtonText size='16px' weight={600} color='brand-primary'>
         <FormattedMessage
@@ -59,6 +60,7 @@ const Actions = ({ showModal, sendAvailable, requestAvailable }) => (
       min='100px'
       data-e2e='requestButton'
       height='48px'
+      customClass='wallet-intro-tour-step-2'
     >
       <ButtonText size='16px' weight={600} color='brand-primary'>
         <FormattedMessage

packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/Welcome/index.js

@@ -1,11 +1,33 @@
-import React from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators, compose } from 'redux'
+import React, { PureComponent } from 'react'
+
 import modalEnhancer from 'providers/ModalEnhancer'
-import Welcome from './template.js'
+import { actions } from 'data'
+
+import Welcome from './template'
+
+class WelcomeContainer extends PureComponent {
+  takeTour = () => {
+    this.props.close()
+    this.props.onboardingActions.setWalletTourVisibility(true)
+  }
 
-class WelcomeContainer extends React.PureComponent {
   render () {
-    return <Welcome {...this.props} />
+    return <Welcome takeTour={this.takeTour} {...this.props} />
   }
 }
 
-export default modalEnhancer('Welcome')(WelcomeContainer)
+const mapDispatchToProps = dispatch => ({
+  onboardingActions: bindActionCreators(actions.components.onboarding, dispatch)
+})
+
+const enhance = compose(
+  modalEnhancer('Welcome'),
+  connect(
+    null,
+    mapDispatchToProps
+  )
+)
+
+export default enhance(WelcomeContainer)