@bigbinary/neeto-payments-frontend 6.1.12 → 6.1.14

package/dist/SplitTransfersDashboard.js

@@ -1,93 +1,74 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, startTransition, useEffect } from 'react';
 import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE } from 'neetocommons/constants';
 import { currencyFormat, getQueryParams, buildUrl } from 'neetocommons/utils';
 import { Bar, buildFiltersFromURL } from '@bigbinary/neeto-filters-frontend';
-import { Modal, Typography, Tooltip, Tag, Pane, Spinner, Button, NoData, Table, Dropdown, Tab } from '@bigbinary/neetoui';
+import { Modal, Typography, Tooltip, Tag, Pane, Spinner, Button, NoData, Table, Tab, Dropdown } from '@bigbinary/neetoui';
 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-CxKyrlwf.js';
+import { E as ExportModal } from './ExportModal-CoRuQVas.js';
 import { useQuery } from '@tanstack/react-query';
 import { useMutationWithInvalidation } from 'neetocommons/react-utils';
 import axios from 'axios';
-import { B as BASE_URL, v as preProcessStatus, w as getTagStyle, l as formatAmount, m as formatCurrency, x as PAYMENT_KIND, S as SORT_DIRECTIONS, p as processDataIndex, D as DEFAULT_SORT_PROPERTIES, s as shouldTabsVisible, U as UN_HIDEABLE_COLUMNS, i as DEFAULT_PAGE_VALUES, q as DASHBOARD_KIND } from './index-C7irWceQ.js';
-import { Q as QUERY_KEYS } from './queryConstants-DFKKEEo0.js';
+import { B as BASE_URL, v as preProcessStatus, w as getTagStyle, l as formatAmount, m as formatCurrency, x as PAYMENT_KIND, S as SORT_DIRECTIONS, p as processDataIndex, D as DEFAULT_SORT_PROPERTIES, s as shouldTabsVisible, U as UN_HIDEABLE_COLUMNS, i as DEFAULT_PAGE_VALUES, q as DASHBOARD_KIND } from './index-BTVToZp9.js';
+import { Q as QUERY_KEYS } from './queryConstants-C7AqdemO.js';
 import { Form, Textarea, ActionBlock } from '@bigbinary/neetoui/formik';
 import { useTranslation, Trans } from 'react-i18next';
 import { t } from 'i18next';
 import * as yup from 'yup';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { isNotPresent, humanize, isPresent, removeBy, camelToSnakeCase, isNotEmpty, existsBy } from 'neetocist';
 import { useTableConfigurations } from '@bigbinary/neeto-molecules/Columns';
 import TableWrapper from '@bigbinary/neeto-molecules/TableWrapper';
-import { T as TABLE_KEYS } from './exportChannel-DAxJ44QB.js';
+import { T as TABLE_KEYS } from './exportChannel-Db0U5gc1.js';
 import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 import DateFormat from '@bigbinary/neeto-molecules/DateFormat';
-import { C as CopyButtonWrapper } from './CopyButtonWrapper-rv-OaINx.js';
+import { C as CopyButtonWrapper } from './CopyButtonWrapper-Bp5IVO76.js';
 import Header from '@bigbinary/neeto-molecules/Header';
 import SubHeader from '@bigbinary/neeto-molecules/SubHeader';
 import '@bigbinary/neeto-icons';
 import 'decimal.js';
 import '@bigbinary/neeto-molecules/CopyToClipboardButton';
 
-var list = function list(payload) {
-  return axios.get("".concat(BASE_URL, "/api/v1/split_transfers"), {
-    params: payload
-  });
-};
-var show = function show(id) {
-  return axios.get("".concat(BASE_URL, "/api/v1/split_transfers/").concat(id));
-};
-var bulkUpdate = function bulkUpdate(payload) {
-  return axios.post("".concat(BASE_URL, "/api/v1/split_transfers/bulk_update"), {
-    splitTransfer: payload
-  });
-};
-var splitTransfersApi = {
-  list: list,
-  show: show,
-  bulkUpdate: bulkUpdate
+const list = payload => axios.get(`${BASE_URL}/api/v1/split_transfers`, {
+  params: payload
+});
+const show = id => axios.get(`${BASE_URL}/api/v1/split_transfers/${id}`);
+const bulkUpdate = payload => axios.post(`${BASE_URL}/api/v1/split_transfers/bulk_update`, {
+  splitTransfer: payload
+});
+const splitTransfersApi = {
+  list,
+  show,
+  bulkUpdate
 };
 
-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; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var useFetchSplitTransfers = function useFetchSplitTransfers() {
-  var payload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return useQuery(_objectSpread$2({
-    queryKey: [QUERY_KEYS.SPLIT_TRANSFERS_LIST, payload],
-    queryFn: function queryFn() {
-      return splitTransfersApi.list(payload);
-    }
-  }, options));
-};
-var useShowSplitTransfers = function useShowSplitTransfers(id, options) {
-  return useQuery(_objectSpread$2({
-    queryKey: [QUERY_KEYS.SPLIT_TRANSFERS_DETAILS, id],
-    queryFn: function queryFn() {
-      return splitTransfersApi.show(id);
-    }
-  }, options));
-};
-var useBulkUpdateSplitTransfers = function useBulkUpdateSplitTransfers(options) {
-  return useMutationWithInvalidation(splitTransfersApi.bulkUpdate, _objectSpread$2({
-    keysToInvalidate: [QUERY_KEYS.SPLIT_TRANSFERS_LISTw]
-  }, options));
-};
+const useFetchSplitTransfers = (payload = {}, options = {}) => useQuery({
+  queryKey: [QUERY_KEYS.SPLIT_TRANSFERS_LIST, payload],
+  queryFn: () => splitTransfersApi.list(payload),
+  ...options
+});
+const useShowSplitTransfers = (id, options) => useQuery({
+  queryKey: [QUERY_KEYS.SPLIT_TRANSFERS_DETAILS, id],
+  queryFn: () => splitTransfersApi.show(id),
+  ...options
+});
+const useBulkUpdateSplitTransfers = options => useMutationWithInvalidation(splitTransfersApi.bulkUpdate, {
+  keysToInvalidate: [QUERY_KEYS.SPLIT_TRANSFERS_LISTw],
+  ...options
+});
 
-var SPLIT_TRANSFERS_DASHBOARD_TAB = {
+const SPLIT_TRANSFERS_DASHBOARD_TAB = {
   all: "all",
   successful: "successful",
   cancelled: "cancelled",
   pending: "pending"
 };
-var SEARCH_PROPS = {
+const SEARCH_PROPS = {
   node: "identifier,",
   key: "search_term",
   model: "NeetoPaymentsEngine::Payments::Split,"
 };
-var FILTER_COLUMNS = [{
+const FILTER_COLUMNS = [{
   key: "amount",
   label: t("neetoPayments.common.amount"),
   node: "amount",
@@ -98,905 +79,963 @@ var FILTER_COLUMNS = [{
   node: "payment_at",
   type: "date"
 }];
-var INITIAL_TRANSFER_DETAILS = {
+const INITIAL_TRANSFER_DETAILS = {
   id: null,
   isPaneOpen: false
 };
-var VALIDATION_SCHEMA = yup.object().shape({
+const VALIDATION_SCHEMA = yup.object().shape({
   reason: yup.string().required(t("neetoPayments.cancelSplitTransfers.reasonRequired"))
 });
 
-var CancelModal = function CancelModal(_ref) {
-  var isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
-    handleSplitTransfersUpdate = _ref.handleSplitTransfersUpdate;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var handleSubmit = function handleSubmit(_ref2) {
-    var reason = _ref2.reason;
+const CancelModal = ({
+  isOpen,
+  onClose,
+  handleSplitTransfersUpdate
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const handleSubmit = ({
+    reason
+  }) => {
     handleSplitTransfersUpdate("cancelled", reason);
   };
-  return /*#__PURE__*/React.createElement(Modal, {
-    isOpen: isOpen,
-    onClose: onClose,
-    size: "large"
-  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2",
-    weight: "medium"
-  }, t("neetoPayments.cancelSplitTransfers.modal.title"))), /*#__PURE__*/React.createElement(Form, {
-    formikProps: {
-      initialValues: {
-        reason: ""
+  return /*#__PURE__*/jsxs(Modal, {
+    isOpen,
+    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: {
+          reason: ""
+        },
+        validationSchema: VALIDATION_SCHEMA,
+        onSubmit: handleSubmit
       },
-      validationSchema: VALIDATION_SCHEMA,
-      onSubmit: handleSubmit
-    }
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col space-y-4"
-  }, /*#__PURE__*/React.createElement(Textarea, {
-    required: true,
-    label: t("neetoPayments.cancelSplitTransfers.modal.reason"),
-    name: "reason"
-  }))), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
-    position: "right",
-    cancelButtonProps: {
-      onClick: onClose,
-      style: "tertiary"
-    },
-    submitButtonProps: {
-      disabled: false,
-      label: t("neetoPayments.common.submit")
-    }
-  })))));
+      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,
+              label: t("neetoPayments.cancelSplitTransfers.modal.reason"),
+              name: "reason"
+            })
+          })
+        }), /*#__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,
-    _ref$status = _ref.status,
-    status = _ref$status === void 0 ? "" : _ref$status;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var processedStatus = preProcessStatus(type, status);
+const Status = ({
+  type,
+  status = ""
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const processedStatus = preProcessStatus(type, status);
   if (isNotPresent(status)) {
-    return /*#__PURE__*/React.createElement(Typography, {
-      style: "body2"
-    }, t("neetoPayments.common.notAvailable"));
+    return /*#__PURE__*/jsx(Typography, {
+      style: "body2",
+      children: t("neetoPayments.common.notAvailable")
+    });
   }
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    content: t("neetoPayments.tooltipContent.".concat(type, ".").concat(processedStatus)),
-    position: "top"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "w-fit"
-  }, /*#__PURE__*/React.createElement(Tag, {
-    style: getTagStyle(processedStatus),
-    label: humanize(t("neetoPayments.tagLabels.".concat(type, ".").concat(processedStatus)))
-  })));
+  return /*#__PURE__*/jsx(Tooltip, {
+    content: t(`neetoPayments.tooltipContent.${type}.${processedStatus}`),
+    position: "top",
+    children: /*#__PURE__*/jsx("div", {
+      className: "w-fit",
+      children: /*#__PURE__*/jsx(Tag, {
+        style: getTagStyle(processedStatus),
+        label: humanize(t(`neetoPayments.tagLabels.${type}.${processedStatus}`))
+      })
+    })
+  });
 };
 
-var Date = function Date(_ref) {
-  var date = _ref.date,
-    _ref$isTimeVisible = _ref.isTimeVisible,
-    isTimeVisible = _ref$isTimeVisible === void 0 ? false : _ref$isTimeVisible;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
+const Date = ({
+  date,
+  isTimeVisible = false
+}) => {
+  const {
+    t
+  } = useTranslation();
   if (isNotPresent(date)) {
-    return /*#__PURE__*/React.createElement(Typography, {
-      style: "body2"
-    }, t("neetoPayments.common.notAvailable"));
+    return /*#__PURE__*/jsx(Typography, {
+      style: "body2",
+      children: t("neetoPayments.common.notAvailable")
+    });
   }
   if (isTimeVisible) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "flex items-center"
-    }, /*#__PURE__*/React.createElement(DateFormat.DateTime, {
-      date: date
-    }));
+    return /*#__PURE__*/jsx("div", {
+      className: "flex items-center",
+      children: /*#__PURE__*/jsx(DateFormat.DateTime, {
+        date
+      })
+    });
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center"
-  }, /*#__PURE__*/React.createElement(DateFormat.Date, {
-    date: date
-  }));
+  return /*#__PURE__*/jsx("div", {
+    className: "flex items-center",
+    children: /*#__PURE__*/jsx(DateFormat.Date, {
+      date
+    })
+  });
 };
 
-var DiscountCode = function DiscountCode(_ref) {
-  var discountCode = _ref.discountCode,
-    currency = _ref.currency;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var code = discountCode.code,
-    value = discountCode.value,
-    kind = discountCode.kind;
-  return /*#__PURE__*/React.createElement(Typography, {
-    style: "body2"
-  }, kind === "percentage" ? t("neetoPayments.splitTransferDetails.discountCodeOfPercentageApplied", {
-    code: code,
-    percentage: value.toFixed(1)
-  }) : t("neetoPayments.splitTransferDetails.discountCodeOfAmountApplied", {
-    code: code,
-    amount: currencyFormat.withSymbol(value, currency.toUpperCase(), {
-      maximumFractionDigits: 2,
-      minimumFractionDigits: 2
+const DiscountCode = ({
+  discountCode,
+  currency
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    code,
+    value,
+    kind
+  } = discountCode;
+  return /*#__PURE__*/jsx(Typography, {
+    style: "body2",
+    children: kind === "percentage" ? t("neetoPayments.splitTransferDetails.discountCodeOfPercentageApplied", {
+      code,
+      percentage: value.toFixed(1)
+    }) : t("neetoPayments.splitTransferDetails.discountCodeOfAmountApplied", {
+      code,
+      amount: currencyFormat.withSymbol(value, currency.toUpperCase(), {
+        maximumFractionDigits: 2,
+        minimumFractionDigits: 2
+      })
     })
-  }));
+  });
 };
 
-var Details = function Details(_ref) {
-  var _splitTransfer$source, _splitTransfer$curren, _splitTransfer$source2, _splitTransfer$curren2, _splitTransfer$curren3, _splitTransfer$curren4, _splitTransfer$destin, _splitTransfer$destin2, _splitTransfer$destin3;
-  var selectedTransfer = _ref.selectedTransfer,
-    setSelectedTransfer = _ref.setSelectedTransfer;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useShowSplitTransfer = useShowSplitTransfers(selectedTransfer["id"], {
-      enabled: isPresent(selectedTransfer["id"])
-    }),
-    isPending = _useShowSplitTransfer.isPending,
-    _useShowSplitTransfer2 = _useShowSplitTransfer.data,
-    _useShowSplitTransfer3 = _useShowSplitTransfer2 === void 0 ? {} : _useShowSplitTransfer2,
-    splitTransfer = _useShowSplitTransfer3.splitTransfer;
-  return /*#__PURE__*/React.createElement(Pane, {
+const Details = ({
+  selectedTransfer,
+  setSelectedTransfer
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    isPending,
+    data: {
+      splitTransfer
+    } = {}
+  } = useShowSplitTransfers(selectedTransfer["id"], {
+    enabled: isPresent(selectedTransfer["id"])
+  });
+  return /*#__PURE__*/jsxs(Pane, {
     isOpen: selectedTransfer["isPaneOpen"],
     size: "large",
-    onClose: function onClose() {
-      return setSelectedTransfer(mergeLeft({
-        isPaneOpen: false
-      }, selectedTransfer));
-    }
-  }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2"
-  }, t("neetoPayments.splitTransferDetails.title"))), /*#__PURE__*/React.createElement(Pane.Body, null, isPending ? /*#__PURE__*/React.createElement("div", {
-    className: "flex h-full w-full items-center justify-center"
-  }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement("div", {
-    className: "space-y-4 p-3"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex grid-cols-2 flex-col gap-3 lg:grid"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "body1",
-    weight: "medium"
-  }, t("neetoPayments.common.identifier")), /*#__PURE__*/React.createElement(Button, {
-    href: splitTransfer.transferUrl,
-    label: splitTransfer.identifier,
-    size: "small",
-    style: "link",
-    target: "_blank"
-  }), /*#__PURE__*/React.createElement(Typography, {
-    style: "body1",
-    weight: "medium"
-  }, t("neetoPayments.common.status")), /*#__PURE__*/React.createElement(Status, {
-    status: splitTransfer.status,
-    type: "splitTransfers"
-  }), /*#__PURE__*/React.createElement(Typography, {
-    style: "body1",
-    weight: "medium"
-  }, t("neetoPayments.common.transferTime")), /*#__PURE__*/React.createElement(Date, {
-    isTimeVisible: true,
-    date: splitTransfer.paymentAt
-  }), /*#__PURE__*/React.createElement(Typography, {
-    style: "body1",
-    weight: "medium"
-  }, t("neetoPayments.common.paymentAmount")), /*#__PURE__*/React.createElement(Typography, {
-    style: "body2"
-  }, currencyFormat.withCode((_splitTransfer$source = splitTransfer.sourcePayment) === null || _splitTransfer$source === void 0 ? void 0 : _splitTransfer$source.amount, (_splitTransfer$curren = splitTransfer.currency) === null || _splitTransfer$curren === void 0 ? void 0 : _splitTransfer$curren.toUpperCase())), isPresent(splitTransfer.discountCode) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
-    style: "body1",
-    weight: "medium"
-  }, t("neetoPayments.common.discountCode")), /*#__PURE__*/React.createElement(DiscountCode, {
-    currency: splitTransfer.currency,
-    discountCode: splitTransfer.discountCode
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center space-x-1"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "body1",
-    weight: "medium"
-  }, t("neetoPayments.common.netAmount")), /*#__PURE__*/React.createElement(HelpPopover, {
-    popoverProps: {
-      position: "right"
-    },
-    description: t("neetoPayments.splitTransferDetails.netAmountDescription"),
-    title: t("neetoPayments.splitTransferDetails.netAmountHelpTitle")
-  })), /*#__PURE__*/React.createElement(Typography, {
-    style: "body2"
-  }, currencyFormat.withCode((_splitTransfer$source2 = splitTransfer.sourcePayment) === null || _splitTransfer$source2 === void 0 ? void 0 : _splitTransfer$source2.netAmount, (_splitTransfer$curren2 = splitTransfer.currency) === null || _splitTransfer$curren2 === void 0 ? void 0 : _splitTransfer$curren2.toUpperCase())), /*#__PURE__*/React.createElement("div", {
-    className: "flex space-x-1"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "body1",
-    weight: "medium"
-  }, t("neetoPayments.common.platformShare")), /*#__PURE__*/React.createElement(HelpPopover, {
-    popoverProps: {
-      position: "right"
-    },
-    description: t("neetoPayments.splitTransferDetails.platformShareDescription"),
-    title: t("neetoPayments.splitTransferDetails.platformShareHelpTitle")
-  })), /*#__PURE__*/React.createElement(Typography, {
-    style: "body2"
-  }, currencyFormat.withCode(splitTransfer.platformShare, (_splitTransfer$curren3 = splitTransfer.currency) === null || _splitTransfer$curren3 === void 0 ? void 0 : _splitTransfer$curren3.toUpperCase())), /*#__PURE__*/React.createElement(Typography, {
-    style: "body1",
-    weight: "medium"
-  }, t("neetoPayments.common.transferredAmount")), /*#__PURE__*/React.createElement(Typography, {
-    style: "body2"
-  }, currencyFormat.withCode(splitTransfer.amount, (_splitTransfer$curren4 = splitTransfer.currency) === null || _splitTransfer$curren4 === void 0 ? void 0 : _splitTransfer$curren4.toUpperCase()))), /*#__PURE__*/React.createElement(Typography, {
-    style: "h3"
-  }, t("neetoPayments.splitTransferDetails.destinationDetails")), /*#__PURE__*/React.createElement("div", {
-    className: "flex grid-cols-2 flex-col gap-3 lg:grid"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    style: "body1",
-    weight: "medium"
-  }, t("neetoPayments.common.destinationAccountIdentifier")), /*#__PURE__*/React.createElement(Button, {
-    href: splitTransfer.destinationAccount.dashboardUrl,
-    label: splitTransfer.destinationAccount.identifier,
-    size: "small",
-    style: "link",
-    target: "_blank"
-  }), /*#__PURE__*/React.createElement(Typography, {
-    style: "body1",
-    weight: "medium"
-  }, t("neetoPayments.common.destinationAccountName")), /*#__PURE__*/React.createElement(Typography, {
-    style: "body2"
-  }, splitTransfer.destinationAccount.userName), /*#__PURE__*/React.createElement(Typography, {
-    style: "body1",
-    weight: "medium"
-  }, t("neetoPayments.common.destinationAccountEmail")), /*#__PURE__*/React.createElement(Typography, {
-    style: "body2"
-  }, splitTransfer.destinationAccount.userEmail), /*#__PURE__*/React.createElement(Typography, {
-    style: "body1",
-    weight: "medium"
-  }, t("neetoPayments.common.payoutStatus")), /*#__PURE__*/React.createElement(Status, {
-    status: (_splitTransfer$destin = splitTransfer.destinationPayout) === null || _splitTransfer$destin === void 0 ? void 0 : _splitTransfer$destin.status,
-    type: "payout"
-  }), /*#__PURE__*/React.createElement(Typography, {
-    style: "body1",
-    weight: "medium"
-  }, t("neetoPayments.splitTransferDetails.payoutInitiatedDate")), /*#__PURE__*/React.createElement(Date, {
-    date: (_splitTransfer$destin2 = splitTransfer.destinationPayout) === null || _splitTransfer$destin2 === void 0 ? void 0 : _splitTransfer$destin2.createdAt
-  }), /*#__PURE__*/React.createElement(Typography, {
-    style: "body1",
-    weight: "medium"
-  }, t("neetoPayments.splitTransferDetails.payoutArrivalDate")), /*#__PURE__*/React.createElement(Date, {
-    date: (_splitTransfer$destin3 = splitTransfer.destinationPayout) === null || _splitTransfer$destin3 === void 0 ? void 0 : _splitTransfer$destin3.arrivalDate
-  }), /*#__PURE__*/React.createElement("div", null)))));
+    onClose: () => setSelectedTransfer(mergeLeft({
+      isPaneOpen: false
+    }, selectedTransfer)),
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "h2",
+        children: t("neetoPayments.splitTransferDetails.title")
+      })
+    }), /*#__PURE__*/jsx(Pane.Body, {
+      children: isPending ? /*#__PURE__*/jsx("div", {
+        className: "flex h-full w-full items-center justify-center",
+        children: /*#__PURE__*/jsx(Spinner, {})
+      }) : /*#__PURE__*/jsxs("div", {
+        className: "space-y-4 p-3",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "flex grid-cols-2 flex-col gap-3 lg:grid",
+          children: [/*#__PURE__*/jsx(Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.common.identifier")
+          }), /*#__PURE__*/jsx(Button, {
+            href: splitTransfer.transferUrl,
+            label: splitTransfer.identifier,
+            size: "small",
+            style: "link",
+            target: "_blank"
+          }), /*#__PURE__*/jsx(Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.common.status")
+          }), /*#__PURE__*/jsx(Status, {
+            status: splitTransfer.status,
+            type: "splitTransfers"
+          }), /*#__PURE__*/jsx(Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.common.transferTime")
+          }), /*#__PURE__*/jsx(Date, {
+            isTimeVisible: true,
+            date: splitTransfer.paymentAt
+          }), /*#__PURE__*/jsx(Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.common.paymentAmount")
+          }), /*#__PURE__*/jsx(Typography, {
+            style: "body2",
+            children: currencyFormat.withCode(splitTransfer.sourcePayment?.amount, splitTransfer.currency?.toUpperCase())
+          }), isPresent(splitTransfer.discountCode) && /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx(Typography, {
+              style: "body1",
+              weight: "medium",
+              children: t("neetoPayments.common.discountCode")
+            }), /*#__PURE__*/jsx(DiscountCode, {
+              currency: splitTransfer.currency,
+              discountCode: splitTransfer.discountCode
+            })]
+          }), /*#__PURE__*/jsxs("div", {
+            className: "flex items-center space-x-1",
+            children: [/*#__PURE__*/jsx(Typography, {
+              style: "body1",
+              weight: "medium",
+              children: t("neetoPayments.common.netAmount")
+            }), /*#__PURE__*/jsx(HelpPopover, {
+              popoverProps: {
+                position: "right"
+              },
+              description: t("neetoPayments.splitTransferDetails.netAmountDescription"),
+              title: t("neetoPayments.splitTransferDetails.netAmountHelpTitle")
+            })]
+          }), /*#__PURE__*/jsx(Typography, {
+            style: "body2",
+            children: currencyFormat.withCode(splitTransfer.sourcePayment?.netAmount, splitTransfer.currency?.toUpperCase())
+          }), /*#__PURE__*/jsxs("div", {
+            className: "flex space-x-1",
+            children: [/*#__PURE__*/jsx(Typography, {
+              style: "body1",
+              weight: "medium",
+              children: t("neetoPayments.common.platformShare")
+            }), /*#__PURE__*/jsx(HelpPopover, {
+              popoverProps: {
+                position: "right"
+              },
+              description: t("neetoPayments.splitTransferDetails.platformShareDescription"),
+              title: t("neetoPayments.splitTransferDetails.platformShareHelpTitle")
+            })]
+          }), /*#__PURE__*/jsx(Typography, {
+            style: "body2",
+            children: currencyFormat.withCode(splitTransfer.platformShare, splitTransfer.currency?.toUpperCase())
+          }), /*#__PURE__*/jsx(Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.common.transferredAmount")
+          }), /*#__PURE__*/jsx(Typography, {
+            style: "body2",
+            children: currencyFormat.withCode(splitTransfer.amount, splitTransfer.currency?.toUpperCase())
+          })]
+        }), /*#__PURE__*/jsx(Typography, {
+          style: "h3",
+          children: t("neetoPayments.splitTransferDetails.destinationDetails")
+        }), /*#__PURE__*/jsxs("div", {
+          className: "flex grid-cols-2 flex-col gap-3 lg:grid",
+          children: [/*#__PURE__*/jsx(Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.common.destinationAccountIdentifier")
+          }), /*#__PURE__*/jsx(Button, {
+            href: splitTransfer.destinationAccount.dashboardUrl,
+            label: splitTransfer.destinationAccount.identifier,
+            size: "small",
+            style: "link",
+            target: "_blank"
+          }), /*#__PURE__*/jsx(Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.common.destinationAccountName")
+          }), /*#__PURE__*/jsx(Typography, {
+            style: "body2",
+            children: splitTransfer.destinationAccount.userName
+          }), /*#__PURE__*/jsx(Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.common.destinationAccountEmail")
+          }), /*#__PURE__*/jsx(Typography, {
+            style: "body2",
+            children: splitTransfer.destinationAccount.userEmail
+          }), /*#__PURE__*/jsx(Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.common.payoutStatus")
+          }), /*#__PURE__*/jsx(Status, {
+            status: splitTransfer.destinationPayout?.status,
+            type: "payout"
+          }), /*#__PURE__*/jsx(Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.splitTransferDetails.payoutInitiatedDate")
+          }), /*#__PURE__*/jsx(Date, {
+            date: splitTransfer.destinationPayout?.createdAt
+          }), /*#__PURE__*/jsx(Typography, {
+            style: "body1",
+            weight: "medium",
+            children: t("neetoPayments.splitTransferDetails.payoutArrivalDate")
+          }), /*#__PURE__*/jsx(Date, {
+            date: splitTransfer.destinationPayout?.arrivalDate
+          }), /*#__PURE__*/jsx("div", {})]
+        })]
+      })
+    })]
+  });
 };
 
-var renderIdentifier = curry(function (setSelectedTransfer, identifier, _ref) {
-  var id = _ref.id;
+const renderIdentifier = curry((setSelectedTransfer, identifier, {
+  id
+}) => {
   if (isNotPresent(identifier)) {
-    return /*#__PURE__*/React.createElement(Tooltip, {
+    return /*#__PURE__*/jsx(Tooltip, {
       content: t("neetoPayments.tooltipContent.identifierUnavailable"),
-      position: "top"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "text-center"
-    }, /*#__PURE__*/React.createElement(Typography, {
-      style: "body2"
-    }, t("neetoPayments.common.notAvailable"))));
+      position: "top",
+      children: /*#__PURE__*/jsx("div", {
+        className: "text-center",
+        children: /*#__PURE__*/jsx(Typography, {
+          style: "body2",
+          children: t("neetoPayments.common.notAvailable")
+        })
+      })
+    });
   }
-  return /*#__PURE__*/React.createElement(CopyButtonWrapper, {
-    content: identifier
-  }, /*#__PURE__*/React.createElement(Button, {
-    label: identifier,
-    size: "small",
-    style: "link",
-    onClick: function onClick() {
-      return setSelectedTransfer({
-        id: id,
+  return /*#__PURE__*/jsx(CopyButtonWrapper, {
+    content: identifier,
+    children: /*#__PURE__*/jsx(Button, {
+      label: identifier,
+      size: "small",
+      style: "link",
+      onClick: () => setSelectedTransfer({
+        id,
         isPaneOpen: true
-      });
-    }
-  }));
+      })
+    })
+  });
 });
-var renderPlatformPaymentIdentifier = function renderPlatformPaymentIdentifier(_ref2) {
-  var identifier = _ref2.identifier,
-    receiptUrl = _ref2.receiptUrl,
-    kind = _ref2.kind;
+const renderPlatformPaymentIdentifier = ({
+  identifier,
+  receiptUrl,
+  kind
+}) => {
   if (kind === PAYMENT_KIND.temporary) {
-    return /*#__PURE__*/React.createElement(CopyButtonWrapper, {
-      content: identifier
-    }, identifier);
+    return /*#__PURE__*/jsx(CopyButtonWrapper, {
+      content: identifier,
+      children: identifier
+    });
   }
-  return /*#__PURE__*/React.createElement(CopyButtonWrapper, {
-    content: identifier
-  }, /*#__PURE__*/React.createElement(Button, {
-    href: receiptUrl,
-    label: identifier,
-    size: "small",
-    style: "link",
-    target: "_blank"
-  }));
+  return /*#__PURE__*/jsx(CopyButtonWrapper, {
+    content: identifier,
+    children: /*#__PURE__*/jsx(Button, {
+      href: receiptUrl,
+      label: identifier,
+      size: "small",
+      style: "link",
+      target: "_blank"
+    })
+  });
 };
-var renderDestinationAccountIdentifier = function renderDestinationAccountIdentifier(_ref3) {
-  var identifier = _ref3.identifier,
-    dashboardUrl = _ref3.dashboardUrl;
-  return /*#__PURE__*/React.createElement(CopyButtonWrapper, {
-    content: identifier
-  }, /*#__PURE__*/React.createElement(Button, {
+const renderDestinationAccountIdentifier = ({
+  identifier,
+  dashboardUrl
+}) => /*#__PURE__*/jsx(CopyButtonWrapper, {
+  content: identifier,
+  children: /*#__PURE__*/jsx(Button, {
     href: dashboardUrl,
     label: identifier,
     size: "small",
     style: "link",
     target: "_blank"
-  }));
-};
-var renderStatus = curry(function (type, status) {
-  return /*#__PURE__*/React.createElement(Status, {
-    status: status,
-    type: type
-  });
+  })
 });
-var renderDate = function renderDate(date) {
+const renderStatus = curry((type, status) => /*#__PURE__*/jsx(Status, {
+  status,
+  type
+}));
+const renderDate = date => {
   if (isNotPresent(date)) {
-    return /*#__PURE__*/React.createElement(Tooltip, {
+    return /*#__PURE__*/jsx(Tooltip, {
       content: t("neetoPayments.tooltipContent.dateUnavailable"),
-      position: "top"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "text-center"
-    }, /*#__PURE__*/React.createElement(Typography, {
-      style: "body2"
-    }, t("neetoPayments.common.notAvailable"))));
+      position: "top",
+      children: /*#__PURE__*/jsx("div", {
+        className: "text-center",
+        children: /*#__PURE__*/jsx(Typography, {
+          style: "body2",
+          children: t("neetoPayments.common.notAvailable")
+        })
+      })
+    });
   }
-  return /*#__PURE__*/React.createElement(DateFormat.DateTime, {
-    date: date
+  return /*#__PURE__*/jsx(DateFormat.DateTime, {
+    date
   });
 };
-var renderPlatformShare = function renderPlatformShare(amount) {
+const renderPlatformShare = amount => {
   if (isNotPresent(amount)) {
-    return /*#__PURE__*/React.createElement(Tooltip, {
+    return /*#__PURE__*/jsx(Tooltip, {
       content: t("neetoPayments.tooltipContent.platformShareUnavailable"),
-      position: "top"
-    }, /*#__PURE__*/React.createElement(Typography, {
-      style: "body2"
-    }, t("neetoPayments.common.notCalculated")));
+      position: "top",
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "body2",
+        children: t("neetoPayments.common.notCalculated")
+      })
+    });
   }
   return formatAmount(amount);
 };
-var getDefaultColumns = function getDefaultColumns(setSelectedTransfer) {
-  return [{
-    title: t("neetoPayments.common.id"),
-    dataIndex: "rowId",
-    key: "rowId",
-    width: 85,
-    position: 0,
-    isHidable: false
-  }, {
-    title: t("neetoPayments.common.identifier"),
-    dataIndex: "identifier",
-    key: "identifier",
-    width: 300,
-    render: renderIdentifier(setSelectedTransfer),
-    position: 1,
-    isHidable: false
-  }, {
-    title: t("neetoPayments.common.status"),
-    dataIndex: "status",
-    key: "status",
-    width: 150,
-    render: renderStatus("splitTransfers"),
-    sorter: true,
-    position: 2,
-    isHidable: false
-  }, {
-    title: t("neetoPayments.common.amount"),
-    dataIndex: "amount",
-    key: "amount",
-    width: 150,
-    sorter: true,
-    render: formatAmount,
-    position: 3
-  }, {
-    title: t("neetoPayments.common.currency"),
-    dataIndex: "currency",
-    key: "currency",
-    width: 160,
-    sorter: true,
-    render: formatCurrency,
-    position: 3
-  }, {
-    title: t("neetoPayments.common.platformShare"),
-    dataIndex: "platformShare",
-    key: "platformShare",
-    width: 205,
-    render: renderPlatformShare,
-    sorter: true,
-    position: 3
-  }, {
-    title: t("neetoPayments.common.transferTime"),
-    dataIndex: "paymentAt",
-    key: "paymentAt",
-    width: 190,
-    render: renderDate,
-    sorter: true,
-    position: 10
-  }, {
-    title: t("neetoPayments.common.platformPayment"),
-    dataIndex: "sourcePayment",
-    key: "sourcePayment",
-    render: renderPlatformPaymentIdentifier,
-    width: 300,
-    position: 19
-  }, {
-    title: t("neetoPayments.common.accountIdentifier"),
-    dataIndex: "destinationAccount",
-    key: "destinationAccount",
-    render: renderDestinationAccountIdentifier,
-    width: 320,
-    position: 20
-  }];
-};
+const getDefaultColumns = setSelectedTransfer => [{
+  title: t("neetoPayments.common.id"),
+  dataIndex: "rowId",
+  key: "rowId",
+  width: 85,
+  position: 0,
+  isHidable: false
+}, {
+  title: t("neetoPayments.common.identifier"),
+  dataIndex: "identifier",
+  key: "identifier",
+  width: 300,
+  render: renderIdentifier(setSelectedTransfer),
+  position: 1,
+  isHidable: false
+}, {
+  title: t("neetoPayments.common.status"),
+  dataIndex: "status",
+  key: "status",
+  width: 150,
+  render: renderStatus("splitTransfers"),
+  sorter: true,
+  position: 2,
+  isHidable: false
+}, {
+  title: t("neetoPayments.common.amount"),
+  dataIndex: "amount",
+  key: "amount",
+  width: 150,
+  sorter: true,
+  render: formatAmount,
+  position: 3
+}, {
+  title: t("neetoPayments.common.currency"),
+  dataIndex: "currency",
+  key: "currency",
+  width: 160,
+  sorter: true,
+  render: formatCurrency,
+  position: 3
+}, {
+  title: t("neetoPayments.common.platformShare"),
+  dataIndex: "platformShare",
+  key: "platformShare",
+  width: 205,
+  render: renderPlatformShare,
+  sorter: true,
+  position: 3
+}, {
+  title: t("neetoPayments.common.transferTime"),
+  dataIndex: "paymentAt",
+  key: "paymentAt",
+  width: 190,
+  render: renderDate,
+  sorter: true,
+  position: 10
+}, {
+  title: t("neetoPayments.common.platformPayment"),
+  dataIndex: "sourcePayment",
+  key: "sourcePayment",
+  render: renderPlatformPaymentIdentifier,
+  width: 300,
+  position: 19
+}, {
+  title: t("neetoPayments.common.accountIdentifier"),
+  dataIndex: "destinationAccount",
+  key: "destinationAccount",
+  render: renderDestinationAccountIdentifier,
+  width: 320,
+  position: 20
+}];
 
-function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var buildSearchProps = function buildSearchProps(searchProps, searchTerm) {
-  return mergeDeepWith(concat, SEARCH_PROPS, mergeLeft({
-    value: searchTerm.trim()
-  }, searchProps));
-};
-var buildFilterColumns = function buildFilterColumns() {
-  var payableEntityColumns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return reject(isNil, concat(FILTER_COLUMNS, map(prop("filterProps"), payableEntityColumns)));
-};
-var buildTableColumns = function buildTableColumns(_ref) {
-  var tab = _ref.tab,
-    _ref$payableEntityCol = _ref.payableEntityColumns,
-    payableEntityColumns = _ref$payableEntityCol === void 0 ? [] : _ref$payableEntityCol,
-    setSelectedTransfer = _ref.setSelectedTransfer;
-  var filteredColumns = sortBy(prop("position"), concat(getDefaultColumns(setSelectedTransfer), payableEntityColumns));
+const buildSearchProps = (searchProps, searchTerm) => mergeDeepWith(concat, SEARCH_PROPS, mergeLeft({
+  value: searchTerm.trim()
+}, searchProps));
+const buildFilterColumns = (payableEntityColumns = []) => reject(isNil, concat(FILTER_COLUMNS, map(prop("filterProps"), payableEntityColumns)));
+const buildTableColumns = ({
+  tab,
+  payableEntityColumns = [],
+  setSelectedTransfer
+}) => {
+  const filteredColumns = sortBy(prop("position"), concat(getDefaultColumns(setSelectedTransfer), payableEntityColumns));
   if (tab === SPLIT_TRANSFERS_DASHBOARD_TAB.all) return filteredColumns;
   return removeBy({
     key: "status"
   }, filteredColumns);
 };
-var buildRowData = function buildRowData(_ref2) {
-  var splitTransfers = _ref2.splitTransfers,
-    _ref2$pageProperties = _ref2.pageProperties,
-    pageProperties = _ref2$pageProperties === void 0 ? {} : _ref2$pageProperties;
-  return splitTransfers === null || splitTransfers === void 0 ? void 0 : splitTransfers.map(function (element, index) {
-    return _objectSpread$1(_objectSpread$1({}, element), {}, {
-      rowId: isEmpty(pageProperties) ? index + 1 : pageProperties.pageSize * (pageProperties.page - 1) + index + 1
-    });
-  });
-};
+const buildRowData = ({
+  splitTransfers,
+  pageProperties = {}
+}) => splitTransfers?.map((element, index) => ({
+  ...element,
+  rowId: isEmpty(pageProperties) ? index + 1 : pageProperties.pageSize * (pageProperties.page - 1) + index + 1
+}));
 
-var List = function List(_ref) {
-  var isFetching = _ref.isFetching,
-    splitTransfers = _ref.splitTransfers,
-    selectedRows = _ref.selectedRows,
-    views = _ref.views,
-    payableEntityColumns = _ref.payableEntityColumns,
-    pageProperties = _ref.pageProperties,
-    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],
-    setSelectedTransfer = _useState2[1];
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _getQueryParams = getQueryParams(),
-    _getQueryParams$tab = _getQueryParams.tab,
-    tab = _getQueryParams$tab === void 0 ? SPLIT_TRANSFERS_DASHBOARD_TAB.all : _getQueryParams$tab;
-  var splitTransfersCount = views[tab];
-  var getRowSelection = function getRowSelection() {
+const List = ({
+  isFetching,
+  splitTransfers,
+  selectedRows,
+  views,
+  payableEntityColumns,
+  pageProperties,
+  onRowSelect,
+  setSortProperties,
+  handleTablePagination,
+  setHasBulkSelectedAllRows
+}) => {
+  const [selectedTransfer, setSelectedTransfer] = useState(INITIAL_TRANSFER_DETAILS);
+  const {
+    t
+  } = useTranslation();
+  const {
+    tab = SPLIT_TRANSFERS_DASHBOARD_TAB.all
+  } = getQueryParams();
+  const splitTransfersCount = views[tab];
+  const getRowSelection = () => {
     if (tab === SPLIT_TRANSFERS_DASHBOARD_TAB.successful) return false;
     if (tab === SPLIT_TRANSFERS_DASHBOARD_TAB.all) {
       return {
-        getCheckboxProps: function getCheckboxProps(record) {
-          return {
-            disabled: record.status === SPLIT_TRANSFERS_DASHBOARD_TAB.successful
-          };
-        }
+        getCheckboxProps: record => ({
+          disabled: record.status === SPLIT_TRANSFERS_DASHBOARD_TAB.successful
+        })
       };
     }
     return true;
   };
-  var allColumns = buildTableColumns({
-    tab: tab,
-    payableEntityColumns: payableEntityColumns,
-    setSelectedTransfer: setSelectedTransfer
+  const allColumns = buildTableColumns({
+    tab,
+    payableEntityColumns,
+    setSelectedTransfer
   });
-  var _useTableConfiguratio = useTableConfigurations("".concat(TABLE_KEYS.SPLIT_TRANSFERS_TABLE, "-").concat(tab), allColumns),
-    isTableConfigurationLoading = _useTableConfiguratio.isTableConfigurationLoading,
-    customizedColumns = _useTableConfiguratio.customizedColumns,
-    hideColumn = _useTableConfiguratio.hideColumn;
-  var handleTableChange = function handleTableChange(_, __, sorter) {
-    setSortProperties(isPresent(sorter === null || sorter === void 0 ? void 0 : sorter.column) ? {
+  const {
+    isTableConfigurationLoading,
+    customizedColumns,
+    hideColumn
+  } = useTableConfigurations(`${TABLE_KEYS.SPLIT_TRANSFERS_TABLE}-${tab}`, allColumns);
+  const handleTableChange = (_, __, sorter) => {
+    setSortProperties(isPresent(sorter?.column) ? {
       sortBy: camelToSnakeCase(processDataIndex(sorter.field)),
       orderBy: sorter.order === "ascend" ? "ASC" : "DESC"
     } : DEFAULT_SORT_PROPERTIES);
   };
   if (isNotPresent(splitTransfers)) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React.createElement(NoData, {
-      title: tab === SPLIT_TRANSFERS_DASHBOARD_TAB.all ? t("neetoPayments.emptyState.splitTransfers") : t("neetoPayments.emptyState.splitTransfersWithStatus", {
-        status: tab
+    return /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(NoData, {
+        title: tab === SPLIT_TRANSFERS_DASHBOARD_TAB.all ? t("neetoPayments.emptyState.splitTransfers") : t("neetoPayments.emptyState.splitTransfersWithStatus", {
+          status: tab
+        })
       })
-    }));
+    });
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableWrapper, {
-    hasPagination: splitTransfersCount > (pageProperties === null || pageProperties === void 0 ? void 0 : pageProperties.pageSize)
-  }, /*#__PURE__*/React.createElement(Table, {
-    onRowSelect: onRowSelect,
-    fixedHeight: true,
-    allowRowClick: false,
-    columnData: customizedColumns,
-    currentPageNumber: pageProperties === null || pageProperties === void 0 ? void 0 : pageProperties.page,
-    handlePageChange: handleTablePagination,
-    loading: isFetching || isTableConfigurationLoading,
-    rowData: buildRowData({
-      splitTransfers: splitTransfers,
-      pageProperties: pageProperties,
-      tab: tab
-    }),
-    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,
-      pageSize: pageProperties === null || pageProperties === void 0 ? void 0 : pageProperties.pageSize,
-      total: splitTransfersCount
-    },
-    onChange: handleTableChange,
-    onColumnHide: function onColumnHide(_ref2) {
-      var key = _ref2.key;
-      return hideColumn(key);
-    }
-  })), /*#__PURE__*/React.createElement(Details, {
-    selectedTransfer: selectedTransfer,
-    setSelectedTransfer: setSelectedTransfer
-  }));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(TableWrapper, {
+      hasPagination: splitTransfersCount > pageProperties?.pageSize,
+      children: /*#__PURE__*/jsx(Table, {
+        onRowSelect,
+        fixedHeight: true,
+        allowRowClick: false,
+        columnData: customizedColumns,
+        currentPageNumber: pageProperties?.page,
+        handlePageChange: handleTablePagination,
+        loading: isFetching || isTableConfigurationLoading,
+        rowData: buildRowData({
+          splitTransfers,
+          pageProperties,
+          tab
+        }),
+        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,
+          pageSize: pageProperties?.pageSize,
+          total: splitTransfersCount
+        },
+        onChange: handleTableChange,
+        onColumnHide: ({
+          key
+        }) => hideColumn(key)
+      })
+    }), /*#__PURE__*/jsx(Details, {
+      selectedTransfer,
+      setSelectedTransfer
+    })]
+  });
 };
 
-var ResumeModal = function ResumeModal(_ref) {
-  var isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
-    handleSplitTransfersUpdate = _ref.handleSplitTransfersUpdate;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var handleSubmit = function handleSubmit(_ref2) {
-    var reason = _ref2.reason;
+const ResumeModal = ({
+  isOpen,
+  onClose,
+  handleSplitTransfersUpdate
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const handleSubmit = ({
+    reason
+  }) => {
     handleSplitTransfersUpdate("pending", reason);
   };
-  return /*#__PURE__*/React.createElement(Modal, {
-    isOpen: isOpen,
-    onClose: onClose,
-    size: "large"
-  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    style: "h2",
-    weight: "medium"
-  }, t("neetoPayments.resumeSplitTransfers.modal.title"))), /*#__PURE__*/React.createElement(Form, {
-    formikProps: {
-      initialValues: {
-        reason: ""
+  return /*#__PURE__*/jsxs(Modal, {
+    isOpen,
+    onClose,
+    size: "large",
+    children: [/*#__PURE__*/jsx(Modal.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "h2",
+        weight: "medium",
+        children: t("neetoPayments.resumeSplitTransfers.modal.title")
+      })
+    }), /*#__PURE__*/jsx(Form, {
+      formikProps: {
+        initialValues: {
+          reason: ""
+        },
+        validationSchema: VALIDATION_SCHEMA,
+        onSubmit: handleSubmit
       },
-      validationSchema: VALIDATION_SCHEMA,
-      onSubmit: handleSubmit
-    }
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col space-y-4"
-  }, /*#__PURE__*/React.createElement(Textarea, {
-    required: true,
-    label: t("neetoPayments.resumeSplitTransfers.modal.reason"),
-    name: "reason"
-  }))), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(ActionBlock, {
-    position: "right",
-    cancelButtonProps: {
-      onClick: onClose,
-      style: "tertiary"
-    },
-    submitButtonProps: {
-      disabled: false,
-      label: t("neetoPayments.common.submit")
-    }
-  })))));
+      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,
+              label: t("neetoPayments.resumeSplitTransfers.modal.reason"),
+              name: "reason"
+            })
+          })
+        }), /*#__PURE__*/jsx(Modal.Footer, {
+          children: /*#__PURE__*/jsx(ActionBlock, {
+            position: "right",
+            cancelButtonProps: {
+              onClick: onClose,
+              style: "tertiary"
+            },
+            submitButtonProps: {
+              disabled: false,
+              label: t("neetoPayments.common.submit")
+            }
+          })
+        })]
+      })
+    })]
+  });
 };
 
-var Menu = Dropdown.Menu,
-  MenuItem = Dropdown.MenuItem;
-var TopSection = function TopSection(_ref) {
-  var views = _ref.views,
-    filters = _ref.filters,
-    setIsCancelModalOpen = _ref.setIsCancelModalOpen,
-    setIsResumeModalOpen = _ref.setIsResumeModalOpen,
-    selectedRows = _ref.selectedRows,
-    selectedRowData = _ref.selectedRowData,
-    setFilters = _ref.setFilters,
-    hasBulkSelectedAllRows = _ref.hasBulkSelectedAllRows,
-    filterableColumns = _ref.filterableColumns,
-    searchKeywordProps = _ref.searchKeywordProps,
-    payableEntityColumns = _ref.payableEntityColumns,
-    setIsExportModalOpen = _ref.setIsExportModalOpen;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isFilterPaneOpen = _useState2[0],
-    setIsFilterPaneOpen = _useState2[1];
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var history = useHistory();
-  var _getQueryParams = getQueryParams(),
-    _getQueryParams$tab = _getQueryParams.tab,
-    tab = _getQueryParams$tab === void 0 ? SPLIT_TRANSFERS_DASHBOARD_TAB.all : _getQueryParams$tab;
-  var splitTransfersCount = views === null || views === void 0 ? void 0 : views[tab];
-  var splitTransfersCountVisible = splitTransfersCount > 0 || splitTransfersCount === 0 && isPresent(filters);
-  var isFilterButtonVisible = splitTransfersCount || isPresent(filters);
-  var isDropdownVisible = isNotEmpty(selectedRows);
-  var isCancelButtonDisabled = existsBy({
+const {
+  Menu,
+  MenuItem
+} = Dropdown;
+const TopSection = ({
+  views,
+  filters,
+  setIsCancelModalOpen,
+  setIsResumeModalOpen,
+  selectedRows,
+  selectedRowData,
+  setFilters,
+  hasBulkSelectedAllRows,
+  filterableColumns,
+  searchKeywordProps,
+  payableEntityColumns,
+  setIsExportModalOpen
+}) => {
+  const [isFilterPaneOpen, setIsFilterPaneOpen] = useState(false);
+  const {
+    t
+  } = useTranslation();
+  const history = useHistory();
+  const {
+    tab = SPLIT_TRANSFERS_DASHBOARD_TAB.all
+  } = getQueryParams();
+  const splitTransfersCount = views?.[tab];
+  const splitTransfersCountVisible = splitTransfersCount > 0 || splitTransfersCount === 0 && isPresent(filters);
+  const isFilterButtonVisible = splitTransfersCount || isPresent(filters);
+  const isDropdownVisible = isNotEmpty(selectedRows);
+  const isCancelButtonDisabled = existsBy({
     status: SPLIT_TRANSFERS_DASHBOARD_TAB.cancelled
   }, selectedRowData);
-  var isResumeButtonDisabled = existsBy({
+  const isResumeButtonDisabled = existsBy({
     status: SPLIT_TRANSFERS_DASHBOARD_TAB.pending
   }, selectedRowData);
-  var selectedRecordsCount = hasBulkSelectedAllRows ? splitTransfersCount : selectedRows.length;
-  var handleFiltersChange = function handleFiltersChange(filters) {
-    startTransition(function () {
+  const selectedRecordsCount = hasBulkSelectedAllRows ? splitTransfersCount : selectedRows.length;
+  const handleFiltersChange = filters => {
+    startTransition(() => {
       setFilters(filters);
     });
   };
-  var handleTabChange = function handleTabChange(tab) {
-    var queryParams = getQueryParams({
+  const handleTabChange = tab => {
+    const queryParams = getQueryParams({
       toCamelCase: false
     });
-    var newParams = {
-      tab: tab,
+    const newParams = {
+      tab,
       page: DEFAULT_PAGE_INDEX,
       page_size: DEFAULT_PAGE_SIZE
     };
     history.push(buildUrl(window.location.pathname, mergeLeft(newParams, queryParams)));
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
-    title: t("neetoPayments.title.splitTransfers"),
-    searchProps: isFilterButtonVisible && {
-      placeholder: searchKeywordProps.placeholder,
-      className: "w-96"
-    }
-  }), shouldTabsVisible(views) && /*#__PURE__*/React.createElement(Tab, null, Object.keys(SPLIT_TRANSFERS_DASHBOARD_TAB).map(function (item) {
-    return /*#__PURE__*/React.createElement(Tab.Item, {
-      active: tab === item,
-      key: item,
-      onClick: function onClick() {
-        return handleTabChange(item);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Header, {
+      title: t("neetoPayments.title.splitTransfers"),
+      searchProps: isFilterButtonVisible && {
+        placeholder: searchKeywordProps.placeholder,
+        className: "w-96"
       }
-    }, t("neetoPayments.common.".concat(item)));
-  })), /*#__PURE__*/React.createElement(SubHeader, {
-    className: "my-4",
-    leftActionBlock: splitTransfersCountVisible && /*#__PURE__*/React.createElement("div", {
-      className: "w-100 flex items-center space-x-3"
-    }, isDropdownVisible ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
-      className: "neeto-ui-gray-800 me-2 font-semibold",
-      component: "h4"
-    }, /*#__PURE__*/React.createElement(Trans, {
-      count: selectedRecordsCount,
-      i18nKey: "neetoPayments.splitTransferDetails.recordWithCount",
-      components: {
-        span: /*#__PURE__*/React.createElement("span", {
-          className: "neeto-ui-text-gray-600"
+    }), shouldTabsVisible(views) && /*#__PURE__*/jsx(Tab, {
+      children: Object.keys(SPLIT_TRANSFERS_DASHBOARD_TAB).map(item => /*#__PURE__*/jsx(Tab.Item, {
+        active: tab === item,
+        onClick: () => handleTabChange(item),
+        children: t(`neetoPayments.common.${item}`)
+      }, item))
+    }), /*#__PURE__*/jsx(SubHeader, {
+      className: "my-4",
+      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 me-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__*/jsxs(Dropdown, {
+            buttonStyle: "secondary",
+            label: t("neetoPayments.common.takeAction"),
+            children: [/*#__PURE__*/jsx(Menu, {
+              children: /*#__PURE__*/jsx(MenuItem.Button, {
+                isDisabled: isCancelButtonDisabled,
+                tooltipProps: isCancelButtonDisabled ? {
+                  content: t("neetoPayments.tooltipContent.splitTransfers.cancelledRecordsSelected")
+                } : "",
+                onClick: () => setIsCancelModalOpen(true),
+                children: t("neetoPayments.common.cancel")
+              })
+            }), /*#__PURE__*/jsx(Menu, {
+              children: /*#__PURE__*/jsx(MenuItem.Button, {
+                isDisabled: isResumeButtonDisabled,
+                tooltipProps: isResumeButtonDisabled ? {
+                  content: t("neetoPayments.tooltipContent.splitTransfers.pendingRecordsSelected")
+                } : "",
+                onClick: () => setIsResumeModalOpen(true),
+                children: t("neetoPayments.common.resume")
+              })
+            })]
+          })]
+        }) : /*#__PURE__*/jsx(Typography, {
+          className: "neeto-ui-gray-800 me-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
+          })
         })
-      },
-      values: {
-        count: selectedRecordsCount,
-        recordsCount: splitTransfersCount
-      }
-    })), /*#__PURE__*/React.createElement(Dropdown, {
-      buttonStyle: "secondary",
-      label: t("neetoPayments.common.takeAction")
-    }, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem.Button, {
-      isDisabled: isCancelButtonDisabled,
-      tooltipProps: isCancelButtonDisabled ? {
-        content: t("neetoPayments.tooltipContent.splitTransfers.cancelledRecordsSelected")
-      } : "",
-      onClick: function onClick() {
-        return setIsCancelModalOpen(true);
-      }
-    }, t("neetoPayments.common.cancel"))), /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem.Button, {
-      isDisabled: isResumeButtonDisabled,
-      tooltipProps: isResumeButtonDisabled ? {
-        content: t("neetoPayments.tooltipContent.splitTransfers.pendingRecordsSelected")
-      } : "",
-      onClick: function onClick() {
-        return setIsResumeModalOpen(true);
-      }
-    }, t("neetoPayments.common.resume"))))) : /*#__PURE__*/React.createElement(Typography, {
-      className: "neeto-ui-gray-800 me-2 font-semibold",
-      component: "h4"
-    }, tab === SPLIT_TRANSFERS_DASHBOARD_TAB.all ? t("neetoPayments.countOf.splitTransfer", {
-      count: splitTransfersCount
-    }) : t("neetoPayments.countOf.splitTransferWithStatus", {
-      count: splitTransfersCount,
-      status: tab
-    }))),
-    rightActionBlock: isFilterButtonVisible && /*#__PURE__*/React.createElement(SubHeader.RightBlock, {
-      columnsButtonProps: {
-        columnData: buildTableColumns({
-          tab: tab,
-          payableEntityColumns: payableEntityColumns,
-          setSelectedTransfer: function setSelectedTransfer() {}
-        }).map(modify("dataIndex", processDataIndex)),
-        fixedColumns: UN_HIDEABLE_COLUMNS,
-        tableKey: "".concat(TABLE_KEYS.SPLIT_TRANSFERS_TABLE, "-").concat(tab)
-      },
-      downloadButtonProps: {
-        onClick: function onClick() {
-          return setIsExportModalOpen(true);
+      }),
+      rightActionBlock: isFilterButtonVisible && /*#__PURE__*/jsx(SubHeader.RightBlock, {
+        columnsButtonProps: {
+          columnData: buildTableColumns({
+            tab,
+            payableEntityColumns,
+            setSelectedTransfer: () => {}
+          }).map(modify("dataIndex", processDataIndex)),
+          fixedColumns: UN_HIDEABLE_COLUMNS,
+          tableKey: `${TABLE_KEYS.SPLIT_TRANSFERS_TABLE}-${tab}`
+        },
+        downloadButtonProps: {
+          onClick: () => setIsExportModalOpen(true)
+        },
+        filterProps: {
+          columns: filterableColumns,
+          isOpen: isFilterPaneOpen,
+          keyword: searchKeywordProps,
+          setIsOpen: setIsFilterPaneOpen,
+          onChange: handleFiltersChange
         }
-      },
-      filterProps: {
-        columns: filterableColumns,
-        isOpen: isFilterPaneOpen,
-        keyword: searchKeywordProps,
-        setIsOpen: setIsFilterPaneOpen,
-        onChange: handleFiltersChange
-      }
-    })
-  }), /*#__PURE__*/React.createElement(Bar, {
-    columns: filterableColumns,
-    keyword: searchKeywordProps,
-    setIsPaneOpen: setIsFilterPaneOpen,
-    onChange: handleFiltersChange
-  }));
+      })
+    }), /*#__PURE__*/jsx(Bar, {
+      columns: filterableColumns,
+      keyword: searchKeywordProps,
+      setIsPaneOpen: setIsFilterPaneOpen,
+      onChange: handleFiltersChange
+    })]
+  });
 };
 
-function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var SplitTransfersDashboard = function SplitTransfersDashboard(_ref) {
-  var searchProps = _ref.searchProps,
-    payableEntityColumns = _ref.payableEntityColumns;
-  var _getQueryParams = getQueryParams(),
-    _getQueryParams$searc = _getQueryParams.searchTerm,
-    searchTerm = _getQueryParams$searc === void 0 ? "" : _getQueryParams$searc;
-  var filterableColumns = buildFilterColumns(payableEntityColumns);
-  var searchKeywordProps = buildSearchProps(searchProps, searchTerm);
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedRows = _useState2[0],
-    setSelectedRows = _useState2[1];
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedRowData = _useState4[0],
-    setSelectedRowData = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isExportModalOpen = _useState6[0],
-    setIsExportModalOpen = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isCancelModalOpen = _useState8[0],
-    setIsCancelModalOpen = _useState8[1];
-  var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    isResumeModalOpen = _useState10[0],
-    setIsResumeModalOpen = _useState10[1];
-  var _useState11 = useState(false),
-    _useState12 = _slicedToArray(_useState11, 2),
-    hasBulkSelectedAllRows = _useState12[0],
-    setHasBulkSelectedAllRows = _useState12[1];
-  var _useState13 = useState(DEFAULT_SORT_PROPERTIES),
-    _useState14 = _slicedToArray(_useState13, 2),
-    sortProperties = _useState14[0],
-    setSortProperties = _useState14[1];
-  var _useState15 = useState(DEFAULT_PAGE_VALUES),
-    _useState16 = _slicedToArray(_useState15, 2),
-    pageProperties = _useState16[0],
-    setPageProperties = _useState16[1];
-  var _useState17 = useState(buildFiltersFromURL([].concat(_toConsumableArray(filterableColumns), [searchKeywordProps]))),
-    _useState18 = _slicedToArray(_useState17, 2),
-    filters = _useState18[0],
-    setFilters = _useState18[1];
-  var history = useHistory();
-  var _getQueryParams2 = getQueryParams(),
-    _getQueryParams2$tab = _getQueryParams2.tab,
-    tab = _getQueryParams2$tab === void 0 ? SPLIT_TRANSFERS_DASHBOARD_TAB.all : _getQueryParams2$tab;
-  var payload = _objectSpread(_objectSpread({
-    tab: tab,
-    filters: filters
-  }, pageProperties), sortProperties);
-  var _useFetchSplitTransfe = useFetchSplitTransfers(payload),
-    _useFetchSplitTransfe2 = _useFetchSplitTransfe.data,
-    _useFetchSplitTransfe3 = _useFetchSplitTransfe2 === void 0 ? {} : _useFetchSplitTransfe2,
-    splitTransfers = _useFetchSplitTransfe3.splitTransfers,
-    views = _useFetchSplitTransfe3.views,
-    isFetching = _useFetchSplitTransfe.isFetching,
-    isSplitTransfersLoading = _useFetchSplitTransfe.isPending;
-  var _useBulkUpdateSplitTr = useBulkUpdateSplitTransfers({
-      onSuccess: function onSuccess() {
-        setSelectedRowData([]);
-        setSelectedRows([]);
-      }
-    }),
-    updateSplitTransfers = _useBulkUpdateSplitTr.mutate,
-    isCancelling = _useBulkUpdateSplitTr.isPending;
-  var handleSplitTransfersUpdate = function handleSplitTransfersUpdate(status, reason) {
-    var ids = pluck("id", selectedRowData);
+const SplitTransfersDashboard = ({
+  searchProps,
+  payableEntityColumns
+}) => {
+  const {
+    searchTerm = ""
+  } = getQueryParams();
+  const filterableColumns = buildFilterColumns(payableEntityColumns);
+  const searchKeywordProps = buildSearchProps(searchProps, searchTerm);
+  const [selectedRows, setSelectedRows] = useState([]);
+  const [selectedRowData, setSelectedRowData] = useState([]);
+  const [isExportModalOpen, setIsExportModalOpen] = useState(false);
+  const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
+  const [isResumeModalOpen, setIsResumeModalOpen] = useState(false);
+  const [hasBulkSelectedAllRows, setHasBulkSelectedAllRows] = useState(false);
+  const [sortProperties, setSortProperties] = useState(DEFAULT_SORT_PROPERTIES);
+  const [pageProperties, setPageProperties] = useState(DEFAULT_PAGE_VALUES);
+  const [filters, setFilters] = useState(buildFiltersFromURL([...filterableColumns, searchKeywordProps]));
+  const history = useHistory();
+  const {
+    tab = SPLIT_TRANSFERS_DASHBOARD_TAB.all
+  } = getQueryParams();
+  const payload = {
+    tab,
+    filters,
+    ...pageProperties,
+    ...sortProperties
+  };
+  const {
+    data: {
+      splitTransfers,
+      views
+    } = {},
+    isFetching,
+    isPending: isSplitTransfersLoading
+  } = useFetchSplitTransfers(payload);
+  const {
+    mutate: updateSplitTransfers,
+    isPending: isCancelling
+  } = useBulkUpdateSplitTransfers({
+    onSuccess: () => {
+      setSelectedRowData([]);
+      setSelectedRows([]);
+    }
+  });
+  const handleSplitTransfersUpdate = (status, reason) => {
+    const ids = pluck("id", selectedRowData);
     updateSplitTransfers({
-      ids: ids,
-      status: status,
-      reason: reason,
+      ids,
+      status,
+      reason,
       isApplyChangesToAllRequired: hasBulkSelectedAllRows
     });
     setIsCancelModalOpen(false);
     setIsResumeModalOpen(false);
   };
-  var handleTablePagination = function handleTablePagination(page, pageSize) {
-    var queryParams = getQueryParams({
+  const handleTablePagination = (page, pageSize) => {
+    const queryParams = getQueryParams({
       toCamelCase: false
     });
     history.push(buildUrl(window.location.pathname, mergeLeft({
-      page: page,
+      page,
       page_size: pageSize
     }, queryParams)));
     setPageProperties({
-      page: page,
-      pageSize: pageSize
+      page,
+      pageSize
     });
   };
-  var handleRowSelect = function handleRowSelect(keys, rowData) {
+  const handleRowSelect = (keys, rowData) => {
     setSelectedRows(keys);
     setSelectedRowData(rowData);
   };
-  useEffect(function () {
+  useEffect(() => {
     handleTablePagination(DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE);
     setSortProperties(DEFAULT_SORT_PROPERTIES);
     setSelectedRowData([]);
     setSelectedRows([]);
   }, [filters, tab]);
   if (isSplitTransfersLoading || isCancelling) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React.createElement(Spinner, null));
+    return /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TopSection, {
-    filterableColumns: filterableColumns,
-    filters: filters,
-    hasBulkSelectedAllRows: hasBulkSelectedAllRows,
-    pageProperties: pageProperties,
-    payableEntityColumns: payableEntityColumns,
-    searchKeywordProps: searchKeywordProps,
-    selectedRowData: selectedRowData,
-    selectedRows: selectedRows,
-    setFilters: setFilters,
-    setIsCancelModalOpen: setIsCancelModalOpen,
-    setIsExportModalOpen: setIsExportModalOpen,
-    setIsResumeModalOpen: setIsResumeModalOpen,
-    setPageProperties: setPageProperties,
-    setSortProperties: setSortProperties,
-    views: views
-  }), /*#__PURE__*/React.createElement(List, {
-    handleTablePagination: handleTablePagination,
-    isFetching: isFetching,
-    pageProperties: pageProperties,
-    payableEntityColumns: payableEntityColumns,
-    selectedRows: selectedRows,
-    setHasBulkSelectedAllRows: setHasBulkSelectedAllRows,
-    setSelectedRows: setSelectedRows,
-    setSortProperties: setSortProperties,
-    splitTransfers: splitTransfers,
-    views: views,
-    onRowSelect: handleRowSelect
-  }), /*#__PURE__*/React.createElement(ExportModal, {
-    filters: filters,
-    isExportModalOpen: isExportModalOpen,
-    setIsExportModalOpen: setIsExportModalOpen,
-    sortProperties: sortProperties,
-    dashboardKind: DASHBOARD_KIND.splitTransfers
-  }), /*#__PURE__*/React.createElement(CancelModal, {
-    handleSplitTransfersUpdate: handleSplitTransfersUpdate,
-    isOpen: isCancelModalOpen,
-    onClose: function onClose() {
-      return setIsCancelModalOpen(false);
-    }
-  }), /*#__PURE__*/React.createElement(ResumeModal, {
-    handleSplitTransfersUpdate: handleSplitTransfersUpdate,
-    isOpen: isResumeModalOpen,
-    onClose: function onClose() {
-      return setIsResumeModalOpen(false);
-    }
-  }));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(TopSection, {
+      filterableColumns,
+      filters,
+      hasBulkSelectedAllRows,
+      pageProperties,
+      payableEntityColumns,
+      searchKeywordProps,
+      selectedRowData,
+      selectedRows,
+      setFilters,
+      setIsCancelModalOpen,
+      setIsExportModalOpen,
+      setIsResumeModalOpen,
+      setPageProperties,
+      setSortProperties,
+      views
+    }), /*#__PURE__*/jsx(List, {
+      handleTablePagination,
+      isFetching,
+      pageProperties,
+      payableEntityColumns,
+      selectedRows,
+      setHasBulkSelectedAllRows,
+      setSelectedRows,
+      setSortProperties,
+      splitTransfers,
+      views,
+      onRowSelect: handleRowSelect
+    }), /*#__PURE__*/jsx(ExportModal, {
+      filters,
+      isExportModalOpen,
+      setIsExportModalOpen,
+      sortProperties,
+      dashboardKind: DASHBOARD_KIND.splitTransfers
+    }), /*#__PURE__*/jsx(CancelModal, {
+      handleSplitTransfersUpdate,
+      isOpen: isCancelModalOpen,
+      onClose: () => setIsCancelModalOpen(false)
+    }), /*#__PURE__*/jsx(ResumeModal, {
+      handleSplitTransfersUpdate,
+      isOpen: isResumeModalOpen,
+      onClose: () => setIsResumeModalOpen(false)
+    })]
+  });
 };
 
 export { SplitTransfersDashboard as default };