Update "Sponsored Images" toggle UI

browser/ui/webui/brave_webui_source.cc

@@ -166,6 +166,10 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "showBinance", IDS_BRAVE_NEW_TAB_SHOW_BINANCE },
         { "cards", IDS_BRAVE_NEW_TAB_SHOW_CARDS },
         { "brandedWallpaperOptIn", IDS_BRAVE_NEW_TAB_BRANDED_WALLPAPER_OPT_IN },
+        { "sponsoredImageOn", IDS_BRAVE_NEW_TAB_SPONSORED_IMAGE_ON},
+        { "sponsoredImageOff", IDS_BRAVE_NEW_TAB_SPONSORED_IMAGE_OFF},
+        { "sponsoredImageOnDescription", IDS_BRAVE_NEW_TAB_SPONSORED_IMAGE_ON_DESCRIPTION},  // NOLINT
+        { "sponsoredImageOffDescription", IDS_BRAVE_NEW_TAB_SPONSORED_IMAGE_OFF_DESCRIPTION},  // NOLINT
         { "topSitesTitle", IDS_BRAVE_NEW_TAB_TOP_SITES },
         { "statsTitle", IDS_BRAVE_NEW_TAB_STATS },
         { "clockTitle", IDS_BRAVE_NEW_TAB_CLOCK },

components/brave_new_tab_ui/containers/app.tsx

@@ -7,6 +7,8 @@ import * as React from 'react'
 import { Dispatch } from 'redux'
 import { connect } from 'react-redux'
 
+import '$web-components/app.global.scss'
+
 // Components
 import NewTabPage from './newTab'
 

components/brave_new_tab_ui/containers/newTab/index.tsx

@@ -1362,6 +1362,7 @@ class NewTabPage extends React.Component<Props, State> {
           cardsHidden={this.allWidgetsHidden()}
           toggleCards={this.props.saveSetAllStackWidgets}
           newTabData={this.props.newTabData}
+          onEnableRewards={this.startRewards}
         />
         {
           showEditTopSite

components/brave_new_tab_ui/containers/newTab/settings.tsx

@@ -70,6 +70,7 @@ export interface Props {
   useCustomBackgroundImage: () => void
   setBraveBackground: (selectedBackground: string) => void
   setColorBackground: (color: string, useRandomColor: boolean) => void
+  onEnableRewards: () => void
   showBackgroundImage: boolean
   showToday: boolean
   showBraveNewsButton: boolean
@@ -296,7 +297,8 @@ export default class Settings extends React.PureComponent<Props, State> {
       ftxSupported,
       showFTX,
       toggleCards,
-      cardsHidden
+      cardsHidden,
+      onEnableRewards
     } = this.props
     const { activeTab } = this.state
 
@@ -362,6 +364,7 @@ export default class Settings extends React.PureComponent<Props, State> {
                     brandedWallpaperOptIn={brandedWallpaperOptIn}
                     showBackgroundImage={showBackgroundImage}
                     featureCustomBackgroundEnabled={featureCustomBackgroundEnabled}
+                    onEnableRewards={onEnableRewards}
                   />
                 ) : null
               }

components/brave_new_tab_ui/containers/newTab/settings/backgroundImage.tsx

@@ -25,6 +25,7 @@ import { getLocale } from '../../../../common/locale'
 
 import BackgroundChooser from './backgroundChooser'
 import { images, defaultSolidBackgroundColor, solidColorsForBackground, gradientColorsForBackground, defaultGradientColor } from '../../../data/backgrounds'
+import SponsoredImageToggle from './sponsoredImagesToggle'
 
 interface Props {
   newTabData: NewTab.State
@@ -36,6 +37,7 @@ interface Props {
   brandedWallpaperOptIn: boolean
   showBackgroundImage: boolean
   featureCustomBackgroundEnabled: boolean
+  onEnableRewards: () => void
 }
 
 enum Location {
@@ -84,7 +86,8 @@ class BackgroundImageSettings extends React.PureComponent<Props, State> {
       toggleBrandedWallpaperOptIn,
       brandedWallpaperOptIn,
       showBackgroundImage,
-      featureCustomBackgroundEnabled
+      featureCustomBackgroundEnabled,
+      onEnableRewards
     } = this.props
 
     const usingCustomImageBackground = newTabData.backgroundWallpaper?.type === 'image'
@@ -109,17 +112,6 @@ class BackgroundImageSettings extends React.PureComponent<Props, State> {
                 size='large'
               />
             </SettingsRow>
-            <SettingsRow isChildSetting={true}>
-              <SettingsText>{getLocale('brandedWallpaperOptIn')}</SettingsText>
-              <Toggle
-                onChange={toggleBrandedWallpaperOptIn}
-                // This option can only be enabled if
-                // users opt in for background images
-                checked={showBackgroundImage && brandedWallpaperOptIn}
-                disabled={!showBackgroundImage}
-                size='small'
-              />
-            </SettingsRow>
             {showBackgroundImage && featureCustomBackgroundEnabled && (
               <StyledCustomBackgroundSettings>
                 <StyledCustomBackgroundOption
@@ -175,6 +167,17 @@ class BackgroundImageSettings extends React.PureComponent<Props, State> {
                 </StyledCustomBackgroundOption>
               </StyledCustomBackgroundSettings>
             )}
+            <div style={{ height: '16px' }}/>
+            <SettingsRow>
+              <SponsoredImageToggle
+                onChange={toggleBrandedWallpaperOptIn}
+                onEnableRewards={onEnableRewards}
+                checked={showBackgroundImage && brandedWallpaperOptIn}
+                disabled={!showBackgroundImage /* This option can only be enabled if users opt in for background images */}
+                rewardsEnabled={this.props.newTabData.rewardsState.rewardsEnabled}
+                adsEnabled={this.props.newTabData.rewardsState.enabledAds}
+                canSupportAds={!!this.props.newTabData.rewardsState.adsSupported}/>
+            </SettingsRow>
           </div>
         )}
         {this.state.location === Location.BRAVE_BACKGROUNDS &&

components/brave_new_tab_ui/containers/newTab/settings/sponsoredImagesToggle.tsx

@@ -0,0 +1,114 @@
+// Copyright (c) 2022 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+import styled from 'styled-components'
+
+// Common components
+import { SettingsText } from '../../../components/default'
+import { Toggle } from '../../../components/toggle'
+
+// Assets
+import InfoIcon from '../../../components/default/settings/assets/info-icon.svg'
+
+// Utilities
+import { getLocale } from '../../../../common/locale'
+
+interface Props {
+  onChange: () => void
+  onEnableRewards: () => void
+
+  checked: boolean
+  disabled: boolean
+  rewardsEnabled: boolean
+  adsEnabled: boolean
+  canSupportAds: boolean
+}
+
+const Container = styled.div`
+  background-color: var(--info-background);
+  border-radius: 8px;
+  padding: 8px;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`
+
+const ToggleRow = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  border-radius: 10px;
+  background-color: var(--background1);
+`
+
+const DescriptionRow = styled.div`
+  width: 100%;
+  display: grid; 
+  grid-template-rows: 16px 1fr;
+  grid-template-columns: 16px 1fr;
+  padding: 0 8px;
+  gap: 8px;
+  color: #339AF0;
+  font-family: var(--brave-font-family-non-serif);
+  letter-spacing: 0.01em;
+  margin-bottom: 7px;
+`
+
+const DescriptionIcon = styled.div`
+  background: url(${InfoIcon}) no-repeat;
+`
+
+const DescriptionTitle = styled.div`
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 18px;
+`
+
+const DescriptionBody = styled.div`
+  grid-column: 2;
+  font-weight: 500;
+  font-size: 11px;
+  line-height: 17px;
+`
+
+const EnableRewardsButton = styled.button`
+  width: 236px;
+  height: 40px;
+  background: var(--interactive5);
+  border-radius: 48px;
+  border-width: 0;
+  color: white;
+  cursor: pointer;
+  margin-bottom: 8px;
+`
+
+export default function SponsoredImageToggle ({ onChange, onEnableRewards, checked, disabled, rewardsEnabled: rewardEnabled, adsEnabled, canSupportAds }: Props) {
+  const showRewardButton = checked && !disabled && (!rewardEnabled || (!adsEnabled && canSupportAds))
+  return (
+    <Container>
+      <ToggleRow>
+        <SettingsText>{getLocale('brandedWallpaperOptIn')}</SettingsText>
+        <Toggle onChange={onChange} checked={checked} disabled={disabled} size='small' />
+      </ToggleRow>
+      <DescriptionRow>
+        <DescriptionIcon/>
+        <DescriptionTitle>
+          {!checked || showRewardButton ? getLocale('sponsoredImageOn') : getLocale('sponsoredImageOff')}
+        </DescriptionTitle>
+        <DescriptionBody>
+          {!checked || showRewardButton ? getLocale('sponsoredImageOnDescription') : getLocale('sponsoredImageOffDescription')}
+        </DescriptionBody>
+      </DescriptionRow>
+      {showRewardButton &&
+        <EnableRewardsButton onClick={onEnableRewards}>
+            {getLocale('rewardsStartUsingRewards')}
+        </EnableRewardsButton>}
+    </Container>
+  )
+}

components/brave_new_tab_ui/stories/default/data/backgroundWallpaper.ts

@@ -71,3 +71,10 @@ export const onUseBraveBackground = (selectedBackground: string) => {
     value: backgroundWallpapers.defaultImage
   })
 }
+
+export const onShowBrandedImageChanged = (show: boolean) => {
+  addonsChannel.emit(CHANGE, {
+    name: 'Show branded background image?',
+    value: show
+  })
+}

components/brave_new_tab_ui/stories/default/data/storybookState.ts

@@ -67,6 +67,7 @@ export const useNewTabData = (state: NewTab.State = defaultState) => {
     brandedWallpaper: shouldShowBrandedWallpaperData(
       boolean('Show branded background image?', true)
     ),
+    brandedWallpaperOptIn: boolean('Show branded background image?', true),
     backgroundWallpaper: select(
       'Background',
       backgroundWallpapers,

components/brave_new_tab_ui/stories/regular.tsx

@@ -10,7 +10,7 @@ import NewTabPage from '../containers/newTab'
 import { getActionsForDispatch } from '../api/getActions'
 import store from '../store'
 import { useNewTabData, getGridSitesData } from './default/data/storybookState'
-import { onChangeColoredBackground, onUseBraveBackground } from './default/data/backgroundWallpaper'
+import { onChangeColoredBackground, onUseBraveBackground, onShowBrandedImageChanged } from './default/data/backgroundWallpaper'
 import getTodayState from './default/data/todayStorybookState'
 import getBraveNewsDisplayAd from './default/data/getBraveNewsDisplayAd'
 import { getDataUrl, getUnpaddedAsDataUrl } from '../../common/privateCDN'
@@ -80,7 +80,7 @@ export const Regular = () => {
       saveShowGemini={doNothing}
       saveShowCryptoDotCom={doNothing}
       saveShowFTX={doNothing}
-      saveBrandedWallpaperOptIn={doNothing}
+      saveBrandedWallpaperOptIn={onShowBrandedImageChanged}
       saveSetAllStackWidgets={doNothing}
       getBraveNewsDisplayAd={getBraveNewsDisplayAd}
       setBraveBackground={onUseBraveBackground}

components/resources/brave_components_strings.grd

@@ -254,6 +254,10 @@
       <message name="IDS_BRAVE_NEW_TAB_SHOW_BINANCE" desc="Text for show binance option">Show Binance</message>
       <message name="IDS_BRAVE_NEW_TAB_SHOW_CARDS" desc="Text for cards option">Cards</message>
       <message name="IDS_BRAVE_NEW_TAB_BRANDED_WALLPAPER_OPT_IN" desc="Text for setting to opt-in to Branded Wallpapers on New Tab Page">Show Sponsored Images</message>
+      <message name="IDS_BRAVE_NEW_TAB_SPONSORED_IMAGE_ON" desc="Description about turning on sponsored image">You can earn for seeing sponsored sites.</message>
+      <message name="IDS_BRAVE_NEW_TAB_SPONSORED_IMAGE_OFF" desc="Description about turning off sponsored image">You're earning for seeing sponsored images.</message>
+      <message name="IDS_BRAVE_NEW_TAB_SPONSORED_IMAGE_ON_DESCRIPTION" desc="Description about sponsored image">Sponsored images support Brave. With Brave Rewards, you can earn part of the revenue from sponsored images and support content creators too!</message>
+      <message name="IDS_BRAVE_NEW_TAB_SPONSORED_IMAGE_OFF_DESCRIPTION" desc="Description about sponsored image">Turning off sponsored sites will decrease how many tokens you earn and the support given to content creators each month.</message>
       <message name="IDS_BRAVE_NEW_TAB_TOP_SITES" desc="Top Sites title">top sites</message>
       <message name="IDS_BRAVE_NEW_TAB_STATS" desc="Brave Stats title">Brave Stats</message>
       <message name="IDS_BRAVE_NEW_TAB_CLOCK" desc="Clock title">clock</message>

components/web-components/app.global.scss

@@ -1,7 +1,9 @@
 :root {
   --brave-font-family-default: Poppins, sans-serif;
+  --brave-font-family-non-serif: Poppins, normal;
   --background1: white;
   --background2: #F8F9FA;
+  --info-background: rgba(93, 181, 252, 0.2);
   --divider1: #E9E9F4;
   --text1: #212529;
   --text2: #495057;