@bigbinary/neeto-payments-frontend 3.0.23 → 3.0.25

package/dist/cjs/SplitTransfersDashboard.js

@@ -12,34 +12,59 @@ var ramda = require('ramda');
 var reactRouterDom = require('react-router-dom');
 var ExportModal = require('./ExportModal-DaLww9x0.js');
 var reactQuery = require('@tanstack/react-query');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var axios = require('axios');
 var constants = require('./index-Br_ibfWm.js');
 var queryConstants = require('./queryConstants-DjUfvjMz.js');
+var Modal = require('@bigbinary/neetoui/Modal');
+var Typography = require('@bigbinary/neetoui/Typography');
+var Form = require('@bigbinary/neetoui/formik/Form');
+var Textarea = require('@bigbinary/neetoui/formik/Textarea');
+var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
+var reactI18next = require('react-i18next');
 var i18next = require('i18next');
+var yup = require('yup');
+var jsxRuntime = require('react/jsx-runtime');
 var neetoCist = require('@bigbinary/neeto-cist');
 var Columns = require('@bigbinary/neeto-molecules/Columns');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
 var Table = require('@bigbinary/neetoui/Table');
 var NoData = require('@bigbinary/neetoui/NoData');
-var reactI18next = require('react-i18next');
 var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
 var Pane = require('@bigbinary/neetoui/Pane');
-var Typography = require('@bigbinary/neetoui/Typography');
 var Button = require('@bigbinary/neetoui/Button');
 var Tag = require('@bigbinary/neetoui/Tag');
 var Tooltip = require('@bigbinary/neetoui/Tooltip');
-var jsxRuntime = require('react/jsx-runtime');
 var DateFormat = require('@bigbinary/neeto-molecules/DateFormat');
 var CopyButtonWrapper = require('./CopyButtonWrapper-Ds1k64E0.js');
 var FiltersBar = require('@bigbinary/neeto-filters-frontend/Bar');
 var Header = require('@bigbinary/neeto-molecules/Header');
 var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
 var Tab = require('@bigbinary/neetoui/Tab');
+var Dropdown = require('@bigbinary/neetoui/Dropdown');
 require('@bigbinary/neeto-icons/Download');
-require('@bigbinary/neetoui/Modal');
 require('./exportChannel-BsZ3fusx.js');
 require('@bigbinary/neeto-molecules/CopyToClipboardButton');
 
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var yup__namespace = /*#__PURE__*/_interopNamespaceDefault(yup);
+
 var list = function list(payload) {
   return axios.get("".concat(constants.BASE_URL, "/api/v1/split_transfers"), {
     params: payload
@@ -48,9 +73,15 @@ var list = function list(payload) {
 var show = function show(id) {
   return axios.get("".concat(constants.BASE_URL, "/api/v1/split_transfers/").concat(id));
 };
+var bulkCancellation = function bulkCancellation(payload) {
+  return axios.post("".concat(constants.BASE_URL, "/api/v1/split_transfers/bulk_cancellation"), {
+    splitTransfer: payload
+  });
+};
 var splitTransfersApi = {
   list: list,
-  show: show
+  show: show,
+  bulkCancellation: bulkCancellation
 };
 
 function ownKeys$2(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; }
@@ -73,6 +104,11 @@ var useShowSplitTransfers = function useShowSplitTransfers(id, options) {
     }
   }, options));
 };
+var useBulkCancellationSplitTransfers = function useBulkCancellationSplitTransfers(options) {
+  return reactUtils.useMutationWithInvalidation(splitTransfersApi.bulkCancellation, _objectSpread$2({
+    keysToInvalidate: [queryConstants.QUERY_KEYS.SPLIT_TRANSFERS_LISTw]
+  }, options));
+};
 
 var COLUMNS_STORAGE_KEY = "splitTransfersDashboard";
 var SPLIT_TRANSFERS_DASHBOARD_TAB = {
@@ -101,6 +137,65 @@ var INITIAL_TRANSFER_DETAILS = {
   id: null,
   isPaneOpen: false
 };
+var VALIDATION_SCHEMA = yup__namespace.object().shape({
+  cancellationReason: yup__namespace.string().required(i18next.t("neetoPayments.cancelSplitTransfers.cancellationReasonRequired"))
+});
+
+var CancelModal = function CancelModal(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    handleSplitTransfersCancellation = _ref.handleSplitTransfersCancellation;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var handleSubmit = function handleSubmit(_ref2) {
+    var cancellationReason = _ref2.cancellationReason;
+    handleSplitTransfersCancellation(cancellationReason);
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs(Modal, {
+    isOpen: isOpen,
+    onClose: onClose,
+    size: "large",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Modal.Header, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        style: "h2",
+        weight: "medium",
+        children: t("neetoPayments.cancelSplitTransfers.modal.title")
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Form, {
+      formikProps: {
+        initialValues: {
+          cancellationReason: ""
+        },
+        validationSchema: VALIDATION_SCHEMA,
+        onSubmit: handleSubmit
+      },
+      children: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Modal.Body, {
+          children: /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "flex flex-col space-y-4",
+            children: /*#__PURE__*/jsxRuntime.jsx(Textarea, {
+              required: true,
+              name: "cancellationReason",
+              label: t("neetoPayments.cancelSplitTransfers.modal.cancelReason")
+            })
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(Modal.Footer, {
+          children: /*#__PURE__*/jsxRuntime.jsx(ActionBlock, {
+            position: "right",
+            cancelButtonProps: {
+              onClick: onClose,
+              style: "tertiary"
+            },
+            submitButtonProps: {
+              disabled: false,
+              label: t("neetoPayments.common.submit")
+            }
+          })
+        })]
+      })
+    })]
+  });
+};
 
 var Status = function Status(_ref) {
   var type = _ref.type,
@@ -564,11 +659,14 @@ var buildRowData = function buildRowData(_ref3) {
 var List = function List(_ref) {
   var isFetching = _ref.isFetching,
     splitTransfers = _ref.splitTransfers,
+    selectedRows = _ref.selectedRows,
     views = _ref.views,
     payableEntityColumns = _ref.payableEntityColumns,
-    setSortProperties = _ref.setSortProperties,
     pageProperties = _ref.pageProperties,
-    handleTablePagination = _ref.handleTablePagination;
+    onRowSelect = _ref.onRowSelect,
+    setSortProperties = _ref.setSortProperties,
+    handleTablePagination = _ref.handleTablePagination,
+    setHasBulkSelectedAllRows = _ref.setHasBulkSelectedAllRows;
   var _useState = React.useState(INITIAL_TRANSFER_DETAILS),
     _useState2 = _slicedToArray(_useState, 2),
     selectedTransfer = _useState2[0],
@@ -583,6 +681,19 @@ var List = function List(_ref) {
     _useHiddenColumns$hid = _useHiddenColumns.hiddenColumns,
     hiddenColumns = _useHiddenColumns$hid === void 0 ? [] : _useHiddenColumns$hid;
   var splitTransfersCount = views[tab];
+  var getRowSelection = function getRowSelection() {
+    if (tab === SPLIT_TRANSFERS_DASHBOARD_TAB.pending) return true;
+    if (tab === SPLIT_TRANSFERS_DASHBOARD_TAB.all) {
+      return {
+        getCheckboxProps: function getCheckboxProps(record) {
+          return {
+            disabled: record.status !== SPLIT_TRANSFERS_DASHBOARD_TAB.pending
+          };
+        }
+      };
+    }
+    return false;
+  };
   var visibleColumns = buildTableColumns({
     tab: tab,
     hiddenColumns: hiddenColumns,
@@ -612,6 +723,7 @@ var List = function List(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsx(TableWrapper, {
       hasPagination: splitTransfersCount > (pageProperties === null || pageProperties === void 0 ? void 0 : pageProperties.pageSize),
       children: /*#__PURE__*/jsxRuntime.jsx(Table, {
+        onRowSelect: onRowSelect,
         fixedHeight: true,
         allowRowClick: false,
         columnData: visibleColumns,
@@ -623,9 +735,19 @@ var List = function List(_ref) {
           pageProperties: pageProperties,
           tab: tab
         }),
-        rowSelection: false,
+        rowSelection: getRowSelection(),
+        selectedRowKeys: selectedRows,
         sortDirections: constants.SORT_DIRECTIONS,
         totalCount: splitTransfersCount,
+        bulkSelectAllRowsProps: {
+          selectAllRowMessage: t("neetoPayments.splitTransferDetails.selectedSplitTransfers", {
+            count: selectedRows.length
+          }),
+          selectAllRowButtonLabel: t("neetoPayments.splitTransferDetails.selectAll", {
+            count: views[SPLIT_TRANSFERS_DASHBOARD_TAB.pending]
+          }),
+          setBulkSelectedAllRows: setHasBulkSelectedAllRows
+        },
         paginationProps: {
           showSizeChanger: true,
           hideOnSinglePage: true,
@@ -642,10 +764,15 @@ var List = function List(_ref) {
   });
 };
 
+var Menu = Dropdown.Menu,
+  MenuItem = Dropdown.MenuItem;
 var TopSection = function TopSection(_ref) {
   var views = _ref.views,
     filters = _ref.filters,
+    setIsCancelModalOpen = _ref.setIsCancelModalOpen,
+    selectedRows = _ref.selectedRows,
     setFilters = _ref.setFilters,
+    hasBulkSelectedAllRows = _ref.hasBulkSelectedAllRows,
     filterableColumns = _ref.filterableColumns,
     searchKeywordProps = _ref.searchKeywordProps,
     payableEntityColumns = _ref.payableEntityColumns,
@@ -663,6 +790,8 @@ var TopSection = function TopSection(_ref) {
   var splitTransfersCount = views[tab];
   var splitTransfersCountVisible = splitTransfersCount > 0;
   var isFilterButtonVisible = splitTransfersCount || neetoCist.isPresent(filters);
+  var isDropdownVisible = neetoCist.isNotEmpty(selectedRows);
+  var selectedRecordsCount = hasBulkSelectedAllRows ? splitTransfersCount : selectedRows.length;
   var handleFiltersChange = function handleFiltersChange(filters) {
     React.startTransition(function () {
       setFilters(filters);
@@ -698,14 +827,46 @@ var TopSection = function TopSection(_ref) {
       })
     }), /*#__PURE__*/jsxRuntime.jsx(SubHeader, {
       className: "mt-4",
-      leftActionBlock: splitTransfersCountVisible && /*#__PURE__*/jsxRuntime.jsx(Typography, {
-        className: "neeto-ui-gray-800 mr-2 font-semibold",
-        component: "h4",
-        children: tab === SPLIT_TRANSFERS_DASHBOARD_TAB.all ? t("neetoPayments.countOf.splitTransfer", {
-          count: splitTransfersCount
-        }) : t("neetoPayments.countOf.splitTransferWithStatus", {
-          count: splitTransfersCount,
-          status: tab
+      leftActionBlock: splitTransfersCountVisible && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "w-100 flex items-center space-x-3",
+        children: isDropdownVisible ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+            className: "neeto-ui-gray-800 mr-2 font-semibold",
+            component: "h4",
+            children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+              count: selectedRecordsCount,
+              i18nKey: "neetoPayments.splitTransferDetails.recordWithCount",
+              components: {
+                span: /*#__PURE__*/jsxRuntime.jsx("span", {
+                  className: "neeto-ui-text-gray-600"
+                })
+              },
+              values: {
+                count: selectedRecordsCount,
+                recordsCount: splitTransfersCount
+              }
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(Dropdown, {
+            buttonStyle: "secondary",
+            label: t("neetoPayments.common.takeAction"),
+            children: /*#__PURE__*/jsxRuntime.jsx(Menu, {
+              children: /*#__PURE__*/jsxRuntime.jsx(MenuItem.Button, {
+                onClick: function onClick() {
+                  return setIsCancelModalOpen(true);
+                },
+                children: t("neetoPayments.common.cancel")
+              })
+            })
+          })]
+        }) : /*#__PURE__*/jsxRuntime.jsx(Typography, {
+          className: "neeto-ui-gray-800 mr-2 font-semibold",
+          component: "h4",
+          children: tab === SPLIT_TRANSFERS_DASHBOARD_TAB.all ? t("neetoPayments.countOf.splitTransfer", {
+            count: splitTransfersCount
+          }) : t("neetoPayments.countOf.splitTransferWithStatus", {
+            count: splitTransfersCount,
+            status: tab
+          })
         })
       }),
       rightActionBlock: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -748,22 +909,38 @@ var SplitTransfersDashboard = function SplitTransfersDashboard(_ref) {
     searchTerm = _getQueryParams$searc === void 0 ? "" : _getQueryParams$searc;
   var filterableColumns = buildFilterColumns(payableEntityColumns);
   var searchKeywordProps = buildSearchProps(searchProps, searchTerm);
-  var _useState = React.useState(constants.DEFAULT_SORT_PROPERTIES),
+  var _useState = React.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
-    sortProperties = _useState2[0],
-    setSortProperties = _useState2[1];
-  var _useState3 = React.useState(constants.DEFAULT_PAGE_VALUES),
+    selectedRows = _useState2[0],
+    setSelectedRows = _useState2[1];
+  var _useState3 = React.useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
-    pageProperties = _useState4[0],
-    setPageProperties = _useState4[1];
+    selectedRowData = _useState4[0],
+    setSelectedRowData = _useState4[1];
   var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     isExportModalOpen = _useState6[0],
     setIsExportModalOpen = _useState6[1];
-  var _useState7 = React.useState(utils$1.buildFiltersFromURL([].concat(_toConsumableArray(filterableColumns), [searchKeywordProps]))),
+  var _useState7 = React.useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    filters = _useState8[0],
-    setFilters = _useState8[1];
+    isCancelModalOpen = _useState8[0],
+    setIsCancelModalOpen = _useState8[1];
+  var _useState9 = React.useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    hasBulkSelectedAllRows = _useState10[0],
+    setHasBulkSelectedAllRows = _useState10[1];
+  var _useState11 = React.useState(constants.DEFAULT_SORT_PROPERTIES),
+    _useState12 = _slicedToArray(_useState11, 2),
+    sortProperties = _useState12[0],
+    setSortProperties = _useState12[1];
+  var _useState13 = React.useState(constants.DEFAULT_PAGE_VALUES),
+    _useState14 = _slicedToArray(_useState13, 2),
+    pageProperties = _useState14[0],
+    setPageProperties = _useState14[1];
+  var _useState15 = React.useState(utils$1.buildFiltersFromURL([].concat(_toConsumableArray(filterableColumns), [searchKeywordProps]))),
+    _useState16 = _slicedToArray(_useState15, 2),
+    filters = _useState16[0],
+    setFilters = _useState16[1];
   var history = reactRouterDom.useHistory();
   var _getQueryParams2 = utils.getQueryParams(),
     _getQueryParams2$tab = _getQueryParams2.tab,
@@ -779,6 +956,23 @@ var SplitTransfersDashboard = function SplitTransfersDashboard(_ref) {
     views = _useFetchSplitTransfe3.views,
     isFetching = _useFetchSplitTransfe.isFetching,
     isSplitTransfersLoading = _useFetchSplitTransfe.isPending;
+  var _useBulkCancellationS = useBulkCancellationSplitTransfers({
+      onSuccess: function onSuccess() {
+        setSelectedRowData([]);
+        setSelectedRows([]);
+      }
+    }),
+    cancelSplitTransfers = _useBulkCancellationS.mutate,
+    isCancelling = _useBulkCancellationS.isPending;
+  var handleSplitTransfersCancellation = function handleSplitTransfersCancellation(cancellationReason) {
+    var ids = ramda.pluck("id", selectedRowData);
+    cancelSplitTransfers({
+      ids: ids,
+      cancellationReason: cancellationReason,
+      isApplyChangesToAllRequired: hasBulkSelectedAllRows
+    });
+    setIsCancelModalOpen(false);
+  };
   var handleTablePagination = function handleTablePagination(page, pageSize) {
     var queryParams = utils.getQueryParams({
       toCamelCase: false
@@ -792,11 +986,15 @@ var SplitTransfersDashboard = function SplitTransfersDashboard(_ref) {
       pageSize: pageSize
     });
   };
+  var handleRowSelect = function handleRowSelect(keys, rowData) {
+    setSelectedRows(keys);
+    setSelectedRowData(rowData);
+  };
   React.useEffect(function () {
     handleTablePagination(constants$1.DEFAULT_PAGE_INDEX, constants$1.DEFAULT_PAGE_SIZE);
     setSortProperties(constants.DEFAULT_SORT_PROPERTIES);
   }, [filters, tab]);
-  if (isSplitTransfersLoading) {
+  if (isSplitTransfersLoading || isCancelling) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex h-full w-full items-center justify-center",
       children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
@@ -806,10 +1004,13 @@ var SplitTransfersDashboard = function SplitTransfersDashboard(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsx(TopSection, {
       filterableColumns: filterableColumns,
       filters: filters,
+      hasBulkSelectedAllRows: hasBulkSelectedAllRows,
       pageProperties: pageProperties,
       payableEntityColumns: payableEntityColumns,
       searchKeywordProps: searchKeywordProps,
+      selectedRows: selectedRows,
       setFilters: setFilters,
+      setIsCancelModalOpen: setIsCancelModalOpen,
       setIsExportModalOpen: setIsExportModalOpen,
       setPageProperties: setPageProperties,
       setSortProperties: setSortProperties,
@@ -819,15 +1020,25 @@ var SplitTransfersDashboard = function SplitTransfersDashboard(_ref) {
       isFetching: isFetching,
       pageProperties: pageProperties,
       payableEntityColumns: payableEntityColumns,
+      selectedRows: selectedRows,
+      setHasBulkSelectedAllRows: setHasBulkSelectedAllRows,
+      setSelectedRows: setSelectedRows,
       setSortProperties: setSortProperties,
       splitTransfers: splitTransfers,
-      views: views
+      views: views,
+      onRowSelect: handleRowSelect
     }), /*#__PURE__*/jsxRuntime.jsx(ExportModal.ExportModal, {
       filters: filters,
       isExportModalOpen: isExportModalOpen,
       setIsExportModalOpen: setIsExportModalOpen,
       sortProperties: sortProperties,
       dashboardKind: constants.DASHBOARD_KIND.splitTransfers
+    }), /*#__PURE__*/jsxRuntime.jsx(CancelModal, {
+      handleSplitTransfersCancellation: handleSplitTransfersCancellation,
+      isOpen: isCancelModalOpen,
+      onClose: function onClose() {
+        return setIsCancelModalOpen(false);
+      }
     })]
   });
 };