fix(SFOX): fix CYO button reacting to limits

blockchain · May 30, 2018 · 79a5ceb · 79a5ceb
1 parent b49cc80
commit 79a5ceb
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 8 deletions.
diff --git a/...es/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/OrderCheckout.js b/...es/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/OrderCheckout.js
@@ -15,7 +15,7 @@ const quoteInputSpec = {
   output: 'btc'
 }
 
-const OrderCheckout = ({ quoteR, account, onFetchQuote, reason, finishAccountSetup, limits, type }) => {
+const OrderCheckout = ({ quoteR, account, onFetchQuote, reason, finishAccountSetup, limits, type, disableButton, enableButton, buttonStatus }) => {
   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' />
@@ -31,7 +31,7 @@ const OrderCheckout = ({ quoteR, account, onFetchQuote, reason, finishAccountSet
 
   const submitButtonHelper = () => (
     reason.indexOf('has_remaining') > -1
-      ? <StepTransition next Component={Button} style={spacing('mt-45')} nature='primary' fullwidth disabled={!Remote.Success.is(quoteR) || limitsHelper(quoteR, limits)}>
+      ? <StepTransition next Component={Button} style={spacing('mt-45')} nature='primary' fullwidth disabled={!Remote.Success.is(quoteR) || limitsHelper(quoteR, limits) || !buttonStatus}>
         <FormattedMessage id='review_order' defaultMessage='Review Order' />
       </StepTransition>
       : <div style={{ ...flex('col'), ...spacing('mt-15') }}>
@@ -92,6 +92,8 @@ const OrderCheckout = ({ quoteR, account, onFetchQuote, reason, finishAccountSet
                 disabled={disableInputs}
                 limits={limits}
                 type={type}
+                disableButton={disableButton}
+                enableButton={enableButton}
               />
             </div>
           </Fragment>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/QuoteInput.js b/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/QuoteInput.js
@@ -58,7 +58,8 @@ class QuoteInput extends Component {
         return {
           [side]: convert.to[spec[side]](quote.baseAmount),
           [otherSide(side)]: convert.to[spec[otherSide(side)]](quote.quoteAmount),
-          lastQuoteId: quote.id
+          lastQuoteId: quote.id,
+          fiatAmount: quote.baseCurrency === 'BTC' ? quote.quoteAmount : quote.baseAmount
         }
       } else {
         return null
@@ -101,15 +102,15 @@ class QuoteInput extends Component {
 
   fetchQuote = () => {
     let quote = this.getQuoteValues()
-    let amt = quote.amt / 100
-    let { min, max } = this.props.limits
-    if (amt > max || amt < min) return
     this.props.onFetchQuote(quote)
   }
 
   render () {
-    let { spec, disabled } = this.props
-    let { input, output } = this.state
+    let { spec, disabled, limits } = this.props
+    let { input, output, fiatAmount } = this.state
+
+    if (fiatAmount > limits.max || fiatAmount < limits.min) this.props.disableButton()
+    else this.props.enableButton()
 
     return (
       <WrappedFiatConverter

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/index.js
@@ -8,6 +8,10 @@ import Loading from 'components/BuySell/Loading'
 import { path } from 'ramda'
 
 class SfoxCheckout extends React.PureComponent {
+  constructor (props) {
+    super(props)
+    this.state = { buttonStatus: false }
+  }
   componentDidMount () {
     this.props.sfoxDataActions.fetchTrades()
     this.props.sfoxDataActions.fetchProfile()
@@ -46,6 +50,9 @@ class SfoxCheckout extends React.PureComponent {
         payment={payment}
         clearTradeError={() => sfoxNotAsked()}
         changeTab={tab => change('buySellTabStatus', 'status', tab)}
+        disableButton={() => this.setState({ buttonStatus: false })}
+        enableButton={() => this.setState({ buttonStatus: true })}
+        buttonStatus={this.state.buttonStatus}
       />,
       Failure: (error) => <div>Failure: {error && error.message}</div>,
       Loading: () => <Loading />,

diff --git a/...blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/template.success.js b/...blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/template.success.js
@@ -72,6 +72,9 @@ const Success = props => {
     handleTradeDetailsClick,
     clearTradeError,
     changeTab,
+    disableButton,
+    enableButton,
+    buttonStatus,
     ...rest } = props
 
   const accounts = Remote.of(props.value.accounts).getOrElse([])
@@ -107,6 +110,9 @@ const Success = props => {
                 account={accounts[0]}
                 onFetchQuote={fetchBuyQuote}
                 reason={reason}
+                disableButton={disableButton}
+                enableButton={enableButton}
+                buttonStatus={buttonStatus}
                 finishAccountSetup={finishAccountSetup}
                 limits={limits.buy}
                 type={'buy'}
@@ -149,6 +155,9 @@ const Success = props => {
               account={accounts[0]}
               onFetchQuote={fetchSellQuote}
               reason={reason}
+              disableButton={disableButton}
+              enableButton={enableButton}
+              buttonStatus={buttonStatus}
               finishAccountSetup={finishAccountSetup}
               limits={limits.sell}
               type={'sell'}