fix(Swap): go to exchange buttons for banner and what's new

packages/blockchain-wallet-v4-frontend/src/components/TransactionListItem/__snapshots__/index.spec.js.snap

@@ -44,6 +44,7 @@ exports[`ListItemContainer renders correctly 1`] = `
       Object {
         "hideKycCompleted": [Function],
         "hideKycGetStarted": [Function],
+        "hideSwapBanner": [Function],
         "setCoinShowIntro": [Function],
         "setCulture": [Function],
         "setLanguage": [Function],

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

@@ -1,4 +1,4 @@
-import { map, prop, startsWith, sum, values } from 'ramda'
+import { equals, map, prop, startsWith, sum, values } from 'ramda'
 import { all, call, join, put, select, spawn, take } from 'redux-saga/effects'
 import base64 from 'base-64'
 import bip21 from 'bip21'
@@ -9,6 +9,8 @@ import * as C from 'services/AlertService'
 import { getBtcBalance, getAllBalances } from 'data/balance/sagas'
 
 export default ({ api }) => {
+  const { NONE } = model.profile.KYC_STATES
+
   const logLocation = 'goals/sagas'
 
   const defineReferralGoal = function*(search) {
@@ -106,7 +108,12 @@ export default ({ api }) => {
     // check/wait for balances to be available
     const balances = yield call(getAllBalances)
     const isFunded = sum(values(balances)) !== 0
-    if (isFunded)
+    const kycNotFinished = (yield select(
+      selectors.modules.profile.getUserKYCState
+    ))
+      .map(equals(NONE))
+      .getOrElse(false)
+    if (isFunded && kycNotFinished)
       yield put(actions.goals.addInitialModal('swap', 'SwapGetStarted'))
   }
 

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

@@ -1,9 +1,11 @@
-export const SET_CULTURE = 'SET_CULTURE'
-export const SET_LANGUAGE = 'SET_LANGUAGE'
-export const SET_THEME = 'SET_THEME'
-export const TOGGLE_COIN_DISPLAY = 'TOGGLE_COIN_DISPLAY'
-export const SET_COIN_SHOW_INTRO = 'SET_COIN_SHOW_INTRO'
-export const HIDE_KYC_COMPLETED = 'HIDE_KYC_COMPLETED'
-export const SET_TOTAL_BALANCES_DROPDOWN = 'SET_TOTAL_BALANCES_DROPDOWN'
+export const SET_CULTURE = '@DATA.PREFERENCES.SET_CULTURE'
+export const SET_LANGUAGE = '@DATA.PREFERENCES.SET_LANGUAGE'
+export const SET_THEME = '@DATA.PREFERENCES.SET_THEME'
+export const TOGGLE_COIN_DISPLAY = '@DATA.PREFERENCES.TOGGLE_COIN_DISPLAY'
+export const SET_COIN_SHOW_INTRO = '@DATA.PREFERENCES.SET_COIN_SHOW_INTRO'
+export const HIDE_KYC_COMPLETED = '@DATA.PREFERENCES.HIDE_KYC_COMPLETED'
+export const SET_TOTAL_BALANCES_DROPDOWN =
+  '@DATA.PREFERENCES.SET_TOTAL_BALANCES_DROPDOWN'
 
-export const HIDE_KYC_GET_STARTED = 'HIDE_KYC_GET_STARTED'
+export const HIDE_KYC_GET_STARTED = '@DATA.PREFERENCES.HIDE_KYC_GET_STARTED'
+export const HIDE_SWAP_BANNER = '@DATA.PREFERENCES.HIDE_SWAP_BANNER'

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

@@ -21,3 +21,4 @@ export const setTotalBalancesDropdown = payload => ({
 })
 
 export const hideKycGetStarted = () => ({ type: AT.HIDE_KYC_GET_STARTED })
+export const hideSwapBanner = () => ({ type: AT.HIDE_SWAP_BANNER })

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

@@ -15,6 +15,7 @@ const INITIAL_STATE = {
   showKycCompleted: true,
   showBackupReminder: true,
   showKycGetStarted: true,
+  showSwapBanner: true,
   totalBalancesDropdown: {
     wallet: true,
     lockbox: false,
@@ -63,6 +64,9 @@ const preferences = (state = INITIAL_STATE, action) => {
     case AT.HIDE_KYC_GET_STARTED: {
       return assoc('showKycGetStarted', false, state)
     }
+    case AT.HIDE_SWAP_BANNER: {
+      return assoc('showSwapBanner', false, state)
+    }
     default:
       return state
   }

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

@@ -12,3 +12,4 @@ export const getTotalBalancesDropdown = path([
 ])
 
 export const getShowKycGetStarted = path(['preferences', 'showKycGetStarted'])
+export const getShowSwapBanner = path(['preferences', 'showSwapBanner'])

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/TrayRight/WhatsNew/WhatsNewContent/ExchangeByBlockchain.js

@@ -2,6 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { FormattedMessage } from 'react-intl'
 import { connect } from 'react-redux'
+import { LinkContainer } from 'react-router-bootstrap'
 
 import { actions } from 'data'
 import { Button, Text } from 'blockchain-info-components'
@@ -52,7 +53,7 @@ const GetStartedButton = styled(Button).attrs({
   }
 `
 
-export const ExchangeByBlockchain = ({ verifyIdentity }) => (
+export const ExchangeByBlockchain = ({ kycNotFinished, verifyIdentity }) => (
   <Container>
     <Row marginBottom='24px'>
       <Text color='brand-primary' size='30px' weight={600}>
@@ -140,14 +141,26 @@ export const ExchangeByBlockchain = ({ verifyIdentity }) => (
       </DarkText>
     </Row>
     <Row>
-      <GetStartedButton onClick={verifyIdentity}>
-        <FormattedMessage
-          id='layouts.wallet.trayright.whatsnew.whatsnewcontent.exchangebyblockchain.started'
-          defaultMessage='Get Started'
-        />
-      </GetStartedButton>
+      {kycNotFinished && (
+        <GetStartedButton onClick={verifyIdentity}>
+          <FormattedMessage
+            id='layouts.wallet.trayright.whatsnew.whatsnewcontent.exchangebyblockchain.started'
+            defaultMessage='Get Started'
+          />
+        </GetStartedButton>
+      )}
+      {!kycNotFinished && (
+        <LinkContainer to='/exchange'>
+          <GetStartedButton>
+            <FormattedMessage
+              id='layouts.wallet.trayright.whatsnew.whatsnewcontent.exchangebyblockchain.gotoexchange'
+              defaultMessage='Go To Exchange'
+            />
+          </GetStartedButton>
+        </LinkContainer>
+      )}
     </Row>
-  </Container >
+  </Container>
 )
 
 const mapDispatchToProps = dispatch => ({

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/TrayRight/WhatsNew/WhatsNewContent/ExchangeByBlockchain.spec.js

@@ -15,11 +15,16 @@ jest.mock('data', () => ({
       }
     }
   }
-})
-)
+}))
 
 describe('ExchangeByBlockchain', () => {
-  it('renders correctly', () => {
+  it('renders correctly with button', () => {
+    const component = shallow(<ExchangeByBlockchain kycNotFinished />)
+    const tree = toJson(component)
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('renders correctly with exchange link', () => {
     const component = shallow(<ExchangeByBlockchain />)
     const tree = toJson(component)
     expect(tree).toMatchSnapshot()

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/TrayRight/WhatsNew/WhatsNewContent/__snapshots__/ExchangeByBlockchain.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ExchangeByBlockchain renders correctly 1`] = `
+exports[`ExchangeByBlockchain renders correctly with button 1`] = `
 <ExchangeByBlockchain__Container>
   <ExchangeByBlockchain__Row
     marginBottom="24px"
@@ -143,3 +143,155 @@ exports[`ExchangeByBlockchain renders correctly 1`] = `
   </ExchangeByBlockchain__Row>
 </ExchangeByBlockchain__Container>
 `;
+
+exports[`ExchangeByBlockchain renders correctly with exchange link 1`] = `
+<ExchangeByBlockchain__Container>
+  <ExchangeByBlockchain__Row
+    marginBottom="24px"
+  >
+    <text
+      color="brand-primary"
+      size="30px"
+      weight={600}
+    >
+      <FormattedMessage
+        defaultMessage="We've improved our Exchange"
+        id="layouts.wallet.trayright.whatsnew.whatsnewcontent.exchangebyblockchain.improved"
+        values={Object {}}
+      />
+    </text>
+  </ExchangeByBlockchain__Row>
+  <ExchangeByBlockchain__Row
+    marginBottom="24px"
+  >
+    <ExchangeByBlockchain__DarkText
+      size="14px"
+    >
+      <FormattedMessage
+        defaultMessage="November 2019"
+        id="layouts.wallet.trayright.whatsnew.whatsnewcontent.exchangebyblockchain.november2019"
+        values={Object {}}
+      />
+    </ExchangeByBlockchain__DarkText>
+  </ExchangeByBlockchain__Row>
+  <ExchangeByBlockchain__Row
+    marginBottom="24px"
+  >
+    <ExchangeByBlockchain__DarkText>
+      <FormattedMessage
+        defaultMessage="The faster, smarter way to trade your crypto."
+        id="layouts.wallet.trayright.whatsnew.whatsnewcontent.exchangebyblockchain.introducing"
+        values={Object {}}
+      />
+    </ExchangeByBlockchain__DarkText>
+  </ExchangeByBlockchain__Row>
+  <ExchangeByBlockchain__Row
+    marginBottom="8px"
+  >
+    <ExchangeByBlockchain__DarkText>
+      <FormattedMessage
+        defaultMessage="Upgrade now to enjoy the following benefits:"
+        id="layouts.wallet.trayright.whatsnew.whatsnewcontent.exchangebyblockchain.upgrade"
+        values={Object {}}
+      />
+    </ExchangeByBlockchain__DarkText>
+  </ExchangeByBlockchain__Row>
+  <ExchangeByBlockchain__Row
+    marginBottom="8px"
+  >
+    <ExchangeByBlockchain__DarkText>
+      <FormattedMessage
+        defaultMessage="Upgrade now to enjoy the following benefits:"
+        id="layouts.wallet.trayright.whatsnew.whatsnewcontent.exchangebyblockchain.upgrade"
+        values={Object {}}
+      />
+    </ExchangeByBlockchain__DarkText>
+  </ExchangeByBlockchain__Row>
+  <ExchangeByBlockchain__Row
+    marginBottom="8px"
+  >
+    <ExchangeByBlockchain__PrimaryText>
+      <FormattedMessage
+        defaultMessage="Lower cost"
+        id="layouts.wallet.trayright.whatsnew.whatsnewcontent.exchangebyblockchain.lowercost"
+        values={Object {}}
+      />
+    </ExchangeByBlockchain__PrimaryText>
+    <ExchangeByBlockchain__DarkText
+      hideOnMobile={true}
+    >
+       - 
+    </ExchangeByBlockchain__DarkText>
+    <ExchangeByBlockchain__DarkText>
+      <FormattedMessage
+        defaultMessage="Super competitive crypto exchange prices"
+        id="layouts.wallet.trayright.whatsnew.whatsnewcontent.exchangebyblockchain.lowercost_description"
+        values={Object {}}
+      />
+    </ExchangeByBlockchain__DarkText>
+  </ExchangeByBlockchain__Row>
+  <ExchangeByBlockchain__Row
+    marginBottom="8px"
+  >
+    <ExchangeByBlockchain__PrimaryText>
+      <FormattedMessage
+        defaultMessage="Live rates"
+        id="layouts.wallet.trayright.whatsnew.whatsnewcontent.exchangebyblockchain.liverates"
+        values={Object {}}
+      />
+    </ExchangeByBlockchain__PrimaryText>
+    <ExchangeByBlockchain__DarkText
+      hideOnMobile={true}
+    >
+       - 
+    </ExchangeByBlockchain__DarkText>
+    <ExchangeByBlockchain__DarkText>
+      <FormattedMessage
+        defaultMessage="You always get the most up to date price"
+        id="layouts.wallet.trayright.whatsnew.whatsnewcontent.exchangebyblockchain.liverates_Description"
+        values={Object {}}
+      />
+    </ExchangeByBlockchain__DarkText>
+  </ExchangeByBlockchain__Row>
+  <ExchangeByBlockchain__Row
+    marginBottom="32px"
+  >
+    <ExchangeByBlockchain__PrimaryText>
+      <FormattedMessage
+        defaultMessage="Higher limits"
+        id="layouts.wallet.trayright.whatsnew.whatsnewcontent.exchangebyblockchain.higherlimits"
+        values={Object {}}
+      />
+    </ExchangeByBlockchain__PrimaryText>
+    <ExchangeByBlockchain__DarkText
+      hideOnMobile={true}
+    >
+       - 
+    </ExchangeByBlockchain__DarkText>
+    <ExchangeByBlockchain__DarkText>
+      <FormattedMessage
+        defaultMessage="Limits from $2,000-$10,000"
+        id="layouts.wallet.trayright.whatsnew.whatsnewcontent.exchangebyblockchain.higherlimits_description"
+        values={Object {}}
+      />
+    </ExchangeByBlockchain__DarkText>
+  </ExchangeByBlockchain__Row>
+  <ExchangeByBlockchain__Row>
+    <LinkContainer
+      activeClassName="active"
+      exact={false}
+      replace={false}
+      strict={false}
+      to="/exchange"
+    >
+      <ExchangeByBlockchain__GetStartedButton>
+        <FormattedMessage
+          defaultMessage="Go To Exchange"
+          id="layouts.wallet.trayright.whatsnew.whatsnewcontent.exchangebyblockchain.gotoexchange"
+          values={Object {}}
+        />
+      </ExchangeByBlockchain__GetStartedButton>
+    </LinkContainer>
+  </ExchangeByBlockchain__Row>
+</ExchangeByBlockchain__Container>
+`;

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/TrayRight/WhatsNew/WhatsNewContent/selectors.js

@@ -0,0 +1,12 @@
+import { equals } from 'ramda'
+
+import { selectors, model } from 'data'
+
+const { NONE } = model.profile.KYC_STATES
+
+export const getData = state => ({
+  kycNotFinished: selectors.modules.profile
+    .getUserKYCState(state)
+    .map(equals(NONE))
+    .getOrElse(false)
+})

packages/blockchain-wallet-v4-frontend/src/scenes/Home/SwapBanner/__snapshots__/index.spec.js.snap

@@ -1,6 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SwapBanner renders correctly 1`] = `
+exports[`SwapBanner renders correctly with exchange link 1`] = `
+<SwapBanner__Wrapper>
+  <SwapBanner__Column>
+    <SwapBanner__LargeText>
+      <FormattedMessage
+        defaultMessage="We've improved your Exchange"
+        id="scenes.home.swapbanner.improved"
+        values={Object {}}
+      />
+    </SwapBanner__LargeText>
+    <SwapBanner__MediumText>
+      <FormattedMessage
+        defaultMessage="A faster, smarter way to trade your crypto."
+        id="scenes.home.swapbanner.faster"
+        values={Object {}}
+      />
+    </SwapBanner__MediumText>
+  </SwapBanner__Column>
+  <SwapBanner__Column
+    hiddenOnMobile={true}
+  >
+    <SwapBanner__BackgroundImage />
+  </SwapBanner__Column>
+  <SwapBanner__Column>
+    <LinkContainer
+      activeClassName="active"
+      exact={false}
+      replace={false}
+      strict={false}
+      to="/exchange"
+    >
+      <SwapBanner__GetStartedButton>
+        <FormattedMessage
+          defaultMessage="Go To Exchange"
+          id="layouts.wallet.trayright.whatsnew.whatsnewcontent.exchangebyblockchain.gotoexchange"
+          values={Object {}}
+        />
+      </SwapBanner__GetStartedButton>
+    </LinkContainer>
+  </SwapBanner__Column>
+</SwapBanner__Wrapper>
+`;
+
+exports[`SwapBanner renders correctly with getstarted button 1`] = `
 <SwapBanner__Wrapper>
   <SwapBanner__Column>
     <SwapBanner__LargeText>
@@ -27,10 +70,12 @@ exports[`SwapBanner renders correctly 1`] = `
     <SwapBanner__GetStartedButton>
       <FormattedMessage
         defaultMessage="Get Started"
-        id="scenes.home.swapbanner.getstarted"
+        id="layouts.wallet.trayright.whatsnew.whatsnewcontent.exchangebyblockchain.started"
         values={Object {}}
       />
     </SwapBanner__GetStartedButton>
   </SwapBanner__Column>
 </SwapBanner__Wrapper>
 `;
+
+exports[`SwapBanner renders null w/o showBanner 1`] = `""`;