Changing tipsMigrationAlert -> boxAlert, adding ads variant

src/features/rewards/tipsMigrationAlert/__snapshots__/spec.tsx.snap → src/features/rewards/boxAlert/__snapshots__/spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TipsMigrationAlert tests basic tests matches the snapshot 1`] = `
+exports[`BoxAlert tests basic tests matches the snapshot 1`] = `
 .c0 {
  width: 100%;
  display: -webkit-box;
@@ -27,9 +27,21 @@ exports[`TipsMigrationAlert tests basic tests matches the snapshot 1`] = `
  -ms-letter-spacing: 0;
  letter-spacing: 0;
  line-height: 18px;
- padding: 12px 15px 0px 11px;
  vertical-align: top;
  max-width: 387px;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding-left: 5px;
 }
 
 .c4 {
@@ -39,30 +51,6 @@ exports[`TipsMigrationAlert tests basic tests matches the snapshot 1`] = `
  font-size: inherit;
 }
 
-.c5 {
- color: #696FDC;
- font-weight: 400;
- display: inline-block;
- font-size: inherit;
-}
-
-.c6 {
- vertical-align: top;
- margin: 20px 0 0 7px;
-}
-
-.c7 {
- color: #15A4FA;
- cursor: pointer;
- font-size: 14px;
- font-weight: 500;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
- letter-spacing: 0;
- line-height: 18px;
-}
-
 .c2 {
  width: 100%;
  height: 100%;
@@ -92,22 +80,7 @@ exports[`TipsMigrationAlert tests basic tests matches the snapshot 1`] = `
  <span
  className="c4"
  >
- MISSING: reviewSitesMsg
- </span>
- <span
- className="c5"
- >
- MISSING: monthlyTips
- </span>
- </div>
- <div
- className="c6"
- >
- <span
- className="c7"
- onClick={[Function]}
- >
- MISSING: learnMore
+ MISSING: adsNotSupported
  </span>
  </div>
 </div>

src/features/rewards/tipsMigrationAlert/index.tsx → src/features/rewards/boxAlert/index.tsx

@@ -29,16 +29,19 @@ import { Modal } from '../../../components'
 import { AlertCircleIcon, RewardsSendTipsIcon } from '../../../components/icons'
 import Button from '../../../components/buttonsIndicators/button'
 
+export type Type = 'tips' | 'ads'
+
 export interface Props {
+ type: Type
  testId?: string
- onReview: () => void
+ onReview?: () => void
 }
 
 interface State {
  modalShown: boolean
 }
 
-export default class TipsMigrationAlert extends React.PureComponent<Props, State> {
+export default class BoxAlert extends React.PureComponent<Props, State> {
  constructor (props: Props) {
  super(props)
  this.state = {
@@ -108,28 +111,40 @@ export default class TipsMigrationAlert extends React.PureComponent<Props, State
  }
 
  render () {
- const { testId } = this.props
+ const { testId, type } = this.props
 
  return (
  <StyledWrapper data-test-id={testId}>
  <StyledAlertIcon>
  <AlertCircleIcon />
  </StyledAlertIcon>
- <StyledInfo>
- <StyledMessage>
- {getLocale('reviewSitesMsg')}
- </StyledMessage>
- <StyledMonthlyTips>
- {getLocale('monthlyTips')}
- </StyledMonthlyTips>
+ <StyledInfo type={type}>
+ {
+ type === 'tips'
+ ? <>
+ <StyledMessage>
+ {getLocale('reviewSitesMsg')}
+ </StyledMessage>
+ <StyledMonthlyTips>
+ {getLocale('monthlyTips')}
+ </StyledMonthlyTips>
+ </>
+ : <StyledMessage>
+ {getLocale('adsNotSupported')}
+ </StyledMessage>
+ }
  </StyledInfo>
- <StyledReviewWrapper>
- <StyledReviewList onClick={this.toggleModalDisplay}>
- {getLocale('learnMore')}
- </StyledReviewList>
- </StyledReviewWrapper>
  {
- this.state.modalShown
+ type === 'tips'
+ ? <StyledReviewWrapper>
+ <StyledReviewList onClick={this.toggleModalDisplay}>
+ {getLocale('learnMore')}
+ </StyledReviewList>
+ </StyledReviewWrapper>
+ : null
+ }
+ {
+ this.state.modalShown && type === 'tips'
  ? this.pinnedSitesModal()
  : null
  }

src/features/rewards/tipsMigrationAlert/spec.tsx → src/features/rewards/boxAlert/spec.tsx

@@ -6,11 +6,11 @@
 import * as React from 'react'
 import { shallow } from 'enzyme'
 import { create } from 'react-test-renderer'
-import TipsMigrationAlert from './index'
+import BoxAlert from './index'
 import { TestThemeProvider } from '../../../theme'
 
-describe('TipsMigrationAlert tests', () => {
- const baseComponent = (props?: object) => <TestThemeProvider><TipsMigrationAlert id='tipsmigrationalert' {...props} /></TestThemeProvider>
+describe('BoxAlert tests', () => {
+ const baseComponent = (props?: object) => <TestThemeProvider><BoxAlert id='box-alert' {...props} /></TestThemeProvider>
 
  describe('basic tests', () => {
  it('matches the snapshot', () => {
@@ -21,7 +21,7 @@ describe('TipsMigrationAlert tests', () => {
 
  it('renders the component', () => {
  const wrapper = shallow(baseComponent())
- const assertion = wrapper.find('#tipsmigrationalert').length
+ const assertion = wrapper.find('#box-alert').length
  expect(assertion).toBe(1)
  })
  })

src/features/rewards/tipsMigrationAlert/style.ts → src/features/rewards/boxAlert/style.ts

@@ -3,10 +3,12 @@
 * You can obtain one at http://mozilla.org/MPL/2.0/.
 */
 
+import { Type } from './index'
 import styled from 'styled-components'
 
 interface StyleProps {
  modal?: boolean
+ type?: Type
 }
 
 export const StyledWrapper = styled<{}, 'div'>('div')`
@@ -25,13 +27,16 @@ export const StyledAlertIcon = styled<{}, 'div'>('div')`
  color: #15A4FA;
 `
 
-export const StyledInfo = styled<{}, 'div'>('div')`
+export const StyledInfo = styled<StyleProps, 'div'>('div')`
  font-size: 14px;
  letter-spacing: 0;
  line-height: 18px;
- padding: 12px 15px 0px 11px;
  vertical-align: top;
  max-width: 387px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding-left: 5px;
 `
 
 export const StyledMessage = styled<StyleProps, 'span'>('span')`

src/features/rewards/index.ts

@@ -5,6 +5,7 @@
 import Alert from './alert'
 import Amount from './amount'
 import Box from './box'
+import BoxAlert from './boxAlert'
 import DisabledContent from './disabledContent'
 import DisabledPanel from './disabledPanel'
 import Donate from './donate'
@@ -35,7 +36,6 @@ import TableContribute from './tableContribute'
 import TableDonation from './tableDonation'
 import TableTransactions from './tableTransactions'
 import Tip from './tip'
-import TipsMigrationAlert from './tipsMigrationAlert'
 import ToggleTips from './toggleTips'
 import Tokens from './tokens'
 import Tooltip from './tooltip'
@@ -52,6 +52,7 @@ export {
  Alert,
  Amount,
  Box,
+ BoxAlert,
  DisabledContent,
  DisabledPanel,
  DonationOverlay,
@@ -82,7 +83,6 @@ export {
  TableDonation,
  TableTransactions,
  Tip,
- TipsMigrationAlert,
  ToggleTips,
  Tokens,
  Tooltip,

stories/assets/locale.ts

@@ -13,6 +13,7 @@ const locale: Record<string, string> = {
  addFundsQR: 'Show QR Code',
  addFundsText: 'Be sure to use the address below that matches the type of cryto you own. It will be converted automatically to BAT by Uphold and appear as an increased balance in your Brave Rewards wallet. Please allow up to one hour for your wallet balance to update.',
  addFundsTitle: 'Send cryptocurrency from your external account to your Brave Rewards wallet.',
+ adsNotSupported: 'Sorry! Ads are not yet available in your region.',
  allowTip: 'Allow tips on',
  amount: 'Amount',
  and: 'and',

stories/features/rewards/settings/adsBox.tsx

@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Components
-import { DisabledContent, Box } from '../../../../src/features/rewards'
+import { DisabledContent, Box, BoxAlert } from '../../../../src/features/rewards'
 
 // Utils
 import locale from './fakeLocale'
@@ -22,13 +22,20 @@ class AdsBox extends React.Component {
  )
  }
 
+ adsAlertChild = () => {
+ return (
+ <BoxAlert type={'ads'} />
+ )
+ }
+
  render () {
  return (
  <Box
  title={locale.adsTitle}
  type={'ads'}
  description={locale.adsDesc}
  toggle={false}
+ attachedAlert={this.adsAlertChild()}
  disabledContent={this.adsDisabled()}
  />
  )

stories/features/rewards/settings/donationsBox.tsx

@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Components
-import { Box, TableDonation, Tokens, List, TipsMigrationAlert } from '../../../../src/features/rewards'
+import { Box, BoxAlert, TableDonation, Tokens, List } from '../../../../src/features/rewards'
 import { DetailRow as DonationDetailRow } from '../../../../src/features/rewards/tableDonation'
 import { Column, Grid, Checkbox, ControlWrapper } from '../../../../src/components'
 
@@ -98,7 +98,7 @@ class DonationsBox extends React.Component<{}, State> {
 
  donationAlertChild = () => {
  return (
- <TipsMigrationAlert onReview={doNothing} />
+ <BoxAlert type={'tips'} onReview={doNothing} />
  )
  }