feat(swap2.0): show alert if amount is above silver max

blockchain · Oct 27, 2020 · 07a1d6a · 07a1d6a
1 parent f40e55a
commit 07a1d6a
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 25 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts b/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts
@@ -304,6 +304,7 @@ type MessagesType = {
   'components.txlistitem.valueattime': 'Value When {type}'
   'components.txlistitem.watchonly': 'Non-Spendable'
   'copy.above_swap_max': 'Maximum Swap is {value}'
+  'copy.above_swap_max_silver': 'Upgrade your profile to swap this amount.'
   'copy.address': 'Address'
   'copy.amount': 'Amount'
   'copy.available': 'Available'
@@ -333,6 +334,7 @@ type MessagesType = {
   'copy.new': 'New'
   'copy.new_swap': 'New Swap'
   'copy.no_payment_methods': 'No payment methods available.'
+  'copy.not_now': 'Not Now'
   'copy.on_chain_txs': 'On-chain transactions only'
   'copy.outgoing_fee': 'Outgoing Fee'
   'copy.private_key': 'Private Key'

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/modals/types.ts b/packages/blockchain-wallet-v4-frontend/src/data/modals/types.ts
@@ -80,6 +80,7 @@ export type ModalOriginType =
   | 'Swap'
   | 'SwapGetStarted'
   | 'SwapPrompt'
+  | 'SwapLimitPrompt'
   | 'TheExchangePage'
   | 'TransactionList'
   | 'Unknown'

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Swap/EnterAmount/Checkout/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Swap/EnterAmount/Checkout/index.tsx
@@ -1,11 +1,12 @@
 import { Button, Text } from 'blockchain-info-components'
 import { Field, InjectedFormProps, reduxForm } from 'redux-form'
 import { FormattedMessage } from 'react-intl'
+import media from 'services/ResponsiveService'
 import React from 'react'
 import styled from 'styled-components'
 
 import { AmountTextBox } from 'components/Exchange'
-import { ErrorCartridge } from 'components/Cartridge'
+import { BlueCartridge, ErrorCartridge } from 'components/Cartridge'
 import { fiatToString } from 'core/exchange/currency'
 import { FlyoutWrapper } from 'components/Flyout'
 import { formatTextAmount } from 'services/ValidationHelper'
@@ -32,10 +33,24 @@ const Amounts = styled.div`
 const MinMaxButtons = styled.div`
   display: flex;
 `
+const ButtonsRow = styled(MinMaxButtons)`
+  justify-content: space-between;
+  width: 105%;
+  ${media.mobile`
+    flex-direction: column;
+    width: 100%;
+    align-items: center;
+  `};
+`
 const CoinBalance = styled.div`
   margin-top: 2px;
   display: flex;
 `
+const UpgradePrompt = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
 const Errors = styled.div`
   margin: 32px 0 24px 0;
   display: flex;
@@ -91,6 +106,13 @@ const Checkout: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
     ? props.payment.effectiveBalance
     : props.BASE.balance
 
+  let maxAmountSilver = true
+  // props.userData.tiers.current === 1 &&
+  // amtError === 'ABOVE_MAX' &&
+  // props.limits.maxPossibleOrder < props.limits.maxOrder
+  //   ? true
+  //   : false
+
   const handleMinMaxClick = () => {
     const value = amtError === 'BELOW_MIN' ? min : max
     props.formActions.change('swapAmount', 'amount', value)
@@ -100,7 +122,6 @@ const Checkout: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
     e.preventDefault()
     props.swapActions.setStep({ step: 'PREVIEW_SWAP' })
   }
-
   return (
     <FlyoutWrapper style={{ paddingTop: '0px' }}>
       <StyledForm onSubmit={handleSubmit}>
@@ -143,10 +164,14 @@ const Checkout: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
           <div />
         </QuoteRow>
         {amtError && (
-          <Errors onClick={handleMinMaxClick}>
+          <Errors>
             <>
               {amtError === 'BELOW_MIN' ? (
-                <CustomErrorCartridge role='button' data-e2e='swapMin'>
+                <CustomErrorCartridge
+                  onClick={handleMinMaxClick}
+                  role='button'
+                  data-e2e='swapMin'
+                >
                   <FormattedMessage
                     id='copy.below_swap_min'
                     defaultMessage='Minimum Swap is {value}'
@@ -155,8 +180,53 @@ const Checkout: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
                     }}
                   />
                 </CustomErrorCartridge>
+              ) : maxAmountSilver ? (
+                <UpgradePrompt>
+                  <BlueCartridge style={{ marginBottom: '26px' }}>
+                    <FormattedMessage
+                      id='copy.above_swap_max_silver'
+                      defaultMessage='Upgrade your profile to swap this amount.'
+                    />
+                  </BlueCartridge>
+                  <ButtonsRow>
+                    <Button
+                      data-e2e='swapUpgradePromptNotNow'
+                      nature='light'
+                      onClick={handleMinMaxClick}
+                      height='48px'
+                      width='192px'
+                    >
+                      <FormattedMessage
+                        id='copy.not_now'
+                        defaultMessage='Not Now'
+                      />
+                    </Button>
+                    <Button
+                      data-e2e='swapLimitUpgradePrompt'
+                      nature='primary'
+                      onClick={() =>
+                        props.idvActions.verifyIdentity(
+                          2,
+                          false,
+                          'SwapLimitPrompt'
+                        )
+                      }
+                      height='48px'
+                      width='192px'
+                    >
+                      <FormattedMessage
+                        id='scenes.exchange.exchangeform.limit_info.upgrade'
+                        defaultMessage='Upgrade'
+                      />
+                    </Button>
+                  </ButtonsRow>
+                </UpgradePrompt>
               ) : (
-                <CustomErrorCartridge role='button' data-e2e='swapMax'>
+                <CustomErrorCartridge
+                  onClick={handleMinMaxClick}
+                  role='button'
+                  data-e2e='swapMax'
+                >
                   <FormattedMessage
                     id='copy.above_swap_max'
                     defaultMessage='Maximum Swap is {value}'

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Swap/EnterAmount/Checkout/validation.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Swap/EnterAmount/Checkout/validation.tsx
@@ -46,7 +46,6 @@ export const maximumAmount = (
   if (!allValues) return
 
   const { limits, rates, payment, walletCurrency } = restProps
-
   return Number(value) >
     Number(
       getMaxMin('max', limits, rates[walletCurrency], payment, restProps.BASE)
@@ -72,3 +71,17 @@ export const minimumAmount = (
     ? 'BELOW_MIN'
     : false
 }
+
+export const maximumAmountSilver = (
+  restProps: Props,
+  amtError: string | boolean
+) => {
+  const { limits, userData } = restProps
+  if (userData.tiers.current === 2) return
+  if (
+    userData.tiers.current === 1 &&
+    amtError === 'ABOVE_MAX' &&
+    limits.maxPossibleOrder < limits.maxOrder
+  )
+    return true
+}
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Swap/EnterAmount/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Swap/EnterAmount/index.tsx
@@ -65,7 +65,7 @@ class EnterAmount extends PureComponent<Props> {
     }
 
     const { BASE, COUNTER } = this.props.initSwapFormValues
-    const { coins, walletCurrency } = this.props
+    const { coins, userData, walletCurrency } = this.props
 
     return (
       <>
@@ -185,7 +185,7 @@ class EnterAmount extends PureComponent<Props> {
             Success: val => (
               <>
                 <Checkout {...val} {...this.props} BASE={BASE} />
-                <Upgrade {...this.props} />
+                {userData.tiers.current === 1 && <Upgrade {...this.props} />}
               </>
             ),
             Failure: () => <>oops</>,

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Swap/EnterAmount/template.upgrade.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Swap/EnterAmount/template.upgrade.tsx
@@ -30,7 +30,7 @@ const Upgrade: React.FC<Props> = props => {
           </Text>
         </div>
         <Button
-          data-e2e='earnInterestLearnMore'
+          data-e2e='learnMoreUpgrade'
           nature='light'
           onClick={() =>
             props.swapActions.setStep({

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Swap/UpgradePrompt/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Swap/UpgradePrompt/index.tsx
@@ -4,10 +4,6 @@ import { FlexStartRow, IconBackground } from '../components'
 import { FormattedMessage } from 'react-intl'
 import React from 'react'
 
-import { bindActionCreators, compose, Dispatch } from 'redux'
-import { connect, ConnectedProps } from 'react-redux'
-
-import { actions } from 'data'
 import { FlyoutWrapper } from 'components/Flyout'
 
 const UpgradePrompt: React.FC<Props> = props => {
@@ -132,18 +128,8 @@ const UpgradePrompt: React.FC<Props> = props => {
   )
 }
 
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  idvActions: bindActionCreators(
-    actions.components.identityVerification,
-    dispatch
-  )
-})
-const connector = connect(undefined, mapDispatchToProps)
-
-const enhance = compose(connector)
-
 type OwnProps = BaseProps & { handleClose: () => void }
 
-export type Props = OwnProps & ConnectedProps<typeof connector>
+export type Props = OwnProps
 
-export default enhance(UpgradePrompt)
+export default UpgradePrompt
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Swap/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Swap/index.tsx
@@ -145,6 +145,10 @@ const mapStateToProps = (
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
   formActions: bindActionCreators(actions.form, dispatch),
+  idvActions: bindActionCreators(
+    actions.components.identityVerification,
+    dispatch
+  ),
   swapActions: bindActionCreators(actions.components.swap, dispatch)
 })