feat(seamless limits): improved old send flow error message and banne…

…r copy
blockchain · Dec 1, 2021 · d1e41fc · d1e41fc
1 parent b7fd1e1
commit d1e41fc
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 9 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
@@ -1376,7 +1376,7 @@ type MessagesType = {
   'modals.sendBch.firststep.share_tooltip': 'Add a note to remind yourself what this transaction relates to. This note will be private and only seen by you.'
   'modals.sendBch.firststep.towallet': 'To'
   'modals.send.banner.title': 'Uprade to Gold. Send More Crypto.'
-  'modals.send.banner.description': 'Verify your ID now and unlock Gold level trading. Send up to {dayCurrencySymbol}{dayAmount} a day.'
+  'modals.send.banner.description': 'Verify your ID now and unlock Gold level trading. Send up to {dayCurrencySymbol}{dayAmount} a day. Now, your limit is {currency}{limit} a {period}.'
   'modals.send.banner.get_started': 'Get Started'
   'modals.send.over_your_limit_and_period': 'Over your limit! Send up to {currency}{amount}. Now, your limit is {currency}{limit} a {period}.'
   'modals.sendbch.amountnotzeromessage': 'Invalid amount'

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Flyout/Banners/UpgradeToGold.tsx b/packages/blockchain-wallet-v4-frontend/src/components/Flyout/Banners/UpgradeToGold.tsx
@@ -7,7 +7,7 @@ import { formatFiat } from '@core/exchange/utils'
 import { CrossBorderLimits } from '@core/types'
 import { Button, Icon, Image, Text } from 'blockchain-info-components'
 import { convertBaseToStandard } from 'data/components/exchange/services'
-import { getEffectiveLimit } from 'services/custodial'
+import { getEffectiveLimit, getEffectivePeriod } from 'services/custodial'
 import { media } from 'services/styles'
 
 const Wrapper = styled.div`
@@ -89,7 +89,9 @@ const UpgradeToGoldBanner = ({ limits, verifyIdentity }: Props) => {
     hideBanner((prevValue) => !prevValue)
   }
 
+  const { currency } = limits?.current?.available
   const effectiveLimit = getEffectiveLimit(limits)
+  const effectivePeriod = getEffectivePeriod(limits)
 
   // if there is no effective limit we can't show banner
   if (!effectiveLimit) {
@@ -118,12 +120,15 @@ const UpgradeToGoldBanner = ({ limits, verifyIdentity }: Props) => {
           <Copy size='14px' color='grey900' weight={500}>
             <FormattedMessage
               id='modals.send.banner.description'
-              defaultMessage='Verify your ID now and unlock Gold level trading. Send up to {dayCurrencySymbol}{dayAmount} a day.'
+              defaultMessage='Verify your ID now and unlock Gold level trading. Send up to {dayCurrencySymbol}{dayAmount} a day.  Now, your limit is {currency}{limit} a {period}.'
               values={{
+                currency: Currencies[currency].units[currency].symbol,
                 dayAmount: formatFiat(convertBaseToStandard('FIAT', effectiveLimit.limit.value), 0),
                 dayCurrencySymbol:
                   Currencies[effectiveLimit.limit.currency].units[effectiveLimit.limit.currency]
-                    .symbol
+                    .symbol,
+                limit: formatFiat(convertBaseToStandard('FIAT', effectiveLimit.limit.value), 0),
+                period: effectivePeriod
               }}
             />
           </Copy>

diff --git a/...ges/blockchain-wallet-v4-frontend/src/components/Form/FiatConverter/Converter/template.js b/...ges/blockchain-wallet-v4-frontend/src/components/Form/FiatConverter/Converter/template.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 import { Exchange } from '@core'
 import { Text, TextInput } from 'blockchain-info-components'
@@ -15,7 +15,7 @@ const Wrapper = styled.div`
   align-items: flex-start;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
     Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  margin-top: ${(props) => (props.showError ? '20px' : '0')};
+  margin-bottom: ${(props) => (props.showError ? '20px' : '0')};
 `
 const FiatConverterInput = styled.div`
   display: flex;
@@ -50,8 +50,16 @@ const Error = styled(Text)`
   display: block;
   font-size: 12px;
   height: 15px;
-  top: ${(props) => (props.errorBottom ? '40px' : '-20px')};
-  right: 0;
+  top: ${(props) =>
+    props.showError && props.errorBottom ? '50px' : props.errorBottom ? '40px' : '-20px'};
+  ${(props) =>
+    props.showError && props.errorBottom
+      ? css`
+          left: 0;
+        `
+      : css`
+          right: 0;
+        `}
 `
 const getErrorState = (meta) => {
   return meta.touched && meta.invalid ? 'invalid' : 'initial'
@@ -75,8 +83,9 @@ const Converter = (props) => {
   } = props
   const errorState = getErrorState(meta)
 
+  const showError = !!(meta.touched && meta.error)
   return (
-    <Wrapper className={className} showError={!!(meta.touched && meta.error)}>
+    <Wrapper className={className} showError={showError}>
       <FiatConverterInput marginTop={marginTop}>
         <Container>
           <TextInput
@@ -116,6 +125,7 @@ const Converter = (props) => {
           color='error'
           className='error'
           data-e2e='fiatConverterError'
+          showError={showError}
         >
           {meta.error}
         </Error>

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Bch/SendBch/FirstStep/template.success.js b/packages/blockchain-wallet-v4-frontend/src/modals/Bch/SendBch/FirstStep/template.success.js
@@ -193,6 +193,7 @@ const FirstStep = (props) => {
             coin='BCH'
             marginTop='8px'
             data-e2e='sendBch'
+            errorBottom
             disabled={isPayPro}
           />
         </FormItem>

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Btc/SendBtc/FirstStep/template.success.js b/packages/blockchain-wallet-v4-frontend/src/modals/Btc/SendBtc/FirstStep/template.success.js
@@ -236,6 +236,7 @@ const FirstStep = (props) => {
             ]}
             coin='BTC'
             data-e2e='sendBtc'
+            errorBottom
             disabled={isPayPro}
             marginTop='8px'
           />

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Eth/SendEth/FirstStep/template.success.js b/packages/blockchain-wallet-v4-frontend/src/modals/Eth/SendEth/FirstStep/template.success.js
@@ -206,6 +206,7 @@ const FirstStep = (props) => {
             coin={coin}
             validate={[required, invalidAmount, insufficientFunds, maximumAmount, isSendLimitOver]}
             data-e2e={`${coin}Send`}
+            errorBottom
             marginTop='8px'
           />
         </FormItem>

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Xlm/SendXlm/FirstStep/template.success.js b/packages/blockchain-wallet-v4-frontend/src/modals/Xlm/SendXlm/FirstStep/template.success.js
@@ -193,6 +193,7 @@ const FirstStep = (props) => {
                 error={error}
                 coin='XLM'
                 validate={[required, invalidAmount, insufficientFunds, isSendLimitOver]}
+                errorBottom
                 data-e2e='sendXlm'
                 marginTop='8px'
               />