From cee9c11240edab6299b0a98a210280a34c60401f Mon Sep 17 00:00:00 2001 From: Jason Sadler Date: Mon, 6 May 2019 16:36:55 -0400 Subject: [PATCH] Fixes brave/brave-browser#4047 --- browser/ui/webui/brave_webui_source.cc | 19 + .../resources/ui/components/adsBox.tsx | 326 ++++++++++++++++-- components/definitions/rewards.d.ts | 36 ++ .../resources/brave_components_strings.grd | 20 ++ package-lock.json | 4 +- package.json | 3 +- 6 files changed, 371 insertions(+), 37 deletions(-) diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc index 0f6702aabaa5..cfa6899c52c9 100644 --- a/browser/ui/webui/brave_webui_source.cc +++ b/browser/ui/webui/brave_webui_source.cc @@ -287,7 +287,17 @@ void CustomizeWebUIHTMLSource(const std::string &name, { "addFundsQR", IDS_BRAVE_UI_ADD_FUNDS_QR}, { "addFundsText", IDS_BRAVE_UI_ADD_FUNDS_TEXT}, { "addFundsTitle", IDS_BRAVE_UI_ADD_FUNDS_TITLE}, + { "ads", IDS_BRAVE_UI_ADS}, + { "adsCurrentlyViewing", IDS_BRAVE_UI_ADS_CURRENTLY_VIEWING }, { "adsEarnings", IDS_BRAVE_UI_ADS_EARNINGS }, + { "adsHistoryFilterAll", IDS_BRAVE_UI_ADS_HISTORY_FILTER_ALL }, + { "adsHistoryFilterSaved", IDS_BRAVE_UI_ADS_HISTORY_FILTER_SAVED }, + { "adsHistorySubTitle", IDS_BRAVE_UI_ADS_HISTORY_SUBTITLE }, + { "adsHistoryTitle", IDS_BRAVE_UI_ADS_HISTORY_TITLE }, + { "adsPerHourContinuation", IDS_BRAVE_UI_ADS_PER_HOUR_CONTINUATION }, + { "adsPerHourPlural", IDS_BRAVE_UI_ADS_PER_HOUR_PLURAL }, + { "adsPerHourSingular", IDS_BRAVE_UI_ADS_PER_HOUR_SINGULAR }, + { "all", IDS_BRAVE_UI_ADS_ALL }, { "allowTip", IDS_BRAVE_UI_ALLOW_TIP }, { "amount", IDS_BRAVE_UI_AMOUNT }, { "backup", IDS_BRAVE_UI_BACKUP }, @@ -310,6 +320,7 @@ void CustomizeWebUIHTMLSource(const std::string &name, { "captchaProveHuman", IDS_BRAVE_UI_CAPTCHA_PROVE_HUMAN }, { "captchaTarget", IDS_BRAVE_UI_CAPTCHA_TARGET }, { "captchaMissedTarget", IDS_BRAVE_UI_CAPTCHA_MISSED_TARGET }, + { "category", IDS_BRAVE_UI_ADS_CATEGORY }, { "claim", IDS_BRAVE_UI_CLAIM }, { "closeBalance", IDS_BRAVE_UI_CLOSE_BALANCE }, { "contribute", IDS_BRAVE_UI_CONTRIBUTE }, @@ -354,6 +365,8 @@ void CustomizeWebUIHTMLSource(const std::string &name, { "learnMore", IDS_BRAVE_UI_LEARN_MORE }, { "makeMonthly", IDS_BRAVE_UI_MAKE_MONTHLY }, { "manageWallet", IDS_BRAVE_UI_MANAGE_WALLET }, + { "markAsInappropriate", IDS_BRAVE_UI_ADS_MARK_AS_INAPPROPRIATE }, + { "markAsInappropriateChecked", IDS_BRAVE_UI_ADS_MARK_AS_INAPPROPRIATE_CHECKED }, { "monthApr", IDS_BRAVE_UI_MONTH_APR }, { "monthAug", IDS_BRAVE_UI_MONTH_AUG }, { "monthDec", IDS_BRAVE_UI_MONTH_DEC }, @@ -370,6 +383,7 @@ void CustomizeWebUIHTMLSource(const std::string &name, { "newGrant", IDS_BRAVE_UI_NEW_GRANT }, { "newTokenGrant", IDS_BRAVE_UI_NEW_TOKEN_GRANT }, { "noActivity", IDS_BRAVE_UI_NO_ACTIVITY }, + { "noAdsHistory", IDS_BRAVE_UI_ADS_NO_ADS_HISTORY }, { "noGrants", IDS_BRAVE_UI_NO_GRANTS }, { "notEnoughTokens", IDS_BRAVE_UI_NOT_ENOUGH_TOKENS }, { "noThankYou", IDS_BRAVE_UI_NO_THANK_YOU }, @@ -379,6 +393,8 @@ void CustomizeWebUIHTMLSource(const std::string &name, { "oneTime", IDS_BRAVE_UI_ONE_TIME }, { "oneTimeDonation", IDS_BRAVE_UI_ONE_TIME_DONATION }, { "openBalance", IDS_BRAVE_UI_OPEN_BALANCE }, + { "openAdsHistory", IDS_BRAVE_UI_OPEN_ADS_HISTORY }, + { "optOutTooltip", IDS_BRAVE_UI_ADS_OPT_OUT_TOOLTIP }, { "payment", IDS_BRAVE_UI_PAYMENT }, { "paymentMonthly", IDS_BRAVE_UI_PAYMENT_MONTHLY }, { "paymentNotMade", IDS_BRAVE_UI_PAYMENT_NOT_MADE }, @@ -406,6 +422,7 @@ void CustomizeWebUIHTMLSource(const std::string &name, { "recurringDonation", IDS_BRAVE_UI_RECURRING_DONATION }, { "recurringDonations", IDS_BRAVE_UI_RECURRING_DONATIONS }, { "remove", IDS_BRAVE_UI_REMOVE }, + { "removeAdFromSaved", IDS_BRAVE_UI_REMOVE_AD_FROM_SAVED }, { "reservedAmountText", IDS_BRAVE_UI_RESERVED_AMOUNT_TEXT }, { "reservedMoreLink", IDS_BRAVE_UI_RESERVED_MORE_LINK }, { "reservedAllLink", IDS_BRAVE_UI_RESERVED_ALL_LINK }, @@ -441,6 +458,8 @@ void CustomizeWebUIHTMLSource(const std::string &name, { "rewardsRestoreText4", IDS_BRAVE_UI_REWARDS_RESTORE_TEXT4 }, { "rewardsSummary", IDS_BRAVE_UI_REWARDS_SUMMARY }, { "rewardsWhy", IDS_BRAVE_UI_REWARDS_WHY }, + { "saved", IDS_BRAVE_UI_ADS_SAVED }, + { "saveAd", IDS_BRAVE_UI_ADS_SAVE_AD }, { "saveAsFile", IDS_BRAVE_UI_SAVE_AS_FILE }, { "seeAllItems", IDS_BRAVE_UI_SEE_ALL_ITEMS }, { "seeAllSites", IDS_BRAVE_UI_SEE_ALL_SITES }, diff --git a/components/brave_rewards/resources/ui/components/adsBox.tsx b/components/brave_rewards/resources/ui/components/adsBox.tsx index d9b468f8c9a3..2da95a464409 100644 --- a/components/brave_rewards/resources/ui/components/adsBox.tsx +++ b/components/brave_rewards/resources/ui/components/adsBox.tsx @@ -13,6 +13,8 @@ import { DisabledContent, List, NextContribution, + ModalShowAdsHistory, + ShowAdsHistory, Tokens } from 'brave-ui/features/rewards' import { Grid, Column, Select, ControlWrapper } from 'brave-ui/components' @@ -27,16 +29,22 @@ interface Props extends Rewards.ComponentProps { interface State { settings: boolean + modalShowAdsHistory: boolean } class AdsBox extends React.Component { constructor (props: Props) { super(props) this.state = { - settings: false + settings: false, + modalShowAdsHistory: false } } + componentDidMount () { + this.isShowAdsHistoryUrl() + } + componentDidUpdate (prevProps: Props) { if ( prevProps.rewardsData.enabledMain && @@ -111,8 +119,247 @@ class AdsBox extends React.Component { this.setState({ settings: !this.state.settings }) } + onAdsHistoryToggle = () => { + this.setState({ + modalShowAdsHistory: !this.state.modalShowAdsHistory + }) + } + + closeShowAdsHistory = () => { + if (this.urlHashIs('#ads-history')) { + window.location.hash = '' + } + this.onAdsHistoryToggle() + } + + urlHashIs = (hash: string) => { + return ( + window && + window.location && + window.location.hash && + window.location.hash === hash + ) + } + + isShowAdsHistoryUrl = () => { + if (this.urlHashIs('#ads-history')) { + this.setState({ + modalShowAdsHistory: true + }) + } else { + this.setState({ + modalShowAdsHistory: false + }) + } + } + + onThumbUpPress = () => { + console.log('onThumbUpPress') + } + + onThumbDownPress = () => { + console.log('onThumbDownPress') + } + + onOptInAction = () => { + console.log('onOptInAction') + } + + onOptOutAction = () => { + console.log('onOptOutAction') + } + + onMenuSave = () => { + console.log('onMenuSave') + } + + onMenuFlag = () => { + console.log('onMenuFlag') + } + + getAdHistoryData = (adHistoryData: Rewards.AdsHistoryData[], savedOnly: boolean) => { + return adHistoryData.map((item: Rewards.AdsHistoryData, ix: number) => { + return { + id: ix, + date: item.date, + adDetailRows: ( + item.adDetailRows.map((itemDetail: Rewards.AdHistoryDetail, jx: number) => { + const adContent: Rewards.AdContent = { + brand: itemDetail.adContent.brand, + brandInfo: itemDetail.adContent.brandInfo, + brandLogo: itemDetail.adContent.brandLogo, + brandDisplayUrl: itemDetail.adContent.brandDisplayUrl, + brandUrl: itemDetail.adContent.brandUrl, + likeAction: itemDetail.adContent.likeAction, + adAction: itemDetail.adContent.adAction, + savedAd: itemDetail.adContent.savedAd, + flaggedAd: itemDetail.adContent.flaggedAd, + onThumbUpPress: () => this.onThumbUpPress(), + onThumbDownPress: () => this.onThumbDownPress(), + onMenuSave: () => this.onMenuSave(), + onMenuFlag: () => this.onMenuFlag() + } + const categoryContent: Rewards.CategoryContent = { + category: itemDetail.categoryContent.category, + optAction: itemDetail.categoryContent.optAction, + onOptInAction: () => this.onOptInAction(), + onOptOutAction: () => this.onOptOutAction() + } + return { + id: jx, + adContent: adContent, + categoryContent: categoryContent + } + }) + ) + } + }) + } + + hasSavedEntries = (adHistoryData: Rewards.AdsHistoryData[]) => { + for (let ix = 0; ix < adHistoryData.length; ix++) { + for (let jx = 0; jx < adHistoryData[ix].adDetailRows.length; jx++) { + if (adHistoryData[ix].adDetailRows[jx].adContent.savedAd) { + return true + } + } + } + return false + } + render () { - // Default values from storage.ts + const adsPerHour = 2 + const adId: number = 0 + const rowId: number = 0 + const savedOnly: boolean = false + + /******** ASSUMED DATA - REMOVE UPON IMPLEMENTATION */ + const adsHistory: Rewards.AdsHistoryData[] = + [ + { + id: rowId, + date: '1/30', + adDetailRows: [ + { + id: adId, + adContent: { + brand: 'Pepsi', + brandLogo: '', + brandUrl: 'https://www.pepsi.com', + brandDisplayUrl: 'pepsi.com', + brandInfo: 'Animation & VFX Degree - Degree in Animation |', + adAction: 'Viewed', + likeAction: 1, + savedAd: true, + flaggedAd: false + }, + categoryContent: { + category: 'Entertainment', + optAction: 0 + } + }, + { + id: adId + 1, + adContent: { + brand: 'TESLA', + brandLogo: '', + brandDisplayUrl: 'tesla.com', + brandUrl: 'https://www.tesla.com', + brandInfo: 'Animation & VFX Degree - Degree in Animation |', + adAction: 'Clicked', + likeAction: 2, + savedAd: false, + flaggedAd: false + }, + categoryContent: { + category: 'Auto', + optAction: 0 + } + }, + { + id: adId + 2, + adContent: { + brand: 'Disney', + brandLogo: '', + brandDisplayUrl: 'disney.com', + brandUrl: 'https://www.disney.com', + brandInfo: 'Animation & VFX Degree - Degree in Animation |', + adAction: 'Clicked', + likeAction: 0, + savedAd: false, + flaggedAd: true + }, + categoryContent: { + category: 'Travel', + optAction: 0 + } + } + ] + }, + { + id: rowId + 1, + date: '1/29', + adDetailRows: [ + { + id: adId + 3, + adContent: { + brand: 'Puma', + brandLogo: '', + brandDisplayUrl: 'puma.com', + brandUrl: 'https://www.puma.com', + brandInfo: 'Animation & VFX Degree - Degree in Animation |', + adAction: 'Viewed', + likeAction: 0, + savedAd: false, + flaggedAd: false + }, + categoryContent: { + category: 'Sports', + optAction: 0 + } + }, + { + id: adId + 4, + adContent: { + brand: 'Expedia.com', + brandLogo: '', + brandDisplayUrl: 'expedia.com', + brandUrl: 'https://www.expedia.com', + brandInfo: 'Animation & VFX Degree - Degree in Animation |', + adAction: 'Viewed', + likeAction: 0, + savedAd: true, + flaggedAd: false + }, + categoryContent: { + category: 'Travel', + optAction: 2 + } + }, + { + id: adId + 5, + adContent: { + brand: 'H&M', + brandLogo: '', + brandUrl: 'hm.com', + brandDisplayUrl: 'https://www.hm.com', + brandInfo: 'Animation & VFX Degree - Degree in Animation |', + adAction: 'Closed', + likeAction: 0, + savedAd: true, + flaggedAd: false + }, + categoryContent: { + category: 'Fashion', + optAction: 1 + } + } + ] + } + ] + /* end */ + + const rows = this.getAdHistoryData(adsHistory, savedOnly) let adsEnabled = false let adsUIEnabled = false let adsIsSupported = false @@ -141,38 +388,51 @@ class AdsBox extends React.Component { const showDisabled = firstLoad !== false || !toggle || !adsEnabled || !adsIsSupported return ( - - - - - - - {nextPaymentDate} - - - - + + + + + + + {nextPaymentDate} + + + + + + + + { + this.state.modalShowAdsHistory + ? - - + : null + } + ) } } diff --git a/components/definitions/rewards.d.ts b/components/definitions/rewards.d.ts index 49a91f400ec3..d2d3a96aea01 100644 --- a/components/definitions/rewards.d.ts +++ b/components/definitions/rewards.d.ts @@ -208,4 +208,40 @@ declare namespace Rewards { rates: Record wallets: Record } + + export interface AdsHistoryData { + [key: string]: any + id: number + date: string + adDetailRows: AdHistoryDetail[] + } + + export interface AdHistoryDetail { + id: number + adContent: AdContent + categoryContent: CategoryContent + } + + export interface AdContent { + brand: string + brandInfo: string + brandLogo: string + brandDisplayUrl: string + brandUrl: string + likeAction: number + adAction: 'Viewed' | 'Clicked' | 'Closed' | 'Landed' + savedAd: boolean + flaggedAd: boolean + onThumbUpPress?: () => void + onThumbDownPress?: () => void + onMenuSave?: () => void + onMenuFlag?: () => void + } + + export interface CategoryContent { + category: string + optAction: number + onOptInAction?: () => void + onOptOutAction?: () => void + } } diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd index 171f947fe700..1335c5af2ddc 100644 --- a/components/resources/brave_components_strings.grd +++ b/components/resources/brave_components_strings.grd @@ -307,6 +307,23 @@ ©2016–2018 Brave Software. Brave is a registered trademark of Brave Software. Site names may be trademarks or registered trademarks of the site owner. To protect your privacy, this Brave Rewards statement is not saved, recorded or logged anywhere other than on your device (this computer). It cannot be retrieved from Brave in the event of data loss on your device. add funds + Ads + All + Category + You're currently receiving a maximum of ''' + All + Saved + Ads You've received in the past 7 days + Ads History + Mark As Inappropriate + Mark As Inappropriate ✓ + There is currently no Brave Ads history + You will no longer receive ads from this category + , total + ''' ads per hour + ''' ad per hour + Saved + Save You are automatically sending a tip to: BAT the FAQ @@ -407,6 +424,7 @@ One time One-time Tips Opening Balance + 7-day Ads History Payment Payment made every {{day}}th day in each month. Payment not made. @@ -429,6 +447,7 @@ Tip {{ user }} for their post: Tip {{ user }} for their post! remove + Remove From Saved You’ve designated {{reservedAmount}} BAT for creators who haven’t yet signed up to receive contributions. Your browser will keep trying to contribute until they verify, or until 90 days have passed. Learn more. Restore @@ -465,6 +484,7 @@ Rewards Summary Why Brave Rewards? Save as File + Save See all {{numItems}} items See all {{numSites}} sites Send my Tip diff --git a/package-lock.json b/package-lock.json index 7bd397538e30..5caeea565e23 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5663,8 +5663,8 @@ } }, "brave-ui": { - "version": "github:brave/brave-ui#3bcc2eaa291c590e6d9095b2640fdfd2e698c840", - "from": "github:brave/brave-ui#3bcc2eaa291c590e6d9095b2640fdfd2e698c840", + "version": "github:brave/brave-ui#2a456d2d1cc5fa50da9c73e2b52afcac7c2335a0", + "from": "github:brave/brave-ui#2a456d2d1cc5fa50da9c73e2b52afcac7c2335a0", "dev": true, "requires": { "@ctrl/tinycolor": "^2.2.1", diff --git a/package.json b/package.json index 47c19473fd88..f400b18d3820 100644 --- a/package.json +++ b/package.json @@ -288,8 +288,7 @@ "@types/storybook__addon-knobs": "^5.0.2", "@types/storybook__react": "^4.0.2", "awesome-typescript-loader": "^5.2.1", - "babel-loader": "^8.0.6", - "brave-ui": "github:brave/brave-ui#3bcc2eaa291c590e6d9095b2640fdfd2e698c840", + "brave-ui": "github:brave/brave-ui#2a456d2d1cc5fa50da9c73e2b52afcac7c2335a0", "css-loader": "^2.1.1", "csstype": "^2.5.5", "deep-freeze-node": "^1.1.3",