@bigbinary/neeto-approvals-frontend 0.0.11 → 0.0.13

package/dist/index.cjs.js

@@ -3903,7 +3903,8 @@ var common$1 = {
 	note: "Note by approver",
 	approvedBy: "Approved by",
 	rejectedBy: "Rejected by",
-	waitingFor: "Waiting for"
+	waitingFor: "Waiting for",
+	templateDetails: "Template details"
 };
 var validations$1 = {
 	enterFirstName: "Please enter first name.",
@@ -3913,7 +3914,7 @@ var validations$1 = {
 	name: "Please enter name",
 	description: "Please enter description",
 	visibility: "Please select visibility",
-	recipient: "Please select a recipient",
+	approver: "Please select a approver",
 	message: "Please enter a message",
 	variable: "Please enter variable"
 };
@@ -3925,7 +3926,7 @@ var inputs = {
 		firstName: "First name",
 		lastName: "Last name",
 		description: "Description",
-		recipient: "Recipient",
+		approver: "Approver",
 		variableMapping: "Variable mapping",
 		message: "Message"
 	},
@@ -8476,6 +8477,69 @@ const useDeleteTemplate = options => {
   });
 };
 
+const Field = _ref => {
+  let label = _ref.label,
+    value = _ref.value;
+  return /*#__PURE__*/t__default["default"].createElement("div", {
+    className: "flex flex-col items-start justify-center"
+  }, /*#__PURE__*/t__default["default"].createElement(neetoui.Label, {
+    className: "mb-1 font-normal"
+  }, label), /*#__PURE__*/t__default["default"].createElement("p", {
+    className: "neeto-ui-text-gray-800 break-words text-base font-medium"
+  }, value));
+};
+
+const TemplateDetails = _ref => {
+  var _Object$entries;
+  let isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    templateDetails = _ref.templateDetails;
+  const name = templateDetails.name,
+    description = templateDetails.description,
+    approverName = templateDetails.approverName,
+    accessible = templateDetails.accessible,
+    variables = templateDetails.variables,
+    message = templateDetails.message;
+  return /*#__PURE__*/t__default["default"].createElement(neetoui.Pane, {
+    isOpen: isOpen,
+    onClose: onClose
+  }, /*#__PURE__*/t__default["default"].createElement(neetoui.Pane.Header, {
+    className: "space-y-2"
+  }, /*#__PURE__*/t__default["default"].createElement(neetoui.Typography, {
+    style: "h2"
+  }, t$2("common.templateDetails"))), /*#__PURE__*/t__default["default"].createElement(neetoui.Pane.Body, {
+    className: "space-y-6"
+  }, /*#__PURE__*/t__default["default"].createElement(Field, {
+    label: t$2("common.name"),
+    value: name
+  }), /*#__PURE__*/t__default["default"].createElement(Field, {
+    label: t$2("inputs.labels.description"),
+    value: description
+  }), /*#__PURE__*/t__default["default"].createElement(Field, {
+    label: t$2("common.approver"),
+    value: approverName
+  }), /*#__PURE__*/t__default["default"].createElement(Field, {
+    label: t$2("common.visibility"),
+    value: accessible === null || accessible === void 0 ? void 0 : accessible.label
+  }), (_Object$entries = Object.entries(variables || {})) === null || _Object$entries === void 0 ? void 0 : _Object$entries.map(_ref2 => {
+    let _ref3 = _slicedToArray$2(_ref2, 2),
+      variable = _ref3[0],
+      value = _ref3[1];
+    return /*#__PURE__*/t__default["default"].createElement(Field, {
+      label: capitalize$1(variable),
+      value: value,
+      key: value
+    });
+  }), /*#__PURE__*/t__default["default"].createElement("div", {
+    className: "flex flex-col space-y-4 w-full"
+  }, /*#__PURE__*/t__default["default"].createElement(neetoui.Label, {
+    className: "mb-1 font-normal"
+  }, t$2("inputs.labels.message")), /*#__PURE__*/t__default["default"].createElement(Fz, {
+    content: message,
+    className: "neeto-ui-bg-gray-100 rounded-lg p-3"
+  }))));
+};
+
 const Menu$1 = neetoui.Dropdown.Menu,
   MenuItem = neetoui.Dropdown.MenuItem;
 const columnData = _ref => {
@@ -8533,6 +8597,10 @@ const Templates = _ref => {
     _useState4 = _slicedToArray$2(_useState3, 2),
     templateToDelete = _useState4[0],
     setTemplateToDelete = _useState4[1];
+  const _useState5 = t$3.useState(""),
+    _useState6 = _slicedToArray$2(_useState5, 2),
+    templateDetails = _useState6[0],
+    setTemplateDetails = _useState6[1];
   const debouncedSearch = useDebounce(filters.search, SEARCH_DELAY);
   const history = reactRouterDom.useHistory();
   const _usePaginate = usePaginate(),
@@ -8609,7 +8677,7 @@ const Templates = _ref => {
     className: "neeto-approvals__table-wrapper"
   }, /*#__PURE__*/t__default["default"].createElement(neetoui.Table, {
     fixedHeight: true,
-    allowRowClick: false,
+    allowRowClick: true,
     columnData: columns,
     currentPageNumber: pageProperties.index,
     defaultPageSize: pageProperties.size,
@@ -8619,7 +8687,8 @@ const Templates = _ref => {
     },
     totalCount: totalCount,
     onChange: handleTableChange,
-    rowData: templates
+    rowData: templates,
+    onRowClick: (_, templateDetails) => setTemplateDetails(templateDetails)
   })) : /*#__PURE__*/t__default["default"].createElement("div", {
     className: "flex h-full w-full flex-grow items-center justify-center"
   }, /*#__PURE__*/t__default["default"].createElement(neetoui.NoData, {
@@ -8647,6 +8716,10 @@ const Templates = _ref => {
     }),
     onClose: () => setTemplateToDelete(""),
     onSubmit: () => handleDelete(templateToDelete === null || templateToDelete === void 0 ? void 0 : templateToDelete.id)
+  }), /*#__PURE__*/t__default["default"].createElement(TemplateDetails, {
+    isOpen: !!templateDetails,
+    onClose: () => setTemplateDetails(""),
+    templateDetails: templateDetails
   }));
 };
 
@@ -8654,13 +8727,13 @@ const TEMPLATE_FORM_INITIAL_VALUES = {
   name: "",
   description: "",
   visibility: "",
-  recipient: "",
+  approver: "",
   variables: [],
   message: ""
 };
 const TEMPLATE_FORM_VALIDATION_SCHEMA = yup__namespace.object().shape({
   name: yup__namespace.string().trim().required(t$2("validations.name")),
-  recipient: yup__namespace.object().required(t$2("validations.recipient")),
+  approver: yup__namespace.object().required(t$2("validations.approver")),
   message: yup__namespace.string().test("message", t$2("validations.message"), content => !fr(content)),
   variables: yup__namespace.array().of(yup__namespace.object().shape({
     variable: yup__namespace.string().trim().required(t$2("validations.variable"))
@@ -8766,8 +8839,8 @@ const Form$1 = _ref => {
   }), /*#__PURE__*/t__default["default"].createElement("div", {
     className: "flex space-x-6"
   }, /*#__PURE__*/t__default["default"].createElement(formik.Select, {
-    name: "recipient",
-    label: t("inputs.labels.recipient"),
+    name: "approver",
+    label: t("inputs.labels.approver"),
     options: approvers.map(approver => ({
       label: approver.name,
       value: approver.id
@@ -8794,7 +8867,7 @@ function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) {
 const buildTemplatePayload = template => {
   const variables = template.variables,
     visibility = template.visibility,
-    recipient = template.recipient;
+    approver = template.approver;
   const indexedVariables = variables.map((_ref, index) => {
     let variable = _ref.variable;
     return [`variable${index + 1}`, variable];
@@ -8802,7 +8875,7 @@ const buildTemplatePayload = template => {
   const payload = {
     template: _objectSpread$3(_objectSpread$3({}, template), {}, {
       accessibleId: visibility.value,
-      approverId: recipient.value,
+      approverId: approver.value,
       variables: ramda.fromPairs(indexedVariables)
     })
   };
@@ -8846,7 +8919,7 @@ const Create = _ref => {
 function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const Edit = _ref => {
-  var _template$recipient, _template$recipient2;
+  var _template$approver, _template$approver2;
   let approvalsPath = _ref.approvalsPath,
     visibilityOptions = _ref.visibilityOptions,
     templateUrl = _ref.templateUrl;
@@ -8895,9 +8968,9 @@ const Edit = _ref => {
     isLoading: isUpdating,
     initialData: _objectSpread$2(_objectSpread$2({}, template), {}, {
       visibility: template.accessible.id,
-      recipient: {
-        label: (_template$recipient = template.recipient) === null || _template$recipient === void 0 ? void 0 : _template$recipient.name,
-        value: (_template$recipient2 = template.recipient) === null || _template$recipient2 === void 0 ? void 0 : _template$recipient2.id
+      approver: {
+        label: (_template$approver = template.approver) === null || _template$approver === void 0 ? void 0 : _template$approver.name,
+        value: (_template$approver2 = template.approver) === null || _template$approver2 === void 0 ? void 0 : _template$approver2.id
       },
       variables: Object.values(template.variables).map(variable => ({
         variable