fix(Swap): fixed limits message logic

blockchain · Dec 14, 2018 · da246f5 · da246f5
1 parent 931d572
commit da246f5
Show file tree

Hide file tree

Showing 6 changed files with 190 additions and 80 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/modules/profile/model.js b/packages/blockchain-wallet-v4-frontend/src/data/modules/profile/model.js
@@ -17,12 +17,12 @@ export const KYC_STATES = {
 }
 
 export const TIERS_STATES = {
-  NONE: 'NONE',
-  PENDING: 'PENDING',
-  UNDER_REVIEW: 'UNDER_REVIEW',
-  REJECTED: 'REJECTED',
-  VERIFIED: 'VERIFIED',
-  EXPIRED: 'EXPIRED'
+  NONE: 'none',
+  PENDING: 'pending',
+  UNDER_REVIEW: 'under_review',
+  REJECTED: 'rejected',
+  VERIFIED: 'verified',
+  EXPIRED: 'expired'
 }
 
 export const TIERS = {

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/modules/profile/sagas.js b/packages/blockchain-wallet-v4-frontend/src/data/modules/profile/sagas.js
@@ -1,7 +1,7 @@
 import { delay } from 'redux-saga'
 import { put, select, call, fork, cancel, spawn } from 'redux-saga/effects'
 import moment from 'moment'
-import { equals, lift, prop } from 'ramda'
+import { equals, lift, prop, sortBy } from 'ramda'
 
 import { Remote } from 'blockchain-wallet-v4'
 import { selectors, actions } from 'data'
@@ -267,7 +267,7 @@ export default ({ api, coreSagas }) => {
     try {
       yield put(A.fetchTiersLoading())
       const tiersData = yield call(api.fetchTiers)
-      yield put(A.fetchTiersSuccess(tiersData.tiers))
+      yield put(A.fetchTiersSuccess(sortBy(prop('index'), tiersData.tiers)))
     } catch (e) {
       yield put(A.fetchTiersFailure(e))
     }

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/modules/profile/selectors.js b/packages/blockchain-wallet-v4-frontend/src/data/modules/profile/selectors.js
@@ -2,18 +2,25 @@ import {
   and,
   any,
   compose,
+  complement,
   converge,
   curry,
   equals,
   find,
+  findLast,
   lift,
   path,
   pathOr,
   prop,
   propEq
 } from 'ramda'
 import { selectors } from 'data'
-import { USER_ACTIVATION_STATES, TIERS, KYC_STATES } from './model'
+import {
+  USER_ACTIVATION_STATES,
+  TIERS,
+  KYC_STATES,
+  TIERS_STATES
+} from './model'
 
 export const getUserData = path(['profile', 'userData'])
 export const getUserActivationState = compose(
@@ -58,6 +65,10 @@ export const getTiers = path(['profile', 'userTiers'])
 export const getTier = curry((tierIndex, state) =>
   lift(find(propEq('index', tierIndex)))(getTiers(state))
 )
+export const getLastAttemptedTier = compose(
+  lift(findLast(complement(propEq('state', TIERS_STATES.NONE)))),
+  getTiers
+)
 
 export const isCountrySupported = (countryCode, supportedCountries) =>
   any(propEq('code', countryCode), supportedCountries)

diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Footer/template.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Footer/template.js
@@ -5,7 +5,7 @@ import { Icon } from 'blockchain-info-components'
 import { Wrapper, MenuItem, SubMenu, SubMenuItem } from 'components/MenuLeft'
 
 const Footer = props => {
-  const { settingsOpened, userFlowSupported } = props.data
+  const { settingsOpened } = props.data
 
   return (
     <Wrapper>
@@ -41,16 +41,14 @@ const Footer = props => {
               />
             </SubMenuItem>
           </LinkContainer>
-          {userFlowSupported && (
-            <LinkContainer to='/settings/profile' activeClassName='active'>
-              <SubMenuItem data-e2e='settings_profileLink'>
-                <FormattedMessage
-                  id='layouts.wallet.menuleft.footer.profile'
-                  defaultMessage='Profile'
-                />
-              </SubMenuItem>
-            </LinkContainer>
-          )}
+          <LinkContainer to='/settings/profile' activeClassName='active'>
+            <SubMenuItem data-e2e='settings_profileLink'>
+              <FormattedMessage
+                id='layouts.wallet.menuleft.footer.profile'
+                defaultMessage='Profile'
+              />
+            </SubMenuItem>
+          </LinkContainer>
           <LinkContainer to='/settings/preferences' activeClassName='active'>
             <SubMenuItem data-e2e='settings_preferencesLink'>
               <FormattedMessage

diff --git a/...ges/blockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/LimitInfo/LimitInfo.js b/...ges/blockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/LimitInfo/LimitInfo.js
@@ -35,6 +35,105 @@ const TierIcon = styled(Icon)`
   font-weight: 800;
 `
 
+const LimitMessage = ({
+  currencySymbol,
+  limit,
+  showLimit,
+  showPending,
+  upgradeRequired
+}) => {
+  if (upgradeRequired)
+    return (
+      <LimitText color='btc'>
+        &nbsp;
+        <FormattedMessage
+          id='scenes.exchange.exchangeform.limit_info.under_review'
+          defaultMessage='In Review - Documents Needed'
+        />
+      </LimitText>
+    )
+
+  if (showPending)
+    return (
+      <LimitText color='btc'>
+        &nbsp;
+        <FormattedMessage
+          id='scenes.exchange.exchangeform.limit_info.in_review'
+          defaultMessage='In Review'
+        />
+      </LimitText>
+    )
+
+  if (showLimit)
+    return (
+      <LimitText color='success'>
+        &nbsp;
+        <FormattedMessage
+          id='scenes.exchange.exchangeform.limit_info.amount_available'
+          defaultMessage='{amount} Available'
+          values={{
+            amount: fiatToString({
+              value: limit,
+              unit: { symbol: currencySymbol }
+            })
+          }}
+        />
+      </LimitText>
+    )
+
+  return null
+}
+
+export const LimitAction = ({
+  nextTier,
+  nextTierAvailable,
+  nextTierInReview,
+  upgradeRequired,
+  upgradeTier
+}) => {
+  if (upgradeRequired)
+    return (
+      <TierLink onClick={upgradeTier}>
+        <LimitText color='brand-secondary'>
+          <FormattedMessage
+            id='scenes.exchange.exchangeform.limit_info.continue'
+            defaultMessage='Continue'
+          />
+        </LimitText>
+        <TierIcon name='down-arrow-filled' color='brand-secondary' />
+      </TierLink>
+    )
+
+  if (nextTierAvailable)
+    return (
+      <TierLink onClick={upgradeTier}>
+        <LimitText color='brand-secondary'>
+          <FormattedMessage
+            id='scenes.exchange.exchangeform.limit_info.upgrade'
+            defaultMessage='Upgrade'
+          />
+        </LimitText>
+        <TierIcon name='down-arrow-filled' color='brand-secondary' />
+      </TierLink>
+    )
+  if (nextTierInReview)
+    return (
+      <LinkContainer to='/swap/profile'>
+        <TierLink>
+          <LimitText color='btc'>
+            <FormattedMessage
+              id='scenes.exchange.exchangeform.limit_info.tier_in_review'
+              defaultMessage='Tier {tierIndex} In Review'
+              values={{ tierIndex: nextTier }}
+            />
+          </LimitText>
+          <TierIcon name='down-arrow-filled' color='btc' />
+        </TierLink>
+      </LinkContainer>
+    )
+
+  return null
+}
 export class LimitInfo extends React.PureComponent {
   upgradeTier = () => {
     const { actions, nextTier } = this.props
@@ -43,17 +142,19 @@ export class LimitInfo extends React.PureComponent {
 
   render () {
     const {
-      currentTier,
+      tier,
       nextTier,
       limit,
       showLimit,
-      showTier,
+      showPending,
+      hideTier,
       currencySymbol,
       nextTierAvailable,
-      nextTierInReview
+      nextTierInReview,
+      upgradeRequired
     } = this.props
 
-    if (!showTier) return null
+    if (hideTier) return null
 
     return (
       <LimitRow>
@@ -62,51 +163,25 @@ export class LimitInfo extends React.PureComponent {
             <FormattedMessage
               id='scenes.exchange.exchangeform.limit_info.tier'
               defaultMessage='Tier {tierIndex}'
-              values={{ tierIndex: currentTier }}
+              values={{ tierIndex: tier }}
             />
-            {showLimit && ' -'}
+            {(showLimit || upgradeRequired || showPending) && ' -'}
           </LimitText>
-          {showLimit && (
-            <LimitText color='success'>
-              &nbsp;
-              <FormattedMessage
-                id='scenes.exchange.exchangeform.limit_info.amount_available'
-                defaultMessage='{amount} Available'
-                values={{
-                  amount: fiatToString({
-                    value: limit,
-                    unit: { symbol: currencySymbol }
-                  })
-                }}
-              />
-            </LimitText>
-          )}
+          <LimitMessage
+            currencySymbol={currencySymbol}
+            limit={limit}
+            showLimit={showLimit}
+            showPending={showPending}
+            upgradeRequired={upgradeRequired}
+          />
         </Group>
-        {nextTierAvailable && (
-          <TierLink onClick={this.upgradeTier}>
-            <LimitText color='brand-secondary'>
-              <FormattedMessage
-                id='scenes.exchange.exchangeform.limit_info.upgrade'
-                defaultMessage='Upgrade'
-              />
-            </LimitText>
-            <TierIcon name='down-arrow-filled' color='brand-secondary' />
-          </TierLink>
-        )}
-        {nextTierInReview && (
-          <LinkContainer to='/swap/profile'>
-            <TierLink>
-              <LimitText color='brand-yellow'>
-                <FormattedMessage
-                  id='scenes.exchange.exchangeform.limit_info.tier_in_review'
-                  defaultMessage='Tier {tierIndex} In Review'
-                  values={{ tierIndex: nextTier }}
-                />
-              </LimitText>
-              <TierIcon name='down-arrow-filled' color='brand-yellow' />
-            </TierLink>
-          </LinkContainer>
-        )}
+        <LimitAction
+          nextTier={nextTier}
+          nextTierAvailable={nextTierAvailable}
+          nextTierInReview={nextTierInReview}
+          upgradeRequired={upgradeRequired}
+          upgradeTier={this.upgradeTier}
+        />
       </LimitRow>
     )
   }

diff --git a/...ges/blockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/LimitInfo/selectors.js b/...ges/blockchain-wallet-v4-frontend/src/scenes/Exchange/ExchangeForm/LimitInfo/selectors.js
@@ -1,4 +1,4 @@
-import { compose, isNil, map, max, prop, reduce } from 'ramda'
+import { compose, isNil, map, max, prop, propEq, reduce } from 'ramda'
 
 import { selectors, model } from 'data'
 import { currencySymbolMap } from 'services/CoinifyService'
@@ -23,33 +23,59 @@ const getMinLimit = limits => {
   return minLimit
 }
 
+const checkPreviousTiersRejection = (state, selected) => {
+  let tier = selected - 1
+  while (tier >= 1) {
+    const tierRejected = selectors.modules.profile
+      .getTier(tier, state)
+      .map(propEq('state', TIERS_STATES.REJECTED))
+      .getOrElse(true)
+
+    if (!tierRejected) return false
+    tier--
+  }
+
+  return true
+}
+
 export const getData = state => {
-  const { current, next } = selectors.modules.profile
+  const { next, selected } = selectors.modules.profile
     .getUserTiers(state)
     .getOrElse({})
   const userLimits = selectors.modules.profile
     .getUserLimits(state)
     .getOrElse({})
-  const nextTier = selectors.modules.profile
-    .getTier(next, state)
-    .getOrElse(null)
-  const currentTier = selectors.modules.profile
-    .getTier(current, state)
-    .getOrElse(null)
+  const lastAttemptedTier = selectors.modules.profile
+    .getLastAttemptedTier(state)
+    .getOrElse(null) || { index: 0, state: TIERS_STATES.NONE }
+  const lastAttemptedTierState = prop('state', lastAttemptedTier)
   const limit = compose(
     reduce(max, 0),
     map(getMinLimit)
   )(userLimits)
+  const nextTierAvailable = next > lastAttemptedTier.index
+  const lastTierRejected = lastAttemptedTierState === TIERS_STATES.REJECTED
+  const allPreviousTiersRejected = checkPreviousTiersRejection(state, selected)
 
   return {
-    currentTier: current,
+    tier: lastAttemptedTier.index,
     nextTier: next,
-    showTier:
-      current > 0 && prop('state', currentTier) !== TIERS_STATES.REJECTED,
+    hideTier:
+      lastAttemptedTier.index === 0 || (lastTierRejected && !nextTierAvailable),
     limit,
-    showLimit: limit !== Infinity && userLimits[0].currency,
+    lastTierState: lastAttemptedTierState,
+    showPending:
+      allPreviousTiersRejected &&
+      lastAttemptedTierState === TIERS_STATES.PENDING,
+    showLimit:
+      lastAttemptedTierState === TIERS_STATES.ACTIVE &&
+      limit !== Infinity &&
+      userLimits[0].currency,
     currencySymbol: currencySymbolMap[userLimits[0].currency],
-    nextTierAvailable: next > current,
-    nextTierInReview: prop('state', nextTier) === TIERS_STATES.PENDING
+    nextTierAvailable,
+    nextTierInReview:
+      !allPreviousTiersRejected &&
+      lastAttemptedTierState === TIERS_STATES.PENDING,
+    upgradeRequired: lastTierRejected && nextTierAvailable
   }
 }