Fixes #228, adds optin status messages to panelWelcome

brave · Oct 23, 2018 · f0fa99f · f0fa99f
1 parent 046ebcf
commit f0fa99f
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 12 deletions.
diff --git a/src/features/rewards/panelWelcome/index.tsx b/src/features/rewards/panelWelcome/index.tsx
@@ -17,14 +17,16 @@ import {
  StyledTrademark
 } from './style'
 
-import { BatColorIcon } from '../../../components/icons'
+import { BatColorIcon, CloseStrokeIcon, 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
 }
@@ -77,13 +79,41 @@ 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
+ ? <Button
+ level='secondary'
+ size='call-to-action'
+ type='subtle'
+ text={getLocale('walletFailedTitle')}
+ disabled={true}
+ data-test-id='optInAction'
+ icon={{
+ image: <CloseStrokeIcon />,
+ position: 'after'
+ }}
+ />
+ : <Button
+ size='call-to-action'
+ type='subtle'
+ level='secondary'
+ onClick={optInAction}
+ text={getLocale(this.locale.button)}
+ />
+ }
  </StyledButtonWrapper>
  <StyledFooterText {...props}>
  {getLocale(this.locale.footer)}

diff --git a/stories/features/rewards/concepts.tsx b/stories/features/rewards/concepts.tsx
@@ -132,25 +132,37 @@ 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}
+ 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}
+ 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'