From c7ce64a67ec577a7867388e4878414a12f2d4293 Mon Sep 17 00:00:00 2001 From: ryanml Date: Fri, 13 Sep 2019 12:53:27 -0700 Subject: [PATCH] Fixes brave/brave-browser#5996 - Adds new Monthly Banner Variant to tip process --- .storybook/locale.ts | 9 ++- browser/extensions/api/brave_rewards_api.cc | 1 + browser/ui/webui/brave_webui_source.cc | 5 ++ common/extensions/api/brave_rewards.json | 4 ++ .../browser/rewards_service_browsertest.cc | 20 ++---- .../_locales/en_US/messages.json | 6 +- .../background/api/locale_api.ts | 1 + .../brave_rewards/components/panel.tsx | 7 +- .../resources/tip/components/app.tsx | 5 ++ .../resources/tip/components/siteBanner.tsx | 35 +++++---- .../resources/tip/components/tipMediaUser.tsx | 8 ++- .../resources/tip/components/tipSite.tsx | 6 +- .../resources/ui/components/donate/index.tsx | 35 +++++++-- .../resources/ui/components/donate/style.ts | 58 ++++++++++++--- .../ui/components/siteBanner/index.tsx | 71 +++++++------------ .../ui/components/siteBanner/style.ts | 14 +++- .../resources/ui/components/tip/index.tsx | 1 + .../ui/components/walletPanel/index.tsx | 38 ++++++---- .../ui/components/walletPanel/style.ts | 15 ++++ .../resources/ui/stories/concepts.tsx | 11 +-- .../resources/ui/stories/other.tsx | 1 + .../resources/ui/stories/wallet.tsx | 1 + components/definitions/chromel.d.ts | 2 +- .../resources/brave_components_strings.grd | 3 + 24 files changed, 241 insertions(+), 116 deletions(-) diff --git a/.storybook/locale.ts b/.storybook/locale.ts index aa264819cf0b..6931ad1a5279 100644 --- a/.storybook/locale.ts +++ b/.storybook/locale.ts @@ -76,13 +76,12 @@ const locale: Record = { dndCaptchaText2: 'target', donation: 'Donation', donationAmount: 'Donation amount', - donateMonthly: 'Tip this site Monthly', + donateMonthly: 'Monthly Contribution', donateNow: 'Send a tip…', donationFailureMsg: 'Looks like something went wrong. Please try again later.', donationSent: 'Donation Sent!', donationTips: 'Donation & Tips', done: 'Done', - doMonthly: 'Set recurring donation', downloadPDF: 'Download as PDF', earningsAds: 'Earnings from Ads', earningsClaimBat: 'BAT,', @@ -120,9 +119,11 @@ const locale: Record = { monthNov: 'November', monthOct: 'October', monthSep: 'September', + monthlyContribution: 'Monthly Contribution', monthlyText: 'Monthly', monthlyTips: 'Monthly Tips!', newGrant: 'A free token grant is available.', + nextContribution: 'Next Contribution', noActivity: 'No activities yet…', noAdsHistory: 'There is currently no Brave Ads history', noGrants: 'Currently no token grant is available.', @@ -179,6 +180,8 @@ const locale: Record = { rewardsBackupText3: 'You can always use this key to get your wallet back if something happens to your browser or computer. But make sure to protect it — anyone who gets this key could steal your wallet. It\'s probably safest to write it down on a piece of paper, or wherever else you keep important info.', rewardsBannerText1: 'Thanks for stopping by. We joined Brave’s vision of protecting your privacy because we believe that fans like you would support us in our effort to keep the web a clean and safe place to be.', rewardsBannerText2: 'Your donation is much appreciated and it encourages us to continue to improve our content.', + rewardsBannerMonthlyText1: 'You can support this content creator by sending a tip. It\'s a way of thank them for making great content. Verified creators get paid for their tips during the first week of each calendar month.', + rewardsBannerMonthlyText2: 'If you like, you can schedule monthly tips to support this creator on a continuous basis.', rewardsContribute: 'Auto-Contribute', rewardsContributeAttention: 'Attention', rewardsContributeAttentionScore: 'Attention', @@ -220,6 +223,8 @@ const locale: Record = { serviceTextPanelWelcome: 'By clicking ‘Join Rewards’, you indicate that you have read and agree to the', serviceTextWelcome: 'By clicking ‘Yes, I\'m in!’, you indicate that you have read and agree to the', serviceTextReady: 'By clicking ‘Yes, I\'m Ready!’, you indicate that you have read and agree to the', + set: 'Set...', + setContribution: 'Set Contribution', settings: 'Settings', showAll: 'Show All', site: 'site', diff --git a/browser/extensions/api/brave_rewards_api.cc b/browser/extensions/api/brave_rewards_api.cc index d66183ef4b43..cc4e55f33a23 100644 --- a/browser/extensions/api/brave_rewards_api.cc +++ b/browser/extensions/api/brave_rewards_api.cc @@ -84,6 +84,7 @@ ExtensionFunction::ResponseAction BraveRewardsTipSiteFunction::Run() { auto params_dict = std::make_unique(); params_dict->SetString("publisherKey", params->publisher_key); + params_dict->SetBoolean("monthly", params->monthly); params_dict->SetString( "url", contents ? contents->GetLastCommittedURL().spec() : std::string()); ::brave_rewards::OpenTipDialog(contents, std::move(params_dict)); diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc index b27584f64edb..ec800704d003 100644 --- a/browser/ui/webui/brave_webui_source.cc +++ b/browser/ui/webui/brave_webui_source.cc @@ -651,9 +651,14 @@ void CustomizeWebUIHTMLSource(const std::string &name, { "redditTipTitleEmpty", IDS_BRAVE_UI_REDDIT_TIP_TITLE_EMPTY }, { "githubTipTitle", IDS_BRAVE_UI_GITHUB_TIP_TITLE }, { "githubTipTitleEmpty", IDS_BRAVE_UI_GITHUB_TIP_TITLE_EMPTY }, + { "monthlyContribution", IDS_BRAVE_UI_MONTHLY_CONTRIBUTION }, + { "nextContribution", IDS_BRAVE_UI_NEXT_CONTRIBUTION }, { "rewardsBannerText1", IDS_BRAVE_UI_REWARDS_BANNER_TEXT1 }, { "rewardsBannerText2", IDS_BRAVE_UI_REWARDS_BANNER_TEXT2 }, + { "rewardsBannerMonthlyText1", IDS_BRAVE_UI_REWARDS_BANNER_TEXT1 }, + { "rewardsBannerMonthlyText2", IDS_BRAVE_UI_REWARDS_BANNER_TEXT2 }, { "sendDonation", IDS_BRAVE_UI_SEND_DONATION }, + { "setContribution", IDS_BRAVE_UI_SET_CONTRIBUTION }, { "siteBannerNoticeNote", IDS_BRAVE_UI_SITE_BANNER_NOTICE_NOTE }, { "siteBannerNoticeText", IDS_BRAVE_UI_SITE_BANNER_NOTICE_TEXT }, { "siteBannerConnectedText", IDS_BRAVE_UI_SITE_BANNER_CONNECTED_TEXT }, diff --git a/common/extensions/api/brave_rewards.json b/common/extensions/api/brave_rewards.json index f52dd1a0236d..5870464bd391 100644 --- a/common/extensions/api/brave_rewards.json +++ b/common/extensions/api/brave_rewards.json @@ -397,6 +397,10 @@ { "name": "publisherKey", "type": "string" + }, + { + "name": "monthly", + "type": "boolean" } ] }, diff --git a/components/brave_rewards/browser/rewards_service_browsertest.cc b/components/brave_rewards/browser/rewards_service_browsertest.cc index d9b839d0f4fb..17b747e01431 100644 --- a/components/brave_rewards/browser/rewards_service_browsertest.cc +++ b/components/brave_rewards/browser/rewards_service_browsertest.cc @@ -802,9 +802,14 @@ class BraveRewardsBrowserTest : content::NOTIFICATION_LOAD_COMPLETED_MAIN_FRAME, content::NotificationService::AllSources()); + const std::string buttonSelector = monthly + ? "[type='tip-monthly']" + : "[type='tip']"; + // Click button to initiate sending a tip content::EvalJsResult js_result = EvalJs( popup_contents, + content::JsReplace( "new Promise((resolve) => {" "let count = 10;" "var interval = setInterval(function() {" @@ -814,13 +819,14 @@ class BraveRewardsBrowserTest : " } else {" " count -= 1;" " }" - " const tipButton = document.querySelector(\"[type='tip']\");" + " const tipButton = document.querySelector($1);" " if (tipButton) {" " clearInterval(interval);" " tipButton.click();" " resolve(true);" " }" "}, 500);});", + buttonSelector), content::EXECUTE_SCRIPT_DEFAULT_OPTIONS, content::ISOLATED_WORLD_ID_CONTENT_END); @@ -850,18 +856,6 @@ class BraveRewardsBrowserTest : content::EXECUTE_SCRIPT_DEFAULT_OPTIONS, content::ISOLATED_WORLD_ID_CONTENT_END)); - // Make this tip monthly, if requested - if (monthly) { - ASSERT_TRUE(ExecJs( - site_banner_contents, - "const delay = t => new Promise(resolve => setTimeout(resolve, t));" - "delay(0).then(() => " - " document.querySelector(\"[data-test-id='monthlyCheckbox']\")" - " .children[0].click());", - content::EXECUTE_SCRIPT_DEFAULT_OPTIONS, - content::ISOLATED_WORLD_ID_CONTENT_END)); - } - // Send the tip ASSERT_TRUE(ExecJs( site_banner_contents, diff --git a/components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json b/components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json index 1920159b131a..7d312a393134 100644 --- a/components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json +++ b/components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json @@ -56,7 +56,7 @@ "description": "Label for auto contribute table attention for the publisher" }, "donateMonthly": { - "message": "Tip this site monthly", + "message": "Monthly Contribution", "description": "Label for drop down menu where user select amount for monthly contribution for particular publisher" }, "includeInAuto": { @@ -528,5 +528,9 @@ "walletGoToVerifyPage": { "message": "Complete wallet verification", "description": "CTA for completing wallet verification" + }, + "set": { + "message": "Set...", + "description": "Button text for setting monthly contribution" } } diff --git a/components/brave_rewards/resources/extension/brave_rewards/background/api/locale_api.ts b/components/brave_rewards/resources/extension/brave_rewards/background/api/locale_api.ts index e7e50da0ce20..15318df73282 100644 --- a/components/brave_rewards/resources/extension/brave_rewards/background/api/locale_api.ts +++ b/components/brave_rewards/resources/extension/brave_rewards/background/api/locale_api.ts @@ -89,6 +89,7 @@ export const getUIMessages = (): Record => { 'rewardsSummary', 'serviceText', 'serviceTextPanelWelcome', + 'set', 'termsOfService', 'tipsProcessedNotification', 'tokenGrant', diff --git a/components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx b/components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx index 96e4119eaf69..35262f3ce90b 100644 --- a/components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx +++ b/components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx @@ -238,7 +238,7 @@ export class Panel extends React.Component { } } - showTipSiteDetail = () => { + showTipSiteDetail = (monthly: boolean) => { const publisher: RewardsExtension.Publisher | undefined = this.getPublisher() // TODO: why do we store windowId instead of active tab id in state? chrome.tabs.query({ @@ -253,7 +253,7 @@ export class Panel extends React.Component { return } - chrome.braveRewards.tipSite(tabId, publisher.publisher_key) + chrome.braveRewards.tipSite(tabId, publisher.publisher_key, monthly) window.close() }) } @@ -691,7 +691,7 @@ export class Panel extends React.Component { includeInAuto={!publisher.excluded} attentionScore={(publisher.percentage || 0).toString()} onToggleTips={this.doNothing} - donationAction={this.showTipSiteDetail} + donationAction={this.showTipSiteDetail.bind(this, false)} onAmountChange={this.onContributionAmountChange} onIncludeInAuto={this.switchAutoContribute} showUnVerified={this.shouldShowConnectedMessage()} @@ -701,6 +701,7 @@ export class Panel extends React.Component { onRefreshPublisher={this.refreshPublisher} refreshingPublisher={this.state.refreshingPublisher} publisherRefreshed={this.state.publisherRefreshed} + setMonthlyAction={this.showTipSiteDetail.bind(this, true)} /> : null } diff --git a/components/brave_rewards/resources/tip/components/app.tsx b/components/brave_rewards/resources/tip/components/app.tsx index 16f2a9cf5048..364bacc87512 100644 --- a/components/brave_rewards/resources/tip/components/app.tsx +++ b/components/brave_rewards/resources/tip/components/app.tsx @@ -15,6 +15,7 @@ import * as rewardsActions from '../actions/tip_actions' interface TipDialogArgs { url: string + monthly: boolean publisherKey: string mediaMetaData?: RewardsTip.MediaMetaData } @@ -29,10 +30,13 @@ export class App extends React.Component { } getTipBanner = (url: string, publisher: RewardsTip.Publisher, mediaMetaData: RewardsTip.MediaMetaData | undefined) => { + const monthly = this.props.dialogArgs.monthly + if (!mediaMetaData) { return ( ) @@ -40,6 +44,7 @@ export class App extends React.Component { return ( diff --git a/components/brave_rewards/resources/tip/components/siteBanner.tsx b/components/brave_rewards/resources/tip/components/siteBanner.tsx index 77ba7735896e..2409044d7926 100644 --- a/components/brave_rewards/resources/tip/components/siteBanner.tsx +++ b/components/brave_rewards/resources/tip/components/siteBanner.tsx @@ -15,6 +15,7 @@ import * as tipActions from '../actions/tip_actions' import * as utils from '../utils' interface Props extends RewardsTip.ComponentProps { + monthly: boolean publisher: RewardsTip.Publisher mediaMetaData?: RewardsTip.MediaMetaData } @@ -106,20 +107,6 @@ class Banner extends React.Component { return result } - hasRecurringTip = (publisherKey?: string) => { - const { recurringDonations } = this.props.rewardsDonateData - - if (!publisherKey || !recurringDonations) { - return false - } - - const recurringDonation = recurringDonations.find((donation: RewardsTip.RecurringTips) => { - return donation.publisherKey === publisherKey - }) - - return !!recurringDonation - } - getScreenName = (mediaMetaData?: RewardsTip.MediaMetaData) => { if (!mediaMetaData) { return '' @@ -179,6 +166,22 @@ class Banner extends React.Component { />) } + getNextContribution = () => { + const { reconcileStamp } = this.props.rewardsDonateData + + if (!reconcileStamp) { + return undefined + } + + const fmtArgs = { + day: '2-digit', + month: '2-digit', + year: 'numeric' + } + + return new Intl.DateTimeFormat('default', fmtArgs).format(reconcileStamp * 1000) + } + render () { const { balance } = this.props.rewardsDonateData const { total } = balance @@ -188,6 +191,7 @@ class Banner extends React.Component { const checkmark = utils.isPublisherConnectedOrVerified(publisher.status) const verified = utils.isPublisherVerified(publisher.status) const connected = utils.isPublisherConnected(publisher.status) + const bannerType = this.props.monthly ? 'monthly' : 'one-time' let logo = publisher.logo const internalFavicon = /^https:\/\/[a-z0-9-]+\.invalid(\/)?$/ @@ -200,12 +204,12 @@ class Banner extends React.Component { } return ( { isVerified={checkmark} learnMoreNotice={'https://brave.com/faq/#unclaimed-funds'} addFundsLink={this.addFundsLink} + nextContribution={this.getNextContribution()} > { mediaMetaData diff --git a/components/brave_rewards/resources/tip/components/tipMediaUser.tsx b/components/brave_rewards/resources/tip/components/tipMediaUser.tsx index 8bba632b43ab..b6f70194e525 100644 --- a/components/brave_rewards/resources/tip/components/tipMediaUser.tsx +++ b/components/brave_rewards/resources/tip/components/tipMediaUser.tsx @@ -16,6 +16,7 @@ import { getLocale } from '../../../../common/locale' interface Props extends RewardsTip.ComponentProps { url: string + monthly: boolean publisher: RewardsTip.Publisher mediaMetaData: RewardsTip.MediaMetaData } @@ -50,6 +51,7 @@ class TipMediaUser extends React.Component { const { finished, error } = this.props.rewardsDonateData const publisher = this.props.publisher + const monthly = this.props.monthly const mediaMetaData = this.props.mediaMetaData if (!mediaMetaData) { return @@ -78,7 +80,11 @@ class TipMediaUser extends React.Component { <> { !finished && !error - ? + ? : null } { diff --git a/components/brave_rewards/resources/tip/components/tipSite.tsx b/components/brave_rewards/resources/tip/components/tipSite.tsx index 8dd1d35253a3..7e3aa1ac692d 100644 --- a/components/brave_rewards/resources/tip/components/tipSite.tsx +++ b/components/brave_rewards/resources/tip/components/tipSite.tsx @@ -15,6 +15,7 @@ import * as rewardsActions from '../actions/tip_actions' interface Props extends RewardsTip.ComponentProps { url: string + monthly: boolean publisher: RewardsTip.Publisher } @@ -43,7 +44,10 @@ class TipSite extends React.Component { <> { !finished && !error - ? + ? : null } { diff --git a/components/brave_rewards/resources/ui/components/donate/index.tsx b/components/brave_rewards/resources/ui/components/donate/index.tsx index c0e556102efb..f3fe0ddae80c 100644 --- a/components/brave_rewards/resources/ui/components/donate/index.tsx +++ b/components/brave_rewards/resources/ui/components/donate/index.tsx @@ -14,12 +14,16 @@ import { StyledFundsText, StyledAmountsWrapper, StyledSendButton, - StyledButtonWrapper + StyledButtonWrapper, + StyledContributionWrapper, + StyledContributionText, + StyledMonthlySendButton } from './style' import Amount from '../amount/index' import { getLocale } from 'brave-ui/helpers' import { EmoteSadIcon, SendIcon } from 'brave-ui/components/icons' +import { BannerType } from '../siteBanner' export type DonateType = 'big' | 'small' @@ -41,6 +45,8 @@ export interface Props { children?: React.ReactNode isMobile?: boolean addFundsLink?: string + type: BannerType + nextContribution?: string } interface State { @@ -103,9 +109,14 @@ export default class Donate extends React.PureComponent { currentAmount, donateType, isMobile, - addFundsLink + addFundsLink, + type, + nextContribution } = this.props + + const isMonthly = type === 'monthly' const disabled = parseInt(currentAmount, 10) === 0 + const SendButton = isMonthly ? StyledMonthlySendButton : StyledSendButton return ( @@ -130,13 +141,25 @@ export default class Donate extends React.PureComponent { {children} - + - - + + {actionText} - + + { + nextContribution && isMonthly + ? + + {getLocale('nextContribution')} + + + {nextContribution} + + + : null + } { diff --git a/components/brave_rewards/resources/ui/components/donate/style.ts b/components/brave_rewards/resources/ui/components/donate/style.ts index de8d3dea307f..05307fb68cbc 100644 --- a/components/brave_rewards/resources/ui/components/donate/style.ts +++ b/components/brave_rewards/resources/ui/components/donate/style.ts @@ -5,6 +5,7 @@ import styled, { css } from 'brave-ui/theme' import * as CSS from 'csstype' import { DonateType } from './index' +import palette from 'brave-ui/theme/colors' interface Theme { paddingBox: CSS.PaddingProperty<1> @@ -18,6 +19,7 @@ interface StyleProps { disabled?: boolean donateType?: DonateType isMobile?: boolean + monthly?: boolean } const customStyle: Record = { @@ -64,6 +66,18 @@ const getAmountStyle = (isMobile?: boolean) => { ` } +const getIconColor = (p: StyleProps) => { + if (p.monthly) { + return palette.orange500 + } + + if (p.disabled) { + return palette.purple300 + } + + return palette.blurple600 +} + export const StyledWrapper = styled('div')` position: relative; font-family: ${p => p.theme.fontFamily.body}; @@ -89,9 +103,12 @@ export const StyledDonationTitle = styled('div')` padding-left: ${p => p.isMobile ? 20 : 0}px; ` -export const StyledSend = styled<{}, 'div'>('div')` - background: var(--donate-send-bg); - font-size: 13px; +export const StyledSend = styled('div')` + background: ${p => p.monthly + ? `inherit` + : `var(--donate-send-bg)` + }; + font-size: 12px; font-weight: 600; letter-spacing: 0.2px; color: var(--donate-send-color); @@ -100,19 +117,30 @@ export const StyledSend = styled<{}, 'div'>('div')` border: none; width: 100%; text-align: left; - cursor: pointer; + padding-bottom: ${p => p.monthly ? 20 : 13}px; ` export const StyledSendButton = styled<{}, 'button'>('button')` display: block; border: none; - font-size: 13px; + font-size: 12px; font-weight: 600; text-transform: uppercase; background: var(--donate-send-bg); cursor: pointer; ` +export const StyledMonthlySendButton = styled(StyledSendButton)` + color: ${palette.orange500}; + background: ${palette.white}; + border-radius: 20px; + font-size: 12px; + padding: 6px 15px; + text-transform: none; + width: 180px; + font-weight: bold; +` + export const StyledButtonWrapper = styled('div')` display: block; width: ${p => p.isMobile ? 190 : 245}px; @@ -123,14 +151,14 @@ export const StyledIconSend = styled('span')` vertical-align: middle; display: inline-block; margin-right: 15px; - color: ${p => p.disabled ? p.donateType === 'small' ? '#1A22A8' : '#3e45b2' : '#a1a8f2'}; + color: ${p => getIconColor(p)}; width: 27px; height: 27px; ` export const StyledFunds = styled<{}, 'div'>('div')` font-family: Muli, sans-serif; - font-size: 13px; + font-size: 12px; font-weight: 300; line-height: 1.69; color: #fff; @@ -142,7 +170,6 @@ export const StyledFunds = styled<{}, 'div'>('div')` left: 0; z-index: 10; width: 100%; - a { color: #6cc7fd; text-decoration: none; @@ -164,3 +191,18 @@ export const StyledAmountsWrapper = styled('div')` display: block; ${p => getAmountStyle(p.isMobile)} ` + +export const StyledContributionWrapper = styled<{}, 'div'>('div')` + float: right; + color: ${palette.white}; + margin: -33px -35px 0px; +` + +export const StyledContributionText = styled<{}, 'span'>('span')` + font-size: 10px; + font-weight: 300; + text-align: right; + display: block; + line-height: 12px; + text-transform: none; +` diff --git a/components/brave_rewards/resources/ui/components/siteBanner/index.tsx b/components/brave_rewards/resources/ui/components/siteBanner/index.tsx index 855e8ad1676b..c3ae739dbdf8 100644 --- a/components/brave_rewards/resources/ui/components/siteBanner/index.tsx +++ b/components/brave_rewards/resources/ui/components/siteBanner/index.tsx @@ -25,12 +25,9 @@ import { StyledScreenName, StyledSocialItem, StyledSocialIcon, - StyledOption, StyledLogoText, StyledSocialWrapper, - StyledEmptyBox, StyledLogoImage, - StyledCheckbox, StyledNoticeWrapper, StyledNoticeIcon, StyledNoticeText, @@ -39,7 +36,6 @@ import { } from './style' import Donate from '../donate/index' -import Checkbox from 'brave-ui/components/formControls/checkbox/index' import { getLocale } from 'brave-ui/helpers' import { CloseCircleOIcon, @@ -52,6 +48,7 @@ import { VerifiedSIcon } from 'brave-ui/components/icons' +export type BannerType = 'one-time' | 'monthly' export type Social = { type: SocialType, url: string } export type SocialType = 'twitter' | 'youtube' | 'twitch' | 'reddit' | 'vimeo' | 'github' export type Donation = { tokens: string, converted: string, selected?: boolean } @@ -70,7 +67,6 @@ export interface Props { logo?: string social?: Social[] provider?: SocialType - recurringDonation?: boolean children?: React.ReactNode onDonate: (amount: string, monthly: boolean) => void onClose?: () => void @@ -79,19 +75,11 @@ export interface Props { learnMoreNotice?: string addFundsLink?: string isVerified?: boolean + type: BannerType + nextContribution?: string } -interface State { - monthly: boolean -} - -export default class SiteBanner extends React.PureComponent { - constructor (props: Props) { - super(props) - this.state = { - monthly: false - } - } +export default class SiteBanner extends React.PureComponent { getLogo (logo: string | undefined, domain: string, name: string | undefined) { let letter = domain && domain.substring(0, 1) || '' @@ -202,13 +190,17 @@ export default class SiteBanner extends React.PureComponent { getText (children?: React.ReactNode) { if (!children) { + const bannerText = this.props.type === 'one-time' + ? 'rewardsBanner' + : 'rewardsBannerMonthly' + return ( <>

- {getLocale('rewardsBannerText1')} + {getLocale(`${bannerText}Text1`)}

- {getLocale('rewardsBannerText2')} + {getLocale(`${bannerText}Text2`)}

) @@ -217,13 +209,11 @@ export default class SiteBanner extends React.PureComponent { return children } - onMonthlyChange = (key: string, selected: boolean) => { - this.setState({ monthly: selected }) - } - onDonate = (amount: string) => { + const isMonthly = this.props.type === 'monthly' + if (this.props.onDonate) { - this.props.onDonate(amount, this.state.monthly) + this.props.onDonate(amount, isMonthly) } } @@ -243,7 +233,6 @@ export default class SiteBanner extends React.PureComponent { provider, children, title, - recurringDonation, balance, donationAmounts, domain, @@ -255,9 +244,12 @@ export default class SiteBanner extends React.PureComponent { showUnVerifiedNotice, learnMoreNotice, addFundsLink, - isVerified + isVerified, + type, + nextContribution } = this.props + const isMonthly = type === 'monthly' const isTwitterTip: boolean = !!(screenName && screenName !== '') return ( @@ -321,38 +313,23 @@ export default class SiteBanner extends React.PureComponent { - - + + {getLocale('walletBalance')} {balance} BAT - { - !recurringDonation - ? - -
- {getLocale('makeMonthly')} -
- - - : - } - + /> diff --git a/components/brave_rewards/resources/ui/components/siteBanner/style.ts b/components/brave_rewards/resources/ui/components/siteBanner/style.ts index adc72892bb9c..b9301f772297 100644 --- a/components/brave_rewards/resources/ui/components/siteBanner/style.ts +++ b/components/brave_rewards/resources/ui/components/siteBanner/style.ts @@ -6,11 +6,21 @@ import styled from 'styled-components' import { Props } from './index' import bg1Url from './assets/bg_bats.svg' import bg2Url from './assets/bg_hearts.svg' +import palette from 'brave-ui/theme/colors' interface StyleProps { padding?: boolean bg?: string isTwitterTip?: boolean + monthly?: boolean | undefined +} + +const getBgStyle = (monthly?: boolean) => { + if (!monthly) { + return `background: ${palette.blurple400}` + } + + return `background-image: linear-gradient(180deg, #FF8907 0%, ${palette.orange500} 100%)` } export const StyledWrapper = styled('div')` @@ -43,7 +53,7 @@ export const StyledContent = styled<{}, 'div'>('div')` export const StyledDonation = styled('div')` flex-basis: 336px; - background: #696fdc; + ${p => getBgStyle(p.monthly)}; justify-content: space-between; display: flex; flex-direction: column; @@ -145,7 +155,7 @@ export const StyledText = styled('div')` export const StyledWallet = styled('div')` font-size: 12px; - color: #afb2f1; + color: ${p => p.monthly ? '#fff' : '#afb2f1'}; text-align: right; margin: 8px 0 10px; padding: 0 19px 0 55px; diff --git a/components/brave_rewards/resources/ui/components/tip/index.tsx b/components/brave_rewards/resources/ui/components/tip/index.tsx index 09f097c230ba..cc67be9aff56 100644 --- a/components/brave_rewards/resources/ui/components/tip/index.tsx +++ b/components/brave_rewards/resources/ui/components/tip/index.tsx @@ -66,6 +66,7 @@ export default class Tip extends React.PureComponent { Send my tip to void } export default class WalletPanel extends React.PureComponent { @@ -126,12 +129,15 @@ export default class WalletPanel extends React.PureComponent { } donationControls () { - const { donationAmounts, acEnabled } = this.props + const { donationAmounts, acEnabled, setMonthlyAction } = this.props if (!donationAmounts && !acEnabled) { return null } + const firstColSpan = donationAmounts ? '5' : '4' + const secColSpan = donationAmounts ? '1' : '2' + return ( { @@ -152,16 +158,24 @@ export default class WalletPanel extends React.PureComponent { : null } - { - donationAmounts - ? - - {getLocale('donateMonthly')} - - {this.donationDropDown()} - - : null - } + + + + {getLocale('donateMonthly')} + + + + { + donationAmounts + ? this.donationDropDown() + : + + {getLocale('set')} + + + } + + ) } diff --git a/components/brave_rewards/resources/ui/components/walletPanel/style.ts b/components/brave_rewards/resources/ui/components/walletPanel/style.ts index 868e97d2c103..9d8136f4bfaf 100644 --- a/components/brave_rewards/resources/ui/components/walletPanel/style.ts +++ b/components/brave_rewards/resources/ui/components/walletPanel/style.ts @@ -127,3 +127,18 @@ export const StyledSelect = styled('select')` export const StyledOptionShown = styled<{}, 'option'>('option')` display: none; ` + +export const StyledSetButtonContainer = styled<{}, 'div'>('div')` + text-align: center; +` + +export const StyledSetButton = styled<{}, 'button'>('button')` + color: ${palette.blurple500}; + font-size: 13px; + border: 1px solid ${palette.blurple500}; + width: 85%; + border-radius: 20px; + padding: 4px 5px; + margin-right: -16px; + cursor: pointer; +` diff --git a/components/brave_rewards/resources/ui/stories/concepts.tsx b/components/brave_rewards/resources/ui/stories/concepts.tsx index 0bd45d11e2ae..ad30f9c30acf 100644 --- a/components/brave_rewards/resources/ui/stories/concepts.tsx +++ b/components/brave_rewards/resources/ui/stories/concepts.tsx @@ -40,9 +40,7 @@ const doNothing = (id: string) => { const donationAmounts = [ { tokens: '1.0', converted: '0.30', selected: false }, { tokens: '5.0', converted: '1.50', selected: false }, - { tokens: '10.0', converted: '3.00', selected: false }, - { tokens: '50.0', converted: '15.00', selected: false }, - { tokens: '100.0', converted: '30.00', selected: false } + { tokens: '10.0', converted: '3.00', selected: false } ] const defaultGrant = { @@ -153,11 +151,14 @@ storiesOf('Rewards/Concepts/Desktop', module) store.state.showBanner ?
('Type', { big: 'big', small: 'small' }, 'small')} balance={number('Balance ', 5)} donationAmounts={object('Donations', store.state.donationAmounts)} diff --git a/components/brave_rewards/resources/ui/stories/wallet.tsx b/components/brave_rewards/resources/ui/stories/wallet.tsx index d4efa51800de..2510e5b8cbf2 100644 --- a/components/brave_rewards/resources/ui/stories/wallet.tsx +++ b/components/brave_rewards/resources/ui/stories/wallet.tsx @@ -157,6 +157,7 @@ storiesOf('Rewards/Wallet/Desktop', module) ] } onToggleTips={doNothing} + setMonthlyAction={doNothing} donationAction={doNothing} onAmountChange={doNothing} onIncludeInAuto={doNothing} diff --git a/components/definitions/chromel.d.ts b/components/definitions/chromel.d.ts index cf11175cd00f..47116f4eafa6 100644 --- a/components/definitions/chromel.d.ts +++ b/components/definitions/chromel.d.ts @@ -60,7 +60,7 @@ declare namespace chrome.settingsPrivate { declare namespace chrome.braveRewards { const createWallet: () => {} - const tipSite: (tabId: number, publisherKey: string) => {} + const tipSite: (tabId: number, publisherKey: string, monthly: boolean) => {} const tipTwitterUser: (tabId: number, mediaMetaData: RewardsTip.MediaMetaData) => {} const tipRedditUser: (tabId: number, mediaMetaData: RewardsTip.MediaMetaData) => {} const tipGitHubUser: (tabId: number, githubMetaData: RewardsTip.MediaMetaData) => {} diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd index cbaa84b88d63..1c48fca030fd 100644 --- a/components/resources/brave_components_strings.grd +++ b/components/resources/brave_components_strings.grd @@ -351,6 +351,7 @@ By turning on Brave Rewards, you indicate that you have read and agree to the By clicking ‘Yes, I'm in!’, you indicate that you have read and agree to the By clicking ‘Yes, I'm Ready!’, you indicate that you have read and agree to the + Set Contribution Creating wallet Your attention is valuable. Earn by viewing privacy-respecting ads, and pay it forward to support content creators you love. Yes, I'm In! @@ -417,6 +418,8 @@ Monthly Tips! A free token grant is available. Free Token Grant + Monthly Contribution + Next Contribution Currently no token grant is available. No activities yet… No, thank you