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 771b2c17d993..b98de934c932 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,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", 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 402c5b93f000..66baecea8d24 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 @@ -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 ( - {getLocaleWithReplacements( - 'braveVpnServerSelectionCountryInfo', - countryInfo + {getCountryInfo( + props.region.cities.length, + props.region.serverCount )} @@ -143,10 +159,7 @@ function RegionContent(props: RegionContentProps) { $15 cities - $25 servers - + + 1 city + + + + $15 cities + + + + 1 server + + + $15 servers