@eeacms/volto-clms-theme 1.0.63 → 1.0.64

package/CHANGELOG.md

@@ -4,9 +4,22 @@ 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.64](https://github.com/eea/volto-clms-theme/compare/1.0.63...1.0.64)
+
+- 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)
 
-- expose timeExtent info in cart data [`fee869f`](https://github.com/eea/volto-clms-theme/commit/fee869fadeda31c227ebcbbcab294a47190b76b1)
+> 28 January 2022
+
+- expose timeExtent info in cart data [`#190`](https://github.com/eea/volto-clms-theme/pull/190)
 
 #### [1.0.62](https://github.com/eea/volto-clms-theme/compare/1.0.61...1.0.62)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.63",
+  "version": "1.0.64",
   "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

@@ -14,7 +14,7 @@ export function getDownloadtool() {
     type: GET_DOWNLOADTOOL,
     request: {
       op: 'get',
-      path: `/@datarequest_search?status=In_progress`,
+      path: `/@datarequest_search`,
     },
   };
 }

package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx

@@ -17,11 +17,12 @@ 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 } from 'semantic-ui-react';
+import { Select, Segment } from 'semantic-ui-react';
 import { cleanDuplicatesEntries } from '@eeacms/volto-clms-utils/utils';
 import { getAvailableConversion } from './conversion';
 import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
@@ -32,6 +33,7 @@ const CLMSCartContent = (props) => {
   const cart = useSelector((state) => state.cart_items.items);
   const { removeCartItem, removeCartItems } = useCartState();
   const [cartSelection, setCartSelection] = useState([]);
+  const [loadingTable, setLoadingTable] = useState(false);
   const post_download_in_progress = useSelector(
     (state) => state.downloadtool.post_download_in_progress,
   );
@@ -126,10 +128,20 @@ const CLMSCartContent = (props) => {
   };
 
   function startDownloading() {
+    setLoadingTable(true);
     let selectedItems = getSelectedCartItems();
     const body = getDownloadToolPostBody(selectedItems);
     const unique_ids = selectedItems.map((item) => item.unique_id);
-    dispatch(postDownloadtool(body, unique_ids));
+    dispatch(postDownloadtool(body, unique_ids)).then(() => {
+      setLoadingTable(false);
+      toast.success(
+        <Toast
+          success
+          autoClose={5000}
+          title={'Selected file(s) added to the downloading process.'}
+        />,
+      );
+    });
   }
   const setProjectionValue = (unique_id, value) => {
     const objIndex = cartItems.findIndex((obj) => obj.unique_id === unique_id);
@@ -140,148 +152,158 @@ const CLMSCartContent = (props) => {
     <>
       {cartItems?.length !== 0 ? (
         <div className="custom-table cart-table">
-          <h2>My cart</h2>
-          <table>
-            <thead>
-              <tr>
-                <th className="table-th-warning"></th>
-                <th className="table-th-checkbox">
-                  <div className="ccl-form">
-                    <div className="ccl-form-group">
-                      <Checkbox
-                        onChange={(e, data) => selectAllCart(data.checked)}
-                        checked={
-                          cartItems
-                            ? cartItems
-                                .filter(
-                                  (item) => item.task_in_progress === false,
-                                )
-                                .map((item, key) => item.unique_id)
-                                .every(function (val) {
-                                  return cartSelection.indexOf(val) !== -1;
-                                })
-                            : false
-                        }
-                      />
+          <Segment basic loading={loadingTable}>
+            <h2>My cart</h2>
+            <table>
+              <thead>
+                <tr>
+                  <th className="table-th-warning"></th>
+                  <th className="table-th-checkbox">
+                    <div className="ccl-form">
+                      <div className="ccl-form-group">
+                        <Checkbox
+                          onChange={(e, data) => selectAllCart(data.checked)}
+                          checked={
+                            cartItems
+                              ? cartItems
+                                  .filter(
+                                    (item) => item.task_in_progress === false,
+                                  )
+                                  .map((item, key) => item.unique_id)
+                                  .every(function (val) {
+                                    return cartSelection.indexOf(val) !== -1;
+                                  })
+                              : false
+                          }
+                        />
+                      </div>
                     </div>
-                  </div>
-                </th>
-                <th>Name</th>
-                <th>Source</th>
-                <th>Area</th>
-                <th>Type</th>
-                <th>Format</th>
-                <th>Projection</th>
-                <th>Version</th>
-                <th>Size</th>
-                <th></th>
-              </tr>
-            </thead>
-            <tbody>
-              {cartItems &&
-                cartItems.map((item, key) => (
-                  <tr
-                    key={key}
-                    style={
-                      item.task_in_progress
-                        ? { opacity: 0.5, backgroundColor: '#f5f5f5' }
-                        : {}
-                    }
-                  >
-                    <td className="table-td-warning hidden-warning">
-                      {!!item.warning && (
+                  </th>
+                  <th>Name</th>
+                  <th>Source</th>
+                  <th>Area</th>
+                  <th>Type</th>
+                  <th>Format</th>
+                  <th>Projection</th>
+                  <th>Version</th>
+                  <th>Size</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {cartItems &&
+                  cartItems.map((item, key) => (
+                    <tr
+                      key={key}
+                      style={
+                        item.task_in_progress
+                          ? { opacity: 0.5, backgroundColor: '#f5f5f5' }
+                          : {}
+                      }
+                    >
+                      <td className="table-td-warning hidden-warning">
+                        {!!item.warning && (
+                          <span
+                            className="info-icon"
+                            tooltip={item.warning}
+                            direction="up"
+                          >
+                            <FontAwesomeIcon
+                              icon={['fas', 'exclamation-triangle']}
+                            />
+                          </span>
+                        )}
+                      </td>
+                      <td className="table-td-checkbox">
+                        <div className="ccl-form">
+                          <div className="ccl-form-group">
+                            <Checkbox
+                              onChange={(e, data) =>
+                                selectCart(item.unique_id, data.checked)
+                              }
+                              checked={cartSelection.includes(item.unique_id)}
+                              disabled={item.task_in_progress}
+                            />
+                          </div>
+                        </div>
+                      </td>
+                      <td>{item.name || '-'}</td>
+                      <td>{item.source || '-'}</td>
+                      <td>
+                        {item.area?.type === 'polygon'
+                          ? 'Bounding Box'
+                          : item.area?.type === 'nuts'
+                          ? 'NUTS ID: ' + item.area.value
+                          : '-'}
+                      </td>
+                      <td>
                         <span
-                          className="info-icon"
-                          tooltip={item.warning}
-                          direction="up"
+                          className={'tag tag-' + item?.type?.toLowerCase()}
                         >
-                          <FontAwesomeIcon
-                            icon={['fas', 'exclamation-triangle']}
-                          />
+                          {item.type || '-'}
                         </span>
-                      )}
-                    </td>
-                    <td className="table-td-checkbox">
-                      <div className="ccl-form">
-                        <div className="ccl-form-group">
-                          <Checkbox
-                            onChange={(e, data) =>
-                              selectCart(item.unique_id, data.checked)
-                            }
-                            checked={cartSelection.includes(item.unique_id)}
-                            disabled={item.task_in_progress}
+                      </td>
+                      <td className="table-td-format">
+                        {!item.file_id ? (
+                          <Select
+                            placeholder="Select format"
+                            value={item.format?.token || item.format}
+                            options={getAvailableConversion(
+                              formatConversionTable,
+                              item.format?.token || item.format,
+                            )}
+                            onChange={(e, data) => {
+                              const objIndex = cartItems.findIndex(
+                                (obj) => obj.unique_id === item.unique_id,
+                              );
+                              cartItems[objIndex].format = data.value;
+                              setCartItems([...cartItems]);
+                            }}
                           />
-                        </div>
-                      </div>
-                    </td>
-                    <td>{item.name || '-'}</td>
-                    <td>{item.source || '-'}</td>
-                    <td>{item.area?.type || '-'}</td>
-                    <td>
-                      <span className={'tag tag-' + item?.type?.toLowerCase()}>
-                        {item.type || '-'}
-                      </span>
-                    </td>
-                    <td className="table-td-format">
-                      {!item.file_id ? (
-                        <Select
-                          placeholder="Select format"
-                          value={item.format?.token || item.format}
-                          options={getAvailableConversion(
-                            formatConversionTable,
-                            item.format?.token || item.format,
-                          )}
-                          onChange={(e, data) => {
-                            const objIndex = cartItems.findIndex(
-                              (obj) => obj.unique_id === item.unique_id,
-                            );
-                            cartItems[objIndex].format = data.value;
-                            setCartItems([...cartItems]);
-                          }}
-                        />
-                      ) : (
-                        item.format?.token || item.format
-                      )}
-                    </td>
-                    <td className="table-td-projections">
-                      {!item.file_id ? (
-                        <Select
-                          placeholder="Select projection"
-                          value={item.projection}
-                          options={projections.map((item) => {
-                            return {
-                              key: item,
-                              value: item,
-                              text: item,
-                            };
-                          })}
-                          onChange={(e, data) => {
-                            setProjectionValue(item.unique_id, data.value);
-                          }}
-                        />
-                      ) : (
-                        item.projection
-                      )}
-                    </td>
-                    <td>{item.version}</td>
-                    <td>{item.size}</td>
-                    <td>
-                      {item.task_in_progress ? (
-                        <FontAwesomeIcon icon="spinner" spin />
-                      ) : (
-                        <FontAwesomeIcon
-                          icon={['fas', 'trash']}
-                          style={{ cursor: 'pointer' }}
-                          onClick={() => {
-                            removeCartItem(item.unique_id);
-                          }}
-                        />
-                      )}
-                    </td>
-                  </tr>
-                ))}
-            </tbody>
-          </table>
+                        ) : (
+                          item.format?.token || item.format
+                        )}
+                      </td>
+                      <td className="table-td-projections">
+                        {!item.file_id ? (
+                          <Select
+                            placeholder="Select projection"
+                            value={item.projection}
+                            options={projections.map((item) => {
+                              return {
+                                key: item,
+                                value: item,
+                                text: item,
+                              };
+                            })}
+                            onChange={(e, data) => {
+                              setProjectionValue(item.unique_id, data.value);
+                            }}
+                          />
+                        ) : (
+                          item.projection
+                        )}
+                      </td>
+                      <td>{item.version}</td>
+                      <td>{item.size}</td>
+                      <td>
+                        {item.task_in_progress ? (
+                          <FontAwesomeIcon icon="spinner" spin />
+                        ) : (
+                          <FontAwesomeIcon
+                            icon={['fas', 'trash']}
+                            style={{ cursor: 'pointer' }}
+                            onClick={() => {
+                              removeCartItem(item.unique_id);
+                            }}
+                          />
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+              </tbody>
+            </table>
+          </Segment>
         </div>
       ) : (
         <h2 style={{ textAlign: 'center' }}>Empty cart</h2>

package/src/components/CLMSDownloadCartView/CLMSDownloadCartView.jsx

@@ -8,10 +8,11 @@ import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { getDatasetsByUid, getExtraBreadcrumbItems } 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';
-import CLMSTasksInProgress from './CLMSTasksInProgress';
+// import CLMSTasksInProgress from './CLMSTasksInProgress';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FormattedMessage } from 'react-intl';
 import { Helmet } from '@plone/volto/helpers';
@@ -20,10 +21,11 @@ import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
 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 download_in_progress = useSelector(
-    (state) => state.downloadtool.download_in_progress,
-  );
+  // const download_in_progress = useSelector(
+  //   (state) => state.downloadtool.download_in_progress,
+  // );
   const { isLoggedIn } = useCartState();
 
   const { formatMessage } = useIntl();
@@ -59,34 +61,36 @@ const CLMSDownloadCartView = (props) => {
 
   useEffect(() => {
     let localsessionUidsList = [];
-    let downloadInProgressUidsList = [];
+    // let downloadInProgressUidsList = [];
     if (localSessionCart?.length !== 0) {
       localsessionUidsList = [
         ...new Set(localSessionCart.map((item) => item.UID || item.id)),
       ];
     }
-    let progress_keys = Object.keys(download_in_progress);
-    if (progress_keys?.length !== 0) {
-      downloadInProgressUidsList = [
-        ...new Set(
-          progress_keys
-            .map((taskID) =>
-              download_in_progress[taskID].Datasets.map(
-                (dataset) => dataset.DatasetID,
-              ),
-            )
-            .reduce((elem1, elem2) => elem1.concat(elem2)),
-        ),
-      ];
-    }
+    // let progress_keys = Object.keys(download_in_progress);
+    // if (progress_keys?.length !== 0) {
+    //   downloadInProgressUidsList = [
+    //     ...new Set(
+    //       progress_keys
+    //         .map((taskID) =>
+    //           download_in_progress[taskID].Datasets.map(
+    //             (dataset) => dataset.DatasetID,
+    //           ),
+    //         )
+    //         .reduce((elem1, elem2) => elem1.concat(elem2)),
+    //     ),
+    //   ];
+    // }
     let uidsList = [
-      ...new Set(localsessionUidsList.concat(downloadInProgressUidsList)),
+      ...new Set(localsessionUidsList),
+      // ...new Set(localsessionUidsList.concat(downloadInProgressUidsList)),
     ];
     if (uidsList.length > 0) {
       dispatch(getDatasetsByUid(uidsList));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [download_in_progress, localSessionCart, dispatch]);
+  }, [localSessionCart, dispatch]);
+  // }, [download_in_progress, localSessionCart, dispatch]);
 
   return (
     <>
@@ -134,12 +138,21 @@ const CLMSDownloadCartView = (props) => {
                     downloading the datasets
                   </p>
                   <ul>
-                    <li>May be can include a link to somewhere</li>
-                    <li>Or an informative text</li>
+                    <li>
+                      Select the files you want to download and click the button
+                      'Start downloading' to start with the download process.
+                    </li>
+                    <li>
+                      You can visit the{' '}
+                      <Link to={`/${locale}/cart-downloads`}>
+                        downloading process page
+                      </Link>
+                      .{' '}
+                    </li>
                   </ul>
                 </div>
               </div>
-              <CLMSTasksInProgress />
+              {/* <CLMSTasksInProgress /> */}
               <CLMSCartContent localSessionCart={localSessionCart} />
             </div>
           </>

package/src/components/CLMSDownloadsView/CLMSDownloadsView.jsx

@@ -0,0 +1,139 @@
+/**
+ * CLMSDownloadsView.
+ * @module components/CLMSDownloadsView/CLMSDownloadsView
+ */
+
+import { Forbidden, Unauthorized } from '@plone/volto/components';
+import React, { useEffect } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { getDatasetsByUid, getExtraBreadcrumbItems } from '../../actions';
+import { useDispatch, useSelector } from 'react-redux';
+
+import CLMSTasksInProgress from './CLMSTasksInProgress';
+import { FormattedMessage } from 'react-intl';
+import { Helmet } from '@plone/volto/helpers';
+import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
+
+const CLMSDownloadsView = (props) => {
+  const dispatch = useDispatch();
+  const downloadtool = useSelector((state) => state.downloadtool);
+  const { isLoggedIn } = useCartState();
+
+  const { formatMessage } = useIntl();
+  const messages = defineMessages({
+    CartDownloads: {
+      id: 'Cart Downloads',
+      defaultMessage: 'Cart Downloads',
+    },
+  });
+
+  useEffect(() => {
+    dispatch(
+      getExtraBreadcrumbItems([
+        {
+          title: formatMessage(messages.CartDownloads),
+          pathname: props.location.pathname,
+        },
+      ]),
+    );
+    // returned function will be called on component unmount
+    return () => {
+      dispatch(getExtraBreadcrumbItems([]));
+    };
+  }, [
+    dispatch,
+    formatMessage,
+    messages.CartDownloads,
+    props.location.pathname,
+  ]);
+
+  function getUIDList(download_data) {
+    let uidList = [];
+    let data_keys = Object.keys(download_data);
+    if (data_keys?.length !== 0) {
+      uidList = [
+        ...new Set(
+          data_keys
+            .map((taskID) =>
+              download_data[taskID].Datasets.map(
+                (dataset) => dataset.DatasetID,
+              ),
+            )
+            .reduce((elem1, elem2) => elem1.concat(elem2)),
+        ),
+      ];
+    }
+    return uidList;
+  }
+
+  useEffect(() => {
+    if (
+      downloadtool?.download_in_progress &&
+      downloadtool?.download_finished_ok &&
+      downloadtool?.download_finished_nok &&
+      downloadtool?.download_rejected
+    ) {
+      let downloadInProgressUidsList = getUIDList(
+        downloadtool?.download_in_progress,
+      );
+      // let downloadCancelledUidsList = getUIDList(
+      //   downloadtool?.download_cancelled,
+      // );
+      let finishedOKUidsList = getUIDList(downloadtool?.download_finished_ok);
+      let finishedNOKUidsList = getUIDList(downloadtool?.download_finished_nok);
+      let rejectedUidsList = getUIDList(downloadtool?.download_rejected);
+      let uidsList = [
+        ...new Set(
+          rejectedUidsList.concat(
+            finishedNOKUidsList.concat(
+              finishedOKUidsList.concat(downloadInProgressUidsList),
+            ),
+          ),
+        ),
+      ];
+      if (uidsList.length > 0) {
+        dispatch(getDatasetsByUid(uidsList));
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [downloadtool, dispatch]);
+
+  return (
+    <>
+      <Helmet title={formatMessage(messages.CartDownloads)} />
+      <div className="ui container">
+        {!isLoggedIn && (
+          <>
+            {props.token ? (
+              <Forbidden
+                pathname={props.pathname}
+                staticContext={props.staticContext}
+              />
+            ) : (
+              <Unauthorized
+                pathname={props.pathname}
+                staticContext={props.staticContext}
+              />
+            )}
+          </>
+        )}
+        {isLoggedIn && (
+          <>
+            <h1 className="page-title">
+              <FormattedMessage
+                id="Cart Downloads"
+                defaultMessage="Cart Downloads"
+              />
+            </h1>
+            <div className="ccl-container">
+              <CLMSTasksInProgress />
+            </div>
+            <hr />
+          </>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default CLMSDownloadsView;

package/src/components/CLMSDownloadsView/CLMSTasksInProgress.jsx

@@ -0,0 +1,202 @@
+/**
+ * CLMSInProgressTask container.
+ * @module components/CLMSInProgressTask/CLMSInProgressTask
+ */
+
+// 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';
+
+const CLMSTasksInProgress = (props) => {
+  const dispatch = useDispatch();
+  const [taskInProgress, setTaskInProgress] = useState([]);
+  // const [cancelledTasks, setCancelledTasks] = useState([]);
+  const [finishedOKTasks, setFinishedOKTasks] = useState([]);
+  const [finishedNOKTasks, setFinishedNOKTasks] = useState([]);
+  const [rejectedTasks, setRejectedTasks] = useState([]);
+  const [showDeleteTaskLoading, setShowDeleteTaskLoading] = useState(false);
+  const downloadtool = useSelector((state) => state.downloadtool);
+
+  const user_id = useSelector((state) => state.users.user.id);
+  const datasets = useSelector((state) => state.datasetsByUid.datasets.items);
+
+  useEffect(() => {
+    dispatch(getDownloadtool());
+  }, [dispatch]);
+
+  useEffect(() => {
+    setTaskInProgress(downloadtool.download_in_progress);
+    // setCancelledTasks(downloadtool.download_cancelled);
+    setFinishedOKTasks(downloadtool.download_finished_ok);
+    setFinishedNOKTasks(downloadtool.download_finished_nok);
+    setRejectedTasks(downloadtool.download_rejected);
+  }, [downloadtool]);
+
+  useEffect(() => {
+    if (datasets?.length > 0) {
+      addDatasetName(taskInProgress, setTaskInProgress);
+      addDatasetName(finishedOKTasks, setFinishedOKTasks);
+      addDatasetName(finishedNOKTasks, setFinishedNOKTasks);
+      addDatasetName(rejectedTasks, setRejectedTasks);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [datasets]);
+
+  function addDatasetName(data, setter) {
+    let intermediate = [...data];
+    intermediate.forEach((task) => {
+      task.Datasets.forEach((dataset) => {
+        const requestedItem = datasets.find(
+          (requestedItem) => requestedItem.UID === dataset.DatasetID,
+        );
+        if (requestedItem) {
+          dataset.name = requestedItem.title;
+        }
+      });
+    });
+    setter(intermediate);
+  }
+  const deleteTaskInProgress = (task_id) => {
+    setShowDeleteTaskLoading(task_id);
+    dispatch(deleteDownloadtool(task_id));
+    setTimeout(() => {
+      dispatch(getDownloadtool(user_id));
+      setShowDeleteTaskLoading(false);
+    }, 1000); // We need delete response to check if remove_task request is completed successfully
+  };
+  return (
+    <Grid columns={1} stackable padded="vertically">
+      <Grid.Column>
+        <h2>
+          <FormattedMessage
+            id="Task In Progress"
+            defaultMessage="Task In Progress"
+          />
+        </h2>
+        {taskInProgress?.length !== 0 ? (
+          <Grid columns={2}>
+            {taskInProgress?.length > 0 &&
+              taskInProgress.map((item, key) => (
+                <Grid.Column key={key}>
+                  <FileCard
+                    item={item}
+                    showDeleteTaskLoading={showDeleteTaskLoading}
+                    deleteTaskInProgress={deleteTaskInProgress}
+                  />
+                </Grid.Column>
+              ))}
+          </Grid>
+        ) : (
+          <p>
+            <FormattedMessage
+              id="There is no task in progress"
+              defaultMessage="There is no task in progress"
+            />
+          </p>
+        )}
+        {/* <h2>Cancelled Tasks</h2>
+        {cancelledTasks?.length > 0 &&
+          cancelledTasks.map((item, key) => (
+            <FileCard
+              item={item}
+              key={key}
+              showDeleteTaskLoading={showDeleteTaskLoading}
+              deleteTaskInProgress={deleteTaskInProgress}
+            />
+          ))} */}
+      </Grid.Column>
+      <Grid.Column>
+        <h2>
+          <FormattedMessage
+            id="Finished Correctly"
+            defaultMessage="Finished Correctly"
+          />
+        </h2>
+        {finishedOKTasks?.length !== 0 ? (
+          <Grid columns={2}>
+            {finishedOKTasks?.length > 0 &&
+              finishedOKTasks.map((item, key) => (
+                <Grid.Column key={key}>
+                  <FileCard
+                    item={item}
+                    key={key}
+                    showDeleteTaskLoading={showDeleteTaskLoading}
+                    deleteTaskInProgress={deleteTaskInProgress}
+                  />
+                </Grid.Column>
+              ))}
+          </Grid>
+        ) : (
+          <p>
+            <FormattedMessage
+              id="There is no correctly finished task"
+              defaultMessage="There is no correctly finished task"
+            />
+          </p>
+        )}
+      </Grid.Column>
+      <Grid.Column>
+        <h2>
+          <FormattedMessage
+            id="Finished Not Correctly"
+            defaultMessage="Finished Not Correctly"
+          />
+        </h2>
+        {finishedNOKTasks?.length !== 0 ? (
+          <Grid columns={2}>
+            {finishedNOKTasks?.length > 0 &&
+              finishedNOKTasks.map((item, key) => (
+                <Grid.Column key={key}>
+                  <FileCard
+                    item={item}
+                    key={key}
+                    showDeleteTaskLoading={showDeleteTaskLoading}
+                    deleteTaskInProgress={deleteTaskInProgress}
+                  />
+                </Grid.Column>
+              ))}
+          </Grid>
+        ) : (
+          <p>
+            <FormattedMessage
+              id="There is no incorrectly finished task"
+              defaultMessage="There is no incorrectly finished task"
+            />
+          </p>
+        )}
+      </Grid.Column>
+      <Grid.Column>
+        <h2>
+          <FormattedMessage id="Rejected" defaultMessage="Rejected" />
+        </h2>
+        {rejectedTasks?.length !== 0 ? (
+          <Grid columns={2}>
+            {rejectedTasks?.length > 0 &&
+              rejectedTasks.map((item, key) => (
+                <Grid.Column key={key}>
+                  <FileCard
+                    item={item}
+                    key={key}
+                    showDeleteTaskLoading={showDeleteTaskLoading}
+                    deleteTaskInProgress={deleteTaskInProgress}
+                  />
+                </Grid.Column>
+              ))}
+          </Grid>
+        ) : (
+          <p>
+            <FormattedMessage
+              id="There is no rejected task"
+              defaultMessage="There is no rejected task"
+            />
+          </p>
+        )}
+      </Grid.Column>
+    </Grid>
+  );
+};
+export default CLMSTasksInProgress;

package/src/components/CLMSDownloadsView/FileCard.jsx

@@ -0,0 +1,194 @@
+/**
+ * FileCard container.
+ * @module components/CLMSDownloadsView/FileCard
+ */
+
+import { Loader, Popup, Segment, Grid, Header } from 'semantic-ui-react';
+import React from 'react';
+
+import { Icon } from '@plone/volto/components';
+// 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 FileCard = (props) => {
+  const { item, showDeleteTaskLoading, deleteTaskInProgress } = props;
+  const { formatMessage } = useIntl();
+  if (item?.FinalizationDateTime) {
+    var FinalizationDate = new Date(Date.parse(item?.FinalizationDateTime));
+    var today = new Date();
+    var daysDiff = Math.floor(
+      (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
+        divided
+        centered
+        columns={item?.Status !== 'In_progress' ? 2 : 3}
+        padded
+      >
+        <Grid.Row>
+          <Grid.Column verticalAlign="middle" textAlign="center" width={3}>
+            {item?.Status === 'In_progress' && (
+              <Popup
+                content="In progress"
+                size="small"
+                trigger={<Loader active inline indeterminate size="big" />}
+              />
+            )}
+            {/* {item?.Status === 'Cancelled' && (
+              <Popup
+                content="Cancelled"
+                size="small"
+                trigger={
+                  <Icon
+                    name={cancelledSVG}
+                    size={45}
+                    color="#e40166"
+                    title={'Cancelled'}
+                  />
+                }
+              />
+            )} */}
+            {item?.Status === 'Finished_ok' && (
+              <Popup
+                content="Finished correctly"
+                size="small"
+                trigger={
+                  <Icon
+                    name={packSVG}
+                    size={75}
+                    color="#a0b128"
+                    title={'Finished correctly'}
+                  />
+                }
+              />
+            )}
+            {item?.Status === 'Finished_nok' && (
+              <Popup
+                content="Finished with errors"
+                size="small"
+                trigger={
+                  <Icon
+                    name={errorSVG}
+                    size={75}
+                    color="#e40166"
+                    title={'Finished with errors'}
+                  />
+                }
+              />
+            )}
+            {item?.Status === 'Rejected' && (
+              <Popup
+                content="Rejected download"
+                size="small"
+                trigger={
+                  <Icon
+                    name={alertSVG}
+                    size={75}
+                    color="#e40166"
+                    title={'Rejected download'}
+                  />
+                }
+              />
+            )}
+          </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 && (
+              <ul>
+                {item?.Datasets.map((dataset) => (
+                  <li>
+                    {`${dataset['name']} - 
+                      ${
+                        dataset['OutputFormat']
+                          ? dataset['OutputFormat']
+                          : formatMessage(messages.PrePackaged)
+                      }`}
+                  </li>
+                ))}
+              </ul>
+            )}
+            {item?.Status === 'Finished_ok' && (
+              <>
+                {item?.FileSize && <p>{`${item.FileSize} MB`}</p>}
+                {item?.DownloadURL && (
+                  <a href={item.DownloadURL} target="_blank" rel="noreferrer">
+                    {formatMessage(messages.Download)}
+                  </a>
+                )}
+                {item?.FinalizationDateTime &&
+                  ` | Expires in ${10 - daysDiff} days`}
+              </>
+            )}
+          </Grid.Column>
+          {item?.Status === 'In_progress' && (
+            <Grid.Column width={2} verticalAlign="middle" textAlign="center">
+              {showDeleteTaskLoading === item?.TaskID ? (
+                <Loader
+                  active
+                  inline
+                  indeterminate
+                  size="small"
+                  className="red-loader"
+                />
+              ) : (
+                <Popup
+                  content="Remove in progress task"
+                  size="small"
+                  trigger={
+                    <button
+                      onClick={() => {
+                        deleteTaskInProgress(item?.TaskID);
+                      }}
+                      style={{
+                        backgroundColor: 'transparent',
+                        color: 'inherit',
+                        border: 'none',
+                        padding: 0,
+                        font: 'inherit',
+                        cursor: 'pointer',
+                        outline: 'inherit',
+                      }}
+                    >
+                      <Icon
+                        name={removeSVG}
+                        size={40}
+                        color="#e40166"
+                        title={'Remove in progress task'}
+                      />
+                    </button>
+                  }
+                />
+              )}
+            </Grid.Column>
+          )}
+        </Grid.Row>
+      </Grid>
+    </Segment>
+  );
+};
+
+export default FileCard;

package/src/components/CLMSMeetingView/CLMSMeetingView.jsx

@@ -131,7 +131,7 @@ export const CLMSMeetingView = (props) => {
     });
   };
   var formErrorMessagesList = [];
-  !content.anonymous_registration_form.published &&
+  !content.anonymous_registration_form?.published &&
     formErrorMessagesList.push(
       intl.formatMessage(messages.form_is_not_published),
     );
@@ -334,8 +334,8 @@ export const CLMSMeetingView = (props) => {
               {content.allow_anonymous_registration ? (
                 <>
                   {content.anonymous_registration_form?.published &&
-                    content.anonymous_registration_form.email &&
-                    content.anonymous_registration_form.fullname && (
+                    content.anonymous_registration_form?.email &&
+                    content.anonymous_registration_form?.fullname && (
                       <CclButton url={content.anonymous_registration_form?.url}>
                         <FormattedMessage
                           id="Register to this meeting"

package/src/index.js

@@ -9,6 +9,7 @@ import BoundingWidget from './components/Widgets/BoundingWidget';
 // VIEWS IMPORTS
 import CLMSDatasetDetailView from '@eeacms/volto-clms-theme/components/CLMSDatasetDetailView/CLMSDatasetDetailView';
 import CLMSDownloadCartView from './components/CLMSDownloadCartView/CLMSDownloadCartView';
+import CLMSDownloadsView from './components/CLMSDownloadsView/CLMSDownloadsView';
 import SubscriptionView from './components/CLMSSubscriptionView/SubscriptionView';
 import ConfirmSubscriptionView from './components/CLMSSubscriptionView/ConfirmSubscriptionView';
 import CLMSDownloadableFileView from '@eeacms/volto-clms-theme/components/CLMSDownloadableFileView/CLMSDownloadableFileView';
@@ -175,6 +176,10 @@ const applyConfig = (config) => {
       path: '/**/cart',
       component: CLMSDownloadCartView,
     },
+    {
+      path: '/**/cart-downloads',
+      component: CLMSDownloadsView,
+    },
     {
       path: `/(${config.settings.supportedLanguages.join('|')})/sitemap`,
       component: Sitemap,

package/src/reducers/downloadtool/downloadtool_reducer.js

@@ -40,12 +40,36 @@ export const downloadtoolReducer = (state = getInitialState, action = {}) => {
       };
 
     case `${GET_DOWNLOADTOOL}_SUCCESS`:
+      let tasks_keys = Object.keys(action.result);
+      let tasks_array = [];
+      tasks_keys.forEach((progress_key) => {
+        tasks_array.push({
+          ...action.result[progress_key],
+          TaskID: progress_key,
+        });
+      });
+      // var cancelled = tasks_array.filter((task) => task.Status === 'Cancelled');
+      var in_progress = tasks_array.filter(
+        (task) => task.Status === 'In_progress',
+      );
+      var finished_ok = tasks_array.filter(
+        (task) => task.Status === 'Finished_ok',
+      );
+      var finished_nok = tasks_array.filter(
+        (task) => task.Status === 'Finished_nok',
+      );
+      var rejected = tasks_array.filter((task) => task.Status === 'Rejected');
+
       return {
         ...state,
         error: null,
         loaded: true,
         loading: false,
-        download_in_progress: action.result,
+        // download_cancelled: cancelled,
+        download_in_progress: in_progress,
+        download_finished_ok: finished_ok,
+        download_finished_nok: finished_nok,
+        download_rejected: rejected,
       };
     case `${POST_DOWNLOADTOOL}_PENDING`:
       return {