Fixes #228, adds optin status messages to panelWelcome

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('tryAgain')}
+ 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/assets/locale.ts

@@ -148,6 +148,7 @@ const locale: Record<string, string> = {
  tokens: 'tokens',
  total: 'Total',
  transactions: 'Transactions',
+ tryAgain: 'Try Again',
  turnOnRewardsDesc: 'This enables both Brave Ads and Auto-Contribute. You can always opt out each any time.',
  turnOnRewardsTitle: 'Turn on Rewards',
  type: 'Type',

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'