@bigbinary/neeto-approvals-frontend 1.0.0 → 1.1.0

package/app/javascript/src/translations/en.json

@@ -46,7 +46,8 @@
       "waitingFor": "Waiting for",
       "templateDetails": "Template details",
       "field": "Field",
-      "noDataHelpText": "Here is how you can use <a>{{entity, anyCase}}.</a>"
+      "noDataHelpText": "Here is how you can use <a>{{entity, anyCase}}</a>.",
+      "noDataHelpTextLearnMore": "Learn more about <a>{{entity, anyCase}}</a>."
     },
     "validations": {
       "limitExceeded": "You have exceeded the limit of {{limit}} characters for the {{what}}.",

package/dist/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var react = require('react');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var Container = require('@bigbinary/neeto-molecules/Container');
 var reactRouterDom = require('react-router-dom');
@@ -17,8 +17,8 @@ var ramda = require('ramda');
 var reactI18next = require('react-i18next');
 var reactQuery = require('@tanstack/react-query');
 var axios = require('axios');
-var Tag = require('@bigbinary/neetoui/Tag');
 var DateFormat = require('@bigbinary/neeto-molecules/DateFormat');
+var Tag = require('@bigbinary/neetoui/Tag');
 var utils = require('@bigbinary/neeto-editor/utils');
 var yup = require('yup');
 var jsxRuntime = require('react/jsx-runtime');
@@ -67,7 +67,6 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
 var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
@@ -75,8 +74,8 @@ var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
 var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table$1);
 var NoData__default = /*#__PURE__*/_interopDefaultLegacy(NoData);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
-var Tag__default = /*#__PURE__*/_interopDefaultLegacy(Tag);
 var DateFormat__default = /*#__PURE__*/_interopDefaultLegacy(DateFormat);
+var Tag__default = /*#__PURE__*/_interopDefaultLegacy(Tag);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var EditorContent__default = /*#__PURE__*/_interopDefaultLegacy(EditorContent);
 var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
@@ -270,7 +269,7 @@ var useUpdateRequest = function useUpdateRequest(options) {
 };
 
 var usePaginate = function usePaginate() {
-  var _useState = React.useState({
+  var _useState = react.useState({
       page: constants.DEFAULT_PAGE_INDEX,
       pageSize: constants.DEFAULT_PAGE_SIZE
     }),
@@ -465,7 +464,7 @@ var getApprovalFilter = function getApprovalFilter() {
   };
 };
 
-var MemoizedEditorContent$1 = /*#__PURE__*/React__default["default"].memo(EditorContent__default["default"]);
+var MemoizedEditorContent$1 = /*#__PURE__*/react.memo(EditorContent__default["default"]);
 var RequestDetailsPane = function RequestDetailsPane(_ref) {
   var _window$globalProps, _window$globalProps2;
   var isOpen = _ref.isOpen,
@@ -486,14 +485,14 @@ var RequestDetailsPane = function RequestDetailsPane(_ref) {
     initialNote = _approvalDetails$note === void 0 ? "" : _approvalDetails$note,
     requesterName = approvalDetails.requesterName,
     requesterEmail = approvalDetails.requesterEmail;
-  var _useState = React.useState(initialNote),
+  var _useState = react.useState(initialNote),
     _useState2 = _slicedToArray(_useState, 2),
     note = _useState2[0],
     setNote = _useState2[1];
   var _useUpdateRequest = useUpdateRequest(),
     updatePendingRequest = _useUpdateRequest.mutate,
     isUpdateRequestPending = _useUpdateRequest.isPending;
-  React.useEffect(function () {
+  react.useEffect(function () {
     setNote(initialNote);
   }, [initialNote]);
   var requesterOrApproverDetails = status === STATUSES.cancelled ? "".concat(requesterName, " (").concat(requesterEmail, ")") : "".concat(approverName, " (").concat(approverEmail, ")");
@@ -596,8 +595,9 @@ var RequestDetailsPane = function RequestDetailsPane(_ref) {
 function ownKeys$a(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$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var History = function History(_ref) {
-  var requestUrl = _ref.requestUrl;
-  var _useState = React.useState(DEFAULT_FILTER_VALUES),
+  var helpDocUrl = _ref.helpDocUrl,
+    requestUrl = _ref.requestUrl;
+  var _useState = react.useState(DEFAULT_FILTER_VALUES),
     _useState2 = _slicedToArray(_useState, 2),
     filters = _useState2[0],
     setFilters = _useState2[1];
@@ -605,7 +605,7 @@ var History = function History(_ref) {
   var _usePaginate = usePaginate(),
     pageProperties = _usePaginate.pageProperties,
     handlePageChange = _usePaginate.handlePageChange;
-  var _useState3 = React.useState({}),
+  var _useState3 = react.useState({}),
     _useState4 = _slicedToArray(_useState3, 2),
     approvalDetails = _useState4[0],
     setApprovalDetails = _useState4[1];
@@ -624,7 +624,7 @@ var History = function History(_ref) {
     approvalHistories = _ref2$requests === void 0 ? {} : _ref2$requests,
     _ref2$totalCount = _ref2.totalCount,
     totalCount = _ref2$totalCount === void 0 ? 0 : _ref2$totalCount;
-  React.useEffect(function () {
+  react.useEffect(function () {
     if (!data) return;
     handleEmptyPage(data === null || data === void 0 ? void 0 : data.requests, pageProperties, handlePageChange);
     setApprovalDetails(function (approvalDetails) {
@@ -664,6 +664,22 @@ var History = function History(_ref) {
     }) : /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex h-full w-full flex-grow items-center justify-center",
       children: /*#__PURE__*/jsxRuntime.jsx(NoData__default["default"], {
+        helpText: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+          i18nKey: "neetoApprovals.common.noDataHelpTextLearnMore",
+          style: "link",
+          values: {
+            entity: t("neetoApprovals.common.history")
+          },
+          components: {
+            a: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+              style: "link",
+              target: "_blank",
+              to: {
+                pathname: helpDocUrl
+              }
+            })
+          }
+        }),
         title: t("neetoApprovals.common.notFound_", {
           what: t("neetoApprovals.common.record", constants.PLURAL)
         })
@@ -685,12 +701,13 @@ var PENDING_TABLE_COLUMNS = neetoCist.removeBy({
 function ownKeys$9(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$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var PendingRequests = function PendingRequests(_ref) {
-  var requestUrl = _ref.requestUrl;
-  var _useState = React.useState(DEFAULT_FILTER_VALUES),
+  var helpDocUrl = _ref.helpDocUrl,
+    requestUrl = _ref.requestUrl;
+  var _useState = react.useState(DEFAULT_FILTER_VALUES),
     _useState2 = _slicedToArray(_useState, 2),
     filters = _useState2[0],
     setFilters = _useState2[1];
-  var _useState3 = React.useState({}),
+  var _useState3 = react.useState({}),
     _useState4 = _slicedToArray(_useState3, 2),
     approvalDetails = _useState4[0],
     setApprovalDetails = _useState4[1];
@@ -713,7 +730,7 @@ var PendingRequests = function PendingRequests(_ref) {
     pendingRequests = _ref2$requests === void 0 ? {} : _ref2$requests,
     _ref2$totalCount = _ref2.totalCount,
     totalCount = _ref2$totalCount === void 0 ? 0 : _ref2$totalCount;
-  React.useEffect(function () {
+  react.useEffect(function () {
     if (!data) return;
     handleEmptyPage(data === null || data === void 0 ? void 0 : data.requests, pageProperties, handlePageChange);
   }, [data]);
@@ -747,6 +764,22 @@ var PendingRequests = function PendingRequests(_ref) {
     }) : /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex h-full w-full flex-grow items-center justify-center",
       children: /*#__PURE__*/jsxRuntime.jsx(NoData__default["default"], {
+        helpText: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+          i18nKey: "neetoApprovals.common.noDataHelpTextLearnMore",
+          style: "link",
+          components: {
+            a: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+              style: "link",
+              target: "_blank",
+              to: {
+                pathname: helpDocUrl
+              }
+            })
+          },
+          values: {
+            entity: t("neetoApprovals.common.pendingApproval", constants.PLURAL)
+          }
+        }),
         title: t("neetoApprovals.common.notFound_", {
           what: t("neetoApprovals.common.pendingApproval", constants.PLURAL)
         })
@@ -970,7 +1003,7 @@ var Form$2 = function Form(_ref) {
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     placeholders = _ref.placeholders;
-  var inputReference = React.useRef(null);
+  var inputReference = react.useRef(null);
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var header = ramda.isEmpty(initialData) ? t("neetoApprovals.common.addNew_", {
@@ -1098,9 +1131,9 @@ var Field = function Field(_ref) {
     })]
   });
 };
-var Field$1 = /*#__PURE__*/React__default["default"].memo(Field);
+var Field$1 = /*#__PURE__*/react.memo(Field);
 
-var MemoizedEditorContent = /*#__PURE__*/React__default["default"].memo(EditorContent__default["default"]);
+var MemoizedEditorContent = /*#__PURE__*/react.memo(EditorContent__default["default"]);
 var TemplateDetails = function TemplateDetails(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
@@ -1146,12 +1179,13 @@ var renderNoDataHelpText = function renderNoDataHelpText(_ref) {
     url = _ref.url;
   return /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
     i18nKey: "neetoApprovals.common.noDataHelpText",
+    style: "link",
     values: {
-      entity: entity
+      entity: entity.toLocaleLowerCase()
     },
     components: {
-      a: /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Link, {
-        className: "neeto-ui-text-primary-600 underline",
+      a: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+        style: "link",
         target: "_blank",
         to: {
           pathname: url
@@ -1165,7 +1199,6 @@ var _excluded$1 = ["entity", "columnData", "rowData", "totalCount", "filters", "
 function ownKeys$6(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$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Table = function Table(_ref) {
-  var _t;
   var entity = _ref.entity,
     columnData = _ref.columnData,
     rowData = _ref.rowData,
@@ -1193,7 +1226,7 @@ var Table = function Table(_ref) {
   var noDataProps = {
     primaryButtonProps: {
       label: t("neetoApprovals.common.addNew_", {
-        what: (_t = t("neetoApprovals.common.template", constants.SINGULAR)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
+        what: t("neetoApprovals.common.template", constants.SINGULAR)
       }),
       onClick: function onClick() {
         return setIsPaneOpen(true);
@@ -1292,23 +1325,23 @@ var Templates = function Templates(_ref) {
     setIsNewTemplatePaneOpen = _ref.setIsNewTemplatePaneOpen,
     helpDocUrl = _ref.helpDocUrl,
     otherProps = _objectWithoutProperties(_ref, _excluded);
-  var _useState = React.useState(DEFAULT_FILTER_VALUES),
+  var _useState = react.useState(DEFAULT_FILTER_VALUES),
     _useState2 = _slicedToArray(_useState, 2),
     filters = _useState2[0],
     setFilters = _useState2[1];
-  var _useState3 = React.useState({}),
+  var _useState3 = react.useState({}),
     _useState4 = _slicedToArray(_useState3, 2),
     selectedTemplate = _useState4[0],
     setSelectedTemplate = _useState4[1];
-  var _useState5 = React.useState(false),
+  var _useState5 = react.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     isDeleteAlertOpen = _useState6[0],
     setIsDeleteAlertOpen = _useState6[1];
-  var _useState7 = React.useState(false),
+  var _useState7 = react.useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
     isEditPaneOpen = _useState8[0],
     setIsEditPaneOpen = _useState8[1];
-  var _useState9 = React.useState(false),
+  var _useState9 = react.useState(false),
     _useState10 = _slicedToArray(_useState9, 2),
     isShowPaneOpen = _useState10[0],
     setIsShowPaneOpen = _useState10[1];
@@ -1319,7 +1352,7 @@ var Templates = function Templates(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var debouncedSearchTerm = reactUtils.useDebounce(searchTerm, SEARCH_DELAY);
-  React.useEffect(function () {
+  react.useEffect(function () {
     resetPageProperties();
   }, [searchTerm]);
   var _useFetchTemplates = useFetchTemplates(_objectSpread$5(_objectSpread$5(_objectSpread$5({}, pageProperties), filters), {}, {
@@ -1332,7 +1365,7 @@ var Templates = function Templates(_ref) {
     templates = _ref2$templates === void 0 ? [] : _ref2$templates,
     _ref2$totalCount = _ref2.totalCount,
     totalCount = _ref2$totalCount === void 0 ? 0 : _ref2$totalCount;
-  React.useEffect(function () {
+  react.useEffect(function () {
     if (data) {
       handleEmptyPage(data === null || data === void 0 ? void 0 : data.templates, pageProperties, handlePageChange);
     }
@@ -1340,7 +1373,7 @@ var Templates = function Templates(_ref) {
   var _useDeleteTemplate = useDeleteTemplate(),
     deleteTemplate = _useDeleteTemplate.mutate,
     isDeleting = _useDeleteTemplate.isPending;
-  React.useEffect(function () {
+  react.useEffect(function () {
     if (!ramda.isEmpty(selectedTemplate)) return;
     setIsDeleteAlertOpen(false);
     setIsEditPaneOpen(false);
@@ -1443,11 +1476,10 @@ var createRoutes = function createRoutes(_ref) {
     },
     path: "".concat(config.approvalsPath).concat(routes.templates.index),
     actionBlock: function actionBlock() {
-      var _t;
       return /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
         "data-cy": "neeto-approvals-templates-add-new-button",
         label: i18next.t("neetoApprovals.common.addNew_", {
-          what: (_t = i18next.t("neetoApprovals.common.template", constants.SINGULAR)) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
+          what: i18next.t("neetoApprovals.common.template", constants.SINGULAR)
         }),
         onClick: function onClick() {
           return setIsNewTemplatePaneOpen(true);
@@ -1455,7 +1487,7 @@ var createRoutes = function createRoutes(_ref) {
       });
     },
     searchPlaceholder: i18next.t("neetoApprovals.inputs.placeholders.search_", {
-      what: i18next.t("neetoApprovals.common.template", constants.PLURAL).toLocaleLowerCase()
+      what: i18next.t("neetoApprovals.common.template", constants.PLURAL)
     })
   }, {
     component: function component() {
@@ -1482,12 +1514,12 @@ var Header = function Header(_ref) {
     path: pathname
   }, appRoutes);
   return /*#__PURE__*/jsxRuntime.jsx(NeetoHeader__default["default"], {
+    breadcrumbs: breadcrumbs,
     actionBlock: currentTab === null || currentTab === void 0 || (_currentTab$actionBlo = currentTab.actionBlock) === null || _currentTab$actionBlo === void 0 ? void 0 : _currentTab$actionBlo.call(currentTab),
     title: t("neetoApprovals.common.approval", constants.PLURAL),
     searchProps: (currentTab === null || currentTab === void 0 ? void 0 : currentTab.searchPlaceholder) && {
       placeholder: currentTab === null || currentTab === void 0 ? void 0 : currentTab.searchPlaceholder
-    },
-    breadcrumbs: breadcrumbs
+    }
   });
 };
 
@@ -1553,7 +1585,7 @@ var Approvals = function Approvals(_ref) {
   var _useQueryParams = reactUtils.useQueryParams(),
     _useQueryParams$searc = _useQueryParams.searchTerm,
     searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
-  var _useState = React.useState(false),
+  var _useState = react.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isNewTemplatePaneOpen = _useState2[0],
     setIsNewTemplatePaneOpen = _useState2[1];
@@ -1574,10 +1606,10 @@ var Approvals = function Approvals(_ref) {
         children: [appRoutes.map(function (_ref2) {
           var path = _ref2.path,
             component = _ref2.component;
-          return /*#__PURE__*/React.createElement(reactRouterDom.Route, {
-            exact: true,
+          return /*#__PURE__*/react.createElement(reactRouterDom.Route, {
             component: component,
             path: path,
+            exact: true,
             key: path
           });
         }), /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Redirect, {
@@ -1627,12 +1659,12 @@ var Form$1 = function Form(_ref) {
     t = _useTranslation.t;
   var _useFormikContext = formik.useFormikContext(),
     setFieldValue = _useFormikContext.setFieldValue;
-  var inputRef = React.useRef(null);
-  var _useState = React.useState(null),
+  var inputRef = react.useRef(null);
+  var _useState = react.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     approverId = _useState2[0],
     setApproverId = _useState2[1];
-  var _useState3 = React.useState(null),
+  var _useState3 = react.useState(null),
     _useState4 = _slicedToArray(_useState3, 2),
     templateId = _useState4[0],
     setTemplateId = _useState4[1];
@@ -1659,7 +1691,7 @@ var Form$1 = function Form(_ref) {
     _useFetchApprovers$da2 = _useFetchApprovers$da === void 0 ? {} : _useFetchApprovers$da,
     _useFetchApprovers$da3 = _useFetchApprovers$da2.approvers,
     approvers = _useFetchApprovers$da3 === void 0 ? [] : _useFetchApprovers$da3;
-  var approverOptions = React.useMemo(function () {
+  var approverOptions = react.useMemo(function () {
     return approvers.map(function (approver) {
       return {
         label: approver.name,
@@ -1686,7 +1718,7 @@ var Form$1 = function Form(_ref) {
     setApproverId(approver.value);
     setFieldValue("approver", approver);
   };
-  React.useEffect(function () {
+  react.useEffect(function () {
     if (ramda.isEmpty(template)) return;
     setSelectedTemplateData(template);
     updateMessage();
@@ -1736,7 +1768,7 @@ var Form = function Form(_ref) {
     isLoading = _ref.isLoading,
     _ref$requestableId = _ref.requestableId,
     requestableId = _ref$requestableId === void 0 ? "" : _ref$requestableId;
-  var _useState = React.useState({}),
+  var _useState = react.useState({}),
     _useState2 = _slicedToArray(_useState, 2),
     selectedTemplateData = _useState2[0],
     setSelectedTemplateData = _useState2[1];
@@ -1833,7 +1865,7 @@ var useDeclinePendingRequest = function useDeclinePendingRequest(options) {
 
 var Public = function Public() {
   var _t;
-  var _useState = React.useState(""),
+  var _useState = react.useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     note = _useState2[0],
     setNote = _useState2[1];
@@ -1849,7 +1881,7 @@ var Public = function Public() {
   var _ref = data || {},
     _ref$approvalRequest = _ref.approvalRequest,
     approvalRequest = _ref$approvalRequest === void 0 ? {} : _ref$approvalRequest;
-  React.useEffect(function () {
+  react.useEffect(function () {
     var _data$approvalRequest;
     if (data !== null && data !== void 0 && (_data$approvalRequest = data.approvalRequest) !== null && _data$approvalRequest !== void 0 && _data$approvalRequest.note) {
       setNote(data.approvalRequest.note);