@eeacms/volto-clms-theme 1.0.64 → 1.0.65

package/CHANGELOG.md

@@ -4,15 +4,41 @@ 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.65](https://github.com/eea/volto-clms-theme/compare/1.0.64...1.0.65)
+
+- Download page changes [`#193`](https://github.com/eea/volto-clms-theme/pull/193)
+- remove unneeded getNutsNames action dispatch [`9a1df64`](https://github.com/eea/volto-clms-theme/commit/9a1df64768757eeba697344ac0ceb3b715241baf)
+- reducer parameter [`ec242bc`](https://github.com/eea/volto-clms-theme/commit/ec242bc1c4039dc67ff5e54cdd078bf56692fdb2)
+- dispatch getDownloadtool when the task is deleted [`9354609`](https://github.com/eea/volto-clms-theme/commit/9354609c05a9efaae909f04af0195d27c82c076b)
+- add cart-downloads route to noncontentRoute [`f1d945f`](https://github.com/eea/volto-clms-theme/commit/f1d945f278c57e142010bc170e5526dcf639b826)
+- new texts [`31c96ce`](https://github.com/eea/volto-clms-theme/commit/31c96ce9de77d783768614260e319966c53fd1b9)
+- card styles [`15ddb0d`](https://github.com/eea/volto-clms-theme/commit/15ddb0daea6e949c371dc32d008f189bc82b350f)
+- text correction [`326f94c`](https://github.com/eea/volto-clms-theme/commit/326f94c95c37dcf5babdb157155795e6a0b33339)
+- texts and columns [`053e48c`](https://github.com/eea/volto-clms-theme/commit/053e48c05bf0629f616d16484640552b6ca1f083)
+- add Downloads to logged in user dropdown [`8bceefd`](https://github.com/eea/volto-clms-theme/commit/8bceefd619d31947ceed3da042c7995e1e26d86d)
+- bugfixes [`f8b3dc6`](https://github.com/eea/volto-clms-theme/commit/f8b3dc674b7cbba405e641465892028e757ed468)
+- subjects to taxonomy_technical_library_categorization at TL view [`73a4a25`](https://github.com/eea/volto-clms-theme/commit/73a4a252cba51e338e9c79572f92abc5c5a6ea16)
+- cart and donwload progress views with the nutsname [`bb9c42c`](https://github.com/eea/volto-clms-theme/commit/bb9c42c213dead2fbebf148cd34eb3fd268761e9)
+- add action and reducer for nutsnames [`67c4bee`](https://github.com/eea/volto-clms-theme/commit/67c4beea48c2833e4d77280636d2035ce901212d)
+- add initial tasks states [`9f61e7c`](https://github.com/eea/volto-clms-theme/commit/9f61e7c9ac35d3206f333b2026540e53e817a174)
+- replace subjects with taxonomy_technical_library_categorization [`df730eb`](https://github.com/eea/volto-clms-theme/commit/df730eb63cf096aa90be0567ceebebe0c21cf0f9)
+- show extra information in the file download card [`ff80e03`](https://github.com/eea/volto-clms-theme/commit/ff80e0344bee86d857ffadeb97bc2c5592735539)
+- show file size in human notation [`a5aa684`](https://github.com/eea/volto-clms-theme/commit/a5aa684f6ed6037a4a5e70c2605ba95a16fbb3b7)
+- fixedWidth to comment icon [`46edf90`](https://github.com/eea/volto-clms-theme/commit/46edf90311929c0eb3f26c48f8453d54ff120ee3)
+- request root breadcrumb to remove from the view and add subjects customized labels to the view [`3051e68`](https://github.com/eea/volto-clms-theme/commit/3051e68c62c040f7d2712e3b3df674b02e76607c)
+- hide default tags from Volto config [`5ca6bc9`](https://github.com/eea/volto-clms-theme/commit/5ca6bc9f8ba3718bf1397cd939c20caad909ff0c)
+
 #### [1.0.64](https://github.com/eea/volto-clms-theme/compare/1.0.63...1.0.64)
 
+> 31 January 2022
+
+- meeting anonymous form data issue [`#191`](https://github.com/eea/volto-clms-theme/pull/191)
 - Cart download page [`#192`](https://github.com/eea/volto-clms-theme/pull/192)
 - texts for no tasks [`169cd93`](https://github.com/eea/volto-clms-theme/commit/169cd93a8519f08a365852efc27db7edc5498a53)
 - show the selected nuts ID and improve wording [`8378a73`](https://github.com/eea/volto-clms-theme/commit/8378a7307093c4f9fa90f130d9ce0438ac443f2e)
 - add a link to the download process [`444dbff`](https://github.com/eea/volto-clms-theme/commit/444dbff4cab5f0f53a307685e6ba88a808ccfa1d)
 - loading process while download request is completed [`5f82fa8`](https://github.com/eea/volto-clms-theme/commit/5f82fa84c6c513653125fe80be00255d636521c1)
 - download link and filesize only on Finished_ok files [`f68b30c`](https://github.com/eea/volto-clms-theme/commit/f68b30c1330e25e4cd400f83e582e8143dbba576)
-- meeting anonymous form data issue [`e99e518`](https://github.com/eea/volto-clms-theme/commit/e99e5186451de427e0f4a0661e2b9300fd13c98d)
 - reorganize reducer response and create a new route to render the Cart Download view separated from the Cart view [`9ac01f7`](https://github.com/eea/volto-clms-theme/commit/9ac01f7f0ac3b812b20a66d326034f34327ca93f)
 
 #### [1.0.63](https://github.com/eea/volto-clms-theme/compare/1.0.62...1.0.63)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.64",
+  "version": "1.0.65",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/actions/downloadtool/get_downloadtool.js

@@ -18,3 +18,24 @@ export function getDownloadtool() {
     },
   };
 }
+
+/**
+ * Get nuts name by id.
+ * @module actions/getNutsName
+ */
+export const GET_NUTSNAME = 'GET_NUTSNAME';
+
+/**
+ * Get cart selection to downloadtool.
+ * @function getNutsNames
+ * @returns {Object} NutsName per NutsId.
+ */
+export function getNutsNames(nutsids) {
+  return {
+    type: GET_NUTSNAME,
+    request: {
+      op: 'get',
+      path: `/@nuts_name?nuts_ids=${nutsids}`,
+    },
+  };
+}

package/src/actions/index.js

@@ -40,6 +40,8 @@ export {
 export {
   GET_DOWNLOADTOOL,
   getDownloadtool,
+  GET_NUTSNAME,
+  getNutsNames,
 } from './downloadtool/get_downloadtool';
 
 export {

package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx

@@ -5,6 +5,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
+import { Segment, Select } from 'semantic-ui-react';
 import {
   getCartObjectFromMapviewer,
   getCartObjectFromPrepackaged,
@@ -17,14 +18,14 @@ import {
   postDownloadtool,
 } from '../../actions';
 import { useDispatch, useSelector } from 'react-redux';
-import { Toast } from '@plone/volto/components';
-import { toast } from 'react-toastify';
+
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
 import { Checkbox } from 'semantic-ui-react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Select, Segment } from 'semantic-ui-react';
+import { Toast } from '@plone/volto/components';
 import { cleanDuplicatesEntries } from '@eeacms/volto-clms-utils/utils';
 import { getAvailableConversion } from './conversion';
+import { toast } from 'react-toastify';
 import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
 
 const CLMSCartContent = (props) => {
@@ -44,6 +45,7 @@ const CLMSCartContent = (props) => {
   const projections = useSelector(
     (state) => state.downloadtool.projections_in_progress,
   );
+  const nutsnames = useSelector((state) => state.nutsnames.nutsnames);
 
   const [cartItems, setCartItems] = useState([]);
 
@@ -68,11 +70,17 @@ const CLMSCartContent = (props) => {
     }
   }, [cart, datasets]);
 
+  useEffect(() => {
+    if (Object.keys(nutsnames).length > 0 && cart.length > 0) {
+      concatRequestedCartItem();
+    }
+  }, [nutsnames]);
+
   function concatRequestedCartItem() {
     localSessionCart.forEach((localItem) => {
-      const requestedItem = datasets.find(
-        (requestedItem) => requestedItem.UID === localItem.UID,
-      );
+      const requestedItem = datasets
+        ? datasets.find((requestedItem) => requestedItem.UID === localItem.UID)
+        : false;
       if (requestedItem) {
         const file_data = requestedItem?.downloadable_files?.items.find(
           (item) => item['@id'] === localItem.file_id,
@@ -84,7 +92,12 @@ const CLMSCartContent = (props) => {
           setCartItems(cleanDuplicatesEntries(cartItems));
         } else {
           cartItems.push(
-            getCartObjectFromMapviewer(localItem, requestedItem, projections),
+            getCartObjectFromMapviewer(
+              localItem,
+              requestedItem,
+              projections,
+              nutsnames,
+            ),
           );
           setCartItems(cleanDuplicatesEntries(cartItems));
         }
@@ -129,19 +142,26 @@ const CLMSCartContent = (props) => {
 
   function startDownloading() {
     setLoadingTable(true);
+    window.scrollTo(0, 0);
+
     let selectedItems = getSelectedCartItems();
     const body = getDownloadToolPostBody(selectedItems);
     const unique_ids = selectedItems.map((item) => item.unique_id);
-    dispatch(postDownloadtool(body, unique_ids)).then(() => {
-      setLoadingTable(false);
-      toast.success(
-        <Toast
-          success
-          autoClose={5000}
-          title={'Selected file(s) added to the downloading process.'}
-        />,
-      );
-    });
+    dispatch(postDownloadtool(body, unique_ids))
+      .then((response) => {
+        setLoadingTable(false);
+        toast.success(
+          <Toast
+            success
+            autoClose={5000}
+            title={'Selected file(s) added to the downloading process.'}
+          />,
+        );
+      })
+      .catch(function (error) {
+        setLoadingTable(false);
+        toast.error(<Toast autoClose={5000} title={'Something went wrong.'} />);
+      });
   }
   const setProjectionValue = (unique_id, value) => {
     const objIndex = cartItems.findIndex((obj) => obj.unique_id === unique_id);
@@ -233,7 +253,8 @@ const CLMSCartContent = (props) => {
                         {item.area?.type === 'polygon'
                           ? 'Bounding Box'
                           : item.area?.type === 'nuts'
-                          ? 'NUTS ID: ' + item.area.value
+                          ? 'NUTS ID: ' +
+                            (item.area.valueName || item.area.value)
                           : '-'}
                       </td>
                       <td>

package/src/components/CLMSDownloadCartView/CLMSDownloadCartView.jsx

@@ -6,9 +6,12 @@
 import { Forbidden, Unauthorized } from '@plone/volto/components';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { getDatasetsByUid, getExtraBreadcrumbItems } from '../../actions';
+import {
+  getDatasetsByUid,
+  getExtraBreadcrumbItems,
+  getNutsNames,
+} from '../../actions';
 import { useDispatch, useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
 
 import { CART_SESSION_KEY } from '@eeacms/volto-clms-utils/cart/useCartState';
 import CLMSCartContent from './CLMSCartContent';
@@ -16,6 +19,7 @@ import CLMSCartContent from './CLMSCartContent';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FormattedMessage } from 'react-intl';
 import { Helmet } from '@plone/volto/helpers';
+import { Link } from 'react-router-dom';
 import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
 
 const CLMSDownloadCartView = (props) => {
@@ -67,6 +71,8 @@ const CLMSDownloadCartView = (props) => {
         ...new Set(localSessionCart.map((item) => item.UID || item.id)),
       ];
     }
+    let localsessionNutsIDList = [...new Set(getNutsIDList(localSessionCart))];
+
     // let progress_keys = Object.keys(download_in_progress);
     // if (progress_keys?.length !== 0) {
     //   downloadInProgressUidsList = [
@@ -88,10 +94,22 @@ const CLMSDownloadCartView = (props) => {
     if (uidsList.length > 0) {
       dispatch(getDatasetsByUid(uidsList));
     }
+    if (localsessionNutsIDList.length > 0) {
+      dispatch(getNutsNames(localsessionNutsIDList));
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [localSessionCart, dispatch]);
   // }, [download_in_progress, localSessionCart, dispatch]);
 
+  function getNutsIDList(cart_data) {
+    const nuts_ids = [];
+    cart_data?.length > 0 &&
+      cart_data.forEach((cart_item) => {
+        cart_item.area?.type === 'nuts' && nuts_ids.push(cart_item.area.value);
+      });
+    return nuts_ids;
+  }
+
   return (
     <>
       <Helmet title={formatMessage(messages.Cart)} />
@@ -116,38 +134,26 @@ const CLMSDownloadCartView = (props) => {
             <h1 className="page-title">
               <FormattedMessage id="Cart" defaultMessage="Cart" />
             </h1>
-            <div className="page-description">
-              <FormattedMessage
-                id="Lorem"
-                defaultMessage="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus
-        mauris ante, a iaculis leo placerat quis."
-              />
-            </div>
-            <hr />
             <div className="ccl-container">
               <div className="message-block">
                 <div className="message-icon">
-                  <FontAwesomeIcon
-                    icon={['far', 'comment-alt']}
-                    style={{ maxWidth: '1.5rem' }}
-                  />
+                  <FontAwesomeIcon icon={['far', 'comment-alt']} fixedWidth />
                 </div>
                 <div className="message-text">
                   <p>
-                    This is a warning related to the funcionality of start
-                    downloading the datasets
+                    <FormattedMessage id="Note:" defaultMessage="Note:" />
                   </p>
                   <ul>
                     <li>
                       Select the files you want to download and click the button
-                      'Start downloading' to start with the download process.
+                      'Start downloading' to start the download process.
                     </li>
                     <li>
                       You can visit the{' '}
                       <Link to={`/${locale}/cart-downloads`}>
                         downloading process page
-                      </Link>
-                      .{' '}
+                      </Link>{' '}
+                      to check the status of your downloads.
                     </li>
                   </ul>
                 </div>

package/src/components/CLMSDownloadCartView/cartUtils.js

@@ -55,10 +55,15 @@ export const getCartObjectFromMapviewer = (
   local_cart_data,
   dataset_data,
   projections,
+  nutsnames,
 ) => {
+  const area = local_cart_data.area;
+  if (area.type === 'nuts' && Object.keys(nutsnames).includes(area.value)) {
+    area.valueName = nutsnames[area.value];
+  }
   const mapViewer = {
     name: dataset_data.dataResourceTitle || '-',
-    area: local_cart_data.area || '-',
+    area: area || '-',
     format:
       dataset_data.dataset_full_format?.token ||
       dataset_data.dataset_full_format ||

package/src/components/CLMSDownloadableFileView/CLMSDownloadableFileView.jsx

@@ -1,8 +1,15 @@
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
-import React from 'react';
+import React, { useEffect } from 'react';
+import { Label } from 'semantic-ui-react';
+import { useDispatch } from 'react-redux';
+import { getBreadcrumbs } from '@plone/volto/actions';
 
 export const CLMSDownloadableFileView = (props) => {
+  const dispatch = useDispatch();
   const { content } = props;
+  useEffect(() => {
+    dispatch(getBreadcrumbs('/'));
+  }, [dispatch]);
   return (
     <>
       <div id="page-document" className="ui container">
@@ -12,6 +19,20 @@ export const CLMSDownloadableFileView = (props) => {
             <p>{content.description}</p>
           </div>
         </div>
+        {content?.taxonomy_technical_library_categorization &&
+          content?.taxonomy_technical_library_categorization?.length > 0 && (
+            <Label.Group>
+              {content?.taxonomy_technical_library_categorization?.map(
+                (keyword, key) => {
+                  return (
+                    <Label key={key} color="olive">
+                      {keyword.title}
+                    </Label>
+                  );
+                },
+              )}
+            </Label.Group>
+          )}
         <CclButton download={true} url={content?.file?.download}>
           Download file
         </CclButton>

package/src/components/CLMSDownloadsView/{CLMSTasksInProgress.jsx → CLMSDownloadTasks.jsx}

@@ -1,17 +1,18 @@
 /**
- * CLMSInProgressTask container.
- * @module components/CLMSInProgressTask/CLMSInProgressTask
+ * CLMSDownloadTask container.
+ * @module components/CLMSDownloadTask/CLMSDownloadTask
  */
 
-// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Grid } from 'semantic-ui-react';
 import React, { useEffect, useState } from 'react';
 import { deleteDownloadtool, getDownloadtool } from '../../actions';
 import { useDispatch, useSelector } from 'react-redux';
+
 import FileCard from './FileCard';
 import { FormattedMessage } from 'react-intl';
+// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Grid } from 'semantic-ui-react';
 
-const CLMSTasksInProgress = (props) => {
+const CLMSDownloadTask = (props) => {
   const dispatch = useDispatch();
   const [taskInProgress, setTaskInProgress] = useState([]);
   // const [cancelledTasks, setCancelledTasks] = useState([]);
@@ -23,6 +24,7 @@ const CLMSTasksInProgress = (props) => {
 
   const user_id = useSelector((state) => state.users.user.id);
   const datasets = useSelector((state) => state.datasetsByUid.datasets.items);
+  const nutsnames = useSelector((state) => state.nutsnames.nutsnames);
 
   useEffect(() => {
     dispatch(getDownloadtool());
@@ -46,6 +48,16 @@ const CLMSTasksInProgress = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [datasets]);
 
+  useEffect(() => {
+    if (Object.keys(nutsnames).length > 0) {
+      addNutsName(taskInProgress, setTaskInProgress);
+      addNutsName(finishedOKTasks, setFinishedOKTasks);
+      addNutsName(finishedNOKTasks, setFinishedNOKTasks);
+      addNutsName(rejectedTasks, setRejectedTasks);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nutsnames]);
+
   function addDatasetName(data, setter) {
     let intermediate = [...data];
     intermediate.forEach((task) => {
@@ -60,6 +72,20 @@ const CLMSTasksInProgress = (props) => {
     });
     setter(intermediate);
   }
+
+  function addNutsName(data, setter) {
+    let intermediate = [...data];
+    intermediate.forEach((task) => {
+      task.Datasets.forEach((dataset) => {
+        const requestedItem = Object.keys(nutsnames).includes(dataset.NUTSID);
+        if (requestedItem) {
+          dataset.NUTSName = nutsnames[dataset.NUTSID];
+        }
+      });
+    });
+    setter(intermediate);
+  }
+
   const deleteTaskInProgress = (task_id) => {
     setShowDeleteTaskLoading(task_id);
     dispatch(deleteDownloadtool(task_id));
@@ -72,10 +98,7 @@ const CLMSTasksInProgress = (props) => {
     <Grid columns={1} stackable padded="vertically">
       <Grid.Column>
         <h2>
-          <FormattedMessage
-            id="Task In Progress"
-            defaultMessage="Task In Progress"
-          />
+          <FormattedMessage id="In progress" defaultMessage="In progress" />
         </h2>
         {taskInProgress?.length !== 0 ? (
           <Grid columns={2}>
@@ -93,8 +116,8 @@ const CLMSTasksInProgress = (props) => {
         ) : (
           <p>
             <FormattedMessage
-              id="There is no task in progress"
-              defaultMessage="There is no task in progress"
+              id="There are no tasks in progress"
+              defaultMessage="There are no tasks in progress"
             />
           </p>
         )}
@@ -111,10 +134,7 @@ const CLMSTasksInProgress = (props) => {
       </Grid.Column>
       <Grid.Column>
         <h2>
-          <FormattedMessage
-            id="Finished Correctly"
-            defaultMessage="Finished Correctly"
-          />
+          <FormattedMessage id="Completed" defaultMessage="Completed" />
         </h2>
         {finishedOKTasks?.length !== 0 ? (
           <Grid columns={2}>
@@ -133,8 +153,8 @@ const CLMSTasksInProgress = (props) => {
         ) : (
           <p>
             <FormattedMessage
-              id="There is no correctly finished task"
-              defaultMessage="There is no correctly finished task"
+              id="There are no completed tasks"
+              defaultMessage="There are no completed tasks"
             />
           </p>
         )}
@@ -142,12 +162,12 @@ const CLMSTasksInProgress = (props) => {
       <Grid.Column>
         <h2>
           <FormattedMessage
-            id="Finished Not Correctly"
-            defaultMessage="Finished Not Correctly"
+            id="Finished with errors"
+            defaultMessage="Finished with errors"
           />
         </h2>
         {finishedNOKTasks?.length !== 0 ? (
-          <Grid columns={2}>
+          <Grid columns={1}>
             {finishedNOKTasks?.length > 0 &&
               finishedNOKTasks.map((item, key) => (
                 <Grid.Column key={key}>
@@ -163,8 +183,8 @@ const CLMSTasksInProgress = (props) => {
         ) : (
           <p>
             <FormattedMessage
-              id="There is no incorrectly finished task"
-              defaultMessage="There is no incorrectly finished task"
+              id="There are no tasks finished with errors"
+              defaultMessage="There are no tasks finished with errors"
             />
           </p>
         )}
@@ -174,7 +194,7 @@ const CLMSTasksInProgress = (props) => {
           <FormattedMessage id="Rejected" defaultMessage="Rejected" />
         </h2>
         {rejectedTasks?.length !== 0 ? (
-          <Grid columns={2}>
+          <Grid columns={1}>
             {rejectedTasks?.length > 0 &&
               rejectedTasks.map((item, key) => (
                 <Grid.Column key={key}>
@@ -190,8 +210,8 @@ const CLMSTasksInProgress = (props) => {
         ) : (
           <p>
             <FormattedMessage
-              id="There is no rejected task"
-              defaultMessage="There is no rejected task"
+              id="There are no rejected tasks"
+              defaultMessage="There are no rejected tasks"
             />
           </p>
         )}
@@ -199,4 +219,4 @@ const CLMSTasksInProgress = (props) => {
     </Grid>
   );
 };
-export default CLMSTasksInProgress;
+export default CLMSDownloadTask;

package/src/components/CLMSDownloadsView/CLMSDownloadsView.jsx

@@ -6,11 +6,14 @@
 import { Forbidden, Unauthorized } from '@plone/volto/components';
 import React, { useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { getDatasetsByUid, getExtraBreadcrumbItems } from '../../actions';
+import {
+  getDatasetsByUid,
+  getExtraBreadcrumbItems,
+  getDownloadtool,
+} from '../../actions';
 import { useDispatch, useSelector } from 'react-redux';
 
-import CLMSTasksInProgress from './CLMSTasksInProgress';
-import { FormattedMessage } from 'react-intl';
+import CLMSDownloadTask from './CLMSDownloadTasks';
 import { Helmet } from '@plone/volto/helpers';
 import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
 
@@ -22,8 +25,8 @@ const CLMSDownloadsView = (props) => {
   const { formatMessage } = useIntl();
   const messages = defineMessages({
     CartDownloads: {
-      id: 'Cart Downloads',
-      defaultMessage: 'Cart Downloads',
+      id: 'Downloads',
+      defaultMessage: 'Downloads',
     },
   });
 
@@ -98,6 +101,12 @@ const CLMSDownloadsView = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [downloadtool, dispatch]);
 
+  useEffect(() => {
+    if (downloadtool.delete_download_in_progress) {
+      dispatch(getDownloadtool());
+    }
+  }, [dispatch, downloadtool.delete_download_in_progress]);
+
   return (
     <>
       <Helmet title={formatMessage(messages.CartDownloads)} />
@@ -120,15 +129,11 @@ const CLMSDownloadsView = (props) => {
         {isLoggedIn && (
           <>
             <h1 className="page-title">
-              <FormattedMessage
-                id="Cart Downloads"
-                defaultMessage="Cart Downloads"
-              />
+              {formatMessage(messages.CartDownloads)}
             </h1>
             <div className="ccl-container">
-              <CLMSTasksInProgress />
+              <CLMSDownloadTask />
             </div>
-            <hr />
           </>
         )}
       </div>

package/src/components/CLMSDownloadsView/FileCard.jsx

@@ -3,16 +3,51 @@
  * @module components/CLMSDownloadsView/FileCard
  */
 
-import { Loader, Popup, Segment, Grid, Header } from 'semantic-ui-react';
-import React from 'react';
+import './filecard.less';
+
+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 alertSVG from '@plone/volto/icons/alert.svg';
+import errorSVG from '@plone/volto/icons/error.svg';
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import packSVG from '@plone/volto/icons/pack.svg';
 // import cancelledSVG from '@plone/volto/icons/spam.svg';
 import removeSVG from '@plone/volto/icons/delete.svg';
-import packSVG from '@plone/volto/icons/pack.svg';
-import errorSVG from '@plone/volto/icons/error.svg';
-import alertSVG from '@plone/volto/icons/alert.svg';
-import { defineMessages, useIntl } from 'react-intl';
+
+const prettyBytes = require('pretty-bytes');
+
+const messages = defineMessages({
+  PrePackaged: {
+    id: 'Pre-packaged',
+    defaultMessage: 'Pre-packaged',
+  },
+  Download: {
+    id: 'Download file',
+    defaultMessage: 'Download file',
+  },
+});
+
+const DatasetNaming = (props) => {
+  const { formatMessage } = useIntl();
+  const { dataset } = props;
+  return (
+    <>
+      {`${dataset['name']} -
+    ${
+      dataset?.OutputFormat
+        ? dataset?.OutputFormat
+        : formatMessage(messages.PrePackaged)
+    }`}
+      {((dataset?.NUTSName || dataset?.NUTSID) &&
+        ` (NUTS: ${dataset?.NUTSName || dataset?.NUTSID})`) ||
+        (dataset?.BoundingBox && ' (Bounding Box)')}{' '}
+    </>
+  );
+};
 
 const FileCard = (props) => {
   const { item, showDeleteTaskLoading, deleteTaskInProgress } = props;
@@ -24,16 +59,7 @@ const FileCard = (props) => {
       (today.getTime() - FinalizationDate.getTime()) / (1000 * 3600 * 24),
     );
   }
-  const messages = defineMessages({
-    PrePackaged: {
-      id: 'Pre-packaged',
-      defaultMessage: 'Pre-packaged',
-    },
-    Download: {
-      id: 'Download file',
-      defaultMessage: 'Download file',
-    },
-  });
+
   return (
     <Segment color="olive">
       <Grid
@@ -41,14 +67,15 @@ const FileCard = (props) => {
         centered
         columns={item?.Status !== 'In_progress' ? 2 : 3}
         padded
+        className="filecard"
       >
         <Grid.Row>
-          <Grid.Column verticalAlign="middle" textAlign="center" width={3}>
+          <Grid.Column verticalAlign="middle" textAlign="center" width={2}>
             {item?.Status === 'In_progress' && (
               <Popup
                 content="In progress"
                 size="small"
-                trigger={<Loader active inline indeterminate size="big" />}
+                trigger={<Loader active inline indeterminate size="medium" />}
               />
             )}
             {/* {item?.Status === 'Cancelled' && (
@@ -72,7 +99,7 @@ const FileCard = (props) => {
                 trigger={
                   <Icon
                     name={packSVG}
-                    size={75}
+                    size={50}
                     color="#a0b128"
                     title={'Finished correctly'}
                   />
@@ -86,7 +113,7 @@ const FileCard = (props) => {
                 trigger={
                   <Icon
                     name={errorSVG}
-                    size={75}
+                    size={50}
                     color="#e40166"
                     title={'Finished with errors'}
                   />
@@ -100,7 +127,7 @@ const FileCard = (props) => {
                 trigger={
                   <Icon
                     name={alertSVG}
-                    size={75}
+                    size={50}
                     color="#e40166"
                     title={'Rejected download'}
                   />
@@ -108,44 +135,69 @@ const FileCard = (props) => {
               />
             )}
           </Grid.Column>
-          <Grid.Column width={item?.Status === 'In_progress' ? 7 : 9}>
-            <Header>{`Task ID: ${item?.TaskID}`}</Header>
-            {item?.Datasets.length === 1 && (
-              <p>{`${item?.Datasets[0].name} - ${
-                item.Datasets[0]['OutputFormat']
-                  ? item.Datasets[0]['OutputFormat']
-                  : formatMessage(messages.PrePackaged)
-              }`}</p>
-            )}
-            {item?.Datasets.length > 1 && (
+          <Grid.Column width={item?.Status === 'In_progress' ? 8 : 10}>
+            <Header as="h3">{`Task ID: ${item?.TaskID}`}</Header>
+            <Segment basic className="file-datetimes">
+              Start date:{' '}
+              {new Date(item?.RegistrationDateTime).toLocaleString('en-GB', {
+                timeZone: 'UTC',
+              })}{' '}
+              <span
+                className="info-icon"
+                tooltip="Dates and times are in UTC"
+                direction="up"
+              >
+                <FontAwesomeIcon icon={faInfoCircle} />
+              </span>
+              <br />
+              {item?.FinalizationDateTime && (
+                <>
+                  End date:{' '}
+                  {new Date(item?.FinalizationDateTime).toLocaleString(
+                    'en-GB',
+                    {
+                      timeZone: 'UTC',
+                    },
+                  )}
+                  <span
+                    className="info-icon"
+                    tooltip="Dates and times are in UTC"
+                    direction="up"
+                  >
+                    <FontAwesomeIcon icon={faInfoCircle} />
+                  </span>
+                </>
+              )}
+            </Segment>
+            {item?.Datasets.length > 0 && (
               <ul>
                 {item?.Datasets.map((dataset) => (
                   <li>
-                    {`${dataset['name']} - 
-                      ${
-                        dataset['OutputFormat']
-                          ? dataset['OutputFormat']
-                          : formatMessage(messages.PrePackaged)
-                      }`}
+                    <DatasetNaming dataset={dataset} />
                   </li>
                 ))}
               </ul>
             )}
-            {item?.Status === 'Finished_ok' && (
-              <>
-                {item?.FileSize && <p>{`${item.FileSize} MB`}</p>}
+            {item?.Status === 'Finished_ok' && 10 - daysDiff > -1 && (
+              <Segment basic>
                 {item?.DownloadURL && (
                   <a href={item.DownloadURL} target="_blank" rel="noreferrer">
                     {formatMessage(messages.Download)}
                   </a>
                 )}
+                {item?.FileSize && ` (${prettyBytes(item.FileSize)})`}
                 {item?.FinalizationDateTime &&
                   ` | Expires in ${10 - daysDiff} days`}
-              </>
+              </Segment>
             )}
           </Grid.Column>
           {item?.Status === 'In_progress' && (
-            <Grid.Column width={2} verticalAlign="middle" textAlign="center">
+            <Grid.Column
+              width={2}
+              verticalAlign="middle"
+              textAlign="center"
+              className="trashcontainer"
+            >
               {showDeleteTaskLoading === item?.TaskID ? (
                 <Loader
                   active
@@ -175,7 +227,7 @@ const FileCard = (props) => {
                     >
                       <Icon
                         name={removeSVG}
-                        size={40}
+                        size={30}
                         color="#e40166"
                         title={'Remove in progress task'}
                       />

package/src/components/CLMSDownloadsView/filecard.less

@@ -0,0 +1,12 @@
+.ui.column.grid.filecard li,
+.ui.column.grid.filecard div {
+  font-size: 16px;
+}
+
+.ui.column.grid.filecard h3 {
+  font-size: 18px;
+}
+
+.ui.column.grid.filecard div.trashcontainer {
+  box-shadow: none !important;
+}

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

@@ -162,7 +162,7 @@ class Header extends Component {
                   <li className="header-vertical-line">
                     <div>|</div>
                   </li>
-                  {(this.props.user.id && (
+                  {(this.props.user?.id && (
                     <>
                       <li className="header-dropdown">
                         <>
@@ -171,8 +171,8 @@ class Header extends Component {
                               icon={['fas', 'user']}
                               style={{ marginRight: '0.5rem' }}
                             />
-                            {this.props.user.fullname ||
-                              this.props.user.id ||
+                            {this.props.user?.fullname ||
+                              this.props.user?.id ||
                               ''}
                             <span className="ccl-icon-chevron-thin-down"></span>
                           </span>
@@ -182,7 +182,15 @@ class Header extends Component {
                                 to={`/${this.props.locale}/profile`}
                                 className="header-login-link"
                               >
-                                {this.props.user.id && <>{'My settings'}</>}
+                                My settings
+                              </Link>
+                            </li>
+                            <li>
+                              <Link
+                                to={`/${this.props.locale}/cart-downloads`}
+                                className="header-login-link"
+                              >
+                                Downloads
                               </Link>
                             </li>
                             <li>

package/src/index.js

@@ -78,6 +78,7 @@ const applyConfig = (config) => {
       '/profile',
       '/download-by-area',
       '/cart',
+      '/cart-downloads',
       '/newsletter-notification-subscription',
       '/newsletter-notification-unsubscription',
     ],
@@ -112,6 +113,7 @@ const applyConfig = (config) => {
       ...config.settings.registry,
       login_url: 'clms.addon.login_url_controlpanel.login_url',
     },
+    showTags: false,
   };
 
   config.addonRoutes = [

package/src/reducers/downloadtool/downloadtool_reducer.js

@@ -16,6 +16,9 @@ const getInitialState = {
   loaded: false,
   loading: false,
   download_in_progress: {},
+  download_finished_ok: {},
+  download_finished_nok: {},
+  download_rejected: {},
   delete_download_in_progress: {},
   post_download_in_progress: {},
   format_conversion_table_in_progress: {},
@@ -118,7 +121,7 @@ export const downloadtoolReducer = (state = getInitialState, action = {}) => {
         error: null,
         loaded: true,
         loading: false,
-        delete_download_in_progress: action.result,
+        delete_download_in_progress: true,
       };
 
     case `${GET_FORMATCONVERSIONTABLE}_PENDING`:

package/src/reducers/downloadtool/nutsnames_reducer.js

@@ -0,0 +1,45 @@
+/**
+ * Downloadtool/nutsnames reducer.
+ * @module reducers/downloadtool/nutsnames
+ */
+
+import { GET_NUTSNAME } from '../../actions';
+
+const getInitialState = {
+  error: null,
+  loaded: false,
+  loading: false,
+  nutsnames: {},
+};
+
+export const nutsnamesReducer = (state = getInitialState, action = {}) => {
+  switch (action?.type) {
+    case `${GET_NUTSNAME}_PENDING`:
+      return {
+        ...state,
+        error: null,
+        loaded: false,
+        loading: true,
+      };
+
+    case `${GET_NUTSNAME}_FAIL`:
+      return {
+        ...state,
+        error: action.error,
+        loaded: false,
+        loading: false,
+      };
+
+    case `${GET_NUTSNAME}_SUCCESS`:
+      return {
+        ...state,
+        error: null,
+        loaded: true,
+        loading: false,
+        nutsnames: action.result,
+      };
+
+    default:
+      return state;
+  }
+};

package/src/reducers/index.js

@@ -9,13 +9,14 @@ import { extraBreadcrumbItemsReducer } from './extra_breadcrumbs/extra_breadcrum
 import { importGeonetworkReducer } from './geonetwork/import_geonetwork_reducer';
 import { meetingRegisterReducer } from './meeting/meeting_register_reducer';
 import { meetingSubscribersReducer } from './meeting/meeting_subscribers_reducer';
+// import { newsletterReducer } from './newsletter/newsletter_reducer';
+import { newsletterSubscribersReducer } from './newsletter/get_newsletter_reducer';
+import { nutsnamesReducer } from './downloadtool/nutsnames_reducer';
 import { registryReducer } from './registry/registry';
+import { subscribeToReducer } from './subscription/subscription_reducer';
 // import defaultReducers from '@plone/volto/reducers';
 import tokens from './tokens/tokens';
 import { userschemaReducer } from './userschema/userschema';
-// import { newsletterReducer } from './newsletter/newsletter_reducer';
-import { newsletterSubscribersReducer } from './newsletter/get_newsletter_reducer';
-import { subscribeToReducer } from './subscription/subscription_reducer';
 
 /**
  * Root reducer.
@@ -32,6 +33,7 @@ const reducers = {
   meeting_register: meetingRegisterReducer,
   subscribers: meetingSubscribersReducer,
   downloadtool: downloadtoolReducer,
+  nutsnames: nutsnamesReducer,
   registry: registryReducer,
   geonetwork_importation: importGeonetworkReducer,
   userschema: userschemaReducer,