From 48605cad0547bf01c4ce92d85045f1f18439a75a Mon Sep 17 00:00:00 2001
From: Simon Hong <shong@brave.com>
Date: Thu, 12 Sep 2024 12:03:03 +0900
Subject: [PATCH] WIP: Try to use PluralStringProxyImpl

---
 .../brave_vpn_localized_string_provider.cc          |  2 ++
 browser/ui/webui/brave_vpn/vpn_panel_ui.cc          |  8 ++++++++
 .../panel/components/select-region-list/index.tsx   | 13 ++++++++++++-
 components/resources/brave_vpn_strings.grdp         |  7 +++++--
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/browser/ui/webui/brave_vpn/brave_vpn_localized_string_provider.cc b/browser/ui/webui/brave_vpn/brave_vpn_localized_string_provider.cc
index b98de934c932..e733f2a2f9a4 100644
--- a/browser/ui/webui/brave_vpn/brave_vpn_localized_string_provider.cc
+++ b/browser/ui/webui/brave_vpn/brave_vpn_localized_string_provider.cc
@@ -50,6 +50,8 @@ void AddLocalizedStrings(content::WebUIDataSource* html_source) {
       {"braveVpnLoading", IDS_BRAVE_VPN_LOADING},
       {"braveVpnPurchaseFailed", IDS_BRAVE_VPN_PURCHASE_FAILED},
       {"braveVpnSelectYourServer", IDS_BRAVE_VPN_SELECT_YOUR_SERVER},
+      {"braveVpnServerSelectionCityInfo",
+       IDS_BRAVE_VPN_SERVER_SELECTION_CITY_INFO},
       {"braveVpnServerSelectionSingleCity",
        IDS_BRAVE_VPN_SERVER_SELECTION_SINGLE_CITY},
       {"braveVpnServerSelectionMultipleCities",
diff --git a/browser/ui/webui/brave_vpn/vpn_panel_ui.cc b/browser/ui/webui/brave_vpn/vpn_panel_ui.cc
index 07218f2da48f..b426b396043b 100644
--- a/browser/ui/webui/brave_vpn/vpn_panel_ui.cc
+++ b/browser/ui/webui/brave_vpn/vpn_panel_ui.cc
@@ -20,9 +20,11 @@
 #include "chrome/browser/ui/browser_list.h"
 #include "chrome/browser/ui/tabs/tab_strip_model.h"
 #include "chrome/browser/ui/webui/favicon_source.h"
+#include "chrome/browser/ui/webui/plural_string_handler.h"
 #include "chrome/browser/ui/webui/webui_util.h"
 #include "components/favicon_base/favicon_url_parser.h"
 #include "components/grit/brave_components_resources.h"
+#include "components/grit/brave_components_strings.h"
 #include "components/sessions/content/session_tab_helper.h"
 #include "content/public/browser/web_contents.h"
 #include "content/public/browser/web_ui.h"
@@ -39,6 +41,12 @@ VPNPanelUI::VPNPanelUI(content::WebUI* web_ui)
   content::WebUIDataSource* source = content::WebUIDataSource::CreateAndAdd(
       web_ui->GetWebContents()->GetBrowserContext(), kVPNPanelURL);
 
+  auto plural_string_handler = std::make_unique<PluralStringHandler>();
+  plural_string_handler->AddLocalizedString(
+      "braveVpnServerSelectionCityInfo",
+      IDS_BRAVE_VPN_SERVER_SELECTION_CITY_INFO);
+  web_ui->AddMessageHandler(std::move(plural_string_handler));
+
   brave_vpn::AddLocalizedStrings(source);
   webui::SetupWebUIDataSource(
       source,
diff --git a/components/brave_vpn/resources/panel/components/select-region-list/index.tsx b/components/brave_vpn/resources/panel/components/select-region-list/index.tsx
index 66baecea8d24..ff64ec954d3b 100644
--- a/components/brave_vpn/resources/panel/components/select-region-list/index.tsx
+++ b/components/brave_vpn/resources/panel/components/select-region-list/index.tsx
@@ -5,6 +5,8 @@
 
 import * as React from 'react'
 
+import usePromise from '$web-common/usePromise'
+import { PluralStringProxyImpl } from 'chrome://resources/js/plural_string_proxy.js'
 import * as S from './style'
 import Flag from '../flag'
 import { Region } from '../../api/panel_browser_api'
@@ -60,11 +62,18 @@ function ConnectButton(props: ConnectButtonProps) {
 interface RegionCityProps {
   cityLabel: string
   serverInfo: string
+  serverCount: number
   selected: boolean
   connectionButton: React.ReactElement
 }
 
 function RegionCity(props: RegionCityProps) {
+  const { result: serverInfo } = usePromise(
+    async () => PluralStringProxyImpl.getInstance().getPluralString(
+      'braveVpnServerSelectionCityInfo',
+      props.serverCount),
+    [props.serverCount])
+
   return (
     <S.RegionCity selected={props.selected}>
       <S.RegionCityInfo>
@@ -72,7 +81,7 @@ function RegionCity(props: RegionCityProps) {
           {props.cityLabel}
         </S.RegionCityLabel>
         <S.CityServerInfo selected={props.selected}>
-          {props.serverInfo}
+          {serverInfo}
         </S.CityServerInfo>
       </S.RegionCityInfo>
       {props.selected && (
@@ -145,6 +154,7 @@ function RegionContent(props: RegionContentProps) {
           <RegionCity
             cityLabel={getLocale('braveVpnServerSelectionOptimalLabel')}
             serverInfo={getLocale('braveVpnServerSelectionOptimalDesc')}
+            serverCount={0}
             selected={
               props.selected && currentRegion.name === props.region.name
             }
@@ -160,6 +170,7 @@ function RegionContent(props: RegionContentProps) {
               key={city.name}
               cityLabel={city.namePretty}
               serverInfo={getCityInfo(city.serverCount)}
+              serverCount={city.serverCount}
               selected={props.selected && currentRegion.name === city.name}
               connectionButton={
                 <ConnectButton
diff --git a/components/resources/brave_vpn_strings.grdp b/components/resources/brave_vpn_strings.grdp
index 6e974a1b00f7..8227f4dfaf4d 100644
--- a/components/resources/brave_vpn_strings.grdp
+++ b/components/resources/brave_vpn_strings.grdp
@@ -136,8 +136,11 @@
     Select your server
   </message>
 
-  <message name="IDS_BRAVE_VPN_SERVER_SELECTION_COUNTRY_INFO" desc="Text for the city and server count for the country">
-    <ph name="CITY_COUNT">$1<ex>5</ex></ph> cities - <ph name="SERVER_COUNT">$2<ex>5</ex></ph> servers
+  <message name="IDS_BRAVE_VPN_SERVER_SELECTION_CITY_INFO" desc="Text for the city info in selection panel">
+    {SERVER_COUNT, plural,
+      =1 {# server}
+      other {# servers}
+    }
   </message>
 
   <message name="IDS_BRAVE_VPN_SERVER_SELECTION_SINGLE_CITY" desc="Text for the single city in selection panel">