feat(intro-tour): added alert for when user clicks maybe later

blockchain · Aug 30, 2019 · bbd1fe3 · bbd1fe3
1 parent 2d7c2d9
commit bbd1fe3
Show file tree

Hide file tree

Showing 12 changed files with 159 additions and 53 deletions.
diff --git a/packages/blockchain-info-components/src/Colors/Default.js b/packages/blockchain-info-components/src/Colors/Default.js
@@ -130,6 +130,7 @@ export default {
   blue: '#0C6CF2',
   // Colors
   red: '#D93B30',
+  orange000: '#FFF2E5',
   orange: '#F28B24',
   // Service Announcements
   info: '#4A90E2',

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Alerts/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Alerts/index.js
@@ -4,14 +4,10 @@ import { connect } from 'react-redux'
 import { actions, selectors } from 'data'
 import Alerts from './template.js'
 
-class AlertsContainer extends React.PureComponent {
-  handleClose = id => {
-    this.props.alertActions.dismissAlert(id)
-  }
-
-  render () {
-    return <Alerts alerts={this.props.alerts} handleClose={this.handleClose} />
-  }
+const AlertsContainer = ({ alerts, alertActions, onboardingActions }) => {
+  return (
+    <Alerts alerts={alerts} handleClose={id => alertActions.dismissAlert(id)} />
+  )
 }
 
 const mapStateToProps = state => ({

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Alerts/messages.js b/packages/blockchain-wallet-v4-frontend/src/components/Alerts/messages.js
@@ -31,7 +31,7 @@ const buildMessageTemplate = messageText => (
   </Text>
 )
 
-export const getAlertContent = (message, data = undefined) => {
+export const getAlertContent = (message, data = undefined, handleClose, id) => {
   switch (message) {
     case C.ETH_LOW_BALANCE_WARNING:
       return (
@@ -724,6 +724,53 @@ export const getAlertContent = (message, data = undefined) => {
           values={data}
         />
       )
+    case C.SKIP_WALLET_TOUR_SUCCESS:
+      const SkipWalletTourIcon = styled(Icon)`
+        background-color: ${({ theme }) => theme.orange000};
+        border-radius: 50%;
+        align-items: center;
+        justify-content: center;
+        height: 40px;
+        width: 40px;
+      `
+      return (
+        <Content>
+          <IconColumn>
+            <SkipWalletTourIcon size='24px' name='bell' color='orange' />
+          </IconColumn>
+          <ContentColumn>
+            <Text size='14px' weight='600' data-e2e='skipWalletTourAlert'>
+              <FormattedMessage
+                id='components.alerts.wallet_tour_header'
+                defaultMessage='Wallet Intro Tour'
+              />
+            </Text>
+            <TextGroup inline>
+              <Text size='12px' weight='500'>
+                <FormattedMessage
+                  id='components.alerts.wallet_tour_info'
+                  defaultMessage="We've saved your Intro Tour under the What's New tab in case you ever want to revisit."
+                />
+              </Text>
+              <Text>
+                <Link
+                  weight={500}
+                  size='12px'
+                  onClick={() => {
+                    data.startTour(true)
+                    handleClose(id)
+                  }}
+                >
+                  <FormattedMessage
+                    id='components.alerts.wallet_tour_start'
+                    defaultMessage='Start Tour'
+                  />
+                </Link>
+              </Text>
+            </TextGroup>
+          </ContentColumn>
+        </Content>
+      )
     case C.SMS_RESEND_ERROR:
       return buildMessageTemplate(
         <FormattedMessage

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Alerts/template.js b/packages/blockchain-wallet-v4-frontend/src/components/Alerts/template.js
@@ -43,7 +43,7 @@ const Alerts = props => {
             persist={persist}
             onClose={() => handleClose(id)}
           >
-            {getAlertContent(message, data)}
+            {getAlertContent(message, data, handleClose, id)}
           </Toast>
         )
       })}

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/analytics/model.js b/packages/blockchain-wallet-v4-frontend/src/data/analytics/model.js
@@ -127,6 +127,8 @@ export const AB_TESTS = {
 }
 
 export const GENERAL_EVENTS = {
+  SKIP_WALLET_TOUR: ['general', 'skip_wallet_tour'],
+  TAKE_WALLET_TOUR: ['general', 'take_wallet_tour'],
   VIEW_WHATS_NEW: ['general', 'view_whats_new'],
   VIEW_FAQ: ['general', 'view_faq']
 }

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/onboarding/actionTypes.js b/packages/blockchain-wallet-v4-frontend/src/data/components/onboarding/actionTypes.js
@@ -4,13 +4,17 @@ export const AIRDROP_CLAIM_SUBMIT_CLICKED =
 export const AIRDROP_REMINDER_SUBMIT_CLICKED =
   '@EVENT.AIRDROP_REMINDER_SUBMIT_CLICKED'
 
+export const COINIFY_UPGRADE_SUBMIT_CLICKED =
+  '@EVENT.COINIFY_UPGRADE_SUBMIT_CLICKED'
+
+export const SET_WALLET_TOUR_VISIBILITY = '@EVENT.SET_WALLET_TOUR_VISIBILITY'
+
+export const SKIP_WALLET_TOUR_CLICKED = '@EVENT.SKIP_WALLET_TOUR_CLICKED'
+
 export const SWAP_GET_STARTED_SUBMIT_CLICKED =
   '@EVENT.SWAP_GET_STARTED_SUBMIT_CLICKED'
 
+export const TAKE_WALLET_TOUR_CLICKED = '@EVENT.TAKE_WALLET_TOUR_CLICKED'
+
 export const UPGRADE_FOR_AIRDROP_SUBMIT_CLICKED =
   '@EVENT.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'
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/onboarding/actions.js b/packages/blockchain-wallet-v4-frontend/src/data/components/onboarding/actions.js
@@ -5,15 +5,6 @@ export const airdropClaimSubmitClicked = campaign => ({
   payload: { campaign }
 })
 
-export const swapGetStartedSubmitClicked = () => ({
-  type: AT.SWAP_GET_STARTED_SUBMIT_CLICKED
-})
-
-export const upgradeForAirdropSubmitClicked = campaign => ({
-  type: AT.UPGRADE_FOR_AIRDROP_SUBMIT_CLICKED,
-  payload: { campaign }
-})
-
 export const coinifyUpgradeSubmitClicked = campaign => ({
   type: AT.COINIFY_UPGRADE_SUBMIT_CLICKED,
   payload: { campaign }
@@ -23,3 +14,21 @@ export const setWalletTourVisibility = visibility => ({
   type: AT.SET_WALLET_TOUR_VISIBILITY,
   payload: visibility
 })
+
+export const skipWalletTourClicked = startTourCallback => ({
+  payload: { startTourCallback },
+  type: AT.SKIP_WALLET_TOUR_CLICKED
+})
+
+export const swapGetStartedSubmitClicked = () => ({
+  type: AT.SWAP_GET_STARTED_SUBMIT_CLICKED
+})
+
+export const takeWalletTourClicked = () => ({
+  type: AT.TAKE_WALLET_TOUR_CLICKED
+})
+
+export const upgradeForAirdropSubmitClicked = campaign => ({
+  type: AT.UPGRADE_FOR_AIRDROP_SUBMIT_CLICKED,
+  payload: { campaign }
+})
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/onboarding/sagaRegister.js b/packages/blockchain-wallet-v4-frontend/src/data/components/onboarding/sagaRegister.js
@@ -6,21 +6,29 @@ export default () => {
   const onboardingSagas = sagas()
 
   return function * swapGetStartedSaga () {
+    yield takeLatest(
+      AT.AIRDROP_CLAIM_SUBMIT_CLICKED,
+      onboardingSagas.airdropClaimSubmitClicked
+    )
+    yield takeLatest(
+      AT.COINIFY_UPGRADE_SUBMIT_CLICKED,
+      onboardingSagas.coinifyUpgradeSubmitClicked
+    )
+    yield takeLatest(
+      AT.SKIP_WALLET_TOUR_CLICKED,
+      onboardingSagas.skipWalletTourClicked
+    )
     yield takeLatest(
       AT.SWAP_GET_STARTED_SUBMIT_CLICKED,
       onboardingSagas.swapGetStartedSubmitClicked
     )
     yield takeLatest(
-      AT.AIRDROP_CLAIM_SUBMIT_CLICKED,
-      onboardingSagas.airdropClaimSubmitClicked
+      AT.TAKE_WALLET_TOUR_CLICKED,
+      onboardingSagas.takeWalletTourClicked
     )
     yield takeLatest(
       AT.UPGRADE_FOR_AIRDROP_SUBMIT_CLICKED,
       onboardingSagas.upgradeForAirdropSubmitClicked
     )
-    yield takeLatest(
-      AT.COINIFY_UPGRADE_SUBMIT_CLICKED,
-      onboardingSagas.coinifyUpgradeSubmitClicked
-    )
   }
 }
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/onboarding/sagas.js b/packages/blockchain-wallet-v4-frontend/src/data/components/onboarding/sagas.js
@@ -1,5 +1,8 @@
 import { put, delay, take } from 'redux-saga/effects'
-import { actions, actionTypes } from 'data'
+import { actions, actionTypes, model } from 'data'
+
+import * as C from '/services/AlertService'
+const { GENERAL_EVENTS } = model.analytics
 
 export const logLocation = 'components/onboarding/sagas'
 
@@ -28,45 +31,73 @@ export default () => {
     }
   }
 
-  const swapGetStartedSubmitClicked = function * () {
+  const coinifyUpgradeSubmitClicked = function * ({ payload }) {
+    const { campaign } = payload
     try {
-      yield put(actions.preferences.hideKycGetStarted())
       yield put(actions.modals.closeModal())
-      yield put(actions.components.identityVerification.verifyIdentity())
+      yield put(actions.modules.profile.setCampaign({ name: campaign }))
+      yield put(
+        actions.components.identityVerification.createRegisterUserCampaign()
+      )
     } catch (e) {
       yield put(
         actions.logs.logErrorMessage(
           logLocation,
-          'swapGetStartedSubmitClicked',
+          'coinifyUpgradeSubmitClicked',
           e
         )
       )
     }
   }
 
-  const upgradeForAirdropSubmitClicked = function * ({ payload }) {
-    const { campaign } = payload
+  const skipWalletTourClicked = function * (action) {
     try {
-      yield put(actions.preferences.hideUpgradeForAirdropModal())
+      yield put(
+        actions.alerts.displayInfo(C.SKIP_WALLET_TOUR_SUCCESS, {
+          startTour: action.payload.startTourCallback
+        })
+      )
+      yield put(actions.analytics.logEvent(GENERAL_EVENTS.SKIP_WALLET_TOUR))
       yield put(actions.modals.closeModal())
-      yield put(actions.modules.profile.setCampaign({ name: campaign }))
+    } catch (e) {
       yield put(
-        actions.components.identityVerification.createRegisterUserCampaign()
+        actions.logs.logErrorMessage(logLocation, 'skipWalletTourClicked', e)
       )
+    }
+  }
+
+  const swapGetStartedSubmitClicked = function * () {
+    try {
+      yield put(actions.preferences.hideKycGetStarted())
+      yield put(actions.modals.closeModal())
+      yield put(actions.components.identityVerification.verifyIdentity())
     } catch (e) {
       yield put(
         actions.logs.logErrorMessage(
           logLocation,
-          'upgradeForAirdropSubmitClicked',
+          'swapGetStartedSubmitClicked',
           e
         )
       )
     }
   }
 
-  const coinifyUpgradeSubmitClicked = function * ({ payload }) {
+  const takeWalletTourClicked = function * () {
+    try {
+      yield put(actions.modals.closeModal())
+      yield put(actions.components.onboarding.setWalletTourVisibility(true))
+      yield put(actions.analytics.logEvent(GENERAL_EVENTS.TAKE_WALLET_TOUR))
+    } catch (e) {
+      yield put(
+        actions.logs.logErrorMessage(logLocation, 'takeWalletTourClicked', e)
+      )
+    }
+  }
+
+  const upgradeForAirdropSubmitClicked = function * ({ payload }) {
     const { campaign } = payload
     try {
+      yield put(actions.preferences.hideUpgradeForAirdropModal())
       yield put(actions.modals.closeModal())
       yield put(actions.modules.profile.setCampaign({ name: campaign }))
       yield put(
@@ -76,7 +107,7 @@ export default () => {
       yield put(
         actions.logs.logErrorMessage(
           logLocation,
-          'coinifyUpgradeSubmitClicked',
+          'upgradeForAirdropSubmitClicked',
           e
         )
       )
@@ -86,7 +117,9 @@ export default () => {
   return {
     airdropClaimSubmitClicked,
     coinifyUpgradeSubmitClicked,
+    skipWalletTourClicked,
     swapGetStartedSubmitClicked,
+    takeWalletTourClicked,
     upgradeForAirdropSubmitClicked
   }
 }
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/Welcome/index.js b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/Welcome/index.js
@@ -8,13 +8,18 @@ import { actions } from 'data'
 import Welcome from './template'
 
 class WelcomeContainer extends PureComponent {
-  takeTour = () => {
-    this.props.close()
-    this.props.onboardingActions.setWalletTourVisibility(true)
-  }
-
   render () {
-    return <Welcome takeTour={this.takeTour} {...this.props} />
+    const {
+      skipWalletTourClicked,
+      takeWalletTourClicked
+    } = this.props.onboardingActions
+    return (
+      <Welcome
+        onSkipTour={() => skipWalletTourClicked(takeWalletTourClicked)}
+        onTakeTour={() => takeWalletTourClicked()}
+        {...this.props}
+      />
+    )
   }
 }
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/Welcome/template.js b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/Welcome/template.js
@@ -90,11 +90,11 @@ const Container = styled.div`
 `
 
 const Welcome = props => {
-  const { position, total, close, takeTour } = props
+  const { position, total, onSkipTour, onTakeTour } = props
 
   return (
     <Modal size='medium' position={position} total={total}>
-      <WelcomeModalHeader onClose={close} />
+      <WelcomeModalHeader onClose={onSkipTour} />
       <WelcomeModalBody>
         <Container>
           <BodyHeader>
@@ -157,7 +157,7 @@ const Welcome = props => {
           <Button
             nature='primary'
             fullwidth
-            onClick={takeTour}
+            onClick={onTakeTour}
             data-e2e='takeTourButton'
             size='16px'
           >
@@ -168,7 +168,7 @@ const Welcome = props => {
           </Button>
           <Button
             fullwidth
-            onClick={close}
+            onClick={onSkipTour}
             data-e2e='maybeLaterButton'
             size='16px'
           >

diff --git a/packages/blockchain-wallet-v4-frontend/src/services/AlertService/index.js b/packages/blockchain-wallet-v4-frontend/src/services/AlertService/index.js
@@ -92,6 +92,7 @@ export const SECOND_PASSWORD_ENABLED_SUCCESS = 'second_password_enabled'
 export const SECOND_PASSWORD_DISABLED_SUCCESS = 'second_password_disabled'
 export const SEND_COIN_SUCCESS = 'send_coin_success'
 export const SEND_COIN_ERROR = 'send_coin_error'
+export const SKIP_WALLET_TOUR_SUCCESS = 'skip_wallet_tour_success'
 export const SMS_RESEND_ERROR = 'sms_resend_error'
 export const SMS_RESEND_SUCCESS = 'sms_resend_success'
 export const SWEEP_ERROR = 'sweep_error'