From ac6f2fc6d50e3207e728d302438b7a692e7c99a1 Mon Sep 17 00:00:00 2001 From: ryanml Date: Wed, 13 Mar 2019 18:15:35 -0700 Subject: [PATCH] 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 7567f3b07..8b3b3ef8c 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' @@ -52,6 +52,7 @@ export { Alert, Amount, Box, + BoxAlert, DisabledContent, DisabledPanel, DonationOverlay, @@ -82,7 +83,6 @@ export { TableDonation, TableTransactions, Tip, - TipsMigrationAlert, ToggleTips, Tokens, Tooltip, diff --git a/stories/assets/locale.ts b/stories/assets/locale.ts index f1868ade9..54f9a625a 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', and: 'and', 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 ( - + ) }