@eeacms/volto-clms-theme 1.1.25 → 1.1.27

package/CHANGELOG.md

@@ -4,6 +4,19 @@ 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.27](https://github.com/eea/volto-clms-theme/compare/1.1.26...1.1.27) - 14 July 2023
+
+#### :hammer_and_wrench: Others
+
+- bump dependency [Mikel Larreategi - [`2dea8b0`](https://github.com/eea/volto-clms-theme/commit/2dea8b0cebc6cbd954d4c3ed9bd111f306e5cc08)]
+### [1.1.26](https://github.com/eea/volto-clms-theme/compare/1.1.25...1.1.26) - 14 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
@@ -47,6 +60,7 @@ 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)]
@@ -134,6 +148,7 @@ 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
 
@@ -1332,6 +1347,7 @@ 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)]
@@ -1482,6 +1498,7 @@ 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
@@ -2386,11 +2403,13 @@ 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.25",
+  "version": "1.1.27",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -37,7 +37,7 @@
   "dependencies": {
     "@eeacms/volto-accordion-block": "7.0.0",
     "@eeacms/volto-arcgis-block": "*",
-    "@eeacms/volto-clms-utils": "0.1.8",
+    "@eeacms/volto-clms-utils": "0.1.9",
     "@eeacms/volto-columns-block": "6.0.2",
     "@eeacms/volto-embed": "5.0.1",
     "@eeacms/volto-metadata-block": "5.0.1",

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} />