Skip to content

Commit ba2f77a

Browse files
aserenaseren
committed
Added chrome.braveRequestAdsEnabled() extension popups.
fix brave/brave-browser#16964
1 parent ea61ffa commit ba2f77a

File tree

12 files changed

+480
-6
lines changed

12 files changed

+480
-6
lines changed

‎components/brave_rewards/resources/extension/brave_rewards/BUILD.gn

+13-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
import("//brave/components/common/typescript.gni")
22

33
group("brave_rewards") {
4-
deps = [
5-
":brave_rewards_panel",
6-
]
4+
deps = [ ":brave_rewards_panel" ]
75
}
86

97
transpile_web_ui("brave_rewards_panel") {
108
entry_points = [
11-
["brave_rewards_panel", rebase_path("brave_rewards_panel.tsx")],
12-
["brave_rewards_panel_background", rebase_path("background.ts")],
9+
[
10+
"brave_rewards_panel",
11+
rebase_path("brave_rewards_panel.tsx"),
12+
],
13+
[
14+
"request_ads_enabled_panel",
15+
rebase_path("request_ads_enabled_panel.tsx"),
16+
],
17+
[
18+
"brave_rewards_panel_background",
19+
rebase_path("background.ts"),
20+
],
1321
]
1422

1523
resource_name = "brave_rewards_panel"

‎components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json

+32
Original file line numberDiff line numberDiff line change
@@ -860,5 +860,37 @@
860860
"content": "$2"
861861
}
862862
}
863+
},
864+
"braveTalkTurnOnRewardsToStartCall": {
865+
"message": "To start a free call, turn on Brave Rewards",
866+
"description": ""
867+
},
868+
"braveTalkBraveRewardsDescription": {
869+
"message": "With Brave Rewards, you earn tokens for viewing private ads (your data is safe). Turn those tokens into cash, gift cards…or even tip the websites you love. No tracking. No slow downs.",
870+
"description": ""
871+
},
872+
"braveTalkTurnOnRewards": {
873+
"message": "Turn on Rewards",
874+
"description": ""
875+
},
876+
"braveTalkTurnOnPrivateAdsToStartCall": {
877+
"message": "To start a free call, enable Brave Private Ads",
878+
"description": ""
879+
},
880+
"braveTalkPrivateAdsDescription": {
881+
"message": "With Brave Private Ads, you earn tokens for viewing private ads (your data is safe). Turn those tokens into cash, gift cards…or even tip the websites you love. No tracking. No slow downs.",
882+
"description": ""
883+
},
884+
"braveTalkTurnOnPrivateAds": {
885+
"message": "Turn on Brave Private Ads",
886+
"description": ""
887+
},
888+
"braveTalkCanStartFreeCall": {
889+
"message": "You can now start a free call",
890+
"description": ""
891+
},
892+
"braveTalkClickAnywhereToBraveTalk": {
893+
"message": "Click anywhere on the screen to continue to Brave Talk.",
894+
"description": ""
863895
}
864896
}

‎components/brave_rewards/resources/extension/brave_rewards/components/ads_enable.style.ts

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/* This Source Code Form is subject to the terms of the Mozilla Public
2+
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
3+
* You can obtain one at http://mozilla.org/MPL/2.0/. */
4+
5+
import styled from 'styled-components'
6+
7+
import modalBackground from '../../../shared/components/onboarding/assets/opt_in_modal_bg.svg'
8+
9+
export const root = styled.div`
10+
flex: 0 0 auto;
11+
min-width: 365px;
12+
padding: 17px;
13+
font-family: var(--brave-font-heading);
14+
text-align: center;
15+
background-color: var(--brave-palette-white);
16+
background-image: url(${modalBackground});
17+
background-repeat: no-repeat;
18+
background-position: 4px -11px;
19+
background-size: auto 200px;
20+
box-shadow: 0px 0px 16px rgba(99, 105, 110, 0.2);
21+
border-radius: 8px;
22+
`
23+
24+
export const header = styled.div`
25+
margin-top: 17px;
26+
color: var(--brave-palette-black);
27+
font-weight: 600;
28+
font-size: 18px;
29+
line-height: 22px;
30+
31+
.icon {
32+
vertical-align: middle;
33+
width: 26px;
34+
margin-right: 5px;
35+
margin-bottom: 3px;
36+
}
37+
`
38+
39+
export const text = styled.div`
40+
margin: 8px 6px 0;
41+
color: var(--brave-palette-neutral700);
42+
font-size: 14px;
43+
line-height: 24px;
44+
`
45+
46+
export const enable = styled.div`
47+
margin-top: 25px;
48+
49+
button {
50+
min-width: 330px;
51+
}
52+
`
53+
54+
export const terms = styled.div`
55+
margin: 50px 14px 15px;
56+
color: var(--brave-palette-neutral600);
57+
font-size: 11px;
58+
line-height: 16px;
59+
60+
a {
61+
color: var(--brave-color-brandBat);
62+
font-weight: 600;
63+
text-decoration: none;
64+
}
65+
`

‎components/brave_rewards/resources/extension/brave_rewards/components/ads_enable.tsx

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
/* This Source Code Form is subject to the terms of the Mozilla Public
2+
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
3+
* You can obtain one at http://mozilla.org/MPL/2.0/. */
4+
5+
import * as React from 'react'
6+
import { bindActionCreators, Dispatch } from 'redux'
7+
import { connect } from 'react-redux'
8+
9+
import { BraveTalkOptInForm } from '../../../shared/components/onboarding/brave_talk_opt_in_form'
10+
11+
import * as rewardsPanelActions from '../actions/rewards_panel_actions'
12+
13+
interface Props extends RewardsExtension.ComponentProps {
14+
}
15+
16+
interface State {
17+
}
18+
19+
export class AdsEnablePanel extends React.Component<Props, State> {
20+
constructor (props: Props) {
21+
super(props)
22+
}
23+
24+
componentDidMount () {
25+
chrome.braveRewards.isInitialized((initialized: boolean) => {
26+
if (initialized) {
27+
this.props.actions.initialized()
28+
this.startAdsEnable()
29+
}
30+
})
31+
}
32+
33+
componentDidUpdate (prevProps: Props, prevState: State) {
34+
if (prevProps.rewardsPanelData.initializing &&
35+
!this.props.rewardsPanelData.initializing) {
36+
this.startAdsEnable()
37+
}
38+
}
39+
40+
startAdsEnable = () => {
41+
chrome.braveRewards.shouldShowOnboarding((showOnboarding: boolean) => {
42+
this.props.actions.onShouldShowOnboarding(showOnboarding)
43+
})
44+
}
45+
46+
render () {
47+
const onEnable = () => {
48+
chrome.braveRewards.enableRewards()
49+
}
50+
51+
return (
52+
<BraveTalkOptInForm
53+
showRewardsOnboarding={this.props.rewardsPanelData.showOnboarding}
54+
onEnable={onEnable}
55+
/>
56+
)
57+
}
58+
}
59+
60+
export const mapStateToProps = (state: RewardsExtension.ApplicationState) => ({
61+
rewardsPanelData: state.rewardsPanelData
62+
})
63+
64+
export const mapDispatchToProps = (dispatch: Dispatch) => ({
65+
actions: bindActionCreators(rewardsPanelActions, dispatch)
66+
})
67+
68+
export default connect(
69+
mapStateToProps,
70+
mapDispatchToProps
71+
)(AdsEnablePanel)

‎components/brave_rewards/resources/extension/brave_rewards/request_ads_enabled_panel.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width">
6+
<title>Ads Enable Panel</title>
7+
<script src="/out/request_ads_enabled_panel.bundle.js"></script>
8+
<style>
9+
#root { height: 100%; }
10+
body { margin: 0; }
11+
p { white-space: pre-line; }
12+
</style>
13+
</head>
14+
<body>
15+
<div id="ads_enable_root"></div>
16+
</body>
17+
</html>

‎components/brave_rewards/resources/extension/brave_rewards/request_ads_enabled_panel.tsx

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/* This Source Code Form is subject to the terms of the Mozilla Public
2+
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
3+
* You can obtain one at http://mozilla.org/MPL/2.0/. */
4+
5+
import * as React from 'react'
6+
import { render } from 'react-dom'
7+
import { Provider } from 'react-redux'
8+
import { Store } from 'webext-redux'
9+
10+
import Theme from 'brave-ui/theme/brave-default'
11+
import { ThemeProvider } from 'styled-components'
12+
import { initLocale } from 'brave-ui/helpers'
13+
require('emptykit.css')
14+
require('../../../../../ui/webui/resources/fonts/muli.css')
15+
require('../../../../../ui/webui/resources/fonts/poppins.css')
16+
17+
import { LocaleContext } from '../../shared/lib/locale_context'
18+
import { WithThemeVariables } from '../../shared/components/with_theme_variables'
19+
20+
// Components
21+
import AdsEnablePanel from './components/ads_enable'
22+
23+
// Utils
24+
import { getMessage, getUIMessages } from './background/api/locale_api'
25+
26+
const store: Store<RewardsExtension.State> = new Store({
27+
portName: 'REWARDSPANEL'
28+
})
29+
30+
const localeContext = {
31+
getString: (key: string) => {
32+
// In order to normalize messages across extensions and WebUI, replace all
33+
// chrome.i18n message placeholders with $N marker patterns. UI components
34+
// are responsible for replacing these markers with appropriate text or
35+
// using the markers to build HTML.
36+
const subsitutions = ['$1', '$2', '$3', '$4', '$5', '$6', '$7', '$8', '$9']
37+
return getMessage(key, subsitutions)
38+
}
39+
}
40+
41+
initLocale(getUIMessages())
42+
43+
store.ready().then(
44+
() => {
45+
render(
46+
<LocaleContext.Provider value={localeContext}>
47+
<Provider store={store}>
48+
<ThemeProvider theme={Theme}>
49+
<WithThemeVariables>
50+
<AdsEnablePanel />
51+
</WithThemeVariables>
52+
</ThemeProvider>
53+
</Provider>
54+
</LocaleContext.Provider>,
55+
document.getElementById('ads_enable_root'))
56+
})
57+
.catch(() => {
58+
console.error('Problem mounting ads enable panel')
59+
})

‎components/brave_rewards/resources/extension/extension_static_resources.grd

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<include name="IDR_BRAVE_REWARDS" file="brave_rewards/manifest.json" type="BINDATA" />
1414
<include name="IDR_BRAVE_REWARDS_LOCALES_EN_US" file="brave_rewards/_locales/en_US/messages.json" type="BINDATA" />
1515
<include name="IDR_BRAVE_REWARDS_PANEL_HTML" file="brave_rewards/brave_rewards_panel.html" type="BINDATA" />
16+
<include name="IDR_REQUEST_ADS_ENABLED_PANEL_HTML" file="brave_rewards/request_ads_enabled_panel.html" type="BINDATA" />
1617
<include name="IDR_BRAVE_REWARDS_ICON_16" file="brave_rewards/img/bat-16.png" type="BINDATA" />
1718
<include name="IDR_BRAVE_REWARDS_ICON_32" file="brave_rewards/img/bat-32.png" type="BINDATA" />
1819
<include name="IDR_BRAVE_REWARDS_ICON_48" file="brave_rewards/img/bat-48.png" type="BINDATA" />

‎components/brave_rewards/resources/shared/components/onboarding/brave_talk_opt_in_form.style.ts

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/* This Source Code Form is subject to the terms of the Mozilla Public
2+
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
3+
* You can obtain one at http://mozilla.org/MPL/2.0/. */
4+
5+
import styled from 'styled-components'
6+
7+
import modalBackground from './assets/opt_in_modal_bg.svg'
8+
9+
export const root = styled.div`
10+
flex: 0 0 auto;
11+
min-width: 365px;
12+
padding: 17px;
13+
font-family: var(--brave-font-heading);
14+
text-align: center;
15+
background-color: var(--brave-palette-white);
16+
background-image: url(${modalBackground});
17+
background-repeat: no-repeat;
18+
background-position: 4px -11px;
19+
background-size: auto 200px;
20+
box-shadow: 0px 0px 16px rgba(99, 105, 110, 0.2);
21+
border-radius: 8px;
22+
`
23+
24+
export const header = styled.div`
25+
margin-top: 17px;
26+
color: var(--brave-palette-black);
27+
font-weight: 600;
28+
font-size: 18px;
29+
line-height: 22px;
30+
31+
.icon {
32+
vertical-align: middle;
33+
width: 26px;
34+
margin-right: 5px;
35+
margin-bottom: 3px;
36+
}
37+
`
38+
39+
export const text = styled.div`
40+
margin: 8px 6px 0;
41+
color: var(--brave-palette-neutral700);
42+
font-size: 14px;
43+
line-height: 24px;
44+
`
45+
46+
export const enable = styled.div`
47+
margin-top: 25px;
48+
49+
button {
50+
min-width: 330px;
51+
}
52+
`
53+
54+
export const terms = styled.div`
55+
margin: 50px 14px 15px;
56+
color: var(--brave-palette-neutral600);
57+
font-size: 11px;
58+
line-height: 16px;
59+
60+
a {
61+
color: var(--brave-color-brandBat);
62+
font-weight: 600;
63+
text-decoration: none;
64+
}
65+
`

0 commit comments

Comments
 (0)