@bigbinary/neeto-rules-frontend 0.7.4 → 0.8.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { withImmutableActions, withT, useStateWithDependency, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { withImmutableActions, withT, useMutationWithInvalidation, useQueryParams, useStateWithDependency, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { create as create$1 } from 'zustand';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, useContext, useLayoutEffect as useLayoutEffect$1, createElement, useMemo as useMemo$1, forwardRef, createContext, useCallback as useCallback$1, Component, Fragment as Fragment$1, memo } from 'react';
@@ -9,21 +9,30 @@ import Pane from '@bigbinary/neetoui/Pane';
 import Typography from '@bigbinary/neetoui/Typography';
 import { Down, Up, Reorder, Delete, Check, Search, Close, Plus, Refresh, Eye } from '@bigbinary/neeto-icons';
 import Button from '@bigbinary/neetoui/Button';
-import { pluck, equals, clone, isNil, isNotNil, whereAny, useWith, path, split, assocPath, toLower, isEmpty, without, append as append$1, pipe, filter, uniq, join, map, assoc, mergeLeft, includes, test, partition } from 'ramda';
+import { pluck, isNotNil, isEmpty, equals, clone as clone$1, isNil, whereAny, useWith, path, split, assocPath, toLower, without, append as append$1, pipe, filter, uniq, join, map, assoc, mergeLeft, includes, test, partition } from 'ramda';
 import { useTranslation, Trans } from 'react-i18next';
 import { jsxs, Fragment, jsx as jsx$1 } from 'react/jsx-runtime';
 import { t as t$5 } from 'i18next';
+import { DEFAULT_PAGE_SIZE } from '@bigbinary/neeto-commons-frontend/constants';
+import SubHeader from '@bigbinary/neeto-molecules/SubHeader';
+import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
+import Alert from '@bigbinary/neetoui/Alert';
+import NoData from '@bigbinary/neetoui/NoData';
+import Table from '@bigbinary/neetoui/Table';
+import { useQuery } from 'react-query';
+import axios from 'axios';
+import { buildUrl, joinHyphenCase, hyphenize } from '@bigbinary/neeto-commons-frontend/utils';
+import Switch from '@bigbinary/neetoui/Switch';
+import { Link, withRouter } from 'react-router-dom';
 import ReactDOM, { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
 import Pagination from '@bigbinary/neetoui/Pagination';
-import { withRouter } from 'react-router-dom';
 import { shallow } from 'zustand/shallow';
 import classNames$1 from 'classnames';
 import { useFormikContext, Formik, Form, useField, FieldArray, ErrorMessage } from 'formik';
 import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
 import { isPhoneNumberValid } from '@bigbinary/neeto-molecules/PhoneNumber';
 import * as yup from 'yup';
-import { isEditorEmpty, FormikEditor } from '@bigbinary/neeto-editor';
-import { joinHyphenCase, hyphenize } from '@bigbinary/neeto-commons-frontend/utils';
+import { isEditorEmpty } from '@bigbinary/neeto-editor/utils';
 import Dropdown$1 from '@bigbinary/neetoui/Dropdown';
 import Input$2 from '@bigbinary/neetoui/Input';
 import Textarea from '@bigbinary/neetoui/formik/Textarea';
@@ -31,6 +40,7 @@ import Label from '@bigbinary/neetoui/Label';
 import Select$1 from '@bigbinary/neetoui/Select';
 import dayjs from 'dayjs';
 import DatePicker from '@bigbinary/neetoui/DatePicker';
+import FormikEditor from '@bigbinary/neeto-editor/FormikEditor';
 import MultiEmailInput from '@bigbinary/neetoui/formik/MultiEmailInput';
 import Input$3 from '@bigbinary/neetoui/formik/Input';
 import useHotkeys from '@bigbinary/neeto-hotkeys';
@@ -398,8 +408,8 @@ var CONDITION_VALUE_TYPES = {
 var INPUT_FIELD_TYPES = ["email", "text", "number", "decimal", "url", "regex"];
 var MAXIMUM_OPTION_LENGTH$3 = 7;
 
-function ownKeys$r(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$p(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$r(Object(t), !0).forEach(function (r) { _defineProperty$2(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$r(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$u(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$s(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$u(Object(t), !0).forEach(function (r) { _defineProperty$2(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$u(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ConditionsDetail = function ConditionsDetail(_ref) {
   var conditions = _ref.conditions,
     conditionOptions = _ref.conditionOptions,
@@ -415,7 +425,7 @@ var ConditionsDetail = function ConditionsDetail(_ref) {
     t = _useTranslation.t;
   var conditionsList = conditions.value;
   var allConditions = viewMore && conditionsList.length > PREVIEW_CONDITION_LIMIT ? conditionsList : conditionsList.slice(0, PREVIEW_CONDITION_LIMIT);
-  var allConditionVerbs = _objectSpread$p(_objectSpread$p({}, VERB_LABELS), conditionVerbs);
+  var allConditionVerbs = _objectSpread$s(_objectSpread$s({}, VERB_LABELS), conditionVerbs);
   var getLogicOperator = function getLogicOperator(joinType) {
     return joinType === "or_operator" ? "or" : "and";
   };
@@ -571,8 +581,8 @@ var EventsDetail = function EventsDetail(_ref) {
   });
 };
 
-function ownKeys$q(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$o(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$q(Object(t), !0).forEach(function (r) { _defineProperty$2(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$t(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$r(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$t(Object(t), !0).forEach(function (r) { _defineProperty$2(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$t(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var RulePreview = withT(function (_ref) {
   var t = _ref.t,
     isLoading = _ref.isLoading,
@@ -593,7 +603,7 @@ var RulePreview = withT(function (_ref) {
             style: "h4",
             weight: "semibold",
             children: ruleDetails.name.value
-          }), isNotEmpty(moreDropdownProps) && /*#__PURE__*/jsx$1(MoreDropdown, _objectSpread$o({}, moreDropdownProps))]
+          }), isNotEmpty(moreDropdownProps) && /*#__PURE__*/jsx$1(MoreDropdown, _objectSpread$r({}, moreDropdownProps))]
         })
       }), /*#__PURE__*/jsx$1(Pane.Body, {
         children: /*#__PURE__*/jsxs("div", {
@@ -639,6 +649,419 @@ var RulePreview = withT(function (_ref) {
   });
 });
 
+function _objectWithoutPropertiesLoose$2(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _objectWithoutProperties$1(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose$2(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+
+var _excluded$k = ["url"];
+var fetch = function fetch(_ref) {
+  var url = _ref.url,
+    params = _objectWithoutProperties$1(_ref, _excluded$k);
+  return axios.get(url, {
+    params: params
+  });
+};
+var update$1 = function update(_ref2) {
+  var url = _ref2.url,
+    id = _ref2.id,
+    payload = _ref2.payload;
+  return axios.patch("".concat(url, "/").concat(id), payload);
+};
+var clone = function clone(_ref3) {
+  var url = _ref3.url,
+    id = _ref3.id;
+  return axios.post("".concat(url, "/").concat(id, "/clone"));
+};
+var destroy = function destroy(_ref4) {
+  var url = _ref4.url,
+    id = _ref4.id;
+  return axios["delete"]("".concat(url, "/").concat(id));
+};
+var automationRulesApi = {
+  fetch: fetch,
+  update: update$1,
+  clone: clone,
+  destroy: destroy
+};
+
+//TODO: Remove if not used
+var AUTOMATION_RULES = "automation-rules";
+var STALE_TIME = 3200000;
+
+function ownKeys$s(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$q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$s(Object(t), !0).forEach(function (r) { _defineProperty$2(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$s(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useFetchAutomationRules = function useFetchAutomationRules(params) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return useQuery([AUTOMATION_RULES, params], function () {
+    return automationRulesApi.fetch(params);
+  }, _objectSpread$q({
+    staleTime: STALE_TIME,
+    select: function select(response) {
+      return response.data || response;
+    },
+    keepPreviousData: true
+  }, options));
+};
+var useUpdateAutomationRule = function useUpdateAutomationRule() {
+  return useMutationWithInvalidation(automationRulesApi.update, {
+    keysToInvalidate: [AUTOMATION_RULES]
+  });
+};
+var useCloneAutomationRule = function useCloneAutomationRule() {
+  return useMutationWithInvalidation(automationRulesApi.clone, {
+    keysToInvalidate: [AUTOMATION_RULES]
+  });
+};
+var useDeleteAutomationRule = function useDeleteAutomationRule() {
+  return useMutationWithInvalidation(automationRulesApi.destroy, {
+    keysToInvalidate: [AUTOMATION_RULES]
+  });
+};
+
+var createRoutes = function createRoutes(basePath) {
+  return {
+    index: basePath,
+    "new": "".concat(basePath, "/new"),
+    edit: "".concat(basePath, "/:ruleId/edit")
+  };
+};
+
+var STATUS_KEYS = {
+  ENABLED: "enabled",
+  DISABLED: "disabled"
+};
+var DEFAULT_INIT_PAGE = 1;
+
+function _arrayWithoutHoles$1(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
+}
+
+function _iterableToArray$1(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+function _nonIterableSpread$1() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray$1(arr) {
+  return _arrayWithoutHoles$1(arr) || _iterableToArray$1(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread$1();
+}
+
+var DisableMessage = withT(function (_ref) {
+  var t = _ref.t,
+    disabledReason = _ref.disabledReason;
+  return isNotNil(disabledReason) && /*#__PURE__*/jsx$1("div", {
+    children: /*#__PURE__*/jsx$1(Typography, {
+      "class": "text-red-600",
+      component: "span",
+      style: "body2",
+      children: t(disabledReason)
+    })
+  });
+});
+
+var _excluded$j = ["onClick"],
+  _excluded2 = ["handleChangeStatus", "additionalColumns", "onPreview"];
+function ownKeys$r(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$p(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$r(Object(t), !0).forEach(function (r) { _defineProperty$2(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$r(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var buildActionDropdownMenuItems = function buildActionDropdownMenuItems(_ref) {
+  var rule = _ref.rule,
+    onClone = _ref.onClone,
+    onDelete = _ref.onDelete,
+    _ref$moreDropdownItem = _ref.moreDropdownItems,
+    moreDropdownItems = _ref$moreDropdownItem === void 0 ? [] : _ref$moreDropdownItem,
+    automationRulesPath = _ref.automationRulesPath;
+  return [].concat(_toConsumableArray$1(moreDropdownItems.map(function (_ref2) {
+    var _onClick = _ref2.onClick,
+      others = _objectWithoutProperties$1(_ref2, _excluded$j);
+    return _objectSpread$p(_objectSpread$p({}, others), {}, {
+      onClick: function onClick() {
+        return _onClick(rule);
+      }
+    });
+  })), [{
+    key: "edit",
+    className: "neeto-ui-btn",
+    "data-test-id": "automation-rules-edit-link",
+    label: t$5("neetoRules.button.edit"),
+    to: buildUrl(createRoutes(automationRulesPath).edit, {
+      ruleId: rule.id
+    })
+  }, {
+    key: "clone",
+    "data-test-id": "automation-rules-clone-link",
+    label: t$5("neetoRules.button.clone"),
+    onClick: function onClick() {
+      return onClone(rule.id);
+    }
+  }, {
+    key: "delete",
+    "data-test-id": "automation-rules-delete-link",
+    label: t$5("neetoRules.button.delete"),
+    onClick: function onClick() {
+      return onDelete(rule);
+    }
+  }]);
+};
+var getColumnData = function getColumnData(_ref3) {
+  var handleChangeStatus = _ref3.handleChangeStatus,
+    _ref3$additionalColum = _ref3.additionalColumns,
+    additionalColumns = _ref3$additionalColum === void 0 ? [] : _ref3$additionalColum,
+    onPreview = _ref3.onPreview,
+    otherProps = _objectWithoutProperties$1(_ref3, _excluded2);
+  return [{
+    title: t$5("neetoRules.labels.name"),
+    dataIndex: "name",
+    key: "name",
+    ellipsis: true,
+    width: 440,
+    render: function render(name, rule) {
+      return /*#__PURE__*/jsxs("div", {
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "flex items-center justify-between gap-x-3",
+          children: [/*#__PURE__*/jsx$1(Button, {
+            className: "whitespace-pre-line break-words text-left",
+            style: "link",
+            onClick: function onClick() {
+              return onPreview(rule.id);
+            },
+            children: name
+          }), /*#__PURE__*/jsx$1(MoreDropdown, {
+            dropdownProps: {
+              strategy: "fixed"
+            },
+            menuItems: buildActionDropdownMenuItems(_objectSpread$p({
+              rule: rule
+            }, otherProps))
+          })]
+        }), /*#__PURE__*/jsx$1(DisableMessage, {
+          disabledReason: rule.disabledReason
+        })]
+      });
+    }
+  }, {
+    title: t$5("neetoRules.labels.description"),
+    dataIndex: "description",
+    key: "description",
+    width: 390,
+    render: function render(description) {
+      return /*#__PURE__*/jsx$1(Typography, {
+        className: "whitespace-pre-line break-words",
+        style: "body2",
+        children: description
+      });
+    }
+  }, {
+    title: t$5("neetoRules.labels.active"),
+    key: "active",
+    width: 100,
+    align: "center",
+    render: function render(_, rule) {
+      return /*#__PURE__*/jsx$1("div", {
+        className: "flex justify-center",
+        children: /*#__PURE__*/jsx$1(Switch, {
+          checked: rule.status === STATUS_KEYS.ENABLED,
+          "data-test-id": "automation-rules-state-switch-row",
+          disabled: !!rule.disabledReason,
+          onChange: function onChange(e) {
+            handleChangeStatus(e, rule.id);
+          }
+        })
+      });
+    }
+  }].concat(_toConsumableArray$1(additionalColumns));
+};
+var renderNoDataHelpText = function renderNoDataHelpText(helpDocUrl) {
+  return /*#__PURE__*/jsx$1(Trans, {
+    i18nKey: "neetoRules.noData.helpText",
+    components: {
+      a: /*#__PURE__*/jsx$1(Link, {
+        className: "neeto-ui-text-primary-600 underline",
+        target: "_blank",
+        to: {
+          pathname: helpDocUrl
+        }
+      })
+    }
+  });
+};
+
+function ownKeys$q(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$o(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$q(Object(t), !0).forEach(function (r) { _defineProperty$2(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var RulesTable = function RulesTable(_ref) {
+  var url = _ref.automationRulesEndpoint,
+    additionalColumns = _ref.additionalColumns,
+    _ref$automationRulesP = _ref.automationRulesPath,
+    automationRulesPath = _ref$automationRulesP === void 0 ? "/" : _ref$automationRulesP,
+    onPreview = _ref.onPreview,
+    _ref$helpDocUrl = _ref.helpDocUrl,
+    helpDocUrl = _ref$helpDocUrl === void 0 ? null : _ref$helpDocUrl,
+    _ref$moreDropdownItem = _ref.moreDropdownItems,
+    moreDropdownItems = _ref$moreDropdownItem === void 0 ? [] : _ref$moreDropdownItem;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray$1(_useState, 2),
+    selectedRule = _useState2[0],
+    setSelectedRule = _useState2[1];
+  var _useState3 = useState(DEFAULT_INIT_PAGE),
+    _useState4 = _slicedToArray$1(_useState3, 2),
+    page = _useState4[0],
+    setPage = _useState4[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useQueryParams = useQueryParams(),
+    _useQueryParams$searc = _useQueryParams.searchTerm,
+    searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
+  var _useFetchAutomationRu = useFetchAutomationRules({
+      url: url,
+      page: page,
+      pageSize: DEFAULT_PAGE_SIZE,
+      searchTerm: searchTerm
+    }),
+    _useFetchAutomationRu2 = _useFetchAutomationRu.data,
+    _useFetchAutomationRu3 = _useFetchAutomationRu2 === void 0 ? {} : _useFetchAutomationRu2,
+    _useFetchAutomationRu4 = _useFetchAutomationRu3.rules,
+    rules = _useFetchAutomationRu4 === void 0 ? [] : _useFetchAutomationRu4,
+    _useFetchAutomationRu5 = _useFetchAutomationRu3.totalCount,
+    totalCount = _useFetchAutomationRu5 === void 0 ? 0 : _useFetchAutomationRu5,
+    isLoading = _useFetchAutomationRu.isLoading;
+  var _useUpdateAutomationR = useUpdateAutomationRule(),
+    updateRule = _useUpdateAutomationR.mutate,
+    isUpdating = _useUpdateAutomationR.isLoading;
+  var _useCloneAutomationRu = useCloneAutomationRule(),
+    cloneRule = _useCloneAutomationRu.mutate,
+    isCloning = _useCloneAutomationRu.isLoading;
+  var _useDeleteAutomationR = useDeleteAutomationRule(),
+    deleteRule = _useDeleteAutomationR.mutate,
+    isDeleting = _useDeleteAutomationR.isLoading;
+  var handleChangeStatus = function handleChangeStatus(event, id) {
+    var status = event.target.checked ? STATUS_KEYS.ENABLED : STATUS_KEYS.DISABLED;
+    var payload = {
+      rule: {
+        status: status
+      }
+    };
+    updateRule({
+      id: id,
+      url: url,
+      payload: payload
+    });
+  };
+  var columnData = getColumnData({
+    handleChangeStatus: handleChangeStatus,
+    additionalColumns: additionalColumns,
+    onClone: function onClone(id) {
+      return cloneRule({
+        id: id,
+        url: url
+      });
+    },
+    onDelete: setSelectedRule,
+    onPreview: onPreview,
+    automationRulesPath: automationRulesPath,
+    moreDropdownItems: moreDropdownItems
+  });
+  if (isLoading) {
+    return /*#__PURE__*/jsx$1(PageLoader, {});
+  }
+  if (isEmpty(rules)) {
+    return /*#__PURE__*/jsx$1("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx$1(NoData, _objectSpread$o({
+        title: t("neetoRules.noData.title")
+      }, isEmpty(searchTerm) && {
+        helpText: helpDocUrl ? renderNoDataHelpText(helpDocUrl) : null,
+        primaryButtonProps: {
+          label: t("neetoRules.button.addNew"),
+          to: createRoutes(automationRulesPath)["new"]
+        }
+      }))
+    });
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx$1(SubHeader, {
+      leftActionBlock: /*#__PURE__*/jsx$1(Typography, {
+        className: "mr-4 font-semibold",
+        style: "h4",
+        children: t("neetoRules.common.automationRuleWithCount", {
+          count: totalCount
+        })
+      })
+    }), /*#__PURE__*/jsx$1(TableWrapper, {
+      hasPagination: totalCount > DEFAULT_PAGE_SIZE,
+      children: /*#__PURE__*/jsx$1(Table, {
+        columnData: columnData,
+        totalCount: totalCount,
+        fixedHeight: true,
+        allowClick: false,
+        currentPageNumber: page,
+        defaultPageSize: DEFAULT_PAGE_SIZE,
+        handlePageChange: setPage,
+        loading: isUpdating || isLoading || isCloning || isDeleting,
+        rowData: rules.map(function (item) {
+          return _objectSpread$o({
+            key: item.id
+          }, item);
+        }),
+        rowSelection: false,
+        scroll: {
+          x: 0
+        },
+        tableLayout: "fixed"
+      })
+    }), /*#__PURE__*/jsx$1(Alert, {
+      isOpen: !!selectedRule,
+      isSubmitting: isDeleting,
+      submitButtonLabel: t("neetoRules.button.delete"),
+      title: t("neetoRules.deleteAlert.title"),
+      message: /*#__PURE__*/jsx$1(Trans, {
+        i18nKey: "neetoRules.deleteAlert.message",
+        values: {
+          name: selectedRule === null || selectedRule === void 0 ? void 0 : selectedRule.name
+        }
+      }),
+      onClose: function onClose() {
+        return setSelectedRule(null);
+      },
+      onSubmit: function onSubmit() {
+        return deleteRule({
+          id: selectedRule === null || selectedRule === void 0 ? void 0 : selectedRule.id,
+          url: url
+        }, {
+          onSuccess: function onSuccess() {
+            return setSelectedRule(null);
+          }
+        });
+      }
+    })]
+  });
+};
+
 function _typeof$2(o) {
   "@babel/helpers - typeof";
 
@@ -1237,7 +1660,7 @@ function _extends$2() {
   }, _extends$2.apply(null, arguments);
 }
 
-function _objectWithoutPropertiesLoose$2(r, e) {
+function _objectWithoutPropertiesLoose$1(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
@@ -1471,7 +1894,7 @@ function finalPropsSelectorFactory(dispatch, _ref) {
     initMapDispatchToProps,
     initMergeProps
   } = _ref,
-      options = _objectWithoutPropertiesLoose$2(_ref, _excluded$i);
+      options = _objectWithoutPropertiesLoose$1(_ref, _excluded$i);
 
   const mapStateToProps = initMapStateToProps(dispatch, options);
   const mapDispatchToProps = initMapDispatchToProps(dispatch, options);
@@ -1986,7 +2409,7 @@ function connect(mapStateToProps, mapDispatchToProps, mergeProps, {
         const {
           reactReduxForwardedRef
         } = props,
-              wrapperProps = _objectWithoutPropertiesLoose$2(props, _excluded$h);
+              wrapperProps = _objectWithoutPropertiesLoose$1(props, _excluded$h);
 
         return [props.context, reactReduxForwardedRef, wrapperProps];
       }, [props]);
@@ -9769,7 +10192,7 @@ var RulesReorder = function RulesReorder(_ref) {
     if (!result.destination || result.source.index === result.destination.index) {
       return;
     }
-    var originalRules = clone(initialRules);
+    var originalRules = clone$1(initialRules);
     var items = reorderList(originalRules, result.source.index, result.destination.index);
     items = items.map(function (item, index) {
       return _objectSpread$l(_objectSpread$l({}, item), {}, {
@@ -9853,35 +10276,6 @@ function _objectDestructuringEmpty(obj) {
   if (obj == null) throw new TypeError("Cannot destructure " + obj);
 }
 
-function _objectWithoutPropertiesLoose$1(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-function _objectWithoutProperties$1(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose$1(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-
 var propTypes = {exports: {}};
 
 /**
@@ -9973,22 +10367,6 @@ var factoryWithThrowingShims = function() {
 var propTypesExports = propTypes.exports;
 var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
 
-function _arrayWithoutHoles$1(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
-}
-
-function _iterableToArray$1(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-function _nonIterableSpread$1() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _toConsumableArray$1(arr) {
-  return _arrayWithoutHoles$1(arr) || _iterableToArray$1(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread$1();
-}
-
 var ACTION_TYPES = {
   emailToIds: "emailToIds",
   email: "email",
@@ -22626,5 +23004,5 @@ NeetoRules.Card = Card;
 NeetoRules.MultiSelectField = MultiSelectField;
 NeetoRules.EventConditions = EventConditions;
 
-export { NeetoRules as NeetoRulesForm, RulePreview, RulesReorder, useCustomDataStore };
+export { NeetoRules as NeetoRulesForm, RulePreview, RulesReorder, RulesTable, useCustomDataStore };
 //# sourceMappingURL=index.js.map