@eeacms/volto-cca-policy 0.1.35 → 0.1.36

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [0.1.36](https://github.com/eea/volto-cca-policy/compare/0.1.35...0.1.36) - 11 August 2023
+
+#### :hammer_and_wrench: Others
+
+- Move Header code from customizations [Tiberiu Ichim - [`7af45f3`](https://github.com/eea/volto-cca-policy/commit/7af45f36a279e5a0d857363e48b1ff34cb8bb951)]
+- Restrict mission blocks on CCA [kreafox - [`d3ee731`](https://github.com/eea/volto-cca-policy/commit/d3ee7312c256b316362249f4ad8bf3fd0d1f2371)]
+- Restrict blocks on mission [kreafox - [`ed28366`](https://github.com/eea/volto-cca-policy/commit/ed28366e879139b138b1bb3d6ba059a46614de1d)]
 ### [0.1.35](https://github.com/eea/volto-cca-policy/compare/0.1.34...0.1.35) - 7 August 2023
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Blocks/CaseStudyExplorer/index.js

@@ -1,6 +1,7 @@
 import worldSVG from '@plone/volto/icons/world.svg';
 import CaseStudyExplorerEdit from './CaseStudyExplorerEdit';
 import CaseStudyExplorerView from './CaseStudyExplorerView';
+import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
 
 export default function installCaseStudyExplorerBlock(config) {
   config.blocks.blocksConfig.caseStudyExplorer = {
@@ -10,6 +11,14 @@ export default function installCaseStudyExplorerBlock(config) {
     group: 'site',
     edit: CaseStudyExplorerEdit,
     view: CaseStudyExplorerView,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    restricted: ({ properties, block }) => {
+      return blockAvailableInMission(properties, block);
+    },
   };
 
   return config;

package/src/components/manage/Blocks/CountryMapHeatIndex/index.js

@@ -1,6 +1,7 @@
 import worldSVG from '@plone/volto/icons/world.svg';
 import Edit from './Edit';
 import View from './View';
+import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
 
 export default function installCountryMapHeatIndex(config) {
   config.blocks.blocksConfig.countryMapHeatIndex = {
@@ -10,6 +11,14 @@ export default function installCountryMapHeatIndex(config) {
     group: 'site',
     edit: Edit,
     view: View,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    restricted: ({ properties, block }) => {
+      return blockAvailableInMission(properties, block);
+    },
   };
 
   return config;

package/src/components/manage/Blocks/CountryMapObservatory/index.js

@@ -1,6 +1,7 @@
 import worldSVG from '@plone/volto/icons/world.svg';
 import CountryMapObservatoryEdit from './CountryMapObservatoryEdit';
 import CountryMapObservatoryView from './CountryMapObservatoryView';
+import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
 
 export default function installCountryMapObservatoryBlock(config) {
   config.blocks.blocksConfig.countryMapObservatory = {
@@ -10,6 +11,14 @@ export default function installCountryMapObservatoryBlock(config) {
     group: 'site',
     edit: CountryMapObservatoryEdit,
     view: CountryMapObservatoryView,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    restricted: ({ properties, block }) => {
+      return blockAvailableInMission(properties, block);
+    },
   };
 
   return config;

package/src/components/manage/Blocks/CountryMapProfile/index.js

@@ -1,6 +1,7 @@
 import worldSVG from '@plone/volto/icons/world.svg';
 import Edit from './Edit';
 import View from './View';
+import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
 
 export default function installCountryMapProfile(config) {
   config.blocks.blocksConfig.countryMapProfile = {
@@ -10,6 +11,14 @@ export default function installCountryMapProfile(config) {
     group: 'site',
     edit: Edit,
     view: View,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    restricted: ({ properties, block }) => {
+      return blockAvailableInMission(properties, block);
+    },
   };
 
   return config;

package/src/components/manage/Blocks/ECDEIndicators/index.js

@@ -1,6 +1,7 @@
 import worldSVG from '@plone/volto/icons/world.svg';
 import ECDEIndicatorsEdit from './ECDEIndicatorsEdit';
 import ECDEIndicatorsView from './ECDEIndicatorsView';
+import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
 
 export default function installECDEIndicatorsBlock(config) {
   config.blocks.blocksConfig.ecdeIndicators = {
@@ -10,6 +11,14 @@ export default function installECDEIndicatorsBlock(config) {
     group: 'site',
     edit: ECDEIndicatorsEdit,
     view: ECDEIndicatorsView,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    restricted: ({ properties, block }) => {
+      return blockAvailableInMission(properties, block);
+    },
   };
 
   return config;

package/src/components/manage/Blocks/FilterAceContent/index.js

@@ -1,6 +1,7 @@
 import zoomSVG from '@plone/volto/icons/zoom.svg';
 import FilterAceContentEdit from './FilterAceContentEdit';
 import FilterAceContentView from './FilterAceContentView';
+import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
 
 export default function installBlock(config) {
   config.blocks.blocksConfig.filterAceContent = {
@@ -15,7 +16,9 @@ export default function installBlock(config) {
       addPermission: [],
       view: [],
     },
-    variations: [],
+    restricted: ({ properties, block }) => {
+      return blockAvailableInMission(properties, block);
+    },
   };
 
   return config;

package/src/components/manage/Blocks/MKHMap/index.js

@@ -1,7 +1,7 @@
 import MapBlockEdit from './Edit';
 import MapBlockView from './View';
-
 import worldSVG from '@plone/volto/icons/world.svg';
+import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
 
 export default (config) => {
   config.blocks.blocksConfig.mkh_map = {
@@ -11,6 +11,15 @@ export default (config) => {
     group: 'site',
     edit: MapBlockEdit,
     view: MapBlockView,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    restricted: ({ properties, block }) => {
+      return blockAvailableInMission(properties, block);
+    },
   };
+
   return config;
 };

package/src/components/manage/Blocks/RASTBlock/index.js

@@ -1,9 +1,12 @@
 import zoomSVG from '@plone/volto/icons/zoom.svg';
 import RASTEdit from './RASTEdit';
 import RASTView from './RASTView';
+import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
 
 export default function installBlock(config) {
-  config.blocks.blocksConfig.rastBlock = {
+  const blocksConfig = config.blocks.blocksConfig;
+
+  blocksConfig.rastBlock = {
     id: 'rastBlock',
     title: 'RAST',
     icon: zoomSVG,
@@ -16,6 +19,9 @@ export default function installBlock(config) {
       view: [],
     },
     variations: [],
+    restricted: ({ properties, block }) => {
+      return blockAvailableInMission(properties, block);
+    },
   };
 
   return config;

package/src/components/manage/Blocks/RelevantAceContent/index.js

@@ -1,6 +1,7 @@
 import zoomSVG from '@plone/volto/icons/zoom.svg';
 import RelevantAceContentEdit from './RelevantAceContentEdit';
 import RelevantAceContentView from './RelevantAceContentView';
+import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
 
 export default function installBlock(config) {
   config.blocks.blocksConfig.relevantAceContent = {
@@ -16,6 +17,9 @@ export default function installBlock(config) {
       view: [],
     },
     variations: [],
+    restricted: ({ properties, block }) => {
+      return blockAvailableInMission(properties, block);
+    },
   };
 
   return config;

package/src/components/manage/Blocks/SearchAceContent/index.js

@@ -1,6 +1,7 @@
 import zoomSVG from '@plone/volto/icons/zoom.svg';
 import SearchAceContentEdit from './SearchAceContentEdit';
 import SearchAceContentView from './SearchAceContentView';
+import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
 
 export default function installBlock(config) {
   config.blocks.blocksConfig.searchAceContent = {
@@ -16,6 +17,9 @@ export default function installBlock(config) {
       view: [],
     },
     variations: [],
+    restricted: ({ properties, block }) => {
+      return blockAvailableInMission(properties, block);
+    },
   };
 
   return config;

package/src/components/manage/Blocks/TransRegionSelect/index.js

@@ -1,6 +1,7 @@
 import zoomSVG from '@plone/volto/icons/zoom.svg';
 import TransRegionSelectEdit from './TransRegionSelectEdit';
 import TransRegionSelectView from './TransRegionSelectView';
+import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
 
 export default function installBlock(config) {
   config.blocks.blocksConfig.transRegionSelect = {
@@ -16,6 +17,9 @@ export default function installBlock(config) {
       view: [],
     },
     variations: [],
+    restricted: ({ properties, block }) => {
+      return blockAvailableInMission(properties, block);
+    },
   };
 
   return config;

package/src/components/theme/Header.jsx

@@ -0,0 +1,282 @@
+/**
+ * Header component.
+ * @module components/theme/Header/Header
+ */
+
+import React from 'react';
+import { Dropdown, Image } from 'semantic-ui-react';
+import { connect, useDispatch, useSelector } from 'react-redux';
+
+import { withRouter } from 'react-router-dom';
+import { UniversalLink } from '@plone/volto/components';
+import {
+  getBaseUrl,
+  hasApiExpander,
+  flattenToAppURL,
+} from '@plone/volto/helpers';
+import { getNavigation } from '@plone/volto/actions';
+import { Header, Logo } from '@eeacms/volto-eea-design-system/ui';
+import { usePrevious } from '@eeacms/volto-eea-design-system/helpers';
+import { find } from 'lodash';
+import globeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/global-line.svg';
+import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea.png';
+
+import config from '@plone/volto/registry';
+import { compose } from 'recompose';
+import { BodyClass } from '@plone/volto/helpers';
+
+import cx from 'classnames';
+
+function removeTrailingSlash(path) {
+  return path.replace(/\/+$/, '');
+}
+
+/**
+ * EEA Specific Header component.
+ */
+const EEAHeader = ({ pathname, token, items, history, subsite }) => {
+  const currentLang = useSelector((state) => state.intl.locale);
+  const translations = useSelector(
+    (state) => state.content.data?.['@components']?.translations?.items,
+  );
+
+  const router_pathname = useSelector((state) => {
+    return removeTrailingSlash(state.router?.location?.pathname) || '';
+  });
+
+  const isSubsite = subsite?.['@type'] === 'Subsite';
+
+  const isHomePageInverse = useSelector((state) => {
+    const layout = state.content?.data?.layout;
+    const has_home_layout =
+      layout === 'homepage_inverse_view' ||
+      (__CLIENT__ && document.body.classList.contains('homepage-inverse'));
+    return (
+      has_home_layout &&
+      (removeTrailingSlash(pathname) === router_pathname ||
+        router_pathname.endsWith('/edit'))
+    );
+  });
+
+  const { eea } = config.settings;
+  const headerOpts = eea.headerOpts || {};
+  const headerSearchBox = eea.headerSearchBox || [];
+  const { logo, logoWhite } = headerOpts || {};
+  const width = useSelector((state) => state.screen?.width);
+  const dispatch = useDispatch();
+  const previousToken = usePrevious(token);
+  const [language, setLanguage] = React.useState(
+    currentLang || eea.defaultLanguage,
+  );
+
+  React.useEffect(() => {
+    const { settings } = config;
+    const base_url = getBaseUrl(pathname);
+    if (!hasApiExpander('navigation', base_url)) {
+      dispatch(getNavigation(base_url, settings.navDepth));
+    }
+  }, [pathname, dispatch]);
+
+  React.useEffect(() => {
+    if (token !== previousToken) {
+      const { settings } = config;
+      const base = getBaseUrl(pathname);
+      if (!hasApiExpander('navigation', base)) {
+        dispatch(getNavigation(base, settings.navDepth));
+      }
+    }
+  }, [token, dispatch, pathname, previousToken]);
+
+  return (
+    <Header menuItems={items}>
+      {isHomePageInverse && <BodyClass className="homepage" />}
+      <Header.TopHeader>
+        <Header.TopItem className="official-union">
+          <Image src={eeaFlag} alt="eea flag"></Image>
+          <Header.TopDropdownMenu
+            text="An official website of the European Union | How do you know?"
+            tabletText="EEA information systems"
+            mobileText=" "
+            icon="chevron down"
+            aria-label="dropdown"
+            className=""
+            viewportWidth={width}
+          >
+            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+            <div
+              className="content"
+              onClick={(evt) => evt.stopPropagation()}
+              onKeyDown={(evt) => evt.stopPropagation()}
+            >
+              <p>
+                All official European Union website addresses are in the{' '}
+                <b>europa.eu</b> domain.
+              </p>
+              <a
+                href="https://europa.eu/european-union/contact/institutions-bodies_en"
+                target="_blank"
+                rel="noreferrer"
+                onKeyDown={(evt) => evt.stopPropagation()}
+              >
+                See all EU institutions and bodies
+              </a>
+            </div>
+          </Header.TopDropdownMenu>
+        </Header.TopItem>
+
+        {!!headerOpts.partnerLinks && (
+          <Header.TopItem>
+            <Header.TopDropdownMenu
+              id="theme-sites"
+              text={headerOpts.partnerLinks.title}
+              viewportWidth={width}
+            >
+              <div className="wrapper">
+                {headerOpts.partnerLinks.links.map((item, index) => (
+                  <Dropdown.Item key={index}>
+                    <a
+                      href={item.href}
+                      className="site"
+                      target="_blank"
+                      rel="noreferrer"
+                      onKeyDown={(evt) => evt.stopPropagation()}
+                    >
+                      {item.title}
+                    </a>
+                  </Dropdown.Item>
+                ))}
+              </div>
+            </Header.TopDropdownMenu>
+          </Header.TopItem>
+        )}
+
+        {config.settings.isMultilingual && (
+          <Header.TopDropdownMenu
+            id="language-switcher"
+            className="item"
+            hasLanguageDropdown={
+              config.settings.supportedLanguages.length > 1 &&
+              config.settings.hasLanguageDropdown
+            }
+            text={`${language.toUpperCase()}`}
+            mobileText={`${language.toUpperCase()}`}
+            icon={
+              <Image src={globeIcon} alt="language dropdown globe icon"></Image>
+            }
+            viewportWidth={width}
+          >
+            <ul
+              className="wrapper language-list"
+              role="listbox"
+              aria-label="language switcher"
+            >
+              {eea.languages.map((item, index) => (
+                <Dropdown.Item
+                  as="li"
+                  key={index}
+                  text={
+                    <span>
+                      {item.name}
+                      <span className="country-code">
+                        {item.code.toUpperCase()}
+                      </span>
+                    </span>
+                  }
+                  onClick={() => {
+                    const translation = find(translations, {
+                      language: item.code,
+                    });
+                    const to = translation
+                      ? flattenToAppURL(translation['@id'])
+                      : `/${item.code}`;
+                    setLanguage(item.code);
+                    history.push(to);
+                  }}
+                ></Dropdown.Item>
+              ))}
+            </ul>
+          </Header.TopDropdownMenu>
+        )}
+      </Header.TopHeader>
+      <Header.Main
+        pathname={pathname}
+        isMultilingual={config.settings.isMultilingual}
+        headerSearchBox={headerSearchBox}
+        inverted={isHomePageInverse ? true : false}
+        transparency={isHomePageInverse ? true : false}
+        logo={
+          <div {...(isSubsite ? { className: 'logo-wrapper' } : {})}>
+            {!!subsite && subsite.title ? (
+              <>
+                {subsite.subsite_logo ? (
+                  <Logo
+                    src={subsite.subsite_logo?.scales.preview.download}
+                    title={subsite.title}
+                    alt={subsite.title}
+                    url={flattenToAppURL(subsite['@id'])}
+                  />
+                ) : (
+                  subsite.title
+                )}
+                <div className="subsite-logo">
+                  <Logo
+                    src={isHomePageInverse ? logoWhite : logo}
+                    title={eea.websiteTitle}
+                    alt={eea.organisationName}
+                    url={eea.logoTargetUrl}
+                  />
+                </div>
+              </>
+            ) : (
+              <Logo
+                src={isHomePageInverse ? logoWhite : logo}
+                title={eea.websiteTitle}
+                alt={eea.organisationName}
+                url={eea.logoTargetUrl}
+              />
+            )}
+          </div>
+        }
+        menuItems={items}
+        renderGlobalMenuItem={(item, { onClick }) => (
+          <a
+            href={item.url || '/'}
+            title={item.title}
+            onClick={(e) => {
+              e.preventDefault();
+              onClick(e, item);
+            }}
+          >
+            {item.title}
+          </a>
+        )}
+        renderMenuItem={(item, options, props) => (
+          <UniversalLink
+            href={item.url || '/'}
+            title={item.nav_title || item.title}
+            {...(options || {})}
+            className={cx(options?.className, {
+              active: item.url === router_pathname,
+            })}
+          >
+            {props?.iconPosition !== 'right' && props?.children}
+            <span>{item.nav_title || item.title}</span>
+            {props?.iconPosition === 'right' && props?.children}
+          </UniversalLink>
+        )}
+      ></Header.Main>
+    </Header>
+  );
+};
+
+export default compose(
+  withRouter,
+  connect(
+    (state) => ({
+      token: state.userSession.token,
+      items: state.navigation.items,
+      subsite: state.content.data?.['@components']?.subsite,
+    }),
+    { getNavigation },
+  ),
+)(EEAHeader);

package/src/customizations/volto/components/theme/Header/Header.jsx

@@ -1,282 +1,3 @@
-/**
- * Header component.
- * @module components/theme/Header/Header
- */
+import Header from '@eeacms/volto-cca-policy/components/theme/Header';
 
-import React from 'react';
-import { Dropdown, Image } from 'semantic-ui-react';
-import { connect, useDispatch, useSelector } from 'react-redux';
-
-import { withRouter } from 'react-router-dom';
-import { UniversalLink } from '@plone/volto/components';
-import {
-  getBaseUrl,
-  hasApiExpander,
-  flattenToAppURL,
-} from '@plone/volto/helpers';
-import { getNavigation } from '@plone/volto/actions';
-import { Header, Logo } from '@eeacms/volto-eea-design-system/ui';
-import { usePrevious } from '@eeacms/volto-eea-design-system/helpers';
-import { find } from 'lodash';
-import globeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/global-line.svg';
-import eeaFlag from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea.png';
-
-import config from '@plone/volto/registry';
-import { compose } from 'recompose';
-import { BodyClass } from '@plone/volto/helpers';
-
-import cx from 'classnames';
-
-function removeTrailingSlash(path) {
-  return path.replace(/\/+$/, '');
-}
-
-/**
- * EEA Specific Header component.
- */
-const EEAHeader = ({ pathname, token, items, history, subsite }) => {
-  const currentLang = useSelector((state) => state.intl.locale);
-  const translations = useSelector(
-    (state) => state.content.data?.['@components']?.translations?.items,
-  );
-
-  const router_pathname = useSelector((state) => {
-    return removeTrailingSlash(state.router?.location?.pathname) || '';
-  });
-
-  const isSubsite = subsite?.['@type'] === 'Subsite';
-
-  const isHomePageInverse = useSelector((state) => {
-    const layout = state.content?.data?.layout;
-    const has_home_layout =
-      layout === 'homepage_inverse_view' ||
-      (__CLIENT__ && document.body.classList.contains('homepage-inverse'));
-    return (
-      has_home_layout &&
-      (removeTrailingSlash(pathname) === router_pathname ||
-        router_pathname.endsWith('/edit'))
-    );
-  });
-
-  const { eea } = config.settings;
-  const headerOpts = eea.headerOpts || {};
-  const headerSearchBox = eea.headerSearchBox || [];
-  const { logo, logoWhite } = headerOpts || {};
-  const width = useSelector((state) => state.screen?.width);
-  const dispatch = useDispatch();
-  const previousToken = usePrevious(token);
-  const [language, setLanguage] = React.useState(
-    currentLang || eea.defaultLanguage,
-  );
-
-  React.useEffect(() => {
-    const { settings } = config;
-    const base_url = getBaseUrl(pathname);
-    if (!hasApiExpander('navigation', base_url)) {
-      dispatch(getNavigation(base_url, settings.navDepth));
-    }
-  }, [pathname, dispatch]);
-
-  React.useEffect(() => {
-    if (token !== previousToken) {
-      const { settings } = config;
-      const base = getBaseUrl(pathname);
-      if (!hasApiExpander('navigation', base)) {
-        dispatch(getNavigation(base, settings.navDepth));
-      }
-    }
-  }, [token, dispatch, pathname, previousToken]);
-
-  return (
-    <Header menuItems={items}>
-      {isHomePageInverse && <BodyClass className="homepage" />}
-      <Header.TopHeader>
-        <Header.TopItem className="official-union">
-          <Image src={eeaFlag} alt="eea flag"></Image>
-          <Header.TopDropdownMenu
-            text="An official website of the European Union | How do you know?"
-            tabletText="EEA information systems"
-            mobileText=" "
-            icon="chevron down"
-            aria-label="dropdown"
-            className=""
-            viewportWidth={width}
-          >
-            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-            <div
-              className="content"
-              onClick={(evt) => evt.stopPropagation()}
-              onKeyDown={(evt) => evt.stopPropagation()}
-            >
-              <p>
-                All official European Union website addresses are in the{' '}
-                <b>europa.eu</b> domain.
-              </p>
-              <a
-                href="https://europa.eu/european-union/contact/institutions-bodies_en"
-                target="_blank"
-                rel="noreferrer"
-                onKeyDown={(evt) => evt.stopPropagation()}
-              >
-                See all EU institutions and bodies
-              </a>
-            </div>
-          </Header.TopDropdownMenu>
-        </Header.TopItem>
-
-        {!!headerOpts.partnerLinks && (
-          <Header.TopItem>
-            <Header.TopDropdownMenu
-              id="theme-sites"
-              text={headerOpts.partnerLinks.title}
-              viewportWidth={width}
-            >
-              <div className="wrapper">
-                {headerOpts.partnerLinks.links.map((item, index) => (
-                  <Dropdown.Item key={index}>
-                    <a
-                      href={item.href}
-                      className="site"
-                      target="_blank"
-                      rel="noreferrer"
-                      onKeyDown={(evt) => evt.stopPropagation()}
-                    >
-                      {item.title}
-                    </a>
-                  </Dropdown.Item>
-                ))}
-              </div>
-            </Header.TopDropdownMenu>
-          </Header.TopItem>
-        )}
-
-        {config.settings.isMultilingual && (
-          <Header.TopDropdownMenu
-            id="language-switcher"
-            className="item"
-            hasLanguageDropdown={
-              config.settings.supportedLanguages.length > 1 &&
-              config.settings.hasLanguageDropdown
-            }
-            text={`${language.toUpperCase()}`}
-            mobileText={`${language.toUpperCase()}`}
-            icon={
-              <Image src={globeIcon} alt="language dropdown globe icon"></Image>
-            }
-            viewportWidth={width}
-          >
-            <ul
-              className="wrapper language-list"
-              role="listbox"
-              aria-label="language switcher"
-            >
-              {eea.languages.map((item, index) => (
-                <Dropdown.Item
-                  as="li"
-                  key={index}
-                  text={
-                    <span>
-                      {item.name}
-                      <span className="country-code">
-                        {item.code.toUpperCase()}
-                      </span>
-                    </span>
-                  }
-                  onClick={() => {
-                    const translation = find(translations, {
-                      language: item.code,
-                    });
-                    const to = translation
-                      ? flattenToAppURL(translation['@id'])
-                      : `/${item.code}`;
-                    setLanguage(item.code);
-                    history.push(to);
-                  }}
-                ></Dropdown.Item>
-              ))}
-            </ul>
-          </Header.TopDropdownMenu>
-        )}
-      </Header.TopHeader>
-      <Header.Main
-        pathname={pathname}
-        isMultilingual={config.settings.isMultilingual}
-        headerSearchBox={headerSearchBox}
-        inverted={isHomePageInverse ? true : false}
-        transparency={isHomePageInverse ? true : false}
-        logo={
-          <div {...(isSubsite ? { className: 'logo-wrapper' } : {})}>
-            {!!subsite && subsite.title ? (
-              <>
-                {subsite.subsite_logo ? (
-                  <Logo
-                    src={subsite.subsite_logo?.scales.preview.download}
-                    title={subsite.title}
-                    alt={subsite.title}
-                    url={flattenToAppURL(subsite['@id'])}
-                  />
-                ) : (
-                  subsite.title
-                )}
-                <div className="subsite-logo">
-                  <Logo
-                    src={isHomePageInverse ? logoWhite : logo}
-                    title={eea.websiteTitle}
-                    alt={eea.organisationName}
-                    url={eea.logoTargetUrl}
-                  />
-                </div>
-              </>
-            ) : (
-              <Logo
-                src={isHomePageInverse ? logoWhite : logo}
-                title={eea.websiteTitle}
-                alt={eea.organisationName}
-                url={eea.logoTargetUrl}
-              />
-            )}
-          </div>
-        }
-        menuItems={items}
-        renderGlobalMenuItem={(item, { onClick }) => (
-          <a
-            href={item.url || '/'}
-            title={item.title}
-            onClick={(e) => {
-              e.preventDefault();
-              onClick(e, item);
-            }}
-          >
-            {item.title}
-          </a>
-        )}
-        renderMenuItem={(item, options, props) => (
-          <UniversalLink
-            href={item.url || '/'}
-            title={item.nav_title || item.title}
-            {...(options || {})}
-            className={cx(options?.className, {
-              active: item.url === router_pathname,
-            })}
-          >
-            {props?.iconPosition !== 'right' && props?.children}
-            <span>{item.nav_title || item.title}</span>
-            {props?.iconPosition === 'right' && props?.children}
-          </UniversalLink>
-        )}
-      ></Header.Main>
-    </Header>
-  );
-};
-
-export default compose(
-  withRouter,
-  connect(
-    (state) => ({
-      token: state.userSession.token,
-      items: state.navigation.items,
-      subsite: state.content.data?.['@components']?.subsite,
-    }),
-    { getNavigation },
-  ),
-)(EEAHeader);
+export default Header;

package/src/index.js

@@ -26,6 +26,8 @@ import GeolocationWidget from './components/theme/Widgets/GeolocationWidget';
 
 const getEnv = () => (typeof window !== 'undefined' ? window.env : process.env);
 
+const restrictedBlocks = ['countryFlag'];
+
 const applyConfig = (config) => {
   const notInEnMission = /^(?!(\/en\/mission)).*$/;
   const env = getEnv();
@@ -164,6 +166,13 @@ const applyConfig = (config) => {
     config.blocks.blocksConfig.video.restricted = false;
   }
 
+  // Disable blocks
+  restrictedBlocks.forEach((block) => {
+    if (config.blocks.blocksConfig[block]) {
+      config.blocks.blocksConfig[block].restricted = true;
+    }
+  });
+
   // Move blocks to Site group
   const move_to_site = [
     'countryFlag',

package/src/utils.js

@@ -0,0 +1,10 @@
+export const blockAvailableInMission = (properties, block) => {
+  const missionBlocks = ['mkh_map', 'rastBlock'];
+  const isMission = properties['@id'].includes('/en/mission');
+
+  if (isMission) {
+    return missionBlocks.includes(block.id) ? false : true;
+  } else {
+    return missionBlocks.includes(block.id) ? true : false;
+  }
+};