Adds option to not display grant expiry date

Partial for brave/brave-browser#4042
brave · Apr 10, 2019 · 89d30cc · 89d30cc
1 parent 1b1ee01
commit 89d30cc
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 39 deletions.
diff --git a/src/features/rewards/grantComplete/__snapshots__/spec.tsx.snap b/src/features/rewards/grantComplete/__snapshots__/spec.tsx.snap
@@ -30,18 +30,10 @@ exports[`Grant complete tests basic tests matches the snapshot 1`] = `
 }
 
 .c4 {
- font-family: Muli,sans-serif;
- font-size: 14px;
- line-height: 1.29;
- color: #838391;
- margin: 44px 0 32px;
-}
-
-.c5 {
- margin-top: 0px;
+ margin-top: 32px;
 }
 
-.c7 {
+.c6 {
  --button-main-color: #FB542B;
  --button-main-color-hover: #FB542B;
  --button-main-color-active: #ffb8a6;
@@ -81,21 +73,21 @@ exports[`Grant complete tests basic tests matches the snapshot 1`] = `
  padding: 19px 15px;
 }
 
-.c7:hover:enabled {
+.c6:hover:enabled {
  --button-state-color: var(--button-main-color-hover);
 }
 
-.c7:active:enabled {
+.c6:active:enabled {
  --button-state-color: var(--button-main-color-active);
 }
 
-.c6 {
+.c5 {
  color: #fff;
  background: var(--button-state-color);
  border: 1px solid var(--button-state-color);
 }
 
-.c8 {
+.c7 {
  min-height: var(--icon-size);
  display: -webkit-box;
  display: -webkit-flex;
@@ -132,30 +124,17 @@ exports[`Grant complete tests basic tests matches the snapshot 1`] = `
  >
  BAT
  </div>
- <div
- className="c2"
- >
- MISSING: grantExpire
- </div>
- <div
- className="c3"
- />
  </div>
  <div
  className="c4"
- >
- MISSING: grantDisclaimer
- </div>
- <div
- className="c5"
  >
  <button
- className="c6 c7"
+ className="c5 c6"
  size="call-to-action"
  type="accent"
  >
  <div
- className="c8"
+ className="c7"
  size="call-to-action"
  type="accent"
  >

diff --git a/src/features/rewards/grantComplete/index.tsx b/src/features/rewards/grantComplete/index.tsx
@@ -32,11 +32,17 @@ export default class GrantComplete extends React.PureComponent<Props, {}> {
  <StyledBox>
  <StyledTitle>{getLocale('newTokenGrant')}</StyledTitle>
  <StyledValue>{amount} BAT</StyledValue>
- <StyledTitle>{getLocale('grantExpire')}</StyledTitle>
- <StyledValue>{date}</StyledValue>
+ {
+ date && date.length > 0
+ ? <>
+ <StyledTitle>{getLocale('grantExpire')}</StyledTitle>
+ <StyledValue>{date}</StyledValue>
+ </>
+ : null
+ }
  </StyledBox>
  {
- !isMobile
+ !isMobile && date && date.length > 0
  ? <StyledText>
  {getLocale('grantDisclaimer')}
  </StyledText>

diff --git a/src/features/rewards/grantComplete/style.ts b/src/features/rewards/grantComplete/style.ts
@@ -41,9 +41,9 @@ export const StyledText = styled<{}, 'div'>('div')`
  font-size: 14px;
  line-height: 1.29;
  color: #838391;
- margin: 44px 0 32px;
+ margin: 44px 0 0;
 `
 
 export const StyledButtonWrapper = styled<StyleProps, 'div'>('div')`
- margin-top: ${p => p.isMobile ? 40 : 0}px;
+ margin-top: ${p => p.isMobile ? 40 : 32}px;
 `
diff --git a/src/features/rewards/walletWrapper/index.tsx b/src/features/rewards/walletWrapper/index.tsx
@@ -415,6 +415,11 @@ export default class WalletWrapper extends React.PureComponent<Props, State> {
  tokens = convertProbiToFixed(grant.probi, 1)
  }
 
+ let date = ''
+ if (grant && grant.expiryTime !== 0) {
+ date = new Date(grant.expiryTime).toLocaleDateString()
+ }
+
  return (
  <>
  <StyledWrapper
@@ -424,19 +429,19 @@ export default class WalletWrapper extends React.PureComponent<Props, State> {
  notification={notification}
  >
  {
- grant && !grant.expiryTime
+ grant && !grant.probi
  ? this.grantCaptcha()
  : null
  }
  {
- grant && grant.expiryTime
+ grant && grant.probi
  ? <GrantWrapper
  isPanel={true}
  onClose={this.onFinish}
  title={getLocale('captchaLuckyDay')}
  text={getLocale('captchaOnTheWay')}
  >
- <GrantComplete isMobile={true} onClose={this.onFinish} amount={tokens} date={new Date(grant.expiryTime).toLocaleDateString()} />
+ <GrantComplete isMobile={true} onClose={this.onFinish} amount={tokens} date={date} />
  </GrantWrapper>
  : null
  }
@@ -498,7 +503,12 @@ export default class WalletWrapper extends React.PureComponent<Props, State> {
  {
  grants && grants.map((grant: Grant, i: number) => {
  return <StyledGrant key={`${id}-grant-${i}`}>
- <b>{grant.tokens} BAT</b> <span>{getLocale('expiresOn')} {grant.expireDate}</span>
+ <b>{grant.tokens} BAT</b>
+ {
+ grant.expireDate.length > 0
+ ? <span>{getLocale('expiresOn')} {grant.expireDate}</span>
+ : null
+ }
  </StyledGrant>
  })
  }

diff --git a/src/features/rewards/walletWrapper/style.ts b/src/features/rewards/walletWrapper/style.ts
@@ -164,6 +164,7 @@ export const StyledGrant = styled<{}, 'div'>('div')`
  min-width: 81px;
  text-align: right;
  display: inline-block;
+ padding-right: 5px;
  }
 
  span {

diff --git a/stories/features/rewards/grant.tsx b/stories/features/rewards/grant.tsx
@@ -61,7 +61,7 @@ storiesOf('Feature Components/Rewards/Grant', module)
  <GrantComplete
  onClose={dummyClick}
  amount={'30.0'}
- date={'8/15/2018'}
+ date={text('Date', '8/15/2018')}
  />
  </div>
  )