@plone/volto 16.20.5 → 16.20.6

package/.changelog.draft

@@ -1,18 +1,6 @@
-## 16.20.5 (2023-05-12)
+## 16.20.6 (2023-05-12)
 
 ### Bugfix
 
-- Apply suggestion from browser for password field @lord2anil [#3990](https://github.com/plone/volto/issues/3990)
-- The tabs for the add page was unresponsive on mobile devices. Fixed this by changing flex-wrap property. @sudhanshu1309 [#4506](https://github.com/plone/volto/issues/4506)
-- (fix):Object.normaliseMail: Cannot read properties of null @dobri1408 [#4558](https://github.com/plone/volto/issues/4558)
-
-### Internal
-
-- Upgrade to Plone 6.0.4 @sneridagh [#4743](https://github.com/plone/volto/issues/4743)
-
-### Documentation
-
-- Added documentation regarding the static middleware. @BhardwajAditya-github [#4518](https://github.com/plone/volto/issues/4518)
-- Backport most documentation differences from `master` to `16.x.x`. @stevepiercy [#4727](https://github.com/plone/volto/issues/4727)
-- Fix link in Volto, remove from linkcheck ignore in Documentation. @stevepiercy [#4742](https://github.com/plone/volto/issues/4742)
+- Fix language negotiation for language codes that include a region (e.g. `pt-br`). @davisagli [#4644](https://github.com/plone/volto/issues/4644)
 

package/CHANGELOG.md

@@ -8,6 +8,13 @@
 
 <!-- towncrier release notes start -->
 
+## 16.20.6 (2023-05-12)
+
+### Bugfix
+
+- Fix language negotiation for language codes that include a region (e.g. `pt-br`). @davisagli [#4644](https://github.com/plone/volto/issues/4644)
+
+
 ## 16.20.5 (2023-05-12)
 
 ### Bugfix

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "16.20.5",
+  "version": "16.20.6",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"

package/packages/volto-slate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone/volto-slate",
-  "version": "16.20.5",
+  "version": "16.20.6",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/actions/language/language.js

@@ -1,5 +1,9 @@
 import { updateIntl } from 'react-intl-redux';
-import { normalizeLanguageName, getCookieOptions } from '@plone/volto/helpers';
+import {
+  toGettextLang,
+  toReactIntlLang,
+  getCookieOptions,
+} from '@plone/volto/helpers';
 import Cookies from 'universal-cookie';
 
 export function changeLanguageCookies(language, req) {
@@ -11,15 +15,11 @@ export function changeLanguageCookies(language, req) {
   });
 
   if (!req) {
-    cookies.set(
-      'I18N_LANGUAGE',
-      normalizeLanguageName(language) || '',
-      cookieOptions,
-    );
+    cookies.set('I18N_LANGUAGE', toGettextLang(language) || '', cookieOptions);
   } else {
     req.universalCookies.set(
       'I18N_LANGUAGE',
-      normalizeLanguageName(language) || '',
+      toGettextLang(language) || '',
       cookieOptions,
     );
   }
@@ -36,7 +36,7 @@ export function changeLanguage(language, locale, req) {
   changeLanguageCookies(language, req);
 
   return updateIntl({
-    locale: language,
+    locale: toReactIntlLang(language),
     messages: locale,
   });
 }

package/src/components/manage/Add/Add.jsx

@@ -33,7 +33,7 @@ import {
   getBlocksLayoutFieldname,
   getLanguageIndependentFields,
   langmap,
-  normalizeLanguageName,
+  toGettextLang,
 } from '@plone/volto/helpers';
 
 import { preloadLazyLibs } from '@plone/volto/helpers/Loadable';
@@ -219,7 +219,7 @@ class Add extends Component {
   onCancel() {
     if (this.props.location?.state?.translationOf) {
       const language = this.props.location.state.languageFrom;
-      const langFileName = normalizeLanguageName(language);
+      const langFileName = toGettextLang(language);
       import('@root/../locales/' + langFileName + '.json').then((locale) => {
         this.props.changeLanguage(language, locale.default);
       });

package/src/components/manage/Blocks/Search/components/DateRangeFacet.jsx

@@ -4,6 +4,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { compose } from 'redux';
 import { Icon } from '@plone/volto/components';
+import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
 import { connect } from 'react-redux';
 
 import leftKey from '@plone/volto/icons/left-key.svg';
@@ -82,7 +83,9 @@ const DateRangeFacet = (props) => {
             noBorder
             showClearDates
             customCloseIcon={<CloseIcon />}
-            displayFormat={moment.localeData(lang).longDateFormat('L')}
+            displayFormat={moment
+              .localeData(toBackendLang(lang))
+              .longDateFormat('L')}
             focusedInput={focused}
             onFocusChange={(focusedInput) => setFocused(focusedInput)}
             onDatesChange={({ startDate, endDate }) => {

package/src/components/manage/Multilingual/CreateTranslation.jsx

@@ -6,7 +6,7 @@ import {
   getTranslationLocator,
   getContent,
 } from '@plone/volto/actions';
-import { flattenToAppURL, normalizeLanguageName } from '@plone/volto/helpers';
+import { flattenToAppURL, toGettextLang } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 const CreateTranslation = (props) => {
@@ -33,7 +33,7 @@ const CreateTranslation = (props) => {
     return () => {
       // We change the interface language
       if (config.settings.supportedLanguages.includes(language)) {
-        const langFileName = normalizeLanguageName(language);
+        const langFileName = toGettextLang(language);
         import('@root/../locales/' + langFileName + '.json').then((locale) => {
           dispatch(changeLanguage(language, locale.default));
         });

package/src/components/manage/Multilingual/TranslationObject.jsx

@@ -15,7 +15,8 @@ import {
   Api,
   flattenToAppURL,
   langmap,
-  normalizeLanguageName,
+  toGettextLang,
+  toReactIntlLang,
 } from '@plone/volto/helpers';
 import { createBrowserHistory } from 'history';
 const messages = defineMessages({
@@ -55,9 +56,9 @@ const TranslationObject = ({
       setLoadingLocale(true);
       let lang =
         config.settings.supportedLanguages[Object.keys(locales).length];
-      const langFileName = normalizeLanguageName(lang);
+      const langFileName = toGettextLang(lang);
       import('@root/../locales/' + langFileName + '.json').then((locale) => {
-        setLocales({ ...locales, [lang]: locale.default });
+        setLocales({ ...locales, [toReactIntlLang(lang)]: locale.default });
         setLoadingLocale(false);
       });
     }

package/src/components/manage/Preferences/PersonalPreferences.jsx

@@ -15,7 +15,7 @@ import { toast } from 'react-toastify';
 import { Form, Toast } from '@plone/volto/components';
 import languages from '@plone/volto/constants/Languages';
 import { changeLanguage } from '@plone/volto/actions';
-import { normalizeLanguageName } from '@plone/volto/helpers';
+import { toGettextLang } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -86,7 +86,7 @@ class PersonalPreferences extends Component {
   onSubmit(data) {
     let language = data.language || 'en';
     if (config.settings.supportedLanguages.includes(language)) {
-      const langFileName = normalizeLanguageName(language);
+      const langFileName = toGettextLang(language);
       import('@root/../locales/' + langFileName + '.json').then((locale) => {
         this.props.changeLanguage(language, locale.default);
       });

package/src/components/manage/Toolbar/Types.jsx

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { filter, find, isEmpty, map } from 'lodash';
 import { FormattedMessage } from 'react-intl';
-import { flattenToAppURL, langmap } from '@plone/volto/helpers';
+import { flattenToAppURL, langmap, toBackendLang } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 const Types = ({ types, pathname, content, currentLanguage }) => {
@@ -59,7 +59,7 @@ const Types = ({ types, pathname, content, currentLanguage }) => {
                   find(content['@components'].translations.items, {
                     language: lang,
                   }),
-              ) && currentLanguage !== lang,
+              ) && toBackendLang(currentLanguage) !== lang,
           );
 
           return (

package/src/components/manage/Widgets/DatetimeWidget.jsx

@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import loadable from '@loadable/component';
 import cx from 'classnames';
 import { Icon, FormFieldWrapper } from '@plone/volto/components';
-import { parseDateTime } from '@plone/volto/helpers';
+import { parseDateTime, toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import leftKey from '@plone/volto/icons/left-key.svg';
@@ -101,7 +101,7 @@ export class DatetimeWidgetComponent extends Component {
       // if passed value matches the construction time, we guess it's a default
       isDefault:
         parseDateTime(
-          this.props.lang,
+          toBackendLang(this.props.lang),
           this.props.value,
           undefined,
           this.moment,
@@ -111,7 +111,7 @@ export class DatetimeWidgetComponent extends Component {
 
   getInternalValue() {
     return parseDateTime(
-      this.props.lang,
+      toBackendLang(this.props.lang),
       this.props.value,
       undefined,
       this.moment,
@@ -211,7 +211,9 @@ export class DatetimeWidgetComponent extends Component {
               {...(noPastDates ? {} : { isOutsideRange: () => false })}
               onFocusChange={this.onFocusChange}
               noBorder
-              displayFormat={moment.localeData(lang).longDateFormat('L')}
+              displayFormat={moment
+                .localeData(toBackendLang(lang))
+                .longDateFormat('L')}
               navPrev={<PrevIcon />}
               navNext={<NextIcon />}
               id={`${id}-date`}
@@ -233,7 +235,9 @@ export class DatetimeWidgetComponent extends Component {
                 showSecond={false}
                 use12Hours={lang === 'en'}
                 id={`${id}-time`}
-                format={moment.localeData(lang).longDateFormat('LT')}
+                format={moment
+                  .localeData(toBackendLang(lang))
+                  .longDateFormat('LT')}
                 placeholder={intl.formatMessage(messages.time)}
                 focusOnOpen
                 placement="bottomRight"

package/src/components/manage/Widgets/RecurrenceWidget/ByDayField.jsx

@@ -7,6 +7,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Form, Grid, Button } from 'semantic-ui-react';
 import { Days } from './Utils';
+import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { useSelector } from 'react-redux';
 
@@ -18,7 +19,7 @@ import { useSelector } from 'react-redux';
 const ByDayField = ({ label, value, onChange, moment: momentlib }) => {
   const lang = useSelector((state) => state.intl.locale);
   const moment = momentlib.default;
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
 
   const toggleWeekDay = (dayName) => {
     var day = Days[dayName];

package/src/components/manage/Widgets/RecurrenceWidget/MonthOfTheYearField.jsx

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 import { map } from 'lodash';
 import { Form } from 'semantic-ui-react';
 import SelectInput from './SelectInput';
+import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { useSelector } from 'react-redux';
 
@@ -25,7 +26,7 @@ const MonthOfTheYearField = ({
 }) => {
   const moment = momentlib.default;
   const lang = useSelector((state) => state.intl.locale);
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
   const monthList = [
     ...map(moment.months(), (m, i) => ({
       value: i + 1,

package/src/components/manage/Widgets/RecurrenceWidget/Occurences.jsx

@@ -11,6 +11,7 @@ import { List, Button, Header, Label } from 'semantic-ui-react';
 import { Icon } from '@plone/volto/components';
 import addSVG from '@plone/volto/icons/circle-plus.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
+import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import { useSelector } from 'react-redux';
@@ -68,7 +69,7 @@ const Occurences_ = ({
 }) => {
   const moment = momentlib.default;
   const lang = useSelector((state) => state.intl.locale);
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
   let all = [];
   const isExcluded = (date) => {
     var dateISO = toISOString(date);

package/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx

@@ -23,6 +23,7 @@ import {
 } from 'semantic-ui-react';
 
 import { SelectWidget, Icon, DatetimeWidget } from '@plone/volto/components';
+import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import saveSVG from '@plone/volto/icons/save.svg';
@@ -183,7 +184,7 @@ class RecurrenceWidget extends Component {
     const { RRuleSet, rrulestr } = props.rrule;
 
     this.moment = this.props.moment.default;
-    this.moment.locale(this.props.lang);
+    this.moment.locale(toBackendLang(this.props.lang));
 
     let rruleSet = this.props.value
       ? rrulestr(props.value, {
@@ -201,7 +202,11 @@ class RecurrenceWidget extends Component {
       open: false,
       rruleSet: rruleSet,
       formValues: this.getFormValues(rruleSet),
-      RRULE_LANGUAGE: rrulei18n(this.props.intl, this.moment, this.props.lang),
+      RRULE_LANGUAGE: rrulei18n(
+        this.props.intl,
+        this.moment,
+        toBackendLang(this.props.lang),
+      ),
     };
   }
 

package/src/components/manage/Widgets/RecurrenceWidget/WeekdayOfTheMonthField.jsx

@@ -8,6 +8,7 @@ import { map } from 'lodash';
 import { Days } from './Utils';
 import SelectInput from './SelectInput';
 import { Form } from 'semantic-ui-react';
+import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { useSelector } from 'react-redux';
 
@@ -22,7 +23,7 @@ const WeekdayOfTheMonthField = (props) => {
   const lang = useSelector((state) => state.intl.locale);
 
   const moment = momentlib.default;
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
 
   const weekdayOfTheMonthList = [
     ...map(Object.keys(Days), (d) => ({

package/src/components/theme/Footer/Footer.jsx

@@ -9,7 +9,6 @@ import { map } from 'lodash';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import { useSelector, shallowEqual } from 'react-redux';
 import { UniversalLink } from '@plone/volto/components';
-import config from '@plone/volto/registry';
 import { flattenToAppURL, addAppURL } from '@plone/volto/helpers';
 
 const messages = defineMessages({
@@ -26,10 +25,8 @@ const messages = defineMessages({
  * @returns {string} Markup of the component
  */
 const Footer = ({ intl }) => {
-  const { settings } = config;
-  const { lang, siteActions = [] } = useSelector(
+  const { siteActions = [] } = useSelector(
     (state) => ({
-      lang: state.intl.locale,
       siteActions: state.actions?.actions?.site_actions,
     }),
     shallowEqual,
@@ -97,15 +94,7 @@ const Footer = ({ intl }) => {
                   <UniversalLink
                     className="item"
                     href={
-                      settings.isMultilingual
-                        ? `/${lang}/${
-                            item.url
-                              ? flattenToAppURL(item.url)
-                              : addAppURL(item.id)
-                          }`
-                        : item.url
-                        ? flattenToAppURL(item.url)
-                        : addAppURL(item.id)
+                      item.url ? flattenToAppURL(item.url) : addAppURL(item.id)
                     }
                   >
                     {item?.title}

package/src/components/theme/LanguageSelector/LanguageSelector.js

@@ -11,7 +11,12 @@ import { useSelector } from 'react-redux';
 import cx from 'classnames';
 import { find, map } from 'lodash';
 
-import { Helmet, langmap, flattenToAppURL } from '@plone/volto/helpers';
+import {
+  Helmet,
+  langmap,
+  flattenToAppURL,
+  toReactIntlLang,
+} from '@plone/volto/helpers';
 
 import config from '@plone/volto/registry';
 
@@ -42,7 +47,7 @@ const LanguageSelector = (props) => {
             aria-label={`${intl.formatMessage(
               messages.switchLanguageTo,
             )} ${langmap[lang].nativeName.toLowerCase()}`}
-            className={cx({ selected: lang === currentLang })}
+            className={cx({ selected: toReactIntlLang(lang) === currentLang })}
             to={translation ? flattenToAppURL(translation['@id']) : `/${lang}`}
             title={langmap[lang].nativeName}
             onClick={() => {
@@ -57,7 +62,7 @@ const LanguageSelector = (props) => {
     </div>
   ) : (
     <Helmet>
-      <html lang={settings.defaultLanguage} />
+      <html lang={toReactIntlLang(settings.defaultLanguage)} />
     </Helmet>
   );
 };

package/src/components/theme/Logo/Logo.jsx

@@ -8,6 +8,7 @@ import { Image } from 'semantic-ui-react';
 import { useSelector } from 'react-redux';
 import config from '@plone/volto/registry';
 import { UniversalLink } from '@plone/volto/components';
+import { toBackendLang } from '@plone/volto/helpers';
 import LogoImage from '@plone/volto/components/theme/Logo/Logo.svg';
 
 const messages = defineMessages({
@@ -34,7 +35,7 @@ const Logo = () => {
 
   return (
     <UniversalLink
-      href={settings.isMultilingual ? `/${lang}` : '/'}
+      href={settings.isMultilingual ? `/${toBackendLang(lang)}` : '/'}
       title={intl.formatMessage(messages.site)}
     >
       <Image

package/src/components/theme/MultilingualRedirector/MultilingualRedirector.jsx

@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux';
 import { useCookies } from 'react-cookie';
 import config from '@plone/volto/registry';
 import { changeLanguage } from '@plone/volto/actions';
-import { normalizeLanguageName } from '@plone/volto/helpers';
+import { toGettextLang } from '@plone/volto/helpers';
 
 const MultilingualRedirector = (props) => {
   const { settings } = config;
@@ -23,7 +23,7 @@ const MultilingualRedirector = (props) => {
     // const detectedLang = (navigator.language || navigator.userLanguage).substring(0, 2);
     let mounted = true;
     if (settings.isMultilingual && pathname === '/') {
-      const langFileName = normalizeLanguageName(redirectToLanguage);
+      const langFileName = toGettextLang(redirectToLanguage);
       import('@root/../locales/' + langFileName + '.json').then((locale) => {
         if (mounted) {
           dispatch(changeLanguage(redirectToLanguage, locale.default));

package/src/components/theme/Navigation/NavItem.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import { isInternalURL } from '@plone/volto/helpers';
+import { isInternalURL, toBackendLang } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 const NavItem = ({ item, lang }) => {
@@ -15,7 +15,9 @@ const NavItem = ({ item, lang }) => {
         className="item"
         activeClassName="active"
         exact={
-          settings.isMultilingual ? item.url === `/${lang}` : item.url === ''
+          settings.isMultilingual
+            ? item.url === `/${toBackendLang(lang)}`
+            : item.url === ''
         }
       >
         {item.title}

package/src/components/theme/Sitemap/Sitemap.jsx

@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { asyncConnect } from '@plone/volto/helpers';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Container } from 'semantic-ui-react';
-import { Helmet } from '@plone/volto/helpers';
+import { Helmet, toBackendLang } from '@plone/volto/helpers';
 import { Link } from 'react-router-dom';
 import config from '@plone/volto/registry';
 
@@ -40,7 +40,7 @@ class Sitemap extends Component {
   componentDidMount() {
     const { settings } = config;
     if (settings.isMultilingual) {
-      this.props.getNavigation(`${this.props.lang}`, 4);
+      this.props.getNavigation(`${toBackendLang(this.props.lang)}`, 4);
     } else {
       this.props.getNavigation('', 4);
     }
@@ -108,7 +108,9 @@ export default compose(
         const { settings } = config;
         const lang = getState().intl.locale;
         if (settings.isMultilingual) {
-          return __SERVER__ && dispatch(getNavigation(`${lang}`, 4));
+          return (
+            __SERVER__ && dispatch(getNavigation(`${toBackendLang(lang)}`, 4))
+          );
         } else {
           return __SERVER__ && dispatch(getNavigation('', 4));
         }

package/src/components/theme/View/EventDatesInfo.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { List } from 'semantic-ui-react';
 import cx from 'classnames';
 
+import { toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { useSelector } from 'react-redux';
 
@@ -28,7 +29,7 @@ const When_ = ({ start, end, whole_day, open_end, moment: momentlib }) => {
   const lang = useSelector((state) => state.intl.locale);
 
   const moment = momentlib.default;
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
 
   const datesInfo = datesForDisplay(start, end, moment);
   if (!datesInfo) {

package/src/components/theme/Widgets/DateWidget.jsx

@@ -2,10 +2,11 @@ import React from 'react';
 import cx from 'classnames';
 import moment from 'moment';
 import { useSelector } from 'react-redux';
+import { toBackendLang } from '@plone/volto/helpers';
 
 const DateWidget = ({ value, children, className, format = 'll' }) => {
   const lang = useSelector((state) => state.intl.locale);
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
   return value ? (
     <span className={cx(className, 'date', 'widget')}>
       {children

package/src/components/theme/Widgets/DatetimeWidget.jsx

@@ -2,10 +2,11 @@ import React from 'react';
 import cx from 'classnames';
 import moment from 'moment';
 import { useSelector } from 'react-redux';
+import { toBackendLang } from '@plone/volto/helpers';
 
 const DatetimeWidget = ({ value, children, className, format = 'lll' }) => {
   const lang = useSelector((state) => state.intl.locale);
-  moment.locale(lang);
+  moment.locale(toBackendLang(lang));
   return value ? (
     <span className={cx(className, 'datetime', 'widget')}>
       {children

package/src/helpers/Utils/Utils.js

@@ -174,13 +174,13 @@ export const parseDateTime = (locale, value, format, moment) => {
 };
 
 /**
- * Converts a language code to the format `lang_region`
+ * Converts a language code like pt-br to the format `pt_BR` (`lang_region`)
  * Useful for passing from Plone's i18n lang names to Xnix locale names
- * eg. LC_MESSAGES/lang_region.po filenames
+ * eg. LC_MESSAGES/lang_region.po filenames. Also used in the I18N_LANGUAGE cookie.
  * @param {string} language Language to be converted
  * @returns {string} Language converted
  */
-export const normalizeLanguageName = (language) => {
+export const toGettextLang = (language) => {
   if (language.includes('-')) {
     let normalizedLang = language.split('-');
     normalizedLang = `${normalizedLang[0]}_${normalizedLang[1].toUpperCase()}`;
@@ -189,23 +189,35 @@ export const normalizeLanguageName = (language) => {
 
   return language;
 };
+export const normalizeLanguageName = toGettextLang;
 
 /**
- * Converts a language code to the format `lang-region`
- * `react-intl` only supports this syntax, so coming from the language
- * negotiation of the `locale` lib, one need to convert it first
+ * Converts a language code like pt-br or pt_BR to the format `pt-BR`.
+ * `react-intl` only supports this syntax. We also use it for the locales
+ * in the volto Redux store.
  * @param {string} language Language to be converted
  * @returns {string} Language converted
  */
-export const toLangUnderscoreRegion = (language) => {
-  if (language.includes('_')) {
-    let langCode = language.split('_');
+export const toReactIntlLang = (language) => {
+  if (language.includes('_') || language.includes('-')) {
+    let langCode = language.split(/[-_]/);
     langCode = `${langCode[0]}-${langCode[1].toUpperCase()}`;
     return langCode;
   }
 
   return language;
 };
+export const toLangUnderscoreRegion = toReactIntlLang; // old name for backwards-compat
+
+/**
+ * Converts a language code like pt_BR or pt-BR to the format `pt-br`.
+ * This format is used on the backend and in volto config settings.
+ * @param {string} language Language to be converted
+ * @returns {string} Language converted
+ */
+export const toBackendLang = (language) => {
+  return toReactIntlLang(language).toLowerCase();
+};
 
 /**
  * Lookup if a given expander is set in apiExpanders for the given path and action type

package/src/helpers/Utils/Utils.test.js

@@ -6,7 +6,7 @@ import {
   getColor,
   getInitials,
   hasApiExpander,
-  normalizeLanguageName,
+  toGettextLang,
   parseDateTime,
   removeFromArray,
   reorderArray,
@@ -284,12 +284,12 @@ describe('Utils tests', () => {
     });
   });
 
-  describe('normalizeLanguageName', () => {
+  describe('toGettextLang', () => {
     it('Normalizes an extended language (pt_BR)', () => {
-      expect(normalizeLanguageName('pt-br')).toStrictEqual('pt_BR');
+      expect(toGettextLang('pt-br')).toStrictEqual('pt_BR');
     });
     it('Normalizes a simple language (ca)', () => {
-      expect(normalizeLanguageName('ca')).toStrictEqual('ca');
+      expect(toGettextLang('ca')).toStrictEqual('ca');
     });
   });
 

package/src/helpers/index.js

@@ -81,8 +81,11 @@ export {
   applyConfig,
   withServerErrorCode,
   parseDateTime,
-  normalizeLanguageName,
-  toLangUnderscoreRegion,
+  toGettextLang,
+  normalizeLanguageName, // old name for toGettextLang
+  toReactIntlLang,
+  toLangUnderscoreRegion, // old name for toReactIntlLang
+  toBackendLang,
   hasApiExpander,
   replaceItemOfArray,
   cloneDeepSchema,

package/src/middleware/api.js

@@ -18,7 +18,11 @@ import {
   SET_APIERROR,
 } from '@plone/volto/constants/ActionTypes';
 import { changeLanguage } from '@plone/volto/actions';
-import { normalizeLanguageName, getCookieOptions } from '@plone/volto/helpers';
+import {
+  toGettextLang,
+  toReactIntlLang,
+  getCookieOptions,
+} from '@plone/volto/helpers';
 let socket = null;
 
 /**
@@ -205,11 +209,11 @@ const apiMiddlewareFactory = (api) => ({ dispatch, getState }) => (next) => (
           const lang = result?.language?.token;
           if (
             lang &&
-            getState().intl.language !== lang &&
+            getState().intl.locale !== toReactIntlLang(lang) &&
             !subrequest &&
             config.settings.supportedLanguages.includes(lang)
           ) {
-            const langFileName = normalizeLanguageName(lang);
+            const langFileName = toGettextLang(lang);
             import('~/../locales/' + langFileName + '.json').then((locale) => {
               dispatch(changeLanguage(lang, locale.default));
             });

package/src/server.jsx

@@ -26,8 +26,9 @@ import {
   Html,
   Api,
   persistAuthToken,
-  normalizeLanguageName,
-  toLangUnderscoreRegion,
+  toBackendLang,
+  toGettextLang,
+  toReactIntlLang,
 } from '@plone/volto/helpers';
 import { changeLanguage } from '@plone/volto/actions';
 
@@ -44,9 +45,9 @@ let locales = {};
 
 if (config.settings) {
   config.settings.supportedLanguages.forEach((lang) => {
-    const langFileName = normalizeLanguageName(lang);
+    const langFileName = toGettextLang(lang);
     import('@root/../locales/' + langFileName + '.json').then((locale) => {
-      locales = { ...locales, [lang]: locale.default };
+      locales = { ...locales, [toReactIntlLang(lang)]: locale.default };
     });
   });
 }
@@ -101,13 +102,15 @@ server.use(function (err, req, res, next) {
 function setupServer(req, res, next) {
   const api = new Api(req);
 
-  const lang = new locale.Locales(
-    req.universalCookies.get('I18N_LANGUAGE') ||
-      config.settings.defaultLanguage ||
-      req.headers['accept-language'],
-  )
-    .best(supported)
-    .toString();
+  const lang = toReactIntlLang(
+    new locale.Locales(
+      req.universalCookies.get('I18N_LANGUAGE') ||
+        config.settings.defaultLanguage ||
+        req.headers['accept-language'],
+    )
+      .best(supported)
+      .toString(),
+  );
 
   // Minimum initial state for the fake Redux store instance
   const initialState = {
@@ -176,13 +179,15 @@ server.get('/*', (req, res) => {
 
   const browserdetect = detect(req.headers['user-agent']);
 
-  const lang = new locale.Locales(
-    req.universalCookies.get('I18N_LANGUAGE') ||
-      config.settings.defaultLanguage ||
-      req.headers['accept-language'],
-  )
-    .best(supported)
-    .toString();
+  const lang = toReactIntlLang(
+    new locale.Locales(
+      req.universalCookies.get('I18N_LANGUAGE') ||
+        config.settings.defaultLanguage ||
+        req.headers['accept-language'],
+    )
+      .best(supported)
+      .toString(),
+  );
 
   const authToken = req.universalCookies.get('auth_token');
   const initialState = {
@@ -217,7 +222,7 @@ server.get('/*', (req, res) => {
 
   loadOnServer({ store, location, routes, api })
     .then(() => {
-      const cookie_lang =
+      const initialLang =
         req.universalCookies.get('I18N_LANGUAGE') ||
         config.settings.defaultLanguage ||
         req.headers['accept-language'];
@@ -230,15 +235,15 @@ server.get('/*', (req, res) => {
       // present the language token field, for some reason. In this case, we
       // should follow the cookie rather then switching the language
       const contentLang = store.getState().content.get?.error
-        ? cookie_lang
+        ? initialLang
         : store.getState().content.data?.language?.token ||
           config.settings.defaultLanguage;
 
-      if (cookie_lang !== contentLang) {
-        const newLocale = toLangUnderscoreRegion(
+      if (toBackendLang(initialLang) !== contentLang) {
+        const newLang = toReactIntlLang(
           new locale.Locales(contentLang).best(supported).toString(),
         );
-        store.dispatch(changeLanguage(newLocale, locales[newLocale], req));
+        store.dispatch(changeLanguage(newLang, locales[newLang], req));
       }
 
       const context = {};