@eeacms/volto-cca-policy 0.3.131 → 1.0.0

package/src/components/manage/Blocks/CountryMapProfile/OLView.jsx

@@ -15,9 +15,11 @@ import { makeStyles } from './mapstyle';
 import { Interactions } from './Interactions';
 import { useCountriesMetadata } from './hooks';
 import Filter from './Filter';
-import withResponsiveContainer from '../withResponsiveContainer';
-import withVisibilitySensor from '../withVisibilitySensor';
-import { addAppURL } from '@plone/volto/helpers';
+import {
+  withResponsiveContainer,
+  withVisibilitySensor,
+} from '@eeacms/volto-cca-policy/hocs';
+import { addAppURL } from '@plone/volto/helpers/Url/Url';
 
 import './styles.less';
 
@@ -92,15 +94,6 @@ const View = (props) => {
   }, [geofeatures, countries_metadata, thematicMapMode, euCountryNames, ol]);
 
   const baseUrl = props.path || props.location?.pathname || '';
-
-  // const onFeatureClick = React.useCallback(
-  //   (feature) => {
-  //     const country = feature.get('na');
-  //     // history.push(`${baseUrl}/${country.toLowerCase()}`);
-  //   },
-  //   [baseUrl, history],
-  // );
-  // console.log('thematicMapMode', thematicMapMode);
   return (
     <div className="ol-country-map">
       <Grid columns="12">

package/src/components/manage/Blocks/CountryProfileDetail/{CountryTabPane.js → CountryTabPane.jsx}

@@ -24,7 +24,7 @@ export default function CountryTabPane(props) {
         if (element.type === 'accordeon') {
           return element.value.map((accordion, index) => {
             return (
-              <Accordion className="secondary">
+              <Accordion className="secondary" key={`${indexKey}_${index}`}>
                 <Accordion.Title
                   role="button"
                   tabIndex={0}
@@ -49,7 +49,10 @@ export default function CountryTabPane(props) {
         }
         if (element.type === 'table') {
           return (
-            <div dangerouslySetInnerHTML={{ __html: element.value }}></div>
+            <div
+              key={indexKey}
+              dangerouslySetInnerHTML={{ __html: element.value }}
+            ></div>
           );
         }
 
@@ -58,8 +61,12 @@ export default function CountryTabPane(props) {
           for (let i = 0; i < element.value.length; i++) {
             _html_value += element.value[i];
           }
-          // return <table>{_html_value}</table>;
-          return <div dangerouslySetInnerHTML={{ __html: _html_value }}></div>;
+          return (
+            <div
+              key={indexKey}
+              dangerouslySetInnerHTML={{ __html: _html_value }}
+            ></div>
+          );
         }
         return null;
       })}

package/src/components/manage/Blocks/CountryProfileDetail/CountryTabPane.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { Provider } from 'react-intl-redux';
 import CountryTabPane from './CountryTabPane';
 

package/src/components/manage/Blocks/CountryProfileDetail/{View.js → View.jsx}

@@ -6,14 +6,14 @@ import { FormattedMessage } from 'react-intl';
 import './styles.less';
 
 export default function View(props) {
-  // const dataJson = JSON.parse(
-  //   props?.properties['@components']?.countryprofile?.html,
-  // );
-  const dataJson = props?.properties['@components']?.countryprofile?.html || {};
+  const dataJson =
+    props?.properties?.['@components']?.countryprofile?.html || {};
+
   const [activePanes, setActivePanes] = React.useState({});
   const isNonEN = props?.properties?.language !== 'en';
 
   const panes = [];
+
   if (dataJson?.menu) {
     dataJson.menu.forEach((element, index) => {
       panes.push({
@@ -22,10 +22,10 @@ export default function View(props) {
           <TabPane>
             <CountryTabPane
               _index={index}
-              contents={dataJson.content[index]}
+              contents={dataJson.content?.[index]}
               activePanes={activePanes}
               setActivePanes={setActivePanes}
-            ></CountryTabPane>
+            />
           </TabPane>
         ),
       });
@@ -42,35 +42,39 @@ export default function View(props) {
           />
         </Message>
       )}
+
       {dataJson.message_top ? (
         <div className="eea callout">{dataJson.message_top}</div>
       ) : null}
+
       {dataJson.top_accordeon ? (
         <div className="top-accordion">
           {dataJson.top_accordeon.map((accordion, index) => (
-            <Accordion className="secondary">
+            <Accordion className="secondary" key={accordion.title}>
               <Accordion.Title
                 role="button"
                 tabIndex={0}
-                active={activePanes['_' + index] || false}
-                onClick={(e) => {
-                  const temp = JSON.parse(JSON.stringify(activePanes));
-                  let val = temp['_' + index] || false;
-                  temp['_' + index] = !val;
-                  setActivePanes(temp);
+                active={activePanes[`_${index}`] || false}
+                onClick={() => {
+                  setActivePanes({
+                    ...activePanes,
+                    [`_${index}`]: !(activePanes[`_${index}`] || false),
+                  });
                 }}
               >
                 <span className="item-title">{accordion.title}</span>
                 <Icon className="ri-arrow-down-s-line" />
               </Accordion.Title>
+
               <Accordion.Content
-                active={activePanes['_' + index] || false}
+                active={activePanes[`_${index}`] || false}
                 dangerouslySetInnerHTML={{ __html: accordion.value }}
-              ></Accordion.Content>
+              />
             </Accordion>
           ))}
         </div>
       ) : null}
+
       <Tab
         className="secondary menu"
         panes={panes}
@@ -85,6 +89,7 @@ export default function View(props) {
           tabIndex: 0,
         }}
       />
+
       {dataJson.updated ? (
         <p>Reported updated until: {dataJson.updated}</p>
       ) : null}

package/src/components/manage/Blocks/CountryProfileDetail/View.test.jsx

@@ -1,39 +1,153 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { Provider } from 'react-intl-redux';
 import View from './View';
 
+jest.mock('./CountryTabPane', () => (props) => (
+  <div data-testid={`country-tab-pane-${props._index}`}>
+    CountryTabPane {props.contents}
+  </div>
+));
+
 const mockStore = configureStore();
 
+const renderView = (properties) => {
+  const store = mockStore({
+    userSession: { token: '1234' },
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  return render(
+    <Provider store={store}>
+      <MemoryRouter>
+        <View properties={properties} />
+      </MemoryRouter>
+    </Provider>,
+  );
+};
+
 describe('View', () => {
-  it('should render the component', () => {
-    const properties = {
+  it('renders the component', () => {
+    const { container } = renderView({
+      language: 'en',
+      '@components': {
+        countryprofile: {
+          html: {
+            menu: [],
+            content: [],
+          },
+        },
+      },
+    });
+
+    expect(container).toBeTruthy();
+  });
+
+  it('renders non-English warning message', () => {
+    renderView({
+      language: 'ro',
       '@components': {
         countryprofile: {
-          html: '{"menu":[],"content":[],"html":"","updated":"","message_top":"", "top_accordeon":""}',
+          html: {
+            menu: [],
+            content: [],
+          },
         },
       },
-    };
-    const data = { properties: properties };
-
-    const store = mockStore({
-      userSession: { token: '1234' },
-      intl: {
-        locale: 'en',
-        messages: {},
+    });
+
+    expect(
+      screen.getByText(
+        'Officially reported governmental information is only available in English',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('renders top message', () => {
+    renderView({
+      language: 'en',
+      '@components': {
+        countryprofile: {
+          html: {
+            menu: [],
+            content: [],
+            message_top: 'This is the top message',
+          },
+        },
       },
     });
 
-    const { container } = render(
-      <Provider store={store}>
-        <MemoryRouter>
-          <View {...data} />
-        </MemoryRouter>
-      </Provider>,
+    expect(screen.getByText('This is the top message')).toBeInTheDocument();
+  });
+
+  it('renders updated date', () => {
+    renderView({
+      language: 'en',
+      '@components': {
+        countryprofile: {
+          html: {
+            menu: [],
+            content: [],
+            updated: '2024-01-01',
+          },
+        },
+      },
+    });
+
+    expect(
+      screen.getByText('Reported updated until: 2024-01-01'),
+    ).toBeInTheDocument();
+  });
+
+  it('renders and opens top accordion', () => {
+    renderView({
+      language: 'en',
+      '@components': {
+        countryprofile: {
+          html: {
+            menu: [],
+            content: [],
+            top_accordeon: [
+              {
+                title: 'Accordion title',
+                value: '<p>Accordion content</p>',
+              },
+            ],
+          },
+        },
+      },
+    });
+
+    expect(screen.getByText('Accordion title')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button'));
+
+    expect(screen.getByText('Accordion content')).toBeInTheDocument();
+  });
+
+  it('renders tabs and CountryTabPane', () => {
+    renderView({
+      language: 'en',
+      '@components': {
+        countryprofile: {
+          html: {
+            menu: ['Tab one', 'Tab two'],
+            content: ['Content one', 'Content two'],
+          },
+        },
+      },
+    });
+
+    expect(screen.getByText('Tab one')).toBeInTheDocument();
+    expect(screen.getByText('Tab two')).toBeInTheDocument();
+    expect(screen.getByTestId('country-tab-pane-0')).toHaveTextContent(
+      'Content one',
     );
-    expect(container).toBeTruthy();
   });
 });

package/src/components/manage/Blocks/CountryProfileDetail/index.js

@@ -1,7 +1,6 @@
 import worldSVG from '@plone/volto/icons/world.svg';
 import Edit from './Edit';
 import View from './View';
-// import { blockAvailableInMission } from '@eeacms/volto-cca-policy/utils';
 
 export default function installCountryProfileDetailBlock(config) {
   config.blocks.blocksConfig.countryProfileDetail = {

package/src/components/manage/Blocks/DataConnectedEmbedBlock/index.js

@@ -1,12 +1,10 @@
 import { composeSchema } from '@eeacms/volto-cca-policy/schema-utils';
-// import { addLanguageParamField } from './schema';
 import DataConnectedEmbedBlockView from './DataConnectedEmbedBlockView';
 
 export default function applyConfig(config) {
   const { data_connected_embed } = config.blocks.blocksConfig;
 
   data_connected_embed.schemaEnhancer = composeSchema(
-    // addLanguageParamField,
     data_connected_embed.schemaEnhancer,
   );
   data_connected_embed.view = DataConnectedEmbedBlockView;

package/src/components/manage/Blocks/ECDEIndicators/ECDEIndicatorsView.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import superagent from 'superagent';
 import { Dropdown, Grid } from 'semantic-ui-react';
-import { searchContent } from '@plone/volto/actions';
+import { searchContent } from '@plone/volto/actions/search/search';
 import ECDEIndicator from './ECDEIndicator';
 import { useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';

package/src/components/manage/Blocks/FilterAceContent/FilterAceContentEdit.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { getVocabulary } from '@plone/volto/actions';
-import { SidebarPortal } from '@plone/volto/components';
+import { getVocabulary } from '@plone/volto/actions/vocabularies/vocabularies';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
-import { BIOREGIONS, OTHER_REGIONS } from '@eeacms/volto-cca-policy/helpers';
+import { BIOREGIONS, OTHER_REGIONS } from '@eeacms/volto-cca-policy/constants';
 import FilterSchema from './schema';
 import FilterAceContentView from './FilterAceContentView';
 

package/src/components/manage/Blocks/FilterAceContent/FilterAceContentView.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import loadable from '@loadable/component';
 import ListingBody from '@plone/volto/components/manage/Blocks/Listing/ListingBody';
 import { useSelector, useDispatch } from 'react-redux';
-import { getVocabulary } from '@plone/volto/actions';
-import { OTHER_REGIONS } from '@eeacms/volto-cca-policy/helpers';
+import { getVocabulary } from '@plone/volto/actions/vocabularies/vocabularies';
+import { OTHER_REGIONS } from '@eeacms/volto-cca-policy/constants';
 import { Link } from 'react-router-dom';
 import {
   Option,

package/src/components/manage/Blocks/FilterAceContent/FilterAceContentView.test.jsx

@@ -3,7 +3,7 @@ import { MemoryRouter } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 import renderer from 'react-test-renderer';
 
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { Provider } from 'react-intl-redux';
 import FilterAceContentView from './FilterAceContentView';
 

package/src/components/manage/Blocks/FlourishEmbedBlock/FlourishEmbedBlockEdit.jsx

@@ -1,4 +1,4 @@
-import { SidebarPortal } from '@plone/volto/components';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 import FlourishEmbedBlockView from './FlourishEmbedBlockView';
 import schema from './schema';

package/src/components/manage/Blocks/Listing/DropdownListingView.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { Dropdown } from 'semantic-ui-react';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import { useIntl, defineMessages } from 'react-intl';
 
 import './styles.less';

package/src/components/manage/Blocks/Listing/EventAccordionListingView.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { Icon, Accordion, Button } from 'semantic-ui-react';
-import { ConditionalLink } from '@plone/volto/components';
+import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
 import { When } from '@plone/volto/components/theme/View/EventDatesInfo';
 
 import './styles.less';

package/src/components/manage/Blocks/Listing/EventAccordionListingView.test.jsx

@@ -7,9 +7,11 @@ import EventAccordionListingView from './EventAccordionListingView';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/components', () => ({
-  ConditionalLink: ({ children }) => <div>{children}</div>,
-}));
+jest.mock(
+  '@plone/volto/components/manage/ConditionalLink/ConditionalLink',
+  () =>
+    ({ children }) => <div>{children}</div>,
+);
 
 jest.mock('@plone/volto/components/theme/View/EventDatesInfo', () => ({
   When: () => <div>Event Date Info</div>,

package/src/components/manage/Blocks/Listing/EventCardsListingView.jsx

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { Card, Grid, Icon, Label, Image } from 'semantic-ui-react';
-import { ConditionalLink, UniversalLink } from '@plone/volto/components';
+import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import { When } from '@plone/volto/components/theme/View/EventDatesInfo';
 import { capitalizeFirstLetter } from '@eeacms/volto-cca-policy/helpers';
 import config from '@plone/volto/registry';

package/src/components/manage/Blocks/Listing/EventCardsListingView.test.jsx

@@ -8,10 +8,16 @@ import EventCardsListingView from './EventCardsListingView';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/components', () => ({
-  ConditionalLink: ({ children }) => <div>{children}</div>,
-  UniversalLink: ({ children }) => <button>{children}</button>,
-}));
+jest.mock(
+  '@plone/volto/components/manage/ConditionalLink/ConditionalLink',
+  () =>
+    ({ children }) => <div>{children}</div>,
+);
+jest.mock(
+  '@plone/volto/components/manage/UniversalLink/UniversalLink',
+  () =>
+    ({ children }) => <button>{children}</button>,
+);
 
 jest.mock('@plone/volto/components/theme/View/EventDatesInfo', () => ({
   When: () => <span>EventDatesInfo</span>,

package/src/components/manage/Blocks/Listing/IndicatorCardsListingView.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ConditionalLink } from '@plone/volto/components';
-import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers';
+import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
+import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers/Url/Url';
 
 import './styles.less';
 

package/src/components/manage/Blocks/Listing/OrganisationCardsListingView.jsx

@@ -7,6 +7,8 @@ import {
   Card,
 } from 'semantic-ui-react';
 
+import Image from '@plone/volto/components/theme/Image/Image';
+
 import './styles.less';
 
 const OrganisationCardsListingView = ({ items }) => {
@@ -18,7 +20,7 @@ const OrganisationCardsListingView = ({ items }) => {
             <CardHeader>
               <div className="image">
                 <div className="img-container">
-                  <img
+                  <Image
                     src={item['@id'] + '/@@images/logo/preview'}
                     alt={item.title}
                     className="ui image"

package/src/components/manage/Blocks/Listing/SimpleCardsListingView.jsx

@@ -6,7 +6,7 @@ import {
   CardHeader,
   CardContent,
 } from 'semantic-ui-react';
-import { ConditionalLink } from '@plone/volto/components';
+import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
 
 import './styles.less';
 

package/src/components/manage/Blocks/Listing/SimpleCardsListingView.test.jsx

@@ -8,9 +8,11 @@ import SimpleCardsListingView from './SimpleCardsListingView';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/components', () => ({
-  ConditionalLink: ({ children }) => <div>{children}</div>,
-}));
+jest.mock(
+  '@plone/volto/components/manage/ConditionalLink/ConditionalLink',
+  () =>
+    ({ children }) => <div>{children}</div>,
+);
 
 describe('SimpleCardsListingView', () => {
   it('renders card titles and placeholders when no image', () => {

package/src/components/manage/Blocks/Listing/SimpleItemListingView.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import { ConditionalLink } from '@plone/volto/components';
-import { getBaseUrl } from '@plone/volto/helpers';
+import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
 
 const SimpleItemListingView = ({ items, isEditMode }) => {
   return (

package/src/components/manage/Blocks/Listing/SimpleItemListingView.test.jsx

@@ -8,11 +8,13 @@ import SimpleItemListingView from './SimpleItemListingView';
 
 const mockStore = configureStore();
 
-jest.mock('@plone/volto/components', () => ({
-  ConditionalLink: ({ children }) => <div>{children}</div>,
-}));
+jest.mock(
+  '@plone/volto/components/manage/ConditionalLink/ConditionalLink',
+  () =>
+    ({ children }) => <div>{children}</div>,
+);
 
-jest.mock('@plone/volto/helpers', () => ({
+jest.mock('@plone/volto/helpers/Url/Url', () => ({
   getBaseUrl: (id) => id,
 }));
 

package/src/components/manage/Blocks/RASTBlock/ContextNavigation.jsx

@@ -51,5 +51,4 @@ export function ContextNavigationComponent(props) {
   );
 }
 
-// withContentNavigation
 export default compose()(ContextNavigationComponent);

package/src/components/manage/Blocks/RASTBlock/RASTAccordion.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Accordion } from 'semantic-ui-react';
 import { useHistory } from 'react-router-dom';
-import { Icon } from '@plone/volto/components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 
 import RASTAccordionContent from './RASTAccordionContent';
 

package/src/components/manage/Blocks/RASTBlock/RASTAccordion.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { Provider } from 'react-intl-redux';
 import RASTAccordion from './RASTAccordion';
 

package/src/components/manage/Blocks/RASTBlock/RASTAccordionContent.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { List } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import { compose } from 'redux';
-import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers';
+import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers/Url/Url';
 import { useDispatch, useSelector } from 'react-redux';
-import { getContent } from '@plone/volto/actions';
+import { getContent } from '@plone/volto/actions/content/content';
 
 import cx from 'classnames';
 

package/src/components/manage/Blocks/RASTBlock/RASTEdit.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { SidebarPortal } from '@plone/volto/components';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 
 import RASTView from './RASTView';

package/src/components/manage/Blocks/RASTBlock/RASTMap.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { UniversalLink } from '@plone/volto/components';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import cx from 'classnames';
 import './styles.less';
 

package/src/components/manage/Blocks/RASTBlock/RASTMap.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { Provider } from 'react-intl-redux';
 import RASTMap from './RASTMap';
 

package/src/components/manage/Blocks/RASTBlock/RASTView.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import './styles.less';
 import ContextNavigation from './ContextNavigation';
 import { useDispatch, useSelector } from 'react-redux';
-import { getContent } from '@plone/volto/actions';
+import { getContent } from '@plone/volto/actions/content/content';
 
 function useChildren(location) {
   const dispatch = useDispatch();