feat(improve stepper to support onClick on transition)

blockchain · May 11, 2018 · a1ff195 · a1ff195
1 parent 7ea8e58
commit a1ff195
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 21 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Utilities/Stepper.js b/packages/blockchain-wallet-v4-frontend/src/components/Utilities/Stepper.js
@@ -53,14 +53,21 @@ export const StepView = ({ children, step }) => (
   </Consumer>
 )
 
-export const StepTransition = ({ Component, next, prev, restart, to = 0, ...rest }) => (
+export const StepTransition = ({ Component, onClick, next, prev, restart, to = 0, ...rest }) => (
   <Consumer>
-    {({ stepTo, nextStep, prevStep, restartStep }) => (
-      <Component
-        {...rest}
-        onClick={next ? nextStep : prev ? prevStep : restart ? restartStep : () => stepTo(to)}
-      />
-    )}
+    {({ stepTo, nextStep, prevStep, restartStep }) => {
+      const goToStep = next ? nextStep : prev ? prevStep : restart ? restartStep : () => stepTo(to)
+      const onClickAndGo = () => {
+        onClick()
+        goToStep()
+      }
+      return (
+        <Component
+          {...rest}
+          onClick={onClickAndGo}
+        />
+      )
+    }}
   </Consumer>
 )
 

diff --git a/...blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/OrderCheckout.js b/...blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/OrderCheckout.js
@@ -8,26 +8,34 @@ import { StepTransition } from 'components/Utilities/Stepper'
 import QuoteInput from './QuoteInput'
 import { MethodContainer } from 'components/BuySell/styled.js'
 
-const OrderCheckout = ({ quoteR, rateQuoteR, account, onFetchQuote, reason, limits, type, defaultCurrency, symbol, checkoutBusy, busy, setMax, setMin, increaseLimit }) => {
+const OrderCheckout = ({ quoteR, rateQuoteR, account, onFetchQuote, reason, limits,
+  type, defaultCurrency, symbol, checkoutBusy, busy, setMax, setMin, increaseLimit, onOrderCheckoutSubmit }) => {
   const quoteInputSpec = {
     method: type, // buy or sell
     input: defaultCurrency,
     output: 'btc'
   }
   const disableInputs = limits.max < limits.min || (reason.indexOf('has_remaining') < 0 && reason) || limits.effectiveMax < limits.min
-  const wantToHelper = () => type === 'buy' ? <FormattedMessage id='buy.output_method.title.buy' defaultMessage='I want to buy' /> : <FormattedMessage id='buy.output_method.title.sell' defaultMessage='I want to sell' />
+  const wantToHelper = () => type === 'buy'
+    ? <FormattedMessage id='buy.output_method.title.buy' defaultMessage='I want to buy' />
+    : <FormattedMessage id='buy.output_method.title.sell' defaultMessage='I want to sell' />
 
   const limitsHelper = (quoteR, limits) => {
     if (quoteR.error) return true
     return quoteR.map(q => {
-      if (q.baseCurrency === 'USD') return +q.baseAmount > limits.max || +q.baseAmount < limits.min || +q.quoteAmount > limits.effectiveMax
-      if (q.baseCurrency === 'BTC') return Math.abs(q.quoteAmount) > limits.max || Math.abs(q.quoteAmount) < limits.min || +q.baseAmount > limits.effectiveMax
+      if (q.baseCurrency === 'USD') {
+        return +q.baseAmount > limits.max || +q.baseAmount < limits.min || +q.quoteAmount > limits.effectiveMax
+      }
+      if (q.baseCurrency === 'BTC') {
+        return Math.abs(q.quoteAmount) > limits.max || Math.abs(q.quoteAmount) < limits.min || +q.baseAmount > limits.effectiveMax
+      }
     }).data
   }
 
   const submitButtonHelper = () => (
     reason.indexOf('has_remaining') > -1
-      ? <StepTransition next Component={Button} style={spacing('mt-45')} nature='primary' fullwidth disabled={checkoutBusy || Remote.Loading.is(quoteR) || limitsHelper(quoteR, limits)}>
+      ? <StepTransition next Component={Button} onClick={onOrderCheckoutSubmit} style={spacing('mt-45')}
+        nature='primary' fullwidth disabled={checkoutBusy || Remote.Loading.is(quoteR) || limitsHelper(quoteR, limits)}>
         {
           Remote.Loading.is(quoteR)
             ? <HeartbeatLoader height='20px' width='20px' color='white' />

diff --git a/...allet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/AddBankDetails/index.js b/...allet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/AddBankDetails/index.js
@@ -1,8 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { bindActionCreators } from 'redux'
 
-import { actions } from 'data'
 import AddBankDetails from './template.js'
 
 class AddBankDetailsContainer extends React.PureComponent {
@@ -11,11 +9,6 @@ class AddBankDetailsContainer extends React.PureComponent {
     this.onSubmit = this.onSubmit.bind(this)
   }
 
-  componentDidMount () {
-    const { quoteR } = this.props
-    quoteR.map(quote => this.props.coinifyDataActions.getPaymentMediums(quote))
-  }
-
   onSubmit (e) {
     e.preventDefault()
     // TODO: Store form data in the state
@@ -30,7 +23,6 @@ const mapStateToProps = (state) => ({
 })
 
 const mapDispatchToProps = (dispatch) => ({
-  coinifyDataActions: bindActionCreators(actions.core.data.coinify, dispatch)
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(AddBankDetailsContainer)
diff --git a/...es/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/index.js b/...es/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/index.js
@@ -54,6 +54,7 @@ class SellContainer extends React.Component {
         busy={busy}
         clearTradeError={() => coinifyNotAsked()}
         trade={trade}
+        onOrderCheckoutSubmit={() => sellQuoteR.map(quote => this.props.coinifyDataActions.getPaymentMediums(quote))}
       />,
       Failure: (msg) => <div>Failure: {msg.error}</div>,
       Loading: () => <Loading />,

diff --git a/...in-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/template.success.js b/...in-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/template.success.js
@@ -39,7 +39,8 @@ const Sell = props => {
     initiateSell,
     step,
     busy,
-    trade
+    trade,
+    onOrderCheckoutSubmit
   } = props
 
   const profile = Remote.of(props.value.profile).getOrElse({ _limits: service.mockedLimits, _level: { currency: 'EUR' } })
@@ -65,6 +66,7 @@ const Sell = props => {
               symbol={symbol}
               checkoutBusy={checkoutBusy}
               setMax={setMax}
+              onOrderCheckoutSubmit={onOrderCheckoutSubmit}
             />
           </CheckoutWrapper>
         </StepView>