From 004b5a4b56dc19e2dc7d1752be171da195bfcf5b Mon Sep 17 00:00:00 2001 From: Ryan Lanese Date: Wed, 20 Mar 2019 12:09:40 -0700 Subject: [PATCH] Merge pull request #427 from brave/alert Changing tipsMigrationAlert -> boxAlert, adding Ads variant --- .../__snapshots__/spec.tsx.snap | 57 +++++-------------- .../index.tsx | 47 +++++++++------ .../{tipsMigrationAlert => boxAlert}/spec.tsx | 8 +-- .../{tipsMigrationAlert => boxAlert}/style.ts | 9 ++- src/features/rewards/index.ts | 4 +- stories/assets/locale.ts | 1 + stories/features/rewards/settings/adsBox.tsx | 9 ++- .../rewards/settings/donationsBox.tsx | 4 +- 8 files changed, 70 insertions(+), 69 deletions(-) rename src/features/rewards/{tipsMigrationAlert => boxAlert}/__snapshots__/spec.tsx.snap (65%) rename src/features/rewards/{tipsMigrationAlert => boxAlert}/index.tsx (75%) rename src/features/rewards/{tipsMigrationAlert => boxAlert}/spec.tsx (76%) rename src/features/rewards/{tipsMigrationAlert => boxAlert}/style.ts (92%) diff --git a/src/features/rewards/tipsMigrationAlert/__snapshots__/spec.tsx.snap b/src/features/rewards/boxAlert/__snapshots__/spec.tsx.snap similarity index 65% rename from src/features/rewards/tipsMigrationAlert/__snapshots__/spec.tsx.snap rename to src/features/rewards/boxAlert/__snapshots__/spec.tsx.snap index 439010354..67ab2abd1 100644 --- a/src/features/rewards/tipsMigrationAlert/__snapshots__/spec.tsx.snap +++ b/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`] = ` - MISSING: reviewSitesMsg - - - MISSING: monthlyTips - - -
- - MISSING: learnMore + MISSING: adsNotSupported
diff --git a/src/features/rewards/tipsMigrationAlert/index.tsx b/src/features/rewards/boxAlert/index.tsx similarity index 75% rename from src/features/rewards/tipsMigrationAlert/index.tsx rename to src/features/rewards/boxAlert/index.tsx index a82c74d5a..d410f9694 100644 --- a/src/features/rewards/tipsMigrationAlert/index.tsx +++ b/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 { +export default class BoxAlert extends React.PureComponent { constructor (props: Props) { super(props) this.state = { @@ -108,28 +111,40 @@ export default class TipsMigrationAlert extends React.PureComponent - - - {getLocale('reviewSitesMsg')} - - - {getLocale('monthlyTips')} - + + { + type === 'tips' + ? <> + + {getLocale('reviewSitesMsg')} + + + {getLocale('monthlyTips')} + + + : + {getLocale('adsNotSupported')} + + } - - - {getLocale('learnMore')} - - { - this.state.modalShown + type === 'tips' + ? + + {getLocale('learnMore')} + + + : null + } + { + this.state.modalShown && type === 'tips' ? this.pinnedSitesModal() : null } diff --git a/src/features/rewards/tipsMigrationAlert/spec.tsx b/src/features/rewards/boxAlert/spec.tsx similarity index 76% rename from src/features/rewards/tipsMigrationAlert/spec.tsx rename to src/features/rewards/boxAlert/spec.tsx index 842fa797e..4abcf14b8 100644 --- a/src/features/rewards/tipsMigrationAlert/spec.tsx +++ b/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) => +describe('BoxAlert tests', () => { + const baseComponent = (props?: object) => 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) }) }) diff --git a/src/features/rewards/tipsMigrationAlert/style.ts b/src/features/rewards/boxAlert/style.ts similarity index 92% rename from src/features/rewards/tipsMigrationAlert/style.ts rename to src/features/rewards/boxAlert/style.ts index f100cdba3..f05aebe3a 100644 --- a/src/features/rewards/tipsMigrationAlert/style.ts +++ b/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('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('span')` diff --git a/src/features/rewards/index.ts b/src/features/rewards/index.ts index 00a47eb62..db517ebcc 100644 --- a/src/features/rewards/index.ts +++ b/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' @@ -51,6 +51,7 @@ export { Alert, Amount, Box, + BoxAlert, DisabledContent, DisabledPanel, DonationOverlay, @@ -81,7 +82,6 @@ export { TableDonation, TableTransactions, Tip, - TipsMigrationAlert, ToggleTips, Tokens, Tooltip, diff --git a/stories/assets/locale.ts b/stories/assets/locale.ts index 833e7839b..be220690d 100644 --- a/stories/assets/locale.ts +++ b/stories/assets/locale.ts @@ -13,6 +13,7 @@ const locale: Record = { 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', autoTipText: 'You are automatically sending a tip to:', diff --git a/stories/features/rewards/settings/adsBox.tsx b/stories/features/rewards/settings/adsBox.tsx index dcf284783..6bd140c16 100644 --- a/stories/features/rewards/settings/adsBox.tsx +++ b/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,6 +22,12 @@ class AdsBox extends React.Component { ) } + adsAlertChild = () => { + return ( + + ) + } + render () { return ( ) diff --git a/stories/features/rewards/settings/donationsBox.tsx b/stories/features/rewards/settings/donationsBox.tsx index 30cefa6f7..c73e76078 100644 --- a/stories/features/rewards/settings/donationsBox.tsx +++ b/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 ( - + ) }