Added recover link to vpn card widget (uplift to 1.74.x) (#26877)

Merge pull request #26853 from brave/vpn_card_recover_link

Added recover link to vpn card widget

browser/ui/brave_vpn/brave_vpn_controller.cc

@@ -21,15 +21,13 @@ void BraveVPNController::ShowBraveVPNBubble(bool show_select) {
   GetBraveBrowserView()->ShowBraveVPNBubble(show_select);
 }
 
-void BraveVPNController::OpenVPNAccountPage() {
+void BraveVPNController::OpenVPNAccountPage(const std::string& intent) {
   auto* browser = browser_view_->browser();
   auto* profile = browser->profile();
   auto* vpn_service = brave_vpn::BraveVpnServiceFactory::GetForProfile(profile);
-  auto url =
+  const auto url =
       GURL(brave_vpn::GetManageUrl(vpn_service->GetCurrentEnvironment()));
-  GURL::Replacements replacements;
-  replacements.SetQueryStr("intent=checkout&product=vpn");
-  ShowSingletonTab(browser, url.ReplaceComponents(replacements));
+  ShowSingletonTab(browser, brave_vpn::GetManageURLForUIType(intent, url));
 }
 
 BraveBrowserView* BraveVPNController::GetBraveBrowserView() {

browser/ui/brave_vpn/brave_vpn_controller.h

@@ -6,6 +6,8 @@
 #ifndef BRAVE_BROWSER_UI_BRAVE_VPN_BRAVE_VPN_CONTROLLER_H_
 #define BRAVE_BROWSER_UI_BRAVE_VPN_BRAVE_VPN_CONTROLLER_H_
 
+#include <string>
+
 #include "base/memory/raw_ptr.h"
 
 class BraveBrowserView;
@@ -19,7 +21,7 @@ class BraveVPNController {
   BraveVPNController& operator=(const BraveVPNController&) = delete;
 
   void ShowBraveVPNBubble(bool show_select = false);
-  void OpenVPNAccountPage();
+  void OpenVPNAccountPage(const std::string& intent);
 
  private:
   BraveBrowserView* GetBraveBrowserView();

browser/ui/webui/brave_vpn/vpn_panel_handler.cc

@@ -20,22 +20,6 @@
 
 namespace {
 
-GURL GetURLForUIType(const std::string& type, GURL manage_url) {
-  if (type == "recover" || type == "checkout") {
-    DCHECK(manage_url.is_valid());
-    std::string query = "intent=" + type + "&product=vpn";
-    GURL::Replacements replacements;
-    replacements.SetQueryStr(query);
-    return manage_url.ReplaceComponents(replacements);
-  } else if (type == "privacy") {
-    return GURL("https://brave.com/privacy/browser/#vpn");
-  } else if (type == "about") {
-    return GURL(brave_vpn::kAboutUrl);
-  }
-  DCHECK_EQ(type, "manage");
-  return manage_url;
-}
-
 bool ShouldOpenSingletonTab(const std::string& type) {
   return type == "manage" || type == "privacy" || type == "about";
 }
@@ -89,7 +73,8 @@ void VPNPanelHandler::OpenVpnUIUrl(
     const std::string& type,
     brave_vpn::mojom::ProductUrlsPtr product_urls) {
   auto* browser = chrome::FindLastActiveWithProfile(profile_);
-  auto url = GetURLForUIType(type, GURL(product_urls->manage));
+  const auto url =
+      brave_vpn::GetManageURLForUIType(type, GURL(product_urls->manage));
   if (ShouldOpenSingletonTab(type)) {
     ShowSingletonVPNTab(browser, url);
   } else {

browser/ui/webui/new_tab_page/brave_new_tab_page_handler.cc

@@ -342,14 +342,14 @@ void BraveNewTabPageHandler::LaunchVPNPanel() {
 #endif
 }
 
-void BraveNewTabPageHandler::OpenVPNAccountPage() {
+void BraveNewTabPageHandler::OpenVPNAccountPage(const std::string& intent) {
 #if BUILDFLAG(ENABLE_BRAVE_VPN)
   auto* tab = tabs::TabInterface::GetFromContents(web_contents_);
   CHECK(tab);
   tab->GetBrowserWindowInterface()
       ->GetFeatures()
       .GetBraveVPNController()
-      ->OpenVPNAccountPage();
+      ->OpenVPNAccountPage(intent);
 #endif
 }
 

browser/ui/webui/new_tab_page/brave_new_tab_page_handler.h

@@ -76,7 +76,7 @@ class BraveNewTabPageHandler : public brave_new_tab_page::mojom::PageHandler,
                           bool shift_key) override;
   void RefreshVPNState() override;
   void LaunchVPNPanel() override;
-  void OpenVPNAccountPage() override;
+  void OpenVPNAccountPage(const std::string& intent) override;
 
   // Observe BraveNTPCustomBackgroundService.
   void OnBackgroundUpdated();

components/brave_new_tab_ui/actions/brave_vpn_actions.ts

@@ -9,7 +9,7 @@ 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 openVPNAccountPage = createAction<string>('openVPNAccountPage')
 export const purchasedStateChanged = createAction<BraveVPN.PurchasedState>(
   'purchasedStateChanged'
 )

components/brave_new_tab_ui/async/brave_vpn.ts

@@ -41,9 +41,12 @@ handler.on(Actions.launchVPNPanel.getType(), async (store) => {
   getNTPBrowserAPI().pageHandler.launchVPNPanel()
 })
 
-handler.on(Actions.openVPNAccountPage.getType(), async (store) => {
-  getNTPBrowserAPI().pageHandler.openVPNAccountPage()
-})
+handler.on<string>(
+  Actions.openVPNAccountPage.getType(),
+  async (store, payload) => {
+    getNTPBrowserAPI().pageHandler.openVPNAccountPage(payload)
+  }
+)
 
 handler.on(Actions.toggleConnection.getType(), async (store) => {
   const state = store.getState() as ApplicationState

components/brave_new_tab_ui/brave_new_tab_page.mojom

@@ -85,7 +85,7 @@ interface PageHandler {
   // BraveVPN
   RefreshVPNState();
   LaunchVPNPanel();
-  OpenVPNAccountPage();
+  OpenVPNAccountPage(string intent);
 };
 
 // WebUI-side handler for requests from the browser.

components/brave_new_tab_ui/components/default/vpn/vpn_card.tsx

@@ -102,18 +102,29 @@ const ActionArea = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: ${spacing.s};
+  gap: ${spacing.m};
   align-self: stretch;
 `
 
 const ActionButton = styled(Button)`
   align-self: stretch;
 `
 
-const ActionLabel = styled.div`
+const ActionLink = styled.a`
   color: #fff;
   opacity: 0.5;
-  font: ${font.xSmall.regular};
+  font: ${font.small.link};
+  line-height: 18px;
+  letter-spacing: 0px;
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: auto;
+  text-underline-offset: auto;
+
+  &:focus-visible {
+    outline: 1.5px solid ${color.primary[40]};
+  }
 `
 
 const VPNShileldsIcon = styled.div<{ connectionState: ConnectionState }>`
@@ -215,10 +226,17 @@ export const VPNPromoWidget = () => {
         </PoweredBy>
         <FeatureList />
         <ActionArea>
-          <ActionButton onClick={() => dispatch(Actions.openVPNAccountPage())}>
+          <ActionButton
+            onClick={() => dispatch(Actions.openVPNAccountPage('checkout'))}
+          >
             {getLocale('braveVpnCTA')}
           </ActionButton>
-          <ActionLabel>{getLocale('braveVpnFreeTrial')}</ActionLabel>
+          <ActionLink
+            href='#'
+            onClick={() => dispatch(Actions.openVPNAccountPage('recover'))}
+          >
+            {getLocale('braveVpnPurchased')}
+          </ActionLink>
         </ActionArea>
       </WidgetContent>
     </WidgetWrapper>

components/brave_vpn/common/brave_vpn_utils.cc

@@ -24,6 +24,7 @@
 #include "components/prefs/pref_registry_simple.h"
 #include "components/prefs/pref_service.h"
 #include "components/version_info/channel.h"
+#include "url/gurl.h"
 
 namespace brave_vpn {
 
@@ -139,8 +140,24 @@ void EnableWireguardIfPossible(PrefService* local_prefs) {
         base::FeatureList::IsEnabled(features::kBraveVPNUseWireguardService));
   }
 }
-
 #endif  // BUILDFLAG(IS_WIN)
+
+GURL GetManageURLForUIType(const std::string& type, const GURL& manage_url) {
+  if (type == "recover" || type == "checkout") {
+    DCHECK(manage_url.is_valid());
+    std::string query = "intent=" + type + "&product=vpn";
+    GURL::Replacements replacements;
+    replacements.SetQueryStr(query);
+    return manage_url.ReplaceComponents(replacements);
+  } else if (type == "privacy") {
+    return GURL("https://brave.com/privacy/browser/#vpn");
+  } else if (type == "about") {
+    return GURL(brave_vpn::kAboutUrl);
+  }
+  DCHECK_EQ(type, "manage");
+  return manage_url;
+}
+
 void MigrateVPNSettings(PrefService* profile_prefs, PrefService* local_prefs) {
   if (local_prefs->GetBoolean(prefs::kBraveVPNLocalStateMigrated)) {
     return;

components/brave_vpn/common/brave_vpn_utils.h

@@ -10,6 +10,7 @@
 
 #include "build/build_config.h"
 
+class GURL;
 class PrefRegistrySimple;
 class PrefService;
 namespace user_prefs {
@@ -40,6 +41,7 @@ std::string GetSkusCredential(PrefService* local_prefs);
 bool IsBraveVPNWireguardEnabled(PrefService* local_state);
 std::string_view GetMigratedNameIfNeeded(PrefService* local_prefs,
                                          const std::string& name);
+GURL GetManageURLForUIType(const std::string& type, const GURL& manage_url);
 
 #if BUILDFLAG(IS_WIN)
 void EnableWireguardIfPossible(PrefService* local_prefs);

components/brave_vpn/resources/panel/stories/locale.ts

@@ -87,5 +87,4 @@ provideStrings({
   braveVpnOptimal: 'Optimal',
   braveVpnChangeRegion: 'Change',
   braveVpnCTA: 'Start free trial',
-  braveVpnFreeTrial: '7-day free trial'
 })

components/resources/brave_vpn_strings.grdp

@@ -433,8 +433,5 @@ Let's get you connected!
   <message name="IDS_BRAVE_VPN_WIDGET_CTA" desc="The text for vpn promo card cta">
     Start free trial
   </message>
-  <message name="IDS_BRAVE_VPN_WIDGET_FREE_TRIAL" desc="The text for vpn promo card free trial label">
-    7-day free trial
-  </message>
 
 </grit-part>

components/webui/webui_resources.cc

@@ -430,7 +430,7 @@ base::span<const webui::LocalizedString> GetWebUILocalizedStrings(
                 IDS_BRAVE_VPN_SERVER_SELECTION_OPTIMAL_LABEL},
                {"braveVpnChangeRegion", IDS_BRAVE_VPN_WIDGET_CHANGE_LABEL},
                {"braveVpnCTA", IDS_BRAVE_VPN_WIDGET_CTA},
-               {"braveVpnFreeTrial", IDS_BRAVE_VPN_WIDGET_FREE_TRIAL},
+               {"braveVpnPurchased", IDS_BRAVE_VPN_HAS_PURCHASED},
 #endif
 
                // Brave Talk  Widget