Fix Toolbar Types crash when language code is missing in langmap (#7637)

packages/volto/news/7637.bugfix

@@ -0,0 +1 @@
+Fixed a bug in Toolbar Types where the "Add Translation…" menu crashed if a language in Plone was not in Volto's language map. Now it shows the language code instead of crashing. @pratyush07-hub

packages/volto/src/components/manage/Toolbar/Types.jsx

@@ -59,12 +59,15 @@ const Types = ({ types, pathname, content, currentLanguage }) => {
           const translationsLeft = filter(
             availableLanguages,
             (lang) =>
+              lang &&
+              lang &&
               !Boolean(
                 content['@components'].translations &&
                   find(content['@components'].translations.items, {
                     language: lang,
                   }),
-              ) && toBackendLang(currentLanguage) !== lang,
+              ) &&
+              toBackendLang(currentLanguage) !== lang,
           );
 
           return (
@@ -95,7 +98,9 @@ const Types = ({ types, pathname, content, currentLanguage }) => {
                             id="Translate to {lang}"
                             defaultMessage="Translate to {lang}"
                             values={{
-                              lang: langmap[lang].nativeName.toLowerCase(),
+                              lang: (
+                                langmap[lang]?.nativeName || lang
+                              ).toLowerCase(),
                             }}
                           />
                         </Link>

packages/volto/src/components/theme/LanguageSelector/LanguageSelector.tsx

@@ -65,16 +65,16 @@ const LanguageSelector = ({
           <Link
             aria-label={`${intl.formatMessage(
               messages.switchLanguageTo,
-            )} ${langmap[langKey].nativeName.toLowerCase()}`}
+            )} ${(langmap[langKey]?.nativeName || langKey).toLowerCase()}`}
             className={cx({ selected: toReactIntlLang(lang) === currentLang })}
             to={translation ? flattenToAppURL(translation['@id']) : `/${lang}`}
-            title={langmap[langKey].nativeName}
+            title={langmap[langKey]?.nativeName || langKey}
             onClick={() => {
               onClickAction();
             }}
             key={`language-selector-${lang}`}
           >
-            {langmap[langKey].nativeName}
+            {langmap[langKey]?.nativeName || langKey}
           </Link>
         );
       })}

packages/volto/src/components/theme/MultilingualRedirector/MultilingualRedirector.jsx

@@ -3,13 +3,18 @@ import { Redirect } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { useCookies } from 'react-cookie';
 import { changeLanguage } from '@plone/volto/actions/language/language';
+
 import { toGettextLang } from '@plone/volto/helpers/Utils/Utils';
 
 const MultilingualRedirector = (props) => {
   const { pathname, children } = props;
   const [cookies] = useCookies();
   const site = useSelector((state) => state.site.data);
   const isMultilingual = site.features?.multilingual;
+  const availableLanguages = useSelector(
+    (state) => state.site?.data?.['plone.available_languages'],
+  );
+  const currentLanguage = useSelector((state) => state.intl.locale);
   const redirectToLanguage =
     cookies['I18N_LANGUAGE'] || site['plone.default_language'];
   const dispatch = useDispatch();
@@ -18,20 +23,63 @@ const MultilingualRedirector = (props) => {
     // ToDo: Add means to support language negotiation (with config)
     // const detectedLang = (navigator.language || navigator.userLanguage).substring(0, 2);
     let mounted = true;
-    if (isMultilingual && pathname === '/') {
-      const langFileName = toGettextLang(redirectToLanguage);
-      import(
-        /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
-      ).then((locale) => {
-        if (mounted) {
-          dispatch(changeLanguage(redirectToLanguage, locale.default));
+    if (isMultilingual) {
+      if (pathname === '/') {
+        const langFileName = toGettextLang(redirectToLanguage);
+        import(/* @vite-ignore */ '@root/../locales/' + langFileName + '.json')
+          .then((locale) => {
+            if (mounted) {
+              dispatch(changeLanguage(redirectToLanguage, locale.default));
+            }
+          })
+          .catch(() => {
+            // eslint-disable-next-line no-console
+            console.warn(
+              `Locale file for ${redirectToLanguage} not found. Fallback to default.`,
+            );
+            if (mounted) {
+              dispatch(changeLanguage(redirectToLanguage, {}));
+            }
+          });
+      } else {
+        const lang = pathname.split('/')[1];
+        if (
+          availableLanguages?.includes(lang) &&
+          lang !== currentLanguage &&
+          mounted
+        ) {
+          const langFileName = toGettextLang(lang);
+          import(
+            /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
+          )
+            .then((locale) => {
+              if (mounted) {
+                dispatch(changeLanguage(lang, locale.default));
+              }
+            })
+            .catch(() => {
+              // eslint-disable-next-line no-console
+              console.warn(
+                `Locale file for ${lang} not found. Fallback to default.`,
+              );
+              if (mounted) {
+                dispatch(changeLanguage(lang, {}));
+              }
+            });
         }
-      });
+      }
     }
     return () => {
       mounted = false;
     };
-  }, [pathname, dispatch, redirectToLanguage, isMultilingual]);
+  }, [
+    pathname,
+    dispatch,
+    redirectToLanguage,
+    isMultilingual,
+    availableLanguages,
+    currentLanguage,
+  ]);
 
   return pathname === '/' && isMultilingual ? (
     <Redirect to={`/${redirectToLanguage}`} />