From 01dc782b42343b323e77d141d3efcc9c68cabfa6 Mon Sep 17 00:00:00 2001
From: Mikel Larreategi <mlarreategi@codesyntax.com>
Date: Thu, 7 Dec 2023 09:27:02 +0100
Subject: [PATCH] get multilingual settings from backend

---
 packages/volto/src/actions/content/content.js |  1 -
 .../volto/src/components/manage/Add/Add.jsx   |  3 ++-
 .../src/components/manage/Add/Add.test.jsx    |  3 ++-
 .../ContentsBreadcrumbs.Multilingual.test.jsx | 10 +++++----
 .../manage/Contents/ContentsBreadcrumbs.jsx   | 15 +++++++------
 .../volto/src/components/manage/Edit/Edit.jsx |  3 ++-
 .../manage/Multilingual/CompareLanguages.jsx  |  7 +++---
 .../manage/Multilingual/CreateTranslation.jsx |  5 ++++-
 .../Multilingual/CreateTranslation.test.jsx   | 11 +++++-----
 .../Multilingual/ManageTranslations.jsx       |  5 ++++-
 .../Multilingual/ManageTranslations.test.jsx  | 11 +++++-----
 .../manage/Multilingual/TranslationObject.jsx | 10 ++++++---
 .../Preferences/PersonalPreferences.jsx       |  2 +-
 .../src/components/manage/Toolbar/More.jsx    |  3 ++-
 .../src/components/manage/Toolbar/Toolbar.jsx |  3 ++-
 .../src/components/manage/Toolbar/Types.jsx   | 17 ++++++++++----
 .../LanguageSelector/LanguageSelector.js      |  8 +++++--
 .../LanguageSelector.test.jsx                 | 12 +++++-----
 .../theme/Logo/Logo.Multilingual.test.jsx     | 16 ++++++++++----
 .../MultilingualRedirector.jsx                | 19 ++++++++--------
 .../MultilingualRedirector.test.jsx           |  8 +++----
 .../Navigation.Multilingual.test.jsx          | 16 ++++++++++----
 .../components/theme/NotFound/NotFound.jsx    |  5 +++--
 .../src/components/theme/Sitemap/Sitemap.jsx  |  8 ++++---
 packages/volto/src/config/index.js            | 22 ++++++++++++++-----
 .../volto/src/helpers/Multilingual/index.js   | 21 ++++++++++++++++++
 packages/volto/src/helpers/index.js           |  1 +
 packages/volto/src/middleware/api.js          |  4 +++-
 packages/volto/src/reducers/addons/addons.js  |  4 ++++
 29 files changed, 172 insertions(+), 81 deletions(-)
 create mode 100644 packages/volto/src/helpers/Multilingual/index.js

diff --git a/packages/volto/src/actions/content/content.js b/packages/volto/src/actions/content/content.js
index 145a3a031f..57d87f3fc2 100644
--- a/packages/volto/src/actions/content/content.js
+++ b/packages/volto/src/actions/content/content.js
@@ -150,7 +150,6 @@ export function getContent(
           b_size: settings.defaultPageSize,
         }
       : {},
-    settings.isMultilingual ? { expand: 'translations' } : {},
   );
 
   let qs = Object.keys(query)
diff --git a/packages/volto/src/components/manage/Add/Add.jsx b/packages/volto/src/components/manage/Add/Add.jsx
index d39387cbee..fa6f6c92b3 100644
--- a/packages/volto/src/components/manage/Add/Add.jsx
+++ b/packages/volto/src/components/manage/Add/Add.jsx
@@ -203,7 +203,7 @@ class Add extends Component {
         ? keys(this.props.schema.definitions)
         : null,
       '@type': this.props.type,
-      ...(config.settings.isMultilingual &&
+      ...(this.props.isMultilingual &&
         this.props.location?.state?.translationOf && {
           translation_of: this.props.location.state.translationOf,
           language: this.props.location.state.language,
@@ -459,6 +459,7 @@ export default compose(
       pathname: props.location.pathname,
       returnUrl: qs.parse(props.location.search).return_url,
       type: qs.parse(props.location.search).type,
+      isMultilingual: state.addons.isMultilingual,
     }),
     { createContent, getSchema, changeLanguage },
   ),
diff --git a/packages/volto/src/components/manage/Add/Add.test.jsx b/packages/volto/src/components/manage/Add/Add.test.jsx
index 2a1ee56192..d7d40ae949 100644
--- a/packages/volto/src/components/manage/Add/Add.test.jsx
+++ b/packages/volto/src/components/manage/Add/Add.test.jsx
@@ -9,7 +9,6 @@ import Add from './Add';
 const mockStore = configureStore();
 
 beforeAll(() => {
-  config.settings.supportedLanguages = ['de'];
   config.settings.lazyBundles = {
     cms: [],
   };
@@ -38,6 +37,8 @@ describe('Add', () => {
         locale: 'en',
         messages: {},
       },
+      site: {
+        "plone.available_languages":  ['de']
     });
     const component = renderer.create(
       <Provider store={store}>
diff --git a/packages/volto/src/components/manage/Contents/ContentsBreadcrumbs.Multilingual.test.jsx b/packages/volto/src/components/manage/Contents/ContentsBreadcrumbs.Multilingual.test.jsx
index e9ac8d3385..38e54db864 100644
--- a/packages/volto/src/components/manage/Contents/ContentsBreadcrumbs.Multilingual.test.jsx
+++ b/packages/volto/src/components/manage/Contents/ContentsBreadcrumbs.Multilingual.test.jsx
@@ -7,10 +7,6 @@ import config from '@plone/volto/registry';
 
 import ContentsBreadcrumbs from './ContentsBreadcrumbs';
 
-beforeAll(() => {
-  config.settings.isMultilingual = true;
-});
-
 const mockStore = configureStore();
 
 describe('ContentsBreadcrumbs Multilingual', () => {
@@ -24,6 +20,9 @@ describe('ContentsBreadcrumbs Multilingual', () => {
         locale: 'en',
         messages: {},
       },
+      addons: {
+        isMultilingual: true,
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
@@ -49,6 +48,9 @@ describe('ContentsBreadcrumbs Multilingual', () => {
         locale: 'en',
         messages: {},
       },
+      addons: {
+        isMultilingual: true,
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
diff --git a/packages/volto/src/components/manage/Contents/ContentsBreadcrumbs.jsx b/packages/volto/src/components/manage/Contents/ContentsBreadcrumbs.jsx
index 417d8338d7..774b2014e3 100644
--- a/packages/volto/src/components/manage/Contents/ContentsBreadcrumbs.jsx
+++ b/packages/volto/src/components/manage/Contents/ContentsBreadcrumbs.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Breadcrumb } from 'semantic-ui-react';
 import { Link, useLocation } from 'react-router-dom';
 import { defineMessages, useIntl } from 'react-intl';
+import { useSelector } from 'react-redux';
 import { langmap } from '@plone/volto/helpers';
 import ContentsBreadcrumbsRootItem from '@plone/volto/components/manage/Contents/ContentsBreadcrumbsRootItem';
 import ContentsBreadcrumbsHomeItem from '@plone/volto/components/manage/Contents/ContentsBreadcrumbsHomeItem';
@@ -20,15 +21,15 @@ const messages = defineMessages({
 });
 
 const ContentsBreadcrumbs = (props) => {
-  const { settings } = config;
   const { items } = props;
   const intl = useIntl();
   const pathname = useLocation().pathname;
-  const lang = pathname.split('/')[1];
+  const isMultilingual = useSelector((state) => state.addons.isMultilingual);
+  const navroot = useSelector((state) => state.navroot.data.navroot);
 
   return (
     <Breadcrumb>
-      {settings.isMultilingual && (
+      {isMultilingual && (
         <>
           <Link
             to="/contents"
@@ -40,16 +41,16 @@ const ContentsBreadcrumbs = (props) => {
           <Breadcrumb.Divider />
         </>
       )}
-      {settings.isMultilingual && pathname?.split('/')?.length > 2 && (
+      {isMultilingual && pathname?.split('/')?.length > 2 && (
         <Link
-          to={`/${lang}/contents`}
+          href={`/${navroot['@id']}/contents`}
           className="section"
           title={intl.formatMessage(messages.home)}
         >
-          {langmap?.[lang]?.nativeName ?? lang}
+          {navroot['title']}
         </Link>
       )}
-      {!settings.isMultilingual && (
+      {!isMultilingual && (
         <Link
           to="/contents"
           className="section"
diff --git a/packages/volto/src/components/manage/Edit/Edit.jsx b/packages/volto/src/components/manage/Edit/Edit.jsx
index e8bef08ef2..18438c882b 100644
--- a/packages/volto/src/components/manage/Edit/Edit.jsx
+++ b/packages/volto/src/components/manage/Edit/Edit.jsx
@@ -431,7 +431,7 @@ class Edit extends Component {
                     />
                   </Button>
 
-                  {config.settings.isMultilingual && (
+                  {this.props.isMultilingual && (
                     <CompareLanguages
                       content={this.props.content}
                       visual={this.state.visual}
@@ -468,6 +468,7 @@ export const __test__ = compose(
       createRequest: state.content.create,
       pathname: props.location.pathname,
       returnUrl: qs.parse(props.location.search).return_url,
+      isMultilingual: state.addons.isMultilingual,
     }),
     {
       updateContent,
diff --git a/packages/volto/src/components/manage/Multilingual/CompareLanguages.jsx b/packages/volto/src/components/manage/Multilingual/CompareLanguages.jsx
index 87d19296b7..03441ffe97 100644
--- a/packages/volto/src/components/manage/Multilingual/CompareLanguages.jsx
+++ b/packages/volto/src/components/manage/Multilingual/CompareLanguages.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import config from '@plone/volto/registry';
+import { useSelector } from 'react-redux';
 import { langmap, useDetectClickOutside } from '@plone/volto/helpers';
 
 import { Icon } from '@plone/volto/components';
@@ -105,7 +105,8 @@ const CompareLanguages = React.forwardRef((props, ref) => {
 
   const intl = useIntl();
   const [viewMenu, setViewMenu] = useState(false);
-  const translations = config.settings.isMultilingual
+  const isMultilingual = useSelector((state) => state.addons.isMultilingual);
+  const translations = isMultilingual
     ? content?.['@components']?.translations?.items || []
     : [];
 
@@ -114,7 +115,7 @@ const CompareLanguages = React.forwardRef((props, ref) => {
     translationsObject[t.language] = t['@id'];
   });
 
-  if (config.settings.isMultilingual && translations.length > 0) {
+  if (isMultilingual && translations.length > 0) {
     return (
       <div className="toolbar-compare-translations-wrapper">
         <div className="toolbar-button-spacer" />
diff --git a/packages/volto/src/components/manage/Multilingual/CreateTranslation.jsx b/packages/volto/src/components/manage/Multilingual/CreateTranslation.jsx
index adc364f507..57351c975d 100644
--- a/packages/volto/src/components/manage/Multilingual/CreateTranslation.jsx
+++ b/packages/volto/src/components/manage/Multilingual/CreateTranslation.jsx
@@ -15,6 +15,9 @@ const CreateTranslation = (props) => {
   const [translationLocation, setTranslationLocation] = React.useState(null);
   const [translationObject, setTranslationObject] = React.useState(null);
   const languageFrom = useSelector((state) => state.intl.locale);
+  const availableLanguages = useSelector(
+    (state) => state.site.data['plone.available_languages'],
+  );
 
   React.useEffect(() => {
     // Only on mount, we dispatch the locator query
@@ -32,7 +35,7 @@ const CreateTranslation = (props) => {
     // On unmount we dispatch the language change
     return () => {
       // We change the interface language
-      if (config.settings.supportedLanguages.includes(language)) {
+      if (availableLanguages.includes(language)) {
         const langFileName = toGettextLang(language);
         import('@root/../locales/' + langFileName + '.json').then((locale) => {
           dispatch(changeLanguage(language, locale.default));
diff --git a/packages/volto/src/components/manage/Multilingual/CreateTranslation.test.jsx b/packages/volto/src/components/manage/Multilingual/CreateTranslation.test.jsx
index 56ff1b32a1..9736d0d912 100644
--- a/packages/volto/src/components/manage/Multilingual/CreateTranslation.test.jsx
+++ b/packages/volto/src/components/manage/Multilingual/CreateTranslation.test.jsx
@@ -7,11 +7,6 @@ import config from '@plone/volto/registry';
 
 import CreateTranslation from './CreateTranslation';
 
-beforeAll(() => {
-  config.settings.isMultilingual = true;
-  config.settings.supportedLanguages = ['de', 'es'];
-});
-
 const mockStore = configureStore();
 
 describe('CreateTranslation', () => {
@@ -24,6 +19,12 @@ describe('CreateTranslation', () => {
       translations: {
         translationLocation: '/es',
       },
+      site: {
+        'plone.availableLanguages': ['de', 'es'],
+      },
+      addons: {
+        isMultilingual: true,
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
diff --git a/packages/volto/src/components/manage/Multilingual/ManageTranslations.jsx b/packages/volto/src/components/manage/Multilingual/ManageTranslations.jsx
index a375b98e89..5a393b87df 100644
--- a/packages/volto/src/components/manage/Multilingual/ManageTranslations.jsx
+++ b/packages/volto/src/components/manage/Multilingual/ManageTranslations.jsx
@@ -67,6 +67,9 @@ const ManageTranslations = (props) => {
   const { isObjectBrowserOpen, openObjectBrowser } = props;
 
   const currentSelectedItem = React.useRef(null);
+  const availableLanguages = useSelector(
+    (state) => state.site.data['plone.available_languages'],
+  );
 
   React.useEffect(() => {
     if (!content) {
@@ -180,7 +183,7 @@ const ManageTranslations = (props) => {
               </Table.Row>
             </Table.Header>
             <Table.Body>
-              {config.settings.supportedLanguages.map((lang) => (
+              {availableLanguages.map((lang) => (
                 <Table.Row key={lang}>
                   <Table.Cell collapsing>
                     {lang === content.language.token ? (
diff --git a/packages/volto/src/components/manage/Multilingual/ManageTranslations.test.jsx b/packages/volto/src/components/manage/Multilingual/ManageTranslations.test.jsx
index a8d51b4101..52df1c0191 100644
--- a/packages/volto/src/components/manage/Multilingual/ManageTranslations.test.jsx
+++ b/packages/volto/src/components/manage/Multilingual/ManageTranslations.test.jsx
@@ -7,11 +7,6 @@ import config from '@plone/volto/registry';
 
 import ManageTranslations from './ManageTranslations';
 
-beforeAll(() => {
-  config.settings.isMultilingual = true;
-  config.settings.supportedLanguages = ['de', 'es'];
-});
-
 jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
@@ -35,6 +30,12 @@ describe('ManageTranslations', () => {
           language: 'en',
         },
       },
+      site: {
+        'plone.available_languages': ['de', 'es'],
+      },
+      addons: {
+        isMultilingual: true,
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
diff --git a/packages/volto/src/components/manage/Multilingual/TranslationObject.jsx b/packages/volto/src/components/manage/Multilingual/TranslationObject.jsx
index 043e4fa8e0..c6c3fcfc6e 100644
--- a/packages/volto/src/components/manage/Multilingual/TranslationObject.jsx
+++ b/packages/volto/src/components/manage/Multilingual/TranslationObject.jsx
@@ -6,6 +6,7 @@ import { Provider } from 'react-intl-redux';
 import { Form, Field } from '@plone/volto/components';
 import config from '@plone/volto/registry';
 import configureStore from '@plone/volto/store';
+import { useSelector } from 'react-redux';
 import {
   Api,
   flattenToAppURL,
@@ -38,21 +39,24 @@ const TranslationObject = ({
     setActiveMenu(name);
   };
 
+  const availableLanguages = useSelector(
+    (state) => state.site.data['plone.available_languages'],
+  );
+
   useEffect(() => {
     if (
       !loadingLocale &&
       Object.keys(locales).length < config.settings.supportedLanguages.length
     ) {
       setLoadingLocale(true);
-      let lang =
-        config.settings.supportedLanguages[Object.keys(locales).length];
+      let lang = availableLanguages[Object.keys(locales).length];
       const langFileName = toGettextLang(lang);
       import('@root/../locales/' + langFileName + '.json').then((locale) => {
         setLocales({ ...locales, [toReactIntlLang(lang)]: locale.default });
         setLoadingLocale(false);
       });
     }
-  }, [loadingLocale, locales]);
+  }, [loadingLocale, locales, availableLanguages]);
 
   const api = new Api();
   const history = createBrowserHistory();
diff --git a/packages/volto/src/components/manage/Preferences/PersonalPreferences.jsx b/packages/volto/src/components/manage/Preferences/PersonalPreferences.jsx
index cae87d2a04..c9b11ae980 100644
--- a/packages/volto/src/components/manage/Preferences/PersonalPreferences.jsx
+++ b/packages/volto/src/components/manage/Preferences/PersonalPreferences.jsx
@@ -85,7 +85,7 @@ class PersonalPreferences extends Component {
    */
   onSubmit(data) {
     let language = data.language || 'en';
-    if (config.settings.supportedLanguages.includes(language)) {
+    if (availableLanguages.includes(language)) {
       const langFileName = toGettextLang(language);
       import('@root/../locales/' + langFileName + '.json').then((locale) => {
         this.props.changeLanguage(language, locale.default);
diff --git a/packages/volto/src/components/manage/Toolbar/More.jsx b/packages/volto/src/components/manage/Toolbar/More.jsx
index 58e1644684..cf88f51f83 100644
--- a/packages/volto/src/components/manage/Toolbar/More.jsx
+++ b/packages/volto/src/components/manage/Toolbar/More.jsx
@@ -522,7 +522,7 @@ class More extends Component {
                 )}
             </>
           )}
-        {editAction && config.settings.isMultilingual && (
+        {editAction && this.props.isMultilingual && (
           <Plug pluggable="toolbar-more-manage-content" id="multilingual">
             <li>
               <Link to={`${path}/manage-translations`}>
@@ -548,6 +548,7 @@ export default compose(
       content: state.content.data,
       lang: state.intl.locale,
       workingCopy: state.workingCopy,
+      isMultilingual: state.addons.isMultilingual,
     }),
     { applyWorkingCopy, createWorkingCopy, removeWorkingCopy },
   ),
diff --git a/packages/volto/src/components/manage/Toolbar/Toolbar.jsx b/packages/volto/src/components/manage/Toolbar/Toolbar.jsx
index 133b44c98f..d0f475cc0a 100644
--- a/packages/volto/src/components/manage/Toolbar/Toolbar.jsx
+++ b/packages/volto/src/components/manage/Toolbar/Toolbar.jsx
@@ -509,7 +509,7 @@ class Toolbar extends Component {
                     {this.props.content &&
                       ((this.props.content.is_folderish &&
                         this.props.types.length > 0) ||
-                        (config.settings.isMultilingual &&
+                        (this.props.isMultilingual &&
                           this.props.content['@components']?.translations)) && (
                         <button
                           className="add"
@@ -619,6 +619,7 @@ export default compose(
       pathname: props.pathname,
       types: filter(state.types.types, 'addable'),
       unlockRequest: state.content.unlock,
+      isMultilingual: state.addons.isMultilingual,
     }),
     { getTypes, listActions, setExpandedToolbar, unlockContent },
   ),
diff --git a/packages/volto/src/components/manage/Toolbar/Types.jsx b/packages/volto/src/components/manage/Toolbar/Types.jsx
index a47abd50c2..64abb5fea0 100644
--- a/packages/volto/src/components/manage/Toolbar/Types.jsx
+++ b/packages/volto/src/components/manage/Toolbar/Types.jsx
@@ -7,10 +7,17 @@ import { FormattedMessage } from 'react-intl';
 import { flattenToAppURL, langmap, toBackendLang } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
-const Types = ({ types, pathname, content, currentLanguage }) => {
+const Types = ({
+  types,
+  pathname,
+  content,
+  currentLanguage,
+  availableLanguages,
+  isMultilingual,
+}) => {
   const { settings } = config;
   return types.length > 0 ||
-    (settings.isMultilingual && content['@components'].translations) ? (
+    (isMultilingual && content['@components'].translations) ? (
     <div className="menu-more pastanaga-menu">
       {types.length > 0 && (
         <>
@@ -48,11 +55,11 @@ const Types = ({ types, pathname, content, currentLanguage }) => {
           </div>
         </>
       )}
-      {settings.isMultilingual &&
+      {isMultilingual &&
         content['@components'].translations &&
         (() => {
           const translationsLeft = filter(
-            settings.supportedLanguages,
+            availableLanguages,
             (lang) =>
               !Boolean(
                 content['@components'].translations &&
@@ -123,6 +130,8 @@ export default connect(
   (state) => ({
     types: filter(state.types.types, 'addable'),
     currentLanguage: state.intl.locale,
+    availableLanguages: state.site.data['plone.available_languages'],
+    isMultilingual: state.addons.isMultilingual,
   }),
   {},
 )(Types);
diff --git a/packages/volto/src/components/theme/LanguageSelector/LanguageSelector.js b/packages/volto/src/components/theme/LanguageSelector/LanguageSelector.js
index 460dec541d..d8856564c2 100644
--- a/packages/volto/src/components/theme/LanguageSelector/LanguageSelector.js
+++ b/packages/volto/src/components/theme/LanguageSelector/LanguageSelector.js
@@ -35,12 +35,16 @@ const LanguageSelector = (props) => {
   const translations = useSelector(
     (state) => state.content.data?.['@components']?.translations?.items,
   );
+  const availableLanguages = useSelector(
+    (state) => state.site.data['plone.available_languages'],
+  );
+  const isMultilingual = useSelector((state) => state.addons.isMultilingual);
 
   const { settings } = config;
 
-  return settings.isMultilingual ? (
+  return isMultilingual ? (
     <div className="language-selector">
-      {map(settings.supportedLanguages, (lang) => {
+      {map(availableLanguages, (lang) => {
         const translation = find(translations, { language: lang });
         return (
           <Link
diff --git a/packages/volto/src/components/theme/LanguageSelector/LanguageSelector.test.jsx b/packages/volto/src/components/theme/LanguageSelector/LanguageSelector.test.jsx
index 3ff27a06de..2d6feac4b3 100644
--- a/packages/volto/src/components/theme/LanguageSelector/LanguageSelector.test.jsx
+++ b/packages/volto/src/components/theme/LanguageSelector/LanguageSelector.test.jsx
@@ -3,15 +3,9 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
-import config from '@plone/volto/registry';
 
 import LanguageSelector from './LanguageSelector';
 
-beforeAll(() => {
-  config.settings.isMultilingual = true;
-  config.settings.supportedLanguages = ['de', 'es'];
-});
-
 const mockStore = configureStore();
 
 describe('LanguageSelector', () => {
@@ -30,6 +24,12 @@ describe('LanguageSelector', () => {
           },
         },
       },
+      site: {
+        'plone.available_languages': ['de', 'es'],
+      },
+      addons: {
+        isMultilingual: true,
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
diff --git a/packages/volto/src/components/theme/Logo/Logo.Multilingual.test.jsx b/packages/volto/src/components/theme/Logo/Logo.Multilingual.test.jsx
index 2091e9b0f1..41ee6c85d0 100644
--- a/packages/volto/src/components/theme/Logo/Logo.Multilingual.test.jsx
+++ b/packages/volto/src/components/theme/Logo/Logo.Multilingual.test.jsx
@@ -7,10 +7,6 @@ import config from '@plone/volto/registry';
 
 import Logo from './Logo';
 
-beforeAll(() => {
-  config.settings.isMultilingual = true;
-});
-
 const mockStore = configureStore();
 
 describe('Multilingual Logo', () => {
@@ -32,6 +28,9 @@ describe('Multilingual Logo', () => {
       site: {
         data: {},
       },
+      addons: {
+        isMultilingual: true,
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
@@ -64,6 +63,9 @@ describe('Multilingual Logo', () => {
           'plone.site_title': 'Plone Site',
         },
       },
+      addons: {
+        isMultilingual: true,
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
@@ -97,6 +99,9 @@ describe('Multilingual Logo', () => {
             'http://localhost:3000/@@site-logo/logo.cab945d8.svg',
         },
       },
+      addons: {
+        isMultilingual: true,
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
@@ -130,6 +135,9 @@ describe('Multilingual Logo', () => {
             'http://localhost:3000/@@site-logo/logo.cab945d8.svg',
         },
       },
+      addons: {
+        isMultilingual: true,
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
diff --git a/packages/volto/src/components/theme/MultilingualRedirector/MultilingualRedirector.jsx b/packages/volto/src/components/theme/MultilingualRedirector/MultilingualRedirector.jsx
index dfd5fc99b2..db8c49dc79 100644
--- a/packages/volto/src/components/theme/MultilingualRedirector/MultilingualRedirector.jsx
+++ b/packages/volto/src/components/theme/MultilingualRedirector/MultilingualRedirector.jsx
@@ -1,28 +1,29 @@
 import React from 'react';
 import { Redirect } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useCookies } from 'react-cookie';
-import config from '@plone/volto/registry';
 import { changeLanguage } from '@plone/volto/actions';
 import { toGettextLang } from '@plone/volto/helpers';
 
 const MultilingualRedirector = (props) => {
-  const { settings } = config;
   const { pathname, children } = props;
   const [cookies] = useCookies();
-  const currentLanguage = cookies['I18N_LANGUAGE'] || settings.defaultLanguage;
-  const redirectToLanguage = settings.supportedLanguages.includes(
+  const site = useSelector((state) => state.site.data);
+  const currentLanguage =
+    cookies['I18N_LANGUAGE'] || site['plone.default_language'];
+  const redirectToLanguage = site['plone.available_languages'].includes(
     currentLanguage,
   )
     ? currentLanguage
-    : settings.defaultLanguage;
+    : site['plone.default_language'];
+  const isMultilingual = useSelector((state) => state.addons.isMultilingual);
   const dispatch = useDispatch();
 
   React.useEffect(() => {
     // ToDo: Add means to support language negotiation (with config)
     // const detectedLang = (navigator.language || navigator.userLanguage).substring(0, 2);
     let mounted = true;
-    if (settings.isMultilingual && pathname === '/') {
+    if (isMultilingual && pathname === '/') {
       const langFileName = toGettextLang(redirectToLanguage);
       import('@root/../locales/' + langFileName + '.json').then((locale) => {
         if (mounted) {
@@ -33,9 +34,9 @@ const MultilingualRedirector = (props) => {
     return () => {
       mounted = false;
     };
-  }, [pathname, dispatch, redirectToLanguage, settings.isMultilingual]);
+  }, [pathname, dispatch, redirectToLanguage, isMultilingual]);
 
-  return pathname === '/' && settings.isMultilingual ? (
+  return pathname === '/' && isMultilingual ? (
     <Redirect to={`/${redirectToLanguage}`} />
   ) : (
     <>{children}</>
diff --git a/packages/volto/src/components/theme/MultilingualRedirector/MultilingualRedirector.test.jsx b/packages/volto/src/components/theme/MultilingualRedirector/MultilingualRedirector.test.jsx
index 1daf31cec6..95a4c89f0d 100644
--- a/packages/volto/src/components/theme/MultilingualRedirector/MultilingualRedirector.test.jsx
+++ b/packages/volto/src/components/theme/MultilingualRedirector/MultilingualRedirector.test.jsx
@@ -3,14 +3,9 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
-import config from '@plone/volto/registry';
 
 import MultilingualRedirector from './MultilingualRedirector';
 
-beforeAll(() => {
-  config.settings.isMultilingual = true;
-});
-
 const mockStore = configureStore();
 
 describe('MultilingualRedirector', () => {
@@ -20,6 +15,9 @@ describe('MultilingualRedirector', () => {
         locale: 'en',
         messages: {},
       },
+      addons: {
+        isMultilingual: true,
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
diff --git a/packages/volto/src/components/theme/Navigation/Navigation.Multilingual.test.jsx b/packages/volto/src/components/theme/Navigation/Navigation.Multilingual.test.jsx
index ba40c04907..60170eb454 100644
--- a/packages/volto/src/components/theme/Navigation/Navigation.Multilingual.test.jsx
+++ b/packages/volto/src/components/theme/Navigation/Navigation.Multilingual.test.jsx
@@ -7,10 +7,6 @@ import config from '@plone/volto/registry';
 
 import Navigation from './Navigation';
 
-beforeAll(() => {
-  config.settings.isMultilingual = true;
-});
-
 const mockStore = configureStore();
 
 describe('Navigation Multilingual', () => {
@@ -28,6 +24,9 @@ describe('Navigation Multilingual', () => {
         locale: 'en',
         messages: {},
       },
+      addons: {
+        isMultilingual: true,
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
@@ -54,6 +53,9 @@ describe('Navigation Multilingual', () => {
         locale: 'en',
         messages: {},
       },
+      addons: {
+        isMultilingual: true,
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
@@ -80,6 +82,9 @@ describe('Navigation Multilingual', () => {
         locale: 'en',
         messages: {},
       },
+      addons: {
+        isMultilingual: true,
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
@@ -107,6 +112,9 @@ describe('Navigation Multilingual', () => {
         locale: 'en',
         messages: {},
       },
+      addons: {
+        isMultilingual: true,
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
diff --git a/packages/volto/src/components/theme/NotFound/NotFound.jsx b/packages/volto/src/components/theme/NotFound/NotFound.jsx
index d0a90723a2..152d25cc92 100644
--- a/packages/volto/src/components/theme/NotFound/NotFound.jsx
+++ b/packages/volto/src/components/theme/NotFound/NotFound.jsx
@@ -16,15 +16,16 @@ import config from '@plone/volto/registry';
 const NotFound = () => {
   const dispatch = useDispatch();
   const lang = useSelector((state) => state.intl.locale);
+  const isMultilingual = useSelector((state) => state.addons.isMultilingual);
 
   useEffect(() => {
     dispatch(
       getNavigation(
-        config.settings.isMultilingual ? `/${toBackendLang(lang)}` : '/',
+        isMultilingual ? `/${toBackendLang(lang)}` : '/',
         config.settings.navDepth,
       ),
     );
-  }, [dispatch, lang]);
+  }, [dispatch, lang, isMultilingual]);
 
   return (
     <Container className="view-wrapper">
diff --git a/packages/volto/src/components/theme/Sitemap/Sitemap.jsx b/packages/volto/src/components/theme/Sitemap/Sitemap.jsx
index 71e5562837..eabe6073b6 100644
--- a/packages/volto/src/components/theme/Sitemap/Sitemap.jsx
+++ b/packages/volto/src/components/theme/Sitemap/Sitemap.jsx
@@ -35,14 +35,14 @@ function Sitemap(props) {
     location: { pathname },
     language,
     getNavigation,
+    isMultilingual,
   } = props;
 
   useEffect(() => {
-    const { settings } = config;
-    const lang = settings.isMultilingual ? `${toBackendLang(language)}` : null;
+    const lang = isMultilingual ? `${toBackendLang(language)}` : null;
     const path = getSitemapPath(pathname, lang);
     getNavigation(path, 4);
-  }, [pathname, language, getNavigation]);
+  }, [pathname, isMultilingual, language, getNavigation]);
 
   const renderItems = (items) => {
     return (
@@ -88,6 +88,7 @@ export const __test__ = compose(
     (state) => ({
       items: state.navigation.items,
       lang: state.intl.locale,
+      isMultilingual: state.addons.isMultilingual,
     }),
     { getNavigation },
   ),
@@ -99,6 +100,7 @@ export default compose(
     (state) => ({
       items: state.navigation.items,
       lang: state.intl.locale,
+      isMultilingual: state.addons.isMultilingual,
     }),
     { getNavigation },
   ),
diff --git a/packages/volto/src/config/index.js b/packages/volto/src/config/index.js
index 8c295e5a1c..0b3c69600a 100644
--- a/packages/volto/src/config/index.js
+++ b/packages/volto/src/config/index.js
@@ -33,7 +33,10 @@ import applyAddonConfiguration, { addonsInfo } from 'load-volto-addons';
 
 import ConfigRegistry from '@plone/volto/registry';
 
-import { getSiteAsyncPropExtender } from '@plone/volto/helpers';
+import {
+  getSiteAsyncPropExtender,
+  getMultilingualInstalledAsyncPropExtender,
+} from '@plone/volto/helpers';
 
 const host = process.env.HOST || 'localhost';
 const port = process.env.PORT || '3000';
@@ -122,8 +125,8 @@ let config = {
     openExternalLinkInNewTab: false,
     notSupportedBrowsers: ['ie'],
     defaultPageSize: 25,
-    isMultilingual: false,
-    supportedLanguages: ['en'],
+    isMultilingual: true, // deprecated, install plone.app.multilingual in backend
+    supportedLanguages: ['en'], // deprecated, set your languages in backend
     defaultLanguage: 'en',
     navDepth: 1,
     expressMiddleware: serverConfig.expressMiddleware, // BBB
@@ -132,7 +135,10 @@ let config = {
     useEmailAsLogin: false,
     persistentReducers: ['blocksClipboard'],
     initialReducersBlacklist: [], // reducers in this list won't be hydrated in windows.__data
-    asyncPropsExtenders: [getSiteAsyncPropExtender], // per route asyncConnect customizers
+    asyncPropsExtenders: [
+      getSiteAsyncPropExtender,
+      getMultilingualInstalledAsyncPropExtender,
+    ], // per route asyncConnect customizers
     contentIcons: contentIcons,
     loadables,
     lazyBundles: {
@@ -231,7 +237,13 @@ config.settings.apiExpanders = [
   ...config.settings.apiExpanders,
   {
     match: '',
-    GET_CONTENT: ['breadcrumbs', 'actions', 'types', 'navroot'],
+    GET_CONTENT: [
+      'breadcrumbs',
+      'actions',
+      'types',
+      'navroot',
+      config.settings.isMultilingual && 'translations',
+    ],
   },
   {
     match: '',
diff --git a/packages/volto/src/helpers/Multilingual/index.js b/packages/volto/src/helpers/Multilingual/index.js
new file mode 100644
index 0000000000..8c8a1d38bc
--- /dev/null
+++ b/packages/volto/src/helpers/Multilingual/index.js
@@ -0,0 +1,21 @@
+import { LIST_ADDONS } from '@plone/volto/constants/ActionTypes';
+import { listAddons } from '@plone/volto/actions';
+
+const getMultilingualInstalledAsyncPropExtender = {
+  path: '/',
+  extend: (dispatchActions) => {
+    if (
+      dispatchActions.filter((asyncAction) => asyncAction.key === LIST_ADDONS)
+        .length === 0
+    ) {
+      dispatchActions.push({
+        key: LIST_ADDONS,
+        promise: ({ location, store: { dispatch } }) =>
+          __SERVER__ && dispatch(listAddons()),
+      });
+    }
+    return dispatchActions;
+  },
+};
+
+export { getMultilingualInstalledAsyncPropExtender };
diff --git a/packages/volto/src/helpers/index.js b/packages/volto/src/helpers/index.js
index 742e24dab7..db8e427505 100644
--- a/packages/volto/src/helpers/index.js
+++ b/packages/volto/src/helpers/index.js
@@ -124,3 +124,4 @@ export {
   getWorkflowOptions,
 } from './Workflows/Workflows';
 export { getSiteAsyncPropExtender } from './Site';
+export { getMultilingualInstalledAsyncPropExtender } from './Multilingual';
diff --git a/packages/volto/src/middleware/api.js b/packages/volto/src/middleware/api.js
index f1e3557b7b..d6ab7c7d34 100644
--- a/packages/volto/src/middleware/api.js
+++ b/packages/volto/src/middleware/api.js
@@ -133,6 +133,8 @@ const apiMiddlewareFactory =
     const { settings } = config;
 
     const token = getState().userSession.token;
+    const availableLanguages =
+      getState().site.data['plone.available_languages'];
     let isAnonymous = true;
     if (token) {
       const tokenExpiration = jwtDecode(token).exp;
@@ -227,7 +229,7 @@ const apiMiddlewareFactory =
               lang &&
               getState().intl.locale !== toReactIntlLang(lang) &&
               !subrequest &&
-              config.settings.supportedLanguages.includes(lang)
+              availableLanguages.includes(lang)
             ) {
               const langFileName = toGettextLang(lang);
               import('@root/../locales/' + langFileName + '.json').then(
diff --git a/packages/volto/src/reducers/addons/addons.js b/packages/volto/src/reducers/addons/addons.js
index d043c0ea3e..dbc35a37bc 100644
--- a/packages/volto/src/reducers/addons/addons.js
+++ b/packages/volto/src/reducers/addons/addons.js
@@ -69,6 +69,10 @@ export default function addons(state = initialState, action = {}) {
           .sort(addonsSorter),
         loaded: true,
         loading: false,
+        isMultilingual: action.result.items
+          .filter((elem) => elem.is_installed === true)
+          .map((item) => item['id'])
+          .includes('plone.app.multilingual'),
       };
     case `${INSTALL_ADDON}_SUCCESS`:
     case `${UNINSTALL_ADDON}_SUCCESS`: