feat(display sfox/coinify logo in buysell)

blockchain · Jun 5, 2018 · 0cdd840 · 0cdd840
1 parent 22965a4
commit 0cdd840
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 17 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Form/TabMenuBuySellStatus/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Form/TabMenuBuySellStatus/index.js
@@ -13,12 +13,13 @@ class TabMenuBuySellStatusContainer extends React.PureComponent {
   }
 
   render () {
-    return <TabMenuBuySellStatus value={this.props.input.value} handleClick={this.handleClick} />
+    return <TabMenuBuySellStatus partner={this.props.partner} value={this.props.input.value} handleClick={this.handleClick} />
   }
 }
 
 TabMenuBuySellStatusContainer.propTypes = {
-  input: PropTypes.object.isRequired
+  input: PropTypes.object.isRequired,
+  partner: PropTypes.string.isRequired
 }
 
 export default TabMenuBuySellStatusContainer
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Form/TabMenuBuySellStatus/template.js b/packages/blockchain-wallet-v4-frontend/src/components/Form/TabMenuBuySellStatus/template.js
@@ -1,28 +1,71 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { FormattedMessage } from 'react-intl'
+import styled from 'styled-components'
 
-import { TabMenu, TabMenuItem } from 'blockchain-info-components'
+import { Image, Link, TabMenu, TabMenuItem, Text, TextGroup } from 'blockchain-info-components'
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 0 30px;
+  box-sizing: border-box;
+  background-color: ${props => props.theme['white-blue']};
+  border-bottom: 1px solid ${props => props.theme['gray-1']};
+
+  > div > span:first-child { padding-left: 0px; }
+`
+const Partner = styled(TextGroup)`
+  display: flex;
+  flex-direction: row;
+  padding-top: 11px;
+  align-self: flex-end;
+  align-items: center;
+  width: 170px;
+
+  @media(max-width: 992px) { display: none; }
+`
 
 const TabMenuBuySellStatus = props => {
-  const { handleClick, value } = props
+  const { handleClick, partner, value } = props
 
   return (
-    <TabMenu>
-      <TabMenuItem style={{ paddingLeft: '0px' }}selected={value === 'buy'} onClick={() => handleClick('buy')}>
-        <FormattedMessage id='components.form.tabmenubuysell.buy' defaultMessage='Buy' />
-      </TabMenuItem>
-      <TabMenuItem selected={value === 'sell'} onClick={() => handleClick('sell')}>
-        <FormattedMessage id='components.form.tabmenubuysell.sell' defaultMessage='Sell' />
-      </TabMenuItem>
-      <TabMenuItem selected={value === 'order_history'} onClick={() => handleClick('order_history')}>
-        <FormattedMessage id='components.form.tabmenubuysell.orderhistory' defaultMessage='Order History' />
-      </TabMenuItem>
-    </TabMenu>
+    <Wrapper>
+      <TabMenu>
+        <TabMenuItem style={{ paddingLeft: '0px' }} selected={value === 'buy'} onClick={() => handleClick('buy')}>
+          <FormattedMessage id='components.form.tabmenubuysell.buy' defaultMessage='Buy' />
+        </TabMenuItem>
+        <TabMenuItem selected={value === 'sell'} onClick={() => handleClick('sell')}>
+          <FormattedMessage id='components.form.tabmenubuysell.sell' defaultMessage='Sell' />
+        </TabMenuItem>
+        <TabMenuItem selected={value === 'order_history'} onClick={() => handleClick('order_history')}>
+          <FormattedMessage id='components.form.tabmenubuysell.orderhistory' defaultMessage='Order History' />
+        </TabMenuItem>
+      </TabMenu>
+      {partner &&
+        <Partner>
+          <Text size='12px' weight={300}>
+            <FormattedMessage id='scenes.exchange.menutop.poweredby' defaultMessage='Powered by' />
+          </Text>
+          {partner === 'sfox'
+            ? <Link href='https://www.sfox.com' target='_blank'>
+              <Image name='sfoxLogo' width='60px' height='25px' />
+            </Link>
+            : <Link href='https://www.coinify.com' target='_blank'>
+              <Image name='coinifyLogo' width='60px' height='25px' />
+            </Link>
+          }
+        </Partner>
+      }
+    </Wrapper>
   )
 }
 
 TabMenuBuySellStatus.propTypes = {
+  partner: PropTypes.string,
   value: PropTypes.oneOf(['buy', 'sell', 'order_history', '']),
   onClick: PropTypes.func
 }

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/index.js
@@ -40,6 +40,7 @@ const Menu = reduxForm({ form: 'buySellTabStatus' })(HorizontalMenu)
 class BuySellContainer extends React.PureComponent {
   constructor (props) {
     super(props)
+    this.state = { partner: '' }
     this.renderPartner = this.renderPartner.bind(this)
     this.submitEmail = this.submitEmail.bind(this)
   }
@@ -57,14 +58,18 @@ class BuySellContainer extends React.PureComponent {
 
   renderPartner (buySell, options, type) {
     if (path(['sfox', 'account_token'], buySell)) {
+      this.setState({ partner: 'sfox' })
       return <SfoxCheckout type={type} options={options} value={buySell} />
     }
     if (path(['unocoin', 'token'], buySell)) { // TODO replace token
+      this.setState({ partner: '' })
       return <span>Unocoin</span>
     }
     if (path(['coinify', 'offline_token'], buySell)) {
+      this.setState({ partner: 'coinify' })
       return <CoinifyCheckout type={type} options={options} value={buySell} />
     }
+    this.setState({ partner: '' })
     return <SelectPartner type={type} options={options} value={buySell}
       onSubmit={this.onSubmit} submitEmail={this.submitEmail} {...this.props} />
   }
@@ -77,7 +82,7 @@ class BuySellContainer extends React.PureComponent {
   render () {
     const { data, type } = this.props
 
-    let view = data.cata({
+    const view = data.cata({
       Success: (value) => this.renderPartner(path(['buySell', 'value'], value), value.options, type),
       Failure: (message) => <div>failure: {message}</div>,
       Loading: () => <Loading />,
@@ -89,7 +94,7 @@ class BuySellContainer extends React.PureComponent {
         {
           hasAccount(view.props.value)
             ? <Menu>
-              <Field name='status' component={TabMenuBuySellStatus} />
+              <Field name='status' component={TabMenuBuySellStatus} partner={this.state.partner} />
             </Menu>
             : null
         }