fix(Coinify): prefill with card max from payment step

packages/blockchain-wallet-v4-frontend/src/data/modules/coinify/actionTypes.js

@@ -43,3 +43,5 @@ export const FINISH_TRADE = '@COMPONENT.FINISH_TRADE'
 
 export const CANCEL_TRADE = '@COMPONENT.CANCEL_TRADE'
 export const SET_CANCEL_TRADE_ID = '@COMPONENT.SET_CANCEL_TRADE_ID'
+
+export const CHECKOUT_CARD_MAX = '@COMPONENT.CHECKOUT_CARD_MAX'

packages/blockchain-wallet-v4-frontend/src/data/modules/coinify/actions.js

@@ -46,3 +46,5 @@ export const setCancelTradeId = (id) => ({ type: AT.SET_CANCEL_TRADE_ID, payload
 export const finishTrade = (trade) => ({ type: AT.FINISH_TRADE, payload: trade })
 
 export const cancelTrade = (trade) => ({ type: AT.CANCEL_TRADE, payload: trade })
+
+export const checkoutCardMax = (limits) => ({ type: AT.CHECKOUT_CARD_MAX, payload: limits })

packages/blockchain-wallet-v4-frontend/src/data/modules/coinify/sagaRegister.js

@@ -20,5 +20,6 @@ export default ({ coreSagas }) => {
     yield takeLatest(AT.CANCEL_ISX, coinifySagas.cancelISX)
     yield takeLatest(AT.FINISH_TRADE, coinifySagas.finishTrade)
     yield takeLatest(AT.CANCEL_TRADE, coinifySagas.cancelTrade)
+    yield takeLatest(AT.CHECKOUT_CARD_MAX, coinifySagas.checkoutCardMax)
   }
 }

packages/blockchain-wallet-v4-frontend/src/data/modules/coinify/sagas.js

@@ -128,6 +128,18 @@ export default ({ coreSagas }) => {
     }
   }
 
+  const checkoutCardMax = function * (action) {
+    try {
+      const { card } = action.payload
+      const levelR = yield select(selectors.core.data.coinify.getLevel)
+      const currency = levelR.map(l => l.currency).getOrElse('EUR')
+      const cardMax = path([currency], card.inRemaining)
+      yield put(actions.form.change('coinifyCheckoutBuy', 'leftVal', cardMax))
+    } catch (e) {
+      yield put(actions.logs.logErrorMessage(logLocation, 'checkoutCardMax', e))
+    }
+  }
+
   const handleChange = function * (action) {
     try {
       const form = path(['meta', 'form'], action)
@@ -321,6 +333,7 @@ export default ({ coreSagas }) => {
 
   return {
     buy,
+    checkoutCardMax,
     coinifySaveMedium,
     coinifySignup,
     deleteBankAccount,

packages/blockchain-wallet-v4-frontend/src/modals/CoinifyExchangeData/Payment/index.js

@@ -39,7 +39,7 @@ class PaymentContainer extends Component {
 
   render () {
     const { data, coinifyBusy, coinifyActions } = this.props
-    const { openKYC } = coinifyActions
+    const { openKYC, checkoutCardMax } = coinifyActions
 
     const busy = coinifyBusy.cata({
       Success: () => false,
@@ -59,6 +59,7 @@ class PaymentContainer extends Component {
           triggerKyc={this.triggerKyc}
           busy={busy}
           openPendingKyc={openKYC}
+          handlePrefillCardMax={(limits) => checkoutCardMax(limits)}
         />,
       Failure: (msg) => <div>ERROR: {msg}</div>,
       Loading: () => <Loading />,

packages/blockchain-wallet-v4-frontend/src/modals/CoinifyExchangeData/Payment/mediumHelpers.js

@@ -44,7 +44,7 @@ const BankDisabledText = styled(Text)`
   align-items: center;
 `
 
-export const cardOptionHelper = (quote, limits, isChecked, handlePaymentClick, cardDisabled) => {
+export const cardOptionHelper = (quote, limits, isChecked, handlePaymentClick, cardDisabled, prefillCardMax) => {
   const PaymentRadioCard = ({ isChecked, handlePaymentClick }) => (
     <PaymentOption isChecked={isChecked} onClick={() => !cardDisabled && handlePaymentClick('card')} disabled={cardDisabled} >
       <input type='radio' name='inMedium' id='card' value='card' style={{display: 'none'}} />
@@ -76,7 +76,7 @@ export const cardOptionHelper = (quote, limits, isChecked, handlePaymentClick, c
       <Text size='14px' weight={300} style={spacing('mt-25 mb-15')}>
         <FormattedMessage id='coinifyexchangedata.payment.mediumhelpers.card.abovecardlimit' defaultMessage='{amount} {currency} is above your daily credit card limit of {limit} {currency}. Please use a bank transfer or lower your purchase amount.' values={{ currency: currency, amount: amount, limit: limit }} />
       </Text>
-      <StepTransition prev Component={Link} size='13px' weight={300}>
+      <StepTransition prev Component={Link} size='13px' weight={300} onClick={() => prefillCardMax(limits)}>
         <FormattedMessage id='coinifyexchangedata.payment.mediumhelpers.card.usecreditdebit' defaultMessage='Use Credit/Debit card' />
       </StepTransition>
     </PaymentOptionContainer>

packages/blockchain-wallet-v4-frontend/src/modals/CoinifyExchangeData/Payment/template.success.js

@@ -42,14 +42,15 @@ const isCardDisabled = (q, l) => {
 }
 
 const Payment = (props) => {
-  const { value, busy, handlePaymentClick, medium, triggerKyc, openPendingKyc, quote } = props
+  const { value, busy, handlePaymentClick, medium, triggerKyc, openPendingKyc, quote, handlePrefillCardMax } = props
   const { limits, level, kycs } = value
   const quoteData = path(['data'], quote)
   const kyc = head(kycs)
   const kycState = kycs.length && path(['state'], kyc)
   const cardDisabled = isCardDisabled(quoteData, limits)
   const bankDisabled = kycState === 'reviewing' || kycState === 'pending' || kycState === 'processing'
   if (bankDisabled) handlePaymentClick('card')
+  const prefillCardMax = (limits) => handlePrefillCardMax(limits)
 
   const isChecked = (type) => medium === type
 
@@ -67,7 +68,7 @@ const Payment = (props) => {
           </InputWrapper>
           <PaymentWrapper>
             { bankOptionHelper(quoteData, limits, isChecked('bank'), handlePaymentClick, bankDisabled, openPendingKyc, kyc) }
-            { cardOptionHelper(quoteData, limits, isChecked('card'), handlePaymentClick, cardDisabled) }
+            { cardOptionHelper(quoteData, limits, isChecked('card'), handlePaymentClick, cardDisabled, prefillCardMax) }
           </PaymentWrapper>
         </BorderBox>
       </ColLeft>