@eeacms/volto-clms-theme 1.1.164 → 1.1.166

package/CHANGELOG.md

@@ -4,6 +4,33 @@ 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).
 
+### [1.1.166](https://github.com/eea/volto-clms-theme/compare/1.1.165...1.1.166) - 3 July 2024
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`2fa089b`](https://github.com/eea/volto-clms-theme/commit/2fa089b73a2f2e203528b08c473f16a2b2b3307f)]
+
+#### :hammer_and_wrench: Others
+
+- fix eslint errors [ana-oprea - [`a7c8bad`](https://github.com/eea/volto-clms-theme/commit/a7c8badd68c523e3435a8684fe7a5e224924497e)]
+- Add spread for rest of loadables [Tiberiu Ichim - [`ccd23df`](https://github.com/eea/volto-clms-theme/commit/ccd23df39c06b25df20f0ca2d7d4a1d7fbe2e741)]
+- add jest.setup.js and modify unit tests [ana-oprea - [`1380a0b`](https://github.com/eea/volto-clms-theme/commit/1380a0b570df70f27fd3149d3f2af84b0c5f20e0)]
+- Use release of clms-utils [Tiberiu Ichim - [`92d564a`](https://github.com/eea/volto-clms-theme/commit/92d564acf37d498c7578cbc48ab7643be81178b8)]
+- Lazyload utmProjections [Tiberiu Ichim - [`d2483e9`](https://github.com/eea/volto-clms-theme/commit/d2483e90586763e1bb9a694c36b15ad655a29e93)]
+- Add lazlib for utmProjections [Tiberiu Ichim - [`b60580c`](https://github.com/eea/volto-clms-theme/commit/b60580c58c8cbc67abd09f902e24c5b2540a62b1)]
+- Bring back lazylib import [Tiberiu Ichim - [`987f130`](https://github.com/eea/volto-clms-theme/commit/987f130e2db4e25ee2a8ab7a04ea616137aac7c7)]
+- Use fontawesome from volto-clms-utils [Tiberiu Ichim - [`7dacef3`](https://github.com/eea/volto-clms-theme/commit/7dacef35b7173c293b12bbfcbc1a53eb23825fdc)]
+- Cleanup [Tiberiu Ichim - [`def0145`](https://github.com/eea/volto-clms-theme/commit/def014521ae56c2ded5044c7f26a555b41349903)]
+- More lazyloaded [Tiberiu Ichim - [`f7ac8ae`](https://github.com/eea/volto-clms-theme/commit/f7ac8aed214d89c3b61a4585c658df54d0a03869)]
+- Lazyload icons [Tiberiu Ichim - [`e4ef2d6`](https://github.com/eea/volto-clms-theme/commit/e4ef2d62f0a9d38381c63251d79cb20b64999f1e)]
+- Add volto-taxonomy as dependency [Tiberiu Ichim - [`b1c6bf6`](https://github.com/eea/volto-clms-theme/commit/b1c6bf618002740bbc83bfbfc3e23faa45babc6e)]
+- Lazyload table widget [Tiberiu Ichim - [`7634833`](https://github.com/eea/volto-clms-theme/commit/763483367f865cf0abb4d545db933d2be33ac57d)]
+### [1.1.165](https://github.com/eea/volto-clms-theme/compare/1.1.164...1.1.165) - 2 July 2024
+
+#### :hammer_and_wrench: Others
+
+- Code cleanup [Tiberiu Ichim - [`47e3633`](https://github.com/eea/volto-clms-theme/commit/47e3633511e5096d3691161b4538baa0a14cb86e)]
+- Fix homepage image in backend [Tiberiu Ichim - [`ba27cb9`](https://github.com/eea/volto-clms-theme/commit/ba27cb938fb7e28fd9c228673c088a5c30ab3bc6)]
 ### [1.1.164](https://github.com/eea/volto-clms-theme/compare/1.1.163...1.1.164) - 27 June 2024
 
 #### :bug: Bug Fixes

package/jest-addon.config.js

@@ -41,4 +41,6 @@ module.exports = {
       statements: 5,
     },
   },
+
+  setupFilesAfterEnv: ['<rootDir>/src/addons/volto-clms-theme/jest.setup.js'],
 };

package/jest.setup.js

@@ -0,0 +1,19 @@
+import { jest } from '@jest/globals';
+import loadable from '@loadable/component';
+
+var config = jest.requireActual('@plone/volto/registry').default;
+
+config.settings.loadables = {
+  fontAwesome: loadable.lib(() => import('@fortawesome/react-fontawesome')),
+  fontAwesomeLibrary: loadable.lib(() =>
+    import('@fortawesome/fontawesome-svg-core'),
+  ),
+  fontAwesomeSolid: loadable.lib(() =>
+    import('@fortawesome/free-solid-svg-icons'),
+  ),
+  fontAwesomeRegular: loadable.lib(() =>
+    import('@fortawesome/free-regular-svg-icons'),
+  ),
+
+  ...config.settings.loadables,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.164",
+  "version": "1.1.166",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -36,7 +36,7 @@
   "dependencies": {
     "@eeacms/volto-accordion-block": "7.0.0",
     "@eeacms/volto-arcgis-block": "*",
-    "@eeacms/volto-clms-utils": "0.1.12",
+    "@eeacms/volto-clms-utils": "0.1.13",
     "@eeacms/volto-columns-block": "6.0.2",
     "@eeacms/volto-embed": "6.0.0",
     "@eeacms/volto-metadata-block": "5.0.1",
@@ -44,6 +44,7 @@
     "@eeacms/volto-resize-helper": "1.0.1",
     "@eeacms/volto-tableau": "1.3.0",
     "@eeacms/volto-tabs-block": "3.0.1",
+    "@eeacms/volto-taxonomy": "5.1.0",
     "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@fortawesome/free-brands-svg-icons": "6.4.2",
     "@fortawesome/free-regular-svg-icons": "5.15.3",

package/src/components/Blocks/CclHomeBgImageBlock/HomeBgImg.jsx

@@ -1,19 +1,26 @@
+import { flattenToAppURL } from '@plone/volto/helpers';
+
 export const HomeBgImg = ({ url, alt }) => {
+  url = url ? flattenToAppURL(url) : url;
+  const srcSet = url
+    ? `${url}/@@images/image/huge4000 4000w,
+${url}/@@images/image/huge3000 3000w,
+${url}/@@images/image/huge2400 2400w,
+${url}/@@images/image/huge 1600w,
+${url}/@@images/image/great 1200w,
+${url}/@@images/image/larger 1000w,
+${url}/@@images/image/large 800w,
+${url}/@@images/image/teaser 600w`
+    : '';
+
   return (
     <img
       src={
-        `${url}/@@images/image/huge` ||
-        'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
+        url
+          ? `${url}/@@images/image/huge`
+          : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
       }
-      srcSet={`${url}/@@images/image/huge4000 4000w,
-                ${url}/@@images/image/huge3000 3000w,
-                ${url}/@@images/image/huge2400 2400w,
-                ${url}/@@images/image/huge 1600w,
-                ${url}/@@images/image/great 1200w,
-                ${url}/@@images/image/larger 1000w,
-                ${url}/@@images/image/large 800w,
-                ${url}/@@images/image/teaser 600w,
-                `}
+      srcSet={srcSet}
       alt={alt}
       width={'100%'}
       height={349}

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclTabsView.jsx

@@ -1,12 +1,12 @@
+import cx from 'classnames';
 import React from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withRouter } from 'react-router';
 import { RenderBlocks } from '@plone/volto/components';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
-import './fontawesome';
-import cx from 'classnames';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { FontAwesomeIcon } from '@eeacms/volto-clms-utils/components';
 
 const TabsComponent = (props) => {
   const { tabsList = [], setActiveTab } = props;
@@ -54,6 +54,7 @@ const TabsComponent = (props) => {
     </div>
   );
 };
+
 const PanelsComponent = (props) => {
   const { metadata = {}, tabsList = [], activeTab = null, tabs = {} } = props;
   return (
@@ -80,6 +81,7 @@ const PanelsComponent = (props) => {
     </div>
   );
 };
+
 const CclTabsView = (props) => {
   return (
     <div className="home-news-events-block">

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/TabsWidget.jsx

@@ -1,4 +1,6 @@
-import './fontawesome';
+import React from 'react';
+import move from 'lodash-move';
+import { v4 as uuid } from 'uuid';
 
 import {
   DragDropList,
@@ -7,25 +9,25 @@ import {
   SidebarPopup,
 } from '@plone/volto/components';
 import { Grid, Header } from 'semantic-ui-react';
-import { faExternalLinkAlt, faIcons } from '@fortawesome/free-solid-svg-icons';
 import { omit, without } from 'lodash';
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
-import React from 'react';
 import { StyleWrapperEdit } from '@eeacms/volto-block-style/StyleWrapper';
-import clearSVG from '@plone/volto/icons/clear.svg';
-import dragSVG from '@plone/volto/icons/drag.svg';
 import { emptyTab } from '@eeacms/volto-tabs-block/helpers';
 import { fontAwesomeSchema } from './fontAwesomeSchema';
-import leftMenuSVG from '@plone/volto/icons/nav.svg';
-import move from 'lodash-move';
+import { subTabSchema } from './subTabSchema';
+
+import { withFontAwesomeLibs } from '@eeacms/volto-clms-utils/helpers';
+import { FontAwesomeIcon } from '@eeacms/volto-clms-utils/components';
+
+import clearSVG from '@plone/volto/icons/clear.svg';
+import dragSVG from '@plone/volto/icons/drag.svg';
 import plusSVG from '@plone/volto/icons/circle-plus.svg';
 import rightSVG from '@plone/volto/icons/right-key.svg';
-import { subTabSchema } from './subTabSchema';
 import themeSVG from '@plone/volto/icons/theme.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
-import { v4 as uuid } from 'uuid';
+import leftMenuSVG from '@plone/volto/icons/nav.svg';
+// import { faExternalLinkAlt, faIcons } from '@fortawesome/free-solid-svg-icons';
 
 export function moveColumn(formData, source, destination) {
   return {
@@ -46,13 +48,18 @@ const TabsWidget = (props) => {
   const [activeFontAwesomePopup, setActiveFontAwesomePopup] = React.useState(0);
   const [activeSubTabPopup, setActiveSubTabPopup] = React.useState(0);
 
-  const { value = {}, id, onChange } = props;
+  const { value = {}, id, onChange, fontAwesomeSolid } = props;
+  const { faExternalLinkAlt, faIcons } = fontAwesomeSolid;
+
   const { blocks = {} } = value;
   const tabsList = (value.blocks_layout?.items || []).map((tabId) => [
     tabId,
     blocks[tabId],
   ]);
   const activeTabData = blocks[activeTabId] || {};
+  const schema = fontAwesomeSchema(props);
+  const subSchema = subTabSchema();
+
   return (
     <FormFieldWrapper
       {...props}
@@ -128,10 +135,10 @@ const TabsWidget = (props) => {
 
                     <SidebarPopup open={activeFontAwesomePopup}>
                       <InlineForm
-                        schema={fontAwesomeSchema()}
+                        schema={schema}
                         title={
                           <>
-                            {fontAwesomeSchema().title}
+                            {schema.title}
                             <button
                               onClick={() => {
                                 setActiveFontAwesomePopup(false);
@@ -221,10 +228,10 @@ const TabsWidget = (props) => {
                     </button>
                     <SidebarPopup open={activeSubTabPopup}>
                       <InlineForm
-                        schema={subTabSchema()}
+                        schema={subSchema}
                         title={
                           <>
-                            {subTabSchema().title}
+                            {subSchema.title}
                             <button
                               onClick={() => {
                                 setActiveSubTabPopup(false);
@@ -342,4 +349,4 @@ const TabsWidget = (props) => {
   );
 };
 
-export default TabsWidget;
+export default withFontAwesomeLibs(TabsWidget);

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/fontAwesomeSchema.js

@@ -1,11 +1,12 @@
 import { getFontAwesomeIconList } from './fontawesome';
-import { far } from '@fortawesome/free-regular-svg-icons';
 
-export const fontAwesomeSchema = () => {
-  const choices = getFontAwesomeIconList([far]).map((item) => [
-    item.iconName,
-    item.iconName,
-  ]);
+export const fontAwesomeSchema = (props) => {
+  const { fontAwesomeRegular } = props;
+
+  const choices = getFontAwesomeIconList([
+    fontAwesomeRegular.far,
+  ]).map((item) => [item.iconName, item.iconName]);
+
   return {
     title: 'Font Awesome icons',
     fieldsets: [

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/fontawesome.js

@@ -1,8 +1,3 @@
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { fas } from '@fortawesome/free-solid-svg-icons';
-import { far } from '@fortawesome/free-regular-svg-icons';
-library.add(fas, far);
-
 /**
  * Return fontAwesome icon list
  * @example

package/src/components/CLMSDatasetDetailView/CLMSDatasetDetailView.test.jsx

@@ -7,6 +7,11 @@ import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
 import { IntlProvider } from 'react-intl';
 
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(async () => {
+  await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables();
+});
+
 const mockStore = configureStore();
 let store = mockStore({
   intl: {

package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx

@@ -13,18 +13,13 @@ import {
 import { Icon } from '@plone/volto/components';
 import { Toast } from '@plone/volto/components';
 import { UniversalLink } from '@plone/volto/components';
-import addDocumentSVG from '@plone/volto/icons/add-document.svg';
-import removeSVG from '@plone/volto/icons/delete.svg';
-import paginationLeftSVG from '@plone/volto/icons/left-key.svg';
-import paginationRightSVG from '@plone/volto/icons/right-key.svg';
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
 import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
 import { cleanDuplicatesEntries } from '@eeacms/volto-clms-utils/utils';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FontAwesomeIcon } from '@eeacms/volto-clms-utils/components';
 
 import { getDownloadtool, postDownloadtool } from '../../actions';
 import { useFilteredPagination } from '../CclUtils/useFilteredPagination';
-import './cart-table.less';
 import {
   getDownloadToolPostBody,
   duplicateCartItem,
@@ -46,6 +41,13 @@ import {
 
 import { getProjectionsUID } from '../../actions';
 
+import addDocumentSVG from '@plone/volto/icons/add-document.svg';
+import removeSVG from '@plone/volto/icons/delete.svg';
+import paginationLeftSVG from '@plone/volto/icons/left-key.svg';
+import paginationRightSVG from '@plone/volto/icons/right-key.svg';
+
+import './cart-table.less';
+
 const DownloadModal = ({
   openedModal,
   onConfirm,

package/src/components/CLMSDownloadCartView/CLMSDownloadCartView.jsx

@@ -5,9 +5,10 @@ import { Link } from 'react-router-dom';
 
 import { Forbidden, Unauthorized } from '@plone/volto/components';
 import { Helmet } from '@plone/volto/helpers';
+
 import { helmetTitle } from '@eeacms/volto-clms-theme/components/CclUtils';
 import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FontAwesomeIcon } from '@eeacms/volto-clms-utils/components';
 import { getNutsIDList } from './cartUtils';
 
 import {

package/src/components/CLMSDownloadCartView/Fields/ProjectionNaming.jsx

@@ -1,11 +1,18 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Select, Loader, Popup } from 'semantic-ui-react';
-import { baseSources } from '../../../constants/utmProjections';
+// import { baseSources } from '../../../constants/utmProjections';
 import { getUtm } from './utils';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FontAwesomeIcon } from '@eeacms/volto-clms-utils/components';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable';
 
-export const ProjectionNaming = ({ item, cartItems, setCartItems }) => {
+const _ProjectionNaming = ({
+  item,
+  cartItems,
+  setCartItems,
+  utmProjections,
+}) => {
+  const { baseSources } = utmProjections;
   const [loading, setLoading] = useState(true);
   const projections_uid = useSelector(
     (state) => state.downloadtool.projections_in_progress_uid,
@@ -16,7 +23,7 @@ export const ProjectionNaming = ({ item, cartItems, setCartItems }) => {
     if (new_cartItems[objIndex]) new_cartItems[objIndex].projection = value;
     setCartItems([...new_cartItems]);
   };
-  const utm = getUtm(item);
+  const utm = getUtm(item, utmProjections);
 
   let [choices, setChoices] = useState([]);
 
@@ -125,3 +132,6 @@ export const ProjectionNaming = ({ item, cartItems, setCartItems }) => {
     '-'
   );
 };
+export const ProjectionNaming = injectLazyLibs(['utmProjections'])(
+  _ProjectionNaming,
+);

package/src/components/CLMSDownloadCartView/Fields/utils.js

@@ -1,5 +1,7 @@
-import { baseSources, utm, nutsBB } from '../../../constants/utmProjections';
-export const getUtm = (item) => {
+// import { baseSources, utm, nutsBB } from '../../../constants/utmProjections';
+
+export const getUtm = (item, utmProjections) => {
+  const { utm, nutsBB } = utmProjections;
   return utm
     .filter((d) => {
       if (!item?.area?.value) {
@@ -20,7 +22,9 @@ export const getUtm = (item) => {
     .map((u) => u.source);
 };
 
-export const getChoices = (projections, item) => {
+// NOTE: TODO: this is unused. Where is it used?
+export const getChoices = (projections, item, utmProjections) => {
+  const { utm, baseSources } = utmProjections;
   return projections
     ?.sort((a, b) => {
       if (Number(a.split(':')[1]) > Number(b.split(':')[1])) {

package/src/components/CLMSDownloadsView/FileCard.jsx

@@ -3,22 +3,25 @@
  * @module components/CLMSDownloadsView/FileCard
  */
 
-import './filecard.less';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 
 import { Grid, Header, Loader, Popup, Segment } from 'semantic-ui-react';
-import { defineMessages, useIntl } from 'react-intl';
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Icon } from '@plone/volto/components';
-import React from 'react';
+import { cclDateTimeFormat } from '@eeacms/volto-clms-theme/components/CclUtils';
+
+import { FontAwesomeIcon } from '@eeacms/volto-clms-utils/components';
+import { withFontAwesomeLibs } from '@eeacms/volto-clms-utils/helpers';
+
 import pauseSVG from '@plone/volto/icons/pause.svg';
 import errorSVG from '@plone/volto/icons/error.svg';
 import warningSVG from '@plone/volto/icons/warning.svg';
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import packSVG from '@plone/volto/icons/pack.svg';
 import removeSVG from '@plone/volto/icons/delete.svg';
 import blockSVG from '@plone/volto/icons/block.svg';
-import { cclDateTimeFormat } from '@eeacms/volto-clms-theme/components/CclUtils';
+
+import './filecard.less';
 
 const prettyBytes = require('pretty-bytes');
 
@@ -52,7 +55,12 @@ const DatasetNaming = (props) => {
 };
 
 const FileCard = (props) => {
-  const { item, showDeleteTaskLoading, deleteTaskInProgress } = props;
+  const {
+    item,
+    showDeleteTaskLoading,
+    deleteTaskInProgress,
+    fontAwesomeSolid,
+  } = props;
   const { formatMessage } = useIntl();
   if (item?.FinalizationDateTime) {
     var FinalizationDate = new Date(Date.parse(item?.FinalizationDateTime));
@@ -166,7 +174,7 @@ const FileCard = (props) => {
                     tooltip="Dates and times are in UTC"
                     direction="up"
                   >
-                    <FontAwesomeIcon icon={faInfoCircle} />
+                    <FontAwesomeIcon icon={fontAwesomeSolid.faInfoCircle} />
                   </span>
                   <br />
                 </>
@@ -179,7 +187,7 @@ const FileCard = (props) => {
                     tooltip="Dates and times are in UTC"
                     direction="up"
                   >
-                    <FontAwesomeIcon icon={faInfoCircle} />
+                    <FontAwesomeIcon icon={fontAwesomeSolid.faInfoCircle} />
                   </span>
                 </>
               )}
@@ -265,4 +273,4 @@ const FileCard = (props) => {
   );
 };
 
-export default FileCard;
+export default withFontAwesomeLibs(FileCard);

package/src/components/CLMSLoginView/CLMSLogin.jsx

@@ -72,12 +72,8 @@ function CLMSLoginView(props) {
                   to create it.
                 </p>
                 <p>
-                  If you have othe questions, please contact our
-                  <UniversalLink
-                    openLinkInNewTab
-                    href="/en/contact-service-helpdesk"
-                  >
-                    {' '}
+                  If you have othe questions, please contact our{' '}
+                  <UniversalLink openLinkInNewTab href="/en/service-desk">
                     Service desk
                   </UniversalLink>
                   .

package/src/components/CLMSLoginView/Readme.md

@@ -0,0 +1,15 @@
+# CLMS website integration with ECAS
+
+CLMS uses pas.plugins.oidc, from the special branch `clms-site`.
+
+The oidc plugin is not activated for any PAS interface or functionality, so the
+entire functionality is setup client-side. On the client side, the website
+provides a "EU Login" button which goes to the ECAS website and has a callback
+URL set to the `/acl_users/oidc/@@callback` URL.
+
+This callback first authenticates the request and then calls `rememberIdentity`
+which generates a token. The token is used in the computed return url, passed
+as `access_token`.
+
+In the `Header` component the `access_token` is read, jwt-decoded and set as an
+`auth_token` cookie, which is used by the jwt authentication plugin.

package/src/components/CartIconCounter/CartIconCounter.jsx

@@ -11,7 +11,7 @@ import {
 } from '@eeacms/volto-clms-theme/actions';
 import { getCartItems } from '@eeacms/volto-clms-utils/actions';
 import { Link } from 'react-router-dom';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FontAwesomeIcon } from '@eeacms/volto-clms-utils/components';
 
 export const onlyInLeft = (left, right, compareFunction) =>
   left.filter(
@@ -34,7 +34,9 @@ export const CartIconCounter = () => {
   const [cartDiff, setCartDiff] = useState(0);
   const [cartDiffItems, setCartDiffItems] = useState([]);
   const [hasTimeseries, setHasTimeseries] = useState(false);
+
   const dispatch = useDispatch();
+
   useEffect(() => {
     user_id &&
       user_id !== user_id_ref.current &&

package/src/components/CartIconCounter/CartIconCounter.test.jsx

@@ -7,6 +7,11 @@ import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
 Enzyme.configure({ adapter: new Adapter() });
 
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(async () => {
+  await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables();
+});
+
 describe('onlyInLeft', () => {
   // Returns an array with items that are only in the left array, based on a compare function
   it('should return an array with items that are only in the left array', () => {
@@ -136,6 +141,6 @@ describe('CartIconCounter', () => {
 
     // Expect the component toBeDefined
     expect(component).toBeDefined();
-    expect(component.toJSON().children[0].children[0]).toEqual('3');
+    expect(component.toJSON().children[1].children[0]).toEqual('3');
   });
 });

package/src/components/CclCard/CclCard.jsx

@@ -1,25 +1,27 @@
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Icon, Label } from 'semantic-ui-react';
 
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { UniversalLink, Icon as VoltoIcon } from '@plone/volto/components';
+
 import PlaceHolder from '@eeacms/volto-clms-theme/../theme/clms/img/ccl-thumbnail-placeholder.jpg';
 import { cclDateFormat } from '@eeacms/volto-clms-theme/components/CclUtils';
-import { UniversalLink, Icon as VoltoIcon } from '@plone/volto/components';
-import penSVG from '@plone/volto/icons/pen.svg';
 // import { When } from '@plone/volto/components/theme/View/EventDatesInfo';
 import { When } from '@eeacms/volto-clms-theme/components/CclWhen/CclWhen';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FontAwesomeIcon } from '@eeacms/volto-clms-utils/components';
 
 import { portal_types_labels } from '../Blocks/CustomTemplates/VoltoSearchBlock';
 // import { HomeBgImg } from '@eeacms/volto-clms-theme/components/Blocks/CclHomeBgImageBlock/HomeBgImg';
 
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
 import CclLoginModal from '@eeacms/volto-clms-theme/components/CclLoginModal/CclLoginModal';
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
-import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import { CLMSTechnicalLibraryAdminInfo } from '../CLMSTechnicalLibraryAdminInfo';
 
+import penSVG from '@plone/volto/icons/pen.svg';
+
 const CardImage = ({ card, size = 'preview', isCustomCard }) => {
   return card?.image_field ? (
     <img

package/src/components/CclInfoDescription/CclInfoDescription.jsx

@@ -1,7 +1,8 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+
+import { FontAwesomeIcon } from '@eeacms/volto-clms-utils/components';
+import { withFontAwesomeLibs } from '@eeacms/volto-clms-utils/helpers';
 
 /**
  * CclInfoDescription component doc.
@@ -16,14 +17,14 @@ import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
       </CclInfoDescription>
  *
  */
-function CclInfoDescription({ title, description, tooltip }) {
+function CclInfoDescription({ title, description, tooltip, fontAwesomeSolid }) {
   return (
     <div className="dataset-info-field">
       <div className="dataset-field-title">
         {title && <h3>{title}</h3>}
         {tooltip && (
           <span className="info-icon" tooltip={tooltip} direction="up">
-            <FontAwesomeIcon icon={faInfoCircle} />
+            <FontAwesomeIcon icon={fontAwesomeSolid.faInfoCircle} />
           </span>
         )}
       </div>
@@ -36,4 +37,4 @@ CclInfoDescription.propTypes = {
   title: PropTypes.string,
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 };
-export default CclInfoDescription;
+export default withFontAwesomeLibs(CclInfoDescription);

package/src/components/CclInfoDescription/CclInfoDescription.test.js

@@ -1,16 +1,42 @@
 import CclInfoDescription from './CclInfoDescription';
 import renderer from 'react-test-renderer';
 import React from 'react';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(async () => {
+  await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables();
+});
+
+const mockStore = configureStore();
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  content: {
+    data: {
+      '@components': {
+        translations: {
+          items: [{ language: 'es', '@id': '/es' }],
+        },
+      },
+    },
+  },
+});
 
 describe('CclInfoDescription', () => {
   it('Check values', () => {
     const component = renderer
       .create(
-        <CclInfoDescription
-          title="Validation status"
-          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus
+        <Provider store={store}>
+          <CclInfoDescription
+            title="Validation status"
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus
         mauris ante, a iaculis leo placerat quis."
-        ></CclInfoDescription>,
+          ></CclInfoDescription>
+        </Provider>,
       )
       .toJSON();
     expect(component).toBeDefined();

package/src/components/CclLanguageSelector/CclLanguageSelector.test.jsx

@@ -13,6 +13,11 @@ import renderer from 'react-test-renderer';
 
 Enzyme.configure({ adapter: new Adapter() });
 
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(async () => {
+  await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables();
+});
+
 beforeAll(() => {
   config.settings.supportedLanguages = ['es'];
 });

package/src/components/CclModal/CclModal.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Segment, Modal } from 'semantic-ui-react';
 import Draggable from 'react-draggable';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowsAlt } from '@fortawesome/free-solid-svg-icons';
+
+import { FontAwesomeIcon } from '@eeacms/volto-clms-utils/components';
+import { withFontAwesomeLibs } from '@eeacms/volto-clms-utils/helpers';
 
 function CclModal(props) {
   let {
@@ -12,6 +13,7 @@ function CclModal(props) {
     modalStatus = () => {},
     onCloseExtra = () => {},
     draggable = false,
+    fontAwesomeSolid,
   } = props;
   const [open, setOpen] = React.useState(false);
 
@@ -42,7 +44,7 @@ function CclModal(props) {
               ></span>
             </div>
             <Segment compact className="handle">
-              <FontAwesomeIcon icon={faArrowsAlt} size="lg" />
+              <FontAwesomeIcon icon={fontAwesomeSolid.faArrowsAlt} size="lg" />
             </Segment>
 
             {children}
@@ -84,4 +86,4 @@ function CclModal(props) {
   );
 }
 
-export default CclModal;
+export default withFontAwesomeLibs(CclModal);

package/src/components/CclModal/CclModal.test.js

@@ -4,23 +4,42 @@ import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import CclModal from './CclModal';
 import React from 'react';
 import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
 
 Enzyme.configure({ adapter: new Adapter() });
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(async () => {
+  await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables();
+});
 
 describe('CclModal', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+    apierror: {
+      message: 'You are not authorized to access this resource',
+    },
+  });
   it('Check external link', () => {
     const component = renderer
       .create(
-        <CclModal
-          trigger={
-            <div className="header-lang-icon">
-              <i className="ccl-icon-language"></i>
-              <span className="header-lang-code">EN</span>
-            </div>
-          }
-        >
-          <p>Hello test!</p>
-        </CclModal>,
+        <Provider store={store}>
+          <CclModal
+            trigger={
+              <div className="header-lang-icon">
+                <i className="ccl-icon-language"></i>
+                <span className="header-lang-code">EN</span>
+              </div>
+            }
+          >
+            <p>Hello test!</p>
+          </CclModal>
+        </Provider>,
       )
       .toJSON();
     expect(component).toBeDefined();

package/src/components/Header/Header.jsx

@@ -9,7 +9,7 @@ import Cookies from 'universal-cookie';
 import { getUser } from '@plone/volto/actions';
 import { Logo, Navigation, SearchWidget } from '@plone/volto/components';
 import { BodyClass, getCookieOptions } from '@plone/volto/helpers';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FontAwesomeIcon } from '@eeacms/volto-clms-utils/components';
 import { UniversalLink } from '@plone/volto/components';
 
 import { getCartItems } from '@eeacms/volto-clms-utils/actions';

package/src/components/Widgets/DownloadableFilesTableWidget.jsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import { ReactTableWidget } from '@eeacms/volto-react-table-widget';
 import { useSchema } from './SchemaCreatorWidget';
-import { FormBuilder } from '@ginkgo-bioworks/react-json-schema-form-builder/dist/index';
 import CclButton from '../CclButton/CclButton';
 import { Segment, Loader, Header, Divider } from 'semantic-ui-react';
+// import loadable from 'loadables/component';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable';
+
+// import { FormBuilder } from '@ginkgo-bioworks/react-json-schema-form-builder/dist/index';
 
 const orderKeysBy = (array, data) => {
   if (data) {
@@ -41,6 +44,8 @@ const fixSchema = (schema) => {
 };
 
 const DownloadableFilesTableWidget = (props) => {
+  const lib = props['react-json-schema-form-builder'];
+  const { FormBuilder } = lib;
   const { functions, data } = useSchema(
     props?.value?.schema,
     props?.value?.uiSchema,
@@ -162,4 +167,6 @@ const DownloadableFilesTableWidget = (props) => {
   );
 };
 
-export default DownloadableFilesTableWidget;
+export default injectLazyLibs('react-json-schema-form-builder')(
+  DownloadableFilesTableWidget,
+);

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

@@ -11,6 +11,14 @@ import { toast } from 'react-toastify';
 import { compose } from 'redux';
 import validator from 'validator';
 
+import { Toast } from '@plone/volto/components';
+
+import { FontAwesomeIcon } from '@eeacms/volto-clms-utils/components';
+
+// TODO: this import needs to be lazy loaded
+import faLinkedin from '@fortawesome/free-brands-svg-icons/faLinkedin';
+import { subscribeTo } from '../../../../../actions';
+
 import AtmosphereImage from '@eeacms/volto-clms-theme/../theme/clms/img/ccl-icon-atmosphere.svg';
 import ClimateImage from '@eeacms/volto-clms-theme/../theme/clms/img/ccl-icon-climate.svg';
 import EmergencyImage from '@eeacms/volto-clms-theme/../theme/clms/img/ccl-icon-emergency.svg';
@@ -22,10 +30,6 @@ import EEAImage from '@eeacms/volto-clms-theme/../theme/clms/img/ec-logo-white.s
 import ECImage from '@eeacms/volto-clms-theme/../theme/clms/img/eea-logo.svg';
 import CclFooterColumn from '@eeacms/volto-clms-theme/components/CclFooterColumn/CclFooterColumn';
 import CclFooterMenu from '@eeacms/volto-clms-theme/components/CclTopMainMenu/CclFooterMenu';
-import { faLinkedin } from '@fortawesome/free-brands-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Toast } from '@plone/volto/components';
-import { subscribeTo } from '../../../../../actions';
 
 const messages = defineMessages({
   copernicusServices: {

package/src/customizations/volto/components/theme/Unauthorized/Unauthorized.test.jsx

@@ -8,6 +8,11 @@ import Unauthorized from './Unauthorized';
 
 const mockStore = configureStore();
 
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(async () => {
+  await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables();
+});
+
 describe('Unauthorized', () => {
   it('renders a not found component', () => {
     const store = mockStore({
@@ -19,6 +24,7 @@ describe('Unauthorized', () => {
         message: 'You are not authorized to access this resource',
       },
     });
+
     const component = renderer.create(
       <Provider store={store}>
         <MemoryRouter>

package/src/index.js

@@ -1,3 +1,4 @@
+import loadable from '@loadable/component';
 import customBlocks, {
   customGroupBlocksOrder,
 } from '@eeacms/volto-clms-theme/components/Blocks/customBlocks';
@@ -41,7 +42,6 @@ import TaxonomyWidget from './components/Widgets/TaxonomyWidget';
 import ProductComponentsWidget from './components/Widgets/ProductComponentsWidget';
 import ImageSizeWidget from './components/Widgets/ImageSizeWidget';
 import { CLMSDateWidget } from './components/Widgets/CLMSDateWidget';
-// import { DateWidget } from '@eeacms/volto-widgets-view/components';
 import { getWidgetView } from '@eeacms/volto-widgets-view/helpers';
 
 // CUSTOM REDUCERS IMPORT
@@ -50,7 +50,6 @@ import TextLinkWidget from './components/Widgets/TextLinkWidget';
 import reducers from './reducers';
 import CookieBanner from 'volto-cookie-banner/CookieBannerContainer';
 import CLMSLoginView from './components/CLMSLoginView/CLMSLogin';
-// import Login from '@plone/volto/components/Login';
 
 //SLATE CONFIGURATION
 import installLinkEditor from '@plone/volto-slate/editor/plugins/AdvancedLink';
@@ -337,6 +336,14 @@ const applyConfig = (config) => {
 
   config.experimental.addBlockButton.enabled = true;
 
+  config.settings.loadables = {
+    'react-json-schema-form-builder': loadable.lib(() =>
+      import('@ginkgo-bioworks/react-json-schema-form-builder/dist/index'),
+    ),
+    utmProjections: loadable.lib(() => import('./constants/utmProjections')),
+    ...config.settings.loadables,
+  };
+
   return config;
 };
 export default applyConfig;