@eeacms/volto-eea-website-theme 1.28.3 → 1.30.0

package/.eslintrc.js

@@ -48,12 +48,7 @@ const defaultConfig = {
     },
   },
   rules: {
-    'react/jsx-no-target-blank': [
-      'error',
-      {
-        allowReferrer: true,
-      },
-    ],
+    'react/jsx-no-target-blank': 'off',
   },
 };
 

package/CHANGELOG.md

@@ -4,6 +4,35 @@ 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.30.0](https://github.com/eea/volto-eea-website-theme/compare/1.29.0...1.30.0) - 13 March 2024
+
+#### :rocket: New Features
+
+- feat: set isPrint redux state when window.print() is triggered [laszlocseh - [`4d07b9a`](https://github.com/eea/volto-eea-website-theme/commit/4d07b9a76af0e43340e100db10ad1051c61f3a89)]
+
+#### :bug: Bug Fixes
+
+- fix: smaller timeout in window.print [laszlocseh - [`808d7e9`](https://github.com/eea/volto-eea-website-theme/commit/808d7e9ef406f38e008a718fd4883fe735c296de)]
+
+#### :house: Internal changes
+
+- chore: cleanup unused RemoveSchema code [laszlocseh - [`6d8de0a`](https://github.com/eea/volto-eea-website-theme/commit/6d8de0a27dd6bfd5645bb730d2c66f2d4784c158)]
+- chore: cleanup unused RemoveSchema code [laszlocseh - [`c1f2650`](https://github.com/eea/volto-eea-website-theme/commit/c1f2650f0f7ffb27c168399fabcbf69d0299235b)]
+
+#### :hammer_and_wrench: Others
+
+- Update package.json [ichim-david - [`4c2f794`](https://github.com/eea/volto-eea-website-theme/commit/4c2f794256098dff98aa4b78ba99be65709b1b9b)]
+- Fix export statement in reducers/index.js [David Ichim - [`bbaf5be`](https://github.com/eea/volto-eea-website-theme/commit/bbaf5be2e7cd24b6a8c5d694ee4030b6fafbd120)]
+- Lint fix, export of print should be made after import [David Ichim - [`2a670db`](https://github.com/eea/volto-eea-website-theme/commit/2a670db0a9bcb741ea24ea3ac98ba7267b6a83e1)]
+- test: TokenWidget.test.jsx and TopicsWidget.test.jsx cover more conditions [laszlocseh - [`dd154bb`](https://github.com/eea/volto-eea-website-theme/commit/dd154bb520237f458be563280cac1545eb381bdf)]
+- Bump version to 1.29.0 from 1.28.4 [Claudia Ifrim - [`7bc8eab`](https://github.com/eea/volto-eea-website-theme/commit/7bc8eabd4b0462fc5afc07ed131d074af642cc89)]
+- test: added TokenWidget.test.jsx and TopicsWidget.test.jsx [laszlocseh - [`f7292bb`](https://github.com/eea/volto-eea-website-theme/commit/f7292bb426591f758dcc7bc159b5dbd75b7afb36)]
+- test: added HomePageView.test.jsx and HomePageInverseView.test.jsx [laszlocseh - [`2076651`](https://github.com/eea/volto-eea-website-theme/commit/2076651820693825b5e20b0a7774307cd78eeb57)]
+- test: fix in Logo.test.jsx [laszlocseh - [`6d552f8`](https://github.com/eea/volto-eea-website-theme/commit/6d552f89d5aff6e47ef3032d4862a1bcbe364c01)]
+- test: add Logo.test.jsx [laszlocseh - [`752c562`](https://github.com/eea/volto-eea-website-theme/commit/752c5629840d906382858f088b97d33147684ca8)]
+- add isPrint missing files [laszlocseh - [`d995789`](https://github.com/eea/volto-eea-website-theme/commit/d995789f337a00455d45b5ec26de9c4c0c898ce6)]
+### [1.29.0](https://github.com/eea/volto-eea-website-theme/compare/1.28.3...1.29.0) - 7 March 2024
+
 ### [1.28.3](https://github.com/eea/volto-eea-website-theme/compare/1.28.2...1.28.3) - 5 March 2024
 
 #### :bug: Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.28.3",
+  "version": "1.30.0",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/actions/index.js

@@ -1 +1 @@
-export * from './schema';
+export * from './print';

package/src/actions/print.js

@@ -0,0 +1,13 @@
+/**
+ * Print action.
+ * @module actions/print
+ */
+
+import { SET_ISPRINT } from '@eeacms/volto-eea-website-theme/constants/ActionTypes';
+
+export const setIsPrint = (data) => {
+  return {
+    type: SET_ISPRINT,
+    payload: data,
+  };
+};

package/src/components/theme/Banner/View.jsx

@@ -1,11 +1,11 @@
 import React, { useCallback, useMemo, useRef } from 'react';
 import { Helmet } from '@plone/volto/helpers';
 import { compose } from 'redux';
-import { connect } from 'react-redux';
+import { connect, useDispatch } from 'react-redux';
 import { withRouter } from 'react-router';
 import { defineMessages, injectIntl } from 'react-intl';
 import startCase from 'lodash/startCase';
-import { Icon } from 'semantic-ui-react';
+import { Icon, Loader } from 'semantic-ui-react';
 import Popup from '@eeacms/volto-eea-design-system/ui/Popup/Popup';
 import config from '@plone/volto/registry';
 import Banner from '@eeacms/volto-eea-design-system/ui/Banner/Banner';
@@ -14,7 +14,8 @@ import {
   sharePage,
 } from '@eeacms/volto-eea-design-system/ui/Banner/Banner';
 import Copyright from '@eeacms/volto-eea-design-system/ui/Copyright/Copyright';
-
+import { setIsPrint } from '@eeacms/volto-eea-website-theme/actions/print';
+import cx from 'classnames';
 import './styles.less';
 
 const messages = defineMessages({
@@ -65,6 +66,7 @@ const Title = ({ config = {}, properties }) => {
 };
 
 const View = (props) => {
+  const dispatch = useDispatch();
   const { banner = {}, intl } = props;
   const metadata = props.metadata || props.properties;
   const popupRef = useRef(null);
@@ -164,14 +166,95 @@ const View = (props) => {
               </>
             )}
             {!hideDownloadButton && (
-              <Banner.Action
-                icon="ri-download-2-fill"
-                title={intl.formatMessage(messages.download)}
-                className="download"
-                onClick={() => {
-                  window.print();
-                }}
-              />
+              <>
+                <Banner.Action
+                  icon="ri-download-2-fill"
+                  title={intl.formatMessage(messages.download)}
+                  className="download"
+                  onClick={() => {
+                    // set tabs to be visible
+                    const tabs = document.getElementsByClassName('ui tab');
+                    Array.from(tabs).forEach((tab) => {
+                      tab.style.display = 'block';
+                    });
+
+                    dispatch(setIsPrint(true));
+                    // display loader
+                    const printLoader = document.getElementById(
+                      'download-print-loader',
+                    );
+                    printLoader.style.display = 'flex';
+
+                    let timeoutValue = 1000;
+                    // if we have plotlycharts increase timeout
+                    setTimeout(() => {
+                      const plotlyCharts = document.getElementsByClassName(
+                        'visualization-wrapper',
+                      );
+                      if (plotlyCharts.length > 0) {
+                        timeoutValue = timeoutValue + 1000;
+                      }
+                    }, timeoutValue);
+
+                    // scroll to iframes to make them be in the viewport
+                    // use timeout to wait for load
+                    setTimeout(() => {
+                      const iframes = document.getElementsByTagName('iframe');
+                      if (iframes.length > 0) {
+                        timeoutValue = timeoutValue + 2000;
+                        Array.from(iframes).forEach((element, index) => {
+                          setTimeout(() => {
+                            element.scrollIntoView({
+                              behavior: 'instant',
+                              block: 'nearest',
+                              inline: 'center',
+                            });
+                          }, timeoutValue);
+                          timeoutValue = timeoutValue + 3000;
+                        });
+                        timeoutValue = timeoutValue + 1000;
+                      }
+
+                      setTimeout(() => {
+                        window.scrollTo({
+                          top: 0,
+                        });
+                        Array.from(tabs).forEach((tab) => {
+                          tab.style.display = '';
+                        });
+                        printLoader.style.display = 'none';
+                        dispatch(setIsPrint(false));
+                        window.print();
+                      }, timeoutValue);
+                    }, timeoutValue);
+                  }}
+                />
+                <div
+                  id="download-print-loader"
+                  className={cx('ui warning message')}
+                  style={{
+                    position: 'fixed',
+                    left: '40%',
+                    right: '40%',
+                    backgroundColor: '#fff',
+                    padding: '1em',
+                    display: 'none',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    top: '40%',
+                    zIndex: '9999',
+                  }}
+                >
+                  <Loader
+                    disabled={false}
+                    indeterminate
+                    active
+                    inline
+                    size="medium"
+                  ></Loader>
+                  <div>Preparing download</div>
+                </div>
+              </>
             )}
             {rssLinks?.map((rssLink, index) => (
               <>
@@ -253,6 +336,7 @@ export default compose(
   connect((state) => {
     return {
       types: state.types.types,
+      isPrint: state.isPrint,
     };
   }),
 )(View);

package/src/components/theme/Homepage/HomePageInverseView.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import HomePageInverseView from './HomePageInverseView';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('HomePageInverseView Component', () => {
+  it('renders without crashing', () => {
+    const mockContent = (
+      <body>
+        <div>Mock content</div>
+      </body>
+    );
+    const { container } = render(<HomePageInverseView content={mockContent} />);
+    expect(container).toBeTruthy();
+  });
+});

package/src/components/theme/Homepage/HomePageView.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import HomePageView from './HomePageView';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('HomePageView Component', () => {
+  it('renders without crashing', () => {
+    const mockContent = (
+      <body>
+        <div>Mock content</div>
+      </body>
+    );
+    const { container } = render(<HomePageView content={mockContent} />);
+    expect(container).toBeTruthy();
+  });
+});

package/src/components/theme/Logo.test.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import EEALogo from './Logo';
+
+const mockStore = configureStore();
+let history = createMemoryHistory();
+
+describe('EEALogo Component', () => {
+  it('renders without crashing', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <EEALogo />
+        </Router>
+      </Provider>,
+    );
+
+    expect(container).toBeTruthy();
+  });
+});

package/src/components/theme/Widgets/TokenWidget.test.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { TokenWidget } from './TokenWidget';
+
+const mockStore = configureStore();
+let history = createMemoryHistory();
+
+describe('TokenWidget Component', () => {
+  it('renders without crashing', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <TokenWidget
+            value={['Value1', 'Value2']}
+            children={''}
+            className={'test'}
+          />
+        </Router>
+      </Provider>,
+    );
+
+    expect(container).toBeTruthy();
+  });
+
+  it('renders without crashing, without value', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <TokenWidget value={null} children={''} className={'test'} />
+        </Router>
+      </Provider>,
+    );
+
+    expect(container).toBeTruthy();
+  });
+});

package/src/components/theme/Widgets/TopicsWidget.test.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { TopicsWidget } from './TopicsWidget';
+
+const mockStore = configureStore();
+let history = createMemoryHistory();
+
+describe('TopicsWidget Component', () => {
+  it('renders without crashing, with value', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <TopicsWidget
+            value={['Value1', 'Value2']}
+            children={''}
+            className={'test'}
+          />
+        </Router>
+      </Provider>,
+    );
+
+    expect(container).toBeTruthy();
+  });
+
+  it('renders without crashing, without value', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const { container } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <TopicsWidget value={null} children={''} className={'test'} />
+        </Router>
+      </Provider>,
+    );
+
+    expect(container).toBeTruthy();
+  });
+});

package/src/constants/ActionTypes.js

@@ -0,0 +1,6 @@
+/**
+ * Action types.
+ * @module constants/ActionTypes
+ */
+
+export const SET_ISPRINT = 'SET_ISPRINT';

package/src/customizations/volto/components/manage/Blocks/Image/View.jsx

@@ -20,7 +20,7 @@ import { Copyright } from '@eeacms/volto-eea-design-system/ui';
  */
 export const View = (props) => {
   const { data, detached } = props;
-  const href = data?.href?.[0]?.['@id'] || '';
+  const href = data?.href?.[0]?.['@id'] ?? (data?.href || '');
   const { copyright, copyrightIcon, copyrightPosition } = data;
   // const [hovering, setHovering] = React.useState(false);
   const [viewLoaded, setViewLoaded] = React.useState(false);

package/src/customizations/volto/components/manage/Blocks/Search/SearchBlockEdit.jsx

@@ -0,0 +1,106 @@
+//this customization is used for fixing: in the search block, on edit sort on and reversed order doesn't work.
+//See here volto pr: https://github.com/plone/volto/pull/5262
+import React, { useEffect } from 'react';
+import { defineMessages } from 'react-intl';
+import { compose } from 'redux';
+
+import { SidebarPortal, BlockDataForm } from '@plone/volto/components';
+import { addExtensionFieldToSchema } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
+import { getBaseUrl } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+import { SearchBlockViewComponent } from '@plone/volto/components/manage/Blocks/Search/SearchBlockView';
+import Schema from '@plone/volto/components/manage/Blocks/Search/schema';
+import {
+  withSearch,
+  withQueryString,
+} from '@plone/volto/components/manage/Blocks/Search/hocs';
+import { cloneDeep } from 'lodash';
+
+const messages = defineMessages({
+  template: {
+    id: 'Results template',
+    defaultMessage: 'Results template',
+  },
+});
+
+const SearchBlockEdit = (props) => {
+  const {
+    block,
+    onChangeBlock,
+    data,
+    selected,
+    intl,
+    navRoot,
+    contentType,
+    onTriggerSearch,
+    querystring = {},
+  } = props;
+  const { sortable_indexes = {} } = querystring;
+
+  let schema = Schema({ data, intl });
+
+  schema = addExtensionFieldToSchema({
+    schema,
+    name: 'listingBodyTemplate',
+    items: config.blocks.blocksConfig.listing.variations,
+    intl,
+    title: { id: intl.formatMessage(messages.template) },
+  });
+  const listingVariations = config.blocks.blocksConfig?.listing?.variations;
+  let activeItem = listingVariations.find(
+    (item) => item.id === data.listingBodyTemplate,
+  );
+  const listingSchemaEnhancer = activeItem?.schemaEnhancer;
+  if (listingSchemaEnhancer)
+    schema = listingSchemaEnhancer({
+      schema: cloneDeep(schema),
+      data,
+      intl,
+    });
+  schema.properties.sortOnOptions.items = {
+    choices: Object.keys(sortable_indexes).map((k) => [
+      k,
+      sortable_indexes[k].title,
+    ]),
+  };
+
+  const { query = {} } = data || {};
+  // We don't need deep compare here, as this is just json serializable data.
+  const deepQuery = JSON.stringify(query);
+  useEffect(() => {
+    onTriggerSearch(
+      '',
+      data?.facets,
+      data?.query?.sort_on,
+      data?.query?.sort_order,
+    );
+  }, [deepQuery, onTriggerSearch, data]);
+
+  return (
+    <>
+      <SearchBlockViewComponent
+        {...props}
+        path={getBaseUrl(props.pathname)}
+        mode="edit"
+      />
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          schema={schema}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={onChangeBlock}
+          formData={data}
+          navRoot={navRoot}
+          contentType={contentType}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default compose(withQueryString, withSearch())(SearchBlockEdit);

package/src/customizations/volto/components/manage/Blocks/Search/hocs/withSearch.jsx

@@ -0,0 +1,479 @@
+//this customization is used for fixing: in the search block, on edit sort on and reversed order doesn't work.
+//See here volto pr: https://github.com/plone/volto/pull/5262
+import React from 'react';
+import { useSelector } from 'react-redux';
+import qs from 'query-string';
+import { useLocation, useHistory } from 'react-router-dom';
+
+import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions';
+import config from '@plone/volto/registry';
+import { usePrevious } from '@plone/volto/helpers';
+import { isEqual } from 'lodash';
+
+function getDisplayName(WrappedComponent) {
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}
+
+const SEARCH_ENDPOINT_FIELDS = [
+  'SearchableText',
+  'b_size',
+  'limit',
+  'sort_on',
+  'sort_order',
+];
+
+const PAQO = 'plone.app.querystring.operation';
+
+/**
+ * Based on URL state, gets an initial internal state for the search
+ *
+ * @function getInitialState
+ *
+ */
+function getInitialState(
+  data,
+  facets,
+  urlSearchText,
+  id,
+  sortOnParam,
+  sortOrderParam,
+) {
+  const {
+    types: facetWidgetTypes,
+  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
+  const facetSettings = data?.facets || [];
+
+  return {
+    query: [
+      ...(data.query?.query || []),
+      ...(facetSettings || [])
+        .map((facet) => {
+          if (!facet?.field) return null;
+
+          const { valueToQuery } = resolveExtension(
+            'type',
+            facetWidgetTypes,
+            facet,
+          );
+
+          const name = facet.field.value;
+          const value = facets[name];
+
+          return valueToQuery({ value, facet });
+        })
+        .filter((f) => !!f),
+      ...(urlSearchText
+        ? [
+            {
+              i: 'SearchableText',
+              o: 'plone.app.querystring.operation.string.contains',
+              v: urlSearchText,
+            },
+          ]
+        : []),
+    ],
+    sort_on: sortOnParam || data.query?.sort_on,
+    sort_order: sortOrderParam || data.query?.sort_order,
+    b_size: data.query?.b_size,
+    limit: data.query?.limit,
+    block: id,
+  };
+}
+
+/**
+ * "Normalizes" the search state to something that's serializable
+ * (for querying) and used to compute data for the ListingBody
+ *
+ * @function normalizeState
+ *
+ */
+function normalizeState({
+  query, // base query
+  facets, // facet values
+  id, // block id
+  searchText, // SearchableText
+  sortOn,
+  sortOrder,
+  facetSettings, // data.facets extracted from block data
+}) {
+  const {
+    types: facetWidgetTypes,
+  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
+
+  // Here, we are removing the QueryString of the Listing ones, which is present in the Facet
+  // because we already initialize the facet with those values.
+  const configuredFacets = facetSettings
+    ? facetSettings.map((facet) => facet?.field?.value)
+    : [];
+
+  let copyOfQuery = query.query ? [...query.query] : [];
+
+  const queryWithoutFacet = copyOfQuery.filter((query) => {
+    return !configuredFacets.includes(query.i);
+  });
+
+  const params = {
+    query: [
+      ...(queryWithoutFacet || []),
+      ...(facetSettings || []).map((facet) => {
+        if (!facet?.field) return null;
+
+        const { valueToQuery } = resolveExtension(
+          'type',
+          facetWidgetTypes,
+          facet,
+        );
+
+        const name = facet.field.value;
+        const value = facets[name];
+
+        return valueToQuery({ value, facet });
+      }),
+    ].filter((o) => !!o),
+    sort_on: sortOn || query.sort_on,
+    sort_order: sortOrder || query.sort_order,
+    b_size: query.b_size,
+    limit: query.limit,
+    block: id,
+  };
+
+  // Note Ideally the searchtext functionality should be restructured as being just
+  // another facet. But right now it's the same. This means that if a searchText
+  // is provided, it will override the SearchableText facet.
+  // If there is no searchText, the SearchableText in the query remains in effect.
+  // TODO eventually the searchText should be a distinct facet from SearchableText, and
+  // the two conditions could be combined, in comparison to the current state, when
+  // one overrides the other.
+  if (searchText) {
+    params.query = params.query.reduce(
+      // Remove SearchableText from query
+      (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
+      [],
+    );
+    params.query.push({
+      i: 'SearchableText',
+      o: 'plone.app.querystring.operation.string.contains',
+      v: searchText,
+    });
+  }
+
+  return params;
+}
+
+const getSearchFields = (searchData) => {
+  return Object.assign(
+    {},
+    ...SEARCH_ENDPOINT_FIELDS.map((k) => {
+      return searchData[k] ? { [k]: searchData[k] } : {};
+    }),
+    searchData.query ? { query: serializeQuery(searchData['query']) } : {},
+  );
+};
+
+/**
+ * A hook that will mirror the search block state to a hash location
+ */
+const useHashState = () => {
+  const location = useLocation();
+  const history = useHistory();
+
+  /**
+   * Required to maintain parameter compatibility.
+    With this we will maintain support for receiving hash (#) and search (?) type parameters.
+  */
+  const oldState = React.useMemo(() => {
+    return {
+      ...qs.parse(location.search),
+      ...qs.parse(location.hash),
+    };
+  }, [location.hash, location.search]);
+
+  // This creates a shallow copy. Why is this needed?
+  const current = Object.assign(
+    {},
+    ...Array.from(Object.keys(oldState)).map((k) => ({ [k]: oldState[k] })),
+  );
+
+  const setSearchData = React.useCallback(
+    (searchData) => {
+      const newParams = qs.parse(location.search);
+
+      let changed = false;
+
+      Object.keys(searchData)
+        .sort()
+        .forEach((k) => {
+          if (searchData[k]) {
+            newParams[k] = searchData[k];
+            if (oldState[k] !== searchData[k]) {
+              changed = true;
+            }
+          }
+        });
+
+      if (changed) {
+        history.push({
+          search: qs.stringify(newParams),
+        });
+      }
+    },
+    [history, oldState, location.search],
+  );
+
+  return [current, setSearchData];
+};
+
+/**
+ * A hook to make it possible to switch disable mirroring the search block
+ * state to the window location. When using the internal state we "start from
+ * scratch", as it's intended to be used in the edit page.
+ */
+const useSearchBlockState = (uniqueId, isEditMode) => {
+  const [hashState, setHashState] = useHashState();
+  const [internalState, setInternalState] = React.useState({});
+
+  return isEditMode
+    ? [internalState, setInternalState]
+    : [hashState, setHashState];
+};
+
+// Simple compress/decompress the state in URL by replacing the lengthy string
+const deserializeQuery = (q) => {
+  return JSON.parse(q)?.map((kvp) => ({
+    ...kvp,
+    o: kvp.o.replace(/^paqo/, PAQO),
+  }));
+};
+const serializeQuery = (q) => {
+  return JSON.stringify(
+    q?.map((kvp) => ({ ...kvp, o: kvp.o.replace(PAQO, 'paqo') })),
+  );
+};
+
+const withSearch = (options) => (WrappedComponent) => {
+  const { inputDelay = 1000 } = options || {};
+
+  function WithSearch(props) {
+    const { data, id, editable = false } = props;
+
+    const [locationSearchData, setLocationSearchData] = useSearchBlockState(
+      id,
+      editable,
+    );
+
+    // TODO: Improve the hook dependencies out of the scope of https://github.com/plone/volto/pull/4662
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const urlQuery = locationSearchData.query
+      ? deserializeQuery(locationSearchData.query)
+      : [];
+    const urlSearchText =
+      locationSearchData.SearchableText ||
+      urlQuery.find(({ i }) => i === 'SearchableText')?.v ||
+      '';
+
+    // TODO: refactor, should use only useLocationStateManager()!!!
+    const [searchText, setSearchText] = React.useState(urlSearchText);
+    // TODO: Improve the hook dependencies out of the scope of https://github.com/plone/volto/pull/4662
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const configuredFacets =
+      data.facets?.map((facet) => facet?.field?.value) || [];
+
+    // Here we are getting the initial value of the facet if Listing Query contains the same criteria as
+    // facet.
+    const queryData = data?.query?.query
+      ? deserializeQuery(JSON.stringify(data?.query?.query))
+      : [];
+
+    let intializeFacetWithQueryValue = [];
+
+    for (let value of configuredFacets) {
+      const queryString = queryData.find((item) => item.i === value);
+      if (queryString) {
+        intializeFacetWithQueryValue = [
+          ...intializeFacetWithQueryValue,
+          { [queryString.i]: queryString.v },
+        ];
+      }
+    }
+
+    const multiFacets = data.facets
+      ?.filter((facet) => facet?.multiple)
+      .map((facet) => facet?.field?.value);
+    const [facets, setFacets] = React.useState(
+      Object.assign(
+        {},
+        ...urlQuery.map(({ i, v }) => ({ [i]: v })),
+        // TODO: the 'o' should be kept. This would be a major refactoring of the facets
+        ...intializeFacetWithQueryValue,
+        // support for simple filters like ?Subject=something
+        // TODO: since the move to hash params this is no longer working.
+        // We'd have to treat the location.search and manage it just like the
+        // hash, to support it. We can read it, but we'd have to reset it as
+        // well, so at that point what's the difference to the hash?
+        ...configuredFacets.map((f) =>
+          locationSearchData[f]
+            ? {
+                [f]:
+                  multiFacets.indexOf(f) > -1
+                    ? [locationSearchData[f]]
+                    : locationSearchData[f],
+              }
+            : {},
+        ),
+      ),
+    );
+    const previousUrlQuery = usePrevious(urlQuery);
+
+    // During first render the previousUrlQuery is undefined and urlQuery
+    // is empty so it ressetting the facet when you are navigating but during reload we have urlQuery and we need
+    // to set the facet at first render.
+    const preventOverrideOfFacetState =
+      previousUrlQuery === undefined && urlQuery.length === 0;
+
+    React.useEffect(() => {
+      if (
+        !isEqual(urlQuery, previousUrlQuery) &&
+        !preventOverrideOfFacetState
+      ) {
+        setFacets(
+          Object.assign(
+            {},
+            ...urlQuery.map(({ i, v }) => ({ [i]: v })), // TODO: the 'o' should be kept. This would be a major refactoring of the facets
+
+            // support for simple filters like ?Subject=something
+            // TODO: since the move to hash params this is no longer working.
+            // We'd have to treat the location.search and manage it just like the
+            // hash, to support it. We can read it, but we'd have to reset it as
+            // well, so at that point what's the difference to the hash?
+            ...configuredFacets.map((f) =>
+              locationSearchData[f]
+                ? {
+                    [f]:
+                      multiFacets.indexOf(f) > -1
+                        ? [locationSearchData[f]]
+                        : locationSearchData[f],
+                  }
+                : {},
+            ),
+          ),
+        );
+      }
+    }, [
+      urlQuery,
+      configuredFacets,
+      locationSearchData,
+      multiFacets,
+      previousUrlQuery,
+      preventOverrideOfFacetState,
+    ]);
+
+    const [sortOn, setSortOn] = React.useState(data?.query?.sort_on);
+    const [sortOrder, setSortOrder] = React.useState(data?.query?.sort_order);
+
+    const [searchData, setSearchData] = React.useState(
+      getInitialState(data, facets, urlSearchText, id),
+    );
+
+    const deepFacets = JSON.stringify(facets);
+    const deepData = JSON.stringify(data);
+    React.useEffect(() => {
+      setSearchData(
+        getInitialState(
+          JSON.parse(deepData),
+          JSON.parse(deepFacets),
+          urlSearchText,
+          id,
+          sortOn,
+          sortOrder,
+        ),
+      );
+    }, [deepData, deepFacets, urlSearchText, id, sortOn, sortOrder]);
+
+    const timeoutRef = React.useRef();
+    const facetSettings = data?.facets;
+
+    const deepQuery = JSON.stringify(data.query);
+    const onTriggerSearch = React.useCallback(
+      (
+        toSearchText = undefined,
+        toSearchFacets = undefined,
+        toSortOn = undefined,
+        toSortOrder = undefined,
+      ) => {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(
+          () => {
+            const newSearchData = normalizeState({
+              id,
+              query: data.query || {},
+              facets: toSearchFacets || facets,
+              searchText: toSearchText ? toSearchText.trim() : '',
+              sortOn: toSortOn || undefined,
+              sortOrder: toSortOrder || sortOrder,
+              facetSettings,
+            });
+            if (toSearchFacets) setFacets(toSearchFacets);
+            if (toSortOn) setSortOn(toSortOn || undefined);
+            if (toSortOrder) setSortOrder(toSortOrder);
+            setSearchData(newSearchData);
+            setLocationSearchData(getSearchFields(newSearchData));
+          },
+          toSearchFacets ? inputDelay / 3 : inputDelay,
+        );
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [
+        // Use deep comparison of data.query
+        deepQuery,
+        facets,
+        id,
+        setLocationSearchData,
+        searchText,
+        sortOn,
+        sortOrder,
+        facetSettings,
+      ],
+    );
+
+    const removeSearchQuery = () => {
+      let newSearchData = { ...searchData };
+      newSearchData.query = searchData.query.reduce(
+        // Remove SearchableText from query
+        (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
+        [],
+      );
+      setSearchData(newSearchData);
+      setLocationSearchData(getSearchFields(newSearchData));
+    };
+
+    const querystringResults = useSelector(
+      (state) => state.querystringsearch.subrequests,
+    );
+    const totalItems =
+      querystringResults[id]?.total || querystringResults[id]?.items?.length;
+
+    return (
+      <WrappedComponent
+        {...props}
+        searchData={searchData}
+        facets={facets}
+        setFacets={setFacets}
+        setSortOn={setSortOn}
+        setSortOrder={setSortOrder}
+        sortOn={sortOn}
+        sortOrder={sortOrder}
+        searchedText={urlSearchText}
+        searchText={searchText}
+        removeSearchQuery={removeSearchQuery}
+        setSearchText={setSearchText}
+        onTriggerSearch={onTriggerSearch}
+        totalItems={totalItems}
+      />
+    );
+  }
+  WithSearch.displayName = `WithSearch(${getDisplayName(WrappedComponent)})`;
+
+  return WithSearch;
+};
+
+export default withSearch;

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

@@ -0,0 +1,154 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Segment, Header, List } from 'semantic-ui-react';
+import {
+  When,
+  Recurrence,
+} from '@plone/volto/components/theme/View/EventDatesInfo';
+import { Icon } from '@plone/volto/components';
+import { expandToBackendURL } from '@plone/volto/helpers';
+
+import calendarSVG from '@plone/volto/icons/calendar.svg';
+
+const messages = defineMessages({
+  what: {
+    id: 'event_what',
+    defaultMessage: 'What',
+  },
+  when: {
+    id: 'event_when',
+    defaultMessage: 'When',
+  },
+  allDates: {
+    id: 'event_alldates',
+    defaultMessage: 'All dates',
+  },
+  downloadEvent: {
+    id: 'Download Event',
+    defaultMessage: 'Download Event',
+  },
+  where: {
+    id: 'event_where',
+    defaultMessage: 'Where',
+  },
+  contactName: {
+    id: 'event_contactname',
+    defaultMessage: 'Contact Name',
+  },
+  contactPhone: {
+    id: 'event_contactphone',
+    defaultMessage: 'Contact Phone',
+  },
+  attendees: {
+    id: 'event_attendees',
+    defaultMessage: 'Attendees',
+  },
+  website: {
+    id: 'event_website',
+    defaultMessage: 'Website',
+  },
+  visitWebsite: {
+    id: 'visit_external_website',
+    defaultMessage: 'Visit external website',
+  },
+});
+
+const EventDetails = ({ content, display_as = 'aside' }) => {
+  const intl = useIntl();
+  return (
+    <Segment
+      as={display_as}
+      {...(display_as === 'aside' ? { floated: 'right' } : {})}
+    >
+      {content.subjects?.length > 0 && (
+        <>
+          <Header dividing sub>
+            {intl.formatMessage(messages.what)}
+          </Header>
+          <List items={content.subjects} />
+        </>
+      )}
+      <Header dividing sub>
+        {intl.formatMessage(messages.when)}
+      </Header>
+      <When
+        start={content.start}
+        end={content.end}
+        whole_day={content.whole_day}
+        open_end={content.open_end}
+      />
+      {content.recurrence && (
+        <>
+          <Header dividing sub>
+            {intl.formatMessage(messages.allDates)}
+          </Header>
+          <Recurrence recurrence={content.recurrence} start={content.start} />
+        </>
+      )}
+      {content.location && (
+        <>
+          <Header dividing sub>
+            {intl.formatMessage(messages.where)}
+          </Header>
+          <p>{content.location}</p>
+        </>
+      )}
+      {content.contact_name && (
+        <>
+          <Header dividing sub>
+            {intl.formatMessage(messages.contactName)}
+          </Header>
+          <p>
+            {content.contact_email ? (
+              <a href={`mailto:${content.contact_email}`}>
+                {content.contact_name}
+              </a>
+            ) : (
+              content.contact_name
+            )}
+          </p>
+        </>
+      )}
+      {content.contact_phone && (
+        <>
+          <Header dividing sub>
+            {intl.formatMessage(messages.contactPhone)}
+          </Header>
+          <p>{content.contact_phone}</p>
+        </>
+      )}
+      {content.attendees?.length > 0 && (
+        <>
+          <Header dividing sub>
+            {intl.formatMessage(messages.attendees)}
+          </Header>
+          <List items={content.attendees} />
+        </>
+      )}
+      {content.event_url && (
+        <>
+          <Header dividing sub>
+            {intl.formatMessage(messages.website)}
+          </Header>
+          <p>
+            <a href={content.event_url} target="_blank" rel="noopener">
+              {intl.formatMessage(messages.visitWebsite)}
+            </a>
+          </p>
+        </>
+      )}
+      <div className="download-event">
+        <Icon name={calendarSVG} />
+        <a
+          className="ics-download"
+          target="_blank"
+          href={`${expandToBackendURL(content['@id'])}/ics_view`}
+        >
+          {intl.formatMessage(messages.downloadEvent)}
+        </a>
+      </div>
+    </Segment>
+  );
+};
+
+export default EventDetails;

package/src/index.js

@@ -27,7 +27,7 @@ import contentBoxSVG from './icons/content-box.svg';
 import okMiddleware from './middleware/ok';
 import voltoCustomMiddleware from './middleware/voltoCustom';
 import installSlate from './slate';
-
+import { print } from './reducers';
 import { nanoid } from '@plone/volto-slate/utils';
 import { v4 as uuid } from 'uuid';
 
@@ -534,6 +534,12 @@ const applyConfig = (config) => {
     };
   }
 
+  // addonReducers
+  config.addonReducers = {
+    ...(config.addonReducers || {}),
+    print,
+  };
+
   // Breadcrumbs
   config.settings.apiExpanders.push({
     match: '',

package/src/index.test.js

@@ -215,6 +215,11 @@ describe('applyConfig', () => {
                 title: 'Horizontal',
                 isDefault: false,
               },
+              {
+                id: 'accordion',
+                title: 'Accordion responsive',
+                isDefault: false,
+              },
             ],
           },
           columnsBlock: {},

package/src/reducers/index.js

@@ -0,0 +1,3 @@
+import print from './print';
+
+export { print };

package/src/reducers/print.js

@@ -0,0 +1,21 @@
+/**
+ * Print reducer.
+ * @module reducers/print
+ */
+
+import { SET_ISPRINT } from '@eeacms/volto-eea-website-theme/constants/ActionTypes';
+
+const initialState = {
+  isPrint: false,
+};
+
+export default function print(state = initialState, action) {
+  if (action.type === SET_ISPRINT) {
+    return {
+      ...state,
+      isPrint: action.payload,
+    };
+  } else {
+    return state;
+  }
+}

package/src/actions/schema.js

@@ -1,5 +0,0 @@
-export function removeSchema() {
-  return {
-    type: 'REMOVE_SCHEMA',
-  };
-}