Merge pull request #1596 from blockchain/feat/pax-whatsnew

feat: add pax to whats new

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

@@ -0,0 +1,68 @@
+import React from 'react'
+import styled from 'styled-components'
+import { FormattedMessage } from 'react-intl'
+import { LinkContainer } from 'react-router-bootstrap'
+import { Button, Text } from 'blockchain-info-components'
+import { Container, Row } from 'components/WhatsNew'
+import media from 'services/ResponsiveService'
+
+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%;
+  `};
+`
+
+export const USDPax = () => (
+  <Container>
+    <Row marginBottom='10px'>
+      <Text color='brand-primary' size='24px' weight={600}>
+        <FormattedMessage
+          defaultMessage='A Digital US Dollar in Your Wallet'
+          id='layouts.wallet.trayright.whatsnew.whatsnewcontent.usdpax.one'
+        />
+      </Text>
+    </Row>
+    <Row marginBottom='24px'>
+      <DarkText size='14px'>
+        <FormattedMessage
+          defaultMessage='April 2019'
+          id='layouts.wallet.trayright.whatsnew.whatsnewcontent.usdpax.april2019'
+        />
+      </DarkText>
+    </Row>
+    <Row marginBottom='24px'>
+      <DarkText>
+        <FormattedMessage
+          defaultMessage='USD PAX, a crypto backed 1:1 for the dollar, is now available in your web wallet to trade and transact with. You can use these digital dollars to de-risk in a moving market, manage inflation of your local currency, or move quickly between cryptos in your wallet. 1 $PAX = 1 $USD, always.'
+          id='layouts.wallet.trayright.whatsnew.whatsnewcontent.usdpax.stable'
+        />
+      </DarkText>
+    </Row>
+    <Row>
+      <LinkContainer to='/pax/transactions'>
+        <GetStartedButton>
+          <FormattedMessage
+            id='layouts.wallet.trayright.whatsnew.whatsnewcontent.usdpax.checkit'
+            defaultMessage='Check it Out!'
+          />
+        </GetStartedButton>
+      </LinkContainer>
+    </Row>
+  </Container>
+)
+
+export default USDPax

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import toJson from 'enzyme-to-json'
+import USDPax from './USDPax'
+
+jest.mock('blockchain-info-components', () => ({
+  Text: 'text',
+  Button: 'button'
+}))
+
+describe('EmptyContent', () => {
+  it('renders correctly', () => {
+    const component = shallow(<USDPax />)
+    const tree = toJson(component)
+    expect(tree).toMatchSnapshot()
+  })
+})

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

@@ -1,10 +1,17 @@
 import React from 'react'
 import { prop, contains } from 'ramda'
 import moment from 'moment'
+import USDPax from './USDPax'
 import BSVSupport from './BSVSupport'
 import ExchangeByBlockchain from './ExchangeByBlockchain'
 
 const Announcements = [
+  {
+    content: <USDPax />,
+    date: new Date('April 30 2019'),
+    restrictByCountry: [],
+    restrictByUserKyc: []
+  },
   {
     content: <BSVSupport />,
     date: new Date('Jan 10 2019'),
@@ -36,7 +43,7 @@ export const filterAnnouncements = (lastViewed, userCountry, userKycState) => {
   return Announcements.map(announcement => ({
     content: prop('content', announcement),
     restricted: isRestricted(announcement),
-    display: isAvailableToView(lastViewed, 3),
+    display: isAvailableToView(announcement.date, 30),
     alert: isAvailableToView(announcement.date, 0)
   }))
 }