Fixed plural issue in VPN server selection panel

browser/ui/webui/brave_vpn/brave_vpn_localized_string_provider.cc

@@ -50,10 +50,14 @@ void AddLocalizedStrings(content::WebUIDataSource* html_source) {
       {"braveVpnLoading", IDS_BRAVE_VPN_LOADING},
       {"braveVpnPurchaseFailed", IDS_BRAVE_VPN_PURCHASE_FAILED},
       {"braveVpnSelectYourServer", IDS_BRAVE_VPN_SELECT_YOUR_SERVER},
-      {"braveVpnServerSelectionCountryInfo",
-       IDS_BRAVE_VPN_SERVER_SELECTION_COUNTRY_INFO},
-      {"braveVpnServerSelectionCityInfo",
-       IDS_BRAVE_VPN_SERVER_SELECTION_CITY_INFO},
+      {"braveVpnServerSelectionSingleCity",
+       IDS_BRAVE_VPN_SERVER_SELECTION_SINGLE_CITY},
+      {"braveVpnServerSelectionMultipleCities",
+       IDS_BRAVE_VPN_SERVER_SELECTION_MULTIPLE_CITIES},
+      {"braveVpnServerSelectionSingleServer",
+       IDS_BRAVE_VPN_SERVER_SELECTION_SINGLE_SERVER},
+      {"braveVpnServerSelectionMultipleServers",
+       IDS_BRAVE_VPN_SERVER_SELECTION_MULTIPLE_SERVERS},
       {"braveVpnServerSelectionAutomaticLabel",
        IDS_BRAVE_VPN_SERVER_SELECTION_AUTOMATIC_LABEL},
       {"braveVpnServerSelectionOptimalLabel",

components/brave_vpn/resources/panel/components/select-region-list/index.tsx

@@ -10,10 +10,31 @@ import Flag from '../flag'
 import { Region } from '../../api/panel_browser_api'
 import { useSelector, useDispatch } from '../../state/hooks'
 import * as Actions from '../../state/actions'
-import { getLocale, getLocaleWithReplacements } from '$web-common/locale'
+import { getLocale } from '$web-common/locale'
 
 import 'emptykit.css'
 
+function getCountryInfo(numCity: number, numServer: number) {
+  const city =
+    numCity === 1
+      ? getLocale('braveVpnServerSelectionSingleCity')
+      : getLocale('braveVpnServerSelectionMultipleCities').replace(
+          '$1',
+          `${numCity}`
+        )
+
+  return `${city} - ${getCityInfo(numServer)}`
+}
+
+function getCityInfo(numServer: number) {
+  return numServer === 1
+    ? getLocale('braveVpnServerSelectionSingleServer')
+    : getLocale('braveVpnServerSelectionMultipleServers').replace(
+        '$1',
+        `${numServer}`
+      )
+}
+
 interface ConnectButtonProps {
   right: string
   connect: () => void
@@ -82,11 +103,6 @@ function RegionContent(props: RegionContentProps) {
     if (props.selected) ref.current?.scrollIntoView()
   }, [])
 
-  const countryInfo = {
-    $1: props.region.cities.length,
-    $2: props.region.serverCount
-  }
-
   return (
     <S.RegionContainer
       selected={props.selected}
@@ -105,9 +121,9 @@ function RegionContent(props: RegionContentProps) {
             {props.region.namePretty}
           </S.RegionCountryLabel>
           <S.CountryServerInfo selected={!props.open && props.selected}>
-            {getLocaleWithReplacements(
-              'braveVpnServerSelectionCountryInfo',
-              countryInfo
+            {getCountryInfo(
+              props.region.cities.length,
+              props.region.serverCount
             )}
           </S.CountryServerInfo>
         </S.CountryInfo>
@@ -143,10 +159,7 @@ function RegionContent(props: RegionContentProps) {
             <RegionCity
               key={city.name}
               cityLabel={city.namePretty}
-              serverInfo={getLocale('braveVpnServerSelectionCityInfo').replace(
-                '$1',
-                `${city.serverCount}`
-              )}
+              serverInfo={getCityInfo(city.serverCount)}
               selected={props.selected && currentRegion.name === city.name}
               connectionButton={
                 <ConnectButton

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

@@ -42,8 +42,10 @@ provideStrings({
     'Unable to check the status of your purchase. This is probably a network problem. Try again or contact support.',
   braveVpnSelectPanelBackButtonAriaLabel: 'Go to main',
   braveVpnSelectYourServer: 'Select your server',
-  braveVpnServerSelectionCountryInfo: '$1 cities - $2 servers',
-  braveVpnServerSelectionCityInfo: '$1 servers',
+  braveVpnServerSelectionSingleCity: '1 city',
+  braveVpnServerSelectionMultipleCities: '$1 cities',
+  braveVpnServerSelectionSingleServer: '1 server',
+  braveVpnServerSelectionMultipleServers: '$1 servers',
   braveVpnServerSelectionAutomaticLabel: 'Automatic',
   braveVpnServerSelectionOptimalLabel: 'Optimal',
   braveVpnServerSelectionOptimalDesc: 'Use the best server available',

components/brave_vpn/resources/panel/stories/mock-data/region-list.ts

@@ -18,7 +18,7 @@ export const mockRegionList: Region[] = [
         'regionPrecision': 'city',
         'isAutomatic': false,
         'cities': [],
-        'serverCount': 8
+        'serverCount': 1
       }
     ],
     'continent': 'Oceania',
@@ -29,7 +29,7 @@ export const mockRegionList: Region[] = [
     'namePretty': 'Australia',
     'regionPrecision': 'country',
     'isAutomatic': false,
-    'serverCount': 8
+    'serverCount': 1
   },
   {
     'cities': [

components/resources/brave_vpn_strings.grdp

@@ -140,7 +140,19 @@
     <ph name="CITY_COUNT">$1<ex>5</ex></ph> cities - <ph name="SERVER_COUNT">$2<ex>5</ex></ph> servers
   </message>
 
-  <message name="IDS_BRAVE_VPN_SERVER_SELECTION_CITY_INFO" desc="Text for the server count for the city">
+  <message name="IDS_BRAVE_VPN_SERVER_SELECTION_SINGLE_CITY" desc="Text for the single city in selection panel">
+    1 city
+  </message>
+
+  <message name="IDS_BRAVE_VPN_SERVER_SELECTION_MULTIPLE_CITIES" desc="Text for the multiple cities in selection panel">
+    <ph name="CITY_COUNT">$1<ex>5</ex></ph> cities
+  </message>
+
+  <message name="IDS_BRAVE_VPN_SERVER_SELECTION_SINGLE_SERVER" desc="Text for the single server in selection panel">
+    1 server
+  </message>
+
+  <message name="IDS_BRAVE_VPN_SERVER_SELECTION_MULTIPLE_SERVERS" desc="Text for the multiple servers in selection panel">
     <ph name="SERVER_COUNT">$1<ex>5</ex></ph> servers
   </message>