@bigbinary/neeto-approvals-frontend 0.2.15 → 0.3.0

package/README.md

@@ -8,6 +8,7 @@ The `neeto-approvals-nano` manages approvals within neeto applications. The na
         - [Usage](#usage)
     - [Frontend package](#frontend-package)
         - [Installation](#installation-1)
+        - [Instructions for development](#instructions-for-development)
         - [Components](#components)
 2. [Instructions for Publishing](#instructions-for-publishing)
 
@@ -62,6 +63,9 @@ The package exports three components: `Approvals`, `Form`, and `Public`.
     yarn add @bigbinary/neeto-approvals-frontend
     ```
 
+### Instructions for development
+Check the [Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0) for step-by-step instructions to develop the frontend package.
+
 ### Components
 #### `Approvals` ([source code](https://github.com/bigbinary/neeto-approvals-nano/blob/13500c56e311a488fce886876781b8c26a0f0145/app/javascript/src/components/Approvals/index.jsx))
 This component manages approval requests, approval templates and history of approval requests. It consists of three tabs: `Pending`, `Templates`, and `History`

package/dist/index.cjs.js

@@ -464,7 +464,7 @@ var getApprovalFilter = function getApprovalFilter() {
 
 var MemoizedEditorContent$1 = /*#__PURE__*/React__default["default"].memo(neetoEditor.EditorContent);
 var RequestDetailsPane = function RequestDetailsPane(_ref) {
-  var _window$globalProps, _window$globalProps2, _t;
+  var _window$globalProps, _window$globalProps2;
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
     approvalDetails = _ref.approvalDetails,
@@ -557,7 +557,7 @@ var RequestDetailsPane = function RequestDetailsPane(_ref) {
     label: t("neetoApprovals.common.note"),
     value: note,
     placeholder: t("neetoApprovals.inputs.placeholders.add_", {
-      what: (_t = t("neetoApprovals.common.note")) === null || _t === void 0 ? void 0 : _t.toLocaleLowerCase()
+      what: t("neetoApprovals.common.note")
     }),
     onChange: utils.withEventTargetValue(setNote)
   }), !isPending && note && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -788,24 +788,28 @@ var fetch$2 = function fetch(params) {
     params: params
   });
 };
-var show$1 = function show(id) {
-  return axios__default["default"].get("".concat(TEMPLATE_URL, "/").concat(id));
+var show$1 = function show(_ref) {
+  var id = _ref.id,
+    params = _ref.params;
+  return axios__default["default"].get("".concat(TEMPLATE_URL, "/").concat(id), {
+    params: params
+  });
 };
-var create = function create(_ref) {
-  var _ref$url = _ref.url,
-    url = _ref$url === void 0 ? TEMPLATE_URL : _ref$url,
-    payload = _ref.payload;
+var create = function create(_ref2) {
+  var _ref2$url = _ref2.url,
+    url = _ref2$url === void 0 ? TEMPLATE_URL : _ref2$url,
+    payload = _ref2.payload;
   return axios__default["default"].post(url, payload);
 };
-var update = function update(_ref2) {
-  var id = _ref2.id,
-    payload = _ref2.payload,
-    _ref2$url = _ref2.url,
-    url = _ref2$url === void 0 ? BASE_URL : _ref2$url;
+var update = function update(_ref3) {
+  var id = _ref3.id,
+    payload = _ref3.payload,
+    _ref3$url = _ref3.url,
+    url = _ref3$url === void 0 ? BASE_URL : _ref3$url;
   return axios__default["default"].put("".concat(url, "/").concat(id), payload);
 };
-var destroy = function destroy(_ref3) {
-  var templateId = _ref3.templateId;
+var destroy = function destroy(_ref4) {
+  var templateId = _ref4.templateId;
   return axios__default["default"]["delete"]("".concat(TEMPLATE_URL, "/").concat(templateId));
 };
 var templatesApi = {
@@ -835,6 +839,18 @@ var useFetchTemplates = function useFetchTemplates() {
     }
   }, options));
 };
+var useFetchTemplate = function useFetchTemplate(_ref2) {
+  var id = _ref2.id,
+    params = _ref2.params;
+  return reactQuery.useQuery([QUERY_KEYS.SHOW_TEMPLATE, id, params], function () {
+    return templatesApi.show({
+      id: id,
+      params: params
+    });
+  }, {
+    enabled: !!id
+  });
+};
 var useCreateTemplate = function useCreateTemplate(options) {
   return reactUtils.useMutationWithInvalidation(templatesApi.create, _objectSpread$8({
     keysToInvalidate: [QUERY_KEYS.TEMPLATES, QUERY_KEYS.VIEWS]
@@ -877,8 +893,8 @@ var MessageEditor = reactUtils.withT(function (_ref) {
     _ref$initialValue = _ref.initialValue,
     initialValue = _ref$initialValue === void 0 ? "" : _ref$initialValue;
   return /*#__PURE__*/React__default["default"].createElement(neetoEditor.FormikEditor, {
-    required: true,
     initialValue: initialValue,
+    required: true,
     label: t("neetoApprovals.inputs.labels.message"),
     name: "message",
     rows: 3,
@@ -947,10 +963,10 @@ var Form$2 = function Form(_ref) {
     what: t("neetoApprovals.common.template", constants.SINGULAR)
   });
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
-    initialFocusRef: inputReference,
-    size: "large",
     isOpen: isOpen,
-    onClose: onClose
+    onClose: onClose,
+    initialFocusRef: inputReference,
+    size: "large"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     style: "h2"
   }, header)), /*#__PURE__*/React__default["default"].createElement(formik$1.Form, {
@@ -998,11 +1014,11 @@ var Create = function Create(_ref) {
     });
   };
   return /*#__PURE__*/React__default["default"].createElement(Form$2, {
-    placeholders: templatePlaceholders,
     isLoading: isLoading,
     isOpen: isOpen,
     onClose: onClose,
-    onSubmit: onSubmit
+    onSubmit: onSubmit,
+    placeholders: templatePlaceholders
   });
 };
 
@@ -1036,12 +1052,12 @@ var Edit = function Edit(_ref) {
     descriptionEnabled: !!template.description
   });
   return /*#__PURE__*/React__default["default"].createElement(Form$2, {
-    isLoading: isUpdating,
-    placeholders: templatePlaceholders,
+    initialData: initialData,
     isOpen: isOpen,
     onClose: onClose,
     onSubmit: onSubmit,
-    initialData: initialData
+    isLoading: isUpdating,
+    placeholders: templatePlaceholders
   });
 };
 
@@ -1572,23 +1588,34 @@ var Form$1 = function Form(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useFormikContext = formik.useFormikContext(),
-    resetForm = _useFormikContext.resetForm,
     setFieldValue = _useFormikContext.setFieldValue;
   var inputRef = React.useRef(null);
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     approverId = _useState2[0],
     setApproverId = _useState2[1];
-  var templateParams = {
+  var _useState3 = React.useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    templateId = _useState4[0],
+    setTemplateId = _useState4[1];
+  var params = {
     requestableId: requestableId,
     approverId: approverId,
     approvalRequestorId: (_globalProps$user = initializers.globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.id
   };
-  var _useFetchTemplates = useFetchTemplates(templateParams),
+  var _useFetchTemplates = useFetchTemplates(),
     _useFetchTemplates$da = _useFetchTemplates.data,
     _useFetchTemplates$da2 = _useFetchTemplates$da === void 0 ? {} : _useFetchTemplates$da,
     _useFetchTemplates$da3 = _useFetchTemplates$da2.templates,
     templates = _useFetchTemplates$da3 === void 0 ? [] : _useFetchTemplates$da3;
+  var _useFetchTemplate = useFetchTemplate({
+      id: templateId,
+      params: params
+    }),
+    _useFetchTemplate$dat = _useFetchTemplate.data,
+    _useFetchTemplate$dat2 = _useFetchTemplate$dat === void 0 ? {} : _useFetchTemplate$dat,
+    _useFetchTemplate$dat3 = _useFetchTemplate$dat2.template,
+    template = _useFetchTemplate$dat3 === void 0 ? {} : _useFetchTemplate$dat3;
   var _useFetchApprovers = useFetchApprovers(),
     _useFetchApprovers$da = _useFetchApprovers.data,
     _useFetchApprovers$da2 = _useFetchApprovers$da === void 0 ? {} : _useFetchApprovers$da,
@@ -1608,27 +1635,24 @@ var Form$1 = function Form(_ref) {
       value: template.id
     };
   });
-  var updateMessage = function updateMessage(template) {
+  var updateMessage = function updateMessage() {
     var _inputRef$current;
     var message = template.parsedMessage || template.message;
     setFieldValue("message", message);
     inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || (_inputRef$current = _inputRef$current.editor) === null || _inputRef$current === void 0 || (_inputRef$current = _inputRef$current.commands) === null || _inputRef$current === void 0 || _inputRef$current.setContent(message);
   };
   var handleTemplateChange = function handleTemplateChange(selectedTemplate) {
-    resetForm();
-    var template = neetoCist.findById(selectedTemplate.value, templates);
-    setSelectedTemplateData(template);
-    updateMessage(template);
+    setTemplateId(selectedTemplate.value);
   };
   var handleApproverChange = function handleApproverChange(approver) {
     setApproverId(approver.value);
     setFieldValue("approver", approver);
   };
   React.useEffect(function () {
-    if (!(neetoCist.isNotEmpty(templates) && neetoCist.isNotEmpty(selectedTemplateData))) return;
-    var template = neetoCist.findById(selectedTemplateData.id, templates);
-    updateMessage(template);
-  }, [templates]);
+    if (ramda.isEmpty(template)) return;
+    setSelectedTemplateData(template);
+    updateMessage();
+  }, [template]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-full space-y-6"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, {