feat(Airdrop): add tour card

blockchain · Nov 21, 2019 · 25fc5b4 · 25fc5b4
1 parent 9b5eb62
commit 25fc5b4
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 17 deletions.
diff --git a/packages/blockchain-info-components/src/Buttons/Button.js b/packages/blockchain-info-components/src/Buttons/Button.js
@@ -145,6 +145,12 @@ const selectColor = (nature, disabled, small) => {
         color: 'white',
         borderColor: 'white'
       }
+    case 'green':
+      return {
+        color: 'white',
+        backgroundColor: 'green600',
+        borderColor: 'green600'
+      }
     default:
       return {
         color: 'gray-6',

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/analytics/model.js b/packages/blockchain-wallet-v4-frontend/src/data/analytics/model.js
@@ -85,7 +85,13 @@ export const GENERAL_EVENTS = {
     'general',
     'wallet_intro_tour',
     'step_view_buysell'
-  ]
+  ],
+  WALLET_INTRO_THE_PIT_VIEWED: [
+    'general',
+    'wallet_intro_tour',
+    'step_view_the_pit'
+  ],
+  WALLET_INTRO_AIRDROPS: ['general', 'wallet_intro_tour', 'step_view_airdrops']
 }
 
 export const ADS_EVENTS = {

diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Navigation/template.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Navigation/template.js
@@ -91,6 +91,26 @@ const Navigation = props => {
           </Destination>
         </MenuItem>
       </SpotlightLinkContainer>
+      <SpotlightLinkContainer to='/airdrops' activeClassName='active'>
+        <MenuItem data-e2e='airdropLink'>
+          <JoyrideSpotlight className='airdrop-tooltip' />
+          <MenuIcon name='parachute' size='24px' />
+          <Destination>
+            <FormattedMessage
+              id='layouts.wallet.menuleft.navigation.airdrops'
+              defaultMessage='Airdrops'
+            />
+          </Destination>
+          <NewCartridge>
+            <Text color='orange' size='12' weight={500} uppercase>
+              <FormattedMessage
+                id='layouts.wallet.menuleft.navigation.transactions.new'
+                defaultMessage='New'
+              />
+            </Text>
+          </NewCartridge>
+        </MenuItem>
+      </SpotlightLinkContainer>
       <LinkContainer to='/lockbox' activeClassName='active'>
         <MenuItem data-e2e='lockboxLink'>
           <MenuIcon

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Airdrops/index.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Airdrops = () => {
+  return <div>Airdrop Page</div>
+}
+
+export default Airdrops
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/model.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/model.js
@@ -19,6 +19,7 @@ const { GENERAL_EVENTS } = model.analytics
 
 const TourTooltipComponent = ({
   analyticsActions,
+  routerActions,
   index,
   isLastStep,
   primaryProps,
@@ -58,12 +59,20 @@ const TourTooltipComponent = ({
         analyticsActions.logEvent(GENERAL_EVENTS.WALLET_INTRO_BUYSELL_VIEWED)
         break
       case 5:
-        setFooterButtonDataE2e('closeWalletTour')
+        setFooterButtonDataE2e('showWalletTourAirdrops')
         setTourTooltipDataE2e('walletTourThePit')
+        analyticsActions.logEvent(GENERAL_EVENTS.WALLET_INTRO_THE_PIT_VIEWED)
+        break
+      case 6:
+        setFooterButtonDataE2e('closeWalletTour')
+        setTourTooltipDataE2e('walletTourAirdrops')
+        analyticsActions.logEvent(GENERAL_EVENTS.WALLET_INTRO_AIRDROPS)
         break
     }
   }, [index])
 
+  const isAirdropStep = index === 6
+
   return (
     <TooltipBody {...tooltipProps} data-e2e={tourTooltipDataE2e}>
       <CloseTourIcon
@@ -76,20 +85,40 @@ const TourTooltipComponent = ({
       />
       {step.content && <TooltipContent>{step.content}</TooltipContent>}
       <TooltipFooter isLastStep={isLastStep}>
-        <Button
-          data-e2e={footerButtonDataE2e}
-          width='110px'
-          height='48px'
-          nature='primary'
-          fullwidth
-          {...primaryProps}
-        >
-          {isLastStep ? (
-            <FormattedMessage id='wallet.tour.finish' defaultMessage='Close' />
-          ) : (
-            <FormattedMessage id='wallet.tour.next' defaultMessage='Next' />
-          )}
-        </Button>
+        {isAirdropStep ? (
+          <Button
+            data-e2e={footerButtonDataE2e}
+            width='110px'
+            height='48px'
+            nature='green'
+            fullwidth
+            {...primaryProps}
+            onClick={() => routerActions.push('/airdrops')}
+          >
+            <FormattedMessage
+              id='wallet.tour.checkitout'
+              defaultMessage='Check It Out'
+            />
+          </Button>
+        ) : (
+          <Button
+            data-e2e={footerButtonDataE2e}
+            width='110px'
+            height='48px'
+            nature='primary'
+            fullwidth
+            {...primaryProps}
+          >
+            {isLastStep ? (
+              <FormattedMessage
+                id='wallet.tour.finish'
+                defaultMessage='Close'
+              />
+            ) : (
+              <FormattedMessage id='wallet.tour.next' defaultMessage='Next' />
+            )}
+          </Button>
+        )}
       </TooltipFooter>
     </TooltipBody>
   )
@@ -227,11 +256,34 @@ export const TOUR_STEPS = [
     ),
     disableBeacon: true,
     placement: 'right'
+  },
+  {
+    target: '.airdrop-tooltip',
+    content: (
+      <>
+        <StepIcon name='parachute' size='56px' color='green600' />
+        <StepTitle size='20px' weight={600}>
+          <FormattedMessage
+            id='the.airdrop.tooltip.title'
+            defaultMessage='Our Latest Airdrop is Here!'
+          />
+        </StepTitle>
+        <StepContent color='grey600' size='14px' weight={500}>
+          <FormattedMessage
+            id='wallettour.airdrop.tooltip.stx'
+            defaultMessage='Our latest airdrop with Blockstack is here. Secure your free Stacks (STX) today.'
+          />
+        </StepContent>
+      </>
+    ),
+    disableBeacon: true,
+    placement: 'right'
   }
 ]
 
 const mapDispatchToProps = dispatch => ({
-  analyticsActions: bindActionCreators(actions.analytics, dispatch)
+  analyticsActions: bindActionCreators(actions.analytics, dispatch),
+  routerActions: bindActionCreators(actions.router, dispatch)
 })
 
 export const TourTooltip = connect(

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/app.js b/packages/blockchain-wallet-v4-frontend/src/scenes/app.js
@@ -8,6 +8,7 @@ import { PersistGate } from 'redux-persist/integration/react'
 import { Redirect, Switch } from 'react-router-dom'
 import { selectors } from 'data'
 import Addresses from './Settings/Addresses'
+import Airdrops from './Airdrops'
 import AnalyticsTracker from 'providers/AnalyticsTracker'
 import AuthorizeLogin from './AuthorizeLogin'
 import BuySell from './BuySell'
@@ -116,6 +117,7 @@ class App extends React.PureComponent {
                     />
                     <WalletLayout path='/swap' component={Exchange} exact />
                     <WalletLayout path='/thepit' component={ThePit} />
+                    <WalletLayout path='/airdrops' component={Airdrops} />
                     <WalletLayout
                       path='/security-center'
                       component={SecurityCenter}