@eeacms/volto-clms-theme 1.1.25 → 1.1.26

package/CHANGELOG.md

@@ -4,6 +4,14 @@ 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.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

package/package.json

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