@eeacms/volto-clms-theme 1.0.50 → 1.0.54

package/CHANGELOG.md

@@ -4,8 +4,70 @@ 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.54](https://github.com/eea/volto-clms-theme/compare/1.0.53...1.0.54)
+
+- cypress test modification from page-title to documentFirstHeading [`b0513d4`](https://github.com/eea/volto-clms-theme/commit/b0513d449980dbc1d57e070a568617a9b365ecaa)
+- add title override css [`ddc08e1`](https://github.com/eea/volto-clms-theme/commit/ddc08e1ae32f9f628b78c46df6b757921bbeea3b)
+- remove Title block override [`80fa60a`](https://github.com/eea/volto-clms-theme/commit/80fa60acc05f435809b90bd5b6c692af46c21b9e)
+- remove resolutions [`dce1914`](https://github.com/eea/volto-clms-theme/commit/dce19140d9c8d3269b51bc3e58d675114ed90ac2)
+
+#### [1.0.53](https://github.com/eea/volto-clms-theme/compare/1.0.52...1.0.53)
+
+> 22 December 2021
+
+- update volto-clms-utils [`#165`](https://github.com/eea/volto-clms-theme/pull/165)
+
+#### [1.0.52](https://github.com/eea/volto-clms-theme/compare/1.0.51...1.0.52)
+
+> 22 December 2021
+
+- Download cart last modifications [`#164`](https://github.com/eea/volto-clms-theme/pull/164)
+- Download cart [`#163`](https://github.com/eea/volto-clms-theme/pull/163)
+- fixes [`c783f5d`](https://github.com/eea/volto-clms-theme/commit/c783f5de953c79dfe4934ce2dc0fdf472d951753)
+- use dataset information from direct attribute [`b56e96b`](https://github.com/eea/volto-clms-theme/commit/b56e96b2d3c58bfb23994f4c8ef53f85eba7fdf1)
+- debug lint [`74e8e2c`](https://github.com/eea/volto-clms-theme/commit/74e8e2c9857031e636b54826ee9f1c6d384100ab)
+- code refractoring [`79979ed`](https://github.com/eea/volto-clms-theme/commit/79979ed79049e9b600f3b377ae746af6a77903a4)
+- downloadtool post body_extras [`fc15d56`](https://github.com/eea/volto-clms-theme/commit/fc15d56040e5711cde05417f8e7a54c331b93ff1)
+- the format selector always draws according to the api @format_conversion_table [`03e1bd9`](https://github.com/eea/volto-clms-theme/commit/03e1bd9ef7ff276e7006e0d09dea300d38530e99)
+- format and projection selector only available for mapviewer sources [`b86dca7`](https://github.com/eea/volto-clms-theme/commit/b86dca7229d4ce957488166fe800d9ffdaa105f7)
+- view the source in the cart (Pre-packaged or Map viewer) [`cb65dc7`](https://github.com/eea/volto-clms-theme/commit/cb65dc7664d68926e8ae0a481969c82105a6f402)
+- if the cart is empty, dont show the table [`c482e18`](https://github.com/eea/volto-clms-theme/commit/c482e1855eebd57866761759019b79bdc7c182a7)
+- cart items from mapviewer [`d7da742`](https://github.com/eea/volto-clms-theme/commit/d7da74202701703b0c0e2053a42e4dff1d0745f2)
+- fix going back error [`9a24291`](https://github.com/eea/volto-clms-theme/commit/9a24291dcf5bbff3a33ad68b1b06726fda855aa0)
+- added to cart message style [`6a2efdb`](https://github.com/eea/volto-clms-theme/commit/6a2efdb9a0b44f15c3b9e1963dd1434d5f7f7c5c)
+
+#### [1.0.51](https://github.com/eea/volto-clms-theme/compare/1.0.50...1.0.51)
+
+> 20 December 2021
+
+- Cart Download tool [`#162`](https://github.com/eea/volto-clms-theme/pull/162)
+- Download cart [`#160`](https://github.com/eea/volto-clms-theme/pull/160)
+- download cart projections [`#161`](https://github.com/eea/volto-clms-theme/pull/161)
+- Download cart format [`#159`](https://github.com/eea/volto-clms-theme/pull/159)
+- update selected projection option [`6107574`](https://github.com/eea/volto-clms-theme/commit/6107574aa8990b9e431bae8b57069d33b66e9f49)
+- control if downloadtool tasks have been canceled [`0719593`](https://github.com/eea/volto-clms-theme/commit/0719593d211e0b6ef8b156a84fbd512fc09737b8)
+- loading icon and cclbutton isButton option [`807d376`](https://github.com/eea/volto-clms-theme/commit/807d3768beb17cb61a018c21ae490911fe389d95)
+- adapted downloadtool post request [`fc2a2b3`](https://github.com/eea/volto-clms-theme/commit/fc2a2b3ccbee922cd30f5dd62c4583be621391cc)
+- merge develop into download-cart branch [`758ced7`](https://github.com/eea/volto-clms-theme/commit/758ced7ae94351ab9b25b6b6b98ca07821a233ca)
+- add selector to downloadable files editor [`9f05582`](https://github.com/eea/volto-clms-theme/commit/9f05582ed60e9136cc451543a906afa32fef89aa)
+- add action.error on FAIL [`dcf64ac`](https://github.com/eea/volto-clms-theme/commit/dcf64ac1a5cb25092fac1d9aae992c8e783dc85b)
+- basic format selector [`07202c4`](https://github.com/eea/volto-clms-theme/commit/07202c4f548c98df4a74b1058ed24eea88d13425)
+- header nav active border [`037be91`](https://github.com/eea/volto-clms-theme/commit/037be91b4dda6221005dd730fb9d16a862044f87)
+- new volto-clms-utils release [`fca4d27`](https://github.com/eea/volto-clms-theme/commit/fca4d2777ecbd0222fb34c543771f14e5af38fa3)
+- task in progress url changed [`9c23caa`](https://github.com/eea/volto-clms-theme/commit/9c23caa53fc3a61773307f1f3a5b7f6338ecbc69)
+- save endpoint json [`26eb803`](https://github.com/eea/volto-clms-theme/commit/26eb80316a117e7cb2375f10c7100406fbc90308)
+- start Downloading to function [`782e41e`](https://github.com/eea/volto-clms-theme/commit/782e41e71a34492cacc7dc6007d5772db8bbeba9)
+- cartContent remove element [`155bf2d`](https://github.com/eea/volto-clms-theme/commit/155bf2d6e4eb9867a7b6c7b16b01c2f7b433080a)
+- removed unique_id to session_cart [`b4d1ea7`](https://github.com/eea/volto-clms-theme/commit/b4d1ea7e0032b76ee03ad4b44a351d1028f13f42)
+- select all cart elements bug fixed [`0c703f2`](https://github.com/eea/volto-clms-theme/commit/0c703f29aec3c85cb149d89dc64344ade060eba5)
+- cart list from api request [`eeb24e8`](https://github.com/eea/volto-clms-theme/commit/eeb24e88e26d51c82ceda3840ef6f5dc78416d2f)
+- header cart counter always visible [`ac262b1`](https://github.com/eea/volto-clms-theme/commit/ac262b145adff04ca3084ec1bda2387aa03914da)
+
 #### [1.0.50](https://github.com/eea/volto-clms-theme/compare/1.0.49...1.0.50)
 
+> 17 December 2021
+
+- Develop [`#158`](https://github.com/eea/volto-clms-theme/pull/158)
 - cart icon with 0 items [`477f1ef`](https://github.com/eea/volto-clms-theme/commit/477f1efa39d6d5e4adede1b3c4f15e2b524dbcf5)
 - add routing to dataset view [`e65a730`](https://github.com/eea/volto-clms-theme/commit/e65a7304fc338b3262b7f9dad9b5c5029391f3c1)
 - add option without routing [`9675773`](https://github.com/eea/volto-clms-theme/commit/9675773a9531a98cee7f9735b09ebc6c3cfcd6fe)

package/Jenkinsfile

@@ -124,7 +124,7 @@ pipeline {
             node(label: 'docker') {
               script {
                 try {
-                  sh '''docker pull plone; docker run -d --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="profile-plone.restapi:blocks" plone fg'''
+                  sh '''docker pull plone; docker run -d --rm --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="profile-plone.restapi:blocks" plone fg'''
                   sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" -e NODE_ENV=test plone/volto-addon-ci cypress'''
                 } finally {
                   try {
@@ -142,7 +142,8 @@ pipeline {
                              reportName: 'CypressCoverage',
                              reportTitles: 'Integration Tests Code Coverage'])
                     }
-                    archiveArtifacts artifacts: 'cypress-reports/videos/*.mp4', fingerprint: true
+                    sh '''touch empty_file; for ok_test in $(grep -E 'file=.*failures="0"' $(grep 'testsuites .*failures="0"' $(find cypress-results -name *.xml) empty_file | awk -F: '{print $1}') empty_file | sed 's/.* file="\\(.*\\)" time.*/\\1/' | sed 's#^cypress/integration/##g' | sed 's#^../../../node_modules/@eeacms/##g'); do rm -f cypress-reports/videos/$ok_test.mp4; rm -f cypress-reports/$ok_test.mp4; done'''
+                    archiveArtifacts artifacts: 'cypress-reports/**/*.mp4', fingerprint: true, allowEmptyArchive: true
                     stash name: "cypress-coverage", includes: "cypress-coverage/**", allowEmpty: true
                   }
                   finally {

package/README.md

@@ -63,7 +63,7 @@ Demo GIF
 
 *  The automatic release is started by creating a [Pull Request](../../compare/master...develop) from `develop` to `master`. The pull request status checks correlated to the branch and PR Jenkins jobs need to be processed successfully. 1 review from a github user with rights is mandatory.
 * It runs on every commit on `master` branch, which is protected from direct commits, only allowing pull request merge commits.
-* The automatic release is done by [Jenkins](https://ci.eionet.europa.eu). The status of the release job can be seen both in the Readme.md badges and the green check/red cross/yellow circle near the last commit information. If you click on the icon, you will have the list of checks that were run. The `continuous-integration/jenkins/branch` link goes to the Jenkins job execution webpage.
+* The automatic release is done by [Jenkins](https://ci.eionet.europa.eu). The status of the release job can be seen both in the `README.md` badges and the green check/red cross/yellow circle near the last commit information. If you click on the icon, you will have the list of checks that were run. The `continuous-integration/jenkins/branch` link goes to the Jenkins job execution webpage.
 * Automated release scripts are located in the `eeacms/gitflow` docker image, specifically [js-release.sh](https://github.com/eea/eea.docker.gitflow/blob/master/src/js-release.sh) script. It  uses the `release-it` tool.
 * As long as a PR request is open from develop to master, the PR Jenkins job will automatically re-create the CHANGELOG.md and package.json files to be production-ready.
 * The version format must be MAJOR.MINOR.PATCH. By default, next release is set to next minor version (with patch 0).

package/cypress/integration/block-basics.js

@@ -6,13 +6,13 @@ describe('Blocks Tests', () => {
 
   it('Add Block: Empty', () => {
     // Change page title
-    cy.get('.page-title > .public-DraftStyleDefault-block')
+    cy.get('.documentFirstHeading > .public-DraftStyleDefault-block')
       .clear()
       .type('My Add-on Page')
-      .get('.page-title span[data-text]')
+      .get('.documentFirstHeading span[data-text]')
       .contains('My Add-on Page');
 
-    cy.get('.page-title > .public-DraftStyleDefault-block').type('{enter}');
+    cy.get('.documentFirstHeading > .public-DraftStyleDefault-block').type('{enter}');
 
     // Add block
     cy.get('.ui.basic.icon.button.block-add-button').first().click();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.50",
+  "version": "1.0.54",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -29,10 +29,6 @@
     "volto-form-block",
     "@eeacms/volto-taxonomy"
   ],
-  "resolutions": {
-    "volto-slate": "4.2.1",
-    "react-slick": "0.28.1"
-  },
   "dependencies": {
     "@eeacms/volto-tabs-block": "1.2.7",
     "@eeacms/volto-accordion-block": "3.4.7",
@@ -49,7 +45,7 @@
     "react-svg": "14.0.4",
     "@eeacms/volto-arcgis-block": "*",
     "react-native-mime-types": "2.3.0",
-    "@eeacms/volto-clms-utils": "0.1.1",
+    "@eeacms/volto-clms-utils": "0.1.3",
     "volto-form-block": "2.1.0",
     "@eeacms/volto-taxonomy": "^1.0.0"
   },

package/src/actions/datasets_by_uid/datasets_by_uid.js

@@ -0,0 +1,20 @@
+/**
+ * Get cart selection to downloadtool.
+ * @module actions/getDatasetsByUid
+ */
+export const DATASETS_BY_UID = 'DATASETS_BY_UID';
+
+/**
+ * Get cart selection to downloadtool.
+ * @function GetDatasetsByUid
+ * @returns {Object} Get extra items action.
+ */
+export function getDatasetsByUid(uids) {
+  return {
+    type: DATASETS_BY_UID,
+    request: {
+      op: 'get',
+      path: '/@datasets_by_uid?UID=' + uids,
+    },
+  };
+}

package/src/actions/downloadtool/delete_downloadtool.js

@@ -9,13 +9,13 @@ export const DELETE_DOWNLOADTOOL = 'DELETE_DOWNLOADTOOL';
  * @function deleteDownloadtool
  * @returns {Object} Get extra items action.
  */
-export function deleteDownloadtool(user_id, task_id) {
+export function deleteDownloadtool(task_id, user_id) {
   return {
     type: DELETE_DOWNLOADTOOL,
     request: {
       op: 'del',
-      data: { UserID: user_id, TaskID: task_id },
-      path: '/@datarequest_delete',
+      data: { TaskID: task_id },
+      path: `/@datarequest_delete`,
     },
   };
 }

package/src/actions/downloadtool/get_downloadtool.js

@@ -9,12 +9,12 @@ export const GET_DOWNLOADTOOL = 'GET_DOWNLOADTOOL';
  * @function GetDownloadtool
  * @returns {Object} Get extra items action.
  */
-export function getDownloadtool(user_id) {
+export function getDownloadtool() {
   return {
     type: GET_DOWNLOADTOOL,
     request: {
       op: 'get',
-      path: `/@datarequest_search?UserID=${user_id}&Status=In_progress`,
+      path: `/@datarequest_search?status=In_progress`,
     },
   };
 }

package/src/actions/downloadtool/post_downloadtool.js

@@ -9,7 +9,8 @@ export const POST_DOWNLOADTOOL = 'POST_DOWNLOADTOOL';
  * @function PostDownloadtool
  * @returns {Object} Get extra items action.
  */
-export function postDownloadtool(item) {
+export function postDownloadtool(item, unique_ids) {
+  // console.log("unique_ids: ", unique_ids);
   return {
     type: POST_DOWNLOADTOOL,
     request: {
@@ -17,5 +18,6 @@ export function postDownloadtool(item) {
       data: item,
       path: '/@datarequest_post',
     },
+    unique_ids: unique_ids,
   };
 }

package/src/actions/format_conversion_table/get_format_conversion_table.js

@@ -0,0 +1,20 @@
+/**
+ * Get cart selection to downloadtool.
+ * @module actions/getFormatConversionTable
+ */
+export const GET_FORMATCONVERSIONTABLE = 'GET_FORMATCONVERSIONTABLE';
+
+/**
+ * Get cart selection to downloadtool.
+ * @function GetFormatConversionTable
+ * @returns {Object} Get extra items action.
+ */
+export function getFormatConversionTable() {
+  return {
+    type: GET_FORMATCONVERSIONTABLE,
+    request: {
+      op: 'get',
+      path: '/@format_conversion_table',
+    },
+  };
+}

package/src/actions/index.js

@@ -47,6 +47,18 @@ export {
   deleteDownloadtool,
 } from './downloadtool/delete_downloadtool';
 
+export {
+  GET_FORMATCONVERSIONTABLE,
+  getFormatConversionTable,
+} from './format_conversion_table/get_format_conversion_table';
+
+export {
+  DATASETS_BY_UID,
+  getDatasetsByUid,
+} from './datasets_by_uid/datasets_by_uid';
+
+export { GET_PROJECTIONS, getProjections } from './projections/get_projections';
+
 export { GET_REGISTRY, getRegistry } from './registry/registry';
 
 export {

package/src/actions/projections/get_projections.js

@@ -0,0 +1,20 @@
+/**
+ * Get cart selection to downloadtool.
+ * @module actions/getProjections
+ */
+export const GET_PROJECTIONS = 'GET_PROJECTIONS';
+
+/**
+ * Get cart selection to downloadtool.
+ * @function GetProjections
+ * @returns {Object} Get extra items action.
+ */
+export function getProjections() {
+  return {
+    type: GET_PROJECTIONS,
+    request: {
+      op: 'get',
+      path: '/@projections',
+    },
+  };
+}

package/src/components/Blocks/CclTextLinkCarouselBlock/CclTextLinkCarouselView.jsx

@@ -23,10 +23,10 @@ const TextLinkCarouselView = (props) => {
 
   return (
     <>
-      <div class="ccl-container">
+      <div className="ccl-container">
         <Slider {...settings} ref={slider} className="text-carousel">
-          {data?.textLink?.items.map((item, index) => (
-            <div className="text-link-carousel-block" key={index}>
+          {data?.textLink?.items.map((key, item) => (
+            <div className="text-link-carousel-block" key={key}>
               <div className="text-link-carousel-block-content">
                 <a href={'' + item?.link?.[0]?.['@id']}>{item.text}</a>
               </div>

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclCarouselView.jsx

@@ -1,15 +1,16 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { withRouter } from 'react-router';
-import loadable from '@loadable/component';
-import { RenderBlocks } from '@plone/volto/components';
-import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 import './custom.less';
-import cx from 'classnames';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import '@eeacms/volto-tabs-block/less/carousel.less';
+
+import React from 'react';
+import { RenderBlocks } from '@plone/volto/components';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import cx from 'classnames';
+import loadable from '@loadable/component';
+import { withRouter } from 'react-router';
+import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 const Slider = loadable(() => import('react-slick'));
 
 const View = (props) => {
@@ -32,7 +33,7 @@ const View = (props) => {
     speed: 2000,
     fade: true,
     cssEase: 'linear',
-    autoplay: false,
+    autoplay: true,
     autoplaySpeed: 5000,
     beforeChange: (oldIndex, index) => {
       setActiveTab(tabsList[index]);

package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx

@@ -0,0 +1,329 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/**
+ * CLMSCartContent container.
+ * @module components/CLMSDownloadCartView/CLMSCartContent
+ */
+
+import React, { useEffect, useState } from 'react';
+import {
+  getCartObjectFromMapviewer,
+  getCartObjectFromPrepackaged,
+  getDownloadToolPostBody,
+} from './cartUtils';
+import {
+  getDatasetsByUid,
+  getDownloadtool,
+  getFormatConversionTable,
+  getProjections,
+  postDownloadtool,
+} from '../../actions';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { CART_SESSION_KEY } from '@eeacms/volto-clms-utils/cart/useCartState';
+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 { cleanDuplicatesEntries } from '@eeacms/volto-clms-utils/utils';
+import { getAvailableConversion } from './conversion';
+import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
+
+const CLMSCartContent = (props) => {
+  const dispatch = useDispatch();
+  const { cart, removeCartItem } = 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 datasets = useSelector((state) => state.datasetsByUid.datasets.items);
+  const formatConversionTable = useSelector(
+    (state) => state.downloadtool.format_conversion_table_in_progress,
+  );
+  const projections = useSelector(
+    (state) => state.downloadtool.projections_in_progress,
+  );
+
+  const [cartItems, setCartItems] = useState([]);
+  const [localSessionCart, setLocalSessionCart] = useState([]);
+
+  useEffect(() => {
+    dispatch(getProjections());
+    dispatch(getFormatConversionTable());
+  }, [dispatch]);
+
+  useEffect(() => {
+    const CART_SESSION_USER_KEY = CART_SESSION_KEY.concat(`_${user_id}`);
+    setLocalSessionCart(
+      JSON.parse(localStorage.getItem(CART_SESSION_USER_KEY)) || [],
+    );
+  }, [user_id]);
+
+  useEffect(() => {
+    if (localSessionCart?.length !== 0) {
+      const uidsList = [
+        ...new Set(localSessionCart.map((item) => item.UID || item.id)),
+      ];
+      dispatch(getDatasetsByUid(uidsList));
+    }
+  }, [localSessionCart, dispatch]);
+
+  useEffect(() => {
+    if (datasets?.length > 0) {
+      concatRequestedCartItem();
+    }
+  }, [datasets]);
+
+  function concatRequestedCartItem() {
+    localSessionCart.forEach((localItem) => {
+      const requestedItem = datasets.find(
+        (requestedItem) => requestedItem.UID === localItem.UID,
+      );
+      if (requestedItem) {
+        const file_data = requestedItem?.downloadable_files?.items.find(
+          (item) => item['@id'] === localItem.file_id,
+        );
+        if (file_data) {
+          cartItems.push(
+            getCartObjectFromPrepackaged(file_data, requestedItem),
+          );
+          setCartItems(cleanDuplicatesEntries(cartItems));
+        } else if (localItem.area) {
+          cartItems.push(getCartObjectFromMapviewer(localItem, requestedItem));
+          setCartItems(cleanDuplicatesEntries(cartItems));
+        }
+      }
+    });
+  }
+
+  const selectAllCart = (checked) => {
+    if (checked) {
+      setCartSelection(
+        cartItems
+          .filter((item) => item.task_in_progress === false)
+          .map((item, key) => item.unique_id),
+      );
+    } else {
+      setCartSelection([]);
+    }
+  };
+
+  const selectCart = (id, checked) => {
+    if (checked) setCartSelection(cartSelection.concat(id));
+    else setCartSelection(cartSelection.filter((arr_id) => arr_id !== id));
+  };
+
+  const getSelectedCartItems = () => {
+    return cartItems.filter(
+      (item) => cartSelection.indexOf(item.unique_id) > -1,
+    );
+  };
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const setCartItemInProgress = (in_progress_unique_ids) => {
+    let started_processing_items = cartItems.filter((r) =>
+      in_progress_unique_ids.includes(r['unique_id']),
+    );
+    started_processing_items.forEach((item) => {
+      if (item['unique_id']) {
+        removeCartItem(item['unique_id'], user_id);
+        dispatch(getFormatConversionTable());
+        dispatch(getDownloadtool());
+      }
+    });
+  };
+
+  useEffect(() => {
+    setCartItemInProgress(post_download_in_progress['unique_ids']);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [post_download_in_progress]);
+
+  useEffect(() => {
+    const array_ids = cart?.map((item) => item.unique_id);
+    const newCart = cartItems.filter((item) =>
+      array_ids.includes(item.unique_id),
+    );
+    setCartItems(newCart);
+  }, [cart]);
+
+  function startDownloading() {
+    let selectedItems = getSelectedCartItems();
+    const body = getDownloadToolPostBody(selectedItems);
+    const unique_ids = selectedItems.map((item) => item.unique_id);
+    dispatch(postDownloadtool(body, unique_ids));
+  }
+  const setProjectionValue = (unique_id, value) => {
+    const objIndex = cartItems.findIndex((obj) => obj.unique_id === unique_id);
+    cartItems[objIndex].projection = value;
+    setCartItems([...cartItems]);
+  };
+  return (
+    <>
+      {localSessionCart?.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
+                        }
+                      />
+                    </div>
+                  </div>
+                </th>
+                <th>Name</th>
+                <th>Source</th>
+                <th>Area</th>
+                {/* <th>Year</th>
+                <th>Resolution</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 || '-'}</td>
+                    {/* <td>{item.year || '-'}</td>
+                    <td>{item.resolution || '-'}</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 ||
+                            setProjectionValue(item.unique_id, projections[0])
+                          }
+                          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>
+        </div>
+      ) : (
+        <h2 style={{ textAlign: 'center' }}>Empty cart</h2>
+      )}
+      {localSessionCart?.length !== 0 && (
+        <CclButton
+          onClick={() => startDownloading()}
+          disabled={cartSelection.length === 0}
+        >
+          Start downloading
+        </CclButton>
+      )}
+    </>
+  );
+};
+
+export default CLMSCartContent;