Finish localization

brave · Nov 4, 2024 · a70b42a · a70b42a
1 parent 159fbd3
commit a70b42a
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 42 deletions.
diff --git a/components/brave_new_tab_ui/components/default/vpn/vpn_card.tsx b/components/brave_new_tab_ui/components/default/vpn/vpn_card.tsx
@@ -7,34 +7,17 @@ import * as React from 'react'
 import { useDispatch } from 'react-redux'
 
 import Toggle from '@brave/leo/react/toggle'
+import { getLocale } from '$web-common/locale'
 import * as S from './styles'
 import VPNShieldsConnecting from './vpn-shields-connecting'
 import * as Actions from '../../../actions/brave_vpn_actions'
 import { ConnectionState, Region } from '../../../api/braveVpn'
 
-// Delete this.
-const locales = {
-  firewallVpn: 'Brave VPN',
-  connected: 'Connected',
-  connecting: 'Connecting',
-  disconnected: 'Disconnected',
-  disconnecting: 'Disconnecting',
-  change: 'Change',
-  optimal: 'Optimal',
-
-  promo: {
-    heading: 'Extra privacy & security online',
-    poweredBy: 'Powered by',
-    cta: 'Start free trial',
-    freeTrial: '7-day free trial'
-  }
-}
-
 export const VPNWidgetTitle = () => {
   return (
     <>
       <S.HeaderIcon name='product-vpn' />
-      {locales.firewallVpn}
+      {getLocale('braveVpnWidgetTitle')}
     </>
   )
 }
@@ -52,9 +35,9 @@ export const VPNPromoWidget = () => {
 
   const featureList = React.useMemo(
     () => [
-      'Extra privacy & security online',
-      'Hide your IP & change your location',
-      'Protect every app on your device'
+      getLocale('braveVpnFeature1'),
+      getLocale('braveVpnFeature2'),
+      getLocale('braveVpnWidgetFeature3')
     ],
     []
   )
@@ -64,7 +47,7 @@ export const VPNPromoWidget = () => {
       <VPNWidgetHeader />
       <S.WidgetContent>
         <S.PoweredBy>
-          <span>{locales.promo.poweredBy}</span>
+          <span>{getLocale('braveVpnPoweredBy')}</span>
           <S.GuardianLogo />
         </S.PoweredBy>
         <S.SellingPoints>
@@ -79,9 +62,9 @@ export const VPNPromoWidget = () => {
           <S.ActionButton
             onClick={() => dispatch(Actions.openVPNAccountPage())}
           >
-            {locales.promo.cta}
+            {getLocale('braveVpnCTA')}
           </S.ActionButton>
-          <S.ActionLabel>{locales.promo.freeTrial}</S.ActionLabel>
+          <S.ActionLabel>{getLocale('braveVpnFreeTrial')}</S.ActionLabel>
         </S.ActionArea>
       </S.WidgetContent>
     </S.WidgetWrapper>
@@ -91,16 +74,16 @@ export const VPNPromoWidget = () => {
 function GetConnectionStateLabel(connectionState: ConnectionState) {
   switch (connectionState) {
     case ConnectionState.CONNECTED:
-      return locales.connected
+      return getLocale('braveVpnConnected')
     case ConnectionState.CONNECTING:
-      return locales.connecting
+      return getLocale('braveVpnConnecting')
     case ConnectionState.DISCONNECTING:
-      return locales.disconnecting
+      return getLocale('braveVpnDisconnecting')
     default:
       break
   }
 
-  return locales.disconnected
+  return getLocale('braveVpnDisconnected')
 }
 
 interface MainWidgetProps {
@@ -133,12 +116,12 @@ export const VPNMainWidget = (props: MainWidgetProps) => {
               <S.RegionChangeLink
                 onClick={() => dispatch(Actions.launchVPNPanel())}
               >
-                {locales.change}
+                {getLocale('braveVpnChangeRegion')}
               </S.RegionChangeLink>
             </S.RegionAction>
             <S.RegionCityLabel>
               {props.selectedRegion.namePretty === props.selectedRegion.country
-                ? locales.optimal
+                ? getLocale('braveVpnOptimal')
                 : props.selectedRegion.namePretty}
             </S.RegionCityLabel>
           </S.ConnectionInfoBox>

diff --git a/components/brave_new_tab_ui/containers/newTab/index.tsx b/components/brave_new_tab_ui/containers/newTab/index.tsx
@@ -607,7 +607,7 @@ class NewTabPage extends React.Component<Props, State> {
         paddingType={'none'}
         menuPosition={'left'}
         textDirection={textDirection}
-        widgetTitle={getLocale('braveVPNWidgetTitle')}
+        widgetTitle={getLocale('braveVpnWidgetTitle')}
         onShowContent={this.setForegroundStackWidget.bind(this, 'braveVPN')}
         isForeground={showContent}
         showContent={showContent}

diff --git a/components/brave_new_tab_ui/containers/newTab/settings/cards.tsx b/components/brave_new_tab_ui/containers/newTab/settings/cards.tsx
@@ -92,10 +92,10 @@ function CardSettings({ toggleShowBraveTalk, showBraveTalk, braveTalkSupported,
       <StyledBannerImage src={braveVPNBanner} />
       <StyledSettingsInfo>
         <StyledSettingsTitle>
-          {getLocale('braveVPNWidgetSettingTitle')}
+          {getLocale('braveVpnWidgetSettingTitle')}
         </StyledSettingsTitle>
         <StyledSettingsCopy>
-          {getLocale('braveVPNWidgetSettingDesc')}
+          {getLocale('braveVpnWidgetSettingDesc')}
         </StyledSettingsCopy>
       </StyledSettingsInfo>
       <ToggleButton on={showBraveVPN} toggleFunc={toggleShowBraveVPN} />

diff --git a/components/brave_vpn/resources/panel/stories/locale.ts b/components/brave_vpn/resources/panel/stories/locale.ts
@@ -83,5 +83,11 @@ provideStrings({
     'VPN connection failed. Please try connecting again, and be sure to click "Allow" to enable Brave\'s VPN configuration.',
   braveVpnSessionExpiredTitle: 'Session expired',
   braveVpnSessionExpiredContent:
-    'Please log in to your $1Brave Account$2 to refresh your VPN session.'
+    'Please log in to your $1Brave Account$2 to refresh your VPN session.',
+  braveVpnWidgetTitle: 'Brave VPN',
+  braveVpnWidgetFeature3: 'Protect every app on your device',
+  braveVpnOptimal: 'Optimal',
+  braveVpnChangeRegion: 'Change',
+  braveVpnCTA: 'Start free trial',
+  braveVpnFreeTrial: '7-day free trial'
 })
diff --git a/components/brave_vpn/resources/panel/stories/mock-data/api.ts b/components/brave_vpn/resources/panel/stories/mock-data/api.ts
@@ -21,7 +21,6 @@ BraveVPN.setPanelBrowserApiForTesting({
   },
   serviceHandler: {
     addObserver: doNothing,
-    initialize: doNothing,
     getPurchasedState: () => Promise.resolve({ state: loadingState }),
     getConnectionState: () => Promise.resolve({ state: BraveVPN.ConnectionState.CONNECTED }),
     resetConnectionState: doNothing,

diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
@@ -756,9 +756,6 @@
       <message name="IDS_BRAVE_TALK_WIDGET_START_BUTTON" desc="">Start call</message>
       <message name="IDS_BRAVE_TALK_WIDGET_ABOUT_DATA" desc="">About your data</message>
 
-      <message name="IDS_BRAVE_VPN_WIDGET_TITLE" desc="The text for the vpn card title">Brave VPN</message>
-      <message name="IDS_BRAVE_VPN_WIDGET_SETTING_DESC" desc="The text for vpn card description in customize menu">Extra privacy &amp; security online</message>
-
       <!-- WebUI Brave Toolbar resources -->
       <message name="IDS_WALLETS_TITLE" desc="The toolbar title for the brave://wallets page">Wallet</message>
       <!-- WebUI Crypto Wallets resources -->

diff --git a/components/resources/brave_vpn_strings.grdp b/components/resources/brave_vpn_strings.grdp
@@ -424,4 +424,25 @@ Let's get you connected!
       Remove icon
     </message>
   </if>
+
+  <!-- Brave VPN Card widget -->
+  <message name="IDS_BRAVE_VPN_WIDGET_FEATURE_3" desc="Last feature statement for setting advertising">
+    Protect every app on your device
+  </message>
+  <message name="IDS_BRAVE_VPN_WIDGET_TITLE" desc="The text for the vpn card title">
+    Brave VPN
+  </message>
+  <message name="IDS_BRAVE_VPN_WIDGET_SETTING_DESC" desc="The text for vpn card description in customize menu">
+    Extra privacy &amp; security online.
+  </message>
+  <message name="IDS_BRAVE_VPN_WIDGET_CHANGE_LABEL" desc="The text for change link in vpn card">
+    Change
+  </message>
+  <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>
diff --git a/components/webui/webui_resources.cc b/components/webui/webui_resources.cc
@@ -413,9 +413,22 @@ base::span<const webui::LocalizedString> GetWebUILocalizedStrings(
                {"loading", IDS_BRAVE_REWARDS_LOADING_LABEL},
 
                // Brave VPN Widget
-               {"braveVPNWidgetTitle", IDS_BRAVE_VPN_WIDGET_TITLE},
-               {"braveVPNWidgetSettingTitle", IDS_BRAVE_VPN_WIDGET_TITLE},
-               {"braveVPNWidgetSettingDesc", IDS_BRAVE_VPN_WIDGET_SETTING_DESC},
+               {"braveVpnWidgetTitle", IDS_BRAVE_VPN_WIDGET_TITLE},
+               {"braveVpnWidgetSettingTitle", IDS_BRAVE_VPN_WIDGET_TITLE},
+               {"braveVpnWidgetSettingDesc", IDS_BRAVE_VPN_WIDGET_SETTING_DESC},
+               {"braveVpnFeature1", IDS_BRAVE_VPN_FEATURE_1},
+               {"braveVpnFeature2", IDS_BRAVE_VPN_FEATURE_2},
+               {"braveVpnWidgetFeature3", IDS_BRAVE_VPN_WIDGET_FEATURE_3},
+               {"braveVpnConnected", IDS_BRAVE_VPN_CONNECTED},
+               {"braveVpnConnecting", IDS_BRAVE_VPN_CONNECTING},
+               {"braveVpnDisconnected", IDS_BRAVE_VPN_DISCONNECTED},
+               {"braveVpnDisconnecting", IDS_BRAVE_VPN_DISCONNECTING},
+               {"braveVpnPoweredBy", IDS_BRAVE_VPN_POWERED_BY},
+               {"braveVpnOptimal",
+                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},
 
                // Brave Talk  Widget
                {"braveTalkWidgetTitle", IDS_BRAVE_TALK_WIDGET_TITLE},