@eeacms/volto-clms-theme 1.1.39 → 1.1.40

package/CHANGELOG.md

@@ -4,7 +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.39](https://github.com/eea/volto-clms-theme/compare/1.1.38...1.1.39) - 11 September 2023
+### [1.1.40](https://github.com/eea/volto-clms-theme/compare/1.1.39...1.1.40) - 14 September 2023
+
+#### :rocket: New Features
+
+- feat: cart addition modal text modifications [Ion Lizarazu - [`bf93cf5`](https://github.com/eea/volto-clms-theme/commit/bf93cf5f336cc1e905dd444b17799bd2841b1c38)]
+
+#### :bug: Bug Fixes
+
+- fix: useCase card style [Ion Lizarazu - [`6ac7e36`](https://github.com/eea/volto-clms-theme/commit/6ac7e360066b9f55614b59ea4a102a150c7f00ba)]
+
+#### :hammer_and_wrench: Others
+
+- s/CLMS portal/CLMS website [Mikel Larreategi - [`76a17d7`](https://github.com/eea/volto-clms-theme/commit/76a17d7f2ffca88c8841a85315bbac8d8324af0c)]
+- remove warnings [Ion Lizarazu - [`531db38`](https://github.com/eea/volto-clms-theme/commit/531db382e69cef045486d0067788307abf10a8e4)]
+- jest tests [Ion Lizarazu - [`b5e7409`](https://github.com/eea/volto-clms-theme/commit/b5e7409a24e80cebcfed79b467af437cde70f023)]
+- add test [Ion Lizarazu - [`ab76914`](https://github.com/eea/volto-clms-theme/commit/ab76914e901ce9e31faa5f32762f3e13cd157dae)]
+- mv CartIconCounter [Ion Lizarazu - [`8fa987f`](https://github.com/eea/volto-clms-theme/commit/8fa987fdf652912233eab4e78ec17a30a662ab73)]
+### [1.1.39](https://github.com/eea/volto-clms-theme/compare/1.1.38...1.1.39) - 12 September 2023
 
 #### :hammer_and_wrench: Others
 

package/package.json

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

@@ -13,8 +13,6 @@ import {
   getDatasetsByUid,
   getExtraBreadcrumbItems,
   getNutsNames,
-} from '../../actions';
-import {
   getFormatConversionTable,
   getProjections,
   getDatasetTimeseries,

package/src/components/CLMSDownloadCartView/conversion.js

@@ -1,5 +1,5 @@
 export const getAvailableConversion = (conversionTable, defaultValue) => {
-  if (conversionTable) {
+  if (conversionTable && Object.keys(conversionTable).length > 0) {
     if (
       conversionTable[defaultValue] === undefined ||
       conversionTable[defaultValue] === null

package/src/components/CLMSProfileView/CLMSApiTokensView.jsx

@@ -46,7 +46,7 @@ const messages = defineMessages({
   description: {
     id: 'descripton',
     defaultMessage:
-      'API tokens are used for machine-to-machine communication with the CLMS portal API. You need to create a new API token for each application in wich you need to use the CLMS portal API. In this screen you can create a new API token, check the list of your tokens and also delete those tokens.',
+      'API tokens are used for machine-to-machine communication with the CLMS website API. You need to create a new API token for each application in wich you need to use the CLMS website API. In this screen you can create a new API token, check the list of your tokens and also delete those tokens.',
   },
   createTitle: {
     id: 'create title',

package/src/components/CLMSProfileView/CLMSDeleteProfileView.jsx

@@ -89,7 +89,7 @@ export const CLMSDeleteProfileView = (props) => {
                     />
                   </h1>
                   This action will delete your profile and your subscription
-                  settings from the CLMS portal.
+                  settings from the CLMS website.
                   <br />
                   <br />
                 </div>

package/src/components/CartIconCounter/CartIconCounter.jsx

@@ -0,0 +1,190 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Icon } from '@plone/volto/components';
+import { 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 {
+  getDatasetTimeseries,
+  getNutsNames,
+  getDatasetsByUid,
+} from '@eeacms/volto-clms-theme/actions';
+import { getCartItems } from '@eeacms/volto-clms-utils/actions';
+import { Link } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export const onlyInLeft = (left, right, compareFunction) =>
+  left.filter(
+    (leftValue) =>
+      !right.some((rightValue) => compareFunction(leftValue, rightValue)),
+  );
+
+export const CartIconCounter = () => {
+  const datasetTimeseries = useSelector((state) => state.datasetTimeseries);
+  const nutsnames = useSelector((state) => state.nutsnames);
+  const datasetsByUid = useSelector((state) => state.datasetsByUid);
+  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 [cartDiffItems, setCartDiffItems] = useState([]);
+  const [hasTimeseries, setHasTimeseries] = useState(false);
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(getCartItems(user_id));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user_id]);
+
+  useEffect(() => {
+    cartDiffItems.forEach((newItem) => {
+      if (
+        !datasetTimeseries.loading &&
+        datasetTimeseries?.datasets[newItem.UID] === undefined
+      ) {
+        dispatch(getDatasetTimeseries(newItem.UID));
+      }
+      if (newItem.area?.type) {
+        dispatch(getNutsNames(newItem.area?.value));
+        dispatch(getDatasetsByUid(newItem.UID));
+      }
+    });
+    return () => {};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cartDiffItems]);
+
+  useEffect(() => {
+    let hasTS = false;
+    if (datasetTimeseries.datasets) {
+      cartDiffItems.forEach((diffItem) => {
+        if (
+          datasetTimeseries.datasets[diffItem.UID] &&
+          datasetTimeseries.datasets[diffItem.UID].start
+        ) {
+          hasTS = true;
+        }
+      });
+    }
+    setHasTimeseries(hasTS);
+
+    return () => {};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [datasetTimeseries.datasets, datasetTimeseries.loaded, cartDiffItems]);
+
+  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);
+      setCartDiffItems(
+        onlyInLeft(
+          cartState.items,
+          cartState_ref.current.items,
+          (l, r) => l.unique_id === r.unique_id,
+        ),
+      );
+
+      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 (
+    cartState.items && (
+      <>
+        <Popup
+          context={cart_icon_ref}
+          open={showPopup}
+          position="bottom center"
+          flowing
+        >
+          <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>
+              {cartDiffItems.some((cdi) => cdi.area === '') && (
+                <p>
+                  You added{' '}
+                  <strong>
+                    {cartDiff} new prepackaged item{cartDiff > 1 ? 's' : ''}
+                  </strong>{' '}
+                  to the cart.
+                </p>
+              )}
+              {datasetsByUid.loaded &&
+                nutsnames.loaded &&
+                cartDiffItems.map((cdi, key) => {
+                  const ddata = datasetsByUid.loaded
+                    ? datasetsByUid?.datasets?.items.find(
+                        (d) => d.UID === cdi.UID,
+                      )
+                    : {};
+                  return (
+                    <p key={key}>
+                      <strong>Name:</strong> {ddata?.title} <br />
+                      <strong>Area:</strong>{' '}
+                      {nutsnames?.nutsnames?.[cdi?.area?.value]}
+                    </p>
+                  );
+                })}
+              {hasTimeseries && (
+                <>
+                  <br />
+                  Click on Go to cart to select time interval.
+                </>
+              )}
+            </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>
+      </>
+    )
+  );
+};
+
+export default CartIconCounter;

package/src/components/CartIconCounter/CartIconCounter.test.jsx

@@ -0,0 +1,141 @@
+import { onlyInLeft, CartIconCounter } from './CartIconCounter';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import renderer from 'react-test-renderer';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('onlyInLeft', () => {
+  // Returns an array with items that are only in the left array, based on a compare function
+  it('should return an array with items that are only in the left array', () => {
+    const left = [
+      { id: 1, name: 'Item 1' },
+      { id: 2, name: 'Item 2' },
+      { id: 3, name: 'Item 3' },
+    ];
+    const right = [
+      { id: 2, name: 'Item 2' },
+      { id: 4, name: 'Item 4' },
+    ];
+    const compareFunction = (leftValue, rightValue) =>
+      leftValue.id === rightValue.id;
+
+    const result = onlyInLeft(left, right, compareFunction);
+
+    expect(result).toEqual([
+      { id: 1, name: 'Item 1' },
+      { id: 3, name: 'Item 3' },
+    ]);
+  });
+  // Should return an array with items that are only in the left array, based on a compare function
+  it('should return an array with items that are only in the left array', () => {
+    const left = [
+      { id: 1, name: 'Item 1' },
+      { id: 2, name: 'Item 2' },
+      { id: 3, name: 'Item 3' },
+    ];
+    const right = [
+      { id: 2, name: 'Item 2' },
+      { id: 4, name: 'Item 4' },
+    ];
+    const compareFunction = (leftValue, rightValue) =>
+      leftValue.id === rightValue.id;
+
+    const result = onlyInLeft(left, right, compareFunction);
+
+    expect(result).toEqual([
+      { id: 1, name: 'Item 1' },
+      { id: 3, name: 'Item 3' },
+    ]);
+  });
+  // should return an empty array if left array is empty
+  it('should return an empty array when left array is empty', () => {
+    const left = [];
+    const right = [
+      { id: 2, name: 'Item 2' },
+      { id: 4, name: 'Item 4' },
+    ];
+    const compareFunction = (leftValue, rightValue) =>
+      leftValue.id === rightValue.id;
+
+    const result = onlyInLeft(left, right, compareFunction);
+
+    expect(result).toEqual([]);
+  });
+
+  // should return the left array if right array is empty
+  it('should return the left array when the right array is empty', () => {
+    const left = [
+      { id: 1, name: 'Item 1' },
+      { id: 2, name: 'Item 2' },
+      { id: 3, name: 'Item 3' },
+    ];
+    const right = [];
+    const compareFunction = (leftValue, rightValue) =>
+      leftValue.id === rightValue.id;
+
+    const result = onlyInLeft(left, right, compareFunction);
+
+    expect(result).toEqual(left);
+  });
+  // should return an array with items that are only in the left array
+  it('should return an array with items that are only in the left array', () => {
+    const left = [
+      { id: 1, name: 'Item 1' },
+      { id: 2, name: 'Item 2' },
+      { id: 3, name: 'Item 3' },
+    ];
+    const right = [
+      { id: 2, name: 'Item 2' },
+      { id: 4, name: 'Item 4' },
+    ];
+    const compareFunction = (leftValue, rightValue) =>
+      leftValue.id === rightValue.id;
+
+    const result = onlyInLeft(left, right, compareFunction);
+
+    expect(result).toEqual([
+      { id: 1, name: 'Item 1' },
+      { id: 3, name: 'Item 3' },
+    ]);
+  });
+});
+
+const mockStore = configureStore();
+describe('CartIconCounter', () => {
+  // Cart icon displays number of items in cart
+  it('should display the correct number of items in the cart', () => {
+    const store = mockStore({
+      cart_items: {
+        items: ['one', 'two', 'three'],
+      },
+      users: {
+        user: {
+          id: 'g678gfd678',
+        },
+      },
+      datasetTimeseries: {
+        datasets: [],
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    // Render the component
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <CartIconCounter />
+        </MemoryRouter>
+      </Provider>,
+    );
+    // const component = mount(<CartIconCounter />);
+
+    // Expect the component toBeDefined
+    expect(component).toBeDefined();
+    expect(component.toJSON().children[0].children[0]).toEqual('3');
+  });
+});

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

@@ -6,12 +6,9 @@
  */
 
 import { FormattedMessage, injectIntl } from 'react-intl';
-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 { Logo, Navigation, SearchWidget } from '@plone/volto/components';
+import React, { Component } from 'react';
+import { connect, useSelector } from 'react-redux';
 
 import { BodyClass } from '@plone/volto/helpers';
 // IMPORT isnt nedded until translations are created
@@ -26,91 +23,7 @@ import { getCartItems } from '@eeacms/volto-clms-utils/actions';
 import { getUser } from '@plone/volto/actions';
 import jwtDecode from 'jwt-decode';
 
-const CartIconCounter = (props) => {
-  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 (
-    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>
-      </>
-    )
-  );
-};
+import CartIconCounter from '@eeacms/volto-clms-theme/components/CartIconCounter/CartIconCounter';
 
 const HeaderDropdown = ({ user }) => {
   const intl = useSelector((state) => state.intl);

package/theme/site/extras/custom.variables

@@ -0,0 +1,3 @@
+@listingCardPadding: 0;
+@imageMinWidth: 400px;
+@imageMaxHeight: 335px;

package/theme/site/extras/styles.less

@@ -27,18 +27,18 @@ hr {
 }
 
 hr
-  + body:not(.contenttype-lrf:not(.section-cart):not(.section-profile):not(.section-newsletter-notification-subscription):not(.section-newsletter-notification-unsubscription):not(.section-logout))
-  main {
++ body:not(.contenttype-lrf:not(.section-cart):not(.section-profile):not(.section-newsletter-notification-subscription):not(.section-newsletter-notification-unsubscription):not(.section-logout))
+main {
   margin-bottom: 2rem;
 }
 
 body:not(.contenttype-lrf:not(.section-cart):not(.section-profile):not(.section-newsletter-notification-subscription):not(.section-newsletter-notification-unsubscription):not(.section-logout))
-  main:not(.map-main) {
+main:not(.map-main) {
   min-height: 70vh;
 }
 
 .map-body:not(.contenttype-lrf:not(.section-cart):not(.section-profile):not(.section-newsletter-notification-subscription):not(.section-newsletter-notification-unsubscription):not(.section-logout))
-  main {
+main {
   margin-bottom: 0;
 }
 
@@ -169,77 +169,77 @@ body.contenttype-lrf:not(.section-cart):not(.profilecart) main .ccl-container {
 }
 
 body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-  main
-  .ccl-container {
+main
+.ccl-container {
   max-width: 100%;
   padding: 0;
 }
 
 body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-  main
-  .ccl-container
-  .cont-w-25 {
+main
+.ccl-container
+.cont-w-25 {
   max-width: 100%;
   flex: 0 0 100%;
 }
 
 body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-  main
-  .ccl-container
-  .cont-w-50 {
+main
+.ccl-container
+.cont-w-50 {
   max-width: 100%;
   flex: 0 0 100%;
 }
 
 body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-  main
-  .ccl-container
-  .cont-w-75 {
+main
+.ccl-container
+.cont-w-75 {
   max-width: 100%;
   flex: 0 0 100%;
 }
 @media (min-width: 576px) {
   body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-    main
-    .ccl-container {
+  main
+  .ccl-container {
     max-width: 540px;
   }
 }
 @media (min-width: 768px) {
   body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-    main
-    .ccl-container {
+  main
+  .ccl-container {
     max-width: 720px;
   }
 
   body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-    main
-    .ccl-container
-    .cont-w-25 {
+  main
+  .ccl-container
+  .cont-w-25 {
     max-width: 30%;
     flex: 0 0 30%;
   }
 
   body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-    main
-    .ccl-container
-    .cont-w-50 {
+  main
+  .ccl-container
+  .cont-w-50 {
     max-width: 50%;
     flex: 0 0 50%;
   }
 
   body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-    main
-    .ccl-container
-    .cont-w-75 {
+  main
+  .ccl-container
+  .cont-w-75 {
     max-width: 70%;
     flex: 0 0 70%;
   }
 
   body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-    main
-    .ccl-container
-    .cont-o-1 {
+  main
+  .ccl-container
+  .cont-o-1 {
     order: 1;
   }
 
@@ -253,30 +253,30 @@ body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
 }
 @media (min-width: 992px) {
   body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-    main
-    .ccl-container {
+  main
+  .ccl-container {
     max-width: 960px;
   }
 }
 @media (min-width: 1200px) {
   body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-    main
-    .ccl-container {
+  main
+  .ccl-container {
     max-width: 1127px;
   }
 
   body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-    main
-    .ccl-container
-    .cont-w-25 {
+  main
+  .ccl-container
+  .cont-w-25 {
     max-width: 25%;
     flex: 0 0 25%;
   }
 
   body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
-    main
-    .ccl-container
-    .cont-w-75 {
+  main
+  .ccl-container
+  .cont-w-75 {
     max-width: 75%;
     flex: 0 0 75%;
   }
@@ -705,6 +705,23 @@ body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
   margin: 0 auto !important;
 }
 
+.ui.fluid.card.u-card .extra.content a.ui.button {
+  display: inline-block;
+  padding: 0.3rem 1rem;
+  margin: 0;
+  appearance: none;
+  background: none;
+  color: @clmsGreen;
+  color: #a0b128;
+  cursor: pointer;
+  font-size: 0.85rem;
+  line-height: 1.5;
+  text-align: center;
+  text-decoration: none;
+  transition: all 0.3s ease-out;
+  vertical-align: middle;
+}
+
 /* Search */
 .search-results {
   margin-bottom: 2rem;