refactor stepper to be more generic for coinify flow

blockchain · May 22, 2018 · bb13180 · bb13180
1 parent ab403df
commit bb13180
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 16 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/BuySellStepper/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/BuySellStepper/index.js
@@ -2,6 +2,8 @@ import React from 'react'
 import { withRouter } from 'react-router-dom'
 import { connect } from 'react-redux'
 
+import { selectors } from 'data'
+import * as SfoxService from 'services/SfoxService'
 import BuySellStepper from './template.js'
 
 class BuySellStepperContainer extends React.PureComponent {
@@ -15,15 +17,22 @@ class BuySellStepperContainer extends React.PureComponent {
   }
 
   render () {
-    return (
-      <BuySellStepper currentStep={2} goToBuySell={this.goToBuySell} />
-    )
+    const { canTrade } = this.props
+    const partner = canTrade.cata({ Success: (val) => val, Loading: () => false, Failure: () => false, NotAsked: () => false })
+    const totalSteps = partner === 'sfox' ? 4 : 2
+
+    if (partner === 'sfox') {
+      console.info(SfoxService.determineStep())
+    } else {
+      console.log('coinify')
+    }
+
+    return (partner ? <BuySellStepper partner={partner} currentStep={1} totalSteps={totalSteps} goToBuySell={this.goToBuySell} /> : null)
   }
 }
 
 const mapStateToProps = (state) => ({
-  // data: getData(state),
-  // canBuy: selectors.exchange.getCanTrade(state, 'Buy')
+  canTrade: selectors.exchange.getCanTrade(state)
 })
 
 export default withRouter(connect(mapStateToProps)(BuySellStepperContainer))
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/BuySellStepper/template.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/BuySellStepper/template.js
@@ -71,7 +71,7 @@ const Arrow = styled.div`
   width: 100%; 
   border-top: 1px solid  ${props => props.theme['gray-5']};
   position: absolute;
-  top: 15px;
+  top: 20px;
   left: 0;
 
   &:before {
@@ -114,18 +114,26 @@ const Circle = styled.div`
   }
 `
 
-const getStepTitle = (step) => {
+const getSfoxStepTitle = (step) => {
   switch (step) {
-    case 1: return <FormattedMessage id='scenes.home.exchangeStepper.step1' defaultMessage='Create Account' />
-    case 2: return <FormattedMessage id='scenes.home.exchangeStepper.step2' defaultMessage='Verify Identity' />
-    case 3: return <FormattedMessage id='scenes.home.exchangeStepper.step3' defaultMessage='Upload Documents' />
-    case 4: return <FormattedMessage id='scenes.home.exchangeStepper.step4' defaultMessage='Link Bank' />
+    case 1: return <FormattedMessage id='scenes.home.exchangeStepper.sfox.step1' defaultMessage='Create Account' />
+    case 2: return <FormattedMessage id='scenes.home.exchangeStepper.sfox.step2' defaultMessage='Verify Identity' />
+    case 3: return <FormattedMessage id='scenes.home.exchangeStepper.sfox.step3' defaultMessage='Upload Documents' />
+    case 4: return <FormattedMessage id='scenes.home.exchangeStepper.sfox.step4' defaultMessage='Link Bank' />
+    default: return <div />
+  }
+}
+
+const getCoinifyStepTitle = (step) => {
+  switch (step) {
+    case 1: return <FormattedMessage id='scenes.home.exchangeStepper.coinify.step1' defaultMessage='Verify Email' />
+    case 2: return <FormattedMessage id='scenes.home.exchangeStepper.coinify.step2' defaultMessage='Accept Terms' />
     default: return <div />
   }
 }
 
 const BuySellStepper = (props) => {
-  const { currentStep, goToBuySell } = props
+  const { currentStep, goToBuySell, partner, totalSteps } = props
 
   return (
     <Header onClick={() => { goToBuySell() }}>
@@ -136,7 +144,7 @@ const BuySellStepper = (props) => {
         </Text>
       </LeftColumn>
       <RightColumn>
-        {[...Array(4)].map((r, i) => {
+        {[...Array(totalSteps)].map((r, i) => {
           return (
             <React.Fragment key={i}>
               <Step>
@@ -145,10 +153,11 @@ const BuySellStepper = (props) => {
                   {currentStep <= i && <Text color='white-blue' weight={200}>{i + 1}</Text>}
                 </Circle>
                 <Text size='12px' weight={300} color={currentStep >= i ? 'brand-secondary' : 'gray-5'}>
-                  {getStepTitle(i + 1)}
+                  {partner === 'sfox' && getSfoxStepTitle(i + 1)}
+                  {partner === 'coinify' && getCoinifyStepTitle(i + 1)}
                 </Text>
               </Step>
-              {i !== 3 && <ArrowWrapper><Arrow/></ArrowWrapper>}
+              {i !== totalSteps - 1 && <ArrowWrapper><Arrow/></ArrowWrapper>}
             </React.Fragment>
           )
         })}
@@ -159,7 +168,9 @@ const BuySellStepper = (props) => {
 
 BuySellStepper.propTypes = {
   currentStep: PropTypes.number.isRequired,
-  goToBuySell: PropTypes.func.isRequired
+  goToBuySell: PropTypes.func.isRequired,
+  partner: PropTypes.string.isRequired,
+  totalSteps: PropTypes.number.isRequired
 }
 
 export default BuySellStepper