@eeacms/volto-clms-theme 1.0.131 → 1.0.132

package/CHANGELOG.md

@@ -4,6 +4,47 @@ 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.0.132](https://github.com/eea/volto-clms-theme/compare/1.0.131...1.0.132) - 3 October 2022
+
+#### :rocket: New Features
+
+- feat: upgrade volto-form-block version [Mikel Larreategi - [`622012b`](https://github.com/eea/volto-clms-theme/commit/622012b48bba449950b25e2efb1fb838aa15faaa)]
+- feat: restore the ability to change the title of the Area of interest column in the prepackaged files download [Mikel Larreategi - [`4154428`](https://github.com/eea/volto-clms-theme/commit/415442889655773c6fdc2249f6a12fcf744150f3)]
+- feat: Lowering the duration of the access to downloads CLMS-1206 [ionlizarazu - [`9e8475f`](https://github.com/eea/volto-clms-theme/commit/9e8475f544257764d36486543aeaccc45793f9f2)]
+- feat: add step field to doubleRangeFacet to customize the step of the range selector [ionlizarazu - [`9118590`](https://github.com/eea/volto-clms-theme/commit/9118590ea69d64001fdcf445feab9ad1eeedb27a)]
+
+#### :bug: Bug Fixes
+
+- fix: delete user cart before deleting the profile [Mikel Larreategi - [`138c530`](https://github.com/eea/volto-clms-theme/commit/138c530f48757bd6d1746dc20227062cde178d1d)]
+- fix: portal_type ordering in facets [ionlizarazu - [`ec1a42c`](https://github.com/eea/volto-clms-theme/commit/ec1a42c653db1857eca947d62653dd837a0acb83)]
+- fix: wrong functionality of the cart rendering after adding some packages to it [ionlizarazu - [`65746d9`](https://github.com/eea/volto-clms-theme/commit/65746d949b499cace652c0f57d7fa22bbb94c851)]
+- fix:small changes [ionlizarazu - [`5377522`](https://github.com/eea/volto-clms-theme/commit/5377522ebecb7b15954b2f10ac16662ffb582770)]
+- fix: change added to cart toast [ionlizarazu - [`79ab75d`](https://github.com/eea/volto-clms-theme/commit/79ab75de1376c546a5d966670689d0f0dce2600a)]
+- fix: Listing document card edit icon [ionlizarazu - [`de5e15e`](https://github.com/eea/volto-clms-theme/commit/de5e15eb11518b796719d56302198900d99d2667)]
+- fix:move the taxonomy ordering functionality to the structure_taxonomy_terms function [ionlizarazu - [`de90d5a`](https://github.com/eea/volto-clms-theme/commit/de90d5ab60c66781da39d040a93ca735e0bc2e3b)]
+- fix: use UniversalLink in WorkOpportunity and Tenders [Mikel Larreategi - [`9b11306`](https://github.com/eea/volto-clms-theme/commit/9b11306affd25ac3ec6fb25dbf455df0f521c87c)]
+- fix: allow more image formats, and do not try to show TIFFs, because they can't be shown [Mikel Larreategi - [`2ef8546`](https://github.com/eea/volto-clms-theme/commit/2ef8546dad19669e2dc5751b35075cfd1a73a2ba)]
+- fix: change title in Dataset citation [Mikel Larreategi - [`8c07443`](https://github.com/eea/volto-clms-theme/commit/8c0744384dd62c78fbfa91deae9e716dcf5bfd50)]
+- fix: sort technical documentation on dataset view according to the documentation_sorting index like we do in the product related technical documentation. CLMS-1416 [Mikel Larreategi - [`a315100`](https://github.com/eea/volto-clms-theme/commit/a315100f9785db65bdbb2d42ff4a77b6aa85c17f)]
+- fix: when log out redirect to portal [Unai - [`d1c7937`](https://github.com/eea/volto-clms-theme/commit/d1c79376e15e542eb381f5e2156466d45882eb11)]
+- fix: CLMS-1369 [Unai - [`9c246f4`](https://github.com/eea/volto-clms-theme/commit/9c246f4e8f8fc3a3162bf0c47718fcbf7c6ee358)]
+- fix: prepackage filter placeholder [ionlizarazu - [`3f4e26b`](https://github.com/eea/volto-clms-theme/commit/3f4e26b0afd40d2799d2038bc4534eb8f294ff57)]
+- fix: CLMS-1159 [Unai - [`966d93a`](https://github.com/eea/volto-clms-theme/commit/966d93a5c8c33971554e480cb2ed8fa55c6608d0)]
+- fix: search in item area instead of resolution. Select all button [ionlizarazu - [`9d02ff8`](https://github.com/eea/volto-clms-theme/commit/9d02ff81f60d1ca836abc5ddcda213b9fa7d291a)]
+
+#### :nail_care: Enhancements
+
+- refactor: CLMS-941 [Unai - [`87fe047`](https://github.com/eea/volto-clms-theme/commit/87fe0471d5ec52964641eb127d6bc5020fd21c93)]
+
+#### :house: Internal changes
+
+- chore: add some missing button destination to go to correct URLs [Mikel Larreategi - [`733b88d`](https://github.com/eea/volto-clms-theme/commit/733b88d5df62817b86cbd464f4b93d8edd4a9a85)]
+- chore: use UniversalLink in profile view [Mikel Larreategi - [`f506ab6`](https://github.com/eea/volto-clms-theme/commit/f506ab6089ad1b3da3fe9b12e6b2a7b9a2169023)]
+
+#### :hammer_and_wrench: Others
+
+- merge sprint-35 [Mikel Larreategi - [`8bd4d75`](https://github.com/eea/volto-clms-theme/commit/8bd4d758de17ac73d8f0fc7b91fedd68cc39d4dd)]
+- email widget checks if email is valid when clicking on its input [Unai - [`a4c9bd6`](https://github.com/eea/volto-clms-theme/commit/a4c9bd601b44143e5e79e0c67c92f30b08aeab56)]
 ### [1.0.131](https://github.com/eea/volto-clms-theme/compare/1.0.130...1.0.131) - 28 September 2022
 
 #### :bug: Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.131",
+  "version": "1.0.132",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -55,7 +55,7 @@
     "react-svg": "14.0.4",
     "slick-carousel": "1.8.1",
     "volto-dropdownmenu": "2.2.7",
-    "volto-form-block": "2.5.0",
+    "volto-form-block": "2.7.1",
     "react-input-range": "^1.3.0",
     "lightgallery": "^2.4.0",
     "validator": "13.7.0"
@@ -76,7 +76,8 @@
     "prettier-eslint": "^12.0.0",
     "stylelint": "^13.12.0",
     "stylelint-config-idiomatic-order": "8.1.0",
-    "stylelint-prettier": "1.1.2"
+    "stylelint-prettier": "1.1.2",
+    "md5": "^2.3.0"
   },
   "prettier": {
     "trailingComma": "all",

package/src/components/Blocks/CustomTemplates/VoltoListingBlock/CclListingWorkOpportunities.jsx

@@ -1,10 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { defineMessages, useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
+
+import { UniversalLink } from '@plone/volto/components';
 import { workOpportunitiesCclDateTimeFormat } from '@eeacms/volto-clms-theme/components/CclUtils';
 
+import PropTypes from 'prop-types';
+
 const messages = defineMessages({
   ProcurementNo: {
     id: 'ProcurementNo',
@@ -43,7 +46,9 @@ const CclWorkOpportunity = (props) => {
             : intl.formatMessage(messages.ProcurementNo)}
         </span>
         {item.url ? (
-          <a href={item.url || ''}>{item.procurement_no}</a>
+          <UniversalLink href={item.url || ''}>
+            {item.procurement_no}
+          </UniversalLink>
         ) : (
           item.procurement_no
         )}

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

@@ -6,11 +6,29 @@ import React, { useState } from 'react';
 import InputRange from 'react-input-range';
 import { Segment } from 'semantic-ui-react';
 import {
-  selectFacetSchemaEnhancer,
   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;
+};
+
 const DoubleRangeFacet = (props) => {
   const { facet, choices, onChange, value } = props;
   const facetValue = value;
@@ -21,13 +39,13 @@ const DoubleRangeFacet = (props) => {
       min: Math.min.apply(
         Math,
         values.map(function (o) {
-          return o.value;
+          return o.value.replace(/[a-zA-Z]/, '');
         }),
       ),
       max: Math.max.apply(
         Math,
         values.map(function (o) {
-          return o.value;
+          return o.value.replace(/[a-zA-Z]/, '');
         }),
       ),
     };
@@ -64,6 +82,7 @@ const DoubleRangeFacet = (props) => {
           <InputRange
             minValue={startingValues.min}
             maxValue={startingValues.max}
+            step={facet.step || 1}
             value={
               facetValue.length > 0 ? convertToRange(facetValue) : rangeValues
             }
@@ -76,7 +95,7 @@ const DoubleRangeFacet = (props) => {
   );
 };
 
-DoubleRangeFacet.schemaEnhancer = selectFacetSchemaEnhancer;
+DoubleRangeFacet.schemaEnhancer = doubleRangeFacetSchemaEnhancer;
 DoubleRangeFacet.stateToValue = selectFacetStateToValue;
 DoubleRangeFacet.valueToQuery = selectFacetValueToQuery;
 export default DoubleRangeFacet;

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

@@ -41,16 +41,17 @@ const rewriteOptions = (name, choices) => {
     }));
   }
   const portal_types = [
-    'DataSet',
     'Product',
+    'DataSet',
+    'TechnicalLibrary',
+    'UseCase',
     'News Item',
     'eea.meeting',
-    'UseCase',
-    'WorkOpportunity',
     'Tender',
-    'TechnicalLibrary',
+    'WorkOpportunity',
     'Document',
   ];
+
   if (name === 'portal_type') {
     result = choices
       .filter((opt) => portal_types.includes(opt.value))
@@ -58,12 +59,7 @@ const rewriteOptions = (name, choices) => {
         return { ...opt, label: portal_types_labels[opt.value] };
       })
       .sort((a, b) => {
-        if (a.label < b.label) {
-          return -1;
-        } else if (a.label > b.label) {
-          return 1;
-        }
-        return 0;
+        return portal_types.indexOf(a.value) - portal_types.indexOf(b.value);
       });
   }
   if (name === 'classificationTopicCategory') {
@@ -80,20 +76,20 @@ const rewriteOptions = (name, choices) => {
         return 0;
       });
   }
-  if (name === 'taxonomy_technical_library_categorization') {
-    result = choices
-      .sort((a, b) => {
-        if (a.label < b.label) {
-          return -1;
-        } else if (a.label > b.label) {
-          return 1;
-        }
-        return 0;
-      })
-      .map((opt) => {
-        return { ...opt, label: opt.label.replace(/^[0-9][0-9]#/, '') };
-      });
-  }
+  // if (name === 'taxonomy_technical_library_categorization') {
+  //   result = choices
+  //     .sort((a, b) => {
+  //       if (a.label < b.label) {
+  //         return -1;
+  //       } else if (a.label > b.label) {
+  //         return 1;
+  //       }
+  //       return 0;
+  //     })
+  //     .map((opt) => {
+  //       return { ...opt, label: opt.label.replace(/^[0-9][0-9]#/, '') };
+  //     });
+  // }
   if (name === 'component_title') {
     result = choices
       .sort((a, b) => {

package/src/components/CLMSDatasetDetailView/CLMSDatasetDetailView.jsx

@@ -44,7 +44,9 @@ const CLMSDatasetDetailView = ({ content, token }) => {
   const wms_fields_importation = useSelector((state) => state.importWMSFields);
   const user = useSelector((state) => state.users?.user);
   React.useEffect(() => {
-    dispatch(getUser(token));
+    if (token) {
+      dispatch(getUser(token));
+    }
   }, [dispatch, token]);
 
   function handleImport(id, type) {
@@ -388,7 +390,9 @@ const CLMSDatasetDetailView = ({ content, token }) => {
 
         {content?.downloadable_dataset &&
           content?.downloadable_files?.items?.length > 0 && (
-            <div tabTitle="Download">{DownloadDataSetContent(content)}</div>
+            <div tabTitle="Download">
+              {DownloadDataSetContent(content, token)}
+            </div>
           )}
         {content?.downloadable_dataset &&
           content?.downloadable_files?.items?.length === 0 && (

package/src/components/CLMSDatasetDetailView/DataSetInfoContent.jsx

@@ -30,6 +30,8 @@ const DataSetInfoContent = (props) => {
             portal_type: 'TechnicalLibrary',
             path: '/',
             associated_datasets: UID,
+            sort_on: 'documentation_sorting',
+            sort_order: 'ascending',
           },
           id,
         ),
@@ -78,7 +80,7 @@ const DataSetInfoContent = (props) => {
         citation?.data !== '<p><br/></p>' &&
         citation?.data !== '<p></p>' && (
           <CclCitation
-            title="Citation status"
+            title="Dataset citation"
             marginBottom={true}
             children={<StringToHTML string={citation?.data} />}
           ></CclCitation>

package/src/components/CLMSDatasetDetailView/DownloadDataSetContent.jsx

@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import CclDownloadTable from '@eeacms/volto-clms-theme/components/CclDownloadTable/CclDownloadTable';
-import { getUser } from '@plone/volto/actions';
 import { useDispatch, useSelector } from 'react-redux';
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
 import config from '@plone/volto/registry';
@@ -29,9 +28,6 @@ const DownloadDataSetContent = (data, token) => {
     }
   }, [registryRecords, registry_key, location.pathname]);
   const user = useSelector((state) => state.users?.user);
-  React.useEffect(() => {
-    dispatch(getUser(token));
-  }, [dispatch, token]);
 
   function modalStatus(status) {
     if (status === true) {

package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx

@@ -13,12 +13,7 @@ import {
   formatNaming,
   originalFormatNaming,
 } from './cartUtils';
-import {
-  getDownloadtool,
-  getFormatConversionTable,
-  getProjections,
-  postDownloadtool,
-} from '../../actions';
+import { getDownloadtool, postDownloadtool } from '../../actions';
 import { useDispatch, useSelector } from 'react-redux';
 
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
@@ -34,18 +29,20 @@ const CLMSCartContent = (props) => {
   const dispatch = useDispatch();
   const { removeCartItem, removeCartItems } = useCartState();
 
+  // state connections
+  const cart = useSelector((state) => state.cart_items.items);
+  const post_download_in_progress = useSelector(
+    (state) => state.downloadtool.post_download_in_progress,
+  );
+
   // component states
   const [openedModal, setOpenedModal] = useState(false);
   const [cartSelection, setCartSelection] = useState([]);
   const [loadingTable, setLoadingTable] = useState(false);
   const [cartItems, setCartItems] = useState([]);
-
-  // state connections
-  const cart = useSelector((state) => state.cart_items.items);
-  const post_download_in_progress = useSelector(
-    (state) => state.downloadtool.post_download_in_progress,
+  const datasets_items = useSelector(
+    (state) => state.datasetsByUid.datasets.items,
   );
-  const datasets = useSelector((state) => state.datasetsByUid.datasets.items);
   const formatConversionTable = useSelector(
     (state) => state.downloadtool.format_conversion_table_in_progress,
   );
@@ -55,12 +52,7 @@ const CLMSCartContent = (props) => {
   const nutsnames = useSelector((state) => state.nutsnames.nutsnames);
 
   useEffect(() => {
-    dispatch(getProjections());
-    dispatch(getFormatConversionTable());
-  }, [dispatch]);
-
-  useEffect(() => {
-    setCartItemInProgress(post_download_in_progress['unique_ids']);
+    setCartItemInProgress(post_download_in_progress.unique_ids || '');
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [post_download_in_progress]);
 
@@ -70,10 +62,14 @@ const CLMSCartContent = (props) => {
       array_ids.includes(item.unique_id),
     );
     setCartItems(cleanDuplicatesEntries(newCart));
-    if (datasets?.length > 0 && cart.length > 0 && !newCart.length) {
+    if (
+      datasets_items?.length > 0 &&
+      cart.length > 0 &&
+      cart.length !== newCart.length
+    ) {
       concatRequestedCartItem();
     }
-  }, [cart, datasets]);
+  }, [cart, datasets_items]);
 
   useEffect(() => {
     if (Object.keys(nutsnames).length > 0 && cart.length > 0) {
@@ -82,21 +78,22 @@ const CLMSCartContent = (props) => {
   }, [nutsnames]);
 
   function concatRequestedCartItem() {
+    let newCartItems = [...cartItems];
     localSessionCart.forEach((localItem) => {
-      const requestedItem = datasets
-        ? datasets.find((req) => req.UID === localItem.UID)
+      const requestedItem = datasets_items
+        ? datasets_items.find((req) => req.UID === localItem.UID)
         : false;
       if (requestedItem) {
         const file_data = requestedItem?.downloadable_files?.items.find(
           (item) => item['@id'] === localItem.file_id,
         );
         if (file_data) {
-          cartItems.push(
+          newCartItems.push(
             getCartObjectFromPrepackaged(file_data, requestedItem),
           );
-          setCartItems(cleanDuplicatesEntries(cartItems));
+          setCartItems(cleanDuplicatesEntries(newCartItems));
         } else {
-          cartItems.push(
+          newCartItems.push(
             getCartObjectFromMapviewer(
               localItem,
               requestedItem,
@@ -104,7 +101,7 @@ const CLMSCartContent = (props) => {
               nutsnames,
             ),
           );
-          setCartItems(cleanDuplicatesEntries(cartItems));
+          setCartItems(cleanDuplicatesEntries(newCartItems));
         }
       }
     });
@@ -265,8 +262,8 @@ const CLMSCartContent = (props) => {
             (obj) => obj.unique_id === item.unique_id,
           );
           cartItems[objIndex].type = data.value;
-          const dataset = datasets
-            ? datasets.find((req) => req.UID === item.dataset_uid)
+          const dataset = datasets_items
+            ? datasets_items.find((req) => req.UID === item.dataset_uid)
             : false;
           const format_item = dataset.dataset_download_information.items.find(
             (item) => item['@id'] === data.value,

package/src/components/CLMSDownloadCartView/CLMSDownloadCartView.jsx

@@ -5,29 +5,26 @@
 
 import { Forbidden, Unauthorized } from '@plone/volto/components';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import {
   getDatasetsByUid,
   getExtraBreadcrumbItems,
   getNutsNames,
 } from '../../actions';
-import useCartState, {
-  CART_SESSION_KEY,
-} from '@eeacms/volto-clms-utils/cart/useCartState';
+import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
 import { useDispatch, useSelector } from 'react-redux';
 
 import CLMSCartContent from './CLMSCartContent';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Helmet } from '@plone/volto/helpers';
 import { Link } from 'react-router-dom';
+import { getFormatConversionTable, getProjections } from '../../actions';
 
 const CLMSDownloadCartView = (props) => {
   const dispatch = useDispatch();
-  const user_id = useSelector((state) => state.users.user.id);
   const locale = useSelector((state) => state.intl?.locale);
-  const [localSessionCart, setLocalSessionCart] = useState([]);
+  const cart = useSelector((state) => state.cart_items.items);
   const { isLoggedIn } = useCartState();
-
   const { formatMessage } = useIntl();
   const messages = defineMessages({
     Cart: {
@@ -36,6 +33,11 @@ const CLMSDownloadCartView = (props) => {
     },
   });
 
+  useEffect(() => {
+    dispatch(getProjections());
+    dispatch(getFormatConversionTable());
+  }, [dispatch]);
+
   useEffect(() => {
     dispatch(
       getExtraBreadcrumbItems([
@@ -50,23 +52,17 @@ const CLMSDownloadCartView = (props) => {
     return () => {
       dispatch(getExtraBreadcrumbItems([]));
     };
-  }, [dispatch, formatMessage, messages.Cart, props.location.pathname]);
-
-  useEffect(() => {
-    const CART_SESSION_USER_KEY = CART_SESSION_KEY.concat(`_${user_id}`);
-    setLocalSessionCart(
-      JSON.parse(localStorage.getItem(CART_SESSION_USER_KEY)) || [],
-    );
-  }, [user_id]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.location.pathname]);
 
   useEffect(() => {
     let localsessionUidsList = [];
-    if (localSessionCart?.length !== 0) {
+    if (cart?.length !== 0) {
       localsessionUidsList = [
-        ...new Set(localSessionCart.map((item) => item.UID || item.id)),
+        ...new Set(cart.map((item) => item.UID || item.id)),
       ];
     }
-    let localsessionNutsIDList = [...new Set(getNutsIDList(localSessionCart))];
+    let localsessionNutsIDList = [...new Set(getNutsIDList(cart))];
     let uidsList = [...new Set(localsessionUidsList)];
     if (uidsList.length > 0) {
       dispatch(getDatasetsByUid(uidsList));
@@ -75,7 +71,7 @@ const CLMSDownloadCartView = (props) => {
       dispatch(getNutsNames(localsessionNutsIDList));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [localSessionCart, dispatch]);
+  }, [cart, dispatch]);
 
   function getNutsIDList(cart_data) {
     const nuts_ids = [];
@@ -134,7 +130,7 @@ const CLMSDownloadCartView = (props) => {
                   </ul>
                 </div>
               </div>
-              <CLMSCartContent localSessionCart={localSessionCart} />
+              <CLMSCartContent localSessionCart={cart} />
             </div>
           </>
         )}

package/src/components/CLMSDownloadsView/CLMSDownloadTasks.jsx

@@ -74,7 +74,7 @@ const CLMSDownloadTasks = (props) => {
       (today.getTime() - (FinalizationDate.getTime() || 0)) /
         (1000 * 3600 * 24),
     );
-    return daysDiff - 10 < -1;
+    return daysDiff - 3 < -1;
   };
 
   const MapTasks = (mapProps) => {

package/src/components/CLMSProfileView/CLMSApiTokensView.jsx

@@ -271,7 +271,7 @@ class CLMSApiTokensView extends Component {
                     <CclModal
                       onClick={() => this.onClose}
                       trigger={
-                        <CclButton mode={'filled'}>
+                        <CclButton mode={'filled'} to="profile#API-tokens">
                           {this.props.intl.formatMessage(messages.deleteButton)}
                         </CclButton>
                       }
@@ -284,6 +284,7 @@ class CLMSApiTokensView extends Component {
                       </p>
                       <CclButton
                         mode={'filled'}
+                        to="profile#API-tokens"
                         onClick={() => {
                           this.deleteToken(item.key_id);
                         }}
@@ -294,10 +295,14 @@ class CLMSApiTokensView extends Component {
                   </div>
                 </>
               ))}
-              <br></br>
-              <br></br>
+              <br />
+              <br />
               {this.state.createNewToken === false && (
-                <CclButton mode={'filled'} onClick={this.handleClick}>
+                <CclButton
+                  mode={'filled'}
+                  onClick={this.handleClick}
+                  to="profile#API-tokens"
+                >
                   {this.props.intl.formatMessage(messages.createTitle)}
                 </CclButton>
               )}
@@ -305,7 +310,7 @@ class CLMSApiTokensView extends Component {
                 <CclModal
                   onClick={() => this.onClose}
                   trigger={
-                    <CclButton mode={'filled'}>
+                    <CclButton mode={'filled'} to="profile#API-tokens">
                       {this.props.intl.formatMessage(messages.createTitle)}
                     </CclButton>
                   }
@@ -343,6 +348,7 @@ class CLMSApiTokensView extends Component {
                             placeholder=""
                             aria-label="Name of the new token"
                           />
+                          <br />
                           <input
                             className="ccl-button ccl-button-green"
                             type="button"
@@ -393,8 +399,10 @@ class CLMSApiTokensView extends Component {
                                         class="ccl-text-input"
                                         value={JSON.stringify(item)}
                                       />
+                                      <br />
                                       <CclButton
                                         mode={'filled'}
+                                        to="profile#API-tokens"
                                         onClick={() => {
                                           navigator.clipboard.writeText(
                                             JSON.stringify(item),
@@ -405,13 +413,18 @@ class CLMSApiTokensView extends Component {
                                           messages.copyButton,
                                         )}
                                       </CclButton>
+                                      <br />
                                     </>
                                   )) ||
                                     ''}
                                 </>
                               ))}
                             </form>
-                            <CclButton mode={'filled'} onClick={this.onClose}>
+                            <CclButton
+                              mode={'filled'}
+                              onClick={this.onClose}
+                              to="profile#API-tokens"
+                            >
                               {this.props.intl.formatMessage(
                                 messages.goBackButton,
                               )}

package/src/components/CLMSProfileView/CLMSDeleteProfileView.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { injectIntl } from 'react-intl';
-import { FormattedMessage } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { Container } from 'semantic-ui-react';
@@ -11,6 +10,7 @@ import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
 import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
 
 import { delProfile } from '../../actions';
+import { FormattedMessage } from 'react-intl';
 
 /**
  * CLMSProfileView container.
@@ -100,6 +100,7 @@ export const CLMSDeleteProfileView = (props) => {
                       setOpen({ ...open, 'delete-profile': false });
                     }}
                     mode="filled"
+                    to="profile#Delete-profile"
                   >
                     <FormattedMessage
                       id="Yes, I want to delete my account"

package/src/components/CLMSProfileView/CLMSUserProfileView.jsx

@@ -1,21 +1,25 @@
-/**
- * CLMSProfileView container.
- * @module components/CLMSProfileView/CLMSProfileView
- */
-
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
 import { defineMessages, injectIntl } from 'react-intl';
-import jwtDecode from 'jwt-decode';
-import { Form, Toast } from '@plone/volto/components';
+import { connect } from 'react-redux';
 import { toast } from 'react-toastify';
+import { compose } from 'redux';
+import { Container } from 'semantic-ui-react';
+
 import { getUser, updateUser } from '@plone/volto/actions';
+import { UniversalLink } from '@plone/volto/components';
+import { Form, Toast } from '@plone/volto/components';
 import { getBaseUrl } from '@plone/volto/helpers';
-import { Container } from 'semantic-ui-react';
+
 import { getUserSchema } from '../../actions';
 
+import jwtDecode from 'jwt-decode';
+import PropTypes from 'prop-types';
+
+/**
+ * CLMSProfileView container.
+ * @module components/CLMSProfileView/CLMSProfileView
+ */
+
 const messages = defineMessages({
   UserProfile: {
     id: 'UserProfile',
@@ -159,7 +163,10 @@ class CLMSUserProfileView extends Component {
                 using EU Login to enter this site. <br />
                 If you want to change your fullname and e-mail address, please
                 do so in your{' '}
-                <a href="https://ecas.ec.europa.eu/cas/">EU Login account</a>.
+                <UniversalLink href={'https://ecas.ec.europa.eu/cas/'}>
+                  EU Login account
+                </UniversalLink>
+                .
               </p>
               <div>
                 {this.props?.userschema?.loaded && (

package/src/components/CLMSWorkOpportunityView/WorkOpportunityView.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { workOpportunitiesCclDateTimeFormat } from '@eeacms/volto-clms-theme/components/CclUtils';
 import { useSelector } from 'react-redux';
 
+import { UniversalLink } from '@plone/volto/components';
+import { workOpportunitiesCclDateTimeFormat } from '@eeacms/volto-clms-theme/components/CclUtils';
+
 const messages = defineMessages({
   ProcurementNo: {
     id: 'ProcurementNo',
@@ -41,7 +43,9 @@ const CLMSWorkOpportunityView = (props) => {
               : intl.formatMessage(messages.ProcurementNo)}
           </span>
           {content.url ? (
-            <a href={content.url || ''}>{content.procurement_no}</a>
+            <UniversalLink href={content.url || ''}>
+              {content.procurement_no}
+            </UniversalLink>
           ) : (
             content.procurement_no
           )}

package/src/components/CclCard/CclCard.jsx

@@ -9,6 +9,7 @@ import { Label } from 'semantic-ui-react';
 import { portal_types_labels } from '../Blocks/CustomTemplates/VoltoSearchBlock';
 import penSVG from '@plone/volto/icons/pen.svg';
 import { Icon } from 'semantic-ui-react';
+import { 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';
@@ -58,9 +59,9 @@ const DocCard = ({ card, url, showEditor, children }) => {
           )}
           {card?.Type === 'TechnicalLibrary' && showEditor && (
             <Link to={`${url}/edit`}>
-              <Icon
+              <VoltoIcon
                 name={penSVG}
-                size="15px"
+                size="12px"
                 className="circled"
                 title={'Edit'}
               />

package/src/components/CclDownloadTable/CclDownloadTable.jsx

@@ -10,7 +10,7 @@ import {
 import React, { useState } from 'react';
 
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
-import { Icon } from '@plone/volto/components';
+import { Icon, Toast } from '@plone/volto/components';
 import PropTypes from 'prop-types';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import paginationLeftSVG from '@plone/volto/icons/left-key.svg';
@@ -18,11 +18,13 @@ import paginationRightSVG from '@plone/volto/icons/right-key.svg';
 import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
 import { useSelector } from 'react-redux';
 import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
+import { toast } from 'react-toastify';
+import { defineMessages, useIntl } from 'react-intl';
 
 function CclDownloadTable(props) {
   const locale = useSelector((state) => state.intl?.locale);
   const { dataset } = props;
-  const { addCartItem, Toast, isLoggedIn } = useCartState();
+  const { addCartItem, isLoggedIn } = useCartState();
   const [cartSelection, setCartSelection] = useState([]);
   const [currentPageItems, setCurrentPageItems] = useState([]);
   const [currentPage, setCurrentPage] = useState(1);
@@ -32,6 +34,7 @@ function CclDownloadTable(props) {
   const [totalPages, setTotalPages] = useState(
     Math.ceil(dataset?.downloadable_files?.items.length / 10),
   );
+  const intl = useIntl();
   // complete the selected file with dataset UID, title and a concat of dataset.UID and block id to get unique id for the whole web
   const prePackagedCollection = dataset?.downloadable_files?.items.map(
     (element) => {
@@ -44,13 +47,24 @@ function CclDownloadTable(props) {
     },
   );
 
+  const messages = defineMessages({
+    added_to_cart: {
+      id: 'Added to cart',
+      defaultMessage: 'Added to cart',
+    },
+    success: {
+      id: 'Success',
+      defaultMessage: 'Success',
+    },
+  });
+
   React.useEffect(() => {
     setCurrentPageItems(prePackagedCollection.slice(0, 10));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   React.useEffect(() => {
-    calcHeaderCheckboxStatus();
+    calcHeaderCheckboxStatus(currentPageItems);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [cartSelection, currentPage]);
 
@@ -78,17 +92,22 @@ function CclDownloadTable(props) {
       setFilteredItems(prePackagedCollection);
       setTotalPages(Math.ceil(prePackagedCollection.length / 10));
     }
-    calcHeaderCheckboxStatus();
+    calcHeaderCheckboxStatus(currentPageItems);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filterText]);
 
-  const calcHeaderCheckboxStatus = () => {
-    const currentPageSelection = currentPageItems.filter((item) =>
+  const calcHeaderCheckboxStatus = (currentPI) => {
+    const currentPageSelection = currentPI.filter((item) =>
       cartSelection.includes(item.unique_id),
     );
     if (currentPageSelection.length === 10) {
       setpageCheckboxStatus(2);
+    } else if (
+      currentPI.length !== 0 &&
+      currentPageSelection.length === currentPI.length
+    ) {
+      setpageCheckboxStatus(2);
     } else if (cartSelection.length > 0) {
       setpageCheckboxStatus(1);
     } else {
@@ -142,7 +161,11 @@ function CclDownloadTable(props) {
     setCartSelection(newCartSelection);
   };
 
-  const addToCard = () => {
+  const selectAllPagesCart = () => {
+    setCartSelection(prePackagedCollection.map((item) => item.unique_id));
+  };
+
+  const addToCard = async () => {
     let selectedCartItems = prePackagedCollection
       .filter((item) => cartSelection.includes(item.unique_id) && item)
       // Get only UID and unique_id from selectedCartItems array of objects
@@ -153,7 +176,15 @@ function CclDownloadTable(props) {
         file: item.file,
         unique_id: item.unique_id,
       }));
-    addCartItem(selectedCartItems);
+    await addCartItem(selectedCartItems).then(() => {
+      toast.success(
+        <Toast
+          success
+          title={intl.formatMessage(messages.success)}
+          content={intl.formatMessage(messages.added_to_cart)}
+        />,
+      );
+    });
   };
 
   const clearSelection = () => {
@@ -201,7 +232,6 @@ function CclDownloadTable(props) {
     validcolums &&
     columns && (
       <div className="dataset-download-table">
-        <Toast message="Added to cart" time={5000}></Toast>
         <h2>Download pre-packaged data collections</h2>
         <p>
           Please note that you can only download the latest version of our
@@ -237,7 +267,15 @@ function CclDownloadTable(props) {
                 <>
                   {' - '}
                   <Button basic color="olive" onClick={clearSelection}>
-                    Clear selection <Icon name={clearSVG} size={20}></Icon>
+                    Clear selection <Icon name={clearSVG} size={'20px'}></Icon>
+                  </Button>
+                </>
+              )}
+              {cartSelection.length !== prePackagedCollection.length && (
+                <>
+                  <br />
+                  <Button basic color="olive" onClick={selectAllPagesCart}>
+                    Select all
                   </Button>
                 </>
               )}
@@ -255,7 +293,9 @@ function CclDownloadTable(props) {
                 )}
                 {columns.includes('title') && <th>Title</th>}
                 {columns.includes('file') && <th>File name</th>}
-                {columns.includes('area') && <th>Area of interest</th>}
+                {columns.includes('area') && (
+                  <th>{dataset.download_table_area_of_interest_title}</th>
+                )}
                 {columns.includes('year') && <th>Year</th>}
                 {columns.includes('version') && <th>Version</th>}
                 {columns.includes('resolution') && <th>Resolution</th>}

package/src/components/CclInfoDescription/CclInfoDescription.jsx

@@ -9,18 +9,18 @@ import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
  * @param {string} title Header of Citation.
  * @param {string} tooltip Tooltip info text.
  * @param {string} description Description.
- * @example <CclInfoDescription 
+ * @example <CclInfoDescription
         title="Validation status"
         description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus
         mauris ante, a iaculis leo placerat quis.">
       </CclInfoDescription>
- * 
+ *
  */
 function CclInfoDescription({ title, description, tooltip }) {
   return (
     <div className="dataset-info-field">
       <div className="dataset-field-title">
-        <h3>{title}</h3>
+        {title && <h3>{title}</h3>}
         {tooltip && (
           <span className="info-icon" tooltip={tooltip} direction="up">
             <FontAwesomeIcon icon={faInfoCircle} />
@@ -33,7 +33,7 @@ function CclInfoDescription({ title, description, tooltip }) {
 }
 
 CclInfoDescription.propTypes = {
-  title: PropTypes.string.isRequired,
+  title: PropTypes.string,
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 };
 export default CclInfoDescription;

package/src/components/Widgets/ImageWidget.jsx

@@ -24,6 +24,9 @@ const imageMimetypes = [
   'image/jpg',
   'image/gif',
   'image/svg+xml',
+  'image/tif',
+  'image/tiff',
+  'image/bmp',
 ];
 const Dropzone = loadable(() => import('react-dropzone'));
 
@@ -94,15 +97,6 @@ const FileWidget = (props) => {
     ? `data:${value['content-type']};${value.encoding},${value.data}`
     : null;
 
-  const allowedFileTypes = [
-    'image/png',
-    'image/jpeg',
-    'image/webp',
-    'image/jpg',
-    'image/gif',
-    'image/svg+xml',
-  ];
-
   /**
    * Drop handler
    * @method onDrop
@@ -113,7 +107,7 @@ const FileWidget = (props) => {
     const file = files[0];
     readAsDataURL(file).then((data) => {
       const fields = data.match(/^data:(.*);(.*),(.*)$/);
-      if (!allowedFileTypes.includes(fields[1])) {
+      if (!imageMimetypes.includes(fields[1])) {
         toast.error(
           <Toast
             autoClose={5000}
@@ -135,7 +129,11 @@ const FileWidget = (props) => {
     let reader = new FileReader();
     reader.onload = function () {
       const fields = reader.result.match(/^data:(.*);(.*),(.*)$/);
-      if (imageMimetypes.includes(fields[1])) {
+      if (fields[1] === 'image/tif' || fields[1] === 'image/tiff') {
+        setFileType(true);
+        let imagePreview = document.getElementById(`field-${id}-image`);
+        imagePreview.src = '';
+      } else if (imageMimetypes.includes(fields[1])) {
         setFileType(true);
         let imagePreview = document.getElementById(`field-${id}-image`);
         imagePreview.src = reader.result;

package/src/components/Widgets/TaxonomyWidget.jsx

@@ -180,7 +180,7 @@ const CheckboxListParent = ({ option, key, onChange, value, id }) => {
                 }}
                 label={
                   <label htmlFor={`field-${option.value}`}>
-                    {option.label.replace(/^[0-9][0-9]#/, '')}
+                    {option.label}
                   </label>
                 }
                 checked={

package/src/components/Widgets/taxonomyUtils.js

@@ -17,39 +17,41 @@
 
 export const structure_taxonomy_terms = (choices) => {
   let options = [];
-  choices.forEach((choice) => {
-    var splitted_option = choice.label.split(' » ');
-    var modified_option = {
-      value: choice.value,
-      label:
-        splitted_option.length > 1
-          ? splitted_option.slice(-1).pop()
-          : choice.label,
-      original: choice.label,
-      childrens: [],
-    };
-    splitted_option.length === 1 && options.push(modified_option);
-  });
-  choices.forEach((choice) => {
-    var splitted_option = choice.label.split(' » ');
-    var modified_option = {
-      value: choice.value,
-      label:
-        splitted_option.length > 1
-          ? splitted_option.slice(-1).pop()
-          : choice.label,
-      original: choice.label,
-      childrens: [],
-    };
-    if (splitted_option.length > 1) {
-      var parent_option = splitted_option.slice(0, -1).pop();
-      options.forEach((opt) => {
-        if (opt.label === parent_option) {
-          opt.childrens.push(modified_option);
-        }
-      });
-    }
-  });
+  if (choices.length > 0) {
+    choices.forEach((choice) => {
+      var splitted_option = choice.label.split(' » ');
+      var modified_option = {
+        value: choice.value,
+        label:
+          splitted_option.length > 1
+            ? splitted_option.slice(-1).pop()
+            : choice.label,
+        original: choice.label,
+        childrens: [],
+      };
+      splitted_option.length === 1 && options.push(modified_option);
+    });
+    choices.forEach((choice) => {
+      var splitted_option = choice.label.split(' » ');
+      var modified_option = {
+        value: choice.value,
+        label:
+          splitted_option.length > 1
+            ? splitted_option.slice(-1).pop()
+            : choice.label,
+        original: choice.label,
+        childrens: [],
+      };
+      if (splitted_option.length > 1) {
+        var parent_option = splitted_option.slice(0, -1).pop();
+        options.forEach((opt) => {
+          if (opt.label === parent_option) {
+            opt.childrens.push(modified_option);
+          }
+        });
+      }
+    });
+  }
 
   // options = options.map((item) => {
   //   item['children'] = sort_array_items_by_key(item['childrens'], 'label');
@@ -58,5 +60,21 @@ export const structure_taxonomy_terms = (choices) => {
 
   // return sort_array_items_by_key(options, 'label');
   //return options.reverse();
+
+  if (options.length > 0) {
+    options = options
+      .sort((a, b) => {
+        if (a.label < b.label) {
+          return -1;
+        } else if (a.label > b.label) {
+          return 1;
+        }
+        return 0;
+      })
+      .map((option) => {
+        return { ...option, label: option.label.replace(/^[0-9][0-9]#/, '') };
+      });
+  }
+
   return options;
 };

package/src/customizations/volto/components/manage/Widgets/EmailWidget.jsx

@@ -7,6 +7,7 @@ import { FormFieldWrapper } from '@plone/volto/components';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
+import validator from 'validator';
 
 /** EmailWidget, a widget for email addresses
  *
@@ -38,28 +39,36 @@ const EmailWidget = (props) => {
       id: 'The entered email address is not valid',
       defaultMessage: 'The entered email address is not valid',
     },
+    valid_email: {
+      id: 'Valid email address',
+      defaultMessage: 'Valid email address',
+    },
   });
 
   const email =
     typeof window !== 'undefined' && document.getElementById(inputId) !== null
       ? document.getElementById(inputId).value
       : '';
+
+  const input =
+    typeof window !== 'undefined' && document.getElementById(inputId) !== null
+      ? document.getElementById(inputId)
+      : '';
   // email.addEventListener('input', function (e) {
   React.useEffect(() => {
     if (email !== '') {
-      if (email.validity !== undefined) {
-        if (email.validity.typeMismatch) {
-          email.setCustomValidity(intl.formatMessage(messages.invalid_email));
-          email.reportValidity();
-        } else {
-          email.setCustomValidity('');
-        }
+      if (validator.isEmail(email) === false) {
+        input.setCustomValidity(intl.formatMessage(messages.invalid_email));
+        input.reportValidity();
+      } else if (validator.isEmail(email)) {
+        input.setCustomValidity(intl.formatMessage(messages.valid_email));
+        input.reportValidity();
       }
     } else {
       return;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [email.value]);
+  }, [email]);
   // });
 
   return (
@@ -68,7 +77,7 @@ const EmailWidget = (props) => {
         <input
           id={inputId}
           name={id}
-          type="email"
+          // type="text"
           value={value || ''}
           disabled={isDisabled}
           placeholder={placeholder}

package/src/customizations/volto/components/manage/Widgets/TextareaWidget.jsx

@@ -30,7 +30,9 @@ const TextareaWidget = (props) => {
     if (maxLength & value?.length) {
       let remlength = maxLength - value.length;
       if (remlength < 0) {
-        setlengthError(`You have exceed word limit by ${Math.abs(remlength)}`);
+        setlengthError(
+          `You have exceed character limit by ${Math.abs(remlength)}`,
+        );
       } else {
         setlengthError('');
       }

package/theme/clms/css/styles.less

@@ -1243,6 +1243,10 @@ div#page-document h1.documentFirstHeading {
   margin-bottom: 0;
 }
 
+.slate-editor ul > ul {
+  margin-left: 35px;
+}
+
 // CLMS-1344
 #sidebar-metadata .react-select__option {
   white-space: nowrap;