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'