feat(New nav): add ad

Author: plondon

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

@@ -125,3 +125,7 @@ export const GENERAL_EVENTS = {
   VIEW_WHATS_NEW: ['general', 'view_whats_new'],
   VIEW_FAQ: ['general', 'view_faq']
 }
+
+export const ADS_EVENTS = {
+  CLICK_AD: ['navigation', 'click_ad']
+}

packages/blockchain-wallet-v4-frontend/src/layouts/Public/Header/LoginOrCreate/index.js

@@ -1,18 +1,32 @@
 import React from 'react'
+import styled from 'styled-components'
 import { contains } from 'ramda'
 import { FormattedMessage } from 'react-intl'
 import { withRouter } from 'react-router-dom'
 import { LinkContainer } from 'react-router-bootstrap'
 import { Button, Link, Text, TextGroup } from 'blockchain-info-components'
 import media from 'services/ResponsiveService'
 
+const ResponsiveText = styled(Text)`
+  font-size: 14px;
+  ${media.mobile`
+    font-size: 12px;
+  `}
+`
+const ResponsiveLink = styled(Link)`
+  font-size: 14px;
+  ${media.mobile`
+    font-size: 12px;
+  `}
+`
+
 const LoginOrCreate = props => {
   const { pathname } = props.location
   const isSignup = contains('/signup', pathname)
   return (
     <LinkContainer to={isSignup ? '/login' : '/signup'}>
       <TextGroup inline>
-        <Text size={media.mobile ? '12px' : '14px'} color='white' weight={500}>
+        <ResponsiveText color='white' weight={500}>
           {isSignup ? (
             <FormattedMessage
               id='layouts.public.alreadyhave'
@@ -24,14 +38,13 @@ const LoginOrCreate = props => {
               defaultMessage="Don't have a wallet?"
             />
           )}
-        </Text>
+        </ResponsiveText>
         <Button
           nature='white-transparent'
           style={{ minWidth: '42px', marginLeft: '8px', borderWidth: '2px' }}
         >
           {isSignup ? (
-            <Link
-              size={media.mobile ? '12px' : '14px'}
+            <ResponsiveLink
               color='white'
               weight={600}
               data-e2e='signupLinkToLogin'
@@ -40,19 +53,14 @@ const LoginOrCreate = props => {
                 id='layouts.public.login'
                 defaultMessage='Log In'
               />
-            </Link>
+            </ResponsiveLink>
           ) : (
-            <Link
-              size={media.mobile ? '12px' : '14px'}
-              color='white'
-              weight={600}
-              data-e2e='signupLink'
-            >
+            <ResponsiveLink color='white' weight={600} data-e2e='signupLink'>
               <FormattedMessage
                 id='layouts.public.register'
                 defaultMessage='Create One Now'
               />
-            </Link>
+            </ResponsiveLink>
           )}
         </Button>
       </TextGroup>

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

@@ -0,0 +1,66 @@
+import React from 'react'
+import styled from 'styled-components'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { actions, model } from 'data'
+import { Button, Icon, Link, Text } from 'blockchain-info-components'
+import { FormattedMessage, FormattedHTMLMessage } from 'react-intl'
+
+const { ADS_EVENTS } = model.analytics
+
+const Wrapper = styled.div`
+  text-align: center;
+`
+const AdsButton = styled(Button)`
+  margin: 8px auto 0px auto;
+  span > span {
+    color: ${props => props.theme['blue']};
+  }
+`
+const ButtonText = styled(Text)`
+  display: flex;
+  white-space: nowrap;
+`
+const ArrowIcon = styled(Icon)`
+  margin-left: 4px;
+`
+
+const Footer = ({ actions }) => {
+  return (
+    <Wrapper>
+      <Text color='gray-3' size='12px' weight={500}>
+        <FormattedMessage
+          id='layouts.wallet.menuleft.footer.ad'
+          defaultMessage='Ad by bitcoin.com'
+        />
+      </Text>
+      <AdsButton
+        height='48px'
+        onClick={() => actions.logEvent(ADS_EVENTS.CLICK_AD)}
+      >
+        <Link
+          href='https://games.bitcoin.com/videopoker?cma=201906_blockchainwallet&utm_campaign=201906_blockchainwallet&utm_source=blockchainwallet&utm_medium=banner'
+          rel='noopener noreferrer'
+          target='_blank'
+        >
+          <ButtonText color='gray-4' size='14px' weight={500}>
+            <FormattedHTMLMessage
+              id='layouts.wallet.menuleft.footer.bitcoingames'
+              defaultMessage='Bitcoin Games. <span>Play Now</span>'
+            />
+            <ArrowIcon name='short-right-arrow' color='blue' />
+          </ButtonText>
+        </Link>
+      </AdsButton>
+    </Wrapper>
+  )
+}
+
+const mapDispatchToProps = dispatch => ({
+  actions: bindActionCreators(actions.analytics, dispatch)
+})
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(Footer)

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
 import Navigation from './Navigation'
+import Footer from './Footer'
 
 export const Container = styled.div`
   display: flex;
@@ -43,6 +44,7 @@ const MenuLeft = props => (
   <Container toggled={props.menuOpened}>
     <Overflow>
       <Navigation {...props} />
+      <Footer />
     </Overflow>
   </Container>
 )