@bigbinary/neeto-filters-frontend 4.0.0 → 4.1.0

package/dist/cjs/Bar.js

@@ -0,0 +1,681 @@
+'use strict';
+
+var constants = require('../constants-fb0f688a.js');
+var React = require('react');
+var reactQuery = require('@tanstack/react-query');
+var classnames = require('classnames');
+var i18next = require('i18next');
+var neetoCist = require('@bigbinary/neeto-cist');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var ramda = require('ramda');
+var index$1 = require('../index-03114015.js');
+var useSegmentsApi = require('../useSegmentsApi-003055eb.js');
+var utils$1 = require('@bigbinary/neeto-commons-frontend/utils');
+var Button = require('@bigbinary/neetoui/Button');
+var reactI18next = require('react-i18next');
+var reactRouterDom = require('react-router-dom');
+var useHotkeys = require('@bigbinary/neeto-hotkeys');
+var Close = require('@bigbinary/neeto-icons/Close');
+var Tooltip = require('@bigbinary/neetoui/Tooltip');
+var Typography = require('@bigbinary/neetoui/Typography');
+var index = require('../index-2d1d9838.js');
+var dayjs = require('dayjs');
+var utils = require('../utils-61b4223d.js');
+var jsxRuntime = require('react/jsx-runtime');
+var Dropdown = require('@bigbinary/neetoui/Dropdown');
+require('@bigbinary/neeto-icons/Delete');
+require('@bigbinary/neetoui/Accordion');
+require('@bigbinary/neetoui/Pane');
+require('@bigbinary/neetoui/formik/ActionBlock');
+require('@bigbinary/neetoui/formik/Form');
+require('@bigbinary/neetoui/formik/Input');
+require('react-router-dom/cjs/react-router-dom.min');
+require('@bigbinary/neeto-icons/Plus');
+require('@bigbinary/neetoui/Select');
+require('yup');
+require('axios');
+require('@bigbinary/neetoui/DatePicker');
+require('@bigbinary/neetoui/TimePicker');
+require('@bigbinary/neetoui/Input');
+require('@bigbinary/neetoui/TreeSelect');
+require('dayjs/plugin/timezone');
+require('dayjs/plugin/utc');
+require('dayjs/plugin/weekday');
+require('@bigbinary/neeto-icons/Help');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var useHotkeys__default = /*#__PURE__*/_interopDefaultLegacy(useHotkeys);
+var Close__default = /*#__PURE__*/_interopDefaultLegacy(Close);
+var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
+var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown);
+
+var DEFAULT_SEGMENTS_CACHE = {
+  segments: []
+};
+var SEGMENT_ACTIONS = {
+  EDIT: "edit",
+  CREATE: "create"
+};
+
+var SHORTCUTS = {
+  closePane: {
+    sequence: "escape",
+    description: i18next.t("neetoFilters.shortcuts.closePane")
+  },
+  deleteBlock: {
+    sequence: "backspace",
+    description: i18next.t("neetoFilters.shortcuts.deleteBlock")
+  },
+  openFilterPane: {
+    sequence: "enter",
+    description: i18next.t("neetoFilters.shortcuts.openFilterPane")
+  }
+};
+
+var buildCustomDateValue = function buildCustomDateValue(value) {
+  var isBeforeOrAfter = Math.abs(dayjs__default["default"](value[1]).diff(dayjs__default["default"](value[0]), "year")) >= 90;
+  if (isBeforeOrAfter) {
+    var currentMoment = dayjs__default["default"]();
+    var diffWithStart = Math.abs(currentMoment.diff(dayjs__default["default"](value[0]), "year"));
+    var diffWithEnd = Math.abs(currentMoment.diff(dayjs__default["default"](value[1]), "year"));
+    return diffWithStart < diffWithEnd ? "after-".concat(utils$1.dateFormat.date(dayjs__default["default"](value[0]).subtract(1, "day"))) : "before-".concat(utils$1.dateFormat.date(dayjs__default["default"](value[1]).add(1, "day")));
+  }
+  return value.map(utils$1.dateFormat.date).join(" - ");
+};
+var buildFilterValue = function buildFilterValue(filter) {
+  var _findBy2;
+  var _filter$defaultType = filter.defaultType,
+    defaultType = _filter$defaultType === void 0 ? filter.type : _filter$defaultType,
+    value = filter.value,
+    rule = filter.rule,
+    _filter$values = filter.values,
+    initialValues = _filter$values === void 0 ? [] : _filter$values;
+  var values = initialValues.map(ramda.modify("value", function (value) {
+    return value.toString();
+  }));
+  if (utils.isDate(defaultType) && utils.isCustomDateRange(value)) {
+    return buildCustomDateValue(value);
+  } else if (utils.isTime(defaultType) && utils.isCustomTimeRange(value)) {
+    return value.map(utils$1.dateFormat.time).join(" - ");
+  } else if (utils.isDate(defaultType) || utils.isTime(defaultType)) {
+    return neetoCist.humanize(value);
+  } else if (utils.isMulti(defaultType) || utils.isTreeSelect(defaultType)) {
+    return value.map(function (value) {
+      var _findBy;
+      return ((_findBy = neetoCist.findBy({
+        value: value
+      }, values)) === null || _findBy === void 0 ? void 0 : _findBy.label) || value;
+    }).join(", ");
+  } else if (utils.isSingleDate(defaultType)) {
+    return rule === "between" ? value.map(utils$1.dateFormat.date).join(" - ") : utils$1.dateFormat.date(value);
+  } else if (utils.isSingleTime(defaultType)) {
+    return rule === "between" ? value.map(utils$1.dateFormat.time).join(" - ") : utils$1.dateFormat.time(value);
+  } else if (utils.isBoolean(defaultType)) {
+    return utils.getLabelFromBool({
+      value: value,
+      values: values
+    });
+  }
+  return ((_findBy2 = neetoCist.findBy({
+    value: value
+  }, values)) === null || _findBy2 === void 0 ? void 0 : _findBy2.label) || value;
+};
+var buildRuleValue = function buildRuleValue(_ref) {
+  var rule = _ref.rule,
+    defaultType = _ref.defaultType;
+  if (utils.isText(defaultType)) {
+    return neetoCist.findBy({
+      value: rule
+    }, utils.TEXT_RULES).label;
+  } else if (utils.isDigit(defaultType)) {
+    return neetoCist.findBy({
+      value: rule
+    }, utils.NUMBER_RULES).label;
+  } else if (utils.isSingleDate(defaultType)) {
+    return neetoCist.findBy({
+      value: rule
+    }, constants.SINGLE_DATE_OPTIONS).label;
+  } else if (utils.isSingleTime(defaultType)) {
+    return neetoCist.findBy({
+      value: rule
+    }, constants.SINGLE_TIME_OPTIONS).label;
+  } else if (utils.isMulti(defaultType) || utils.isSingle(defaultType) || utils.isTreeSelect(defaultType)) {
+    return index.isRuleEmpty(rule) ? i18next.t("neetoFilters.rules.isEmpty") : "";
+  }
+  return "";
+};
+var hasOnlyKeywordFilter = function hasOnlyKeywordFilter(filters) {
+  return filters.length === 1 && filters[0].key === constants.SEARCH_TERM_KEY;
+};
+var deepCompare = function deepCompare(segments, filters) {
+  var comparisonHelper = function comparisonHelper(filters) {
+    return ramda.sortBy(ramda.prop("key"), neetoCist.removeBy({
+      key: constants.SEARCH_TERM_KEY
+    }, ramda.project(["key", "rule", "value", "label"], filters)));
+  };
+  return ramda.reject(function (filters) {
+    var segment = neetoCist.findBy({
+      key: filters.key
+    }, segments);
+    return segment && segment.value === filters.value;
+  }, comparisonHelper(filters));
+};
+
+var Block = function Block(_ref) {
+  var filter = _ref.filter,
+    handleDelete = _ref.handleDelete,
+    setIsPaneOpen = _ref.setIsPaneOpen;
+  var key = filter.key,
+    _filter$defaultType = filter.defaultType,
+    defaultType = _filter$defaultType === void 0 ? filter.type : _filter$defaultType,
+    label = filter.label,
+    rule = filter.rule,
+    defaultValue = filter.defaultValue;
+  var filterValue = buildFilterValue(filter);
+  var ruleContent = buildRuleValue({
+    rule: rule,
+    defaultType: defaultType
+  });
+  var blockLength = label.length + ruleContent.length + filterValue.length;
+  var toolTipDisabled = blockLength <= 50;
+  var blockContent = !toolTipDisabled ? "".concat(filterValue.slice(0, 50 - blockLength), "...") : filterValue;
+  var deleteBlockHotKeyRef = useHotkeys__default["default"](SHORTCUTS.deleteBlock.sequence, function () {
+    return handleDelete(key);
+  }, {
+    mode: "scoped"
+  });
+  var openFilterPaneHotKeyRef = useHotkeys__default["default"](SHORTCUTS.openFilterPane.sequence, function () {
+    return setIsPaneOpen(key);
+  }, {
+    mode: "scoped"
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(Tooltip__default["default"], {
+    content: filterValue,
+    disabled: toolTipDisabled,
+    position: "bottom",
+    theme: "light",
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "neeto-filters-bar__block",
+      "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-block"),
+      tabIndex: 0,
+      ref: function ref(node) {
+        deleteBlockHotKeyRef.current = node;
+        openFilterPaneHotKeyRef.current = node;
+      },
+      onClick: function onClick() {
+        return setIsPaneOpen(key);
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsxs(Typography__default["default"], {
+        style: "body2",
+        children: [label, ":"]
+      }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        className: "neeto-ui-text-gray-600",
+        style: "body2",
+        children: ruleContent
+      }), !index.isRuleEmpty(rule) && /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        style: "body2",
+        children: blockContent
+      }), !defaultValue && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "neeto-filters-bar__block-close",
+        children: /*#__PURE__*/jsxRuntime.jsx(Close__default["default"], {
+          "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-block-close-btn"),
+          size: 16,
+          strokeWidth: 2,
+          onClick: function onClick(event) {
+            event.stopPropagation();
+            handleDelete(key);
+          }
+        })
+      })]
+    })
+  });
+};
+
+var ChildBlock = function ChildBlock(_ref) {
+  var childKey = _ref.childKey,
+    setIsPaneOpen = _ref.setIsPaneOpen,
+    handleDelete = _ref.handleDelete;
+  var deleteBlockHotKeyRef = useHotkeys__default["default"](SHORTCUTS.deleteBlock.sequence, function () {
+    return handleDelete(childKey);
+  }, {
+    mode: "scoped"
+  });
+  var openFilterPaneHotKeyRef = useHotkeys__default["default"](SHORTCUTS.openFilterPane.sequence, function () {
+    return setIsPaneOpen(childKey);
+  }, {
+    mode: "scoped"
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "neeto-filters-bar__block",
+    "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(childKey), "-block"),
+    tabIndex: 0,
+    ref: function ref(node) {
+      deleteBlockHotKeyRef.current = node;
+      openFilterPaneHotKeyRef.current = node;
+    },
+    onClick: function onClick() {
+      return setIsPaneOpen(childKey);
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      style: "body2",
+      weight: "medium",
+      children: childKey
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-filters-bar__block-close",
+      children: /*#__PURE__*/jsxRuntime.jsx(Close__default["default"], {
+        "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(childKey), "-block-close-btn"),
+        size: 16,
+        strokeWidth: 2,
+        onClick: function onClick(event) {
+          event.stopPropagation();
+          handleDelete(childKey);
+        }
+      })
+    })]
+  });
+};
+
+var FilterBar = function FilterBar(_ref) {
+  var entity = _ref.entity,
+    filters = _ref.filters,
+    setIsSavePaneOpen = _ref.setIsSavePaneOpen,
+    setIsPaneOpen = _ref.setIsPaneOpen,
+    childrenKeys = _ref.childrenKeys,
+    nonHiddenFilters = _ref.nonHiddenFilters,
+    childrenFiltersApplied = _ref.childrenFiltersApplied,
+    keywordFilter = _ref.keywordFilter,
+    handleApplyFilters = _ref.handleApplyFilters;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var history = reactRouterDom.useHistory();
+  var searchParams = reactUtils.useQueryParams({
+    toCamelCase: false
+  });
+  var handleDelete = function handleDelete(key) {
+    if (key === constants.SEARCH_TERM_KEY) {
+      var params = ramda.omit([constants.SEARCH_TERM_KEY], utils.getSnakeCasedQueryParams());
+      var pathname = window.location.pathname;
+      history.push(utils$1.buildUrl(pathname, params));
+      return;
+    }
+    if (childrenKeys.includes(key)) {
+      var _params = ramda.omit([key], utils.getSnakeCasedQueryParams());
+      var _pathname = window.location.pathname;
+      history.push(utils$1.buildUrl(_pathname, _params));
+    }
+    var newFilters = neetoCist.removeBy({
+      key: key
+    }, filters);
+    handleApplyFilters(newFilters);
+  };
+  var handleClearAll = function handleClearAll() {
+    var params = utils.isKeywordFilterPresent(keywordFilter) ? ramda.omit([constants.SEARCH_TERM_KEY], utils.getSnakeCasedQueryParams()) : utils.getSnakeCasedQueryParams();
+    var pathname = window.location.pathname;
+    history.push(utils$1.buildUrl(pathname, params));
+    handleApplyFilters([], true);
+  };
+  var hideClearButton = nonHiddenFilters.every(function (_ref2) {
+    var defaultValue = _ref2.defaultValue,
+      isClearable = _ref2.isClearable;
+    return defaultValue && !isClearable;
+  }) && !childrenFiltersApplied;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [nonHiddenFilters.map(function (filter) {
+      var _filter$suffixCompone;
+      return /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Block, {
+          filter: filter,
+          handleDelete: handleDelete,
+          setIsPaneOpen: setIsPaneOpen
+        }), (_filter$suffixCompone = filter.suffixComponent) === null || _filter$suffixCompone === void 0 ? void 0 : _filter$suffixCompone.call(filter), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "neeto-filters-bar--separator"
+        })]
+      }, filter.key);
+    }), childrenKeys.filter(function (childKey) {
+      return ramda.has(childKey, searchParams);
+    }).map(function (childKey) {
+      return /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(ChildBlock, {
+          childKey: childKey,
+          handleDelete: handleDelete,
+          setIsPaneOpen: setIsPaneOpen
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "neeto-filters-bar--separator"
+        })]
+      }, childKey);
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center gap-x-2",
+      children: [neetoCist.isPresent(entity) && !hasOnlyKeywordFilter(filters) && /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+        "data-cy": "save-segment-button",
+        label: t("neetoFilters.segments.saveAsNewSegment"),
+        style: "secondary",
+        onClick: function onClick() {
+          setIsPaneOpen(false);
+          setIsSavePaneOpen({
+            action: SEGMENT_ACTIONS.CREATE
+          });
+        }
+      }), !hideClearButton && /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+        "data-cy": "neeto-filters-bar-clear-btn",
+        label: t("neetoFilters.common.clearFilters"),
+        style: "text",
+        onClick: handleClearAll
+      })]
+    })]
+  });
+};
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { constants._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useSegment = function useSegment(_ref) {
+  var entity = _ref.entity,
+    keyword = _ref.keyword,
+    columns = _ref.columns,
+    childrenKeys = _ref.childrenKeys;
+  var history = reactRouterDom.useHistory();
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var initialRenderRef = React.useRef(true);
+  var _useQueryParams = reactUtils.useQueryParams(),
+    segmentId = _useQueryParams.segmentId;
+  var _useState = React.useState({
+      action: undefined
+    }),
+    _useState2 = utils._slicedToArray(_useState, 2),
+    isSavePaneOpen = _useState2[0],
+    setIsSavePaneOpen = _useState2[1];
+  var _useCreateSegment = useSegmentsApi.useCreateSegment(),
+    createSegment = _useCreateSegment.mutate,
+    isCreating = _useCreateSegment.isPending;
+  var _useUpdateSegment = useSegmentsApi.useUpdateSegment(),
+    updateSegment = _useUpdateSegment.mutate,
+    isUpdating = _useUpdateSegment.isPending;
+  var isSubmitting = isCreating || isUpdating;
+  var searchParams = reactUtils.useQueryParams({
+    toCamelCase: false
+  });
+  var keywordValue = searchParams[constants.SEARCH_TERM_KEY] || "";
+  var isEdit = isSavePaneOpen.action === SEGMENT_ACTIONS.EDIT;
+  var keywordFilter = _objectSpread(_objectSpread({
+    type: "text",
+    rule: "contains",
+    label: t("neetoFilters.common.searchTerm")
+  }, keyword), {}, {
+    key: constants.SEARCH_TERM_KEY,
+    value: keywordValue
+  });
+  var filters = utils.buildFiltersFromSearchParams(utils.isKeywordFilterPresent(keywordFilter) && neetoCist.isNotEmpty(keywordValue) ? [keywordFilter].concat(utils._toConsumableArray(columns)) : columns);
+  var nonHiddenFilters = neetoCist.removeBy({
+    hidden: true
+  }, filters);
+  var handleApplyFilters = function handleApplyFilters(newFilters, isClearAll) {
+    var params = utils.buildUrlFromFilters(_objectSpread({
+      columns: columns,
+      filters: utils.isKeywordFilterPresent(keywordFilter) && neetoCist.isNotEmpty(utils.getSearchTermFromUrl()) ? [].concat(utils._toConsumableArray(newFilters), [keywordFilter]) : newFilters
+    }, isClearAll && {
+      isClearAll: true,
+      childrenKeys: childrenKeys
+    }));
+    history.push({
+      search: params
+    });
+  };
+  var childrenFiltersApplied = childrenKeys.some(function (key) {
+    return ramda.has(key, searchParams);
+  });
+  React.useEffect(function () {
+    if (initialRenderRef.current) {
+      initialRenderRef.current = false;
+      return neetoCist.noop;
+    }
+    var handler = setTimeout(function () {
+      handleApplyFilters(filters);
+    }, 500);
+    return function () {
+      return clearTimeout(handler);
+    };
+  }, [keywordValue]);
+  var handleCreateSuccess = function handleCreateSuccess(_ref2) {
+    var _filters$;
+    var _ref2$segment = _ref2.segment,
+      id = _ref2$segment.id,
+      filters = _ref2$segment.filters;
+    history.push({
+      search: utils.buildUrlFromSegment({
+        columns: columns,
+        filters: (_filters$ = filters[0]) === null || _filters$ === void 0 ? void 0 : _filters$.conditions,
+        id: id
+      })
+    });
+    setIsSavePaneOpen({
+      action: undefined
+    });
+    utils$1.showThumbsUpToastr();
+  };
+  var handleCreate = function handleCreate(_ref3, _ref4) {
+    var name = _ref3.name;
+    var setFieldError = _ref4.setFieldError;
+    var filtersPayload = utils.buildSegmentsPayload(filters, childrenKeys);
+    createSegment({
+      name: name,
+      entity: entity,
+      filters: filtersPayload
+    }, {
+      onSuccess: handleCreateSuccess,
+      onError: function onError(error) {
+        return setFieldError("name", error.response.data.error);
+      }
+    });
+  };
+  var handleUpdate = function handleUpdate(_ref5, _ref6) {
+    var name = _ref5.name;
+    var setFieldError = _ref6.setFieldError;
+    var filtersPayload = utils.buildSegmentsPayload(filters, childrenKeys);
+    updateSegment({
+      id: segmentId,
+      payload: {
+        name: name,
+        filters: filtersPayload
+      }
+    }, {
+      onSuccess: function onSuccess() {
+        setIsSavePaneOpen({
+          action: undefined
+        });
+        utils$1.showThumbsUpToastr();
+      },
+      onError: function onError(error) {
+        return setFieldError("name", error.response.data.error);
+      }
+    });
+  };
+  return {
+    isEdit: isEdit,
+    filters: filters,
+    keywordFilter: keywordFilter,
+    isSubmitting: isSubmitting,
+    nonHiddenFilters: nonHiddenFilters,
+    isSavePaneOpen: isSavePaneOpen,
+    setIsSavePaneOpen: setIsSavePaneOpen,
+    handleApplyFilters: handleApplyFilters,
+    childrenFiltersApplied: childrenFiltersApplied,
+    handleSubmit: isEdit ? handleUpdate : handleCreate
+  };
+};
+
+var Menu = Dropdown__default["default"].Menu,
+  MenuItem = Dropdown__default["default"].MenuItem;
+var SegmentBar = function SegmentBar(_ref) {
+  var entity = _ref.entity,
+    filters = _ref.filters,
+    setIsSavePaneOpen = _ref.setIsSavePaneOpen,
+    setIsPaneOpen = _ref.setIsPaneOpen,
+    handleApplyFilters = _ref.handleApplyFilters,
+    childrenKeys = _ref.childrenKeys;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var history = reactRouterDom.useHistory();
+  var _useQueryParams = reactUtils.useQueryParams(),
+    segmentId = _useQueryParams.segmentId;
+  var queryClient = reactQuery.useQueryClient();
+  var cachedSegments = queryClient.getQueryData([useSegmentsApi.QUERY_KEYS.SEGMENTS_LIST, entity, ""]) || DEFAULT_SEGMENTS_CACHE;
+  var segment = neetoCist.findById(segmentId, cachedSegments.segments);
+  if (neetoCist.isNotPresent(segment)) return null;
+  var handleDelete = function handleDelete(key) {
+    if (key === constants.SEARCH_TERM_KEY) {
+      var params = ramda.omit([constants.SEARCH_TERM_KEY], utils.getSnakeCasedQueryParams());
+      var pathname = window.location.pathname;
+      history.push(utils$1.buildUrl(pathname, params));
+      return;
+    }
+    if (childrenKeys.includes(key)) {
+      var _params = ramda.omit([key], utils.getSnakeCasedQueryParams());
+      var _pathname = window.location.pathname;
+      history.push(utils$1.buildUrl(_pathname, _params));
+    }
+    var newFilters = neetoCist.removeBy({
+      key: key
+    }, filters);
+    handleApplyFilters(newFilters);
+  };
+  var changedFilters = deepCompare(segment.filters[0].conditions, filters);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      className: "neeto-ui-text-gray-600 mr-4 px-2",
+      "data-cy": "neeto-filters-segment-name",
+      style: "h4",
+      children: segment.name
+    }), neetoCist.isNotEmpty(changedFilters) && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Dropdown__default["default"], {
+        buttonProps: {
+          className: "mr-2"
+        },
+        buttonStyle: "secondary",
+        label: t("neetoFilters.segments.updateSegment"),
+        children: /*#__PURE__*/jsxRuntime.jsxs(Menu, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(MenuItem.Button, {
+            onClick: function onClick() {
+              return setIsSavePaneOpen({
+                action: SEGMENT_ACTIONS.EDIT
+              });
+            },
+            children: t("neetoFilters.segments.updateSegment")
+          }), /*#__PURE__*/jsxRuntime.jsx(MenuItem.Button, {
+            onClick: function onClick() {
+              setIsPaneOpen(false);
+              setIsSavePaneOpen({
+                action: SEGMENT_ACTIONS.CREATE
+              });
+            },
+            children: t("neetoFilters.segments.saveAsNewSegment")
+          })]
+        })
+      }), changedFilters.map(function (filter) {
+        var _filter$suffixCompone;
+        return /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(Block, {
+            filter: filter,
+            handleDelete: handleDelete,
+            setIsPaneOpen: setIsPaneOpen
+          }), (_filter$suffixCompone = filter.suffixComponent) === null || _filter$suffixCompone === void 0 ? void 0 : _filter$suffixCompone.call(filter), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "neeto-filters-bar--separator"
+          })]
+        }, filter.key);
+      })]
+    })]
+  });
+};
+
+var Bar = function Bar(_ref) {
+  var entity = _ref.entity,
+    className = _ref.className,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? [] : _ref$columns,
+    _ref$keyword = _ref.keyword,
+    keyword = _ref$keyword === void 0 ? {
+      node: "",
+      value: "",
+      setValue: neetoCist.noop
+    } : _ref$keyword,
+    _ref$setIsPaneOpen = _ref.setIsPaneOpen,
+    setIsPaneOpen = _ref$setIsPaneOpen === void 0 ? ramda.identity : _ref$setIsPaneOpen,
+    _ref$childrenKeys = _ref.childrenKeys,
+    childrenKeys = _ref$childrenKeys === void 0 ? [] : _ref$childrenKeys,
+    _ref$defaultSegmentNa = _ref.defaultSegmentName,
+    defaultSegmentName = _ref$defaultSegmentNa === void 0 ? i18next.t("neetoFilters.common.allResults") : _ref$defaultSegmentNa,
+    customFilters = _ref.customFilters;
+  var queryClient = reactQuery.useQueryClient();
+  var _useQueryParams = reactUtils.useQueryParams(),
+    segmentId = _useQueryParams.segmentId;
+  var segmentFormInitialRef = React.useRef(null);
+  var _useSegment = useSegment({
+      entity: entity,
+      keyword: keyword,
+      columns: columns,
+      childrenKeys: childrenKeys
+    }),
+    isEdit = _useSegment.isEdit,
+    filters = _useSegment.filters,
+    handleSubmit = _useSegment.handleSubmit,
+    isSubmitting = _useSegment.isSubmitting,
+    keywordFilter = _useSegment.keywordFilter,
+    isSavePaneOpen = _useSegment.isSavePaneOpen,
+    nonHiddenFilters = _useSegment.nonHiddenFilters,
+    setIsSavePaneOpen = _useSegment.setIsSavePaneOpen,
+    handleApplyFilters = _useSegment.handleApplyFilters,
+    childrenFiltersApplied = _useSegment.childrenFiltersApplied;
+  var BarComponent = segmentId ? SegmentBar : FilterBar;
+  var cachedSegments = queryClient.getQueryData([useSegmentsApi.QUERY_KEYS.SEGMENTS_LIST, entity, ""]) || DEFAULT_SEGMENTS_CACHE;
+  var segment = neetoCist.findById(segmentId, cachedSegments.segments);
+  if (ramda.isEmpty(nonHiddenFilters) && !childrenFiltersApplied) return null;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classnames__default["default"]("neeto-filters-bar", constants._defineProperty({}, className, className)),
+      children: /*#__PURE__*/jsxRuntime.jsx(BarComponent, {
+        childrenFiltersApplied: childrenFiltersApplied,
+        childrenKeys: childrenKeys,
+        entity: entity,
+        filters: filters,
+        handleApplyFilters: handleApplyFilters,
+        keywordFilter: keywordFilter,
+        nonHiddenFilters: nonHiddenFilters,
+        setIsPaneOpen: setIsPaneOpen,
+        setIsSavePaneOpen: setIsSavePaneOpen
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(index$1.SegmentForm, {
+      childrenKeys: childrenKeys,
+      columns: columns,
+      customFilters: customFilters,
+      defaultSegmentName: defaultSegmentName,
+      filters: filters,
+      handleSubmit: handleSubmit,
+      isEdit: isEdit,
+      isSubmitting: isSubmitting,
+      keywordFilter: keywordFilter,
+      segmentFormInitialRef: segmentFormInitialRef,
+      isOpen: neetoCist.isPresent(isSavePaneOpen.action),
+      initialValues: isEdit ? ramda.assoc("filters", [{
+        conditions: filters
+      }], segment) : {
+        name: "",
+        filters: [{
+          conditions: filters
+        }]
+      },
+      onClose: function onClose() {
+        return setIsSavePaneOpen({
+          action: undefined
+        });
+      }
+    })]
+  });
+};
+
+module.exports = Bar;
+//# sourceMappingURL=Bar.js.map