Placing refresh publisher link

Fixing column widths

Adding function for link. Storybook changes.

Make method optional

Adding flex attribute to a element

Align last flex item to right for check link

Replace removed margin

Update z-index for link

Adding loading icon

Correcting refreshed check

Add missing attribute for prop

Removed unneeded prop

returning prop needed to show spinner

Updates spec for month rollover

src/features/rewards/profile/index.tsx

@@ -15,10 +15,12 @@ import {
  StyledProviderWrap,
  StyledInlineVerified,
  StyledVerifiedText,
- StyledInlineUnVerified
+ StyledInlineUnVerified,
+ StyledVerifiedCheckLink,
+ StyledRefresh
 } from './style'
 import { getLocale } from '../../../helpers'
-import { VerifiedIcon, UnVerifiedIcon } from '../../../components/icons'
+import { VerifiedIcon, UnVerifiedIcon, LoaderIcon } from '../../../components/icons'
 
 export type Provider = 'twitter' | 'youtube' | 'twitch'
 
@@ -31,6 +33,9 @@ export interface Props {
  verified?: boolean
  tableCell?: boolean
  showUnVerifiedHelpIcon?: boolean
+ refreshingPublisher?: boolean
+ publisherRefreshed?: boolean
+ onRefreshPublisher?: () => void
 }
 
 /*
@@ -66,7 +71,10 @@ export default class Profile extends React.PureComponent<Props, {}> {
  title,
  verified,
  tableCell,
- showUnVerifiedHelpIcon
+ showUnVerifiedHelpIcon,
+ onRefreshPublisher,
+ refreshingPublisher,
+ publisherRefreshed
  } = this.props
 
  return (
@@ -109,6 +117,18 @@ export default class Profile extends React.PureComponent<Props, {}> {
  <StyledVerifiedText>
  {getLocale('unVerifiedPublisher')}
  </StyledVerifiedText>
+ {
+ !publisherRefreshed ?
+ refreshingPublisher ?
+ <StyledRefresh>
+ <LoaderIcon />
+ </StyledRefresh>
+ : <StyledVerifiedCheckLink onClick={onRefreshPublisher}>
+ {getLocale('unVerifiedCheck')}
+ </StyledVerifiedCheckLink>
+ :
+ null
+ }
  </StyledProviderWrap>
  ) : null}
  </StyledContent>

src/features/rewards/profile/style.ts

@@ -3,6 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import styled, { css } from 'styled-components'
+import palette from '../../../theme/colors'
 import { Props, Provider } from './index'
 
 const getOverflowRules = (provider?: Provider) => {
@@ -147,6 +148,24 @@ export const StyledVerifiedText = styled<{}, 'span'>('span')`
  margin-left: 4px;
 `
 
+export const StyledRefresh = styled<{}, 'span'>('span')`
+ color: ${palette.blue400};
+ line-height: 0;
+ height: 18px;
+ width: 18px;
+ vertical-align: bottom;
+ margin-left: auto;
+`
+
+export const StyledVerifiedCheckLink = styled<{}, 'span'>('span')`
+ font-size: 12px;
+ color: ${palette.blue400};
+ cursor: pointer;
+ text-decoration: none;
+ margin-left: auto;
+ z-index: 1;
+`
+
 export const StyledInlineVerified = styled<{}, 'span'>('span')`
  width: 19px;
  padding-top: 2px;

src/features/rewards/walletPanel/index.tsx

@@ -55,6 +55,9 @@ export interface Props {
  onToggleTips: () => void
  onAmountChange: () => void
  onIncludeInAuto: () => void
+ onRefreshPublisher?: () => void
+ refreshingPublisher?: boolean
+ publisherRefreshed?: boolean
  showUnVerified?: boolean
  moreLink?: string
  acEnabled?: boolean
@@ -75,6 +78,9 @@ export default class WalletPanel extends React.PureComponent<Props, {}> {
  showUnVerifiedHelpIcon={
  !this.props.isVerified && this.props.showUnVerified
  }
+ refreshingPublisher={this.props.refreshingPublisher}
+ onRefreshPublisher={this.props.onRefreshPublisher}
+ publisherRefreshed={this.props.publisherRefreshed}
  />
  </StyledProfileWrapper>
  )

src/features/rewards/walletSummary/__snapshots__/spec.tsx.snap

@@ -193,7 +193,7 @@ exports[`WalletSummary tests basic tests matches the snapshot 1`] = `
  <div
  className="c3"
  >
- MISSING: monthMar
+ MISSING: monthApr
  
  2019
  </div>

stories/assets/locale.ts

@@ -201,6 +201,7 @@ const locale: Record<string, string> = {
  turnOnRewardsTitle: 'Turn on Rewards',
  type: 'Type',
  uhOh: 'Uh oh…',
+ unVerifiedCheck: 'Check Again...',
  unVerifiedPublisher: 'Not yet verified',
  unVerifiedText: 'This creator has not yet signed up to receive contributions from Brave users.',
  unVerifiedTextMore: 'Learn more.',

stories/features/rewards/concepts.tsx

@@ -262,7 +262,7 @@ storiesOf('Feature Components/Rewards/Concepts/Desktop', module)
  </div>
  )
  })
- .add('Wallet Panel', withState({ grant: defaultGrant, notification: grantNotification, showSummary: false, tipsEnabled: true, includeInAuto: true }, (store) => {
+ .add('Wallet Panel', withState({ grant: defaultGrant, notification: grantNotification, showSummary: false, tipsEnabled: true, includeInAuto: true, refreshingPublisher: false }, (store) => {
  const curveRgb = '233,235,255'
  const panelRgb = '249,251,252'
 
@@ -286,6 +286,10 @@ storiesOf('Feature Components/Rewards/Concepts/Desktop', module)
  store.set({ includeInAuto: !store.state.includeInAuto })
  }
 
+ const onRefreshPublisher = () => {
+ store.set({ refreshingPublisher: !store.state.refreshingPublisher })
+ }
+
  const onToggleTips = () => {
  store.set({ tipsEnabled: !store.state.tipsEnabled })
  }
@@ -396,6 +400,8 @@ storiesOf('Feature Components/Rewards/Concepts/Desktop', module)
  donationAction={doNothing}
  onAmountChange={doNothing}
  onIncludeInAuto={onIncludeInAuto}
+ refreshingPublisher={store.state.refreshingPublisher}
+ onRefreshPublisher={onRefreshPublisher}
  />
  <WalletSummary
  compact={true}

stories/features/rewards/wallet.tsx

@@ -137,6 +137,7 @@ storiesOf('Feature Components/Rewards/Wallet/Desktop', module)
  onAmountChange={doNothing}
  onIncludeInAuto={doNothing}
  showUnVerified={boolean('Show unverified content', true)}
+ onRefreshPublisher={doNothing}
  />
  </div>
  )