feat(whats-new-wallet-tour): Added option to take wallet tour by clic…

…king what's new

packages/blockchain-wallet-v4-frontend/src/services/WhatsNewService/WhatsNewContent/WalletTour.js

@@ -0,0 +1,81 @@
+import React from 'react'
+import styled from 'styled-components'
+import { connect } from 'react-redux'
+import { FormattedMessage } from 'react-intl'
+import { Button, Text } from 'blockchain-info-components'
+import { Container, Row } from 'components/WhatsNew'
+import { bindActionCreators } from 'redux'
+
+import media from 'services/ResponsiveService'
+import { actions } from 'data'
+
+const DarkText = styled(Text).attrs({
+  color: 'gray-5',
+  size: '16px',
+  weight: 300
+})`
+  display: inline;
+  ${media.laptop`
+    display: ${props => (props.hideOnMobile ? 'none' : 'inline')};
+  `};
+`
+const GetStartedButton = styled(Button).attrs({
+  nature: 'primary',
+  fullwidth: true
+})`
+  font-weight: 500;
+  ${media.laptop`
+    width: 100%;
+  `};
+`
+
+const WalletTour = ({ onRightTrayClose, onTakeTour }) => {
+  const onTakeWalletTour = () => {
+    onRightTrayClose()
+    onTakeTour()
+  }
+  return (
+    <Container>
+      <Row marginBottom='10px'>
+        <Text color='brand-primary' size='24px' weight={600}>
+          <FormattedMessage
+            defaultMessage='Wallet Tour'
+            id='layouts.wallet.trayright.whatsnew.whatsnewcontent.wallet.tour'
+          />
+        </Text>
+      </Row>
+      <Row marginBottom='24px'>
+        <DarkText>
+          <FormattedMessage
+            defaultMessage="Welcome to your Wallet.  Discover your Wallet's tools and features by taking a quick tour."
+            id='layouts.wallet.trayright.whatsnew.whatsnewcontent.wallet.tour.content'
+          />
+        </DarkText>
+      </Row>
+      <Row>
+        <GetStartedButton onClick={onTakeWalletTour}>
+          <FormattedMessage
+            id='layouts.wallet.trayright.whatsnew.whatsnewcontent.wallet.tour.start'
+            defaultMessage='Take The Tour Now'
+          />
+        </GetStartedButton>
+      </Row>
+    </Container>
+  )
+}
+
+const mapDispatchToProps = dispatch => ({
+  onRightTrayClose: bindActionCreators(
+    actions.components.layoutWallet.layoutWalletTrayCloseClicked,
+    dispatch
+  ),
+  onTakeTour: bindActionCreators(
+    actions.components.onboarding.takeWalletTourClicked,
+    dispatch
+  )
+})
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(WalletTour)

packages/blockchain-wallet-v4-frontend/src/services/WhatsNewService/WhatsNewContent/index.js

@@ -1,10 +1,18 @@
 import React from 'react'
 import { prop, contains } from 'ramda'
 import moment from 'moment'
-import USDPax from './USDPax'
+
 import ExchangeByBlockchain from './ExchangeByBlockchain'
+import USDPax from './USDPax'
+import WalletTour from './WalletTour'
 
 const Announcements = [
+  {
+    content: <WalletTour />,
+    date: new Date('September 9 2019'),
+    restrictByCountry: [],
+    restrictByUserKyc: []
+  },
   {
     content: <USDPax />,
     date: new Date('April 30 2019'),
@@ -33,10 +41,12 @@ export const filterAnnouncements = (lastViewed, userCountry, userKycState) => {
       moment()
     )
 
-  return Announcements.map(announcement => ({
-    content: prop('content', announcement),
-    restricted: isRestricted(announcement),
-    display: isAvailableToView(announcement.date, 30),
-    alert: isAvailableToView(announcement.date, 0)
-  }))
+  return Announcements.map(announcement => {
+    return {
+      content: prop('content', announcement),
+      restricted: isRestricted(announcement),
+      display: isAvailableToView(announcement.date, 30),
+      alert: isAvailableToView(announcement.date, 0)
+    }
+  })
 }