@eeacms/volto-clms-theme 1.1.38 → 1.1.40

package/CHANGELOG.md

@@ -4,6 +4,30 @@ 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.40](https://github.com/eea/volto-clms-theme/compare/1.1.39...1.1.40) - 14 September 2023
+
+#### :rocket: New Features
+
+- feat: cart addition modal text modifications [Ion Lizarazu - [`bf93cf5`](https://github.com/eea/volto-clms-theme/commit/bf93cf5f336cc1e905dd444b17799bd2841b1c38)]
+
+#### :bug: Bug Fixes
+
+- fix: useCase card style [Ion Lizarazu - [`6ac7e36`](https://github.com/eea/volto-clms-theme/commit/6ac7e360066b9f55614b59ea4a102a150c7f00ba)]
+
+#### :hammer_and_wrench: Others
+
+- s/CLMS portal/CLMS website [Mikel Larreategi - [`76a17d7`](https://github.com/eea/volto-clms-theme/commit/76a17d7f2ffca88c8841a85315bbac8d8324af0c)]
+- remove warnings [Ion Lizarazu - [`531db38`](https://github.com/eea/volto-clms-theme/commit/531db382e69cef045486d0067788307abf10a8e4)]
+- jest tests [Ion Lizarazu - [`b5e7409`](https://github.com/eea/volto-clms-theme/commit/b5e7409a24e80cebcfed79b467af437cde70f023)]
+- add test [Ion Lizarazu - [`ab76914`](https://github.com/eea/volto-clms-theme/commit/ab76914e901ce9e31faa5f32762f3e13cd157dae)]
+- mv CartIconCounter [Ion Lizarazu - [`8fa987f`](https://github.com/eea/volto-clms-theme/commit/8fa987fdf652912233eab4e78ec17a30a662ab73)]
+### [1.1.39](https://github.com/eea/volto-clms-theme/compare/1.1.38...1.1.39) - 12 September 2023
+
+#### :hammer_and_wrench: Others
+
+- remove duplications [Ion Lizarazu - [`80b0a43`](https://github.com/eea/volto-clms-theme/commit/80b0a435926157d2a5d9f0ea2416431356f3d7a4)]
+- Add expanded by default option to the search block facets [Ion Lizarazu - [`f0a30f8`](https://github.com/eea/volto-clms-theme/commit/f0a30f868eca3ab6860e8465647178bdb33c9eb8)]
+- replace newsletter with CLMS updates and modify some footer stuff [Ion Lizarazu - [`1f7255a`](https://github.com/eea/volto-clms-theme/commit/1f7255a81001de686e23c29b36e7f4d855fe2285)]
 ### [1.1.38](https://github.com/eea/volto-clms-theme/compare/1.1.37...1.1.38) - 7 September 2023
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.38",
+  "version": "1.1.40",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -47,6 +47,7 @@
     "@eeacms/volto-tabs-block": "3.0.1",
     "@eeacms/volto-taxonomy": "3.0.1",
     "@fortawesome/fontawesome-svg-core": "1.2.35",
+    "@fortawesome/free-brands-svg-icons": "6.4.2",
     "@fortawesome/free-regular-svg-icons": "5.15.3",
     "@fortawesome/free-solid-svg-icons": "5.15.3",
     "@fortawesome/react-fontawesome": "0.1.14",

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/AccordionFacet.jsx

@@ -1,10 +1,10 @@
 import { Checkbox, List } from 'semantic-ui-react';
 import React from 'react';
 import {
-  selectFacetSchemaEnhancer,
   selectFacetStateToValue,
   selectFacetValueToQuery,
 } from '@plone/volto/components/manage/Blocks/Search/components/base';
+import { enhanceExpandedByDefault } from './utils.js';
 
 const AccordionFacet = (props) => {
   const {
@@ -17,7 +17,7 @@ const AccordionFacet = (props) => {
     typeName,
   } = props;
   const facetValue = value;
-  var [open, setOpen] = React.useState(false);
+  var [open, setOpen] = React.useState(facet.expandedByDefault ?? false);
   function isChoiceValue(isChecked, choiceValue) {
     return isChecked ? choiceValue : null;
   }
@@ -92,7 +92,7 @@ const AccordionFacet = (props) => {
   );
 };
 
-AccordionFacet.schemaEnhancer = selectFacetSchemaEnhancer;
+AccordionFacet.schemaEnhancer = enhanceExpandedByDefault;
 AccordionFacet.stateToValue = selectFacetStateToValue;
 AccordionFacet.valueToQuery = selectFacetValueToQuery;
 export default AccordionFacet;

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/CheckboxTreeFacet.jsx

@@ -5,11 +5,11 @@ import { Checkbox, List } from 'semantic-ui-react';
 import { structure_taxonomy_terms } from '@eeacms/volto-clms-theme/components';
 
 import {
-  selectFacetSchemaEnhancer,
   selectFacetStateToValue,
   selectFacetValueToQuery,
 } from '@plone/volto/components/manage/Blocks/Search/components/base';
 import { checkAllChildren } from './utils';
+import { enhanceExpandedByDefault } from './utils.js';
 
 const hasAllChildrensSelected = (value, childrens) => {
   var result = true;
@@ -40,7 +40,7 @@ const CheckboxTreeFacet = (props) => {
   const { facet, choices, onChange, value, typeName } = props;
 
   const facetValue = value;
-  var [open, setOpen] = useState(false);
+  var [open, setOpen] = useState(facet.expandedByDefault ?? false);
   let options = [];
   if (choices?.length > 0) {
     options = structure_taxonomy_terms(choices);
@@ -161,7 +161,7 @@ const CheckboxListParent = ({ option, key, onChange, value, id }) => {
   );
 };
 
-CheckboxTreeFacet.schemaEnhancer = selectFacetSchemaEnhancer;
+CheckboxTreeFacet.schemaEnhancer = enhanceExpandedByDefault;
 CheckboxTreeFacet.stateToValue = selectFacetStateToValue;
 CheckboxTreeFacet.valueToQuery = selectFacetValueToQuery;
 export default CheckboxTreeFacet;

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/CheckboxTreeParentFacet.jsx

@@ -5,11 +5,11 @@ import { Checkbox, List } from 'semantic-ui-react';
 import { structure_taxonomy_terms } from '@eeacms/volto-clms-theme/components';
 
 import {
-  selectFacetSchemaEnhancer,
   selectFacetStateToValue,
   selectFacetValueToQuery,
 } from '@plone/volto/components/manage/Blocks/Search/components/base';
 import { checkAllChildren, uncheckOptionAndChildren } from './utils';
+import { enhanceExpandedByDefault } from './utils.js';
 
 const hasAllChildrensSelected = (value, childrens) => {
   var result = true;
@@ -39,7 +39,7 @@ const Wrapper = ({ typeName, children }) => {
 const CheckboxTreeParentFacet = (props) => {
   const { facet, choices, onChange, value, typeName } = props;
   const facetValue = value;
-  var [open, setOpen] = useState(false);
+  var [open, setOpen] = useState(facet.expandedByDefault ?? false);
   let options = [];
   if (choices?.length > 0) {
     options = structure_taxonomy_terms(choices);
@@ -153,7 +153,7 @@ const CheckboxListParent = ({ option, key, onChange, value, id }) => {
   );
 };
 
-CheckboxTreeParentFacet.schemaEnhancer = selectFacetSchemaEnhancer;
+CheckboxTreeParentFacet.schemaEnhancer = enhanceExpandedByDefault;
 CheckboxTreeParentFacet.stateToValue = selectFacetStateToValue;
 CheckboxTreeParentFacet.valueToQuery = selectFacetValueToQuery;
 export default CheckboxTreeParentFacet;

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/DoubleRangeFacet.jsx

@@ -8,30 +8,12 @@ import {
   selectFacetStateToValue,
   selectFacetValueToQuery,
 } from '@plone/volto/components/manage/Blocks/Search/components/base';
-
-const doubleRangeFacetSchemaEnhancer = ({ schema, formData }) => {
-  // adds (enables) the 'multiple' field after the 'type' dropdown
-  let { fields } = schema.fieldsets[0];
-  const pos = fields.indexOf('type') + 1;
-  fields = [
-    ...fields.slice(0, pos),
-    'step',
-    'multiple',
-    ...fields.slice(pos, fields.length),
-  ];
-
-  schema.properties = {
-    ...schema.properties,
-    step: { title: 'Step', type: 'number', default: 1 },
-  };
-  schema.fieldsets[0].fields = fields;
-  return schema;
-};
+import { doubleRangeFacetSchemaEnhancer } from './utils.js';
 
 const DoubleRangeFacet = (props) => {
   const { facet, choices, onChange, value } = props;
   const facetValue = value;
-  var [open, setOpen] = React.useState(false);
+  var [open, setOpen] = React.useState(facet.expandedByDefault ?? false);
 
   const convertToRange = (values) => {
     return {
@@ -111,6 +93,7 @@ const DoubleRangeFacet = (props) => {
 };
 
 DoubleRangeFacet.schemaEnhancer = doubleRangeFacetSchemaEnhancer;
+
 DoubleRangeFacet.stateToValue = selectFacetStateToValue;
 DoubleRangeFacet.valueToQuery = selectFacetValueToQuery;
 export default DoubleRangeFacet;

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/DoubleRangeSpatialFacet.jsx

@@ -8,25 +8,7 @@ import {
   selectFacetStateToValue,
   selectFacetValueToQuery,
 } from '@plone/volto/components/manage/Blocks/Search/components/base';
-
-const doubleRangeSpatialFacetSchemaEnhancer = ({ schema, formData }) => {
-  // adds (enables) the 'multiple' field after the 'type' dropdown
-  let { fields } = schema.fieldsets[0];
-  const pos = fields.indexOf('type') + 1;
-  fields = [
-    ...fields.slice(0, pos),
-    'step',
-    'multiple',
-    ...fields.slice(pos, fields.length),
-  ];
-
-  schema.properties = {
-    ...schema.properties,
-    step: { title: 'Step', type: 'number', default: 1 },
-  };
-  schema.fieldsets[0].fields = fields;
-  return schema;
-};
+import { doubleRangeFacetSchemaEnhancer } from './utils.js';
 
 const mToKm = (m) => {
   return m >= 1000 ? Math.round((m / 1000) * 10) / 10 + 'km' : m + 'm';
@@ -82,7 +64,7 @@ const convertToRange = (values, step) => {
 const DoubleRangeSpatialFacet = (props) => {
   const { facet, choices, onChange, value } = props;
   const facetValue = value;
-  var [open, setOpen] = React.useState(false);
+  var [open, setOpen] = React.useState(facet.expandedByDefault ?? false);
 
   const startingValues = convertToRange(choices, facet?.step);
 
@@ -156,7 +138,7 @@ const DoubleRangeSpatialFacet = (props) => {
   );
 };
 
-DoubleRangeSpatialFacet.schemaEnhancer = doubleRangeSpatialFacetSchemaEnhancer;
+DoubleRangeSpatialFacet.schemaEnhancer = doubleRangeFacetSchemaEnhancer;
 DoubleRangeSpatialFacet.stateToValue = selectFacetStateToValue;
 DoubleRangeSpatialFacet.valueToQuery = selectFacetValueToQuery;
 export default DoubleRangeSpatialFacet;

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/utils.js

@@ -21,3 +21,39 @@ export const uncheckOptionAndChildren = (value, option) => {
       }
     });
 };
+
+export const enhanceExpandedByDefault = ({ schema, formData }) => {
+  return expandedByDefault(schema);
+};
+
+export const doubleRangeFacetSchemaEnhancer = ({ schema, formData }) => {
+  // adds (enables) the 'multiple' field after the 'type' dropdown
+  let { fields } = schema.fieldsets[0];
+  const pos = fields.indexOf('type') + 1;
+  fields = [
+    ...fields.slice(0, pos),
+    'step',
+    'multiple',
+    ...fields.slice(pos, fields.length),
+  ];
+
+  schema.properties = {
+    ...schema.properties,
+    step: { title: 'Step', type: 'number', default: 1 },
+  };
+  schema.fieldsets[0].fields = fields;
+  return expandedByDefault(schema);
+};
+
+export const expandedByDefault = (schema) => {
+  schema.properties = {
+    ...schema.properties,
+    expandedByDefault: {
+      title: 'Expanded by default',
+      type: 'boolean',
+      default: false,
+    },
+  };
+  schema.fieldsets[0].fields.push('expandedByDefault');
+  return schema;
+};

package/src/components/CLMSDownloadCartView/CLMSDownloadCartView.jsx

@@ -13,8 +13,6 @@ import {
   getDatasetsByUid,
   getExtraBreadcrumbItems,
   getNutsNames,
-} from '../../actions';
-import {
   getFormatConversionTable,
   getProjections,
   getDatasetTimeseries,

package/src/components/CLMSDownloadCartView/conversion.js

@@ -1,5 +1,5 @@
 export const getAvailableConversion = (conversionTable, defaultValue) => {
-  if (conversionTable) {
+  if (conversionTable && Object.keys(conversionTable).length > 0) {
     if (
       conversionTable[defaultValue] === undefined ||
       conversionTable[defaultValue] === null

package/src/components/CLMSProfileView/CLMSApiTokensView.jsx

@@ -46,7 +46,7 @@ const messages = defineMessages({
   description: {
     id: 'descripton',
     defaultMessage:
-      'API tokens are used for machine-to-machine communication with the CLMS portal API. You need to create a new API token for each application in wich you need to use the CLMS portal API. In this screen you can create a new API token, check the list of your tokens and also delete those tokens.',
+      'API tokens are used for machine-to-machine communication with the CLMS website API. You need to create a new API token for each application in wich you need to use the CLMS website API. In this screen you can create a new API token, check the list of your tokens and also delete those tokens.',
   },
   createTitle: {
     id: 'create title',

package/src/components/CLMSProfileView/CLMSDeleteProfileView.jsx

@@ -89,7 +89,7 @@ export const CLMSDeleteProfileView = (props) => {
                     />
                   </h1>
                   This action will delete your profile and your subscription
-                  settings from the CLMS portal.
+                  settings from the CLMS website.
                   <br />
                   <br />
                 </div>

package/src/components/CLMSProfileView/CLMSNewsletterSubscriberView.jsx

@@ -24,7 +24,7 @@ class CLMSNewsletterSubscriberView extends Component {
     this.handleClick = this.handleClick.bind(this);
     this.state = {
       download: false,
-      headers: [{ label: 'Newsletter subscribers', key: 'email' }],
+      headers: [{ label: 'CLMS updates subscribers', key: 'email' }],
     };
   }
   componentDidMount() {
@@ -45,10 +45,10 @@ class CLMSNewsletterSubscriberView extends Component {
       <Container>
         <div>
           <h1 className="page-title">
-            Download a list of newsletter subscribers
+            Download a list of CLMS updates subscribers
           </h1>
           <p>
-            Click in the button below to download a list of all the newsletter
+            Click in the button below to download a list of all the CLMS updates
             subscribers.
           </p>
           <CclButton mode={'filled'} onClick={this.handleClick}>

package/src/components/CLMSProfileView/CLMSProfileView.jsx

@@ -69,7 +69,7 @@ class CLMSProfileView extends Component {
             </div>
             {(this.props.roles?.includes('Manager') ||
               this.props.roles?.includes('Site Administrator')) && (
-              <div tabTitle="Newsletter subscribers">
+              <div tabTitle="CLMS updates subscribers">
                 <CLMSNewsletterSubscriberView />
               </div>
             )}

package/src/components/CLMSSubscriptionView/SubscriptionView.jsx

@@ -275,7 +275,7 @@ class SubscriptionView extends Component {
                     this.props.type === 'events'
                       ? 'event'
                       : this.props.type === 'newsletter'
-                      ? 'the newsletter'
+                      ? 'the CLMS updates'
                       : this.props.type,
                 })}
               {this.props.isUnsubscribe === false &&
@@ -284,7 +284,7 @@ class SubscriptionView extends Component {
                     this.props.type === 'events'
                       ? 'event'
                       : this.props.type === 'newsletter'
-                      ? 'the newsletter'
+                      ? 'the CLMS updates'
                       : this.props.type,
                 })}{' '}
               {this.props.type !== 'newsletter' &&
@@ -320,7 +320,7 @@ class SubscriptionView extends Component {
                         {
                           type:
                             this.props.type === 'newsletter'
-                              ? 'the newsletter'
+                              ? 'the CLMS updates'
                               : this.props.type === 'events'
                               ? 'event'
                               : this.props.type,
@@ -420,7 +420,11 @@ class SubscriptionView extends Component {
                   }}
                 >
                   {'Click here if you would like to unsubscribe from our'}{' '}
-                  {this.props.type === 'events' ? 'event' : this.props.type}
+                  {this.props.type === 'events'
+                    ? 'event'
+                    : this.props.type === 'newsletter'
+                    ? 'CLMS updates'
+                    : this.props.type}
                   {this.props.type === 'newsletter' ? '' : ' notifications'}
                 </Link>
               </>

package/src/components/CLMSSubscriptionView/subscription_utils.js

@@ -1,6 +1,6 @@
 export const AVAILABLE_SUBSCRIPTIONS = [
   {
-    title: 'Subscribe to the newsletter',
+    title: 'Subscribe to the CLMS updates',
     type: 'newsletter',
     back_url: 'newsletter',
   },

package/src/components/CartIconCounter/CartIconCounter.jsx

@@ -0,0 +1,190 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Icon } from '@plone/volto/components';
+import { useDispatch, useSelector } from 'react-redux';
+import { Popup, Segment, Divider, Message } from 'semantic-ui-react';
+import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import {
+  getDatasetTimeseries,
+  getNutsNames,
+  getDatasetsByUid,
+} 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';
+
+export const onlyInLeft = (left, right, compareFunction) =>
+  left.filter(
+    (leftValue) =>
+      !right.some((rightValue) => compareFunction(leftValue, rightValue)),
+  );
+
+export const CartIconCounter = () => {
+  const datasetTimeseries = useSelector((state) => state.datasetTimeseries);
+  const nutsnames = useSelector((state) => state.nutsnames);
+  const datasetsByUid = useSelector((state) => state.datasetsByUid);
+  const cartState = useSelector((state) => state.cart_items);
+  const cartState_ref = useRef(cartState);
+  const cart_icon_ref = React.useRef();
+  const intl = useSelector((state) => state.intl);
+  const user_id = useSelector((state) => state.users.user.id);
+  const [showPopup, setshowPopup] = useState(false);
+  const [cartDiff, setCartDiff] = useState(0);
+  const [cartDiffItems, setCartDiffItems] = useState([]);
+  const [hasTimeseries, setHasTimeseries] = useState(false);
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(getCartItems(user_id));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user_id]);
+
+  useEffect(() => {
+    cartDiffItems.forEach((newItem) => {
+      if (
+        !datasetTimeseries.loading &&
+        datasetTimeseries?.datasets[newItem.UID] === undefined
+      ) {
+        dispatch(getDatasetTimeseries(newItem.UID));
+      }
+      if (newItem.area?.type) {
+        dispatch(getNutsNames(newItem.area?.value));
+        dispatch(getDatasetsByUid(newItem.UID));
+      }
+    });
+    return () => {};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cartDiffItems]);
+
+  useEffect(() => {
+    let hasTS = false;
+    if (datasetTimeseries.datasets) {
+      cartDiffItems.forEach((diffItem) => {
+        if (
+          datasetTimeseries.datasets[diffItem.UID] &&
+          datasetTimeseries.datasets[diffItem.UID].start
+        ) {
+          hasTS = true;
+        }
+      });
+    }
+    setHasTimeseries(hasTS);
+
+    return () => {};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [datasetTimeseries.datasets, datasetTimeseries.loaded, cartDiffItems]);
+
+  useEffect(() => {
+    if (
+      cartState_ref.current.set.loading &&
+      cartState.set.loaded &&
+      cartState.items.length >= cartState_ref.current.items.length
+    ) {
+      setCartDiff(cartState.items.length - cartState_ref.current.items.length);
+      setCartDiffItems(
+        onlyInLeft(
+          cartState.items,
+          cartState_ref.current.items,
+          (l, r) => l.unique_id === r.unique_id,
+        ),
+      );
+
+      window.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: 'smooth',
+      });
+      !showPopup && setTimeout(() => setshowPopup(true), 900);
+      setTimeout(() => {
+        setshowPopup(false);
+      }, 11000);
+    }
+    cartState_ref.current = cartState;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cartState]);
+  return (
+    cartState.items && (
+      <>
+        <Popup
+          context={cart_icon_ref}
+          open={showPopup}
+          position="bottom center"
+          flowing
+        >
+          <Segment
+            attached="top"
+            style={{ padding: 0, display: 'flex', justifyContent: 'flex-end' }}
+          >
+            <Icon
+              onClick={() => setshowPopup(false)}
+              name={clearSVG}
+              size={20}
+              style={{ cursor: 'pointer' }}
+            />
+          </Segment>
+          <Divider horizontal style={{ margin: 0 }}>
+            My cart
+          </Divider>
+          {cartDiff > 0 ? (
+            <Message positive>
+              {cartDiffItems.some((cdi) => cdi.area === '') && (
+                <p>
+                  You added{' '}
+                  <strong>
+                    {cartDiff} new prepackaged item{cartDiff > 1 ? 's' : ''}
+                  </strong>{' '}
+                  to the cart.
+                </p>
+              )}
+              {datasetsByUid.loaded &&
+                nutsnames.loaded &&
+                cartDiffItems.map((cdi, key) => {
+                  const ddata = datasetsByUid.loaded
+                    ? datasetsByUid?.datasets?.items.find(
+                        (d) => d.UID === cdi.UID,
+                      )
+                    : {};
+                  return (
+                    <p key={key}>
+                      <strong>Name:</strong> {ddata?.title} <br />
+                      <strong>Area:</strong>{' '}
+                      {nutsnames?.nutsnames?.[cdi?.area?.value]}
+                    </p>
+                  );
+                })}
+              {hasTimeseries && (
+                <>
+                  <br />
+                  Click on Go to cart to select time interval.
+                </>
+              )}
+            </Message>
+          ) : (
+            <Message warning>
+              The items you tried to add were already added
+            </Message>
+          )}
+          <CclButton
+            mode="filled"
+            to={`/${intl.locale}/cart`}
+            style={{ width: '100%' }}
+          >
+            Go to cart
+          </CclButton>
+        </Popup>
+        <Link
+          to={`/${intl.locale}/cart`}
+          className="header-login-link"
+          ref={cart_icon_ref}
+        >
+          <FontAwesomeIcon
+            icon={['fas', 'shopping-cart']}
+            style={{ marginRight: '0.25rem', maxWidth: '1.5rem' }}
+          />
+          <strong>{cartState?.items?.length}</strong>
+        </Link>
+      </>
+    )
+  );
+};
+
+export default CartIconCounter;

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

@@ -0,0 +1,141 @@
+import { onlyInLeft, CartIconCounter } from './CartIconCounter';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import renderer from 'react-test-renderer';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+Enzyme.configure({ adapter: new Adapter() });
+
+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', () => {
+    const left = [
+      { id: 1, name: 'Item 1' },
+      { id: 2, name: 'Item 2' },
+      { id: 3, name: 'Item 3' },
+    ];
+    const right = [
+      { id: 2, name: 'Item 2' },
+      { id: 4, name: 'Item 4' },
+    ];
+    const compareFunction = (leftValue, rightValue) =>
+      leftValue.id === rightValue.id;
+
+    const result = onlyInLeft(left, right, compareFunction);
+
+    expect(result).toEqual([
+      { id: 1, name: 'Item 1' },
+      { id: 3, name: 'Item 3' },
+    ]);
+  });
+  // Should return 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', () => {
+    const left = [
+      { id: 1, name: 'Item 1' },
+      { id: 2, name: 'Item 2' },
+      { id: 3, name: 'Item 3' },
+    ];
+    const right = [
+      { id: 2, name: 'Item 2' },
+      { id: 4, name: 'Item 4' },
+    ];
+    const compareFunction = (leftValue, rightValue) =>
+      leftValue.id === rightValue.id;
+
+    const result = onlyInLeft(left, right, compareFunction);
+
+    expect(result).toEqual([
+      { id: 1, name: 'Item 1' },
+      { id: 3, name: 'Item 3' },
+    ]);
+  });
+  // should return an empty array if left array is empty
+  it('should return an empty array when left array is empty', () => {
+    const left = [];
+    const right = [
+      { id: 2, name: 'Item 2' },
+      { id: 4, name: 'Item 4' },
+    ];
+    const compareFunction = (leftValue, rightValue) =>
+      leftValue.id === rightValue.id;
+
+    const result = onlyInLeft(left, right, compareFunction);
+
+    expect(result).toEqual([]);
+  });
+
+  // should return the left array if right array is empty
+  it('should return the left array when the right array is empty', () => {
+    const left = [
+      { id: 1, name: 'Item 1' },
+      { id: 2, name: 'Item 2' },
+      { id: 3, name: 'Item 3' },
+    ];
+    const right = [];
+    const compareFunction = (leftValue, rightValue) =>
+      leftValue.id === rightValue.id;
+
+    const result = onlyInLeft(left, right, compareFunction);
+
+    expect(result).toEqual(left);
+  });
+  // should return an array with items that are only in the left array
+  it('should return an array with items that are only in the left array', () => {
+    const left = [
+      { id: 1, name: 'Item 1' },
+      { id: 2, name: 'Item 2' },
+      { id: 3, name: 'Item 3' },
+    ];
+    const right = [
+      { id: 2, name: 'Item 2' },
+      { id: 4, name: 'Item 4' },
+    ];
+    const compareFunction = (leftValue, rightValue) =>
+      leftValue.id === rightValue.id;
+
+    const result = onlyInLeft(left, right, compareFunction);
+
+    expect(result).toEqual([
+      { id: 1, name: 'Item 1' },
+      { id: 3, name: 'Item 3' },
+    ]);
+  });
+});
+
+const mockStore = configureStore();
+describe('CartIconCounter', () => {
+  // Cart icon displays number of items in cart
+  it('should display the correct number of items in the cart', () => {
+    const store = mockStore({
+      cart_items: {
+        items: ['one', 'two', 'three'],
+      },
+      users: {
+        user: {
+          id: 'g678gfd678',
+        },
+      },
+      datasetTimeseries: {
+        datasets: [],
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    // Render the component
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <CartIconCounter />
+        </MemoryRouter>
+      </Provider>,
+    );
+    // const component = mount(<CartIconCounter />);
+
+    // Expect the component toBeDefined
+    expect(component).toBeDefined();
+    expect(component.toJSON().children[0].children[0]).toEqual('3');
+  });
+});

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

@@ -2,28 +2,29 @@
  * Footer component.
  * @module components/theme/Footer/Footer
  */
-
 import React, { Component } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { ReactSVG } from 'react-svg';
+import { toast } from 'react-toastify';
+import { compose } from 'redux';
 
+import { Toast } from '@plone/volto/components';
 import AtmosphereImage from '@eeacms/volto-clms-theme/../theme/clms/img/ccl-icon-atmosphere.svg';
-import CclFooterColumn from '@eeacms/volto-clms-theme/components/CclFooterColumn/CclFooterColumn';
-import CclFooterMenu from '@eeacms/volto-clms-theme/components/CclTopMainMenu/CclFooterMenu';
 import ClimateImage from '@eeacms/volto-clms-theme/../theme/clms/img/ccl-icon-climate.svg';
-import CopernicusImage from '@eeacms/volto-clms-theme/../theme/clms/img/copernicus_eu_logo_white.svg';
-import ECImage from '@eeacms/volto-clms-theme/../theme/clms/img/eea-logo.svg';
-import EEAImage from '@eeacms/volto-clms-theme/../theme/clms/img/ec-logo-white.svg';
 import EmergencyImage from '@eeacms/volto-clms-theme/../theme/clms/img/ccl-icon-emergency.svg';
 import LandImage from '@eeacms/volto-clms-theme/../theme/clms/img/ccl-icon-land.svg';
-import { Link } from 'react-router-dom';
 import MarineImage from '@eeacms/volto-clms-theme/../theme/clms/img/ccl-icon-marine.svg';
-import { ReactSVG } from 'react-svg';
 import SecurityImage from '@eeacms/volto-clms-theme/../theme/clms/img/ccl-icon-security.svg';
-import { Toast } from '@plone/volto/components';
-import { compose } from 'redux';
-import { connect } from 'react-redux';
+import CopernicusImage from '@eeacms/volto-clms-theme/../theme/clms/img/copernicus_eu_logo_white.svg';
+import EEAImage from '@eeacms/volto-clms-theme/../theme/clms/img/ec-logo-white.svg';
+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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { subscribeTo } from '../../../../../actions';
-import { toast } from 'react-toastify';
+import { faLinkedin } from '@fortawesome/free-brands-svg-icons';
 import validator from 'validator';
 
 const messages = defineMessages({
@@ -370,7 +371,7 @@ class Footer extends Component {
             </CclFooterColumn>
             <div className="ccl-footer-col">
               <div className="ccl-footer-form-title">
-                Sign up to our newsletter
+                Sign up to CLMS updates
               </div>
               <form action="" className="ccl-footer-form">
                 <div className="ccl-footer-newsletter">
@@ -435,7 +436,7 @@ class Footer extends Component {
               </div>
               <div className="ccl-footer-social">
                 <a
-                  href="https://www.youtube.com/channel/UCpuwnbuwGG20enAdE50g6TA"
+                  href="https://www.youtube.com/playlist?list=PL1_QSyumTz7CZQEZ-1foOTeTOelKDQmxu"
                   target="_blank"
                   rel="noreferrer"
                   aria-label="Youtube"
@@ -458,8 +459,17 @@ class Footer extends Component {
                 >
                   <span className="ccl-icon-facebook"></span>
                 </a>
+                <a
+                  href="https://www.linkedin.com/showcase/copernicus-eea"
+                  target="_blank"
+                  rel="noreferrer"
+                  aria-label="Linkedin"
+                >
+                  <FontAwesomeIcon icon={faLinkedin} />
+                </a>
               </div>
             </div>
+
             <CclFooterColumn title={'Implemented by'}>
               <div className="footer-implemented footer-implemented-eea">
                 <a
@@ -497,9 +507,17 @@ class Footer extends Component {
                     wrapper="div"
                   />
                 </a>
-                <span>
-                  {this.props.intl.formatMessage(messages.jointResearchCenter)}
-                </span>
+                <a
+                  href="https://joint-research-centre.ec.europa.eu/index_en"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <span>
+                    {this.props.intl.formatMessage(
+                      messages.jointResearchCenter,
+                    )}
+                  </span>
+                </a>
               </div>
               {/* <div className="ccl-footer-col-title">
               {intl.formatMessage(messages.expertSupportProvidedBy)}

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

@@ -6,12 +6,9 @@
  */
 
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { Logo, Navigation, SearchWidget, Icon } from '@plone/volto/components';
-import React, { Component, useEffect, useRef, useState } from 'react';
-import { connect, useDispatch, useSelector } from 'react-redux';
-import { Popup, Segment, Divider, Message } from 'semantic-ui-react';
-import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
-import clearSVG from '@plone/volto/icons/clear.svg';
+import { Logo, Navigation, SearchWidget } from '@plone/volto/components';
+import React, { Component } from 'react';
+import { connect, useSelector } from 'react-redux';
 
 import { BodyClass } from '@plone/volto/helpers';
 // IMPORT isnt nedded until translations are created
@@ -26,91 +23,7 @@ import { getCartItems } from '@eeacms/volto-clms-utils/actions';
 import { getUser } from '@plone/volto/actions';
 import jwtDecode from 'jwt-decode';
 
-const CartIconCounter = (props) => {
-  const cartState = useSelector((state) => state.cart_items);
-  const cartState_ref = useRef(cartState);
-  const cart_icon_ref = React.useRef();
-  const intl = useSelector((state) => state.intl);
-  const user_id = useSelector((state) => state.users.user.id);
-  const [showPopup, setshowPopup] = useState(false);
-  const [cartDiff, setCartDiff] = useState(0);
-  const dispatch = useDispatch();
-  useEffect(() => {
-    dispatch(getCartItems(user_id));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [user_id]);
-  useEffect(() => {
-    if (
-      cartState_ref.current.set.loading &&
-      cartState.set.loaded &&
-      cartState.items.length >= cartState_ref.current.items.length
-    ) {
-      setCartDiff(cartState.items.length - cartState_ref.current.items.length);
-      window.scrollTo({
-        top: 0,
-        left: 0,
-        behavior: 'smooth',
-      });
-      !showPopup && setTimeout(() => setshowPopup(true), 900);
-      setTimeout(() => setshowPopup(false), 11000);
-    }
-    cartState_ref.current = cartState;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [cartState]);
-  return (
-    cartState.items && (
-      <>
-        <Popup
-          context={cart_icon_ref}
-          open={showPopup}
-          position="bottom center"
-        >
-          <Segment
-            attached="top"
-            style={{ padding: 0, display: 'flex', justifyContent: 'flex-end' }}
-          >
-            <Icon
-              onClick={() => setshowPopup(false)}
-              name={clearSVG}
-              size={20}
-              style={{ cursor: 'pointer' }}
-            />
-          </Segment>
-          <Divider horizontal style={{ margin: 0 }}>
-            My cart
-          </Divider>
-          {cartDiff > 0 ? (
-            <Message positive>
-              You added <strong>{cartDiff} new items</strong> to the cart
-            </Message>
-          ) : (
-            <Message warning>
-              The items you tried to add were already added
-            </Message>
-          )}
-          <CclButton
-            mode="filled"
-            to={`/${intl.locale}/cart`}
-            style={{ width: '100%' }}
-          >
-            Go to cart
-          </CclButton>
-        </Popup>
-        <Link
-          to={`/${intl.locale}/cart`}
-          className="header-login-link"
-          ref={cart_icon_ref}
-        >
-          <FontAwesomeIcon
-            icon={['fas', 'shopping-cart']}
-            style={{ marginRight: '0.25rem', maxWidth: '1.5rem' }}
-          />
-          <strong>{cartState?.items?.length}</strong>
-        </Link>
-      </>
-    )
-  );
-};
+import CartIconCounter from '@eeacms/volto-clms-theme/components/CartIconCounter/CartIconCounter';
 
 const HeaderDropdown = ({ user }) => {
   const intl = useSelector((state) => state.intl);

package/theme/site/extras/custom.variables

@@ -0,0 +1,3 @@
+@listingCardPadding: 0;
+@imageMinWidth: 400px;
+@imageMaxHeight: 335px;

package/theme/site/extras/styles.less

@@ -27,18 +27,18 @@ hr {
 }
 
 hr
-  + body:not(.contenttype-lrf:not(.section-cart):not(.section-profile):not(.section-newsletter-notification-subscription):not(.section-newsletter-notification-unsubscription):not(.section-logout))
-  main {
++ body:not(.contenttype-lrf:not(.section-cart):not(.section-profile):not(.section-newsletter-notification-subscription):not(.section-newsletter-notification-unsubscription):not(.section-logout))
+main {
   margin-bottom: 2rem;
 }
 
 body:not(.contenttype-lrf:not(.section-cart):not(.section-profile):not(.section-newsletter-notification-subscription):not(.section-newsletter-notification-unsubscription):not(.section-logout))
-  main:not(.map-main) {
+main:not(.map-main) {
   min-height: 70vh;
 }
 
 .map-body:not(.contenttype-lrf:not(.section-cart):not(.section-profile):not(.section-newsletter-notification-subscription):not(.section-newsletter-notification-unsubscription):not(.section-logout))
-  main {
+main {
   margin-bottom: 0;
 }
 
@@ -169,77 +169,77 @@ body.contenttype-lrf:not(.section-cart):not(.profilecart) main .ccl-container {
 }
 
 body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-  main
-  .ccl-container {
+main
+.ccl-container {
   max-width: 100%;
   padding: 0;
 }
 
 body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-  main
-  .ccl-container
-  .cont-w-25 {
+main
+.ccl-container
+.cont-w-25 {
   max-width: 100%;
   flex: 0 0 100%;
 }
 
 body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-  main
-  .ccl-container
-  .cont-w-50 {
+main
+.ccl-container
+.cont-w-50 {
   max-width: 100%;
   flex: 0 0 100%;
 }
 
 body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-  main
-  .ccl-container
-  .cont-w-75 {
+main
+.ccl-container
+.cont-w-75 {
   max-width: 100%;
   flex: 0 0 100%;
 }
 @media (min-width: 576px) {
   body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-    main
-    .ccl-container {
+  main
+  .ccl-container {
     max-width: 540px;
   }
 }
 @media (min-width: 768px) {
   body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-    main
-    .ccl-container {
+  main
+  .ccl-container {
     max-width: 720px;
   }
 
   body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-    main
-    .ccl-container
-    .cont-w-25 {
+  main
+  .ccl-container
+  .cont-w-25 {
     max-width: 30%;
     flex: 0 0 30%;
   }
 
   body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-    main
-    .ccl-container
-    .cont-w-50 {
+  main
+  .ccl-container
+  .cont-w-50 {
     max-width: 50%;
     flex: 0 0 50%;
   }
 
   body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-    main
-    .ccl-container
-    .cont-w-75 {
+  main
+  .ccl-container
+  .cont-w-75 {
     max-width: 70%;
     flex: 0 0 70%;
   }
 
   body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-    main
-    .ccl-container
-    .cont-o-1 {
+  main
+  .ccl-container
+  .cont-o-1 {
     order: 1;
   }
 
@@ -253,30 +253,30 @@ body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
 }
 @media (min-width: 992px) {
   body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-    main
-    .ccl-container {
+  main
+  .ccl-container {
     max-width: 960px;
   }
 }
 @media (min-width: 1200px) {
   body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-    main
-    .ccl-container {
+  main
+  .ccl-container {
     max-width: 1127px;
   }
 
   body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-    main
-    .ccl-container
-    .cont-w-25 {
+  main
+  .ccl-container
+  .cont-w-25 {
     max-width: 25%;
     flex: 0 0 25%;
   }
 
   body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-    main
-    .ccl-container
-    .cont-w-75 {
+  main
+  .ccl-container
+  .cont-w-75 {
     max-width: 75%;
     flex: 0 0 75%;
   }
@@ -705,6 +705,23 @@ body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
   margin: 0 auto !important;
 }
 
+.ui.fluid.card.u-card .extra.content a.ui.button {
+  display: inline-block;
+  padding: 0.3rem 1rem;
+  margin: 0;
+  appearance: none;
+  background: none;
+  color: @clmsGreen;
+  color: #a0b128;
+  cursor: pointer;
+  font-size: 0.85rem;
+  line-height: 1.5;
+  text-align: center;
+  text-decoration: none;
+  transition: all 0.3s ease-out;
+  vertical-align: middle;
+}
+
 /* Search */
 .search-results {
   margin-bottom: 2rem;