@eeacms/volto-clms-theme 1.0.31 → 1.0.32

package/CHANGELOG.md

@@ -4,8 +4,37 @@ 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.32](https://github.com/eea/volto-clms-theme/compare/1.0.31...1.0.32)
+
+- Downloadtool [`#99`](https://github.com/eea/volto-clms-theme/pull/99)
+- Card block style fix [`#98`](https://github.com/eea/volto-clms-theme/pull/98)
+- top main menu fix [`#97`](https://github.com/eea/volto-clms-theme/pull/97)
+- Use cases carousel fix [`#96`](https://github.com/eea/volto-clms-theme/pull/96)
+- specify form label color only for footer [`d2f1bff`](https://github.com/eea/volto-clms-theme/commit/d2f1bffd10869273e61d6b79ae6513571a417a6f)
+- arcgis block version [`a32ee91`](https://github.com/eea/volto-clms-theme/commit/a32ee918271a131024e34560562795e986998600)
+- optimized downloadtool reducer [`8e54177`](https://github.com/eea/volto-clms-theme/commit/8e541777362d2bde826950afaaba1034ecf4e8e6)
+- card block style fix [`c5227bb`](https://github.com/eea/volto-clms-theme/commit/c5227bbd4ec9120c76fd316b425fb5fbbd56bf96)
+- card block style fix [`c551081`](https://github.com/eea/volto-clms-theme/commit/c55108137230c2a1d620662bb9acd4828e98675c)
+- Buttons popups and titles [`c4c71a0`](https://github.com/eea/volto-clms-theme/commit/c4c71a0bfe0a584438c37a0c192a44fa09509eea)
+- CLMSTaskInProgress component [`b709830`](https://github.com/eea/volto-clms-theme/commit/b7098304abc584de50570d7b1dc272474d7e1719)
+- z-index for header tools dropdown [`7e54bd1`](https://github.com/eea/volto-clms-theme/commit/7e54bd1d69b18d1d48c0d6a8b87fefa6aff64e7e)
+- When task start processing add design to item [`2559caa`](https://github.com/eea/volto-clms-theme/commit/2559caa45e9b7077a2739d30ce1c4d92d2280c9c)
+- on select all cart with task in progress bug fixed [`9582abe`](https://github.com/eea/volto-clms-theme/commit/9582abed5881bb9a3bdbf6f820577ce26e99019f)
+- on cart items post to downloadtool, task start processing [`be7ee24`](https://github.com/eea/volto-clms-theme/commit/be7ee2434c66d34903e995944aa02298c645d503)
+- downloadtool redux action and reducer [`7fcc3de`](https://github.com/eea/volto-clms-theme/commit/7fcc3de64b3db5a43d3a05cbf101b7983a8cd106)
+- prettier [`4cd8768`](https://github.com/eea/volto-clms-theme/commit/4cd876832b7564640e0d0c0aabda9a85f1be9f5e)
+- cartUse hook control if user_id exist [`f97b8ab`](https://github.com/eea/volto-clms-theme/commit/f97b8ab777d3b108e6964efdf8deeb9642818062)
+- header cart counter moved to functional component [`d2e5bbf`](https://github.com/eea/volto-clms-theme/commit/d2e5bbf651b123935abcc8c8f3e65cc6911a8767)
+- progressbar component [`046380a`](https://github.com/eea/volto-clms-theme/commit/046380a5d01deab1887727a7003b7fe6bcd23cd8)
+- post cart selection to downloadtool [`23e6d52`](https://github.com/eea/volto-clms-theme/commit/23e6d52df7f8e0c75c446135099dbfb2bebde5a1)
+- getCartSessionStorage when CART_SESSION_USER_KEY is loaded [`3994dc0`](https://github.com/eea/volto-clms-theme/commit/3994dc0e3ea0facc108bfcd2bc3860ee0f0448a9)
+- changed the cart cache key from user_token to user_id [`e03b53d`](https://github.com/eea/volto-clms-theme/commit/e03b53d98f15a2b556d0a912fe9bc4b216f0d9c4)
+
 #### [1.0.31](https://github.com/eea/volto-clms-theme/compare/1.0.30...1.0.31)
 
+> 14 October 2021
+
+- style changes and arcgis-block new version [`#95`](https://github.com/eea/volto-clms-theme/pull/95)
 - Top main menu dropdown fxed [`#94`](https://github.com/eea/volto-clms-theme/pull/94)
 - volto-arcgis-block new version [`5648dcb`](https://github.com/eea/volto-clms-theme/commit/5648dcb178e418a44cf0729ee2c9a920954f820a)
 - accordion title hover color [`bca1813`](https://github.com/eea/volto-clms-theme/commit/bca181393ec304c2be811f18479c077d13897e77)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -29,7 +29,7 @@
   ],
   "dependencies": {
     "volto-dropdownmenu": "2.2.7",
-    "@eeacms/volto-arcgis-block": "0.1.8",
+    "@eeacms/volto-arcgis-block": "0.1.9",
     "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@fortawesome/free-solid-svg-icons": "5.15.3",
     "@fortawesome/free-regular-svg-icons": "5.15.3",

package/src/actions/cart/cart.js

@@ -4,7 +4,6 @@
  */
 export const GET_CART_ITEMS = 'GET_CART_ITEMS';
 export const SET_CART_ITEMS = 'SET_CART_ITEMS';
-
 /**
  * Set Cart items.
  * @function setCartItems
@@ -13,7 +12,7 @@ export const SET_CART_ITEMS = 'SET_CART_ITEMS';
 export function setCartItems(items) {
   return {
     type: SET_CART_ITEMS,
-    items,
+    items: items,
   };
 }
 
@@ -22,10 +21,10 @@ export function setCartItems(items) {
  * @function getCartItems
  * @returns {Object} Get extra items action.
  */
-export function getCartItems(token, localStorage) {
+
+export function getCartItems(user_id) {
   return {
     type: GET_CART_ITEMS,
-    token,
-    localStorage,
+    user_id: user_id,
   };
 }

package/src/actions/downloadtool/delete_downloadtool.js

@@ -0,0 +1,21 @@
+/**
+ * Post cart selection to downloadtool.
+ * @module actions/postDownloadtool
+ */
+export const DELETE_DOWNLOADTOOL = 'DELETE_DOWNLOADTOOL';
+
+/**
+ * delete cart selection to downloadtool.
+ * @function deleteDownloadtool
+ * @returns {Object} Get extra items action.
+ */
+export function deleteDownloadtool(user_id, task_id) {
+  return {
+    type: DELETE_DOWNLOADTOOL,
+    request: {
+      op: 'del',
+      data: { UserID: user_id, TaskID: task_id },
+      path: '/@datarequest_delete',
+    },
+  };
+}

package/src/actions/downloadtool/get_downloadtool.js

@@ -0,0 +1,20 @@
+/**
+ * Get cart selection to downloadtool.
+ * @module actions/getDownloadtool
+ */
+export const GET_DOWNLOADTOOL = 'GET_DOWNLOADTOOL';
+
+/**
+ * Get cart selection to downloadtool.
+ * @function GetDownloadtool
+ * @returns {Object} Get extra items action.
+ */
+export function getDownloadtool(user_id) {
+  return {
+    type: GET_DOWNLOADTOOL,
+    request: {
+      op: 'get',
+      path: `/@datarequest_search?UserID=${user_id}&Status=In_progress`,
+    },
+  };
+}

package/src/actions/downloadtool/post_downloadtool.js

@@ -0,0 +1,21 @@
+/**
+ * Post cart selection to downloadtool.
+ * @module actions/postDownloadtool
+ */
+export const POST_DOWNLOADTOOL = 'POST_DOWNLOADTOOL';
+
+/**
+ * Post cart selection to downloadtool.
+ * @function PostDownloadtool
+ * @returns {Object} Get extra items action.
+ */
+export function postDownloadtool(item) {
+  return {
+    type: POST_DOWNLOADTOOL,
+    request: {
+      op: 'post',
+      data: item,
+      path: '/@datarequest_post',
+    },
+  };
+}

package/src/actions/index.js

@@ -33,3 +33,15 @@ export {
   MEETING_SUBSCRIBERS,
   MeetingSubscribers,
 } from './meeting/meeting_subscribers';
+export {
+  POST_DOWNLOADTOOL,
+  postDownloadtool,
+} from './downloadtool/post_downloadtool';
+export {
+  GET_DOWNLOADTOOL,
+  getDownloadtool,
+} from './downloadtool/get_downloadtool';
+export {
+  DELETE_DOWNLOADTOOL,
+  deleteDownloadtool,
+} from './downloadtool/delete_downloadtool';

package/src/components/Blocks/CclHomeUsersBlock/styles.less

@@ -68,7 +68,8 @@
 }
 
 .ccl-list-items .ccl-list-item .ccl-list-item-image img {
-  max-height: 11rem;
+  width: 100%;
+  height: 100%;
   object-fit: cover;
 }
 

package/src/components/CLMSDownloadCartView/CLMSDownloadCartView.jsx

@@ -6,7 +6,7 @@
 import React, { useEffect, useState } from 'react';
 import { Helmet } from '@plone/volto/helpers';
 import { defineMessages, useIntl } from 'react-intl';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { getExtraBreadcrumbItems } from '../../actions';
 import useCartState from '@eeacms/volto-clms-theme/utils/useCartState';
 import { FormattedMessage } from 'react-intl';
@@ -14,11 +14,17 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Forbidden, Unauthorized } from '@plone/volto/components';
 import { Checkbox } from 'semantic-ui-react';
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
+import { postDownloadtool, getDownloadtool } from '../../actions';
+import CLMSTasksInProgress from './CLMSTasksInProgress';
 
 const CLMSDownloadCartView = (props) => {
   const dispatch = useDispatch();
   const { cart, removeCartItem, isLoggedIn } = useCartState();
   const [cartSelection, setCartSelection] = useState([]);
+  const post_download_in_progress = useSelector(
+    (state) => state.downloadtool.post_download_in_progress,
+  );
+  const user_id = useSelector((state) => state.users.user.id);
   const selectCart = (id, checked) => {
     if (checked) setCartSelection(cartSelection.concat(id));
     else setCartSelection(cartSelection.filter((arr_id) => arr_id !== id));
@@ -26,7 +32,11 @@ const CLMSDownloadCartView = (props) => {
 
   const selectAllCart = (checked) => {
     if (checked) {
-      setCartSelection(cart.map((item, key) => item.unique_id));
+      setCartSelection(
+        cart
+          .filter((item) => item.task_in_progress === false)
+          .map((item, key) => item.unique_id),
+      );
     } else {
       setCartSelection([]);
     }
@@ -56,6 +66,31 @@ const CLMSDownloadCartView = (props) => {
     };
   }, [dispatch, formatMessage, messages.Cart, props.location.pathname]);
 
+  const getSelectedCartItems = () => {
+    return cart.filter((item) => cartSelection.indexOf(item.unique_id) > -1);
+  };
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const setCartItemInProgress = (in_progress_dataset_id) => {
+    let started_processing_item = cart.filter(
+      (r) => r['unique_id'] === in_progress_dataset_id,
+    )[0];
+    if (started_processing_item['unique_id']) {
+      removeCartItem(started_processing_item['unique_id']);
+      dispatch(getDownloadtool(user_id));
+    }
+  };
+
+  useEffect(() => {
+    let progress_keys = Object.keys(post_download_in_progress);
+    progress_keys.forEach((progress_key) =>
+      setCartItemInProgress(
+        post_download_in_progress[progress_key]['DatasetID'],
+      ),
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [post_download_in_progress]);
+
   return (
     <>
       <Helmet title={formatMessage(messages.Cart)} />
@@ -105,8 +140,9 @@ const CLMSDownloadCartView = (props) => {
                   </ul>
                 </div>
               </div>
-
+              <CLMSTasksInProgress />
               <div className="custom-table cart-table">
+                <h2>My cart</h2>
                 <table>
                   <thead>
                     <tr>
@@ -118,11 +154,21 @@ const CLMSDownloadCartView = (props) => {
                               onChange={(e, data) =>
                                 selectAllCart(data.checked)
                               }
-                              checked={cart
-                                .map((item, key) => item.unique_id)
-                                .every(function (val) {
-                                  return cartSelection.indexOf(val) !== -1;
-                                })}
+                              checked={
+                                cart
+                                  ? cart
+                                      .filter(
+                                        (item) =>
+                                          item.task_in_progress === false,
+                                      )
+                                      .map((item, key) => item.unique_id)
+                                      .every(function (val) {
+                                        return (
+                                          cartSelection.indexOf(val) !== -1
+                                        );
+                                      })
+                                  : false
+                              }
                             />
                           </div>
                         </div>
@@ -142,7 +188,14 @@ const CLMSDownloadCartView = (props) => {
                   <tbody>
                     {cart &&
                       cart.map((item, key) => (
-                        <tr key={key}>
+                        <tr
+                          key={key}
+                          style={
+                            item.task_in_progress
+                              ? { opacity: 0.5, backgroundColor: '#f5f5f5' }
+                              : {}
+                          }
+                        >
                           <td className="table-td-warning hidden-warning">
                             {!!item.warning && (
                               <span
@@ -166,6 +219,7 @@ const CLMSDownloadCartView = (props) => {
                                   checked={cartSelection.includes(
                                     item.unique_id,
                                   )}
+                                  disabled={item.task_in_progress}
                                 />
                               </div>
                             </div>
@@ -177,7 +231,7 @@ const CLMSDownloadCartView = (props) => {
                           <td>{item.resolution}</td>
                           <td>
                             <span
-                              className={'tag tag-' + item.type.toLowerCase()}
+                              className={'tag tag-' + item?.type?.toLowerCase()}
                             >
                               {item.type}
                             </span>
@@ -202,17 +256,21 @@ const CLMSDownloadCartView = (props) => {
                           <td>{item.version}</td>
                           <td>{item.size}</td>
                           <td>
-                            <FontAwesomeIcon
-                              icon={['fas', 'trash']}
-                              style={{ cursor: 'pointer' }}
-                              onClick={() => {
-                                removeCartItem(item.unique_id);
-                              }}
-                            />
+                            {item.task_in_progress ? (
+                              <FontAwesomeIcon icon="spinner" spin />
+                            ) : (
+                              <FontAwesomeIcon
+                                icon={['fas', 'trash']}
+                                style={{ cursor: 'pointer' }}
+                                onClick={() => {
+                                  removeCartItem(item.unique_id);
+                                }}
+                              />
+                            )}
                           </td>
                         </tr>
                       ))}
-                    {cart.length === 0 && (
+                    {cart?.length === 0 && (
                       <>
                         <tr>
                           <td
@@ -227,14 +285,30 @@ const CLMSDownloadCartView = (props) => {
                   </tbody>
                 </table>
               </div>
-              {cart.length !== 0 && (
+              {cart?.length !== 0 && (
                 <CclButton
                   onClick={() => {
-                    // eslint-disable-next-line no-alert
-                    alert(
-                      'ToDo\nSelected content:\n' +
-                        JSON.stringify(cartSelection),
-                    );
+                    let selectedItems = getSelectedCartItems();
+                    selectedItems.forEach((selected) => {
+                      const item = {
+                        UserID: user_id,
+                        /*, 
+                        UID: dataset unique id;
+                        DatasetID: dataset id;
+                        Format: Dataset format
+                        selected['unique_id']
+                        selected['UID']
+                        */
+                        DatasetID: selected['unique_id'] || selected['UID'], // provisional, We need to send and return unique_id to can mark this element as a pending task selected['UID'],
+                        //DatasetFormat: selected['type'], // Formats: "Shapefile"|"GDB"|"GPKG"|"Geojson"|"Geotiff"|"Netcdf"|"GML"|"WFS"
+                        DatasetFormat: 'Shapefile',
+                        // OutputFormat:selected['format'],
+                        // DatasetPath: selected['path'],
+
+                        OutputFormat: 'GDB',
+                      };
+                      dispatch(postDownloadtool(item));
+                    });
                   }}
                   disabled={cartSelection.length === 0}
                 >

package/src/components/CLMSDownloadCartView/CLMSTasksInProgress.jsx

@@ -0,0 +1,171 @@
+/**
+ * CLMSInProgressTask container.
+ * @module components/CLMSInProgressTask/CLMSInProgressTask
+ */
+
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { getDownloadtool, deleteDownloadtool } from '../../actions';
+// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Loader, Popup } from 'semantic-ui-react';
+import removeSVG from '@plone/volto/icons/circle-dismiss.svg';
+import downloadSVG from '@plone/volto/icons/download.svg';
+import { Icon } from '@plone/volto/components';
+import './task_in_progress.less';
+
+const CLMSTasksInProgress = (props) => {
+  const dispatch = useDispatch();
+  const [taskInProgress, setTaskInProgress] = useState([]);
+  const download_in_progress = useSelector(
+    (state) => state.downloadtool.download_in_progress,
+  );
+
+  const user_id = useSelector((state) => state.users.user.id);
+  const [showDeleteTaskLoading, setShowDeleteTaskLoading] = useState(false);
+
+  useEffect(() => {
+    dispatch(getDownloadtool(user_id));
+  }, [user_id, dispatch]);
+
+  useEffect(() => {
+    let progress_keys = Object.keys(download_in_progress);
+    let tasks_in_progress = [];
+    progress_keys.forEach((progress_key) => {
+      tasks_in_progress.push({
+        ...download_in_progress[progress_key],
+        TaskID: progress_key,
+      });
+    });
+    setTaskInProgress(tasks_in_progress);
+  }, [download_in_progress]);
+  const deleteTaskInProgress = (task_id) => {
+    setShowDeleteTaskLoading(task_id);
+    dispatch(deleteDownloadtool(user_id, task_id));
+    setTimeout(() => {
+      dispatch(getDownloadtool(user_id));
+      setShowDeleteTaskLoading(false);
+    }, 1000); // We need delete response to check if remove_task request is completed successfully
+  };
+  return (
+    <>
+      {taskInProgress.length !== 0 && (
+        <div className="custom-table cart-table">
+          <h2>Tasks In Progress</h2>
+          <table>
+            <thead>
+              <tr>
+                <th>DatasetFormat</th>
+                <th>DatasetID || unique_id</th>
+                <th>OutputFormat</th>
+                <th>Status</th>
+                <th></th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {taskInProgress &&
+                taskInProgress.map((item, key) => (
+                  <tr
+                    key={key}
+                    style={{ opacity: 0.5, backgroundColor: '#f5f5f5' }}
+                  >
+                    <td className="table-td-format">{item.DatasetFormat}</td>
+                    <td>{item.DatasetID}</td>
+                    <td>{item.OutputFormat}</td>
+
+                    <td>
+                      <Popup
+                        content="In progress"
+                        size="small"
+                        trigger={
+                          <Loader active inline indeterminate size="small" />
+                        }
+                      />
+                      {/* <FontAwesomeIcon icon="spinner" spin /> */}
+                    </td>
+                    <td>
+                      <Popup
+                        content="Download (Pending)"
+                        size="small"
+                        trigger={
+                          <button
+                            // disabled={true}
+                            onClick={() => {
+                              // deleteTaskInProgress(item.TaskID);
+                            }}
+                            style={{
+                              backgroundColor: 'none',
+                              color: 'inherit',
+                              border: 'none',
+                              padding: 0,
+                              font: 'inherit',
+                              cursor: 'pointer',
+                              outline: 'inherit',
+                            }}
+                          >
+                            <Icon
+                              name={downloadSVG}
+                              size="32px"
+                              color="#A0B128"
+                              title={'Download'}
+                            />
+                          </button>
+                        }
+                      />
+                    </td>
+                    <td>
+                      {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: 'none',
+                                color: 'inherit',
+                                border: 'none',
+                                padding: 0,
+                                font: 'inherit',
+                                cursor: 'pointer',
+                                outline: 'inherit',
+                              }}
+                            >
+                              <Icon
+                                name={removeSVG}
+                                size="32px"
+                                color="#e40166"
+                                title={'Remove in progress task'}
+                              />
+                            </button>
+                          }
+                        />
+                      )}
+                      {/* <FontAwesomeIcon
+                      icon={['fas', 'trash']}
+                      style={{ cursor: 'pointer' }}
+                      onClick={() => {
+                        deleteTaskInProgress(item.TaskID);
+                      }}
+                    /> */}
+                    </td>
+                  </tr>
+                ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </>
+  );
+};
+export default CLMSTasksInProgress;

package/src/components/CLMSDownloadCartView/task_in_progress.less

@@ -0,0 +1,6 @@
+.red-loader.ui.loader:after {
+  border-top-color: #e40166;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}

package/src/components/CclCard/CclCard.jsx

@@ -54,12 +54,12 @@ function CclCard(props) {
                   alt="Placeholder"
                 />
               </div>
-              <div className="card-doc-title">
-                <a href={card?.file?.download}>
-                  {card?.title || 'Card default title'}
-                </a>
-              </div>
               <div className="card-text">
+                <div className="card-title">
+                  <a href={card?.file?.download}>
+                    {card?.title || 'Card default title'}
+                  </a>
+                </div>
                 <div className="card-description">{card?.description}</div>
                 <div className="card-button">
                   <CclButton url={url}>Access to product</CclButton>

package/src/components/CclTopMainMenu/CclTopMainMenu.jsx

@@ -29,10 +29,10 @@ const CclTopMainMenu = () => {
               ) : (
                 <li className="header-dropdown" key={index}>
                   <>
-                    <a>
+                    <span>
                       {item.title}{' '}
                       <span className="ccl-icon-chevron-thin-down"></span>
-                    </a>
+                    </span>
                     <ul>
                       {item.navigationRoot?.map((element, index) => (
                         <li key={index}>

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

@@ -5,9 +5,9 @@
  * @module components/theme/Header/Header
  */
 
-import React, { Component } from 'react';
+import React, { Component, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { connect, useSelector, useDispatch } from 'react-redux';
 
 import { Logo, Navigation, SearchWidget } from '@plone/volto/components';
 import jwtDecode from 'jwt-decode';
@@ -25,6 +25,33 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { getCartItems } from '@eeacms/volto-clms-theme/actions';
 import '@eeacms/volto-clms-theme/../theme/clms/css/header.css';
 import { Link } from 'react-router-dom';
+// import useCartState from '@eeacms/volto-clms-theme/utils/useCartState';
+
+const CartIconCounter = (props) => {
+  const { cart_items, users, intl } = useSelector((state) => state);
+
+  const cart = cart_items.items;
+  const user_id = users.user.id;
+
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(getCartItems(user_id));
+  }, [user_id, dispatch]);
+  return (
+    cart?.length !== 0 &&
+    cart && (
+      <>
+        <span className="header-vertical-line"> - </span>
+        <span>
+          <Link to={`/${intl.locale}/cart`} className="header-login-link">
+            <FontAwesomeIcon icon={['fas', 'shopping-cart']} />
+            <strong>{cart?.length}</strong>
+          </Link>
+        </span>
+      </>
+    )
+  );
+};
 /**
  * Header component class.
  * @class Header
@@ -52,12 +79,14 @@ class Header extends Component {
 
   componentDidMount() {
     this.props.getUser(this.props.token);
-    this.props.getCartItems(this.props.rawtoken);
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.token !== this.props.token) {
       this.props.getUser(nextProps.token);
     }
+    if (nextProps.user.id !== this.props.user.id) {
+      this.props.getCartItems(this.props?.user?.id);
+    }
   }
 
   /**
@@ -152,22 +181,7 @@ class Header extends Component {
                             </>
                           )}
                         </Link>
-                        {this.props.cart?.length !== 0 && this.props.cart && (
-                          <>
-                            <span className="header-vertical-line"> - </span>
-                            <span>
-                              <Link
-                                to={`/${this.props.locale}/cart`}
-                                className="header-login-link"
-                              >
-                                <FontAwesomeIcon
-                                  icon={['fas', 'shopping-cart']}
-                                />
-                                <strong>{this.props.cart?.length}</strong>
-                              </Link>
-                            </span>
-                          </>
-                        )}
+                        <CartIconCounter />
                         {this.props.user.id &&
                           this.props.user.roles &&
                           this.props.user.roles[0] === 'Member' && (

package/src/reducers/cart/cart_reducer.js

@@ -18,11 +18,12 @@ export const cartItemsReducer = (state = initialState, action = {}) => {
         items: action.items,
       };
     case GET_CART_ITEMS:
+      const CART_SESSION_USER_KEY = action.user_id
+        ? CART_SESSION_KEY.concat(`_${action.user_id}`)
+        : CART_SESSION_KEY;
       return {
         ...state,
-        items: JSON.parse(
-          localStorage.getItem(CART_SESSION_KEY.concat(action.token)),
-        ),
+        items: JSON.parse(localStorage.getItem(CART_SESSION_USER_KEY)),
       };
     default:
       return state;

package/src/reducers/downloadtool/downloadtool_reducer.js

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

package/src/reducers/index.js

@@ -9,6 +9,8 @@ import { cartItemsReducer } from './cart/cart_reducer';
 import { extraBreadcrumbItemsReducer } from './extra_breadcrumbs/extra_breadcrumb_reducer';
 import { meetingRegisterReducer } from './meeting/meeting_register_reducer';
 import { meetingSubscribersReducer } from './meeting/meeting_subscribers_reducer';
+import { downloadtoolReducer } from './downloadtool/downloadtool_reducer';
+
 /**
  * Root reducer.
  * @function
@@ -24,6 +26,7 @@ const reducers = {
   cart_items: cartItemsReducer,
   meeting_register: meetingRegisterReducer,
   subscribers: meetingSubscribersReducer,
+  downloadtool: downloadtoolReducer,
 };
 
 export default reducers;

package/src/utils/useCartState.js

@@ -7,66 +7,71 @@ import { useSelector } from 'react-redux';
 export const CART_SESSION_KEY = 'cart_session';
 
 const useCartState = () => {
-  const [cart, setCart] = useState([]);
+  // const [cart, setCart] = useState([]);
   const [savedToCard, setSavedToCard] = useState(false);
   const [toasTime, setToastTime] = useState(3000);
-  const CART_SESSION_USER_KEY = useSelector((state) =>
-    state.userSession.token
-      ? CART_SESSION_KEY.concat(state.userSession.token)
-      : CART_SESSION_KEY,
-  );
+  const [CART_SESSION_USER_KEY, SET_CART_SESSION_USER_KEY] = useState();
   const isLoggedIn = useSelector((state) =>
     state.userSession.token ? jwtDecode(state.userSession.token).sub : '',
   )
     ? true
     : false;
-  // const cartState = useSelector((state) => state.cart_items.items);
-  // const state = store.getState();
-  // const [loggedInStatus, setLoggedInStatus] = useState(
-  //   useSelector((state) =>
-  //     state.userSession.token ? jwtDecode(state.userSession.token).sub : '',
-  //   ),
-  // );
 
+  const user_id = useSelector((state) => state.users.user.id);
+  const cartState = useSelector((state) => state.cart_items.items);
+
+  useEffect(() => {
+    user_id &&
+      SET_CART_SESSION_USER_KEY(CART_SESSION_KEY.concat(`_${user_id}`));
+    getCartSessionStorage();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [CART_SESSION_USER_KEY, user_id]);
   const dispatch = useDispatch();
 
   const saveItems = (values) => {
     let items = cleanDuplicatesEntries(values);
-    // localStorage.setItem(CART_SESSION_KEY, JSON.stringify(items));
     localStorage.setItem(CART_SESSION_USER_KEY, JSON.stringify(items));
-    setCart(items);
-
+    dispatch(setCartItems(items ?? []));
     setSavedToCard(true);
     setTimeout(() => setSavedToCard(false), toasTime);
   };
 
   const removeAllCart = () => {
     localStorage.removeItem(CART_SESSION_USER_KEY);
-    setCart([]);
+    dispatch(setCartItems([]));
   };
 
   const getCartSessionStorage = () => {
-    setCart(JSON.parse(localStorage.getItem(CART_SESSION_USER_KEY)) || []);
+    CART_SESSION_USER_KEY &&
+      dispatch(
+        setCartItems(
+          JSON.parse(localStorage.getItem(CART_SESSION_USER_KEY)) || [],
+        ),
+      );
   };
 
   const addCartItem = async (value) => {
+    let card_item = value.map((item) => {
+      item['task_in_progress'] = false;
+      return item;
+    });
     await getCartSessionStorage();
-    if (cart) {
-      saveItems(cart.concat(value));
+    if (cartState) {
+      saveItems(cartState.concat(card_item));
     } else {
-      saveItems(value);
+      saveItems(card_item);
     }
   };
 
   const removeCartItem = async (id) => {
     await getCartSessionStorage();
-    let newcart = cart.slice();
-    newcart.forEach((item) => {
+    let newcart = cartState.slice();
+    await newcart.forEach((item) => {
       if (item.unique_id === id) {
         newcart.splice(newcart.indexOf(item), 1);
       }
     });
-    setCart(newcart);
+
     saveItems(newcart);
   };
 
@@ -76,15 +81,6 @@ const useCartState = () => {
         index === self.findIndex((t) => t.unique_id === arr.unique_id),
     );
 
-  useEffect(() => {
-    getCartSessionStorage();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    dispatch(setCartItems(cart));
-  }, [dispatch, cart]);
-
   const Toast = ({ message, time = toasTime }) => {
     return (
       <>
@@ -100,15 +96,26 @@ const useCartState = () => {
     );
   };
 
+  const changeCartItemTaskStatus = async (unique_id, in_progress) => {
+    await getCartSessionStorage();
+    let newcart = cartState.map((item) => {
+      if (item['unique_id'] === unique_id) {
+        item['task_in_progress'] = in_progress;
+      }
+      return item;
+    });
+    saveItems(newcart);
+  };
   // return [cart, addCartItem, removeCartSessionStorage];
 
   return {
-    cart: cart,
+    cart: cartState,
     addCartItem: addCartItem,
     removeAllCart: removeAllCart,
     removeCartItem: removeCartItem,
     Toast: Toast,
     isLoggedIn: isLoggedIn,
+    changeCartItemTaskStatus: changeCartItemTaskStatus,
   };
 };
 

package/theme/clms/css/carousel.css

@@ -361,7 +361,6 @@
 .ccl-list-carousel .slick-slide img {
   border: none !important;
   border-radius: 1.5rem;
-  opacity: 0.5;
 }
 
 .ccl-list-carousel .slick-slide:focus {
@@ -371,10 +370,12 @@
 /* Items */
 .ccl-list-items .ccl-list-item .ccl-list-item-image {
   width: 100%;
+  height: 12rem;
 }
 
 .ccl-list-items .ccl-list-item .ccl-list-item-image img {
   width: 100%;
+  height: 100%;
 }
 
 .ccl-list-items .ccl-list-item .ccl-list-item-date {

package/theme/clms/css/footer.css

@@ -340,11 +340,11 @@
 
 /*---CS ADDITION---*/
 
-.ccl-form-check-label {
+.ccl-footer-form .ccl-form-check-label {
   color: white !important;
 }
 
-.ccl-form-check-label a {
+.ccl-footer-form .ccl-form-check-label a {
   text-decoration: underline;
 }
 

package/theme/clms/css/header.css

@@ -276,68 +276,68 @@
 }
 
 .ccl-header
-  .ccl-header-nav
-  .ccl-header-logos-container
-  .ccl-header-logo-service-container {
+.ccl-header-nav
+.ccl-header-logos-container
+.ccl-header-logo-service-container {
   display: none;
   height: 3.125rem;
   margin: 0;
 }
 
 .ccl-header
-  .ccl-header-nav
-  .ccl-header-logos-container
-  .ccl-header-logo-service-container.ccl-service-button.ccl-service-button-full {
+.ccl-header-nav
+.ccl-header-logos-container
+.ccl-header-logo-service-container.ccl-service-button.ccl-service-button-full {
   width: auto;
 }
 
 .ccl-header
-  .ccl-header-nav
-  .ccl-header-logos-container
-  .ccl-header-logo-service-container.ccl-service-button.ccl-service-button-full
-  .ccl-service-button-icon {
+.ccl-header-nav
+.ccl-header-logos-container
+.ccl-header-logo-service-container.ccl-service-button.ccl-service-button-full
+.ccl-service-button-icon {
   width: 2.7777777778rem;
   margin-right: 0;
 }
 @media (max-width: 820px) {
   .ccl-header
-    .ccl-header-nav
-    .ccl-header-logos-container
-    .ccl-header-logo-service-container {
+  .ccl-header-nav
+  .ccl-header-logos-container
+  .ccl-header-logo-service-container {
     margin-right: 1.0555555556rem;
     margin-left: 1.0555555556rem;
   }
 }
 @media (max-width: 640px) {
   .ccl-header
-    .ccl-header-nav
-    .ccl-header-logos-container
-    .ccl-header-logo-service-container {
+  .ccl-header-nav
+  .ccl-header-logos-container
+  .ccl-header-logo-service-container {
     margin-top: 1.0555555556rem;
   }
 }
 
 .ccl-header
-  .ccl-header-nav
-  .ccl-header-logos-container
-  .ccl-header-logo-container {
+.ccl-header-nav
+.ccl-header-logos-container
+.ccl-header-logo-container {
   display: flex;
   height: 3.125rem;
   margin: 0 1.1111111111rem 0 0;
 }
 
 .ccl-header
-  .ccl-header-nav
-  .ccl-header-logos-container
-  .ccl-header-logo-container
-  .ccl-header-logo {
+.ccl-header-nav
+.ccl-header-logos-container
+.ccl-header-logo-container
+.ccl-header-logo {
   height: 3.125rem;
 }
 @media (max-width: 820px) {
   .ccl-header
-    .ccl-header-nav
-    .ccl-header-logos-container
-    .ccl-header-logo-container {
+  .ccl-header-nav
+  .ccl-header-logos-container
+  .ccl-header-logo-container {
     margin-left: 1.0555555556rem;
   }
 }
@@ -347,9 +347,9 @@
 }
 @media (max-width: 400px) {
   .ccl-header
-    .ccl-header-nav
-    .ccl-header-logos-container
-    .ccl-header-logo-container {
+  .ccl-header-nav
+  .ccl-header-logos-container
+  .ccl-header-logo-container {
     width: 100%;
     height: 2rem;
     justify-content: space-around;
@@ -357,10 +357,10 @@
   }
 
   .ccl-header
-    .ccl-header-nav
-    .ccl-header-logos-container
-    .ccl-header-logo-container
-    .ccl-header-logo {
+  .ccl-header-nav
+  .ccl-header-logos-container
+  .ccl-header-logo-container
+  .ccl-header-logo {
     height: 2rem;
   }
 
@@ -615,7 +615,7 @@
 
 .ccl-header-tools-container .header-dropdown:hover ul {
   position: absolute;
-  z-index: 1;
+  z-index: 3;
   left: 0;
   display: block;
   min-width: 100%;
@@ -675,16 +675,16 @@
 }
 
 .ccl-header
-  .ccl-header-nav
-  .ccl-collapsible-toolmenu
-  > li.header-vertical-line {
+.ccl-header-nav
+.ccl-collapsible-toolmenu
+> li.header-vertical-line {
   display: none;
 }
 
 .ccl-header
-  .ccl-header-nav
-  .ccl-collapsible-toolmenu
-  > li.header-vertical-line {
+.ccl-header-nav
+.ccl-collapsible-toolmenu
+> li.header-vertical-line {
   display: none;
 }