From bf07e8cb7d665ee49a515e1e7198cacbb7487500 Mon Sep 17 00:00:00 2001 From: zenparsing Date: Mon, 4 Jan 2021 12:57:27 -0500 Subject: [PATCH] Add setup form to rewards onboarding modal --- browser/extensions/api/brave_rewards_api.cc | 76 +++++++++++++++ browser/extensions/api/brave_rewards_api.h | 24 +++++ browser/ui/webui/brave_tip_ui.cc | 90 ++++++++++++++++- browser/ui/webui/brave_webui_source.cc | 12 +++ common/extensions/api/brave_rewards.json | 68 +++++++++++++ .../_locales/en_US/messages.json | 24 +++++ .../actions/rewards_panel_actions.ts | 6 ++ .../reducers/rewards_panel_reducer.ts | 23 +++++ .../brave_rewards/background/storage.ts | 7 +- .../brave_rewards/components/panel.style.ts | 12 +++ .../brave_rewards/components/panel.tsx | 52 ++++++++-- .../constants/rewards_panel_types.ts | 4 +- .../page/components/settingsPage.tsx | 35 +++++-- .../page/reducers/rewards_reducer.ts | 5 +- .../onboarding/rewards_tour.style.ts | 25 ++++- .../components/onboarding/rewards_tour.tsx | 23 +++-- .../onboarding/rewards_tour_modal.style.ts | 18 ++-- .../onboarding/rewards_tour_modal.tsx | 12 +-- .../onboarding/rewards_tour_panels.style.ts | 12 +++ .../onboarding/rewards_tour_panels.tsx | 22 ++++- .../onboarding/rewards_tour_props.ts | 15 +++ .../components/onboarding/setup_form.style.ts | 81 ++++++++++++++++ .../components/onboarding/setup_form.tsx | 97 +++++++++++++++++++ .../components/onboarding/stories/index.tsx | 33 ++++--- .../onboarding/stories/locale_strings.ts | 9 ++ .../components/onboarding/tour_navigation.tsx | 4 +- .../resources/tip/components/tip_form.tsx | 20 +++- .../brave_rewards/resources/tip/lib/host.ts | 20 ++++ .../resources/tip/lib/interfaces.ts | 5 + .../resources/tip/stories/index.tsx | 13 ++- components/definitions/chromel.d.ts | 10 ++ components/definitions/rewardsExtensions.d.ts | 3 + .../resources/brave_components_strings.grd | 6 ++ .../bat/ledger/public/interfaces/ledger.mojom | 1 + .../src/bat/ledger/internal/ledger_impl.cc | 1 + 35 files changed, 792 insertions(+), 76 deletions(-) create mode 100644 components/brave_rewards/resources/extension/brave_rewards/components/panel.style.ts create mode 100644 components/brave_rewards/resources/shared/components/onboarding/rewards_tour_panels.style.ts create mode 100644 components/brave_rewards/resources/shared/components/onboarding/rewards_tour_props.ts create mode 100644 components/brave_rewards/resources/shared/components/onboarding/setup_form.style.ts create mode 100644 components/brave_rewards/resources/shared/components/onboarding/setup_form.tsx diff --git a/browser/extensions/api/brave_rewards_api.cc b/browser/extensions/api/brave_rewards_api.cc index 9658fda64a54..d97f2d7160f9 100644 --- a/browser/extensions/api/brave_rewards_api.cc +++ b/browser/extensions/api/brave_rewards_api.cc @@ -484,6 +484,12 @@ void BraveRewardsGetRewardsParametersFunction::OnGet( } data.SetList("monthlyTipChoices", std::move(monthly_choices)); + auto ac_choices = std::make_unique(); + for (double const& choice : parameters->auto_contribute_choices) { + ac_choices->AppendDouble(choice); + } + data.SetList("autoContributeChoices", std::move(ac_choices)); + Respond(OneArgument(std::move(data))); } @@ -1230,5 +1236,75 @@ BraveRewardsSaveOnboardingResultFunction::Run() { return RespondNow(NoArguments()); } +BraveRewardsGetPrefsFunction::~BraveRewardsGetPrefsFunction() = default; + +ExtensionFunction::ResponseAction BraveRewardsGetPrefsFunction::Run() { + auto* rewards_service = RewardsServiceFactory::GetForProfile( + Profile::FromBrowserContext(browser_context())); + + if (!rewards_service) + return RespondNow(Error("Rewards service is not initialized")); + + rewards_service->GetAutoContributeProperties(base::BindRepeating( + &BraveRewardsGetPrefsFunction::GetAutoContributePropertiesCallback, + this)); + + return RespondLater(); +} + +void BraveRewardsGetPrefsFunction::GetAutoContributePropertiesCallback( + ledger::type::AutoContributePropertiesPtr properties) { + base::Value prefs(base::Value::Type::DICTIONARY); + prefs.SetBoolKey("autoContributeEnabled", properties->enabled_contribute); + prefs.SetDoubleKey("autoContributeAmount", properties->amount); + + auto* ads_service = AdsServiceFactory::GetForProfile( + Profile::FromBrowserContext(browser_context())); + + if (ads_service) { + prefs.SetBoolKey("adsEnabled", ads_service->IsEnabled()); + prefs.SetDoubleKey("adsPerHour", + static_cast(ads_service->GetAdsPerHour())); + } else { + prefs.SetBoolKey("adsEnabled", false); + prefs.SetDoubleKey("adsPerHour", 0); + } + + Respond(OneArgument(std::move(prefs))); +} + +BraveRewardsUpdatePrefsFunction::~BraveRewardsUpdatePrefsFunction() = default; + +ExtensionFunction::ResponseAction BraveRewardsUpdatePrefsFunction::Run() { + auto params = brave_rewards::UpdatePrefs::Params::Create(*args_); + EXTENSION_FUNCTION_VALIDATE(params); + + auto* profile = Profile::FromBrowserContext(browser_context()); + auto* rewards_service = RewardsServiceFactory::GetForProfile(profile); + auto* ads_service = AdsServiceFactory::GetForProfile(profile); + + if (rewards_service) { + bool* ac_enabled = params->prefs.auto_contribute_enabled.get(); + if (ac_enabled) + rewards_service->SetAutoContributeEnabled(*ac_enabled); + + double* ac_amount = params->prefs.auto_contribute_amount.get(); + if (ac_amount) + rewards_service->SetAutoContributionAmount(*ac_amount); + } + + if (ads_service) { + bool* ads_enabled = params->prefs.ads_enabled.get(); + if (ads_enabled) + ads_service->SetEnabled(*ads_enabled); + + int* ads_per_hour = params->prefs.ads_per_hour.get(); + if (ads_per_hour) + ads_service->SetAdsPerHour(*ads_per_hour); + } + + return RespondNow(NoArguments()); +} + } // namespace api } // namespace extensions diff --git a/browser/extensions/api/brave_rewards_api.h b/browser/extensions/api/brave_rewards_api.h index bee0454f69b6..5cac56045a78 100644 --- a/browser/extensions/api/brave_rewards_api.h +++ b/browser/extensions/api/brave_rewards_api.h @@ -480,6 +480,30 @@ class BraveRewardsSaveOnboardingResultFunction : public ExtensionFunction { ResponseAction Run() override; }; +class BraveRewardsGetPrefsFunction : public ExtensionFunction { + public: + DECLARE_EXTENSION_FUNCTION("braveRewards.getPrefs", UNKNOWN) + + protected: + ~BraveRewardsGetPrefsFunction() override; + + ResponseAction Run() override; + + private: + void GetAutoContributePropertiesCallback( + ledger::type::AutoContributePropertiesPtr properties); +}; + +class BraveRewardsUpdatePrefsFunction : public ExtensionFunction { + public: + DECLARE_EXTENSION_FUNCTION("braveRewards.updatePrefs", UNKNOWN) + + protected: + ~BraveRewardsUpdatePrefsFunction() override; + + ResponseAction Run() override; +}; + } // namespace api } // namespace extensions diff --git a/browser/ui/webui/brave_tip_ui.cc b/browser/ui/webui/brave_tip_ui.cc index f05747b575ee..5b7effd71901 100644 --- a/browser/ui/webui/brave_tip_ui.cc +++ b/browser/ui/webui/brave_tip_ui.cc @@ -18,6 +18,8 @@ #include "brave/browser/brave_rewards/rewards_service_factory.h" #include "brave/browser/profiles/profile_util.h" #include "brave/browser/ui/webui/basic_ui.h" +#include "brave/components/brave_ads/browser/ads_service.h" +#include "brave/components/brave_ads/browser/ads_service_factory.h" #include "brave/components/brave_rewards/browser/rewards_service.h" #include "brave/components/brave_rewards/browser/rewards_service_observer.h" #include "brave/components/brave_rewards/resources/grit/brave_rewards_resources.h" @@ -79,6 +81,10 @@ class TipMessageHandler : public WebUIMessageHandler, void OnTip(const base::ListValue* args); void GetRecurringTips(const base::ListValue* args); void GetReconcileStamp(const base::ListValue* args); + void GetAutoContributeAmount(const base::ListValue* args); + void SetAutoContributeAmount(const base::ListValue* args); + void GetAdsPerHour(const base::ListValue* args); + void SetAdsPerHour(const base::ListValue* args); void TweetTip(const base::ListValue* args); void GetOnlyAnonWallet(const base::ListValue* args); void GetExternalWallet(const base::ListValue* args); @@ -87,6 +93,8 @@ class TipMessageHandler : public WebUIMessageHandler, // Rewards service callbacks void GetReconcileStampCallback(uint64_t reconcile_stamp); + void GetAutoContributeAmountCallback(double amount); + void GetRecurringTipsCallback(ledger::type::PublisherInfoList list); void GetUpholdWalletCallback( @@ -105,6 +113,7 @@ class TipMessageHandler : public WebUIMessageHandler, ledger::type::RewardsParametersPtr parameters); RewardsService* rewards_service_ = nullptr; // NOT OWNED + brave_ads::AdsService* ads_service_ = nullptr; // NOT OWNED base::WeakPtrFactory weak_factory_{this}; }; @@ -165,6 +174,24 @@ void TipMessageHandler::RegisterMessages() { &TipMessageHandler::GetReconcileStamp, base::Unretained(this))); + web_ui()->RegisterMessageCallback( + "getAutoContributeAmount", + base::BindRepeating(&TipMessageHandler::GetAutoContributeAmount, + base::Unretained(this))); + + web_ui()->RegisterMessageCallback( + "setAutoContributeAmount", + base::BindRepeating(&TipMessageHandler::SetAutoContributeAmount, + base::Unretained(this))); + + web_ui()->RegisterMessageCallback( + "getAdsPerHour", base::BindRepeating(&TipMessageHandler::GetAdsPerHour, + base::Unretained(this))); + + web_ui()->RegisterMessageCallback( + "setAdsPerHour", base::BindRepeating(&TipMessageHandler::SetAdsPerHour, + base::Unretained(this))); + web_ui()->RegisterMessageCallback( "tweetTip", base::BindRepeating( @@ -238,14 +265,19 @@ void TipMessageHandler::OnUnblindedTokensReady( } void TipMessageHandler::DialogReady(const base::ListValue* args) { - // Initialize rewards service pointer on first "dialogReady" message + Profile* profile = Profile::FromWebUI(web_ui()); + if (!rewards_service_) { - Profile* profile = Profile::FromWebUI(web_ui()); rewards_service_ = RewardsServiceFactory::GetForProfile(profile); if (rewards_service_) { rewards_service_->AddObserver(this); } } + + if (!ads_service_) { + ads_service_ = brave_ads::AdsServiceFactory::GetForProfile(profile); + } + AllowJavascript(); if (rewards_service_ && rewards_service_->IsInitialized()) { FireWebUIListener("rewardsInitialized"); @@ -338,6 +370,47 @@ void TipMessageHandler::GetReconcileStamp(const base::ListValue* args) { weak_factory_.GetWeakPtr())); } +void TipMessageHandler::GetAutoContributeAmount(const base::ListValue* args) { + if (!rewards_service_) { + return; + } + + rewards_service_->GetAutoContributionAmount( + base::Bind(&TipMessageHandler::GetAutoContributeAmountCallback, + weak_factory_.GetWeakPtr())); +} + +void TipMessageHandler::SetAutoContributeAmount(const base::ListValue* args) { + CHECK_EQ(args->GetSize(), 1U); + double amount = args->GetList()[0].GetDouble(); + if (!rewards_service_ || amount < 0) { + return; + } + AllowJavascript(); + rewards_service_->SetAutoContributionAmount(amount); + FireWebUIListener("autoContributeAmountUpdated", base::Value(amount)); +} + +void TipMessageHandler::GetAdsPerHour(const base::ListValue* args) { + if (!ads_service_) { + return; + } + AllowJavascript(); + double adsPerHour = static_cast(ads_service_->GetAdsPerHour()); + FireWebUIListener("adsPerHourUpdated", base::Value(adsPerHour)); +} + +void TipMessageHandler::SetAdsPerHour(const base::ListValue* args) { + CHECK_EQ(args->GetSize(), 1U); + const double adsPerHour = args->GetList()[0].GetDouble(); + if (!ads_service_ || adsPerHour < 0) { + return; + } + AllowJavascript(); + ads_service_->SetAdsPerHour(adsPerHour); + FireWebUIListener("adsPerHourUpdated", base::Value(adsPerHour)); +} + void TipMessageHandler::TweetTip(const base::ListValue* args) { CHECK_EQ(args->GetSize(), 2U); const std::string name = args->GetList()[0].GetString(); @@ -412,9 +485,15 @@ void TipMessageHandler::GetRewardsParametersCallback( monthly_choices.Append(item); } + base::Value ac_choices(base::Value::Type::LIST); + for (const auto& item : parameters->auto_contribute_choices) { + ac_choices.Append(item); + } + data.SetDoubleKey("rate", parameters->rate); data.SetKey("tipChoices", std::move(tip_choices)); data.SetKey("monthlyTipChoices", std::move(monthly_choices)); + data.SetKey("autoContributeChoices", std::move(ac_choices)); } FireWebUIListener("rewardsParametersUpdated", data); @@ -480,6 +559,13 @@ void TipMessageHandler::GetReconcileStampCallback(uint64_t reconcile_stamp) { FireWebUIListener("reconcileStampUpdated", base::Value(stamp)); } +void TipMessageHandler::GetAutoContributeAmountCallback(double amount) { + if (!IsJavascriptAllowed()) { + return; + } + FireWebUIListener("autoContributeAmountUpdated", base::Value(amount)); +} + void TipMessageHandler::GetShareURLCallback(const std::string& url) { GURL gurl(url); if (!gurl.is_valid()) { diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc index 9c0ce609d12c..738fd14cb4f1 100644 --- a/browser/ui/webui/brave_webui_source.cc +++ b/browser/ui/webui/brave_webui_source.cc @@ -630,6 +630,10 @@ void CustomizeWebUIHTMLSource(const std::string &name, { "onboardingEarnText", IDS_BRAVE_REWARDS_ONBOARDING_EARN_TEXT }, { "onboardingPromoHeader", IDS_BRAVE_REWARDS_ONBOARDING_PROMO_HEADER }, { "onboardingPromoText", IDS_BRAVE_REWARDS_ONBOARDING_PROMO_TEXT }, + { "onboardingSetupAdsHeader", IDS_BRAVE_REWARDS_ONBOARDING_SETUP_ADS_HEADER }, // NOLINT + { "onboardingSetupAdsSubheader", IDS_BRAVE_REWARDS_ONBOARDING_SETUP_ADS_SUBHEADER }, // NOLINT + { "onboardingSetupContributeHeader", IDS_BRAVE_REWARDS_ONBOARDING_SETUP_CONTRIBUTE_HEADER }, // NOLINT + { "onboardingSetupContributeSubheader", IDS_BRAVE_REWARDS_ONBOARDING_SETUP_CONTRIBUTE_SUBHEADER }, // NOLINT { "onboardingStartUsingRewards", IDS_BRAVE_REWARDS_ONBOARDING_START_USING_REWARDS }, // NOLINT { "onboardingTakeTour", IDS_BRAVE_REWARDS_ONBOARDING_TAKE_TOUR }, { "onboardingTerms", IDS_BRAVE_REWARDS_ONBOARDING_TERMS }, @@ -651,6 +655,8 @@ void CustomizeWebUIHTMLSource(const std::string &name, { "onboardingPanelTippingText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_TIPPING_TEXT }, // NOLINT { "onboardingPanelRedeemHeader", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_REDEEM_HEADER }, // NOLINT { "onboardingPanelRedeemText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_REDEEM_TEXT }, // NOLINT + { "onboardingPanelSetupHeader", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_SETUP_HEADER }, // NOLINT + { "onboardingPanelSetupText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_SETUP_TEXT }, // NOLINT { "onboardingPanelCompleteHeader", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_COMPLETE_HEADER }, // NOLINT { "onboardingPanelCompleteText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_COMPLETE_TEXT }, // NOLINT { "oneTime", IDS_BRAVE_UI_ONE_TIME }, @@ -883,6 +889,10 @@ void CustomizeWebUIHTMLSource(const std::string &name, { "notEnoughTokensLink", IDS_BRAVE_UI_NOT_ENOUGH_TOKENS_LINK }, { "on", IDS_BRAVE_UI_ON }, { "onboardingMaybeLater", IDS_BRAVE_REWARDS_ONBOARDING_MAYBE_LATER }, + { "onboardingSetupAdsHeader", IDS_BRAVE_REWARDS_ONBOARDING_SETUP_ADS_HEADER }, // NOLINT + { "onboardingSetupAdsSubheader", IDS_BRAVE_REWARDS_ONBOARDING_SETUP_ADS_SUBHEADER }, // NOLINT + { "onboardingSetupContributeHeader", IDS_BRAVE_REWARDS_ONBOARDING_SETUP_CONTRIBUTE_HEADER }, // NOLINT + { "onboardingSetupContributeSubheader", IDS_BRAVE_REWARDS_ONBOARDING_SETUP_CONTRIBUTE_SUBHEADER }, // NOLINT { "onboardingStartUsingRewards", IDS_BRAVE_REWARDS_ONBOARDING_START_USING_REWARDS }, // NOLINT { "onboardingTakeTour", IDS_BRAVE_REWARDS_ONBOARDING_TAKE_TOUR }, { "onboardingTerms", IDS_BRAVE_REWARDS_ONBOARDING_TERMS }, @@ -906,6 +916,8 @@ void CustomizeWebUIHTMLSource(const std::string &name, { "onboardingPanelTippingText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_TIPPING_TEXT }, // NOLINT { "onboardingPanelRedeemHeader", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_REDEEM_HEADER }, // NOLINT { "onboardingPanelRedeemText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_REDEEM_TEXT }, // NOLINT + { "onboardingPanelSetupHeader", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_SETUP_HEADER }, // NOLINT + { "onboardingPanelSetupText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_SETUP_TEXT }, // NOLINT { "onboardingPanelCompleteHeader", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_COMPLETE_HEADER }, // NOLINT { "onboardingPanelCompleteText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_COMPLETE_TEXT }, // NOLINT { "oneTimeTip", IDS_BRAVE_REWARDS_TIP_ONE_TIME_TIP }, diff --git a/common/extensions/api/brave_rewards.json b/common/extensions/api/brave_rewards.json index 7005f4f99328..88f5e29c997b 100644 --- a/common/extensions/api/brave_rewards.json +++ b/common/extensions/api/brave_rewards.json @@ -625,6 +625,14 @@ "type": "number", "minimum": 0 } + }, + "autoContributeChoices": { + "type": "array", + "description": "A list of auto-contribute amount options", + "items": { + "type": "number", + "minimum": 0 + } } } } @@ -1210,6 +1218,66 @@ "name": "result" } ] + }, + { + "name": "getPrefs", + "type": "function", + "description": "Gets rewards preferences for the current profile", + "parameters": [ + { + "type": "function", + "name": "callback", + "parameters": [ + { + "type": "object", + "name": "prefs", + "properties": { + "autoContributeEnabled": { + "type": "boolean" + }, + "autoContributeAmount": { + "type": "number" + }, + "adsEnabled": { + "type": "boolean" + }, + "adsPerHour": { + "type": "integer" + } + } + } + ] + } + ] + }, + { + "name": "updatePrefs", + "type": "function", + "description": "Updates rewards preferences for the current profile", + "parameters": [ + { + "type": "object", + "name": "prefs", + "properties": { + "autoContributeEnabled": { + "type": "boolean", + "optional": true + }, + "autoContributeAmount": { + "type": "number", + "optional": true + }, + "adsEnabled": { + "type": "boolean", + "optional": true + }, + "adsPerHour": { + "type": "integer", + "optional": true + } + } + } + ] } ] } 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 ba59fe911e29..66f3be0f5cf5 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 @@ -635,6 +635,22 @@ "message": "Earn tokens by viewing privacy-respecting ads and support your favorite sites and content creators automatically.", "description": "" }, + "onboardingSetupAdsHeader": { + "message": "How often do you want to see ads?", + "description": "" + }, + "onboardingSetupAdsSubheader": { + "message": "(ads per hour)", + "description": "" + }, + "onboardingSetupContributeHeader": { + "message": "How much monthly support do you want to give to your favorite creators?", + "description": "" + }, + "onboardingSetupContributeSubheader": { + "message": "(from your ads earnings)", + "description": "" + }, "onboardingStartUsingRewards": { "message": "Start using Brave Rewards", "description": "" @@ -733,6 +749,14 @@ "message": "Tokens can be used beyond supporting creators. You can buy digital content and other goods as merchants come onboard.", "description": "" }, + "onboardingPanelSetupHeader": { + "message": "Lastly, let’s get you set up on the basic settings", + "description": "" + }, + "onboardingPanelSetupText": { + "message": "You can change this later.", + "description": "" + }, "onboardingPanelCompleteHeader": { "message": "Woohoo, you’re all set!", "description": "" diff --git a/components/brave_rewards/resources/extension/brave_rewards/actions/rewards_panel_actions.ts b/components/brave_rewards/resources/extension/brave_rewards/actions/rewards_panel_actions.ts index da501406a921..219ec408e6b2 100644 --- a/components/brave_rewards/resources/extension/brave_rewards/actions/rewards_panel_actions.ts +++ b/components/brave_rewards/resources/extension/brave_rewards/actions/rewards_panel_actions.ts @@ -149,3 +149,9 @@ export const onCompleteReset = (success: boolean) => action(types.ON_COMPLETE_RE }) export const initialized = () => action(types.INITIALIZED) + +export const updatePrefs = (prefs: Partial) => + action(types.UPDATE_PREFS, { prefs }) + +export const onGetPrefs = (prefs: chrome.braveRewards.RewardsPrefs) => + action(types.ON_GET_PREFS, { prefs }) diff --git a/components/brave_rewards/resources/extension/brave_rewards/background/reducers/rewards_panel_reducer.ts b/components/brave_rewards/resources/extension/brave_rewards/background/reducers/rewards_panel_reducer.ts index 20f7f0099271..b375999992ea 100644 --- a/components/brave_rewards/resources/extension/brave_rewards/background/reducers/rewards_panel_reducer.ts +++ b/components/brave_rewards/resources/extension/brave_rewards/background/reducers/rewards_panel_reducer.ts @@ -491,6 +491,29 @@ export const rewardsPanelReducer: Reducer = } break } + case types.ON_GET_PREFS: { + const { prefs } = action.payload + state = { ...state } + state.adsPerHour = Number(prefs.adsPerHour) + state.autoContributeAmount = Number(prefs.autoContributeAmount) + break + } + case types.UPDATE_PREFS: { + const { prefs } = action.payload + chrome.braveRewards.updatePrefs(prefs) + state = { ...state } + for (let [key, value] of Object.entries(prefs)) { + switch (key) { + case 'adsPerHour': + state.adsPerHour = Number(value) + break + case 'autoContributeAmount': + state.autoContributeAmount = Number(value) + break + } + } + break + } } return state } diff --git a/components/brave_rewards/resources/extension/brave_rewards/background/storage.ts b/components/brave_rewards/resources/extension/brave_rewards/background/storage.ts index ac64c5a02f82..472232f99779 100644 --- a/components/brave_rewards/resources/extension/brave_rewards/background/storage.ts +++ b/components/brave_rewards/resources/extension/brave_rewards/background/storage.ts @@ -6,7 +6,8 @@ export const defaultState: RewardsExtension.State = { publishers: {}, parameters: { monthlyTipChoices: [], - rate: 0 + rate: 0, + autoContributeChoices: [5, 10, 15, 20] }, balanceReport: { ads: 0.0, @@ -27,7 +28,9 @@ export const defaultState: RewardsExtension.State = { wallets: {} }, initializing: true, - showOnboarding: false + showOnboarding: false, + adsPerHour: 1, + autoContributeAmount: 0 } export const load = (): RewardsExtension.State => { diff --git a/components/brave_rewards/resources/extension/brave_rewards/components/panel.style.ts b/components/brave_rewards/resources/extension/brave_rewards/components/panel.style.ts new file mode 100644 index 000000000000..cc49edcab126 --- /dev/null +++ b/components/brave_rewards/resources/extension/brave_rewards/components/panel.style.ts @@ -0,0 +1,12 @@ +/* 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 styled from 'styled-components' + +// The rewards tour modal currently taller than the panel. This spacer +// element will insert veritical space to expand the panel height by the +// required amount. +export const rewardsTourSpacer = styled.div` + height: 40px; +` 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 49a8036a39e4..e7358b756297 100644 --- a/components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx +++ b/components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx @@ -17,6 +17,8 @@ import { RewardsOptInModal, RewardsTourModal } from '../../../shared/components/ import * as rewardsPanelActions from '../actions/rewards_panel_actions' import * as utils from '../utils' +import * as style from './panel.style' + import { getMessage } from '../background/api/locale_api' interface Props extends RewardsExtension.ComponentProps { @@ -27,6 +29,7 @@ interface Props extends RewardsExtension.ComponentProps { interface State { showSummary: boolean showRewardsTour: boolean + firstTimeSetup: boolean publisherKey: string | null refreshingPublisher: boolean publisherRefreshed: boolean @@ -41,6 +44,7 @@ export class Panel extends React.Component { this.state = { showSummary: true, showRewardsTour: false, + firstTimeSetup: false, publisherKey: null, refreshingPublisher: false, publisherRefreshed: false, @@ -101,6 +105,10 @@ export class Panel extends React.Component { this.props.actions.onShouldShowOnboarding(showOnboarding) }) + chrome.braveRewards.getPrefs((prefs) => { + this.props.actions.onGetPrefs(prefs) + }) + this.actions.fetchPromotions() chrome.braveRewards.getBalanceReport(new Date().getMonth() + 1, new Date().getFullYear(), @@ -655,11 +663,16 @@ export class Panel extends React.Component { } showOnboarding () { - const { showOnboarding } = this.props.rewardsPanelData + const { + showOnboarding, + parameters, + adsPerHour, + autoContributeAmount + } = this.props.rewardsPanelData if (this.state.showRewardsTour) { const onDone = () => { - this.setState({ showRewardsTour: false }) + this.setState({ showRewardsTour: false, firstTimeSetup: false }) } const onClose = () => { @@ -669,12 +682,28 @@ export class Panel extends React.Component { } } + const onAdsPerHourChanged = (adsPerHour: number) => { + this.actions.updatePrefs({ adsPerHour }) + } + + const onAcAmountChanged = (autoContributeAmount: number) => { + this.actions.updatePrefs({ autoContributeAmount }) + } + return ( - + + + ) } @@ -688,7 +717,14 @@ export class Panel extends React.Component { const onEnable = () => { this.actions.saveOnboardingResult('opted-in') - onTakeTour() + + // Ensure that we have the latest version of prefs when displaying + // the rewards tour + chrome.braveRewards.getPrefs((prefs) => { + this.actions.onGetPrefs(prefs) + }) + + this.setState({ showRewardsTour: true, firstTimeSetup: true }) } const onClose = () => { diff --git a/components/brave_rewards/resources/extension/brave_rewards/constants/rewards_panel_types.ts b/components/brave_rewards/resources/extension/brave_rewards/constants/rewards_panel_types.ts index 929d5133639c..686ab55ed2aa 100644 --- a/components/brave_rewards/resources/extension/brave_rewards/constants/rewards_panel_types.ts +++ b/components/brave_rewards/resources/extension/brave_rewards/constants/rewards_panel_types.ts @@ -35,7 +35,9 @@ export const enum types { ON_EXTERNAL_WALLET = '@@rewards_panel/ON_EXTERNAL_WALLET', ON_ALL_NOTIFICATIONS_DELETED = '@@rewards_panel/ON_ALL_NOTIFICATIONS_DELETED', ON_COMPLETE_RESET = '@@rewards_panel/ON_COMPLETE_RESET', - INITIALIZED = '@@rewards_panel/INITIALIZED' + INITIALIZED = '@@rewards_panel/INITIALIZED', + ON_GET_PREFS = '@@rewards_panel/ON_GET_PREFS', + UPDATE_PREFS = '@@rewards_panel/UPDATE_PREFS' } // Note: This declaration must match the RewardsNotificationType enum in diff --git a/components/brave_rewards/resources/page/components/settingsPage.tsx b/components/brave_rewards/resources/page/components/settingsPage.tsx index a59eb999fee8..321c1ae72bc4 100644 --- a/components/brave_rewards/resources/page/components/settingsPage.tsx +++ b/components/brave_rewards/resources/page/components/settingsPage.tsx @@ -35,6 +35,7 @@ interface Props extends Rewards.ComponentProps { interface State { redirectModalDisplayed: 'hide' | 'show' showRewardsTour: boolean + firstTimeSetup: boolean } class SettingsPage extends React.Component { @@ -44,7 +45,8 @@ class SettingsPage extends React.Component { super(props) this.state = { redirectModalDisplayed: 'hide', - showRewardsTour: false + showRewardsTour: false, + firstTimeSetup: false } } @@ -155,7 +157,7 @@ class SettingsPage extends React.Component { if (pathname === '/enable') { this.actions.saveOnboardingResult('opted-in') - this.setState({ showRewardsTour: true }) + this.setState({ showRewardsTour: true, firstTimeSetup: true }) window.history.replaceState({}, '', '/') return } @@ -334,18 +336,37 @@ class SettingsPage extends React.Component { return null } - const { showOnboarding } = this.props.rewardsData + const { + adsData, + contributionMonthly, + parameters, + ui + } = this.props.rewardsData const onDone = () => { - this.setState({ showRewardsTour: false }) + this.setState({ showRewardsTour: false, firstTimeSetup: false }) + } + + const onAdsPerHourChanged = (adsPerHour: number) => { + this.actions.onAdsSettingSave('adsPerHour', adsPerHour) + } + + const onAcAmountChanged = (amount: number) => { + this.actions.onSettingSave('contributionMonthly', amount) } return ( ) } @@ -360,7 +381,7 @@ class SettingsPage extends React.Component { const onEnable = () => { this.actions.saveOnboardingResult('opted-in') - onTakeTour() + this.setState({ showRewardsTour: true, firstTimeSetup: true }) } return ( diff --git a/components/brave_rewards/resources/page/reducers/rewards_reducer.ts b/components/brave_rewards/resources/page/reducers/rewards_reducer.ts index 81d193945008..2b656cd344da 100644 --- a/components/brave_rewards/resources/page/reducers/rewards_reducer.ts +++ b/components/brave_rewards/resources/page/reducers/rewards_reducer.ts @@ -214,11 +214,12 @@ const rewardsReducer: Reducer = (state: Rewards.State const key = action.payload.key const value = action.payload.value if (key) { - state[key] = value chrome.send('brave_rewards.saveAdsSetting', [key, value.toString()]) - if (key === 'adsEnabledMigrated') { state.enabledAdsMigrated = true + } else { + state.adsData = { ...(state.adsData || defaultState.adsData) } + state.adsData[key] = value } } break diff --git a/components/brave_rewards/resources/shared/components/onboarding/rewards_tour.style.ts b/components/brave_rewards/resources/shared/components/onboarding/rewards_tour.style.ts index 6d06a0352e91..203e00219ff3 100644 --- a/components/brave_rewards/resources/shared/components/onboarding/rewards_tour.style.ts +++ b/components/brave_rewards/resources/shared/components/onboarding/rewards_tour.style.ts @@ -14,7 +14,7 @@ import completedImage from './assets/tour_completed.svg' export const root = styled.div` font-family: var(--brave-font-heading); - height: 100%; + min-height: 388px; text-align: center; display: grid; grid-template-columns: 1fr; @@ -27,11 +27,12 @@ export const root = styled.div` "nav"; &.tour-wide { + min-height: 300px; padding: 0 20px; text-align: left; column-gap: 60px; grid-template-columns: 1fr 1fr; - grid-template-rows: auto 1fr 96px; + grid-template-rows: auto 1fr 50px; grid-template-areas: "header graphic" "text graphic" @@ -55,37 +56,51 @@ export const stepText = styled.div` color: var(--brave-palette-neutral700); ` -export const stepGraphic = styled.div` +export const stepContent = styled.div` + text-align: center; grid-area: graphic; - margin: 10px 0; + margin: 10px 0 12px; +` + +export const stepGraphic = styled.div` + height: 100%; background-repeat: no-repeat; background-position: center; - background-sizing: contain; + margin-left: auto; + margin-right: auto; &.tour-graphic-welcome { background-image: url('${batEcosystemImage}'); + max-width: 275px; } &.tour-graphic-ads { background-image: url('${braveAdsImage}'); + max-width: 275px; } &.tour-graphic-schedule { background-image: url('${batScheduleImage}'); + max-width: 250px; } &.tour-graphic-ac { background-image: url('${acImage}'); + max-width: 230px; } &.tour-graphic-tipping { background-image: url('${tippingImage}'); + max-width: 230px; } &.tour-graphic-redeem { background-image: url('${redeemImage}'); + max-width: 200px; } + &.tour-graphic-setup {} + &.tour-graphic-complete { background-image: url('${completedImage}'); background-size: 89px 89px; diff --git a/components/brave_rewards/resources/shared/components/onboarding/rewards_tour.tsx b/components/brave_rewards/resources/shared/components/onboarding/rewards_tour.tsx index 5f77a21048c5..1c29c912ee74 100644 --- a/components/brave_rewards/resources/shared/components/onboarding/rewards_tour.tsx +++ b/components/brave_rewards/resources/shared/components/onboarding/rewards_tour.tsx @@ -6,31 +6,26 @@ import * as React from 'react' import { LocaleContext } from '../../lib/locale_context' +import { RewardsTourProps } from './rewards_tour_props' import { TourNavigation } from './tour_navigation' import { TourStepLinks } from './tour_step_links' import { getTourPanels } from './rewards_tour_panels' import * as style from './rewards_tour.style' -interface Props { - layout?: 'narrow' | 'wide' - rewardsEnabled: boolean - onDone: () => void -} - -export function RewardsTour (props: Props) { +export function RewardsTour (props: RewardsTourProps) { const locale = React.useContext(LocaleContext) const [currentStep, setCurrentStep] = React.useState(0) - const stepPanels = getTourPanels() + const stepPanels = getTourPanels(props) if (stepPanels.length === 0 || currentStep >= stepPanels.length) { return null } - const panel = stepPanels[currentStep](locale) + const panel = stepPanels[currentStep](locale, props) const onSkip = () => { - if (props.rewardsEnabled) { + if (props.firstTimeSetup) { setCurrentStep(stepPanels.length - 1) } else { props.onDone() @@ -53,7 +48,7 @@ export function RewardsTour (props: Props) { layout={props.layout} stepCount={stepPanels.length} currentStep={currentStep} - rewardsEnabled={props.rewardsEnabled} + firstTimeSetup={props.firstTimeSetup} onSelectStep={setCurrentStep} onDone={props.onDone} onSkip={onSkip} @@ -65,7 +60,11 @@ export function RewardsTour (props: Props) { {panel.heading} {panel.text} - + + + {panel.content} + + { props.layout === 'wide' ? <>{tourNav}{stepLinks} diff --git a/components/brave_rewards/resources/shared/components/onboarding/rewards_tour_modal.style.ts b/components/brave_rewards/resources/shared/components/onboarding/rewards_tour_modal.style.ts index e55cef1aa85a..db2f0759705c 100644 --- a/components/brave_rewards/resources/shared/components/onboarding/rewards_tour_modal.style.ts +++ b/components/brave_rewards/resources/shared/components/onboarding/rewards_tour_modal.style.ts @@ -4,21 +4,19 @@ import styled from 'styled-components' -import modalBackground from './assets/opt_in_modal_bg.svg' - export const root = styled.div` max-width: 335px; + min-height: 530px; padding: 17px; background-color: var(--brave-palette-white); - background-image: url(${modalBackground}); - background-repeat: no-repeat; - background-position: 4px -11px; - background-size: auto 200px; box-shadow: 0px 0px 16px rgba(99, 105, 110, 0.2); border-radius: 8px; + display: flex; + flex-direction: column; &.tour-modal-wide { max-width: 710px; + min-height: 450px; padding: 25px; background: linear-gradient(to right, #fff, #fff 50%, #f8f9fa 50%); } @@ -26,11 +24,11 @@ export const root = styled.div` export const content = styled.div` padding: 11px 5px 0; - height: 410px; + flex: 1 1 auto; + display: flex; .tour-modal-wide > & { - height: 300px; - margin-top: 35px; - margin-bottom: 22px; + margin-top: 20px; + margin-bottom: 10px; } ` diff --git a/components/brave_rewards/resources/shared/components/onboarding/rewards_tour_modal.tsx b/components/brave_rewards/resources/shared/components/onboarding/rewards_tour_modal.tsx index 7b60a69599e0..a9326eb575b5 100644 --- a/components/brave_rewards/resources/shared/components/onboarding/rewards_tour_modal.tsx +++ b/components/brave_rewards/resources/shared/components/onboarding/rewards_tour_modal.tsx @@ -6,13 +6,11 @@ import * as React from 'react' import { Modal, ModalCloseButton } from '../modal' import { RewardsTour } from './rewards_tour' +import { RewardsTourProps } from './rewards_tour_props' import * as style from './rewards_tour_modal.style' -interface Props { - layout?: 'narrow' | 'wide' - rewardsEnabled: boolean +interface Props extends RewardsTourProps { onClose: () => void - onDone: () => void } export function RewardsTourModal (props: Props) { @@ -21,11 +19,7 @@ export function RewardsTourModal (props: Props) { - + diff --git a/components/brave_rewards/resources/shared/components/onboarding/rewards_tour_panels.style.ts b/components/brave_rewards/resources/shared/components/onboarding/rewards_tour_panels.style.ts new file mode 100644 index 000000000000..12fec05f4463 --- /dev/null +++ b/components/brave_rewards/resources/shared/components/onboarding/rewards_tour_panels.style.ts @@ -0,0 +1,12 @@ +/* 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 styled from 'styled-components' + +export const formText = styled.div` + color: var(--brave-color-brandBat); + font-size: 14px; + line-height: 20px; + margin-top: -5px; +` diff --git a/components/brave_rewards/resources/shared/components/onboarding/rewards_tour_panels.tsx b/components/brave_rewards/resources/shared/components/onboarding/rewards_tour_panels.tsx index 195b0654075a..81c792a4be48 100644 --- a/components/brave_rewards/resources/shared/components/onboarding/rewards_tour_panels.tsx +++ b/components/brave_rewards/resources/shared/components/onboarding/rewards_tour_panels.tsx @@ -5,11 +5,16 @@ import * as React from 'react' import { Locale } from '../../lib/locale_context' +import { RewardsTourProps } from './rewards_tour_props' +import { SetupForm } from './setup_form' -type TourPanelFunction = (locale: Locale) => ({ +import * as style from './rewards_tour_panels.style' + +type TourPanelFunction = (locale: Locale, props: RewardsTourProps) => ({ id: string heading: React.ReactNode text: React.ReactNode + content?: React.ReactNode }) function panelWelcome (locale: Locale) { @@ -66,6 +71,18 @@ function panelRedeem (locale: Locale) { } } +function panelSetup (locale: Locale, props: RewardsTourProps) { + const { getString } = locale + return { + id: 'setup', + heading: getString('onboardingPanelSetupHeader'), + text: ( + {getString('onboardingPanelSetupText')} + ), + content: + } +} + function panelComplete (locale: Locale) { const { getString } = locale return { @@ -75,7 +92,7 @@ function panelComplete (locale: Locale) { } } -export function getTourPanels (): TourPanelFunction[] { +export function getTourPanels (props: RewardsTourProps): TourPanelFunction[] { return [ panelWelcome, panelAds, @@ -83,6 +100,7 @@ export function getTourPanels (): TourPanelFunction[] { panelAC, panelTipping, panelRedeem, + ...(props.firstTimeSetup ? [panelSetup] : []), panelComplete ] } diff --git a/components/brave_rewards/resources/shared/components/onboarding/rewards_tour_props.ts b/components/brave_rewards/resources/shared/components/onboarding/rewards_tour_props.ts new file mode 100644 index 000000000000..69c38d68d1ef --- /dev/null +++ b/components/brave_rewards/resources/shared/components/onboarding/rewards_tour_props.ts @@ -0,0 +1,15 @@ +/* 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/. */ + +export interface RewardsTourProps { + layout?: 'narrow' | 'wide' + firstTimeSetup: boolean + onlyAnonWallet?: boolean + adsPerHour: number + autoContributeAmount: number + autoContributeAmountOptions: number[] + onAdsPerHourChanged: (adsPerHour: number) => void + onAutoContributeAmountChanged: (amount: number) => void + onDone: () => void +} diff --git a/components/brave_rewards/resources/shared/components/onboarding/setup_form.style.ts b/components/brave_rewards/resources/shared/components/onboarding/setup_form.style.ts new file mode 100644 index 000000000000..e4c582d16e27 --- /dev/null +++ b/components/brave_rewards/resources/shared/components/onboarding/setup_form.style.ts @@ -0,0 +1,81 @@ +/* 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 styled from 'styled-components' + +export const panelText = styled.div` + color: var(--brave-color-brandBat); + font-size: 14px; + line-height: 20px; + margin-top: -5px; +` + +export const root = styled.div` +` + +export const section = styled.div` + margin-top: 30px; + font-size: 14px; + line-height: 21px; + + &:first-of-type { + margin-top: 0px; + } +` + +export const label = styled.div` + color: var(--brave-palette-neutral900); +` + +export const sublabel = styled.div` + color: var(--brave-palette-neutral600); +` + +export const optionBar = styled.div` + margin-top: 10px; + background: rgba(241, 236, 255, 0.5); + border: 2px solid var(--brave-palette-purple300); + border-radius: 2px; + display: flex; + + button { + margin: 3px; + flex: 1 1 auto; + font-weight: 600; + font-size: 18px; + line-height: 27px; + color: var(--brave-palette-neutral700); + border: 0; + border-radius: 2px; + background: none; + cursor: pointer; + + &.selected { + color: var(--brave-palette-white); + background: var(--brave-palette-purple400); + cursor: default; + + * { + color: var(--brave-palette-white); + } + } + } + + button.large-text { + font-size: 22px; + line-height: 39px; + } +` + +export const acAmount = styled.span` + font-weight: 600; + font-size: 18px; + line-height: 40px; +` + +export const acCurrency = styled.span` + font-weight: normal; + font-size: 12px; + line-height: 18px; +` diff --git a/components/brave_rewards/resources/shared/components/onboarding/setup_form.tsx b/components/brave_rewards/resources/shared/components/onboarding/setup_form.tsx new file mode 100644 index 000000000000..ba7a874b00bd --- /dev/null +++ b/components/brave_rewards/resources/shared/components/onboarding/setup_form.tsx @@ -0,0 +1,97 @@ +/* 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 { LocaleContext } from '../../lib/locale_context' +import { RewardsTourProps } from './rewards_tour_props' +import * as style from './setup_form.style' + +const adsPerHourOptions = [1, 2, 3, 4, 5] + +function getAutoContributeOptions (options: number[], initialAmount: number) { + // Create a sorted list of options containing |initialAmount| + const set = new Set(options) + set.add(initialAmount) + const list = [...set].sort((a, b) => a - b) + + // Return a list with at most 4 options, with the initial amount + // at the 3rd position if possible + const pos = list.indexOf(initialAmount) + let start = 0 + if (pos > 2) { + start = Math.min(pos - 2, Math.max(0, list.length - 4)) + } + return list.slice(start, start + 4) +} + +export function SetupForm (props: RewardsTourProps) { + const { getString } = React.useContext(LocaleContext) + const [initialAmount] = React.useState(props.autoContributeAmount) + const acOptions = getAutoContributeOptions( + props.autoContributeAmountOptions, + initialAmount) + return ( + + + + {getString('onboardingSetupAdsHeader')} + + + {getString('onboardingSetupAdsSubheader')} + + + { + adsPerHourOptions.map((value) => { + const className = 'large-text ' + + (value === props.adsPerHour ? 'selected' : '') + const onClick = () => { + if (value !== props.adsPerHour) { + props.onAdsPerHourChanged(value) + } + } + return ( + + ) + }) + } + + + + + {getString('onboardingSetupContributeHeader')} + + + {getString('onboardingSetupContributeSubheader')} + + + { + acOptions.map((amount) => { + const className = amount === props.autoContributeAmount + ? 'selected' + : '' + const onClick = () => { + if (amount !== props.autoContributeAmount) { + props.onAutoContributeAmountChanged(amount) + } + } + return ( + + ) + }) + } + + + + ) +} diff --git a/components/brave_rewards/resources/shared/components/onboarding/stories/index.tsx b/components/brave_rewards/resources/shared/components/onboarding/stories/index.tsx index 0e7b960a5c1b..549ec77bc1b4 100644 --- a/components/brave_rewards/resources/shared/components/onboarding/stories/index.tsx +++ b/components/brave_rewards/resources/shared/components/onboarding/stories/index.tsx @@ -45,27 +45,38 @@ function StoryWrapper (props: StoryWrapperProps) { ) } +function getRewardsTourProps () { + return { + firstTimeSetup: true, + onlyAnonWallet: false, + adsPerHour: 3, + autoContributeAmount: 15, + autoContributeAmountOptions: [5, 10, 15, 20, 25, 50, 100], + onAdsPerHourChanged: actionLogger('onAdsPerHourChanged'), + onAutoContributeAmountChanged: actionLogger('onAcAmountChanged'), + onDone: actionLogger('onDone') + } +} + storiesOf('Rewards/Onboarding', module) .add('Tour Modal', () => { return ( - + ) }) .add('Tour Modal (Wide)', () => { return ( - + ) }) diff --git a/components/brave_rewards/resources/shared/components/onboarding/stories/locale_strings.ts b/components/brave_rewards/resources/shared/components/onboarding/stories/locale_strings.ts index 64c3ffd79735..e08b2c09c301 100644 --- a/components/brave_rewards/resources/shared/components/onboarding/stories/locale_strings.ts +++ b/components/brave_rewards/resources/shared/components/onboarding/stories/locale_strings.ts @@ -1,4 +1,7 @@ export const localeStrings = { + bat: 'BAT', + bap: 'BAP', + onboardingBraveRewards: 'Brave Rewards', onboardingDetailLinks: '$1Take a quick tour$2 or $3learn more$4 for details.', onboardingEarnHeader: 'Earn Tokens & Give Back', @@ -6,6 +9,10 @@ export const localeStrings = { onboardingMaybeLater: 'Maybe later', onboardingPromoHeader: 'Need a refresher on Rewards?', onboardingPromoText: 'Take a quick tour to brush up on how it works to go down in history as a Rewards rockstar!', + onboardingSetupAdsHeader: 'How often do you want to see ads?', + onboardingSetupAdsSubheader: '(ads per hour)', + onboardingSetupContributeHeader: 'How much monthly support do you want to give to your favorite creators?', + onboardingSetupContributeSubheader: '(from your ads earnings)', onboardingStartUsingRewards: 'Start using Brave Rewards', onboardingTakeTour: 'Take a quick tour', onboardingTerms: 'By proceeding, you agree to the $1Terms of Service$2 and $3Privacy Policy$4.', @@ -31,6 +38,8 @@ export const localeStrings = { onboardingPanelTippingText: 'Tipping is a way to personally encourage and support content or creators that you love. Get tippin!', onboardingPanelRedeemHeader: 'What can you do with tokens?', onboardingPanelRedeemText: 'Tokens can be used beyond supporting creators. You can buy digital content and other goods as merchants come onboard.', + onboardingPanelSetupHeader: 'Lastly, let’s get you set up on the basic settings', + onboardingPanelSetupText: 'You can change this later.', onboardingPanelCompleteHeader: 'Woohoo, you’re all set!', onboardingPanelCompleteText: 'By using Brave Rewards you are helping make the web a better place for everyone. And that’s awesome!' } diff --git a/components/brave_rewards/resources/shared/components/onboarding/tour_navigation.tsx b/components/brave_rewards/resources/shared/components/onboarding/tour_navigation.tsx index c7035eb33367..6cf5c72acc9e 100644 --- a/components/brave_rewards/resources/shared/components/onboarding/tour_navigation.tsx +++ b/components/brave_rewards/resources/shared/components/onboarding/tour_navigation.tsx @@ -12,7 +12,7 @@ import * as style from './tour_navigation.style' interface Props { stepCount: number currentStep: number - rewardsEnabled: boolean + firstTimeSetup: boolean layout?: 'narrow' | 'wide' onSelectStep: (step: number) => void onSkip: () => void @@ -46,7 +46,7 @@ export function TourNavigation (props: Props) { const skipButton = (