From 606d193792d0f8ac24fdd018dbe3fd0a265ff790 Mon Sep 17 00:00:00 2001
From: Razvan <miu.razvan28@gmail.com>
Date: Thu, 29 Feb 2024 18:08:41 +0200
Subject: [PATCH 01/12] feat(search): show facets count

---
 .../Blocks/Listing/withQuerystringResults.jsx | 162 +++++++
 .../manage/Blocks/Search/SearchBlockEdit.jsx  | 100 ++++
 .../manage/Blocks/Search/SearchBlockView.jsx  | 112 +++++
 .../Search/components/CheckboxFacet.jsx       |  71 +++
 .../Blocks/Search/components/Facets.jsx       | 106 ++++
 .../Blocks/Search/components/SelectFacet.jsx  |  67 +++
 .../manage/Blocks/Search/hocs/index.js        |   3 +
 .../Blocks/Search/hocs/withFacetsCount.jsx    |  26 +
 .../Blocks/Search/hocs/withQueryString.jsx    |  32 ++
 .../manage/Blocks/Search/hocs/withSearch.jsx  | 454 ++++++++++++++++++
 .../Blocks/Search/layout/LeftColumnFacets.jsx | 156 ++++++
 .../Search/layout/RightColumnFacets.jsx       | 157 ++++++
 .../Blocks/Search/layout/TopSideFacets.jsx    | 157 ++++++
 .../querystringsearch/querystringsearch.js    | 131 +++++
 14 files changed, 1734 insertions(+)
 create mode 100644 src/customizations/volto/components/manage/Blocks/Listing/withQuerystringResults.jsx
 create mode 100644 src/customizations/volto/components/manage/Blocks/Search/SearchBlockEdit.jsx
 create mode 100644 src/customizations/volto/components/manage/Blocks/Search/SearchBlockView.jsx
 create mode 100644 src/customizations/volto/components/manage/Blocks/Search/components/CheckboxFacet.jsx
 create mode 100644 src/customizations/volto/components/manage/Blocks/Search/components/Facets.jsx
 create mode 100644 src/customizations/volto/components/manage/Blocks/Search/components/SelectFacet.jsx
 create mode 100644 src/customizations/volto/components/manage/Blocks/Search/hocs/index.js
 create mode 100644 src/customizations/volto/components/manage/Blocks/Search/hocs/withFacetsCount.jsx
 create mode 100644 src/customizations/volto/components/manage/Blocks/Search/hocs/withQueryString.jsx
 create mode 100644 src/customizations/volto/components/manage/Blocks/Search/hocs/withSearch.jsx
 create mode 100644 src/customizations/volto/components/manage/Blocks/Search/layout/LeftColumnFacets.jsx
 create mode 100644 src/customizations/volto/components/manage/Blocks/Search/layout/RightColumnFacets.jsx
 create mode 100644 src/customizations/volto/components/manage/Blocks/Search/layout/TopSideFacets.jsx
 create mode 100644 src/customizations/volto/reducers/querystringsearch/querystringsearch.js

diff --git a/src/customizations/volto/components/manage/Blocks/Listing/withQuerystringResults.jsx b/src/customizations/volto/components/manage/Blocks/Listing/withQuerystringResults.jsx
new file mode 100644
index 00000000..25401855
--- /dev/null
+++ b/src/customizations/volto/components/manage/Blocks/Listing/withQuerystringResults.jsx
@@ -0,0 +1,162 @@
+import React, { useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+
+import { getContent, getQueryStringResults } from '@plone/volto/actions';
+import { usePagination, getBaseUrl } from '@plone/volto/helpers';
+
+import config from '@plone/volto/registry';
+
+function getDisplayName(WrappedComponent) {
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}
+
+export default function withQuerystringResults(WrappedComponent) {
+  function WithQuerystringResults(props) {
+    const {
+      data = {},
+      id = data.block,
+      properties: content,
+      path,
+      variation,
+    } = props;
+    const { settings } = config;
+    const querystring = data.querystring || data; // For backwards compat with data saved before Blocks schema. Note, this is also how the Search block passes data to ListingBody
+    const subrequestID = content?.UID ? `${content?.UID}-${id}` : id;
+    const { b_size = settings.defaultPageSize } = querystring; // batchsize
+
+    // save the path so it won't trigger dispatch on eager router location change
+    const [initialPath] = React.useState(getBaseUrl(path));
+
+    const copyFields = [
+      'limit',
+      'query',
+      'sort_on',
+      'sort_order',
+      'depth',
+      'facets',
+    ];
+    const { currentPage, setCurrentPage } = usePagination(id, 1);
+    const adaptedQuery = Object.assign(
+      variation?.fullobjects ? { fullobjects: 1 } : { metadata_fields: '_all' },
+      {
+        b_size: b_size,
+      },
+      ...copyFields.map((name) =>
+        Object.keys(querystring).includes(name)
+          ? { [name]: querystring[name] }
+          : {},
+      ),
+    );
+    const adaptedQueryRef = useRef(adaptedQuery);
+    const currentPageRef = useRef(currentPage);
+
+    const querystringResults = useSelector(
+      (state) => state.querystringsearch.subrequests,
+    );
+    const dispatch = useDispatch();
+
+    const folderItems = content?.is_folderish ? content.items : [];
+    const hasQuery = querystring?.query?.length > 0;
+    const hasLoaded = hasQuery
+      ? querystringResults?.[subrequestID]?.loaded
+      : true;
+
+    const listingItems = hasQuery
+      ? querystringResults?.[subrequestID]?.items || []
+      : folderItems;
+
+    const showAsFolderListing = !hasQuery && content?.items_total > b_size;
+    const showAsQueryListing =
+      hasQuery && querystringResults?.[subrequestID]?.total > b_size;
+
+    const totalPages = showAsFolderListing
+      ? Math.ceil(content.items_total / b_size)
+      : showAsQueryListing
+      ? Math.ceil(querystringResults[subrequestID].total / b_size)
+      : 0;
+
+    const prevBatch = showAsFolderListing
+      ? content.batching?.prev
+      : showAsQueryListing
+      ? querystringResults[subrequestID].batching?.prev
+      : null;
+    const nextBatch = showAsFolderListing
+      ? content.batching?.next
+      : showAsQueryListing
+      ? querystringResults[subrequestID].batching?.next
+      : null;
+
+    const isImageGallery =
+      (!data.variation && data.template === 'imageGallery') ||
+      data.variation === 'imageGallery';
+
+    useDeepCompareEffect(() => {
+      if (hasQuery) {
+        dispatch(
+          getQueryStringResults(
+            initialPath,
+            adaptedQuery,
+            subrequestID,
+            currentPage,
+          ),
+        );
+      } else if (isImageGallery && !hasQuery) {
+        // when used as image gallery, it doesn't need a query to list children
+        dispatch(
+          getQueryStringResults(
+            initialPath,
+            {
+              ...adaptedQuery,
+              b_size: 10000000000,
+              query: [
+                {
+                  i: 'path',
+                  o: 'plone.app.querystring.operation.string.relativePath',
+                  v: '',
+                },
+              ],
+            },
+            subrequestID,
+          ),
+        );
+      } else {
+        dispatch(getContent(initialPath, null, null, currentPage));
+      }
+      adaptedQueryRef.current = adaptedQuery;
+      currentPageRef.current = currentPage;
+    }, [
+      subrequestID,
+      isImageGallery,
+      adaptedQuery,
+      hasQuery,
+      initialPath,
+      dispatch,
+      currentPage,
+    ]);
+
+    return (
+      <WrappedComponent
+        {...props}
+        onPaginationChange={(e, { activePage }) => setCurrentPage(activePage)}
+        total={querystringResults?.[subrequestID]?.total}
+        batch_size={b_size}
+        currentPage={currentPage}
+        totalPages={totalPages}
+        prevBatch={prevBatch}
+        nextBatch={nextBatch}
+        listingItems={listingItems}
+        facetsCount={querystringResults?.[subrequestID]?.facets_count}
+        hasLoaded={hasLoaded}
+        isFolderContentsListing={showAsFolderListing}
+      />
+    );
+  }
+
+  WithQuerystringResults.displayName = `WithQuerystringResults(${getDisplayName(
+    WrappedComponent,
+  )})`;
+
+  return hoistNonReactStatics(WithQuerystringResults, WrappedComponent);
+}
diff --git a/src/customizations/volto/components/manage/Blocks/Search/SearchBlockEdit.jsx b/src/customizations/volto/components/manage/Blocks/Search/SearchBlockEdit.jsx
new file mode 100644
index 00000000..adf4d1ce
--- /dev/null
+++ b/src/customizations/volto/components/manage/Blocks/Search/SearchBlockEdit.jsx
@@ -0,0 +1,100 @@
+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 './SearchBlockView';
+import Schema from '@plone/volto/components/manage/Blocks/Search/schema';
+import { withSearch, withQueryString, withFacetsCount } from './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();
+  }, [deepQuery, onTriggerSearch]);
+
+  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,
+  withFacetsCount,
+  withSearch(),
+)(SearchBlockEdit);
diff --git a/src/customizations/volto/components/manage/Blocks/Search/SearchBlockView.jsx b/src/customizations/volto/components/manage/Blocks/Search/SearchBlockView.jsx
new file mode 100644
index 00000000..ac80db4c
--- /dev/null
+++ b/src/customizations/volto/components/manage/Blocks/Search/SearchBlockView.jsx
@@ -0,0 +1,112 @@
+import React from 'react';
+
+import ListingBody from '@plone/volto/components/manage/Blocks/Listing/ListingBody';
+import { withBlockExtensions } from '@plone/volto/helpers';
+
+import config from '@plone/volto/registry';
+
+import { withSearch, withQueryString, withFacetsCount } from './hocs';
+import { compose } from 'redux';
+import { useSelector } from 'react-redux';
+import { isEqual, isFunction } from 'lodash';
+
+const getListingBodyVariation = (data) => {
+  const { variations } = config.blocks.blocksConfig.listing;
+
+  let variation = data.listingBodyTemplate
+    ? variations.find(({ id }) => id === data.listingBodyTemplate)
+    : variations.find(({ isDefault }) => isDefault);
+
+  if (!variation) variation = variations[0];
+
+  return variation;
+};
+
+const isfunc = (obj) => isFunction(obj) || typeof obj === 'function';
+
+const _filtered = (obj) =>
+  Object.assign(
+    {},
+    ...Object.keys(obj).map((k) => {
+      const reject = k !== 'properties' && !isfunc(obj[k]);
+      return reject ? { [k]: obj[k] } : {};
+    }),
+  );
+
+const blockPropsAreChanged = (prevProps, nextProps) => {
+  const prev = _filtered(prevProps);
+  const next = _filtered(nextProps);
+
+  return isEqual(prev, next);
+};
+
+const applyDefaults = (data, root) => {
+  const defaultQuery = [
+    {
+      i: 'path',
+      o: 'plone.app.querystring.operation.string.absolutePath',
+      v: root || '/',
+    },
+  ];
+  return {
+    ...data,
+    sort_on: data?.sort_on || 'effective',
+    sort_order: data?.sort_order || 'descending',
+    query: data?.query?.length ? data.query : defaultQuery,
+    // facets: (data?.facets || []).map((facet) => facet.field),
+  };
+};
+
+const SearchBlockView = (props) => {
+  const { data, searchData, mode = 'view', variation } = props;
+
+  const Layout = variation.view;
+
+  const dataListingBodyVariation = getListingBodyVariation(data).id;
+  const [selectedView, setSelectedView] = React.useState(
+    dataListingBodyVariation,
+  );
+
+  // in the block edit you can change the used listing block variation,
+  // but it's cached here in the state. So we reset it.
+  React.useEffect(() => {
+    if (mode !== 'view') {
+      setSelectedView(dataListingBodyVariation);
+    }
+  }, [dataListingBodyVariation, mode]);
+
+  const root = useSelector((state) => state.breadcrumbs.root);
+  const listingBodyData = applyDefaults(searchData, root);
+
+  const { variations } = config.blocks.blocksConfig.listing;
+  const listingBodyVariation = variations.find(({ id }) => id === selectedView);
+
+  return (
+    <div className="block search">
+      <Layout
+        {...props}
+        isEditMode={mode === 'edit'}
+        selectedView={selectedView}
+        setSelectedView={setSelectedView}
+      >
+        <ListingBody
+          variation={{ ...data, ...listingBodyVariation }}
+          data={listingBodyData}
+          path={props.path}
+          isEditMode={mode === 'edit'}
+        />
+      </Layout>
+    </div>
+  );
+};
+
+export const SearchBlockViewComponent = compose(
+  withBlockExtensions,
+  (Component) => React.memo(Component, blockPropsAreChanged),
+)(SearchBlockView);
+
+export default compose(
+  withQueryString,
+  withFacetsCount,
+  withSearch(),
+)(SearchBlockViewComponent);
diff --git a/src/customizations/volto/components/manage/Blocks/Search/components/CheckboxFacet.jsx b/src/customizations/volto/components/manage/Blocks/Search/components/CheckboxFacet.jsx
new file mode 100644
index 00000000..96cc48c5
--- /dev/null
+++ b/src/customizations/volto/components/manage/Blocks/Search/components/CheckboxFacet.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Checkbox, Header } from 'semantic-ui-react';
+import {
+  selectFacetSchemaEnhancer,
+  selectFacetStateToValue,
+  selectFacetValueToQuery,
+} from '@plone/volto/components/manage/Blocks/Search/components/base';
+
+/**
+ * A facet that uses radio/checkboxes to provide an explicit list of values for
+ * filtering
+ */
+const CheckboxFacet = (props) => {
+  const {
+    facet,
+    facetCount,
+    choices,
+    isMulti,
+    onChange,
+    value,
+    isEditMode,
+  } = props;
+  const facetValue = value;
+
+  return (
+    <div className="checkbox-facet">
+      <Header as="h4">{facet.title ?? facet?.field?.label}</Header>
+      <div className="entries">
+        {choices.map(({ label, value }, i) => {
+          const count = facetCount?.data?.[value] || 0;
+
+          return (
+            <div className="entry" key={value}>
+              <Checkbox
+                disabled={isEditMode}
+                label={`${label} (${count})`}
+                radio={!isMulti}
+                checked={
+                  isMulti
+                    ? !!facetValue?.find((f) => f.value === value)
+                    : facetValue && facetValue.value === value
+                }
+                onChange={(e, { checked }) =>
+                  onChange(
+                    facet.field.value,
+                    isMulti
+                      ? [
+                          ...facetValue
+                            .filter((f) => f.value !== value)
+                            .map((f) => f.value),
+                          ...(checked ? [value] : []),
+                        ]
+                      : checked
+                      ? value
+                      : null,
+                  )
+                }
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+CheckboxFacet.schemaEnhancer = selectFacetSchemaEnhancer;
+CheckboxFacet.stateToValue = selectFacetStateToValue;
+CheckboxFacet.valueToQuery = selectFacetValueToQuery;
+
+export default CheckboxFacet;
diff --git a/src/customizations/volto/components/manage/Blocks/Search/components/Facets.jsx b/src/customizations/volto/components/manage/Blocks/Search/components/Facets.jsx
new file mode 100644
index 00000000..c855515b
--- /dev/null
+++ b/src/customizations/volto/components/manage/Blocks/Search/components/Facets.jsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions';
+import config from '@plone/volto/registry';
+import {
+  hasNonValueOperation,
+  hasDateOperation,
+} from '@plone/volto/components/manage/Blocks/Search/utils';
+
+const defaultShowFacet = (index) => {
+  const { values } = index;
+  return index
+    ? hasNonValueOperation(index.operations || []) ||
+      hasDateOperation(index.operations || [])
+      ? true
+      : values && Object.keys(values).length > 0
+    : values && Object.keys(values).length > 0;
+};
+
+const Facets = (props) => {
+  const {
+    querystring,
+    data = {},
+    facets,
+    setFacets,
+    facetWrapper,
+    isEditMode,
+  } = props;
+  const { search } = config.blocks.blocksConfig;
+
+  const FacetWrapper = facetWrapper;
+  const query_to_values = Object.assign(
+    {},
+    ...(data?.query?.query?.map(({ i, v }) => ({ [i]: v })) || []),
+  );
+
+  return (
+    <>
+      {data?.facets
+        ?.filter((facetSettings) => !facetSettings.hidden)
+        .map((facetSettings) => {
+          const field = facetSettings?.field?.value;
+          const index = querystring.indexes[field] || {};
+          const { values = {} } = index;
+          const facetCount = props.facetsCount?.[facetSettings.field.value];
+
+          let choices = Object.keys(values)
+            .map((name) => ({
+              value: name,
+              label: values[name].title,
+            }))
+            // filter the available values based on the allowed values in the
+            // base query
+            .filter(({ value }) =>
+              query_to_values[field]
+                ? query_to_values[field].includes(value)
+                : true,
+            );
+
+          choices = choices.sort((a, b) =>
+            a.label.localeCompare(b.label, 'en', { sensitivity: 'base' }),
+          );
+
+          const isMulti = facetSettings.multiple;
+          const selectedValue = facets[facetSettings?.field?.value];
+
+          // TODO :handle changing the type of facet (multi/nonmulti)
+
+          const {
+            view: FacetWidget,
+            stateToValue,
+            showFacet = defaultShowFacet,
+          } = resolveExtension(
+            'type',
+            search.extensions.facetWidgets.types,
+            facetSettings,
+          );
+
+          let value = stateToValue({ facetSettings, index, selectedValue });
+
+          const {
+            rewriteOptions = (name, options) => options,
+          } = search.extensions.facetWidgets;
+
+          return FacetWrapper && (isEditMode || showFacet(index)) ? (
+            <FacetWrapper key={facetSettings['@id']}>
+              <FacetWidget
+                facet={facetSettings}
+                facetCount={facetCount}
+                choices={rewriteOptions(facetSettings?.field?.value, choices)}
+                isMulti={isMulti}
+                value={value}
+                isEditMode={isEditMode}
+                onChange={(id, value) => {
+                  !isEditMode && setFacets({ ...facets, [id]: value });
+                }}
+              />
+            </FacetWrapper>
+          ) : (
+            ''
+          );
+        })}
+    </>
+  );
+};
+
+export default Facets;
diff --git a/src/customizations/volto/components/manage/Blocks/Search/components/SelectFacet.jsx b/src/customizations/volto/components/manage/Blocks/Search/components/SelectFacet.jsx
new file mode 100644
index 00000000..a6a9cafe
--- /dev/null
+++ b/src/customizations/volto/components/manage/Blocks/Search/components/SelectFacet.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import {
+  Option,
+  DropdownIndicator,
+  MultiValueContainer,
+} from '@plone/volto/components/manage/Widgets/SelectStyling';
+import {
+  selectTheme,
+  customSelectStyles,
+} from '@plone/volto/components/manage/Blocks/Search/components/SelectStyling';
+import {
+  selectFacetSchemaEnhancer,
+  selectFacetStateToValue,
+  selectFacetValueToQuery,
+} from '@plone/volto/components/manage/Blocks/Search/components/base';
+
+const SelectFacet = (props) => {
+  const {
+    facet,
+    facetCount,
+    choices,
+    reactSelect,
+    isMulti,
+    onChange,
+    value,
+    isEditMode,
+  } = props;
+  const Select = reactSelect.default;
+  const v = Array.isArray(value) && value.length === 0 ? null : value;
+
+  return (
+    <Select
+      placeholder={facet?.title ?? (facet?.field?.label || 'select...')}
+      className="react-select-container"
+      classNamePrefix="react-select"
+      options={choices}
+      styles={customSelectStyles}
+      theme={selectTheme}
+      components={{ DropdownIndicator, Option, MultiValueContainer }}
+      isDisabled={isEditMode}
+      onChange={(data) => {
+        if (data) {
+          onChange(
+            facet.field.value,
+            isMulti ? data.map(({ value }) => value) : data.value,
+          );
+        } else {
+          // data has been removed
+          onChange(facet.field.value, isMulti ? [] : '');
+        }
+      }}
+      getOptionLabel={({ label, value }) => {
+        return `${label} (${facetCount?.data?.[value] || 0})`;
+      }}
+      isMulti={facet.multiple}
+      isClearable
+      value={v}
+    />
+  );
+};
+
+SelectFacet.schemaEnhancer = selectFacetSchemaEnhancer;
+SelectFacet.stateToValue = selectFacetStateToValue;
+SelectFacet.valueToQuery = selectFacetValueToQuery;
+
+export default injectLazyLibs('reactSelect')(SelectFacet);
diff --git a/src/customizations/volto/components/manage/Blocks/Search/hocs/index.js b/src/customizations/volto/components/manage/Blocks/Search/hocs/index.js
new file mode 100644
index 00000000..2b1fcbc5
--- /dev/null
+++ b/src/customizations/volto/components/manage/Blocks/Search/hocs/index.js
@@ -0,0 +1,3 @@
+export { default as withFacetsCount } from './withFacetsCount';
+export { default as withQueryString } from './withQueryString';
+export { default as withSearch } from './withSearch';
diff --git a/src/customizations/volto/components/manage/Blocks/Search/hocs/withFacetsCount.jsx b/src/customizations/volto/components/manage/Blocks/Search/hocs/withFacetsCount.jsx
new file mode 100644
index 00000000..196b0823
--- /dev/null
+++ b/src/customizations/volto/components/manage/Blocks/Search/hocs/withFacetsCount.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+function getDisplayName(WrappedComponent) {
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}
+
+/**
+ * A HOC that injects querystring metadata information from the backend.
+ *
+ */
+export default function withFacetsCount(WrappedComponent) {
+  function WithFacetsCount(props) {
+    const { id } = props;
+
+    const facetsCount = useSelector((state) => {
+      return state.querystringsearch.subrequests[id]?.facets_count;
+    });
+
+    return <WrappedComponent {...props} facetsCount={facetsCount} />;
+  }
+  WithFacetsCount.displayName = `WithFacetsCount(${getDisplayName(
+    WrappedComponent,
+  )})`;
+  return WithFacetsCount;
+}
diff --git a/src/customizations/volto/components/manage/Blocks/Search/hocs/withQueryString.jsx b/src/customizations/volto/components/manage/Blocks/Search/hocs/withQueryString.jsx
new file mode 100644
index 00000000..98c4b12f
--- /dev/null
+++ b/src/customizations/volto/components/manage/Blocks/Search/hocs/withQueryString.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { getQuerystring } from '@plone/volto/actions';
+
+function getDisplayName(WrappedComponent) {
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}
+
+/**
+ * A HOC that injects querystring metadata information from the backend.
+ *
+ */
+export default function withQueryString(WrappedComponent) {
+  function WithQueryString(props) {
+    const dispatch = useDispatch();
+
+    const qs = useSelector((state) => state.querystring);
+    const indexes = qs?.indexes || {};
+
+    React.useEffect(() => {
+      if (Object.keys(indexes).length === 0) {
+        dispatch(getQuerystring());
+      }
+    }, [dispatch, indexes]);
+
+    return <WrappedComponent {...props} querystring={qs} />;
+  }
+  WithQueryString.displayName = `WithQueryString(${getDisplayName(
+    WrappedComponent,
+  )})`;
+  return WithQueryString;
+}
diff --git a/src/customizations/volto/components/manage/Blocks/Search/hocs/withSearch.jsx b/src/customizations/volto/components/manage/Blocks/Search/hocs/withSearch.jsx
new file mode 100644
index 00000000..aa119339
--- /dev/null
+++ b/src/customizations/volto/components/manage/Blocks/Search/hocs/withSearch.jsx
@@ -0,0 +1,454 @@
+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) {
+  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,
+            },
+          ]
+        : []),
+    ],
+    facets: (data?.facets || []).map((facet) => facet.field.value),
+    sort_on: data.query?.sort_on,
+    sort_order: 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),
+    facets: configuredFacets,
+    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,
+    );
+
+    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);
+    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({});
+
+    React.useEffect(() => {
+      setSearchData(getInitialState(data, facets, urlSearchText, id));
+    }, [facets, data, urlSearchText, id]);
+
+    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 searchData = normalizeState({
+              id,
+              query: data.query || {},
+              facets: toSearchFacets || facets,
+              searchText: toSearchText ? toSearchText.trim() : '',
+              sortOn: toSortOn || sortOn,
+              sortOrder: toSortOrder || sortOrder,
+              facetSettings,
+            });
+            if (toSearchFacets) setFacets(toSearchFacets);
+            if (toSortOn) setSortOn(toSortOn);
+            if (toSortOrder) setSortOrder(toSortOrder);
+            setSearchData(searchData);
+            setLocationSearchData(getSearchFields(searchData));
+          },
+          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 = () => {
+      searchData.query = searchData.query.reduce(
+        // Remove SearchableText from query
+        (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
+        [],
+      );
+      setSearchData(searchData);
+      setLocationSearchData(getSearchFields(searchData));
+    };
+
+    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;
diff --git a/src/customizations/volto/components/manage/Blocks/Search/layout/LeftColumnFacets.jsx b/src/customizations/volto/components/manage/Blocks/Search/layout/LeftColumnFacets.jsx
new file mode 100644
index 00000000..3649ec1f
--- /dev/null
+++ b/src/customizations/volto/components/manage/Blocks/Search/layout/LeftColumnFacets.jsx
@@ -0,0 +1,156 @@
+import React from 'react';
+import {
+  SearchInput,
+  SearchDetails,
+  Facets,
+  FilterList,
+  SortOn,
+  ViewSwitcher,
+} from '@plone/volto/components/manage/Blocks/Search/components';
+import { Grid, Segment } from 'semantic-ui-react';
+import { Button } from 'semantic-ui-react';
+import { flushSync } from 'react-dom';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  searchButtonText: {
+    id: 'Search',
+    defaultMessage: 'Search',
+  },
+});
+
+const FacetWrapper = ({ children }) => (
+  <Segment basic className="facet">
+    {children}
+  </Segment>
+);
+
+const LeftColumnFacets = (props) => {
+  const {
+    children,
+    data,
+    totalItems,
+    facets,
+    facetsCount,
+    setFacets,
+    setSortOn,
+    setSortOrder,
+    sortOn,
+    sortOrder,
+    onTriggerSearch,
+    searchedText, // search text for previous search
+    searchText, // search text currently being entered (controlled input)
+    isEditMode,
+    querystring = {},
+    // searchData,
+    // mode = 'view',
+    // variation,
+  } = props;
+  const { showSearchButton } = data;
+  const isLive = !showSearchButton;
+  const intl = useIntl();
+
+  return (
+    <Grid className="searchBlock-facets left-column-facets" stackable>
+      {data.headline && (
+        <Grid.Row>
+          <Grid.Column>
+            <h2 className="headline">{data.headline}</h2>
+          </Grid.Column>
+        </Grid.Row>
+      )}
+
+      <Grid.Row>
+        {data.facets?.length > 0 && (
+          <Grid.Column mobile={12} tablet={4} computer={3}>
+            <div className="facets">
+              {data.facetsTitle && <h3>{data.facetsTitle}</h3>}
+              <Facets
+                querystring={querystring}
+                data={data}
+                facets={facets}
+                facetsCount={facetsCount}
+                setFacets={(f) => {
+                  flushSync(() => {
+                    setFacets(f);
+                    onTriggerSearch(searchedText || '', f);
+                  });
+                }}
+                facetWrapper={FacetWrapper}
+              />
+            </div>
+          </Grid.Column>
+        )}
+
+        <Grid.Column
+          mobile={12}
+          tablet={data.facets?.length ? 8 : 12}
+          computer={data.facets?.length ? 9 : 12}
+        >
+          {(Object.keys(data).includes('showSearchInput')
+            ? data.showSearchInput
+            : true) && (
+            <div className="search-wrapper">
+              <SearchInput {...props} isLive={isLive} />
+              {data.showSearchButton && (
+                <Button primary onClick={() => onTriggerSearch(searchText)}>
+                  {data.searchButtonLabel ||
+                    intl.formatMessage(messages.searchButtonText)}
+                </Button>
+              )}
+            </div>
+          )}
+
+          <FilterList
+            {...props}
+            isEditMode={isEditMode}
+            setFacets={(f) => {
+              flushSync(() => {
+                setFacets(f);
+                onTriggerSearch(searchedText || '', f);
+              });
+            }}
+          />
+
+          <div className="search-results-count-sort">
+            <SearchDetails text={searchedText} total={totalItems} data={data} />
+            <div className="sort-views-wrapper">
+              {data.showSortOn && (
+                <SortOn
+                  querystring={querystring}
+                  data={data}
+                  isEditMode={isEditMode}
+                  sortOn={sortOn}
+                  sortOrder={sortOrder}
+                  setSortOn={(sortOn) => {
+                    flushSync(() => {
+                      setSortOn(sortOn);
+                      onTriggerSearch(searchedText || '', facets, sortOn);
+                    });
+                  }}
+                  setSortOrder={(sortOrder) => {
+                    flushSync(() => {
+                      setSortOrder(sortOrder);
+                      onTriggerSearch(
+                        searchedText || '',
+                        facets,
+                        sortOn,
+                        sortOrder,
+                      );
+                    });
+                  }}
+                />
+              )}
+              {data.availableViews && data.availableViews.length > 1 && (
+                <ViewSwitcher {...props} />
+              )}
+            </div>
+          </div>
+          {children}
+        </Grid.Column>
+      </Grid.Row>
+    </Grid>
+  );
+};
+
+export default LeftColumnFacets;
diff --git a/src/customizations/volto/components/manage/Blocks/Search/layout/RightColumnFacets.jsx b/src/customizations/volto/components/manage/Blocks/Search/layout/RightColumnFacets.jsx
new file mode 100644
index 00000000..182e28ca
--- /dev/null
+++ b/src/customizations/volto/components/manage/Blocks/Search/layout/RightColumnFacets.jsx
@@ -0,0 +1,157 @@
+import React from 'react';
+import {
+  SearchInput,
+  SearchDetails,
+  Facets,
+  FilterList,
+  SortOn,
+  ViewSwitcher,
+} from '@plone/volto/components/manage/Blocks/Search/components';
+import { Grid, Segment } from 'semantic-ui-react';
+import { Button } from 'semantic-ui-react';
+import { flushSync } from 'react-dom';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  searchButtonText: {
+    id: 'Search',
+    defaultMessage: 'Search',
+  },
+});
+
+const FacetWrapper = ({ children }) => (
+  <Segment basic className="facet">
+    {children}
+  </Segment>
+);
+
+const RightColumnFacets = (props) => {
+  const {
+    children,
+    data,
+    totalItems,
+    facets,
+    facetsCount,
+    setFacets,
+    setSortOn,
+    setSortOrder,
+    sortOn,
+    sortOrder,
+    onTriggerSearch,
+    searchedText, // search text for previous search
+    searchText, // search text currently being entered (controlled input)
+    isEditMode,
+    querystring = {},
+    // searchData,
+    // mode = 'view',
+    // variation,
+  } = props;
+  const { showSearchButton } = data;
+  const isLive = !showSearchButton;
+  const intl = useIntl();
+
+  return (
+    <Grid className="searchBlock-facets right-column-facets" stackable>
+      {data.headline && (
+        <Grid.Row>
+          <Grid.Column>
+            <h2 className="headline">{data.headline}</h2>
+          </Grid.Column>
+        </Grid.Row>
+      )}
+
+      <Grid.Row>
+        <Grid.Column
+          mobile={12}
+          tablet={data.facets?.length ? 8 : 12}
+          computer={data.facets?.length ? 9 : 12}
+        >
+          {(Object.keys(data).includes('showSearchInput')
+            ? data.showSearchInput
+            : true) && (
+            <div className="search-wrapper">
+              <SearchInput {...props} isLive={isLive} />
+              {data.showSearchButton && (
+                <Button primary onClick={() => onTriggerSearch(searchText)}>
+                  {data.searchButtonLabel ||
+                    intl.formatMessage(messages.searchButtonText)}
+                </Button>
+              )}
+            </div>
+          )}
+
+          <FilterList
+            {...props}
+            isEditMode={isEditMode}
+            setFacets={(f) => {
+              flushSync(() => {
+                setFacets(f);
+                onTriggerSearch(searchedText || '', f);
+              });
+            }}
+          />
+
+          <div className="search-results-count-sort">
+            <SearchDetails text={searchedText} total={totalItems} data={data} />
+            <div className="sort-views-wrapper">
+              {data.showSortOn && (
+                <SortOn
+                  data={data}
+                  querystring={querystring}
+                  isEditMode={isEditMode}
+                  sortOrder={sortOrder}
+                  sortOn={sortOn}
+                  setSortOn={(sortOn) => {
+                    flushSync(() => {
+                      setSortOn(sortOn);
+                      onTriggerSearch(searchedText || '', facets, sortOn);
+                    });
+                  }}
+                  setSortOrder={(sortOrder) => {
+                    flushSync(() => {
+                      setSortOrder(sortOrder);
+                      onTriggerSearch(
+                        searchedText || '',
+                        facets,
+                        sortOn,
+                        sortOrder,
+                      );
+                    });
+                  }}
+                />
+              )}
+              {data.availableViews && data.availableViews.length > 1 && (
+                <ViewSwitcher {...props} />
+              )}
+            </div>
+          </div>
+          {children}
+        </Grid.Column>
+
+        {data.facets?.length > 0 && (
+          <Grid.Column mobile={12} tablet={4} computer={3}>
+            <div className="facets">
+              {data.facetsTitle && <h3>{data.facetsTitle}</h3>}
+              <Facets
+                querystring={querystring}
+                data={data}
+                facets={facets}
+                facetsCount={facetsCount}
+                isEditMode={isEditMode}
+                setFacets={(f) => {
+                  flushSync(() => {
+                    setFacets(f);
+                    onTriggerSearch(searchedText || '', f);
+                  });
+                }}
+                facetWrapper={FacetWrapper}
+              />
+            </div>
+          </Grid.Column>
+        )}
+      </Grid.Row>
+    </Grid>
+  );
+};
+
+export default RightColumnFacets;
diff --git a/src/customizations/volto/components/manage/Blocks/Search/layout/TopSideFacets.jsx b/src/customizations/volto/components/manage/Blocks/Search/layout/TopSideFacets.jsx
new file mode 100644
index 00000000..b171000e
--- /dev/null
+++ b/src/customizations/volto/components/manage/Blocks/Search/layout/TopSideFacets.jsx
@@ -0,0 +1,157 @@
+import React from 'react';
+import { flushSync } from 'react-dom';
+import { defineMessages, useIntl } from 'react-intl';
+import { Button, Grid } from 'semantic-ui-react';
+
+import {
+  SearchInput,
+  SearchDetails,
+  Facets,
+  FilterList,
+  SortOn,
+  ViewSwitcher,
+} from '@plone/volto/components/manage/Blocks/Search/components';
+
+const messages = defineMessages({
+  searchButtonText: {
+    id: 'Search',
+    defaultMessage: 'Search',
+  },
+});
+
+const FacetWrapper = ({ children }) => (
+  <Grid.Column mobile={12} tablet={4} computer={3}>
+    {children}
+  </Grid.Column>
+);
+
+const TopSideFacets = (props) => {
+  const {
+    children,
+    data,
+    totalItems,
+    facets,
+    facetsCount,
+    setFacets,
+    setSortOn,
+    setSortOrder,
+    sortOn,
+    sortOrder,
+    onTriggerSearch,
+    searchedText, // search text for previous search
+    searchText, // search text currently being entered (controlled input)
+    isEditMode,
+    querystring = {},
+    // searchData,
+    // mode = 'view',
+    // variation,
+  } = props;
+  const { showSearchButton } = data;
+  const isLive = !showSearchButton;
+  const intl = useIntl();
+
+  return (
+    <Grid className="searchBlock-facets" stackable>
+      {data.headline && (
+        <Grid.Row>
+          <Grid.Column>
+            <h2 className="headline">{data.headline}</h2>
+          </Grid.Column>
+        </Grid.Row>
+      )}
+
+      <Grid.Row>
+        <Grid.Column>
+          {(Object.keys(data).includes('showSearchInput')
+            ? data.showSearchInput
+            : true) && (
+            <div className="search-wrapper">
+              <SearchInput {...props} isLive={isLive} />
+              {data.showSearchButton && (
+                <Button primary onClick={() => onTriggerSearch(searchText)}>
+                  {data.searchButtonLabel ||
+                    intl.formatMessage(messages.searchButtonText)}
+                </Button>
+              )}
+            </div>
+          )}
+
+          <div className="search-filters-sort">
+            <FilterList
+              {...props}
+              isEditMode={isEditMode}
+              setFacets={(f) => {
+                flushSync(() => {
+                  setFacets(f);
+                  onTriggerSearch(searchedText || '', f);
+                });
+              }}
+            />
+
+            {data.showSortOn && (
+              <SortOn
+                data={data}
+                querystring={querystring}
+                isEditMode={isEditMode}
+                sortOn={sortOn}
+                sortOrder={sortOrder}
+                setSortOn={(sortOn) => {
+                  flushSync(() => {
+                    setSortOn(sortOn);
+                    onTriggerSearch(searchedText || '', facets, sortOn);
+                  });
+                }}
+                setSortOrder={(sortOrder) => {
+                  flushSync(() => {
+                    setSortOrder(sortOrder);
+                    onTriggerSearch(
+                      searchedText || '',
+                      facets,
+                      sortOn,
+                      sortOrder,
+                    );
+                  });
+                }}
+              />
+            )}
+            {data.availableViews && data.availableViews.length > 1 && (
+              <ViewSwitcher {...props} />
+            )}
+          </div>
+          {data.facets?.length > 0 && (
+            <div className="facets">
+              {data.facetsTitle && <h3>{data.facetsTitle}</h3>}
+              <Grid verticalAlign="bottom" columns={12}>
+                <Facets
+                  data={data}
+                  querystring={querystring}
+                  facets={facets}
+                  facetsCount={facetsCount}
+                  setFacets={(f) => {
+                    flushSync(() => {
+                      setFacets(f);
+                      onTriggerSearch(searchedText || '', f);
+                    });
+                  }}
+                  facetWrapper={FacetWrapper}
+                />
+              </Grid>
+            </div>
+          )}
+          <SearchDetails
+            text={searchedText}
+            total={totalItems}
+            as="h5"
+            data={data}
+          />
+        </Grid.Column>
+      </Grid.Row>
+
+      <Grid.Row>
+        <Grid.Column>{children}</Grid.Column>
+      </Grid.Row>
+    </Grid>
+  );
+};
+
+export default TopSideFacets;
diff --git a/src/customizations/volto/reducers/querystringsearch/querystringsearch.js b/src/customizations/volto/reducers/querystringsearch/querystringsearch.js
new file mode 100644
index 00000000..729b7b47
--- /dev/null
+++ b/src/customizations/volto/reducers/querystringsearch/querystringsearch.js
@@ -0,0 +1,131 @@
+import { map, omit } from 'lodash';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+const GET_QUERYSTRING_RESULTS = 'GET_QUERYSTRING_RESULTS';
+const RESET_QUERYSTRING_RESULTS = 'RESET_QUERYSTRING_RESULTS';
+
+const initialState = {
+  error: null,
+  items: [],
+  total: 0,
+  loaded: false,
+  loading: false,
+  batching: {},
+  subrequests: {},
+};
+
+/**
+ * querystringsearch reducer.
+ * @function querystring
+ * @param {Object} state Current state.
+ * @param {Object} action Action to be handled.
+ * @returns {Object} New state.
+ */
+export default function querystringsearch(state = initialState, action = {}) {
+  switch (action.type) {
+    case `${GET_QUERYSTRING_RESULTS}_PENDING`:
+      return action.subrequest
+        ? {
+            ...state,
+            subrequests: {
+              ...state.subrequests,
+              [action.subrequest]: {
+                ...(state.subrequests[action.subrequest] || {
+                  items: [],
+                  total: 0,
+                  batching: {},
+                }),
+                items: [],
+                total: 0,
+                error: null,
+                loaded: false,
+                loading: true,
+              },
+            },
+          }
+        : {
+            ...state,
+            error: null,
+            loading: true,
+            loaded: false,
+          };
+    case `${GET_QUERYSTRING_RESULTS}_SUCCESS`:
+      return action.subrequest
+        ? {
+            ...state,
+            subrequests: {
+              ...state.subrequests,
+              [action.subrequest]: {
+                error: null,
+                items: map(action.result.items, (item) => ({
+                  ...item,
+                  '@id': flattenToAppURL(item['@id']),
+                })),
+                facets_count: action.result.facets_count,
+                total: action.result.items_total,
+                loaded: true,
+                loading: false,
+                batching: { ...action.result.batching },
+              },
+            },
+          }
+        : {
+            ...state,
+            error: null,
+            items: map(action.result.items, (item) => ({
+              ...item,
+              '@id': flattenToAppURL(item['@id']),
+            })),
+            facets_count: action.result.facets_count,
+            total: action.result.items_total,
+            loaded: true,
+            loading: false,
+            batching: { ...action.result.batching },
+          };
+    case `${GET_QUERYSTRING_RESULTS}_FAIL`:
+      return action.subrequest
+        ? {
+            ...state,
+            subrequests: {
+              ...state.subrequests,
+              [action.subrequest]: {
+                error: action.error,
+                items: [],
+                facets_count: {},
+                total: 0,
+                loading: false,
+                loaded: false,
+                batching: {},
+              },
+            },
+          }
+        : {
+            ...state,
+            error: action.error,
+            items: [],
+            facets_count: {},
+            total: 0,
+            loading: false,
+            loaded: false,
+            batching: {},
+          };
+    case RESET_QUERYSTRING_RESULTS:
+      return action.subrequest
+        ? {
+            ...state,
+            subrequests: omit(state.subrequests, [action.subrequest]),
+          }
+        : {
+            ...state,
+            error: null,
+            items: [],
+            facets_count: {},
+            total: 0,
+            loading: false,
+            loaded: false,
+            batching: {},
+          };
+    default:
+      return state;
+  }
+}

From 5711ee4ec490e49c0acffe2023fa59860cb411f1 Mon Sep 17 00:00:00 2001
From: dobri1408 <50819975+dobri1408@users.noreply.github.com>
Date: Fri, 8 Mar 2024 12:07:19 +0200
Subject: [PATCH 02/12] hide facet values that are not meeting criteria querys

---
 .../Blocks/Listing/withQuerystringResults.jsx       | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/customizations/volto/components/manage/Blocks/Listing/withQuerystringResults.jsx b/src/customizations/volto/components/manage/Blocks/Listing/withQuerystringResults.jsx
index 25401855..6e3010af 100644
--- a/src/customizations/volto/components/manage/Blocks/Listing/withQuerystringResults.jsx
+++ b/src/customizations/volto/components/manage/Blocks/Listing/withQuerystringResults.jsx
@@ -74,19 +74,19 @@ export default function withQuerystringResults(WrappedComponent) {
     const totalPages = showAsFolderListing
       ? Math.ceil(content.items_total / b_size)
       : showAsQueryListing
-      ? Math.ceil(querystringResults[subrequestID].total / b_size)
-      : 0;
+        ? Math.ceil(querystringResults[subrequestID].total / b_size)
+        : 0;
 
     const prevBatch = showAsFolderListing
       ? content.batching?.prev
       : showAsQueryListing
-      ? querystringResults[subrequestID].batching?.prev
-      : null;
+        ? querystringResults[subrequestID].batching?.prev
+        : null;
     const nextBatch = showAsFolderListing
       ? content.batching?.next
       : showAsQueryListing
-      ? querystringResults[subrequestID].batching?.next
-      : null;
+        ? querystringResults[subrequestID].batching?.next
+        : null;
 
     const isImageGallery =
       (!data.variation && data.template === 'imageGallery') ||
@@ -147,7 +147,6 @@ export default function withQuerystringResults(WrappedComponent) {
         prevBatch={prevBatch}
         nextBatch={nextBatch}
         listingItems={listingItems}
-        facetsCount={querystringResults?.[subrequestID]?.facets_count}
         hasLoaded={hasLoaded}
         isFolderContentsListing={showAsFolderListing}
       />

From ac09ec1c6d831406b4fbedd10a8fa13372d2b527 Mon Sep 17 00:00:00 2001
From: dobri1408 <50819975+dobri1408@users.noreply.github.com>
Date: Fri, 8 Mar 2024 12:08:39 +0200
Subject: [PATCH 03/12] hide facet values that are not meeting criterias

---
 .../Blocks/Search/components/Facets.jsx       | 82 ++++++++++++++++---
 1 file changed, 71 insertions(+), 11 deletions(-)

diff --git a/src/customizations/volto/components/manage/Blocks/Search/components/Facets.jsx b/src/customizations/volto/components/manage/Blocks/Search/components/Facets.jsx
index c855515b..68743b73 100644
--- a/src/customizations/volto/components/manage/Blocks/Search/components/Facets.jsx
+++ b/src/customizations/volto/components/manage/Blocks/Search/components/Facets.jsx
@@ -1,10 +1,16 @@
-import React from 'react';
+import React, { useState, useMemo } from 'react';
+import { Button, Grid } from 'semantic-ui-react';
 import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions';
 import config from '@plone/volto/registry';
-import {
-  hasNonValueOperation,
-  hasDateOperation,
-} from '@plone/volto/components/manage/Blocks/Search/utils';
+import { hasNonValueOperation, hasDateOperation } from '../utils';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  moreFilters: { id: 'More filters', defaultMessage: 'More filters' },
+  lessFilters: { id: 'Less filters', defaultMessage: 'Less filters' },
+  showFilters: { id: 'Show filters', defaultMessage: 'Show filters' },
+  hideFilters: { id: 'Hide filters', defaultMessage: 'Hide filters' },
+});
 
 const defaultShowFacet = (index) => {
   const { values } = index;
@@ -17,6 +23,7 @@ const defaultShowFacet = (index) => {
 };
 
 const Facets = (props) => {
+  const [hidden, setHidden] = useState(true);
   const {
     querystring,
     data = {},
@@ -27,11 +34,29 @@ const Facets = (props) => {
   } = props;
   const { search } = config.blocks.blocksConfig;
 
+  const advancedFilters = useMemo(() => {
+    let count = 0;
+    for (let facetSettings of data.facets || []) {
+      if (facetSettings.advanced) {
+        count++;
+      }
+    }
+
+    if (count === data.facets?.length) {
+      return 2;
+    }
+    if (count) {
+      return 1;
+    }
+    return 0;
+  }, [data.facets]);
+
   const FacetWrapper = facetWrapper;
   const query_to_values = Object.assign(
     {},
     ...(data?.query?.query?.map(({ i, v }) => ({ [i]: v })) || []),
   );
+  const intl = useIntl();
 
   return (
     <>
@@ -39,9 +64,11 @@ const Facets = (props) => {
         ?.filter((facetSettings) => !facetSettings.hidden)
         .map((facetSettings) => {
           const field = facetSettings?.field?.value;
+          const isAdvanced = facetSettings?.advanced;
           const index = querystring.indexes[field] || {};
           const { values = {} } = index;
-          const facetCount = props.facetsCount?.[facetSettings.field.value];
+          const facetCount =
+            props.facetsCount?.[facetSettings?.field?.value] || 0;
 
           let choices = Object.keys(values)
             .map((name) => ({
@@ -62,6 +89,7 @@ const Facets = (props) => {
 
           const isMulti = facetSettings.multiple;
           const selectedValue = facets[facetSettings?.field?.value];
+          const visible = (isAdvanced && !hidden) || !isAdvanced;
 
           // TODO :handle changing the type of facet (multi/nonmulti)
 
@@ -77,16 +105,26 @@ const Facets = (props) => {
 
           let value = stateToValue({ facetSettings, index, selectedValue });
 
-          const {
-            rewriteOptions = (name, options) => options,
-          } = search.extensions.facetWidgets;
+          const { rewriteOptions = (name, options) => options } =
+            search.extensions.facetWidgets;
 
           return FacetWrapper && (isEditMode || showFacet(index)) ? (
-            <FacetWrapper key={facetSettings['@id']}>
+            <FacetWrapper
+              key={facetSettings['@id']}
+              facetSettings={facetSettings}
+              visible={visible}
+            >
               <FacetWidget
                 facet={facetSettings}
                 facetCount={facetCount}
-                choices={rewriteOptions(facetSettings?.field?.value, choices)}
+                choices={rewriteOptions(
+                  facetSettings?.field?.value,
+                  choices,
+                ).filter(({ _, value }) =>
+                  Object.keys(facetCount?.data || {}).find(
+                    (key) => key === value,
+                  ),
+                )}
                 isMulti={isMulti}
                 value={value}
                 isEditMode={isEditMode}
@@ -99,6 +137,28 @@ const Facets = (props) => {
             ''
           );
         })}
+      {advancedFilters > 0 && (
+        <Grid.Column
+          mobile={12}
+          tablet={12}
+          computer={12}
+          className="toggle-advanced-facets"
+        >
+          <Button
+            onClick={() => {
+              setHidden((prevHidden) => !prevHidden);
+            }}
+          >
+            {hidden
+              ? advancedFilters === 2
+                ? intl.formatMessage(messages.showFilters)
+                : intl.formatMessage(messages.moreFilters)
+              : advancedFilters === 2
+                ? intl.formatMessage(messages.hideFilters)
+                : intl.formatMessage(messages.lessFilters)}
+          </Button>
+        </Grid.Column>
+      )}
     </>
   );
 };

From 9c8c8937e47a6f0017ae435f3149517e659f44d3 Mon Sep 17 00:00:00 2001
From: dobri1408 <50819975+dobri1408@users.noreply.github.com>
Date: Fri, 8 Mar 2024 12:10:02 +0200
Subject: [PATCH 04/12] Update withSearch.jsx

---
 .../manage/Blocks/Search/hocs/withSearch.jsx  | 70 +++++++++++++------
 1 file changed, 49 insertions(+), 21 deletions(-)

diff --git a/src/customizations/volto/components/manage/Blocks/Search/hocs/withSearch.jsx b/src/customizations/volto/components/manage/Blocks/Search/hocs/withSearch.jsx
index aa119339..a62497ac 100644
--- a/src/customizations/volto/components/manage/Blocks/Search/hocs/withSearch.jsx
+++ b/src/customizations/volto/components/manage/Blocks/Search/hocs/withSearch.jsx
@@ -18,6 +18,7 @@ const SEARCH_ENDPOINT_FIELDS = [
   'limit',
   'sort_on',
   'sort_order',
+  'facets',
 ];
 
 const PAQO = 'plone.app.querystring.operation';
@@ -28,15 +29,26 @@ const PAQO = 'plone.app.querystring.operation';
  * @function getInitialState
  *
  */
-function getInitialState(data, facets, urlSearchText, id) {
-  const {
-    types: facetWidgetTypes,
-  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
+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 || []),
+      ...(data.query?.query.map((q) => {
+        return {
+          ...q,
+          mandatory: true,
+        };
+      }) || []),
       ...(facetSettings || [])
         .map((facet) => {
           if (!facet?.field) return null;
@@ -63,11 +75,11 @@ function getInitialState(data, facets, urlSearchText, id) {
           ]
         : []),
     ],
-    facets: (data?.facets || []).map((facet) => facet.field.value),
-    sort_on: data.query?.sort_on,
-    sort_order: data.query?.sort_order,
+    sort_on: sortOnParam || data.query?.sort_on,
+    sort_order: sortOrderParam || data.query?.sort_order,
     b_size: data.query?.b_size,
     limit: data.query?.limit,
+    facets: (data?.facets || []).map((facet) => facet?.field?.value),
     block: id,
   };
 }
@@ -88,9 +100,8 @@ function normalizeState({
   sortOrder,
   facetSettings, // data.facets extracted from block data
 }) {
-  const {
-    types: facetWidgetTypes,
-  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
+  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.
@@ -254,6 +265,8 @@ const withSearch = (options) => (WrappedComponent) => {
       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)
       : [];
@@ -264,6 +277,8 @@ const withSearch = (options) => (WrappedComponent) => {
 
     // 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) || [];
 
@@ -359,11 +374,24 @@ const withSearch = (options) => (WrappedComponent) => {
     const [sortOn, setSortOn] = React.useState(data?.query?.sort_on);
     const [sortOrder, setSortOrder] = React.useState(data?.query?.sort_order);
 
-    const [searchData, setSearchData] = React.useState({});
+    const [searchData, setSearchData] = React.useState(
+      getInitialState(data, facets, urlSearchText, id),
+    );
 
+    const deepFacets = JSON.stringify(facets);
+    const deepData = JSON.stringify(data);
     React.useEffect(() => {
-      setSearchData(getInitialState(data, facets, urlSearchText, id));
-    }, [facets, data, urlSearchText, id]);
+      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;
@@ -379,7 +407,7 @@ const withSearch = (options) => (WrappedComponent) => {
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(
           () => {
-            const searchData = normalizeState({
+            const newSearchData = normalizeState({
               id,
               query: data.query || {},
               facets: toSearchFacets || facets,
@@ -391,8 +419,8 @@ const withSearch = (options) => (WrappedComponent) => {
             if (toSearchFacets) setFacets(toSearchFacets);
             if (toSortOn) setSortOn(toSortOn);
             if (toSortOrder) setSortOrder(toSortOrder);
-            setSearchData(searchData);
-            setLocationSearchData(getSearchFields(searchData));
+            setSearchData(newSearchData);
+            setLocationSearchData(getSearchFields(newSearchData));
           },
           toSearchFacets ? inputDelay / 3 : inputDelay,
         );
@@ -412,13 +440,14 @@ const withSearch = (options) => (WrappedComponent) => {
     );
 
     const removeSearchQuery = () => {
-      searchData.query = searchData.query.reduce(
+      let newSearchData = { ...searchData };
+      newSearchData.query = searchData.query.reduce(
         // Remove SearchableText from query
         (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
         [],
       );
-      setSearchData(searchData);
-      setLocationSearchData(getSearchFields(searchData));
+      setSearchData(newSearchData);
+      setLocationSearchData(getSearchFields(newSearchData));
     };
 
     const querystringResults = useSelector(
@@ -426,7 +455,6 @@ const withSearch = (options) => (WrappedComponent) => {
     );
     const totalItems =
       querystringResults[id]?.total || querystringResults[id]?.items?.length;
-
     return (
       <WrappedComponent
         {...props}

From 566d6ce6fb7ebdbbb35c75a86f880ca6f5973108 Mon Sep 17 00:00:00 2001
From: dobri1408 <50819975+dobri1408@users.noreply.github.com>
Date: Fri, 8 Mar 2024 15:23:56 +0200
Subject: [PATCH 05/12] Update SearchBlockView.jsx

---
 .../manage/Blocks/Search/SearchBlockView.jsx  | 196 ++++++++----------
 1 file changed, 92 insertions(+), 104 deletions(-)

diff --git a/src/customizations/volto/components/manage/Blocks/Search/SearchBlockView.jsx b/src/customizations/volto/components/manage/Blocks/Search/SearchBlockView.jsx
index ac80db4c..b6c7c923 100644
--- a/src/customizations/volto/components/manage/Blocks/Search/SearchBlockView.jsx
+++ b/src/customizations/volto/components/manage/Blocks/Search/SearchBlockView.jsx
@@ -1,112 +1,100 @@
 import React from 'react';
-
-import ListingBody from '@plone/volto/components/manage/Blocks/Listing/ListingBody';
-import { withBlockExtensions } from '@plone/volto/helpers';
-
-import config from '@plone/volto/registry';
-
-import { withSearch, withQueryString, withFacetsCount } from './hocs';
-import { compose } from 'redux';
-import { useSelector } from 'react-redux';
-import { isEqual, isFunction } from 'lodash';
-
-const getListingBodyVariation = (data) => {
-  const { variations } = config.blocks.blocksConfig.listing;
-
-  let variation = data.listingBodyTemplate
-    ? variations.find(({ id }) => id === data.listingBodyTemplate)
-    : variations.find(({ isDefault }) => isDefault);
-
-  if (!variation) variation = variations[0];
-
-  return variation;
-};
-
-const isfunc = (obj) => isFunction(obj) || typeof obj === 'function';
-
-const _filtered = (obj) =>
-  Object.assign(
-    {},
-    ...Object.keys(obj).map((k) => {
-      const reject = k !== 'properties' && !isfunc(obj[k]);
-      return reject ? { [k]: obj[k] } : {};
-    }),
-  );
-
-const blockPropsAreChanged = (prevProps, nextProps) => {
-  const prev = _filtered(prevProps);
-  const next = _filtered(nextProps);
-
-  return isEqual(prev, next);
-};
-
-const applyDefaults = (data, root) => {
-  const defaultQuery = [
-    {
-      i: 'path',
-      o: 'plone.app.querystring.operation.string.absolutePath',
-      v: root || '/',
-    },
-  ];
-  return {
-    ...data,
-    sort_on: data?.sort_on || 'effective',
-    sort_order: data?.sort_order || 'descending',
-    query: data?.query?.length ? data.query : defaultQuery,
-    // facets: (data?.facets || []).map((facet) => facet.field),
-  };
-};
-
-const SearchBlockView = (props) => {
-  const { data, searchData, mode = 'view', variation } = props;
-
-  const Layout = variation.view;
-
-  const dataListingBodyVariation = getListingBodyVariation(data).id;
-  const [selectedView, setSelectedView] = React.useState(
-    dataListingBodyVariation,
-  );
-
-  // in the block edit you can change the used listing block variation,
-  // but it's cached here in the state. So we reset it.
-  React.useEffect(() => {
-    if (mode !== 'view') {
-      setSelectedView(dataListingBodyVariation);
-    }
-  }, [dataListingBodyVariation, mode]);
-
-  const root = useSelector((state) => state.breadcrumbs.root);
-  const listingBodyData = applyDefaults(searchData, root);
-
-  const { variations } = config.blocks.blocksConfig.listing;
-  const listingBodyVariation = variations.find(({ id }) => id === selectedView);
+import { Checkbox, Header } from 'semantic-ui-react';
+import {
+  selectFacetSchemaEnhancer,
+  selectFacetStateToValue,
+  selectFacetValueToQuery,
+} from './base';
+
+/**
+ * A facet that uses radio/checkboxes to provide an explicit list of values for
+ * filtering
+ */
+const CheckboxFacet = (props) => {
+  const {
+    facet,
+    facetCount,
+    choices,
+    isMulti,
+    onChange,
+    value,
+    isEditMode,
+    isFacetCountEnabled,
+  } = props;
+  const facetValue = value;
 
   return (
-    <div className="block search">
-      <Layout
-        {...props}
-        isEditMode={mode === 'edit'}
-        selectedView={selectedView}
-        setSelectedView={setSelectedView}
-      >
-        <ListingBody
-          variation={{ ...data, ...listingBodyVariation }}
-          data={listingBodyData}
-          path={props.path}
-          isEditMode={mode === 'edit'}
-        />
-      </Layout>
+    <div className="checkbox-facet">
+      <Header as="h4">{facet.title ?? facet?.field?.label}</Header>
+      <div className="entries">
+        {choices.map(({ label, value }, i) => {
+          const count = facetCount?.data?.[value] || 0;
+
+          return (
+            <div className="entry" key={value}>
+              {isFacetCountEnabled === true ? (
+                <Checkbox
+                  disabled={isEditMode}
+                  label={`${label} (${count})`}
+                  radio={!isMulti}
+                  checked={
+                    isMulti
+                      ? !!facetValue?.find((f) => f.value === value)
+                      : facetValue && facetValue.value === value
+                  }
+                  onChange={(e, { checked }) =>
+                    onChange(
+                      facet.field.value,
+                      isMulti
+                        ? [
+                            ...facetValue
+                              .filter((f) => f.value !== value)
+                              .map((f) => f.value),
+                            ...(checked ? [value] : []),
+                          ]
+                        : checked
+                          ? value
+                          : null,
+                    )
+                  }
+                />
+              ) : (
+                <Checkbox
+                  disabled={isEditMode}
+                  label={label}
+                  radio={!isMulti}
+                  checked={
+                    isMulti
+                      ? !!facetValue?.find((f) => f.value === value)
+                      : facetValue && facetValue.value === value
+                  }
+                  onChange={(e, { checked }) =>
+                    onChange(
+                      facet.field.value,
+                      isMulti
+                        ? [
+                            ...facetValue
+                              .filter((f) => f.value !== value)
+                              .map((f) => f.value),
+                            ...(checked ? [value] : []),
+                          ]
+                        : checked
+                          ? value
+                          : null,
+                    )
+                  }
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 };
 
-export const SearchBlockViewComponent = compose(
-  withBlockExtensions,
-  (Component) => React.memo(Component, blockPropsAreChanged),
-)(SearchBlockView);
+CheckboxFacet.schemaEnhancer = selectFacetSchemaEnhancer;
+CheckboxFacet.stateToValue = selectFacetStateToValue;
+CheckboxFacet.valueToQuery = selectFacetValueToQuery;
 
-export default compose(
-  withQueryString,
-  withFacetsCount,
-  withSearch(),
-)(SearchBlockViewComponent);
+export default CheckboxFacet;

From e3d77f499d278a9043488fa2bbcb95e0660bbcf0 Mon Sep 17 00:00:00 2001
From: dobri1408 <50819975+dobri1408@users.noreply.github.com>
Date: Fri, 8 Mar 2024 15:24:21 +0200
Subject: [PATCH 06/12] Update CheckboxFacet.jsx

---
 .../Search/components/CheckboxFacet.jsx       | 79 +++++++++++++------
 1 file changed, 54 insertions(+), 25 deletions(-)

diff --git a/src/customizations/volto/components/manage/Blocks/Search/components/CheckboxFacet.jsx b/src/customizations/volto/components/manage/Blocks/Search/components/CheckboxFacet.jsx
index 96cc48c5..b6c7c923 100644
--- a/src/customizations/volto/components/manage/Blocks/Search/components/CheckboxFacet.jsx
+++ b/src/customizations/volto/components/manage/Blocks/Search/components/CheckboxFacet.jsx
@@ -4,7 +4,7 @@ import {
   selectFacetSchemaEnhancer,
   selectFacetStateToValue,
   selectFacetValueToQuery,
-} from '@plone/volto/components/manage/Blocks/Search/components/base';
+} from './base';
 
 /**
  * A facet that uses radio/checkboxes to provide an explicit list of values for
@@ -19,6 +19,7 @@ const CheckboxFacet = (props) => {
     onChange,
     value,
     isEditMode,
+    isFacetCountEnabled,
   } = props;
   const facetValue = value;
 
@@ -31,31 +32,59 @@ const CheckboxFacet = (props) => {
 
           return (
             <div className="entry" key={value}>
-              <Checkbox
-                disabled={isEditMode}
-                label={`${label} (${count})`}
-                radio={!isMulti}
-                checked={
-                  isMulti
-                    ? !!facetValue?.find((f) => f.value === value)
-                    : facetValue && facetValue.value === value
-                }
-                onChange={(e, { checked }) =>
-                  onChange(
-                    facet.field.value,
+              {isFacetCountEnabled === true ? (
+                <Checkbox
+                  disabled={isEditMode}
+                  label={`${label} (${count})`}
+                  radio={!isMulti}
+                  checked={
                     isMulti
-                      ? [
-                          ...facetValue
-                            .filter((f) => f.value !== value)
-                            .map((f) => f.value),
-                          ...(checked ? [value] : []),
-                        ]
-                      : checked
-                      ? value
-                      : null,
-                  )
-                }
-              />
+                      ? !!facetValue?.find((f) => f.value === value)
+                      : facetValue && facetValue.value === value
+                  }
+                  onChange={(e, { checked }) =>
+                    onChange(
+                      facet.field.value,
+                      isMulti
+                        ? [
+                            ...facetValue
+                              .filter((f) => f.value !== value)
+                              .map((f) => f.value),
+                            ...(checked ? [value] : []),
+                          ]
+                        : checked
+                          ? value
+                          : null,
+                    )
+                  }
+                />
+              ) : (
+                <Checkbox
+                  disabled={isEditMode}
+                  label={label}
+                  radio={!isMulti}
+                  checked={
+                    isMulti
+                      ? !!facetValue?.find((f) => f.value === value)
+                      : facetValue && facetValue.value === value
+                  }
+                  onChange={(e, { checked }) =>
+                    onChange(
+                      facet.field.value,
+                      isMulti
+                        ? [
+                            ...facetValue
+                              .filter((f) => f.value !== value)
+                              .map((f) => f.value),
+                            ...(checked ? [value] : []),
+                          ]
+                        : checked
+                          ? value
+                          : null,
+                    )
+                  }
+                />
+              )}
             </div>
           );
         })}

From a5da887070379d2e0b7a1d52b83a33817b07a610 Mon Sep 17 00:00:00 2001
From: dobri1408 <50819975+dobri1408@users.noreply.github.com>
Date: Fri, 8 Mar 2024 15:25:00 +0200
Subject: [PATCH 07/12] Update Facets.jsx

---
 .../manage/Blocks/Search/components/Facets.jsx        | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/customizations/volto/components/manage/Blocks/Search/components/Facets.jsx b/src/customizations/volto/components/manage/Blocks/Search/components/Facets.jsx
index 68743b73..20e50eed 100644
--- a/src/customizations/volto/components/manage/Blocks/Search/components/Facets.jsx
+++ b/src/customizations/volto/components/manage/Blocks/Search/components/Facets.jsx
@@ -67,6 +67,7 @@ const Facets = (props) => {
           const isAdvanced = facetSettings?.advanced;
           const index = querystring.indexes[field] || {};
           const { values = {} } = index;
+          const isFacetCountEnabled = props.facetsCount ? true : false;
           const facetCount =
             props.facetsCount?.[facetSettings?.field?.value] || 0;
 
@@ -117,14 +118,16 @@ const Facets = (props) => {
               <FacetWidget
                 facet={facetSettings}
                 facetCount={facetCount}
+                isFacetCountEnabled={isFacetCountEnabled}
                 choices={rewriteOptions(
                   facetSettings?.field?.value,
                   choices,
-                ).filter(({ _, value }) =>
-                  Object.keys(facetCount?.data || {}).find(
+                ).filter(({ _, value }) => {
+                  if (isFacetCountEnabled === false) return true;
+                  return Object.keys(facetCount?.data || {}).find(
                     (key) => key === value,
-                  ),
-                )}
+                  );
+                })}
                 isMulti={isMulti}
                 value={value}
                 isEditMode={isEditMode}

From edc80cc8fee7ea105462c8848a6327e69fbd7bef Mon Sep 17 00:00:00 2001
From: dobri1408 <50819975+dobri1408@users.noreply.github.com>
Date: Fri, 8 Mar 2024 15:25:25 +0200
Subject: [PATCH 08/12] Update SelectFacet.jsx

---
 .../Blocks/Search/components/SelectFacet.jsx  | 95 ++++++++++++-------
 1 file changed, 60 insertions(+), 35 deletions(-)

diff --git a/src/customizations/volto/components/manage/Blocks/Search/components/SelectFacet.jsx b/src/customizations/volto/components/manage/Blocks/Search/components/SelectFacet.jsx
index a6a9cafe..f43348d7 100644
--- a/src/customizations/volto/components/manage/Blocks/Search/components/SelectFacet.jsx
+++ b/src/customizations/volto/components/manage/Blocks/Search/components/SelectFacet.jsx
@@ -5,15 +5,12 @@ import {
   DropdownIndicator,
   MultiValueContainer,
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
-import {
-  selectTheme,
-  customSelectStyles,
-} from '@plone/volto/components/manage/Blocks/Search/components/SelectStyling';
+import { selectTheme, customSelectStyles } from './SelectStyling';
 import {
   selectFacetSchemaEnhancer,
   selectFacetStateToValue,
   selectFacetValueToQuery,
-} from '@plone/volto/components/manage/Blocks/Search/components/base';
+} from './base';
 
 const SelectFacet = (props) => {
   const {
@@ -25,39 +22,67 @@ const SelectFacet = (props) => {
     onChange,
     value,
     isEditMode,
+    isFacetCountEnabled,
   } = props;
   const Select = reactSelect.default;
   const v = Array.isArray(value) && value.length === 0 ? null : value;
-
-  return (
-    <Select
-      placeholder={facet?.title ?? (facet?.field?.label || 'select...')}
-      className="react-select-container"
-      classNamePrefix="react-select"
-      options={choices}
-      styles={customSelectStyles}
-      theme={selectTheme}
-      components={{ DropdownIndicator, Option, MultiValueContainer }}
-      isDisabled={isEditMode}
-      onChange={(data) => {
-        if (data) {
-          onChange(
-            facet.field.value,
-            isMulti ? data.map(({ value }) => value) : data.value,
-          );
-        } else {
-          // data has been removed
-          onChange(facet.field.value, isMulti ? [] : '');
-        }
-      }}
-      getOptionLabel={({ label, value }) => {
-        return `${label} (${facetCount?.data?.[value] || 0})`;
-      }}
-      isMulti={facet.multiple}
-      isClearable
-      value={v}
-    />
-  );
+  if (isFacetCountEnabled)
+    return (
+      <Select
+        placeholder={facet?.title ?? (facet?.field?.label || 'select...')}
+        className="react-select-container"
+        classNamePrefix="react-select"
+        options={choices}
+        styles={customSelectStyles}
+        theme={selectTheme}
+        components={{ DropdownIndicator, Option, MultiValueContainer }}
+        isDisabled={isEditMode}
+        onChange={(data) => {
+          if (data) {
+            onChange(
+              facet.field.value,
+              isMulti ? data.map(({ value }) => value) : data.value,
+            );
+          } else {
+            // data has been removed
+            onChange(facet.field.value, isMulti ? [] : '');
+          }
+        }}
+        isMulti={facet.multiple}
+        isClearable
+        value={v}
+        getOptionLabel={({ label, value }) => {
+          return `${label} (${facetCount?.data?.[value] || 0})`;
+        }}
+      />
+    );
+  else
+    return (
+      <Select
+        placeholder={facet?.title ?? (facet?.field?.label || 'select...')}
+        className="react-select-container"
+        classNamePrefix="react-select"
+        options={choices}
+        styles={customSelectStyles}
+        theme={selectTheme}
+        components={{ DropdownIndicator, Option, MultiValueContainer }}
+        isDisabled={isEditMode}
+        onChange={(data) => {
+          if (data) {
+            onChange(
+              facet.field.value,
+              isMulti ? data.map(({ value }) => value) : data.value,
+            );
+          } else {
+            // data has been removed
+            onChange(facet.field.value, isMulti ? [] : '');
+          }
+        }}
+        isMulti={facet.multiple}
+        isClearable
+        value={v}
+      />
+    );
 };
 
 SelectFacet.schemaEnhancer = selectFacetSchemaEnhancer;

From 2e14c6a91dc48b86814e8cb3f75881cbd6afe242 Mon Sep 17 00:00:00 2001
From: Dobricean Ioan Dorian <dobriceanionut1408@gmail.com>
Date: Mon, 11 Mar 2024 09:20:13 +0200
Subject: [PATCH 09/12] fix tests

---
 .../Blocks/Listing/withQuerystringResults.jsx |  12 +-
 .../manage/Blocks/Search/SearchBlockView.jsx  | 195 +++++++++---------
 .../Search/components/CheckboxFacet.jsx       |  10 +-
 .../Blocks/Search/components/Facets.jsx       |  14 +-
 .../manage/Blocks/Search/hocs/withSearch.jsx  |  10 +-
 5 files changed, 129 insertions(+), 112 deletions(-)

diff --git a/src/customizations/volto/components/manage/Blocks/Listing/withQuerystringResults.jsx b/src/customizations/volto/components/manage/Blocks/Listing/withQuerystringResults.jsx
index 6e3010af..2d394c72 100644
--- a/src/customizations/volto/components/manage/Blocks/Listing/withQuerystringResults.jsx
+++ b/src/customizations/volto/components/manage/Blocks/Listing/withQuerystringResults.jsx
@@ -74,19 +74,19 @@ export default function withQuerystringResults(WrappedComponent) {
     const totalPages = showAsFolderListing
       ? Math.ceil(content.items_total / b_size)
       : showAsQueryListing
-        ? Math.ceil(querystringResults[subrequestID].total / b_size)
-        : 0;
+      ? Math.ceil(querystringResults[subrequestID].total / b_size)
+      : 0;
 
     const prevBatch = showAsFolderListing
       ? content.batching?.prev
       : showAsQueryListing
-        ? querystringResults[subrequestID].batching?.prev
-        : null;
+      ? querystringResults[subrequestID].batching?.prev
+      : null;
     const nextBatch = showAsFolderListing
       ? content.batching?.next
       : showAsQueryListing
-        ? querystringResults[subrequestID].batching?.next
-        : null;
+      ? querystringResults[subrequestID].batching?.next
+      : null;
 
     const isImageGallery =
       (!data.variation && data.template === 'imageGallery') ||
diff --git a/src/customizations/volto/components/manage/Blocks/Search/SearchBlockView.jsx b/src/customizations/volto/components/manage/Blocks/Search/SearchBlockView.jsx
index b6c7c923..0c2c4bb9 100644
--- a/src/customizations/volto/components/manage/Blocks/Search/SearchBlockView.jsx
+++ b/src/customizations/volto/components/manage/Blocks/Search/SearchBlockView.jsx
@@ -1,100 +1,111 @@
 import React from 'react';
-import { Checkbox, Header } from 'semantic-ui-react';
-import {
-  selectFacetSchemaEnhancer,
-  selectFacetStateToValue,
-  selectFacetValueToQuery,
-} from './base';
-
-/**
- * A facet that uses radio/checkboxes to provide an explicit list of values for
- * filtering
- */
-const CheckboxFacet = (props) => {
-  const {
-    facet,
-    facetCount,
-    choices,
-    isMulti,
-    onChange,
-    value,
-    isEditMode,
-    isFacetCountEnabled,
-  } = props;
-  const facetValue = value;
+
+import ListingBody from '@plone/volto/components/manage/Blocks/Listing/ListingBody';
+import { withBlockExtensions } from '@plone/volto/helpers';
+
+import config from '@plone/volto/registry';
+
+import { withSearch, withQueryString, withFacetsCount } from './hocs';
+import { compose } from 'redux';
+import { useSelector } from 'react-redux';
+import { isEqual, isFunction } from 'lodash';
+import cx from 'classnames';
+
+const getListingBodyVariation = (data) => {
+  const { variations } = config.blocks.blocksConfig.listing;
+
+  let variation = data.listingBodyTemplate
+    ? variations.find(({ id }) => id === data.listingBodyTemplate)
+    : variations.find(({ isDefault }) => isDefault);
+
+  if (!variation) variation = variations[0];
+
+  return variation;
+};
+
+const isfunc = (obj) => isFunction(obj) || typeof obj === 'function';
+
+const _filtered = (obj) =>
+  Object.assign(
+    {},
+    ...Object.keys(obj).map((k) => {
+      const reject = k !== 'properties' && !isfunc(obj[k]);
+      return reject ? { [k]: obj[k] } : {};
+    }),
+  );
+
+const blockPropsAreChanged = (prevProps, nextProps) => {
+  const prev = _filtered(prevProps);
+  const next = _filtered(nextProps);
+
+  return isEqual(prev, next);
+};
+
+const applyDefaults = (data, root) => {
+  const defaultQuery = [
+    {
+      i: 'path',
+      o: 'plone.app.querystring.operation.string.absolutePath',
+      v: root || '/',
+    },
+  ];
+  return {
+    ...data,
+    sort_on: data?.sort_on || 'effective',
+    sort_order: data?.sort_order || 'descending',
+    query: data?.query?.length ? data.query : defaultQuery,
+  };
+};
+
+const SearchBlockView = (props) => {
+  const { id, data, searchData, mode = 'view', variation, className } = props;
+
+  const Layout = variation.view;
+
+  const dataListingBodyVariation = getListingBodyVariation(data).id;
+  const [selectedView, setSelectedView] = React.useState(
+    dataListingBodyVariation,
+  );
+
+  // in the block edit you can change the used listing block variation,
+  // but it's cached here in the state. So we reset it.
+  React.useEffect(() => {
+    if (mode !== 'view') {
+      setSelectedView(dataListingBodyVariation);
+    }
+  }, [dataListingBodyVariation, mode]);
+
+  const root = useSelector((state) => state.breadcrumbs.root);
+  const listingBodyData = applyDefaults(searchData, root);
+
+  const { variations } = config.blocks.blocksConfig.listing;
+  const listingBodyVariation = variations.find(({ id }) => id === selectedView);
 
   return (
-    <div className="checkbox-facet">
-      <Header as="h4">{facet.title ?? facet?.field?.label}</Header>
-      <div className="entries">
-        {choices.map(({ label, value }, i) => {
-          const count = facetCount?.data?.[value] || 0;
-
-          return (
-            <div className="entry" key={value}>
-              {isFacetCountEnabled === true ? (
-                <Checkbox
-                  disabled={isEditMode}
-                  label={`${label} (${count})`}
-                  radio={!isMulti}
-                  checked={
-                    isMulti
-                      ? !!facetValue?.find((f) => f.value === value)
-                      : facetValue && facetValue.value === value
-                  }
-                  onChange={(e, { checked }) =>
-                    onChange(
-                      facet.field.value,
-                      isMulti
-                        ? [
-                            ...facetValue
-                              .filter((f) => f.value !== value)
-                              .map((f) => f.value),
-                            ...(checked ? [value] : []),
-                          ]
-                        : checked
-                          ? value
-                          : null,
-                    )
-                  }
-                />
-              ) : (
-                <Checkbox
-                  disabled={isEditMode}
-                  label={label}
-                  radio={!isMulti}
-                  checked={
-                    isMulti
-                      ? !!facetValue?.find((f) => f.value === value)
-                      : facetValue && facetValue.value === value
-                  }
-                  onChange={(e, { checked }) =>
-                    onChange(
-                      facet.field.value,
-                      isMulti
-                        ? [
-                            ...facetValue
-                              .filter((f) => f.value !== value)
-                              .map((f) => f.value),
-                            ...(checked ? [value] : []),
-                          ]
-                        : checked
-                          ? value
-                          : null,
-                    )
-                  }
-                />
-              )}
-            </div>
-          );
-        })}
-      </div>
+    <div className={cx('block search', selectedView, className)}>
+      <Layout
+        {...props}
+        isEditMode={mode === 'edit'}
+        selectedView={selectedView}
+        setSelectedView={setSelectedView}
+      >
+        <ListingBody
+          id={id}
+          variation={{ ...data, ...listingBodyVariation }}
+          data={listingBodyData}
+          path={props.path}
+          isEditMode={mode === 'edit'}
+        />
+      </Layout>
     </div>
   );
 };
 
-CheckboxFacet.schemaEnhancer = selectFacetSchemaEnhancer;
-CheckboxFacet.stateToValue = selectFacetStateToValue;
-CheckboxFacet.valueToQuery = selectFacetValueToQuery;
+export const SearchBlockViewComponent = compose(
+  withBlockExtensions,
+  (Component) => React.memo(Component, blockPropsAreChanged),
+)(SearchBlockView);
 
-export default CheckboxFacet;
+export default withSearch()(
+  withQueryString(withFacetsCount(SearchBlockViewComponent)),
+);
diff --git a/src/customizations/volto/components/manage/Blocks/Search/components/CheckboxFacet.jsx b/src/customizations/volto/components/manage/Blocks/Search/components/CheckboxFacet.jsx
index b6c7c923..97e1a6f6 100644
--- a/src/customizations/volto/components/manage/Blocks/Search/components/CheckboxFacet.jsx
+++ b/src/customizations/volto/components/manage/Blocks/Search/components/CheckboxFacet.jsx
@@ -4,7 +4,7 @@ import {
   selectFacetSchemaEnhancer,
   selectFacetStateToValue,
   selectFacetValueToQuery,
-} from './base';
+} from '@plone/volto/src/components/manage/Blocks/Search/components/base';
 
 /**
  * A facet that uses radio/checkboxes to provide an explicit list of values for
@@ -53,8 +53,8 @@ const CheckboxFacet = (props) => {
                             ...(checked ? [value] : []),
                           ]
                         : checked
-                          ? value
-                          : null,
+                        ? value
+                        : null,
                     )
                   }
                 />
@@ -79,8 +79,8 @@ const CheckboxFacet = (props) => {
                             ...(checked ? [value] : []),
                           ]
                         : checked
-                          ? value
-                          : null,
+                        ? value
+                        : null,
                     )
                   }
                 />
diff --git a/src/customizations/volto/components/manage/Blocks/Search/components/Facets.jsx b/src/customizations/volto/components/manage/Blocks/Search/components/Facets.jsx
index 20e50eed..f04ca5a1 100644
--- a/src/customizations/volto/components/manage/Blocks/Search/components/Facets.jsx
+++ b/src/customizations/volto/components/manage/Blocks/Search/components/Facets.jsx
@@ -2,7 +2,10 @@ import React, { useState, useMemo } from 'react';
 import { Button, Grid } from 'semantic-ui-react';
 import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions';
 import config from '@plone/volto/registry';
-import { hasNonValueOperation, hasDateOperation } from '../utils';
+import {
+  hasNonValueOperation,
+  hasDateOperation,
+} from '@plone/volto/src/components/manage/Blocks/Search/utils';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
@@ -106,8 +109,9 @@ const Facets = (props) => {
 
           let value = stateToValue({ facetSettings, index, selectedValue });
 
-          const { rewriteOptions = (name, options) => options } =
-            search.extensions.facetWidgets;
+          const {
+            rewriteOptions = (name, options) => options,
+          } = search.extensions.facetWidgets;
 
           return FacetWrapper && (isEditMode || showFacet(index)) ? (
             <FacetWrapper
@@ -157,8 +161,8 @@ const Facets = (props) => {
                 ? intl.formatMessage(messages.showFilters)
                 : intl.formatMessage(messages.moreFilters)
               : advancedFilters === 2
-                ? intl.formatMessage(messages.hideFilters)
-                : intl.formatMessage(messages.lessFilters)}
+              ? intl.formatMessage(messages.hideFilters)
+              : intl.formatMessage(messages.lessFilters)}
           </Button>
         </Grid.Column>
       )}
diff --git a/src/customizations/volto/components/manage/Blocks/Search/hocs/withSearch.jsx b/src/customizations/volto/components/manage/Blocks/Search/hocs/withSearch.jsx
index a62497ac..2f98fb8d 100644
--- a/src/customizations/volto/components/manage/Blocks/Search/hocs/withSearch.jsx
+++ b/src/customizations/volto/components/manage/Blocks/Search/hocs/withSearch.jsx
@@ -37,8 +37,9 @@ function getInitialState(
   sortOnParam,
   sortOrderParam,
 ) {
-  const { types: facetWidgetTypes } =
-    config.blocks.blocksConfig.search.extensions.facetWidgets;
+  const {
+    types: facetWidgetTypes,
+  } = config.blocks.blocksConfig.search.extensions.facetWidgets;
   const facetSettings = data?.facets || [];
 
   return {
@@ -100,8 +101,9 @@ function normalizeState({
   sortOrder,
   facetSettings, // data.facets extracted from block data
 }) {
-  const { types: facetWidgetTypes } =
-    config.blocks.blocksConfig.search.extensions.facetWidgets;
+  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.

From 1d52333f2ae34f3edc0d3cf8cf6144aaac168041 Mon Sep 17 00:00:00 2001
From: Dobricean Ioan Dorian <dobriceanionut1408@gmail.com>
Date: Mon, 11 Mar 2024 09:28:36 +0200
Subject: [PATCH 10/12] fix tests

---
 .../manage/Blocks/Search/components/SelectFacet.jsx        | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/customizations/volto/components/manage/Blocks/Search/components/SelectFacet.jsx b/src/customizations/volto/components/manage/Blocks/Search/components/SelectFacet.jsx
index f43348d7..4942edb1 100644
--- a/src/customizations/volto/components/manage/Blocks/Search/components/SelectFacet.jsx
+++ b/src/customizations/volto/components/manage/Blocks/Search/components/SelectFacet.jsx
@@ -5,12 +5,15 @@ import {
   DropdownIndicator,
   MultiValueContainer,
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
-import { selectTheme, customSelectStyles } from './SelectStyling';
+import {
+  selectTheme,
+  customSelectStyles,
+} from '@plone/volto/components/manage/Blocks/Search/components/SelectStyling';
 import {
   selectFacetSchemaEnhancer,
   selectFacetStateToValue,
   selectFacetValueToQuery,
-} from './base';
+} from '@plone/volto/components/manage/Blocks/Search/components/base';
 
 const SelectFacet = (props) => {
   const {

From 86953d9c964154be7ce934fb87146a330305eb69 Mon Sep 17 00:00:00 2001
From: Dobricean Ioan Dorian <dobriceanionut1408@gmail.com>
Date: Mon, 11 Mar 2024 09:43:58 +0200
Subject: [PATCH 11/12] fix tests

---
 .../manage/Blocks/Search/components/Facets.jsx   |  5 +----
 .../components/manage/Blocks/Search/utils.js     | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 src/customizations/volto/components/manage/Blocks/Search/utils.js

diff --git a/src/customizations/volto/components/manage/Blocks/Search/components/Facets.jsx b/src/customizations/volto/components/manage/Blocks/Search/components/Facets.jsx
index f04ca5a1..f42ee7ac 100644
--- a/src/customizations/volto/components/manage/Blocks/Search/components/Facets.jsx
+++ b/src/customizations/volto/components/manage/Blocks/Search/components/Facets.jsx
@@ -2,10 +2,7 @@ import React, { useState, useMemo } from 'react';
 import { Button, Grid } from 'semantic-ui-react';
 import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions';
 import config from '@plone/volto/registry';
-import {
-  hasNonValueOperation,
-  hasDateOperation,
-} from '@plone/volto/src/components/manage/Blocks/Search/utils';
+import { hasNonValueOperation, hasDateOperation } from '../utils';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
diff --git a/src/customizations/volto/components/manage/Blocks/Search/utils.js b/src/customizations/volto/components/manage/Blocks/Search/utils.js
new file mode 100644
index 00000000..bab89c4c
--- /dev/null
+++ b/src/customizations/volto/components/manage/Blocks/Search/utils.js
@@ -0,0 +1,16 @@
+export const NONVALUE_OPERATIONS = new Set([
+  'plone.app.querystring.operation.boolean.isFalse',
+  'plone.app.querystring.operation.boolean.isTrue',
+]);
+
+export const DATE_OPERATIONS = new Set([
+  'plone.app.querystring.operation.date.between',
+]);
+
+export const hasNonValueOperation = (ops) => {
+  return ops.filter((x) => NONVALUE_OPERATIONS.has(x)).length > 0;
+};
+
+export const hasDateOperation = (ops) => {
+  return ops.filter((x) => DATE_OPERATIONS.has(x)).length > 0;
+};

From cd7be54fcd01da0a0717d343ee477e3ff8299364 Mon Sep 17 00:00:00 2001
From: Dobricean Ioan Dorian <dobriceanionut1408@gmail.com>
Date: Mon, 11 Mar 2024 10:08:12 +0200
Subject: [PATCH 12/12] fix tests

---
 .../manage/Blocks/Search/components/CheckboxFacet.jsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/customizations/volto/components/manage/Blocks/Search/components/CheckboxFacet.jsx b/src/customizations/volto/components/manage/Blocks/Search/components/CheckboxFacet.jsx
index 97e1a6f6..7162868f 100644
--- a/src/customizations/volto/components/manage/Blocks/Search/components/CheckboxFacet.jsx
+++ b/src/customizations/volto/components/manage/Blocks/Search/components/CheckboxFacet.jsx
@@ -4,7 +4,7 @@ import {
   selectFacetSchemaEnhancer,
   selectFacetStateToValue,
   selectFacetValueToQuery,
-} from '@plone/volto/src/components/manage/Blocks/Search/components/base';
+} from '@plone/volto/components/manage/Blocks/Search/components/base';
 
 /**
  * A facet that uses radio/checkboxes to provide an explicit list of values for