Added handler to take actions from page and replaced extensions api c…

…alls in vpn panel popup

browser/ui/webui/brave_vpn/vpn_panel_handler.cc

@@ -9,7 +9,32 @@
 #include <utility>
 
 #include "brave/browser/brave_vpn/brave_vpn_service_factory.h"
+#include "brave/components/brave_vpn/brave_vpn_constants.h"
 #include "brave/components/brave_vpn/brave_vpn_service.h"
+#include "brave/components/brave_vpn/brave_vpn_utils.h"
+#include "chrome/browser/ui/browser_finder.h"
+#include "chrome/browser/ui/browser_tabstrip.h"
+
+namespace {
+
+GURL GetURLForUIType(const std::string& type) {
+  if (type == "recover" || type == "checkout") {
+    GURL manage_url = GURL(brave_vpn::GetManageUrl());
+    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 GURL(brave_vpn::GetManageUrl());
+}
+
+}  // namespace
 
 VPNPanelHandler::VPNPanelHandler(
     mojo::PendingReceiver<brave_vpn::mojom::PanelHandler> receiver,
@@ -38,3 +63,8 @@ void VPNPanelHandler::CloseUI() {
     embedder->CloseUI();
   }
 }
+
+void VPNPanelHandler::OpenVpnUI(const std::string& type) {
+  auto* browser = chrome::FindLastActiveWithProfile(profile_);
+  chrome::AddTabAt(browser, GetURLForUIType(type), -1, true);
+}

browser/ui/webui/brave_vpn/vpn_panel_handler.h

@@ -39,6 +39,7 @@ class VPNPanelHandler : public brave_vpn::mojom::PanelHandler {
   // brave_vpn::mojom::PanelHandler:
   void ShowUI() override;
   void CloseUI() override;
+  void OpenVpnUI(const std::string& type) override;
 
  private:
   mojo::Receiver<brave_vpn::mojom::PanelHandler> receiver_;

common/extensions/api/_api_features.json

@@ -73,8 +73,7 @@
       "chrome://tab-strip/*",
       "chrome://wallet-panel.top-chrome/*",
       "chrome://wallet/*",
-      "chrome://brave-shields.top-chrome/*",
-      "chrome://vpn-panel.top-chrome/*"
+      "chrome://brave-shields.top-chrome/*"
     ]
   }, {
     "channel": "stable",

components/brave_vpn/mojom/brave_vpn.mojom

@@ -20,6 +20,9 @@ interface PanelHandler {
 
   // Notify the backend that the dialog should be closed.
   CloseUI();
+
+  // Run purchase action.
+  OpenVpnUI(string type);
 };
 
 interface ServiceObserver {

components/brave_vpn/resources/panel/components/contact-support/index.tsx

@@ -114,7 +114,7 @@ function ContactSupport (props: Props) {
   }
 
   const handlePrivacyPolicyClick = () => {
-    chrome.tabs.create({ url: 'https://brave.com/privacy/browser/#vpn' })
+    getPanelBrowserAPI().panelHandler.openVpnUI('privacy')
   }
 
   return (

components/brave_vpn/resources/panel/components/error-subscription-failed-panel/index.tsx

@@ -4,15 +4,14 @@ import Button from '$web-components/button'
 import * as S from './style'
 import { AlertCircleIcon } from 'brave-ui/components/icons'
 import { getLocale } from '../../../../../common/locale'
-import { useSelector } from '../../state/hooks'
 import ContactSupport from '../contact-support'
+import getPanelBrowserAPI from '../../api/panel_browser_api'
 
 function ErrorSubscriptionFailed () {
-  const productUrls = useSelector(state => state.productUrls)
   const [isContactSupportVisible, setContactSupportVisible] = React.useState(false)
 
   const handleEditPayment = () => {
-    chrome.tabs.create({ url: productUrls?.manage })
+    getPanelBrowserAPI().panelHandler.openVpnUI('manage')
   }
 
   const handleContactSupport = () => setContactSupportVisible(true)

components/brave_vpn/resources/panel/components/sell-panel/index.tsx

@@ -4,6 +4,7 @@ import { getLocale } from '../../../../../common/locale'
 import { useSelector } from '../../state/hooks'
 import * as S from './style'
 import Button from '$web-components/button'
+import getPanelBrowserAPI from '../../api/panel_browser_api'
 
 function SellPanel () {
   const productUrls = useSelector(state => state.productUrls)
@@ -18,8 +19,7 @@ function SellPanel () {
 
   const handleClick = (intent: string) => {
     if (!productUrls) return
-    const url = new URL(`?intent=${intent}&product=vpn`, productUrls.manage)
-    chrome.tabs.create({ url: url.href })
+    getPanelBrowserAPI().panelHandler.openVpnUI(intent)
   }
 
   return (

components/brave_vpn/resources/panel/components/settings-panel/index.tsx

@@ -1,21 +1,18 @@
 import * as React from 'react'
 
 import { getLocale } from '../../../../../common/locale'
-import { useSelector } from '../../state/hooks'
 import * as S from './style'
 import { CaratStrongLeftIcon } from 'brave-ui/components/icons'
+import getPanelBrowserAPI from '../../api/panel_browser_api'
 
 interface Props {
   closeSettingsPanel: React.MouseEventHandler<HTMLButtonElement>
   showContactSupport: React.MouseEventHandler<HTMLAnchorElement>
 }
 
 function SettingsPanel (props: Props) {
-  const productUrls = useSelector(state => state.productUrls)
-
   const handleClick = (entry: string) => {
-    if (!productUrls) return
-    chrome.tabs.create({ url: productUrls?.[entry] })
+    getPanelBrowserAPI().panelHandler.openVpnUI(entry)
   }
 
   return (

components/brave_vpn/resources/panel/stories/mock-data/api.ts

@@ -8,7 +8,8 @@ BraveVPN.setPanelBrowserApiForTesting({
   },
   panelHandler: {
     showUI: doNothing,
-    closeUI: doNothing
+    closeUI: doNothing,
+    openVpnUI: doNothing
   },
   serviceHandler: {
     addObserver: doNothing,