refactor(use separate forms for buy and sell quoteinput)

blockchain · May 11, 2018 · 4c56dd3 · 4c56dd3
1 parent b78f342
commit 4c56dd3
Show file tree

Hide file tree

Showing 12 changed files with 89 additions and 160 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/modules/coinify/actions.js b/packages/blockchain-wallet-v4-frontend/src/data/modules/coinify/actions.js
@@ -18,13 +18,13 @@ export const initiateBuy = (data) => ({ type: AT.COINIFY_BUY, payload: data })
 
 export const initiateSell = (data) => ({ type: AT.COINIFY_SELL, payload: data })
 
-export const initializeCheckoutForm = (currency) => ({ type: AT.COINIFY_INITIALIZED, payload: currency })
+export const initializeCheckoutForm = (type) => ({ type: AT.COINIFY_INITIALIZED, payload: { type } })
 
 export const coinifyCheckoutBusyOn = () => ({ type: AT.COINIFY_CHECKOUT_BUSY_ON })
 export const coinifyCheckoutBusyOff = () => ({ type: AT.COINIFY_CHECKOUT_BUSY_OFF })
 
-export const setCheckoutMax = (amount) => ({ type: AT.COINIFY_SET_CHECKOUT_MAX, payload: amount })
-export const setCheckoutMin = (amount) => ({ type: AT.COINIFY_SET_CHECKOUT_MIN, payload: amount })
+export const setCheckoutMax = (amount, type) => ({ type: AT.COINIFY_SET_CHECKOUT_MAX, payload: { amount, type } })
+export const setCheckoutMin = (amount, type) => ({ type: AT.COINIFY_SET_CHECKOUT_MIN, payload: { amount, type } })
 
 export const setCoinifyCheckoutError = (error) => ({ type: AT.COINIFY_SET_CHECKOUT_ERROR, payload: error })
 export const clearCoinifyCheckoutError = () => ({ type: AT.COINIFY_CLEAR_CHECKOUT_ERROR })

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/modules/coinify/sagas.js b/packages/blockchain-wallet-v4-frontend/src/data/modules/coinify/sagas.js
@@ -3,7 +3,7 @@ import * as A from './actions'
 import * as actions from '../../actions'
 import * as selectors from '../../selectors.js'
 // import { formValueSelector } from 'redux-form'
-import { merge, path, prop, equals } from 'ramda'
+import { any, merge, path, prop, equals } from 'ramda'
 import * as service from 'services/CoinifyService'
 
 export default ({ coreSagas }) => {
@@ -73,8 +73,9 @@ export default ({ coreSagas }) => {
     }
   }
 
-  const initialized = function * () {
+  const initialized = function * (action) {
     try {
+      const { type } = action.payload
       const level = yield select(selectors.core.data.coinify.getLevel)
       const currencyR = level.map(l => l.currency)
 
@@ -84,8 +85,12 @@ export default ({ coreSagas }) => {
         currency: currencyR.getOrElse('EUR')
       }
 
-      yield put(actions.form.initialize('coinifyCheckout', initialValues))
-      yield put(actions.core.data.coinify.fetchRateQuote(currencyR.getOrElse('EUR')))
+      if (type === 'buy') {
+        yield put(actions.form.initialize('coinifyCheckoutBuy', initialValues))
+      } else {
+        yield put(actions.form.initialize('coinifyCheckoutSell', initialValues))
+      }
+      yield put(actions.core.data.coinify.fetchRateQuote(currencyR.getOrElse('EUR'), type))
       yield put(A.coinifyCheckoutBusyOn())
     } catch (e) {
       console.log('initialize coinify checkout form', e)
@@ -99,14 +104,13 @@ export default ({ coreSagas }) => {
       const form = path(['meta', 'form'], action)
       const field = path(['meta', 'field'], action)
       const payload = prop('payload', action)
-      if (!equals('coinifyCheckout', form)) return
+      if (!any(equals(form))(['coinifyCheckoutBuy', 'coinifyCheckoutSell'])) return
       yield put(A.coinifyCheckoutBusyOn())
 
       const limits = yield select(selectors.core.data.coinify.getLimits)
 
-      const values = yield select(selectors.form.getFormValues('coinifyCheckout'))
+      const values = yield select(selectors.form.getFormValues(form))
       // console.log('handleChange', action, form, values)
-
       if (!payload) return null
 
       switch (field) {
@@ -118,7 +122,7 @@ export default ({ coreSagas }) => {
           }
           const leftResult = yield call(coreSagas.data.coinify.fetchQuote, { quote: { amount: payload * 100, baseCurrency: values.currency, quoteCurrency: 'BTC' } })
           const amount = leftResult.quoteAmount
-          yield put(actions.form.initialize('coinifyCheckout', merge(values, { 'rightVal': amount / 1e8 })))
+          yield put(actions.form.initialize(form, merge(values, { 'rightVal': amount / 1e8 })))
           yield put(A.coinifyCheckoutBusyOff())
           break
         case 'rightVal':
@@ -128,15 +132,15 @@ export default ({ coreSagas }) => {
           const rightLimitsError = service.getLimitsError(fiatAmount, limits.data, values.currency)
           if (rightLimitsError) {
             yield put(A.setCoinifyCheckoutError(rightLimitsError))
-            yield put(actions.form.initialize('coinifyCheckout', merge(values, { 'leftVal': fiatAmount })))
+            yield put(actions.form.initialize(form, merge(values, { 'leftVal': fiatAmount })))
             return
           }
-          yield put(actions.form.initialize('coinifyCheckout', merge(values, { 'leftVal': fiatAmount })))
+          yield put(actions.form.initialize(form, merge(values, { 'leftVal': fiatAmount })))
           yield put(A.coinifyCheckoutBusyOff())
           break
         case 'currency':
           yield put(actions.core.data.coinify.fetchRateQuote(payload))
-          yield put(actions.form.initialize('coinifyCheckout', merge(values, { 'leftVal': '', 'rightVal': '' })))
+          yield put(actions.form.initialize(form, merge(values, { 'leftVal': '', 'rightVal': '' })))
           yield put(A.coinifyCheckoutBusyOn())
           break
       }
@@ -147,16 +151,22 @@ export default ({ coreSagas }) => {
   }
 
   const setCheckoutMax = function * (action) {
+    const { amount, type } = action.payload
     try {
-      yield put(actions.form.change('coinifyCheckout', 'leftVal', action.payload))
+      type === 'buy'
+        ? yield put(actions.form.change('coinifyCheckoutBuy', 'leftVal', amount))
+        : yield put(actions.form.change('coinifyCheckoutSell', 'leftVal', amount))
     } catch (e) {
       yield put(actions.logs.logErrorMessage(logLocation, 'setCheckoutMax', e))
     }
   }
 
   const setCheckoutMin = function * (action) {
     try {
-      yield put(actions.form.change('coinifyCheckout', 'leftVal', action.payload))
+      const { amount, type } = action.payload
+      type === 'buy'
+        ? yield put(actions.form.change('coinifyCheckoutBuy', 'leftVal', amount))
+        : yield put(actions.form.change('coinifyCheckoutSell', 'leftVal', amount))
     } catch (e) {
       yield put(actions.logs.logErrorMessage(logLocation, 'setCheckoutMin', e))
     }

diff --git a/...ges/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Buy/index.js b/...ges/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Buy/index.js
@@ -14,7 +14,7 @@ class BuyContainer extends React.Component {
   }
 
   componentDidMount () {
-    this.props.coinifyActions.initializeCheckoutForm()
+    this.props.coinifyActions.initializeCheckoutForm('buy')
     this.props.coinifyDataActions.fetchTrades()
     this.props.coinifyDataActions.getKycs()
     if (this.props.step === 'isx') this.props.coinifyActions.coinifyNextCheckoutStep('checkout')
@@ -50,8 +50,8 @@ class BuyContainer extends React.Component {
         fetchBuyQuote={(quote) => fetchQuote({ quote, nextAddress: value.nextAddress })}
         currency={currency}
         checkoutBusy={checkoutBusy}
-        setMax={(amt) => this.props.coinifyActions.setCheckoutMax(amt)}
-        setMin={(amt) => this.props.coinifyActions.setCheckoutMin(amt)}
+        setMax={(amt) => this.props.coinifyActions.setCheckoutMax(amt, 'buy')}
+        setMin={(amt) => this.props.coinifyActions.setCheckoutMin(amt, 'buy')}
         paymentMedium={paymentMedium}
         initiateBuy={this.startBuy}
         step={step}

diff --git a/...blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Buy/selectors.js b/...blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Buy/selectors.js
@@ -67,7 +67,7 @@ export const getData = (state) => ({
   trades: getTrades(state),
   trade: getTrade(state),
   errors: getErrors(state),
-  currency: formValueSelector('coinifyCheckout')(state, 'currency'),
+  currency: formValueSelector('coinifyCheckoutBuy')(state, 'currency'),
   defaultCurrency: getCurrency(state),
   checkoutBusy: path(['coinify', 'checkoutBusy'], state),
   paymentMedium: path(['coinify', 'medium'], state),

diff --git a/...es/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/QuoteInput.js b/...es/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/QuoteInput.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import FiatConvertor from './QuoteInputTemplate'
+import { QuoteInputTemplateBuy, QuoteInputTemplateSell } from './QuoteInputTemplate'
 import { actions, selectors } from 'data'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
@@ -9,30 +9,26 @@ import { getQuoteInputData } from './selectors'
 import Loading from '../../template.loading'
 
 class QuoteInput extends Component {
-  componentDidMount () {
-    this.props.actions.initializeCheckoutForm()
-  }
-  componentWillUnmount () {
-    this.props.actions.initializeCheckoutForm()
-  }
   render () {
     let { data, symbol, setMax, setMin, checkoutError, increaseLimit, defaultCurrency, limits, disabled, type } = this.props
-
     return data.cata({
-      Success: (value) => <FiatConvertor
-        val={value}
-        disabled={disabled}
-        unit={'__required__'}
-        currency={'__required__'}
-        limits={limits}
-        defaultCurrency={defaultCurrency}
-        symbol={symbol}
-        setMax={setMax}
-        setMin={setMin}
-        checkoutError={checkoutError}
-        increaseLimit={increaseLimit}
-        type={type}
-      />,
+      Success: (value) => {
+        const QuoteInputTemplate = type === 'buy' ? QuoteInputTemplateBuy : QuoteInputTemplateSell
+        return <QuoteInputTemplate
+          val={value}
+          disabled={disabled}
+          unit={'__required__'}
+          currency={'__required__'}
+          limits={limits}
+          defaultCurrency={defaultCurrency}
+          symbol={symbol}
+          setMax={setMax}
+          setMin={setMin}
+          checkoutError={checkoutError}
+          increaseLimit={increaseLimit}
+          type={type}
+        />
+      },
       Failure: (msg) => <div>Failure: {msg.error}</div>,
       Loading: () => <Loading />,
       NotAsked: () => <div>Not Asked</div>

diff --git a/...chain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/QuoteInputTemplate.js b/...chain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/QuoteInputTemplate.js
@@ -92,37 +92,35 @@ const FiatConvertor = (props) => {
   const currency = 'BTC'
 
   return (
-    <form>
-      <Wrapper>
-        <FiatConvertorInput>
-          <Container>
-            <Field name='leftVal' component={TextBoxDebounced} disabled={disabled} borderRightNone={1} />
-            <Field name='currency' component={SelectBoxCoinifyCurrency} defaultDisplay={defaultCurrency} />
-          </Container>
-          <ArrowLeft size='16px' name='left-arrow' />
-          <ArrowRight size='16px' name='right-arrow' />
-          <Container>
-            <Field name='rightVal' component={TextBoxDebounced} disabled={disabled} />
-            <Unit>{currency}</Unit>
-          </Container>
-        </FiatConvertorInput>
-        {
-          checkoutError
-            ? <Error size='13px' weight={300} color='error'>
-              { getLimitsError(checkoutError, limits, symbol, setMin) }
-            </Error>
-            : <LimitsHelper>
-              {type === 'buy'
-                ? <FormattedMessage id='buy.quote_input.remaining_buy_limit'
-                  defaultMessage='Your remaining buy limit is {max}' values={{ max: <a onClick={() => setMax(limits.max)}>{symbol}{limits.max}</a> }} />
-                : <FormattedMessage id='sell.quote_input.remaining_buy_limit'
-                  defaultMessage='Your remaining sell limit is {max}' values={{ max: <a onClick={() => setMax(limits.max)}>{symbol}{limits.max}</a> }} />
-              }
-              {level.name < 2 && <a onClick={() => increaseLimit()}><FormattedMessage id='quote_input.increase_limits' defaultMessage='Increase your limit.' /></a>}
-            </LimitsHelper>
-        }
-      </Wrapper>
-    </form>
+    <Wrapper>
+      <FiatConvertorInput>
+        <Container>
+          <Field name='leftVal' component={TextBoxDebounced} disabled={disabled} borderRightNone={1} />
+          <Field name='currency' component={SelectBoxCoinifyCurrency} defaultDisplay={defaultCurrency} />
+        </Container>
+        <ArrowLeft size='16px' name='left-arrow' />
+        <ArrowRight size='16px' name='right-arrow' />
+        <Container>
+          <Field name='rightVal' component={TextBoxDebounced} disabled={disabled} />
+          <Unit>{currency}</Unit>
+        </Container>
+      </FiatConvertorInput>
+      {
+        checkoutError
+          ? <Error size='13px' weight={300} color='error'>
+            {getLimitsError(checkoutError, limits, symbol, setMin)}
+          </Error>
+          : <LimitsHelper>
+            {type === 'buy'
+              ? <FormattedMessage id='buy.quote_input.remaining_buy_limit'
+                defaultMessage='Your remaining buy limit is {max}' values={{ max: <a onClick={() => setMax(limits.max)}>{symbol}{limits.max}</a> }} />
+              : <FormattedMessage id='sell.quote_input.remaining_buy_limit'
+                defaultMessage='Your remaining sell limit is {max}' values={{ max: <a onClick={() => setMax(limits.max)}>{symbol}{limits.max}</a> }} />
+            }
+            {level.name < 2 && <a onClick={() => increaseLimit()}><FormattedMessage id='quote_input.increase_limits' defaultMessage='Increase your limit.' /></a>}
+          </LimitsHelper>
+      }
+    </Wrapper>
   )
 }
 
@@ -135,4 +133,5 @@ FiatConvertor.propTypes = {
   disabled: PropTypes.bool
 }
 
-export default reduxForm({ form: 'coinifyCheckout', destroyOnUnmount: false })(FiatConvertor)
+export const QuoteInputTemplateBuy = reduxForm({ form: 'coinifyCheckoutBuy', destroyOnUnmount: false })(FiatConvertor)
+export const QuoteInputTemplateSell = reduxForm({ form: 'coinifyCheckoutSell', destroyOnUnmount: false })(FiatConvertor)
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
@@ -14,7 +14,7 @@ class SellContainer extends React.Component {
   }
 
   componentDidMount () {
-    this.props.coinifyActions.initializeCheckoutForm()
+    this.props.coinifyActions.initializeCheckoutForm('sell')
   }
 
   startSell () {
@@ -47,7 +47,7 @@ class SellContainer extends React.Component {
         fetchSellQuote={(quote) => fetchQuote({ quote, nextAddress: value.nextAddress })}
         currency={currency}
         checkoutBusy={checkoutBusy}
-        setMax={(amt) => this.props.coinifyActions.setCheckoutMax(amt)}
+        setMax={(amt) => this.props.coinifyActions.setCheckoutMax(amt, 'sell')}
         paymentMedium={paymentMedium}
         initiateSell={this.startSell}
         step={step}

diff --git a/...lockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/selectors.js b/...lockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/selectors.js
@@ -65,7 +65,7 @@ export const getData = (state) => ({
   rateQuoteR: getRateQuote(state),
   trade: getTrade(state),
   errors: getErrors(state),
-  currency: formValueSelector('coinifyCheckout')(state, 'currency'),
+  currency: formValueSelector('coinifyCheckoutSell')(state, 'currency'),
   defaultCurrency: getCurrency(state),
   checkoutBusy: path(['coinify', 'checkoutBusy'], state),
   paymentMedium: path(['coinify', 'medium'], state),

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/index.js
@@ -1,6 +1,4 @@
 import React from 'react'
-import { connect } from 'react-redux'
-import { getData } from './selectors'
 import Buy from './Buy'
 import Sell from './Sell'
 import OrderHistory from './OrderHistory'
@@ -16,6 +14,4 @@ class Checkout extends React.Component {
   }
 }
 
-const mapStateToProps = state => getData(state)
-
-export default connect(mapStateToProps, undefined)(Checkout)
+export default Checkout