@bigbinary/neeto-filters-frontend 3.0.9 → 3.0.11

package/dist/index.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect, useTransition, useMemo } from 'react';
 import classnames from 'classnames';
 import i18next, { t as t$1 } from 'i18next';
-import { capitalize, removeBy, findBy, isNotEmpty, humanize, noop as noop$1, toLabelAndValue, replaceBy, isPresent, existsBy, isNotPresent, filterBy } from '@bigbinary/neeto-cist';
+import { capitalize, removeBy, findBy, isNotEmpty, humanize, hyphenate, noop as noop$1, toLabelAndValue, replaceBy, isPresent, existsBy, isNotPresent, filterBy } from '@bigbinary/neeto-cist';
 import { useHotKeys, useMutationWithInvalidation, useQueryParams, useDebounce, withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { getQueryParams, dateFormat, buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
 import { Tooltip, Typography, Dropdown as Dropdown$2, Button, Pane as Pane$1, Alert, Select, DatePicker, TimePicker, Input as Input$1, Accordion, Spinner } from '@bigbinary/neetoui';
@@ -90,21 +90,6 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var SHORTCUTS = {
-  closePane: {
-    sequence: "escape",
-    description: t$1("neetoFilters.shortcuts.closePane")
-  },
-  deleteBlock: {
-    sequence: "backspace",
-    description: t$1("neetoFilters.shortcuts.deleteBlock")
-  },
-  openFilterPane: {
-    sequence: "enter",
-    description: t$1("neetoFilters.shortcuts.openFilterPane")
-  }
-};
-
 var SEGMENTS_BASE_URL = "/neeto_filters/segments";
 var DATE_OPTIONS = [{
   label: "Today",
@@ -184,6 +169,23 @@ var DATE_RULES = {
   yesterday: "on",
   "all-time": "before"
 };
+var SEARCH_TERM_KEY = "search_term";
+var SEGMENT_ID_KEY = "segment_id";
+
+var SHORTCUTS = {
+  closePane: {
+    sequence: "escape",
+    description: t$1("neetoFilters.shortcuts.closePane")
+  },
+  deleteBlock: {
+    sequence: "backspace",
+    description: t$1("neetoFilters.shortcuts.deleteBlock")
+  },
+  openFilterPane: {
+    sequence: "enter",
+    description: t$1("neetoFilters.shortcuts.openFilterPane")
+  }
+};
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -339,6 +341,11 @@ var standardizeColumnType = function standardizeColumnType(kind) {
   }
   return kind;
 };
+var getSnakeCasedQueryParams = function getSnakeCasedQueryParams() {
+  return getQueryParams({
+    toCamelCase: false
+  });
+};
 var isBoolean = function isBoolean(type) {
   return type === "boolean" || type === "custom.boolean";
 };
@@ -483,7 +490,7 @@ var buildUpdatedFilter = function buildUpdatedFilter(_ref8) {
 };
 var buildFiltersFromSearchParams = function buildFiltersFromSearchParams(columns) {
   var skipEmpty = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  var searchParams = getQueryParams();
+  var searchParams = getSnakeCasedQueryParams();
   return columns.map(function (column) {
     var value = searchParams[column.key];
     var defaultType = column.defaultType || column.type;
@@ -493,7 +500,7 @@ var buildFiltersFromSearchParams = function buildFiltersFromSearchParams(columns
       }, column);
     } else if (isNil(value) || value === "" || column.key === "keyword") {
       return null;
-    } else if (column.key === "search_term") {
+    } else if (column.key === SEARCH_TERM_KEY) {
       if (isNil(column.node)) return null;
       return mergeLeft({
         value: value,
@@ -650,7 +657,7 @@ var buildFiltersPayload = function buildFiltersPayload(filters) {
   var payload = removeBy({
     value: ""
   }, filters).map(function (filter) {
-    if (filter.key === "search_term" && isMultiModelFilter(filter)) {
+    if (filter.key === SEARCH_TERM_KEY && isMultiModelFilter(filter)) {
       return splitFilter(filter);
     }
     var filterPayload = omit(["key", "label", "values", "setValue"], filter);
@@ -684,14 +691,14 @@ var buildSegmentsPayload = function buildSegmentsPayload(filters) {
   var payload = removeBy({
     value: ""
   }, filters).map(function (filter) {
-    if (filter.key === "search_term") {
+    if (filter.key === SEARCH_TERM_KEY) {
       return false;
     }
     var filterPayload = omit(["label", "values", "setValue", "defaultValue"], filter);
     var _filterPayload$defaul2 = filterPayload.defaultType,
       defaultType = _filterPayload$defaul2 === void 0 ? filterPayload.type : _filterPayload$defaul2,
       value = filterPayload.value;
-    if (filter.key !== "search_term" && isMultiModelFilter(filterPayload)) {
+    if (filter.key !== SEARCH_TERM_KEY && isMultiModelFilter(filterPayload)) {
       throw i18next.t("neetoFilters.errors.cannotPassMultipleModels");
     }
     if (isMulti(defaultType)) {
@@ -701,7 +708,7 @@ var buildSegmentsPayload = function buildSegmentsPayload(filters) {
     }
     return filterPayload;
   });
-  var searchParams = getQueryParams();
+  var searchParams = getSnakeCasedQueryParams();
   var modifiedPayload = childrenKeys.reduce(function (acc, key) {
     if (has(key, searchParams)) {
       var filterPayload = {
@@ -723,7 +730,7 @@ var buildFiltersFromURL = function buildFiltersFromURL(columns) {
   })));
 };
 var buildSelectorsFromURL = function buildSelectorsFromURL(columns) {
-  var searchParams = getQueryParams();
+  var searchParams = getSnakeCasedQueryParams();
   var selectors = {};
   columns.filter(function (_ref9) {
     var node = _ref9.node;
@@ -794,7 +801,7 @@ var createUrlParamString = function createUrlParamString(_ref15) {
     _filter$defaultType = filter.defaultType,
     defaultType = _filter$defaultType === void 0 ? filter.type : _filter$defaultType,
     rule = filter.rule;
-  if (key === "search_term") {
+  if (key === SEARCH_TERM_KEY) {
     return value;
   } else if (isDigit(defaultType) || isText(defaultType)) {
     return "".concat(value, "+rule-").concat(rule);
@@ -819,9 +826,9 @@ var buildUrlFromFilters = function buildUrlFromFilters(_ref16) {
     isClearAll = _ref16$isClearAll === void 0 ? false : _ref16$isClearAll,
     _ref16$childrenKeys = _ref16.childrenKeys,
     childrenKeys = _ref16$childrenKeys === void 0 ? [] : _ref16$childrenKeys;
-  var searchParams = getQueryParams();
+  var searchParams = getSnakeCasedQueryParams();
   var isKeywordFilterPresent = findBy({
-    key: "search_term"
+    key: SEARCH_TERM_KEY
   }, filters);
   columns.forEach(function (_ref17) {
     var key = _ref17.key,
@@ -832,18 +839,18 @@ var buildUrlFromFilters = function buildUrlFromFilters(_ref16) {
     childrenKeys.forEach(function (key) {
       return delete searchParams[key];
     });
-    delete searchParams["segmentId"];
+    delete searchParams[SEGMENT_ID_KEY];
   }
   var defaultFilters = buildDefaultFilters(columns, filters);
-  isKeywordFilterPresent && delete searchParams["search_term"];
+  isKeywordFilterPresent && delete searchParams[SEARCH_TERM_KEY];
   concat(filters, defaultFilters).forEach(function (filter) {
     searchParams[filter.key] = createUrlParamString({
       filter: filter,
       columns: columns
     });
   });
-  if (isEmpty(omit(["segmentId"], searchParams))) {
-    delete searchParams["segmentId"];
+  if (isEmpty(omit([SEGMENT_ID_KEY], searchParams))) {
+    delete searchParams[SEGMENT_ID_KEY];
   }
   return new URLSearchParams(searchParams).toString();
 };
@@ -865,33 +872,33 @@ var buildUrlFromSegment = function buildUrlFromSegment(_ref19) {
   var columns = _ref19.columns,
     filters = _ref19.filters,
     id = _ref19.id;
-  var searchParams = getQueryParams();
+  var searchParams = getSnakeCasedQueryParams();
   columns.forEach(function (_ref20) {
     var key = _ref20.key,
       defaultValue = _ref20.defaultValue;
     return !defaultValue && delete searchParams[key];
   });
+  delete searchParams[SEARCH_TERM_KEY];
   var defaultFilters = buildDefaultFilters(columns, filters);
-  delete searchParams["searchTerm"];
-  concat(filters, defaultFilters).forEach(function (filter) {
-    isNotEmpty(id) && (searchParams["segmentId"] = id);
-    searchParams[filter.key] = createUrlParamStringForSegments({
+  var newSearchParams = concat(filters, defaultFilters).reduce(function (acc, filter) {
+    acc[filter.key] = createUrlParamStringForSegments({
       filter: filter,
       columns: columns
     });
-  });
-  return new URLSearchParams(searchParams).toString();
+    return acc;
+  }, isNotEmpty(id) ? _defineProperty({}, SEGMENT_ID_KEY, id) : {});
+  return new URLSearchParams(_objectSpread$4(_objectSpread$4({}, searchParams), newSearchParams)).toString();
 };
 var getSearchTermFromUrl = function getSearchTermFromUrl() {
-  return getQueryParams()["search_term"] || "";
-};
-var buildFilterColumnsFromFields = function buildFilterColumnsFromFields(_ref21) {
-  var fields = _ref21.fields,
-    _ref21$selectedFields = _ref21.selectedFields,
-    selectedFields = _ref21$selectedFields === void 0 ? [] : _ref21$selectedFields,
-    _ref21$showRuleSelect = _ref21.showRuleSelector,
-    showRuleSelector = _ref21$showRuleSelect === void 0 ? false : _ref21$showRuleSelect,
-    groupName = _ref21.groupName;
+  return getQueryParams().searchTerm || "";
+};
+var buildFilterColumnsFromFields = function buildFilterColumnsFromFields(_ref22) {
+  var fields = _ref22.fields,
+    _ref22$selectedFields = _ref22.selectedFields,
+    selectedFields = _ref22$selectedFields === void 0 ? [] : _ref22$selectedFields,
+    _ref22$showRuleSelect = _ref22.showRuleSelector,
+    showRuleSelector = _ref22$showRuleSelect === void 0 ? false : _ref22$showRuleSelect,
+    groupName = _ref22.groupName;
   return fields.reduce(function (columns, field) {
     if (isEmpty(selectedFields) || selectedFields.includes(field.name)) {
       var id = field.id,
@@ -1001,7 +1008,7 @@ var buildRuleValue = function buildRuleValue(_ref) {
   return "";
 };
 var hasOnlyKeywordFilter = function hasOnlyKeywordFilter(filters) {
-  return filters.length === 1 && filters[0].key === "search_term";
+  return filters.length === 1 && filters[0].key === SEARCH_TERM_KEY;
 };
 
 var Block = function Block(_ref) {
@@ -1039,7 +1046,7 @@ var Block = function Block(_ref) {
     theme: "light"
   }, /*#__PURE__*/React.createElement("div", {
     className: "neeto-filters-bar__block",
-    "data-cy": "neeto-filters-".concat(key, "-block"),
+    "data-cy": "neeto-filters-".concat(hyphenate(key), "-block"),
     tabIndex: 0,
     ref: function ref(node) {
       deleteBlockHotKeyRef.current = node;
@@ -1058,7 +1065,7 @@ var Block = function Block(_ref) {
   }, blockContent), !defaultValue && /*#__PURE__*/React.createElement("div", {
     className: "neeto-filters-bar__block-close"
   }, /*#__PURE__*/React.createElement(Close, {
-    "data-cy": "neeto-filters-".concat(key, "-block-close-btn"),
+    "data-cy": "neeto-filters-".concat(hyphenate(key), "-block-close-btn"),
     size: 16,
     strokeWidth: 2,
     onClick: function onClick(event) {
@@ -1084,7 +1091,7 @@ var ChildBlock = function ChildBlock(_ref) {
   });
   return /*#__PURE__*/React.createElement("div", {
     className: "neeto-filters-bar__block",
-    "data-cy": "neeto-filters-".concat(childKey, "-block"),
+    "data-cy": "neeto-filters-".concat(hyphenate(childKey), "-block"),
     tabIndex: 0,
     ref: function ref(node) {
       deleteBlockHotKeyRef.current = node;
@@ -1099,7 +1106,7 @@ var ChildBlock = function ChildBlock(_ref) {
   }, childKey), /*#__PURE__*/React.createElement("div", {
     className: "neeto-filters-bar__block-close"
   }, /*#__PURE__*/React.createElement(Close, {
-    "data-cy": "neeto-filters-".concat(childKey, "-block-close-btn"),
+    "data-cy": "neeto-filters-".concat(hyphenate(childKey), "-block-close-btn"),
     size: 16,
     strokeWidth: 2,
     onClick: function onClick(event) {
@@ -1369,14 +1376,16 @@ var Bar = function Bar(_ref) {
     var _useTranslation = useTranslation(),
       t = _useTranslation.t;
     var initialRenderRef = useRef(true);
-    var searchParams = useQueryParams();
-    var keywordValue = searchParams.search_term || "";
+    var searchParams = useQueryParams({
+      toCamelCase: false
+    });
+    var keywordValue = searchParams[SEARCH_TERM_KEY] || "";
     var keywordFilter = _objectSpread$2(_objectSpread$2({
       type: "text",
       rule: "contains",
       label: t("neetoFilters.common.searchTerm")
     }, keyword), {}, {
-      key: "search_term",
+      key: SEARCH_TERM_KEY,
       value: keywordValue
     });
     var filters = buildFiltersFromSearchParams(isKeywordFilterPresent(keywordFilter) && isNotEmpty(keywordValue) ? [keywordFilter].concat(_toConsumableArray(columns)) : columns);
@@ -1397,14 +1406,14 @@ var Bar = function Bar(_ref) {
       });
     };
     var handleDelete = function handleDelete(key) {
-      if (key === "search_term") {
-        var params = omit(["search_term"], getQueryParams());
+      if (key === SEARCH_TERM_KEY) {
+        var params = omit([SEARCH_TERM_KEY], getSnakeCasedQueryParams());
         var pathname = window.location.pathname;
         history.push(buildUrl(pathname, params));
         return;
       }
       if (childrenKeys.includes(key)) {
-        var _params = omit([key], getQueryParams());
+        var _params = omit([key], getSnakeCasedQueryParams());
         var _pathname = window.location.pathname;
         history.push(buildUrl(_pathname, _params));
       }
@@ -1414,7 +1423,7 @@ var Bar = function Bar(_ref) {
       handleSubmit(newFilters);
     };
     var handleClearAll = function handleClearAll() {
-      var params = isKeywordFilterPresent(keywordFilter) ? omit(["search_term"], getQueryParams()) : getQueryParams();
+      var params = isKeywordFilterPresent(keywordFilter) ? omit([SEARCH_TERM_KEY], getSnakeCasedQueryParams()) : getSnakeCasedQueryParams();
       var pathname = window.location.pathname;
       history.push(buildUrl(pathname, params));
       handleSubmit([], true);
@@ -2449,7 +2458,7 @@ var useFilters = function useFilters(_ref) {
   };
   var handleChangesInURL = function handleChangesInURL() {
     var defaultFilters = buildDefaultFilters(columns, filters);
-    var searchParams = getQueryParams();
+    var searchParams = getSnakeCasedQueryParams();
     var keys = pluck("key", append(keywordFilter, columns));
     if (keys.every(function (key) {
       return isNil(searchParams[key]);
@@ -2610,10 +2619,10 @@ var Boolean = function Boolean(_ref) {
     options: options,
     value: value,
     isClearable: true,
-    "data-cy": "neeto-filters-".concat(key, "-filter"),
+    "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
     strategy: "fixed",
     placeholder: t("neetoFilters.messages.selectOption", {
-      resource: label.toLocaleLowerCase()
+      resource: label
     }),
     onChange: handleChange
   }, otherProps));
@@ -2681,16 +2690,16 @@ var Datetime = function Datetime(_ref) {
     autoFocus: autoFocus,
     label: label,
     isClearable: true,
-    "data-cy": "neeto-filters-".concat(key, "-filter"),
+    "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
     options: DATE_OPTIONS,
     strategy: "fixed",
     value: selectedRule,
     placeholder: t("neetoFilters.messages.selectResource", {
-      resource: label.toLocaleLowerCase()
+      resource: label
     }),
     onChange: handleChange
   }), isDatePickerShown && /*#__PURE__*/React.createElement(DatePicker, _extends({
-    "data-cy": "neeto-filters-".concat(key, "-date-range"),
+    "data-cy": "neeto-filters-".concat(hyphenate(key), "-date-range"),
     getPopupContainer: prop("parentNode"),
     type: (selectedRule === null || selectedRule === void 0 ? void 0 : selectedRule.value) === "custom-date-range" ? "range" : "date",
     value: getDateValue(filter === null || filter === void 0 ? void 0 : filter.value, selectedRule),
@@ -2744,12 +2753,12 @@ var Dropdown = function Dropdown(_ref) {
     label: label,
     options: options,
     value: value,
-    "data-cy": "neeto-filters-".concat(key, "-filter"),
+    "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
     isClearable: !defaultValue && isClearable,
     isMulti: isMulti(defaultType),
     strategy: "fixed",
     placeholder: t("neetoFilters.messages.selectResource", {
-      resource: label.toLocaleLowerCase()
+      resource: label
     }),
     onChange: handleChange
   }, otherProps));
@@ -2823,7 +2832,7 @@ var SingleDatetime = function SingleDatetime(_ref) {
     className: "neeto-filters-pane-filter__item-wrapper"
   }, /*#__PURE__*/React.createElement(Select, {
     label: label,
-    "data-cy": "neeto-filters-".concat(key, "-filter-rule"),
+    "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter-rule"),
     defaultValue: SINGLE_DATE_OPTIONS[0],
     options: SINGLE_DATE_OPTIONS,
     strategy: "fixed",
@@ -2832,7 +2841,7 @@ var SingleDatetime = function SingleDatetime(_ref) {
   }), /*#__PURE__*/React.createElement(DatePicker, _extends({
     autoFocus: autoFocus,
     value: value,
-    "data-cy": "neeto-filters-".concat(key, "-filter"),
+    "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
     getPopupContainer: prop("parentNode"),
     type: datePickerType,
     onChange: handleChange
@@ -2908,7 +2917,7 @@ var SingleTime = function SingleTime(_ref) {
     value: value,
     use12Hours: true,
     className: "w-full",
-    "data-cy": "neeto-filters-".concat(key, "-filter"),
+    "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
     format: "h:mm A",
     getPopupContainer: prop("parentNode"),
     type: timePickerType,
@@ -2990,7 +2999,7 @@ var Text = function Text(_ref) {
     className: "neeto-filters-pane-filter__item-wrapper"
   }, showRuleSelector && /*#__PURE__*/React.createElement(Select, {
     label: label,
-    "data-cy": "neeto-filters-".concat(key, "-filter-rule"),
+    "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter-rule"),
     defaultValue: ruleOptions[0],
     options: ruleOptions,
     strategy: "fixed",
@@ -2998,12 +3007,12 @@ var Text = function Text(_ref) {
     onChange: handleRuleChange
   }), /*#__PURE__*/React.createElement(Input$1, _extends({
     autoFocus: autoFocus,
-    "data-cy": "neeto-filters-".concat(key, "-filter"),
+    "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
     label: !showRuleSelector && label,
     type: inputType,
     value: inputValue,
     placeholder: t("neetoFilters.messages.enterResource", {
-      resource: label.toLocaleLowerCase()
+      resource: label
     }),
     onChange: function onChange(event) {
       return setInputValue(event.target.value);
@@ -3059,16 +3068,16 @@ var Time = function Time(_ref) {
     label: label,
     value: value,
     isClearable: true,
-    "data-cy": "neeto-filters-".concat(key, "-filter"),
+    "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
     options: TIME_OPTIONS,
     strategy: "fixed",
     placeholder: t("neetoFilters.messages.selectResource", {
-      resource: label.toLocaleLowerCase()
+      resource: label
     }),
     onChange: handleChange
   }), isCustomTimeRangeShown && /*#__PURE__*/React.createElement(TimePicker, _extends({
     use12Hours: true,
-    "data-cy": "neeto-filters-".concat(key, "-date-range"),
+    "data-cy": "neeto-filters-".concat(hyphenate(key), "-date-range"),
     format: "h:mm A",
     getPopupContainer: prop("parentNode"),
     type: "range",
@@ -3175,7 +3184,9 @@ var Pane = function Pane(_ref) {
     childrenKeys = _ref$childrenKeys === void 0 ? [] : _ref$childrenKeys,
     children = _ref.children,
     otherProps = _objectWithoutProperties(_ref, _excluded);
-  var searchParams = useQueryParams();
+  var searchParams = useQueryParams({
+    toCamelCase: false
+  });
   var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     searchTerm = _useState2[0],
@@ -3199,8 +3210,8 @@ var Pane = function Pane(_ref) {
     rule: "contains",
     label: t("neetoFilters.common.searchTerm")
   }, keyword), {}, {
-    key: "search_term",
-    value: searchParams.search_term || ""
+    key: SEARCH_TERM_KEY,
+    value: searchParams[SEARCH_TERM_KEY] || ""
   });
   var filters = useFilters({
     onFiltersChange: onChange,
@@ -3222,11 +3233,15 @@ var Pane = function Pane(_ref) {
     });
   };
   var handleClearAll = function handleClearAll() {
-    var params = isKeywordFilterPresent(keywordFilter) ? omit(["search_term"], getQueryParams()) : getQueryParams();
+    var params = isKeywordFilterPresent(keywordFilter) ? omit([SEARCH_TERM_KEY], getSnakeCasedQueryParams()) : getSnakeCasedQueryParams();
     var pathname = window.location.pathname;
     history.push(buildUrl(pathname, params));
     handleChange([], true);
   };
+  var handleClearTermAndClose = function handleClearTermAndClose() {
+    setSearchTerm("");
+    onClose();
+  };
   var handleClose = function handleClose() {
     columns.forEach(function (_ref2) {
       var key = _ref2.key;
@@ -3235,7 +3250,7 @@ var Pane = function Pane(_ref) {
       }, filters);
       if ((filter === null || filter === void 0 ? void 0 : filter.value) === "") delete searchParams[key];
     });
-    onClose();
+    handleClearTermAndClose();
   };
   var isClearFiltersDisabled = !filters.some(function (_ref3) {
     var value = _ref3.value,
@@ -3270,10 +3285,10 @@ var Pane = function Pane(_ref) {
     return /*#__PURE__*/React.createElement(Item, {
       column: column,
       filters: filters,
-      onClose: onClose,
       autoFocus: column.key === isOpen,
       key: column.key,
-      onChange: handleChange
+      onChange: handleChange,
+      onClose: handleClearTermAndClose
     });
   }), isPresent(groupedColumns) && /*#__PURE__*/React.createElement(Accordion, {
     defaultActiveKey: groupedColumns.findIndex(function (_ref4) {
@@ -3293,10 +3308,10 @@ var Pane = function Pane(_ref) {
       return /*#__PURE__*/React.createElement(Item, {
         column: column,
         filters: filters,
-        onClose: onClose,
         autoFocus: column.key === isOpen,
         key: column.key,
-        onChange: handleChange
+        onChange: handleChange,
+        onClose: handleClearTermAndClose
       });
     }));
   })), isEmpty(ungroupedColumns) && isEmpty(groupedColumns) && /*#__PURE__*/React.createElement(Typography, {
@@ -3308,7 +3323,7 @@ var Pane = function Pane(_ref) {
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
     "data-cy": "neeto-filters-done-btn",
     label: t("neetoFilters.common.done"),
-    onClick: onClose
+    onClick: handleClearTermAndClose
   }), /*#__PURE__*/React.createElement(Button, {
     "data-cy": "neeto-filters-clear-btn",
     disabled: isClearFiltersDisabled,
@@ -3567,12 +3582,11 @@ var MenuBlocks = function MenuBlocks(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     showAll = _useState2[0],
     setShowAll = _useState2[1];
-  var location = useLocation();
   var history = useHistory();
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _Object$fromEntries = Object.fromEntries(new URLSearchParams(location.search)),
-    segmentId = _Object$fromEntries.segmentId;
+  var _getQueryParams = getQueryParams(),
+    segmentId = _getQueryParams.segmentId;
   var appliedFilters = buildFiltersFromURL(columns);
   var _useFetchSegments = useFetchSegments({
       entity: entity