Merge pull request #222 from brave/welcome-error

Adds wallet failed flow
brave · Oct 18, 2018 · f5b2a1e · f5b2a1e
2 parents 8d83804 + af48676
commit f5b2a1e
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 16 deletions.
diff --git a/src/features/rewards/welcomePage/index.tsx b/src/features/rewards/welcomePage/index.tsx
@@ -10,6 +10,7 @@ import SettingsPage from '../settingsPage'
 import Button from '../../../components/buttonsIndicators/button'
 import InfoCard, { CardProps } from '../infoCard'
 import { ArrowDownIcon, BatColorIcon, LoaderIcon } from '../../../components/icons'
+import Alert from '../alert'
 
 // Utils
 import { getLocale } from '../../../helpers'
@@ -36,7 +37,10 @@ import {
   StyledCenterParagraph,
   StyledAnchor,
   StyledOptInSecond,
-  StyledHeroInfo
+  StyledHeroInfo,
+  StyledAlert,
+  StyledAlertLeft,
+  StyledAlertContent
 } from './style'
 
 const turnOnRewardsImage = require('./assets/turnOnRewards')
@@ -46,21 +50,16 @@ const braveContributeImage = require('./assets/braveContribute')
 export interface Props {
   id?: string
   optInAction: () => void
+  creating?: boolean
+  onReTry?: () => void
 }
 
-interface State {
-  creating: boolean
-}
-
-class WelcomePage extends React.PureComponent<Props, State> {
+class WelcomePage extends React.PureComponent<Props, {}> {
   private centerTextSection: HTMLDivElement | null
 
   constructor (props: Props) {
     super(props)
     this.centerTextSection = null
-    this.state = {
-      creating: false
-    }
   }
 
   scrollToCenter = () => {
@@ -82,10 +81,6 @@ class WelcomePage extends React.PureComponent<Props, State> {
   }
 
   optInAction = () => {
-    this.setState({
-      creating: true
-    })
-
     this.props.optInAction()
   }
 
@@ -111,7 +106,7 @@ class WelcomePage extends React.PureComponent<Props, State> {
         </StyledSection>
         <StyledOptInSection>
           {
-            this.state.creating
+            this.props.creating
             ? <Button
               level='secondary'
               size='call-to-action'
@@ -172,7 +167,7 @@ class WelcomePage extends React.PureComponent<Props, State> {
         </StyledActionTitle>
         <StyledOptInSecond>
           {
-            this.state.creating
+            this.props.creating
             ? <Button
               level={'primary'}
               size={'call-to-action'}
@@ -218,10 +213,29 @@ class WelcomePage extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { id } = this.props
+    const { id, onReTry } = this.props
 
     return (
       <SettingsPage id={id}>
+        {
+          onReTry
+          ? <StyledAlert>
+            <Alert type={'error'}>
+              <StyledAlertContent>
+                <StyledAlertLeft>
+                  <b>{getLocale('walletFailedTitle')}</b><br/>{getLocale('walletFailedText')}
+                </StyledAlertLeft>
+                  <Button
+                    level={'primary'}
+                    type={'accent'}
+                    text={getLocale('walletFailedButton')}
+                    onClick={onReTry}
+                  />
+              </StyledAlertContent>
+            </Alert>
+          </StyledAlert>
+          : null
+        }
         <StyledBackground>
           <StyledSection>
             {this.hero()}

diff --git a/src/features/rewards/welcomePage/style.ts b/src/features/rewards/welcomePage/style.ts
@@ -155,3 +155,23 @@ export const StyledHeroInfo = styled<{}, 'div'>('div')`
     padding: 0 10px;
   }
 `
+export const StyledAlert = styled<{}, 'div'>('div')`
+  margin-bottom: 30px;
+  border: 1px solid #F43405;
+  border-radius: 4px;
+  overflow: hidden;
+
+   @media (max-width: 767px) {
+    display: none;
+  }
+`
+
+export const StyledAlertContent = styled<{}, 'div'>('div')`
+  display: flex;
+  width: 100%;
+`
+
+export const StyledAlertLeft = styled<{}, 'div'>('div')`
+  flex-basis: 70%;
+  flex-grow: 1;
+`
diff --git a/stories/assets/locale.ts b/stories/assets/locale.ts
@@ -158,6 +158,9 @@ const locale: Record<string, string> = {
   walletActivity: 'Wallet Activity',
   walletAddress: 'Wallet Address',
   walletBalance: 'wallet balance',
+  walletFailedButton: 'Re-try',
+  walletFailedTitle: 'Wallet creation failed',
+  walletFailedText: 'Please check your internet connection.',
   welcome: 'Welcome!',
   welcomeButtonTextOne: 'Start Earning Now!',
   welcomeButtonTextTwo: 'Join Rewards',