Adds Wallet creation loader and failure message to panel opt in

src/features/rewards/panelWelcome/index.tsx

@@ -14,19 +14,23 @@ import {
   StyledDescText,
   StyledFooterText,
   StyledButtonWrapper,
-  StyledTrademark
+  StyledTrademark,
+  StyledErrorMessage
 } from './style'
 
-import { BatColorIcon } from '../../../components/icons'
+import { BatColorIcon, LoaderIcon } from '../../../components/icons'
 import Button from '../../../components/buttonsIndicators/button'
 
 export type Variant = 'one' | 'two'
 
 export interface Props {
   id?: string
   variant?: Variant
+  creating?: boolean
+  error?: boolean
   moreLink?: () => void
   optInAction: () => void
+  optInErrorAction: () => void
 }
 
 export default class PanelWelcome extends React.PureComponent<Props, {}> {
@@ -50,7 +54,7 @@ export default class PanelWelcome extends React.PureComponent<Props, {}> {
   }
 
   render () {
-    const { id, optInAction, moreLink } = this.props
+    const { id, optInAction, optInErrorAction, moreLink } = this.props
 
     let props = {}
 
@@ -77,13 +81,42 @@ export default class PanelWelcome extends React.PureComponent<Props, {}> {
             {getLocale(this.locale.desc)}
           </StyledDescText>
           <StyledButtonWrapper>
-            <Button
-              size='call-to-action'
-              type='subtle'
-              level='secondary'
-              onClick={optInAction}
-              text={getLocale(this.locale.button)}
-            />
+            {
+              this.props.creating && !this.props.error
+              ? <Button
+                level='secondary'
+                size='call-to-action'
+                type='subtle'
+                text={getLocale('braveRewardsCreatingText')}
+                disabled={true}
+                data-test-id='optInAction'
+                icon={{
+                  image: <LoaderIcon />,
+                  position: 'after'
+                }}
+              />
+              : this.props.error
+                ? <>
+                    <StyledErrorMessage>
+                      {getLocale('walletFailedTitle')}
+                    </StyledErrorMessage>
+                    <Button
+                      level='secondary'
+                      size='call-to-action'
+                      type='subtle'
+                      text={getLocale('walletFailedButton')}
+                      onClick={optInErrorAction}
+                      data-test-id='optInErrorAction'
+                    />
+                  </>
+                : <Button
+                  size='call-to-action'
+                  type='subtle'
+                  level='secondary'
+                  onClick={optInAction}
+                  text={getLocale(this.locale.button)}
+                />
+            }
           </StyledButtonWrapper>
           <StyledFooterText {...props}>
             {getLocale(this.locale.footer)}

src/features/rewards/panelWelcome/style.ts

@@ -86,3 +86,11 @@ export const StyledTrademark = styled<{}, 'span'>('span')`
   font-weight: 500;
   opacity: 0.7;
 ` as any
+
+export const StyledErrorMessage = styled<{}, 'span'>('span')`
+  font-size: 16px;
+  display: block;
+  margin: 0px auto 20px;
+  line-height: 28px;
+  color: #FFF;
+`

stories/features/rewards/concepts.tsx

@@ -132,25 +132,39 @@ storiesOf('Feature Components/Rewards/Concepts/Desktop', module)
       </div>
     )
   }))
-  .add('Pre Opt-In', () => {
+  .add('Pre Opt-In', withState({ creatingOne: false, creatingTwo: false }, (store) => {
+    const creatingOne = () => {
+      store.set({ creatingOne: true })
+    }
+
+    const creatingTwo = () => {
+      store.set({ creatingTwo: true })
+    }
+
     return (
       <div style={{ background: `url(${tipScreen}) no-repeat top center`, width: '986px', height: '912px', margin: '0 auto', position: 'relative' }}>
         <div style={{ position: 'absolute', top: '40px', left: '120px', width: '373px', minHeight: '446px', borderRadius: '8px', overflow: 'hidden' }}>
           <PanelWelcome
             variant={'one'}
-            optInAction={dummyOptInAction}
+            creating={store.state.creatingOne}
+            optInAction={creatingOne}
             moreLink={dummyOptInAction}
+            optInErrorAction={dummyOptInAction}
+            error={boolean('Wallet Creation Error', false)}
           />
         </div>
         <div style={{ position: 'absolute', top: '40px', left: '565px', width: '373px', minHeight: '446px', borderRadius: '8px', overflow: 'hidden' }}>
           <PanelWelcome
             variant={'two'}
-            optInAction={dummyOptInAction}
+            optInAction={creatingTwo}
+            creating={store.state.creatingTwo}
+            optInErrorAction={dummyOptInAction}
+            error={boolean('Wallet Creation Error', false)}
           />
         </div>
       </div>
     )
-  })
+  }))
   .add('Wallet Panel', withState({ showSummary: false, tipsEnabled: true, includeInAuto: true }, (store) => {
     const curveRgb = '233,235,255'
     const panelRgb = '249,251,252'