@bigbinary/neeto-payments-frontend 3.0.23 → 3.0.25

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

@@ -40,6 +40,7 @@
       "paymentAmount": "Payment amount",
       "transferredAmount": "Transferred amount",
       "search": "Search",
+      "takeAction": "Take action",
       "createdAt": "Created at",
       "country": "Country",
       "email": "Email",
@@ -69,7 +70,8 @@
       "discountCode": "Discount code",
       "netAmount": "Net amount",
       "payoutStatus": "Payout status",
-      "searchByIdentifier": "Search by identifier"
+      "searchByIdentifier": "Search by identifier",
+      "submit": "Submit"
     },
     "alert": {
       "stripe": {
@@ -411,7 +413,19 @@
       "netAmountHelpTitle": "What is the net amount?",
       "platformShareHelpTitle": "What is the platform share?",
       "netAmountDescription": "The net amount is the final payment you receive after deducting the payment provider's fees.",
-      "platformShareDescription": "The platform share is the amount that will be deposited into your bank account after subtracting all service provider shares. (net amount - transferred amount)"
+      "platformShareDescription": "The platform share is the amount that will be deposited into your bank account after subtracting all service provider shares. (net amount - transferred amount)",
+      "selectAll": "Select all {{count}} pending split transfers",
+      "selectedSplitTransfers": "All {{selectedCount}} pending split transfers on this page are selected",
+      "recordWithCount_one": "{{count}} split transfer selected of <span>{{recordsCount}}</span>",
+      "recordWithCount_other": "{{count}} split transfers selected of <span>{{recordsCount}}</span>"
+    },
+    "cancelSplitTransfers": {
+      "cancellationReasonRequired": "Cancellation reason is required",
+      "modal": {
+        "title": "Cancel split transfers?",
+        "message": "You are about to cancel pending split transfers. This can't be undone.",
+        "cancelReason": "Reason for cancellation"
+      }
     }
   }
 }

package/dist/SplitTransfersDashboard.js

@@ -6,35 +6,41 @@ import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE } from '@bigbinary/neeto-commons-
 import { currencyFormat, getQueryParams, buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
 import { buildFiltersFromURL } from '@bigbinary/neeto-filters-frontend/utils';
 import Spinner from '@bigbinary/neetoui/Spinner';
-import { mergeLeft, curry, mergeDeepWith, concat, reject, isNil, map, prop, sortBy, isEmpty, modify } from 'ramda';
+import { mergeLeft, curry, mergeDeepWith, concat, reject, isNil, map, prop, sortBy, isEmpty, modify, pluck } from 'ramda';
 import { useHistory } from 'react-router-dom';
 import { E as ExportModal } from './ExportModal-C6-IwFlZ.js';
 import { useQuery } from '@tanstack/react-query';
+import { useMutationWithInvalidation } from '@bigbinary/neeto-commons-frontend/react-utils';
 import axios from 'axios';
 import { B as BASE_URL, k as preProcessStatus, l as getTagStyle, f as formatAmount, d as formatCurrency, m as PAYMENT_KIND, p as processDataIndex, S as SORT_DIRECTIONS, D as DEFAULT_SORT_PROPERTIES, s as shouldTabsVisible, U as UN_HIDEABLE_COLUMNS, h as DEFAULT_PAGE_VALUES, i as DASHBOARD_KIND } from './index-lD18ClWH.js';
 import { Q as QUERY_KEYS } from './queryConstants-BCx5cEmf.js';
+import Modal from '@bigbinary/neetoui/Modal';
+import Typography from '@bigbinary/neetoui/Typography';
+import Form from '@bigbinary/neetoui/formik/Form';
+import Textarea from '@bigbinary/neetoui/formik/Textarea';
+import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
+import { useTranslation, Trans } from 'react-i18next';
 import { t } from 'i18next';
-import { isNotPresent, isPresent, removeBy, camelToSnakeCase } from '@bigbinary/neeto-cist';
+import * as yup from 'yup';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { isNotPresent, isPresent, removeBy, camelToSnakeCase, isNotEmpty } from '@bigbinary/neeto-cist';
 import { useHiddenColumns } from '@bigbinary/neeto-molecules/Columns';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
 import Table from '@bigbinary/neetoui/Table';
 import NoData from '@bigbinary/neetoui/NoData';
-import { useTranslation } from 'react-i18next';
 import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 import Pane from '@bigbinary/neetoui/Pane';
-import Typography from '@bigbinary/neetoui/Typography';
 import Button from '@bigbinary/neetoui/Button';
 import Tag from '@bigbinary/neetoui/Tag';
 import Tooltip from '@bigbinary/neetoui/Tooltip';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import DateFormat from '@bigbinary/neeto-molecules/DateFormat';
 import { C as CopyButtonWrapper } from './CopyButtonWrapper-SoJkwX-d.js';
 import FiltersBar from '@bigbinary/neeto-filters-frontend/Bar';
 import Header from '@bigbinary/neeto-molecules/Header';
 import SubHeader from '@bigbinary/neeto-molecules/SubHeader';
 import Tab from '@bigbinary/neetoui/Tab';
+import Dropdown from '@bigbinary/neetoui/Dropdown';
 import '@bigbinary/neeto-icons/Download';
-import '@bigbinary/neetoui/Modal';
 import './exportChannel-CViICC6x.js';
 import '@bigbinary/neeto-molecules/CopyToClipboardButton';
 
@@ -46,9 +52,15 @@ var list = function list(payload) {
 var show = function show(id) {
   return axios.get("".concat(BASE_URL, "/api/v1/split_transfers/").concat(id));
 };
+var bulkCancellation = function bulkCancellation(payload) {
+  return axios.post("".concat(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; }
@@ -71,6 +83,11 @@ var useShowSplitTransfers = function useShowSplitTransfers(id, options) {
     }
   }, options));
 };
+var useBulkCancellationSplitTransfers = function useBulkCancellationSplitTransfers(options) {
+  return useMutationWithInvalidation(splitTransfersApi.bulkCancellation, _objectSpread$2({
+    keysToInvalidate: [QUERY_KEYS.SPLIT_TRANSFERS_LISTw]
+  }, options));
+};
 
 var COLUMNS_STORAGE_KEY = "splitTransfersDashboard";
 var SPLIT_TRANSFERS_DASHBOARD_TAB = {
@@ -99,6 +116,65 @@ var INITIAL_TRANSFER_DETAILS = {
   id: null,
   isPaneOpen: false
 };
+var VALIDATION_SCHEMA = yup.object().shape({
+  cancellationReason: yup.string().required(t("neetoPayments.cancelSplitTransfers.cancellationReasonRequired"))
+});
+
+var CancelModal = function CancelModal(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    handleSplitTransfersCancellation = _ref.handleSplitTransfersCancellation;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleSubmit = function handleSubmit(_ref2) {
+    var cancellationReason = _ref2.cancellationReason;
+    handleSplitTransfersCancellation(cancellationReason);
+  };
+  return /*#__PURE__*/jsxs(Modal, {
+    isOpen: isOpen,
+    onClose: onClose,
+    size: "large",
+    children: [/*#__PURE__*/jsx(Modal.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "h2",
+        weight: "medium",
+        children: t("neetoPayments.cancelSplitTransfers.modal.title")
+      })
+    }), /*#__PURE__*/jsx(Form, {
+      formikProps: {
+        initialValues: {
+          cancellationReason: ""
+        },
+        validationSchema: VALIDATION_SCHEMA,
+        onSubmit: handleSubmit
+      },
+      children: /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(Modal.Body, {
+          children: /*#__PURE__*/jsx("div", {
+            className: "flex flex-col space-y-4",
+            children: /*#__PURE__*/jsx(Textarea, {
+              required: true,
+              name: "cancellationReason",
+              label: t("neetoPayments.cancelSplitTransfers.modal.cancelReason")
+            })
+          })
+        }), /*#__PURE__*/jsx(Modal.Footer, {
+          children: /*#__PURE__*/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,
@@ -562,11 +638,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 = useState(INITIAL_TRANSFER_DETAILS),
     _useState2 = _slicedToArray(_useState, 2),
     selectedTransfer = _useState2[0],
@@ -581,6 +660,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,
@@ -610,6 +702,7 @@ var List = function List(_ref) {
     children: [/*#__PURE__*/jsx(TableWrapper, {
       hasPagination: splitTransfersCount > (pageProperties === null || pageProperties === void 0 ? void 0 : pageProperties.pageSize),
       children: /*#__PURE__*/jsx(Table, {
+        onRowSelect: onRowSelect,
         fixedHeight: true,
         allowRowClick: false,
         columnData: visibleColumns,
@@ -621,9 +714,19 @@ var List = function List(_ref) {
           pageProperties: pageProperties,
           tab: tab
         }),
-        rowSelection: false,
+        rowSelection: getRowSelection(),
+        selectedRowKeys: selectedRows,
         sortDirections: 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,
@@ -640,10 +743,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,
@@ -661,6 +769,8 @@ var TopSection = function TopSection(_ref) {
   var splitTransfersCount = views[tab];
   var splitTransfersCountVisible = splitTransfersCount > 0;
   var isFilterButtonVisible = splitTransfersCount || isPresent(filters);
+  var isDropdownVisible = isNotEmpty(selectedRows);
+  var selectedRecordsCount = hasBulkSelectedAllRows ? splitTransfersCount : selectedRows.length;
   var handleFiltersChange = function handleFiltersChange(filters) {
     startTransition(function () {
       setFilters(filters);
@@ -696,14 +806,46 @@ var TopSection = function TopSection(_ref) {
       })
     }), /*#__PURE__*/jsx(SubHeader, {
       className: "mt-4",
-      leftActionBlock: splitTransfersCountVisible && /*#__PURE__*/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__*/jsx("div", {
+        className: "w-100 flex items-center space-x-3",
+        children: isDropdownVisible ? /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(Typography, {
+            className: "neeto-ui-gray-800 mr-2 font-semibold",
+            component: "h4",
+            children: /*#__PURE__*/jsx(Trans, {
+              count: selectedRecordsCount,
+              i18nKey: "neetoPayments.splitTransferDetails.recordWithCount",
+              components: {
+                span: /*#__PURE__*/jsx("span", {
+                  className: "neeto-ui-text-gray-600"
+                })
+              },
+              values: {
+                count: selectedRecordsCount,
+                recordsCount: splitTransfersCount
+              }
+            })
+          }), /*#__PURE__*/jsx(Dropdown, {
+            buttonStyle: "secondary",
+            label: t("neetoPayments.common.takeAction"),
+            children: /*#__PURE__*/jsx(Menu, {
+              children: /*#__PURE__*/jsx(MenuItem.Button, {
+                onClick: function onClick() {
+                  return setIsCancelModalOpen(true);
+                },
+                children: t("neetoPayments.common.cancel")
+              })
+            })
+          })]
+        }) : /*#__PURE__*/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__*/jsxs(Fragment, {
@@ -746,22 +888,38 @@ var SplitTransfersDashboard = function SplitTransfersDashboard(_ref) {
     searchTerm = _getQueryParams$searc === void 0 ? "" : _getQueryParams$searc;
   var filterableColumns = buildFilterColumns(payableEntityColumns);
   var searchKeywordProps = buildSearchProps(searchProps, searchTerm);
-  var _useState = useState(DEFAULT_SORT_PROPERTIES),
+  var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
-    sortProperties = _useState2[0],
-    setSortProperties = _useState2[1];
-  var _useState3 = useState(DEFAULT_PAGE_VALUES),
+    selectedRows = _useState2[0],
+    setSelectedRows = _useState2[1];
+  var _useState3 = useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
-    pageProperties = _useState4[0],
-    setPageProperties = _useState4[1];
+    selectedRowData = _useState4[0],
+    setSelectedRowData = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     isExportModalOpen = _useState6[0],
     setIsExportModalOpen = _useState6[1];
-  var _useState7 = useState(buildFiltersFromURL([].concat(_toConsumableArray(filterableColumns), [searchKeywordProps]))),
+  var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    filters = _useState8[0],
-    setFilters = _useState8[1];
+    isCancelModalOpen = _useState8[0],
+    setIsCancelModalOpen = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    hasBulkSelectedAllRows = _useState10[0],
+    setHasBulkSelectedAllRows = _useState10[1];
+  var _useState11 = useState(DEFAULT_SORT_PROPERTIES),
+    _useState12 = _slicedToArray(_useState11, 2),
+    sortProperties = _useState12[0],
+    setSortProperties = _useState12[1];
+  var _useState13 = useState(DEFAULT_PAGE_VALUES),
+    _useState14 = _slicedToArray(_useState13, 2),
+    pageProperties = _useState14[0],
+    setPageProperties = _useState14[1];
+  var _useState15 = useState(buildFiltersFromURL([].concat(_toConsumableArray(filterableColumns), [searchKeywordProps]))),
+    _useState16 = _slicedToArray(_useState15, 2),
+    filters = _useState16[0],
+    setFilters = _useState16[1];
   var history = useHistory();
   var _getQueryParams2 = getQueryParams(),
     _getQueryParams2$tab = _getQueryParams2.tab,
@@ -777,6 +935,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 = pluck("id", selectedRowData);
+    cancelSplitTransfers({
+      ids: ids,
+      cancellationReason: cancellationReason,
+      isApplyChangesToAllRequired: hasBulkSelectedAllRows
+    });
+    setIsCancelModalOpen(false);
+  };
   var handleTablePagination = function handleTablePagination(page, pageSize) {
     var queryParams = getQueryParams({
       toCamelCase: false
@@ -790,11 +965,15 @@ var SplitTransfersDashboard = function SplitTransfersDashboard(_ref) {
       pageSize: pageSize
     });
   };
+  var handleRowSelect = function handleRowSelect(keys, rowData) {
+    setSelectedRows(keys);
+    setSelectedRowData(rowData);
+  };
   useEffect(function () {
     handleTablePagination(DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE);
     setSortProperties(DEFAULT_SORT_PROPERTIES);
   }, [filters, tab]);
-  if (isSplitTransfersLoading) {
+  if (isSplitTransfersLoading || isCancelling) {
     return /*#__PURE__*/jsx("div", {
       className: "flex h-full w-full items-center justify-center",
       children: /*#__PURE__*/jsx(Spinner, {})
@@ -804,10 +983,13 @@ var SplitTransfersDashboard = function SplitTransfersDashboard(_ref) {
     children: [/*#__PURE__*/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,
@@ -817,15 +999,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__*/jsx(ExportModal, {
       filters: filters,
       isExportModalOpen: isExportModalOpen,
       setIsExportModalOpen: setIsExportModalOpen,
       sortProperties: sortProperties,
       dashboardKind: DASHBOARD_KIND.splitTransfers
+    }), /*#__PURE__*/jsx(CancelModal, {
+      handleSplitTransfersCancellation: handleSplitTransfersCancellation,
+      isOpen: isCancelModalOpen,
+      onClose: function onClose() {
+        return setIsCancelModalOpen(false);
+      }
     })]
   });
 };