fix(interest): inform user of ineligibility

blockchain · Dec 30, 2020 · 89c174e · 89c174e
1 parent 3924aff
commit 89c174e
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 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
@@ -1770,6 +1770,7 @@ type MessagesType = {
   'scenes.initborrow.comingsoon': 'Coming Soon'
   'scenes.initborrow.userblocked': 'Blockchain Borrow is not available in your country or region at the moment.'
   'scenes.initborrow.youcanborrow': 'You can borrow up to'
+  'scenes.interest.ineligible': 'You are not currently eligible to use this feature.'
   'scenes.interest.earnbody.access': 'Upgrade to Gold Level and access benefits like earning up to {highestRate}% annually on your crypto.'
   'scenes.interest.earninfo.verified.copy': 'Earn up to {highestRate}% annually when you transfer crypto to your Interest Account.'
   'scenes.interest.earnheaderverified': 'Earn interest on your crypto today.'

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Interest/IntroCard/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Interest/IntroCard/index.tsx
@@ -30,6 +30,15 @@ const IconWrapper = styled.div`
   flex-direction: row;
   justify-content: space-between;
 `
+const IneligibleBanner = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-top: 5%;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+`
 
 class IntroCard extends PureComponent<
   ParentStateType & Props & SuccessStateType
@@ -45,6 +54,28 @@ class IntroCard extends PureComponent<
       userData
     } = this.props
     const highestRate = interestRateArray.reduce((a, b) => Math.max(a, b))
+
+    if (!isGoldTier && userData.kycState === 'REJECTED') {
+      return (
+        <IneligibleBanner>
+          <div>
+            <Icon name='alert-filled' color='error' size='40px' />
+          </div>
+          <Text
+            size='16px'
+            color='grey800'
+            weight={600}
+            style={{ marginTop: '16px' }}
+          >
+            <FormattedMessage
+              id='scenes.interest.ineligible'
+              defaultMessage='You are not currently eligible to use this feature.'
+            />
+          </Text>
+        </IneligibleBanner>
+      )
+    }
+
     return (
       showInterestInfoBox && (
         <BoxStyled>