Brave VPN card widget in NTP (uplift to 1.74.x) (#26680)

* Merge pull request #26189 from brave/brave_vpn_ntp_widget_demo

Brave VPN card widget in NTP

* Merge pull request #26496 from brave/follow_up_brave_vpn_card

F/U vpn card widgets in NTP

* Merge pull request #26689 from brave/vpn_card_group_policy

Hide NTP VPN card when its group policy is disabled

* Merge pull request #26743 from brave/update_vpn_card_option_image

Updated vpn card option image in NTP

* Merge pull request #26745 from brave/update_vpn_product_title

Update VPN product title at vpn panel

* Merge pull request #26746 from brave/update_trial_url_from_vpn_card

Updated trial url from vpn card

* Merge pull request #26765 from brave/fix_vpn_icon_size_vpn_card

Fixed bottom of vpn icon of vpn card was clipped

browser/brave_content_browser_client.cc

@@ -642,6 +642,12 @@ void BraveContentBrowserClient::RegisterWebUIInterfaceBrokers(
           .Add<brave_new_tab_page::mojom::PageHandlerFactory>()
           .Add<brave_news::mojom::BraveNewsController>();
 
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+  if (brave_vpn::IsBraveVPNFeatureEnabled()) {
+    ntp_registration.Add<brave_vpn::mojom::ServiceHandler>();
+  }
+#endif
+
   if (base::FeatureList::IsEnabled(features::kBraveNtpSearchWidget)) {
     ntp_registration.Add<searchbox::mojom::PageHandler>();
   }

browser/brave_profile_prefs.cc

@@ -38,6 +38,7 @@
 #include "brave/components/brave_shields/content/browser/brave_shields_p3a.h"
 #include "brave/components/brave_shields/core/common/pref_names.h"
 #include "brave/components/brave_sync/brave_sync_prefs.h"
+#include "brave/components/brave_vpn/common/buildflags/buildflags.h"
 #include "brave/components/brave_wallet/browser/brave_wallet_prefs.h"
 #include "brave/components/brave_wayback_machine/buildflags/buildflags.h"
 #include "brave/components/brave_webtorrent/browser/buildflags/buildflags.h"
@@ -367,6 +368,10 @@ void RegisterProfilePrefs(user_prefs::PrefRegistrySyncable* registry) {
   registry->RegisterBooleanPref(kNewTabPageShowBraveTalk, true);
   registry->RegisterBooleanPref(kNewTabPageHideAllWidgets, false);
 
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+  registry->RegisterBooleanPref(kNewTabPageShowBraveVPN, true);
+#endif
+
 // Private New Tab Page
 #if !BUILDFLAG(IS_ANDROID)
   brave_private_new_tab::prefs::RegisterProfilePrefs(registry);

browser/extensions/api/settings_private/brave_prefs_util.cc

@@ -176,6 +176,8 @@ const PrefsUtil::TypedPrefMap& BravePrefsUtil::GetAllowlistedKeys() {
       settings_api::PrefType::kBoolean;
   (*s_brave_allowlist)[kNewTabPageShowBraveTalk] =
       settings_api::PrefType::kBoolean;
+  (*s_brave_allowlist)[kNewTabPageShowBraveVPN] =
+      settings_api::PrefType::kBoolean;
   (*s_brave_allowlist)[kNewTabPageShowsOptions] =
       settings_api::PrefType::kNumber;
 #if BUILDFLAG(ENABLE_EXTENSIONS)

browser/ui/brave_vpn/brave_vpn_controller.cc

@@ -25,9 +25,11 @@ void BraveVPNController::OpenVPNAccountPage() {
   auto* browser = browser_view_->browser();
   auto* profile = browser->profile();
   auto* vpn_service = brave_vpn::BraveVpnServiceFactory::GetForProfile(profile);
-  const auto url =
-      brave_vpn::GetManageUrl(vpn_service->GetCurrentEnvironment());
-  ShowSingletonTab(browser, GURL(url));
+  auto url =
+      GURL(brave_vpn::GetManageUrl(vpn_service->GetCurrentEnvironment()));
+  GURL::Replacements replacements;
+  replacements.SetQueryStr("intent=checkout&product=vpn");
+  ShowSingletonTab(browser, url.ReplaceComponents(replacements));
 }
 
 BraveBrowserView* BraveVPNController::GetBraveBrowserView() {

browser/ui/webui/brave_vpn/brave_vpn_localized_string_provider.cc

@@ -16,7 +16,6 @@ namespace brave_vpn {
 void AddLocalizedStrings(content::WebUIDataSource* html_source) {
   static constexpr webui::LocalizedString kLocalizedStrings[] = {
       {"braveVpn", IDS_BRAVE_VPN},
-      {"braveVpnMainPanelTitle", IDS_BRAVE_VPN_MAIN_PANEL_TITLE},
       {"braveVpnConnect", IDS_BRAVE_VPN_CONNECT},
       {"braveVpnConnecting", IDS_BRAVE_VPN_CONNECTING},
       {"braveVpnConnected", IDS_BRAVE_VPN_CONNECTED},
@@ -33,7 +32,6 @@ void AddLocalizedStrings(content::WebUIDataSource* html_source) {
       {"braveVpnSettingsPanelHeader", IDS_BRAVE_VPN_SETTINGS_PANEL_HEADER},
       {"braveVpnSettingsPanelBackButtonAriaLabel",
        IDS_BRAVE_VPN_SETTINGS_PANEL_BACK_BUTTON_ARIA_LABEL},
-      {"braveVpnErrorPanelHeader", IDS_BRAVE_VPN_ERROR_PANEL_HEADER},
       {"braveVpnErrorPanelBackButtonAriaLabel",
        IDS_BRAVE_VPN_PANEL_GO_TO_MAIN_BUTTON_ARIA_LABEL},
       {"braveVpnStatus", IDS_BRAVE_VPN_STATUS},

browser/ui/webui/new_tab_page/brave_new_tab_message_handler.cc

@@ -23,6 +23,7 @@
 #include "brave/components/brave_news/common/pref_names.h"
 #include "brave/components/brave_perf_predictor/common/pref_names.h"
 #include "brave/components/brave_search_conversion/pref_names.h"
+#include "brave/components/brave_vpn/common/buildflags/buildflags.h"
 #include "brave/components/constants/pref_names.h"
 #include "brave/components/ntp_background_images/browser/url_constants.h"
 #include "brave/components/ntp_background_images/browser/view_counter_service.h"
@@ -86,6 +87,9 @@ base::Value::Dict GetPreferencesDictionary(PrefService* prefs) {
                 prefs->GetBoolean(brave_news::prefs::kBraveNewsOptedIn));
   pref_data.Set("hideAllWidgets", prefs->GetBoolean(kNewTabPageHideAllWidgets));
   pref_data.Set("showBraveTalk", prefs->GetBoolean(kNewTabPageShowBraveTalk));
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+  pref_data.Set("showBraveVPN", prefs->GetBoolean(kNewTabPageShowBraveVPN));
+#endif
   pref_data.Set(
       "showSearchBox",
       prefs->GetBoolean(brave_search_conversion::prefs::kShowNTPSearchBox));
@@ -329,6 +333,12 @@ void BraveNewTabMessageHandler::OnJavascriptAllowed() {
       kNewTabPageShowBraveTalk,
       base::BindRepeating(&BraveNewTabMessageHandler::OnPreferencesChanged,
                           base::Unretained(this)));
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+  pref_change_registrar_.Add(
+      kNewTabPageShowBraveVPN,
+      base::BindRepeating(&BraveNewTabMessageHandler::OnPreferencesChanged,
+                          base::Unretained(this)));
+#endif
   pref_change_registrar_.Add(
       kNewTabPageHideAllWidgets,
       base::BindRepeating(&BraveNewTabMessageHandler::OnPreferencesChanged,
@@ -452,6 +462,10 @@ void BraveNewTabMessageHandler::HandleSaveNewTabPagePref(
     settings_key = kNewTabPageHideAllWidgets;
   } else if (settings_key_input == "showBraveTalk") {
     settings_key = kNewTabPageShowBraveTalk;
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+  } else if (settings_key_input == "showBraveVPN") {
+    settings_key = kNewTabPageShowBraveVPN;
+#endif
   } else if (settings_key_input == "showSearchBox") {
     settings_key = brave_search_conversion::prefs::kShowNTPSearchBox;
   } else if (settings_key_input == "promptEnableSearchSuggestions") {

browser/ui/webui/new_tab_page/brave_new_tab_page_handler.cc

@@ -24,6 +24,7 @@
 #include "brave/components/brave_search_conversion/pref_names.h"
 #include "brave/components/brave_search_conversion/types.h"
 #include "brave/components/brave_search_conversion/utils.h"
+#include "brave/components/brave_vpn/common/buildflags/buildflags.h"
 #include "brave/components/constants/pref_names.h"
 #include "brave/components/l10n/common/localization_util.h"
 #include "brave/components/ntp_background_images/browser/ntp_background_images_data.h"
@@ -34,7 +35,10 @@
 #include "chrome/browser/profiles/profile.h"
 #include "chrome/browser/search_engines/template_url_service_factory.h"
 #include "chrome/browser/themes/theme_syncable_service.h"
+#include "chrome/browser/ui/browser_window/public/browser_window_features.h"
+#include "chrome/browser/ui/browser_window/public/browser_window_interface.h"
 #include "chrome/browser/ui/chrome_select_file_policy.h"
+#include "chrome/browser/ui/tabs/public/tab_interface.h"
 #include "chrome/common/pref_names.h"
 #include "chrome/grit/generated_resources.h"
 #include "components/omnibox/browser/omnibox_view.h"
@@ -55,6 +59,12 @@
 #include "url/gurl.h"
 #include "url/origin.h"
 
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+#include "brave/browser/brave_vpn/brave_vpn_service_factory.h"
+#include "brave/browser/ui/brave_vpn/brave_vpn_controller.h"
+#include "brave/components/brave_vpn/browser/brave_vpn_service.h"
+#endif
+
 namespace {
 
 bool IsNTPPromotionEnabled(Profile* profile) {
@@ -313,6 +323,36 @@ void BraveNewTabPageHandler::SearchWhatYouTyped(const std::string& host,
   web_contents_->OpenURL(params, /*navigation_handle_callback=*/{});
 }
 
+void BraveNewTabPageHandler::RefreshVPNState() {
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+  auto* vpn_service =
+      brave_vpn::BraveVpnServiceFactory::GetForProfile(profile_);
+  vpn_service->ReloadPurchasedState();
+#endif
+}
+
+void BraveNewTabPageHandler::LaunchVPNPanel() {
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+  auto* tab = tabs::TabInterface::GetFromContents(web_contents_);
+  CHECK(tab);
+  tab->GetBrowserWindowInterface()
+      ->GetFeatures()
+      .GetBraveVPNController()
+      ->ShowBraveVPNBubble(/* show_select */ true);
+#endif
+}
+
+void BraveNewTabPageHandler::OpenVPNAccountPage() {
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+  auto* tab = tabs::TabInterface::GetFromContents(web_contents_);
+  CHECK(tab);
+  tab->GetBrowserWindowInterface()
+      ->GetFeatures()
+      .GetBraveVPNController()
+      ->OpenVPNAccountPage();
+#endif
+}
+
 bool BraveNewTabPageHandler::IsCustomBackgroundImageEnabled() const {
   if (profile_->GetPrefs()->IsManagedPreference(GetThemePrefNameInMigration(
           ThemePrefInMigration::kNtpCustomBackgroundDict))) {

browser/ui/webui/new_tab_page/brave_new_tab_page_handler.h

@@ -74,6 +74,9 @@ class BraveNewTabPageHandler : public brave_new_tab_page::mojom::PageHandler,
                           bool ctrl_key,
                           bool meta_key,
                           bool shift_key) override;
+  void RefreshVPNState() override;
+  void LaunchVPNPanel() override;
+  void OpenVPNAccountPage() override;
 
   // Observe BraveNTPCustomBackgroundService.
   void OnBackgroundUpdated();

browser/ui/webui/new_tab_page/brave_new_tab_ui.cc

@@ -39,6 +39,12 @@
 #include "mojo/public/cpp/bindings/pending_receiver.h"
 #include "ui/webui/resources/cr_components/searchbox/searchbox.mojom.h"
 
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+#include "brave/browser/brave_vpn/brave_vpn_service_factory.h"
+#include "brave/components/brave_vpn/browser/brave_vpn_service.h"
+#include "brave/components/brave_vpn/common/brave_vpn_utils.h"
+#endif
+
 using ntp_background_images::NTPCustomImagesSource;
 
 BraveNewTabUI::BraveNewTabUI(content::WebUI* web_ui, const std::string& name)
@@ -73,6 +79,17 @@ BraveNewTabUI::BraveNewTabUI(content::WebUI* web_ui, const std::string& name)
 
   AddBackgroundColorToSource(source, web_contents);
 
+  // Lottie animations tick on a worker thread and requires the document CSP to
+  // be set to "worker-src blob: 'self';".
+  source->OverrideContentSecurityPolicy(
+      network::mojom::CSPDirectiveName::WorkerSrc,
+      "worker-src blob: chrome://resources 'self';");
+
+  source->OverrideContentSecurityPolicy(
+      network::mojom::CSPDirectiveName::TrustedTypes,
+      "trusted-types static-types lottie-worker-script-loader lit-html-desktop "
+      "default; ");
+
   source->AddBoolean(
       "featureCustomBackgroundEnabled",
       !profile->GetPrefs()->IsManagedPreference(GetThemePrefNameInMigration(
@@ -91,6 +108,14 @@ BraveNewTabUI::BraveNewTabUI(content::WebUI* web_ui, const std::string& name)
       "featureFlagSearchWidget",
       base::FeatureList::IsEnabled(features::kBraveNtpSearchWidget));
 
+  source->AddBoolean("vpnWidgetSupported",
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+                     brave_vpn::IsBraveVPNEnabled(profile->GetPrefs())
+#else
+                     false
+#endif
+  );
+
   web_ui->AddMessageHandler(base::WrapUnique(
       BraveNewTabMessageHandler::Create(source, profile, was_restored)));
   web_ui->AddMessageHandler(
@@ -140,6 +165,19 @@ void BraveNewTabUI::BindInterface(
       /*omnibox_controller=*/nullptr);
 }
 
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+void BraveNewTabUI::BindInterface(
+    mojo::PendingReceiver<brave_vpn::mojom::ServiceHandler>
+        pending_vpn_service_handler) {
+  auto* profile = Profile::FromWebUI(web_ui());
+  CHECK(profile);
+  auto* vpn_service = brave_vpn::BraveVpnServiceFactory::GetForProfile(profile);
+  if (vpn_service) {
+    vpn_service->BindInterface(std::move(pending_vpn_service_handler));
+  }
+}
+#endif
+
 void BraveNewTabUI::CreatePageHandler(
     mojo::PendingRemote<brave_new_tab_page::mojom::Page> pending_page,
     mojo::PendingReceiver<brave_new_tab_page::mojom::PageHandler>

browser/ui/webui/new_tab_page/brave_new_tab_ui.h

@@ -11,6 +11,7 @@
 
 #include "brave/components/brave_new_tab_ui/brave_new_tab_page.mojom.h"
 #include "brave/components/brave_news/common/brave_news.mojom.h"
+#include "brave/components/brave_vpn/common/buildflags/buildflags.h"
 #include "chrome/browser/ui/webui/searchbox/realbox_handler.h"
 #include "content/public/browser/web_ui_controller.h"
 #include "mojo/public/cpp/bindings/pending_receiver.h"
@@ -19,6 +20,10 @@
 #include "ui/webui/mojo_web_ui_controller.h"
 #include "ui/webui/resources/cr_components/searchbox/searchbox.mojom.h"
 
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+#include "brave/components/brave_vpn/common/mojom/brave_vpn.mojom.h"  // nogncheck
+#endif
+
 namespace brave_news {
 class BraveNewsController;
 }  // namespace brave_news
@@ -45,6 +50,11 @@ class BraveNewTabUI : public ui::MojoWebUIController,
   void BindInterface(mojo::PendingReceiver<searchbox::mojom::PageHandler>
                          pending_page_handler);
 
+#if BUILDFLAG(ENABLE_BRAVE_VPN)
+  void BindInterface(mojo::PendingReceiver<brave_vpn::mojom::ServiceHandler>
+                         pending_vpn_service_handler);
+#endif
+
  private:
   // new_tab_page::mojom::PageHandlerFactory:
   void CreatePageHandler(

components/brave_new_tab_ui/BUILD.gn

@@ -14,6 +14,7 @@ transpile_web_ui("brave_new_tab_ui") {
   public_deps = [
     ":mojom_js",
     "//brave/components/brave_news/common:mojom_js",
+    "//brave/components/brave_vpn/common/mojom:mojom_js",
   ]
   if (!is_android && !is_ios) {
     public_deps += [

components/brave_new_tab_ui/actions/brave_vpn_actions.ts

@@ -0,0 +1,21 @@
+// Copyright (c) 2024 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 https://mozilla.org/MPL/2.0/.
+
+import { createAction } from 'redux-act'
+import * as BraveVPN from '../api/braveVpn'
+
+export const initialize = createAction<BraveVPN.PurchasedState>('initialize')
+export const toggleConnection = createAction('toggleConnection')
+export const launchVPNPanel = createAction('launchVPNPanel')
+export const openVPNAccountPage = createAction('openVPNAccountPage')
+export const purchasedStateChanged = createAction<BraveVPN.PurchasedState>(
+  'purchasedStateChanged'
+)
+export const connectionStateChanged = createAction<BraveVPN.ConnectionState>(
+  'connectionStateChanged'
+)
+export const selectedRegionChanged = createAction<BraveVPN.Region>(
+  'connectionStateChanged'
+)

components/brave_new_tab_ui/api/braveVpn.ts

@@ -0,0 +1,12 @@
+// Copyright (c) 2024 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 https://mozilla.org/MPL/2.0/.
+
+import * as BraveVPN from 'gen/brave/components/brave_vpn/common/mojom/brave_vpn.mojom.m.js'
+// Provide access to all the generated types
+export * from 'gen/brave/components/brave_vpn/common/mojom/brave_vpn.mojom.m.js'
+
+export default function getVPNServiceHandler () {
+  return BraveVPN.ServiceHandler.getRemote()
+}

components/brave_new_tab_ui/api/getActions.ts

@@ -9,6 +9,7 @@ import * as gridSitesActions from '../actions/grid_sites_actions'
 import * as rewardsActions from '../actions/rewards_actions'
 import * as stackWidgetActions from '../actions/stack_widget_actions'
 import * as todayActions from '../actions/today_actions'
+import * as braveVPNActions from '../actions/brave_vpn_actions'
 import { NewTabActions } from '../constants/new_tab_types'
 import store from '../store'
 
@@ -29,6 +30,7 @@ export function getActionsForDispatch (dispatch: Dispatch) {
   const allActions = Object.assign({}, newTabActions, stackWidgetActions, gridSitesActions, rewardsActions)
   return {
     ...bindActionCreators(allActions, dispatch),
-    today: bindActionCreators(todayActions, dispatch)
+    today: bindActionCreators(todayActions, dispatch),
+    braveVPN: bindActionCreators(braveVPNActions, dispatch)
   }
 }