@eeacms/volto-clms-theme 1.1.24 → 1.1.26

package/CHANGELOG.md

@@ -4,11 +4,24 @@ 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.1.24](https://github.com/eea/volto-clms-theme/compare/1.1.23...1.1.24) - 12 July 2023
+### [1.1.26](https://github.com/eea/volto-clms-theme/compare/1.1.25...1.1.26) - 13 July 2023
+
+#### :hammer_and_wrench: Others
+
+- add a popover referencing the cart icon when new items are added to the cart [ionlizarazu - [`79a4ede`](https://github.com/eea/volto-clms-theme/commit/79a4ede01bce272c1cd97a1944720c2498819247)]
+- remove toast when an element is added to the cart [ionlizarazu - [`7b43119`](https://github.com/eea/volto-clms-theme/commit/7b43119ae68397c5057247662ca88e11260df51c)]
+- return statement for useEffect in CLMSDownloadCartView [ionlizarazu - [`4e9c523`](https://github.com/eea/volto-clms-theme/commit/4e9c523e15e62c0b914b8d02e2d8fc7440e77db3)]
+- add aproximation to new cart item popup [ionlizarazu - [`a322db3`](https://github.com/eea/volto-clms-theme/commit/a322db3fe1d146e841630280f5df4054948f2049)]
+### [1.1.25](https://github.com/eea/volto-clms-theme/compare/1.1.24...1.1.25) - 12 July 2023
 
 #### :hammer_and_wrench: Others
 
-- render accordions inside the dataset [Mikel Larreategi - [`8d284da`](https://github.com/eea/volto-clms-theme/commit/8d284da2592e3888e7d81a311f22d1f5eb190e7f)]
+- fix removing the last cart item [ionlizarazu - [`ae79754`](https://github.com/eea/volto-clms-theme/commit/ae79754fc5618ec759d3264f0d3e7f373cb2b276)]
+- add cart pagination location reference [ionlizarazu - [`d1c0813`](https://github.com/eea/volto-clms-theme/commit/d1c08138854044a3a6d18351cbdbc38bdb04d506)]
+- change accordion id [Mikel Larreategi - [`0aa3ad3`](https://github.com/eea/volto-clms-theme/commit/0aa3ad3722cc406a7d3f37855865d5e41f517b9e)]
+- change sorting [Mikel Larreategi - [`abb6a67`](https://github.com/eea/volto-clms-theme/commit/abb6a677b1da7a65337b8088a8e1d989ae026673)]
+### [1.1.24](https://github.com/eea/volto-clms-theme/compare/1.1.23...1.1.24) - 12 July 2023
+
 ### [1.1.23](https://github.com/eea/volto-clms-theme/compare/1.1.22...1.1.23) - 12 July 2023
 
 ### [1.1.22](https://github.com/eea/volto-clms-theme/compare/1.1.21...1.1.22) - 10 July 2023
@@ -42,7 +55,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - remove NUTS text for area naming in the cart [ionlizarazu - [`062e0a3`](https://github.com/eea/volto-clms-theme/commit/062e0a375f5352bc13c18ff7ec33fad4bcc59f2f)]
 - dependencies [ionlizarazu - [`405ef96`](https://github.com/eea/volto-clms-theme/commit/405ef96090fe7bd4af73a49d3285a92fad712e3b)]
-- yarn.lock [ionlizarazu - [`7132119`](https://github.com/eea/volto-clms-theme/commit/71321195c4dd4fceed67f2f0872f3e24bba61c17)]
 - volto-blocks-grid module mapping [ionlizarazu - [`4fec3ca`](https://github.com/eea/volto-clms-theme/commit/4fec3cabc437322ad92ed90d682250bd123ccaaf)]
 - volto-blocks-grid v7.0.2 [ionlizarazu - [`2557e60`](https://github.com/eea/volto-clms-theme/commit/2557e6039d3cea33ca0bd11a0a3ef4764c611f78)]
 - remove styling from teaser block [ionlizarazu - [`879e684`](https://github.com/eea/volto-clms-theme/commit/879e684057c88f52f60f0fa54cbaa155c7d14688)]
@@ -130,7 +142,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Remove alpha testing version [valentinab25 - [`b4cbf65`](https://github.com/eea/volto-clms-theme/commit/b4cbf6557fbc67f7fc4cea5aa2cb19804f3d7e3c)]
 
 #### :hammer_and_wrench: Others
 
@@ -1329,7 +1340,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - related products and datasets added to news and meeting views and login-plone route created [Unai - [`5704a1a`](https://github.com/eea/volto-clms-theme/commit/5704a1a766148746162b60efaf232ea90dc20cf4)]
-- Revert "[JENKINS] Use eeacms/plone-backend and Volto alpha version- Refs #151967" [Mikel Larreategi - [`46eb694`](https://github.com/eea/volto-clms-theme/commit/46eb69415280a3c982405299135027ae4221426a)]
 - sort items according to the lowercased label and put those with special meaning at the end [Mikel Larreategi - [`6410abe`](https://github.com/eea/volto-clms-theme/commit/6410abe096f60dcad54dced2026c9df9b7946d68)]
 - lint fix [Unai - [`1264a7a`](https://github.com/eea/volto-clms-theme/commit/1264a7adfe8d679fea1bd821ad087add20f4271d)]
 - footer newsletter subscription change, global search maxLength change from 8000 to 200 and /login design change [Unai - [`a09d24a`](https://github.com/eea/volto-clms-theme/commit/a09d24adbb6fa053fb2a2cc0071506b906593b42)]
@@ -1480,7 +1490,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - search block new features [ionlizarazu - [`8e814cb`](https://github.com/eea/volto-clms-theme/commit/8e814cbd359782540c21fe37b37ef146d331f0d6)]
 - language selector cookie management [ionlizarazu - [`1385ac9`](https://github.com/eea/volto-clms-theme/commit/1385ac95795702206d3623ba6e780faa43a89e0a)]
 - toolbar cookie management [ionlizarazu - [`5c23200`](https://github.com/eea/volto-clms-theme/commit/5c23200790b20e1d4f1bc966463c37bf4c808f47)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`0316a0d`](https://github.com/eea/volto-clms-theme/commit/0316a0d8b6fb0fa14af13002415f3c95d9f8ede3)]
 ### [1.0.84](https://github.com/eea/volto-clms-theme/compare/1.0.83...1.0.84) - 18 March 2022
 
 #### :hammer_and_wrench: Others
@@ -2385,13 +2394,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - replace @collective/volto-dropdownmenu with volto-dropdownmenu [ionlizarazu - [`07f004f`](https://github.com/eea/volto-clms-theme/commit/07f004fe0219e403fb51bc045c83d34f3b981f76)]
-- yarn.lock [ionlizarazu - [`fe1ca04`](https://github.com/eea/volto-clms-theme/commit/fe1ca04889d29fe7b653db4c69af2751b84b8a1a)]
 - add NODE_ENV parameter [ionlizarazu - [`101f27c`](https://github.com/eea/volto-clms-theme/commit/101f27c25b8fbd192e1b11865e95cf5ffee08c1b)]
 - upgrade volto-dropdownmenu version [ionlizarazu - [`2081855`](https://github.com/eea/volto-clms-theme/commit/2081855301f4c708776e0dbab39db143cee00dbc)]
 - HomeSearch block missing url behaviour [ionlizarazu - [`d20a378`](https://github.com/eea/volto-clms-theme/commit/d20a378ce3f254b8343692348f314bf281974542)]
 - babel configuration [ionlizarazu - [`203ea2d`](https://github.com/eea/volto-clms-theme/commit/203ea2de07f99ca3403e4ca220ca74d7ce69b61d)]
 - prettier [ionlizarazu - [`e79e26b`](https://github.com/eea/volto-clms-theme/commit/e79e26bf2fa40ba7b4eb53a24dabd87928221c28)]
-- add yarn lock [ionlizarazu - [`e1ab28b`](https://github.com/eea/volto-clms-theme/commit/e1ab28b060d5a74431c368b0de82a68dabce1eab)]
 - Jenkinsfile cypress test [ionlizarazu - [`b385d65`](https://github.com/eea/volto-clms-theme/commit/b385d65986f717c60f8c434a08fc11b829d08eb4)]
 - cypress [ionlizarazu - [`a243cf0`](https://github.com/eea/volto-clms-theme/commit/a243cf0182fa3dd113c16ff495c71e310252d83b)]
 - some fixes [ionlizarazu - [`046279b`](https://github.com/eea/volto-clms-theme/commit/046279b9d05bea8a64eca03eed493e02621534c9)]

package/package.json

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

package/src/components/CLMSDatasetDetailView/DataSetInfoContent.jsx

@@ -47,6 +47,7 @@ const DataSetInfoContent = (props) => {
             path: location.pathname,
             b_size: 99999,
             metadata_fields: ['blocks', 'blocks_layout'],
+            sort_on: 'getObjPositionInParent',
           },
           'accordions',
         ),
@@ -291,10 +292,10 @@ const DataSetInfoContent = (props) => {
                 <Accordion fluid styled>
                   <Accordion.Title
                     as={'h2'}
-                    onClick={() => handleClick({ index: 1 })}
+                    onClick={() => handleClick({ index: 98 })}
                     className={'accordion-title align-arrow-right'}
                   >
-                    {activeIndex.includes(1) ? (
+                    {activeIndex.includes(98) ? (
                       <Icon
                         name={iconName(data, titleIcons.opened)}
                         size="24px"
@@ -307,7 +308,7 @@ const DataSetInfoContent = (props) => {
                     )}
                     <span>Technical documents</span>
                   </Accordion.Title>
-                  <Accordion.Content active={activeIndex.includes(1)}>
+                  <Accordion.Content active={activeIndex.includes(98)}>
                     <AnimateHeight
                       animateOpacity
                       duration={500}

package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx

@@ -80,15 +80,13 @@ const CLMSCartContent = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [post_download_in_progress]);
 
-  const use_p = useFilteredPagination(cartItems);
+  const use_p = useFilteredPagination(cartItems, 10, 'cart');
   const p_f = use_p.functions;
   const p_data = use_p.data;
   const { pagination, currentPage, paginationSize, dataList } = p_data;
 
   useEffect(() => {
-    if (cartItems.length > 0) {
-      p_f.setOriginalDataList(cartItems);
-    }
+    p_f.setOriginalDataList(cartItems);
   }, [cartItems]);
   useEffect(() => {
     const array_ids =
@@ -455,6 +453,12 @@ const CLMSCartContent = (props) => {
                               <button
                                 onClick={() => {
                                   removeCartItem(item.unique_id);
+                                  if (
+                                    pagination.length === 1 &&
+                                    currentPage > 1
+                                  ) {
+                                    p_f.setCurrentPage(currentPage - 1);
+                                  }
                                 }}
                                 style={{
                                   backgroundColor: 'transparent',

package/src/components/CLMSDownloadCartView/CLMSDownloadCartView.jsx

@@ -44,6 +44,7 @@ const CLMSDownloadCartView = (props) => {
   useEffect(() => {
     dispatch(getProjections());
     dispatch(getFormatConversionTable());
+    return () => {};
   }, [dispatch]);
 
   useEffect(() => {
@@ -57,9 +58,7 @@ const CLMSDownloadCartView = (props) => {
     );
 
     // returned function will be called on component unmount
-    return () => {
-      dispatch(getExtraBreadcrumbItems([]));
-    };
+    return () => {};
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.location.pathname]);
 
@@ -86,6 +85,7 @@ const CLMSDownloadCartView = (props) => {
     if (localsessionNutsIDList.length > 0) {
       dispatch(getNutsNames(localsessionNutsIDList));
     }
+    return () => {};
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [cart, dispatch]);
 

package/src/components/CclDownloadTable/CclDownloadTable.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
-import { toast } from 'react-toastify';
 import {
   Button,
   Checkbox,
@@ -10,7 +9,7 @@ import {
   Segment,
 } from 'semantic-ui-react';
 
-import { Icon, Toast } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import paginationLeftSVG from '@plone/volto/icons/left-key.svg';
 import paginationRightSVG from '@plone/volto/icons/right-key.svg';
@@ -211,15 +210,7 @@ function CclDownloadTable(props) {
         file: item.file,
         unique_id: item.unique_id,
       }));
-    await addCartItem(selectedCartItems).then(() => {
-      toast.success(
-        <Toast
-          success
-          title={intl.formatMessage(messages.success)}
-          content={intl.formatMessage(messages.added_to_cart)}
-        />,
-      );
-    });
+    await addCartItem(selectedCartItems);
   };
 
   const clearSelection = () => {

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

@@ -6,9 +6,12 @@
  */
 
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { Logo, Navigation, SearchWidget } from '@plone/volto/components';
-import React, { Component, useEffect } from 'react';
+import { Logo, Navigation, SearchWidget, Icon } from '@plone/volto/components';
+import React, { Component, useEffect, useRef, useState } from 'react';
 import { connect, useDispatch, useSelector } from 'react-redux';
+import { Popup, Segment, Divider, Message } from 'semantic-ui-react';
+import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
+import clearSVG from '@plone/volto/icons/clear.svg';
 
 import { BodyClass } from '@plone/volto/helpers';
 // IMPORT isnt nedded until translations are created
@@ -24,23 +27,87 @@ import { getUser } from '@plone/volto/actions';
 import jwtDecode from 'jwt-decode';
 
 const CartIconCounter = (props) => {
-  const cart = useSelector((state) => state.cart_items.items);
+  const cartState = useSelector((state) => state.cart_items);
+  const cartState_ref = useRef(cartState);
+  const cart_icon_ref = React.useRef();
   const intl = useSelector((state) => state.intl);
   const user_id = useSelector((state) => state.users.user.id);
+  const [showPopup, setshowPopup] = useState(false);
+  const [cartDiff, setCartDiff] = useState(0);
   const dispatch = useDispatch();
   useEffect(() => {
     dispatch(getCartItems(user_id));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [user_id]);
+  useEffect(() => {
+    if (
+      cartState_ref.current.set.loading &&
+      cartState.set.loaded &&
+      cartState.items.length >= cartState_ref.current.items.length
+    ) {
+      setCartDiff(cartState.items.length - cartState_ref.current.items.length);
+      window.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: 'smooth',
+      });
+      !showPopup && setTimeout(() => setshowPopup(true), 900);
+      setTimeout(() => setshowPopup(false), 11000);
+    }
+    cartState_ref.current = cartState;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cartState]);
   return (
-    cart && (
-      <Link to={`/${intl.locale}/cart`} className="header-login-link">
-        <FontAwesomeIcon
-          icon={['fas', 'shopping-cart']}
-          style={{ marginRight: '0.25rem', maxWidth: '1.5rem' }}
-        />
-        <strong>{cart?.length}</strong>
-      </Link>
+    cartState.items && (
+      <>
+        <Popup
+          context={cart_icon_ref}
+          open={showPopup}
+          position="bottom center"
+        >
+          <Segment
+            attached="top"
+            style={{ padding: 0, display: 'flex', justifyContent: 'flex-end' }}
+          >
+            <Icon
+              onClick={() => setshowPopup(false)}
+              name={clearSVG}
+              size={20}
+              style={{ cursor: 'pointer' }}
+            />
+          </Segment>
+          <Divider horizontal style={{ margin: 0 }}>
+            My cart
+          </Divider>
+          {cartDiff > 0 ? (
+            <Message positive>
+              You added <strong>{cartDiff} new items</strong> to the cart
+            </Message>
+          ) : (
+            <Message warning>
+              The items you tried to add were already added
+            </Message>
+          )}
+          <CclButton
+            mode="filled"
+            to={`/${intl.locale}/cart`}
+            style={{ width: '100%' }}
+          >
+            Go to cart
+          </CclButton>
+        </Popup>
+        <Link
+          to={`/${intl.locale}/cart`}
+          className="header-login-link"
+          ref={cart_icon_ref}
+        >
+          <FontAwesomeIcon
+            icon={['fas', 'shopping-cart']}
+            style={{ marginRight: '0.25rem', maxWidth: '1.5rem' }}
+          />
+          <strong>{cartState?.items?.length}</strong>
+        </Link>
+      </>
     )
   );
 };
@@ -263,7 +330,7 @@ class Header extends Component {
                   <li className="header-vertical-line">
                     <div>|</div>
                   </li>
-                  {(this.props.user.id && (
+                  {(this.props.user.id && this.state.mobileMenuOpen && (
                     <>
                       <li className="header-dropdown">
                         <HeaderDropdown user={this.props.user} />