feat(Swap): added support modal to swap menu

blockchain · Jan 28, 2019 · 79a9d9e · 79a9d9e
1 parent ced10fe
commit 79a9d9e
Show file tree

Hide file tree

Showing 9 changed files with 184 additions and 13 deletions.
diff --git a/packages/blockchain-info-components/src/Modals/Modal.js b/packages/blockchain-info-components/src/Modals/Modal.js
@@ -87,8 +87,8 @@ const Modal = props => {
 }
 
 Modal.propTypes = {
-  position: PropTypes.number.isRequired,
-  total: PropTypes.number.isRequired,
+  position: PropTypes.number,
+  total: PropTypes.number,
   size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge', ''])
 }
 

diff --git a/...blockchain-wallet-v4-frontend/src/modals/Generic/Support/__snapshots__/index.spec.js.snap b/...blockchain-wallet-v4-frontend/src/modals/Generic/Support/__snapshots__/index.spec.js.snap
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Support modal component matches snapshot 1`] = `
+<Modal
+  size="small"
+>
+  <Support__Body
+    data-e2e="swapGetStarted"
+  >
+    <Support__Title
+      size="20px"
+    >
+      <FormattedHTMLMessage
+        defaultMessage="Need some help?"
+        id="modals.support.need_some_help"
+        values={Object {}}
+      />
+    </Support__Title>
+    <Support__Message>
+      <FormattedMessage
+        defaultMessage="Our Blockchain Support Team is standing by."
+        id="modals.support.our_support"
+        values={Object {}}
+      />
+    </Support__Message>
+    <Support__FooterLink
+      href="https://blockchain.zendesk.com/hc/en-us/requests/new?ticket_form_id=360000180551"
+      target="_blank"
+    >
+      <Support__FooterButton
+        fullwidth={true}
+        nature="primary"
+        size="20px"
+      >
+        <FormattedMessage
+          defaultMessage="Contact Support"
+          id="modals.support.contact_support"
+          values={Object {}}
+        />
+      </Support__FooterButton>
+    </Support__FooterLink>
+    <Support__BottomImage
+      name="identity-verification"
+    />
+  </Support__Body>
+</Modal>
+`;
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Generic/Support/index.js b/packages/blockchain-wallet-v4-frontend/src/modals/Generic/Support/index.js
@@ -0,0 +1,77 @@
+import React from 'react'
+import styled from 'styled-components'
+import { FormattedMessage, FormattedHTMLMessage } from 'react-intl'
+
+import modalEnhancer from 'providers/ModalEnhancer'
+import { Button, Image, Link, Modal, Text } from 'blockchain-info-components'
+
+const Body = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  height: 435px;
+  padding: 48px 32px 0 32px;
+  box-sizing: border-box;
+  text-align: center;
+`
+const Title = styled(Text)`
+  margin-bottom: 16px;
+  font-size: 26px;
+  b {
+    font-weight: 500;
+    color: ${props => props.theme.success};
+  }
+`
+const Message = styled(Text)`
+  margin-bottom: 24px;
+  font-size: 18px;
+`
+const BottomImage = styled(Image)`
+  width: 100%;
+  align-self: flex-end;
+`
+const FooterLink = styled(Link)`
+  height: auto;
+  width: 100%;
+`
+const FooterButton = styled(Button)`
+  height: 100%;
+  font-size: 17px;
+  font-weight: 400;
+  padding: 15px 0;
+  margin-bottom: 32px;
+`
+
+export const Support = ({ position, total }) => (
+  <Modal size='small' position={position} total={total}>
+    <Body data-e2e='swapGetStarted'>
+      <Title size='20px'>
+        <FormattedHTMLMessage
+          defaultMessage='Need some help?'
+          id='modals.support.need_some_help'
+        />
+      </Title>
+      <Message>
+        <FormattedMessage
+          defaultMessage='Our Blockchain Support Team is standing by.'
+          id='modals.support.our_support'
+        />
+      </Message>
+      <FooterLink
+        href='https://blockchain.zendesk.com/hc/en-us/requests/new?ticket_form_id=360000180551'
+        target='_blank'
+      >
+        <FooterButton nature='primary' size='20px' fullwidth>
+          <FormattedMessage
+            defaultMessage='Contact Support'
+            id='modals.support.contact_support'
+          />
+        </FooterButton>
+      </FooterLink>
+      <BottomImage name='identity-verification' />
+    </Body>
+  </Modal>
+)
+
+export default modalEnhancer('Support')(Support)
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Generic/Support/index.spec.js b/packages/blockchain-wallet-v4-frontend/src/modals/Generic/Support/index.spec.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import toJson from 'enzyme-to-json'
+import { Support } from './index'
+
+describe('Support modal component', () => {
+  it('matches snapshot', () => {
+    const component = shallow(<Support />)
+    const tree = toJson(component)
+    expect(tree).toMatchSnapshot()
+  })
+})
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Generic/index.js b/packages/blockchain-wallet-v4-frontend/src/modals/Generic/index.js
@@ -1,4 +1,5 @@
 import Confirm from './Confirm'
 import PromptInput from './PromptInput'
+import Support from './Support'
 
-export { Confirm, PromptInput }
+export { Confirm, PromptInput, Support }
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/index.js b/packages/blockchain-wallet-v4-frontend/src/modals/index.js
@@ -30,7 +30,7 @@ import {
   UserExists,
   SunRiverLinkError
 } from './Exchange'
-import { Confirm, PromptInput } from './Generic'
+import { Confirm, PromptInput, Support } from './Generic'
 import {
   LockboxAppManager,
   LockboxAuthenticityCheck,
@@ -115,6 +115,7 @@ const Modals = () => (
     <SfoxTradeDetails />
     <SfoxEnterMicroDeposits />
     <SunRiverLinkError />
+    <Support />
     <SwapGetStarted />
     <SwapUpgrade />
     <TransactionReport />

diff --git a/...s/blockchain-wallet-v4-frontend/src/scenes/Exchange/Menu/__snapshots__/index.spec.js.snap b/...s/blockchain-wallet-v4-frontend/src/scenes/Exchange/Menu/__snapshots__/index.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MenuTop Component matches snapshot 1`] = `
+exports[`Menu Component matches snapshot 1`] = `
 <Menu__Wrapper>
   <>
     <LinkContainer
@@ -39,6 +39,15 @@ exports[`MenuTop Component matches snapshot 1`] = `
         />
       </Menu__LinkItem>
     </LinkContainer>
+    <Menu__SupportButton
+      nature="primary"
+    >
+      <FormattedMessage
+        defaultMessage="Need Help?"
+        id="scenes.exchange.menutop.need_help"
+        values={Object {}}
+      />
+    </Menu__SupportButton>
   </>
 </Menu__Wrapper>
 `;
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/Menu/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/Menu/index.js
@@ -3,10 +3,11 @@ import styled from 'styled-components'
 import { FormattedMessage } from 'react-intl'
 import { connect } from 'react-redux'
 
+import { actions } from 'data'
 import { getData } from './selectors'
 
 import { LinkContainer } from 'react-router-bootstrap'
-import { TabMenu, TabMenuItem } from 'blockchain-info-components'
+import { Button, TabMenu, TabMenuItem } from 'blockchain-info-components'
 
 const Wrapper = styled.div`
   display: flex;
@@ -31,8 +32,11 @@ const LinkItem = styled(TabMenuItem)`
     }
   }
 `
+const SupportButton = styled(Button)`
+  margin-left: auto;
+`
 
-export const MenuTop = ({ historySelected, showGetStarted }) =>
+export const Menu = ({ showGetStarted, showHelpModal }) =>
   !showGetStarted ? (
     <Wrapper>
       <TabMenu>
@@ -55,10 +59,23 @@ export const MenuTop = ({ historySelected, showGetStarted }) =>
             />
           </LinkItem>
         </LinkContainer>
+        <SupportButton nature='primary' onClick={showHelpModal}>
+          <FormattedMessage
+            id='scenes.exchange.menutop.need_help'
+            defaultMessage='Need Help?'
+          />
+        </SupportButton>
       </TabMenu>
     </Wrapper>
   ) : (
     <div />
   )
 
-export default connect(getData)(MenuTop)
+const mapDispatchToProps = dispatch => ({
+  showHelpModal: () => dispatch(actions.modals.showModal('Support'))
+})
+
+export default connect(
+  getData,
+  mapDispatchToProps
+)(Menu)
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/Menu/index.spec.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Exchange/Menu/index.spec.js
@@ -1,26 +1,33 @@
 import React from 'react'
 import { shallow } from 'enzyme'
 import toJson from 'enzyme-to-json'
-import { MenuTop } from './index'
+import { Menu } from './index'
 
 jest.mock('blockchain-info-components', () => ({
-  Images: '',
+  Button: '',
   TextGroup: '',
   TabMenu: '',
   TabMenuItem: ''
 }))
 
-describe('MenuTop Component', () => {
+describe('Menu Component', () => {
   it('should render with correct links and without error', () => {
-    const component = shallow(<MenuTop />)
+    const component = shallow(<Menu />)
     const LinkContainer = component.find('LinkContainer')
     expect(LinkContainer.at(0).prop('to')).toBe('/swap')
     expect(LinkContainer.at(1).prop('to')).toBe('/swap/history')
   })
 
   it('matches snapshot', () => {
-    const component = shallow(<MenuTop />)
+    const component = shallow(<Menu />)
     const tree = toJson(component)
     expect(tree).toMatchSnapshot()
   })
+
+  it('should trigger showHelpModal on button click', () => {
+    const showHelpModal = jest.fn()
+    const component = shallow(<Menu showHelpModal={showHelpModal} />)
+    component.find('Menu__SupportButton').simulate('click')
+    expect(showHelpModal).toHaveBeenCalledTimes(1)
+  })
 })